feat(frontend): 重构相机配置组件并优化设置页面逻辑

- 重构 CameraConfig 组件，增加 props 和 emits 支持
- 优化 Setting 页面逻辑，使用 API 获取和更新配置
- 新增 getAllUserConfigs 和 setAllUserConfigs API 接口
- 改进配置数据的处理和同步方式

frontend/src/apis/setting.ts

@@ -0,0 +1,19 @@
+import { GET,POST  } from "@/utils/http";
+
+//获取配置
+export async function getAllUserConfigs(data){
+    return GET('/api/ai_image/camera_machine/get_all_user_configs',data)
+
+}
+
+
+//获取配置
+export async function setAllUserConfigs(data){
+    return POST('/api/ai_image/camera_machine/update_all_user_configs',data)
+
+}
+
+
+
+
+

frontend/src/views/Setting/components/CameraConfig.vue

@@ -48,7 +48,7 @@
 </template>
 
 <script setup>
-import { reactive,onMounted,ref } from 'vue'
+import { reactive, onMounted, ref, watch } from 'vue'
 import { ElMessage } from 'element-plus'
 import client from "@/stores/modules/client";
 import icpList from '@/utils/ipc';
@@ -56,45 +56,60 @@ import socket from "@/stores/modules/socket.js";
 const clientStore = client();
 const socketStore = socket(); // WebSocket状态管理实例
 
+// 定义props
+const props = defineProps({
+  camera_configs: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+// 定义emits
+const emit = defineEmits(['update:camera_configs'])
+
 const iso_config = reactive({
   low: 100,
   high: 6000,
-  mode:"auto22"
+  mode: "auto22"
 })
 
-const iso_options = ref(['auto',100,200,400,800,1600,3200,6400,12800])
+const iso_options = ref(['auto', 100, 200, 400, 800, 1600, 3200, 6400, 12800])
 
-onMounted( () => {
-  // 读取已保存的相机配置
-  clientStore.ipc.removeAllListeners(icpList.setting.getSysConfig);
-  clientStore.ipc.send(icpList.setting.getSysConfig,{key: 'camera_configs'});
-  clientStore.ipc.on(icpList.setting.getSysConfig, (event, result) => {
-    if(result.code == 0 && result.data){
-      iso_config.low = result.data.iso_low ?? iso_config.low
-      iso_config.high = result.data.iso_high ?? iso_config.high
-    }
-    clientStore.ipc.removeAllListeners(icpList.setting.getSysConfig);
-  });
+// 监听iso_config变化并更新父组件
+watch(iso_config, (newVal) => {
+  emit('update:camera_configs', {
+    iso_config,
+  })
+}, { deep: true })
+
+onMounted(() => {
+  // 从props初始化数据
+  if (props.camera_configs.iso_config.low !== undefined) {
+    iso_config.low = props.camera_configs.iso_config.low
+  }
+  if (props.camera_configs.iso_config.high !== undefined) {
+    iso_config.high = props.camera_configs.iso_config.high
+  }
 
   // 读取设备当前可用的 ISO 档位
-  clientStore.ipc.removeAllListeners(icpList.socket.message+'_smart_shooter_get_camera_property');
+  clientStore.ipc.removeAllListeners(icpList.socket.message + '_smart_shooter_get_camera_property');
   socketStore.sendMessage({
     type: 'smart_shooter_get_camera_property'
   });
 
-  clientStore.ipc.on(icpList.socket.message+'_smart_shooter_get_camera_property', async (event, result) => {
-    if(result.code == 0 && result.data){
-      const ISO  =  result.data.filter(item => item.CameraPropertyType == 'ISO')
-      if(ISO.length > 0){
+  clientStore.ipc.on(icpList.socket.message + '_smart_shooter_get_camera_property', async (event, result) => {
+    if (result.code == 0 && result.data) {
+      const ISO = result.data.filter(item => item.CameraPropertyType == 'ISO')
+      if (ISO.length > 0) {
         iso_options.value = ISO[0].CameraPropertyRange
       }
     }
-    clientStore.ipc.removeAllListeners(icpList.socket.message+'_smart_shooter_get_camera_property');
+    clientStore.ipc.removeAllListeners(icpList.socket.message + '_smart_shooter_get_camera_property');
   })
 })
 
 // 暴露保存方法，给父组件调用
-const save = async () => {
+const save =  () => {
   // 必填校验（允许填写数字或 'auto'）
   const isEmpty = (v) => v === undefined || v === null || v === ''
   if (isEmpty(iso_config.low)) {
@@ -118,7 +133,8 @@ const save = async () => {
     return false
   }
 
-  return await new Promise((resolve, reject) => {
+  return  true;
+/*  return await new Promise((resolve, reject) => {
     clientStore.ipc.removeAllListeners(icpList.setting.updateSysConfigs);
     clientStore.ipc.send(icpList.setting.updateSysConfigs,{
       key: 'camera_configs',
@@ -136,7 +152,7 @@ const save = async () => {
         resolve(false)
       }
     });
-  });
+  });*/
 }
 
 defineExpose({ save })

frontend/src/views/Setting/index.vue

@@ -10,7 +10,7 @@
         <img src="@/assets/images/setting/icon1a.png" class="nav-icon" v-else/>
         <span>基础配置</span>
       </div>
-      <div class="nav-item" v-if="configInfoStore.appModel === 1" :class="{'active': activeIndex === 3}" @click="toggleTab(3)" v-log="{ describe: { action: '点击切换设置Tab', tab: '相机配置' } }">
+      <div class="nav-item" :class="{'active': activeIndex === 3}" @click="toggleTab(3)" v-log="{ describe: { action: '点击切换设置Tab', tab: '相机配置' } }">
         <img src="@/assets/images/setting/icon2.png" class="nav-icon" v-if="activeIndex !== 3"/>
         <img src="@/assets/images/setting/icon2a.png" class="nav-icon" v-else/>
         <span>相机配置</span>
@@ -20,7 +20,7 @@
         <img src="@/assets/images/setting/icon3a.png" class="nav-icon" v-else/>
         <span>其他设置</span>
       </div>
-      <div class="nav-item" v-if="configInfoStore.appModel === 1" :class="{'active': activeIndex === 4}"  @click="toggleTab(4)" v-log="{ describe: { action: '点击切换设置Tab', tab: '左右脚程序设置' } }">
+      <div class="nav-item"  :class="{'active': activeIndex === 4}"  @click="toggleTab(4)" v-log="{ describe: { action: '点击切换设置Tab', tab: '左右脚程序设置' } }">
         <img src="@/assets/images/setting/icon4.png" class="nav-icon" v-if="activeIndex !== 4"/>
         <img src="@/assets/images/setting/icon4a.png" class="nav-icon" v-else/>
         <span>左右脚程序设置</span>
@@ -78,7 +78,7 @@
       <!--基础配置-->
       <!--相机配置-->
       <template v-if="activeIndex === 3">
-      <CameraConfig ref="cameraConfigRef"/>
+      <CameraConfig ref="cameraConfigRef" :camera_configs="formData.camera_configs" @update:camera_configs="updateCameraConfigs"/>
 
       </template>
       <!--相机配置-->
@@ -148,6 +148,7 @@
 import { ref, reactive } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { onMounted, watch } from 'vue';
+import  { getAllUserConfigs,  setAllUserConfigs } from '@/apis/setting'
 import socket from "@/stores/modules/socket";
 import headerBar from '@/components/header-bar/index.vue';
 import client from "@/stores/modules/client";
@@ -190,6 +191,7 @@ function handleSettingClick() {
 
 
 
+
 // 路由和状态管理初始化
 const route = useRoute();
 const router = useRouter();
@@ -226,7 +228,7 @@ const formData = reactive({
     "device_speed": "",//设备运动速度
     "running_mode": "" //运行模式
   },
-  captureOneFolder: '', // Capture One文件夹路径
+/*  captureOneFolder: '', // Capture One文件夹路径
   mainImageSize: '', // 主图尺寸
   imageFormat: '', // 图片格式
   imageSharpening: '', // 图片锐化
@@ -243,7 +245,7 @@ const formData = reactive({
   left: '', // 左脚配置
   right: '', // 右脚配置
   up: '', // 上移配置
-  down: '', // 下移配置
+  down: '', // 下移配置*/
 });
 
 // 配置选项列表
@@ -340,48 +342,18 @@ const indexKey  ={
   2:"other_configs",
 }
 
+
 /**
  * 监听路由参数变化，更新activeIndex和activeTab。
  */
 watch(() => route.query.type, async (newType,oldType) => {
 
-  if(['0','1','2'].includes(oldType)){
- //   await  saveSetting(oldType)
-  }
+
+
   const typeValue = parseInt(newType) || 0;
   if([3,4].includes(typeValue)) return;
-  switch (typeValue) {
-      default:
-        clientStore.ipc.removeAllListeners(icpList.setting.getSysConfig);
-        clientStore.ipc.send(icpList.setting.getSysConfig,{
-          key: indexKey[typeValue]
-        });
-        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)
-          clientStore.ipc.removeAllListeners(icpList.setting.getSysConfig);
-        });
-        break;
-    }
-}, { immediate: true });
+});
+
 
 
 /**
@@ -396,12 +368,42 @@ watch(() => activeIndex.value, (newIndex) => {
   });
 });
 
+const getConfig =  async (typeValue)=>{
+
+  const resultPHP = await getAllUserConfigs();
+  if(resultPHP.code == 0 &&  resultPHP.data.configs ){
+      Object.keys(resultPHP.data.configs).map(item=>{
+        formData[item] =  resultPHP.data.configs[item]
+      })
+
+    console.log(formData);
+    const presetSizes = mainImageSizeList.value.map(item => item.value);
+    const receivedSizes = formData.basic_configs.main_image_size ? [...formData.basic_configs.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;
+    }
+  }
+
+}
 /**
  * 组件挂载时初始化activeIndex。
  */
-onMounted(() => {
+onMounted(async () => {
+  getConfig()
+
+  let  type = 0 ;
   if (route.query.type) {
     const typeValue = parseInt(route.query.type);
+    type  = typeValue
     if (!isNaN(typeValue) && typeValue >= 0 && typeValue <= 3) {
       activeIndex.value = typeValue;
     }
@@ -426,6 +428,11 @@ const handleInput = (value) => {
   }
 };
 
+// 添加更新camera_configs的方法
+const updateCameraConfigs = (configs) => {
+  formData.camera_configs = configs;
+};
+
 const toggleTab = async (item) => {
   const oldType = activeIndex.value;
   // 切换前保存当前 Tab 配置（包含相机配置 3）
@@ -453,12 +460,11 @@ const saveSetting = async (index) => {
   // 构建临时提交数据
   if(index === 3) {
     if (cameraConfigRef.value && typeof cameraConfigRef.value.save === 'function') {
-      return await cameraConfigRef.value.save()
+      if(! cameraConfigRef.value.save()) return false;
     }
-    return false
   }
   const submitData = {
-    ...formData[indexKey[index]]
+    ...formData
   };
   if(index === 0) {
     if (formData.basic_configs.main_image_size.length === 0) {
@@ -485,24 +491,13 @@ const saveSetting = async (index) => {
     }
 
   }
-      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(true)
-          }
+  const params = JSON.parse(JSON.stringify({
+    configs:submitData
+  }))
+  const result = await setAllUserConfigs(params)
+  if(result.code != 0)  return  false;
+  return  true;
 
-        });
-      });
 };
 
 
@@ -519,20 +514,20 @@ const saveSetting = async (index) => {
     padding-top: 30px;
     padding-left: 100px;
     border-bottom: 1px solid rgba(0,0,0,0.1);
-    :deep(.el-tabs__header){
+    ::v-deep(.el-tabs__header){
       padding-left: 0;
     }
-    :deep(.el-tabs--card>.el-tabs__header){
+    ::v-deep(.el-tabs--card>.el-tabs__header){
       border-bottom: 1px solid #CCCCCC;
     }
-    :deep(.el-tabs__item){
+    ::v-deep(.el-tabs__item){
       height: 30px;
       line-height: 30px;
     }
-    :deep(.el-tabs__nav-wrap){
+    ::v-deep(.el-tabs__nav-wrap){
       margin-bottom: 0;
     }
-    :deep(.el-tabs__item.is-active){
+    ::v-deep(.el-tabs__item.is-active){
       color: #333;
       font-weight: bold;
       background: #fff;
@@ -555,7 +550,7 @@ const saveSetting = async (index) => {
   .select-wrapper {
     position: relative;
     width: 200px;
-    :deep(.el-input__inner){
+    ::v-deep(.el-input__inner){
       border-radius: 6px;
     }
   }
@@ -688,14 +683,14 @@ body {
   .flex-row{
     display: flex;
     align-items: center;
-    :deep(.el-radio){
+    ::v-deep(.el-radio){
       margin-right: 6px !important;
     }
-    :deep(.el-radio__label){
+    ::v-deep(.el-radio__label){
       padding-left: 4px;
     }
   }
-  :deep(.el-form-item) {
+  ::v-deep(.el-form-item) {
     margin-bottom: 0;
     .el-form-item__label {
       width: 120px !important;
@@ -745,7 +740,7 @@ body {
         }
 
         input[type="number"] {
-          -moz-appearance: number-input; /* Firefox */
+          -moz-appearance: textfield; /* Firefox */
         }
       }
     }