refactor(frontend): 重构设置页面的行动配置组件

-用 API 调用替换原有的 IPC 通信方式
- 优化了获取顶部标签页、设备配置列表、切换执行配置等操作的逻辑
- 改进了错误处理和用户提示
- 调整了部分 UI 样式，如顶部标签页的高度和样式

frontend/src/apis/setting.ts

@@ -16,4 +16,39 @@ export async function setAllUserConfigs(data){
 
 
 
+//获取左右脚配置
+export async function getTopTabs(data){
+    return GET('/api/ai_image/camera_machine/get_top_tabs',data)
+
+}
+
+//获取配置下的动作列表
+export async function getDeviceConfigs(data){
+    return GET('/api/ai_image/camera_machine/get_device_configs',data)
+
+}
+
+
+//点击切换执行配置
+export async function setLeftRightConfig(data){
+    return POST('/api/ai_image/camera_machine/update_left_right_config',data)
+
+}
+
+
+//重置配置
+export async function restConfig(data){
+    return POST('/api/ai_image/camera_machine/reset_config',data)
+
+}
+
+
+//更新顶部TOP
+export async function setTabName(data){
+    return POST('/api/ai_image/camera_machine/update_tab_name',data)
+
+}
+
+
+
 

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

@@ -29,7 +29,7 @@
       <div v-if="isSortMode" class="normal-btn" @click="cancelSort" v-log="{ describe: { action: '点击取消排序' } }">
         取消排序
       </div>
-      <el-radio-group style="margin-left: 10px" v-model="selectID" @click="changeSelectId(activeTab.id)" v-log="{ describe: { action: '点击切换执行配置', tabId: activeTab.id } }" :disabled="isSortMode">
+      <el-radio-group style="margin-left: 10px" v-model="selectID" @click.native.stop="changeSelectId($event,activeTab.id)"  :disabled="isSortMode">
         <el-radio :label="activeTab.id">切换成执行配置</el-radio>
       </el-radio-group>
     </div>
@@ -99,6 +99,7 @@ const clientStore = client();
 import socket from "@/stores/modules/socket";
 const socketStore = socket(); // WebSocket状态管理实例
 
+import  { getTopTabs, getDeviceConfigs,setLeftRightConfig,restConfig,setTabName } from '@/apis/setting'
 
 // 表格数据和对话框状态
 const tableData = ref([]); // 配置表格数据
@@ -149,32 +150,23 @@ watch(() => topsTab.value, (newTab) => {
   }
 });
 
-const getTopList = ()=>{
-      clientStore.ipc.removeAllListeners(icpList.setting.getDeviceTabs);
-      clientStore.ipc.send(icpList.setting.getDeviceTabs, {
+const getTopList = async ()=>{
+      const result = await getTopTabs({
         type: topsTab.value == 'left' ? 0 :1
       })
-      clientStore.ipc.on(icpList.setting.getDeviceTabs, (event, result) => {
-        console.log('getDeviceTabs')
-        console.log(topsTab.value)
-        console.log(result)
-        if(result.code == 0 && result.data){
-          tabs.value = result.data.tabs
-          tabs.value.some(item=>{
-            console.log('=======' )
-            console.log(item.id )
-            console.log(result.data.select_configs[topsTab.value] )
-            if(item.id === result.data.select_configs[topsTab.value]){
-              selectID.value = item.id
-              activeTab.value =  item
-              return true;
-            }
-          })
 
-          getList()
-        }
-        clientStore.ipc.removeAllListeners(icpList.setting.getDeviceTabs);
-      });
+  if(result.code == 0 && result.data){
+    tabs.value = result.data.tabs
+    tabs.value.some(item=>{
+      if(item.id === result.data.select_configs[topsTab.value]){
+        selectID.value = item.id
+        activeTab.value =  item
+        return true;
+      }
+    })
+
+    getList()
+  }
 
 }
 
@@ -191,60 +183,43 @@ const calibrationId = ref(null) //校准位
 /**
  * 获取设备配置列表。
  */
-const getList = () => {
+const getList = async () => {
   // 如果正在排序模式，先退出
   if (isSortMode.value) {
     exitSortMode();
   }
 
-  clientStore.ipc.removeAllListeners(icpList.setting.getDeviceConfigList);
   let params = {
     tab_id: activeTab.value.id
   }
-  clientStore.ipc.send(icpList.setting.getDeviceConfigList, params);
-  clientStore.ipc.on(icpList.setting.getDeviceConfigList, (event, result) => {
-    console.log('getDeviceConfigList')
-    console.log(params)
-    console.log(result)
-    if (result.code == 0) {
-      tableData.value = result.data.list;
-      const calibration =  result.data.list.filter(item=>(item.action_name === '侧视'))
-      if(calibration.length >= 1){
-        calibrationId.value = calibration[0].id
-      }else{
+  const result =  await getDeviceConfigs(params)
 
-        calibrationId.value = tableData.value[0].id
-      }
-    } else {
-      ElMessage.error('获取列表失败');
+  if (result.code == 0) {
+    tableData.value = result.data.list;
+    const calibration =  result.data.list.filter(item=>(item.action_name === '侧视'))
+    if(calibration.length >= 1){
+      calibrationId.value = calibration[0].id
+    }else{
+
+      calibrationId.value = tableData.value[0].id
     }
-    clientStore.ipc.removeAllListeners(icpList.setting.getDeviceConfigList);
-  });
+  }
 };
 
 
-const changeSelectId = (id)=>{
+const changeSelectId = async (e,id)=>{
+  if (e.target.tagName === 'INPUT') return;
   if (isSortMode.value) return; // 排序模式下禁用
   if(id === selectID.value) return;
-  clientStore.ipc.removeAllListeners(icpList.setting.updateLeftRightConfig);
   let params = {
     type: topsTab.value,
     id,
   }
-  clientStore.ipc.send(icpList.setting.updateLeftRightConfig, params);
-  clientStore.ipc.on(icpList.setting.updateLeftRightConfig, (event, result) => {
-    console.log('updateLeftRightConfig')
-    console.log(params)
-    console.log(result)
-    if (result.code == 0) {
-      selectID.value = id;
-    } else if(result.mssg){
-      ElMessage.error(result.mssg);
-    }else{
-      ElMessage.error('切换失败');
-    }
-    clientStore.ipc.removeAllListeners(icpList.setting.updateLeftRightConfig);
-  });
+  const result = await setLeftRightConfig(params)
+  if (result.code == 0) {
+    selectID.value = id;
+  }
+
 }
 
 /**
@@ -301,22 +276,16 @@ const resetConfig = () => {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
-  }).then(() => {
-    clientStore.ipc.removeAllListeners(icpList.setting.resetDeviceConfig);
-    clientStore.ipc.send(icpList.setting.resetDeviceConfig, {
+  }).then(async () => {
+
+    const result =  await restConfig({
       tab_id: activeTab.value.id
-    });
-    clientStore.ipc.on(icpList.setting.resetDeviceConfig, (event, result) => {
-      if (result.code == 0) {
-        getList();
-        ElMessage.success('重置成功');
-      } else if(result.mssg){
-        ElMessage.error(result.mssg);
-      } else {
-        ElMessage.error('重置失败');
-      }
-      clientStore.ipc.removeAllListeners(icpList.setting.resetDeviceConfig);
-    });
+    })
+    if (result.code == 0) {
+      getList();
+      ElMessage.success('重置成功');
+    }
+
   });
 };
 
@@ -335,28 +304,23 @@ const reName = ()=>{
       return true;
     },
   })
-      .then(({ value }) => {
-        clientStore.ipc.removeAllListeners(icpList.setting.updateTabName);
-        clientStore.ipc.send(icpList.setting.updateTabName, {
+      .then(async ({ value }) => {
+
+
+
+        const result =  await setTabName({
           id: activeTab.value.id,
           mode_name:value,
-        });
-        clientStore.ipc.on(icpList.setting.updateTabName, (event, result) => {
-          if (result.code == 0) {
-            activeTab.value.mode_name = value
-            tabs.value.some(item=>{
-              if(item.id ===  activeTab.value.id){
-                item.mode_name   =  activeTab.value.mode_name
-              }
-            })
-            ElMessage.success('重命名成功');
-          }  else if(result.mssg){
-            ElMessage.error(result.mssg);
-            }else {
-            ElMessage.error('重命名失败');
-          }
-          clientStore.ipc.removeAllListeners(icpList.setting.updateTabName);
-        });
+        })
+        if (result.code == 0) {
+          activeTab.value.mode_name = value
+          tabs.value.some(item=>{
+            if(item.id ===  activeTab.value.id){
+              item.mode_name   =  activeTab.value.mode_name
+            }
+          })
+          ElMessage.success('重命名成功');
+        }
       })
 }
 
@@ -588,10 +552,22 @@ const exitSortMode = () => {
 
 <style lang="scss" scoped>
 .top_tabs {
-  height: 30px;
+  height: 40px;
   overflow: hidden;
   border: 1px solid #c8c8c8;
   border-bottom: none;
+  ::v-deep {
+    .el-tabs__item {
+      height: 40px;
+      line-height: 40px;
+      padding: 0 15px;
+      font-size: 14px;
+      color: #333;
+      &.is-active {
+        color: #2957FF;
+      }
+    }
+  }
 }
 .two_tabs {
   width: 100%;

frontend/src/views/Setting/index.vue

@@ -347,11 +347,8 @@ const indexKey  ={
  * 监听路由参数变化，更新activeIndex和activeTab。
  */
 watch(() => route.query.type, async (newType,oldType) => {
-
-
-
   const typeValue = parseInt(newType) || 0;
-  if([3,4].includes(typeValue)) return;
+  getConfig()
 });