fix: 修复图像选中状态闭包陷阱导致添加L标记功能失效

- 修复 handleSelectViewer 中使用旧 state 值判断边框颜色的问题
- 修复 useEffect 依赖项缺失导致捕获旧 selectedViewers 值的问题
- 添加调试日志便于问题追踪

文件: src/pages/view/components/ViewerContainer.tsx

src/pages/view/components/ViewerContainer.tsx

@@ -134,6 +134,10 @@ const ViewerContainer: React.FC<ViewerContainerProps> = ({ imageUrls }) => {
 
   useEffect(() => {
     if (action) {
+      console.log(
+        `[ViewerContainer] 处理功能操作: ${action}, selectedViewers:`,
+        selectedViewers
+      );
       // Handle the action
       switch (action) {
         case 'Add L Mark':
@@ -367,7 +371,7 @@ const ViewerContainer: React.FC<ViewerContainerProps> = ({ imageUrls }) => {
       }
       dispatch(clearAction()); //清理后可连续同一个action触发响应
     }
-  }, [action]);
+  }, [action, selectedViewers, dispatch]);
 
   // ==================== 测量面板 Action 处理 ====================
   useEffect(() => {
@@ -489,20 +493,25 @@ const ViewerContainer: React.FC<ViewerContainerProps> = ({ imageUrls }) => {
   };
 
   const handleSelectViewer = (index: number, event) => {
-    setSelectedViewers((prev) =>
-      prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]
-    );
-    console.log(`handleSelectViewer : ${index}`);
+    setSelectedViewers((prev) => {
+      const newSelected = prev.includes(index)
+        ? prev.filter((i) => i !== index)
+        : [...prev, index];
 
-    // Directly update the div style using a ref
-    const viewerElement = event.currentTarget;
-    console.log(`viewerElement:`, viewerElement);
-    console.log(`selectedViewers:`, selectedViewers);
-    if (viewerElement) {
-      viewerElement.style.border = selectedViewers.includes(index)
-        ? '1px solid gray'
-        : '2px solid blue';
-    }
+      console.log(`handleSelectViewer : ${index}`);
+      console.log(`selectedViewers 旧值:`, prev);
+      console.log(`selectedViewers 新值:`, newSelected);
+
+      // 使用计算后的新值来更新边框，避免闭包陷阱
+      const viewerElement = event.currentTarget;
+      if (viewerElement) {
+        viewerElement.style.border = newSelected.includes(index)
+          ? '2px solid blue'
+          : '1px solid gray';
+      }
+
+      return newSelected;
+    });
   };
 
   // const handleCheckboxChange = (index: number, event) => {