feat: 标靶数量限制放大到20，修复标靶命名bug

client/src/sections/wuyuanbiaoba/components/CameraView.jsx

@@ -3,6 +3,31 @@ import { useWebSocket } from "../actions/websocket.jsx";
 import { message } from "antd";
 // import { useTargetStorage } from "../hooks/useTargetStorage.js";
 
+const MAX_RECTANGLES = 20;
+
+const getNextTargetNameIndex = (rectangles) => {
+   return rectangles.reduce((maxIndex, rectangle) => {
+      const match = /^T_(\d+)$/i.exec(String(rectangle?.name || ""));
+      return match ? Math.max(maxIndex, Number(match[1])) : maxIndex;
+   }, 0) + 1;
+};
+
+const getNextTargetId = (rectangles) => {
+   const usedIds = new Set(
+      rectangles
+         .map((rectangle) => rectangle?.id ?? rectangle?.key)
+         .filter((id) => id !== undefined && id !== null && id !== "")
+         .map((id) => String(id))
+   );
+
+   let sequence = 1;
+   while (usedIds.has(`10${sequence}`)) {
+      sequence += 1;
+   }
+
+   return `10${sequence}`;
+};
+
 const CameraView = ({
    selectedTargetId,
    onClearSelection,
@@ -73,7 +98,7 @@ const CameraView = ({
    const minScale = 0.2;
    const maxScale = 4.0;
    const scaleStep = 0.1;
-   const maxRectangles = 10;
+   const maxRectangles = MAX_RECTANGLES;
    let streamUrl = `http://${window.location.hostname}:2240/video_flow`;
    // 摄像头流地址
    if (window.env && window.env.FS_FLAG === "localdev") {
@@ -281,7 +306,7 @@ const CameraView = ({
       // 计算鼠标移动距离
       const mouseMoveDistance = Math.sqrt(
          Math.pow(mouseX - mouseDownPos.x, 2) +
-            Math.pow(mouseY - mouseDownPos.y, 2)
+         Math.pow(mouseY - mouseDownPos.y, 2)
       );
 
       // 检查是否是单击操作：时间短且移动距离小
@@ -350,34 +375,33 @@ const CameraView = ({
 
       const videoRect = screenToVideoCoordinates(x, y, w, h);
       if (videoRect && rectangles.length < maxRectangles) {
-         const nextIndex = Number(rectangles[rectangles.length - 1]?.id)
+         // 名称序号与设备协议 ID 分开计算，避免第 10 个以后发生拼接错误。
-            ? Number(rectangles[rectangles.length - 1]?.id) - 100 + 1
+         const nextNameIndex = getNextTargetNameIndex(rectangles);
-            : 1;
+         const fixedId = getNextTargetId(rectangles);
-         const fixedId = `10${nextIndex}`;
          // 根据选中的模板预设参数
          const templateParams = selectedTemplate
             ? {
-                 // 从模板中获取参数
+               // 从模板中获取参数
-                 name: `T_${nextIndex}` || selectedTemplate.name,
+               name: `T_${nextNameIndex}`,
-                 radius: selectedTemplate.physicalRadius || 40.0,
+               radius: selectedTemplate.physicalRadius || 40.0,
-                 isReferencePoint: selectedTemplate.isBaseline || false,
+               isReferencePoint: selectedTemplate.isBaseline || false,
-                 gradientThreshold: selectedTemplate.gradientThresholdValue,
+               gradientThreshold: selectedTemplate.gradientThresholdValue,
-                 anchorThreshold: selectedTemplate.anchorThresholdValue,
+               anchorThreshold: selectedTemplate.anchorThresholdValue,
-                 gaussianBlurThreshold: selectedTemplate.gaussianBlur || 3,
+               gaussianBlurThreshold: selectedTemplate.gaussianBlur || 3,
-                 binaryThreshold: selectedTemplate.binaryThreshold || 120,
+               binaryThreshold: selectedTemplate.binaryThreshold || 120,
-                 hasAdvancedConfig: false,
+               hasAdvancedConfig: false,
-              }
+            }
             : {
-                 // 默认参数
+               // 默认参数
-                 name: `T_${nextIndex}`,
+               name: `T_${nextNameIndex}`,
-                 radius: 40.0,
+               radius: 40.0,
-                 isReferencePoint: false,
+               isReferencePoint: false,
-                 gradientThreshold: 100,
+               gradientThreshold: 100,
-                 anchorThreshold: 80,
+               anchorThreshold: 80,
-                 gaussianBlurThreshold: 3,
+               gaussianBlurThreshold: 3,
-                 binaryThreshold: 120,
+               binaryThreshold: 120,
-                 hasAdvancedConfig: false,
+               hasAdvancedConfig: false,
-              };
+            };
 
          const newRect = {
             id: fixedId,
@@ -707,8 +731,8 @@ const CameraView = ({
                index === selectedRectIndex && isDraggingRect
                   ? "lime"
                   : isSelected
-                  ? "lime"
+                     ? "lime"
-                  : "blue";
+                     : "blue";
             ctx.font = `${12 / scale}px Arial`;
             // ctx.fillText(`#${index + 1}`, displayX + 5 / scale, displayY + 15 / scale);
          });
@@ -1141,12 +1165,12 @@ const CameraView = ({
                cursor: dragging
                   ? "grabbing"
                   : drawing
-                  ? "crosshair"
+                     ? "crosshair"
-                  : isDraggingRect
+                     : isDraggingRect
-                  ? "move"
+                        ? "move"
-                  : hoveredRectIndex !== -1
+                        : hoveredRectIndex !== -1
-                  ? "move"
+                           ? "move"
-                  : "default",
+                           : "default",
             }}
             onMouseDown={handleMouseDown}
             onMouseMove={handleMouseMove}
@@ -1280,8 +1304,8 @@ const CameraView = ({
             {isSaving
                ? "下发中..."
                : rectangles.length === 0
-               ? "无标靶"
+                  ? "无标靶"
-               : "一键下发"}
+                  : "一键下发"}
          </button>
 
          {/* 信息显示 */}