✨ 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>

src/renderer/components/PerPicbedSetting.vue

@@ -0,0 +1,622 @@
+<template>
+  <div class="per-picbed-setting">
+    <div class="map-settings-toggle">
+      <button type="button" class="btn btn-secondary btn-small" @click="showSettings = !showSettings">
+        <Settings :size="14" />
+        {{ t('pages.imageProcess.perPicBed.title') }}
+      </button>
+    </div>
+
+    <div v-if="showSettings" class="map-settings-panel">
+      <h4>{{ t('pages.imageProcess.perPicBed.description') }}</h4>
+      <div class="picbed-settings-grid">
+        <div v-for="picbed in availablePicbeds" :key="picbed.type" class="picbed-setting-item">
+          <label class="picbed-name">{{ picbed.name }}</label>
+
+          <!-- Checkbox input -->
+          <label v-if="inputType === 'checkbox'" class="switch-label small">
+            <input
+              :checked="getMapValue(mapField, picbed.type, defaultValue)"
+              type="checkbox"
+              class="switch-input"
+              @change="e => handleMapChange(picbed.type, (e.target as HTMLInputElement).checked)"
+            />
+            <span class="switch-slider" />
+          </label>
+
+          <!-- Range input -->
+          <div v-else-if="inputType === 'range'" class="range-input-container">
+            <input
+              :value="getMapValue(mapField, picbed.type, defaultValue)"
+              type="range"
+              :min="rangeMin"
+              :max="rangeMax"
+              :step="rangeStep"
+              class="form-range small"
+              @input="e => handleMapChange(picbed.type, parseFloat((e.target as HTMLInputElement).value))"
+            />
+            <div class="range-value">{{ getMapValue(mapField, picbed.type, defaultValue) }}{{ rangeSuffix }}</div>
+          </div>
+
+          <!-- Number input -->
+          <input
+            v-else-if="inputType === 'number'"
+            :value="getMapValue(mapField, picbed.type, defaultValue)"
+            type="number"
+            :min="numberMin"
+            :max="numberMax"
+            class="form-input small"
+            @input="e => handleMapChange(picbed.type, parseFloat((e.target as HTMLInputElement).value))"
+          />
+
+          <!-- Text input -->
+          <input
+            v-else-if="inputType === 'text'"
+            :value="getMapValue(mapField, picbed.type, defaultValue)"
+            type="text"
+            class="form-input small"
+            :placeholder="textPlaceholder"
+            @input="e => handleMapChange(picbed.type, (e.target as HTMLInputElement).value)"
+          />
+
+          <!-- Color input -->
+          <div v-else-if="inputType === 'color'" class="color-input-group small">
+            <input
+              :value="getMapValue(mapField, picbed.type, defaultValue)"
+              type="color"
+              class="form-color small"
+              @input="e => handleMapChange(picbed.type, (e.target as HTMLInputElement).value)"
+            />
+            <input
+              :value="getMapValue(mapField, picbed.type, defaultValue)"
+              type="text"
+              class="form-input small"
+              @input="e => handleMapChange(picbed.type, (e.target as HTMLInputElement).value)"
+            />
+          </div>
+
+          <!-- Select input -->
+          <select
+            v-else-if="inputType === 'select'"
+            :value="getMapValue(mapField, picbed.type, defaultValue)"
+            class="form-input small"
+            @change="e => handleMapChange(picbed.type, (e.target as HTMLSelectElement).value)"
+          >
+            <option v-for="option in selectOptions" :key="option.value" :value="option.value">
+              {{ option.label }}
+            </option>
+          </select>
+
+          <!-- Radio input -->
+          <div v-else-if="inputType === 'radio'" class="radio-group small">
+            <label v-for="option in radioOptions" :key="option.value" class="radio-option small">
+              <input
+                :checked="getMapValue(mapField, picbed.type, defaultValue) === option.value"
+                :value="option.value"
+                type="radio"
+                class="radio-input"
+                @change="handleMapChange(picbed.type, option.value)"
+              />
+              <span class="radio-indicator" />
+              <span class="radio-label">{{ option.label }}</span>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Settings } from 'lucide-vue-next'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { picBedGlobal } from '@/utils/global'
+
+const { t } = useI18n()
+
+interface SelectOption {
+  value: string | number
+  label: string
+}
+
+interface RadioOption {
+  value: string | number
+  label: string
+}
+
+interface Props {
+  mapField: Record<string, any> | undefined
+  defaultValue: any
+  fieldName: string
+  formObject: Record<string, any>
+  inputType: 'checkbox' | 'range' | 'number' | 'text' | 'color' | 'select' | 'radio'
+  rangeMin?: number
+  rangeMax?: number
+  rangeStep?: number
+  rangeSuffix?: string
+  numberMin?: number
+  numberMax?: number
+  textPlaceholder?: string
+  selectOptions?: SelectOption[]
+  radioOptions?: RadioOption[]
+}
+
+withDefaults(defineProps<Props>(), {
+  rangeMin: 0,
+  rangeMax: 100,
+  rangeStep: 1,
+  rangeSuffix: '',
+  numberMin: 0,
+  numberMax: 1000,
+  textPlaceholder: '',
+  selectOptions: () => [],
+  radioOptions: () => []
+})
+
+const emit = defineEmits<{
+  mapChange: [picbedType: string, value: any]
+}>()
+
+const showSettings = ref(false)
+
+const availablePicbeds = computed(() => {
+  return picBedGlobal.value.map(picbed => ({
+    type: picbed.type,
+    name: picbed.name
+  }))
+})
+
+function getMapValue(mapObj: Record<string, any> | undefined, picbedType: string, defaultValue: any) {
+  if (!mapObj) return defaultValue
+  return mapObj[picbedType] !== undefined ? mapObj[picbedType] : defaultValue
+}
+
+function handleMapChange(picbedType: string, value: any) {
+  emit('mapChange', picbedType, value)
+}
+</script>
+
+<style scoped>
+/* Component root */
+.per-picbed-setting {
+  margin-top: 0.5rem;
+}
+
+/* Toggle section */
+.map-settings-toggle {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 0.5rem;
+}
+
+/* Button styling */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  background: var(--color-background-primary);
+  color: var(--color-text-primary);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-decoration: none;
+  line-height: 1;
+}
+
+.btn:hover {
+  background: var(--color-background-secondary);
+  border-color: var(--color-blue-common);
+}
+
+.btn-secondary {
+  background: var(--color-background-primary);
+  border-color: var(--color-border);
+  color: var(--color-text-secondary);
+}
+
+.btn-secondary:hover {
+  background: var(--color-background-secondary);
+  border-color: var(--color-border-secondary);
+  color: var(--color-text-primary);
+}
+
+.btn-small {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  gap: 0.375rem;
+}
+
+/* Settings panel */
+.map-settings-panel {
+  margin-top: 1rem;
+  padding: 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  background: var(--color-background-secondary);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.map-settings-panel h4 {
+  margin: 0 0 1rem 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+/* Grid layout */
+.picbed-settings-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.75rem;
+}
+
+.picbed-setting-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  background: var(--color-background-primary);
+  transition: all 0.2s ease;
+}
+
+.picbed-setting-item:hover {
+  border-color: var(--color-blue-common);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.picbed-name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  margin: 0;
+  flex: 1;
+  min-width: 0;
+}
+
+/* Switch component */
+.switch-label {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+}
+
+.switch-label.small {
+  padding: 0;
+  margin: 0;
+}
+
+.switch-input {
+  display: none;
+}
+
+.switch-slider {
+  position: relative;
+  width: 44px;
+  height: 24px;
+  background: var(--color-border-darker);
+  border-radius: 12px;
+  transition: all 0.3s ease;
+  flex-shrink: 0;
+}
+
+.switch-slider::before {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background: #ffffff;
+  border-radius: 50%;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.switch-input:checked + .switch-slider {
+  background: var(--color-blue-common);
+}
+
+.switch-input:checked + .switch-slider::before {
+  transform: translateX(20px);
+}
+
+/* Form inputs */
+.form-input,
+.form-range,
+.form-color {
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  background: var(--color-background-primary);
+  color: var(--color-text-primary);
+  transition: all 0.2s ease;
+  outline: none;
+}
+
+.form-input:focus,
+.form-color:focus {
+  border-color: var(--color-blue-common);
+  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
+}
+
+.form-input.small {
+  width: 100px;
+  padding: 0.375rem 0.5rem;
+  font-size: 0.875rem;
+}
+
+.form-range.small {
+  width: 100px;
+  height: 6px;
+  -webkit-appearance: none;
+  appearance: none;
+  background: var(--color-border-darker);
+  border-radius: 3px;
+}
+
+.form-range.small::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--color-blue-common);
+  cursor: pointer;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  border: 2px solid #ffffff;
+}
+
+.form-range.small::-moz-range-thumb {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--color-blue-common);
+  cursor: pointer;
+  border: 2px solid #ffffff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.form-color.small {
+  width: 40px;
+  height: 32px;
+  cursor: pointer;
+  padding: 0;
+}
+
+/* Range input container */
+.range-input-container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.range-value {
+  min-width: 50px;
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+  text-align: center;
+  padding: 0.125rem 0.25rem;
+  background: var(--color-blue-common);
+  color: white;
+  border-radius: 4px;
+  font-weight: 500;
+}
+
+/* Color input group */
+.color-input-group.small {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.color-input-group.small .form-input {
+  width: 80px;
+}
+
+/* Radio group */
+.radio-group.small {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.radio-option.small {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  background: var(--color-background-primary);
+  font-size: 0.75rem;
+}
+
+.radio-option.small:hover {
+  border-color: var(--color-blue-common);
+  background: rgba(64, 158, 255, 0.1);
+}
+
+.radio-input {
+  display: none;
+}
+
+.radio-indicator {
+  width: 14px;
+  height: 14px;
+  border: 2px solid var(--color-border);
+  border-radius: 50%;
+  transition: all 0.2s ease;
+  position: relative;
+  background: var(--color-background-primary);
+  flex-shrink: 0;
+}
+
+.radio-input:checked + .radio-indicator {
+  border-color: var(--color-blue-common);
+}
+
+.radio-input:checked + .radio-indicator::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 6px;
+  height: 6px;
+  background: var(--color-blue-common);
+  border-radius: 50%;
+}
+
+.radio-label {
+  font-size: inherit;
+  color: var(--color-text-primary);
+  font-weight: 500;
+}
+
+/* Select styling */
+select.form-input {
+  cursor: pointer;
+  padding-right: 2rem;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 0.5rem center;
+  background-repeat: no-repeat;
+  background-size: 1rem;
+}
+
+select.form-input:focus {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23409eff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .picbed-setting-item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+
+  .picbed-name {
+    margin-bottom: 0.5rem;
+  }
+
+  .radio-group.small {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .range-input-container {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.25rem;
+  }
+
+  .color-input-group.small {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+/* Dark mode styles */
+:root.dark .map-settings-panel,
+:root.auto.dark .map-settings-panel {
+  background: var(--color-background-tertiary);
+  border-color: var(--color-border);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+:root.dark .picbed-setting-item,
+:root.auto.dark .picbed-setting-item {
+  background: var(--color-surface);
+  border-color: var(--color-border);
+}
+
+:root.dark .picbed-setting-item:hover,
+:root.auto.dark .picbed-setting-item:hover {
+  border-color: var(--color-primary);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+:root.dark .form-input,
+:root.dark .form-color,
+:root.auto.dark .form-input,
+:root.auto.dark .form-color {
+  background: var(--color-surface);
+  border-color: var(--color-border);
+  color: var(--color-text-primary);
+}
+
+:root.dark .form-input:focus,
+:root.dark .form-color:focus,
+:root.auto.dark .form-input:focus,
+:root.auto.dark .form-color:focus {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.3);
+}
+
+:root.dark .btn-secondary,
+:root.auto.dark .btn-secondary {
+  background: var(--color-surface);
+  border-color: var(--color-border);
+  color: var(--color-text-secondary);
+}
+
+:root.dark .btn-secondary:hover,
+:root.auto.dark .btn-secondary:hover {
+  background: var(--color-background-tertiary);
+  border-color: var(--color-border-hover);
+  color: var(--color-text-primary);
+}
+
+:root.dark .switch-slider::before,
+:root.auto.dark .switch-slider::before {
+  background: var(--color-surface);
+}
+
+:root.dark .radio-option.small,
+:root.auto.dark .radio-option.small {
+  background: var(--color-surface);
+  border-color: var(--color-border);
+}
+
+:root.dark .radio-option.small:hover,
+:root.auto.dark .radio-option.small:hover {
+  border-color: var(--color-primary);
+  background: rgba(64, 158, 255, 0.2);
+}
+
+:root.dark .radio-indicator,
+:root.auto.dark .radio-indicator {
+  background: var(--color-surface);
+  border-color: var(--color-border);
+}
+
+:root.dark .radio-input:checked + .radio-indicator,
+:root.auto.dark .radio-input:checked + .radio-indicator {
+  border-color: var(--color-primary);
+}
+
+:root.dark .radio-input:checked + .radio-indicator::after,
+:root.auto.dark .radio-input:checked + .radio-indicator::after {
+  background: var(--color-primary);
+}
+
+:root.dark select.form-input,
+:root.auto.dark select.form-input {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+}
+
+:root.dark select.form-input:focus,
+:root.auto.dark select.form-input:focus {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23409eff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+}
+</style>

src/renderer/i18n/locales/en.json

@@ -128,6 +128,10 @@
         "isResizeByPercent": "Enable Resize by Percentage",
         "isResizeByPercentHint": "Higher priority",
         "resizePercent": "Resize Percentage (Enter 50 for 50%)"
+      },
+      "perPicBed": {
+        "title": "Per-PicBed Settings",
+        "description": "Configure settings for each PicBed individually"
       }
     },
     "settings": {

src/renderer/i18n/locales/zh-CN.json

@@ -128,6 +128,10 @@
         "isResizeByPercent": "启用按比例调整",
         "isResizeByPercentHint": "优先级更高",
         "resizePercent": "调整比例 (输入 50 表示 50%)"
+      },
+      "perPicBed": {
+        "title": "图床独立设置",
+        "description": "为每个图床单独配置设置"
       }
     },
     "settings": {

src/renderer/i18n/locales/zh-TW.json

@@ -128,6 +128,10 @@
         "isResizeByPercent": "啟用按比例調整",
         "isResizeByPercentHint": "優先級更高",
         "resizePercent": "調整比例 (輸入 50 表示 50%)"
+      },
+      "perPicBed": {
+        "title": "圖床獨立設置",
+        "description": "為每個圖床單獨配置設置"
       }
     },
     "settings": {