✨ Feature(custom): add support for per-picbed image process setting

src/renderer/components/ImageProcessSetting.vue

@@ -64,12 +64,36 @@
                   <span class="switch-title">{{ $t('pages.imageProcess.general.isRemoveExif') }}</span>
                 </div>
               </label>
+
+              <PerPicbedSetting
+                :map-field="compressForm.isRemoveExifMap"
+                :default-value="false"
+                field-name="isRemoveExif"
+                :form-object="compressForm"
+                input-type="checkbox"
+                @map-change="
+                  (picbedType, value) => safeSetMapValue(compressForm, 'isRemoveExif', picbedType, value, false)
+                "
+              />
             </div>
 
             <div class="form-group">
               <label>{{ $t('pages.imageProcess.general.quality') }}</label>
               <input v-model.number="compressForm.quality" type="range" min="1" max="100" class="form-range" />
               <div class="range-value">{{ compressForm.quality }}%</div>
+
+              <PerPicbedSetting
+                :map-field="compressForm.qualityMap"
+                :default-value="100"
+                field-name="quality"
+                :form-object="compressForm"
+                input-type="range"
+                :range-min="1"
+                :range-max="100"
+                :range-step="1"
+                range-suffix="%"
+                @map-change="(picbedType, value) => safeSetMapValue(compressForm, 'quality', picbedType, value, 100)"
+              />
             </div>
           </div>
         </div>
@@ -85,6 +109,15 @@
                 <span class="switch-title">{{ $t('pages.imageProcess.general.isConvert') }}</span>
               </div>
             </label>
+
+            <PerPicbedSetting
+              :map-field="compressForm.isConvertMap"
+              :default-value="false"
+              field-name="isConvert"
+              :form-object="compressForm"
+              input-type="checkbox"
+              @map-change="(picbedType, value) => safeSetMapValue(compressForm, 'isConvert', picbedType, value, false)"
+            />
           </div>
 
           <div v-if="compressForm.isConvert" class="form-grid">
@@ -95,6 +128,18 @@
                   {{ format.toUpperCase() }}
                 </option>
               </select>
+
+              <PerPicbedSetting
+                :map-field="compressForm.convertFormatMap"
+                default-value="jpg"
+                field-name="convertFormat"
+                :form-object="compressForm"
+                input-type="select"
+                :select-options="availableFormat.map(format => ({ value: format, label: format.toUpperCase() }))"
+                @map-change="
+                  (picbedType, value) => safeSetMapValue(compressForm, 'convertFormat', picbedType, value, 'jpg')
+                "
+              />
             </div>
 
             <div class="form-group">
@@ -105,6 +150,18 @@
                 rows="3"
                 placeholder='{"jpg": "png", "png": "jpg"}'
               />
+
+              <PerPicbedSetting
+                :map-field="compressForm.formatConvertObjMap"
+                :default-value="'{}'"
+                field-name="formatConvertObj"
+                :form-object="compressForm"
+                input-type="text"
+                text-placeholder="{}"
+                @map-change="
+                  (picbedType, value) => safeSetMapValue(compressForm, 'formatConvertObj', picbedType, value, '{}')
+                "
+              />
             </div>
           </div>
         </div>
@@ -124,6 +181,17 @@
                 <span class="switch-title">{{ $t('pages.imageProcess.watermark.isAdd') }}</span>
               </div>
             </label>
+
+            <PerPicbedSetting
+              :map-field="waterMarkForm.isAddWatermarkMap"
+              :default-value="false"
+              field-name="isAddWatermark"
+              :form-object="waterMarkForm"
+              input-type="checkbox"
+              @map-change="
+                (picbedType, value) => safeSetMapValue(waterMarkForm, 'isAddWatermark', picbedType, value, false)
+              "
+            />
           </div>
 
           <div v-if="waterMarkForm.isAddWatermark" class="watermark-settings">
@@ -141,6 +209,21 @@
                   <span class="radio-label">{{ $t('pages.imageProcess.watermark.image') }}</span>
                 </label>
               </div>
+
+              <PerPicbedSetting
+                :map-field="waterMarkForm.watermarkTypeMap"
+                default-value="text"
+                field-name="watermarkType"
+                :form-object="waterMarkForm"
+                input-type="radio"
+                :radio-options="[
+                  { value: 'text', label: $t('pages.imageProcess.watermark.text') },
+                  { value: 'image', label: $t('pages.imageProcess.watermark.image') }
+                ]"
+                @map-change="
+                  (picbedType, value) => safeSetMapValue(waterMarkForm, 'watermarkType', picbedType, value, 'text')
+                "
+              />
             </div>
 
             <div class="form-grid">
@@ -152,6 +235,18 @@
                     <span class="switch-title">{{ $t('pages.imageProcess.watermark.isFullScreen') }}</span>
                   </div>
                 </label>
+
+                <PerPicbedSetting
+                  :map-field="waterMarkForm.isFullScreenWatermarkMap"
+                  :default-value="false"
+                  field-name="isFullScreenWatermark"
+                  :form-object="waterMarkForm"
+                  input-type="checkbox"
+                  @map-change="
+                    (picbedType, value) =>
+                      safeSetMapValue(waterMarkForm, 'isFullScreenWatermark', picbedType, value, false)
+                  "
+                />
               </div>
 
               <div class="form-group">
@@ -164,6 +259,21 @@
                   class="form-range"
                 />
                 <div class="range-value">{{ waterMarkForm.watermarkDegree }}°</div>
+
+                <PerPicbedSetting
+                  :map-field="waterMarkForm.watermarkDegreeMap"
+                  :default-value="0"
+                  field-name="watermarkDegree"
+                  :form-object="waterMarkForm"
+                  input-type="range"
+                  :range-min="-360"
+                  :range-max="360"
+                  :range-step="1"
+                  range-suffix="°"
+                  @map-change="
+                    (picbedType, value) => safeSetMapValue(waterMarkForm, 'watermarkDegree', picbedType, value, 0)
+                  "
+                />
               </div>
 
               <div class="form-group">
@@ -177,10 +287,25 @@
                   class="form-range"
                 />
                 <div class="range-value">{{ Math.round((waterMarkForm.watermarkScaleRatio || 0) * 100) }}%</div>
+
+                <PerPicbedSetting
+                  :map-field="waterMarkForm.watermarkScaleRatioMap"
+                  :default-value="0.15"
+                  field-name="watermarkScaleRatio"
+                  :form-object="waterMarkForm"
+                  input-type="range"
+                  :range-min="0"
+                  :range-max="1"
+                  :range-step="0.01"
+                  range-suffix="%"
+                  @map-change="
+                    (picbedType, value) =>
+                      safeSetMapValue(waterMarkForm, 'watermarkScaleRatio', picbedType, value, 0.15)
+                  "
+                />
               </div>
             </div>
 
-            <!-- Text Watermark Settings -->
             <div v-if="waterMarkForm.watermarkType === 'text'" class="form-grid">
               <div class="form-group">
                 <label>{{ $t('pages.imageProcess.watermark.inputText') }}</label>
@@ -190,6 +315,19 @@
                   class="form-input"
                   :placeholder="$t('pages.imageProcess.watermark.inputTextPlaceholder')"
                 />
+
+                <!-- Per-picbed settings for watermarkText -->
+                <PerPicbedSetting
+                  :map-field="waterMarkForm.watermarkTextMap"
+                  :default-value="''"
+                  field-name="watermarkText"
+                  :form-object="waterMarkForm"
+                  input-type="text"
+                  :text-placeholder="$t('pages.imageProcess.watermark.inputTextPlaceholder')"
+                  @map-change="
+                    (picbedType, value) => safeSetMapValue(waterMarkForm, 'watermarkText', picbedType, value, '')
+                  "
+                />
               </div>
 
               <div class="form-group">
@@ -200,6 +338,18 @@
                   class="form-input"
                   :placeholder="$t('pages.imageProcess.watermark.textFontPathPlaceholder')"
                 />
+
+                <PerPicbedSetting
+                  :map-field="waterMarkForm.watermarkFontPathMap"
+                  :default-value="''"
+                  field-name="watermarkFontPath"
+                  :form-object="waterMarkForm"
+                  input-type="text"
+                  :text-placeholder="$t('pages.imageProcess.watermark.textFontPathPlaceholder')"
+                  @map-change="
+                    (picbedType, value) => safeSetMapValue(waterMarkForm, 'watermarkFontPath', picbedType, value, '')
+                  "
+                />
               </div>
 
               <div class="form-group">
@@ -213,6 +363,18 @@
                     placeholder="#CCCCCC73"
                   />
                 </div>
+
+                <PerPicbedSetting
+                  :map-field="waterMarkForm.watermarkColorMap"
+                  :default-value="'#CCCCCC73'"
+                  field-name="watermarkColor"
+                  :form-object="waterMarkForm"
+                  input-type="color"
+                  @map-change="
+                    (picbedType, value) =>
+                      safeSetMapValue(waterMarkForm, 'watermarkColor', picbedType, value, '#CCCCCC73')
+                  "
+                />
               </div>
             </div>
 
@@ -225,6 +387,18 @@
                 class="form-input"
                 :placeholder="$t('pages.imageProcess.watermark.imagePathPlaceholder')"
               />
+
+              <PerPicbedSetting
+                :map-field="waterMarkForm.watermarkImagePathMap"
+                :default-value="''"
+                field-name="watermarkImagePath"
+                :form-object="waterMarkForm"
+                input-type="text"
+                :text-placeholder="$t('pages.imageProcess.watermark.imagePathPlaceholder')"
+                @map-change="
+                  (picbedType, value) => safeSetMapValue(waterMarkForm, 'watermarkImagePath', picbedType, value, '')
+                "
+              />
             </div>
 
             <div v-if="waterMarkForm.watermarkType === 'image'" class="form-group">
@@ -240,9 +414,22 @@
               <div class="range-value">
                 {{ waterMarkForm.watermarkImageOpacity || 0 }}
               </div>
+
+              <PerPicbedSetting
+                :map-field="waterMarkForm.watermarkImageOpacityMap"
+                :default-value="255"
+                field-name="watermarkImageOpacity"
+                :form-object="waterMarkForm"
+                input-type="range"
+                :range-min="0"
+                :range-max="255"
+                :range-step="1"
+                @map-change="
+                  (picbedType, value) => safeSetMapValue(waterMarkForm, 'watermarkImageOpacity', picbedType, value, 255)
+                "
+              />
             </div>
 
-            <!-- Watermark Position -->
             <div class="form-group">
               <label>{{ $t('pages.imageProcess.watermark.position') }}</label>
               <div class="position-grid">
@@ -257,6 +444,25 @@
                   {{ label }}
                 </button>
               </div>
+
+              <!-- Per-picbed settings for watermarkPosition -->
+              <PerPicbedSetting
+                :map-field="waterMarkForm.watermarkPositionMap"
+                :default-value="'southeast'"
+                field-name="watermarkPosition"
+                :form-object="waterMarkForm"
+                input-type="select"
+                :select-options="
+                  Array.from(waterMarkPositionMap.entries()).map(([key, label]) => ({
+                    value: key,
+                    label
+                  }))
+                "
+                @map-change="
+                  (picbedType, value) =>
+                    safeSetMapValue(waterMarkForm, 'watermarkPosition', picbedType, value, 'southeast')
+                "
+              />
             </div>
           </div>
         </div>
@@ -277,6 +483,15 @@
                   <span class="switch-title">{{ $t('pages.imageProcess.transform.isFlip') }}</span>
                 </div>
               </label>
+
+              <PerPicbedSetting
+                :map-field="compressForm.isFlipMap"
+                :default-value="false"
+                field-name="isFlip"
+                :form-object="compressForm"
+                input-type="checkbox"
+                @map-change="(picbedType, value) => safeSetMapValue(compressForm, 'isFlip', picbedType, value, false)"
+              />
             </div>
 
             <div class="form-group">
@@ -287,6 +502,15 @@
                   <span class="switch-title">{{ $t('pages.imageProcess.transform.isFlop') }}</span>
                 </div>
               </label>
+
+              <PerPicbedSetting
+                :map-field="compressForm.isFlopMap"
+                :default-value="false"
+                field-name="isFlop"
+                :form-object="compressForm"
+                input-type="checkbox"
+                @map-change="(picbedType, value) => safeSetMapValue(compressForm, 'isFlop', picbedType, value, false)"
+              />
             </div>
           </div>
         </div>
@@ -303,12 +527,34 @@
                 <span class="switch-title">{{ $t('pages.imageProcess.transform.isRotate') }}</span>
               </div>
             </label>
+
+            <PerPicbedSetting
+              :map-field="compressForm.isRotateMap"
+              :default-value="false"
+              field-name="isRotate"
+              :form-object="compressForm"
+              input-type="checkbox"
+              @map-change="(picbedType, value) => safeSetMapValue(compressForm, 'isRotate', picbedType, value, false)"
+            />
           </div>
 
           <div v-if="compressForm.isRotate" class="form-group">
             <label>{{ $t('pages.imageProcess.transform.rotationDegree') }}</label>
             <input v-model.number="compressForm.rotateDegree" type="range" min="-360" max="360" class="form-range" />
             <div class="range-value">{{ compressForm.rotateDegree }}°</div>
+
+            <PerPicbedSetting
+              :map-field="compressForm.rotateDegreeMap"
+              :default-value="0"
+              field-name="rotateDegree"
+              :form-object="compressForm"
+              input-type="range"
+              :range-min="-360"
+              :range-max="360"
+              :range-step="1"
+              range-suffix="°"
+              @map-change="(picbedType, value) => safeSetMapValue(compressForm, 'rotateDegree', picbedType, value, 0)"
+            />
           </div>
         </div>
 
@@ -324,6 +570,15 @@
                 <span class="switch-title">{{ $t('pages.imageProcess.transform.isResize') }}</span>
               </div>
             </label>
+
+            <PerPicbedSetting
+              :map-field="compressForm.isReSizeMap"
+              :default-value="false"
+              field-name="isReSize"
+              :form-object="compressForm"
+              input-type="checkbox"
+              @map-change="(picbedType, value) => safeSetMapValue(compressForm, 'isReSize', picbedType, value, false)"
+            />
           </div>
 
           <div v-if="compressForm.isReSize" class="resize-settings">
@@ -331,11 +586,37 @@
               <div class="form-group">
                 <label>{{ $t('pages.imageProcess.transform.resizeWidth') }}</label>
                 <input v-model.number="compressForm.reSizeWidth" type="number" min="0" class="form-input" />
+
+                <PerPicbedSetting
+                  :map-field="compressForm.reSizeWidthMap"
+                  :default-value="500"
+                  field-name="reSizeWidth"
+                  :form-object="compressForm"
+                  input-type="number"
+                  :number-min="0"
+                  :number-max="10000"
+                  @map-change="
+                    (picbedType, value) => safeSetMapValue(compressForm, 'reSizeWidth', picbedType, value, 500)
+                  "
+                />
               </div>
 
               <div class="form-group">
                 <label>{{ $t('pages.imageProcess.transform.resizeHeight') }}</label>
                 <input v-model.number="compressForm.reSizeHeight" type="number" min="0" class="form-input" />
+
+                <PerPicbedSetting
+                  :map-field="compressForm.reSizeHeightMap"
+                  :default-value="500"
+                  field-name="reSizeHeight"
+                  :form-object="compressForm"
+                  input-type="number"
+                  :number-min="0"
+                  :number-max="10000"
+                  @map-change="
+                    (picbedType, value) => safeSetMapValue(compressForm, 'reSizeHeight', picbedType, value, 500)
+                  "
+                />
               </div>
             </div>
 
@@ -353,6 +634,17 @@
                   <span class="switch-title">{{ $t('pages.imageProcess.transform.skipResizeOfSmallImgHeight') }}</span>
                 </div>
               </label>
+
+              <PerPicbedSetting
+                :map-field="compressForm.skipReSizeOfSmallImgMap"
+                :default-value="false"
+                field-name="skipReSizeOfSmallImg"
+                :form-object="compressForm"
+                input-type="checkbox"
+                @map-change="
+                  (picbedType, value) => safeSetMapValue(compressForm, 'skipReSizeOfSmallImg', picbedType, value, false)
+                "
+              />
             </div>
           </div>
         </div>
@@ -369,12 +661,36 @@
                 <span class="switch-description">{{ $t('pages.imageProcess.transform.isResizeByPercentHint') }}</span>
               </div>
             </label>
+
+            <PerPicbedSetting
+              :map-field="compressForm.isReSizeByPercentMap"
+              :default-value="false"
+              field-name="isReSizeByPercent"
+              :form-object="compressForm"
+              input-type="checkbox"
+              @map-change="
+                (picbedType, value) => safeSetMapValue(compressForm, 'isReSizeByPercent', picbedType, value, false)
+              "
+            />
           </div>
 
           <div v-if="compressForm.isReSizeByPercent" class="form-group">
             <label>{{ $t('pages.imageProcess.transform.resizePercent') }}</label>
             <input v-model.number="compressForm.reSizePercent" type="range" min="1" max="500" class="form-range" />
             <div class="range-value">{{ compressForm.reSizePercent }}%</div>
+
+            <PerPicbedSetting
+              :map-field="compressForm.reSizePercentMap"
+              :default-value="50"
+              field-name="reSizePercent"
+              :form-object="compressForm"
+              input-type="range"
+              :range-min="1"
+              :range-max="500"
+              :range-step="1"
+              range-suffix="%"
+              @map-change="(picbedType, value) => safeSetMapValue(compressForm, 'reSizePercent', picbedType, value, 50)"
+            />
           </div>
         </div>
       </div>
@@ -390,6 +706,9 @@ import { useI18n } from 'vue-i18n'
 
 import { configPaths } from '@/utils/configPaths'
 import { getConfig, saveConfig } from '@/utils/dataSender'
+import { updatePicBedGlobal } from '@/utils/global'
+
+import PerPicbedSetting from './PerPicbedSetting.vue'
 
 const { t } = useI18n()
 const imageProcessDialogVisible = defineModel<boolean>()
@@ -452,33 +771,60 @@ const availableFormat = [
 
 const waterMarkForm = reactive<IBuildInWaterMarkOptions>({
   isAddWatermark: false,
+  isAddWatermarkMap: {},
   watermarkType: 'text',
+  watermarkTypeMap: {},
   isFullScreenWatermark: false,
+  isFullScreenWatermarkMap: {},
   watermarkDegree: 0,
+  watermarkDegreeMap: {},
   watermarkText: '',
+  watermarkTextMap: {},
   watermarkFontPath: '',
+  watermarkFontPathMap: {},
   watermarkScaleRatio: 0.15,
+  watermarkScaleRatioMap: {},
   watermarkColor: '#CCCCCC73',
+  watermarkColorMap: {},
   watermarkImagePath: '',
+  watermarkImagePathMap: {},
   watermarkPosition: 'southeast',
-  watermarkImageOpacity: 255
+  watermarkPositionMap: {},
+  watermarkImageOpacity: 255,
+  watermarkImageOpacityMap: {}
 })
 
 const compressForm = reactive<IBuildInCompressOptions>({
   quality: 100,
+  qualityMap: {},
   isConvert: false,
+  isConvertMap: {},
   convertFormat: 'jpg',
+  convertFormatMap: {},
   isReSize: false,
+  isReSizeMap: {},
   reSizeWidth: 500,
+  reSizeWidthMap: {},
   reSizeHeight: 500,
+  reSizeHeightMap: {},
   skipReSizeOfSmallImg: false,
+  skipReSizeOfSmallImgMap: {},
   isReSizeByPercent: false,
+  isReSizeByPercentMap: {},
   reSizePercent: 50,
+  reSizePercentMap: {},
   isRotate: false,
+  isRotateMap: {},
   rotateDegree: 0,
+  rotateDegreeMap: {},
   isRemoveExif: false,
+  isRemoveExifMap: {},
   isFlip: false,
-  isFlop: false
+  isFlipMap: {},
+  isFlop: false,
+  isFlopMap: {},
+  formatConvertObj: {},
+  formatConvertObjMap: {}
 })
 const formatConvertObj = ref('{}')
 
@@ -486,6 +832,17 @@ const skipProcessForm = reactive({
   skipProcessExtList: 'zip,rar,7z,tar,gz,tar.gz,tar.bz2,tar.xz'
 })
 
+// State for showing map settings for each field (now unused - kept for future reference)
+// const showMapSettings = reactive<Record<string, boolean>>({})
+
+// Available picbeds for map configuration (now unused - moved to component)
+// const availablePicbeds = computed(() => {
+//   return picBedGlobal.value.map(picbed => ({
+//     type: picbed.type,
+//     name: picbed.name
+//   }))
+// })
+
 const waterMarkFormKeys = Object.keys(waterMarkForm) as (keyof typeof waterMarkForm)[]
 const compressFormKeys = Object.keys(compressForm) as (keyof typeof compressForm)[]
 const skipProcessFormKeys = Object.keys(skipProcessForm) as (keyof typeof skipProcessForm)[]
@@ -502,6 +859,25 @@ function handleSaveConfig() {
   const formatConvertObjFilter = Object.fromEntries(formatConvertObjEntriesFilter)
   formatConvertObj.value = JSON.stringify(formatConvertObjFilter)
   compressForm.formatConvertObj = formatConvertObjFilter
+
+  const processedFormatConvertObjMap: Record<string, any> = {}
+  Object.entries(compressForm.formatConvertObjMap || {}).forEach(([picbedType, jsonString]) => {
+    try {
+      const parsedObj = JSON.parse(jsonString as string)
+      const objEntries = Object.entries(parsedObj)
+      const filteredEntries = objEntries.filter((item: any) => {
+        return imageExtList.includes(item[0]) && availableFormat.includes(item[1])
+      })
+      const filteredObj = Object.fromEntries(filteredEntries)
+      if (Object.keys(filteredObj).length > 0) {
+        processedFormatConvertObjMap[picbedType] = filteredObj
+      }
+    } catch (error) {
+      // Skip invalid JSON strings
+    }
+  })
+  compressForm.formatConvertObjMap = processedFormatConvertObjMap
+
   saveConfig(configPaths.buildIn.compress, toRaw(compressForm))
   saveConfig(configPaths.buildIn.watermark, toRaw(waterMarkForm))
   saveConfig(configPaths.buildIn.skipProcess, toRaw(skipProcessForm))
@@ -543,7 +919,27 @@ function closeDialog() {
   imageProcessDialogVisible.value = false
 }
 
+// Helper function for getting map values (now unused - moved to component)
+// function getMapValue(mapObj: Record<string, any> | undefined, picbedType: string, defaultValue: any) {
+//   if (!mapObj) return defaultValue
+//   return mapObj[picbedType] !== undefined ? mapObj[picbedType] : defaultValue
+// }
+
+// Safe wrapper for setMapValue that ensures map objects exist
+function safeSetMapValue(form: any, fieldName: string, picbedType: string, value: any, defaultValue: any) {
+  const mapFieldName = `${fieldName}Map`
+  if (!form[mapFieldName]) {
+    form[mapFieldName] = {}
+  }
+  if (value === defaultValue) {
+    delete form[mapFieldName][picbedType]
+  } else {
+    form[mapFieldName][picbedType] = value
+  }
+}
+
 onBeforeMount(async () => {
+  await updatePicBedGlobal()
   await initData()
 })
 </script>