luo-image-annotator 0.0.7 → 0.0.8

package/dist/luo-image-annotator.es.js

@@ -1,59 +1,59 @@
 var Jt = Object.defineProperty;
 var jt = (m, t, i) => t in m ? Jt(m, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : m[t] = i;
-var A = (m, t, i) => jt(m, typeof t != "symbol" ? t + "" : t, i);
-import { defineComponent as Q, ref as k, watchEffect as Xt, openBlock as y, createElementBlock as b, normalizeClass as E, computed as U, onMounted as Yt, watch as j, createElementVNode as g, toDisplayString as $, Fragment as L, renderList as R, normalizeStyle as O, createCommentVNode as z, createVNode as P, createTextVNode as X, withDirectives as it, vModelText as ot, createBlock as vt, nextTick as qt } from "vue";
+var I = (m, t, i) => jt(m, typeof t != "symbol" ? t + "" : t, i);
+import { defineComponent as G, ref as k, watchEffect as Xt, openBlock as y, createElementBlock as x, normalizeClass as V, computed as O, onMounted as Yt, watch as J, createElementVNode as g, toDisplayString as $, Fragment as L, renderList as F, normalizeStyle as N, createCommentVNode as z, createVNode as H, createTextVNode as j, withDirectives as it, vModelText as ot, createBlock as mt, nextTick as qt } from "vue";
 const at = (m, t) => Math.sqrt(Math.pow(m.x - t.x, 2) + Math.pow(m.y - t.y, 2)), Gt = (m, t) => {
   let i = !1;
-  for (let n = 0, r = t.length - 1; n < t.length; r = n++) {
-    const o = t[n].x, c = t[n].y, a = t[r].x, d = t[r].y;
-    c > m.y != d > m.y && m.x < (a - o) * (m.y - c) / (d - c) + o && (i = !i);
+  for (let e = 0, l = t.length - 1; e < t.length; l = e++) {
+    const r = t[e].x, c = t[e].y, o = t[l].x, h = t[l].y;
+    c > m.y != h > m.y && m.x < (o - r) * (m.y - c) / (h - c) + r && (i = !i);
   }
   return i;
-}, mt = (m, t, i) => {
-  const n = i * (Math.PI / 180), r = Math.cos(n), o = Math.sin(n), c = m.x - t.x, a = m.y - t.y;
+}, ft = (m, t, i) => {
+  const e = i * (Math.PI / 180), l = Math.cos(e), r = Math.sin(e), c = m.x - t.x, o = m.y - t.y;
   return {
-    x: t.x + (c * r - a * o),
-    y: t.y + (c * o + a * r)
+    x: t.x + (c * l - o * r),
+    y: t.y + (c * r + o * l)
   };
 };
 class Kt {
   constructor(t) {
-    A(this, "canvas");
-    A(this, "ctx");
-    A(this, "img");
-    A(this, "annotations", []);
+    I(this, "canvas");
+    I(this, "ctx");
+    I(this, "img");
+    I(this, "annotations", []);
     // 状态
-    A(this, "currentTool", null);
-    A(this, "interactionMode", "none");
-    A(this, "activeAnnotation", null);
-    A(this, "hoverAnnotation", null);
-    A(this, "isDrawing", !1);
-    A(this, "isDragging", !1);
-    A(this, "isPanning", !1);
+    I(this, "currentTool", null);
+    I(this, "interactionMode", "none");
+    I(this, "activeAnnotation", null);
+    I(this, "hoverAnnotation", null);
+    I(this, "isDrawing", !1);
+    I(this, "isDragging", !1);
+    I(this, "isPanning", !1);
     // 平移模式
-    A(this, "panStartPoint", null);
+    I(this, "panStartPoint", null);
     // 平移起点
-    A(this, "dragStartPoint", null);
-    A(this, "dragStartAnnotation", null);
+    I(this, "dragStartPoint", null);
+    I(this, "dragStartAnnotation", null);
     // 快照用于撤销/diff
-    A(this, "lastMouseMovePoint", null);
+    I(this, "lastMouseMovePoint", null);
     // 用于绘制辅助线
-    A(this, "isHoveringStartPoint", !1);
+    I(this, "isHoveringStartPoint", !1);
     // 多边形闭合吸附状态
     // 设置
-    A(this, "currentLabelColor", "#FF4081");
+    I(this, "currentLabelColor", "#FF4081");
     // 当前选中标签颜色
-    A(this, "visibleLabels", /* @__PURE__ */ new Set());
+    I(this, "visibleLabels", /* @__PURE__ */ new Set());
     // 可见标签集合 (如果为空则全部可见，或者由外部控制渲染列表)
     // 交互
-    A(this, "selectedHandleIndex", -1);
+    I(this, "selectedHandleIndex", -1);
     // -1: 主体, >=0: 顶点索引, -2: 旋转手柄
-    A(this, "hoverHandleIndex", -1);
+    I(this, "hoverHandleIndex", -1);
     // 视口
-    A(this, "scale", 1);
-    A(this, "offset", { x: 0, y: 0 });
-    A(this, "listeners", {});
-    A(this, "imageUrl", "");
+    I(this, "scale", 1);
+    I(this, "offset", { x: 0, y: 0 });
+    I(this, "listeners", {});
+    I(this, "imageUrl", "");
     this.canvas = t;
     const i = t.getContext("2d");
     if (!i) throw new Error("Could not get 2d context");
@@ -66,7 +66,7 @@ class Kt {
     this.listeners[t] || (this.listeners[t] = []), this.listeners[t].push(i);
   }
   emit(t, i) {
-    this.listeners[t] && this.listeners[t].forEach((n) => n(i));
+    this.listeners[t] && this.listeners[t].forEach((e) => e(i));
   }
   loadImage(t) {
     this.imageUrl = t, this.img.src = t, this.activeAnnotation = null, this.isDrawing = !1;
@@ -87,10 +87,10 @@ class Kt {
     this.visibleLabels = new Set(t), this.render();
   }
   zoom(t) {
-    const n = t > 0 ? this.scale * 1.1 : this.scale / 1.1;
-    if (n < 0.1 || n > 10) return;
-    const r = this.canvas.width / 2, o = this.canvas.height / 2, c = this.toImageCoords(r, o);
-    this.scale = n, this.offset.x = r - c.x * this.scale, this.offset.y = o - c.y * this.scale, this.render();
+    const e = t > 0 ? this.scale * 1.1 : this.scale / 1.1;
+    if (e < 0.1 || e > 10) return;
+    const l = this.canvas.width / 2, r = this.canvas.height / 2, c = this.toImageCoords(l, r);
+    this.scale = e, this.offset.x = l - c.x * this.scale, this.offset.y = r - c.y * this.scale, this.render();
   }
   resize() {
     this.fitImageToCanvas(), this.render();
@@ -112,8 +112,8 @@ class Kt {
     const t = this.canvas.parentElement;
     if (t) {
       if (this.canvas.width = t.clientWidth, this.canvas.height = t.clientHeight, this.img.width === 0) return;
-      const i = this.canvas.width / this.img.width, n = this.canvas.height / this.img.height;
-      this.scale = Math.min(i, n), this.offset.x = (this.canvas.width - this.img.width * this.scale) / 2, this.offset.y = (this.canvas.height - this.img.height * this.scale) / 2;
+      const i = this.canvas.width / this.img.width, e = this.canvas.height / this.img.height;
+      this.scale = Math.min(i, e), this.offset.x = (this.canvas.width - this.img.width * this.scale) / 2, this.offset.y = (this.canvas.height - this.img.height * this.scale) / 2;
     }
   }
   // --- 事件处理 ---
@@ -124,39 +124,39 @@ class Kt {
     this.interactionMode === "select" && (t.key === "Delete" || t.key === "Backspace") && this.activeAnnotation && this.deleteAnnotation(this.activeAnnotation.id);
   }
   deleteAnnotation(t) {
-    const i = this.annotations.findIndex((n) => n.id === t);
+    const i = this.annotations.findIndex((e) => e.id === t);
     if (i > -1) {
-      const n = this.annotations[i];
+      const e = this.annotations[i];
       this.annotations.splice(i, 1), this.activeAnnotation = null, this.emit("annotationChange", {
         action: "delete",
-        changedItem: n,
+        changedItem: e,
         imageUrl: this.imageUrl
       }), this.render();
     }
   }
   handleMouseDown(t) {
-    const i = this.canvas.getBoundingClientRect(), n = t.clientX - i.left, r = t.clientY - i.top, o = this.toImageCoords(n, r);
+    const i = this.canvas.getBoundingClientRect(), e = t.clientX - i.left, l = t.clientY - i.top, r = this.toImageCoords(e, l);
     if (this.canvas.style.cursor === "grab" || this.canvas.style.cursor === "grabbing") {
-      this.isPanning = !0, this.panStartPoint = { x: n, y: r }, this.canvas.style.cursor = "grabbing";
+      this.isPanning = !0, this.panStartPoint = { x: e, y: l }, this.canvas.style.cursor = "grabbing";
       return;
     }
     if (this.interactionMode === "select" && this.activeAnnotation) {
-      const d = this.getHitHandle(n, r, this.activeAnnotation);
-      if (d !== -100) {
-        this.isDragging = !0, this.dragStartPoint = o, this.selectedHandleIndex = d, this.dragStartAnnotation = JSON.parse(JSON.stringify(this.activeAnnotation));
+      const h = this.getHitHandle(e, l, this.activeAnnotation);
+      if (h !== -100) {
+        this.isDragging = !0, this.dragStartPoint = r, this.selectedHandleIndex = h, this.dragStartAnnotation = JSON.parse(JSON.stringify(this.activeAnnotation));
         return;
       }
     }
-    const c = this.interactionMode === "select" ? this.getHitCategory(n, r) : null;
+    const c = this.interactionMode === "select" ? this.getHitCategory(e, l) : null;
     if (c) {
       this.activeAnnotation = c, this.isDragging = !1, this.selectedHandleIndex = -1, this.emit("annotationChange", { action: "select", changedItem: c, imageUrl: this.imageUrl }), this.render();
       return;
     }
-    const a = this.getHitAnnotation(o);
+    const o = this.getHitAnnotation(r);
     if (this.interactionMode === "select") {
-      if (a) {
-        if (!(this.visibleLabels.size > 0 && !this.visibleLabels.has(a.label))) {
-          this.activeAnnotation = a, this.isDragging = !0, this.dragStartPoint = o, this.selectedHandleIndex = -1, this.dragStartAnnotation = JSON.parse(JSON.stringify(a)), this.emit("annotationChange", { action: "select", changedItem: a, imageUrl: this.imageUrl }), this.render();
+      if (o) {
+        if (!(this.visibleLabels.size > 0 && !this.visibleLabels.has(o.label))) {
+          this.activeAnnotation = o, this.isDragging = !0, this.dragStartPoint = r, this.selectedHandleIndex = -1, this.dragStartAnnotation = JSON.parse(JSON.stringify(o)), this.emit("annotationChange", { action: "select", changedItem: o, imageUrl: this.imageUrl }), this.render();
           return;
         }
       } else
@@ -165,43 +165,43 @@ class Kt {
     }
     if (this.interactionMode === "draw") {
       if (this.isDrawing && this.currentTool === "polygon" && this.activeAnnotation) {
-        const d = this.activeAnnotation.coordinates;
-        if (d.points.length > 2 && at(o, d.points[0]) < 20 / this.scale) {
+        const h = this.activeAnnotation.coordinates;
+        if (h.points.length > 2 && at(r, h.points[0]) < 20 / this.scale) {
           this.finishDrawing();
           return;
         }
-        this.startDrawing(o);
+        this.startDrawing(r);
         return;
       }
       if (this.currentTool) {
         if (this.currentTool === "polygon" && !this.isDrawing) {
-          this.startDrawing(o);
+          this.startDrawing(r);
           return;
         }
-        this.startDrawing(o);
+        this.startDrawing(r);
       }
       return;
     }
     this.activeAnnotation = null, this.render();
   }
   handleMouseMove(t) {
-    const i = this.canvas.getBoundingClientRect(), n = t.clientX - i.left, r = t.clientY - i.top, o = this.toImageCoords(n, r);
+    const i = this.canvas.getBoundingClientRect(), e = t.clientX - i.left, l = t.clientY - i.top, r = this.toImageCoords(e, l);
     if (this.isPanning && this.panStartPoint) {
-      const c = n - this.panStartPoint.x, a = r - this.panStartPoint.y;
-      this.offset.x += c, this.offset.y += a, this.panStartPoint = { x: n, y: r }, this.render();
+      const c = e - this.panStartPoint.x, o = l - this.panStartPoint.y;
+      this.offset.x += c, this.offset.y += o, this.panStartPoint = { x: e, y: l }, this.render();
       return;
     }
-    if (this.lastMouseMovePoint = o, this.isDrawing) {
+    if (this.lastMouseMovePoint = r, this.isDrawing) {
       if (this.currentTool === "polygon" && this.activeAnnotation) {
         const c = this.activeAnnotation.coordinates;
         if (c.points.length > 2) {
-          const a = c.points[0], d = at(o, a);
-          this.isHoveringStartPoint = d < 20 / this.scale;
+          const o = c.points[0], h = at(r, o);
+          this.isHoveringStartPoint = h < 20 / this.scale;
         } else
           this.isHoveringStartPoint = !1;
       }
-      this.updateDrawing(o);
-    } else this.isDragging && this.activeAnnotation && this.dragStartPoint ? this.updateDragging(o) : this.checkHover(n, r, o);
+      this.updateDrawing(r);
+    } else this.isDragging && this.activeAnnotation && this.dragStartPoint ? this.updateDragging(r) : this.checkHover(e, l, r);
     this.render();
   }
   handleMouseUp(t) {
@@ -226,8 +226,8 @@ class Kt {
   // 辅助函数：将 hex 转换为 rgba
   hexToRgba(t, i) {
     if (!t.startsWith("#")) return t;
-    const n = parseInt(t.slice(1, 3), 16), r = parseInt(t.slice(3, 5), 16), o = parseInt(t.slice(5, 7), 16);
-    return `rgba(${n}, ${r}, ${o}, ${i})`;
+    const e = parseInt(t.slice(1, 3), 16), l = parseInt(t.slice(3, 5), 16), r = parseInt(t.slice(5, 7), 16);
+    return `rgba(${e}, ${l}, ${r}, ${i})`;
   }
   startDrawing(t) {
     if (!this.currentTool) return;
@@ -242,14 +242,14 @@ class Kt {
         style: { strokeColor: this.currentLabelColor }
       };
     else if (this.currentTool === "point") {
-      const n = {
+      const e = {
         id: i,
         type: "point",
         label: "",
         coordinates: { points: [t] },
         style: { strokeColor: this.currentLabelColor }
       };
-      this.annotations.push(n), this.emit("annotationChange", { action: "add", changedItem: n, imageUrl: this.imageUrl }), this.activeAnnotation = n;
+      this.annotations.push(e), this.emit("annotationChange", { action: "add", changedItem: e, imageUrl: this.imageUrl }), this.activeAnnotation = e;
     } else if (this.currentTool === "polygon")
       this.activeAnnotation && this.activeAnnotation.type === "polygon" && this.isDrawing ? this.activeAnnotation.coordinates.points.push(t) : (this.isDrawing = !0, this.activeAnnotation = {
         id: i,
@@ -259,7 +259,7 @@ class Kt {
         style: { strokeColor: this.currentLabelColor }
       });
     else if (this.currentTool === "category") {
-      const n = {
+      const e = {
         id: i,
         type: "category",
         label: "",
@@ -268,7 +268,7 @@ class Kt {
         // 或位置？
         style: { strokeColor: this.currentLabelColor }
       };
-      this.annotations.push(n), this.emit("annotationChange", { action: "add", changedItem: n, imageUrl: this.imageUrl }), this.activeAnnotation = n;
+      this.annotations.push(e), this.emit("annotationChange", { action: "add", changedItem: e, imageUrl: this.imageUrl }), this.activeAnnotation = e;
     } else this.currentTool === "rotatedRect" && (this.isDrawing = !0, this.dragStartPoint = t, this.activeAnnotation = {
       id: i,
       type: "rotatedRect",
@@ -283,8 +283,8 @@ class Kt {
         const i = this.activeAnnotation.coordinates;
         i.x2 = t.x, i.y2 = t.y;
       } else if (this.activeAnnotation.type === "rotatedRect" && this.dragStartPoint) {
-        const i = this.activeAnnotation.coordinates, n = Math.abs(t.x - this.dragStartPoint.x), r = Math.abs(t.y - this.dragStartPoint.y);
-        i.width = n * 2, i.height = r * 2;
+        const i = this.activeAnnotation.coordinates, e = Math.abs(t.x - this.dragStartPoint.x), l = Math.abs(t.y - this.dragStartPoint.y);
+        i.width = e * 2, i.height = l * 2;
       } else this.activeAnnotation.type;
   }
   finishDrawing() {
@@ -295,8 +295,8 @@ class Kt {
           this.activeAnnotation = null, this.isDrawing = !1;
           return;
         }
-        const i = Math.min(t.x1, t.x2), n = Math.max(t.x1, t.x2), r = Math.min(t.y1, t.y2), o = Math.max(t.y1, t.y2);
-        t.x1 = i, t.x2 = n, t.y1 = r, t.y2 = o, this.annotations.push(this.activeAnnotation), this.emit("annotationChange", { action: "add", changedItem: this.activeAnnotation, imageUrl: this.imageUrl });
+        const i = Math.min(t.x1, t.x2), e = Math.max(t.x1, t.x2), l = Math.min(t.y1, t.y2), r = Math.max(t.y1, t.y2);
+        t.x1 = i, t.x2 = e, t.y1 = l, t.y2 = r, this.annotations.push(this.activeAnnotation), this.emit("annotationChange", { action: "add", changedItem: this.activeAnnotation, imageUrl: this.imageUrl });
       } else if (this.activeAnnotation.type === "polygon") {
         if (this.activeAnnotation.coordinates.points.length < 3) {
           this.activeAnnotation = null, this.isDrawing = !1;
@@ -317,75 +317,75 @@ class Kt {
   }
   updateDragging(t) {
     if (!this.activeAnnotation || !this.dragStartPoint || !this.dragStartAnnotation) return;
-    const i = t.x - this.dragStartPoint.x, n = t.y - this.dragStartPoint.y;
-    this.selectedHandleIndex === -1 ? this.moveAnnotation(this.activeAnnotation, this.dragStartAnnotation, i, n) : this.resizeAnnotation(this.activeAnnotation, this.dragStartAnnotation, this.selectedHandleIndex, t);
+    const i = t.x - this.dragStartPoint.x, e = t.y - this.dragStartPoint.y;
+    this.selectedHandleIndex === -1 ? this.moveAnnotation(this.activeAnnotation, this.dragStartAnnotation, i, e) : this.resizeAnnotation(this.activeAnnotation, this.dragStartAnnotation, this.selectedHandleIndex, t);
   }
-  moveAnnotation(t, i, n, r) {
+  moveAnnotation(t, i, e, l) {
     if (t.type === "rectangle") {
-      const o = i.coordinates, c = t.coordinates;
-      c.x1 = o.x1 + n, c.x2 = o.x2 + n, c.y1 = o.y1 + r, c.y2 = o.y2 + r;
+      const r = i.coordinates, c = t.coordinates;
+      c.x1 = r.x1 + e, c.x2 = r.x2 + e, c.y1 = r.y1 + l, c.y2 = r.y2 + l;
     } else if (t.type === "point") {
-      const o = i.coordinates, c = t.coordinates;
-      c.points = o.points.map((a) => ({ x: a.x + n, y: a.y + r }));
+      const r = i.coordinates, c = t.coordinates;
+      c.points = r.points.map((o) => ({ x: o.x + e, y: o.y + l }));
     } else if (t.type === "rotatedRect") {
-      const o = i.coordinates, c = t.coordinates;
-      c.x = o.x + n, c.y = o.y + r;
+      const r = i.coordinates, c = t.coordinates;
+      c.x = r.x + e, c.y = r.y + l;
     } else if (t.type === "polygon") {
-      const o = i.coordinates, c = t.coordinates;
-      c.points = o.points.map((a) => ({ x: a.x + n, y: a.y + r }));
+      const r = i.coordinates, c = t.coordinates;
+      c.points = r.points.map((o) => ({ x: o.x + e, y: o.y + l }));
     }
   }
-  resizeAnnotation(t, i, n, r) {
+  resizeAnnotation(t, i, e, l) {
     if (t.type === "rectangle") {
-      const o = t.coordinates;
-      n === 0 && (o.x1 = r.x, o.y1 = r.y), n === 1 && (o.x2 = r.x, o.y1 = r.y), n === 2 && (o.x2 = r.x, o.y2 = r.y), n === 3 && (o.x1 = r.x, o.y2 = r.y);
+      const r = t.coordinates;
+      e === 0 && (r.x1 = l.x, r.y1 = l.y), e === 1 && (r.x2 = l.x, r.y1 = l.y), e === 2 && (r.x2 = l.x, r.y2 = l.y), e === 3 && (r.x1 = l.x, r.y2 = l.y);
     } else if (t.type === "polygon") {
-      const o = t.coordinates;
-      n >= 0 && n < o.points.length && (o.points[n] = r);
+      const r = t.coordinates;
+      e >= 0 && e < r.points.length && (r.points[e] = l);
     } else if (t.type === "point") {
-      const o = t.coordinates;
-      n >= 0 && n < o.points.length && (o.points[n] = r);
+      const r = t.coordinates;
+      e >= 0 && e < r.points.length && (r.points[e] = l);
     } else if (t.type === "rotatedRect") {
-      const o = t.coordinates;
-      if (n === -2) {
-        const c = o.x, a = o.y, d = r.x - c, p = r.y - a;
-        let w = Math.atan2(p, d) * 180 / Math.PI;
-        w += 90, o.angle = w;
+      const r = t.coordinates;
+      if (e === -2) {
+        const c = r.x, o = r.y, h = l.x - c, p = l.y - o;
+        let C = Math.atan2(p, h) * 180 / Math.PI;
+        C += 90, r.angle = C;
       } else {
-        const c = o.angle * Math.PI / 180, a = Math.cos(-c), d = Math.sin(-c), p = r.x - o.x, w = r.y - o.y, u = p * a - w * d, f = p * d + w * a;
-        (n === 0 || n === 3) && (o.width / 2, o.width = Math.abs(u) * 2), (n === 1 || n === 2) && (o.width = Math.abs(u) * 2), (n === 0 || n === 1) && (o.height = Math.abs(f) * 2), (n === 2 || n === 3) && (o.height = Math.abs(f) * 2);
+        const c = r.angle * Math.PI / 180, o = Math.cos(-c), h = Math.sin(-c), p = l.x - r.x, C = l.y - r.y, u = p * o - C * h, f = p * h + C * o;
+        (e === 0 || e === 3) && (r.width / 2, r.width = Math.abs(u) * 2), (e === 1 || e === 2) && (r.width = Math.abs(u) * 2), (e === 0 || e === 1) && (r.height = Math.abs(f) * 2), (e === 2 || e === 3) && (r.height = Math.abs(f) * 2);
       }
     }
   }
   // --- 命中测试和渲染辅助函数 ---
   getHitAnnotation(t) {
     for (let i = this.annotations.length - 1; i >= 0; i--) {
-      const n = this.annotations[i];
-      if (this.isPointInAnnotation(t, n))
-        return n;
+      const e = this.annotations[i];
+      if (this.isPointInAnnotation(t, e))
+        return e;
     }
     return null;
   }
   isPointInAnnotation(t, i) {
     if (i.type === "rectangle") {
-      const n = i.coordinates;
-      return t.x >= n.x1 && t.x <= n.x2 && t.y >= n.y1 && t.y <= n.y2;
+      const e = i.coordinates;
+      return t.x >= e.x1 && t.x <= e.x2 && t.y >= e.y1 && t.y <= e.y2;
     } else if (i.type === "polygon") {
-      const n = i.coordinates;
-      return Gt(t, n.points);
+      const e = i.coordinates;
+      return Gt(t, e.points);
     } else if (i.type === "rotatedRect") {
-      const n = i.coordinates, r = mt(t, { x: n.x, y: n.y }, -n.angle), o = n.width / 2, c = n.height / 2;
-      return r.x >= n.x - o && r.x <= n.x + o && r.y >= n.y - c && r.y <= n.y + c;
+      const e = i.coordinates, l = ft(t, { x: e.x, y: e.y }, -e.angle), r = e.width / 2, c = e.height / 2;
+      return l.x >= e.x - r && l.x <= e.x + r && l.y >= e.y - c && l.y <= e.y + c;
     } else if (i.type === "point")
-      return i.coordinates.points.some((r) => at(t, r) < 10 / this.scale);
+      return i.coordinates.points.some((l) => at(t, l) < 10 / this.scale);
     return !1;
   }
-  getHitHandle(t, i, n) {
-    const r = this.getAnnotationHandles(n), o = 6;
-    for (let c = 0; c < r.length; c++) {
-      const a = r[c], d = this.toScreenCoords(a.x, a.y);
-      if (Math.abs(t - d.x) < o && Math.abs(i - d.y) < o)
-        return n.type === "rotatedRect" && c === 4 ? -2 : c;
+  getHitHandle(t, i, e) {
+    const l = this.getAnnotationHandles(e), r = 6;
+    for (let c = 0; c < l.length; c++) {
+      const o = l[c], h = this.toScreenCoords(o.x, o.y);
+      if (Math.abs(t - h.x) < r && Math.abs(i - h.y) < r)
+        return e.type === "rotatedRect" && c === 4 ? -2 : c;
     }
     return -100;
   }
@@ -408,24 +408,24 @@ class Kt {
       if (t.type === "point")
         return t.coordinates.points;
       if (t.type === "rotatedRect") {
-        const i = t.coordinates, n = { x: i.x, y: i.y }, r = i.width / 2, o = i.height / 2, c = { x: i.x - r, y: i.y - o }, a = { x: i.x + r, y: i.y - o }, d = { x: i.x + r, y: i.y + o }, p = { x: i.x - r, y: i.y + o }, w = { x: i.x, y: i.y - o - 20 / this.scale };
-        return [c, a, d, p, w].map((u) => mt(u, n, i.angle));
+        const i = t.coordinates, e = { x: i.x, y: i.y }, l = i.width / 2, r = i.height / 2, c = { x: i.x - l, y: i.y - r }, o = { x: i.x + l, y: i.y - r }, h = { x: i.x + l, y: i.y + r }, p = { x: i.x - l, y: i.y + r }, C = { x: i.x, y: i.y - r - 20 / this.scale };
+        return [c, o, h, p, C].map((u) => ft(u, e, i.angle));
       }
     }
     return [];
   }
-  checkHover(t, i, n) {
-    const r = this.getHitCategory(t, i);
-    if (r) {
-      this.canvas.style.cursor = "pointer", this.hoverAnnotation = r;
+  checkHover(t, i, e) {
+    const l = this.getHitCategory(t, i);
+    if (l) {
+      this.canvas.style.cursor = "pointer", this.hoverAnnotation = l;
       return;
     }
     if (this.activeAnnotation && this.getHitHandle(t, i, this.activeAnnotation) !== -100) {
       this.canvas.style.cursor = "pointer";
       return;
     }
-    const o = this.getHitAnnotation(n);
-    o ? (this.canvas.style.cursor = "move", this.hoverAnnotation = o) : (this.canvas.style.cursor = "default", this.hoverAnnotation = null);
+    const r = this.getHitAnnotation(e);
+    r ? (this.canvas.style.cursor = "move", this.hoverAnnotation = r) : (this.canvas.style.cursor = "default", this.hoverAnnotation = null);
   }
   render() {
     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height), this.img.complete && this.img.width > 0 && this.ctx.drawImage(this.img, this.offset.x, this.offset.y, this.img.width * this.scale, this.img.height * this.scale), this.annotations.forEach((t) => {
@@ -433,42 +433,42 @@ class Kt {
     }), this.activeAnnotation && this.drawItem(this.activeAnnotation, !0), this.renderCategories();
   }
   renderCategories() {
-    const t = this.annotations.filter((d) => d.type === "category");
+    const t = this.annotations.filter((h) => h.type === "category");
     if (t.length === 0) return;
     this.ctx.save(), this.ctx.font = "14px sans-serif", this.ctx.textBaseline = "top";
     let i = 10;
-    const n = 10, r = 8, o = 4, c = 24, a = 8;
-    t.forEach((d) => {
-      const p = d.label || "Unlabeled", w = this.ctx.measureText(p).width + r * 2, u = this.activeAnnotation === d, f = this.hoverAnnotation === d;
-      this.ctx.fillStyle = u ? "#E3F2FD" : f ? "#F5F5F5" : "rgba(255, 255, 255, 0.9)", this.ctx.strokeStyle = u ? "#2196F3" : "#666", this.ctx.lineWidth = u ? 2 : 1, this.ctx.beginPath(), this.ctx.rect(i, n, w, c), this.ctx.fill(), this.ctx.stroke(), this.ctx.fillStyle = u ? "#1976D2" : "#333", this.ctx.fillText(p, i + r, n + o), i += w + a;
+    const e = 10, l = 8, r = 4, c = 24, o = 8;
+    t.forEach((h) => {
+      const p = h.label || "Unlabeled", C = this.ctx.measureText(p).width + l * 2, u = this.activeAnnotation === h, f = this.hoverAnnotation === h;
+      this.ctx.fillStyle = u ? "#E3F2FD" : f ? "#F5F5F5" : "rgba(255, 255, 255, 0.9)", this.ctx.strokeStyle = u ? "#2196F3" : "#666", this.ctx.lineWidth = u ? 2 : 1, this.ctx.beginPath(), this.ctx.rect(i, e, C, c), this.ctx.fill(), this.ctx.stroke(), this.ctx.fillStyle = u ? "#1976D2" : "#333", this.ctx.fillText(p, i + l, e + r), i += C + o;
     }), this.ctx.restore();
   }
   getHitCategory(t, i) {
-    const n = this.annotations.filter((w) => w.type === "category");
-    if (n.length === 0) return null;
+    const e = this.annotations.filter((C) => C.type === "category");
+    if (e.length === 0) return null;
     this.ctx.save(), this.ctx.font = "14px sans-serif";
-    let r = 10;
-    const o = 10, c = 8, a = 24, d = 8;
+    let l = 10;
+    const r = 10, c = 8, o = 24, h = 8;
     let p = null;
-    for (const w of n) {
-      const u = w.label || "Unlabeled", f = this.ctx.measureText(u).width + c * 2;
-      if (t >= r && t <= r + f && i >= o && i <= o + a) {
-        p = w;
+    for (const C of e) {
+      const u = C.label || "Unlabeled", f = this.ctx.measureText(u).width + c * 2;
+      if (t >= l && t <= l + f && i >= r && i <= r + o) {
+        p = C;
         break;
       }
-      r += f + d;
+      l += f + h;
     }
     return this.ctx.restore(), p;
   }
   drawItem(t, i) {
-    var o;
+    var r;
     if (this.visibleLabels.size > 0 && !this.visibleLabels.has(t.label) && !i)
       return;
     this.ctx.save();
-    const n = ((o = t.style) == null ? void 0 : o.strokeColor) || "#FF4081", r = i ? "#00E5FF" : n;
-    if (this.ctx.strokeStyle = r, this.ctx.lineWidth = 2, i ? this.ctx.fillStyle = "rgba(0, 229, 255, 0.2)" : this.ctx.fillStyle = this.hexToRgba(n, 0.2), t.type === "rectangle") {
-      const c = t.coordinates, a = this.toScreenCoords(c.x1, c.y1), d = this.toScreenCoords(c.x2, c.y2), p = Math.min(a.x, d.x), w = Math.min(a.y, d.y), u = Math.abs(a.x - d.x), f = Math.abs(a.y - d.y);
-      this.ctx.strokeRect(p, w, u, f), this.ctx.fillStyle = i ? "rgba(0, 229, 255, 0.2)" : "rgba(255, 64, 129, 0.2)", this.ctx.fillRect(p, w, u, f), i && this.drawHandles(this.getAnnotationHandles(t));
+    const e = ((r = t.style) == null ? void 0 : r.strokeColor) || "#FF4081", l = i ? "#00E5FF" : e;
+    if (this.ctx.strokeStyle = l, this.ctx.lineWidth = 2, i ? this.ctx.fillStyle = "rgba(0, 229, 255, 0.2)" : this.ctx.fillStyle = this.hexToRgba(e, 0.2), t.type === "rectangle") {
+      const c = t.coordinates, o = this.toScreenCoords(c.x1, c.y1), h = this.toScreenCoords(c.x2, c.y2), p = Math.min(o.x, h.x), C = Math.min(o.y, h.y), u = Math.abs(o.x - h.x), f = Math.abs(o.y - h.y);
+      this.ctx.strokeRect(p, C, u, f), this.ctx.fillStyle = i ? "rgba(0, 229, 255, 0.2)" : "rgba(255, 64, 129, 0.2)", this.ctx.fillRect(p, C, u, f), i && this.drawHandles(this.getAnnotationHandles(t));
     } else if (t.type === "polygon") {
       const c = t.coordinates;
       if (c.points.length === 0) {
@@ -476,40 +476,40 @@ class Kt {
         return;
       }
       this.ctx.beginPath();
-      const a = this.toScreenCoords(c.points[0].x, c.points[0].y);
-      this.ctx.moveTo(a.x, a.y);
-      for (let d = 1; d < c.points.length; d++) {
-        const p = this.toScreenCoords(c.points[d].x, c.points[d].y);
+      const o = this.toScreenCoords(c.points[0].x, c.points[0].y);
+      this.ctx.moveTo(o.x, o.y);
+      for (let h = 1; h < c.points.length; h++) {
+        const p = this.toScreenCoords(c.points[h].x, c.points[h].y);
         this.ctx.lineTo(p.x, p.y);
       }
       if (!this.isDrawing || t !== this.activeAnnotation)
         this.ctx.closePath();
       else if (this.lastMouseMovePoint) {
-        let d = this.lastMouseMovePoint;
+        let h = this.lastMouseMovePoint;
         if (this.isHoveringStartPoint && c.points.length > 0) {
-          d = c.points[0];
-          const w = this.toScreenCoords(c.points[0].x, c.points[0].y);
-          this.ctx.save(), this.ctx.beginPath(), this.ctx.arc(w.x, w.y, 10, 0, Math.PI * 2), this.ctx.fillStyle = "rgba(255, 215, 0, 0.6)", this.ctx.strokeStyle = "#FFFFFF", this.ctx.lineWidth = 2, this.ctx.fill(), this.ctx.stroke(), this.ctx.restore();
+          h = c.points[0];
+          const C = this.toScreenCoords(c.points[0].x, c.points[0].y);
+          this.ctx.save(), this.ctx.beginPath(), this.ctx.arc(C.x, C.y, 10, 0, Math.PI * 2), this.ctx.fillStyle = "rgba(255, 215, 0, 0.6)", this.ctx.strokeStyle = "#FFFFFF", this.ctx.lineWidth = 2, this.ctx.fill(), this.ctx.stroke(), this.ctx.restore();
         }
-        const p = this.toScreenCoords(d.x, d.y);
+        const p = this.toScreenCoords(h.x, h.y);
         this.ctx.lineTo(p.x, p.y);
       }
       this.ctx.stroke(), this.ctx.fillStyle = i ? "rgba(0, 229, 255, 0.2)" : "rgba(255, 64, 129, 0.2)", this.ctx.fill(), i && this.drawHandles(this.getAnnotationHandles(t));
     } else if (t.type === "rotatedRect") {
       const c = t.coordinates;
       this.ctx.translate(this.toScreenCoords(c.x, c.y).x, this.toScreenCoords(c.x, c.y).y), this.ctx.rotate(c.angle * Math.PI / 180);
-      const a = c.width * this.scale, d = c.height * this.scale;
-      this.ctx.strokeRect(-a / 2, -d / 2, a, d), this.ctx.fillStyle = i ? "rgba(0, 229, 255, 0.2)" : "rgba(255, 64, 129, 0.2)", this.ctx.fillRect(-a / 2, -d / 2, a, d), this.ctx.rotate(-c.angle * Math.PI / 180), this.ctx.translate(-this.toScreenCoords(c.x, c.y).x, -this.toScreenCoords(c.x, c.y).y), i && this.drawHandles(this.getAnnotationHandles(t));
-    } else t.type === "point" && t.coordinates.points.forEach((a) => {
-      const d = this.toScreenCoords(a.x, a.y);
-      this.ctx.beginPath(), this.ctx.arc(d.x, d.y, 5, 0, Math.PI * 2), this.ctx.fillStyle = i ? "#00E5FF" : n, this.ctx.fill(), this.ctx.stroke();
+      const o = c.width * this.scale, h = c.height * this.scale;
+      this.ctx.strokeRect(-o / 2, -h / 2, o, h), this.ctx.fillStyle = i ? "rgba(0, 229, 255, 0.2)" : "rgba(255, 64, 129, 0.2)", this.ctx.fillRect(-o / 2, -h / 2, o, h), this.ctx.rotate(-c.angle * Math.PI / 180), this.ctx.translate(-this.toScreenCoords(c.x, c.y).x, -this.toScreenCoords(c.x, c.y).y), i && this.drawHandles(this.getAnnotationHandles(t));
+    } else t.type === "point" && t.coordinates.points.forEach((o) => {
+      const h = this.toScreenCoords(o.x, o.y);
+      this.ctx.beginPath(), this.ctx.arc(h.x, h.y, 5, 0, Math.PI * 2), this.ctx.fillStyle = i ? "#00E5FF" : e, this.ctx.fill(), this.ctx.stroke();
     });
     this.ctx.restore();
   }
   drawHandles(t) {
     this.ctx.fillStyle = "#FFFFFF", this.ctx.strokeStyle = "#000000", this.ctx.lineWidth = 1, t.forEach((i) => {
-      const n = this.toScreenCoords(i.x, i.y);
-      this.ctx.fillRect(n.x - 4, n.y - 4, 8, 8), this.ctx.strokeRect(n.x - 4, n.y - 4, 8, 8);
+      const e = this.toScreenCoords(i.x, i.y);
+      this.ctx.fillRect(e.x - 4, e.y - 4, 8, 8), this.ctx.strokeRect(e.x - 4, e.y - 4, 8, 8);
     });
   }
 }
@@ -545,31 +545,31 @@ const Zt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
   <path d="M637.12 693.376l182.208 182.208a32 32 0 1 1-45.248 45.248L591.872 738.624a352 352 0 1 1 45.248-45.248z m-45.248-45.248A288 288 0 1 0 183.872 240.128a288 288 0 0 0 408 408zM416 448h96a32 32 0 0 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64h96v-96a32 32 0 0 1 64 0v96z" fill="currentColor"/>\r
 </svg>`, ue = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
   <path d="M637.12 693.376l182.208 182.208a32 32 0 1 1-45.248 45.248L591.872 738.624a352 352 0 1 1 45.248-45.248z m-45.248-45.248A288 288 0 1 0 183.872 240.128a288 288 0 0 0 408 408zM256 448h320a32 32 0 1 1 0 64H256a32 32 0 1 1 0-64z" fill="currentColor"/>\r
-</svg>`, ve = ["innerHTML"], me = /* @__PURE__ */ Q({
+</svg>`, ve = ["innerHTML"], me = /* @__PURE__ */ G({
   __name: "SvgIcon",
   props: {
     name: {},
     size: {}
   },
   setup(m) {
-    const t = m, i = k(""), n = /* @__PURE__ */ Object.assign({ "../assets/svg/aim.svg": Zt, "../assets/svg/back.svg": Qt, "../assets/svg/connection.svg": te, "../assets/svg/crop.svg": ee, "../assets/svg/delete.svg": ne, "../assets/svg/download.svg": se, "../assets/svg/edit.svg": ie, "../assets/svg/hide.svg": oe, "../assets/svg/pointer.svg": ae, "../assets/svg/price-tag.svg": le, "../assets/svg/rank.svg": re, "../assets/svg/refresh-right.svg": ce, "../assets/svg/right.svg": he, "../assets/svg/view.svg": de, "../assets/svg/zoom-in.svg": ge, "../assets/svg/zoom-out.svg": ue });
+    const t = m, i = k(""), e = /* @__PURE__ */ Object.assign({ "../assets/svg/aim.svg": Zt, "../assets/svg/back.svg": Qt, "../assets/svg/connection.svg": te, "../assets/svg/crop.svg": ee, "../assets/svg/delete.svg": ne, "../assets/svg/download.svg": se, "../assets/svg/edit.svg": ie, "../assets/svg/hide.svg": oe, "../assets/svg/pointer.svg": ae, "../assets/svg/price-tag.svg": le, "../assets/svg/rank.svg": re, "../assets/svg/refresh-right.svg": ce, "../assets/svg/right.svg": he, "../assets/svg/view.svg": de, "../assets/svg/zoom-in.svg": ge, "../assets/svg/zoom-out.svg": ue });
     return Xt(() => {
-      const r = `../assets/svg/${t.name}.svg`, o = n[r];
-      o ? i.value = o : (console.warn(`Icon ${t.name} not found at path ${r}`), i.value = "");
-    }), (r, o) => (y(), b("i", {
-      class: E(["svg-icon", [m.size ? `size-${m.size}` : ""]]),
+      const l = `../assets/svg/${t.name}.svg`, r = e[l];
+      r ? i.value = r : (console.warn(`Icon ${t.name} not found at path ${l}`), i.value = "");
+    }), (l, r) => (y(), x("i", {
+      class: V(["svg-icon", [m.size ? `size-${m.size}` : ""]]),
       innerHTML: i.value
     }, null, 10, ve));
   }
-}), tt = (m, t) => {
+}), K = (m, t) => {
   const i = m.__vccOpts || m;
-  for (const [n, r] of t)
-    i[n] = r;
+  for (const [e, l] of t)
+    i[e] = l;
   return i;
-}, T = /* @__PURE__ */ tt(me, [["__scopeId", "data-v-3928607b"]]), fe = {
+}, P = /* @__PURE__ */ K(me, [["__scopeId", "data-v-3928607b"]]), fe = {
   key: 0,
   class: "image-list-sidebar"
-}, ye = { class: "image-list-title" }, pe = { class: "image-list-scroll" }, be = ["onClick"], xe = { class: "image-list-stage" }, we = ["src", "alt"], Ce = {
+}, ye = { class: "image-list-title" }, pe = { class: "image-list-scroll" }, xe = ["onClick"], be = { class: "image-list-stage" }, we = ["src", "alt"], Ce = {
   key: 0,
   class: "thumb-overlay-layer"
 }, _e = {
@@ -589,13 +589,13 @@ const Zt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
 }, Le = {
   key: 1,
   class: "batch-nav"
-}, De = ["disabled"], Re = ["disabled"], Be = {
+}, Be = ["disabled"], De = ["disabled"], Re = {
   key: 2,
   class: "right-sidebar"
 }, Ue = { class: "label-list" }, Fe = { class: "label-row" }, Ee = ["onUpdate:modelValue", "onChange"], Oe = ["title"], Ve = ["onClick"], Ne = { class: "action-icon more-actions" }, We = ["onClick"], Je = {
   key: 3,
   class: "modal-overlay"
-}, je = { class: "modal-content" }, Xe = { class: "form-group" }, Ye = { class: "form-group" }, qe = { class: "color-input-wrapper" }, Ge = /* @__PURE__ */ Q({
+}, je = { class: "modal-content" }, Xe = { class: "form-group" }, Ye = { class: "form-group" }, qe = { class: "color-input-wrapper" }, Ge = /* @__PURE__ */ G({
   __name: "ImageAnnotator",
   props: {
     annotationTypes: { default: () => ["rectangle", "polygon", "point", "rotatedRect"] },
@@ -613,401 +613,401 @@ const Zt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
   },
   emits: ["annotationChange", "batchChange", "labelChange", "ready", "error", "tool:change", "viewport:change", "annotation:add", "annotation:update", "annotation:delete", "annotation:select", "prediction:loaded", "prediction:apply", "prediction:reject"],
   setup(m, { expose: t, emit: i }) {
-    const n = m, r = i, o = k(null), c = k(null), a = k(null), d = k(null), p = k(0), w = k(""), u = k([]), f = k(""), _ = k(!1), M = k({ name: "", color: "#FF0000" }), B = k("none"), D = k([]), F = k({}), et = U(() => d.value === "select" && !!w.value), Y = (e) => {
-      if (!e || F.value[e]) return;
+    const e = m, l = i, r = k(null), c = k(null), o = k(null), h = k(null), p = k(0), C = k(""), u = k([]), f = k(""), A = k(!1), T = k({ name: "", color: "#FF0000" }), B = k("none"), D = k([]), E = k({}), lt = O(() => h.value === "select" && !!C.value), Z = (n) => {
+      if (!n || E.value[n]) return;
       const s = new Image();
       s.onload = () => {
-        const l = s.naturalWidth || 1, h = s.naturalHeight || 1;
-        F.value = {
-          ...F.value,
-          [e]: { width: l, height: h }
+        const a = s.naturalWidth || 1, d = s.naturalHeight || 1;
+        E.value = {
+          ...E.value,
+          [n]: { width: a, height: d }
         };
-      }, s.src = e;
-    }, q = () => {
-      n.batchImages.forEach((e) => {
-        Y(e.imageUrl);
+      }, s.src = n;
+    }, X = () => {
+      e.batchImages.forEach((n) => {
+        Z(n.imageUrl);
       });
-    }, x = () => {
-      var l, h, v, C;
-      const e = n.batchImages[p.value], s = (e == null ? void 0 : e.imageUrl) || ((l = n.image) == null ? void 0 : l.url);
+    }, R = () => {
+      var a, d, v, _;
+      const n = e.batchImages[p.value], s = (n == null ? void 0 : n.imageUrl) || ((a = e.image) == null ? void 0 : a.url);
       return {
         eventId: `${Date.now()}-${Math.random().toString(36).slice(2, 10)}`,
         timestamp: Date.now(),
-        requestId: n.requestId,
-        taskId: (h = n.session) == null ? void 0 : h.taskId,
-        imageId: ((v = n.image) == null ? void 0 : v.id) || s,
-        operator: (C = n.session) == null ? void 0 : C.userId
+        requestId: e.requestId,
+        taskId: (d = e.session) == null ? void 0 : d.taskId,
+        imageId: ((v = e.image) == null ? void 0 : v.id) || s,
+        operator: (_ = e.session) == null ? void 0 : _.userId
       };
-    }, I = (e) => {
-      var h;
-      const s = e == null ? void 0 : e.action;
+    }, Q = (n) => {
+      var d;
+      const s = n == null ? void 0 : n.action;
       if (!s) return;
-      const l = {
-        meta: x(),
+      const a = {
+        meta: R(),
         action: s,
-        current: e == null ? void 0 : e.changedItem,
-        source: (h = e == null ? void 0 : e.changedItem) != null && h.predictionId ? "prediction" : "manual"
+        current: n == null ? void 0 : n.changedItem,
+        source: (d = n == null ? void 0 : n.changedItem) != null && d.predictionId ? "prediction" : "manual"
       };
-      s === "add" && r("annotation:add", l), s === "update" && r("annotation:update", l), s === "delete" && r("annotation:delete", l), s === "select" && r("annotation:select", l);
-    }, H = U(() => n.annotationTypes.filter((e) => e !== "category")), V = (e) => ({
+      s === "add" && l("annotation:add", a), s === "update" && l("annotation:update", a), s === "delete" && l("annotation:delete", a), s === "select" && l("annotation:select", a);
+    }, tt = O(() => e.annotationTypes.filter((n) => n !== "category")), et = (n) => ({
       rectangle: "crop",
       polygon: "connection",
       point: "aim",
       rotatedRect: "refresh-right",
       category: "price-tag"
-    })[e] || e, lt = (e) => ({
+    })[n] || n, b = (n) => ({
       rectangle: "矩形框",
       polygon: "多边形",
       point: "关键点",
       rotatedRect: "旋转矩形",
       category: "分类标签"
-    })[e] || e;
+    })[n] || n;
     Yt(() => {
-      if (q(), o.value) {
-        a.value = new Kt(o.value), a.value.on("annotationChange", (s) => {
-          var l, h;
+      if (X(), r.value) {
+        o.value = new Kt(r.value), o.value.on("annotationChange", (s) => {
+          var a, d;
           if (s.action === "add" && s.changedItem) {
-            const v = u.value.find((C) => C.id === f.value);
+            const v = u.value.find((_) => _.id === f.value);
             v && (s.changedItem.label = v.name, s.changedItem.labelId = v.id);
           }
-          s.action === "select" ? w.value = ((l = s.changedItem) == null ? void 0 : l.id) || "" : s.action === "delete" && ((h = s.changedItem) == null ? void 0 : h.id) === w.value && (w.value = ""), r("annotationChange", s), I(s);
-        }), N(), G();
-        const e = new ResizeObserver(() => {
+          s.action === "select" ? C.value = ((a = s.changedItem) == null ? void 0 : a.id) || "" : s.action === "delete" && ((d = s.changedItem) == null ? void 0 : d.id) === C.value && (C.value = ""), l("annotationChange", s), Q(s);
+        }), S(), w();
+        const n = new ResizeObserver(() => {
           var s;
-          (s = a.value) == null || s.resize();
+          (s = o.value) == null || s.resize();
         });
-        c.value && e.observe(c.value), n.defaultActiveType && W(n.defaultActiveType), r("ready", { meta: x() });
+        c.value && n.observe(c.value), e.defaultActiveType && U(e.defaultActiveType), l("ready", { meta: R() });
       }
     });
-    const G = () => {
-      if (!a.value) return;
-      const e = u.value.find((l) => l.id === f.value);
-      e && a.value.setLabelStyle(e.color);
-      const s = u.value.filter((l) => l.visible).map((l) => l.name);
-      a.value.setVisibleLabels(s);
-    }, N = () => {
-      var e;
-      if (a.value)
-        if (w.value = "", n.batchImages.length > 0) {
-          const s = n.batchImages[p.value];
-          a.value.loadImage(s.imageUrl), s.annotations ? a.value.setAnnotations(s.annotations) : a.value.setAnnotations([]);
-        } else (e = n.image) != null && e.url && a.value.loadImage(n.image.url);
-    }, W = (e) => {
-      var s, l;
-      if (d.value = e, w.value = "", e !== "pan" && e !== "select" && u.value.length === 0) {
+    const w = () => {
+      if (!o.value) return;
+      const n = u.value.find((a) => a.id === f.value);
+      n && o.value.setLabelStyle(n.color);
+      const s = u.value.filter((a) => a.visible).map((a) => a.name);
+      o.value.setVisibleLabels(s);
+    }, S = () => {
+      var n;
+      if (o.value)
+        if (C.value = "", e.batchImages.length > 0) {
+          const s = e.batchImages[p.value];
+          o.value.loadImage(s.imageUrl), s.annotations ? o.value.setAnnotations(s.annotations) : o.value.setAnnotations([]);
+        } else (n = e.image) != null && n.url && o.value.loadImage(e.image.url);
+    }, U = (n) => {
+      var s, a;
+      if (h.value = n, C.value = "", n !== "pan" && n !== "select" && u.value.length === 0) {
         alert("请先创建标签！");
         return;
       }
-      e === "pan" || e === "select" ? (s = a.value) == null || s.setTool(e) : (l = a.value) == null || l.setTool(e), r("tool:change", { meta: x(), tool: e });
-    }, ft = () => {
-      var e;
-      (e = a.value) != null && e.activeAnnotation && a.value.deleteAnnotation(a.value.activeAnnotation.id);
+      n === "pan" || n === "select" ? (s = o.value) == null || s.setTool(n) : (a = o.value) == null || a.setTool(n), l("tool:change", { meta: R(), tool: n });
     }, rt = () => {
-      a.value && r("viewport:change", {
-        meta: x(),
-        scale: a.value.scale,
-        offset: { ...a.value.offset }
+      var n;
+      (n = o.value) != null && n.activeAnnotation && o.value.deleteAnnotation(o.value.activeAnnotation.id);
+    }, ct = () => {
+      o.value && l("viewport:change", {
+        meta: R(),
+        scale: o.value.scale,
+        offset: { ...o.value.offset }
       });
     }, yt = () => {
-      var e;
-      (e = a.value) == null || e.zoom(1), rt();
+      var n;
+      (n = o.value) == null || n.zoom(1), ct();
     }, pt = () => {
-      var e;
-      (e = a.value) == null || e.zoom(-1), rt();
-    }, bt = () => {
-      M.value = { name: "", color: "#2196F3" }, _.value = !0;
-    }, ct = () => {
-      _.value = !1;
+      var n;
+      (n = o.value) == null || n.zoom(-1), ct();
     }, xt = () => {
-      if (!M.value.name.trim()) {
+      T.value = { name: "", color: "#2196F3" }, A.value = !0;
+    }, ht = () => {
+      A.value = !1;
+    }, bt = () => {
+      if (!T.value.name.trim()) {
         alert("请输入标签名称");
         return;
       }
       const s = {
         id: Date.now().toString(),
-        name: M.value.name,
-        color: M.value.color,
+        name: T.value.name,
+        color: T.value.color,
         visible: !0
       };
-      u.value.push(s), r("labelChange", u.value), u.value.length === 1 && J(s), ct();
-    }, J = (e) => {
+      u.value.push(s), l("labelChange", u.value), u.value.length === 1 && W(s), ht();
+    }, W = (n) => {
       var s;
-      f.value = e.id, (s = a.value) == null || s.setLabelStyle(e.color);
-    }, wt = (e, s) => {
-      if (!e.startsWith("#")) return e;
-      let l = 0, h = 0, v = 0;
-      return e.length === 4 ? (l = parseInt(e[1] + e[1], 16), h = parseInt(e[2] + e[2], 16), v = parseInt(e[3] + e[3], 16)) : e.length === 7 && (l = parseInt(e.slice(1, 3), 16), h = parseInt(e.slice(3, 5), 16), v = parseInt(e.slice(5, 7), 16)), `rgba(${l}, ${h}, ${v}, ${s})`;
-    }, Ct = (e) => {
+      f.value = n.id, (s = o.value) == null || s.setLabelStyle(n.color);
+    }, wt = (n, s) => {
+      if (!n.startsWith("#")) return n;
+      let a = 0, d = 0, v = 0;
+      return n.length === 4 ? (a = parseInt(n[1] + n[1], 16), d = parseInt(n[2] + n[2], 16), v = parseInt(n[3] + n[3], 16)) : n.length === 7 && (a = parseInt(n.slice(1, 3), 16), d = parseInt(n.slice(3, 5), 16), v = parseInt(n.slice(5, 7), 16)), `rgba(${a}, ${d}, ${v}, ${s})`;
+    }, Ct = (n) => {
       var s;
-      if (e.id === f.value && ((s = a.value) == null || s.setLabelStyle(e.color)), a.value) {
-        const l = a.value.getAnnotations();
-        let h = !1;
-        l.forEach((v) => {
-          v.label === e.name && (v.style || (v.style = {}), v.style.strokeColor = e.color, v.style.fillColor = wt(e.color, 0.2), h = !0);
-        }), h && a.value.render();
+      if (n.id === f.value && ((s = o.value) == null || s.setLabelStyle(n.color)), o.value) {
+        const a = o.value.getAnnotations();
+        let d = !1;
+        a.forEach((v) => {
+          v.label === n.name && (v.style || (v.style = {}), v.style.strokeColor = n.color, v.style.fillColor = wt(n.color, 0.2), d = !0);
+        }), d && o.value.render();
       }
-      r("labelChange", u.value);
-    }, _t = (e) => {
-      e.visible = !e.visible, G();
-    }, At = (e) => {
-      const s = u.value.findIndex((l) => l.id === e);
-      s > -1 && (u.value.splice(s, 1), r("labelChange", u.value), f.value === e && (f.value = u.value.length > 0 ? u.value[0].id : "", f.value && J(u.value[0])), G());
+      l("labelChange", u.value);
+    }, _t = (n) => {
+      n.visible = !n.visible, w();
+    }, At = (n) => {
+      const s = u.value.findIndex((a) => a.id === n);
+      s > -1 && (u.value.splice(s, 1), l("labelChange", u.value), f.value === n && (f.value = u.value.length > 0 ? u.value[0].id : "", f.value && W(u.value[0])), w());
     };
-    j(() => n.labels, (e) => {
-      const s = JSON.parse(JSON.stringify(e || []));
+    J(() => e.labels, (n) => {
+      const s = JSON.parse(JSON.stringify(n || []));
       if (u.value = s, u.value.length > 0)
-        if (!f.value || !u.value.find((l) => l.id === f.value))
-          J(u.value[0]);
+        if (!f.value || !u.value.find((a) => a.id === f.value))
+          W(u.value[0]);
         else {
-          const l = u.value.find((h) => h.id === f.value);
-          l && J(l);
+          const a = u.value.find((d) => d.id === f.value);
+          a && W(a);
         }
       else
         f.value = "";
-      G();
+      w();
     }, { immediate: !0, deep: !0 });
     const It = () => {
-      p.value > 0 && (nt(), p.value--, N(), st());
+      p.value > 0 && (nt(), p.value--, S(), st());
     }, kt = () => {
-      p.value < n.batchImages.length - 1 && (nt(), p.value++, N(), st());
+      p.value < e.batchImages.length - 1 && (nt(), p.value++, S(), st());
     }, nt = () => {
-      if (a.value) {
-        const e = a.value.getAnnotations();
-        n.batchImages[p.value].annotations = e;
+      if (o.value) {
+        const n = o.value.getAnnotations();
+        e.batchImages[p.value].annotations = n;
       }
     }, st = () => {
-      const e = n.batchImages[p.value];
-      r("batchChange", {
+      const n = e.batchImages[p.value];
+      l("batchChange", {
         currentIndex: p.value,
-        total: n.batchImages.length,
-        currentImageUrl: e.imageUrl,
-        currentAnnotations: e.annotations || []
+        total: e.batchImages.length,
+        currentImageUrl: n.imageUrl,
+        currentAnnotations: n.annotations || []
       });
-    }, ht = (e = []) => {
+    }, dt = (n = []) => {
       var v;
-      if (!a.value) return;
-      if (D.value = JSON.parse(JSON.stringify(e)), D.value.length === 0) {
+      if (!o.value) return;
+      if (D.value = JSON.parse(JSON.stringify(n)), D.value.length === 0) {
         B.value = "none";
         return;
       }
       B.value = "loaded";
-      const l = (a.value.getAnnotations() || []).filter((C) => !C.predictionId), h = D.value.map((C) => {
-        const S = JSON.parse(JSON.stringify(C.annotation));
-        return S.id = S.id || `pred-${C.id}`, S.predictionId = C.id, S.modelRunId = C.modelRunId || S.modelRunId, S.confidence = C.confidence ?? S.confidence, S.reviewStatus = S.reviewStatus || "draft", S;
+      const a = (o.value.getAnnotations() || []).filter((_) => !_.predictionId), d = D.value.map((_) => {
+        const M = JSON.parse(JSON.stringify(_.annotation));
+        return M.id = M.id || `pred-${_.id}`, M.predictionId = _.id, M.modelRunId = _.modelRunId || M.modelRunId, M.confidence = _.confidence ?? M.confidence, M.reviewStatus = M.reviewStatus || "draft", M;
       });
-      a.value.setAnnotations([...l, ...h]), r("prediction:loaded", {
-        meta: x(),
+      o.value.setAnnotations([...a, ...d]), l("prediction:loaded", {
+        meta: R(),
         modelRunId: (v = D.value[0]) == null ? void 0 : v.modelRunId,
         candidates: D.value
       });
-    }, St = (e, s) => {
+    }, St = (n, s) => {
       var v;
-      if (!a.value) return [];
+      if (!o.value) return [];
       B.value = "applying";
-      const h = (a.value.getAnnotations() || []).filter((C) => C.predictionId && e.includes(C.predictionId));
-      return h.forEach((C) => {
-        C.reviewStatus = "accepted";
-      }), B.value = "applied", r("prediction:apply", {
-        meta: x(),
-        modelRunId: (v = h[0]) == null ? void 0 : v.modelRunId,
-        candidateIds: e,
+      const d = (o.value.getAnnotations() || []).filter((_) => _.predictionId && n.includes(_.predictionId));
+      return d.forEach((_) => {
+        _.reviewStatus = "accepted";
+      }), B.value = "applied", l("prediction:apply", {
+        meta: R(),
+        modelRunId: (v = d[0]) == null ? void 0 : v.modelRunId,
+        candidateIds: n,
         threshold: s,
-        acceptedAnnotations: h
-      }), a.value.render(), h;
-    }, Mt = (e, s) => {
+        acceptedAnnotations: d
+      }), o.value.render(), d;
+    }, Mt = (n, s) => {
       var v;
-      if (!a.value) return;
-      const l = a.value.getAnnotations() || [], h = l.filter((C) => !(C.predictionId && e.includes(C.predictionId)));
-      a.value.setAnnotations(h), r("prediction:reject", {
-        meta: x(),
-        modelRunId: (v = l.find((C) => C.predictionId && e.includes(C.predictionId))) == null ? void 0 : v.modelRunId,
-        candidateIds: e,
+      if (!o.value) return;
+      const a = o.value.getAnnotations() || [], d = a.filter((_) => !(_.predictionId && n.includes(_.predictionId)));
+      o.value.setAnnotations(d), l("prediction:reject", {
+        meta: R(),
+        modelRunId: (v = a.find((_) => _.predictionId && n.includes(_.predictionId))) == null ? void 0 : v.modelRunId,
+        candidateIds: n,
         reason: s
       });
-    }, zt = (e, s = []) => {
-      a.value && (a.value.loadImage(e.url), a.value.setAnnotations(s));
-    }, $t = (e) => {
+    }, zt = (n, s = []) => {
+      o.value && (o.value.loadImage(n.url), o.value.setAnnotations(s));
+    }, $t = (n) => {
       var s;
-      (s = a.value) == null || s.setAnnotations(e);
-    }, dt = () => {
-      var e;
-      return ((e = a.value) == null ? void 0 : e.getAnnotations()) || [];
-    }, Tt = (e = "json") => {
-      var l, h;
-      const s = dt();
+      (s = o.value) == null || s.setAnnotations(n);
+    }, gt = () => {
+      var n;
+      return ((n = o.value) == null ? void 0 : n.getAnnotations()) || [];
+    }, Tt = (n = "json") => {
+      var a, d;
+      const s = gt();
       return {
-        format: e,
-        image: ((l = n.batchImages[p.value]) == null ? void 0 : l.imageUrl) || ((h = n.image) == null ? void 0 : h.url) || "",
+        format: n,
+        image: ((a = e.batchImages[p.value]) == null ? void 0 : a.imageUrl) || ((d = e.image) == null ? void 0 : d.url) || "",
         annotations: s
       };
-    }, gt = (e) => {
-      e >= 0 && e < n.batchImages.length && (nt(), p.value = e, N(), st());
-    }, Pt = (e) => {
+    }, ut = (n) => {
+      n >= 0 && n < e.batchImages.length && (nt(), p.value = n, S(), st());
+    }, Pt = (n) => {
       var s;
-      return e === p.value && a.value ? a.value.getAnnotations() || [] : ((s = n.batchImages[e]) == null ? void 0 : s.annotations) || [];
-    }, Ht = (e) => e.type === "rectangle", Lt = (e) => e.type === "polygon", Dt = (e) => e.type === "point", Rt = (e) => e.type === "rotatedRect", K = (e) => {
-      var l, h;
-      const s = (l = u.value.find((v) => v.name === e.label)) == null ? void 0 : l.color;
-      return ((h = e.style) == null ? void 0 : h.strokeColor) || s || "#409eff";
-    }, ut = (e) => {
-      const s = e.coordinates;
+      return n === p.value && o.value ? o.value.getAnnotations() || [] : ((s = e.batchImages[n]) == null ? void 0 : s.annotations) || [];
+    }, Ht = (n) => n.type === "rectangle", Lt = (n) => n.type === "polygon", Bt = (n) => n.type === "point", Dt = (n) => n.type === "rotatedRect", Y = (n) => {
+      var a, d;
+      const s = (a = u.value.find((v) => v.name === n.label)) == null ? void 0 : a.color;
+      return ((d = n.style) == null ? void 0 : d.strokeColor) || s || "#409eff";
+    }, vt = (n) => {
+      const s = n.coordinates;
       return (s == null ? void 0 : s.points) || [];
-    }, Z = (e) => {
-      const s = n.batchImages[e];
+    }, q = (n) => {
+      const s = e.batchImages[n];
       if (s != null && s.width && (s != null && s.height))
         return { width: s.width, height: s.height };
-      const l = s != null && s.imageUrl ? F.value[s.imageUrl] : void 0;
-      return l || (s != null && s.imageUrl && Y(s.imageUrl), { width: 1, height: 1 });
-    }, Bt = (e) => {
-      const s = n.batchImages[e];
-      return s != null && s.width && (s != null && s.height) ? !0 : s != null && s.imageUrl ? !!F.value[s.imageUrl] : !1;
-    }, Ut = (e, s) => {
-      const l = s.coordinates, h = Z(e), v = K(s), C = Math.min(l.x1, l.x2), S = Math.min(l.y1, l.y2), Nt = Math.max(l.x1, l.x2), Wt = Math.max(l.y1, l.y2);
+      const a = s != null && s.imageUrl ? E.value[s.imageUrl] : void 0;
+      return a || (s != null && s.imageUrl && Z(s.imageUrl), { width: 1, height: 1 });
+    }, Rt = (n) => {
+      const s = e.batchImages[n];
+      return s != null && s.width && (s != null && s.height) ? !0 : s != null && s.imageUrl ? !!E.value[s.imageUrl] : !1;
+    }, Ut = (n, s) => {
+      const a = s.coordinates, d = q(n), v = Y(s), _ = Math.min(a.x1, a.x2), M = Math.min(a.y1, a.y2), Nt = Math.max(a.x1, a.x2), Wt = Math.max(a.y1, a.y2);
       return {
-        left: `${C / h.width * 100}%`,
-        top: `${S / h.height * 100}%`,
-        width: `${(Nt - C) / h.width * 100}%`,
-        height: `${(Wt - S) / h.height * 100}%`,
+        left: `${_ / d.width * 100}%`,
+        top: `${M / d.height * 100}%`,
+        width: `${(Nt - _) / d.width * 100}%`,
+        height: `${(Wt - M) / d.height * 100}%`,
         borderColor: v,
         backgroundColor: `${v}22`
       };
-    }, Ft = (e, s) => {
-      const l = Z(e);
-      return ut(s).map((h) => `${h.x / l.width * 100},${h.y / l.height * 100}`).join(" ");
-    }, Et = (e) => {
-      const s = K(e);
+    }, Ft = (n, s) => {
+      const a = q(n);
+      return vt(s).map((d) => `${d.x / a.width * 100},${d.y / a.height * 100}`).join(" ");
+    }, Et = (n) => {
+      const s = Y(n);
       return {
         fill: `${s}33`,
         stroke: s,
         strokeWidth: "1.4"
       };
-    }, Ot = (e, s, l) => {
-      const h = Z(e), v = K(l);
+    }, Ot = (n, s, a) => {
+      const d = q(n), v = Y(a);
       return {
-        left: `${s.x / h.width * 100}%`,
-        top: `${s.y / h.height * 100}%`,
+        left: `${s.x / d.width * 100}%`,
+        top: `${s.y / d.height * 100}%`,
         backgroundColor: v
       };
-    }, Vt = (e, s) => {
-      const l = s.coordinates, h = Z(e), v = K(s), C = Math.abs(l.width), S = Math.abs(l.height);
+    }, Vt = (n, s) => {
+      const a = s.coordinates, d = q(n), v = Y(s), _ = Math.abs(a.width), M = Math.abs(a.height);
       return {
-        left: `${(l.x - C / 2) / h.width * 100}%`,
-        top: `${(l.y - S / 2) / h.height * 100}%`,
-        width: `${C / h.width * 100}%`,
-        height: `${S / h.height * 100}%`,
-        transform: `rotate(${l.angle || 0}deg)`,
+        left: `${(a.x - _ / 2) / d.width * 100}%`,
+        top: `${(a.y - M / 2) / d.height * 100}%`,
+        width: `${_ / d.width * 100}%`,
+        height: `${M / d.height * 100}%`,
+        transform: `rotate(${a.angle || 0}deg)`,
         borderColor: v,
         backgroundColor: `${v}22`
       };
     };
     return t({
-      jumpTo: gt,
+      jumpTo: ut,
       setImage: zt,
       setAnnotations: $t,
-      getAnnotations: dt,
-      selectTool: W,
-      loadPredictionCandidates: ht,
+      getAnnotations: gt,
+      selectTool: U,
+      loadPredictionCandidates: dt,
       applyPredictions: St,
       rejectPredictions: Mt,
       exportAnnotations: Tt,
       getAllAnnotations: () => {
-        var e, s;
-        return n.batchImages.length > 0 ? n.batchImages : [{
-          imageUrl: ((e = n.image) == null ? void 0 : e.url) || "",
-          annotations: ((s = a.value) == null ? void 0 : s.getAnnotations()) || []
+        var n, s;
+        return e.batchImages.length > 0 ? e.batchImages : [{
+          imageUrl: ((n = e.image) == null ? void 0 : n.url) || "",
+          annotations: ((s = o.value) == null ? void 0 : s.getAnnotations()) || []
         }];
       },
       getCurrentAnnotation: () => {
-        var e, s, l;
+        var n, s, a;
         return {
-          imageUrl: ((e = n.batchImages[p.value]) == null ? void 0 : e.imageUrl) || ((s = n.image) == null ? void 0 : s.url) || "",
-          annotations: ((l = a.value) == null ? void 0 : l.getAnnotations()) || []
+          imageUrl: ((n = e.batchImages[p.value]) == null ? void 0 : n.imageUrl) || ((s = e.image) == null ? void 0 : s.url) || "",
+          annotations: ((a = o.value) == null ? void 0 : a.getAnnotations()) || []
         };
       }
-    }), j(() => {
-      var e;
-      return (e = n.image) == null ? void 0 : e.url;
+    }), J(() => {
+      var n;
+      return (n = e.image) == null ? void 0 : n.url;
     }, () => {
-      var e;
-      n.batchImages.length === 0 && ((e = n.image) != null && e.url) && N();
-    }), j(() => n.predictionCandidates, (e) => {
-      e && ht(e);
-    }, { immediate: !0, deep: !0 }), j(
-      () => n.batchImages.map((e) => `${e.imageUrl}:${e.width || ""}x${e.height || ""}`),
+      var n;
+      e.batchImages.length === 0 && ((n = e.image) != null && n.url) && S();
+    }), J(() => e.predictionCandidates, (n) => {
+      n && dt(n);
+    }, { immediate: !0, deep: !0 }), J(
+      () => e.batchImages.map((n) => `${n.imageUrl}:${n.width || ""}x${n.height || ""}`),
       () => {
-        q();
+        X();
       },
       { immediate: !0 }
-    ), (e, s) => (y(), b("div", {
-      class: E(["annotation-container", m.theme])
+    ), (n, s) => (y(), x("div", {
+      class: V(["annotation-container", m.theme])
     }, [
-      m.batchImages && m.batchImages.length > 0 ? (y(), b("div", fe, [
+      m.batchImages && m.batchImages.length > 0 ? (y(), x("div", fe, [
         g("div", ye, "批量图片（" + $(m.batchImages.length) + "）", 1),
         g("div", pe, [
-          (y(!0), b(L, null, R(m.batchImages, (l, h) => (y(), b("button", {
-            key: `${l.imageUrl}-${h}`,
-            class: E(["image-list-item", { active: h === p.value }]),
-            onClick: (v) => gt(h)
+          (y(!0), x(L, null, F(m.batchImages, (a, d) => (y(), x("button", {
+            key: `${a.imageUrl}-${d}`,
+            class: V(["image-list-item", { active: d === p.value }]),
+            onClick: (v) => ut(d)
           }, [
-            g("div", xe, [
+            g("div", be, [
               g("img", {
-                src: l.imageUrl,
-                alt: `第${h + 1}张`,
+                src: a.imageUrl,
+                alt: `第${d + 1}张`,
                 class: "image-list-thumb"
               }, null, 8, we),
-              Bt(h) ? (y(), b("div", Ce, [
-                (y(!0), b(L, null, R(Pt(h), (v) => (y(), b(L, {
+              Rt(d) ? (y(), x("div", Ce, [
+                (y(!0), x(L, null, F(Pt(d), (v) => (y(), x(L, {
                   key: v.id
                 }, [
-                  Ht(v) ? (y(), b("div", {
+                  Ht(v) ? (y(), x("div", {
                     key: 0,
                     class: "thumb-overlay-rect",
-                    style: O(Ut(h, v))
-                  }, null, 4)) : Lt(v) ? (y(), b("svg", _e, [
+                    style: N(Ut(d, v))
+                  }, null, 4)) : Lt(v) ? (y(), x("svg", _e, [
                     g("polygon", {
-                      points: Ft(h, v),
-                      style: O(Et(v))
+                      points: Ft(d, v),
+                      style: N(Et(v))
                     }, null, 12, Ae)
-                  ])) : Dt(v) ? (y(!0), b(L, { key: 2 }, R(ut(v), (C, S) => (y(), b("div", {
-                    key: `${v.id}-${S}`,
+                  ])) : Bt(v) ? (y(!0), x(L, { key: 2 }, F(vt(v), (_, M) => (y(), x("div", {
+                    key: `${v.id}-${M}`,
                     class: "thumb-overlay-point",
-                    style: O(Ot(h, C, v))
-                  }, null, 4))), 128)) : Rt(v) ? (y(), b("div", {
+                    style: N(Ot(d, _, v))
+                  }, null, 4))), 128)) : Dt(v) ? (y(), x("div", {
                     key: 3,
                     class: "thumb-overlay-rotated",
-                    style: O(Vt(h, v))
+                    style: N(Vt(d, v))
                   }, null, 4)) : z("", !0)
                 ], 64))), 128))
               ])) : z("", !0)
             ]),
-            g("span", Ie, "第 " + $(h + 1) + " 张", 1)
-          ], 10, be))), 128))
+            g("span", Ie, "第 " + $(d + 1) + " 张", 1)
+          ], 10, xe))), 128))
         ])
       ])) : z("", !0),
-      m.readOnly ? z("", !0) : (y(), b("div", ke, [
+      m.readOnly ? z("", !0) : (y(), x("div", ke, [
         g("div", {
-          class: E(["tool-btn", { active: d.value === "pan" }]),
-          onClick: s[0] || (s[0] = (l) => W("pan")),
+          class: V(["tool-btn", { active: h.value === "pan" }]),
+          onClick: s[0] || (s[0] = (a) => U("pan")),
           title: "拖动"
         }, [
-          P(T, { name: "rank" })
+          H(P, { name: "rank" })
         ], 2),
         g("div", {
-          class: E(["tool-btn", { active: d.value === "select" }]),
-          onClick: s[1] || (s[1] = (l) => W("select")),
+          class: V(["tool-btn", { active: h.value === "select" }]),
+          onClick: s[1] || (s[1] = (a) => U("select")),
           title: "选择"
         }, [
-          P(T, { name: "pointer" })
+          H(P, { name: "pointer" })
         ], 2),
         s[4] || (s[4] = g("div", { class: "divider" }, null, -1)),
-        (y(!0), b(L, null, R(H.value, (l) => (y(), b("div", {
-          key: l,
-          class: E(["tool-btn", { active: d.value === l }]),
-          onClick: (h) => W(l),
-          title: lt(l)
+        (y(!0), x(L, null, F(tt.value, (a) => (y(), x("div", {
+          key: a,
+          class: V(["tool-btn", { active: h.value === a }]),
+          onClick: (d) => U(a),
+          title: b(a)
         }, [
-          P(T, {
-            name: V(l)
+          H(P, {
+            name: et(a)
           }, null, 8, ["name"])
         ], 10, Se))), 128)),
         s[5] || (s[5] = g("div", { class: "divider" }, null, -1)),
@@ -1016,37 +1016,37 @@ const Zt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
           onClick: yt,
           title: "放大"
         }, [
-          P(T, { name: "zoom-in" })
+          H(P, { name: "zoom-in" })
         ]),
         g("div", {
           class: "tool-btn",
           onClick: pt,
           title: "缩小"
         }, [
-          P(T, { name: "zoom-out" })
+          H(P, { name: "zoom-out" })
         ]),
         s[6] || (s[6] = g("div", { class: "divider" }, null, -1)),
-        et.value ? (y(), b("div", {
+        lt.value ? (y(), x("div", {
           key: 0,
           class: "tool-btn",
-          onClick: ft,
+          onClick: rt,
           title: "删除选中"
         }, [
-          P(T, { name: "delete" })
+          H(P, { name: "delete" })
         ])) : z("", !0)
       ])),
       g("div", Me, [
-        m.readOnly ? z("", !0) : (y(), b("div", ze, [
+        m.readOnly ? z("", !0) : (y(), x("div", ze, [
           g("div", $e, [
             s[7] || (s[7] = g("span", { class: "label-text" }, "当前标签:", -1)),
             g("div", Te, [
-              (y(!0), b(L, null, R(u.value, (l) => (y(), b("div", {
-                key: l.id,
-                class: E(["tag-chip", { active: f.value === l.id }]),
-                style: O({ backgroundColor: l.color, borderColor: l.color }),
-                onClick: (h) => J(l)
-              }, $(l.name), 15, Pe))), 128)),
-              u.value.length === 0 ? (y(), b("div", He, "请在右侧创建标签")) : z("", !0)
+              (y(!0), x(L, null, F(u.value, (a) => (y(), x("div", {
+                key: a.id,
+                class: V(["tag-chip", { active: f.value === a.id }]),
+                style: N({ backgroundColor: a.color, borderColor: a.color }),
+                onClick: (d) => W(a)
+              }, $(a.name), 15, Pe))), 128)),
+              u.value.length === 0 ? (y(), x("div", He, "请在右侧创建标签")) : z("", !0)
             ])
           ])
         ])),
@@ -1057,66 +1057,66 @@ const Zt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
         }, [
           g("canvas", {
             ref_key: "canvasRef",
-            ref: o
+            ref: r
           }, null, 512)
         ], 512),
-        m.batchImages && m.batchImages.length > 0 ? (y(), b("div", Le, [
+        m.batchImages && m.batchImages.length > 0 ? (y(), x("div", Le, [
           g("button", {
             onClick: It,
             disabled: p.value <= 0
           }, [
-            P(T, { name: "back" }),
-            s[8] || (s[8] = X(" 上一张 ", -1))
-          ], 8, De),
+            H(P, { name: "back" }),
+            s[8] || (s[8] = j(" 上一张 ", -1))
+          ], 8, Be),
           g("span", null, $(p.value + 1) + " / " + $(m.batchImages.length), 1),
           g("button", {
             onClick: kt,
             disabled: p.value >= m.batchImages.length - 1
           }, [
-            s[9] || (s[9] = X(" 下一张 ", -1)),
-            P(T, { name: "right" })
-          ], 8, Re)
+            s[9] || (s[9] = j(" 下一张 ", -1)),
+            H(P, { name: "right" })
+          ], 8, De)
         ])) : z("", !0)
       ]),
-      m.readOnly ? z("", !0) : (y(), b("div", Be, [
+      m.readOnly ? z("", !0) : (y(), x("div", Re, [
         g("div", { class: "sidebar-header" }, [
           s[10] || (s[10] = g("h3", null, "标签管理", -1)),
           g("button", {
             class: "add-btn",
-            onClick: bt
+            onClick: xt
           }, "添加标签")
         ]),
         g("div", Ue, [
-          (y(!0), b(L, null, R(u.value, (l) => (y(), b("div", {
-            key: l.id,
+          (y(!0), x(L, null, F(u.value, (a) => (y(), x("div", {
+            key: a.id,
             class: "label-item"
           }, [
             g("div", Fe, [
               g("label", {
                 class: "color-wrapper",
-                style: O({ backgroundColor: l.color })
+                style: N({ backgroundColor: a.color })
               }, [
                 it(g("input", {
                   type: "color",
-                  "onUpdate:modelValue": (h) => l.color = h,
-                  onChange: (h) => Ct(l),
+                  "onUpdate:modelValue": (d) => a.color = d,
+                  onChange: (d) => Ct(a),
                   style: { visibility: "hidden", width: "0", height: "0" }
                 }, null, 40, Ee), [
-                  [ot, l.color]
+                  [ot, a.color]
                 ])
               ], 4),
               g("span", {
                 class: "label-name",
-                title: l.name
-              }, $(l.name), 9, Oe),
+                title: a.name
+              }, $(a.name), 9, Oe),
               g("span", {
                 class: "action-icon eye",
-                onClick: (h) => _t(l)
+                onClick: (d) => _t(a)
               }, [
-                l.visible ? (y(), vt(T, {
+                a.visible ? (y(), mt(P, {
                   key: 0,
                   name: "view"
-                })) : (y(), vt(T, {
+                })) : (y(), mt(P, {
                   key: 1,
                   name: "hide"
                 }))
@@ -1125,27 +1125,27 @@ const Zt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
                 s[11] || (s[11] = g("span", { class: "dots" }, "•••", -1)),
                 g("span", {
                   class: "delete-btn",
-                  onClick: (h) => At(l.id),
+                  onClick: (d) => At(a.id),
                   title: "删除"
                 }, [
-                  P(T, { name: "delete" })
+                  H(P, { name: "delete" })
                 ], 8, We)
               ])
             ])
           ]))), 128))
         ])
       ])),
-      _.value ? (y(), b("div", Je, [
+      A.value ? (y(), x("div", Je, [
         g("div", je, [
           s[14] || (s[14] = g("h3", null, "新增标签", -1)),
           g("div", Xe, [
             s[12] || (s[12] = g("label", null, "名称", -1)),
             it(g("input", {
-              "onUpdate:modelValue": s[2] || (s[2] = (l) => M.value.name = l),
+              "onUpdate:modelValue": s[2] || (s[2] = (a) => T.value.name = a),
               placeholder: "请输入标签名称",
               class: "modal-input"
             }, null, 512), [
-              [ot, M.value.name]
+              [ot, T.value.name]
             ])
           ]),
           g("div", Ye, [
@@ -1153,21 +1153,21 @@ const Zt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
             g("div", qe, [
               it(g("input", {
                 type: "color",
-                "onUpdate:modelValue": s[3] || (s[3] = (l) => M.value.color = l),
+                "onUpdate:modelValue": s[3] || (s[3] = (a) => T.value.color = a),
                 class: "modal-color-picker"
               }, null, 512), [
-                [ot, M.value.color]
+                [ot, T.value.color]
               ]),
-              g("span", null, $(M.value.color), 1)
+              g("span", null, $(T.value.color), 1)
             ])
           ]),
           g("div", { class: "modal-actions" }, [
             g("button", {
-              onClick: ct,
+              onClick: ht,
               class: "cancel-btn"
             }, "取消"),
             g("button", {
-              onClick: xt,
+              onClick: bt,
               class: "confirm-btn"
             }, "确认")
           ])
@@ -1175,13 +1175,13 @@ const Zt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
       ])) : z("", !0)
     ], 2));
   }
-}), Ke = /* @__PURE__ */ tt(Ge, [["__scopeId", "data-v-22c2957b"]]), Ze = {
+}), Ke = /* @__PURE__ */ K(Ge, [["__scopeId", "data-v-22c2957b"]]), Ze = {
   class: "thumbnail-wrapper",
   ref: "wrapper"
 }, Qe = ["src", "alt"], tn = ["viewBox"], en = ["x", "y", "width", "height", "stroke"], nn = ["points", "stroke"], sn = ["x", "y", "fill"], on = {
   key: 1,
   class: "loading-placeholder"
-}, an = /* @__PURE__ */ Q({
+}, an = /* @__PURE__ */ G({
   __name: "AnnotationThumbnail",
   props: {
     src: {},
@@ -1190,22 +1190,22 @@ const Zt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
     labels: {}
   },
   setup(m) {
-    const t = m, i = k(null), n = k(!1), r = k(0), o = k(0), c = () => {
-      i.value && (r.value = i.value.naturalWidth, o.value = i.value.naturalHeight, n.value = !0);
-    }, a = (u) => {
+    const t = m, i = k(null), e = k(!1), l = k(0), r = k(0), c = () => {
+      i.value && (l.value = i.value.naturalWidth, r.value = i.value.naturalHeight, e.value = !0);
+    }, o = (u) => {
       var f;
       if ((f = u.style) != null && f.strokeColor) return u.style.strokeColor;
       if (t.labels) {
-        const _ = t.labels.find((M) => M.name === u.label);
-        if (_) return _.color;
+        const A = t.labels.find((T) => T.name === u.label);
+        if (A) return A.color;
       }
       return "#FF0000";
-    }, d = (u) => {
-      const f = u.coordinates, _ = Math.min(f.x1, f.x2), M = Math.min(f.y1, f.y2), B = Math.abs(f.x1 - f.x2), D = Math.abs(f.y1 - f.y2);
-      return { x: _, y: M, width: B, height: D };
-    }, p = (u) => u.coordinates.points.map((_) => `${_.x},${_.y}`).join(" "), w = (u) => {
+    }, h = (u) => {
+      const f = u.coordinates, A = Math.min(f.x1, f.x2), T = Math.min(f.y1, f.y2), B = Math.abs(f.x1 - f.x2), D = Math.abs(f.y1 - f.y2);
+      return { x: A, y: T, width: B, height: D };
+    }, p = (u) => u.coordinates.points.map((A) => `${A.x},${A.y}`).join(" "), C = (u) => {
       if (u.type === "rectangle") {
-        const f = d(u);
+        const f = h(u);
         return { x: f.x, y: f.y - 5 };
       } else if (u.type === "polygon") {
         const f = u.coordinates.points;
@@ -1213,7 +1213,7 @@ const Zt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
       }
       return { x: 0, y: 0 };
     };
-    return (u, f) => (y(), b("div", Ze, [
+    return (u, f) => (y(), x("div", Ze, [
       g("img", {
         ref_key: "img",
         ref: i,
@@ -1222,55 +1222,55 @@ const Zt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
         onLoad: c,
         alt: m.alt
       }, null, 40, Qe),
-      n.value ? (y(), b("svg", {
+      e.value ? (y(), x("svg", {
         key: 0,
         class: "annotation-overlay",
-        viewBox: `0 0 ${r.value} ${o.value}`,
+        viewBox: `0 0 ${l.value} ${r.value}`,
         preserveAspectRatio: "none"
       }, [
-        (y(!0), b(L, null, R(m.annotations, (_) => (y(), b(L, {
-          key: _.id
+        (y(!0), x(L, null, F(m.annotations, (A) => (y(), x(L, {
+          key: A.id
         }, [
-          _.type === "rectangle" ? (y(), b("rect", {
+          A.type === "rectangle" ? (y(), x("rect", {
             key: 0,
-            x: d(_).x,
-            y: d(_).y,
-            width: d(_).width,
-            height: d(_).height,
-            stroke: a(_),
+            x: h(A).x,
+            y: h(A).y,
+            width: h(A).width,
+            height: h(A).height,
+            stroke: o(A),
             "stroke-width": "2",
             fill: "transparent"
           }, null, 8, en)) : z("", !0),
-          _.type === "polygon" ? (y(), b("polygon", {
+          A.type === "polygon" ? (y(), x("polygon", {
             key: 1,
-            points: p(_),
-            stroke: a(_),
+            points: p(A),
+            stroke: o(A),
             "stroke-width": "2",
             fill: "transparent"
           }, null, 8, nn)) : z("", !0),
-          _.label ? (y(), b("text", {
+          A.label ? (y(), x("text", {
             key: 2,
-            x: w(_).x,
-            y: w(_).y,
-            fill: a(_),
+            x: C(A).x,
+            y: C(A).y,
+            fill: o(A),
             "font-size": "14",
             "font-weight": "bold",
             class: "anno-label"
-          }, $(_.label), 9, sn)) : z("", !0)
+          }, $(A.label), 9, sn)) : z("", !0)
         ], 64))), 128))
-      ], 8, tn)) : (y(), b("div", on, "Loading..."))
+      ], 8, tn)) : (y(), x("div", on, "Loading..."))
     ], 512));
   }
-}), ln = /* @__PURE__ */ tt(an, [["__scopeId", "data-v-78bcbe0c"]]), rn = { class: "batch-annotator" }, cn = {
+}), ln = /* @__PURE__ */ K(an, [["__scopeId", "data-v-78bcbe0c"]]), rn = { class: "batch-annotator" }, cn = {
   key: 0,
   class: "gallery-view"
 }, hn = { class: "gallery-header" }, dn = { class: "label-summary" }, gn = { class: "gallery-grid" }, un = ["onClick"], vn = { class: "thumbnail-wrapper" }, mn = { class: "img-meta" }, fn = { class: "img-index" }, yn = { class: "anno-count" }, pn = {
   key: 0,
   class: "bottom-bar"
-}, bn = {
+}, xn = {
   key: 1,
   class: "editor-view"
-}, xn = { class: "editor-header" }, wn = { class: "header-left" }, Cn = { class: "editor-title" }, _n = { class: "editor-content" }, An = /* @__PURE__ */ Q({
+}, bn = { class: "editor-header" }, wn = { class: "header-left" }, Cn = { class: "editor-title" }, _n = { class: "editor-content" }, An = /* @__PURE__ */ G({
   __name: "BatchAnnotator",
   props: {
     images: {},
@@ -1279,128 +1279,142 @@ const Zt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
     clickToEnterEditor: { type: Boolean }
   },
   emits: ["export", "update:images", "imageClick"],
-  setup(m, { emit: t }) {
-    const i = m, n = t, r = k("gallery"), o = k([]), c = k(0), a = k(null), d = U(() => {
-      var x, I;
-      return ((I = (x = i.actionBar) == null ? void 0 : x.annotateButton) == null ? void 0 : I.show) === !0;
-    }), p = U(() => {
-      var x, I;
-      return ((I = (x = i.actionBar) == null ? void 0 : x.exportButton) == null ? void 0 : I.show) === !0;
-    }), w = U(() => d.value || p.value), u = U(() => {
-      var x, I;
-      return ((I = (x = i.actionBar) == null ? void 0 : x.annotateButton) == null ? void 0 : I.text) || "手动标注";
-    }), f = U(() => {
-      var x, I;
-      return ((I = (x = i.actionBar) == null ? void 0 : x.exportButton) == null ? void 0 : I.text) || "导出";
-    }), _ = U(() => i.clickToEnterEditor !== !1);
-    j(() => i.images, (x) => {
-      o.value = JSON.parse(JSON.stringify(x));
+  setup(m, { expose: t, emit: i }) {
+    const e = m, l = i, r = k("gallery"), c = k([]), o = k(0), h = k(null), p = O(() => {
+      var b, w;
+      return ((w = (b = e.actionBar) == null ? void 0 : b.annotateButton) == null ? void 0 : w.show) === !0;
+    }), C = O(() => {
+      var b, w;
+      return ((w = (b = e.actionBar) == null ? void 0 : b.exportButton) == null ? void 0 : w.show) === !0;
+    }), u = O(() => p.value || C.value), f = O(() => {
+      var b, w;
+      return ((w = (b = e.actionBar) == null ? void 0 : b.annotateButton) == null ? void 0 : w.text) || "手动标注";
+    }), A = O(() => {
+      var b, w;
+      return ((w = (b = e.actionBar) == null ? void 0 : b.exportButton) == null ? void 0 : w.text) || "导出";
+    }), T = O(() => e.clickToEnterEditor !== !1);
+    J(() => e.images, (b) => {
+      c.value = JSON.parse(JSON.stringify(b));
     }, { immediate: !0, deep: !0 });
-    const M = (x) => {
-      c.value = x, r.value = "editor", qt(() => {
-        a.value && a.value.jumpTo && a.value.jumpTo(x);
+    const B = (b) => {
+      o.value = b, r.value = "editor", qt(() => {
+        h.value && h.value.jumpTo && h.value.jumpTo(b);
       });
-    }, B = (x, I) => {
-      if (_.value) {
-        M(x);
+    }, D = (b, w) => {
+      if (T.value) {
+        B(b);
         return;
       }
-      n("imageClick", { index: x, image: I });
-    }, D = () => {
-      if (a.value && a.value.getCurrentAnnotation) {
-        const x = a.value.getCurrentAnnotation();
-        o.value[c.value] && (o.value[c.value].annotations = x.annotations);
+      l("imageClick", { index: b, imageId: w.id, image: w });
+    }, E = (b) => c.value.findIndex((w) => w.id === b);
+    t({
+      openImageById: (b) => {
+        const w = E(b);
+        return w < 0 ? !1 : (B(w), !0);
+      },
+      triggerImageClickById: (b) => {
+        const w = E(b);
+        if (w < 0)
+          return !1;
+        const S = c.value[w];
+        return S ? (l("imageClick", { index: w, imageId: S.id, image: S }), !0) : !1;
+      }
+    });
+    const X = () => {
+      if (h.value && h.value.getCurrentAnnotation) {
+        const b = h.value.getCurrentAnnotation();
+        c.value[o.value] && (c.value[o.value].annotations = b.annotations);
       }
       r.value = "gallery";
-    }, F = () => {
-      n("export", o.value);
-    }, et = (x) => {
-      c.value = x.currentIndex, o.value[x.currentIndex] && (o.value[x.currentIndex].annotations = x.currentAnnotations);
-    }, Y = (x) => {
-      if (a.value && a.value.getCurrentAnnotation) {
-        const I = a.value.getCurrentAnnotation();
-        o.value[c.value] && (o.value[c.value].annotations = I.annotations, n("update:images", o.value));
+    }, R = () => {
+      l("export", c.value);
+    }, Q = (b) => {
+      o.value = b.currentIndex, c.value[b.currentIndex] && (c.value[b.currentIndex].annotations = b.currentAnnotations);
+    }, tt = (b) => {
+      if (h.value && h.value.getCurrentAnnotation) {
+        const w = h.value.getCurrentAnnotation();
+        c.value[o.value] && (c.value[o.value].annotations = w.annotations, l("update:images", c.value));
       }
-    }, q = (x) => {
+    }, et = (b) => {
     };
-    return (x, I) => (y(), b("div", rn, [
-      r.value === "gallery" ? (y(), b("div", cn, [
+    return (b, w) => (y(), x("div", rn, [
+      r.value === "gallery" ? (y(), x("div", cn, [
         g("div", hn, [
-          g("h3", null, "批量查看与标注 (" + $(o.value.length) + " 张)", 1),
+          g("h3", null, "批量查看与标注 (" + $(c.value.length) + " 张)", 1),
           g("div", dn, [
-            (y(!0), b(L, null, R(m.labels, (H) => (y(), b("span", {
-              key: H.id,
+            (y(!0), x(L, null, F(m.labels, (S) => (y(), x("span", {
+              key: S.id,
               class: "label-badge",
-              style: O({ backgroundColor: H.color })
-            }, $(H.name), 5))), 128))
+              style: N({ backgroundColor: S.color })
+            }, $(S.name), 5))), 128))
           ])
         ]),
         g("div", gn, [
-          (y(!0), b(L, null, R(o.value, (H, V) => (y(), b("div", {
-            key: V,
+          (y(!0), x(L, null, F(c.value, (S, U) => (y(), x("div", {
+            key: U,
             class: "gallery-item",
-            onClick: (lt) => B(V, H)
+            onClick: (rt) => D(U, S)
           }, [
             g("div", vn, [
-              P(ln, {
-                src: H.imageUrl,
-                annotations: H.annotations || [],
+              H(ln, {
+                src: S.imageUrl,
+                annotations: S.annotations || [],
                 labels: m.labels
               }, null, 8, ["src", "annotations", "labels"])
             ]),
             g("div", mn, [
-              g("span", fn, "#" + $(V + 1), 1),
-              g("span", yn, $((H.annotations || []).length) + " 标注", 1)
+              g("span", fn, "#" + $(U + 1), 1),
+              g("span", yn, $((S.annotations || []).length) + " 标注", 1)
             ])
           ], 8, un))), 128))
         ]),
-        w.value ? (y(), b("div", pn, [
-          d.value ? (y(), b("button", {
+        u.value ? (y(), x("div", pn, [
+          p.value ? (y(), x("button", {
             key: 0,
             class: "action-btn primary",
-            onClick: I[0] || (I[0] = (H) => M(0))
+            onClick: w[0] || (w[0] = (S) => B(0))
           }, [
-            P(T, { name: "edit" }),
-            X(" " + $(u.value), 1)
+            H(P, { name: "edit" }),
+            j(" " + $(f.value), 1)
           ])) : z("", !0),
-          p.value ? (y(), b("button", {
+          C.value ? (y(), x("button", {
             key: 1,
             class: "action-btn success",
-            onClick: F
+            onClick: R
           }, [
-            P(T, { name: "download" }),
-            X(" " + $(f.value), 1)
+            H(P, { name: "download" }),
+            j(" " + $(A.value), 1)
           ])) : z("", !0)
         ])) : z("", !0)
-      ])) : (y(), b("div", bn, [
-        g("div", xn, [
+      ])) : (y(), x("div", xn, [
+        g("div", bn, [
           g("div", wn, [
             g("button", {
               class: "back-btn",
-              onClick: D
+              onClick: X
             }, [
-              P(T, { name: "back" }),
-              I[1] || (I[1] = X(" 返回列表 ", -1))
+              H(P, { name: "back" }),
+              w[1] || (w[1] = j(" 返回列表 ", -1))
             ]),
-            g("span", Cn, "正在标注: " + $(c.value + 1) + " / " + $(o.value.length), 1)
+            g("span", Cn, "正在标注: " + $(o.value + 1) + " / " + $(c.value.length), 1)
           ])
         ]),
         g("div", _n, [
-          P(Ke, {
+          H(Ke, {
             ref_key: "annotatorRef",
-            ref: a,
-            batchImages: o.value,
+            ref: h,
+            batchImages: c.value,
             labels: m.labels,
             annotationTypes: ["rectangle", "polygon", "point", "rotatedRect"],
-            onBatchChange: et,
-            onAnnotationChange: Y,
-            onLabelChange: q
+            onBatchChange: Q,
+            onAnnotationChange: tt,
+            onLabelChange: et
           }, null, 8, ["batchImages", "labels"])
         ])
       ]))
     ]));
   }
-}), Sn = /* @__PURE__ */ tt(An, [["__scopeId", "data-v-bbb647e1"]]);
+}), Sn = /* @__PURE__ */ K(An, [["__scopeId", "data-v-419d7955"]]);
 export {
   Sn as BatchAnnotator,
   Ke as ImageAnnotator,