Ver Fonte

feat(setting): 优化相机配置功能

- 在相机选择下拉框添加 focus 事件监听器 ensureCurrentCameraInList
- 更新多相机模式配置结构注释,明确使用原始 CameraKey 作为存储和显示
- 移除自动分配相机逻辑,改为手动选择模式
- 添加 ensureCurrentCameraInList 方法确保当前绑定相机在列表中显示
- 为 CameraConfig 组件添加 key 属性以优化渲染
- 新增 md5 工具函数用于生成相机标识的哈希值
- 更新打包文件中的资源引用路径
panqiuyao há 15 horas atrás
pai
commit
f5055a3c2d

+ 19 - 0
frontend/src/utils/md5.ts

@@ -0,0 +1,19 @@
+import CryptoJS from 'crypto-js'
+
+/**
+ * 生成字符串的 MD5 哈希值
+ * @param str 需要哈希的字符串
+ * @returns MD5 哈希值
+ */
+export function generateMd5(str: string): string {
+  return CryptoJS.MD5(str).toString()
+}
+
+/**
+ * 生成 CameraKey 的 MD5 哈希值(用于避免特殊字符匹配问题)
+ * @param cameraKey 相机标识
+ * @returns MD5 哈希值
+ */
+export function generateCameraMd5(cameraKey: string): string {
+  return generateMd5(cameraKey)
+}

+ 20 - 19
frontend/src/views/Setting/components/CameraConfig.vue

@@ -38,6 +38,7 @@
                 filterable
                 clearable
                 @change="onCameraChange(activePoint)"
+                @focus="ensureCurrentCameraInList"
               >
                 <el-option
                   v-for="camera in availableCameras"
@@ -142,6 +143,7 @@ const pointList = [
 ]
 
 // 多相机模式的配置结构(统一数据结构)
+// 使用原始 CameraKey 作为存储和显示
 const multiConfig = reactive({
   A: {
     iso: { low: '100', high: '6400' },
@@ -221,10 +223,7 @@ const fetchCameraList = () => {
   clientStore.ipc.invoke(icpList.camera.getCameraList).then(result => {
     if (result && result.CameraLists && Array.isArray(result.CameraLists)) {
       cameraList.value = result.CameraLists
-      // 自动分配相机到点位
-      if (isMultiCameraMode.value) {
-        autoAssignCameras()
-      }
+      // 不再自动分配相机,让用户手动选择
       updatePointConnectionStatus()
     }
   }).catch(err => {
@@ -232,21 +231,6 @@ const fetchCameraList = () => {
   })
 }
 
-// 自动分配相机到点位
-const autoAssignCameras = () => {
-  const cameras = cameraList.value || []
-  const unassignedCameras = cameras.filter(cam => {
-    return !Object.values(multiConfig).some(p => p.CameraKey === cam.CameraKey)
-  })
-  const points = ['A', 'B', 'C']
-  unassignedCameras.slice(0, 3).forEach((cam, index) => {
-    if (points[index]) {
-      multiConfig[points[index]].CameraKey = cam.CameraKey
-      multiConfig[points[index]].CameraName = cam.CameraName
-    }
-  })
-}
-
 // 相机选择变更
 const onCameraChange = (pointKey) => {
   const cameraKey = multiConfig[pointKey].CameraKey
@@ -262,6 +246,23 @@ const onCameraChange = (pointKey) => {
   updatePointConnectionStatus()
 }
 
+// 确保当前绑定的相机在列表中(即使断开连接也显示)
+const ensureCurrentCameraInList = () => {
+  const currentCameraKey = multiConfig[activePoint.value].CameraKey
+  if (!currentCameraKey) return
+
+  // 检查是否已在列表中
+  const exists = cameraList.value.some(c => c.CameraKey === currentCameraKey)
+  if (!exists) {
+    // 添加一个临时条目(未连接状态)用于显示
+    cameraList.value.push({
+      CameraKey: currentCameraKey,
+      CameraName: multiConfig[activePoint.value].CameraName || currentCameraKey,
+      CameraStatus: false
+    })
+  }
+}
+
 // 监听multiConfig变化并更新父组件
 watch(multiConfig, (newVal) => {
   emit('update:camera_configs', {

+ 1 - 1
frontend/src/views/Setting/index.vue

@@ -155,7 +155,7 @@
       <!--基础配置-->
       <!--相机配置-->
       <template v-if="activeIndex === 3">
-      <CameraConfig ref="cameraConfigRef" :camera_configs="formData.camera_configs" @update:camera_configs="updateCameraConfigs"/>
+         <CameraConfig ref="cameraConfigRef" :key="activeIndex" :camera_configs="formData.camera_configs" @update:camera_configs="updateCameraConfigs"/>
 
       </template>
       <!--相机配置-->

+ 1 - 1
public/dist/index.html

@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="./vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>智惠映AI自动拍照机</title>
-    <script type="module" crossorigin src="./assets/index-L1oZlcc3.js"></script>
+    <script type="module" crossorigin src="./assets/index-BROJaE7c.js"></script>
     <link rel="stylesheet" crossorigin href="./assets/index-B8MPi9a0.css">
   </head>
   <body>