luo-image-annotator 0.0.12 → 0.0.13

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

@@ -1,19 +1,19 @@
 var Jt = Object.defineProperty;
-var jt = (u, t, i) => t in u ? Jt(u, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : u[t] = i;
-var S = (u, t, i) => jt(u, typeof t != "symbol" ? t + "" : t, i);
-import { defineComponent as Z, ref as M, watchEffect as Yt, openBlock as y, createElementBlock as p, normalizeClass as W, computed as D, onMounted as Xt, watch as X, createElementVNode as g, toDisplayString as P, Fragment as B, renderList as U, normalizeStyle as O, createCommentVNode as T, createVNode as L, withModifiers as qt, createTextVNode as q, withDirectives as lt, vModelText as rt, createBlock as ft, nextTick as Gt } from "vue";
-const ct = (u, t) => Math.sqrt(Math.pow(u.x - t.x, 2) + Math.pow(u.y - t.y, 2)), Kt = (u, 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, d = t[a].y;
-    c > u.y != d > u.y && u.x < (o - r) * (u.y - c) / (d - 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 = (u, t, i) => {
-  const e = i * (Math.PI / 180), a = Math.cos(e), r = Math.sin(e), c = u.x - t.x, o = u.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 {
@@ -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 d = this.getHitHandle(e, a, this.activeAnnotation);
+      const d = this.getHitHandle(e, o, this.activeAnnotation);
       if (d !== -100) {
-        this.isDragging = !0, this.dragStartPoint = r, this.selectedHandleIndex = d, this.dragStartAnnotation = JSON.parse(JSON.stringify(this.activeAnnotation));
+        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
@@ -182,42 +182,42 @@ class Zt {
     if (this.interactionMode === "draw") {
       if (this.isDrawing && this.currentTool === "polygon" && this.activeAnnotation) {
         const d = this.activeAnnotation.coordinates;
-        if (d.points.length > 2 && ct(r, d.points[0]) < 20 / this.scale) {
+        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], d = ct(r, o);
+        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, d = a.x - c, f = a.y - o;
-        let w = Math.atan2(f, d) * 180 / Math.PI;
-        w += 90, r.angle = w;
+        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), d = Math.sin(-c), f = a.x - r.x, w = a.y - r.y, m = f * o - w * d, _ = f * d + w * o;
-        (e === 0 || e === 3) && (r.width / 2, r.width = Math.abs(m) * 2), (e === 1 || e === 2) && (r.width = Math.abs(m) * 2), (e === 0 || e === 1) && (r.height = Math.abs(_) * 2), (e === 2 || e === 3) && (r.height = Math.abs(_) * 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], d = this.toScreenCoords(o.x, o.y);
-      if (Math.abs(t - d.x) < r && Math.abs(i - d.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 }, d = { x: i.x + a, y: i.y + r }, f = { x: i.x - a, y: i.y + r }, w = { x: i.x, y: i.y - r - 20 / this.scale };
-        return [c, o, d, f, w].map((m) => yt(m, 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) => {
@@ -453,71 +453,71 @@ class Zt {
     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;
+    const e = 10, o = 8, c = 4, r = 24, a = 8;
     t.forEach((d) => {
-      const f = d.label || "Unlabeled", w = this.ctx.measureText(f).width + a * 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, c), this.ctx.fill(), this.ctx.stroke(), this.ctx.fillStyle = m ? "#1976D2" : "#333", this.ctx.fillText(f, i + a, e + r), i += w + o;
+      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((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, d = 8;
-    let f = null;
+    let o = 10;
+    const c = 10, r = 8, a = 24, d = 8;
+    let u = null;
     for (const w of e) {
-      const m = w.label || "Unlabeled", _ = this.ctx.measureText(m).width + c * 2;
-      if (t >= a && t <= a + _ && i >= r && i <= r + o) {
-        f = w;
+      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 += _ + d;
+      o += _ + d;
     }
-    return this.ctx.restore(), f;
+    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), d = this.toScreenCoords(c.x2, c.y2), f = Math.min(o.x, d.x), w = Math.min(o.y, d.y), m = Math.abs(o.x - d.x), _ = Math.abs(o.y - d.y);
-      this.ctx.strokeRect(f, w, m, _), this.ctx.fillStyle = i ? "rgba(0, 229, 255, 0.2)" : "rgba(255, 64, 129, 0.2)", this.ctx.fillRect(f, w, m, _), 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 d = 1; d < c.points.length; d++) {
-        const f = this.toScreenCoords(c.points[d].x, c.points[d].y);
-        this.ctx.lineTo(f.x, f.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 d = this.lastMouseMovePoint;
-        if (this.isHoveringStartPoint && c.points.length > 0) {
-          d = c.points[0];
-          const w = this.toScreenCoords(c.points[0].x, c.points[0].y);
+        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 f = this.toScreenCoords(d.x, d.y);
-        this.ctx.lineTo(f.x, f.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, d = c.height * this.scale;
-      this.ctx.strokeRect(-o / 2, -d / 2, o, d), this.ctx.fillStyle = i ? "rgba(0, 229, 255, 0.2)" : "rgba(255, 64, 129, 0.2)", this.ctx.fillRect(-o / 2, -d / 2, o, d), this.ctx.rotate(-c.angle * Math.PI / 180), this.ctx.translate(-this.toScreenCoords(c.x, c.y).x, -this.toScreenCoords(c.x, c.y).y), i && this.drawHandles(this.getAnnotationHandles(t));
-    } else t.type === "point" && t.coordinates.points.forEach((o) => {
-      const d = this.toScreenCoords(o.x, o.y);
+      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__ */ Z({
+</svg>`, me = ["innerHTML"], fe = /* @__PURE__ */ tt({
   __name: "SvgIcon",
   props: {
     name: {},
     size: {}
   },
-  setup(u) {
-    const t = u, 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 });
+  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) => (y(), p("i", {
-      class: W(["svg-icon", [u.size ? `size-${u.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));
   }
-}), Q = (u, t) => {
-  const i = u.__vccOpts || u;
-  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;
-}, H = /* @__PURE__ */ Q(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"], We = ["onClick"], Ne = { 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__ */ Z({
+}, 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,8 +628,8 @@ 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(u, { expose: t, emit: i }) {
-    const e = u, a = i, r = M(null), c = M(null), o = M(null), d = M(null), f = M(0), w = M(""), m = M([]), _ = M(""), F = M(!1), k = M({ name: "", color: "#FF0000" }), I = M("none"), C = M([]), R = M({}), j = D(() => d.value === "select" && !!w.value), V = (n) => {
+  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 = () => {
@@ -639,13 +639,13 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
           [n]: { width: l, height: h }
         };
       }, s.src = n;
-    }, tt = () => {
+    }, X = () => {
       e.batchImages.forEach((n) => {
-        V(n.imageUrl);
+        j(n.imageUrl);
       });
-    }, E = () => {
+    }, O = () => {
       var l, h, v, A;
-      const n = e.batchImages[f.value], s = (n == null ? void 0 : n.imageUrl) || ((l = e.image) == null ? void 0 : l.url);
+      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(),
@@ -654,17 +654,17 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
         imageId: ((v = e.image) == null ? void 0 : v.id) || s,
         operator: (A = e.session) == null ? void 0 : A.userId
       };
-    }, et = (n) => {
+    }, 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: (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);
+      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",
@@ -679,64 +679,64 @@ 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) => {
+      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 v = m.value.find((A) => A.id === _.value);
             v && (s.changedItem.label = v.name, s.changedItem.labelId = v.id);
           }
-          s.action === "select" ? w.value = ((l = s.changedItem) == null ? void 0 : l.id) || "" : s.action === "delete" && ((h = s.changedItem) == null ? void 0 : h.id) === w.value && (w.value = ""), 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 E = () => {
+      if (!a.value) return;
       const n = m.value.find((l) => l.id === _.value);
-      n && o.value.setLabelStyle(n.color);
+      n && a.value.setLabelStyle(n.color);
       const s = m.value.filter((l) => l.visible).map((l) => l.name);
-      o.value.setVisibleLabels(s);
-    }, x = () => {
+      a.value.setVisibleLabels(s);
+    }, W = () => {
       var n;
-      if (o.value)
+      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[f.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) => {
+          const s = e.batchImages[u.value];
+          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 (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 });
-    }, z = () => {
+      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);
-    }, J = () => {
-      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), J();
-    }, pt = () => {
+      (n = a.value) == null || n.zoom(1), z();
+    }, dt = () => {
       var n;
-      (n = o.value) == null || n.zoom(-1), J();
+      (n = a.value) == null || n.zoom(-1), z();
     }, xt = () => {
-      k.value = { name: "", color: "#2196F3" }, F.value = !0;
-    }, dt = () => {
-      F.value = !1;
+      k.value = { name: "", color: "#2196F3" }, U.value = !0;
+    }, gt = () => {
+      U.value = !1;
     }, bt = () => {
       if (!k.value.name.trim()) {
         alert("请输入标签名称");
@@ -748,167 +748,167 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
         color: k.value.color,
         visible: !0
       };
-      m.value.push(s), a("labelChange", m.value), m.value.length === 1 && Y(s), dt();
-    }, Y = (n) => {
+      m.value.push(s), o("labelChange", m.value), E(), m.value.length === 1 && G(s), gt();
+    }, G = (n) => {
       var s;
-      _.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, 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 === _.value && ((s = o.value) == null || s.setLabelStyle(n.color)), o.value) {
-        const l = o.value.getAnnotations();
+      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 && o.value.render();
+        }), h && a.value.render();
       }
-      a("labelChange", m.value);
+      o("labelChange", m.value), E();
     }, At = (n) => {
-      n.visible = !n.visible, N();
+      n.visible = !n.visible, E();
     }, _t = (n) => {
       const s = m.value.findIndex((l) => l.id === n);
-      s > -1 && (m.value.splice(s, 1), a("labelChange", m.value), _.value === n && (_.value = m.value.length > 0 ? m.value[0].id : "", _.value && Y(m.value[0])), 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());
     };
-    X(() => e.labels, (n) => {
+    Y(() => e.labels, (n) => {
       const s = JSON.parse(JSON.stringify(n || []));
       if (m.value = s, m.value.length > 0)
         if (!_.value || !m.value.find((l) => l.id === _.value))
-          Y(m.value[0]);
+          G(m.value[0]);
         else {
           const l = m.value.find((h) => h.id === _.value);
-          l && Y(l);
+          l && G(l);
         }
       else
         _.value = "";
-      N();
+      E();
     }, { immediate: !0, deep: !0 });
     const It = () => {
-      f.value > 0 && (ot(), f.value--, x(), at());
+      u.value > 0 && (ot(), u.value--, W(), at());
     }, kt = () => {
-      f.value < e.batchImages.length - 1 && (ot(), f.value++, x(), at());
+      u.value < e.batchImages.length - 1 && (ot(), u.value++, W(), at());
     }, ot = () => {
-      if (o.value) {
-        const n = o.value.getAnnotations();
-        e.batchImages[f.value].annotations = n;
+      if (a.value) {
+        const n = a.value.getAnnotations();
+        e.batchImages[u.value].annotations = n;
       }
     }, at = () => {
-      const n = e.batchImages[f.value];
-      a("batchChange", {
-        currentIndex: f.value,
+      const n = e.batchImages[u.value];
+      o("batchChange", {
+        currentIndex: u.value,
         total: e.batchImages.length,
         currentImageUrl: n.imageUrl,
         currentAnnotations: n.annotations || []
       });
-    }, gt = (n = []) => {
+    }, ut = (n = []) => {
       var v;
-      if (!o.value) return;
+      if (!a.value) return;
       if (C.value = JSON.parse(JSON.stringify(n)), C.value.length === 0) {
         I.value = "none";
         return;
       }
       I.value = "loaded";
-      const l = (o.value.getAnnotations() || []).filter((A) => !A.predictionId), h = C.value.map((A) => {
+      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, ...h]), a("prediction:loaded", {
-        meta: E(),
+      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 v;
-      if (!o.value) return [];
+      if (!a.value) return [];
       I.value = "applying";
-      const h = (o.value.getAnnotations() || []).filter((A) => A.predictionId && n.includes(A.predictionId));
+      const h = (a.value.getAnnotations() || []).filter((A) => A.predictionId && n.includes(A.predictionId));
       return h.forEach((A) => {
         A.reviewStatus = "accepted";
-      }), I.value = "applied", a("prediction:apply", {
-        meta: E(),
+      }), I.value = "applied", o("prediction:apply", {
+        meta: O(),
         modelRunId: (v = h[0]) == null ? void 0 : v.modelRunId,
         candidateIds: n,
         threshold: s,
         acceptedAnnotations: h
-      }), o.value.render(), h;
+      }), a.value.render(), h;
     }, Mt = (n, s) => {
       var v;
-      if (!o.value) return;
-      const l = o.value.getAnnotations() || [], h = l.filter((A) => !(A.predictionId && n.includes(A.predictionId)));
-      o.value.setAnnotations(h), a("prediction:reject", {
-        meta: E(),
+      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, h;
-      const s = ut();
+      const s = vt();
       return {
         format: n,
-        image: ((l = e.batchImages[f.value]) == null ? void 0 : l.imageUrl) || ((h = e.image) == null ? void 0 : h.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(), f.value = n, x(), at());
+    }, mt = (n) => {
+      n >= 0 && n < e.batchImages.length && (ot(), u.value = n, W(), at());
     }, Pt = (n) => {
       var s;
-      return n === f.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", G = (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";
-    }, mt = (n) => {
+    }, ft = (n) => {
       const s = n.coordinates;
       return (s == null ? void 0 : s.points) || [];
-    }, K = (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 ? R.value[s.imageUrl] : void 0;
-      return l || (s != null && s.imageUrl && V(s.imageUrl), { width: 1, height: 1 });
+      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 ? !!R.value[s.imageUrl] : !1;
     }, Ut = (n, s) => {
-      const l = s.coordinates, h = K(n), v = G(s), A = Math.min(l.x1, l.x2), $ = Math.min(l.y1, l.y2), Wt = Math.max(l.x1, l.x2), Nt = 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: `${A / h.width * 100}%`,
         top: `${$ / h.height * 100}%`,
-        width: `${(Wt - A) / h.width * 100}%`,
-        height: `${(Nt - $) / h.height * 100}%`,
+        width: `${(Nt - A) / h.width * 100}%`,
+        height: `${(Wt - $) / h.height * 100}%`,
         borderColor: v,
         backgroundColor: `${v}22`
       };
     }, Ft = (n, s) => {
-      const l = K(n);
-      return mt(s).map((h) => `${h.x / l.width * 100},${h.y / l.height * 100}`).join(" ");
-    }, Et = (n) => {
-      const s = G(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 h = K(n), v = G(l);
+    }, Et = (n, s, l) => {
+      const h = Q(n), v = Z(l);
       return {
         left: `${s.x / h.width * 100}%`,
         top: `${s.y / h.height * 100}%`,
         backgroundColor: v
       };
     }, Vt = (n, s) => {
-      const l = s.coordinates, h = K(n), v = G(s), A = Math.abs(l.width), $ = 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 - A / 2) / h.width * 100}%`,
         top: `${(l.y - $ / 2) / h.height * 100}%`,
@@ -920,12 +920,12 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
       };
     };
     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,40 +933,40 @@ 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[f.value]) == null ? void 0 : n.imageUrl) || ((s = e.image) == null ? void 0 : s.url) || "",
-          annotations: ((l = o.value) == null ? void 0 : l.getAnnotations()) || []
+          imageUrl: ((n = e.batchImages[u.value]) == null ? void 0 : n.imageUrl) || ((s = e.image) == null ? void 0 : s.url) || "",
+          annotations: ((l = a.value) == null ? void 0 : l.getAnnotations()) || []
         };
       }
-    }), X(() => {
+    }), Y(() => {
       var n;
       return (n = e.image) == null ? void 0 : n.url;
     }, () => {
       var n;
-      e.batchImages.length === 0 && ((n = e.image) != null && n.url) && x();
-    }), X(() => e.predictionCandidates, (n) => {
-      n && gt(n);
-    }, { immediate: !0, deep: !0 }), X(
+      e.batchImages.length === 0 && ((n = e.image) != null && n.url) && W();
+    }), Y(() => e.predictionCandidates, (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) => (y(), p("div", {
-      class: W(["annotation-container", u.theme])
+    ), (n, s) => (y(), x("div", {
+      class: J(["annotation-container", f.theme])
     }, [
-      u.batchImages && u.batchImages.length > 0 ? (y(), p("div", ye, [
-        g("div", pe, "批量图片（" + P(u.batchImages.length) + "）", 1),
+      f.batchImages && f.batchImages.length > 0 ? (y(), x("div", ye, [
+        g("div", pe, "批量图片（" + P(f.batchImages.length) + "）", 1),
         g("div", xe, [
-          (y(!0), p(B, null, U(u.batchImages, (l, h) => (y(), p("button", {
+          (y(!0), x(B, null, F(f.batchImages, (l, h) => (y(), x("button", {
             key: `${l.imageUrl}-${h}`,
-            class: W(["image-list-item", { active: h === f.value }]),
-            onClick: (v) => vt(h)
+            class: J(["image-list-item", { active: h === u.value }]),
+            onClick: (v) => mt(h)
           }, [
             g("div", we, [
               g("img", {
@@ -974,27 +974,27 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
                 alt: `第${h + 1}张`,
                 class: "image-list-thumb"
               }, null, 8, Ce),
-              Dt(h) ? (y(), p("div", Ae, [
-                (y(!0), p(B, null, U(Pt(h), (v) => (y(), p(B, {
+              Dt(h) ? (y(), x("div", Ae, [
+                (y(!0), x(B, null, F(Pt(h), (v) => (y(), x(B, {
                   key: v.id
                 }, [
-                  Ht(v) ? (y(), p("div", {
+                  Ht(v) ? (y(), x("div", {
                     key: 0,
                     class: "thumb-overlay-rect",
-                    style: O(Ut(h, v))
-                  }, null, 4)) : Lt(v) ? (y(), p("svg", _e, [
+                    style: V(Ut(h, v))
+                  }, null, 4)) : Lt(v) ? (y(), x("svg", _e, [
                     g("polygon", {
                       points: Ft(h, v),
-                      style: O(Et(v))
+                      style: V(Ot(v))
                     }, null, 12, Ie)
-                  ])) : Rt(v) ? (y(!0), p(B, { key: 2 }, U(mt(v), (A, $) => (y(), p("div", {
+                  ])) : 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(h, A, v))
-                  }, null, 4))), 128)) : Bt(v) ? (y(), 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(h, v))
+                    style: V(Vt(h, v))
                   }, null, 4)) : T("", !0)
                 ], 64))), 128))
               ])) : T("", !0)
@@ -1003,26 +1003,26 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
           ], 10, be))), 128))
         ])
       ])) : T("", !0),
-      u.readOnly ? T("", !0) : (y(), p("div", Se, [
+      f.readOnly ? T("", !0) : (y(), x("div", Se, [
         g("div", {
-          class: W(["tool-btn", { active: d.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: "拖动"
         }, [
           L(H, { name: "rank" })
         ], 2),
         g("div", {
-          class: W(["tool-btn", { active: d.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: "选择"
         }, [
           L(H, { name: "pointer" })
         ], 2),
         s[5] || (s[5] = g("div", { class: "divider" }, null, -1)),
-        (y(!0), p(B, null, U(nt.value, (l) => (y(), p("div", {
+        (y(!0), x(B, null, F(nt.value, (l) => (y(), x("div", {
           key: l,
-          class: W(["tool-btn", { active: d.value === l }]),
-          onClick: (h) => b(l),
+          class: J(["tool-btn", { active: d.value === l }]),
+          onClick: (h) => p(l),
           title: it(l)
         }, [
           L(H, {
@@ -1032,74 +1032,74 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
         s[6] || (s[6] = g("div", { class: "divider" }, null, -1)),
         g("div", {
           class: "tool-btn",
-          onClick: ht,
+          onClick: q,
           title: "放大"
         }, [
           L(H, { name: "zoom-in" })
         ]),
         g("div", {
           class: "tool-btn",
-          onClick: pt,
+          onClick: dt,
           title: "缩小"
         }, [
           L(H, { name: "zoom-out" })
         ]),
         s[7] || (s[7] = g("div", { class: "divider" }, null, -1)),
-        j.value ? (y(), p("div", {
+        N.value ? (y(), x("div", {
           key: 0,
           class: "tool-btn",
-          onClick: z,
+          onClick: b,
           title: "删除选中"
         }, [
           L(H, { name: "delete" })
         ])) : T("", !0)
       ])),
       g("div", ze, [
-        u.readOnly ? T("", !0) : (y(), 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, [
-              (y(!0), p(B, null, U(m.value, (l) => (y(), p("div", {
+              (y(!0), x(B, null, F(m.value, (l) => (y(), x("div", {
                 key: l.id,
-                class: W(["tag-chip", { active: _.value === l.id }]),
-                style: O({ backgroundColor: l.color, borderColor: l.color }),
-                onClick: (h) => Y(l)
+                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(), p("div", Le, "请在右侧创建标签")) : T("", !0)
+              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),
-        u.batchImages && u.batchImages.length > 0 ? (y(), p("div", Re, [
+        f.batchImages && f.batchImages.length > 0 ? (y(), x("div", Re, [
           g("button", {
             onClick: It,
-            disabled: f.value <= 0
+            disabled: u.value <= 0
           }, [
             L(H, { name: "back" }),
-            s[9] || (s[9] = q(" 上一张 ", -1))
+            s[9] || (s[9] = K(" 上一张 ", -1))
           ], 8, Be),
-          g("span", null, P(f.value + 1) + " / " + P(u.batchImages.length), 1),
+          g("span", null, P(u.value + 1) + " / " + P(f.batchImages.length), 1),
           g("button", {
             onClick: kt,
-            disabled: f.value >= u.batchImages.length - 1
+            disabled: u.value >= f.batchImages.length - 1
           }, [
-            s[10] || (s[10] = q(" 下一张 ", -1)),
+            s[10] || (s[10] = K(" 下一张 ", -1)),
             L(H, { name: "right" })
           ], 8, De)
         ])) : T("", !0)
       ]),
-      u.readOnly ? T("", !0) : (y(), 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,21 +1108,21 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
           }, "添加标签")
         ]),
         g("div", Fe, [
-          (y(!0), p(B, null, U(m.value, (l) => (y(), 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": (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),
@@ -1134,15 +1134,15 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
                 class: "action-icon eye",
                 onClick: (h) => At(l)
               }, [
-                l.visible ? (y(), ft(H, {
+                l.visible ? (y(), yt(H, {
                   key: 0,
                   name: "view"
-                })) : (y(), ft(H, {
+                })) : (y(), yt(H, {
                   key: 1,
                   name: "hide"
                 }))
-              ], 8, We),
-              g("div", Ne, [
+              ], 8, Ne),
+              g("div", We, [
                 s[12] || (s[12] = g("span", { class: "dots" }, "•••", -1)),
                 g("span", {
                   class: "delete-btn",
@@ -1156,7 +1156,7 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
           ]))), 128))
         ])
       ])),
-      F.value ? (y(), p("div", je, [
+      U.value ? (y(), x("div", je, [
         g("div", Ye, [
           s[15] || (s[15] = g("h3", null, "新增标签", -1)),
           g("div", Xe, [
@@ -1184,7 +1184,7 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
           ]),
           g("div", { class: "modal-actions" }, [
             g("button", {
-              onClick: dt,
+              onClick: gt,
               class: "cancel-btn"
             }, "取消"),
             g("button", {
@@ -1196,13 +1196,13 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
       ])) : T("", !0)
     ], 2));
   }
-}), Ze = /* @__PURE__ */ Q(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", "stroke-width"], sn = ["points", "stroke", "stroke-width"], on = ["x", "y", "fill", "font-size"], an = {
   key: 1,
   class: "loading-placeholder"
-}, ln = /* @__PURE__ */ Z({
+}, ln = /* @__PURE__ */ tt({
   __name: "AnnotationThumbnail",
   props: {
     src: {},
@@ -1213,10 +1213,10 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
     strokeWidth: {},
     fontSize: {}
   },
-  setup(u) {
-    const t = u, i = M(null), e = M(!1), a = M(0), r = M(0), c = () => {
-      i.value && (a.value = i.value.naturalWidth, r.value = i.value.naturalHeight, e.value = !0);
-    }, o = D(() => t.fit === "contain" ? "xMidYMid meet" : "xMidYMid slice"), d = D(() => t.strokeWidth ?? 10), f = D(() => t.fontSize ?? 30), w = (k) => {
+  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 = k.style) != null && I.strokeColor) return k.style.strokeColor;
       if (t.labels) {
@@ -1225,9 +1225,9 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
       }
       return "#FF0000";
     }, m = (k) => {
-      const I = k.coordinates, C = Math.min(I.x1, I.x2), R = Math.min(I.y1, I.y2), j = Math.abs(I.x1 - I.x2), V = Math.abs(I.y1 - I.y2);
-      return { x: C, y: R, width: j, height: V };
-    }, _ = (k) => k.coordinates.points.map((C) => `${C.x},${C.y}`).join(" "), F = (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 };
@@ -1237,26 +1237,26 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
       }
       return { x: 0, y: 0 };
     };
-    return (k, I) => (y(), p("div", Qe, [
+    return (k, I) => (y(), x("div", Qe, [
       g("img", {
         ref_key: "img",
         ref: i,
-        src: u.src,
+        src: f.src,
         class: "thumbnail-image",
-        style: O({ objectFit: u.fit }),
-        onLoad: c,
-        alt: u.alt
+        style: V({ objectFit: f.fit }),
+        onLoad: r,
+        alt: f.alt
       }, null, 44, tn),
-      e.value ? (y(), 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
       }, [
-        (y(!0), p(B, null, U(u.annotations, (C) => (y(), p(B, {
+        (y(!0), x(B, null, F(f.annotations, (C) => (y(), x(B, {
           key: C.id
         }, [
-          C.type === "rectangle" ? (y(), p("rect", {
+          C.type === "rectangle" ? (y(), x("rect", {
             key: 0,
             x: m(C).x,
             y: m(C).y,
@@ -1266,27 +1266,27 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
             "stroke-width": d.value,
             fill: "transparent"
           }, null, 8, nn)) : T("", !0),
-          C.type === "polygon" ? (y(), p("polygon", {
+          C.type === "polygon" ? (y(), x("polygon", {
             key: 1,
             points: _(C),
             stroke: w(C),
             "stroke-width": d.value,
             fill: "transparent"
           }, null, 8, sn)) : T("", !0),
-          C.label ? (y(), p("text", {
+          C.label ? (y(), x("text", {
             key: 2,
-            x: F(C).x,
-            y: F(C).y,
+            x: U(C).x,
+            y: U(C).y,
             fill: w(C),
-            "font-size": f.value,
+            "font-size": u.value,
             "font-weight": "bold",
             class: "anno-label"
           }, P(C.label), 9, on)) : T("", !0)
         ], 64))), 128))
-      ], 8, en)) : (y(), p("div", an, "Loading..."))
+      ], 8, en)) : (y(), x("div", an, "Loading..."))
     ], 512));
   }
-}), rn = /* @__PURE__ */ Q(ln, [["__scopeId", "data-v-d2fd08ec"]]), 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 = {
@@ -1295,7 +1295,7 @@ 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__ */ Z({
+}, xn = { class: "editor-header" }, bn = { class: "header-left" }, wn = { class: "editor-title" }, Cn = { class: "editor-content" }, An = /* @__PURE__ */ tt({
   __name: "BatchAnnotator",
   props: {
     images: {},
@@ -1305,157 +1305,164 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
     thumbStrokeWidth: {},
     thumbFontSize: {}
   },
-  emits: ["export", "update:images", "imageClick"],
-  setup(u, { expose: t, emit: i }) {
-    const e = u, a = i, r = M("gallery"), c = M([]), o = M(0), d = M(null), f = M(null), w = M(null), m = D(() => {
-      var x, b;
-      return ((b = (x = e.actionBar) == null ? void 0 : x.annotateButton) == null ? void 0 : b.show) === !0;
-    }), _ = D(() => {
-      var x, b;
-      return ((b = (x = e.actionBar) == null ? void 0 : x.exportButton) == null ? void 0 : b.show) === !0;
-    }), F = D(() => m.value || _.value), k = D(() => {
-      var x, b;
-      return ((b = (x = e.actionBar) == null ? void 0 : x.annotateButton) == null ? void 0 : b.text) || "手动标注";
-    }), I = D(() => {
-      var x, b;
-      return ((b = (x = e.actionBar) == null ? void 0 : x.exportButton) == null ? void 0 : b.text) || "导出";
-    }), C = D(() => e.clickToEnterEditor !== !1);
-    X(() => 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 R = (x) => {
-      o.value = x, r.value = "editor", w.value && (w.value.scrollTop = 0), Gt(() => {
-        f.value && (f.value.scrollTop = 0), window.scrollTo(0, 0), requestAnimationFrame(() => {
+    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 = d.value) == null ? void 0 : b.jumpTo) == null || z.call(b, x);
+          (z = (b = u.value) == null ? void 0 : b.jumpTo) == null || z.call(b, p);
         });
       });
-    }, j = (x, b) => {
-      if (C.value) {
-        R(x);
+    }, j = (p, b) => {
+      if (R.value) {
+        N(p);
         return;
       }
-      a("imageClick", { index: x, imageId: b.id, image: b });
-    }, V = (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 = V(x);
-        return b < 0 ? !1 : (R(b), !0);
+      openImageById: (p) => {
+        const b = X(p);
+        return b < 0 ? !1 : (N(b), !0);
       },
-      triggerImageClickById: (x) => {
-        const b = V(x);
+      triggerImageClickById: (p) => {
+        const b = X(p);
         if (b < 0)
           return !1;
-        const z = c.value[b];
-        return z ? (a("imageClick", { index: b, imageId: z.id, image: z }), !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 (d.value && d.value.getCurrentAnnotation) {
-        const x = d.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 (d.value && d.value.getCurrentAnnotation) {
-        const b = d.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) => (y(), p("div", {
+    return (p, b) => (y(), x("div", {
       ref_key: "batchRootRef",
-      ref: f,
+      ref: w,
       class: "batch-annotator"
     }, [
-      r.value === "gallery" ? (y(), p("div", cn, [
+      c.value === "gallery" ? (y(), x("div", cn, [
         g("div", hn, [
-          g("h3", null, "批量查看与标注 (" + P(c.value.length) + " 张)", 1),
+          g("h3", null, "批量查看与标注 (" + P(r.value.length) + " 张)", 1),
           g("div", dn, [
-            (y(!0), p(B, null, U(u.labels, (z) => (y(), p("span", {
+            (y(!0), x(B, null, F(a.value, (z) => (y(), x("span", {
               key: z.id,
               class: "label-badge",
-              style: O({ backgroundColor: z.color })
+              style: V({ backgroundColor: z.color })
             }, P(z.name), 5))), 128))
           ])
         ]),
         g("div", {
           ref_key: "galleryGridRef",
-          ref: w,
+          ref: m,
           class: "gallery-grid"
         }, [
-          (y(!0), p(B, null, U(c.value, (z, J) => (y(), p("div", {
-            key: J,
+          (y(!0), x(B, null, F(r.value, (z, q) => (y(), x("div", {
+            key: q,
             class: "gallery-item",
-            onClick: (ht) => j(J, z)
+            onClick: (dt) => j(q, z)
           }, [
             g("div", un, [
               L(rn, {
                 src: z.imageUrl,
                 annotations: z.annotations || [],
-                labels: u.labels,
+                labels: a.value,
                 fit: "cover",
                 strokeWidth: e.thumbStrokeWidth,
                 fontSize: e.thumbFontSize
               }, null, 8, ["src", "annotations", "labels", "strokeWidth", "fontSize"])
             ]),
             g("div", vn, [
-              g("span", mn, "#" + P(J + 1), 1),
+              g("span", mn, "#" + P(q + 1), 1),
               g("span", fn, P((z.annotations || []).length) + " 标注", 1)
             ])
           ], 8, gn))), 128))
         ], 512),
-        F.value ? (y(), p("div", yn, [
-          m.value ? (y(), p("button", {
+        k.value ? (y(), x("div", yn, [
+          _.value ? (y(), x("button", {
             key: 0,
             class: "action-btn primary",
-            onClick: b[0] || (b[0] = (z) => R(0))
+            onClick: b[0] || (b[0] = (z) => N(0))
           }, [
             L(H, { name: "edit" }),
-            q(" " + P(k.value), 1)
+            K(" " + P(I.value), 1)
           ])) : T("", !0),
-          _.value ? (y(), p("button", {
+          U.value ? (y(), x("button", {
             key: 1,
             class: "action-btn success",
-            onClick: nt
+            onClick: st
           }, [
             L(H, { name: "download" }),
-            q(" " + P(I.value), 1)
+            K(" " + P(C.value), 1)
           ])) : T("", !0)
         ])) : T("", !0)
-      ])) : (y(), p("div", pn, [
+      ])) : (y(), x("div", pn, [
         g("div", xn, [
           g("div", bn, [
             g("button", {
               class: "back-btn",
-              onClick: et
+              onClick: nt
             }, [
               L(H, { name: "back" }),
-              b[1] || (b[1] = q(" 返回列表 ", -1))
+              b[1] || (b[1] = K(" 返回列表 ", -1))
             ]),
-            g("span", wn, "正在标注: " + P(o.value + 1) + " / " + P(c.value.length), 1)
+            g("span", wn, "正在标注: " + P(d.value + 1) + " / " + P(r.value.length), 1)
           ])
         ]),
         g("div", Cn, [
           L(Ze, {
             ref_key: "annotatorRef",
-            ref: d,
-            batchImages: c.value,
-            labels: u.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__ */ Q(An, [["__scopeId", "data-v-02216921"]]);
+}), kn = /* @__PURE__ */ et(An, [["__scopeId", "data-v-0ae1040a"]]);
 export {
   kn as BatchAnnotator,
   Ze as ImageAnnotator,