luo-image-annotator 0.0.2 → 0.0.4

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

@@ -1,22 +1,22 @@
-var pt = Object.defineProperty;
-var xt = (u, t, e) => t in u ? pt(u, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : u[t] = e;
-var C = (u, t, e) => xt(u, typeof t != "symbol" ? t + "" : t, e);
-import { defineComponent as q, ref as k, computed as bt, onMounted as At, watch as it, resolveComponent as P, openBlock as m, createElementBlock as x, normalizeClass as N, createElementVNode as h, createVNode as b, withCtx as I, Fragment as $, renderList as F, createBlock as X, resolveDynamicComponent as Ct, createCommentVNode as L, normalizeStyle as K, toDisplayString as D, createTextVNode as J, withDirectives as j, vModelText as Y, nextTick as wt } from "vue";
-const Z = (u, t) => Math.sqrt(Math.pow(u.x - t.x, 2) + Math.pow(u.y - t.y, 2)), _t = (u, t) => {
-  let e = !1;
-  for (let n = 0, a = t.length - 1; n < t.length; a = n++) {
-    const i = t[n].x, o = t[n].y, s = t[a].x, r = t[a].y;
-    o > u.y != r > u.y && u.x < (s - i) * (u.y - o) / (r - o) + i && (e = !e);
+var _t = Object.defineProperty;
+var It = (v, t, n) => t in v ? _t(v, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : v[t] = n;
+var C = (v, t, n) => It(v, typeof t != "symbol" ? t + "" : t, n);
+import { defineComponent as N, ref as S, watchEffect as St, openBlock as x, createElementBlock as b, normalizeClass as $, computed as kt, onMounted as Mt, watch as V, createElementVNode as d, createVNode as z, Fragment as T, renderList as D, createCommentVNode as L, normalizeStyle as K, toDisplayString as H, createTextVNode as O, withDirectives as q, vModelText as X, createBlock as nt, nextTick as zt } from "vue";
+const Y = (v, t) => Math.sqrt(Math.pow(v.x - t.x, 2) + Math.pow(v.y - t.y, 2)), Ht = (v, t) => {
+  let n = !1;
+  for (let e = 0, a = t.length - 1; e < t.length; a = e++) {
+    const o = t[e].x, r = t[e].y, i = t[a].x, h = t[a].y;
+    r > v.y != h > v.y && v.x < (i - o) * (v.y - r) / (h - r) + o && (n = !n);
   }
-  return e;
-}, nt = (u, t, e) => {
-  const n = e * (Math.PI / 180), a = Math.cos(n), i = Math.sin(n), o = u.x - t.x, s = u.y - t.y;
+  return n;
+}, st = (v, t, n) => {
+  const e = n * (Math.PI / 180), a = Math.cos(e), o = Math.sin(e), r = v.x - t.x, i = v.y - t.y;
   return {
-    x: t.x + (o * a - s * i),
-    y: t.y + (o * i + s * a)
+    x: t.x + (r * a - i * o),
+    y: t.y + (r * o + i * a)
   };
 };
-class kt {
+class Pt {
   constructor(t) {
     C(this, "canvas");
     C(this, "ctx");
@@ -54,18 +54,18 @@ class kt {
     C(this, "listeners", {});
     C(this, "imageUrl", "");
     this.canvas = t;
-    const e = t.getContext("2d");
-    if (!e) throw new Error("Could not get 2d context");
-    this.ctx = e, this.img = new Image(), this.img.crossOrigin = "Anonymous", this.img.onload = () => {
+    const n = t.getContext("2d");
+    if (!n) throw new Error("Could not get 2d context");
+    this.ctx = n, this.img = new Image(), this.img.crossOrigin = "Anonymous", this.img.onload = () => {
       this.fitImageToCanvas(), this.render();
     }, this.bindEvents();
   }
   // --- 公共 API ---
-  on(t, e) {
-    this.listeners[t] || (this.listeners[t] = []), this.listeners[t].push(e);
+  on(t, n) {
+    this.listeners[t] || (this.listeners[t] = []), this.listeners[t].push(n);
   }
-  emit(t, e) {
-    this.listeners[t] && this.listeners[t].forEach((n) => n(e));
+  emit(t, n) {
+    this.listeners[t] && this.listeners[t].forEach((e) => e(n));
   }
   loadImage(t) {
     this.imageUrl = t, this.img.src = t, this.activeAnnotation = null, this.isDrawing = !1;
@@ -86,33 +86,33 @@ 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 a = this.canvas.width / 2, i = this.canvas.height / 2, o = this.toImageCoords(a, i);
-    this.scale = n, this.offset.x = a - o.x * this.scale, this.offset.y = i - o.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 a = this.canvas.width / 2, o = this.canvas.height / 2, r = this.toImageCoords(a, o);
+    this.scale = e, this.offset.x = a - r.x * this.scale, this.offset.y = o - r.y * this.scale, this.render();
   }
   resize() {
     this.fitImageToCanvas(), this.render();
   }
   // --- 坐标系统 ---
-  toImageCoords(t, e) {
+  toImageCoords(t, n) {
     return {
       x: (t - this.offset.x) / this.scale,
-      y: (e - this.offset.y) / this.scale
+      y: (n - this.offset.y) / this.scale
     };
   }
-  toScreenCoords(t, e) {
+  toScreenCoords(t, n) {
     return {
       x: t * this.scale + this.offset.x,
-      y: e * this.scale + this.offset.y
+      y: n * this.scale + this.offset.y
     };
   }
   fitImageToCanvas() {
     const t = this.canvas.parentElement;
     if (t) {
       if (this.canvas.width = t.clientWidth, this.canvas.height = t.clientHeight, this.img.width === 0) return;
-      const e = this.canvas.width / this.img.width, n = this.canvas.height / this.img.height;
-      this.scale = Math.min(e, 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 n = this.canvas.width / this.img.width, e = this.canvas.height / this.img.height;
+      this.scale = Math.min(n, 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;
     }
   }
   // --- 事件处理 ---
@@ -123,82 +123,82 @@ class kt {
     (t.key === "Delete" || t.key === "Backspace") && this.activeAnnotation && this.deleteAnnotation(this.activeAnnotation.id);
   }
   deleteAnnotation(t) {
-    const e = this.annotations.findIndex((n) => n.id === t);
-    if (e > -1) {
-      const n = this.annotations[e];
-      this.annotations.splice(e, 1), this.activeAnnotation = null, this.emit("annotationChange", {
+    const n = this.annotations.findIndex((e) => e.id === t);
+    if (n > -1) {
+      const e = this.annotations[n];
+      this.annotations.splice(n, 1), this.activeAnnotation = null, this.emit("annotationChange", {
         action: "delete",
-        changedItem: n,
+        changedItem: e,
         imageUrl: this.imageUrl
       }), this.render();
     }
   }
   handleMouseDown(t) {
-    const e = this.canvas.getBoundingClientRect(), n = t.clientX - e.left, a = t.clientY - e.top, i = this.toImageCoords(n, a);
+    const n = this.canvas.getBoundingClientRect(), e = t.clientX - n.left, a = t.clientY - n.top, o = this.toImageCoords(e, a);
     if (this.canvas.style.cursor === "grab" || this.canvas.style.cursor === "grabbing") {
-      this.isPanning = !0, this.panStartPoint = { x: n, y: a }, this.canvas.style.cursor = "grabbing";
+      this.isPanning = !0, this.panStartPoint = { x: e, y: a }, this.canvas.style.cursor = "grabbing";
       return;
     }
     if (this.activeAnnotation) {
-      const r = this.getHitHandle(n, a, this.activeAnnotation);
-      if (r !== -100) {
-        this.isDragging = !0, this.dragStartPoint = i, this.selectedHandleIndex = r, this.dragStartAnnotation = JSON.parse(JSON.stringify(this.activeAnnotation));
+      const h = this.getHitHandle(e, a, this.activeAnnotation);
+      if (h !== -100) {
+        this.isDragging = !0, this.dragStartPoint = o, this.selectedHandleIndex = h, this.dragStartAnnotation = JSON.parse(JSON.stringify(this.activeAnnotation));
         return;
       }
     }
-    const o = this.getHitCategory(n, a);
-    if (o) {
-      this.activeAnnotation = o, this.isDragging = !1, this.selectedHandleIndex = -1, this.emit("annotationChange", { action: "select", changedItem: o, imageUrl: this.imageUrl }), this.render();
+    const r = this.getHitCategory(e, a);
+    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 s = this.getHitAnnotation(i);
+    const i = this.getHitAnnotation(o);
     if (this.currentTool) {
       if (this.isDrawing && this.currentTool === "polygon" && this.activeAnnotation) {
-        const r = this.activeAnnotation.coordinates;
-        if (r.points.length > 2 && Z(i, r.points[0]) < 20 / this.scale) {
+        const h = this.activeAnnotation.coordinates;
+        if (h.points.length > 2 && Y(o, h.points[0]) < 20 / this.scale) {
           this.finishDrawing();
           return;
         }
-        this.startDrawing(i);
+        this.startDrawing(o);
         return;
       }
       if (this.currentTool) {
         if (this.currentTool === "polygon" && !this.isDrawing) {
-          this.startDrawing(i);
+          this.startDrawing(o);
           return;
         }
-        if (s) {
-          this.activeAnnotation = s, this.isDragging = !0, this.dragStartPoint = i, this.selectedHandleIndex = -1, this.dragStartAnnotation = JSON.parse(JSON.stringify(s)), this.emit("annotationChange", { action: "select", changedItem: s, imageUrl: this.imageUrl }), this.render();
+        if (i) {
+          this.activeAnnotation = i, this.isDragging = !0, this.dragStartPoint = o, this.selectedHandleIndex = -1, this.dragStartAnnotation = JSON.parse(JSON.stringify(i)), this.emit("annotationChange", { action: "select", changedItem: i, imageUrl: this.imageUrl }), this.render();
           return;
         }
-        this.startDrawing(i);
-      } else s ? (this.activeAnnotation = s, this.isDragging = !0, this.dragStartPoint = i, this.selectedHandleIndex = -1, this.dragStartAnnotation = JSON.parse(JSON.stringify(s)), this.emit("annotationChange", { action: "select", changedItem: s, imageUrl: this.imageUrl }), this.render()) : (this.activeAnnotation = null, this.render());
-    } else if (s) {
-      if (!(this.visibleLabels.size > 0 && !this.visibleLabels.has(s.label))) {
-        this.activeAnnotation = s, this.isDragging = !0, this.dragStartPoint = i, this.selectedHandleIndex = -1, this.dragStartAnnotation = JSON.parse(JSON.stringify(s)), this.emit("annotationChange", { action: "select", changedItem: s, imageUrl: this.imageUrl }), this.render();
+        this.startDrawing(o);
+      } else i ? (this.activeAnnotation = i, this.isDragging = !0, this.dragStartPoint = o, this.selectedHandleIndex = -1, this.dragStartAnnotation = JSON.parse(JSON.stringify(i)), this.emit("annotationChange", { action: "select", changedItem: i, imageUrl: this.imageUrl }), this.render()) : (this.activeAnnotation = null, this.render());
+    } else if (i) {
+      if (!(this.visibleLabels.size > 0 && !this.visibleLabels.has(i.label))) {
+        this.activeAnnotation = i, this.isDragging = !0, this.dragStartPoint = o, this.selectedHandleIndex = -1, this.dragStartAnnotation = JSON.parse(JSON.stringify(i)), this.emit("annotationChange", { action: "select", changedItem: i, imageUrl: this.imageUrl }), this.render();
         return;
       }
     } else
       this.activeAnnotation = null, this.render();
   }
   handleMouseMove(t) {
-    const e = this.canvas.getBoundingClientRect(), n = t.clientX - e.left, a = t.clientY - e.top, i = this.toImageCoords(n, a);
+    const n = this.canvas.getBoundingClientRect(), e = t.clientX - n.left, a = t.clientY - n.top, o = this.toImageCoords(e, a);
     if (this.isPanning && this.panStartPoint) {
-      const o = n - this.panStartPoint.x, s = a - this.panStartPoint.y;
-      this.offset.x += o, this.offset.y += s, this.panStartPoint = { x: n, y: a }, this.render();
+      const r = e - this.panStartPoint.x, i = a - this.panStartPoint.y;
+      this.offset.x += r, this.offset.y += i, this.panStartPoint = { x: e, y: a }, this.render();
       return;
     }
-    if (this.lastMouseMovePoint = i, this.isDrawing) {
+    if (this.lastMouseMovePoint = o, this.isDrawing) {
       if (this.currentTool === "polygon" && this.activeAnnotation) {
-        const o = this.activeAnnotation.coordinates;
-        if (o.points.length > 2) {
-          const s = o.points[0], r = Z(i, s);
-          this.isHoveringStartPoint = r < 20 / this.scale;
+        const r = this.activeAnnotation.coordinates;
+        if (r.points.length > 2) {
+          const i = r.points[0], h = Y(o, i);
+          this.isHoveringStartPoint = h < 20 / this.scale;
         } else
           this.isHoveringStartPoint = !1;
       }
-      this.updateDrawing(i);
-    } else this.isDragging && this.activeAnnotation && this.dragStartPoint ? this.updateDragging(i) : this.checkHover(n, a, i);
+      this.updateDrawing(o);
+    } else this.isDragging && this.activeAnnotation && this.dragStartPoint ? this.updateDragging(o) : this.checkHover(e, a, o);
     this.render();
   }
   handleMouseUp(t) {
@@ -221,17 +221,17 @@ class kt {
   }
   // --- 绘制逻辑 ---
   // 辅助函数：将 hex 转换为 rgba
-  hexToRgba(t, e) {
+  hexToRgba(t, n) {
     if (!t.startsWith("#")) return t;
-    const n = parseInt(t.slice(1, 3), 16), a = parseInt(t.slice(3, 5), 16), i = parseInt(t.slice(5, 7), 16);
-    return `rgba(${n}, ${a}, ${i}, ${e})`;
+    const e = parseInt(t.slice(1, 3), 16), a = parseInt(t.slice(3, 5), 16), o = parseInt(t.slice(5, 7), 16);
+    return `rgba(${e}, ${a}, ${o}, ${n})`;
   }
   startDrawing(t) {
     if (!this.currentTool) return;
-    const e = Date.now().toString();
+    const n = Date.now().toString();
     if (this.hexToRgba(this.currentLabelColor, 0.2), this.currentLabelColor, this.currentTool === "rectangle")
       this.isDrawing = !0, this.dragStartPoint = t, this.activeAnnotation = {
-        id: e,
+        id: n,
         type: "rectangle",
         label: "",
         // 组件应填充此项
@@ -239,25 +239,25 @@ class kt {
         style: { strokeColor: this.currentLabelColor }
       };
     else if (this.currentTool === "point") {
-      const n = {
-        id: e,
+      const e = {
+        id: n,
         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: e,
+        id: n,
         type: "polygon",
         label: "",
         coordinates: { points: [t] },
         style: { strokeColor: this.currentLabelColor }
       });
     else if (this.currentTool === "category") {
-      const n = {
-        id: e,
+      const e = {
+        id: n,
         type: "category",
         label: "",
         // 将被填充
@@ -265,9 +265,9 @@ 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: e,
+      id: n,
       type: "rotatedRect",
       label: "",
       coordinates: { x: t.x, y: t.y, width: 0, height: 0, angle: 0 },
@@ -277,11 +277,11 @@ class kt {
   updateDrawing(t) {
     if (this.activeAnnotation)
       if (this.activeAnnotation.type === "rectangle" && this.dragStartPoint) {
-        const e = this.activeAnnotation.coordinates;
-        e.x2 = t.x, e.y2 = t.y;
+        const n = this.activeAnnotation.coordinates;
+        n.x2 = t.x, n.y2 = t.y;
       } else if (this.activeAnnotation.type === "rotatedRect" && this.dragStartPoint) {
-        const e = this.activeAnnotation.coordinates, n = Math.abs(t.x - this.dragStartPoint.x), a = Math.abs(t.y - this.dragStartPoint.y);
-        e.width = n * 2, e.height = a * 2;
+        const n = this.activeAnnotation.coordinates, e = Math.abs(t.x - this.dragStartPoint.x), a = Math.abs(t.y - this.dragStartPoint.y);
+        n.width = e * 2, n.height = a * 2;
       } else this.activeAnnotation.type;
   }
   finishDrawing() {
@@ -292,8 +292,8 @@ class kt {
           this.activeAnnotation = null, this.isDrawing = !1;
           return;
         }
-        const e = Math.min(t.x1, t.x2), n = Math.max(t.x1, t.x2), a = Math.min(t.y1, t.y2), i = Math.max(t.y1, t.y2);
-        t.x1 = e, t.x2 = n, t.y1 = a, t.y2 = i, this.annotations.push(this.activeAnnotation), this.emit("annotationChange", { action: "add", changedItem: this.activeAnnotation, imageUrl: this.imageUrl });
+        const n = Math.min(t.x1, t.x2), e = Math.max(t.x1, t.x2), a = Math.min(t.y1, t.y2), o = Math.max(t.y1, t.y2);
+        t.x1 = n, t.x2 = e, t.y1 = a, t.y2 = o, 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;
@@ -314,89 +314,89 @@ class kt {
   }
   updateDragging(t) {
     if (!this.activeAnnotation || !this.dragStartPoint || !this.dragStartAnnotation) return;
-    const e = t.x - this.dragStartPoint.x, n = t.y - this.dragStartPoint.y;
-    this.selectedHandleIndex === -1 ? this.moveAnnotation(this.activeAnnotation, this.dragStartAnnotation, e, n) : this.resizeAnnotation(this.activeAnnotation, this.dragStartAnnotation, this.selectedHandleIndex, t);
+    const n = t.x - this.dragStartPoint.x, e = t.y - this.dragStartPoint.y;
+    this.selectedHandleIndex === -1 ? this.moveAnnotation(this.activeAnnotation, this.dragStartAnnotation, n, e) : this.resizeAnnotation(this.activeAnnotation, this.dragStartAnnotation, this.selectedHandleIndex, t);
   }
-  moveAnnotation(t, e, n, a) {
+  moveAnnotation(t, n, e, a) {
     if (t.type === "rectangle") {
-      const i = e.coordinates, o = t.coordinates;
-      o.x1 = i.x1 + n, o.x2 = i.x2 + n, o.y1 = i.y1 + a, o.y2 = i.y2 + a;
+      const o = n.coordinates, r = t.coordinates;
+      r.x1 = o.x1 + e, r.x2 = o.x2 + e, r.y1 = o.y1 + a, r.y2 = o.y2 + a;
     } else if (t.type === "point") {
-      const i = e.coordinates, o = t.coordinates;
-      o.points = i.points.map((s) => ({ x: s.x + n, y: s.y + a }));
+      const o = n.coordinates, r = t.coordinates;
+      r.points = o.points.map((i) => ({ x: i.x + e, y: i.y + a }));
     } else if (t.type === "rotatedRect") {
-      const i = e.coordinates, o = t.coordinates;
-      o.x = i.x + n, o.y = i.y + a;
+      const o = n.coordinates, r = t.coordinates;
+      r.x = o.x + e, r.y = o.y + a;
     } else if (t.type === "polygon") {
-      const i = e.coordinates, o = t.coordinates;
-      o.points = i.points.map((s) => ({ x: s.x + n, y: s.y + a }));
+      const o = n.coordinates, r = t.coordinates;
+      r.points = o.points.map((i) => ({ x: i.x + e, y: i.y + a }));
     }
   }
-  resizeAnnotation(t, e, n, a) {
+  resizeAnnotation(t, n, e, a) {
     if (t.type === "rectangle") {
-      const i = t.coordinates;
-      n === 0 && (i.x1 = a.x, i.y1 = a.y), n === 1 && (i.x2 = a.x, i.y1 = a.y), n === 2 && (i.x2 = a.x, i.y2 = a.y), n === 3 && (i.x1 = a.x, i.y2 = a.y);
+      const o = t.coordinates;
+      e === 0 && (o.x1 = a.x, o.y1 = a.y), e === 1 && (o.x2 = a.x, o.y1 = a.y), e === 2 && (o.x2 = a.x, o.y2 = a.y), e === 3 && (o.x1 = a.x, o.y2 = a.y);
     } else if (t.type === "polygon") {
-      const i = t.coordinates;
-      n >= 0 && n < i.points.length && (i.points[n] = a);
+      const o = t.coordinates;
+      e >= 0 && e < o.points.length && (o.points[e] = a);
     } else if (t.type === "point") {
-      const i = t.coordinates;
-      n >= 0 && n < i.points.length && (i.points[n] = a);
+      const o = t.coordinates;
+      e >= 0 && e < o.points.length && (o.points[e] = a);
     } else if (t.type === "rotatedRect") {
-      const i = t.coordinates;
-      if (n === -2) {
-        const o = i.x, s = i.y, r = a.x - o, v = a.y - s;
-        let d = Math.atan2(v, r) * 180 / Math.PI;
-        d += 90, i.angle = d;
+      const o = t.coordinates;
+      if (e === -2) {
+        const r = o.x, i = o.y, h = a.x - r, m = a.y - i;
+        let g = Math.atan2(m, h) * 180 / Math.PI;
+        g += 90, o.angle = g;
       } else {
-        const o = i.angle * Math.PI / 180, s = Math.cos(-o), r = Math.sin(-o), v = a.x - i.x, d = a.y - i.y, g = v * s - d * r, f = v * r + d * s;
-        (n === 0 || n === 3) && (i.width / 2, i.width = Math.abs(g) * 2), (n === 1 || n === 2) && (i.width = Math.abs(g) * 2), (n === 0 || n === 1) && (i.height = Math.abs(f) * 2), (n === 2 || n === 3) && (i.height = Math.abs(f) * 2);
+        const r = o.angle * Math.PI / 180, i = Math.cos(-r), h = Math.sin(-r), m = a.x - o.x, g = a.y - o.y, u = m * i - g * h, f = m * h + g * i;
+        (e === 0 || e === 3) && (o.width / 2, o.width = Math.abs(u) * 2), (e === 1 || e === 2) && (o.width = Math.abs(u) * 2), (e === 0 || e === 1) && (o.height = Math.abs(f) * 2), (e === 2 || e === 3) && (o.height = Math.abs(f) * 2);
       }
     }
   }
   // --- 命中测试和渲染辅助函数 ---
   getHitAnnotation(t) {
-    for (let e = this.annotations.length - 1; e >= 0; e--) {
-      const n = this.annotations[e];
-      if (this.isPointInAnnotation(t, n))
-        return n;
+    for (let n = this.annotations.length - 1; n >= 0; n--) {
+      const e = this.annotations[n];
+      if (this.isPointInAnnotation(t, e))
+        return e;
     }
     return null;
   }
-  isPointInAnnotation(t, e) {
-    if (e.type === "rectangle") {
-      const n = e.coordinates;
-      return t.x >= n.x1 && t.x <= n.x2 && t.y >= n.y1 && t.y <= n.y2;
-    } else if (e.type === "polygon") {
-      const n = e.coordinates;
-      return _t(t, n.points);
-    } else if (e.type === "rotatedRect") {
-      const n = e.coordinates, a = nt(t, { x: n.x, y: n.y }, -n.angle), i = n.width / 2, o = n.height / 2;
-      return a.x >= n.x - i && a.x <= n.x + i && a.y >= n.y - o && a.y <= n.y + o;
-    } else if (e.type === "point")
-      return e.coordinates.points.some((a) => Z(t, a) < 10 / this.scale);
+  isPointInAnnotation(t, n) {
+    if (n.type === "rectangle") {
+      const e = n.coordinates;
+      return t.x >= e.x1 && t.x <= e.x2 && t.y >= e.y1 && t.y <= e.y2;
+    } else if (n.type === "polygon") {
+      const e = n.coordinates;
+      return Ht(t, e.points);
+    } else if (n.type === "rotatedRect") {
+      const e = n.coordinates, a = st(t, { x: e.x, y: e.y }, -e.angle), o = e.width / 2, r = e.height / 2;
+      return a.x >= e.x - o && a.x <= e.x + o && a.y >= e.y - r && a.y <= e.y + r;
+    } else if (n.type === "point")
+      return n.coordinates.points.some((a) => Y(t, a) < 10 / this.scale);
     return !1;
   }
-  getHitHandle(t, e, n) {
-    const a = this.getAnnotationHandles(n), i = 6;
-    for (let o = 0; o < a.length; o++) {
-      const s = a[o], r = this.toScreenCoords(s.x, s.y);
-      if (Math.abs(t - r.x) < i && Math.abs(e - r.y) < i)
-        return n.type === "rotatedRect" && o === 4 ? -2 : o;
+  getHitHandle(t, n, e) {
+    const a = this.getAnnotationHandles(e), o = 6;
+    for (let r = 0; r < a.length; r++) {
+      const i = a[r], h = this.toScreenCoords(i.x, i.y);
+      if (Math.abs(t - h.x) < o && Math.abs(n - h.y) < o)
+        return e.type === "rotatedRect" && r === 4 ? -2 : r;
     }
     return -100;
   }
   getAnnotationHandles(t) {
     if (t.type === "rectangle") {
-      const e = t.coordinates;
+      const n = t.coordinates;
       return [
-        { x: e.x1, y: e.y1 },
+        { x: n.x1, y: n.y1 },
         // 左上
-        { x: e.x2, y: e.y1 },
+        { x: n.x2, y: n.y1 },
         // 右上
-        { x: e.x2, y: e.y2 },
+        { x: n.x2, y: n.y2 },
         // 右下
-        { x: e.x1, y: e.y2 }
+        { x: n.x1, y: n.y2 }
         // 左下
       ];
     } else {
@@ -405,24 +405,24 @@ class kt {
       if (t.type === "point")
         return t.coordinates.points;
       if (t.type === "rotatedRect") {
-        const e = t.coordinates, n = { x: e.x, y: e.y }, a = e.width / 2, i = e.height / 2, o = { x: e.x - a, y: e.y - i }, s = { x: e.x + a, y: e.y - i }, r = { x: e.x + a, y: e.y + i }, v = { x: e.x - a, y: e.y + i }, d = { x: e.x, y: e.y - i - 20 / this.scale };
-        return [o, s, r, v, d].map((g) => nt(g, n, e.angle));
+        const n = t.coordinates, e = { x: n.x, y: n.y }, a = n.width / 2, o = n.height / 2, r = { x: n.x - a, y: n.y - o }, i = { x: n.x + a, y: n.y - o }, h = { x: n.x + a, y: n.y + o }, m = { x: n.x - a, y: n.y + o }, g = { x: n.x, y: n.y - o - 20 / this.scale };
+        return [r, i, h, m, g].map((u) => st(u, e, n.angle));
       }
     }
     return [];
   }
-  checkHover(t, e, n) {
-    const a = this.getHitCategory(t, e);
+  checkHover(t, n, e) {
+    const a = this.getHitCategory(t, n);
     if (a) {
       this.canvas.style.cursor = "pointer", this.hoverAnnotation = a;
       return;
     }
-    if (this.activeAnnotation && this.getHitHandle(t, e, this.activeAnnotation) !== -100) {
+    if (this.activeAnnotation && this.getHitHandle(t, n, this.activeAnnotation) !== -100) {
       this.canvas.style.cursor = "pointer";
       return;
     }
-    const i = this.getHitAnnotation(n);
-    i ? (this.canvas.style.cursor = "move", this.hoverAnnotation = i) : (this.canvas.style.cursor = "default", this.hoverAnnotation = null);
+    const o = this.getHitAnnotation(e);
+    o ? (this.canvas.style.cursor = "move", this.hoverAnnotation = o) : (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) => {
@@ -430,105 +430,158 @@ class kt {
     }), this.activeAnnotation && this.drawItem(this.activeAnnotation, !0), this.renderCategories();
   }
   renderCategories() {
-    const t = this.annotations.filter((r) => r.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 e = 10;
-    const n = 10, a = 8, i = 4, o = 24, s = 8;
-    t.forEach((r) => {
-      const v = r.label || "Unlabeled", d = this.ctx.measureText(v).width + a * 2, g = this.activeAnnotation === r, f = this.hoverAnnotation === r;
-      this.ctx.fillStyle = g ? "#E3F2FD" : f ? "#F5F5F5" : "rgba(255, 255, 255, 0.9)", this.ctx.strokeStyle = g ? "#2196F3" : "#666", this.ctx.lineWidth = g ? 2 : 1, this.ctx.beginPath(), this.ctx.rect(e, n, d, o), this.ctx.fill(), this.ctx.stroke(), this.ctx.fillStyle = g ? "#1976D2" : "#333", this.ctx.fillText(v, e + a, n + i), e += d + s;
+    let n = 10;
+    const e = 10, a = 8, o = 4, r = 24, i = 8;
+    t.forEach((h) => {
+      const m = h.label || "Unlabeled", g = this.ctx.measureText(m).width + a * 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(n, e, g, r), this.ctx.fill(), this.ctx.stroke(), this.ctx.fillStyle = u ? "#1976D2" : "#333", this.ctx.fillText(m, n + a, e + o), n += g + i;
     }), this.ctx.restore();
   }
-  getHitCategory(t, e) {
-    const n = this.annotations.filter((d) => d.type === "category");
-    if (n.length === 0) return null;
+  getHitCategory(t, n) {
+    const e = this.annotations.filter((g) => g.type === "category");
+    if (e.length === 0) return null;
     this.ctx.save(), this.ctx.font = "14px sans-serif";
     let a = 10;
-    const i = 10, o = 8, s = 24, r = 8;
-    let v = null;
-    for (const d of n) {
-      const g = d.label || "Unlabeled", f = this.ctx.measureText(g).width + o * 2;
-      if (t >= a && t <= a + f && e >= i && e <= i + s) {
-        v = d;
+    const o = 10, r = 8, i = 24, h = 8;
+    let m = null;
+    for (const g of e) {
+      const u = g.label || "Unlabeled", f = this.ctx.measureText(u).width + r * 2;
+      if (t >= a && t <= a + f && n >= o && n <= o + i) {
+        m = g;
         break;
       }
-      a += f + r;
+      a += f + h;
     }
-    return this.ctx.restore(), v;
+    return this.ctx.restore(), m;
   }
-  drawItem(t, e) {
-    var i;
-    if (this.visibleLabels.size > 0 && !this.visibleLabels.has(t.label) && !e)
+  drawItem(t, n) {
+    var o;
+    if (this.visibleLabels.size > 0 && !this.visibleLabels.has(t.label) && !n)
       return;
     this.ctx.save();
-    const n = ((i = t.style) == null ? void 0 : i.strokeColor) || "#FF4081", a = e ? "#00E5FF" : n;
-    if (this.ctx.strokeStyle = a, this.ctx.lineWidth = 2, e ? this.ctx.fillStyle = "rgba(0, 229, 255, 0.2)" : this.ctx.fillStyle = this.hexToRgba(n, 0.2), t.type === "rectangle") {
-      const o = t.coordinates, s = this.toScreenCoords(o.x1, o.y1), r = this.toScreenCoords(o.x2, o.y2), v = Math.min(s.x, r.x), d = Math.min(s.y, r.y), g = Math.abs(s.x - r.x), f = Math.abs(s.y - r.y);
-      this.ctx.strokeRect(v, d, g, f), this.ctx.fillStyle = e ? "rgba(0, 229, 255, 0.2)" : "rgba(255, 64, 129, 0.2)", this.ctx.fillRect(v, d, g, f), e && this.drawHandles(this.getAnnotationHandles(t));
+    const e = ((o = t.style) == null ? void 0 : o.strokeColor) || "#FF4081", a = n ? "#00E5FF" : e;
+    if (this.ctx.strokeStyle = a, this.ctx.lineWidth = 2, n ? this.ctx.fillStyle = "rgba(0, 229, 255, 0.2)" : this.ctx.fillStyle = this.hexToRgba(e, 0.2), t.type === "rectangle") {
+      const r = t.coordinates, i = this.toScreenCoords(r.x1, r.y1), h = this.toScreenCoords(r.x2, r.y2), m = Math.min(i.x, h.x), g = Math.min(i.y, h.y), u = Math.abs(i.x - h.x), f = Math.abs(i.y - h.y);
+      this.ctx.strokeRect(m, g, u, f), this.ctx.fillStyle = n ? "rgba(0, 229, 255, 0.2)" : "rgba(255, 64, 129, 0.2)", this.ctx.fillRect(m, g, u, f), n && this.drawHandles(this.getAnnotationHandles(t));
     } else if (t.type === "polygon") {
-      const o = t.coordinates;
-      if (o.points.length === 0) {
+      const r = t.coordinates;
+      if (r.points.length === 0) {
         this.ctx.restore();
         return;
       }
       this.ctx.beginPath();
-      const s = this.toScreenCoords(o.points[0].x, o.points[0].y);
-      this.ctx.moveTo(s.x, s.y);
-      for (let r = 1; r < o.points.length; r++) {
-        const v = this.toScreenCoords(o.points[r].x, o.points[r].y);
-        this.ctx.lineTo(v.x, v.y);
+      const i = this.toScreenCoords(r.points[0].x, r.points[0].y);
+      this.ctx.moveTo(i.x, i.y);
+      for (let h = 1; h < r.points.length; h++) {
+        const m = this.toScreenCoords(r.points[h].x, r.points[h].y);
+        this.ctx.lineTo(m.x, m.y);
       }
       if (!this.isDrawing || t !== this.activeAnnotation)
         this.ctx.closePath();
       else if (this.lastMouseMovePoint) {
-        let r = this.lastMouseMovePoint;
-        if (this.isHoveringStartPoint && o.points.length > 0) {
-          r = o.points[0];
-          const d = this.toScreenCoords(o.points[0].x, o.points[0].y);
-          this.ctx.save(), this.ctx.beginPath(), this.ctx.arc(d.x, d.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 h = this.lastMouseMovePoint;
+        if (this.isHoveringStartPoint && r.points.length > 0) {
+          h = r.points[0];
+          const g = this.toScreenCoords(r.points[0].x, r.points[0].y);
+          this.ctx.save(), this.ctx.beginPath(), this.ctx.arc(g.x, g.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 v = this.toScreenCoords(r.x, r.y);
-        this.ctx.lineTo(v.x, v.y);
+        const m = this.toScreenCoords(h.x, h.y);
+        this.ctx.lineTo(m.x, m.y);
       }
-      this.ctx.stroke(), this.ctx.fillStyle = e ? "rgba(0, 229, 255, 0.2)" : "rgba(255, 64, 129, 0.2)", this.ctx.fill(), e && this.drawHandles(this.getAnnotationHandles(t));
+      this.ctx.stroke(), this.ctx.fillStyle = n ? "rgba(0, 229, 255, 0.2)" : "rgba(255, 64, 129, 0.2)", this.ctx.fill(), n && this.drawHandles(this.getAnnotationHandles(t));
     } else if (t.type === "rotatedRect") {
-      const o = t.coordinates;
-      this.ctx.translate(this.toScreenCoords(o.x, o.y).x, this.toScreenCoords(o.x, o.y).y), this.ctx.rotate(o.angle * Math.PI / 180);
-      const s = o.width * this.scale, r = o.height * this.scale;
-      this.ctx.strokeRect(-s / 2, -r / 2, s, r), this.ctx.fillStyle = e ? "rgba(0, 229, 255, 0.2)" : "rgba(255, 64, 129, 0.2)", this.ctx.fillRect(-s / 2, -r / 2, s, r), this.ctx.rotate(-o.angle * Math.PI / 180), this.ctx.translate(-this.toScreenCoords(o.x, o.y).x, -this.toScreenCoords(o.x, o.y).y), e && this.drawHandles(this.getAnnotationHandles(t));
-    } else t.type === "point" && t.coordinates.points.forEach((s) => {
-      const r = this.toScreenCoords(s.x, s.y);
-      this.ctx.beginPath(), this.ctx.arc(r.x, r.y, 5, 0, Math.PI * 2), this.ctx.fillStyle = e ? "#00E5FF" : n, 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 i = r.width * this.scale, h = r.height * this.scale;
+      this.ctx.strokeRect(-i / 2, -h / 2, i, h), this.ctx.fillStyle = n ? "rgba(0, 229, 255, 0.2)" : "rgba(255, 64, 129, 0.2)", this.ctx.fillRect(-i / 2, -h / 2, i, h), 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), n && this.drawHandles(this.getAnnotationHandles(t));
+    } else t.type === "point" && t.coordinates.points.forEach((i) => {
+      const h = this.toScreenCoords(i.x, i.y);
+      this.ctx.beginPath(), this.ctx.arc(h.x, h.y, 5, 0, Math.PI * 2), this.ctx.fillStyle = n ? "#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((e) => {
-      const n = this.toScreenCoords(e.x, e.y);
-      this.ctx.fillRect(n.x - 4, n.y - 4, 8, 8), this.ctx.strokeRect(n.x - 4, n.y - 4, 8, 8);
+    this.ctx.fillStyle = "#FFFFFF", this.ctx.strokeStyle = "#000000", this.ctx.lineWidth = 1, t.forEach((n) => {
+      const e = this.toScreenCoords(n.x, n.y);
+      this.ctx.fillRect(e.x - 4, e.y - 4, 8, 8), this.ctx.strokeRect(e.x - 4, e.y - 4, 8, 8);
     });
   }
 }
-const St = {
+const Lt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
+  <path d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z m0-320a64 64 0 1 0 0-128 64 64 0 0 0 0 128z m0 64a128 128 0 1 1 0-256 128 128 0 0 1 0 256z" fill="currentColor"/>\r
+</svg>`, Tt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
+  <path d="M609.408 149.376l-277.76 277.76a96 96 0 0 0 0 135.68l277.76 277.76a32 32 0 1 0 45.248-45.248L376.96 512l277.76-277.76a32 32 0 0 0-45.248-45.248z" fill="currentColor"/>\r
+</svg>`, $t = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
+  <path d="M704 192h160v160h-160z m-64-64v288h288V128H640zM160 672h160v160H160z m-64-64v288h288V608H96z m256-320h320v64H352z" fill="currentColor"/>\r
+</svg>`, Dt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
+  <path d="M256 256h512v512H256z m-64-64v640h640V192H192z" fill="currentColor"/>\r
+</svg>`, Rt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
+  <path d="M160 256h704a32 32 0 1 1 0 64h-64v608a32 32 0 0 1-32 32H256a32 32 0 0 1-32-32V320h-64a32 32 0 1 1 0-64zm128 64v576h448V320H288z m128 0v512a32 32 0 1 1-64 0V320a32 32 0 1 1 64 0zm256 0v512a32 32 0 1 1-64 0V320a32 32 0 1 1 64 0zM352 128h320a32 32 0 0 1 32 32v64H320v-64a32 32 0 0 1 32-32z" fill="currentColor"/>\r
+</svg>`, Ut = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
+  <path d="M512 666.56l-186.88-186.88a32 32 0 0 0-45.248 45.248l209.536 209.536a96 96 0 0 0 135.68 0l209.536-209.536a32 32 0 1 0-45.248-45.248L544 666.56V128a32 32 0 0 0-64 0v538.56zM192 832h640a32 32 0 1 1 0 64H192a32 32 0 1 1 0-64z" fill="currentColor"/>\r
+</svg>`, Ft = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
+  <path d="M832 512a32 32 0 1 1 64 0v352a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h352a32 32 0 0 1 0 64H192v640h640V512z m-144-320l-480 480v160h160l480-480-160-160z m-114.56 480H256v-117.76L653.44 236.8l117.76 117.76L573.44 672z m208-208l-117.76-117.76 66.56-66.56a32 32 0 0 1 45.248 0l72.512 72.512a32 32 0 0 1 0 45.248l-66.56 66.56z" fill="currentColor"/>\r
+</svg>`, Bt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
+  <path d="M940.48 876.16L148.16 83.84a32 32 0 1 0-45.12 45.12L236.8 262.4C163.52 337.28 107.52 429.12 82.56 528.96a32 32 0 0 0 0 20.48C144.384 727.68 314.88 840.96 512 840.96c103.04 0 199.36-30.72 283.52-83.84l99.84 99.84a32 32 0 1 0 45.12-45.12zM512 776.96c-176.64 0-333.44-98.56-402.56-248.96 25.6-56.32 63.36-107.52 110.08-151.04L364.8 522.24a128 128 0 0 0 147.2 147.2l123.52 123.52A445.44 445.44 0 0 1 512 776.96z m373.12-32.64l-64-64C857.6 627.84 879.616 572.16 879.616 512c0-176.64-156.8-328.96-367.616-328.96-58.24 0-113.6 11.52-164.48 32.64l-55.68-55.68C346.88 136.96 427.52 119.04 512 119.04c229.76 0 425.216 142.08 493.44 346.24a32 32 0 0 1 0 20.48 450.56 450.56 0 0 1-120.32 258.56z m-309.12-309.12l-128-128A128 128 0 0 1 576 435.2z" fill="currentColor"/>\r
+</svg>`, Ot = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
+  <path d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 832a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm-48-384H320a32 32 0 0 1 0-64h144V304a32 32 0 1 1 64 0v144h144a32 32 0 1 1 0 64H528v144a32 32 0 1 1-64 0V512z" fill="currentColor"/>\r
+</svg>`, Et = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
+  <path d="M224 448a32 32 0 0 0 9.536 22.592l416 416a32 32 0 0 0 45.248 0l226.24-226.24a32 32 0 0 0 0-45.248l-416-416A32 32 0 0 0 482.432 192H256a64 64 0 0 0-64 64v192z m64-192h160l384 384-160 160-384-384V256z m64 128a64 64 0 1 0 0-128 64 64 0 0 0 0 128z" fill="currentColor"/>\r
+</svg>`, Vt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
+  <path d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64zm0-704h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64zm0 352h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64z" fill="currentColor"/>\r
+</svg>`, Nt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
+  <path d="M784.512 230.272v-50.56a32 32 0 1 1 64 0v149.056a32 32 0 0 1-32 32H667.52a32 32 0 1 1 0-64h92.992A320 320 0 1 0 524.8 833.152a320 320 0 0 0 320-320h64a384 384 0 0 1-384 384 384 384 0 0 1-384-384 384 384 0 0 1 643.712-282.88z" fill="currentColor"/>\r
+</svg>`, Jt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
+  <path d="M340.864 149.376a32 32 0 0 0-45.248 45.248L573.44 512l-277.76 317.376a32 32 0 0 0 45.248 45.248l277.76-277.76a96 96 0 0 0 0-135.68L340.864 149.376z" fill="currentColor"/>\r
+</svg>`, jt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
+  <path d="M512 192c229.76 0 425.216 142.08 493.44 346.24a32 32 0 0 1 0 20.48C937.216 762.88 741.76 904.96 512 904.96S86.784 762.88 18.56 558.72a32 32 0 0 1 0-20.48C86.784 334.08 282.24 192 512 192zm0 64c-197.12 0-367.616 120.32-428.16 296.32C144.384 727.68 314.88 840.96 512 840.96s367.616-113.28 428.16-288.64C879.616 376.32 709.12 256 512 256zm0 160a128 128 0 1 1 0 256 128 128 0 0 1 0-256zm0 64a64 64 0 1 0 0 128 64 64 0 0 0 0-128z" fill="currentColor"/>\r
+</svg>`, Wt = `<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 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>`, qt = `<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>`, Xt = ["innerHTML"], Yt = /* @__PURE__ */ N({
+  __name: "SvgIcon",
+  props: {
+    name: {},
+    size: {}
+  },
+  setup(v) {
+    const t = v, n = S(""), e = /* @__PURE__ */ Object.assign({ "../assets/svg/aim.svg": Lt, "../assets/svg/back.svg": Tt, "../assets/svg/connection.svg": $t, "../assets/svg/crop.svg": Dt, "../assets/svg/delete.svg": Rt, "../assets/svg/download.svg": Ut, "../assets/svg/edit.svg": Ft, "../assets/svg/hide.svg": Bt, "../assets/svg/pointer.svg": Ot, "../assets/svg/price-tag.svg": Et, "../assets/svg/rank.svg": Vt, "../assets/svg/refresh-right.svg": Nt, "../assets/svg/right.svg": Jt, "../assets/svg/view.svg": jt, "../assets/svg/zoom-in.svg": Wt, "../assets/svg/zoom-out.svg": qt });
+    return St(() => {
+      const a = `../assets/svg/${t.name}.svg`, o = e[a];
+      o ? n.value = o : (console.warn(`Icon ${t.name} not found at path ${a}`), n.value = "");
+    }), (a, o) => (x(), b("i", {
+      class: $(["svg-icon", [v.size ? `size-${v.size}` : ""]]),
+      innerHTML: n.value
+    }, null, 10, Xt));
+  }
+}), J = (v, t) => {
+  const n = v.__vccOpts || v;
+  for (const [e, a] of t)
+    n[e] = a;
+  return n;
+}, M = /* @__PURE__ */ J(Yt, [["__scopeId", "data-v-3928607b"]]), Kt = {
   key: 0,
   class: "left-sidebar"
-}, It = ["onClick", "title"], Pt = { class: "center-area" }, Dt = {
+}, Zt = ["onClick", "title"], Gt = { class: "center-area" }, Qt = {
   key: 0,
   class: "top-bar"
-}, Tt = { class: "label-selector" }, Ht = { class: "tags-row" }, Lt = ["onClick"], Mt = {
+}, te = { class: "label-selector" }, ee = { class: "tags-row" }, ne = ["onClick"], se = {
   key: 0,
   class: "no-labels"
-}, $t = {
+}, ie = {
   key: 1,
   class: "batch-nav"
-}, Rt = ["disabled"], Ut = ["disabled"], Ft = {
+}, oe = ["disabled"], ae = ["disabled"], le = {
   key: 1,
   class: "right-sidebar"
-}, Ot = { class: "label-list" }, Et = { class: "label-row" }, zt = ["onUpdate:modelValue", "onChange"], Bt = ["title"], Nt = ["onClick"], Jt = { class: "action-icon more-actions" }, Wt = ["onClick"], Vt = {
+}, re = { class: "label-list" }, ce = { class: "label-row" }, he = ["onUpdate:modelValue", "onChange"], de = ["title"], ge = ["onClick"], ve = { class: "action-icon more-actions" }, ue = ["onClick"], me = {
   key: 2,
   class: "modal-overlay"
-}, Xt = { class: "modal-content" }, jt = { class: "form-group" }, Yt = { class: "form-group" }, Zt = { class: "color-input-wrapper" }, Kt = /* @__PURE__ */ q({
+}, fe = { class: "modal-content" }, ye = { class: "form-group" }, pe = { class: "form-group" }, xe = { class: "color-input-wrapper" }, be = /* @__PURE__ */ N({
   __name: "ImageAnnotator",
   props: {
     annotationTypes: { default: () => ["rectangle", "polygon", "point", "rotatedRect"] },
@@ -536,403 +589,494 @@ const St = {
     labels: { default: () => [] },
     defaultActiveType: {},
     theme: { default: "light" },
-    readOnly: { type: Boolean, default: !1 }
+    readOnly: { type: Boolean, default: !1 },
+    image: {},
+    predictionCandidates: {},
+    reviewMode: {},
+    session: {},
+    requestId: {},
+    minZoom: {},
+    maxZoom: {}
   },
-  emits: ["annotationChange", "batchChange", "labelChange"],
-  setup(u, { expose: t, emit: e }) {
-    const n = u, a = e, i = k(null), o = k(null), s = k(null), r = k(null), v = k(0), d = k([]), g = k(""), f = k(!1), y = k({ name: "", color: "#FF0000" }), _ = bt(() => n.annotationTypes.filter((l) => l !== "category")), S = (l) => ({
-      rectangle: "Crop",
-      polygon: "Connection",
-      point: "Aim",
-      rotatedRect: "RefreshRight",
-      category: "PriceTag"
-    })[l] || l, O = (l) => ({
+  emits: ["annotationChange", "batchChange", "labelChange", "ready", "error", "tool:change", "viewport:change", "annotation:add", "annotation:update", "annotation:delete", "annotation:select", "prediction:request", "prediction:loaded", "prediction:apply", "prediction:reject", "review:action", "qa:issue"],
+  setup(v, { expose: t, emit: n }) {
+    const e = v, a = n, o = S(null), r = S(null), i = S(null), h = S(null), m = S(0), g = S([]), u = S(""), f = S(!1), p = S({ name: "", color: "#FF0000" }), w = S("none"), k = S([]), I = () => {
+      var c, y, _, A;
+      const s = e.batchImages[m.value], l = (s == null ? void 0 : s.imageUrl) || ((c = e.image) == null ? void 0 : c.url);
+      return {
+        eventId: `${Date.now()}-${Math.random().toString(36).slice(2, 10)}`,
+        timestamp: Date.now(),
+        requestId: e.requestId,
+        taskId: (y = e.session) == null ? void 0 : y.taskId,
+        imageId: ((_ = e.image) == null ? void 0 : _.id) || l,
+        operator: (A = e.session) == null ? void 0 : A.userId
+      };
+    }, R = (s) => {
+      var y;
+      const l = s == null ? void 0 : s.action;
+      if (!l) return;
+      const c = {
+        meta: I(),
+        action: l,
+        current: s == null ? void 0 : s.changedItem,
+        source: (y = s == null ? void 0 : s.changedItem) != null && y.predictionId ? "prediction" : "manual"
+      };
+      l === "add" && a("annotation:add", c), l === "update" && a("annotation:update", c), l === "delete" && a("annotation:delete", c), l === "select" && a("annotation:select", c);
+    }, Z = kt(() => e.annotationTypes.filter((s) => s !== "category")), it = (s) => ({
+      rectangle: "crop",
+      polygon: "connection",
+      point: "aim",
+      rotatedRect: "refresh-right",
+      category: "price-tag"
+    })[s] || s, ot = (s) => ({
       rectangle: "矩形框",
       polygon: "多边形",
       point: "关键点",
       rotatedRect: "旋转矩形",
       category: "分类标签"
-    })[l] || l;
-    At(() => {
-      if (i.value) {
-        s.value = new kt(i.value), s.value.on("annotationChange", (c) => {
-          if (c.action === "add" && c.changedItem) {
-            const A = d.value.find((w) => w.id === g.value);
-            A && (c.changedItem.label = A.name);
+    })[s] || s;
+    Mt(() => {
+      if (o.value) {
+        i.value = new Pt(o.value), i.value.on("annotationChange", (l) => {
+          if (l.action === "add" && l.changedItem) {
+            const c = g.value.find((y) => y.id === u.value);
+            c && (l.changedItem.label = c.name, l.changedItem.labelId = c.id);
           }
-          a("annotationChange", c);
-        }), R(), M();
-        const l = new ResizeObserver(() => {
-          var c;
-          (c = s.value) == null || c.resize();
+          a("annotationChange", l), R(l);
+        }), U(), E();
+        const s = new ResizeObserver(() => {
+          var l;
+          (l = i.value) == null || l.resize();
         });
-        o.value && l.observe(o.value);
+        r.value && s.observe(r.value), e.defaultActiveType && F(e.defaultActiveType), a("ready", { meta: I() });
       }
     });
-    const M = () => {
-      if (!s.value) return;
-      const l = d.value.find((A) => A.id === g.value);
-      l && s.value.setLabelStyle(l.color);
-      const c = d.value.filter((A) => A.visible).map((A) => A.name);
-      s.value.setVisibleLabels(c);
-    }, R = () => {
-      if (s.value && n.batchImages.length > 0) {
-        const l = n.batchImages[v.value];
-        s.value.loadImage(l.imageUrl), l.annotations && s.value.setAnnotations(l.annotations);
-      }
-    }, E = (l) => {
-      var c, A;
-      if (r.value = l, l !== "pan" && l !== "select" && d.value.length === 0) {
+    const E = () => {
+      if (!i.value) return;
+      const s = g.value.find((c) => c.id === u.value);
+      s && i.value.setLabelStyle(s.color);
+      const l = g.value.filter((c) => c.visible).map((c) => c.name);
+      i.value.setVisibleLabels(l);
+    }, U = () => {
+      var s;
+      if (i.value)
+        if (e.batchImages.length > 0) {
+          const l = e.batchImages[m.value];
+          i.value.loadImage(l.imageUrl), l.annotations ? i.value.setAnnotations(l.annotations) : i.value.setAnnotations([]);
+        } else (s = e.image) != null && s.url && i.value.loadImage(e.image.url);
+    }, F = (s) => {
+      var l, c;
+      if (h.value = s, s !== "pan" && s !== "select" && g.value.length === 0) {
         alert("请先创建标签！");
         return;
       }
-      l === "pan" || l === "select" ? (c = s.value) == null || c.setTool(l) : (A = s.value) == null || A.setTool(l);
-    }, H = () => {
-      var l;
-      (l = s.value) != null && l.activeAnnotation && s.value.deleteAnnotation(s.value.activeAnnotation.id);
-    }, z = () => {
-      var l;
-      return (l = s.value) == null ? void 0 : l.zoom(1);
+      s === "pan" || s === "select" ? (l = i.value) == null || l.setTool(s) : (c = i.value) == null || c.setTool(s), a("tool:change", { meta: I(), tool: s });
+    }, at = () => {
+      var s;
+      (s = i.value) != null && s.activeAnnotation && i.value.deleteAnnotation(i.value.activeAnnotation.id);
+    }, G = () => {
+      i.value && a("viewport:change", {
+        meta: I(),
+        scale: i.value.scale,
+        offset: { ...i.value.offset }
+      });
+    }, lt = () => {
+      var s;
+      (s = i.value) == null || s.zoom(1), G();
+    }, rt = () => {
+      var s;
+      (s = i.value) == null || s.zoom(-1), G();
+    }, ct = () => {
+      p.value = { name: "", color: "#2196F3" }, f.value = !0;
     }, Q = () => {
-      var l;
-      return (l = s.value) == null ? void 0 : l.zoom(-1);
-    }, st = () => {
-      y.value = { name: "", color: "#2196F3" }, f.value = !0;
-    }, tt = () => {
       f.value = !1;
-    }, ot = () => {
-      if (!y.value.name.trim()) {
+    }, ht = () => {
+      if (!p.value.name.trim()) {
         alert("请输入标签名称");
         return;
       }
-      const c = {
+      const l = {
         id: Date.now().toString(),
-        name: y.value.name,
-        color: y.value.color,
+        name: p.value.name,
+        color: p.value.color,
         visible: !0
       };
-      d.value.push(c), a("labelChange", d.value), d.value.length === 1 && B(c), tt();
-    }, B = (l) => {
-      var c;
-      g.value = l.id, (c = s.value) == null || c.setLabelStyle(l.color);
-    }, at = (l, c) => {
-      if (!l.startsWith("#")) return l;
-      let A = 0, w = 0, T = 0;
-      return l.length === 4 ? (A = parseInt(l[1] + l[1], 16), w = parseInt(l[2] + l[2], 16), T = parseInt(l[3] + l[3], 16)) : l.length === 7 && (A = parseInt(l.slice(1, 3), 16), w = parseInt(l.slice(3, 5), 16), T = parseInt(l.slice(5, 7), 16)), `rgba(${A}, ${w}, ${T}, ${c})`;
-    }, lt = (l) => {
-      var c;
-      if (l.id === g.value && ((c = s.value) == null || c.setLabelStyle(l.color)), s.value) {
-        const A = s.value.getAnnotations();
-        let w = !1;
-        A.forEach((T) => {
-          T.label === l.name && (T.style || (T.style = {}), T.style.strokeColor = l.color, T.style.fillColor = at(l.color, 0.2), w = !0);
-        }), w && s.value.render();
+      g.value.push(l), a("labelChange", g.value), g.value.length === 1 && B(l), Q();
+    }, B = (s) => {
+      var l;
+      u.value = s.id, (l = i.value) == null || l.setLabelStyle(s.color);
+    }, dt = (s, l) => {
+      if (!s.startsWith("#")) return s;
+      let c = 0, y = 0, _ = 0;
+      return s.length === 4 ? (c = parseInt(s[1] + s[1], 16), y = parseInt(s[2] + s[2], 16), _ = parseInt(s[3] + s[3], 16)) : s.length === 7 && (c = parseInt(s.slice(1, 3), 16), y = parseInt(s.slice(3, 5), 16), _ = parseInt(s.slice(5, 7), 16)), `rgba(${c}, ${y}, ${_}, ${l})`;
+    }, gt = (s) => {
+      var l;
+      if (s.id === u.value && ((l = i.value) == null || l.setLabelStyle(s.color)), i.value) {
+        const c = i.value.getAnnotations();
+        let y = !1;
+        c.forEach((_) => {
+          _.label === s.name && (_.style || (_.style = {}), _.style.strokeColor = s.color, _.style.fillColor = dt(s.color, 0.2), y = !0);
+        }), y && i.value.render();
       }
-      a("labelChange", d.value);
-    }, rt = (l) => {
-      l.visible = !l.visible, M();
-    }, ct = (l) => {
-      const c = d.value.findIndex((A) => A.id === l);
-      c > -1 && (d.value.splice(c, 1), a("labelChange", d.value), g.value === l && (g.value = d.value.length > 0 ? d.value[0].id : "", g.value && B(d.value[0])), M());
+      a("labelChange", g.value);
+    }, vt = (s) => {
+      s.visible = !s.visible, E();
+    }, ut = (s) => {
+      const l = g.value.findIndex((c) => c.id === s);
+      l > -1 && (g.value.splice(l, 1), a("labelChange", g.value), u.value === s && (u.value = g.value.length > 0 ? g.value[0].id : "", u.value && B(g.value[0])), E());
     };
-    it(() => n.labels, (l) => {
-      const c = JSON.parse(JSON.stringify(l || []));
-      if (d.value = c, d.value.length > 0)
-        if (!g.value || !d.value.find((A) => A.id === g.value))
-          B(d.value[0]);
+    V(() => e.labels, (s) => {
+      const l = JSON.parse(JSON.stringify(s || []));
+      if (g.value = l, g.value.length > 0)
+        if (!u.value || !g.value.find((c) => c.id === u.value))
+          B(g.value[0]);
         else {
-          const A = d.value.find((w) => w.id === g.value);
-          A && B(A);
+          const c = g.value.find((y) => y.id === u.value);
+          c && B(c);
         }
       else
-        g.value = "";
-      M();
+        u.value = "";
+      E();
     }, { immediate: !0, deep: !0 });
-    const ht = () => {
-      v.value > 0 && (W(), v.value--, R(), V());
-    }, dt = () => {
-      v.value < n.batchImages.length - 1 && (W(), v.value++, R(), V());
-    }, W = () => {
-      if (s.value) {
-        const l = s.value.getAnnotations();
-        n.batchImages[v.value].annotations = l;
+    const mt = () => {
+      m.value > 0 && (j(), m.value--, U(), W());
+    }, ft = () => {
+      m.value < e.batchImages.length - 1 && (j(), m.value++, U(), W());
+    }, j = () => {
+      if (i.value) {
+        const s = i.value.getAnnotations();
+        e.batchImages[m.value].annotations = s;
       }
-    }, V = () => {
-      const l = n.batchImages[v.value];
+    }, W = () => {
+      const s = e.batchImages[m.value];
       a("batchChange", {
-        currentIndex: v.value,
-        total: n.batchImages.length,
-        currentImageUrl: l.imageUrl,
-        currentAnnotations: l.annotations || []
+        currentIndex: m.value,
+        total: e.batchImages.length,
+        currentImageUrl: s.imageUrl,
+        currentAnnotations: s.annotations || []
+      });
+    }, tt = (s = []) => {
+      var _;
+      if (!i.value) return;
+      if (k.value = JSON.parse(JSON.stringify(s)), k.value.length === 0) {
+        w.value = "none";
+        return;
+      }
+      w.value = "loaded";
+      const c = (i.value.getAnnotations() || []).filter((A) => !A.predictionId), y = k.value.map((A) => {
+        const P = JSON.parse(JSON.stringify(A.annotation));
+        return P.id = P.id || `pred-${A.id}`, P.predictionId = A.id, P.modelRunId = A.modelRunId || P.modelRunId, P.confidence = A.confidence ?? P.confidence, P.reviewStatus = P.reviewStatus || "draft", P;
+      });
+      i.value.setAnnotations([...c, ...y]), a("prediction:loaded", {
+        meta: I(),
+        modelRunId: (_ = k.value[0]) == null ? void 0 : _.modelRunId,
+        candidates: k.value
       });
+    }, yt = (s) => {
+      w.value = "loading", a("prediction:request", {
+        meta: I(),
+        threshold: s
+      });
+    }, pt = (s, l) => {
+      var _;
+      if (!i.value) return [];
+      w.value = "applying";
+      const y = (i.value.getAnnotations() || []).filter((A) => A.predictionId && s.includes(A.predictionId));
+      return y.forEach((A) => {
+        A.reviewStatus = "accepted";
+      }), w.value = "applied", a("prediction:apply", {
+        meta: I(),
+        modelRunId: (_ = y[0]) == null ? void 0 : _.modelRunId,
+        candidateIds: s,
+        threshold: l,
+        acceptedAnnotations: y
+      }), i.value.render(), y;
+    }, xt = (s, l) => {
+      var _;
+      if (!i.value) return;
+      const c = i.value.getAnnotations() || [], y = c.filter((A) => !(A.predictionId && s.includes(A.predictionId)));
+      i.value.setAnnotations(y), a("prediction:reject", {
+        meta: I(),
+        modelRunId: (_ = c.find((A) => A.predictionId && s.includes(A.predictionId))) == null ? void 0 : _.modelRunId,
+        candidateIds: s,
+        reason: l
+      });
+    }, bt = (s, l, c) => {
+      if (!i.value) return;
+      const y = i.value.getAnnotations() || [], _ = {
+        pass: "accepted",
+        reject: "rejected",
+        revise: "needs_fix"
+      };
+      y.forEach((A) => {
+        l.includes(A.id) && (A.reviewStatus = _[s]);
+      }), i.value.render(), a("review:action", {
+        meta: I(),
+        reviewAction: s,
+        targetAnnotationIds: l,
+        comment: c
+      });
+    }, wt = (s, l, c) => {
+      a("qa:issue", {
+        meta: I(),
+        issueType: s,
+        targetAnnotationIds: l,
+        detail: c
+      });
+    }, At = (s, l = []) => {
+      i.value && (i.value.loadImage(s.url), i.value.setAnnotations(l));
+    }, Ct = (s) => {
+      var l;
+      (l = i.value) == null || l.setAnnotations(s);
+    }, et = () => {
+      var s;
+      return ((s = i.value) == null ? void 0 : s.getAnnotations()) || [];
     };
     return t({
-      jumpTo: (l) => {
-        l >= 0 && l < n.batchImages.length && (W(), v.value = l, R(), V());
+      jumpTo: (s) => {
+        s >= 0 && s < e.batchImages.length && (j(), m.value = s, U(), W());
+      },
+      setImage: At,
+      setAnnotations: Ct,
+      getAnnotations: et,
+      selectTool: F,
+      loadPredictionCandidates: tt,
+      requestPrediction: yt,
+      applyPredictions: pt,
+      rejectPredictions: xt,
+      reviewAction: bt,
+      reportQaIssue: wt,
+      exportAnnotations: (s = "json") => {
+        var c, y;
+        const l = et();
+        return {
+          format: s,
+          image: ((c = e.batchImages[m.value]) == null ? void 0 : c.imageUrl) || ((y = e.image) == null ? void 0 : y.url) || "",
+          annotations: l
+        };
+      },
+      getAllAnnotations: () => {
+        var s, l;
+        return e.batchImages.length > 0 ? e.batchImages : [{
+          imageUrl: ((s = e.image) == null ? void 0 : s.url) || "",
+          annotations: ((l = i.value) == null ? void 0 : l.getAnnotations()) || []
+        }];
       },
-      getAllAnnotations: () => n.batchImages,
       getCurrentAnnotation: () => {
-        var l;
+        var s, l, c;
         return {
-          imageUrl: n.batchImages[v.value].imageUrl,
-          annotations: ((l = s.value) == null ? void 0 : l.getAnnotations()) || []
+          imageUrl: ((s = e.batchImages[m.value]) == null ? void 0 : s.imageUrl) || ((l = e.image) == null ? void 0 : l.url) || "",
+          annotations: ((c = i.value) == null ? void 0 : c.getAnnotations()) || []
         };
       }
-    }), (l, c) => {
-      const A = P("Rank"), w = P("el-icon"), T = P("Pointer"), gt = P("ZoomIn"), ut = P("ZoomOut"), et = P("Delete"), vt = P("Back"), ft = P("Right"), yt = P("View"), mt = P("Hide");
-      return m(), x("div", {
-        class: N(["annotation-container", u.theme])
-      }, [
-        u.readOnly ? L("", !0) : (m(), x("div", St, [
-          h("div", {
-            class: N(["tool-btn", { active: r.value === "pan" }]),
-            onClick: c[0] || (c[0] = (p) => E("pan")),
-            title: "拖动"
-          }, [
-            b(w, null, {
-              default: I(() => [
-                b(A)
-              ]),
-              _: 1
-            })
-          ], 2),
-          h("div", {
-            class: N(["tool-btn", { active: r.value === "select" }]),
-            onClick: c[1] || (c[1] = (p) => E("select")),
-            title: "选择"
-          }, [
-            b(w, null, {
-              default: I(() => [
-                b(T)
-              ]),
-              _: 1
-            })
-          ], 2),
-          c[4] || (c[4] = h("div", { class: "divider" }, null, -1)),
-          (m(!0), x($, null, F(_.value, (p) => (m(), x("div", {
-            key: p,
-            class: N(["tool-btn", { active: r.value === p }]),
-            onClick: (U) => E(p),
-            title: O(p)
-          }, [
-            b(w, null, {
-              default: I(() => [
-                (m(), X(Ct(S(p))))
-              ]),
-              _: 2
-            }, 1024)
-          ], 10, It))), 128)),
-          c[5] || (c[5] = h("div", { class: "divider" }, null, -1)),
-          h("div", {
-            class: "tool-btn",
-            onClick: z,
-            title: "放大"
-          }, [
-            b(w, null, {
-              default: I(() => [
-                b(gt)
-              ]),
-              _: 1
-            })
-          ]),
-          h("div", {
-            class: "tool-btn",
-            onClick: Q,
-            title: "缩小"
-          }, [
-            b(w, null, {
-              default: I(() => [
-                b(ut)
-              ]),
-              _: 1
-            })
-          ]),
-          c[6] || (c[6] = h("div", { class: "divider" }, null, -1)),
-          h("div", {
-            class: "tool-btn",
-            onClick: H,
-            title: "删除选中"
-          }, [
-            b(w, null, {
-              default: I(() => [
-                b(et)
-              ]),
-              _: 1
-            })
+    }), V(() => {
+      var s;
+      return (s = e.image) == null ? void 0 : s.url;
+    }, () => {
+      var s;
+      e.batchImages.length === 0 && ((s = e.image) != null && s.url) && U();
+    }), V(() => e.predictionCandidates, (s) => {
+      s && tt(s);
+    }, { immediate: !0, deep: !0 }), (s, l) => (x(), b("div", {
+      class: $(["annotation-container", v.theme])
+    }, [
+      v.readOnly ? L("", !0) : (x(), b("div", Kt, [
+        d("div", {
+          class: $(["tool-btn", { active: h.value === "pan" }]),
+          onClick: l[0] || (l[0] = (c) => F("pan")),
+          title: "拖动"
+        }, [
+          z(M, { name: "rank" })
+        ], 2),
+        d("div", {
+          class: $(["tool-btn", { active: h.value === "select" }]),
+          onClick: l[1] || (l[1] = (c) => F("select")),
+          title: "选择"
+        }, [
+          z(M, { name: "pointer" })
+        ], 2),
+        l[4] || (l[4] = d("div", { class: "divider" }, null, -1)),
+        (x(!0), b(T, null, D(Z.value, (c) => (x(), b("div", {
+          key: c,
+          class: $(["tool-btn", { active: h.value === c }]),
+          onClick: (y) => F(c),
+          title: ot(c)
+        }, [
+          z(M, {
+            name: it(c)
+          }, null, 8, ["name"])
+        ], 10, Zt))), 128)),
+        l[5] || (l[5] = d("div", { class: "divider" }, null, -1)),
+        d("div", {
+          class: "tool-btn",
+          onClick: lt,
+          title: "放大"
+        }, [
+          z(M, { name: "zoom-in" })
+        ]),
+        d("div", {
+          class: "tool-btn",
+          onClick: rt,
+          title: "缩小"
+        }, [
+          z(M, { name: "zoom-out" })
+        ]),
+        l[6] || (l[6] = d("div", { class: "divider" }, null, -1)),
+        d("div", {
+          class: "tool-btn",
+          onClick: at,
+          title: "删除选中"
+        }, [
+          z(M, { name: "delete" })
+        ])
+      ])),
+      d("div", Gt, [
+        v.readOnly ? L("", !0) : (x(), b("div", Qt, [
+          d("div", te, [
+            l[7] || (l[7] = d("span", { class: "label-text" }, "当前标签:", -1)),
+            d("div", ee, [
+              (x(!0), b(T, null, D(g.value, (c) => (x(), b("div", {
+                key: c.id,
+                class: $(["tag-chip", { active: u.value === c.id }]),
+                style: K({ backgroundColor: c.color, borderColor: c.color }),
+                onClick: (y) => B(c)
+              }, H(c.name), 15, ne))), 128)),
+              g.value.length === 0 ? (x(), b("div", se, "请在右侧创建标签")) : L("", !0)
+            ])
           ])
         ])),
-        h("div", Pt, [
-          u.readOnly ? L("", !0) : (m(), x("div", Dt, [
-            h("div", Tt, [
-              c[7] || (c[7] = h("span", { class: "label-text" }, "当前标签:", -1)),
-              h("div", Ht, [
-                (m(!0), x($, null, F(d.value, (p) => (m(), x("div", {
-                  key: p.id,
-                  class: N(["tag-chip", { active: g.value === p.id }]),
-                  style: K({ backgroundColor: p.color, borderColor: p.color }),
-                  onClick: (U) => B(p)
-                }, D(p.name), 15, Lt))), 128)),
-                d.value.length === 0 ? (m(), x("div", Mt, "请在右侧创建标签")) : L("", !0)
-              ])
-            ])
-          ])),
-          h("div", {
-            class: "canvas-wrapper",
-            ref_key: "canvasWrapper",
+        d("div", {
+          class: "canvas-wrapper",
+          ref_key: "canvasWrapper",
+          ref: r
+        }, [
+          d("canvas", {
+            ref_key: "canvasRef",
             ref: o
+          }, null, 512)
+        ], 512),
+        v.batchImages && v.batchImages.length > 0 ? (x(), b("div", ie, [
+          d("button", {
+            onClick: mt,
+            disabled: m.value <= 0
           }, [
-            h("canvas", {
-              ref_key: "canvasRef",
-              ref: i
-            }, null, 512)
-          ], 512),
-          u.batchImages && u.batchImages.length > 0 ? (m(), x("div", $t, [
-            h("button", {
-              onClick: ht,
-              disabled: v.value <= 0
-            }, [
-              b(w, null, {
-                default: I(() => [
-                  b(vt)
-                ]),
-                _: 1
-              }),
-              c[8] || (c[8] = J(" 上一张 ", -1))
-            ], 8, Rt),
-            h("span", null, D(v.value + 1) + " / " + D(u.batchImages.length), 1),
-            h("button", {
-              onClick: dt,
-              disabled: v.value >= u.batchImages.length - 1
-            }, [
-              c[9] || (c[9] = J(" 下一张 ", -1)),
-              b(w, null, {
-                default: I(() => [
-                  b(ft)
-                ]),
-                _: 1
-              })
-            ], 8, Ut)
-          ])) : L("", !0)
+            z(M, { name: "back" }),
+            l[8] || (l[8] = O(" 上一张 ", -1))
+          ], 8, oe),
+          d("span", null, H(m.value + 1) + " / " + H(v.batchImages.length), 1),
+          d("button", {
+            onClick: ft,
+            disabled: m.value >= v.batchImages.length - 1
+          }, [
+            l[9] || (l[9] = O(" 下一张 ", -1)),
+            z(M, { name: "right" })
+          ], 8, ae)
+        ])) : L("", !0)
+      ]),
+      v.readOnly ? L("", !0) : (x(), b("div", le, [
+        d("div", { class: "sidebar-header" }, [
+          l[10] || (l[10] = d("h3", null, "标签管理", -1)),
+          d("button", {
+            class: "add-btn",
+            onClick: ct
+          }, "添加标签")
         ]),
-        u.readOnly ? L("", !0) : (m(), x("div", Ft, [
-          h("div", { class: "sidebar-header" }, [
-            c[10] || (c[10] = h("h3", null, "标签管理", -1)),
-            h("button", {
-              class: "add-btn",
-              onClick: st
-            }, "添加标签")
-          ]),
-          h("div", Ot, [
-            (m(!0), x($, null, F(d.value, (p) => (m(), x("div", {
-              key: p.id,
-              class: "label-item"
-            }, [
-              h("div", Et, [
-                h("label", {
-                  class: "color-wrapper",
-                  style: K({ backgroundColor: p.color })
-                }, [
-                  j(h("input", {
-                    type: "color",
-                    "onUpdate:modelValue": (U) => p.color = U,
-                    onChange: (U) => lt(p),
-                    style: { visibility: "hidden", width: "0", height: "0" }
-                  }, null, 40, zt), [
-                    [Y, p.color]
-                  ])
-                ], 4),
-                h("span", {
-                  class: "label-name",
-                  title: p.name
-                }, D(p.name), 9, Bt),
-                h("span", {
-                  class: "action-icon eye",
-                  onClick: (U) => rt(p)
-                }, [
-                  p.visible ? (m(), X(w, { key: 0 }, {
-                    default: I(() => [
-                      b(yt)
-                    ]),
-                    _: 1
-                  })) : (m(), X(w, { key: 1 }, {
-                    default: I(() => [
-                      b(mt)
-                    ]),
-                    _: 1
-                  }))
-                ], 8, Nt),
-                h("div", Jt, [
-                  c[11] || (c[11] = h("span", { class: "dots" }, "•••", -1)),
-                  h("span", {
-                    class: "delete-btn",
-                    onClick: (U) => ct(p.id),
-                    title: "删除"
-                  }, [
-                    b(w, null, {
-                      default: I(() => [
-                        b(et)
-                      ]),
-                      _: 1
-                    })
-                  ], 8, Wt)
+        d("div", re, [
+          (x(!0), b(T, null, D(g.value, (c) => (x(), b("div", {
+            key: c.id,
+            class: "label-item"
+          }, [
+            d("div", ce, [
+              d("label", {
+                class: "color-wrapper",
+                style: K({ backgroundColor: c.color })
+              }, [
+                q(d("input", {
+                  type: "color",
+                  "onUpdate:modelValue": (y) => c.color = y,
+                  onChange: (y) => gt(c),
+                  style: { visibility: "hidden", width: "0", height: "0" }
+                }, null, 40, he), [
+                  [X, c.color]
                 ])
+              ], 4),
+              d("span", {
+                class: "label-name",
+                title: c.name
+              }, H(c.name), 9, de),
+              d("span", {
+                class: "action-icon eye",
+                onClick: (y) => vt(c)
+              }, [
+                c.visible ? (x(), nt(M, {
+                  key: 0,
+                  name: "view"
+                })) : (x(), nt(M, {
+                  key: 1,
+                  name: "hide"
+                }))
+              ], 8, ge),
+              d("div", ve, [
+                l[11] || (l[11] = d("span", { class: "dots" }, "•••", -1)),
+                d("span", {
+                  class: "delete-btn",
+                  onClick: (y) => ut(c.id),
+                  title: "删除"
+                }, [
+                  z(M, { name: "delete" })
+                ], 8, ue)
               ])
-            ]))), 128))
-          ])
-        ])),
-        f.value ? (m(), x("div", Vt, [
-          h("div", Xt, [
-            c[14] || (c[14] = h("h3", null, "新增标签", -1)),
-            h("div", jt, [
-              c[12] || (c[12] = h("label", null, "名称", -1)),
-              j(h("input", {
-                "onUpdate:modelValue": c[2] || (c[2] = (p) => y.value.name = p),
-                placeholder: "请输入标签名称",
-                class: "modal-input"
+            ])
+          ]))), 128))
+        ])
+      ])),
+      f.value ? (x(), b("div", me, [
+        d("div", fe, [
+          l[14] || (l[14] = d("h3", null, "新增标签", -1)),
+          d("div", ye, [
+            l[12] || (l[12] = d("label", null, "名称", -1)),
+            q(d("input", {
+              "onUpdate:modelValue": l[2] || (l[2] = (c) => p.value.name = c),
+              placeholder: "请输入标签名称",
+              class: "modal-input"
+            }, null, 512), [
+              [X, p.value.name]
+            ])
+          ]),
+          d("div", pe, [
+            l[13] || (l[13] = d("label", null, "颜色", -1)),
+            d("div", xe, [
+              q(d("input", {
+                type: "color",
+                "onUpdate:modelValue": l[3] || (l[3] = (c) => p.value.color = c),
+                class: "modal-color-picker"
               }, null, 512), [
-                [Y, y.value.name]
-              ])
-            ]),
-            h("div", Yt, [
-              c[13] || (c[13] = h("label", null, "颜色", -1)),
-              h("div", Zt, [
-                j(h("input", {
-                  type: "color",
-                  "onUpdate:modelValue": c[3] || (c[3] = (p) => y.value.color = p),
-                  class: "modal-color-picker"
-                }, null, 512), [
-                  [Y, y.value.color]
-                ]),
-                h("span", null, D(y.value.color), 1)
-              ])
-            ]),
-            h("div", { class: "modal-actions" }, [
-              h("button", {
-                onClick: tt,
-                class: "cancel-btn"
-              }, "取消"),
-              h("button", {
-                onClick: ot,
-                class: "confirm-btn"
-              }, "确认")
+                [X, p.value.color]
+              ]),
+              d("span", null, H(p.value.color), 1)
             ])
+          ]),
+          d("div", { class: "modal-actions" }, [
+            d("button", {
+              onClick: Q,
+              class: "cancel-btn"
+            }, "取消"),
+            d("button", {
+              onClick: ht,
+              class: "confirm-btn"
+            }, "确认")
           ])
-        ])) : L("", !0)
-      ], 2);
-    };
+        ])
+      ])) : L("", !0)
+    ], 2));
   }
-}), G = (u, t) => {
-  const e = u.__vccOpts || u;
-  for (const [n, a] of t)
-    e[n] = a;
-  return e;
-}, qt = /* @__PURE__ */ G(Kt, [["__scopeId", "data-v-d3dc5a63"]]), Gt = {
+}), we = /* @__PURE__ */ J(be, [["__scopeId", "data-v-7b013204"]]), Ae = {
   class: "thumbnail-wrapper",
   ref: "wrapper"
-}, Qt = ["src", "alt"], te = ["viewBox"], ee = ["x", "y", "width", "height", "stroke"], ne = ["points", "stroke"], ie = ["x", "y", "fill"], se = {
+}, Ce = ["src", "alt"], _e = ["viewBox"], Ie = ["x", "y", "width", "height", "stroke"], Se = ["points", "stroke"], ke = ["x", "y", "fill"], Me = {
   key: 1,
   class: "loading-placeholder"
-}, oe = /* @__PURE__ */ q({
+}, ze = /* @__PURE__ */ N({
   __name: "AnnotationThumbnail",
   props: {
     src: {},
@@ -940,213 +1084,195 @@ const St = {
     alt: {},
     labels: {}
   },
-  setup(u) {
-    const t = u, e = k(null), n = k(!1), a = k(0), i = k(0), o = () => {
-      e.value && (a.value = e.value.naturalWidth, i.value = e.value.naturalHeight, n.value = !0);
-    }, s = (g) => {
+  setup(v) {
+    const t = v, n = S(null), e = S(!1), a = S(0), o = S(0), r = () => {
+      n.value && (a.value = n.value.naturalWidth, o.value = n.value.naturalHeight, e.value = !0);
+    }, i = (u) => {
       var f;
-      if ((f = g.style) != null && f.strokeColor) return g.style.strokeColor;
+      if ((f = u.style) != null && f.strokeColor) return u.style.strokeColor;
       if (t.labels) {
-        const y = t.labels.find((_) => _.name === g.label);
-        if (y) return y.color;
+        const p = t.labels.find((w) => w.name === u.label);
+        if (p) return p.color;
       }
       return "#FF0000";
-    }, r = (g) => {
-      const f = g.coordinates, y = Math.min(f.x1, f.x2), _ = Math.min(f.y1, f.y2), S = Math.abs(f.x1 - f.x2), O = Math.abs(f.y1 - f.y2);
-      return { x: y, y: _, width: S, height: O };
-    }, v = (g) => g.coordinates.points.map((y) => `${y.x},${y.y}`).join(" "), d = (g) => {
-      if (g.type === "rectangle") {
-        const f = r(g);
+    }, h = (u) => {
+      const f = u.coordinates, p = Math.min(f.x1, f.x2), w = Math.min(f.y1, f.y2), k = Math.abs(f.x1 - f.x2), I = Math.abs(f.y1 - f.y2);
+      return { x: p, y: w, width: k, height: I };
+    }, m = (u) => u.coordinates.points.map((p) => `${p.x},${p.y}`).join(" "), g = (u) => {
+      if (u.type === "rectangle") {
+        const f = h(u);
         return { x: f.x, y: f.y - 5 };
-      } else if (g.type === "polygon") {
-        const f = g.coordinates.points;
+      } else if (u.type === "polygon") {
+        const f = u.coordinates.points;
         if (f.length > 0) return { x: f[0].x, y: f[0].y - 5 };
       }
       return { x: 0, y: 0 };
     };
-    return (g, f) => (m(), x("div", Gt, [
-      h("img", {
+    return (u, f) => (x(), b("div", Ae, [
+      d("img", {
         ref_key: "img",
-        ref: e,
-        src: u.src,
+        ref: n,
+        src: v.src,
         class: "thumbnail-image",
-        onLoad: o,
-        alt: u.alt
-      }, null, 40, Qt),
-      n.value ? (m(), x("svg", {
+        onLoad: r,
+        alt: v.alt
+      }, null, 40, Ce),
+      e.value ? (x(), b("svg", {
         key: 0,
         class: "annotation-overlay",
-        viewBox: `0 0 ${a.value} ${i.value}`,
+        viewBox: `0 0 ${a.value} ${o.value}`,
         preserveAspectRatio: "none"
       }, [
-        (m(!0), x($, null, F(u.annotations, (y) => (m(), x($, {
-          key: y.id
+        (x(!0), b(T, null, D(v.annotations, (p) => (x(), b(T, {
+          key: p.id
         }, [
-          y.type === "rectangle" ? (m(), x("rect", {
+          p.type === "rectangle" ? (x(), b("rect", {
             key: 0,
-            x: r(y).x,
-            y: r(y).y,
-            width: r(y).width,
-            height: r(y).height,
-            stroke: s(y),
+            x: h(p).x,
+            y: h(p).y,
+            width: h(p).width,
+            height: h(p).height,
+            stroke: i(p),
             "stroke-width": "2",
             fill: "transparent"
-          }, null, 8, ee)) : L("", !0),
-          y.type === "polygon" ? (m(), x("polygon", {
+          }, null, 8, Ie)) : L("", !0),
+          p.type === "polygon" ? (x(), b("polygon", {
             key: 1,
-            points: v(y),
-            stroke: s(y),
+            points: m(p),
+            stroke: i(p),
             "stroke-width": "2",
             fill: "transparent"
-          }, null, 8, ne)) : L("", !0),
-          y.label ? (m(), x("text", {
+          }, null, 8, Se)) : L("", !0),
+          p.label ? (x(), b("text", {
             key: 2,
-            x: d(y).x,
-            y: d(y).y,
-            fill: s(y),
+            x: g(p).x,
+            y: g(p).y,
+            fill: i(p),
             "font-size": "14",
             "font-weight": "bold",
             class: "anno-label"
-          }, D(y.label), 9, ie)) : L("", !0)
+          }, H(p.label), 9, ke)) : L("", !0)
         ], 64))), 128))
-      ], 8, te)) : (m(), x("div", se, "Loading..."))
+      ], 8, _e)) : (x(), b("div", Me, "Loading..."))
     ], 512));
   }
-}), ae = /* @__PURE__ */ G(oe, [["__scopeId", "data-v-78bcbe0c"]]), le = { class: "batch-annotator" }, re = {
+}), He = /* @__PURE__ */ J(ze, [["__scopeId", "data-v-78bcbe0c"]]), Pe = { class: "batch-annotator" }, Le = {
   key: 0,
   class: "gallery-view"
-}, ce = { class: "gallery-header" }, he = { class: "label-summary" }, de = { class: "gallery-grid" }, ge = ["onClick"], ue = { class: "thumbnail-wrapper" }, ve = { class: "img-meta" }, fe = { class: "img-index" }, ye = { class: "anno-count" }, me = { class: "bottom-bar" }, pe = {
+}, Te = { class: "gallery-header" }, $e = { class: "label-summary" }, De = { class: "gallery-grid" }, Re = ["onClick"], Ue = { class: "thumbnail-wrapper" }, Fe = { class: "img-meta" }, Be = { class: "img-index" }, Oe = { class: "anno-count" }, Ee = { class: "bottom-bar" }, Ve = {
   key: 1,
   class: "editor-view"
-}, xe = { class: "editor-header" }, be = { class: "header-left" }, Ae = { class: "editor-title" }, Ce = { class: "editor-content" }, we = /* @__PURE__ */ q({
+}, Ne = { class: "editor-header" }, Je = { class: "header-left" }, je = { class: "editor-title" }, We = { class: "editor-content" }, qe = /* @__PURE__ */ N({
   __name: "BatchAnnotator",
   props: {
     images: {},
     labels: {}
   },
   emits: ["export", "update:images"],
-  setup(u, { emit: t }) {
-    const e = u, n = t, a = k("gallery"), i = k([]), o = k(0), s = k(null);
-    it(() => e.images, (_) => {
-      i.value = JSON.parse(JSON.stringify(_));
+  setup(v, { emit: t }) {
+    const n = v, e = t, a = S("gallery"), o = S([]), r = S(0), i = S(null);
+    V(() => n.images, (w) => {
+      o.value = JSON.parse(JSON.stringify(w));
     }, { immediate: !0, deep: !0 });
-    const r = (_) => {
-      o.value = _, a.value = "editor", wt(() => {
-        s.value && s.value.jumpTo && s.value.jumpTo(_);
+    const h = (w) => {
+      r.value = w, a.value = "editor", zt(() => {
+        i.value && i.value.jumpTo && i.value.jumpTo(w);
       });
-    }, v = () => {
-      if (s.value && s.value.getCurrentAnnotation) {
-        const _ = s.value.getCurrentAnnotation();
-        i.value[o.value] && (i.value[o.value].annotations = _.annotations);
+    }, m = () => {
+      if (i.value && i.value.getCurrentAnnotation) {
+        const w = i.value.getCurrentAnnotation();
+        o.value[r.value] && (o.value[r.value].annotations = w.annotations);
       }
       a.value = "gallery";
-    }, d = () => {
-      n("export", i.value);
-    }, g = (_) => {
-      o.value = _.currentIndex, i.value[_.currentIndex] && (i.value[_.currentIndex].annotations = _.currentAnnotations);
-    }, f = (_) => {
-      if (s.value && s.value.getCurrentAnnotation) {
-        const S = s.value.getCurrentAnnotation();
-        i.value[o.value] && (i.value[o.value].annotations = S.annotations, n("update:images", i.value));
+    }, g = () => {
+      e("export", o.value);
+    }, u = (w) => {
+      r.value = w.currentIndex, o.value[w.currentIndex] && (o.value[w.currentIndex].annotations = w.currentAnnotations);
+    }, f = (w) => {
+      if (i.value && i.value.getCurrentAnnotation) {
+        const k = i.value.getCurrentAnnotation();
+        o.value[r.value] && (o.value[r.value].annotations = k.annotations, e("update:images", o.value));
       }
-    }, y = (_) => {
+    }, p = (w) => {
     };
-    return (_, S) => {
-      const O = P("Edit"), M = P("el-icon"), R = P("Download"), E = P("Back");
-      return m(), x("div", le, [
-        a.value === "gallery" ? (m(), x("div", re, [
-          h("div", ce, [
-            h("h3", null, "批量查看与标注 (" + D(i.value.length) + " 张)", 1),
-            h("div", he, [
-              (m(!0), x($, null, F(u.labels, (H) => (m(), x("span", {
-                key: H.id,
-                class: "label-badge",
-                style: K({ backgroundColor: H.color })
-              }, D(H.name), 5))), 128))
+    return (w, k) => (x(), b("div", Pe, [
+      a.value === "gallery" ? (x(), b("div", Le, [
+        d("div", Te, [
+          d("h3", null, "批量查看与标注 (" + H(o.value.length) + " 张)", 1),
+          d("div", $e, [
+            (x(!0), b(T, null, D(v.labels, (I) => (x(), b("span", {
+              key: I.id,
+              class: "label-badge",
+              style: K({ backgroundColor: I.color })
+            }, H(I.name), 5))), 128))
+          ])
+        ]),
+        d("div", De, [
+          (x(!0), b(T, null, D(o.value, (I, R) => (x(), b("div", {
+            key: R,
+            class: "gallery-item",
+            onClick: (Z) => h(R)
+          }, [
+            d("div", Ue, [
+              z(He, {
+                src: I.imageUrl,
+                annotations: I.annotations || [],
+                labels: v.labels
+              }, null, 8, ["src", "annotations", "labels"])
+            ]),
+            d("div", Fe, [
+              d("span", Be, "#" + H(R + 1), 1),
+              d("span", Oe, H((I.annotations || []).length) + " 标注", 1)
             ])
+          ], 8, Re))), 128))
+        ]),
+        d("div", Ee, [
+          d("button", {
+            class: "action-btn primary",
+            onClick: k[0] || (k[0] = (I) => h(0))
+          }, [
+            z(M, { name: "edit" }),
+            k[1] || (k[1] = O(" 手动标注 ", -1))
           ]),
-          h("div", de, [
-            (m(!0), x($, null, F(i.value, (H, z) => (m(), x("div", {
-              key: z,
-              class: "gallery-item",
-              onClick: (Q) => r(z)
-            }, [
-              h("div", ue, [
-                b(ae, {
-                  src: H.imageUrl,
-                  annotations: H.annotations || [],
-                  labels: u.labels
-                }, null, 8, ["src", "annotations", "labels"])
-              ]),
-              h("div", ve, [
-                h("span", fe, "#" + D(z + 1), 1),
-                h("span", ye, D((H.annotations || []).length) + " 标注", 1)
-              ])
-            ], 8, ge))), 128))
-          ]),
-          h("div", me, [
-            h("button", {
-              class: "action-btn primary",
-              onClick: S[0] || (S[0] = (H) => r(0))
+          d("button", {
+            class: "action-btn success",
+            onClick: g
+          }, [
+            z(M, { name: "download" }),
+            k[2] || (k[2] = O(" 导出 ", -1))
+          ])
+        ])
+      ])) : (x(), b("div", Ve, [
+        d("div", Ne, [
+          d("div", Je, [
+            d("button", {
+              class: "back-btn",
+              onClick: m
             }, [
-              b(M, null, {
-                default: I(() => [
-                  b(O)
-                ]),
-                _: 1
-              }),
-              S[1] || (S[1] = J(" 手动标注 ", -1))
+              z(M, { name: "back" }),
+              k[3] || (k[3] = O(" 返回列表 ", -1))
             ]),
-            h("button", {
-              class: "action-btn success",
-              onClick: d
-            }, [
-              b(M, null, {
-                default: I(() => [
-                  b(R)
-                ]),
-                _: 1
-              }),
-              S[2] || (S[2] = J(" 导出 ", -1))
-            ])
+            d("span", je, "正在标注: " + H(r.value + 1) + " / " + H(o.value.length), 1)
           ])
-        ])) : (m(), x("div", pe, [
-          h("div", xe, [
-            h("div", be, [
-              h("button", {
-                class: "back-btn",
-                onClick: v
-              }, [
-                b(M, null, {
-                  default: I(() => [
-                    b(E)
-                  ]),
-                  _: 1
-                }),
-                S[3] || (S[3] = J(" 返回列表 ", -1))
-              ]),
-              h("span", Ae, "正在标注: " + D(o.value + 1) + " / " + D(i.value.length), 1)
-            ])
-          ]),
-          h("div", Ce, [
-            b(qt, {
-              ref_key: "annotatorRef",
-              ref: s,
-              batchImages: i.value,
-              labels: u.labels,
-              annotationTypes: ["rectangle", "polygon", "point", "rotatedRect"],
-              onBatchChange: g,
-              onAnnotationChange: f,
-              onLabelChange: y
-            }, null, 8, ["batchImages", "labels"])
-          ])
-        ]))
-      ]);
-    };
+        ]),
+        d("div", We, [
+          z(we, {
+            ref_key: "annotatorRef",
+            ref: i,
+            batchImages: o.value,
+            labels: v.labels,
+            annotationTypes: ["rectangle", "polygon", "point", "rotatedRect"],
+            onBatchChange: u,
+            onAnnotationChange: f,
+            onLabelChange: p
+          }, null, 8, ["batchImages", "labels"])
+        ])
+      ]))
+    ]));
   }
-}), Ie = /* @__PURE__ */ G(we, [["__scopeId", "data-v-4cf50076"]]);
+}), Ge = /* @__PURE__ */ J(qe, [["__scopeId", "data-v-87f3e002"]]);
 export {
-  Ie as BatchAnnotator,
-  qt as ImageAnnotator,
-  Ie as default
+  Ge as BatchAnnotator,
+  we as ImageAnnotator,
+  Ge as default
 };