From d0853cca1ff88d7ebc97fcf4268aad4e73470f74 Mon Sep 17 00:00:00 2001
From: Kuingsmile <96409857+Kuingsmile@users.noreply.github.com>
Date: Sun, 25 Jan 2026 12:58:38 +0800
Subject: [PATCH] :sparkles: Feature(custom): optimize image process setting
 page

---
 src/renderer/components/FirstTimeGuide.vue    |   44 +-
 .../components/ImageProcessSetting.vue        | 1447 ++++++++---------
 src/renderer/components/InputBoxDialog.vue    |   19 +-
 src/renderer/components/PerPicbedSetting.vue  |   28 +-
 .../components/common/customRange.vue         |    2 +-
 .../components/common/customSwitch.vue        |   15 +-
 .../components/css/FirstTimeGuide.css         |   16 -
 .../components/css/ImageProcessSetting.css    |   37 -
 src/renderer/pages/Gallery.vue                |   86 +-
 src/renderer/pages/PicGoSetting.vue           |    4 +-
 src/renderer/pages/css/Gallery.css            |   55 -
 11 files changed, 810 insertions(+), 943 deletions(-)
 delete mode 100644 src/renderer/components/css/FirstTimeGuide.css

diff --git a/src/renderer/components/FirstTimeGuide.vue b/src/renderer/components/FirstTimeGuide.vue
index 76051b43..93ea5ff1 100644
--- a/src/renderer/components/FirstTimeGuide.vue
+++ b/src/renderer/components/FirstTimeGuide.vue
@@ -53,21 +53,31 @@
           </div>
 
           <div class="flex justify-end gap-1.5">
-            <button v-if="currentStep > 0" class="guide-btn secondary" @click="handlePrevious">
-              <ChevronLeftIcon :size="16" />
-              {{ t('guide.previous') }}
-            </button>
-            <button class="guide-btn outline" @click="handleSkip">
-              {{ t('guide.skip') }}
-            </button>
-            <button v-if="currentStep < steps.length - 1" class="guide-btn primary" @click="handleNext">
-              {{ t('guide.next') }}
-              <ChevronRightIcon :size="16" />
-            </button>
-            <button v-else class="guide-btn success" @click="handleFinish">
-              <CheckCircleIcon :size="16" />
-              {{ t('guide.finish') }}
-            </button>
+            <CustomButton
+              v-if="currentStep > 0"
+              type="secondary"
+              :icon="ChevronLeftIcon"
+              :text="t('guide.previous')"
+              class="p-2!"
+              @click="handlePrevious"
+            />
+            <CustomButton class="p-2!" type="secondary" :text="t('guide.skip')" @click="handleSkip" />
+            <CustomButton
+              v-if="currentStep < steps.length - 1"
+              type="primary"
+              class="p-2!"
+              :icon="ChevronRightIcon"
+              :text="t('guide.next')"
+              @click="handleNext"
+            />
+            <CustomButton
+              v-else
+              type="primary"
+              class="p-2!"
+              :icon="CheckCircleIcon"
+              :text="t('guide.finish')"
+              @click="handleFinish"
+            />
           </div>
         </div>
       </div>
@@ -93,6 +103,8 @@ import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 
+import CustomButton from '@/components/common/CustomButton.vue'
+
 const { t } = useI18n()
 const route = useRoute()
 const router = useRouter()
@@ -363,5 +375,3 @@ onMounted(async () => {
   window.addEventListener('resize', updateSpotlight)
 })
 </script>
-
-<style scoped src="./css/FirstTimeGuide.css"></style>
diff --git a/src/renderer/components/ImageProcessSetting.vue b/src/renderer/components/ImageProcessSetting.vue
index e0bc4074..ab6b96ea 100644
--- a/src/renderer/components/ImageProcessSetting.vue
+++ b/src/renderer/components/ImageProcessSetting.vue
@@ -33,89 +33,70 @@
       >
         <!-- General Settings Tab -->
         <div v-if="activeTab === 'general'" key="general" class="flex flex-col gap-4">
-          <div class="settings-section">
-            <div class="section-header">
-              <div class="section-icon">
-                <Sliders :size="20" />
-              </div>
-              <div class="section-title-group">
-                <h2>{{ $t('pages.imageProcess.general.basicImageProcessing') }}</h2>
-              </div>
-            </div>
+          <SettingSection :icon="Sliders" :title="t('pages.imageProcess.general.basicImageProcessing')">
+            <SettingCard p1 class="flex flex-col justify-center">
+              <CustomSwitch
+                v-model="activeForm.compress.isRemoveExif"
+                :title="t('pages.imageProcess.general.isRemoveExif')"
+                small
+                no-border
+              />
 
-            <div class="form-grid">
-              <div class="form-group">
-                <customSwitch
-                  v-model="activeForm.compress.isRemoveExif"
-                  :title="$t('pages.imageProcess.general.isRemoveExif')"
-                  class="custom-switch"
-                />
+              <PerPicbedSetting
+                v-if="!configId"
+                :map-field="compressForm.isRemoveExifMap"
+                :default-value="defaultCompressSetting.isRemoveExif"
+                field-name="isRemoveExif"
+                :global-value="compressForm.isRemoveExif"
+                input-type="checkbox"
+                @map-change="
+                  (picbedType, value) =>
+                    safeSetMapValue(
+                      compressForm,
+                      'isRemoveExif',
+                      picbedType,
+                      value,
+                      defaultCompressSetting.isRemoveExif,
+                    )
+                "
+              />
+            </SettingCard>
+            <SettingCard class="flex flex-col justify-center">
+              <CustomRange
+                v-model.number="activeForm.compress.quality"
+                :title="t('pages.imageProcess.general.quality')"
+                :min="1"
+                :max="100"
+                :step="1"
+                :show-value="`${activeForm.compress.quality}%`"
+              />
 
-                <PerPicbedSetting
-                  v-if="!configId"
-                  :map-field="compressForm.isRemoveExifMap"
-                  :default-value="defaultCompressSetting.isRemoveExif"
-                  field-name="isRemoveExif"
-                  :global-value="compressForm.isRemoveExif"
-                  input-type="checkbox"
-                  @map-change="
-                    (picbedType, value) =>
-                      safeSetMapValue(
-                        compressForm,
-                        'isRemoveExif',
-                        picbedType,
-                        value,
-                        defaultCompressSetting.isRemoveExif,
-                      )
-                  "
-                />
-              </div>
+              <PerPicbedSetting
+                v-if="!configId"
+                :map-field="compressForm.qualityMap"
+                :default-value="defaultCompressSetting.quality"
+                field-name="quality"
+                :global-value="compressForm.quality"
+                input-type="range"
+                :range-min="1"
+                :range-max="100"
+                :range-step="1"
+                range-suffix="%"
+                @map-change="
+                  (picbedType, value) =>
+                    safeSetMapValue(compressForm, 'quality', picbedType, value, defaultCompressSetting.quality)
+                "
+              />
+            </SettingCard>
+          </SettingSection>
 
-              <div class="form-group">
-                <customRange
-                  v-model.number="activeForm.compress.quality"
-                  :title="$t('pages.imageProcess.general.quality')"
-                  :min="1"
-                  :max="100"
-                  :step="1"
-                  :show-value="`${activeForm.compress.quality}%`"
-                />
-
-                <PerPicbedSetting
-                  v-if="!configId"
-                  :map-field="compressForm.qualityMap"
-                  :default-value="defaultCompressSetting.quality"
-                  field-name="quality"
-                  :global-value="compressForm.quality"
-                  input-type="range"
-                  :range-min="1"
-                  :range-max="100"
-                  :range-step="1"
-                  range-suffix="%"
-                  @map-change="
-                    (picbedType, value) =>
-                      safeSetMapValue(compressForm, 'quality', picbedType, value, defaultCompressSetting.quality)
-                  "
-                />
-              </div>
-            </div>
-          </div>
-
-          <div class="settings-section">
-            <div class="section-header">
-              <div class="section-icon">
-                <RefreshCw :size="20" />
-              </div>
-              <div class="section-title-group">
-                <h2>{{ $t('pages.imageProcess.general.formatConversion') }}</h2>
-              </div>
-            </div>
-
-            <div class="form-group">
-              <customSwitch
+          <SettingSection :icon="RefreshCw" :title="t('pages.imageProcess.general.formatConversion')">
+            <SettingCard class="flex flex-col justify-center">
+              <CustomSwitch
                 v-model="activeForm.compress.isConvert"
-                :title="$t('pages.imageProcess.general.isConvert')"
-                class="custom-switch"
+                :title="t('pages.imageProcess.general.isConvert')"
+                no-border
+                small
               />
 
               <PerPicbedSetting
@@ -130,89 +111,86 @@
                     safeSetMapValue(compressForm, 'isConvert', picbedType, value, defaultCompressSetting.isConvert)
                 "
               />
-            </div>
+            </SettingCard>
 
-            <div v-if="activeForm.compress.isConvert" class="form-grid">
-              <div class="form-group">
-                <label class="title-text">{{ $t('pages.imageProcess.general.destinationFormat') }}</label>
-                <select v-model="activeForm.compress.convertFormat" class="form-input">
-                  <option v-for="format in availableFormat" :key="format" :value="format">
-                    {{ format.toUpperCase() }}
-                  </option>
-                </select>
+            <SettingCard v-if="activeForm.compress.isConvert">
+              <label class="text-base font-semibold text-main">{{
+                t('pages.imageProcess.general.destinationFormat')
+              }}</label>
+              <select v-model="activeForm.compress.convertFormat" class="form-input">
+                <option v-for="format in availableFormat" :key="format" :value="format">
+                  {{ format.toUpperCase() }}
+                </option>
+              </select>
 
-                <PerPicbedSetting
-                  v-if="!configId"
-                  :map-field="compressForm.convertFormatMap"
-                  :default-value="defaultCompressSetting.convertFormat"
-                  field-name="convertFormat"
-                  :global-value="compressForm.convertFormat"
-                  input-type="select"
-                  :select-options="availableFormat.map(format => ({ value: format, label: format.toUpperCase() }))"
-                  @map-change="
-                    (picbedType, value) =>
-                      safeSetMapValue(
-                        compressForm,
-                        'convertFormat',
-                        picbedType,
-                        value,
-                        defaultCompressSetting.convertFormat,
-                      )
-                  "
-                />
-              </div>
+              <PerPicbedSetting
+                v-if="!configId"
+                :map-field="compressForm.convertFormatMap"
+                :default-value="defaultCompressSetting.convertFormat"
+                field-name="convertFormat"
+                :global-value="compressForm.convertFormat"
+                input-type="select"
+                :select-options="availableFormat.map(format => ({ value: format, label: format.toUpperCase() }))"
+                @map-change="
+                  (picbedType, value) =>
+                    safeSetMapValue(
+                      compressForm,
+                      'convertFormat',
+                      picbedType,
+                      value,
+                      defaultCompressSetting.convertFormat,
+                    )
+                "
+              />
+            </SettingCard>
 
-              <div class="form-group">
-                <label class="title-text">{{ $t('pages.imageProcess.general.specificFormatConversion') }}</label>
-                <textarea
-                  v-model="convertStr"
-                  class="form-textarea"
-                  rows="3"
-                  placeholder='{"jpg": "png", "png": "jpg"}'
-                />
+            <SettingCard v-if="activeForm.compress.isConvert">
+              <label class="text-base font-semibold text-main">{{
+                t('pages.imageProcess.general.specificFormatConversion')
+              }}</label>
+              <textarea
+                v-model="convertStr"
+                class="form-textarea"
+                rows="3"
+                placeholder='{"jpg": "png", "png": "jpg"}'
+              />
 
-                <PerPicbedSetting
-                  v-if="!configId"
-                  :map-field="compressForm.formatConvertObjMap"
-                  :default-value="'{}'"
-                  field-name="formatConvertObj"
-                  :global-value="formatConvertObjStr"
-                  input-type="text"
-                  text-placeholder="{}"
-                  @map-change="
-                    (picbedType, value) =>
-                      safeSetMapValue(
-                        compressForm,
-                        'formatConvertObj',
-                        picbedType,
-                        value,
-                        defaultCompressSetting.formatConvertObj,
-                      )
-                  "
-                />
-              </div>
-            </div>
-          </div>
+              <PerPicbedSetting
+                v-if="!configId"
+                :map-field="compressForm.formatConvertObjMap"
+                :default-value="'{}'"
+                field-name="formatConvertObj"
+                :global-value="formatConvertObjStr"
+                input-type="text"
+                text-placeholder="{}"
+                @map-change="
+                  (picbedType, value) =>
+                    safeSetMapValue(
+                      compressForm,
+                      'formatConvertObj',
+                      picbedType,
+                      value,
+                      defaultCompressSetting.formatConvertObj,
+                    )
+                "
+              />
+            </SettingCard>
+          </SettingSection>
         </div>
 
         <!-- Watermark Tab -->
         <div v-else-if="activeTab === 'watermark'" key="watermark" class="flex flex-col gap-4">
-          <div class="settings-section">
-            <div class="section-header">
-              <div class="section-icon watermark-icon">
-                <Droplets :size="20" />
-              </div>
-              <div class="section-title-group">
-                <h2>{{ $t('pages.imageProcess.watermark.title') }}</h2>
-                <p>{{ $t('pages.imageProcess.watermark.description') }}</p>
-              </div>
-            </div>
-
-            <div class="form-group">
-              <customSwitch
+          <SettingSection
+            :icon="Droplets"
+            :title="t('pages.imageProcess.watermark.title')"
+            :description="t('pages.imageProcess.watermark.description')"
+          >
+            <SettingCard class="flex flex-col justify-center">
+              <CustomSwitch
                 v-model="activeForm.watermark.isAddWatermark"
-                :title="$t('pages.imageProcess.watermark.isAdd')"
-                class="custom-switch"
+                :title="t('pages.imageProcess.watermark.isAdd')"
+                small
+                no-border
               />
 
               <PerPicbedSetting
@@ -233,429 +211,430 @@
                     )
                 "
               />
-            </div>
+            </SettingCard>
 
-            <div
-              v-if="activeForm.watermark.isAddWatermark"
-              class="mt-4 border-t border-t-border pt-3 transition-all duration-200 ease-apple"
+            <SettingCard v-if="activeForm.watermark.isAddWatermark">
+              <label class="text-base font-semibold text-main">{{ t('pages.imageProcess.watermark.type') }}</label>
+              <div class="flex flex-wrap gap-4">
+                <CustomRadioOption
+                  v-model="activeForm.watermark.watermarkType"
+                  value="text"
+                  :title="t('pages.imageProcess.watermark.text')"
+                />
+                <CustomRadioOption
+                  v-model="activeForm.watermark.watermarkType"
+                  value="image"
+                  :title="t('pages.imageProcess.watermark.image')"
+                />
+              </div>
+
+              <PerPicbedSetting
+                v-if="!configId"
+                :map-field="waterMarkForm.watermarkTypeMap"
+                :default-value="defaultWaterMarkSetting.watermarkType"
+                field-name="watermarkType"
+                :global-value="waterMarkForm.watermarkType"
+                input-type="radio"
+                :radio-options="[
+                  { value: 'text', label: t('pages.imageProcess.watermark.text') },
+                  { value: 'image', label: t('pages.imageProcess.watermark.image') },
+                ]"
+                @map-change="
+                  (picbedType, value) =>
+                    safeSetMapValue(
+                      waterMarkForm,
+                      'watermarkType',
+                      picbedType,
+                      value,
+                      defaultWaterMarkSetting.watermarkType,
+                    )
+                "
+              />
+            </SettingCard>
+
+            <SettingCard v-if="activeForm.watermark.isAddWatermark" p1 class="flex flex-col justify-center">
+              <CustomSwitch
+                v-model="activeForm.watermark.isFullScreenWatermark"
+                :title="t('pages.imageProcess.watermark.isFullScreen')"
+                small
+                no-border
+              />
+
+              <PerPicbedSetting
+                v-if="!configId"
+                :map-field="waterMarkForm.isFullScreenWatermarkMap"
+                :default-value="defaultWaterMarkSetting.isFullScreenWatermark"
+                field-name="isFullScreenWatermark"
+                :global-value="waterMarkForm.isFullScreenWatermark"
+                input-type="checkbox"
+                @map-change="
+                  (picbedType, value) =>
+                    safeSetMapValue(
+                      waterMarkForm,
+                      'isFullScreenWatermark',
+                      picbedType,
+                      value,
+                      defaultWaterMarkSetting.isFullScreenWatermark,
+                    )
+                "
+              />
+            </SettingCard>
+
+            <SettingCard v-if="activeForm.watermark.isAddWatermark">
+              <CustomRange
+                v-model.number="activeForm.watermark.watermarkDegree"
+                :title="t('pages.imageProcess.watermark.degree')"
+                :min="-360"
+                :max="360"
+                :step="1"
+                :show-value="`${activeForm.watermark.watermarkDegree}°`"
+              />
+
+              <PerPicbedSetting
+                v-if="!configId"
+                :map-field="waterMarkForm.watermarkDegreeMap"
+                :default-value="defaultWaterMarkSetting.watermarkDegree"
+                field-name="watermarkDegree"
+                :global-value="waterMarkForm.watermarkDegree"
+                input-type="range"
+                :range-min="-360"
+                :range-max="360"
+                :range-step="1"
+                range-suffix="°"
+                @map-change="
+                  (picbedType, value) =>
+                    safeSetMapValue(
+                      waterMarkForm,
+                      'watermarkDegree',
+                      picbedType,
+                      value,
+                      defaultWaterMarkSetting.watermarkDegree,
+                    )
+                "
+              />
+            </SettingCard>
+
+            <SettingCard v-if="activeForm.watermark.isAddWatermark">
+              <CustomRange
+                v-model.number="activeForm.watermark.watermarkScaleRatio"
+                :title="t('pages.imageProcess.watermark.scaleRatio')"
+                :min="0"
+                :max="1"
+                :step="0.01"
+                :show-value="`${Math.round((activeForm.watermark.watermarkScaleRatio || 0) * 100)}%`"
+              />
+
+              <PerPicbedSetting
+                v-if="!configId"
+                :map-field="waterMarkForm.watermarkScaleRatioMap"
+                :default-value="defaultWaterMarkSetting.watermarkScaleRatio"
+                field-name="watermarkScaleRatio"
+                :global-value="waterMarkForm.watermarkScaleRatio"
+                input-type="range"
+                :range-min="0"
+                :range-max="1"
+                :range-step="0.01"
+                range-suffix="%"
+                @map-change="
+                  (picbedType, value) =>
+                    safeSetMapValue(
+                      waterMarkForm,
+                      'watermarkScaleRatio',
+                      picbedType,
+                      value,
+                      defaultWaterMarkSetting.watermarkScaleRatio,
+                    )
+                "
+              />
+            </SettingCard>
+
+            <SettingCard
+              v-if="activeForm.watermark.watermarkType === 'text' && activeForm.watermark.isAddWatermark"
+              class="flex flex-col justify-center"
             >
-              <div class="form-group">
-                <label class="title-text">{{ $t('pages.imageProcess.watermark.type') }}</label>
-                <div class="flex flex-wrap gap-4">
-                  <customRadioOption
-                    v-model="activeForm.watermark.watermarkType"
-                    value="text"
-                    :title="$t('pages.imageProcess.watermark.text')"
-                  />
-                  <customRadioOption
-                    v-model="activeForm.watermark.watermarkType"
-                    value="image"
-                    :title="$t('pages.imageProcess.watermark.image')"
-                  />
-                </div>
+              <label class="text-base font-semibold text-main">{{ t('pages.imageProcess.watermark.inputText') }}</label>
+              <input
+                v-model="activeForm.watermark.watermarkText"
+                type="text"
+                class="form-input"
+                :placeholder="t('pages.imageProcess.watermark.inputTextPlaceholder')"
+              />
 
-                <PerPicbedSetting
-                  v-if="!configId"
-                  :map-field="waterMarkForm.watermarkTypeMap"
-                  :default-value="defaultWaterMarkSetting.watermarkType"
-                  field-name="watermarkType"
-                  :global-value="waterMarkForm.watermarkType"
-                  input-type="radio"
-                  :radio-options="[
-                    { value: 'text', label: $t('pages.imageProcess.watermark.text') },
-                    { value: 'image', label: $t('pages.imageProcess.watermark.image') },
-                  ]"
-                  @map-change="
-                    (picbedType, value) =>
-                      safeSetMapValue(
-                        waterMarkForm,
-                        'watermarkType',
-                        picbedType,
-                        value,
-                        defaultWaterMarkSetting.watermarkType,
-                      )
-                  "
-                />
-              </div>
+              <!-- Per-picbed settings for watermarkText -->
+              <PerPicbedSetting
+                v-if="!configId"
+                :map-field="waterMarkForm.watermarkTextMap"
+                :default-value="defaultWaterMarkSetting.watermarkText"
+                field-name="watermarkText"
+                :global-value="waterMarkForm.watermarkText"
+                input-type="text"
+                :text-placeholder="t('pages.imageProcess.watermark.inputTextPlaceholder')"
+                @map-change="
+                  (picbedType, value) =>
+                    safeSetMapValue(
+                      waterMarkForm,
+                      'watermarkText',
+                      picbedType,
+                      value,
+                      defaultWaterMarkSetting.watermarkText,
+                    )
+                "
+              />
+            </SettingCard>
 
-              <div class="form-grid">
-                <div class="form-group">
-                  <customSwitch
-                    v-model="activeForm.watermark.isFullScreenWatermark"
-                    :title="$t('pages.imageProcess.watermark.isFullScreen')"
-                    class="custom-switch"
-                  />
+            <SettingCard
+              v-if="activeForm.watermark.watermarkType === 'text' && activeForm.watermark.isAddWatermark"
+              class="flex flex-col justify-center"
+            >
+              <label class="text-base font-semibold text-main">{{
+                t('pages.imageProcess.watermark.textFontPath')
+              }}</label>
+              <input
+                v-model="activeForm.watermark.watermarkFontPath"
+                type="text"
+                class="form-input"
+                :placeholder="t('pages.imageProcess.watermark.textFontPathPlaceholder')"
+              />
 
-                  <PerPicbedSetting
-                    v-if="!configId"
-                    :map-field="waterMarkForm.isFullScreenWatermarkMap"
-                    :default-value="defaultWaterMarkSetting.isFullScreenWatermark"
-                    field-name="isFullScreenWatermark"
-                    :global-value="waterMarkForm.isFullScreenWatermark"
-                    input-type="checkbox"
-                    @map-change="
-                      (picbedType, value) =>
-                        safeSetMapValue(
-                          waterMarkForm,
-                          'isFullScreenWatermark',
-                          picbedType,
-                          value,
-                          defaultWaterMarkSetting.isFullScreenWatermark,
-                        )
-                    "
-                  />
-                </div>
+              <PerPicbedSetting
+                v-if="!configId"
+                :map-field="waterMarkForm.watermarkFontPathMap"
+                :default-value="defaultWaterMarkSetting.watermarkFontPath"
+                field-name="watermarkFontPath"
+                :global-value="waterMarkForm.watermarkFontPath"
+                input-type="text"
+                :text-placeholder="t('pages.imageProcess.watermark.textFontPathPlaceholder')"
+                @map-change="
+                  (picbedType, value) =>
+                    safeSetMapValue(
+                      waterMarkForm,
+                      'watermarkFontPath',
+                      picbedType,
+                      value,
+                      defaultWaterMarkSetting.watermarkFontPath,
+                    )
+                "
+              />
+            </SettingCard>
 
-                <div class="form-group">
-                  <customRange
-                    v-model.number="activeForm.watermark.watermarkDegree"
-                    :title="$t('pages.imageProcess.watermark.degree')"
-                    :min="-360"
-                    :max="360"
-                    :step="1"
-                    :show-value="`${activeForm.watermark.watermarkDegree}°`"
-                  />
-
-                  <PerPicbedSetting
-                    v-if="!configId"
-                    :map-field="waterMarkForm.watermarkDegreeMap"
-                    :default-value="defaultWaterMarkSetting.watermarkDegree"
-                    field-name="watermarkDegree"
-                    :global-value="waterMarkForm.watermarkDegree"
-                    input-type="range"
-                    :range-min="-360"
-                    :range-max="360"
-                    :range-step="1"
-                    range-suffix="°"
-                    @map-change="
-                      (picbedType, value) =>
-                        safeSetMapValue(
-                          waterMarkForm,
-                          'watermarkDegree',
-                          picbedType,
-                          value,
-                          defaultWaterMarkSetting.watermarkDegree,
-                        )
-                    "
-                  />
-                </div>
-
-                <div class="form-group">
-                  <customRange
-                    v-model.number="activeForm.watermark.watermarkScaleRatio"
-                    :title="$t('pages.imageProcess.watermark.scaleRatio')"
-                    :min="0"
-                    :max="1"
-                    :step="0.01"
-                    :show-value="`${Math.round((activeForm.watermark.watermarkScaleRatio || 0) * 100)}%`"
-                  />
-
-                  <PerPicbedSetting
-                    v-if="!configId"
-                    :map-field="waterMarkForm.watermarkScaleRatioMap"
-                    :default-value="defaultWaterMarkSetting.watermarkScaleRatio"
-                    field-name="watermarkScaleRatio"
-                    :global-value="waterMarkForm.watermarkScaleRatio"
-                    input-type="range"
-                    :range-min="0"
-                    :range-max="1"
-                    :range-step="0.01"
-                    range-suffix="%"
-                    @map-change="
-                      (picbedType, value) =>
-                        safeSetMapValue(
-                          waterMarkForm,
-                          'watermarkScaleRatio',
-                          picbedType,
-                          value,
-                          defaultWaterMarkSetting.watermarkScaleRatio,
-                        )
-                    "
-                  />
-                </div>
-              </div>
-
-              <div v-if="activeForm.watermark.watermarkType === 'text'" class="form-grid">
-                <div class="form-group">
-                  <label class="title-text">{{ $t('pages.imageProcess.watermark.inputText') }}</label>
-                  <input
-                    v-model="activeForm.watermark.watermarkText"
-                    type="text"
-                    class="form-input"
-                    :placeholder="$t('pages.imageProcess.watermark.inputTextPlaceholder')"
-                  />
-
-                  <!-- Per-picbed settings for watermarkText -->
-                  <PerPicbedSetting
-                    v-if="!configId"
-                    :map-field="waterMarkForm.watermarkTextMap"
-                    :default-value="defaultWaterMarkSetting.watermarkText"
-                    field-name="watermarkText"
-                    :global-value="waterMarkForm.watermarkText"
-                    input-type="text"
-                    :text-placeholder="$t('pages.imageProcess.watermark.inputTextPlaceholder')"
-                    @map-change="
-                      (picbedType, value) =>
-                        safeSetMapValue(
-                          waterMarkForm,
-                          'watermarkText',
-                          picbedType,
-                          value,
-                          defaultWaterMarkSetting.watermarkText,
-                        )
-                    "
-                  />
-                </div>
-
-                <div class="form-group">
-                  <label class="title-text">{{ $t('pages.imageProcess.watermark.textFontPath') }}</label>
-                  <input
-                    v-model="activeForm.watermark.watermarkFontPath"
-                    type="text"
-                    class="form-input"
-                    :placeholder="$t('pages.imageProcess.watermark.textFontPathPlaceholder')"
-                  />
-
-                  <PerPicbedSetting
-                    v-if="!configId"
-                    :map-field="waterMarkForm.watermarkFontPathMap"
-                    :default-value="defaultWaterMarkSetting.watermarkFontPath"
-                    field-name="watermarkFontPath"
-                    :global-value="waterMarkForm.watermarkFontPath"
-                    input-type="text"
-                    :text-placeholder="$t('pages.imageProcess.watermark.textFontPathPlaceholder')"
-                    @map-change="
-                      (picbedType, value) =>
-                        safeSetMapValue(
-                          waterMarkForm,
-                          'watermarkFontPath',
-                          picbedType,
-                          value,
-                          defaultWaterMarkSetting.watermarkFontPath,
-                        )
-                    "
-                  />
-                </div>
-
-                <div class="form-group">
-                  <label class="title-text">{{ $t('pages.imageProcess.watermark.color') }}</label>
-                  <div class="flex flex-wrap items-center gap-2">
-                    <input
-                      v-model="activeForm.watermark.watermarkColor"
-                      type="color"
-                      class="h-[48px] w-[48px] cursor-pointer overflow-hidden rounded-lg border border-border bg-bg p-0.5 transition-all duration-200 ease-apple hover:border-accent hover:shadow-sm focus:border-accent focus:shadow-sm focus:outline-none"
-                    />
-                    <input
-                      v-model="activeForm.watermark.watermarkColor"
-                      type="text"
-                      class="form-input flex-1"
-                      placeholder="#CCCCCC73"
-                    />
-                  </div>
-
-                  <PerPicbedSetting
-                    v-if="!configId"
-                    :map-field="waterMarkForm.watermarkColorMap"
-                    :default-value="defaultWaterMarkSetting.watermarkColor"
-                    field-name="watermarkColor"
-                    :global-value="waterMarkForm.watermarkColor"
-                    input-type="color"
-                    @map-change="
-                      (picbedType, value) =>
-                        safeSetMapValue(
-                          waterMarkForm,
-                          'watermarkColor',
-                          picbedType,
-                          value,
-                          defaultWaterMarkSetting.watermarkColor,
-                        )
-                    "
-                  />
-                </div>
-              </div>
-
-              <!-- Image Watermark Settings -->
-              <div v-if="activeForm.watermark.watermarkType === 'image'" class="form-group">
-                <label class="title-text">{{ $t('pages.imageProcess.watermark.imagePath') }}</label>
+            <SettingCard
+              v-if="activeForm.watermark.watermarkType === 'text' && activeForm.watermark.isAddWatermark"
+              class="flex flex-col justify-center"
+            >
+              <label class="text-base font-semibold text-main">{{ t('pages.imageProcess.watermark.color') }}</label>
+              <div class="flex flex-wrap items-center gap-2">
                 <input
-                  v-model="activeForm.watermark.watermarkImagePath"
+                  v-model="activeForm.watermark.watermarkColor"
+                  type="color"
+                  class="h-[48px] w-[48px] cursor-pointer overflow-hidden rounded-lg border border-border bg-bg p-0.5 transition-all duration-200 ease-apple hover:border-accent hover:shadow-sm focus:border-accent focus:shadow-sm focus:outline-none"
+                />
+                <input
+                  v-model="activeForm.watermark.watermarkColor"
                   type="text"
-                  class="form-input"
-                  :placeholder="$t('pages.imageProcess.watermark.imagePathPlaceholder')"
-                />
-
-                <PerPicbedSetting
-                  v-if="!configId"
-                  :map-field="waterMarkForm.watermarkImagePathMap"
-                  :default-value="defaultWaterMarkSetting.watermarkImagePath"
-                  field-name="watermarkImagePath"
-                  :global-value="waterMarkForm.watermarkImagePath"
-                  input-type="text"
-                  :text-placeholder="$t('pages.imageProcess.watermark.imagePathPlaceholder')"
-                  @map-change="
-                    (picbedType, value) =>
-                      safeSetMapValue(
-                        waterMarkForm,
-                        'watermarkImagePath',
-                        picbedType,
-                        value,
-                        defaultWaterMarkSetting.watermarkImagePath,
-                      )
-                  "
+                  class="form-input flex-1"
+                  placeholder="#CCCCCC73"
                 />
               </div>
 
-              <div v-if="activeForm.watermark.watermarkType === 'image'" class="form-group">
-                <customRange
-                  v-model.number="activeForm.watermark.watermarkImageOpacity"
-                  :title="$t('pages.imageProcess.watermark.imageOpacity')"
-                  :min="0"
-                  :max="255"
-                  :step="1"
-                  :show-value="`${activeForm.watermark.watermarkImageOpacity || 0}`"
-                />
+              <PerPicbedSetting
+                v-if="!configId"
+                :map-field="waterMarkForm.watermarkColorMap"
+                :default-value="defaultWaterMarkSetting.watermarkColor"
+                field-name="watermarkColor"
+                :global-value="waterMarkForm.watermarkColor"
+                input-type="color"
+                @map-change="
+                  (picbedType, value) =>
+                    safeSetMapValue(
+                      waterMarkForm,
+                      'watermarkColor',
+                      picbedType,
+                      value,
+                      defaultWaterMarkSetting.watermarkColor,
+                    )
+                "
+              />
+            </SettingCard>
 
-                <PerPicbedSetting
-                  v-if="!configId"
-                  :map-field="waterMarkForm.watermarkImageOpacityMap"
-                  :default-value="defaultWaterMarkSetting.watermarkImageOpacity"
-                  field-name="watermarkImageOpacity"
-                  :global-value="waterMarkForm.watermarkImageOpacity"
-                  input-type="range"
-                  :range-min="0"
-                  :range-max="255"
-                  :range-step="1"
-                  @map-change="
-                    (picbedType, value) =>
-                      safeSetMapValue(
-                        waterMarkForm,
-                        'watermarkImageOpacity',
-                        picbedType,
-                        value,
-                        defaultWaterMarkSetting.watermarkImageOpacity,
-                      )
-                  "
-                />
+            <!-- Image Watermark Settings -->
+            <SettingCard
+              v-if="activeForm.watermark.watermarkType === 'image' && activeForm.watermark.isAddWatermark"
+              class="flex flex-col justify-center"
+            >
+              <label class="text-base font-semibold text-main">{{ t('pages.imageProcess.watermark.imagePath') }}</label>
+              <input
+                v-model="activeForm.watermark.watermarkImagePath"
+                type="text"
+                class="form-input"
+                :placeholder="t('pages.imageProcess.watermark.imagePathPlaceholder')"
+              />
+
+              <PerPicbedSetting
+                v-if="!configId"
+                :map-field="waterMarkForm.watermarkImagePathMap"
+                :default-value="defaultWaterMarkSetting.watermarkImagePath"
+                field-name="watermarkImagePath"
+                :global-value="waterMarkForm.watermarkImagePath"
+                input-type="text"
+                :text-placeholder="t('pages.imageProcess.watermark.imagePathPlaceholder')"
+                @map-change="
+                  (picbedType, value) =>
+                    safeSetMapValue(
+                      waterMarkForm,
+                      'watermarkImagePath',
+                      picbedType,
+                      value,
+                      defaultWaterMarkSetting.watermarkImagePath,
+                    )
+                "
+              />
+            </SettingCard>
+
+            <SettingCard
+              v-if="activeForm.watermark.watermarkType === 'image' && activeForm.watermark.isAddWatermark"
+              class="flex flex-col justify-center"
+            >
+              <CustomRange
+                v-model.number="activeForm.watermark.watermarkImageOpacity"
+                :title="t('pages.imageProcess.watermark.imageOpacity')"
+                :min="0"
+                :max="255"
+                :step="1"
+                :show-value="`${activeForm.watermark.watermarkImageOpacity || 0}`"
+              />
+
+              <PerPicbedSetting
+                v-if="!configId"
+                :map-field="waterMarkForm.watermarkImageOpacityMap"
+                :default-value="defaultWaterMarkSetting.watermarkImageOpacity"
+                field-name="watermarkImageOpacity"
+                :global-value="waterMarkForm.watermarkImageOpacity"
+                input-type="range"
+                :range-min="0"
+                :range-max="255"
+                :range-step="1"
+                @map-change="
+                  (picbedType, value) =>
+                    safeSetMapValue(
+                      waterMarkForm,
+                      'watermarkImageOpacity',
+                      picbedType,
+                      value,
+                      defaultWaterMarkSetting.watermarkImageOpacity,
+                    )
+                "
+              />
+            </SettingCard>
+
+            <SettingCard v-if="activeForm.watermark.isAddWatermark">
+              <label class="text-base font-semibold text-main">{{ t('pages.imageProcess.watermark.position') }}</label>
+              <div class="grid max-w-[320px] grid-cols-3 gap-2.5">
+                <button
+                  v-for="[key, label] in waterMarkPositionMap"
+                  :key="key"
+                  type="button"
+                  class="rounded-lg border border-border-secondary bg-bg p-3 text-center text-sm font-semibold text-secondary transition-all duration-200 ease-apple hover:border-accent hover:bg-accent/8 hover:text-main [.active]:border-accent/10 [.active]:bg-accent/20 [.active]:text-main"
+                  :class="{ active: activeForm.watermark.watermarkPosition === key }"
+                  @click="activeForm.watermark.watermarkPosition = key as any"
+                >
+                  {{ label }}
+                </button>
               </div>
 
-              <div class="form-group">
-                <label class="title-text">{{ $t('pages.imageProcess.watermark.position') }}</label>
-                <div class="grid max-w-[320px] grid-cols-3 gap-2.5">
-                  <button
-                    v-for="[key, label] in waterMarkPositionMap"
-                    :key="key"
-                    type="button"
-                    class="rounded-lg border border-border-secondary bg-bg p-3 text-center text-sm font-semibold text-secondary transition-all duration-200 ease-apple hover:border-accent hover:bg-accent/8 hover:text-main [.active]:border-accent/10 [.active]:bg-accent/20 [.active]:text-main"
-                    :class="{ active: activeForm.watermark.watermarkPosition === key }"
-                    @click="activeForm.watermark.watermarkPosition = key as any"
-                  >
-                    {{ label }}
-                  </button>
-                </div>
-
-                <PerPicbedSetting
-                  v-if="!configId"
-                  :map-field="waterMarkForm.watermarkPositionMap"
-                  :default-value="defaultWaterMarkSetting.watermarkPosition"
-                  field-name="watermarkPosition"
-                  :global-value="waterMarkForm.watermarkPosition"
-                  input-type="select"
-                  :select-options="
-                    Array.from(waterMarkPositionMap.entries()).map(([key, label]) => ({
-                      value: key,
-                      label,
-                    }))
-                  "
-                  @map-change="
-                    (picbedType, value) =>
-                      safeSetMapValue(
-                        waterMarkForm,
-                        'watermarkPosition',
-                        picbedType,
-                        value,
-                        defaultWaterMarkSetting.watermarkPosition,
-                      )
-                  "
-                />
-              </div>
-            </div>
-          </div>
+              <PerPicbedSetting
+                v-if="!configId"
+                :map-field="waterMarkForm.watermarkPositionMap"
+                :default-value="defaultWaterMarkSetting.watermarkPosition"
+                field-name="watermarkPosition"
+                :global-value="waterMarkForm.watermarkPosition"
+                input-type="select"
+                :select-options="
+                  Array.from(waterMarkPositionMap.entries()).map(([key, label]) => ({
+                    value: key,
+                    label,
+                  }))
+                "
+                @map-change="
+                  (picbedType, value) =>
+                    safeSetMapValue(
+                      waterMarkForm,
+                      'watermarkPosition',
+                      picbedType,
+                      value,
+                      defaultWaterMarkSetting.watermarkPosition,
+                    )
+                "
+              />
+            </SettingCard>
+          </SettingSection>
         </div>
 
         <!-- Transform Tab -->
         <div v-else-if="activeTab === 'transform'" key="transform" class="flex flex-col gap-4">
-          <div class="settings-section">
-            <div class="section-header">
-              <div class="section-icon transform-icon">
-                <FlipHorizontal :size="20" />
-              </div>
-              <div class="section-title-group">
-                <h2>{{ $t('pages.imageProcess.transform.title') }}</h2>
-                <p>{{ $t('pages.imageProcess.transform.description') }}</p>
-              </div>
-            </div>
-
-            <div class="form-grid">
-              <div class="form-group">
-                <customSwitch
-                  v-model="activeForm.compress.isFlip"
-                  :title="$t('pages.imageProcess.transform.isFlip')"
-                  class="custom-switch"
-                />
-
-                <PerPicbedSetting
-                  v-if="!configId"
-                  :map-field="compressForm.isFlipMap"
-                  :default-value="defaultCompressSetting.isFlip"
-                  field-name="isFlip"
-                  :global-value="compressForm.isFlip"
-                  input-type="checkbox"
-                  @map-change="
-                    (picbedType, value) =>
-                      safeSetMapValue(compressForm, 'isFlip', picbedType, value, defaultCompressSetting.isFlip)
-                  "
-                />
-              </div>
-
-              <div class="form-group">
-                <customSwitch
-                  v-model="activeForm.compress.isFlop"
-                  :title="$t('pages.imageProcess.transform.isFlop')"
-                  class="custom-switch"
-                />
-
-                <PerPicbedSetting
-                  v-if="!configId"
-                  :map-field="compressForm.isFlopMap"
-                  :default-value="defaultCompressSetting.isFlop"
-                  field-name="isFlop"
-                  :global-value="compressForm.isFlop"
-                  input-type="checkbox"
-                  @map-change="
-                    (picbedType, value) =>
-                      safeSetMapValue(compressForm, 'isFlop', picbedType, value, defaultCompressSetting.isFlop)
-                  "
-                />
-              </div>
-            </div>
-          </div>
-
-          <div class="settings-section">
-            <div class="section-header">
-              <div class="section-icon rotate-icon">
-                <RotateCw :size="20" />
-              </div>
-              <div class="section-title-group">
-                <h2>{{ $t('pages.imageProcess.transform.rotationTitle') }}</h2>
-                <p>{{ $t('pages.imageProcess.transform.rotationDescription') }}</p>
-              </div>
-            </div>
-
-            <div class="form-group">
-              <customSwitch
-                v-model="activeForm.compress.isRotate"
-                :title="$t('pages.imageProcess.transform.isRotate')"
+          <SettingSection
+            :icon="FlipHorizontal"
+            :title="t('pages.imageProcess.transform.title')"
+            :description="t('pages.imageProcess.transform.description')"
+          >
+            <SettingCard>
+              <CustomSwitch
+                v-model="activeForm.compress.isFlip"
+                :title="t('pages.imageProcess.transform.isFlip')"
                 class="custom-switch"
+                no-border
+                small
+              />
+
+              <PerPicbedSetting
+                v-if="!configId"
+                :map-field="compressForm.isFlipMap"
+                :default-value="defaultCompressSetting.isFlip"
+                field-name="isFlip"
+                :global-value="compressForm.isFlip"
+                input-type="checkbox"
+                @map-change="
+                  (picbedType, value) =>
+                    safeSetMapValue(compressForm, 'isFlip', picbedType, value, defaultCompressSetting.isFlip)
+                "
+              />
+            </SettingCard>
+
+            <SettingCard>
+              <CustomSwitch
+                v-model="activeForm.compress.isFlop"
+                :title="t('pages.imageProcess.transform.isFlop')"
+                class="custom-switch"
+                small
+                no-border
+              />
+
+              <PerPicbedSetting
+                v-if="!configId"
+                :map-field="compressForm.isFlopMap"
+                :default-value="defaultCompressSetting.isFlop"
+                field-name="isFlop"
+                :global-value="compressForm.isFlop"
+                input-type="checkbox"
+                @map-change="
+                  (picbedType, value) =>
+                    safeSetMapValue(compressForm, 'isFlop', picbedType, value, defaultCompressSetting.isFlop)
+                "
+              />
+            </SettingCard>
+          </SettingSection>
+
+          <SettingSection
+            :icon="RotateCw"
+            :title="t('pages.imageProcess.transform.rotationTitle')"
+            :description="t('pages.imageProcess.transform.rotationDescription')"
+          >
+            <SettingCard class="flex flex-col justify-center">
+              <CustomSwitch
+                v-model="activeForm.compress.isRotate"
+                :title="t('pages.imageProcess.transform.isRotate')"
+                class="custom-switch"
+                no-border
+                small
               />
 
               <PerPicbedSetting
@@ -670,12 +649,12 @@
                     safeSetMapValue(compressForm, 'isRotate', picbedType, value, defaultCompressSetting.isRotate)
                 "
               />
-            </div>
+            </SettingCard>
 
-            <div v-if="activeForm.compress.isRotate" class="form-group">
-              <customRange
+            <SettingCard v-if="activeForm.compress.isRotate" class="flex flex-col justify-center">
+              <CustomRange
                 v-model.number="activeForm.compress.rotateDegree"
-                :title="$t('pages.imageProcess.transform.rotationDegree')"
+                :title="t('pages.imageProcess.transform.rotationDegree')"
                 :min="-360"
                 :max="360"
                 :step="1"
@@ -704,25 +683,21 @@
                     )
                 "
               />
-            </div>
-          </div>
+            </SettingCard>
+          </SettingSection>
 
-          <div class="settings-section">
-            <div class="section-header">
-              <div class="section-icon resize-icon">
-                <Maximize2 :size="20" />
-              </div>
-              <div class="section-title-group">
-                <h2>{{ $t('pages.imageProcess.transform.resizeTitle') }}</h2>
-                <p>{{ $t('pages.imageProcess.transform.resizeDescription') }}</p>
-              </div>
-            </div>
-
-            <div class="form-group">
-              <customSwitch
+          <SettingSection
+            :icon="Maximize2"
+            :title="t('pages.imageProcess.transform.resizeTitle')"
+            :description="t('pages.imageProcess.transform.resizeDescription')"
+          >
+            <SettingCard class="flex flex-col justify-center">
+              <CustomSwitch
                 v-model="activeForm.compress.isReSize"
-                :title="$t('pages.imageProcess.transform.isResize')"
+                :title="t('pages.imageProcess.transform.isResize')"
                 class="custom-switch"
+                no-border
+                small
               />
 
               <PerPicbedSetting
@@ -737,117 +712,102 @@
                     safeSetMapValue(compressForm, 'isReSize', picbedType, value, defaultCompressSetting.isReSize)
                 "
               />
-            </div>
+            </SettingCard>
 
-            <div
-              v-if="activeForm.compress.isReSize"
-              class="mt-4 border-t border-t-border pt-3 transition-all duration-200 ease-apple"
-            >
-              <div class="form-grid">
-                <div class="form-group">
-                  <label class="title-text">{{ $t('pages.imageProcess.transform.resizeWidth') }}</label>
-                  <input v-model.number="activeForm.compress.reSizeWidth" type="number" min="0" class="form-input" />
+            <SettingCard v-if="activeForm.compress.isReSize">
+              <label class="text-base font-semibold text-main">{{
+                t('pages.imageProcess.transform.resizeWidth')
+              }}</label>
+              <input v-model.number="activeForm.compress.reSizeWidth" type="number" min="0" class="form-input" />
 
-                  <PerPicbedSetting
-                    v-if="!configId"
-                    :map-field="compressForm.reSizeWidthMap"
-                    :default-value="defaultCompressSetting.reSizeWidth"
-                    field-name="reSizeWidth"
-                    :global-value="compressForm.reSizeWidth"
-                    input-type="number"
-                    :number-min="0"
-                    :number-max="10000"
-                    @map-change="
-                      (picbedType, value) =>
-                        safeSetMapValue(
-                          compressForm,
-                          'reSizeWidth',
-                          picbedType,
-                          value,
-                          defaultCompressSetting.reSizeWidth,
-                        )
-                    "
-                  />
-                </div>
-
-                <div class="form-group">
-                  <label class="title-text">{{ $t('pages.imageProcess.transform.resizeHeight') }}</label>
-                  <input v-model.number="activeForm.compress.reSizeHeight" type="number" min="0" class="form-input" />
-
-                  <PerPicbedSetting
-                    v-if="!configId"
-                    :map-field="compressForm.reSizeHeightMap"
-                    :default-value="defaultCompressSetting.reSizeHeight"
-                    field-name="reSizeHeight"
-                    :global-value="compressForm.reSizeHeight"
-                    input-type="number"
-                    :number-min="0"
-                    :number-max="10000"
-                    @map-change="
-                      (picbedType, value) =>
-                        safeSetMapValue(
-                          compressForm,
-                          'reSizeHeight',
-                          picbedType,
-                          value,
-                          defaultCompressSetting.reSizeHeight,
-                        )
-                    "
-                  />
-                </div>
-              </div>
-
-              <div
-                v-if="
-                  ((activeForm.compress.reSizeHeight || 0) > 0 && (activeForm.compress.reSizeWidth || 0) === 0) ||
-                  ((activeForm.compress.reSizeWidth || 0) > 0 && (activeForm.compress.reSizeHeight || 0) === 0)
+              <PerPicbedSetting
+                v-if="!configId"
+                :map-field="compressForm.reSizeWidthMap"
+                :default-value="defaultCompressSetting.reSizeWidth"
+                field-name="reSizeWidth"
+                :global-value="compressForm.reSizeWidth"
+                input-type="number"
+                :number-min="0"
+                :number-max="10000"
+                @map-change="
+                  (picbedType, value) =>
+                    safeSetMapValue(compressForm, 'reSizeWidth', picbedType, value, defaultCompressSetting.reSizeWidth)
                 "
-                class="form-group"
-              >
-                <customSwitch
-                  v-model="activeForm.compress.skipReSizeOfSmallImg"
-                  :title="$t('pages.imageProcess.transform.skipResizeOfSmallImgHeight')"
-                  class="custom-switch"
-                />
+              />
+            </SettingCard>
 
-                <PerPicbedSetting
-                  v-if="!configId"
-                  :map-field="compressForm.skipReSizeOfSmallImgMap"
-                  :default-value="defaultCompressSetting.skipReSizeOfSmallImg"
-                  field-name="skipReSizeOfSmallImg"
-                  :global-value="compressForm.skipReSizeOfSmallImg"
-                  input-type="checkbox"
-                  @map-change="
-                    (picbedType, value) =>
-                      safeSetMapValue(
-                        compressForm,
-                        'skipReSizeOfSmallImg',
-                        picbedType,
-                        value,
-                        defaultCompressSetting.skipReSizeOfSmallImg,
-                      )
-                  "
-                />
-              </div>
-            </div>
-          </div>
+            <SettingCard v-if="activeForm.compress.isReSize" class="flex flex-col justify-center">
+              <label class="text-base font-semibold text-main">{{
+                t('pages.imageProcess.transform.resizeHeight')
+              }}</label>
+              <input v-model.number="activeForm.compress.reSizeHeight" type="number" min="0" class="form-input" />
 
-          <div class="settings-section">
-            <div class="section-header">
-              <div class="section-icon percent-icon">
-                <Percent :size="20" />
-              </div>
-              <div class="section-title-group">
-                <h2>{{ $t('pages.imageProcess.transform.percentageResize') }}</h2>
-              </div>
-            </div>
+              <PerPicbedSetting
+                v-if="!configId"
+                :map-field="compressForm.reSizeHeightMap"
+                :default-value="defaultCompressSetting.reSizeHeight"
+                field-name="reSizeHeight"
+                :global-value="compressForm.reSizeHeight"
+                input-type="number"
+                :number-min="0"
+                :number-max="10000"
+                @map-change="
+                  (picbedType, value) =>
+                    safeSetMapValue(
+                      compressForm,
+                      'reSizeHeight',
+                      picbedType,
+                      value,
+                      defaultCompressSetting.reSizeHeight,
+                    )
+                "
+              />
+            </SettingCard>
 
-            <div class="form-group">
-              <customSwitch
-                v-model="activeForm.compress.isReSizeByPercent"
-                :title="$t('pages.imageProcess.transform.isResizeByPercent')"
-                :description="$t('pages.imageProcess.transform.isResizeByPercentHint')"
+            <SettingCard
+              v-if="
+                ((activeForm.compress.reSizeHeight || 0) > 0 && (activeForm.compress.reSizeWidth || 0) === 0) ||
+                ((activeForm.compress.reSizeWidth || 0) > 0 && (activeForm.compress.reSizeHeight || 0) === 0)
+              "
+              class="flex flex-col justify-center"
+            >
+              <CustomSwitch
+                v-model="activeForm.compress.skipReSizeOfSmallImg"
+                :title="t('pages.imageProcess.transform.skipResizeOfSmallImgHeight')"
                 class="custom-switch"
+                no-border
+                small
+              />
+
+              <PerPicbedSetting
+                v-if="!configId"
+                :map-field="compressForm.skipReSizeOfSmallImgMap"
+                :default-value="defaultCompressSetting.skipReSizeOfSmallImg"
+                field-name="skipReSizeOfSmallImg"
+                :global-value="compressForm.skipReSizeOfSmallImg"
+                input-type="checkbox"
+                @map-change="
+                  (picbedType, value) =>
+                    safeSetMapValue(
+                      compressForm,
+                      'skipReSizeOfSmallImg',
+                      picbedType,
+                      value,
+                      defaultCompressSetting.skipReSizeOfSmallImg,
+                    )
+                "
+              />
+            </SettingCard>
+          </SettingSection>
+
+          <SettingSection :icon="Percent" :title="t('pages.imageProcess.transform.percentageResize')">
+            <SettingCard class="flex flex-col justify-center">
+              <CustomSwitch
+                v-model="activeForm.compress.isReSizeByPercent"
+                :title="t('pages.imageProcess.transform.isResizeByPercent')"
+                :description="t('pages.imageProcess.transform.isResizeByPercentHint')"
+                no-border
+                small
               />
 
               <PerPicbedSetting
@@ -868,12 +828,12 @@
                     )
                 "
               />
-            </div>
+            </SettingCard>
 
-            <div v-if="activeForm.compress.isReSizeByPercent" class="form-group">
-              <customRange
+            <SettingCard v-if="activeForm.compress.isReSizeByPercent" class="flex flex-col justify-center">
+              <CustomRange
                 v-model.number="activeForm.compress.reSizePercent"
-                :title="$t('pages.imageProcess.transform.resizePercent')"
+                :title="t('pages.imageProcess.transform.resizePercent')"
                 :min="1"
                 :max="500"
                 :step="1"
@@ -902,22 +862,14 @@
                     )
                 "
               />
-            </div>
-          </div>
+            </SettingCard>
+          </SettingSection>
         </div>
 
         <!-- Skip Process Tab -->
         <div v-else-if="activeTab === 'skipProcess'" key="skipProcess" class="flex flex-col gap-4">
-          <div class="settings-section">
-            <div class="section-header">
-              <div class="section-icon">
-                <FileText :size="20" />
-              </div>
-              <div class="section-title-group">
-                <h2>{{ $t('pages.imageProcess.general.skipProcessExtList') }}</h2>
-              </div>
-            </div>
-            <div class="form-group">
+          <SettingSection only-one-row :icon="FileText" :title="t('pages.imageProcess.general.skipProcessExtList')">
+            <SettingCard class="flex flex-col justify-center">
               <textarea
                 v-model="activeForm.skipProcess.skipProcessExtList"
                 class="form-textarea"
@@ -925,61 +877,70 @@
                 :placeholder="'zip,rar,7z,tar,gz'"
               />
               <small class="mt-2 block rounded-sm bg-bg-secondary px-3 py-2 text-xs leading-[1.5] text-tertiary">{{
-                $t('pages.imageProcess.general.skipProcessExtListPlaceholder')
+                t('pages.imageProcess.general.skipProcessExtListPlaceholder')
               }}</small>
-            </div>
-          </div>
+            </SettingCard>
+          </SettingSection>
         </div>
 
         <!-- Rename Tab -->
         <div v-else-if="activeTab === 'rename'" key="rename" class="flex flex-col gap-4">
-          <div class="settings-section">
-            <div class="form-grid">
-              <div class="form-group">
-                <customSwitch
+          <SettingSection
+            :icon="Edit2Icon"
+            :title="t('pages.imageProcess.rename.title')"
+            :description="t('pages.imageProcess.rename.description')"
+            only-one-row
+          >
+            <SettingSection>
+              <SettingCard p1>
+                <CustomSwitch
                   v-model="autoRenameComputed"
-                  :title="$t('pages.imageProcess.rename.renameTimestamp')"
+                  :title="t('pages.imageProcess.rename.renameTimestamp')"
                   description="YYYYMMDDHHmmssSSS"
-                  class="custom-switch"
+                  no-border
+                  small
                 />
-              </div>
+              </SettingCard>
 
-              <div class="form-group">
-                <customSwitch
+              <SettingCard p1 class="flex flex-col justify-center">
+                <CustomSwitch
                   v-model="manualRenameComputed"
-                  :title="$t('pages.imageProcess.rename.manualRename')"
-                  class="custom-switch"
+                  :title="t('pages.imageProcess.rename.manualRename')"
+                  no-border
+                  small
                 />
-              </div>
-            </div>
+              </SettingCard>
 
-            <div class="form-group">
-              <customSwitch
-                v-model="renameSettingsComputed.rename.enable"
-                :title="$t('pages.settings.upload.enableAdvancedRname')"
-                :description="$t('pages.settings.upload.enableAdvancedRnameDesc')"
-                class="custom-switch"
-              />
-            </div>
+              <SettingCard p1 class="flex flex-col justify-center">
+                <CustomSwitch
+                  v-model="renameSettingsComputed.rename.enable"
+                  :title="t('pages.settings.upload.enableAdvancedRname')"
+                  :description="t('pages.settings.upload.enableAdvancedRnameDesc')"
+                  no-border
+                  small
+                />
+              </SettingCard>
 
-            <div class="form-group rename-format-field">
-              <label class="title-text mb-4 flex items-center gap-2">
-                <Edit :size="14" class="text-accent" />
-                {{ $t('pages.settings.upload.advancedRnameFormat') }}
-              </label>
-              <input
-                v-model="renameSettingsComputed.rename.format"
-                type="text"
-                class="form-input"
-                placeholder="Ex. {Y}-{m}-{uuid}"
-              />
-            </div>
-
-            <div class="form-group">
-              <label class="title-text">{{ $t('pages.settings.upload.availablePlaceholders') }}</label>
+              <SettingCard>
+                <label class="mb-4 flex items-center gap-2 text-base font-semibold text-main">
+                  <Edit :size="14" class="text-accent" />
+                  {{ t('pages.settings.upload.advancedRnameFormat') }}
+                </label>
+                <input
+                  v-model="renameSettingsComputed.rename.format"
+                  type="text"
+                  class="form-input"
+                  placeholder="Ex. {Y}-{m}-{uuid}"
+                />
+              </SettingCard>
+            </SettingSection>
+            <SettingCard>
+              <label class="text-base font-semibold text-main">{{
+                t('pages.settings.upload.availablePlaceholders')
+              }}</label>
               <PlaceholderTable :list="advancedRenameList" :title-list="advancedRenameTitleList" />
-            </div>
-          </div>
+            </SettingCard>
+          </SettingSection>
         </div>
       </transition>
     </div>
@@ -991,6 +952,7 @@ import { useStorage } from '@vueuse/core'
 import {
   Droplets,
   Edit,
+  Edit2Icon,
   FileText,
   FlipHorizontal,
   Image,
@@ -1011,15 +973,18 @@ import type {
 import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, toRaw, useTemplateRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import customRadioOption from '@/components/common/CustomRadioOption.vue'
-import customRange from '@/components/common/CustomRange.vue'
-import customSwitch from '@/components/common/CustomSwitch.vue'
+import CustomRadioOption from '@/components/common/CustomRadioOption.vue'
+import CustomRange from '@/components/common/CustomRange.vue'
+import CustomSwitch from '@/components/common/CustomSwitch.vue'
 import PlaceholderTable from '@/components/common/PlaceholderTable.vue'
 import PerPicbedSetting from '@/components/PerPicbedSetting.vue'
 import { getRawData } from '@/utils/common'
 import { configPaths } from '@/utils/configPaths'
 import { getConfig, saveConfig } from '@/utils/dataSender'
 
+import SettingCard from './common/SettingCard.vue'
+import SettingSection from './common/SettingSection.vue'
+
 const { t } = useI18n()
 const activeTab = useStorage<string>('image-process-setting-active-tab', 'general')
 
diff --git a/src/renderer/components/InputBoxDialog.vue b/src/renderer/components/InputBoxDialog.vue
index 7be9fccc..11adfe7c 100644
--- a/src/renderer/components/InputBoxDialog.vue
+++ b/src/renderer/components/InputBoxDialog.vue
@@ -55,20 +55,14 @@
               </div>
             </div>
 
-            <div class="flex flex-wrap gap-3 p-4">
-              <button
-                class="flex-1 rounded-sm border-none bg-danger/50 p-2.5 text-sm font-semibold text-secondary transition-colors duration-fast ease-apple hover:bg-danger/70"
-                @click="handleInputBoxCancel"
-              >
-                {{ t('common.cancel') }}
-              </button>
-              <button
-                class="flex-1 rounded-sm border-none bg-accent p-2.5 text-sm font-semibold text-main transition-colors duration-fast ease-apple hover:bg-accent-hover disabled:cursor-not-allowed disabled:opacity-60"
+            <div class="flex flex-wrap justify-center gap-3 p-2">
+              <CustomButton type="secondary" :text="t('common.cancel')" @click="handleInputBoxCancel" />
+              <CustomButton
+                type="primary"
                 :disabled="!inputBoxValue.trim()"
+                :text="t('common.confirm')"
                 @click="handleInputBoxConfirm"
-              >
-                {{ t('common.confirm') }}
-              </button>
+              />
             </div>
           </div>
         </Transition>
@@ -82,6 +76,7 @@ import { XIcon } from 'lucide-vue-next'
 import { nextTick, onBeforeMount, onBeforeUnmount, reactive, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import CustomButton from '@/components/common/CustomButton.vue'
 import $bus from '@/utils/bus'
 import { SHOW_INPUT_BOX, SHOW_INPUT_BOX_RESPONSE } from '@/utils/constant'
 import { getConfig } from '@/utils/dataSender'
diff --git a/src/renderer/components/PerPicbedSetting.vue b/src/renderer/components/PerPicbedSetting.vue
index bdf8232f..7c8d0a6c 100644
--- a/src/renderer/components/PerPicbedSetting.vue
+++ b/src/renderer/components/PerPicbedSetting.vue
@@ -26,20 +26,22 @@
           class="flex flex-wrap items-center justify-between rounded-sm border border-border bg-bg p-3 transition-all duration-fast ease-apple hover:border-accent hover:bg-surface"
         >
           <label class="m-0 flex-1 text-sm font-medium text-main">{{ picbed.name }}</label>
-
           <!-- Checkbox input -->
-          <label v-if="inputType === 'checkbox'" class="m-0 flex cursor-pointer items-center p-0 select-none">
-            <input
-              :checked="getMapValue(mapField, picbed.type, defaultValue)"
-              type="checkbox"
-              class="peer hidden"
-              @change="e => handleMapChange(picbed.type, (e.target as HTMLInputElement).checked)"
-            />
-            <span
-              class="relative h-[24px] w-[44px] shrink-0 rounded-lg bg-gray-300 bg-linear-to-r transition-all duration-medium ease-standard peer-checked:bg-accent peer-checked:shadow-lg before:absolute before:top-[2px] before:left-[2px] before:h-[20px] before:w-[20px] before:rounded-full before:bg-linear-to-r before:from-white before:to-gray-100 before:shadow-md before:transition-all before:duration-medium before:ease-standard peer-checked:before:translate-x-[20px]"
-            />
-          </label>
-
+          <div v-if="inputType === 'checkbox'" class="flex items-center rounded-xl">
+            <label
+              class="flex cursor-pointer items-center gap-4 rounded-lg border border-border transition-all duration-200 ease-apple hover:border-accent"
+            >
+              <input
+                :checked="getMapValue(mapField, picbed.type, defaultValue)"
+                type="checkbox"
+                class="peer hidden"
+                @change="e => handleMapChange(picbed.type, (e.target as HTMLInputElement).checked)"
+              />
+              <span
+                class="relative h-[21px] w-[44px] shrink-0 rounded-full bg-gray-400/80 shadow-sm transition-all duration-medium ease-standard peer-checked:bg-accent peer-checked:shadow-[inset_0_1px_3px_rgba(0,0,0,0.1),0_2px_8px_color-mix(in_srgb,var(--color-accent),transparent_30%)] before:absolute before:top-[2px] before:left-[2px] before:h-[17px] before:w-[17px] before:rounded-full before:bg-white before:shadow-sm before:transition-all before:duration-200 before:ease-apple before:content-[''] peer-checked:before:translate-x-[24px]"
+              />
+            </label>
+          </div>
           <!-- Range input -->
           <div v-else-if="inputType === 'range'" class="flex flex-wrap items-center gap-2 rounded-sm shadow-sm">
             <input
diff --git a/src/renderer/components/common/customRange.vue b/src/renderer/components/common/customRange.vue
index d481c1c4..dab150e4 100644
--- a/src/renderer/components/common/customRange.vue
+++ b/src/renderer/components/common/customRange.vue
@@ -9,7 +9,7 @@
     class="my-3 h-[8px] w-full appearance-none rounded-sm bg-linear-to-l from-accent transition-colors duration-150 ease-apple outline-none [&::--moz-range-thumb]:shadow-sm [&::-moz-range-thumb]:h-[22px] [&::-moz-range-thumb]:w-[22px] [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border [&::-moz-range-thumb]:border-border [&::-moz-range-thumb]:bg-white [&::-webkit-slider-thumb]:h-[22px] [&::-webkit-slider-thumb]:w-[22px] [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border [&::-webkit-slider-thumb]:border-border [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-sm [&::-webkit-slider-thumb]:transition-all [&::-webkit-slider-thumb]:duration-200 [&::-webkit-slider-thumb]:ease-apple [&::-webkit-slider-thumb:hover]:scale-105 [&::-webkit-slider-thumb:hover]:shadow-md"
   />
   <div
-    class="mt-2 inline-flex min-w-14 items-center justify-center rounded-md bg-accent px-2 py-1.5 text-sm font-semibold text-white shadow-sm"
+    class="mt-2 inline-flex max-w-16 min-w-14 items-center justify-center rounded-md bg-accent px-2 py-1.5 text-sm font-semibold text-white shadow-sm"
   >
     {{ showValue }}
   </div>
diff --git a/src/renderer/components/common/customSwitch.vue b/src/renderer/components/common/customSwitch.vue
index 1012e35c..b2607d68 100644
--- a/src/renderer/components/common/customSwitch.vue
+++ b/src/renderer/components/common/customSwitch.vue
@@ -1,12 +1,15 @@
 <template>
-  <div class="flex items-center rounded-xl hover:bg-surface hover:shadow-sm">
+  <div class="flex items-center rounded-xl" :class="noHover ? '' : 'hover:bg-surface hover:shadow-sm'">
     <label
-      class="flex cursor-pointer items-center gap-4 rounded-lg border border-border p-4 transition-all duration-200 ease-apple hover:border-accent"
-      :class="noBorder ? 'border-none' : ''"
+      class="flex cursor-pointer items-center gap-4 rounded-lg border border-border transition-all duration-200 ease-apple hover:border-accent"
+      :class="{
+        'border-none': noBorder,
+        'p-4': !tighter,
+      }"
     >
       <input v-model="modelValue" type="checkbox" class="peer hidden" @change.stop="emit('change', modelValue)" />
       <span
-        class="bg-linear-180-r relative shrink-0 rounded-full bg-gray-400/80 shadow-sm transition-all duration-medium ease-standard peer-checked:bg-accent peer-checked:shadow-[inset_0_1px_3px_rgba(0,0,0,0.1),0_2px_8px_color-mix(in_srgb,var(--color-accent),transparent_30%)] before:absolute before:rounded-full before:bg-white before:shadow-sm before:transition-all before:duration-200 before:ease-apple before:content-[''] peer-checked:before:translate-x-[24px]"
+        class="relative shrink-0 rounded-full bg-gray-400/80 shadow-sm transition-all duration-medium ease-standard peer-checked:bg-accent peer-checked:shadow-[inset_0_1px_3px_rgba(0,0,0,0.1),0_2px_8px_color-mix(in_srgb,var(--color-accent),transparent_30%)] before:absolute before:rounded-full before:bg-white before:shadow-sm before:transition-all before:duration-200 before:ease-apple before:content-[''] peer-checked:before:translate-x-[24px]"
         :class="
           small
             ? 'h-[21px] w-[44px] before:top-[2px] before:left-[2px] before:h-[17px] before:w-[17px]'
@@ -59,6 +62,8 @@ const {
   small = false,
   tips = '',
   required = false,
+  noHover = false,
+  tighter = false,
 } = defineProps<{
   noBorder?: boolean
   title?: string
@@ -66,6 +71,8 @@ const {
   small?: boolean
   tips?: string
   required?: boolean
+  noHover?: boolean
+  tighter?: boolean
 }>()
 
 function toggleTooltip() {
diff --git a/src/renderer/components/css/FirstTimeGuide.css b/src/renderer/components/css/FirstTimeGuide.css
deleted file mode 100644
index 19e4aa36..00000000
--- a/src/renderer/components/css/FirstTimeGuide.css
+++ /dev/null
@@ -1,16 +0,0 @@
-@import "tailwindcss" reference;
-@import "../../assets/css/theme.css" reference;
-@import "../../assets/css/utilities.css" reference;
-
-.guide-btn {
-  @apply px-3 py-1.5 rounded-sm text-sm font-medium cursor-pointer border-none flex items-center gap-1 transition-all duration-200 ease-apple;
-  @apply [.primary]:bg-accent [.primary]:text-white;
-  @apply hover:[.primary]:bg-accent-hover hover:[.primary]:transform-[-translateY(1px)];
-  @apply [.secondary]:bg-bg-tertiary [.secondary]:text-main;
-  @apply hover:[.secondary]:bg-accent-hover;
-  @apply [.outline]:bg-transparent [.outline]:text-main [.outline]:border-border;
-  @apply hover:[.outline]:bg-accent hover:[.outline]:text-main;
-  @apply [.success]:bg-success [.success]:text-white;
-  @apply hover:[.success]:bg-success hover:[.success]:-translate-y-px;
-  @apply max-md:flex-1 max-md:justify-center max-md:min-w-[calc(50%-4px)]
-}
diff --git a/src/renderer/components/css/ImageProcessSetting.css b/src/renderer/components/css/ImageProcessSetting.css
index 409095b1..11d728b7 100644
--- a/src/renderer/components/css/ImageProcessSetting.css
+++ b/src/renderer/components/css/ImageProcessSetting.css
@@ -2,39 +2,6 @@
 @import '../../assets/css/theme.css' reference;
 @import '../../assets/css/utilities.css' reference;
 
-/* ==================== Settings Section ==================== */
-.settings-section {
-  @apply rounded-xl border border-border bg-bg p-5 shadow-sm transition-all duration-200 ease-apple hover:shadow-md;
-}
-
-.section-header {
-  @apply mb-6 flex items-center gap-1;
-}
-
-.section-icon {
-  @apply flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-lg bg-bg-secondary text-accent;
-}
-
-.section-title-group {
-  @apply [&_h2]:mb-0 [&_h2]:text-lg [&_h2]:leading-0 [&_h2]:font-semibold [&_h2]:tracking-tight [&_h2]:text-main;
-  @apply [&_p]:mt-6 [&_p]:text-sm [&_p]:leading-0 [&_p]:text-secondary;
-}
-
-/* ==================== Form Elements ==================== */
-.form-grid {
-  @apply grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-4;
-}
-
-.form-group {
-  @apply mb-6;
-  @apply last:mb-0;
-  @apply [&>:label:not(.custom-switch,.radio-option)]:mb-2.5
-         [&>:label:not(.custom-switch,.radio-option)]:block
-         [&>:label:not(.custom-switch,.radio-option)]:text-sm
-         [&>:label:not(.custom-switch,.radio-option)]:font-semibold
-         [&>:label:not(.custom-switch,.radio-option)]:text-main;
-}
-
 .form-input,
 .form-textarea {
   @apply box-border w-full rounded-lg border border-border bg-bg-tertiary px-4 py-3.5 text-sm text-main transition-all duration-200 ease-apple;
@@ -45,7 +12,3 @@
 .form-textarea {
   @apply min-h-[90px] resize-y font-[ui-monospace,SFMono-Regular,'SF_Mono',Menlo,Consolas,'Liberation_Mono',monospace];
 }
-
-.title-text {
-  @apply text-base font-semibold text-main;
-}
diff --git a/src/renderer/pages/Gallery.vue b/src/renderer/pages/Gallery.vue
index 932a65d9..49607c65 100644
--- a/src/renderer/pages/Gallery.vue
+++ b/src/renderer/pages/Gallery.vue
@@ -32,45 +32,40 @@
           </div>
           <div class="flex items-center gap-2">
             <span class="text-sm text-secondary">{{ t('pages.gallery.isAlwaysForceReload') }}</span>
-            <label class="relative inline-block h-[20px] w-[44px]">
-              <input
-                v-model="isAlwaysForceReload"
-                class="peer/fir h-0 w-0 opacity-0"
-                type="checkbox"
-                @change="handleIsAlwaysForceReload"
-              />
-              <span
-                class="switch-slider peer-checked/fir:bg-accent peer-checked/fir:bg-none! peer-checked/fir:before:translate-x-[22px]"
-              />
-            </label>
+            <CustomSwitch
+              v-model="isAlwaysForceReload"
+              small
+              tighter
+              no-border
+              no-hover
+              @change="handleIsAlwaysForceReload"
+            />
           </div>
           <div class="flex items-center gap-2">
             <span class="text-sm text-secondary">{{ t('pages.gallery.syncDelete') }}</span>
-            <label class="relative inline-block h-[20px] w-[44px]">
-              <input
-                v-model="deleteCloud"
-                class="peer/sec h-0 w-0 opacity-0"
-                type="checkbox"
-                @change="handleDeleteCloudFile"
-              />
-              <span
-                class="switch-slider peer-checked/sec:bg-accent peer-checked/sec:bg-none! peer-checked/sec:before:translate-x-[22px]"
-              />
-            </label>
+            <CustomSwitch v-model="deleteCloud" small tighter no-border no-hover @change="handleDeleteCloudFile" />
           </div>
-          <button class="head-action-button relative" :title="getViewModeLabel()" @click="toggleViewMode">
-            <component :is="getViewModeIcon()" :size="16" />
-            <span class="mt-0.5">{{ getViewModeLabel() }}</span>
-          </button>
-          <button class="head-action-button" @click="toggleHandleBar">
-            <ChevronDownIcon v-if="!handleBarActive" :size="16" />
-            <ChevronUpIcon v-else :size="16" />
-            <span class="mt-0.5">{{ t('pages.gallery.hideFilters') }}</span>
-          </button>
-          <button class="head-action-button" @click="refreshPage">
-            <RefreshCwIcon :size="16" />
-            <span class="mt-0.5">{{ t('pages.gallery.refresh') }}</span>
-          </button>
+          <CustomButton
+            type="primary"
+            :text="getViewModeLabel()"
+            :icon="getViewModeIcon()"
+            class="px-2!"
+            @click="toggleViewMode"
+          />
+          <CustomButton
+            type="primary"
+            :text="t('pages.gallery.hideFilters')"
+            :icon="handleBarActive ? ChevronUpIcon : ChevronDownIcon"
+            class="px-2!"
+            @click="toggleHandleBar"
+          />
+          <CustomButton
+            type="secondary"
+            :text="t('pages.gallery.refresh')"
+            :icon="RefreshCwIcon"
+            class="px-2!"
+            @click="refreshPage"
+          />
         </div>
       </div>
 
@@ -90,7 +85,9 @@
           </div>
 
           <div class="filter-group">
-            <label class="filter-label">{{ t('pages.gallery.dateRange') }}</label>
+            <label class="mb-0 text-sm leading-[1.4] font-semibold text-secondary">{{
+              t('pages.gallery.dateRange')
+            }}</label>
             <div class="flex w-full flex-wrap items-center gap-2 max-md:items-start">
               <input v-model="dateRangeStart" type="date" class="date-input" placeholder="Start date" />
               <span class="shrink-0 font-medium text-secondary">-</span>
@@ -423,6 +420,7 @@ import { onBeforeRouteUpdate } from 'vue-router'
 import ALLApi from '@/apis/allApi'
 import CustomButton from '@/components/common/CustomButton.vue'
 import CustomModal from '@/components/common/CustomModal.vue'
+import CustomSwitch from '@/components/common/CustomSwitch.vue'
 import MultiSelect from '@/components/common/MultiSelect.vue'
 import PlaceholderTable from '@/components/common/PlaceholderTable.vue'
 import SingleSelect from '@/components/common/SingleSelect.vue'
@@ -458,7 +456,7 @@ const imgInfo = reactive({
   imgUrl: '',
 })
 const choosedList: IObjT<boolean> = reactive({})
-const gallerySliderControl = reactive({
+const gallerySliderControl = ref({
   visible: false,
   index: 0,
 })
@@ -808,8 +806,8 @@ function clearChoosedList() {
 }
 
 function zoomImage(index: number) {
-  gallerySliderControl.index = index
-  gallerySliderControl.visible = true
+  gallerySliderControl.value.index = index
+  gallerySliderControl.value.visible = true
 }
 
 async function copy(item: ImgInfo) {
@@ -863,18 +861,16 @@ function remove(item: ImgInfo, _: number) {
   })
 }
 
-function handleIsAlwaysForceReload(event: Event) {
-  const ev = (event.target as HTMLInputElement).checked
-  isAlwaysForceReload.value = ev
+function handleIsAlwaysForceReload(value: boolean) {
   saveConfig({
-    [configPaths.settings.isAlwaysForceReload]: ev,
+    [configPaths.settings.isAlwaysForceReload]: value,
   })
   window.electron.sendRPC(IRPCActionType.REFRESH_SETTING_WINDOW)
 }
 
-function handleDeleteCloudFile(event: Event) {
+function handleDeleteCloudFile(value: boolean) {
   saveConfig({
-    [configPaths.settings.deleteCloudFile]: (event.target as HTMLInputElement).checked,
+    [configPaths.settings.deleteCloudFile]: value,
   })
 }
 
diff --git a/src/renderer/pages/PicGoSetting.vue b/src/renderer/pages/PicGoSetting.vue
index e9bd605f..06c122ee 100644
--- a/src/renderer/pages/PicGoSetting.vue
+++ b/src/renderer/pages/PicGoSetting.vue
@@ -399,7 +399,7 @@
               />
             </SettingCard>
 
-            <SettingCard p1>
+            <SettingCard p1 class="flex flex-col justify-center">
               <CustomSwitch
                 v-model="formOfSetting.deleteLocalFile"
                 small
@@ -429,7 +429,7 @@
               />
             </SettingCard>
 
-            <SettingCard p1>
+            <SettingCard p1 class="flex flex-col justify-center">
               <CustomSwitch
                 v-model="formOfSetting.autoCopy"
                 small
diff --git a/src/renderer/pages/css/Gallery.css b/src/renderer/pages/css/Gallery.css
index 634b99db..7133de5c 100644
--- a/src/renderer/pages/css/Gallery.css
+++ b/src/renderer/pages/css/Gallery.css
@@ -2,24 +2,10 @@
 @import "../../assets/css/theme.css" reference;
 @import "../../assets/css/utilities.css" reference;
 
-.head-action-button {
-  @apply flex items-center border-none rounded-md px-2 py-1.5 text-sm font-medium text-white bg-accent font-[inherit] gap-2 cursor-pointer transition-all duration-fast ease-apple;
-  @apply hover:bg-accent-hover hover:-translate-y-px hover:shadow-md;
-}
-
-.switch-slider {
-  @apply  absolute inset-0 cursor-pointer rounded-2xl bg-[linear-gradient(180deg,#d0d3d9_0%,#c0c4cc_100%)] shadow-sm transition-all duration-medium ease-standard;
-  @apply before:absolute before:bottom-[2px] before:left-[2px] before:h-[17px] before:w-[17px] before:rounded-full before:shadow-sm before:transition-all before:ease-standard before:duration-medium before:content-[""] before:bg-[linear-gradient(180deg,#ffffff_0%,#f5f5f5_100%)];
-}
-
 .filter-group {
   @apply flex flex-col gap-1 flex-1 min-w-[140px];
 }
 
-.filter-label {
-  @apply mb-0 text-sm font-semibold text-secondary leading-[1.4];
-}
-
 .date-input {
   @apply border border-border-secondary rounded-md px-2 py-1.5 min-w-[20px] h-[28px] text-xs text-main transition-all duration-fast ease-apple flex-1 leading-[1.2];
   @apply focus:border-accent-hover focus:outline-none focus:shadow-md;
@@ -54,48 +40,7 @@
   @apply [.delete-icon]:hover:text-error [.delete-icon]:hover:bg-error/10;
 }
 
-.nav-button {
-  @apply absolute flex z-10 justify-center items-center border-none rounded-full w-[48px] h-[48px] text-white bg-[rgb(0_0_0_/50%)] transition-all duration-fast ease-apple cursor-pointer;
-  @apply not-disabled:hover:bg-accent;
-  @apply disabled:opacity-50 disabled:cursor-not-allowed;
-  @apply [.prev]:left-4 [.next]:right-4;
-}
-
 .form-input {
   @apply border border-border rounded-md p-3 w-full text-sm text-main bg-bg-secondary transition-all duration-fast ease-apple box-border;
   @apply focus:border-accent focus:outline-none focus:shadow-md;
 }
-
-.placeholder-grid {
-  @apply grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-0 py-2;
-}
-
-.placeholder-item {
-  @apply gap-2 flex items-center m-0 rounded-none py-2 px-4 text-sm leading-[1.4] flex-col;
-  @apply hover:bg-accent/30 hover:border hover:border-accent;
-  @apply [&_code]:mr-3.5 [&_code]:border [&_code]:border-white/20 [&_code]:rounded-md [&_code]:px-2.5 [&_code]:py-1 [&_code]:min-w-[80px] [&_code]:text-base [&_code]:font-['SF_Mono',Monaco,'Cascadia_Code','Roboto_Mono',Consolas,'Courier_New',monospace] [&_code]:font-semibold [&_code]:text-center [&_code]:text-main [&_code]:bg-bg-secondary [&_code]:shadow-sm [&_code]:tracking-[0.02em] [&_code]:shrink-0;
-  @apply [&_span]:text-xs [&_span]:font-medium [&_span]:text-main [&_span]:flex-1;
-}
-
-/* Buttons */
-.btn-primary {
-  @apply flex items-center border-none rounded-md px-6 py-3 text-sm font-medium font-[inherit] text-white bg-accent gap-2 cursor-pointer transition-all duration-fast ease-apple;
-  @apply hover:bg-accent-hover hover:-translate-y-px hover:shadow-sm;
-}
-
-.btn-secondary {
-  @apply flex items-center border border-border rounded-md px-6 py-3 text-sm font-medium font-[inherit] text-main bg-bg-secondary gap-2 cursor-pointer transition-all duration-fast ease-apple;
- @apply hover:bg-border-secondary hover:-translate-y-px hover:shadow-sm;
-}
-
-.zoom-btn {
-  @apply flex justify-center items-center border-none rounded-md w-[32px] h-[32px] text-sm font-semibold text-white bg-[rgb(255_255_255_/10%)] transition-all duration-fast ease-apple cursor-pointer;
-  @apply not-disabled:hover:bg-[rgb(255_255_255_/20%)];
-  @apply disabled:opacity-50 disabled:cursor-not-allowed;
-  @apply [.reset-btn]:py-0 [.reset-btn]:w-auto [.reset-btn]:px-3 [.reset-btn]:text-xs;
-}
-
-.category-title {
-  @apply m-0 border-b border-border pt-3.5 px-4 pb-2 text-sm font-semibold text-secondary bg-[linear-gradient(180deg,var(--color-background-secondary)_0%,var(--color-background-tertiary)_100%)];
-}
-