feat(Setting): 增加主图尺寸自定义功能

- 在主图尺寸选择中添加自定义选项
- 实现自定义尺寸的输入和验证
- 更新保存逻辑以支持自定义尺寸- 优化数据加载和处理，支持已保存的自定义尺寸值

frontend/src/views/Setting/index.vue

@@ -25,15 +25,30 @@
       <!--基础配置-->
           <div class="selectBox" v-if="activeIndex === 0">
                 <div class="form-item">
-                    <label>主图尺寸：</label>
-                    <div class="select-wrapper">
+                  <label>主图尺寸：</label>
+                  <div class="select-wrapper">
                     <el-select multiple
                                collapse-tags
                                multiple-limit="3"
                                v-model="formData.basic_configs.main_image_size" placeholder="请选择">
                       <el-option v-for="item in mainImageSizeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                     </el-select>
-                    </div>
+                  </div>
+                </div>
+                 <!-- 新增自定义输入框 -->
+                <div class="form-item" v-if="formData.basic_configs.main_image_size.includes('custom')">
+                  <label>自定义尺寸：</label>
+                  <div class="select-wrapper">
+                    <el-input
+                        type="text"
+                        v-model.number="customInput"
+                        maxlength="4"
+                        placeholder="请输入1-2000的尺寸值"
+                        class="w-full px-3 py-2 border rounded-md"
+                        @keypress="handleKeyPress"
+                        @input="handleInput"
+                    />
+                  </div>
                 </div>
                 <div class="form-item">
                     <label>图片输出格式：</label>
@@ -198,7 +213,11 @@ const mainImageSizeList = ref([
   { label: '1200*1200', value: 1200 },
   { label: '1400*1400', value: 1400 },
   { label: '1600*1600', value: 1600 },
+  { label: '自定义', value: 'custom' } // 新增自定义选项
 ]);
+
+const customInput = ref(null); // 新增自定义输入值
+
 const imageFormatList = ref([
   { label: 'jpg', value: 'jpg' },
   { label: 'png', value: 'png' },
@@ -296,7 +315,22 @@ watch(() => route.query.type, async (newType,oldType) => {
         });
         clientStore.ipc.on(icpList.setting.getSysConfig, (event, result) => {
           if(result.code == 0 && result.data){
+
             formData[indexKey[typeValue]] = result.data
+            const presetSizes = mainImageSizeList.value.map(item => item.value);
+            const receivedSizes = result.data.main_image_size ? [...result.data.main_image_size] : [];
+
+            // 分离自定义值
+            const customValues = receivedSizes.filter(v => !presetSizes.includes(v));
+            if (customValues.length > 0) {
+              customInput.value = customValues[0]; // 保留第一个自定义值
+              // 更新选中状态
+              formData.basic_configs.main_image_size = receivedSizes
+                .filter(v => presetSizes.includes(v))
+                .concat('custom');
+            } else {
+              formData.basic_configs.main_image_size = receivedSizes;
+            }
           }
           console.log('icpList.setting.getSysConfig')
           console.log(result)
@@ -333,37 +367,76 @@ onMounted(() => {
 
 });
 
+
+const handleKeyPress = (event) => {
+  const char = event.key;
+  // 只允许输入数字字符
+  if (!/^\d+$/.test(char)) {
+    event.preventDefault(); // 阻止非数字输入
+  }
+};
+const handleInput = (value) => {
+  if (value > 2000) {
+    customInput.value = 2000;
+  } else if (value < 1) {
+    customInput.value = 1;
+  }
+};
+
+
 /**
  * 保存当前表单配置。
  */
 const saveSetting = async (index) => {
 
-  if(index === 0){
-    if(formData.basic_configs.main_image_size.length === 0){
-
+  // 构建临时提交数据
+  const submitData = {
+    ...formData[indexKey[index]]
+  };
+  if(index === 0) {
+    if (formData.basic_configs.main_image_size.length === 0) {
       ElMessage.error('请选择主图尺寸！');
       return;
     }
-  }
-  await new Promise((resolve, reject) => {
-
-    clientStore.ipc.removeAllListeners(icpList.setting.updateSysConfigs);
-    clientStore.ipc.send(icpList.setting.updateSysConfigs,{
-      key: indexKey[index],
-      value:JSON.stringify({
-        ...formData[indexKey[index]]
-      })
-    });
-    clientStore.ipc.on(icpList.setting.updateSysConfigs, async (event, result) => {
-      clientStore.ipc.removeAllListeners(icpList.setting.updateSysConfigs);
-      if(result.code === 0 && result.msg){
-        resolve(result)
+
+    // 处理自定义尺寸逻辑
+    const selectedSizes = [...formData.basic_configs.main_image_size]; // 创建副本避免修改原始数据
+
+    if (selectedSizes.includes('custom')) {
+      if (!customInput.value || isNaN(customInput.value) ||
+          customInput.value < 1 || customInput.value > 2000) {
+        ElMessage.error('请输入1-2000之间的有效数值');
+        return;
       }
 
-    });
-  });
+      // 创建新数组用于提交
+      const submitSizes = selectedSizes
+          .filter(v => v !== 'custom')
+          .concat(parseInt(customInput.value));
+
+      submitData.main_image_size = submitSizes
+    }
+
+  }
+      console.log(submitData);
+      await new Promise((resolve, reject) => {
+        clientStore.ipc.removeAllListeners(icpList.setting.updateSysConfigs);
+        clientStore.ipc.send(icpList.setting.updateSysConfigs,{
+          key: indexKey[index],
+          value: JSON.stringify(submitData)
+        });
+
+
 
+        clientStore.ipc.on(icpList.setting.updateSysConfigs, async (event, result) => {
+          clientStore.ipc.removeAllListeners(icpList.setting.updateSysConfigs);
+          if(result.code === 0 && result.msg){
+            resolve(result)
 
+          }
+
+        });
+      });
 };