Przeglądaj źródła

feat(setting): 添加阴影处理配置功能

- 新增阴影处理模式选择(默认模式和自定义模式)
- 添加透明度配置项,范围0.5-1
- 添加亮度范围配置项,范围200-255
- 实现自定义模式下的动态表单显示
- 添加阴影处理配置的数据验证逻辑
- 确保阴影处理配置有默认值和字段初始化
panqiuyao 1 dzień temu
rodzic
commit
2186ee688b
1 zmienionych plików z 94 dodań i 2 usunięć
  1. 94 2
      frontend/src/views/Setting/index.vue

+ 94 - 2
frontend/src/views/Setting/index.vue

@@ -73,13 +73,54 @@
                         :max="5"
                         style="width: 200px"
                         :step="0.1"
-                        :precision="1"
                         controls-position="right"
                         placeholder="请输入1-5之间的值"
                       />
                     </div>
                   <div class="tips fs-12 c-999 mar-left-10">数值1-5,值为1则代表不处理</div>
                 </div>
+
+                <div class="form-item">
+                    <label>阴影处理模式:</label>
+                    <div class="select-wrapper">
+                      <el-select v-model.number="formData.basic_configs.image_mask_config.mode" placeholder="请选择">
+                        <el-option label="默认模式" :value="0"></el-option>
+                        <el-option label="自定义模式" :value="1"></el-option>
+                      </el-select>
+                    </div>
+                </div>
+
+                <template v-if="formData.basic_configs.image_mask_config.mode === 1">
+                  <div class="form-item">
+                      <label>透明度:</label>
+                      <div class="select-wrapper">
+                        <el-input-number
+                          v-model="formData.basic_configs.image_mask_config.opacity"
+                          :min="0.5"
+                          :max="1"
+                          style="width: 200px"
+                          :step="0.01"
+                          controls-position="right"
+                          placeholder="请输入0.5-1之间的值"
+                        />
+                      </div>
+                  </div>
+
+                  <div class="form-item">
+                      <label>亮度范围:</label>
+                      <div class="select-wrapper">
+                        <el-input-number
+                          v-model="formData.basic_configs.image_mask_config.grenerate_main_pic_brightness"
+                          :min="200"
+                          :max="255"
+                          style="width: 200px"
+                          :step="1"
+                          controls-position="right"
+                          placeholder="请输入200-255之间的值"
+                        />
+                      </div>
+                  </div>
+                </template>
                 <div class="form-item">
                     <label>800图自定义边距:</label>
                     <div class="select-wrapper">
@@ -253,7 +294,12 @@ const formData = reactive({
     "image_sharpening": 1, //图片锐化(默认值改为1)
     "padding_800image": 100, //800图自定义边距
     "is_flip_800image": 1, //800图是否翻转
-    "color_800image": '#ffffff' //800图颜色配置
+    "color_800image": '#ffffff', //800图颜色配置
+    "image_mask_config": { //阴影处理配置
+      "mode": 0, //阴影处理模式:0默认模式,1自定义模式
+      "opacity": 0.5, //透明度,默认0.5,范围0.5-1
+      "grenerate_main_pic_brightness": 254 //亮度范围,默认254,范围200-255
+    }
   },
   //拍照配置
   take_photo_configs:{
@@ -446,6 +492,26 @@ const getConfig =  async (typeValue)=>{
       formData.basic_configs.image_sharpening = 1;
     }
 
+    // 确保阴影处理配置有默认值
+    if (!formData.basic_configs.image_mask_config) {
+      formData.basic_configs.image_mask_config = {
+        mode: 0,
+        opacity: 0.5,
+        grenerate_main_pic_brightness: 254
+      };
+    } else {
+      // 确保每个字段都有默认值
+      if (formData.basic_configs.image_mask_config.mode === undefined || formData.basic_configs.image_mask_config.mode === null) {
+        formData.basic_configs.image_mask_config.mode = 0;
+      }
+      if (formData.basic_configs.image_mask_config.opacity === undefined || formData.basic_configs.image_mask_config.opacity === null) {
+        formData.basic_configs.image_mask_config.opacity = 0.5;
+      }
+      if (formData.basic_configs.image_mask_config.grenerate_main_pic_brightness === undefined || formData.basic_configs.image_mask_config.grenerate_main_pic_brightness === null) {
+        formData.basic_configs.image_mask_config.grenerate_main_pic_brightness = 254;
+      }
+    }
+
     // 处理图片锐化:如果值为0或小于1,自动改为1
     const sharpeningValue = parseFloat(formData.basic_configs.image_sharpening);
     if (isNaN(sharpeningValue) || sharpeningValue < 1) {
@@ -596,6 +662,32 @@ const saveSetting = async (index) => {
     }
     submitData.basic_configs.image_sharpening = sharpeningValue;
 
+    // 验证阴影处理配置
+    const maskConfig = formData.basic_configs.image_mask_config;
+    if (!maskConfig || typeof maskConfig.mode !== 'number' || (maskConfig.mode !== 0 && maskConfig.mode !== 1)) {
+      ElMessage.error('请选择有效的阴影处理模式');
+      return false;
+    }
+
+    // 如果是自定义模式,验证透明度和亮度
+    if (maskConfig.mode === 1) {
+      const opacity = parseFloat(maskConfig.opacity);
+      const brightness = parseInt(maskConfig.grenerate_main_pic_brightness);
+
+      if (isNaN(opacity) || opacity < 0.5 || opacity > 1) {
+        ElMessage.error('透明度必须在0.5-1之间');
+        return false;
+      }
+
+      if (isNaN(brightness) || brightness < 200 || brightness > 255) {
+        ElMessage.error('亮度范围必须在200-255之间');
+        return false;
+      }
+
+      submitData.basic_configs.image_mask_config.opacity = opacity;
+      submitData.basic_configs.image_mask_config.grenerate_main_pic_brightness = brightness;
+    }
+
     // 验证800图是否翻转
     const flipValue = formData.basic_configs.is_flip_800image;
     if (flipValue === undefined || flipValue === null || (flipValue !== 0 && flipValue !== 1)) {