From b5802cfcb3f90f254a8614b286aea8b77d4e3b82 Mon Sep 17 00:00:00 2001
From: Kuingsmile <96409857+Kuingsmile@users.noreply.github.com>
Date: Wed, 31 Dec 2025 14:31:36 +0800
Subject: [PATCH] :sparkles: Feature(custom): optimize image process setting
 page

---
 .../components/ImageProcessSetting.vue        | 1825 ++++++-----------
 .../components/css/ImageProcessSetting.css    |  859 ++++++++
 src/renderer/pages/PicGoSetting.vue           |    2 +-
 src/renderer/pages/css/PicgoSetting.css       |    8 +-
 src/renderer/pages/css/UploadPage.css         |   11 +-
 5 files changed, 1532 insertions(+), 1173 deletions(-)
 create mode 100644 src/renderer/components/css/ImageProcessSetting.css

diff --git a/src/renderer/components/ImageProcessSetting.vue b/src/renderer/components/ImageProcessSetting.vue
index c3fdbd0a..c9f09959 100644
--- a/src/renderer/components/ImageProcessSetting.vue
+++ b/src/renderer/components/ImageProcessSetting.vue
@@ -1,20 +1,11 @@
 <template>
   <div class="image-process-settings">
-    <!-- Header -->
-    <div class="settings-header">
-      <div class="header-content">
-        <Settings :size="24" class="header-icon" />
-        <div>
-          <h1>{{ $t('pages.imageProcess.title') }}</h1>
-          <p>{{ $t('pages.imageProcess.description') }}</p>
-        </div>
-      </div>
-    </div>
-
     <!-- Tab Navigation -->
     <div class="tab-navigation">
+      <div class="tab-indicator" :style="tabIndicatorStyle" />
       <button
-        v-for="tab in tabs"
+        v-for="(tab, index) in tabs"
+        :ref="el => setTabRef(el, index)"
         :key="tab.id"
         class="tab-button"
         :class="{ active: activeTab === tab.id }"
@@ -27,672 +18,748 @@
 
     <!-- Settings Content -->
     <div class="settings-content">
-      <!-- General Settings Tab -->
-      <div v-if="activeTab === 'general'" class="tab-content">
-        <div class="settings-section">
-          <h2>{{ $t('pages.imageProcess.general.skipProcessExtList') }}</h2>
-          <div class="form-group">
-            <label>{{ $t('pages.imageProcess.general.skipProcessExtListLabel') }}</label>
-            <textarea
-              v-model="skipProcessForm.skipProcessExtList"
-              class="form-textarea"
-              rows="3"
-              :placeholder="'zip,rar,7z,tar,gz'"
-            />
-            <small>{{ $t('pages.imageProcess.general.skipProcessExtListPlaceholder') }}</small>
-          </div>
-        </div>
-
-        <div class="settings-section">
-          <h2>{{ $t('pages.imageProcess.general.basicImageProcessing') }}</h2>
-
-          <div class="form-grid">
-            <div class="form-group">
-              <label class="switch-label">
-                <input v-model="compressForm.isRemoveExif" type="checkbox" class="switch-input" />
-                <span class="switch-slider" />
-                <div class="switch-content">
-                  <span class="switch-title">{{ $t('pages.imageProcess.general.isRemoveExif') }}</span>
-                </div>
-              </label>
-
-              <PerPicbedSetting
-                :map-field="compressForm.isRemoveExifMap"
-                :default-value="false"
-                field-name="isRemoveExif"
-                :form-object="compressForm"
-                input-type="checkbox"
-                @map-change="
-                  (picbedType, value) => safeSetMapValue(compressForm, 'isRemoveExif', picbedType, value, false)
-                "
-              />
-            </div>
-
-            <div class="form-group">
-              <label>{{ $t('pages.imageProcess.general.quality') }}</label>
-              <input v-model.number="compressForm.quality" type="range" min="1" max="100" class="form-range" />
-              <div class="range-value">{{ compressForm.quality }}%</div>
-
-              <PerPicbedSetting
-                :map-field="compressForm.qualityMap"
-                :default-value="100"
-                field-name="quality"
-                :form-object="compressForm"
-                input-type="range"
-                :range-min="1"
-                :range-max="100"
-                :range-step="1"
-                range-suffix="%"
-                @map-change="(picbedType, value) => safeSetMapValue(compressForm, 'quality', picbedType, value, 100)"
-              />
-            </div>
-          </div>
-        </div>
-
-        <div class="settings-section">
-          <h2>{{ $t('pages.imageProcess.general.formatConversion') }}</h2>
-
-          <div class="form-group">
-            <label class="switch-label">
-              <input v-model="compressForm.isConvert" type="checkbox" class="switch-input" />
-              <span class="switch-slider" />
-              <div class="switch-content">
-                <span class="switch-title">{{ $t('pages.imageProcess.general.isConvert') }}</span>
+      <transition name="fade-slide" mode="out-in">
+        <!-- General Settings Tab -->
+        <div v-if="activeTab === 'general'" key="general" class="tab-content">
+          <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>
-            </label>
-
-            <PerPicbedSetting
-              :map-field="compressForm.isConvertMap"
-              :default-value="false"
-              field-name="isConvert"
-              :form-object="compressForm"
-              input-type="checkbox"
-              @map-change="(picbedType, value) => safeSetMapValue(compressForm, 'isConvert', picbedType, value, false)"
-            />
-          </div>
-
-          <div v-if="compressForm.isConvert" class="form-grid">
-            <div class="form-group">
-              <label>{{ $t('pages.imageProcess.general.destinationFormat') }}</label>
-              <select v-model="compressForm.convertFormat" class="form-input">
-                <option v-for="format in availableFormat" :key="format" :value="format">
-                  {{ format.toUpperCase() }}
-                </option>
-              </select>
-
-              <PerPicbedSetting
-                :map-field="compressForm.convertFormatMap"
-                default-value="jpg"
-                field-name="convertFormat"
-                :form-object="compressForm"
-                input-type="select"
-                :select-options="availableFormat.map(format => ({ value: format, label: format.toUpperCase() }))"
-                @map-change="
-                  (picbedType, value) => safeSetMapValue(compressForm, 'convertFormat', picbedType, value, 'jpg')
-                "
-              />
             </div>
-
             <div class="form-group">
-              <label>{{ $t('pages.imageProcess.general.specificFormatConversion') }}</label>
               <textarea
-                v-model="formatConvertObj"
+                v-model="skipProcessForm.skipProcessExtList"
                 class="form-textarea"
                 rows="3"
-                placeholder='{"jpg": "png", "png": "jpg"}'
-              />
-
-              <PerPicbedSetting
-                :map-field="compressForm.formatConvertObjMap"
-                :default-value="'{}'"
-                field-name="formatConvertObj"
-                :form-object="compressForm"
-                input-type="text"
-                text-placeholder="{}"
-                @map-change="
-                  (picbedType, value) => safeSetMapValue(compressForm, 'formatConvertObj', picbedType, value, '{}')
-                "
+                :placeholder="'zip,rar,7z,tar,gz'"
               />
+              <small>{{ $t('pages.imageProcess.general.skipProcessExtListPlaceholder') }}</small>
             </div>
           </div>
-        </div>
-      </div>
 
-      <!-- Watermark Tab -->
-      <div v-if="activeTab === 'watermark'" class="tab-content">
-        <div class="settings-section">
-          <h2>{{ $t('pages.imageProcess.watermark.title') }}</h2>
-          <p>{{ $t('pages.imageProcess.watermark.description') }}</p>
-
-          <div class="form-group">
-            <label class="switch-label">
-              <input v-model="waterMarkForm.isAddWatermark" type="checkbox" class="switch-input" />
-              <span class="switch-slider" />
-              <div class="switch-content">
-                <span class="switch-title">{{ $t('pages.imageProcess.watermark.isAdd') }}</span>
+          <div class="settings-section">
+            <div class="section-header">
+              <div class="section-icon">
+                <Sliders :size="20" />
               </div>
-            </label>
-
-            <PerPicbedSetting
-              :map-field="waterMarkForm.isAddWatermarkMap"
-              :default-value="false"
-              field-name="isAddWatermark"
-              :form-object="waterMarkForm"
-              input-type="checkbox"
-              @map-change="
-                (picbedType, value) => safeSetMapValue(waterMarkForm, 'isAddWatermark', picbedType, value, false)
-              "
-            />
-          </div>
-
-          <div v-if="waterMarkForm.isAddWatermark" class="watermark-settings">
-            <div class="form-group">
-              <label>{{ $t('pages.imageProcess.watermark.type') }}</label>
-              <div class="radio-group">
-                <label class="radio-option">
-                  <input v-model="waterMarkForm.watermarkType" type="radio" value="text" class="radio-input" />
-                  <span class="radio-indicator" />
-                  <span class="radio-label">{{ $t('pages.imageProcess.watermark.text') }}</span>
-                </label>
-                <label class="radio-option">
-                  <input v-model="waterMarkForm.watermarkType" type="radio" value="image" class="radio-input" />
-                  <span class="radio-indicator" />
-                  <span class="radio-label">{{ $t('pages.imageProcess.watermark.image') }}</span>
-                </label>
+              <div class="section-title-group">
+                <h2>{{ $t('pages.imageProcess.general.basicImageProcessing') }}</h2>
               </div>
-
-              <PerPicbedSetting
-                :map-field="waterMarkForm.watermarkTypeMap"
-                default-value="text"
-                field-name="watermarkType"
-                :form-object="waterMarkForm"
-                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, 'text')
-                "
-              />
             </div>
 
             <div class="form-grid">
               <div class="form-group">
                 <label class="switch-label">
-                  <input v-model="waterMarkForm.isFullScreenWatermark" type="checkbox" class="switch-input" />
+                  <input v-model="compressForm.isRemoveExif" type="checkbox" class="switch-input" />
                   <span class="switch-slider" />
                   <div class="switch-content">
-                    <span class="switch-title">{{ $t('pages.imageProcess.watermark.isFullScreen') }}</span>
+                    <span class="switch-title">{{ $t('pages.imageProcess.general.isRemoveExif') }}</span>
                   </div>
                 </label>
 
                 <PerPicbedSetting
-                  :map-field="waterMarkForm.isFullScreenWatermarkMap"
+                  :map-field="compressForm.isRemoveExifMap"
                   :default-value="false"
-                  field-name="isFullScreenWatermark"
-                  :form-object="waterMarkForm"
+                  field-name="isRemoveExif"
+                  :form-object="compressForm"
                   input-type="checkbox"
                   @map-change="
-                    (picbedType, value) =>
-                      safeSetMapValue(waterMarkForm, 'isFullScreenWatermark', picbedType, value, false)
+                    (picbedType, value) => safeSetMapValue(compressForm, 'isRemoveExif', picbedType, value, false)
                   "
                 />
               </div>
 
               <div class="form-group">
-                <label>{{ $t('pages.imageProcess.watermark.degree') }}</label>
-                <input
-                  v-model.number="waterMarkForm.watermarkDegree"
-                  type="range"
-                  min="-360"
-                  max="360"
-                  class="form-range"
-                />
-                <div class="range-value">{{ waterMarkForm.watermarkDegree }}°</div>
+                <label>{{ $t('pages.imageProcess.general.quality') }}</label>
+                <input v-model.number="compressForm.quality" type="range" min="1" max="100" class="form-range" />
+                <div class="range-value">{{ compressForm.quality }}%</div>
 
                 <PerPicbedSetting
-                  :map-field="waterMarkForm.watermarkDegreeMap"
-                  :default-value="0"
-                  field-name="watermarkDegree"
-                  :form-object="waterMarkForm"
+                  :map-field="compressForm.qualityMap"
+                  :default-value="100"
+                  field-name="quality"
+                  :form-object="compressForm"
                   input-type="range"
-                  :range-min="-360"
-                  :range-max="360"
+                  :range-min="1"
+                  :range-max="100"
                   :range-step="1"
-                  range-suffix="°"
+                  range-suffix="%"
+                  @map-change="(picbedType, value) => safeSetMapValue(compressForm, 'quality', picbedType, value, 100)"
+                />
+              </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">
+              <label class="switch-label">
+                <input v-model="compressForm.isConvert" type="checkbox" class="switch-input" />
+                <span class="switch-slider" />
+                <div class="switch-content">
+                  <span class="switch-title">{{ $t('pages.imageProcess.general.isConvert') }}</span>
+                </div>
+              </label>
+
+              <PerPicbedSetting
+                :map-field="compressForm.isConvertMap"
+                :default-value="false"
+                field-name="isConvert"
+                :form-object="compressForm"
+                input-type="checkbox"
+                @map-change="
+                  (picbedType, value) => safeSetMapValue(compressForm, 'isConvert', picbedType, value, false)
+                "
+              />
+            </div>
+
+            <div v-if="compressForm.isConvert" class="form-grid">
+              <div class="form-group">
+                <label>{{ $t('pages.imageProcess.general.destinationFormat') }}</label>
+                <select v-model="compressForm.convertFormat" class="form-input">
+                  <option v-for="format in availableFormat" :key="format" :value="format">
+                    {{ format.toUpperCase() }}
+                  </option>
+                </select>
+
+                <PerPicbedSetting
+                  :map-field="compressForm.convertFormatMap"
+                  default-value="jpg"
+                  field-name="convertFormat"
+                  :form-object="compressForm"
+                  input-type="select"
+                  :select-options="availableFormat.map(format => ({ value: format, label: format.toUpperCase() }))"
                   @map-change="
-                    (picbedType, value) => safeSetMapValue(waterMarkForm, 'watermarkDegree', picbedType, value, 0)
+                    (picbedType, value) => safeSetMapValue(compressForm, 'convertFormat', picbedType, value, 'jpg')
                   "
                 />
               </div>
 
               <div class="form-group">
-                <label>{{ $t('pages.imageProcess.watermark.scaleRatio') }}</label>
-                <input
-                  v-model.number="waterMarkForm.watermarkScaleRatio"
-                  type="range"
-                  min="0"
-                  max="1"
-                  step="0.01"
-                  class="form-range"
+                <label>{{ $t('pages.imageProcess.general.specificFormatConversion') }}</label>
+                <textarea
+                  v-model="formatConvertObj"
+                  class="form-textarea"
+                  rows="3"
+                  placeholder='{"jpg": "png", "png": "jpg"}'
                 />
-                <div class="range-value">{{ Math.round((waterMarkForm.watermarkScaleRatio || 0) * 100) }}%</div>
 
                 <PerPicbedSetting
-                  :map-field="waterMarkForm.watermarkScaleRatioMap"
-                  :default-value="0.15"
-                  field-name="watermarkScaleRatio"
-                  :form-object="waterMarkForm"
-                  input-type="range"
-                  :range-min="0"
-                  :range-max="1"
-                  :range-step="0.01"
-                  range-suffix="%"
+                  :map-field="compressForm.formatConvertObjMap"
+                  :default-value="'{}'"
+                  field-name="formatConvertObj"
+                  :form-object="compressForm"
+                  input-type="text"
+                  text-placeholder="{}"
                   @map-change="
-                    (picbedType, value) =>
-                      safeSetMapValue(waterMarkForm, 'watermarkScaleRatio', picbedType, value, 0.15)
+                    (picbedType, value) => safeSetMapValue(compressForm, 'formatConvertObj', picbedType, value, '{}')
                   "
                 />
               </div>
             </div>
+          </div>
+        </div>
 
-            <div v-if="waterMarkForm.watermarkType === 'text'" class="form-grid">
+        <!-- Watermark Tab -->
+        <div v-else-if="activeTab === 'watermark'" key="watermark" class="tab-content">
+          <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">
+              <label class="switch-label">
+                <input v-model="waterMarkForm.isAddWatermark" type="checkbox" class="switch-input" />
+                <span class="switch-slider" />
+                <div class="switch-content">
+                  <span class="switch-title">{{ $t('pages.imageProcess.watermark.isAdd') }}</span>
+                </div>
+              </label>
+
+              <PerPicbedSetting
+                :map-field="waterMarkForm.isAddWatermarkMap"
+                :default-value="false"
+                field-name="isAddWatermark"
+                :form-object="waterMarkForm"
+                input-type="checkbox"
+                @map-change="
+                  (picbedType, value) => safeSetMapValue(waterMarkForm, 'isAddWatermark', picbedType, value, false)
+                "
+              />
+            </div>
+
+            <div v-if="waterMarkForm.isAddWatermark" class="watermark-settings">
               <div class="form-group">
-                <label>{{ $t('pages.imageProcess.watermark.inputText') }}</label>
-                <input
-                  v-model="waterMarkForm.watermarkText"
-                  type="text"
-                  class="form-input"
-                  :placeholder="$t('pages.imageProcess.watermark.inputTextPlaceholder')"
-                />
+                <label>{{ $t('pages.imageProcess.watermark.type') }}</label>
+                <div class="radio-group">
+                  <label class="radio-option">
+                    <input v-model="waterMarkForm.watermarkType" type="radio" value="text" class="radio-input" />
+                    <span class="radio-indicator" />
+                    <span class="radio-label">{{ $t('pages.imageProcess.watermark.text') }}</span>
+                  </label>
+                  <label class="radio-option">
+                    <input v-model="waterMarkForm.watermarkType" type="radio" value="image" class="radio-input" />
+                    <span class="radio-indicator" />
+                    <span class="radio-label">{{ $t('pages.imageProcess.watermark.image') }}</span>
+                  </label>
+                </div>
 
-                <!-- Per-picbed settings for watermarkText -->
                 <PerPicbedSetting
-                  :map-field="waterMarkForm.watermarkTextMap"
-                  :default-value="''"
-                  field-name="watermarkText"
+                  :map-field="waterMarkForm.watermarkTypeMap"
+                  default-value="text"
+                  field-name="watermarkType"
                   :form-object="waterMarkForm"
-                  input-type="text"
-                  :text-placeholder="$t('pages.imageProcess.watermark.inputTextPlaceholder')"
+                  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, 'watermarkText', picbedType, value, '')
+                    (picbedType, value) => safeSetMapValue(waterMarkForm, 'watermarkType', picbedType, value, 'text')
                   "
                 />
               </div>
 
-              <div class="form-group">
-                <label>{{ $t('pages.imageProcess.watermark.textFontPath') }}</label>
-                <input
-                  v-model="waterMarkForm.watermarkFontPath"
-                  type="text"
-                  class="form-input"
-                  :placeholder="$t('pages.imageProcess.watermark.textFontPathPlaceholder')"
-                />
+              <div class="form-grid">
+                <div class="form-group">
+                  <label class="switch-label">
+                    <input v-model="waterMarkForm.isFullScreenWatermark" type="checkbox" class="switch-input" />
+                    <span class="switch-slider" />
+                    <div class="switch-content">
+                      <span class="switch-title">{{ $t('pages.imageProcess.watermark.isFullScreen') }}</span>
+                    </div>
+                  </label>
 
-                <PerPicbedSetting
-                  :map-field="waterMarkForm.watermarkFontPathMap"
-                  :default-value="''"
-                  field-name="watermarkFontPath"
-                  :form-object="waterMarkForm"
-                  input-type="text"
-                  :text-placeholder="$t('pages.imageProcess.watermark.textFontPathPlaceholder')"
-                  @map-change="
-                    (picbedType, value) => safeSetMapValue(waterMarkForm, 'watermarkFontPath', picbedType, value, '')
-                  "
-                />
-              </div>
-
-              <div class="form-group">
-                <label>{{ $t('pages.imageProcess.watermark.color') }}</label>
-                <div class="color-input-group">
-                  <input v-model="waterMarkForm.watermarkColor" type="color" class="form-color" />
-                  <input
-                    v-model="waterMarkForm.watermarkColor"
-                    type="text"
-                    class="form-input"
-                    placeholder="#CCCCCC73"
+                  <PerPicbedSetting
+                    :map-field="waterMarkForm.isFullScreenWatermarkMap"
+                    :default-value="false"
+                    field-name="isFullScreenWatermark"
+                    :form-object="waterMarkForm"
+                    input-type="checkbox"
+                    @map-change="
+                      (picbedType, value) =>
+                        safeSetMapValue(waterMarkForm, 'isFullScreenWatermark', picbedType, value, false)
+                    "
                   />
                 </div>
 
+                <div class="form-group">
+                  <label>{{ $t('pages.imageProcess.watermark.degree') }}</label>
+                  <input
+                    v-model.number="waterMarkForm.watermarkDegree"
+                    type="range"
+                    min="-360"
+                    max="360"
+                    class="form-range"
+                  />
+                  <div class="range-value">{{ waterMarkForm.watermarkDegree }}°</div>
+
+                  <PerPicbedSetting
+                    :map-field="waterMarkForm.watermarkDegreeMap"
+                    :default-value="0"
+                    field-name="watermarkDegree"
+                    :form-object="waterMarkForm"
+                    input-type="range"
+                    :range-min="-360"
+                    :range-max="360"
+                    :range-step="1"
+                    range-suffix="°"
+                    @map-change="
+                      (picbedType, value) => safeSetMapValue(waterMarkForm, 'watermarkDegree', picbedType, value, 0)
+                    "
+                  />
+                </div>
+
+                <div class="form-group">
+                  <label>{{ $t('pages.imageProcess.watermark.scaleRatio') }}</label>
+                  <input
+                    v-model.number="waterMarkForm.watermarkScaleRatio"
+                    type="range"
+                    min="0"
+                    max="1"
+                    step="0.01"
+                    class="form-range"
+                  />
+                  <div class="range-value">{{ Math.round((waterMarkForm.watermarkScaleRatio || 0) * 100) }}%</div>
+
+                  <PerPicbedSetting
+                    :map-field="waterMarkForm.watermarkScaleRatioMap"
+                    :default-value="0.15"
+                    field-name="watermarkScaleRatio"
+                    :form-object="waterMarkForm"
+                    input-type="range"
+                    :range-min="0"
+                    :range-max="1"
+                    :range-step="0.01"
+                    range-suffix="%"
+                    @map-change="
+                      (picbedType, value) =>
+                        safeSetMapValue(waterMarkForm, 'watermarkScaleRatio', picbedType, value, 0.15)
+                    "
+                  />
+                </div>
+              </div>
+
+              <div v-if="waterMarkForm.watermarkType === 'text'" class="form-grid">
+                <div class="form-group">
+                  <label>{{ $t('pages.imageProcess.watermark.inputText') }}</label>
+                  <input
+                    v-model="waterMarkForm.watermarkText"
+                    type="text"
+                    class="form-input"
+                    :placeholder="$t('pages.imageProcess.watermark.inputTextPlaceholder')"
+                  />
+
+                  <!-- Per-picbed settings for watermarkText -->
+                  <PerPicbedSetting
+                    :map-field="waterMarkForm.watermarkTextMap"
+                    :default-value="''"
+                    field-name="watermarkText"
+                    :form-object="waterMarkForm"
+                    input-type="text"
+                    :text-placeholder="$t('pages.imageProcess.watermark.inputTextPlaceholder')"
+                    @map-change="
+                      (picbedType, value) => safeSetMapValue(waterMarkForm, 'watermarkText', picbedType, value, '')
+                    "
+                  />
+                </div>
+
+                <div class="form-group">
+                  <label>{{ $t('pages.imageProcess.watermark.textFontPath') }}</label>
+                  <input
+                    v-model="waterMarkForm.watermarkFontPath"
+                    type="text"
+                    class="form-input"
+                    :placeholder="$t('pages.imageProcess.watermark.textFontPathPlaceholder')"
+                  />
+
+                  <PerPicbedSetting
+                    :map-field="waterMarkForm.watermarkFontPathMap"
+                    :default-value="''"
+                    field-name="watermarkFontPath"
+                    :form-object="waterMarkForm"
+                    input-type="text"
+                    :text-placeholder="$t('pages.imageProcess.watermark.textFontPathPlaceholder')"
+                    @map-change="
+                      (picbedType, value) => safeSetMapValue(waterMarkForm, 'watermarkFontPath', picbedType, value, '')
+                    "
+                  />
+                </div>
+
+                <div class="form-group">
+                  <label>{{ $t('pages.imageProcess.watermark.color') }}</label>
+                  <div class="color-input-group">
+                    <input v-model="waterMarkForm.watermarkColor" type="color" class="form-color" />
+                    <input
+                      v-model="waterMarkForm.watermarkColor"
+                      type="text"
+                      class="form-input"
+                      placeholder="#CCCCCC73"
+                    />
+                  </div>
+
+                  <PerPicbedSetting
+                    :map-field="waterMarkForm.watermarkColorMap"
+                    :default-value="'#CCCCCC73'"
+                    field-name="watermarkColor"
+                    :form-object="waterMarkForm"
+                    input-type="color"
+                    @map-change="
+                      (picbedType, value) =>
+                        safeSetMapValue(waterMarkForm, 'watermarkColor', picbedType, value, '#CCCCCC73')
+                    "
+                  />
+                </div>
+              </div>
+
+              <!-- Image Watermark Settings -->
+              <div v-if="waterMarkForm.watermarkType === 'image'" class="form-group">
+                <label>{{ $t('pages.imageProcess.watermark.imagePath') }}</label>
+                <input
+                  v-model="waterMarkForm.watermarkImagePath"
+                  type="text"
+                  class="form-input"
+                  :placeholder="$t('pages.imageProcess.watermark.imagePathPlaceholder')"
+                />
+
                 <PerPicbedSetting
-                  :map-field="waterMarkForm.watermarkColorMap"
-                  :default-value="'#CCCCCC73'"
-                  field-name="watermarkColor"
+                  :map-field="waterMarkForm.watermarkImagePathMap"
+                  :default-value="''"
+                  field-name="watermarkImagePath"
                   :form-object="waterMarkForm"
-                  input-type="color"
+                  input-type="text"
+                  :text-placeholder="$t('pages.imageProcess.watermark.imagePathPlaceholder')"
+                  @map-change="
+                    (picbedType, value) => safeSetMapValue(waterMarkForm, 'watermarkImagePath', picbedType, value, '')
+                  "
+                />
+              </div>
+
+              <div v-if="waterMarkForm.watermarkType === 'image'" class="form-group">
+                <label>{{ $t('pages.imageProcess.watermark.imageOpacity') }}</label>
+                <input
+                  v-model.number="waterMarkForm.watermarkImageOpacity"
+                  type="range"
+                  min="0"
+                  max="255"
+                  step="1"
+                  class="form-range"
+                />
+                <div class="range-value">
+                  {{ waterMarkForm.watermarkImageOpacity || 0 }}
+                </div>
+
+                <PerPicbedSetting
+                  :map-field="waterMarkForm.watermarkImageOpacityMap"
+                  :default-value="255"
+                  field-name="watermarkImageOpacity"
+                  :form-object="waterMarkForm"
+                  input-type="range"
+                  :range-min="0"
+                  :range-max="255"
+                  :range-step="1"
                   @map-change="
                     (picbedType, value) =>
-                      safeSetMapValue(waterMarkForm, 'watermarkColor', picbedType, value, '#CCCCCC73')
+                      safeSetMapValue(waterMarkForm, 'watermarkImageOpacity', picbedType, value, 255)
+                  "
+                />
+              </div>
+
+              <div class="form-group">
+                <label>{{ $t('pages.imageProcess.watermark.position') }}</label>
+                <div class="position-grid">
+                  <button
+                    v-for="[key, label] in waterMarkPositionMap"
+                    :key="key"
+                    type="button"
+                    class="position-button"
+                    :class="{ active: waterMarkForm.watermarkPosition === key }"
+                    @click="waterMarkForm.watermarkPosition = key as any"
+                  >
+                    {{ label }}
+                  </button>
+                </div>
+
+                <!-- Per-picbed settings for watermarkPosition -->
+                <PerPicbedSetting
+                  :map-field="waterMarkForm.watermarkPositionMap"
+                  :default-value="'southeast'"
+                  field-name="watermarkPosition"
+                  :form-object="waterMarkForm"
+                  input-type="select"
+                  :select-options="
+                    Array.from(waterMarkPositionMap.entries()).map(([key, label]) => ({
+                      value: key,
+                      label,
+                    }))
+                  "
+                  @map-change="
+                    (picbedType, value) =>
+                      safeSetMapValue(waterMarkForm, 'watermarkPosition', picbedType, value, 'southeast')
                   "
                 />
               </div>
             </div>
-
-            <!-- Image Watermark Settings -->
-            <div v-if="waterMarkForm.watermarkType === 'image'" class="form-group">
-              <label>{{ $t('pages.imageProcess.watermark.imagePath') }}</label>
-              <input
-                v-model="waterMarkForm.watermarkImagePath"
-                type="text"
-                class="form-input"
-                :placeholder="$t('pages.imageProcess.watermark.imagePathPlaceholder')"
-              />
-
-              <PerPicbedSetting
-                :map-field="waterMarkForm.watermarkImagePathMap"
-                :default-value="''"
-                field-name="watermarkImagePath"
-                :form-object="waterMarkForm"
-                input-type="text"
-                :text-placeholder="$t('pages.imageProcess.watermark.imagePathPlaceholder')"
-                @map-change="
-                  (picbedType, value) => safeSetMapValue(waterMarkForm, 'watermarkImagePath', picbedType, value, '')
-                "
-              />
-            </div>
-
-            <div v-if="waterMarkForm.watermarkType === 'image'" class="form-group">
-              <label>{{ $t('pages.imageProcess.watermark.imageOpacity') }}</label>
-              <input
-                v-model.number="waterMarkForm.watermarkImageOpacity"
-                type="range"
-                min="0"
-                max="255"
-                step="1"
-                class="form-range"
-              />
-              <div class="range-value">
-                {{ waterMarkForm.watermarkImageOpacity || 0 }}
-              </div>
-
-              <PerPicbedSetting
-                :map-field="waterMarkForm.watermarkImageOpacityMap"
-                :default-value="255"
-                field-name="watermarkImageOpacity"
-                :form-object="waterMarkForm"
-                input-type="range"
-                :range-min="0"
-                :range-max="255"
-                :range-step="1"
-                @map-change="
-                  (picbedType, value) => safeSetMapValue(waterMarkForm, 'watermarkImageOpacity', picbedType, value, 255)
-                "
-              />
-            </div>
-
-            <div class="form-group">
-              <label>{{ $t('pages.imageProcess.watermark.position') }}</label>
-              <div class="position-grid">
-                <button
-                  v-for="[key, label] in waterMarkPositionMap"
-                  :key="key"
-                  type="button"
-                  class="position-button"
-                  :class="{ active: waterMarkForm.watermarkPosition === key }"
-                  @click="waterMarkForm.watermarkPosition = key as any"
-                >
-                  {{ label }}
-                </button>
-              </div>
-
-              <!-- Per-picbed settings for watermarkPosition -->
-              <PerPicbedSetting
-                :map-field="waterMarkForm.watermarkPositionMap"
-                :default-value="'southeast'"
-                field-name="watermarkPosition"
-                :form-object="waterMarkForm"
-                input-type="select"
-                :select-options="
-                  Array.from(waterMarkPositionMap.entries()).map(([key, label]) => ({
-                    value: key,
-                    label,
-                  }))
-                "
-                @map-change="
-                  (picbedType, value) =>
-                    safeSetMapValue(waterMarkForm, 'watermarkPosition', picbedType, value, 'southeast')
-                "
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Transform Tab -->
-      <div v-if="activeTab === 'transform'" class="tab-content">
-        <div class="settings-section">
-          <h2>{{ $t('pages.imageProcess.transform.title') }}</h2>
-          <p>{{ $t('pages.imageProcess.transform.description') }}</p>
-
-          <div class="form-grid">
-            <div class="form-group">
-              <label class="switch-label">
-                <input v-model="compressForm.isFlip" type="checkbox" class="switch-input" />
-                <span class="switch-slider" />
-                <div class="switch-content">
-                  <span class="switch-title">{{ $t('pages.imageProcess.transform.isFlip') }}</span>
-                </div>
-              </label>
-
-              <PerPicbedSetting
-                :map-field="compressForm.isFlipMap"
-                :default-value="false"
-                field-name="isFlip"
-                :form-object="compressForm"
-                input-type="checkbox"
-                @map-change="(picbedType, value) => safeSetMapValue(compressForm, 'isFlip', picbedType, value, false)"
-              />
-            </div>
-
-            <div class="form-group">
-              <label class="switch-label">
-                <input v-model="compressForm.isFlop" type="checkbox" class="switch-input" />
-                <span class="switch-slider" />
-                <div class="switch-content">
-                  <span class="switch-title">{{ $t('pages.imageProcess.transform.isFlop') }}</span>
-                </div>
-              </label>
-
-              <PerPicbedSetting
-                :map-field="compressForm.isFlopMap"
-                :default-value="false"
-                field-name="isFlop"
-                :form-object="compressForm"
-                input-type="checkbox"
-                @map-change="(picbedType, value) => safeSetMapValue(compressForm, 'isFlop', picbedType, value, false)"
-              />
-            </div>
           </div>
         </div>
 
-        <div class="settings-section">
-          <h2>{{ $t('pages.imageProcess.transform.rotationTitle') }}</h2>
-          <p>{{ $t('pages.imageProcess.transform.rotationDescription') }}</p>
-
-          <div class="form-group">
-            <label class="switch-label">
-              <input v-model="compressForm.isRotate" type="checkbox" class="switch-input" />
-              <span class="switch-slider" />
-              <div class="switch-content">
-                <span class="switch-title">{{ $t('pages.imageProcess.transform.isRotate') }}</span>
+        <!-- Transform Tab -->
+        <div v-else-if="activeTab === 'transform'" key="transform" class="tab-content">
+          <div class="settings-section">
+            <div class="section-header">
+              <div class="section-icon transform-icon">
+                <FlipHorizontal :size="20" />
               </div>
-            </label>
-
-            <PerPicbedSetting
-              :map-field="compressForm.isRotateMap"
-              :default-value="false"
-              field-name="isRotate"
-              :form-object="compressForm"
-              input-type="checkbox"
-              @map-change="(picbedType, value) => safeSetMapValue(compressForm, 'isRotate', picbedType, value, false)"
-            />
-          </div>
-
-          <div v-if="compressForm.isRotate" class="form-group">
-            <label>{{ $t('pages.imageProcess.transform.rotationDegree') }}</label>
-            <input v-model.number="compressForm.rotateDegree" type="range" min="-360" max="360" class="form-range" />
-            <div class="range-value">{{ compressForm.rotateDegree }}°</div>
-
-            <PerPicbedSetting
-              :map-field="compressForm.rotateDegreeMap"
-              :default-value="0"
-              field-name="rotateDegree"
-              :form-object="compressForm"
-              input-type="range"
-              :range-min="-360"
-              :range-max="360"
-              :range-step="1"
-              range-suffix="°"
-              @map-change="(picbedType, value) => safeSetMapValue(compressForm, 'rotateDegree', picbedType, value, 0)"
-            />
-          </div>
-        </div>
-
-        <div class="settings-section">
-          <h2>{{ $t('pages.imageProcess.transform.resizeTitle') }}</h2>
-          <p>{{ $t('pages.imageProcess.transform.resizeDescription') }}</p>
-
-          <div class="form-group">
-            <label class="switch-label">
-              <input v-model="compressForm.isReSize" type="checkbox" class="switch-input" />
-              <span class="switch-slider" />
-              <div class="switch-content">
-                <span class="switch-title">{{ $t('pages.imageProcess.transform.isResize') }}</span>
+              <div class="section-title-group">
+                <h2>{{ $t('pages.imageProcess.transform.title') }}</h2>
+                <p>{{ $t('pages.imageProcess.transform.description') }}</p>
               </div>
-            </label>
+            </div>
 
-            <PerPicbedSetting
-              :map-field="compressForm.isReSizeMap"
-              :default-value="false"
-              field-name="isReSize"
-              :form-object="compressForm"
-              input-type="checkbox"
-              @map-change="(picbedType, value) => safeSetMapValue(compressForm, 'isReSize', picbedType, value, false)"
-            />
-          </div>
-
-          <div v-if="compressForm.isReSize" class="resize-settings">
             <div class="form-grid">
               <div class="form-group">
-                <label>{{ $t('pages.imageProcess.transform.resizeWidth') }}</label>
-                <input v-model.number="compressForm.reSizeWidth" type="number" min="0" class="form-input" />
+                <label class="switch-label">
+                  <input v-model="compressForm.isFlip" type="checkbox" class="switch-input" />
+                  <span class="switch-slider" />
+                  <div class="switch-content">
+                    <span class="switch-title">{{ $t('pages.imageProcess.transform.isFlip') }}</span>
+                  </div>
+                </label>
 
                 <PerPicbedSetting
-                  :map-field="compressForm.reSizeWidthMap"
-                  :default-value="500"
-                  field-name="reSizeWidth"
+                  :map-field="compressForm.isFlipMap"
+                  :default-value="false"
+                  field-name="isFlip"
                   :form-object="compressForm"
-                  input-type="number"
-                  :number-min="0"
-                  :number-max="10000"
-                  @map-change="
-                    (picbedType, value) => safeSetMapValue(compressForm, 'reSizeWidth', picbedType, value, 500)
-                  "
+                  input-type="checkbox"
+                  @map-change="(picbedType, value) => safeSetMapValue(compressForm, 'isFlip', picbedType, value, false)"
                 />
               </div>
 
               <div class="form-group">
-                <label>{{ $t('pages.imageProcess.transform.resizeHeight') }}</label>
-                <input v-model.number="compressForm.reSizeHeight" type="number" min="0" class="form-input" />
+                <label class="switch-label">
+                  <input v-model="compressForm.isFlop" type="checkbox" class="switch-input" />
+                  <span class="switch-slider" />
+                  <div class="switch-content">
+                    <span class="switch-title">{{ $t('pages.imageProcess.transform.isFlop') }}</span>
+                  </div>
+                </label>
 
                 <PerPicbedSetting
-                  :map-field="compressForm.reSizeHeightMap"
-                  :default-value="500"
-                  field-name="reSizeHeight"
+                  :map-field="compressForm.isFlopMap"
+                  :default-value="false"
+                  field-name="isFlop"
                   :form-object="compressForm"
-                  input-type="number"
-                  :number-min="0"
-                  :number-max="10000"
-                  @map-change="
-                    (picbedType, value) => safeSetMapValue(compressForm, 'reSizeHeight', picbedType, value, 500)
-                  "
+                  input-type="checkbox"
+                  @map-change="(picbedType, value) => safeSetMapValue(compressForm, 'isFlop', picbedType, value, false)"
                 />
               </div>
             </div>
+          </div>
 
-            <div
-              v-if="
-                ((compressForm.reSizeHeight || 0) > 0 && (compressForm.reSizeWidth || 0) === 0) ||
-                ((compressForm.reSizeWidth || 0) > 0 && (compressForm.reSizeHeight || 0) === 0)
-              "
-              class="form-group"
-            >
+          <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">
               <label class="switch-label">
-                <input v-model="compressForm.skipReSizeOfSmallImg" type="checkbox" class="switch-input" />
+                <input v-model="compressForm.isRotate" type="checkbox" class="switch-input" />
                 <span class="switch-slider" />
                 <div class="switch-content">
-                  <span class="switch-title">{{ $t('pages.imageProcess.transform.skipResizeOfSmallImgHeight') }}</span>
+                  <span class="switch-title">{{ $t('pages.imageProcess.transform.isRotate') }}</span>
                 </div>
               </label>
 
               <PerPicbedSetting
-                :map-field="compressForm.skipReSizeOfSmallImgMap"
+                :map-field="compressForm.isRotateMap"
                 :default-value="false"
-                field-name="skipReSizeOfSmallImg"
+                field-name="isRotate"
+                :form-object="compressForm"
+                input-type="checkbox"
+                @map-change="(picbedType, value) => safeSetMapValue(compressForm, 'isRotate', picbedType, value, false)"
+              />
+            </div>
+
+            <div v-if="compressForm.isRotate" class="form-group">
+              <label>{{ $t('pages.imageProcess.transform.rotationDegree') }}</label>
+              <input v-model.number="compressForm.rotateDegree" type="range" min="-360" max="360" class="form-range" />
+              <div class="range-value">{{ compressForm.rotateDegree }}°</div>
+
+              <PerPicbedSetting
+                :map-field="compressForm.rotateDegreeMap"
+                :default-value="0"
+                field-name="rotateDegree"
+                :form-object="compressForm"
+                input-type="range"
+                :range-min="-360"
+                :range-max="360"
+                :range-step="1"
+                range-suffix="°"
+                @map-change="(picbedType, value) => safeSetMapValue(compressForm, 'rotateDegree', picbedType, value, 0)"
+              />
+            </div>
+          </div>
+
+          <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">
+              <label class="switch-label">
+                <input v-model="compressForm.isReSize" type="checkbox" class="switch-input" />
+                <span class="switch-slider" />
+                <div class="switch-content">
+                  <span class="switch-title">{{ $t('pages.imageProcess.transform.isResize') }}</span>
+                </div>
+              </label>
+
+              <PerPicbedSetting
+                :map-field="compressForm.isReSizeMap"
+                :default-value="false"
+                field-name="isReSize"
+                :form-object="compressForm"
+                input-type="checkbox"
+                @map-change="(picbedType, value) => safeSetMapValue(compressForm, 'isReSize', picbedType, value, false)"
+              />
+            </div>
+
+            <div v-if="compressForm.isReSize" class="resize-settings">
+              <div class="form-grid">
+                <div class="form-group">
+                  <label>{{ $t('pages.imageProcess.transform.resizeWidth') }}</label>
+                  <input v-model.number="compressForm.reSizeWidth" type="number" min="0" class="form-input" />
+
+                  <PerPicbedSetting
+                    :map-field="compressForm.reSizeWidthMap"
+                    :default-value="500"
+                    field-name="reSizeWidth"
+                    :form-object="compressForm"
+                    input-type="number"
+                    :number-min="0"
+                    :number-max="10000"
+                    @map-change="
+                      (picbedType, value) => safeSetMapValue(compressForm, 'reSizeWidth', picbedType, value, 500)
+                    "
+                  />
+                </div>
+
+                <div class="form-group">
+                  <label>{{ $t('pages.imageProcess.transform.resizeHeight') }}</label>
+                  <input v-model.number="compressForm.reSizeHeight" type="number" min="0" class="form-input" />
+
+                  <PerPicbedSetting
+                    :map-field="compressForm.reSizeHeightMap"
+                    :default-value="500"
+                    field-name="reSizeHeight"
+                    :form-object="compressForm"
+                    input-type="number"
+                    :number-min="0"
+                    :number-max="10000"
+                    @map-change="
+                      (picbedType, value) => safeSetMapValue(compressForm, 'reSizeHeight', picbedType, value, 500)
+                    "
+                  />
+                </div>
+              </div>
+
+              <div
+                v-if="
+                  ((compressForm.reSizeHeight || 0) > 0 && (compressForm.reSizeWidth || 0) === 0) ||
+                  ((compressForm.reSizeWidth || 0) > 0 && (compressForm.reSizeHeight || 0) === 0)
+                "
+                class="form-group"
+              >
+                <label class="switch-label">
+                  <input v-model="compressForm.skipReSizeOfSmallImg" type="checkbox" class="switch-input" />
+                  <span class="switch-slider" />
+                  <div class="switch-content">
+                    <span class="switch-title">{{
+                      $t('pages.imageProcess.transform.skipResizeOfSmallImgHeight')
+                    }}</span>
+                  </div>
+                </label>
+
+                <PerPicbedSetting
+                  :map-field="compressForm.skipReSizeOfSmallImgMap"
+                  :default-value="false"
+                  field-name="skipReSizeOfSmallImg"
+                  :form-object="compressForm"
+                  input-type="checkbox"
+                  @map-change="
+                    (picbedType, value) =>
+                      safeSetMapValue(compressForm, 'skipReSizeOfSmallImg', picbedType, value, false)
+                  "
+                />
+              </div>
+            </div>
+          </div>
+
+          <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>
+
+            <div class="form-group">
+              <label class="switch-label">
+                <input v-model="compressForm.isReSizeByPercent" type="checkbox" class="switch-input" />
+                <span class="switch-slider" />
+                <div class="switch-content">
+                  <span class="switch-title">{{ $t('pages.imageProcess.transform.isResizeByPercent') }}</span>
+                  <span class="switch-description">{{ $t('pages.imageProcess.transform.isResizeByPercentHint') }}</span>
+                </div>
+              </label>
+
+              <PerPicbedSetting
+                :map-field="compressForm.isReSizeByPercentMap"
+                :default-value="false"
+                field-name="isReSizeByPercent"
                 :form-object="compressForm"
                 input-type="checkbox"
                 @map-change="
-                  (picbedType, value) => safeSetMapValue(compressForm, 'skipReSizeOfSmallImg', picbedType, value, false)
+                  (picbedType, value) => safeSetMapValue(compressForm, 'isReSizeByPercent', picbedType, value, false)
+                "
+              />
+            </div>
+
+            <div v-if="compressForm.isReSizeByPercent" class="form-group">
+              <label>{{ $t('pages.imageProcess.transform.resizePercent') }}</label>
+              <input v-model.number="compressForm.reSizePercent" type="range" min="1" max="500" class="form-range" />
+              <div class="range-value">{{ compressForm.reSizePercent }}%</div>
+
+              <PerPicbedSetting
+                :map-field="compressForm.reSizePercentMap"
+                :default-value="50"
+                field-name="reSizePercent"
+                :form-object="compressForm"
+                input-type="range"
+                :range-min="1"
+                :range-max="500"
+                :range-step="1"
+                range-suffix="%"
+                @map-change="
+                  (picbedType, value) => safeSetMapValue(compressForm, 'reSizePercent', picbedType, value, 50)
                 "
               />
             </div>
           </div>
         </div>
-
-        <div class="settings-section">
-          <h2>{{ $t('pages.imageProcess.transform.percentageResize') }}</h2>
-
-          <div class="form-group">
-            <label class="switch-label">
-              <input v-model="compressForm.isReSizeByPercent" type="checkbox" class="switch-input" />
-              <span class="switch-slider" />
-              <div class="switch-content">
-                <span class="switch-title">{{ $t('pages.imageProcess.transform.isResizeByPercent') }}</span>
-                <span class="switch-description">{{ $t('pages.imageProcess.transform.isResizeByPercentHint') }}</span>
-              </div>
-            </label>
-
-            <PerPicbedSetting
-              :map-field="compressForm.isReSizeByPercentMap"
-              :default-value="false"
-              field-name="isReSizeByPercent"
-              :form-object="compressForm"
-              input-type="checkbox"
-              @map-change="
-                (picbedType, value) => safeSetMapValue(compressForm, 'isReSizeByPercent', picbedType, value, false)
-              "
-            />
-          </div>
-
-          <div v-if="compressForm.isReSizeByPercent" class="form-group">
-            <label>{{ $t('pages.imageProcess.transform.resizePercent') }}</label>
-            <input v-model.number="compressForm.reSizePercent" type="range" min="1" max="500" class="form-range" />
-            <div class="range-value">{{ compressForm.reSizePercent }}%</div>
-
-            <PerPicbedSetting
-              :map-field="compressForm.reSizePercentMap"
-              :default-value="50"
-              field-name="reSizePercent"
-              :form-object="compressForm"
-              input-type="range"
-              :range-min="1"
-              :range-max="500"
-              :range-step="1"
-              range-suffix="%"
-              @map-change="(picbedType, value) => safeSetMapValue(compressForm, 'reSizePercent', picbedType, value, 50)"
-            />
-          </div>
-        </div>
-      </div>
+      </transition>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { Image, RotateCw, Settings } from 'lucide-vue-next'
+import {
+  Droplets,
+  FileText,
+  FlipHorizontal,
+  Image,
+  Maximize2,
+  Percent,
+  RefreshCw,
+  RotateCw,
+  Settings,
+  Sliders,
+} from 'lucide-vue-next'
 import type { IBuildInCompressOptions, IBuildInWaterMarkOptions } from 'piclist'
-import { computed, onBeforeMount, reactive, ref, toRaw, watch } from 'vue'
+import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, reactive, ref, toRaw, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { configPaths } from '@/utils/configPaths'
@@ -704,6 +771,38 @@ import PerPicbedSetting from './PerPicbedSetting.vue'
 const { t } = useI18n()
 const activeTab = ref('general')
 
+// Tab indicator animation
+const tabRefs = ref<(HTMLElement | null)[]>([])
+const tabIndicatorStyle = ref<Record<string, string>>({})
+
+function setTabRef(el: any, index: number) {
+  tabRefs.value[index] = el
+}
+
+function updateTabIndicator() {
+  const activeIndex = tabs.value.findIndex(tab => tab.id === activeTab.value)
+  const activeTabEl = tabRefs.value[activeIndex]
+  if (activeTabEl) {
+    tabIndicatorStyle.value = {
+      width: `${activeTabEl.offsetWidth}px`,
+      transform: `translateX(${activeTabEl.offsetLeft}px)`,
+    }
+  }
+}
+
+watch(activeTab, () => {
+  nextTick(updateTabIndicator)
+})
+
+onMounted(() => {
+  nextTick(updateTabIndicator)
+  window.addEventListener('resize', updateTabIndicator)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updateTabIndicator)
+})
+
 const tabs = computed(() => [
   {
     id: 'general',
@@ -956,602 +1055,4 @@ watch(
 )
 </script>
 
-<style scoped>
-.image-process-settings {
-  overflow-y: auto;
-  padding: 1.5rem;
-  min-height: 100vh;
-  color: var(--color-text-primary);
-  background: var(--color-surface);
-}
-
-/* Header */
-.settings-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1.5rem;
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  padding: 1.5rem;
-  background: var(--color-surface);
-  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
-}
-
-.header-content {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.header-icon {
-  color: var(--color-accent);
-}
-
-.settings-header h1 {
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.settings-header p {
-  margin: 0;
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-}
-
-.header-actions {
-  display: flex;
-  gap: 0.75rem;
-}
-
-/* Tab Navigation */
-.tab-navigation {
-  display: flex;
-  margin-bottom: 1.5rem;
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  padding: 0.25rem;
-  background: var(--color-background-primary);
-  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
-}
-
-.tab-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  border-radius: 8px;
-  padding: 0.75rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-secondary);
-  background: transparent;
-  transition: all 0.2s ease;
-  gap: 0.5rem;
-  cursor: pointer;
-  flex: 1;
-}
-
-.tab-button:hover {
-  color: var(--color-text-primary);
-  background: var(--color-background-primary);
-}
-
-.tab-button.active {
-  color: white;
-  background: #409eff;
-  box-shadow: 0 2px 4px rgb(64 158 255 / 30%);
-}
-
-/* Settings Content */
-.settings-content {
-  display: flex;
-  flex-direction: column;
-}
-
-.tab-content {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.settings-section {
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  padding: 1.5rem;
-  background: var(--color-background-primary);
-  box-shadow: 0 2px 8px var(--color-border);
-}
-
-.settings-section h2 {
-  margin: 0 0 0.5rem;
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.settings-section p {
-  margin: 0 0 1.5rem;
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-}
-
-/* Form Elements */
-.form-group {
-  margin-bottom: 1.5rem;
-}
-
-.form-group:last-child {
-  margin-bottom: 0;
-}
-
-.form-group > label:not(.switch-label, .radio-option) {
-  display: block;
-  margin-bottom: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-.form-input,
-.form-textarea {
-  border: 1px solid var(--color-border);
-  border-radius: 8px;
-  padding: 0.75rem;
-  width: 100%;
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-  background: var(--color-background-primary);
-  transition: all 0.2s ease;
-  box-sizing: border-box;
-}
-
-.form-input:focus,
-.form-textarea:focus {
-  border-color: var(--color-blue-common);
-  outline: none;
-  box-shadow: 0 0 0 2px var(--el-color-primary-light-9, rgb(64 158 255 / 20%));
-}
-
-.form-textarea {
-  min-height: 80px;
-  resize: vertical;
-}
-
-.form-range {
-  margin-bottom: 0.5rem;
-  border-radius: 3px;
-  width: 100%;
-  height: 6px;
-  background: #e4e7ed;
-  outline: none;
-  appearance: none;
-}
-
-.form-range::-webkit-slider-thumb {
-  border: 2px solid #ffffff;
-  border-radius: 50%;
-  width: 20px;
-  height: 20px;
-  background: var(--color-blue-common);
-  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
-  appearance: none;
-  cursor: pointer;
-}
-
-.form-range::-moz-range-thumb {
-  border: 2px solid #ffffff;
-  border-radius: 50%;
-  width: 20px;
-  height: 20px;
-  background: var(--color-blue-common);
-  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
-  cursor: pointer;
-}
-
-.range-value {
-  display: inline-block;
-  margin-bottom: 0.5rem;
-  border-radius: 4px;
-  padding: 0.25rem 0.5rem;
-  min-width: 3rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-  text-align: center;
-  color: white;
-  background: var(--color-blue-common);
-}
-
-.form-color {
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
-  padding: 0;
-  width: 60px;
-  height: 40px;
-  background: transparent;
-  cursor: pointer;
-}
-
-.form-color:focus {
-  border-color: var(--color-blue-common);
-  outline: none;
-  box-shadow: 0 0 0 2px rgb(64 158 255 / 20%);
-}
-
-.color-input-group {
-  display: flex;
-  gap: 0.75rem;
-  align-items: center;
-}
-
-.color-input-group .form-input {
-  flex: 1;
-}
-
-/* Grid Layout */
-.form-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 1.5rem;
-}
-
-/* Switch Component */
-.switch-label {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  border-radius: 8px;
-  padding: 1rem;
-  background: var(--color-background-primary);
-  transition: all 0.2s ease;
-  gap: 1rem;
-  cursor: pointer;
-}
-
-.switch-label:hover {
-  border-color: var(--color-blue-common);
-  background: var(--color-surface);
-}
-
-.switch-input {
-  display: none;
-}
-
-.switch-slider {
-  position: relative;
-  border-radius: 12px;
-  width: 44px;
-  height: 24px;
-  background: var(--color-border-darker);
-  transition: all 0.3s ease;
-  flex-shrink: 0;
-}
-
-.switch-slider::before {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  border-radius: 50%;
-  width: 20px;
-  height: 20px;
-  background: #ffffff;
-  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
-  transition: all 0.3s ease;
-  content: '';
-}
-
-.switch-input:checked + .switch-slider {
-  background: var(--color-blue-common);
-}
-
-.switch-input:checked + .switch-slider::before {
-  transform: translateX(20px);
-}
-
-.switch-content {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  flex: 1;
-}
-
-.switch-title {
-  font-size: 0.9rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-  line-height: 1.4;
-}
-
-.switch-description {
-  font-size: 0.75rem;
-  color: var(--color-text-secondary);
-  line-height: 1.3;
-}
-
-/* Radio Group */
-.radio-group {
-  display: flex;
-  gap: 1rem;
-  flex-wrap: wrap;
-}
-
-.radio-option {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
-  padding: 0.5rem 0.75rem;
-  background: var(--color-background-primary);
-  transition: all 0.2s ease;
-  gap: 0.5rem;
-  cursor: pointer;
-}
-
-.radio-option:hover {
-  border-color: var(--color-blue-common);
-  background: rgb(64 158 255 / 10%);
-}
-
-.radio-input {
-  display: none;
-}
-
-.radio-indicator {
-  position: relative;
-  border: 2px solid var(--color-border);
-  border-radius: 50%;
-  width: 16px;
-  height: 16px;
-  background: var(--color-background-primary);
-  transition: all 0.2s ease;
-}
-
-.radio-input:checked + .radio-indicator {
-  border-color: var(--color-blue-common);
-  background: var(--color-background-primary);
-}
-
-.radio-input:checked + .radio-indicator::after {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  border-radius: 50%;
-  width: 8px;
-  height: 8px;
-  background: var(--color-blue-common);
-  content: '';
-  transform: translate(-50%, -50%);
-}
-
-.radio-label {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-/* Position Grid */
-.position-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 0.5rem;
-  max-width: 300px;
-}
-
-.position-button {
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
-  padding: 0.75rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-  text-align: center;
-  color: var(--color-text-secondary);
-  background: var(--color-background-primary);
-  transition: all 0.2s ease;
-  cursor: pointer;
-}
-
-.position-button:hover {
-  border-color: var(--color-blue-common);
-  color: var(--color-text-primary);
-  background: rgb(64 158 255 / 10%);
-}
-
-.position-button.active {
-  border-color: var(--color-blue-common);
-  color: white;
-  background: var(--color-blue-common);
-  box-shadow: 0 2px 4px rgb(64 158 255 / 30%);
-}
-
-/* Buttons */
-.btn {
-  display: inline-flex;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
-  padding: 0.75rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  text-decoration: none;
-  color: var(--color-text-primary);
-  background: var(--color-background-primary);
-  transition: all 0.2s ease;
-  gap: 0.5rem;
-  cursor: pointer;
-}
-
-.btn:hover {
-  border-color: var(--color-blue-common);
-  background: var(--color-background-secondary);
-}
-
-.btn-primary {
-  border-color: var(--color-blue-common);
-  color: white;
-  background: var(--color-blue-common);
-}
-
-.btn-primary:hover {
-  border-color: var(--color-primary);
-  background: var(--color-primary);
-}
-
-.btn-secondary {
-  border-color: var(--color-border);
-  color: var(--color-text-secondary);
-  background: var(--color-background-primary);
-}
-
-.btn-secondary:hover {
-  border-color: var(--color-border-secondary);
-  color: var(--color-text-primary);
-  background: var(--color-background-secondary);
-}
-
-/* Small text */
-small {
-  display: block;
-  margin-top: 0.25rem;
-  font-size: 0.75rem;
-  color: var(--color-text-tertiary);
-  line-height: 1.4;
-}
-
-/* Watermark and Resize settings groups */
-.watermark-settings,
-.resize-settings {
-  margin-top: 1rem;
-  border-top: 1px solid var(--color-border-secondary);
-  padding-top: 1rem;
-}
-
-/* Responsive Design */
-@media (width <= 768px) {
-  .image-process-settings {
-    padding: 1rem;
-  }
-
-  .settings-header {
-    flex-direction: column;
-    gap: 1rem;
-    align-items: stretch;
-  }
-
-  .header-actions {
-    justify-content: stretch;
-  }
-
-  .header-actions .btn {
-    flex: 1;
-    justify-content: center;
-  }
-
-  .tab-navigation {
-    flex-direction: column;
-  }
-
-  .form-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .radio-group {
-    flex-direction: column;
-  }
-
-  .color-input-group {
-    flex-direction: column;
-    align-items: stretch;
-  }
-}
-
-/* Dark mode adjustments */
-:root.dark .image-process-settings,
-:root.auto.dark .image-process-settings {
-  background: var(--color-background-secondary);
-}
-
-:root.dark .settings-header,
-:root.dark .tab-navigation,
-:root.dark .settings-section,
-:root.auto.dark .settings-header,
-:root.auto.dark .tab-navigation,
-:root.auto.dark .settings-section {
-  border-color: var(--color-border);
-  background: var(--color-background-tertiary);
-}
-
-:root.dark .form-input,
-:root.dark .form-textarea,
-:root.auto.dark .form-input,
-:root.auto.dark .form-textarea {
-  border-color: var(--color-border);
-  color: var(--color-text-primary);
-  background: var(--color-surface);
-}
-
-:root.dark .switch-slider::before,
-:root.auto.dark .switch-slider::before {
-  background: var(--color-surface);
-}
-
-:root.dark .btn-secondary,
-:root.auto.dark .btn-secondary {
-  border-color: var(--color-border);
-  color: var(--color-text-secondary);
-  background: var(--color-surface);
-}
-
-:root.dark .btn-secondary:hover,
-:root.auto.dark .btn-secondary:hover {
-  border-color: var(--color-border-hover);
-  color: var(--color-text-primary);
-  background: var(--color-background-tertiary);
-}
-
-:root.dark .switch-label,
-:root.auto.dark .switch-label {
-  border-color: var(--color-border);
-  color: var(--color-text-secondary);
-  background: var(--color-surface);
-}
-
-:root.dark .switch-title,
-:root.auto.dark .switch-title {
-  color: var(--color-text-primary);
-}
-
-:root.dark .switch-description,
-:root.auto.dark .switch-description {
-  color: var(--color-text-secondary);
-}
-
-:root.dark .position-button,
-:root.auto.dark .position-button {
-  border-color: var(--color-border);
-  color: var(--color-text-secondary);
-  background: var(--color-surface);
-}
-
-:root.dark .position-button:hover,
-:root.auto.dark .position-button:hover {
-  border-color: var(--color-primary);
-  color: var(--color-text-primary);
-  background: var(--color-background-tertiary);
-}
-
-:root.dark .position-button.active,
-:root.auto.dark .position-button.active {
-  border-color: var(--color-primary);
-  color: var(--color-text-inverse);
-  background: var(--color-primary);
-}
-
-:root.dark .radio-group,
-:root.auto.dark .radio-group {
-  border-color: var(--color-border);
-  color: var(--color-text-secondary);
-  background: var(--color-background-tertiary);
-}
-</style>
+<style scoped src="./css/ImageProcessSetting.css"></style>
diff --git a/src/renderer/components/css/ImageProcessSetting.css b/src/renderer/components/css/ImageProcessSetting.css
new file mode 100644
index 00000000..779925d1
--- /dev/null
+++ b/src/renderer/components/css/ImageProcessSetting.css
@@ -0,0 +1,859 @@
+/* ==================== Base & Layout ==================== */
+.image-process-settings {
+  overflow-y: auto;
+  padding: 2rem;
+  min-height: 100vh;
+  color: var(--color-text-primary);
+  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-background-secondary) 100%);
+}
+
+/* ==================== Header ==================== */
+.settings-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+  border: 1px solid var(--color-border);
+  border-radius: 16px;
+  padding: 1.75rem 2rem;
+  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-background-primary) 100%);
+  box-shadow:
+    0 4px 20px rgb(0 0 0 / 8%),
+    0 1px 3px rgb(0 0 0 / 5%);
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  gap: 1.25rem;
+}
+
+.header-icon-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 14px;
+  width: 56px;
+  height: 56px;
+  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+  box-shadow: 0 4px 12px rgb(64 158 255 / 30%);
+}
+
+.header-icon {
+  color: white;
+}
+
+.header-text h1 {
+  margin: 0 0 0.25rem;
+  font-size: 1.625rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--color-text-primary);
+}
+
+.header-text p {
+  margin: 0;
+  font-size: 0.9rem;
+  color: var(--color-text-secondary);
+}
+
+/* ==================== Tab Navigation ==================== */
+.tab-navigation {
+  position: relative;
+  display: flex;
+  margin-bottom: 2rem;
+  border: 1px solid var(--color-border);
+  border-radius: 14px;
+  padding: 6px;
+  background: var(--color-background-primary);
+  box-shadow:
+    0 2px 12px rgb(0 0 0 / 6%),
+    inset 0 1px 0 rgb(255 255 255 / 5%);
+}
+
+.tab-indicator {
+  position: absolute;
+  top: 6px;
+  left: 6px;
+  z-index: 0;
+  border-radius: 10px;
+  height: calc(100% - 12px);
+  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+  box-shadow: 0 2px 8px rgb(64 158 255 / 35%);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.tab-button {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  border-radius: 10px;
+  padding: 0.875rem 1.25rem;
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  background: transparent;
+  transition: all 0.25s ease;
+  gap: 0.625rem;
+  cursor: pointer;
+  flex: 1;
+}
+
+.tab-button:hover:not(.active) {
+  color: var(--color-text-primary);
+  background: var(--color-background-secondary);
+}
+
+.tab-button.active {
+  color: white;
+  background: transparent;
+}
+
+/* ==================== Settings Content ==================== */
+.settings-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.tab-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1.75rem;
+}
+
+/* Fade slide transition for tab content */
+.fade-slide-enter-active,
+.fade-slide-leave-active {
+  transition: all 0.3s ease;
+}
+
+.fade-slide-enter-from {
+  opacity: 0;
+  transform: translateY(12px);
+}
+
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translateY(-12px);
+}
+
+/* ==================== Settings Section ==================== */
+.settings-section {
+  border: 1px solid var(--color-border);
+  border-radius: 16px;
+  padding: 1.75rem;
+  background: var(--color-background-primary);
+  box-shadow:
+    0 2px 12px rgb(0 0 0 / 5%),
+    0 1px 2px rgb(0 0 0 / 3%);
+  transition: all 0.25s ease;
+}
+
+.settings-section:hover {
+  box-shadow:
+    0 4px 20px rgb(0 0 0 / 8%),
+    0 2px 4px rgb(0 0 0 / 4%);
+}
+
+/* Section Header with Icon */
+.section-header {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 1.5rem;
+  gap: 1rem;
+}
+
+.section-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  width: 30px;
+  height: 30px;
+  color: #409eff;
+  background: linear-gradient(135deg, #409eff15 0%, #409eff25 100%);
+  flex-shrink: 0;
+}
+
+.section-icon.watermark-icon {
+  color: #67c23a;
+  background: linear-gradient(135deg, #67c23a15 0%, #67c23a25 100%);
+}
+
+.section-icon.transform-icon {
+  color: #e6a23c;
+  background: linear-gradient(135deg, #e6a23c15 0%, #e6a23c25 100%);
+}
+
+.section-icon.rotate-icon {
+  color: #909399;
+  background: linear-gradient(135deg, #e6a23c15 0%, #e6a23c25 100%);
+}
+
+.section-icon.resize-icon {
+  color: #f56c6c;
+  background: linear-gradient(135deg, #f56c6c15 0%, #f56c6c25 100%);
+}
+
+.section-icon.percent-icon {
+  color: #b37feb;
+  background: linear-gradient(135deg, #b37feb15 0%, #b37feb25 100%);
+}
+
+.section-title-group h2 {
+  margin: 0 0 0.25rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--color-text-primary);
+}
+
+.section-title-group p {
+  margin: 0;
+  font-size: 0.85rem;
+  color: var(--color-text-secondary);
+  line-height: 1.5;
+}
+
+.settings-section h2 {
+  margin: 0 0 0.5rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.settings-section p {
+  margin: 0 0 1.5rem;
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+}
+
+/* ==================== Form Elements ==================== */
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-group:last-child {
+  margin-bottom: 0;
+}
+
+.form-group > label:not(.switch-label, .radio-option) {
+  display: block;
+  margin-bottom: 0.625rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.form-input,
+.form-textarea {
+  border: 1.5px solid var(--color-border);
+  border-radius: 10px;
+  padding: 0.875rem 1rem;
+  width: 100%;
+  font-size: 0.9rem;
+  color: var(--color-text-primary);
+  background: var(--color-background-primary);
+  transition: all 0.2s ease;
+  box-sizing: border-box;
+}
+
+.form-input:hover,
+.form-textarea:hover {
+  border-color: var(--color-border-hover, #c0c4cc);
+}
+
+.form-input:focus,
+.form-textarea:focus {
+  border-color: #409eff;
+  outline: none;
+  box-shadow: 0 0 0 3px rgb(64 158 255 / 15%);
+}
+
+.form-textarea {
+  min-height: 90px;
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  resize: vertical;
+}
+
+/* ==================== Range Slider ==================== */
+.form-range {
+  margin: 0.75rem 0;
+  border-radius: 4px;
+  width: 100%;
+  height: 8px;
+  background: linear-gradient(90deg, #409eff 0%, #e4e7ed 0%);
+  outline: none;
+  appearance: none;
+  transition: background 0.15s ease;
+}
+
+.form-range::-webkit-slider-thumb {
+  border: 3px solid #ffffff;
+  border-radius: 50%;
+  width: 22px;
+  height: 22px;
+  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+  box-shadow:
+    0 2px 8px rgb(64 158 255 / 40%),
+    0 1px 2px rgb(0 0 0 / 10%);
+  appearance: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.form-range::-webkit-slider-thumb:hover {
+  transform: scale(1.1);
+  box-shadow:
+    0 4px 12px rgb(64 158 255 / 50%),
+    0 2px 4px rgb(0 0 0 / 15%);
+}
+
+.form-range::-moz-range-thumb {
+  border: 3px solid #ffffff;
+  border-radius: 50%;
+  width: 22px;
+  height: 22px;
+  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+  box-shadow:
+    0 2px 8px rgb(64 158 255 / 40%),
+    0 1px 2px rgb(0 0 0 / 10%);
+  cursor: pointer;
+}
+
+.range-value {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 0.5rem;
+  border-radius: 8px;
+  padding: 0.375rem 0.75rem;
+  min-width: 3.5rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-align: center;
+  color: white;
+  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+  box-shadow: 0 2px 6px rgb(64 158 255 / 30%);
+}
+
+/* ==================== Color Input ==================== */
+.form-color {
+  overflow: hidden;
+  border: 2px solid var(--color-border);
+  border-radius: 10px;
+  padding: 2px;
+  width: 48px;
+  height: 48px;
+  background: var(--color-background-primary);
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.form-color:hover {
+  border-color: #409eff;
+  box-shadow: 0 0 0 3px rgb(64 158 255 / 15%);
+}
+
+.form-color:focus {
+  border-color: #409eff;
+  outline: none;
+  box-shadow: 0 0 0 3px rgb(64 158 255 / 20%);
+}
+
+.color-input-group {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.color-input-group .form-input {
+  flex: 1;
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+}
+
+/* ==================== Grid Layout ==================== */
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1.75rem;
+}
+
+/* ==================== Switch Component ==================== */
+.switch-label {
+  display: flex;
+  align-items: center;
+  border: 1.5px solid var(--color-border);
+  border-radius: 12px;
+  padding: 1.125rem 1.25rem;
+  background: var(--color-background-primary);
+  transition: all 0.25s ease;
+  gap: 1rem;
+  cursor: pointer;
+}
+
+.switch-label:hover {
+  border-color: #409eff;
+  background: var(--color-surface);
+  box-shadow: 0 2px 8px rgb(64 158 255 / 10%);
+}
+
+.switch-input {
+  display: none;
+}
+
+.switch-slider {
+  position: relative;
+  border-radius: 14px;
+  width: 52px;
+  height: 28px;
+  background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%);
+  box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  flex-shrink: 0;
+}
+
+.switch-slider::before {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  border-radius: 50%;
+  width: 22px;
+  height: 22px;
+  background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
+  box-shadow:
+    0 2px 6px rgb(0 0 0 / 20%),
+    0 1px 2px rgb(0 0 0 / 10%);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  content: '';
+}
+
+.switch-input:checked + .switch-slider {
+  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+  box-shadow:
+    inset 0 1px 3px rgb(0 0 0 / 10%),
+    0 2px 8px rgb(64 158 255 / 30%);
+}
+
+.switch-input:checked + .switch-slider::before {
+  transform: translateX(24px);
+}
+
+.switch-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  flex: 1;
+}
+
+.switch-title {
+  font-size: 0.925rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  line-height: 1.4;
+}
+
+.switch-description {
+  font-size: 0.8rem;
+  color: var(--color-text-secondary);
+  line-height: 1.4;
+}
+
+/* ==================== Radio Group ==================== */
+.radio-group {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.radio-option {
+  display: flex;
+  align-items: center;
+  border: 1.5px solid var(--color-border);
+  border-radius: 10px;
+  padding: 0.75rem 1rem;
+  background: var(--color-background-primary);
+  transition: all 0.25s ease;
+  gap: 0.625rem;
+  cursor: pointer;
+}
+
+.radio-option:hover {
+  border-color: #409eff;
+  background: rgb(64 158 255 / 8%);
+}
+
+.radio-input {
+  display: none;
+}
+
+.radio-indicator {
+  position: relative;
+  border: 2px solid var(--color-border);
+  border-radius: 50%;
+  width: 18px;
+  height: 18px;
+  background: var(--color-background-primary);
+  transition: all 0.25s ease;
+}
+
+.radio-input:checked + .radio-indicator {
+  border-color: #409eff;
+  background: var(--color-background-primary);
+}
+
+.radio-input:checked + .radio-indicator::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  width: 10px;
+  height: 10px;
+  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+  content: '';
+  transform: translate(-50%, -50%);
+}
+
+.radio-label {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+/* ==================== Position Grid ==================== */
+.position-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.625rem;
+  max-width: 320px;
+}
+
+.position-button {
+  border: 1.5px solid var(--color-border);
+  border-radius: 10px;
+  padding: 0.875rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-align: center;
+  color: var(--color-text-secondary);
+  background: var(--color-background-primary);
+  transition: all 0.25s ease;
+  cursor: pointer;
+}
+
+.position-button:hover {
+  border-color: #409eff;
+  color: var(--color-text-primary);
+  background: rgb(64 158 255 / 8%);
+  transform: translateY(-1px);
+}
+
+.position-button.active {
+  border-color: #409eff;
+  color: white;
+  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+  box-shadow: 0 4px 12px rgb(64 158 255 / 35%);
+  transform: translateY(-1px);
+}
+
+/* ==================== Buttons ==================== */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  border: 1.5px solid var(--color-border);
+  border-radius: 10px;
+  padding: 0.75rem 1.25rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-decoration: none;
+  color: var(--color-text-primary);
+  background: var(--color-background-primary);
+  transition: all 0.25s ease;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+.btn:hover {
+  border-color: #409eff;
+  background: var(--color-background-secondary);
+  transform: translateY(-1px);
+}
+
+.btn-primary {
+  border-color: #409eff;
+  color: white;
+  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+  box-shadow: 0 2px 8px rgb(64 158 255 / 30%);
+}
+
+.btn-primary:hover {
+  border-color: #66b1ff;
+  background: linear-gradient(135deg, #66b1ff 0%, #79bbff 100%);
+  box-shadow: 0 4px 12px rgb(64 158 255 / 40%);
+}
+
+.btn-secondary {
+  border-color: var(--color-border);
+  color: var(--color-text-secondary);
+  background: var(--color-background-primary);
+}
+
+.btn-secondary:hover {
+  border-color: var(--color-border-secondary);
+  color: var(--color-text-primary);
+  background: var(--color-background-secondary);
+}
+
+/* ==================== Small Text / Hints ==================== */
+small {
+  display: block;
+  margin-top: 0.5rem;
+  border-radius: 6px;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8rem;
+  color: var(--color-text-tertiary);
+  background: var(--color-background-secondary);
+  line-height: 1.5;
+}
+
+/* ==================== Watermark and Resize settings groups ==================== */
+.watermark-settings,
+.resize-settings {
+  margin-top: 1.5rem;
+  border-top: 1px solid var(--color-border-secondary);
+  padding-top: 1.5rem;
+  animation: slide-down 0.3s ease;
+}
+
+@keyframes slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ==================== Responsive Design ==================== */
+@media (width <= 768px) {
+  .image-process-settings {
+    padding: 1rem;
+  }
+
+  .settings-header {
+    flex-direction: column;
+    gap: 1rem;
+    align-items: stretch;
+    padding: 1.25rem;
+  }
+
+  .header-icon-wrapper {
+    width: 48px;
+    height: 48px;
+  }
+
+  .header-text h1 {
+    font-size: 1.375rem;
+  }
+
+  .header-actions {
+    justify-content: stretch;
+  }
+
+  .header-actions .btn {
+    flex: 1;
+    justify-content: center;
+  }
+
+  .tab-navigation {
+    flex-direction: column;
+  }
+
+  .tab-indicator {
+    display: none;
+  }
+
+  .tab-button.active {
+    background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+  }
+
+  .form-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .radio-group {
+    flex-direction: column;
+  }
+
+  .color-input-group {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .position-grid {
+    max-width: 100%;
+  }
+
+  .section-header {
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+}
+
+/* ==================== Dark mode adjustments ==================== */
+:root.dark .image-process-settings,
+:root.auto.dark .image-process-settings {
+  background: linear-gradient(180deg, var(--color-background-secondary) 0%, var(--color-background-tertiary) 100%);
+}
+
+:root.dark .settings-header,
+:root.auto.dark .settings-header {
+  border-color: var(--color-border);
+  background: linear-gradient(135deg, var(--color-background-tertiary) 0%, var(--color-surface) 100%);
+}
+
+:root.dark .tab-navigation,
+:root.auto.dark .tab-navigation {
+  border-color: var(--color-border);
+  background: var(--color-background-tertiary);
+}
+
+:root.dark .settings-section,
+:root.auto.dark .settings-section {
+  border-color: var(--color-border);
+  background: var(--color-background-tertiary);
+}
+
+:root.dark .form-input,
+:root.dark .form-textarea,
+:root.auto.dark .form-input,
+:root.auto.dark .form-textarea {
+  border-color: var(--color-border);
+  color: var(--color-text-primary);
+  background: var(--color-surface);
+}
+
+:root.dark .form-range,
+:root.auto.dark .form-range {
+  background: linear-gradient(90deg, #409eff 0%, #4a4a52 0%);
+}
+
+:root.dark .switch-slider,
+:root.auto.dark .switch-slider {
+  background: linear-gradient(180deg, #4a4a52 0%, #3a3a42 100%);
+}
+
+:root.dark .switch-slider::before,
+:root.auto.dark .switch-slider::before {
+  background: linear-gradient(180deg, #e0e0e0 0%, #d0d0d0 100%);
+}
+
+:root.dark .btn-secondary,
+:root.auto.dark .btn-secondary {
+  border-color: var(--color-border);
+  color: var(--color-text-secondary);
+  background: var(--color-surface);
+}
+
+:root.dark .btn-secondary:hover,
+:root.auto.dark .btn-secondary:hover {
+  border-color: var(--color-border-hover);
+  color: var(--color-text-primary);
+  background: var(--color-background-tertiary);
+}
+
+:root.dark .switch-label,
+:root.auto.dark .switch-label {
+  border-color: var(--color-border);
+  background: var(--color-surface);
+}
+
+:root.dark .switch-label:hover,
+:root.auto.dark .switch-label:hover {
+  border-color: #409eff;
+  background: var(--color-background-tertiary);
+}
+
+:root.dark .switch-title,
+:root.auto.dark .switch-title {
+  color: var(--color-text-primary);
+}
+
+:root.dark .switch-description,
+:root.auto.dark .switch-description {
+  color: var(--color-text-secondary);
+}
+
+:root.dark .position-button,
+:root.auto.dark .position-button {
+  border-color: var(--color-border);
+  color: var(--color-text-secondary);
+  background: var(--color-surface);
+}
+
+:root.dark .position-button:hover,
+:root.auto.dark .position-button:hover {
+  border-color: #409eff;
+  color: var(--color-text-primary);
+  background: var(--color-background-tertiary);
+}
+
+:root.dark .position-button.active,
+:root.auto.dark .position-button.active {
+  border-color: #409eff;
+  color: white;
+  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+}
+
+:root.dark .radio-option,
+:root.auto.dark .radio-option {
+  border-color: var(--color-border);
+  background: var(--color-surface);
+}
+
+:root.dark .radio-option:hover,
+:root.auto.dark .radio-option:hover {
+  border-color: #409eff;
+  background: var(--color-background-tertiary);
+}
+
+:root.dark .section-icon,
+:root.auto.dark .section-icon {
+  background: linear-gradient(135deg, #409eff25 0%, #409eff35 100%);
+}
+
+:root.dark .section-icon.watermark-icon,
+:root.auto.dark .section-icon.watermark-icon {
+  background: linear-gradient(135deg, #67c23a25 0%, #67c23a35 100%);
+}
+
+:root.dark .section-icon.transform-icon,
+:root.auto.dark .section-icon.transform-icon {
+  background: linear-gradient(135deg, #e6a23c25 0%, #e6a23c35 100%);
+}
+
+:root.dark .section-icon.rotate-icon,
+:root.auto.dark .section-icon.rotate-icon {
+  background: linear-gradient(135deg, #90939925 0%, #90939935 100%);
+}
+
+:root.dark .section-icon.resize-icon,
+:root.auto.dark .section-icon.resize-icon {
+  background: linear-gradient(135deg, #f56c6c25 0%, #f56c6c35 100%);
+}
+
+:root.dark .section-icon.percent-icon,
+:root.auto.dark .section-icon.percent-icon {
+  background: linear-gradient(135deg, #b37feb25 0%, #b37feb35 100%);
+}
+
+:root.dark small,
+:root.auto.dark small {
+  background: var(--color-surface);
+}
\ No newline at end of file
diff --git a/src/renderer/pages/PicGoSetting.vue b/src/renderer/pages/PicGoSetting.vue
index 71ff0e4a..635ac6c3 100644
--- a/src/renderer/pages/PicGoSetting.vue
+++ b/src/renderer/pages/PicGoSetting.vue
@@ -1744,7 +1744,7 @@
           <h3 class="dialog-title">
             {{ t('pages.imageProcess.title') }}
           </h3>
-          <button class="dialog-close" @click="imageProcessDialogVisible = false">×</button>
+          <button class="dialog-close" @click="imageProcessDialogVisible = false">X</button>
         </div>
         <div class="dialog-content">
           <ImageProcessSetting v-model="imageProcessDialogVisible" />
diff --git a/src/renderer/pages/css/PicgoSetting.css b/src/renderer/pages/css/PicgoSetting.css
index 2c94340d..d009d21c 100644
--- a/src/renderer/pages/css/PicgoSetting.css
+++ b/src/renderer/pages/css/PicgoSetting.css
@@ -488,12 +488,12 @@
   overflow-y: auto;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-2xl);
-  padding: 1.5rem;
-  width: 80vw;
+  padding: 0.75rem;
+  width: 85vw;
   max-width: 90vw;
-  max-height: 80vh;
+  max-height: 85vh;
   background: var(--color-surface);
-  box-shadow: var(--shadow-xl);
+    box-shadow: var(--shadow-xl);
   box-shadow: 0 10px 25px rgb(0 0 0 / 15%);
 }
 
diff --git a/src/renderer/pages/css/UploadPage.css b/src/renderer/pages/css/UploadPage.css
index 32ab6fdd..468a5128 100644
--- a/src/renderer/pages/css/UploadPage.css
+++ b/src/renderer/pages/css/UploadPage.css
@@ -19,10 +19,9 @@ html, body {
 /* Card Base */
 .upload-card {
   overflow: hidden;
-  border: 1px solid var(--color-border-secondary);
+  border: 0.2px solid var(--color-border-secondary);
   border-radius: var(--radius-xl);
   background: var(--color-background-secondary);
-  box-shadow: var(--shadow-sm);
   transition: var(--transition-medium);
 }
 
@@ -453,10 +452,10 @@ html, body {
   margin: auto;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-2xl);
-  width: 80vw;
+  width: 90vw;
   max-width: 90vw;
-  height: 80vh;
-  max-height: 90vh;
+  height: 85vh;
+  max-height: 85vh;
   background: var(--color-surface);
   box-shadow: var(--shadow-xl);
 }
@@ -466,7 +465,7 @@ html, body {
   justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid var(--color-border-secondary);
-  padding: 1.5rem 2rem;
+  padding: 0.95rem 1rem;
 }
 
 .modal-title {