完美版本

point.html

@@ -141,12 +141,6 @@
         .img-thumb.active {
             border: 2px solid #1890ff;
         }
-        #filename {
-            color: #ccc;
-            font-size: 15px;
-            margin-top: 10px;
-            text-align: center;
-        }
     </style>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 </head>
@@ -171,7 +165,6 @@
             <canvas id="canvas"></canvas>
             <div id="coordTip" style="position:fixed;display:none;pointer-events:none;z-index:9999;font-size:12px;color:#fff;background:rgba(0,0,0,0.7);padding:1px 6px;border-radius:4px;"></div>
         </div>
-        <div id="filename" style="color:#ccc;font-size:15px;margin:16px 0 0 0;text-align:center;"></div>
     </div>
     <!-- 右侧标注结果 -->
     <div id="right-panel">
@@ -398,6 +391,97 @@
                     { x: 300, y: 200, w: 120, h: 90, classId: 0 }
                 ]
             },
+            {
+                id: 'img2',
+                url: 'https://image.cszcyl.cn/coze/%E9%AB%98%E8%80%83%E5%BF%85%E8%83%9C-%E8%B6%85%E6%B8%85.png',
+                boxes: [
+                    { x: 50, y: 50, w: 60, h: 60, classId: 0 }
+                ]
+            },
+            {
+                id: 'img2',
+                url: 'https://image.cszcyl.cn/coze/%E9%AB%98%E8%80%83%E5%BF%85%E8%83%9C-%E8%B6%85%E6%B8%85.png',
+                boxes: [
+                    { x: 50, y: 50, w: 60, h: 60, classId: 0 }
+                ]
+            },
+            {
+                id: 'img2',
+                url: 'https://image.cszcyl.cn/coze/%E9%AB%98%E8%80%83%E5%BF%85%E8%83%9C-%E8%B6%85%E6%B8%85.png',
+                boxes: [
+                    { x: 50, y: 50, w: 60, h: 60, classId: 0 }
+                ]
+            },
+            {
+                id: 'img2',
+                url: 'https://image.cszcyl.cn/coze/%E9%AB%98%E8%80%83%E5%BF%85%E8%83%9C-%E8%B6%85%E6%B8%85.png',
+                boxes: [
+                    { x: 50, y: 50, w: 60, h: 60, classId: 0 }
+                ]
+            },
+            {
+                id: 'img2',
+                url: 'https://image.cszcyl.cn/coze/%E9%AB%98%E8%80%83%E5%BF%85%E8%83%9C-%E8%B6%85%E6%B8%85.png',
+                boxes: [
+                    { x: 50, y: 50, w: 60, h: 60, classId: 0 }
+                ]
+            },
+            {
+                id: 'img2',
+                url: 'https://image.cszcyl.cn/coze/%E9%AB%98%E8%80%83%E5%BF%85%E8%83%9C-%E8%B6%85%E6%B8%85.png',
+                boxes: [
+                    { x: 50, y: 50, w: 60, h: 60, classId: 0 }
+                ]
+            },
+            {
+                id: 'img2',
+                url: 'https://image.cszcyl.cn/coze/%E9%AB%98%E8%80%83%E5%BF%85%E8%83%9C-%E8%B6%85%E6%B8%85.png',
+                boxes: [
+                    { x: 50, y: 50, w: 60, h: 60, classId: 0 }
+                ]
+            },
+            {
+                id: 'img2',
+                url: 'https://image.cszcyl.cn/coze/%E9%AB%98%E8%80%83%E5%BF%85%E8%83%9C-%E8%B6%85%E6%B8%85.png',
+                boxes: [
+                    { x: 50, y: 50, w: 60, h: 60, classId: 0 }
+                ]
+            },
+            {
+                id: 'img2',
+                url: 'https://image.cszcyl.cn/coze/%E9%AB%98%E8%80%83%E5%BF%85%E8%83%9C-%E8%B6%85%E6%B8%85.png',
+                boxes: [
+                    { x: 50, y: 50, w: 60, h: 60, classId: 0 }
+                ]
+            },
+            {
+                id: 'img2',
+                url: 'https://image.cszcyl.cn/coze/%E9%AB%98%E8%80%83%E5%BF%85%E8%83%9C-%E8%B6%85%E6%B8%85.png',
+                boxes: [
+                    { x: 50, y: 50, w: 60, h: 60, classId: 0 }
+                ]
+            },
+            {
+                id: 'img2',
+                url: 'https://image.cszcyl.cn/coze/%E9%AB%98%E8%80%83%E5%BF%85%E8%83%9C-%E8%B6%85%E6%B8%85.png',
+                boxes: [
+                    { x: 50, y: 50, w: 60, h: 60, classId: 0 }
+                ]
+            },
+            {
+                id: 'img2',
+                url: 'https://image.cszcyl.cn/coze/%E9%AB%98%E8%80%83%E5%BF%85%E8%83%9C-%E8%B6%85%E6%B8%85.png',
+                boxes: [
+                    { x: 50, y: 50, w: 60, h: 60, classId: 0 }
+                ]
+            },
+            {
+                id: 'img2',
+                url: 'https://image.cszcyl.cn/coze/%E9%AB%98%E8%80%83%E5%BF%85%E8%83%9C-%E8%B6%85%E6%B8%85.png',
+                boxes: [
+                    { x: 50, y: 50, w: 60, h: 60, classId: 0 }
+                ]
+            },
             {
                 id: 'img2',
                 url: 'https://image.cszcyl.cn/coze/%E9%AB%98%E8%80%83%E5%BF%85%E8%83%9C-%E8%B6%85%E6%B8%85.png',
@@ -415,6 +499,11 @@
                 html += `<img src="${item.url}" class="img-thumb${idx===currentImgIndex?' active':''}" data-idx="${idx}" title="${item.url}">`;
             });
             $('#imgList').html(html);
+            // 渲染后自动滚动选中图片到可见区域并居中
+            setTimeout(() => {
+                const $active = $('#imgList .img-thumb.active')[0];
+                if ($active) $active.scrollIntoView({ block: 'center', behavior: 'auto' });
+            }, 0);
         }
         renderImgList();
 
@@ -431,9 +520,6 @@
         function loadCurrentImage() {
             const imgObj = imgUrlArr[currentImgIndex];
             const url = imgObj.url;
-            // 显示文件名
-            const name = url.split('/').pop();
-            $('#filename').text(name);
             // 更新按钮禁用状态
             $('#prevImgBtn').prop('disabled', currentImgIndex === 0);
             $('#nextImgBtn').prop('disabled', currentImgIndex === imgUrlArr.length - 1);
@@ -670,6 +756,8 @@
                     boxes.push({ x, y, w, h, classId });
                     // 同步到图片对象的boxes
                     imgUrlArr[currentImgIndex].boxes = JSON.parse(JSON.stringify(boxes));
+                    // 新增后默认选中该框
+                    selectedBoxIndex = boxes.length - 1;
                 }
                 drawAll();
                 updateBoxesList();
@@ -690,6 +778,17 @@
             imgUrlArr[currentImgIndex].boxes = JSON.parse(JSON.stringify(boxes));
         });
 
+        // 支持选中边框时按Delete键删除
+        $(document).on('keydown', function(e) {
+            if ((e.key === 'Delete' || e.key === 'Backspace') && selectedBoxIndex !== -1 && boxes.length > 0) {
+                boxes.splice(selectedBoxIndex, 1);
+                selectedBoxIndex = -1;
+                drawAll();
+                updateBoxesList();
+                imgUrlArr[currentImgIndex].boxes = JSON.parse(JSON.stringify(boxes));
+            }
+        });
+
         // 右侧标注项点击选中，联动canvas高亮
         $('#boxes-list').on('click', '.box-item', function(e) {
             // 避免点击删除按钮或下拉框时触发