luo-image-annotator 0.0.11 → 0.0.13

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

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