✨ Feature(custom): enhance upload page UI and functionality

public/i18n/en.yml

@@ -125,6 +125,7 @@ UPLOAD_PAGE_IMAGE_PROCESS_QUALITY: Compression Quality(1-100)
 UPLOAD_PAGE_IMAGE_PROCESS_ISCONVERT: Convert Format
 UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT: Destination Format
 UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT_SPECIFIC: 'Specific Format, Please enter in json format, e.g. {"png": "jpg"}'
+UPLOAD_PAGE_IMAGE_PROCESS_TRANSFORMATION: Image Rotate Setting
 UPLOAD_PAGE_IMAGE_PROCESS_ISFLIP: Whether to flip vertically
 UPLOAD_PAGE_IMAGE_PROCESS_ISFLOP: Whether to flip horizontally
 UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZE: Resize to fixed size

public/i18n/zh-CN.yml

@@ -125,6 +125,7 @@ UPLOAD_PAGE_IMAGE_PROCESS_QUALITY: 压缩质量(1-100)
 UPLOAD_PAGE_IMAGE_PROCESS_ISCONVERT: 是否转换格式
 UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT: 转换目的格式
 UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT_SPECIFIC: '精细化转换格式, 请输入JSON格式，如: {"png": "jpg"}'
+UPLOAD_PAGE_IMAGE_PROCESS_TRANSFORMATION: 图片旋转设置
 UPLOAD_PAGE_IMAGE_PROCESS_ISFLIP: 是否进行垂直翻转
 UPLOAD_PAGE_IMAGE_PROCESS_ISFLOP: 是否进行水平翻转
 UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZE: 是否按固定尺寸调整图片
@@ -350,7 +351,7 @@ DRAG_FILE_TO_HERE: 将文件拖拽到此处，或
 CLICK_TO_UPLOAD: 点击上传
 LINK_FORMAT: 链接格式
 CUSTOM: 自定义
-CLIPBOARD_PICTURE: 剪贴板图片
+CLIPBOARD_PICTURE: 剪贴板
 TIPS_DRAG_VALID_PICTURE_OR_URL: 请拖入合法的图片文件或者图片URL地址
 TIPS_INPUT_URL: 请输入URL
 TIPS_HTTP_PREFIX: http://或者https://开头

public/i18n/zh-TW.yml

@@ -125,6 +125,7 @@ UPLOAD_PAGE_IMAGE_PROCESS_QUALITY: 壓縮質量(1-100)
 UPLOAD_PAGE_IMAGE_PROCESS_ISCONVERT: 是否轉換格式
 UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT: 轉換目的格式
 UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT_SPECIFIC: '指定格式, 请输入JSON格式配置，如{"jpg":"png"}'
+UPLOAD_PAGE_IMAGE_PROCESS_TRANSFORMATION: 圖片翻轉设置
 UPLOAD_PAGE_IMAGE_PROCESS_ISFLIP: 是否進行垂直翻轉
 UPLOAD_PAGE_IMAGE_PROCESS_ISFLOP: 是否進行水平翻轉
 UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZE: 是否按固定尺寸調整圖片
@@ -348,7 +349,7 @@ DRAG_FILE_TO_HERE: 將檔案拖曳到此處，或
 CLICK_TO_UPLOAD: 點擊上傳
 LINK_FORMAT: 連結格式
 CUSTOM: 自訂
-CLIPBOARD_PICTURE: 剪貼簿圖片
+CLIPBOARD_PICTURE: 剪貼簿
 TIPS_DRAG_VALID_PICTURE_OR_URL: 請拖入合法的圖片檔案或者圖片URL地址
 TIPS_INPUT_URL: 請輸入URL
 TIPS_HTTP_PREFIX: http://或者https://開頭

src/renderer/components/ImageProcessSetting.vue

@@ -2,138 +2,281 @@
   <el-form
     label-position="top"
     require-asterisk-position="right"
-    label-width="10vw"
     size="default"
     :model="waterMarkForm"
+    class="image-process-form"
   >
-    <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISADDWM')">
+    <div class="settings-grid">
-      <el-switch v-model="waterMarkForm.isAddWatermark" :style="switchStyle" />
+      <!-- Left Column -->
-    </el-form-item>
+      <div class="settings-column">
-    <el-form-item v-show="waterMarkForm.isAddWatermark" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE')">
+        <!-- Watermark Settings Section -->
-      <el-radio-group v-model="waterMarkForm.watermarkType">
+        <section class="settings-section">
-        <el-radio value="text">
+          <div class="section-header">
-          {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_TEXT') }}
+            <el-icon><Picture /></el-icon>
-        </el-radio>
+            <h3>{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_ISADDWM') }}</h3>
-        <el-radio value="image">
+          </div>
-          {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_IMAGE') }}
+
-        </el-radio>
+          <div class="section-content">
-      </el-radio-group>
+            <el-form-item class="toggle-control">
-    </el-form-item>
+              <el-switch v-model="waterMarkForm.isAddWatermark" :style="switchStyle" />
-    <el-form-item v-show="waterMarkForm.isAddWatermark" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISFULLSCREEN_WM')">
+              <span class="toggle-label">{{ waterMarkForm.isAddWatermark ? $T('ENABLE') : $T('DISABLE') }}</span>
-      <el-switch v-model="waterMarkForm.isFullScreenWatermark" :style="switchStyle" />
+            </el-form-item>
-    </el-form-item>
+
-    <el-form-item v-show="waterMarkForm.isAddWatermark" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMDEGREE')">
+            <div v-show="waterMarkForm.isAddWatermark" class="subsection">
-      <el-input-number v-model="waterMarkForm.watermarkDegree" :step="1" />
+              <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE')">
-    </el-form-item>
+                <el-radio-group v-model="waterMarkForm.watermarkType" class="radio-group">
-    <el-form-item
+                  <el-radio value="text">{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_TEXT') }}</el-radio>
-      v-show="waterMarkForm.isAddWatermark && waterMarkForm.watermarkType === 'text'"
+                  <el-radio value="image">{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_IMAGE') }}</el-radio>
-      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTEXT')"
+                </el-radio-group>
-    >
+              </el-form-item>
-      <el-input v-model="waterMarkForm.watermarkText" />
+
-    </el-form-item>
+              <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISFULLSCREEN_WM')" class="toggle-control">
-    <el-form-item
+                <el-switch v-model="waterMarkForm.isFullScreenWatermark" :style="switchStyle" />
-      v-show="waterMarkForm.isAddWatermark && waterMarkForm.watermarkType === 'text'"
+              </el-form-item>
-      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTEXT_FONT_PATH')"
+
-    >
+              <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMPOSITION')">
-      <el-input v-model="waterMarkForm.watermarkFontPath" />
+                <el-radio-group v-model="waterMarkForm.watermarkPosition" class="position-grid">
-    </el-form-item>
+                  <el-radio v-for="item in waterMarkPositionMap" :key="item[0]" :value="item[0]">
-    <el-form-item v-show="waterMarkForm.isAddWatermark" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMRATIO')">
+                    {{ item[1] }}
-      <el-input-number v-model="waterMarkForm.watermarkScaleRatio" :min="0" :max="1" :step="0.01" />
+                  </el-radio>
-    </el-form-item>
+                </el-radio-group>
-    <el-form-item
+              </el-form-item>
-      v-show="waterMarkForm.isAddWatermark && waterMarkForm.watermarkType === 'text'"
+
-      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMCOLOR')"
+              <div class="form-row">
-    >
+                <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMDEGREE')">
-      <el-color-picker v-model="waterMarkForm.watermarkColor" show-alpha />
+                  <el-input-number v-model="waterMarkForm.watermarkDegree" :step="1" controls-position="right" />
-    </el-form-item>
+                </el-form-item>
-    <el-form-item
+
-      v-show="waterMarkForm.isAddWatermark && waterMarkForm.watermarkType === 'image'"
+                <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMRATIO')">
-      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMPATH')"
+                  <el-input-number
-    >
+                    v-model="waterMarkForm.watermarkScaleRatio"
-      <el-input v-model="waterMarkForm.watermarkImagePath" />
+                    :min="0"
-    </el-form-item>
+                    :max="1"
-    <el-form-item v-show="waterMarkForm.isAddWatermark" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMPOSITION')">
+                    :step="0.01"
-      <el-radio-group v-model="waterMarkForm.watermarkPosition">
+                    controls-position="right"
-        <el-radio v-for="item in waterMarkPositionMap" :key="item[0]" :value="item[0]">
+                  />
-          {{ item[1] }}
+                </el-form-item>
-        </el-radio>
+              </div>
-      </el-radio-group>
+
-    </el-form-item>
+              <!-- Text Watermark Options -->
-    <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISREMOVEEXIF')">
+              <div v-show="waterMarkForm.watermarkType === 'text'" class="subsection variant-subsection">
-      <el-switch v-model="compressForm.isRemoveExif" :style="switchStyle" />
+                <h4 class="subsection-title">{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_TEXT') }}</h4>
-    </el-form-item>
+                <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTEXT')">
-    <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_QUALITY')">
+                  <el-input v-model="waterMarkForm.watermarkText" />
-      <el-input-number v-model="compressForm.quality" :min="1" :max="100" :step="1" />
+                </el-form-item>
-    </el-form-item>
+
-    <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISCONVERT')">
+                <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTEXT_FONT_PATH')">
-      <el-switch v-model="compressForm.isConvert" :style="switchStyle" />
+                  <el-input v-model="waterMarkForm.watermarkFontPath" placeholder="/path/to/font.ttf" />
-    </el-form-item>
+                </el-form-item>
-    <el-form-item v-show="compressForm.isConvert" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT')">
+
-      <el-select v-model="compressForm.convertFormat" :persistent="false" teleported>
+                <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMCOLOR')">
-        <el-option v-for="item in availableFormat" :key="item" :label="item" :value="item" />
+                  <div class="color-picker-container">
-      </el-select>
+                    <el-color-picker v-model="waterMarkForm.watermarkColor" show-alpha />
-    </el-form-item>
+                    <span class="color-value">{{ waterMarkForm.watermarkColor }}</span>
-    <el-form-item v-show="compressForm.isConvert" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT_SPECIFIC')">
+                  </div>
-      <el-input
+                </el-form-item>
-        v-model="formatConvertObj"
+              </div>
-        placeholder='{"jpg": "png", "png": "jpg"}'
+
-        type="textarea"
+              <!-- Image Watermark Options -->
-        :autosize="{ minRows: 2, maxRows: 4 }"
+              <div v-show="waterMarkForm.watermarkType === 'image'" class="subsection variant-subsection">
-      />
+                <h4 class="subsection-title">{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_IMAGE') }}</h4>
-    </el-form-item>
+                <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMPATH')">
-    <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISFLIP')">
+                  <el-input v-model="waterMarkForm.watermarkImagePath" placeholder="/path/to/watermark.png" />
-      <el-switch v-model="compressForm.isFlip" :style="switchStyle" />
+                </el-form-item>
-    </el-form-item>
+              </div>
-    <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISFLOP')">
+            </div>
-      <el-switch v-model="compressForm.isFlop" :style="switchStyle" />
+          </div>
-    </el-form-item>
+        </section>
-    <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZE')">
+
-      <el-switch v-model="compressForm.isReSize" :style="switchStyle" />
+        <!-- Format Conversion Settings Section -->
-    </el-form-item>
+        <section class="settings-section">
-    <el-form-item v-show="compressForm.isReSize" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEWIDTH')">
+          <div class="section-header">
-      <el-input-number v-model="compressForm.reSizeWidth" :min="0" />
+            <el-icon><Document /></el-icon>
-    </el-form-item>
+            <h3>{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_ISCONVERT') }}</h3>
-    <el-form-item v-show="compressForm.isReSize" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEHEIGHT')">
+          </div>
-      <el-input-number v-model="compressForm.reSizeHeight" :min="0" />
+
-    </el-form-item>
+          <div class="section-content">
-    <el-form-item
+            <el-form-item class="toggle-control">
-      v-show="compressForm.isReSize && compressForm.reSizeHeight! > 0 && compressForm.reSizeWidth === 0"
+              <el-switch v-model="compressForm.isConvert" :style="switchStyle" />
-      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_SKIPRESIZEOfSMALLIMG_HEIGHT')"
+              <span class="toggle-label">{{ compressForm.isConvert ? $T('ENABLE') : $T('DISABLE') }}</span>
-    >
+            </el-form-item>
-      <el-switch v-model="compressForm.skipReSizeOfSmallImg" :style="switchStyle" />
+
-    </el-form-item>
+            <div v-show="compressForm.isConvert" class="subsection">
-    <el-form-item
+              <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT')">
-      v-show="compressForm.isReSize && compressForm.reSizeWidth! > 0 && compressForm.reSizeHeight === 0"
+                <el-select v-model="compressForm.convertFormat" :persistent="false" teleported class="full-width">
-      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_SKIPRESIZEOfSMALLIMG_WIDTH')"
+                  <el-option v-for="item in availableFormat" :key="item" :label="item" :value="item" />
-    >
+                </el-select>
-      <el-switch v-model="compressForm.skipReSizeOfSmallImg" :style="switchStyle" />
+              </el-form-item>
-    </el-form-item>
+
-    <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZEBYPERCENT')">
+              <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT_SPECIFIC')">
-      <el-switch v-model="compressForm.isReSizeByPercent" :style="switchStyle" />
+                <el-input
-    </el-form-item>
+                  v-model="formatConvertObj"
-    <el-form-item v-show="compressForm.isReSizeByPercent" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEPERCENT')">
+                  placeholder='{"jpg": "png", "png": "jpg"}'
-      <el-input-number v-model="compressForm.reSizePercent" :min="0" />
+                  type="textarea"
-    </el-form-item>
+                  :autosize="{ minRows: 2, maxRows: 4 }"
-    <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISROTATE')">
+                  class="code-input"
-      <el-switch v-model="compressForm.isRotate" :style="switchStyle" />
+                />
-    </el-form-item>
+              </el-form-item>
-    <el-form-item v-show="compressForm.isRotate" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ROTATEDEGREE')">
+            </div>
-      <el-input-number v-model="compressForm.rotateDegree" :step="1" />
+          </div>
-    </el-form-item>
+        </section>
-    <el-form-item>
+      </div>
+
+      <!-- Right Column -->
+      <div class="settings-column">
+        <!-- Image Processing Settings Section -->
+        <section class="settings-section">
+          <div class="section-header">
+            <el-icon><Edit /></el-icon>
+            <h3>{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_QUALITY') }}</h3>
+          </div>
+
+          <div class="section-content">
+            <el-form-item class="toggle-control">
+              <el-switch v-model="compressForm.isRemoveExif" :style="switchStyle" />
+              <span class="toggle-label">{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_ISREMOVEEXIF') }}</span>
+            </el-form-item>
+
+            <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_QUALITY')">
+              <el-slider v-model="compressForm.quality" :min="1" :max="100" :step="1" show-input class="full-width" />
+            </el-form-item>
+          </div>
+        </section>
+
+        <!-- Resize Settings Section -->
+        <section class="settings-section">
+          <div class="section-header">
+            <el-icon><ZoomIn /></el-icon>
+            <h3>{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZE') }}</h3>
+          </div>
+
+          <div class="section-content">
+            <el-form-item class="toggle-control">
+              <el-switch v-model="compressForm.isReSize" :style="switchStyle" />
+              <span class="toggle-label">{{ compressForm.isReSize ? $T('ENABLE') : $T('DISABLE') }}</span>
+            </el-form-item>
+
+            <div v-show="compressForm.isReSize" class="subsection">
+              <div class="form-row">
+                <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEWIDTH')">
+                  <el-input-number v-model="compressForm.reSizeWidth" :min="0" controls-position="right" />
+                </el-form-item>
+
+                <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEHEIGHT')">
+                  <el-input-number v-model="compressForm.reSizeHeight" :min="0" controls-position="right" />
+                </el-form-item>
+              </div>
+
+              <el-form-item
+                v-show="compressForm.reSizeHeight! > 0 && compressForm.reSizeWidth === 0"
+                :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_SKIPRESIZEOfSMALLIMG_HEIGHT')"
+                class="toggle-control"
+              >
+                <el-switch v-model="compressForm.skipReSizeOfSmallImg" :style="switchStyle" />
+              </el-form-item>
+
+              <el-form-item
+                v-show="compressForm.reSizeWidth! > 0 && compressForm.reSizeHeight === 0"
+                :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_SKIPRESIZEOfSMALLIMG_WIDTH')"
+                class="toggle-control"
+              >
+                <el-switch v-model="compressForm.skipReSizeOfSmallImg" :style="switchStyle" />
+              </el-form-item>
+            </div>
+          </div>
+        </section>
+
+        <!-- Resize by Percent Section -->
+        <section class="settings-section">
+          <div class="section-header">
+            <el-icon><ScaleToOriginal /></el-icon>
+            <h3>{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZEBYPERCENT') }}</h3>
+          </div>
+
+          <div class="section-content">
+            <el-form-item class="toggle-control">
+              <el-switch v-model="compressForm.isReSizeByPercent" :style="switchStyle" />
+              <span class="toggle-label">{{ compressForm.isReSizeByPercent ? $T('ENABLE') : $T('DISABLE') }}</span>
+            </el-form-item>
+
+            <div v-show="compressForm.isReSizeByPercent" class="subsection">
+              <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEPERCENT')">
+                <el-slider
+                  v-model="compressForm.reSizePercent"
+                  :min="1"
+                  :max="100"
+                  :step="1"
+                  show-input
+                  class="full-width"
+                />
+              </el-form-item>
+            </div>
+          </div>
+        </section>
+
+        <!-- Flip and Rotation Section -->
+        <section class="settings-section">
+          <div class="section-header">
+            <el-icon><Refresh /></el-icon>
+            <h3>{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_TRANSFORMATION') }}</h3>
+          </div>
+
+          <div class="section-content">
+            <div class="form-row">
+              <el-form-item class="toggle-control">
+                <el-switch v-model="compressForm.isFlip" :style="switchStyle" />
+                <span class="toggle-label">{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_ISFLIP') }}</span>
+              </el-form-item>
+
+              <el-form-item class="toggle-control">
+                <el-switch v-model="compressForm.isFlop" :style="switchStyle" />
+                <span class="toggle-label">{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_ISFLOP') }}</span>
+              </el-form-item>
+            </div>
+
+            <el-form-item class="toggle-control">
+              <el-switch v-model="compressForm.isRotate" :style="switchStyle" />
+              <span class="toggle-label">{{
+                compressForm.isRotate
+                  ? $T('UPLOAD_PAGE_IMAGE_PROCESS_ISROTATE')
+                  : $T('UPLOAD_PAGE_IMAGE_PROCESS_ISROTATE')
+              }}</span>
+            </el-form-item>
+
+            <div v-show="compressForm.isRotate" class="subsection">
+              <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ROTATEDEGREE')">
+                <div class="rotation-control">
+                  <el-input-number v-model="compressForm.rotateDegree" :step="1" controls-position="right" />
+                  <div class="rotation-buttons">
+                    <el-button size="small" @click="compressForm.rotateDegree = 0">0°</el-button>
+                    <el-button size="small" @click="compressForm.rotateDegree = 90">90°</el-button>
+                    <el-button size="small" @click="compressForm.rotateDegree = 180">180°</el-button>
+                    <el-button size="small" @click="compressForm.rotateDegree = 270">270°</el-button>
+                  </div>
+                </div>
+              </el-form-item>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+
+    <!-- Action Buttons -->
+    <div class="form-actions">
       <el-button type="primary" @click="handleSaveConfig">
         {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_CONFIRM') }}
       </el-button>
       <el-button @click="closeDialog">
         {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_CANCEL') }}
       </el-button>
-    </el-form-item>
+    </div>
   </el-form>
 </template>
 
 <script lang="ts" setup>
 import { IBuildInCompressOptions, IBuildInWaterMarkOptions } from 'piclist'
 import { onBeforeMount, reactive, ref, toRaw } from 'vue'
+import { Picture, Edit, Document, ZoomIn, ScaleToOriginal, Refresh } from '@element-plus/icons-vue'
 
 import { T as $T } from '@/i18n/index'
 import { getConfig, saveConfig } from '@/utils/dataSender'
@@ -262,3 +405,233 @@ onBeforeMount(async () => {
   await initData()
 })
 </script>
+
+<style lang="stylus" scoped>
+.image-process-form {
+  max-height: 85vh;
+  overflow-y: auto;
+  padding: 16px;
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(144, 147, 153, 0.3);
+    border-radius: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+}
+
+.settings-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+}
+
+.settings-column {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.settings-section {
+  background: var(--el-bg-color-overlay, #ffffff);
+  border-radius: 10px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+  transition: all 0.25s ease;
+  border: 1px solid var(--el-border-color-lighter, #EBEEF5);
+
+  &:hover {
+    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
+    transform: translateY(-2px);
+  }
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 18px;
+  background: linear-gradient(90deg, var(--el-color-primary-light-9, #ecf5ff) 0%, transparent 100%);
+  border-bottom: 1px solid var(--el-border-color-light, #E4E7ED);
+  border-left: 4px solid var(--el-color-primary, #409eff);
+
+  .el-icon {
+    color: var(--el-color-primary, #409eff);
+    font-size: 18px;
+  }
+
+  h3 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--el-text-color-primary, #303133);
+  }
+}
+
+.section-content {
+  padding: 18px;
+}
+
+.subsection {
+  background: var(--el-fill-color-light, #f5f7fa);
+  border-radius: 8px;
+  padding: 16px;
+  margin-top: 10px;
+  animation: fade-in 0.3s ease;
+}
+
+.variant-subsection {
+  background: var(--el-color-primary-light-9, #ecf5ff);
+  border-left: 3px solid var(--el-color-primary-light-5, #a0cfff);
+}
+
+.subsection-title {
+  font-size: 14px;
+  font-weight: 500;
+  margin: 0 0 12px 0;
+  color: var(--el-color-primary, #409eff);
+  border-bottom: 1px dashed var(--el-border-color-light, #E4E7ED);
+  padding-bottom: 8px;
+}
+
+.toggle-control {
+  display: flex;
+  align-items: center;
+  margin-bottom: 14px;
+
+  :deep(.el-form-item__content) {
+    display: flex;
+    align-items: center;
+  }
+
+  .toggle-label {
+    margin-left: 10px;
+    font-size: 14px;
+    color: var(--el-text-color-regular, #606266);
+  }
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 16px;
+}
+
+.position-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+
+  :deep(.el-radio) {
+    margin-right: 0;
+    margin-bottom: 8px;
+
+    .el-radio__label {
+      font-size: 13px;
+    }
+  }
+}
+
+.color-picker-container {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.color-value {
+  font-family: monospace;
+  background: var(--el-fill-color-lighter, #f5f7fa);
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 13px;
+}
+
+.rotation-control {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.rotation-buttons {
+  display: flex;
+  gap: 8px;
+
+  .el-button {
+    transition: transform 0.2s;
+
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+}
+
+.code-input {
+  font-family: monospace;
+  font-size: 13px;
+}
+
+.helper-text {
+  font-size: 12px;
+  color: var(--el-text-color-secondary, #909399);
+  margin-top: 4px;
+  padding-left: 2px;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  margin-top: 28px;
+  padding: 16px 0;
+  background: linear-gradient(to top, var(--el-bg-color, #ffffff) 60%, transparent);
+  position: sticky;
+  bottom: 0;
+  z-index: 10;
+
+  .el-button {
+    min-width: 120px;
+    transition: all 0.3s;
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+  }
+}
+
+@keyframes fade-in {
+  from { opacity: 0; transform: translateY(-5px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@media (max-width: 768px) {
+  .settings-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .position-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .form-actions {
+    flex-direction: column;
+    align-items: stretch;
+
+    .el-button {
+      width: 100%;
+    }
+  }
+}
+</style>

src/renderer/pages/Upload.vue

@@ -1,99 +1,108 @@
 <template>
-  <div id="upload-view">
+  <div id="upload-view" class="upload-container">
-    <el-row :gutter="16" align="middle">
+    <div class="container-inner">
-      <el-col :span="24">
+      <div class="view-title">
-        <div class="view-title">
+        <el-tooltip placement="top" effect="light" :content="$T('UPLOAD_VIEW_HINT')" :persistent="false" teleported>
-          <el-tooltip placement="top" effect="light" :content="$T('UPLOAD_VIEW_HINT')" :persistent="false" teleported>
+          <span id="upload-view-title" @click="handlePicBedNameClick(picBedName, picBedConfigName)">
-            <span id="upload-view-title" @click="handlePicBedNameClick(picBedName, picBedConfigName)">
+            {{ picBedName }} - {{ picBedConfigName || 'Default' }}
-              {{ picBedName }} - {{ picBedConfigName || 'Default' }}
+          </span>
-            </span>
+        </el-tooltip>
-          </el-tooltip>
+        <el-button class="icon-button" type="info" size="small" circle @click="handleChangePicBed">
-          <el-icon style="cursor: pointer; margin-left: 4px" @click="handleChangePicBed">
+          <el-icon><CaretBottom /></el-icon>
-            <CaretBottom />
+        </el-button>
-          </el-icon>
+        <el-button type="primary" round size="small" class="quick-upload" @click="handleImageProcess">
-          <el-button
+          <el-icon><Edit /></el-icon>
-            type="primary"
+          {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_NAME') }}
-            round
+        </el-button>
-            size="small"
+      </div>
-            class="quick-upload"
+
-            style="margin-left: 6px"
+      <div
-            @click="handleImageProcess"
+        id="upload-area"
-          >
+        class="upload-area"
-            {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_NAME') }}
+        :class="{ 'is-dragover': dragover }"
-          </el-button>
+        @drop.prevent="onDrop"
-        </div>
+        @dragover.prevent="dragover = true"
-        <div
+        @dragleave.prevent="dragover = false"
-          id="upload-area"
+      >
-          :class="{ 'is-dragover': dragover }"
+        <transition name="scale-fade">
-          @drop.prevent="onDrop"
+          <div v-if="showProgress" class="upload-overlay">
-          @dragover.prevent="dragover = true"
+            <el-progress
-          @dragleave.prevent="dragover = false"
+              type="dashboard"
-        >
+              :percentage="progress"
-          <div id="upload-dragger" @click="openUplodWindow">
+              :status="showError ? 'exception' : 'success'"
-            <el-icon>
+              :stroke-width="8"
-              <UploadFilled />
+            />
-            </el-icon>
+            <div class="upload-status-text">
-            <div class="upload-dragger__text">
+              {{ showError ? $T('UPLOAD_FAILED') : $T('UPLOADING') }}
-              {{ $T('DRAG_FILE_TO_HERE') }}
-              <span>{{ $T('CLICK_TO_UPLOAD') }}</span>
             </div>
-            <input id="file-uploader" type="file" multiple @change="onChange" />
           </div>
+        </transition>
+
+        <div id="upload-dragger" class="upload-dragger" @click="openUplodWindow">
+          <el-icon class="upload-icon"><UploadFilled /></el-icon>
+          <div class="upload-dragger__text">
+            {{ $T('DRAG_FILE_TO_HERE') }}
+            <span class="upload-action-text">{{ $T('CLICK_TO_UPLOAD') }}</span>
+          </div>
+          <input id="file-uploader" type="file" multiple @change="onChange" />
         </div>
-        <el-progress
+      </div>
-          :percentage="progress"
+
-          :show-text="false"
+      <div class="upload-options">
-          class="upload-progress"
+        <div class="option-card link-format-card">
-          :class="{ show: showProgress }"
+          <div class="option-header">
-          :status="showError ? 'exception' : undefined"
+            <div class="option-label">
-        />
-        <div class="paste-style">
-          <div class="el-col-12">
-            <div class="paste-style__text">
               {{ $T('LINK_FORMAT') }}
             </div>
-            <el-radio-group v-model="pasteStyle" size="small" @change="handlePasteStyleChange">
+            <el-switch
-              <el-radio-button v-for="(item, key) in pasteFormatList" :key="key" :value="key" :title="item">
+              v-model="useShortUrl"
+              class="short-url-switch"
+              active-text=""
+              inactive-text=""
+              :active-value="true"
+              :inactive-value="false"
+              @change="handleUseShortUrlChange"
+            />
+            <span class="switch-label">{{ useShortUrl ? $T('UPLOAD_SHORT_URL') : $T('UPLOAD_NORMAL_URL') }}</span>
+          </div>
+          <div class="option-content">
+            <el-radio-group
+              v-model="pasteStyle"
+              size="small"
+              class="format-radio-group"
+              @change="handlePasteStyleChange"
+            >
+              <el-radio-button
+                v-for="(item, key) in pasteFormatList"
+                :key="key"
+                :value="key"
+                :title="item"
+                class="format-radio-btn"
+              >
                 {{ key }}
               </el-radio-button>
             </el-radio-group>
-            <el-radio-group v-model="useShortUrl" size="small" @change="handleUseShortUrlChange">
-              <el-radio-button :value="true" style="border-radius: 5px">
-                {{ $T('UPLOAD_SHORT_URL') }}
-              </el-radio-button>
-              <el-radio-button :value="false" style="border-radius: 5px">
-                {{ $T('UPLOAD_NORMAL_URL') }}
-              </el-radio-button>
-            </el-radio-group>
           </div>
-          <div class="el-col-8">
+        </div>
-            <div class="paste-style__text">
+
-              {{ $T('QUICK_UPLOAD') }}
+        <div class="option-card quick-upload-card">
-            </div>
+          <div class="option-label">
-            <el-button
+            {{ $T('QUICK_UPLOAD') }}
-              type="primary"
+          </div>
-              round
+          <div class="option-content quick-upload-content">
-              size="small"
+            <el-button type="primary" class="quick-upload-btn" @click="uploadClipboardFiles">
-              class="quick-upload"
+              <el-icon><Picture /></el-icon>
-              style="width: 50%"
-              @click="uploadClipboardFiles"
-            >
               {{ $T('CLIPBOARD_PICTURE') }}
             </el-button>
-            <el-button
+            <el-button type="primary" class="quick-upload-btn" @click="uploadURLFiles">
-              type="primary"
+              <el-icon><Link /></el-icon>
-              round
-              size="small"
-              class="quick-upload"
-              style="width: 46%; margin-left: 6px"
-              @click="uploadURLFiles"
-            >
               URL
             </el-button>
           </div>
         </div>
-      </el-col>
+      </div>
-    </el-row>
+    </div>
+
     <el-dialog
       v-model="imageProcessDialogVisible"
       :title="$T('UPLOAD_PAGE_IMAGE_PROCESS_DIALOG_TITLE')"
@@ -110,10 +119,11 @@
 
 <script lang="ts" setup>
 import { ipcRenderer, IpcRendererEvent } from 'electron'
-import { ElMessage as $message } from 'element-plus'
+import { ElMessage as $message, ElSwitch } from 'element-plus'
-import { UploadFilled, CaretBottom } from '@element-plus/icons-vue'
+import { UploadFilled, CaretBottom, Picture, Link, Edit } from '@element-plus/icons-vue'
 import { ref, onBeforeMount, onBeforeUnmount, watch } from 'vue'
 import { useRouter } from 'vue-router'
+import { useDebounceFn, useThrottleFn } from '@vueuse/core'
 
 import ImageProcessSetting from '@/components/ImageProcessSetting.vue'
 import { T as $T } from '@/i18n'
@@ -132,6 +142,7 @@ import { useDragEventListeners } from '@/utils/drag'
 useDragEventListeners()
 const $router = useRouter()
 
+// State variables
 const imageProcessDialogVisible = ref(false)
 const useShortUrl = ref(false)
 const dragover = ref(false)
@@ -154,32 +165,36 @@ watch(picBedGlobal, () => {
   getDefaultPicBed()
 })
 
-onBeforeMount(() => {
+watch(progress, onProgressChange)
-  updatePicBedGlobal()
+
-  ipcRenderer.on('uploadProgress', (_event: IpcRendererEvent, _progress: number) => {
+onBeforeMount(async () => {
-    if (_progress !== -1) {
+  await updatePicBedGlobal()
-      showProgress.value = true
+  ipcRenderer.on('uploadProgress', handleUploadProgress)
-      progress.value = _progress
+  ipcRenderer.on('syncPicBed', getDefaultPicBed)
-    } else {
-      progress.value = 100
-      showError.value = true
-    }
-  })
-  getUseShortUrl()
-  getPasteStyle()
-  getDefaultPicBed()
-  ipcRenderer.on('syncPicBed', () => {
-    getDefaultPicBed()
-  })
   $bus.on(SHOW_INPUT_BOX_RESPONSE, handleInputBoxValue)
+  await Promise.all([getUseShortUrl(), getPasteStyle(), getDefaultPicBed()])
 })
 
+onBeforeUnmount(() => {
+  $bus.off(SHOW_INPUT_BOX_RESPONSE)
+  ipcRenderer.removeAllListeners('uploadProgress')
+  ipcRenderer.removeAllListeners('syncPicBed')
+})
+
+const handleUploadProgress = useThrottleFn((_event: IpcRendererEvent, _progress: number) => {
+  if (_progress !== -1) {
+    showProgress.value = true
+    progress.value = _progress
+  } else {
+    progress.value = 100
+    showError.value = true
+  }
+}, 50)
+
 const handleImageProcess = () => {
   imageProcessDialogVisible.value = true
 }
 
-watch(progress, onProgressChange)
-
 function onProgressChange(val: number) {
   if (val === 100) {
     setTimeout(() => {
@@ -211,16 +226,8 @@ async function handlePicBedNameClick(_picBedName: string, picBedConfigName: stri
   })
 }
 
-onBeforeUnmount(() => {
+const onDrop = useDebounceFn((e: DragEvent) => {
-  $bus.off(SHOW_INPUT_BOX_RESPONSE)
-  ipcRenderer.removeAllListeners('uploadProgress')
-  ipcRenderer.removeAllListeners('syncPicBed')
-})
-
-function onDrop(e: DragEvent) {
   dragover.value = false
-
-  // send files first
   if (e.dataTransfer?.files?.length) {
     ipcSendFiles(e.dataTransfer.files)
   } else if (e.dataTransfer?.items) {
@@ -236,11 +243,9 @@ function onDrop(e: DragEvent) {
       }
     }
   }
-}
+}, 200)
 
 function handleURLDrag(items: DataTransferItemList, dataTransfer: DataTransfer) {
-  // text/html
-  // Use this data to get a more precise URL
   const urlString = dataTransfer.getData(items[1].type)
   const urlMatch = urlString.match(/<img.*src="(.*?)"/)
   if (urlMatch) {
@@ -344,82 +349,372 @@ export default {
 </script>
 
 <style lang="stylus">
-.view-title
+.upload-container
-  display flex
-  color #eee
-  font-size 20px
-  text-align center
-  margin 10px auto
-  align-items center
-  justify-content center
-#upload-view-title
-  &:hover
-    cursor pointer
-    color #409EFF
-#upload-view
   position absolute
   left 142px
   right 0
   height 100%
-  .view-title
+  padding 0
-    margin 10vh auto 10px
+  transition all 0.3s ease
-  #upload-area
+  overflow-y auto
-    height 50vh
+  overflow-x hidden
-    border 2px dashed #dddddd
+  display flex
-    border-radius 8px
+  align-items center
-    text-align center
+  justify-content center
-    width 60vw
+
-    margin 0 auto
+.container-inner
-    color #dddddd
+  max-width 800px
-    cursor pointer
+  width 100%
-    transition all .2s ease-in-out
+  padding 20px
-    align-items center
+  max-height 90vh // Limit maximum height
-    #upload-dragger
+  display flex
-      height 100%
+  flex-direction column
-      item-align center
+  justify-content center // Center content vertically
-    &.is-dragover,
+  margin auto // Center the container
+  gap 20px // Add consistent spacing between elements
+
+.view-title
+  display flex
+  color #f2f2f2
+  font-size 20px
+  text-align center
+  margin-bottom 0
+  align-items center
+  justify-content center
+  flex-wrap wrap
+  padding 12px
+  border-radius 10px
+  max-width 800px
+
+  @media (max-width: 640px), (max-height: 700px)
+    font-size 16px
+    padding 10px
+
+  .icon-button
+    margin-left 8px
+    transition transform 0.2s ease
     &:hover
-      border 2px dashed #A4D8FA
+      transform scale(1.1)
-      background-color rgba(164, 216, 250, 0.3)
+
-      color #fff
+  .quick-upload
-    i
+    margin-left 12px
-      height 80%
-      font-size 10vh
-      margin 0
-    span
-      color #409EFF
-  #file-uploader
-    display none
-  .upload-progress
-    opacity 0
-    transition all .2s ease-in-out
-    width 450px
-    margin 20px auto 0
-    &.show
-      opacity 1
-    .el-progress-bar__inner
-      transition all .2s ease-in-out
-  .paste-style
-    justify-content center
-    text-align center
-    margin-top 16px
     display flex
-    align-items flex-end
+    align-items center
-    &__text
+    gap 4px
-      font-size 12px
+    transition all 0.3s ease
-      color #eeeeee
+    &:hover
-      margin-bottom 4px
+      transform translateY(-2px)
-  .el-radio-button:first-child
+      box-shadow 0 4px 12px rgba(0, 0, 0, 0.2)
-    .el-radio-button__inner
+
-      border-left none
+    @media (max-width: 640px)
-  .el-radio-button:first-child
+      margin-top 8px
-    .el-radio-button__inner
+      margin-left 0
-      border-left none
+
-      border-radius 14px 0 0 14px
+#upload-view-title
-  .el-radio-button:last-child
+  transition all 0.2s ease
-    .el-radio-button__inner
+  position relative
-      border-left none
+  overflow hidden
-      border-radius 0 14px 14px 0
+  display inline-block
-  .el-icon-caret-bottom
+
+  &:after
+    content ''
+    position absolute
+    left 0
+    bottom -2px
+    width 0
+    height 2px
+    background #409EFF
+    transition width 0.3s ease
+
+  &:hover
     cursor pointer
+    color #409EFF
+
+    &:after
+      width 100%
+
+.upload-area
+  flex 1
+  min-height 250px
+  max-height 550px
+  border 2px dashed rgba(255, 255, 255, 0.2)
+  border-radius 16px
+  text-align center
+  width 100%
+  margin 0 auto
+  color #eee
+  cursor pointer
+  transition all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1.0)
+  position relative
+  display flex
+  align-items center
+  justify-content center
+  backdrop-filter blur(5px)
+  background linear-gradient(135deg, rgba(50, 50, 50, 0.1) 0%, rgba(30, 30, 30, 0.2) 100%)
+  box-shadow 0 8px 20px rgba(0, 0, 0, 0.1)
+
+  @media (max-height: 600px)
+    min-height 180px
+    max-height 250px
+
+  @media (min-height: 800px)
+    min-height 350px
+    max-height 550px
+
+  &.is-dragover,
+  &:hover
+    border 2px dashed #409EFF
+    background-color rgba(64, 158, 255, 0.1)
+    transform scale(1.01)
+    box-shadow 0 10px 25px rgba(0, 0, 0, 0.15)
+    color #fff
+
+.upload-overlay
+  position absolute
+  top 0
+  left 0
+  right 0
+  bottom 0
+  background rgba(0, 0, 0, 0.7)
+  display flex
+  flex-direction column
+  justify-content center
+  align-items center
+  z-index 10
+  border-radius 15px
+  backdrop-filter blur(5px)
+
+  .upload-status-text
+    margin-top 16px
+    color #ffffff
+    font-size 16px
+    font-weight 500
+
+.upload-dragger
+  height 100%
+  width 100%
+  display flex
+  flex-direction column
+  justify-content center
+  align-items center
+
+  .upload-icon
+    font-size 55px
+    margin-bottom 20px
+    color rgba(255, 255, 255, 0.8)
+    transition all 0.3s ease
+    filter drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1))
+
+    @media (max-height: 600px)
+      font-size 40px
+      margin-bottom 12px
+
+  &__text
+    font-size 16px
+    color rgba(255, 255, 255, 0.9)
+    margin-bottom 8px
+    max-width 80%
+    text-align center
+    line-height 1.5
+
+    @media (max-height: 600px)
+      font-size 14px
+      line-height 1.3
+
+    .upload-action-text
+      color #409EFF
+      font-weight 500
+      margin-left 6px
+      position relative
+      display inline-block
+
+      &:after
+        content ''
+        position absolute
+        left 0
+        bottom -2px
+        width 100%
+        height 1px
+        background #409EFF
+
+#file-uploader
+  display none
+
+.upload-options
+  display flex
+  justify-content space-between
+  gap 15px
+  margin-bottom 0
+  width 100%
+  max-width: 800px
+
+  @media (max-width: 768px)
+    flex-direction column
+    gap 12px
+
+.option-card
+  background rgba(255, 255, 255, 0.05)
+  border-radius 12px
+  padding 12px
+  backdrop-filter blur(5px)
+  box-shadow 0 5px 15px rgba(0, 0, 0, 0.1)
+  transition all 0.3s ease
+
+  &:hover
+    transform translateY(-3px)
+    box-shadow 0 8px 20px rgba(0, 0, 0, 0.15)
+
+  @media (max-height: 600px)
+    padding 10px
+
+  .option-header
+    display flex
+    align-items center
+    margin-bottom 12px
+    flex-wrap wrap
+    gap 8px
+
+  .option-label
+    font-size 14px
+    color #f2f2f2
+    font-weight 500
+    border-left 3px solid #409EFF
+    padding-left 10px
+    margin-right auto
+
+    @media (max-height: 600px)
+      font-size 13px
+
+  .option-content
+    display flex
+    flex-wrap wrap
+    gap 10px
+
+.link-format-card
+  flex 3
+  min-width 0
+  max-width 580px
+
+.quick-upload-card
+  flex 1
+  min-width 200px
+  max-width 280px
+  display flex
+  flex-direction column
+
+  .option-label
+    margin-bottom 12px
+
+.short-url-switch
+  margin-left auto
+
+.switch-label
+  font-size 12px
+  color #e0e0e0
+  white-space nowrap
+
+.format-radio-group
+  display flex
+  flex-wrap wrap
+  gap 5px
+  width 100%
+
+.format-radio-btn
+  flex-grow 1
+  min-width 0
+
+  .el-radio-button__inner
+    padding 8px 10px
+    width 100%
+    font-size 13px
+    border-radius 4px !important
+    white-space nowrap
+    overflow hidden
+    text-overflow ellipsis
+    box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
+
+.quick-upload-content
+  display flex
+  gap 10px
+  flex 1
+
+  @media (max-width: 768px) and (min-width: 641px)
+    flex-direction column
+    gap 8px
+
+  @media (max-width: 640px)
+    flex-direction row
+
+.quick-upload-btn
+  flex 1
+  padding 8px 12px
+  border-radius 8px
+  transition all 0.3s ease
+  display flex
+  align-items center
+  justify-content center
+  gap 5px
+  font-size 13px
+  height 40px
+
+  @media (max-width: 768px) and (min-width: 641px)
+    height 36px
+
+  &:hover
+    transform translateY(-2px)
+    box-shadow 0 4px 12px rgba(0, 0, 0, 0.2)
+
+// Animations
+.scale-fade-enter-active,
+.scale-fade-leave-active
+  transition all 0.4s cubic-bezier(0.4, 0, 0.2, 1)
+
+.scale-fade-enter-from,
+.scale-fade-leave-to
+  opacity 0
+  transform scale(0.9)
+
+// Radio button styling
+.el-radio-button
+  transition all 0.2s ease
+
+  &__inner
+    border-radius 8px !important
+    box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
+    margin 0 2px
+
+  &:first-child
+    .el-radio-button__inner
+      border-radius 8px 0 0 8px !important
+
+  &:last-child
+    .el-radio-button__inner
+      border-radius 0 8px 8px 0 !important
+
+// Custom scrollbar for the container
+.upload-container::-webkit-scrollbar
+  width 5px
+
+.upload-container::-webkit-scrollbar-thumb
+  background rgba(255, 255, 255, 0.2)
+  border-radius 5px
+
+  &:hover
+    background rgba(255, 255, 255, 0.3)
+
+.upload-container::-webkit-scrollbar-track
+  background transparent
+
+// Add responsive adjustments for larger screens
+@media (min-height: 900px)
+  .container-inner
+    gap 30px // Increase gap for larger screens
+    justify-content center
+
+  .upload-area
+    flex 1 1 auto
+    min-height 400px
+
+  .view-title, .upload-options
+    flex-shrink 0 // Prevent these elements from shrinking
 </style>

src/universal/types/i18n.d.ts

@@ -122,6 +122,7 @@ interface ILocales {
   UPLOAD_PAGE_IMAGE_PROCESS_ISCONVERT: string
   UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT: string
   UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT_SPECIFIC: string
+  UPLOAD_PAGE_IMAGE_PROCESS_TRANSFORMATION: string
   UPLOAD_PAGE_IMAGE_PROCESS_ISFLIP: string
   UPLOAD_PAGE_IMAGE_PROCESS_ISFLOP: string
   UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZE: string