✨ Feature(custom): per picbed setting now show the same value with gloabl set to avoid mislead

src/renderer/components/ImageProcessSetting.vue

@@ -63,12 +63,19 @@
 
                 <PerPicbedSetting
                   :map-field="compressForm.isRemoveExifMap"
-                  :default-value="false"
+                  :default-value="defaultCompressSetting.isRemoveExif"
                   field-name="isRemoveExif"
-                  :form-object="compressForm"
+                  :global-value="compressForm.isRemoveExif"
                   input-type="checkbox"
                   @map-change="
-                    (picbedType, value) => safeSetMapValue(compressForm, 'isRemoveExif', picbedType, value, false)
+                    (picbedType, value) =>
+                      safeSetMapValue(
+                        compressForm,
+                        'isRemoveExif',
+                        picbedType,
+                        value,
+                        defaultCompressSetting.isRemoveExif,
+                      )
                   "
                 />
               </div>
@@ -80,15 +87,18 @@
 
                 <PerPicbedSetting
                   :map-field="compressForm.qualityMap"
-                  :default-value="100"
+                  :default-value="defaultCompressSetting.quality"
                   field-name="quality"
-                  :form-object="compressForm"
+                  :global-value="compressForm.quality"
                   input-type="range"
                   :range-min="1"
                   :range-max="100"
                   :range-step="1"
                   range-suffix="%"
-                  @map-change="(picbedType, value) => safeSetMapValue(compressForm, 'quality', picbedType, value, 100)"
+                  @map-change="
+                    (picbedType, value) =>
+                      safeSetMapValue(compressForm, 'quality', picbedType, value, defaultCompressSetting.quality)
+                  "
                 />
               </div>
             </div>
@@ -115,12 +125,13 @@
 
               <PerPicbedSetting
                 :map-field="compressForm.isConvertMap"
-                :default-value="false"
+                :default-value="defaultCompressSetting.isConvert"
                 field-name="isConvert"
-                :form-object="compressForm"
+                :global-value="compressForm.isConvert"
                 input-type="checkbox"
                 @map-change="
-                  (picbedType, value) => safeSetMapValue(compressForm, 'isConvert', picbedType, value, false)
+                  (picbedType, value) =>
+                    safeSetMapValue(compressForm, 'isConvert', picbedType, value, defaultCompressSetting.isConvert)
                 "
               />
             </div>
@@ -136,13 +147,20 @@
 
                 <PerPicbedSetting
                   :map-field="compressForm.convertFormatMap"
-                  default-value="jpg"
+                  :default-value="defaultCompressSetting.convertFormat"
                   field-name="convertFormat"
-                  :form-object="compressForm"
+                  :global-value="compressForm.convertFormat"
                   input-type="select"
                   :select-options="availableFormat.map(format => ({ value: format, label: format.toUpperCase() }))"
                   @map-change="
-                    (picbedType, value) => safeSetMapValue(compressForm, 'convertFormat', picbedType, value, 'jpg')
+                    (picbedType, value) =>
+                      safeSetMapValue(
+                        compressForm,
+                        'convertFormat',
+                        picbedType,
+                        value,
+                        defaultCompressSetting.convertFormat,
+                      )
                   "
                 />
               </div>
@@ -158,13 +176,20 @@
 
                 <PerPicbedSetting
                   :map-field="compressForm.formatConvertObjMap"
-                  :default-value="'{}'"
+                  :default-value="defaultCompressSetting.formatConvertObj"
                   field-name="formatConvertObj"
-                  :form-object="compressForm"
+                  :global-value="compressForm.formatConvertObj"
                   input-type="text"
                   text-placeholder="{}"
                   @map-change="
-                    (picbedType, value) => safeSetMapValue(compressForm, 'formatConvertObj', picbedType, value, '{}')
+                    (picbedType, value) =>
+                      safeSetMapValue(
+                        compressForm,
+                        'formatConvertObj',
+                        picbedType,
+                        value,
+                        defaultCompressSetting.formatConvertObj,
+                      )
                   "
                 />
               </div>
@@ -196,12 +221,19 @@
 
               <PerPicbedSetting
                 :map-field="waterMarkForm.isAddWatermarkMap"
-                :default-value="false"
+                :default-value="defaultWaterMarkSetting.isAddWatermark"
                 field-name="isAddWatermark"
-                :form-object="waterMarkForm"
+                :global-value="waterMarkForm.isAddWatermark"
                 input-type="checkbox"
                 @map-change="
-                  (picbedType, value) => safeSetMapValue(waterMarkForm, 'isAddWatermark', picbedType, value, false)
+                  (picbedType, value) =>
+                    safeSetMapValue(
+                      waterMarkForm,
+                      'isAddWatermark',
+                      picbedType,
+                      value,
+                      defaultWaterMarkSetting.isAddWatermark,
+                    )
                 "
               />
             </div>
@@ -224,16 +256,23 @@
 
                 <PerPicbedSetting
                   :map-field="waterMarkForm.watermarkTypeMap"
-                  default-value="text"
+                  :default-value="defaultWaterMarkSetting.watermarkType"
                   field-name="watermarkType"
-                  :form-object="waterMarkForm"
+                  :global-value="waterMarkForm.watermarkType"
                   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')
+                    (picbedType, value) =>
+                      safeSetMapValue(
+                        waterMarkForm,
+                        'watermarkType',
+                        picbedType,
+                        value,
+                        defaultWaterMarkSetting.watermarkType,
+                      )
                   "
                 />
               </div>
@@ -250,13 +289,19 @@
 
                   <PerPicbedSetting
                     :map-field="waterMarkForm.isFullScreenWatermarkMap"
-                    :default-value="false"
+                    :default-value="defaultWaterMarkSetting.isFullScreenWatermark"
                     field-name="isFullScreenWatermark"
-                    :form-object="waterMarkForm"
+                    :global-value="waterMarkForm.isFullScreenWatermark"
                     input-type="checkbox"
                     @map-change="
                       (picbedType, value) =>
-                        safeSetMapValue(waterMarkForm, 'isFullScreenWatermark', picbedType, value, false)
+                        safeSetMapValue(
+                          waterMarkForm,
+                          'isFullScreenWatermark',
+                          picbedType,
+                          value,
+                          defaultWaterMarkSetting.isFullScreenWatermark,
+                        )
                     "
                   />
                 </div>
@@ -274,16 +319,23 @@
 
                   <PerPicbedSetting
                     :map-field="waterMarkForm.watermarkDegreeMap"
-                    :default-value="0"
+                    :default-value="defaultWaterMarkSetting.watermarkDegree"
                     field-name="watermarkDegree"
-                    :form-object="waterMarkForm"
+                    :global-value="waterMarkForm.watermarkDegree"
                     input-type="range"
                     :range-min="-360"
                     :range-max="360"
                     :range-step="1"
                     range-suffix="°"
                     @map-change="
-                      (picbedType, value) => safeSetMapValue(waterMarkForm, 'watermarkDegree', picbedType, value, 0)
+                      (picbedType, value) =>
+                        safeSetMapValue(
+                          waterMarkForm,
+                          'watermarkDegree',
+                          picbedType,
+                          value,
+                          defaultWaterMarkSetting.watermarkDegree,
+                        )
                     "
                   />
                 </div>
@@ -302,9 +354,9 @@
 
                   <PerPicbedSetting
                     :map-field="waterMarkForm.watermarkScaleRatioMap"
-                    :default-value="0.15"
+                    :default-value="defaultWaterMarkSetting.watermarkScaleRatio"
                     field-name="watermarkScaleRatio"
-                    :form-object="waterMarkForm"
+                    :global-value="waterMarkForm.watermarkScaleRatio"
                     input-type="range"
                     :range-min="0"
                     :range-max="1"
@@ -312,7 +364,13 @@
                     range-suffix="%"
                     @map-change="
                       (picbedType, value) =>
-                        safeSetMapValue(waterMarkForm, 'watermarkScaleRatio', picbedType, value, 0.15)
+                        safeSetMapValue(
+                          waterMarkForm,
+                          'watermarkScaleRatio',
+                          picbedType,
+                          value,
+                          defaultWaterMarkSetting.watermarkScaleRatio,
+                        )
                     "
                   />
                 </div>
@@ -331,13 +389,20 @@
                   <!-- Per-picbed settings for watermarkText -->
                   <PerPicbedSetting
                     :map-field="waterMarkForm.watermarkTextMap"
-                    :default-value="''"
+                    :default-value="defaultWaterMarkSetting.watermarkText"
                     field-name="watermarkText"
-                    :form-object="waterMarkForm"
+                    :global-value="waterMarkForm.watermarkText"
                     input-type="text"
                     :text-placeholder="$t('pages.imageProcess.watermark.inputTextPlaceholder')"
                     @map-change="
-                      (picbedType, value) => safeSetMapValue(waterMarkForm, 'watermarkText', picbedType, value, '')
+                      (picbedType, value) =>
+                        safeSetMapValue(
+                          waterMarkForm,
+                          'watermarkText',
+                          picbedType,
+                          value,
+                          defaultWaterMarkSetting.watermarkText,
+                        )
                     "
                   />
                 </div>
@@ -353,13 +418,20 @@
 
                   <PerPicbedSetting
                     :map-field="waterMarkForm.watermarkFontPathMap"
-                    :default-value="''"
+                    :default-value="defaultWaterMarkSetting.watermarkFontPath"
                     field-name="watermarkFontPath"
-                    :form-object="waterMarkForm"
+                    :global-value="waterMarkForm.watermarkFontPath"
                     input-type="text"
                     :text-placeholder="$t('pages.imageProcess.watermark.textFontPathPlaceholder')"
                     @map-change="
-                      (picbedType, value) => safeSetMapValue(waterMarkForm, 'watermarkFontPath', picbedType, value, '')
+                      (picbedType, value) =>
+                        safeSetMapValue(
+                          waterMarkForm,
+                          'watermarkFontPath',
+                          picbedType,
+                          value,
+                          defaultWaterMarkSetting.watermarkFontPath,
+                        )
                     "
                   />
                 </div>
@@ -378,13 +450,19 @@
 
                   <PerPicbedSetting
                     :map-field="waterMarkForm.watermarkColorMap"
-                    :default-value="'#CCCCCC73'"
+                    :default-value="defaultWaterMarkSetting.watermarkColor"
                     field-name="watermarkColor"
-                    :form-object="waterMarkForm"
+                    :global-value="waterMarkForm.watermarkColor"
                     input-type="color"
                     @map-change="
                       (picbedType, value) =>
-                        safeSetMapValue(waterMarkForm, 'watermarkColor', picbedType, value, '#CCCCCC73')
+                        safeSetMapValue(
+                          waterMarkForm,
+                          'watermarkColor',
+                          picbedType,
+                          value,
+                          defaultWaterMarkSetting.watermarkColor,
+                        )
                     "
                   />
                 </div>
@@ -402,13 +480,20 @@
 
                 <PerPicbedSetting
                   :map-field="waterMarkForm.watermarkImagePathMap"
-                  :default-value="''"
+                  :default-value="defaultWaterMarkSetting.watermarkImagePath"
                   field-name="watermarkImagePath"
-                  :form-object="waterMarkForm"
+                  :global-value="waterMarkForm.watermarkImagePath"
                   input-type="text"
                   :text-placeholder="$t('pages.imageProcess.watermark.imagePathPlaceholder')"
                   @map-change="
-                    (picbedType, value) => safeSetMapValue(waterMarkForm, 'watermarkImagePath', picbedType, value, '')
+                    (picbedType, value) =>
+                      safeSetMapValue(
+                        waterMarkForm,
+                        'watermarkImagePath',
+                        picbedType,
+                        value,
+                        defaultWaterMarkSetting.watermarkImagePath,
+                      )
                   "
                 />
               </div>
@@ -429,16 +514,22 @@
 
                 <PerPicbedSetting
                   :map-field="waterMarkForm.watermarkImageOpacityMap"
-                  :default-value="255"
+                  :default-value="defaultWaterMarkSetting.watermarkImageOpacity"
                   field-name="watermarkImageOpacity"
-                  :form-object="waterMarkForm"
+                  :global-value="waterMarkForm.watermarkImageOpacity"
                   input-type="range"
                   :range-min="0"
                   :range-max="255"
                   :range-step="1"
                   @map-change="
                     (picbedType, value) =>
-                      safeSetMapValue(waterMarkForm, 'watermarkImageOpacity', picbedType, value, 255)
+                      safeSetMapValue(
+                        waterMarkForm,
+                        'watermarkImageOpacity',
+                        picbedType,
+                        value,
+                        defaultWaterMarkSetting.watermarkImageOpacity,
+                      )
                   "
                 />
               </div>
@@ -461,9 +552,9 @@
                 <!-- Per-picbed settings for watermarkPosition -->
                 <PerPicbedSetting
                   :map-field="waterMarkForm.watermarkPositionMap"
-                  :default-value="'southeast'"
+                  :default-value="defaultWaterMarkSetting.watermarkPosition"
                   field-name="watermarkPosition"
-                  :form-object="waterMarkForm"
+                  :global-value="waterMarkForm.watermarkPosition"
                   input-type="select"
                   :select-options="
                     Array.from(waterMarkPositionMap.entries()).map(([key, label]) => ({
@@ -473,7 +564,13 @@
                   "
                   @map-change="
                     (picbedType, value) =>
-                      safeSetMapValue(waterMarkForm, 'watermarkPosition', picbedType, value, 'southeast')
+                      safeSetMapValue(
+                        waterMarkForm,
+                        'watermarkPosition',
+                        picbedType,
+                        value,
+                        defaultWaterMarkSetting.watermarkPosition,
+                      )
                   "
                 />
               </div>
@@ -506,11 +603,14 @@
 
                 <PerPicbedSetting
                   :map-field="compressForm.isFlipMap"
-                  :default-value="false"
+                  :default-value="defaultCompressSetting.isFlip"
                   field-name="isFlip"
-                  :form-object="compressForm"
+                  :global-value="compressForm.isFlip"
                   input-type="checkbox"
-                  @map-change="(picbedType, value) => safeSetMapValue(compressForm, 'isFlip', picbedType, value, false)"
+                  @map-change="
+                    (picbedType, value) =>
+                      safeSetMapValue(compressForm, 'isFlip', picbedType, value, defaultCompressSetting.isFlip)
+                  "
                 />
               </div>
 
@@ -525,11 +625,14 @@
 
                 <PerPicbedSetting
                   :map-field="compressForm.isFlopMap"
-                  :default-value="false"
+                  :default-value="defaultCompressSetting.isFlop"
                   field-name="isFlop"
-                  :form-object="compressForm"
+                  :global-value="compressForm.isFlop"
                   input-type="checkbox"
-                  @map-change="(picbedType, value) => safeSetMapValue(compressForm, 'isFlop', picbedType, value, false)"
+                  @map-change="
+                    (picbedType, value) =>
+                      safeSetMapValue(compressForm, 'isFlop', picbedType, value, defaultCompressSetting.isFlop)
+                  "
                 />
               </div>
             </div>
@@ -557,11 +660,14 @@
 
               <PerPicbedSetting
                 :map-field="compressForm.isRotateMap"
-                :default-value="false"
+                :default-value="defaultCompressSetting.isRotate"
                 field-name="isRotate"
-                :form-object="compressForm"
+                :global-value="compressForm.isRotate"
                 input-type="checkbox"
-                @map-change="(picbedType, value) => safeSetMapValue(compressForm, 'isRotate', picbedType, value, false)"
+                @map-change="
+                  (picbedType, value) =>
+                    safeSetMapValue(compressForm, 'isRotate', picbedType, value, defaultCompressSetting.isRotate)
+                "
               />
             </div>
 
@@ -572,15 +678,24 @@
 
               <PerPicbedSetting
                 :map-field="compressForm.rotateDegreeMap"
-                :default-value="0"
+                :default-value="defaultCompressSetting.rotateDegree"
                 field-name="rotateDegree"
-                :form-object="compressForm"
+                :global-value="compressForm.rotateDegree"
                 input-type="range"
                 :range-min="-360"
                 :range-max="360"
                 :range-step="1"
                 range-suffix="°"
-                @map-change="(picbedType, value) => safeSetMapValue(compressForm, 'rotateDegree', picbedType, value, 0)"
+                @map-change="
+                  (picbedType, value) =>
+                    safeSetMapValue(
+                      compressForm,
+                      'rotateDegree',
+                      picbedType,
+                      value,
+                      defaultCompressSetting.rotateDegree,
+                    )
+                "
               />
             </div>
           </div>
@@ -607,11 +722,14 @@
 
               <PerPicbedSetting
                 :map-field="compressForm.isReSizeMap"
-                :default-value="false"
+                :default-value="defaultCompressSetting.isReSize"
                 field-name="isReSize"
-                :form-object="compressForm"
+                :global-value="compressForm.isReSize"
                 input-type="checkbox"
-                @map-change="(picbedType, value) => safeSetMapValue(compressForm, 'isReSize', picbedType, value, false)"
+                @map-change="
+                  (picbedType, value) =>
+                    safeSetMapValue(compressForm, 'isReSize', picbedType, value, defaultCompressSetting.isReSize)
+                "
               />
             </div>
 
@@ -623,14 +741,21 @@
 
                   <PerPicbedSetting
                     :map-field="compressForm.reSizeWidthMap"
-                    :default-value="500"
+                    :default-value="defaultCompressSetting.reSizeWidth"
                     field-name="reSizeWidth"
-                    :form-object="compressForm"
+                    :global-value="compressForm.reSizeWidth"
                     input-type="number"
                     :number-min="0"
                     :number-max="10000"
                     @map-change="
-                      (picbedType, value) => safeSetMapValue(compressForm, 'reSizeWidth', picbedType, value, 500)
+                      (picbedType, value) =>
+                        safeSetMapValue(
+                          compressForm,
+                          'reSizeWidth',
+                          picbedType,
+                          value,
+                          defaultCompressSetting.reSizeWidth,
+                        )
                     "
                   />
                 </div>
@@ -641,14 +766,21 @@
 
                   <PerPicbedSetting
                     :map-field="compressForm.reSizeHeightMap"
-                    :default-value="500"
+                    :default-value="defaultCompressSetting.reSizeHeight"
                     field-name="reSizeHeight"
-                    :form-object="compressForm"
+                    :global-value="compressForm.reSizeHeight"
                     input-type="number"
                     :number-min="0"
                     :number-max="10000"
                     @map-change="
-                      (picbedType, value) => safeSetMapValue(compressForm, 'reSizeHeight', picbedType, value, 500)
+                      (picbedType, value) =>
+                        safeSetMapValue(
+                          compressForm,
+                          'reSizeHeight',
+                          picbedType,
+                          value,
+                          defaultCompressSetting.reSizeHeight,
+                        )
                     "
                   />
                 </div>
@@ -673,13 +805,19 @@
 
                 <PerPicbedSetting
                   :map-field="compressForm.skipReSizeOfSmallImgMap"
-                  :default-value="false"
+                  :default-value="defaultCompressSetting.skipReSizeOfSmallImg"
                   field-name="skipReSizeOfSmallImg"
-                  :form-object="compressForm"
+                  :global-value="compressForm.skipReSizeOfSmallImg"
                   input-type="checkbox"
                   @map-change="
                     (picbedType, value) =>
-                      safeSetMapValue(compressForm, 'skipReSizeOfSmallImg', picbedType, value, false)
+                      safeSetMapValue(
+                        compressForm,
+                        'skipReSizeOfSmallImg',
+                        picbedType,
+                        value,
+                        defaultCompressSetting.skipReSizeOfSmallImg,
+                      )
                   "
                 />
               </div>
@@ -708,12 +846,19 @@
 
               <PerPicbedSetting
                 :map-field="compressForm.isReSizeByPercentMap"
-                :default-value="false"
+                :default-value="defaultCompressSetting.isReSizeByPercent"
                 field-name="isReSizeByPercent"
-                :form-object="compressForm"
+                :global-value="compressForm.isReSizeByPercent"
                 input-type="checkbox"
                 @map-change="
-                  (picbedType, value) => safeSetMapValue(compressForm, 'isReSizeByPercent', picbedType, value, false)
+                  (picbedType, value) =>
+                    safeSetMapValue(
+                      compressForm,
+                      'isReSizeByPercent',
+                      picbedType,
+                      value,
+                      defaultCompressSetting.isReSizeByPercent,
+                    )
                 "
               />
             </div>
@@ -725,16 +870,23 @@
 
               <PerPicbedSetting
                 :map-field="compressForm.reSizePercentMap"
-                :default-value="50"
+                :default-value="defaultCompressSetting.reSizePercent"
                 field-name="reSizePercent"
-                :form-object="compressForm"
+                :global-value="compressForm.reSizePercent"
                 input-type="range"
                 :range-min="1"
                 :range-max="500"
                 :range-step="1"
                 range-suffix="%"
                 @map-change="
-                  (picbedType, value) => safeSetMapValue(compressForm, 'reSizePercent', picbedType, value, 50)
+                  (picbedType, value) =>
+                    safeSetMapValue(
+                      compressForm,
+                      'reSizePercent',
+                      picbedType,
+                      value,
+                      defaultCompressSetting.reSizePercent,
+                    )
                 "
               />
             </div>
@@ -758,7 +910,13 @@ import {
   Settings,
   Sliders,
 } from 'lucide-vue-next'
-import type { IBuildInCompressOptions, IBuildInWaterMarkOptions } from 'piclist'
+import type {
+  availableConvertFormat,
+  availableWatermarkPosition,
+  IBuildInCompressOptions,
+  IBuildInSkipProcessOptions,
+  IBuildInWaterMarkOptions,
+} from 'piclist'
 import {
   computed,
   nextTick,
@@ -866,62 +1024,70 @@ const availableFormat = [
   'webp',
 ]
 
-const waterMarkForm = reactive<IBuildInWaterMarkOptions>({
+const defaultWaterMarkSetting = {
   isAddWatermark: false,
-  isAddWatermarkMap: {},
-  watermarkType: 'text',
-  watermarkTypeMap: {},
+  watermarkType: 'text' as 'text' | 'image',
   isFullScreenWatermark: false,
-  isFullScreenWatermarkMap: {},
   watermarkDegree: 0,
-  watermarkDegreeMap: {},
   watermarkText: '',
-  watermarkTextMap: {},
   watermarkFontPath: '',
-  watermarkFontPathMap: {},
   watermarkScaleRatio: 0.15,
-  watermarkScaleRatioMap: {},
   watermarkColor: '#CCCCCC73',
-  watermarkColorMap: {},
   watermarkImagePath: '',
-  watermarkImagePathMap: {},
-  watermarkPosition: 'southeast',
-  watermarkPositionMap: {},
+  watermarkPosition: 'southeast' as availableWatermarkPosition,
   watermarkImageOpacity: 255,
+}
+
+const waterMarkForm = reactive<IBuildInWaterMarkOptions>({
+  isAddWatermarkMap: {},
+  watermarkTypeMap: {},
+  isFullScreenWatermarkMap: {},
+  watermarkDegreeMap: {},
+  watermarkTextMap: {},
+  watermarkFontPathMap: {},
+  watermarkScaleRatioMap: {},
+  watermarkColorMap: {},
+  watermarkImagePathMap: {},
+  watermarkPositionMap: {},
   watermarkImageOpacityMap: {},
+  ...defaultWaterMarkSetting,
 })
 
-const compressForm = reactive<IBuildInCompressOptions>({
+const defaultCompressSetting = {
   quality: 100,
-  qualityMap: {},
   isConvert: false,
-  isConvertMap: {},
-  convertFormat: 'jpg',
-  convertFormatMap: {},
+  convertFormat: 'jpg' as availableConvertFormat,
   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,
-  isFlipMap: {},
   isFlop: false,
-  isFlopMap: {},
   formatConvertObj: {},
+}
+
+const compressForm = reactive<IBuildInCompressOptions>({
+  qualityMap: {},
+  isConvertMap: {},
+  convertFormatMap: {},
+  isReSizeMap: {},
+  reSizeWidthMap: {},
+  reSizeHeightMap: {},
+  skipReSizeOfSmallImgMap: {},
+  isReSizeByPercentMap: {},
+  reSizePercentMap: {},
+  isRotateMap: {},
+  rotateDegreeMap: {},
+  isRemoveExifMap: {},
+  isFlipMap: {},
+  isFlopMap: {},
   formatConvertObjMap: {},
+  ...defaultCompressSetting,
 })
 const formatConvertObj = ref('{}')
 
@@ -929,17 +1095,6 @@ 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)[]
@@ -996,9 +1151,9 @@ function debouncedSave() {
 }
 
 async function initData() {
-  const compress = await getConfig<any>(configPaths.buildIn.compress)
-  const watermark = await getConfig<any>(configPaths.buildIn.watermark)
-  const skipProcess = await getConfig<any>(configPaths.buildIn.skipProcess)
+  const compress = await getConfig<IBuildInCompressOptions>(configPaths.buildIn.compress)
+  const watermark = await getConfig<IBuildInWaterMarkOptions>(configPaths.buildIn.watermark)
+  const skipProcess = await getConfig<IBuildInSkipProcessOptions>(configPaths.buildIn.skipProcess)
   if (compress) {
     compressFormKeys.forEach(key => {
       compressForm[key] = compress[key] ?? compressForm[key]
@@ -1026,13 +1181,6 @@ async function initData() {
   }
 }
 
-// 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]) {

src/renderer/components/PerPicbedSetting.vue

@@ -126,11 +126,27 @@ interface RadioOption {
   label: string
 }
 
+const {
+  mapField,
+  defaultValue,
+  globalValue,
+  inputType,
+  rangeMin = 0,
+  rangeMax = 100,
+  rangeStep = 1,
+  rangeSuffix = '',
+  numberMin = 0,
+  numberMax = 1000,
+  textPlaceholder = '',
+  selectOptions = [],
+  radioOptions = [],
+} = defineProps<Props>()
+
 interface Props {
   mapField: Record<string, any> | undefined
   defaultValue: any
   fieldName: string
-  formObject: Record<string, any>
+  globalValue: any
   inputType: 'checkbox' | 'range' | 'number' | 'text' | 'color' | 'select' | 'radio'
   rangeMin?: number
   rangeMax?: number
@@ -143,18 +159,6 @@ interface Props {
   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]
 }>()
@@ -170,7 +174,7 @@ const availablePicbeds = computed(() => {
 
 function getMapValue(mapObj: Record<string, any> | undefined, picbedType: string, defaultValue: any) {
   if (!mapObj) return defaultValue
-  return mapObj[picbedType] !== undefined ? mapObj[picbedType] : defaultValue
+  return mapObj[picbedType] !== undefined ? mapObj[picbedType] : globalValue !== undefined ? globalValue : defaultValue
 }
 
 function handleMapChange(picbedType: string, value: any) {
@@ -178,443 +182,4 @@ function handleMapChange(picbedType: string, value: any) {
 }
 </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;
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
-  padding: 0.75rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  text-decoration: none;
-  color: var(--color-text-primary);
-  background: var(--color-background-primary);
-  transition: all 0.2s ease;
-  gap: 0.5rem;
-  cursor: pointer;
-  line-height: 1;
-}
-
-.btn:hover {
-  border-color: var(--color-blue-common);
-  background: var(--color-background-secondary);
-}
-
-.btn-secondary {
-  border-color: var(--color-border);
-  color: var(--color-text-secondary);
-  background: var(--color-background-primary);
-}
-
-.btn-secondary:hover {
-  border-color: var(--color-border-secondary);
-  color: var(--color-text-primary);
-  background: var(--color-background-secondary);
-}
-
-.btn-small {
-  padding: 0.375rem 0.75rem;
-  font-size: 0.875rem;
-  gap: 0.375rem;
-}
-
-/* Settings panel */
-.map-settings-panel {
-  margin-top: 1rem;
-  border: 1px solid var(--color-border);
-  border-radius: 8px;
-  padding: 1rem;
-  background: var(--color-background-secondary);
-  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
-}
-
-.map-settings-panel h4 {
-  margin: 0 0 1rem;
-  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;
-  justify-content: space-between;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
-  padding: 0.75rem;
-  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 rgb(0 0 0 / 10%);
-}
-
-.picbed-name {
-  margin: 0;
-  min-width: 0;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-  flex: 1;
-}
-
-/* Switch component */
-.switch-label {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  user-select: none;
-}
-
-.switch-label.small {
-  margin: 0;
-  padding: 0;
-}
-
-.switch-input {
-  display: none;
-}
-
-.switch-slider {
-  position: relative;
-  border-radius: 12px;
-  width: 44px;
-  height: 24px;
-  background: var(--color-border-darker);
-  transition: all 0.3s ease;
-  flex-shrink: 0;
-}
-
-.switch-slider::before {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  border-radius: 50%;
-  width: 20px;
-  height: 20px;
-  background: #ffffff;
-  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
-  transition: all 0.3s ease;
-  content: '';
-}
-
-.switch-input:checked + .switch-slider {
-  background: var(--color-blue-common);
-}
-
-.switch-input:checked + .switch-slider::before {
-  transform: translateX(20px);
-}
-
-/* Form inputs */
-.form-input,
-.form-range,
-.form-color {
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
-  color: var(--color-text-primary);
-  background: var(--color-background-primary);
-  outline: none;
-  transition: all 0.2s ease;
-}
-
-.form-input:focus,
-.form-color:focus {
-  border-color: var(--color-blue-common);
-  box-shadow: 0 0 0 2px rgb(64 158 255 / 20%);
-}
-
-.form-input.small {
-  padding: 0.375rem 0.5rem;
-  width: 100px;
-  font-size: 0.875rem;
-}
-
-.form-range.small {
-  border-radius: 3px;
-  width: 100px;
-  height: 6px;
-  background: var(--color-border-darker);
-  appearance: none;
-}
-
-.form-range.small::-webkit-slider-thumb {
-  border: 2px solid #ffffff;
-  border-radius: 50%;
-  width: 18px;
-  height: 18px;
-  background: var(--color-blue-common);
-  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
-  appearance: none;
-  cursor: pointer;
-}
-
-.form-range.small::-moz-range-thumb {
-  border: 2px solid #ffffff;
-  border-radius: 50%;
-  width: 18px;
-  height: 18px;
-  background: var(--color-blue-common);
-  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
-  cursor: pointer;
-}
-
-.form-color.small {
-  padding: 0;
-  width: 40px;
-  height: 32px;
-  cursor: pointer;
-}
-
-/* Range input container */
-.range-input-container {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.range-value {
-  border-radius: 4px;
-  padding: 0.125rem 0.25rem;
-  min-width: 50px;
-  font-size: 0.875rem;
-  font-weight: 500;
-  text-align: center;
-  color: var(--color-text-secondary);
-  color: white;
-  background: var(--color-blue-common);
-}
-
-/* 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;
-  border: 1px solid var(--color-border);
-  border-radius: 4px;
-  padding: 0.25rem 0.5rem;
-  font-size: 0.75rem;
-  background: var(--color-background-primary);
-  transition: all 0.2s ease;
-  gap: 0.25rem;
-  cursor: pointer;
-}
-
-.radio-option.small:hover {
-  border-color: var(--color-blue-common);
-  background: rgb(64 158 255 / 10%);
-}
-
-.radio-input {
-  display: none;
-}
-
-.radio-indicator {
-  position: relative;
-  border: 2px solid var(--color-border);
-  border-radius: 50%;
-  width: 14px;
-  height: 14px;
-  background: var(--color-background-primary);
-  transition: all 0.2s ease;
-  flex-shrink: 0;
-}
-
-.radio-input:checked + .radio-indicator {
-  border-color: var(--color-blue-common);
-}
-
-.radio-input:checked + .radio-indicator::after {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  border-radius: 50%;
-  width: 6px;
-  height: 6px;
-  background: var(--color-blue-common);
-  content: '';
-  transform: translate(-50%, -50%);
-}
-
-.radio-label {
-  font-size: inherit;
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-/* 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 (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 {
-  border-color: var(--color-border);
-  background: var(--color-background-tertiary);
-  box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
-}
-
-:root.dark .picbed-setting-item,
-:root.auto.dark .picbed-setting-item {
-  border-color: var(--color-border);
-  background: var(--color-surface);
-}
-
-:root.dark .picbed-setting-item:hover,
-:root.auto.dark .picbed-setting-item:hover {
-  border-color: var(--color-primary);
-  box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
-}
-
-:root.dark .form-input,
-:root.dark .form-color,
-:root.auto.dark .form-input,
-:root.auto.dark .form-color {
-  border-color: var(--color-border);
-  color: var(--color-text-primary);
-  background: var(--color-surface);
-}
-
-: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 rgb(64 158 255 / 30%);
-}
-
-:root.dark .btn-secondary,
-:root.auto.dark .btn-secondary {
-  border-color: var(--color-border);
-  color: var(--color-text-secondary);
-  background: var(--color-surface);
-}
-
-:root.dark .btn-secondary:hover,
-:root.auto.dark .btn-secondary:hover {
-  border-color: var(--color-border-hover);
-  color: var(--color-text-primary);
-  background: var(--color-background-tertiary);
-}
-
-:root.dark .switch-slider::before,
-:root.auto.dark .switch-slider::before {
-  background: var(--color-surface);
-}
-
-:root.dark .radio-option.small,
-:root.auto.dark .radio-option.small {
-  border-color: var(--color-border);
-  background: var(--color-surface);
-}
-
-:root.dark .radio-option.small:hover,
-:root.auto.dark .radio-option.small:hover {
-  border-color: var(--color-primary);
-  background: rgb(64 158 255 / 20%);
-}
-
-:root.dark .radio-indicator,
-:root.auto.dark .radio-indicator {
-  border-color: var(--color-border);
-  background: var(--color-surface);
-}
-
-: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>
+<style scoped src="./css/PerPicbedSetting.css"></style>

src/renderer/components/css/PerPicbedSetting.css

@@ -0,0 +1,438 @@
+/* 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;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+  color: var(--color-text-primary);
+  background: var(--color-background-primary);
+  transition: all 0.2s ease;
+  gap: 0.5rem;
+  cursor: pointer;
+  line-height: 1;
+}
+
+.btn:hover {
+  border-color: var(--color-blue-common);
+  background: var(--color-background-secondary);
+}
+
+.btn-secondary {
+  border-color: var(--color-border);
+  color: var(--color-text-secondary);
+  background: var(--color-background-primary);
+}
+
+.btn-secondary:hover {
+  border-color: var(--color-border-secondary);
+  color: var(--color-text-primary);
+  background: var(--color-background-secondary);
+}
+
+.btn-small {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  gap: 0.375rem;
+}
+
+/* Settings panel */
+.map-settings-panel {
+  margin-top: 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  padding: 1rem;
+  background: var(--color-background-secondary);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
+}
+
+.map-settings-panel h4 {
+  margin: 0 0 1rem;
+  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;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  padding: 0.75rem;
+  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 rgb(0 0 0 / 10%);
+}
+
+.picbed-name {
+  margin: 0;
+  min-width: 0;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  flex: 1;
+}
+
+/* Switch component */
+.switch-label {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+}
+
+.switch-label.small {
+  margin: 0;
+  padding: 0;
+}
+
+.switch-input {
+  display: none;
+}
+
+.switch-slider {
+  position: relative;
+  border-radius: 12px;
+  width: 44px;
+  height: 24px;
+  background: var(--color-border-darker);
+  transition: all 0.3s ease;
+  flex-shrink: 0;
+}
+
+.switch-slider::before {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  background: #ffffff;
+  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
+  transition: all 0.3s ease;
+  content: '';
+}
+
+.switch-input:checked + .switch-slider {
+  background: var(--color-blue-common);
+}
+
+.switch-input:checked + .switch-slider::before {
+  transform: translateX(20px);
+}
+
+/* Form inputs */
+.form-input,
+.form-range,
+.form-color {
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  color: var(--color-text-primary);
+  background: var(--color-background-primary);
+  outline: none;
+  transition: all 0.2s ease;
+}
+
+.form-input:focus,
+.form-color:focus {
+  border-color: var(--color-blue-common);
+  box-shadow: 0 0 0 2px rgb(64 158 255 / 20%);
+}
+
+.form-input.small {
+  padding: 0.375rem 0.5rem;
+  width: 100px;
+  font-size: 0.875rem;
+}
+
+.form-range.small {
+  border-radius: 3px;
+  width: 100px;
+  height: 6px;
+  background: var(--color-border-darker);
+  appearance: none;
+}
+
+.form-range.small::-webkit-slider-thumb {
+  border: 2px solid #ffffff;
+  border-radius: 50%;
+  width: 18px;
+  height: 18px;
+  background: var(--color-blue-common);
+  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
+  appearance: none;
+  cursor: pointer;
+}
+
+.form-range.small::-moz-range-thumb {
+  border: 2px solid #ffffff;
+  border-radius: 50%;
+  width: 18px;
+  height: 18px;
+  background: var(--color-blue-common);
+  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
+  cursor: pointer;
+}
+
+.form-color.small {
+  padding: 0;
+  width: 40px;
+  height: 32px;
+  cursor: pointer;
+}
+
+/* Range input container */
+.range-input-container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.range-value {
+  border-radius: 4px;
+  padding: 0.125rem 0.25rem;
+  min-width: 50px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-align: center;
+  color: var(--color-text-secondary);
+  color: white;
+  background: var(--color-blue-common);
+}
+
+/* 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;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  background: var(--color-background-primary);
+  transition: all 0.2s ease;
+  gap: 0.25rem;
+  cursor: pointer;
+}
+
+.radio-option.small:hover {
+  border-color: var(--color-blue-common);
+  background: rgb(64 158 255 / 10%);
+}
+
+.radio-input {
+  display: none;
+}
+
+.radio-indicator {
+  position: relative;
+  border: 2px solid var(--color-border);
+  border-radius: 50%;
+  width: 14px;
+  height: 14px;
+  background: var(--color-background-primary);
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+}
+
+.radio-input:checked + .radio-indicator {
+  border-color: var(--color-blue-common);
+}
+
+.radio-input:checked + .radio-indicator::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  width: 6px;
+  height: 6px;
+  background: var(--color-blue-common);
+  content: '';
+  transform: translate(-50%, -50%);
+}
+
+.radio-label {
+  font-size: inherit;
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+/* 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 (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 {
+  border-color: var(--color-border);
+  background: var(--color-background-tertiary);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
+}
+
+:root.dark .picbed-setting-item,
+:root.auto.dark .picbed-setting-item {
+  border-color: var(--color-border);
+  background: var(--color-surface);
+}
+
+:root.dark .picbed-setting-item:hover,
+:root.auto.dark .picbed-setting-item:hover {
+  border-color: var(--color-primary);
+  box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
+}
+
+:root.dark .form-input,
+:root.dark .form-color,
+:root.auto.dark .form-input,
+:root.auto.dark .form-color {
+  border-color: var(--color-border);
+  color: var(--color-text-primary);
+  background: var(--color-surface);
+}
+
+: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 rgb(64 158 255 / 30%);
+}
+
+:root.dark .btn-secondary,
+:root.auto.dark .btn-secondary {
+  border-color: var(--color-border);
+  color: var(--color-text-secondary);
+  background: var(--color-surface);
+}
+
+:root.dark .btn-secondary:hover,
+:root.auto.dark .btn-secondary:hover {
+  border-color: var(--color-border-hover);
+  color: var(--color-text-primary);
+  background: var(--color-background-tertiary);
+}
+
+:root.dark .switch-slider::before,
+:root.auto.dark .switch-slider::before {
+  background: var(--color-surface);
+}
+
+:root.dark .radio-option.small,
+:root.auto.dark .radio-option.small {
+  border-color: var(--color-border);
+  background: var(--color-surface);
+}
+
+:root.dark .radio-option.small:hover,
+:root.auto.dark .radio-option.small:hover {
+  border-color: var(--color-primary);
+  background: rgb(64 158 255 / 20%);
+}
+
+:root.dark .radio-indicator,
+:root.auto.dark .radio-indicator {
+  border-color: var(--color-border);
+  background: var(--color-surface);
+}
+
+: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");
+}