feat(setting): 添加800图自定义边距和翻转功能- 新增800图自定义边距设置项，支持0-500数值输入

- 新增800图是否翻转选择项，支持是/否选项- 实现边距输入验证和范围限制逻辑
- 添加字段默认值处理和表单提交验证
- 调整表单项布局样式以适应新增内容- 更新表单容器高度和标签宽度样式

frontend/src/views/Setting/index.vue

@@ -72,6 +72,28 @@
                     </el-select>
                     </div>
                 </div>
+                <div class="form-item">
+                    <label>800图自定义边距：</label>
+                    <div class="select-wrapper">
+                      <el-input
+                          type="number"
+                          v-model.number="formData.basic_configs.padding_800image"
+                          :min="0"
+                          :max="500"
+                          placeholder="请输入0-500的整数"
+                          @keypress="handlePaddingKeyPress"
+                          @input="handlePaddingInput"
+                      />
+                    </div>
+                </div>
+                <div class="form-item">
+                    <label>800图是否翻转：</label>
+                    <div class="select-wrapper">
+                    <el-select v-model.number="formData.basic_configs.is_flip_800image" placeholder="请选择">
+                      <el-option v-for="item in isFlip800ImageList" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                    </el-select>
+                    </div>
+                </div>
 
                <DebugPanel ref="debugPanel" />
         </div>
@@ -213,7 +235,9 @@ const formData = reactive({
   basic_configs:{
     "main_image_size": [],//主图尺寸
     "image_out_format": "",//图片输出格式
-    "image_sharpening": "" //图片锐化
+    "image_sharpening": "", //图片锐化
+    "padding_800image": 100, //800图自定义边距
+    "is_flip_800image": 0 //800图是否翻转
   },
   //拍照配置
   take_photo_configs:{
@@ -276,6 +300,10 @@ const imageSharpeningList = ref([
   { label: '2', value: '2' },
   { label: '3', value: '3' },
 ]);
+const isFlip800ImageList = ref([
+  { label: '是', value: 1 },
+  { label: '否', value: 0 },
+]);
 const repeatWarningList = ref([
   { label: '关闭', value: false },
   { label: '开启', value: true },
@@ -390,6 +418,14 @@ const getConfig =  async (typeValue)=>{
       formData.basic_configs.main_image_size = receivedSizes;
     }
     console.log(formData.basic_configs.main_image_size);
+    
+    // 确保新字段有默认值（如果服务器没有返回）
+    if (formData.basic_configs.padding_800image === undefined || formData.basic_configs.padding_800image === null) {
+      formData.basic_configs.padding_800image = 100;
+    }
+    if (formData.basic_configs.is_flip_800image === undefined || formData.basic_configs.is_flip_800image === null) {
+      formData.basic_configs.is_flip_800image = 0;
+    }
   }
 
 }
@@ -427,6 +463,36 @@ const handleInput = (value) => {
   }
 };
 
+// 处理800图边距输入
+const handlePaddingKeyPress = (event) => {
+  const char = event.key;
+  // 只允许输入数字字符
+  if (!/^\d+$/.test(char)) {
+    event.preventDefault(); // 阻止非数字输入
+  }
+};
+
+const handlePaddingInput = () => {
+  let value = formData.basic_configs.padding_800image;
+  // 处理空值或无效值
+  if (value === null || value === undefined || value === '' || isNaN(value)) {
+    formData.basic_configs.padding_800image = 0;
+    return;
+  }
+  // 转换为数字并确保是整数
+  value = Number(value);
+  value = Math.floor(value);
+  
+  // 限制范围
+  if (value > 500) {
+    formData.basic_configs.padding_800image = 500;
+  } else if (value < 0) {
+    formData.basic_configs.padding_800image = 0;
+  } else {
+    formData.basic_configs.padding_800image = value;
+  }
+};
+
 // 添加更新camera_configs的方法
 const updateCameraConfigs = (configs) => {
   formData.camera_configs = configs;
@@ -487,6 +553,24 @@ const saveSetting = async (index) => {
       submitData.basic_configs.main_image_size = submitSizes
     }
 
+    // 验证800图自定义边距
+    const paddingValue = formData.basic_configs.padding_800image;
+    if (paddingValue === undefined || paddingValue === null || isNaN(paddingValue) || 
+        paddingValue < 0 || paddingValue > 500) {
+      ElMessage.error('800图自定义边距必须在0-500之间');
+      return false;
+    }
+    // 确保是整数
+    submitData.basic_configs.padding_800image = Math.floor(paddingValue);
+
+    // 验证800图是否翻转
+    const flipValue = formData.basic_configs.is_flip_800image;
+    if (flipValue === undefined || flipValue === null || (flipValue !== 0 && flipValue !== 1)) {
+      ElMessage.error('请选择800图是否翻转');
+      return false;
+    }
+    submitData.basic_configs.is_flip_800image = flipValue;
+
   }
   const params = JSON.parse(JSON.stringify({
     configs:submitData
@@ -538,10 +622,12 @@ const saveSetting = async (index) => {
   }
   .form-item label {
     display: block;
-    min-width: 98px;
+    width: 140px;
+    flex-shrink: 0;
     text-align: right;
     font-size: 14px;
     color: #1A1A1A;
+    padding-right: 12px;
   }
 
   .select-wrapper {
@@ -605,9 +691,10 @@ body {
   border-radius: 12px;
   padding: 30px;
   padding-top: 10px;
+  padding-bottom: 40px;
   width: 800px;
   margin: 0 auto;
-  height: 306px;
+  min-height: 400px;
 }
 .input-group {
   display: flex;