From 3bc784f4d81da3a4e0d79afbf943e0f2be7aad4e Mon Sep 17 00:00:00 2001
From: Kuingsmile <ma_shiqing@163.com>
Date: Thu, 6 Jun 2024 21:29:18 +0800
Subject: [PATCH] :hammer: Refactor(custom): add new image process setting
 component

---
 .../components/ImageProcessSetting.vue        | 372 ++++++++++++++++
 src/renderer/pages/MiniPage.vue               |  50 +--
 src/renderer/pages/PicGoSetting.vue           | 413 +-----------------
 src/renderer/pages/Upload.vue                 | 389 +----------------
 src/renderer/pages/picbeds/index.vue          |  25 +-
 src/universal/utils/configPaths.ts            |  78 +---
 6 files changed, 403 insertions(+), 924 deletions(-)
 create mode 100644 src/renderer/components/ImageProcessSetting.vue

diff --git a/src/renderer/components/ImageProcessSetting.vue b/src/renderer/components/ImageProcessSetting.vue
new file mode 100644
index 0000000..c0dcb72
--- /dev/null
+++ b/src/renderer/components/ImageProcessSetting.vue
@@ -0,0 +1,372 @@
+<template>
+  <el-form
+    label-position="top"
+    require-asterisk-position="right"
+    label-width="10vw"
+    size="default"
+    :model="waterMarkForm"
+  >
+    <el-form-item
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISADDWM')"
+    >
+      <el-switch
+        v-model="waterMarkForm.isAddWatermark"
+        :style="switchStyle"
+      />
+    </el-form-item>
+    <el-form-item
+      v-show="waterMarkForm.isAddWatermark"
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE')"
+    >
+      <el-radio-group v-model="waterMarkForm.watermarkType">
+        <el-radio value="text">
+          {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_TEXT') }}
+        </el-radio>
+        <el-radio value="image">
+          {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_IMAGE') }}
+        </el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item
+      v-show="waterMarkForm.isAddWatermark"
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISFULLSCREEN_WM')"
+    >
+      <el-switch
+        v-model="waterMarkForm.isFullScreenWatermark"
+        :style="switchStyle"
+      />
+    </el-form-item>
+    <el-form-item
+      v-show="waterMarkForm.isAddWatermark"
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMDEGREE')"
+    >
+      <el-input-number
+        v-model="waterMarkForm.watermarkDegree"
+        :step="1"
+      />
+    </el-form-item>
+    <el-form-item
+      v-show="waterMarkForm.isAddWatermark && waterMarkForm.watermarkType === 'text'"
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTEXT')"
+    >
+      <el-input v-model="waterMarkForm.watermarkText" />
+    </el-form-item>
+    <el-form-item
+      v-show="waterMarkForm.isAddWatermark && waterMarkForm.watermarkType === 'text'"
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTEXT_FONT_PATH')"
+    >
+      <el-input v-model="waterMarkForm.watermarkFontPath" />
+    </el-form-item>
+    <el-form-item
+      v-show="waterMarkForm.isAddWatermark"
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMRATIO')"
+    >
+      <el-input-number
+        v-model="waterMarkForm.watermarkScaleRatio"
+        :min="0"
+        :max="1"
+        :step="0.01"
+      />
+    </el-form-item>
+    <el-form-item
+      v-show="waterMarkForm.isAddWatermark && waterMarkForm.watermarkType === 'text'"
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMCOLOR')"
+    >
+      <el-color-picker
+        v-model="waterMarkForm.watermarkColor"
+        show-alpha
+      />
+    </el-form-item>
+    <el-form-item
+      v-show="waterMarkForm.isAddWatermark && waterMarkForm.watermarkType === 'image'"
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMPATH')"
+    >
+      <el-input v-model="waterMarkForm.watermarkImagePath" />
+    </el-form-item>
+    <el-form-item
+      v-show="waterMarkForm.isAddWatermark"
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMPOSITION')"
+    >
+      <el-radio-group
+        v-model="waterMarkForm.watermarkPosition"
+      >
+        <el-radio
+          v-for="item in waterMarkPositionMap"
+          :key="item[0]"
+          :value="item[0]"
+        >
+          {{ item[1] }}
+        </el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISREMOVEEXIF')"
+    >
+      <el-switch
+        v-model="compressForm.isRemoveExif"
+        :style="switchStyle"
+      />
+    </el-form-item>
+    <el-form-item
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_QUALITY')"
+    >
+      <el-input-number
+        v-model="compressForm.quality"
+        :min="0"
+        :max="100"
+        :step="1"
+      />
+    </el-form-item>
+    <el-form-item
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISCONVERT')"
+    >
+      <el-switch
+        v-model="compressForm.isConvert"
+        :style="switchStyle"
+      />
+    </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-option
+          v-for="item in availableFormat"
+          :key="item"
+          :label="item"
+          :value="item"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item
+      v-show="compressForm.isConvert"
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT_SPECIFIC')"
+    >
+      <el-input
+        v-model="formatConvertObj"
+        placeholder="{&quot;jpg&quot;: &quot;png&quot;, &quot;png&quot;: &quot;jpg&quot;}"
+        type="textarea"
+        :autosize="{ minRows: 2, maxRows: 4}"
+      />
+    </el-form-item>
+    <el-form-item
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISFLIP')"
+    >
+      <el-switch
+        v-model="compressForm.isFlip"
+        :style="switchStyle"
+      />
+    </el-form-item>
+    <el-form-item
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISFLOP')"
+    >
+      <el-switch
+        v-model="compressForm.isFlop"
+        :style="switchStyle"
+      />
+    </el-form-item>
+    <el-form-item
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZE')"
+    >
+      <el-switch
+        v-model="compressForm.isReSize"
+        :style="switchStyle"
+      />
+    </el-form-item>
+    <el-form-item
+      v-show="compressForm.isReSize"
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEWIDTH')"
+    >
+      <el-input-number
+        v-model="compressForm.reSizeWidth"
+        :min="0"
+      />
+    </el-form-item>
+    <el-form-item
+      v-show="compressForm.isReSize"
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEHEIGHT')"
+    >
+      <el-input-number
+        v-model="compressForm.reSizeHeight"
+        :min="0"
+      />
+    </el-form-item>
+    <el-form-item
+      v-show="compressForm.isReSize && compressForm.reSizeHeight! > 0 && compressForm.reSizeWidth === 0"
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_SKIPRESIZEOfSMALLIMG_HEIGHT')"
+    >
+      <el-switch
+        v-model="compressForm.skipReSizeOfSmallImg"
+        :style="switchStyle"
+      />
+    </el-form-item>
+    <el-form-item
+      v-show="compressForm.isReSize && compressForm.reSizeWidth! > 0 && compressForm.reSizeHeight === 0"
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_SKIPRESIZEOfSMALLIMG_WIDTH')"
+    >
+      <el-switch
+        v-model="compressForm.skipReSizeOfSmallImg"
+        :style="switchStyle"
+      />
+    </el-form-item>
+    <el-form-item
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZEBYPERCENT')"
+    >
+      <el-switch
+        v-model="compressForm.isReSizeByPercent"
+        :style="switchStyle"
+      />
+    </el-form-item>
+    <el-form-item
+      v-show="compressForm.isReSizeByPercent"
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEPERCENT')"
+    >
+      <el-input-number
+        v-model="compressForm.reSizePercent"
+        :min="0"
+      />
+    </el-form-item>
+    <el-form-item
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISROTATE')"
+    >
+      <el-switch
+        v-model="compressForm.isRotate"
+        :style="switchStyle"
+      />
+    </el-form-item>
+    <el-form-item
+      v-show="compressForm.isRotate"
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ROTATEDEGREE')"
+    >
+      <el-input-number
+        v-model="compressForm.rotateDegree"
+        :step="1"
+      />
+    </el-form-item>
+    <el-form-item>
+      <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>
+  </el-form>
+</template>
+
+<script lang="ts" setup>
+import { T as $T } from '@/i18n/index'
+import { IBuildInCompressOptions, IBuildInWaterMarkOptions } from 'piclist'
+import { onBeforeMount, reactive, ref, toRaw } from 'vue'
+import { getConfig, saveConfig } from '@/utils/dataSender'
+import { configPaths } from '~/universal/utils/configPaths'
+
+const imageProcessDialogVisible = defineModel<boolean>()
+
+const waterMarkPositionMap = new Map([
+  ['north', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_TOP')],
+  ['northeast', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_TOP_RIGHT')],
+  ['southeast', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_BOTTOM_RIGHT')],
+  ['south', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_BOTTOM')],
+  ['southwest', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_BOTTOM_LEFT')],
+  ['northwest', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_TOP_LEFT')],
+  ['west', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_LEFT')],
+  ['east', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_RIGHT')],
+  ['centre', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_CENTER')]
+])
+const imageExtList = ['jpg', 'jpeg', 'png', 'webp', 'bmp', 'tiff', 'tif', 'svg', 'ico', 'avif', 'heif', 'heic']
+const availableFormat = ['avif', 'dz', 'fits', 'gif', 'heif', 'input', 'jpeg', 'jpg', 'jp2', 'jxl', 'magick', 'openslide', 'pdf', 'png', 'ppm', 'raw', 'svg', 'tiff', 'tif', 'v', 'webp']
+
+const waterMarkForm = reactive<IBuildInWaterMarkOptions>({
+  isAddWatermark: false,
+  watermarkType: 'text',
+  isFullScreenWatermark: false,
+  watermarkDegree: 0,
+  watermarkText: '',
+  watermarkFontPath: '',
+  watermarkScaleRatio: 0.15,
+  watermarkColor: '#CCCCCC73',
+  watermarkImagePath: '',
+  watermarkPosition: 'southeast'
+})
+const compressForm = reactive<IBuildInCompressOptions>({
+  quality: 100,
+  isConvert: false,
+  convertFormat: 'jpg',
+  isReSize: false,
+  reSizeWidth: 500,
+  reSizeHeight: 500,
+  skipReSizeOfSmallImg: false,
+  isReSizeByPercent: false,
+  reSizePercent: 50,
+  isRotate: false,
+  rotateDegree: 0,
+  isRemoveExif: false,
+  isFlip: false,
+  isFlop: false
+})
+const formatConvertObj = ref('{}')
+
+const waterMarkFormKeys = Object.keys(waterMarkForm) as (keyof typeof waterMarkForm)[]
+const compressFormKeys = Object.keys(compressForm) as (keyof typeof compressForm)[]
+
+const switchStyle = '--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;'
+
+function handleSaveConfig () {
+  let iformatConvertObj = {}
+  try {
+    iformatConvertObj = JSON.parse(formatConvertObj.value)
+  } catch (error) {
+  }
+  const formatConvertObjEntries = Object.entries(iformatConvertObj)
+  const formatConvertObjEntriesFilter = formatConvertObjEntries.filter((item: any) => {
+    return imageExtList.includes(item[0]) && availableFormat.includes(item[1])
+  })
+  const formatConvertObjFilter = Object.fromEntries(formatConvertObjEntriesFilter)
+  formatConvertObj.value = JSON.stringify(formatConvertObjFilter)
+  compressForm.formatConvertObj = formatConvertObjFilter
+  saveConfig(configPaths.buildIn.compress, toRaw(compressForm))
+  saveConfig(configPaths.buildIn.watermark, toRaw(waterMarkForm))
+  closeDialog()
+}
+
+async function initData () {
+  const compress = await getConfig<any>(configPaths.buildIn.compress)
+  const watermark = await getConfig<any>(configPaths.buildIn.watermark)
+  if (compress) {
+    compressFormKeys.forEach((key) => {
+      compressForm[key] = compress[key] ?? compressForm[key]
+    })
+    try {
+      if (typeof compress.formatConvertObj === 'object') {
+        formatConvertObj.value = JSON.stringify(compress.formatConvertObj)
+      } else {
+        formatConvertObj.value = compress.formatConvertObj ?? '{}'
+      }
+    } catch (error) {
+      formatConvertObj.value = '{}'
+    }
+  }
+  if (watermark) {
+    waterMarkFormKeys.forEach((key) => {
+      waterMarkForm[key] = watermark[key] ?? waterMarkForm[key]
+    })
+    waterMarkForm.watermarkColor = watermark.watermarkColor === '' ? '#CCCCCC73' : watermark.watermarkColor
+  }
+}
+
+function closeDialog () {
+  imageProcessDialogVisible.value = false
+}
+
+onBeforeMount(async () => {
+  await initData()
+})
+</script>
diff --git a/src/renderer/pages/MiniPage.vue b/src/renderer/pages/MiniPage.vue
index 4faf68f..6a215da 100644
--- a/src/renderer/pages/MiniPage.vue
+++ b/src/renderer/pages/MiniPage.vue
@@ -4,15 +4,15 @@
   >
     <div
       id="upload-area"
-      :class="{ 'is-dragover': dragover, uploading: showProgress, linux: os === 'linux' }"
+      :class="{ 'is-dragover': dragover, uploading: isShowingProgress, linux: os === 'linux' }"
       :style="{ backgroundPosition: '0 ' + progress + '%'}"
       @drop.prevent="onDrop"
       @dragover.prevent="dragover = true"
       @dragleave.prevent="dragover = false"
     >
       <img
-        v-if="!dragover && !showProgress"
-        :src="logoPath.value ? logoPath.value : require('../assets/squareLogo.png')"
+        v-if="!dragover && !isShowingProgress"
+        :src="logoPath ? logoPath : require('../assets/squareLogo.png')"
         style="width: 100%; height: 100%;border-radius: 50%;"
       >
       <div
@@ -30,46 +30,24 @@
   </div>
 </template>
 <script lang="ts" setup>
-// 国际化函数
 import { T as $T } from '@/i18n/index'
-
-// Element Plus 消息框组件
 import { ElMessage as $message } from 'element-plus'
-
-// Electron 相关
 import {
   ipcRenderer,
   IpcRendererEvent
 } from 'electron'
-
-// Vue 生命周期钩子
-import { onBeforeUnmount, onBeforeMount, ref, watch, reactive } from 'vue'
-
-// 事件常量
+import { onBeforeUnmount, onBeforeMount, ref, watch } from 'vue'
 import { SHOW_MINI_PAGE_MENU, SET_MINI_WINDOW_POS } from '~/universal/events/constants'
-
-// 工具函数
-import {
-  isUrl
-} from '~/universal/utils/common'
-
-// 数据发送工具函数
+import { isUrl } from '~/universal/utils/common'
 import { getConfig, sendToMain } from '@/utils/dataSender'
-
-// Piclist 配置类型声明
 import { IConfig } from 'piclist'
-
-// 数据发送工具函数
 import { invokeToMain } from '@/manage/utils/dataSender'
 
-const logoPath = reactive({
-  value: ''
-})
+const logoPath = ref('')
 const dragover = ref(false)
 const progress = ref(0)
-const showProgress = ref(false)
-const showError = ref(false)
-const dragging = ref(false)
+const isShowingProgress = ref(false)
+const draggingState = ref(false)
 const wX = ref(-1)
 const wY = ref(-1)
 const screenX = ref(-1)
@@ -90,11 +68,10 @@ onBeforeMount(async () => {
   await initLogoPath()
   ipcRenderer.on('uploadProgress', (_: IpcRendererEvent, _progress: number) => {
     if (_progress !== -1) {
-      showProgress.value = true
+      isShowingProgress.value = true
       progress.value = _progress
     } else {
       progress.value = 100
-      showError.value = true
     }
   })
   ipcRenderer.on('updateMiniIcon', async () => {
@@ -108,8 +85,7 @@ onBeforeMount(async () => {
 watch(progress, (val) => {
   if (val === 100) {
     setTimeout(() => {
-      showProgress.value = false
-      showError.value = false
+      isShowingProgress.value = false
     }, 1000)
     setTimeout(() => {
       progress.value = 0
@@ -179,7 +155,7 @@ function ipcSendFiles (files: FileList) {
 }
 
 function handleMouseDown (e: MouseEvent) {
-  dragging.value = true
+  draggingState.value = true
   wX.value = e.pageX
   wY.value = e.pageY
   screenX.value = e.screenX
@@ -189,7 +165,7 @@ function handleMouseDown (e: MouseEvent) {
 function handleMouseMove (e: MouseEvent) {
   e.preventDefault()
   e.stopPropagation()
-  if (dragging.value) {
+  if (draggingState.value) {
     const xLoc = e.screenX - wX.value
     const yLoc = e.screenY - wY.value
     sendToMain(SET_MINI_WINDOW_POS, {
@@ -202,7 +178,7 @@ function handleMouseMove (e: MouseEvent) {
 }
 
 function handleMouseUp (e: MouseEvent) {
-  dragging.value = false
+  draggingState.value = false
   if (screenX.value === e.screenX && screenY.value === e.screenY) {
     if (e.button === 0) { // left mouse
       openUploadWindow()
diff --git a/src/renderer/pages/PicGoSetting.vue b/src/renderer/pages/PicGoSetting.vue
index dad7df9..2ee25db 100644
--- a/src/renderer/pages/PicGoSetting.vue
+++ b/src/renderer/pages/PicGoSetting.vue
@@ -1461,317 +1461,33 @@
       align-center
       append-to-body
     >
-      <el-form
-        label-position="top"
-        require-asterisk-position="right"
-        label-width="10vw"
-        size="default"
-        :model="waterMarkForm"
-      >
-        <el-form-item
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISADDWM')"
-        >
-          <el-switch
-            v-model="waterMarkForm.isAddWatermark"
-            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-          />
-        </el-form-item>
-        <el-form-item
-          v-show="waterMarkForm.isAddWatermark"
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE')"
-        >
-          <el-radio-group v-model="waterMarkForm.watermarkType">
-            <el-radio value="text">
-              {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_TEXT') }}
-            </el-radio>
-            <el-radio value="image">
-              {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_IMAGE') }}
-            </el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item
-          v-show="waterMarkForm.isAddWatermark"
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISFULLSCREEN_WM')"
-        >
-          <el-switch
-            v-model="waterMarkForm.isFullScreenWatermark"
-            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-          />
-        </el-form-item>
-        <el-form-item
-          v-show="waterMarkForm.isAddWatermark"
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMDEGREE')"
-        >
-          <el-input-number
-            v-model="waterMarkForm.watermarkDegree"
-            :step="1"
-          />
-        </el-form-item>
-        <el-form-item
-          v-show="waterMarkForm.isAddWatermark && waterMarkForm.watermarkType === 'text'"
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTEXT')"
-        >
-          <el-input v-model="waterMarkForm.watermarkText" />
-        </el-form-item>
-        <el-form-item
-          v-show="waterMarkForm.isAddWatermark && waterMarkForm.watermarkType === 'text'"
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTEXT_FONT_PATH')"
-        >
-          <el-input v-model="waterMarkForm.watermarkFontPath" />
-        </el-form-item>
-        <el-form-item
-          v-show="waterMarkForm.isAddWatermark"
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMRATIO')"
-        >
-          <el-input-number
-            v-model="waterMarkForm.watermarkScaleRatio"
-            :min="0"
-            :max="1"
-            :step="0.01"
-          />
-        </el-form-item>
-        <el-form-item
-          v-show="waterMarkForm.isAddWatermark && waterMarkForm.watermarkType === 'text'"
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMCOLOR')"
-        >
-          <el-color-picker
-            v-model="waterMarkForm.watermarkColor"
-            show-alpha
-          />
-        </el-form-item>
-        <el-form-item
-          v-show="waterMarkForm.isAddWatermark && waterMarkForm.watermarkType === 'image'"
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMPATH')"
-        >
-          <el-input v-model="waterMarkForm.watermarkImagePath" />
-        </el-form-item>
-        <el-form-item
-          v-show="waterMarkForm.isAddWatermark"
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMPOSITION')"
-        >
-          <el-radio-group
-            v-model="waterMarkForm.watermarkPosition"
-          >
-            <el-radio
-              v-for="item in waterMarkPositionMap"
-              :key="item[0]"
-              :value="item[0]"
-            >
-              {{ item[1] }}
-            </el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISREMOVEEXIF')"
-        >
-          <el-switch
-            v-model="compressForm.isRemoveExif"
-            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-          />
-        </el-form-item>
-        <el-form-item
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_QUALITY')"
-        >
-          <el-input-number
-            v-model="compressForm.quality"
-            :min="0"
-            :max="100"
-            :step="1"
-          />
-        </el-form-item>
-        <el-form-item
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISCONVERT')"
-        >
-          <el-switch
-            v-model="compressForm.isConvert"
-            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-          />
-        </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-option
-              v-for="item in availableFormat"
-              :key="item"
-              :label="item"
-              :value="item"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          v-show="compressForm.isConvert"
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT_SPECIFIC')"
-        >
-          <el-input
-            v-model="formatConvertObj"
-            placeholder="{&quot;jpg&quot;: &quot;png&quot;, &quot;png&quot;: &quot;jpg&quot;}"
-            type="textarea"
-            :autosize="{ minRows: 2, maxRows: 4}"
-          />
-        </el-form-item>
-        <el-form-item
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISFLIP')"
-        >
-          <el-switch
-            v-model="compressForm.isFlip"
-            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-          />
-        </el-form-item>
-        <el-form-item
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISFLOP')"
-        >
-          <el-switch
-            v-model="compressForm.isFlop"
-            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-          />
-        </el-form-item>
-        <el-form-item
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZE')"
-        >
-          <el-switch
-            v-model="compressForm.isReSize"
-            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-          />
-        </el-form-item>
-        <el-form-item
-          v-show="compressForm.isReSize"
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEWIDTH')"
-        >
-          <el-input-number
-            v-model="compressForm.reSizeWidth"
-            :min="0"
-          />
-        </el-form-item>
-        <el-form-item
-          v-show="compressForm.isReSize"
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEHEIGHT')"
-        >
-          <el-input-number
-            v-model="compressForm.reSizeHeight"
-            :min="0"
-          />
-        </el-form-item>
-        <el-form-item
-          v-show="compressForm.isReSize && compressForm.reSizeHeight > 0 && compressForm.reSizeWidth === 0"
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_SKIPRESIZEOfSMALLIMG_HEIGHT')"
-        >
-          <el-switch
-            v-model="compressForm.skipReSizeOfSmallImg"
-            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-          />
-        </el-form-item>
-        <el-form-item
-          v-show="compressForm.isReSize && compressForm.reSizeWidth > 0 && compressForm.reSizeHeight === 0"
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_SKIPRESIZEOfSMALLIMG_WIDTH')"
-        >
-          <el-switch
-            v-model="compressForm.skipReSizeOfSmallImg"
-            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-          />
-        </el-form-item>
-        <el-form-item
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZEBYPERCENT')"
-        >
-          <el-switch
-            v-model="compressForm.isReSizeByPercent"
-            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-          />
-        </el-form-item>
-        <el-form-item
-          v-show="compressForm.isReSizeByPercent"
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEPERCENT')"
-        >
-          <el-input-number
-            v-model="compressForm.reSizePercent"
-            :min="0"
-          />
-        </el-form-item>
-        <el-form-item
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISROTATE')"
-        >
-          <el-switch
-            v-model="compressForm.isRotate"
-            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-          />
-        </el-form-item>
-        <el-form-item
-          v-show="compressForm.isRotate"
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ROTATEDEGREE')"
-        >
-          <el-input-number
-            v-model="compressForm.rotateDegree"
-            :step="1"
-          />
-        </el-form-item>
-        <el-form-item>
-          <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>
-      </el-form>
+      <ImageProcessSetting
+        v-model="imageProcessDialogVisible"
+      />
     </el-dialog>
   </div>
 </template>
+
 <script lang="ts" setup>
-// @ts-ignore
 import { ElForm, ElMessage as $message, ElMessage, ElMessageBox, FormRules } from 'element-plus'
-
-// Element Plus 图标
 import { Reading, Close, Edit, InfoFilled } from '@element-plus/icons-vue'
-
-// 根目录 package.json
 import pkg from 'root/package.json'
-
-// 事件常量
 import { PICGO_OPEN_FILE, PICGO_OPEN_DIRECTORY, OPEN_URL, GET_PICBEDS, HIDE_DOCK } from '#/events/constants'
 import { II18nLanguage, IRPCActionType, ISartMode } from '~/universal/types/enum'
-
-// Electron 相关
-import {
-  ipcRenderer
-} from 'electron'
-
-// 国际化管理器
+import { ipcRenderer } from 'electron'
 import { i18nManager, T as $T } from '@/i18n/index'
-
-// 工具函数
 import { enforceNumber } from '~/universal/utils/common'
 import { getLatestVersion } from '#/utils/getLatestVersion'
 import { compare } from 'compare-versions'
-
-// Vue 相关
 import { computed, onBeforeMount, onBeforeUnmount, reactive, ref, toRaw } from 'vue'
-
-// 数据发送工具函数
 import { getConfig, saveConfig, sendRPC, sendToMain } from '@/utils/dataSender'
-
-// Vue Router 相关
 import { useRouter } from 'vue-router'
-
-// 路由配置常量
 import { SHORTKEY_PAGE } from '@/router/config'
-
-// Piclist 相关类型声明
-import { IConfig, IBuildInCompressOptions, IBuildInWaterMarkOptions } from 'piclist'
-
-// 数据发送工具函数
+import { IConfig } from 'piclist'
 import { invokeToMain } from '@/manage/utils/dataSender'
-
-// 内置重命名格式表
 import { buildInRenameFormatTable } from '../manage/utils/common'
 import { configPaths, ISartModeValues } from '~/universal/utils/configPaths'
+import ImageProcessSetting from '@/components/ImageProcessSetting.vue'
 
 const imageProcessDialogVisible = ref(false)
 const activeName = ref<'system' | 'syncAndConfigure' | 'upload' | 'advanced' | 'upadte'>('system')
@@ -1826,121 +1542,9 @@ const manualPageOpenList = [{
 
 const picBed = ref<IPicBedType[]>([])
 
-const waterMarkPositionMap = new Map([
-  ['north', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_TOP')],
-  ['northeast', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_TOP_RIGHT')],
-  ['southeast', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_BOTTOM_RIGHT')],
-  ['south', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_BOTTOM')],
-  ['southwest', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_BOTTOM_LEFT')],
-  ['northwest', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_TOP_LEFT')],
-  ['west', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_LEFT')],
-  ['east', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_RIGHT')],
-  ['centre', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_CENTER')]
-])
-
-const imageExtList = ['jpg', 'jpeg', 'png', 'webp', 'bmp', 'tiff', 'tif', 'svg', 'ico', 'avif', 'heif', 'heic']
-
-const availableFormat = ['avif', 'dz', 'fits', 'gif', 'heif', 'input', 'jpeg', 'jpg', 'jp2', 'jxl', 'magick', 'openslide', 'pdf', 'png', 'ppm', 'raw', 'svg', 'tiff', 'tif', 'v', 'webp']
-
-const waterMarkForm = reactive<any>({
-  isAddWatermark: false,
-  watermarkType: 'text',
-  isFullScreenWatermark: false,
-  watermarkDegree: 0,
-  watermarkText: '',
-  watermarkFontPath: '',
-  watermarkScaleRatio: 0.15,
-  watermarkColor: '#CCCCCC73',
-  watermarkImagePath: '',
-  watermarkPosition: 'southeast'
-})
-
-const formatConvertObj = ref('{}')
-
-const compressForm = reactive<any>({
-  quality: 100,
-  isConvert: false,
-  convertFormat: 'jpg',
-  isReSize: false,
-  reSizeWidth: 500,
-  reSizeHeight: 500,
-  skipReSizeOfSmallImg: false,
-  isReSizeByPercent: false,
-  reSizePercent: 50,
-  isRotate: false,
-  rotateDegree: 0,
-  isRemoveExif: false,
-  isFlip: false,
-  isFlop: false
-})
-
-function closeDialog () {
-  imageProcessDialogVisible.value = false
-}
-
-function handleSaveConfig () {
-  let iformatConvertObj = {}
-  try {
-    iformatConvertObj = JSON.parse(formatConvertObj.value)
-  } catch (error) {
-  }
-  const formatConvertObjEntries = Object.entries(iformatConvertObj)
-  const formatConvertObjEntriesFilter = formatConvertObjEntries.filter((item: any) => {
-    return imageExtList.includes(item[0]) && availableFormat.includes(item[1])
-  })
-  const formatConvertObjFilter = Object.fromEntries(formatConvertObjEntriesFilter)
-  formatConvertObj.value = JSON.stringify(formatConvertObjFilter)
-  compressForm.formatConvertObj = formatConvertObjFilter
-  saveConfig(configPaths.buildIn.compress, toRaw(compressForm))
-  saveConfig(configPaths.buildIn.watermark, toRaw(waterMarkForm))
-  closeDialog()
-}
-
-async function initForm () {
-  const compress = await getConfig<IBuildInCompressOptions>(configPaths.buildIn.compress)
-  const watermark = await getConfig<IBuildInWaterMarkOptions>(configPaths.buildIn.watermark)
-  if (compress) {
-    compressForm.quality = compress.quality ?? 100
-    compressForm.isConvert = compress.isConvert ?? false
-    compressForm.convertFormat = compress.convertFormat ?? 'jpg'
-    compressForm.isReSize = compress.isReSize ?? false
-    compressForm.reSizeWidth = compress.reSizeWidth ?? 500
-    compressForm.reSizeHeight = compress.reSizeHeight ?? 500
-    compressForm.isReSizeByPercent = compress.isReSizeByPercent ?? false
-    compressForm.skipReSizeOfSmallImg = compress.skipReSizeOfSmallImg ?? false
-    compressForm.reSizePercent = compress.reSizePercent ?? 50
-    compressForm.isRotate = compress.isRotate ?? false
-    compressForm.rotateDegree = compress.rotateDegree ?? 0
-    compressForm.isRemoveExif = compress.isRemoveExif ?? false
-    compressForm.isFlip = compress.isFlip ?? false
-    compressForm.isFlop = compress.isFlop ?? false
-    try {
-      if (typeof compress.formatConvertObj === 'object') {
-        formatConvertObj.value = JSON.stringify(compress.formatConvertObj)
-      } else {
-        formatConvertObj.value = compress.formatConvertObj ?? '{}'
-      }
-    } catch (error) {
-      formatConvertObj.value = '{}'
-    }
-  }
-  if (watermark) {
-    waterMarkForm.isAddWatermark = watermark.isAddWatermark ?? false
-    waterMarkForm.watermarkType = watermark.watermarkType ?? 'text'
-    waterMarkForm.isFullScreenWatermark = watermark.isFullScreenWatermark ?? false
-    waterMarkForm.watermarkDegree = watermark.watermarkDegree ?? 0
-    waterMarkForm.watermarkText = watermark.watermarkText ?? ''
-    waterMarkForm.watermarkFontPath = watermark.watermarkFontPath ?? ''
-    waterMarkForm.watermarkScaleRatio = watermark.watermarkScaleRatio ?? 0.15
-    waterMarkForm.watermarkColor = watermark.watermarkColor === undefined || watermark.watermarkColor === '' ? '#CCCCCC73' : watermark.watermarkColor
-    waterMarkForm.watermarkImagePath = watermark.watermarkImagePath ?? ''
-    waterMarkForm.watermarkPosition = watermark.watermarkPosition ?? 'southeast'
-  }
-}
-
 const $customLink = ref<InstanceType<typeof ElForm> | null>(null)
 
-const customLinkRule = (rule: any, value: string, callback: (arg0?: Error) => void) => {
+const customLinkRule = (_: any, value: string, callback: (arg0?: Error) => void) => {
   if (!/\$url/.test(value) && !/\$fileName/.test(value) && !/\$extName/.test(value)) {
     return callback(new Error($T('TIPS_MUST_CONTAINS_URL')))
   } else {
@@ -2107,7 +1711,6 @@ onBeforeMount(() => {
   sendToMain(GET_PICBEDS)
   ipcRenderer.on(GET_PICBEDS, getPicBeds)
   initData()
-  initForm()
 })
 
 async function initData () {
diff --git a/src/renderer/pages/Upload.vue b/src/renderer/pages/Upload.vue
index 79e6e79..b0aabef 100644
--- a/src/renderer/pages/Upload.vue
+++ b/src/renderer/pages/Upload.vue
@@ -146,314 +146,35 @@
       align-center
       append-to-body
     >
-      <el-form
-        label-position="top"
-        require-asterisk-position="right"
-        label-width="10vw"
-        size="default"
-        :model="waterMarkForm"
-      >
-        <el-form-item
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISADDWM')"
-        >
-          <el-switch
-            v-model="waterMarkForm.isAddWatermark"
-            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-          />
-        </el-form-item>
-        <el-form-item
-          v-show="waterMarkForm.isAddWatermark"
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE')"
-        >
-          <el-radio-group v-model="waterMarkForm.watermarkType">
-            <el-radio value="text">
-              {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_TEXT') }}
-            </el-radio>
-            <el-radio value="image">
-              {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_IMAGE') }}
-            </el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item
-          v-show="waterMarkForm.isAddWatermark"
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISFULLSCREEN_WM')"
-        >
-          <el-switch
-            v-model="waterMarkForm.isFullScreenWatermark"
-            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-          />
-        </el-form-item>
-        <el-form-item
-          v-show="waterMarkForm.isAddWatermark"
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMDEGREE')"
-        >
-          <el-input-number
-            v-model="waterMarkForm.watermarkDegree"
-            :step="1"
-          />
-        </el-form-item>
-        <el-form-item
-          v-show="waterMarkForm.isAddWatermark && waterMarkForm.watermarkType === 'text'"
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTEXT')"
-        >
-          <el-input v-model="waterMarkForm.watermarkText" />
-        </el-form-item>
-        <el-form-item
-          v-show="waterMarkForm.isAddWatermark && waterMarkForm.watermarkType === 'text'"
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTEXT_FONT_PATH')"
-        >
-          <el-input v-model="waterMarkForm.watermarkFontPath" />
-        </el-form-item>
-        <el-form-item
-          v-show="waterMarkForm.isAddWatermark"
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMRATIO')"
-        >
-          <el-input-number
-            v-model="waterMarkForm.watermarkScaleRatio"
-            :min="0"
-            :max="1"
-            :step="0.01"
-          />
-        </el-form-item>
-        <el-form-item
-          v-show="waterMarkForm.isAddWatermark && waterMarkForm.watermarkType === 'text'"
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMCOLOR')"
-        >
-          <el-color-picker
-            v-model="waterMarkForm.watermarkColor"
-            show-alpha
-          />
-        </el-form-item>
-        <el-form-item
-          v-show="waterMarkForm.isAddWatermark && waterMarkForm.watermarkType === 'image'"
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMPATH')"
-        >
-          <el-input v-model="waterMarkForm.watermarkImagePath" />
-        </el-form-item>
-        <el-form-item
-          v-show="waterMarkForm.isAddWatermark"
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMPOSITION')"
-        >
-          <el-radio-group
-            v-model="waterMarkForm.watermarkPosition"
-          >
-            <el-radio
-              v-for="item in waterMarkPositionMap"
-              :key="item[0]"
-              :value="item[0]"
-            >
-              {{ item[1] }}
-            </el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISREMOVEEXIF')"
-        >
-          <el-switch
-            v-model="compressForm.isRemoveExif"
-            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-          />
-        </el-form-item>
-        <el-form-item
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_QUALITY')"
-        >
-          <el-input-number
-            v-model="compressForm.quality"
-            :min="0"
-            :max="100"
-            :step="1"
-          />
-        </el-form-item>
-        <el-form-item
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISCONVERT')"
-        >
-          <el-switch
-            v-model="compressForm.isConvert"
-            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-          />
-        </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-option
-              v-for="item in availableFormat"
-              :key="item"
-              :label="item"
-              :value="item"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          v-show="compressForm.isConvert"
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT_SPECIFIC')"
-        >
-          <el-input
-            v-model="formatConvertObj"
-            placeholder="{&quot;jpg&quot;: &quot;png&quot;, &quot;png&quot;: &quot;jpg&quot;}"
-            type="textarea"
-            :autosize="{ minRows: 2, maxRows: 4}"
-          />
-        </el-form-item>
-        <el-form-item
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISFLIP')"
-        >
-          <el-switch
-            v-model="compressForm.isFlip"
-            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-          />
-        </el-form-item>
-        <el-form-item
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISFLOP')"
-        >
-          <el-switch
-            v-model="compressForm.isFlop"
-            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-          />
-        </el-form-item>
-        <el-form-item
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZE')"
-        >
-          <el-switch
-            v-model="compressForm.isReSize"
-            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-          />
-        </el-form-item>
-        <el-form-item
-          v-show="compressForm.isReSize"
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEWIDTH')"
-        >
-          <el-input-number
-            v-model="compressForm.reSizeWidth"
-            :min="0"
-          />
-        </el-form-item>
-        <el-form-item
-          v-show="compressForm.isReSize"
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEHEIGHT')"
-        >
-          <el-input-number
-            v-model="compressForm.reSizeHeight"
-            :min="0"
-          />
-        </el-form-item>
-        <el-form-item
-          v-show="compressForm.isReSize && compressForm.reSizeHeight > 0 && compressForm.reSizeWidth === 0"
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_SKIPRESIZEOfSMALLIMG_HEIGHT')"
-        >
-          <el-switch
-            v-model="compressForm.skipReSizeOfSmallImg"
-            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-          />
-        </el-form-item>
-        <el-form-item
-          v-show="compressForm.isReSize && compressForm.reSizeWidth > 0 && compressForm.reSizeHeight === 0"
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_SKIPRESIZEOfSMALLIMG_WIDTH')"
-        >
-          <el-switch
-            v-model="compressForm.skipReSizeOfSmallImg"
-            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-          />
-        </el-form-item>
-        <el-form-item
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZEBYPERCENT')"
-        >
-          <el-switch
-            v-model="compressForm.isReSizeByPercent"
-            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-          />
-        </el-form-item>
-        <el-form-item
-          v-show="compressForm.isReSizeByPercent"
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEPERCENT')"
-        >
-          <el-input-number
-            v-model="compressForm.reSizePercent"
-            :min="0"
-          />
-        </el-form-item>
-        <el-form-item
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISROTATE')"
-        >
-          <el-switch
-            v-model="compressForm.isRotate"
-            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-          />
-        </el-form-item>
-        <el-form-item
-          v-show="compressForm.isRotate"
-          :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ROTATEDEGREE')"
-        >
-          <el-input-number
-            v-model="compressForm.rotateDegree"
-            :step="1"
-          />
-        </el-form-item>
-        <el-form-item>
-          <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>
-      </el-form>
+      <ImageProcessSetting
+        v-model="imageProcessDialogVisible"
+      />
     </el-dialog>
   </div>
 </template>
+
 <script lang="ts" setup>
-// Element Plus 图标
 import { UploadFilled, CaretBottom } from '@element-plus/icons-vue'
-
-// Electron 相关
 import { ipcRenderer, IpcRendererEvent } from 'electron'
-
-// Vue 相关
-import { ref, reactive, onBeforeMount, onBeforeUnmount, watch, toRaw } from 'vue'
-
-// 国际化函数
+import { ref, onBeforeMount, onBeforeUnmount, watch } from 'vue'
 import { T as $T } from '@/i18n'
-
-// 事件总线
 import $bus from '@/utils/bus'
-
-// 事件常量
 import {
   SHOW_INPUT_BOX,
   SHOW_INPUT_BOX_RESPONSE,
   SHOW_UPLOAD_PAGE_MENU,
   GET_PICBEDS
 } from '~/universal/events/constants'
-
-// 工具函数
 import {
   isUrl
 } from '~/universal/utils/common'
-
-// Element Plus 消息提示
 import { ElMessage as $message } from 'element-plus'
-
-// 数据发送工具函数
 import { getConfig, saveConfig, sendToMain, triggerRPC } from '@/utils/dataSender'
-
-// 类型声明
-import { IBuildInCompressOptions, IBuildInWaterMarkOptions } from 'piclist'
-
-// Vue Router 相关
 import { useRouter } from 'vue-router'
-
-// 路由配置常量
 import { PICBEDS_PAGE } from '@/router/config'
 import { IPasteStyle, IRPCActionType } from '~/universal/types/enum'
 import { configPaths } from '~/universal/utils/configPaths'
+import ImageProcessSetting from '@/components/ImageProcessSetting.vue'
 
 const $router = useRouter()
 
@@ -476,103 +197,6 @@ const pasteFormatList = ref({
   [IPasteStyle.CUSTOM]: ''
 })
 
-const waterMarkPositionMap = new Map([
-  ['north', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_TOP')],
-  ['northeast', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_TOP_RIGHT')],
-  ['southeast', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_BOTTOM_RIGHT')],
-  ['south', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_BOTTOM')],
-  ['southwest', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_BOTTOM_LEFT')],
-  ['northwest', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_TOP_LEFT')],
-  ['west', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_LEFT')],
-  ['east', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_RIGHT')],
-  ['centre', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_CENTER')]
-])
-
-const imageExtList = ['jpg', 'jpeg', 'png', 'webp', 'bmp', 'tiff', 'tif', 'svg', 'ico', 'avif', 'heif', 'heic']
-
-const availableFormat = ['avif', 'dz', 'fits', 'gif', 'heif', 'input', 'jpeg', 'jpg', 'jp2', 'jxl', 'magick', 'openslide', 'pdf', 'png', 'ppm', 'raw', 'svg', 'tiff', 'tif', 'v', 'webp']
-
-const waterMarkForm = reactive<any>({
-  isAddWatermark: false,
-  watermarkType: 'text',
-  isFullScreenWatermark: false,
-  watermarkDegree: 0,
-  watermarkText: '',
-  watermarkFontPath: '',
-  watermarkScaleRatio: 0.15,
-  watermarkColor: '#CCCCCC73',
-  watermarkImagePath: '',
-  watermarkPosition: 'southeast'
-})
-
-const compressForm = reactive<any>({
-  quality: 100,
-  isConvert: false,
-  convertFormat: 'jpg',
-  isReSize: false,
-  reSizeWidth: 500,
-  reSizeHeight: 500,
-  skipReSizeOfSmallImg: false,
-  isReSizeByPercent: false,
-  reSizePercent: 50,
-  isRotate: false,
-  rotateDegree: 0,
-  isRemoveExif: false,
-  isFlip: false,
-  isFlop: false
-})
-const waterMarkFormKeys = Object.keys(waterMarkForm)
-const compressFormKeys = Object.keys(compressForm)
-
-const formatConvertObj = ref('{}')
-
-function closeDialog () {
-  imageProcessDialogVisible.value = false
-}
-
-function handleSaveConfig () {
-  let iformatConvertObj = {}
-  try {
-    iformatConvertObj = JSON.parse(formatConvertObj.value)
-  } catch (error) {
-  }
-  const formatConvertObjEntries = Object.entries(iformatConvertObj)
-  const formatConvertObjEntriesFilter = formatConvertObjEntries.filter((item: any) => {
-    return imageExtList.includes(item[0]) && availableFormat.includes(item[1])
-  })
-  const formatConvertObjFilter = Object.fromEntries(formatConvertObjEntriesFilter)
-  formatConvertObj.value = JSON.stringify(formatConvertObjFilter)
-  compressForm.formatConvertObj = formatConvertObjFilter
-  saveConfig(configPaths.buildIn.compress, toRaw(compressForm))
-  saveConfig(configPaths.buildIn.watermark, toRaw(waterMarkForm))
-  closeDialog()
-}
-
-async function initData () {
-  const compress = await getConfig<IBuildInCompressOptions>(configPaths.buildIn.compress)
-  const watermark = await getConfig<IBuildInWaterMarkOptions>(configPaths.buildIn.watermark)
-  if (compress) {
-    compressFormKeys.forEach((key) => {
-      compressForm[key] = compress[key] ?? compressForm[key]
-    })
-    try {
-      if (typeof compress.formatConvertObj === 'object') {
-        formatConvertObj.value = JSON.stringify(compress.formatConvertObj)
-      } else {
-        formatConvertObj.value = compress.formatConvertObj ?? '{}'
-      }
-    } catch (error) {
-      formatConvertObj.value = '{}'
-    }
-  }
-  if (watermark) {
-    waterMarkFormKeys.forEach((key) => {
-      waterMarkForm[key] = watermark[key as keyof IBuildInWaterMarkOptions] ?? waterMarkForm[key]
-    })
-    waterMarkForm.watermarkColor = watermark.watermarkColor === '' ? '#CCCCCC73' : watermark.watermarkColor
-  }
-}
-
 onBeforeMount(() => {
   ipcRenderer.on('uploadProgress', (_event: IpcRendererEvent, _progress: number) => {
     if (_progress !== -1) {
@@ -592,7 +216,6 @@ onBeforeMount(() => {
   sendToMain(GET_PICBEDS)
   ipcRenderer.on(GET_PICBEDS, getPicBeds)
   $bus.on(SHOW_INPUT_BOX_RESPONSE, handleInputBoxValue)
-  initData()
 })
 
 const handleImageProcess = () => {
diff --git a/src/renderer/pages/picbeds/index.vue b/src/renderer/pages/picbeds/index.vue
index 4365560..3ca2f97 100644
--- a/src/renderer/pages/picbeds/index.vue
+++ b/src/renderer/pages/picbeds/index.vue
@@ -95,42 +95,23 @@
     </el-row>
   </div>
 </template>
+
 <script lang="ts" setup>
-// 枚举类型声明
+
 import { II18nLanguage, IRPCActionType } from '~/universal/types/enum'
-
-// Vue 相关
 import { ref, onBeforeUnmount, onBeforeMount } from 'vue'
-
-// 国际化函数
 import { T as $T } from '@/i18n/index'
-
-// 数据发送工具函数
 import { getConfig, sendToMain, triggerRPC } from '@/utils/dataSender'
-
-// Vue Router 相关
 import { useRoute, useRouter } from 'vue-router'
-
-// 组件
 import ConfigForm from '@/components/ConfigForm.vue'
-
-// Electron 相关
 import {
   clipboard,
   ipcRenderer,
   IpcRendererEvent
 } from 'electron'
-
-// 事件常量
 import { OPEN_URL } from '~/universal/events/constants'
-
-// Element Plus 图标
 import { Link } from '@element-plus/icons-vue'
-
-// 时间处理库
 import dayjs from 'dayjs'
-
-// Element Plus 下拉菜单组件
 import { ElDropdown, ElMessage } from 'element-plus'
 import { configPaths } from '~/universal/utils/configPaths'
 import { picBedManualUrlList } from '~/universal/utils/static'
@@ -213,7 +194,7 @@ async function handleCopyApi () {
   try {
     const { port = 36677, host = '127.0.0.1' } = await getConfig<IStringKeyMap>(configPaths.settings.server) || {}
     const serverKey = await getConfig(configPaths.settings.serverKey) || ''
-    const uploader = await getConfig('uploader') as IStringKeyMap || {}
+    const uploader = await getConfig(configPaths.uploader) as IStringKeyMap || {}
     const picBedConfigList = uploader[$route.params.type as string].configList || []
     const picBedConfig = picBedConfigList.find((item: IUploaderConfigListItem) => item._id === $route.params.configId)
     if (!picBedConfig) {
diff --git a/src/universal/utils/configPaths.ts b/src/universal/utils/configPaths.ts
index d430f58..21c37be 100644
--- a/src/universal/utils/configPaths.ts
+++ b/src/universal/utils/configPaths.ts
@@ -104,83 +104,7 @@ export interface IConfigStruct {
   PICGO_ENV: string
 }
 
-interface IConfigPaths {
-  picBed: {
-    current: string
-    uploader: string
-    proxy: string
-    transformer: string
-    list: string
-  },
-  settings: {
-    shortKey: {
-      _path: string
-      'picgo:upload': string
-    }
-    logLevel: string
-    logPath: string
-    logFileSizeLimit: string
-    isAutoListenClipboard: string
-    isListeningClipboard: string
-    showUpdateTip: string
-    miniWindowPosition: string
-    miniWindowOntop: string
-    isHideDock: string
-    mainWindowWidth: string
-    mainWindowHeight: string
-    autoCloseMiniWindow: string
-    autoCloseMainWindow: string
-    isCustomMiniIcon: string
-    customMiniIcon: string
-    startMode: string
-    autoRename: string
-    deleteCloudFile: string
-    server: string
-    serverKey: string
-    pasteStyle: string
-    aesPassword: string
-    rename: string
-    sync: string
-    tempDirPath: string
-    language: string
-    customLink: string
-    manualPageOpen: string
-    encodeOutputURL: string
-    useShortUrl: string
-    shortUrlServer: string
-    c1nToken: string
-    cfWorkerHost: string
-    yourlsDomain: string
-    yourlsSignature: string
-    isSilentNotice: string
-    proxy: string
-    registry: string
-    autoCopy: string
-    enableWebServer: string
-    webServerHost: string
-    webServerPort: string
-    webServerPath: string
-    deleteLocalFile: string
-    uploadResultNotification: string
-    uploadNotification: string
-    useBuiltinClipboard: string
-    autoStart: string
-    autoImport: string
-    autoImportPicBed: string
-  }
-  needReload: string
-  picgoPlugins: string
-  uploader: string
-  buildIn: {
-    compress: string
-    watermark: string
-    rename: string
-  }
-  debug: string
-  PICGO_ENV: string
-}
-
-export const configPaths: IConfigPaths = {
+export const configPaths = {
   picBed: {
     current: 'picBed.current',
     uploader: 'picBed.uploader',