luo-image-annotator 0.0.17 → 0.0.18

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

@@ -1,19 +1,19 @@
 var ae = Object.defineProperty;
-var le = (x, t, n) => t in x ? ae(x, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : x[t] = n;
-var T = (x, t, n) => le(x, typeof t != "symbol" ? t + "" : t, n);
-import { defineComponent as ct, ref as M, watchEffect as ce, openBlock as v, createElementBlock as m, normalizeClass as X, computed as V, onMounted as yt, nextTick as at, watch as K, createElementVNode as h, toDisplayString as z, Fragment as N, renderList as J, normalizeStyle as U, createCommentVNode as B, createVNode as R, withModifiers as It, createBlock as vt, withDirectives as ft, vModelText as mt, createTextVNode as lt } from "vue";
-const pt = (x, t) => Math.sqrt(Math.pow(x.x - t.x, 2) + Math.pow(x.y - t.y, 2)), re = (x, t) => {
+var le = (y, t, n) => t in y ? ae(y, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : y[t] = n;
+var T = (y, t, n) => le(y, typeof t != "symbol" ? t + "" : t, n);
+import { defineComponent as ct, ref as M, watchEffect as ce, openBlock as v, createElementBlock as m, normalizeClass as q, computed as O, onMounted as yt, nextTick as at, watch as K, createElementVNode as h, toDisplayString as L, Fragment as W, renderList as J, normalizeStyle as U, createCommentVNode as R, createVNode as B, withModifiers as It, createBlock as vt, withDirectives as ft, vModelText as mt, createTextVNode as lt } from "vue";
+const pt = (y, t) => Math.sqrt(Math.pow(y.x - t.x, 2) + Math.pow(y.y - t.y, 2)), re = (y, t) => {
   let n = !1;
-  for (let e = 0, a = t.length - 1; e < t.length; a = e++) {
-    const o = t[e].x, c = t[e].y, g = t[a].x, u = t[a].y;
-    c > x.y != u > x.y && x.x < (g - o) * (x.y - c) / (u - c) + o && (n = !n);
+  for (let e = 0, l = t.length - 1; e < t.length; l = e++) {
+    const o = t[e].x, a = t[e].y, g = t[l].x, u = t[l].y;
+    a > y.y != u > y.y && y.x < (g - o) * (y.y - a) / (u - a) + o && (n = !n);
   }
   return n;
-}, At = (x, t, n) => {
-  const e = n * (Math.PI / 180), a = Math.cos(e), o = Math.sin(e), c = x.x - t.x, g = x.y - t.y;
+}, At = (y, t, n) => {
+  const e = n * (Math.PI / 180), l = Math.cos(e), o = Math.sin(e), a = y.x - t.x, g = y.y - t.y;
   return {
-    x: t.x + (c * a - g * o),
-    y: t.y + (c * o + g * a)
+    x: t.x + (a * l - g * o),
+    y: t.y + (a * o + g * l)
   };
 };
 class he {
@@ -52,6 +52,8 @@ class he {
     // 视口
     T(this, "scale", 1);
     T(this, "offset", { x: 0, y: 0 });
+    T(this, "showLabels", !1);
+    // 是否在画布上显示标注的标签
     T(this, "listeners", {});
     T(this, "imageUrl", "");
     this.canvas = t;
@@ -86,11 +88,14 @@ class he {
   setVisibleLabels(t) {
     this.visibleLabels = new Set(t), this.render();
   }
+  setShowLabels(t) {
+    this.showLabels = t, this.render();
+  }
   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, o = this.canvas.height / 2, c = this.toImageCoords(a, o);
-    this.scale = e, this.offset.x = a - c.x * this.scale, this.offset.y = o - c.y * this.scale, this.clampViewportOffset(), this.render();
+    const l = this.canvas.width / 2, o = this.canvas.height / 2, a = this.toImageCoords(l, o);
+    this.scale = e, this.offset.x = l - a.x * this.scale, this.offset.y = o - a.y * this.scale, this.clampViewportOffset(), this.render();
   }
   resize() {
     this.fitImageToCanvas(), this.render();
@@ -120,18 +125,18 @@ class he {
     if (this.img.width === 0 || this.img.height === 0) return;
     const t = this.img.width * this.scale, n = this.img.height * this.scale, e = 100;
     if (t <= this.canvas.width) {
-      const a = -t + e, o = this.canvas.width - e;
-      this.offset.x = Math.min(o, Math.max(a, this.offset.x));
+      const l = -t + e, o = this.canvas.width - e;
+      this.offset.x = Math.min(o, Math.max(l, this.offset.x));
     } else {
-      const a = this.canvas.width - t - e, o = e;
-      this.offset.x = Math.min(o, Math.max(a, this.offset.x));
+      const l = this.canvas.width - t - e, o = e;
+      this.offset.x = Math.min(o, Math.max(l, this.offset.x));
     }
     if (n <= this.canvas.height) {
-      const a = -n + e, o = this.canvas.height - e;
-      this.offset.y = Math.min(o, Math.max(a, this.offset.y));
+      const l = -n + e, o = this.canvas.height - e;
+      this.offset.y = Math.min(o, Math.max(l, this.offset.y));
     } else {
-      const a = this.canvas.height - n - e, o = e;
-      this.offset.y = Math.min(o, Math.max(a, this.offset.y));
+      const l = this.canvas.height - n - e, o = e;
+      this.offset.y = Math.min(o, Math.max(l, this.offset.y));
     }
   }
   // --- 事件处理 ---
@@ -153,21 +158,21 @@ class he {
     }
   }
   handleMouseDown(t) {
-    const n = this.canvas.getBoundingClientRect(), e = t.clientX - n.left, a = t.clientY - n.top, o = this.toImageCoords(e, a);
+    const n = this.canvas.getBoundingClientRect(), e = t.clientX - n.left, l = t.clientY - n.top, o = this.toImageCoords(e, l);
     if (this.interactionMode === "pan") {
-      this.isPanning = !0, this.panStartPoint = { x: e, y: a }, this.canvas.style.cursor = "grabbing";
+      this.isPanning = !0, this.panStartPoint = { x: e, y: l }, this.canvas.style.cursor = "grabbing";
       return;
     }
     if (this.interactionMode === "select" && this.activeAnnotation) {
-      const u = this.getHitHandle(e, a, this.activeAnnotation);
+      const u = this.getHitHandle(e, l, this.activeAnnotation);
       if (u !== -100) {
         this.isDragging = !0, this.dragStartPoint = o, this.selectedHandleIndex = u, 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 a = this.interactionMode === "select" ? this.getHitCategory(e, l) : null;
+    if (a) {
+      this.activeAnnotation = a, this.isDragging = !1, this.selectedHandleIndex = -1, this.emit("annotationChange", { action: "select", changedItem: a, imageUrl: this.imageUrl }), this.render();
       return;
     }
     const g = this.getHitAnnotation(o);
@@ -203,23 +208,23 @@ class he {
     this.activeAnnotation = null, this.render();
   }
   handleMouseMove(t) {
-    const n = this.canvas.getBoundingClientRect(), e = t.clientX - n.left, a = t.clientY - n.top, o = this.toImageCoords(e, a);
+    const n = this.canvas.getBoundingClientRect(), e = t.clientX - n.left, l = t.clientY - n.top, o = this.toImageCoords(e, l);
     if (this.isPanning && this.panStartPoint) {
-      const c = e - this.panStartPoint.x, g = a - this.panStartPoint.y;
-      this.offset.x += c, this.offset.y += g, this.clampViewportOffset(), this.panStartPoint = { x: e, y: a }, this.render();
+      const a = e - this.panStartPoint.x, g = l - this.panStartPoint.y;
+      this.offset.x += a, this.offset.y += g, this.clampViewportOffset(), this.panStartPoint = { x: e, y: l }, this.render();
       return;
     }
     if (this.lastMouseMovePoint = o, this.isDrawing) {
       if (this.currentTool === "polygon" && this.activeAnnotation) {
-        const c = this.activeAnnotation.coordinates;
-        if (c.points.length > 2) {
-          const g = c.points[0], u = pt(o, g);
+        const a = this.activeAnnotation.coordinates;
+        if (a.points.length > 2) {
+          const g = a.points[0], u = pt(o, g);
           this.isHoveringStartPoint = u < 20 / this.scale;
         } else
           this.isHoveringStartPoint = !1;
       }
       this.updateDrawing(o);
-    } else this.isDragging && this.activeAnnotation && this.dragStartPoint ? this.updateDragging(o) : this.checkHover(e, a, o);
+    } else this.isDragging && this.activeAnnotation && this.dragStartPoint ? this.updateDragging(o) : this.checkHover(e, l, o);
     this.render();
   }
   handleMouseUp(t) {
@@ -244,8 +249,8 @@ class he {
   // 辅助函数：将 hex 转换为 rgba
   hexToRgba(t, n) {
     if (!t.startsWith("#")) return t;
-    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})`;
+    const e = parseInt(t.slice(1, 3), 16), l = parseInt(t.slice(3, 5), 16), o = parseInt(t.slice(5, 7), 16);
+    return `rgba(${e}, ${l}, ${o}, ${n})`;
   }
   startDrawing(t) {
     if (!this.currentTool) return;
@@ -300,8 +305,8 @@ class he {
         const n = this.activeAnnotation.coordinates;
         n.x2 = t.x, n.y2 = t.y;
       } else if (this.activeAnnotation.type === "rotatedRect" && this.dragStartPoint) {
-        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;
+        const n = this.activeAnnotation.coordinates, e = Math.abs(t.x - this.dragStartPoint.x), l = Math.abs(t.y - this.dragStartPoint.y);
+        n.width = e * 2, n.height = l * 2;
       } else this.activeAnnotation.type;
   }
   finishDrawing() {
@@ -312,8 +317,8 @@ class he {
           this.activeAnnotation = null, this.isDrawing = !1;
           return;
         }
-        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 });
+        const n = Math.min(t.x1, t.x2), e = Math.max(t.x1, t.x2), l = Math.min(t.y1, t.y2), o = Math.max(t.y1, t.y2);
+        t.x1 = n, t.x2 = e, t.y1 = l, 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;
@@ -337,42 +342,42 @@ class he {
     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, n, e, a) {
+  moveAnnotation(t, n, e, l) {
     if (t.type === "rectangle") {
-      const o = n.coordinates, c = t.coordinates;
-      c.x1 = o.x1 + e, c.x2 = o.x2 + e, c.y1 = o.y1 + a, c.y2 = o.y2 + a;
+      const o = n.coordinates, a = t.coordinates;
+      a.x1 = o.x1 + e, a.x2 = o.x2 + e, a.y1 = o.y1 + l, a.y2 = o.y2 + l;
     } else if (t.type === "point") {
-      const o = n.coordinates, c = t.coordinates;
-      c.points = o.points.map((g) => ({ x: g.x + e, y: g.y + a }));
+      const o = n.coordinates, a = t.coordinates;
+      a.points = o.points.map((g) => ({ x: g.x + e, y: g.y + l }));
     } else if (t.type === "rotatedRect") {
-      const o = n.coordinates, c = t.coordinates;
-      c.x = o.x + e, c.y = o.y + a;
+      const o = n.coordinates, a = t.coordinates;
+      a.x = o.x + e, a.y = o.y + l;
     } else if (t.type === "polygon") {
-      const o = n.coordinates, c = t.coordinates;
-      c.points = o.points.map((g) => ({ x: g.x + e, y: g.y + a }));
+      const o = n.coordinates, a = t.coordinates;
+      a.points = o.points.map((g) => ({ x: g.x + e, y: g.y + l }));
     } else if (t.type === "category") {
-      const o = n.coordinates, c = t.coordinates;
-      o && c && (c.x = o.x + e, c.y = o.y + a);
+      const o = n.coordinates, a = t.coordinates;
+      o && a && (a.x = o.x + e, a.y = o.y + l);
     }
   }
-  resizeAnnotation(t, n, e, a) {
+  resizeAnnotation(t, n, e, l) {
     if (t.type === "rectangle") {
       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);
+      e === 0 && (o.x1 = l.x, o.y1 = l.y), e === 1 && (o.x2 = l.x, o.y1 = l.y), e === 2 && (o.x2 = l.x, o.y2 = l.y), e === 3 && (o.x1 = l.x, o.y2 = l.y);
     } else if (t.type === "polygon") {
       const o = t.coordinates;
-      e >= 0 && e < o.points.length && (o.points[e] = a);
+      e >= 0 && e < o.points.length && (o.points[e] = l);
     } else if (t.type === "point") {
       const o = t.coordinates;
-      e >= 0 && e < o.points.length && (o.points[e] = a);
+      e >= 0 && e < o.points.length && (o.points[e] = l);
     } else if (t.type === "rotatedRect") {
       const o = t.coordinates;
       if (e === -2) {
-        const c = o.x, g = o.y, u = a.x - c, r = a.y - g;
-        let k = Math.atan2(r, u) * 180 / Math.PI;
-        k += 90, o.angle = k;
+        const a = o.x, g = o.y, u = l.x - a, r = l.y - g;
+        let A = Math.atan2(r, u) * 180 / Math.PI;
+        A += 90, o.angle = A;
       } else {
-        const c = o.angle * Math.PI / 180, g = Math.cos(-c), u = Math.sin(-c), r = a.x - o.x, k = a.y - o.y, w = r * g - k * u, D = r * u + k * g;
+        const a = o.angle * Math.PI / 180, g = Math.cos(-a), u = Math.sin(-a), r = l.x - o.x, A = l.y - o.y, w = r * g - A * u, D = r * u + A * g;
         (e === 0 || e === 3) && (o.width / 2, o.width = Math.abs(w) * 2), (e === 1 || e === 2) && (o.width = Math.abs(w) * 2), (e === 0 || e === 1) && (o.height = Math.abs(D) * 2), (e === 2 || e === 3) && (o.height = Math.abs(D) * 2);
       }
     }
@@ -394,18 +399,18 @@ class he {
       const e = n.coordinates;
       return re(t, e.points);
     } else if (n.type === "rotatedRect") {
-      const e = n.coordinates, a = At(t, { x: e.x, y: e.y }, -e.angle), o = e.width / 2, c = e.height / 2;
-      return a.x >= e.x - o && a.x <= e.x + o && a.y >= e.y - c && a.y <= e.y + c;
+      const e = n.coordinates, l = At(t, { x: e.x, y: e.y }, -e.angle), o = e.width / 2, a = e.height / 2;
+      return l.x >= e.x - o && l.x <= e.x + o && l.y >= e.y - a && l.y <= e.y + a;
     } else if (n.type === "point")
-      return n.coordinates.points.some((a) => pt(t, a) < 10 / this.scale);
+      return n.coordinates.points.some((l) => pt(t, l) < 10 / this.scale);
     return !1;
   }
   getHitHandle(t, n, e) {
-    const a = this.getAnnotationHandles(e), o = 6;
-    for (let c = 0; c < a.length; c++) {
-      const g = a[c], u = this.toScreenCoords(g.x, g.y);
+    const l = this.getAnnotationHandles(e), o = 6;
+    for (let a = 0; a < l.length; a++) {
+      const g = l[a], u = this.toScreenCoords(g.x, g.y);
       if (Math.abs(t - u.x) < o && Math.abs(n - u.y) < o)
-        return e.type === "rotatedRect" && c === 4 ? -2 : c;
+        return e.type === "rotatedRect" && a === 4 ? -2 : a;
     }
     return -100;
   }
@@ -428,16 +433,16 @@ class he {
       if (t.type === "point")
         return t.coordinates.points;
       if (t.type === "rotatedRect") {
-        const n = t.coordinates, e = { x: n.x, y: n.y }, a = n.width / 2, o = n.height / 2, c = { x: n.x - a, y: n.y - o }, g = { x: n.x + a, y: n.y - o }, u = { x: n.x + a, y: n.y + o }, r = { x: n.x - a, y: n.y + o }, k = { x: n.x, y: n.y - o - 20 / this.scale };
-        return [c, g, u, r, k].map((w) => At(w, e, n.angle));
+        const n = t.coordinates, e = { x: n.x, y: n.y }, l = n.width / 2, o = n.height / 2, a = { x: n.x - l, y: n.y - o }, g = { x: n.x + l, y: n.y - o }, u = { x: n.x + l, y: n.y + o }, r = { x: n.x - l, y: n.y + o }, A = { x: n.x, y: n.y - o - 20 / this.scale };
+        return [a, g, u, r, A].map((w) => At(w, e, n.angle));
       }
     }
     return [];
   }
   checkHover(t, n, e) {
-    const a = this.getHitCategory(t, n);
-    if (a) {
-      this.canvas.style.cursor = "pointer", this.hoverAnnotation = a;
+    const l = this.getHitCategory(t, n);
+    if (l) {
+      this.canvas.style.cursor = "pointer", this.hoverAnnotation = l;
       return;
     }
     if (this.activeAnnotation && this.getHitHandle(t, n, this.activeAnnotation) !== -100) {
@@ -463,76 +468,103 @@ class he {
     const n = 12;
     t.forEach((e) => {
       var _;
-      const a = e.label || "未命名分类", o = this.ctx.measureText(a).width + n * 2, c = 28, g = this.activeAnnotation === e, u = this.hoverAnnotation === e;
+      const l = e.label || "未命名分类", o = this.ctx.measureText(l).width + n * 2, a = 28, g = this.activeAnnotation === e, u = this.hoverAnnotation === e;
       let r = { x: 20, y: 20 };
       e.coordinates && typeof e.coordinates.x == "number" && typeof e.coordinates.y == "number" && (r = this.toScreenCoords(e.coordinates.x, e.coordinates.y));
-      const k = r.x - o / 2, w = r.y - c / 2, D = ((_ = e.style) == null ? void 0 : _.strokeColor) || "#2196F3";
-      this.ctx.fillStyle = g ? D : this.hexToRgba(D, 0.85), u && !g && (this.ctx.fillStyle = D), g ? (this.ctx.strokeStyle = "#ffffff", this.ctx.lineWidth = 2) : (this.ctx.strokeStyle = "transparent", this.ctx.lineWidth = 0), this.ctx.beginPath(), this.ctx.roundRect(k, w, o, c, 6), this.ctx.fill(), g && (this.ctx.stroke(), this.ctx.save(), this.ctx.strokeStyle = D, this.ctx.lineWidth = 2, this.ctx.strokeRect(k - 3, w - 3, o + 6, c + 6), this.ctx.restore()), this.ctx.fillStyle = "#ffffff", this.ctx.fillText(a, r.x, r.y);
+      const A = r.x - o / 2, w = r.y - a / 2, D = ((_ = e.style) == null ? void 0 : _.strokeColor) || "#2196F3";
+      this.ctx.fillStyle = g ? D : this.hexToRgba(D, 0.85), u && !g && (this.ctx.fillStyle = D), g ? (this.ctx.strokeStyle = "#ffffff", this.ctx.lineWidth = 2) : (this.ctx.strokeStyle = "transparent", this.ctx.lineWidth = 0), this.ctx.beginPath(), this.ctx.roundRect(A, w, o, a, 6), this.ctx.fill(), g && (this.ctx.stroke(), this.ctx.save(), this.ctx.strokeStyle = D, this.ctx.lineWidth = 2, this.ctx.strokeRect(A - 3, w - 3, o + 6, a + 6), this.ctx.restore()), this.ctx.fillStyle = "#ffffff", this.ctx.fillText(l, r.x, r.y);
     }), this.ctx.restore();
   }
   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";
-    const a = 12, o = 28;
-    let c = null;
+    const l = 12, o = 28;
+    let a = null;
     for (let g = e.length - 1; g >= 0; g--) {
-      const u = e[g], r = u.label || "未命名分类", k = this.ctx.measureText(r).width + a * 2;
+      const u = e[g], r = u.label || "未命名分类", A = this.ctx.measureText(r).width + l * 2;
       let w = { x: 20, y: 20 };
       u.coordinates && typeof u.coordinates.x == "number" && typeof u.coordinates.y == "number" && (w = this.toScreenCoords(u.coordinates.x, u.coordinates.y));
-      const D = w.x - k / 2, _ = w.y - o / 2;
-      if (t >= D && t <= D + k && n >= _ && n <= _ + o) {
-        c = u;
+      const D = w.x - A / 2, _ = w.y - o / 2;
+      if (t >= D && t <= D + A && n >= _ && n <= _ + o) {
+        a = u;
         break;
       }
     }
-    return this.ctx.restore(), c;
+    return this.ctx.restore(), a;
   }
   drawItem(t, n) {
     var o;
     if (this.visibleLabels.size > 0 && !this.visibleLabels.has(t.label) && !n)
       return;
     this.ctx.save();
-    const e = ((o = t.style) == null ? void 0 : o.strokeColor) || "#FF4081", a = n ? "#00E5FF" : e;
-    if (this.ctx.strokeStyle = a, this.ctx.lineWidth = 2, t.type === "rectangle") {
-      const c = t.coordinates, g = this.toScreenCoords(c.x1, c.y1), u = this.toScreenCoords(c.x2, c.y2), r = Math.min(g.x, u.x), k = Math.min(g.y, u.y), w = Math.abs(g.x - u.x), D = Math.abs(g.y - u.y);
-      this.ctx.strokeRect(r, k, w, D), n && this.drawHandles(this.getAnnotationHandles(t));
+    const e = ((o = t.style) == null ? void 0 : o.strokeColor) || "#FF4081", l = n ? "#00E5FF" : e;
+    if (this.ctx.strokeStyle = l, this.ctx.lineWidth = 2, t.type === "rectangle") {
+      const a = t.coordinates, g = this.toScreenCoords(a.x1, a.y1), u = this.toScreenCoords(a.x2, a.y2), r = Math.min(g.x, u.x), A = Math.min(g.y, u.y), w = Math.abs(g.x - u.x), D = Math.abs(g.y - u.y);
+      this.ctx.strokeRect(r, A, w, D), n && this.drawHandles(this.getAnnotationHandles(t));
     } else if (t.type === "polygon") {
-      const c = t.coordinates;
-      if (c.points.length === 0) {
+      const a = t.coordinates;
+      if (a.points.length === 0) {
         this.ctx.restore();
         return;
       }
       this.ctx.beginPath();
-      const g = this.toScreenCoords(c.points[0].x, c.points[0].y);
+      const g = this.toScreenCoords(a.points[0].x, a.points[0].y);
       this.ctx.moveTo(g.x, g.y);
-      for (let u = 1; u < c.points.length; u++) {
-        const r = this.toScreenCoords(c.points[u].x, c.points[u].y);
+      for (let u = 1; u < a.points.length; u++) {
+        const r = this.toScreenCoords(a.points[u].x, a.points[u].y);
         this.ctx.lineTo(r.x, r.y);
       }
       if (!this.isDrawing || t !== this.activeAnnotation)
         this.ctx.closePath();
       else if (this.lastMouseMovePoint) {
         let u = this.lastMouseMovePoint;
-        if (this.isHoveringStartPoint && c.points.length > 0) {
-          u = c.points[0];
-          const k = this.toScreenCoords(c.points[0].x, c.points[0].y);
-          this.ctx.save(), this.ctx.beginPath(), this.ctx.arc(k.x, k.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();
+        if (this.isHoveringStartPoint && a.points.length > 0) {
+          u = a.points[0];
+          const A = this.toScreenCoords(a.points[0].x, a.points[0].y);
+          this.ctx.save(), this.ctx.beginPath(), this.ctx.arc(A.x, A.y, 10, 0, Math.PI * 2), this.ctx.fillStyle = "rgba(255, 215, 0, 0.6)", this.ctx.strokeStyle = "#FFFFFF", this.ctx.lineWidth = 2, this.ctx.fill(), this.ctx.stroke(), this.ctx.restore();
         }
         const r = this.toScreenCoords(u.x, u.y);
         this.ctx.lineTo(r.x, r.y);
       }
       this.ctx.stroke(), n && 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 g = c.width * this.scale, u = c.height * this.scale;
-      this.ctx.strokeRect(-g / 2, -u / 2, g, u), 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), n && this.drawHandles(this.getAnnotationHandles(t));
+      const a = t.coordinates;
+      this.ctx.translate(this.toScreenCoords(a.x, a.y).x, this.toScreenCoords(a.x, a.y).y), this.ctx.rotate(a.angle * Math.PI / 180);
+      const g = a.width * this.scale, u = a.height * this.scale;
+      this.ctx.strokeRect(-g / 2, -u / 2, g, u), this.ctx.rotate(-a.angle * Math.PI / 180), this.ctx.translate(-this.toScreenCoords(a.x, a.y).x, -this.toScreenCoords(a.x, a.y).y), n && this.drawHandles(this.getAnnotationHandles(t));
     } else t.type === "point" && t.coordinates.points.forEach((g) => {
       const u = this.toScreenCoords(g.x, g.y);
       this.ctx.beginPath(), this.ctx.arc(u.x, u.y, 5, 0, Math.PI * 2), this.ctx.fillStyle = n ? "#00E5FF" : e, this.ctx.fill(), this.ctx.stroke();
     });
-    this.ctx.restore();
+    this.showLabels && t.label && t.type !== "category" && this.drawAnnotationLabel(t, e), this.ctx.restore();
+  }
+  drawAnnotationLabel(t, n) {
+    let e = 0, l = 0;
+    if (t.type === "rectangle") {
+      const o = t.coordinates, a = this.toScreenCoords(Math.min(o.x1, o.x2), Math.min(o.y1, o.y2));
+      e = a.x, l = a.y - 8;
+    } else if (t.type === "polygon") {
+      const o = t.coordinates;
+      if (o.points.length > 0) {
+        const a = this.toScreenCoords(o.points[0].x, o.points[0].y);
+        e = a.x, l = a.y - 8;
+      }
+    } else if (t.type === "rotatedRect") {
+      const o = t.coordinates, a = this.toScreenCoords(o.x, o.y - o.height / 2);
+      e = a.x, l = a.y - 8;
+    } else if (t.type === "point") {
+      const o = t.coordinates;
+      if (o.points.length > 0) {
+        const a = this.toScreenCoords(o.points[0].x, o.points[0].y);
+        e = a.x, l = a.y - 8;
+      }
+    }
+    if (e !== 0 || l !== 0) {
+      this.ctx.save(), this.ctx.font = "12px sans-serif", this.ctx.textBaseline = "bottom";
+      const o = t.label, a = this.ctx.measureText(o).width, g = 8, u = 4;
+      this.ctx.fillStyle = this.hexToRgba(n, 0.8), this.ctx.beginPath(), this.ctx.roundRect(e, l - 14 - u, a + g * 2, 14 + u * 2, 4), this.ctx.fill(), this.ctx.fillStyle = "#FFFFFF", this.ctx.fillText(o, e + g, l), this.ctx.restore();
+    }
   }
   drawHandles(t) {
     this.ctx.fillStyle = "#FFFFFF", this.ctx.strokeStyle = "#000000", this.ctx.lineWidth = 1, t.forEach((n) => {
@@ -547,25 +579,25 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
     name: {},
     size: {}
   },
-  setup(x) {
-    const t = x, n = M(""), e = /* @__PURE__ */ Object.assign({ "../assets/svg/aim.svg": de, "../assets/svg/back.svg": ge, "../assets/svg/connection.svg": ue, "../assets/svg/crop.svg": ve, "../assets/svg/delete.svg": fe, "../assets/svg/download.svg": me, "../assets/svg/edit.svg": pe, "../assets/svg/first.svg": ye, "../assets/svg/hide.svg": xe, "../assets/svg/last.svg": we, "../assets/svg/pointer.svg": be, "../assets/svg/price-tag.svg": Ce, "../assets/svg/rank.svg": _e, "../assets/svg/refresh-right.svg": ke, "../assets/svg/right.svg": Ie, "../assets/svg/view.svg": Ae, "../assets/svg/zoom-in.svg": Se, "../assets/svg/zoom-out.svg": Me });
+  setup(y) {
+    const t = y, n = M(""), e = /* @__PURE__ */ Object.assign({ "../assets/svg/aim.svg": de, "../assets/svg/back.svg": ge, "../assets/svg/connection.svg": ue, "../assets/svg/crop.svg": ve, "../assets/svg/delete.svg": fe, "../assets/svg/download.svg": me, "../assets/svg/edit.svg": pe, "../assets/svg/first.svg": ye, "../assets/svg/hide.svg": xe, "../assets/svg/last.svg": we, "../assets/svg/pointer.svg": be, "../assets/svg/price-tag.svg": Ce, "../assets/svg/rank.svg": _e, "../assets/svg/refresh-right.svg": ke, "../assets/svg/right.svg": Ie, "../assets/svg/view.svg": Ae, "../assets/svg/zoom-in.svg": Se, "../assets/svg/zoom-out.svg": Me });
     return ce(() => {
-      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) => (v(), m("i", {
-      class: X(["svg-icon", [x.size ? `size-${x.size}` : ""]]),
+      const l = `../assets/svg/${t.name}.svg`, o = e[l];
+      o ? n.value = o : (console.warn(`Icon ${t.name} not found at path ${l}`), n.value = "");
+    }), (l, o) => (v(), m("i", {
+      class: q(["svg-icon", [y.size ? `size-${y.size}` : ""]]),
       innerHTML: n.value
     }, null, 10, Te));
   }
-}), rt = (x, t) => {
-  const n = x.__vccOpts || x;
-  for (const [e, a] of t)
-    n[e] = a;
+}), rt = (y, t) => {
+  const n = y.__vccOpts || y;
+  for (const [e, l] of t)
+    n[e] = l;
   return n;
-}, L = /* @__PURE__ */ rt(De, [["__scopeId", "data-v-3928607b"]]), Pe = {
+}, $ = /* @__PURE__ */ rt(De, [["__scopeId", "data-v-3928607b"]]), Pe = {
   key: 0,
   class: "image-list-sidebar"
-}, ze = { class: "image-list-header" }, $e = ["onClick"], Le = { class: "image-list-stage" }, Be = ["src", "alt"], Re = {
+}, Le = { class: "image-list-header" }, ze = ["onClick"], $e = { class: "image-list-stage" }, Re = ["src", "alt"], Be = {
   key: 0,
   class: "thumb-overlay-layer"
 }, He = {
@@ -573,13 +605,13 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
   class: "thumb-overlay-svg",
   viewBox: "0 0 100 100",
   preserveAspectRatio: "none"
-}, Ee = ["points"], Ue = { class: "image-list-text" }, Ve = { class: "center-sidebar" }, Oe = {
+}, Ee = ["points"], Ue = { class: "image-list-text" }, Oe = { class: "center-sidebar" }, Ve = {
   key: 0,
   class: "left-sidebar"
-}, Fe = ["onClick", "title"], Ne = {
+}, Fe = ["onClick", "title"], We = {
   key: 0,
   class: "divider"
-}, We = { class: "center-area" }, Ge = {
+}, Ne = { class: "center-area" }, Ge = {
   key: 0,
   class: "floating-label-selector"
 }, Ye = {
@@ -617,8 +649,8 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
     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(x, { expose: t, emit: n }) {
-    const e = x, a = n, o = M(null), c = M(null), g = M(null), u = M([]), r = M(null), k = M(null), w = M(0), D = M(""), _ = M([]), $ = M(""), q = M(!1), C = M({ name: "", color: "#FF0000" }), S = M("none"), p = M([]), H = M({}), O = V(() => k.value === "select" && !!D.value), G = M(!1), Z = V(() => _.value.find((s) => s.id === $.value)), xt = (s) => {
+  setup(y, { expose: t, emit: n }) {
+    const e = y, l = n, o = M(null), a = M(null), g = M(null), u = M([]), r = M(null), A = M(null), w = M(0), D = M(""), _ = M([]), z = M(""), X = M(!1), C = M({ name: "", color: "#FF0000" }), S = M("none"), x = M([]), H = M({}), V = O(() => A.value === "select" && !!D.value), G = M(!1), Z = O(() => _.value.find((s) => s.id === z.value)), xt = (s) => {
       s.stopPropagation(), G.value = !G.value;
     }, wt = (s) => {
       tt(s), G.value = !1;
@@ -632,10 +664,10 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
       if (!s || H.value[s]) return;
       const i = new Image();
       i.onload = () => {
-        const l = i.naturalWidth || 1, d = i.naturalHeight || 1;
+        const c = i.naturalWidth || 1, d = i.naturalHeight || 1;
         H.value = {
           ...H.value,
-          [s]: { width: l, height: d }
+          [s]: { width: c, height: d }
         };
       }, i.src = s;
     }, nt = () => {
@@ -645,12 +677,12 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
     }, ht = (s, i) => {
       u.value[i] = s;
     }, Q = (s = w.value) => {
-      const i = g.value, l = u.value[s];
-      if (!i || !l) return;
-      const d = i.scrollTop, f = d + i.clientHeight, A = l.offsetTop, P = A + l.offsetHeight;
-      if (A < d) {
+      const i = g.value, c = u.value[s];
+      if (!i || !c) return;
+      const d = i.scrollTop, f = d + i.clientHeight, I = c.offsetTop, P = I + c.offsetHeight;
+      if (I < d) {
         i.scrollTo({
-          top: Math.max(A - 8, 0),
+          top: Math.max(I - 8, 0),
           behavior: "smooth"
         });
         return;
@@ -660,28 +692,28 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
         behavior: "smooth"
       });
     }, j = () => {
-      var l, d, f, A;
-      const s = e.batchImages[w.value], i = (s == null ? void 0 : s.imageUrl) || ((l = e.image) == null ? void 0 : l.url);
+      var c, d, f, I;
+      const s = e.batchImages[w.value], i = (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: (d = e.session) == null ? void 0 : d.taskId,
         imageId: ((f = e.image) == null ? void 0 : f.id) || i,
-        operator: (A = e.session) == null ? void 0 : A.userId
+        operator: (I = e.session) == null ? void 0 : I.userId
       };
-    }, y = (s) => {
+    }, p = (s) => {
       var d;
       const i = s == null ? void 0 : s.action;
       if (!i) return;
-      const l = {
+      const c = {
         meta: j(),
         action: i,
         current: s == null ? void 0 : s.changedItem,
         source: (d = s == null ? void 0 : s.changedItem) != null && d.predictionId ? "prediction" : "manual"
       };
-      i === "add" && a("annotation:add", l), i === "update" && a("annotation:update", l), i === "delete" && a("annotation:delete", l), i === "select" && a("annotation:select", l);
-    }, b = V(() => e.annotationTypes), I = (s) => ({
+      i === "add" && l("annotation:add", c), i === "update" && l("annotation:update", c), i === "delete" && l("annotation:delete", c), i === "select" && l("annotation:select", c);
+    }, b = O(() => e.annotationTypes), k = (s) => ({
       rectangle: "crop",
       polygon: "connection",
       point: "aim",
@@ -696,28 +728,28 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
     })[s] || s;
     yt(() => {
       if (nt(), o.value) {
-        r.value = new he(o.value), r.value.on("annotationChange", (i) => {
-          var l, d;
+        r.value = new he(o.value), r.value.setShowLabels(e.readOnly), r.value.on("annotationChange", (i) => {
+          var c, d;
           if (i.action === "add" && i.changedItem) {
-            const f = _.value.find((A) => A.id === $.value);
+            const f = _.value.find((I) => I.id === z.value);
             f && (i.changedItem.label = f.name, i.changedItem.labelId = f.id);
           }
-          i.action === "select" ? D.value = ((l = i.changedItem) == null ? void 0 : l.id) || "" : i.action === "delete" && ((d = i.changedItem) == null ? void 0 : d.id) === D.value && (D.value = ""), a("annotationChange", i), y(i);
-        }), W(), E();
+          i.action === "select" ? D.value = ((c = i.changedItem) == null ? void 0 : c.id) || "" : i.action === "delete" && ((d = i.changedItem) == null ? void 0 : d.id) === D.value && (D.value = ""), l("annotationChange", i), p(i);
+        }), N(), E();
         const s = new ResizeObserver(() => {
           var i;
           (i = r.value) == null || i.resize();
         });
-        c.value && s.observe(c.value), e.defaultActiveType && Y(e.defaultActiveType), at(() => Q()), a("ready", { meta: j() });
+        a.value && s.observe(a.value), e.defaultActiveType && Y(e.defaultActiveType), at(() => Q()), l("ready", { meta: j() });
       }
     });
     const E = () => {
       if (!r.value) return;
-      const s = _.value.find((l) => l.id === $.value);
+      const s = _.value.find((c) => c.id === z.value);
       s && r.value.setLabelStyle(s.color);
-      const i = _.value.filter((l) => l.visible).map((l) => l.name);
+      const i = _.value.filter((c) => c.visible).map((c) => c.name);
       r.value.setVisibleLabels(i);
-    }, W = () => {
+    }, N = () => {
       var s;
       if (r.value)
         if (D.value = "", requestAnimationFrame(() => {
@@ -728,17 +760,17 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
           r.value.loadImage(i.imageUrl), i.annotations ? r.value.setAnnotations(i.annotations) : r.value.setAnnotations([]);
         } else (s = e.image) != null && s.url && r.value.loadImage(e.image.url);
     }, Y = (s) => {
-      var i, l;
-      if (k.value = s, D.value = "", s !== "pan" && s !== "select" && _.value.length === 0) {
+      var i, c;
+      if (A.value = s, D.value = "", s !== "pan" && s !== "select" && _.value.length === 0) {
         alert("请先创建标签！");
         return;
       }
-      s === "pan" || s === "select" ? (i = r.value) == null || i.setTool(s) : (l = r.value) == null || l.setTool(s), a("tool:change", { meta: j(), tool: s });
+      s === "pan" || s === "select" ? (i = r.value) == null || i.setTool(s) : (c = r.value) == null || c.setTool(s), l("tool:change", { meta: j(), tool: s });
     }, St = () => {
       var s;
       (s = r.value) != null && s.activeAnnotation && r.value.deleteAnnotation(r.value.activeAnnotation.id);
     }, bt = () => {
-      r.value && a("viewport:change", {
+      r.value && l("viewport:change", {
         meta: j(),
         scale: r.value.scale,
         offset: { ...r.value.offset }
@@ -750,9 +782,9 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
       var s;
       (s = r.value) == null || s.zoom(-1), bt();
     }, Dt = () => {
-      C.value = { name: "", color: "#2196F3" }, q.value = !0;
+      C.value = { name: "", color: "#2196F3" }, X.value = !0;
     }, dt = () => {
-      q.value = !1;
+      X.value = !1;
     }, Pt = () => {
       if (!C.value.name.trim()) {
         alert("请输入标签名称");
@@ -764,47 +796,47 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
         color: C.value.color,
         visible: !0
       };
-      _.value.push(i), a("labelChange", _.value), E(), _.value.length === 1 && tt(i), dt();
+      _.value.push(i), l("labelChange", _.value), E(), _.value.length === 1 && tt(i), dt();
     }, tt = (s) => {
       var i;
-      $.value = s.id, (i = r.value) == null || i.setLabelStyle(s.color);
-    }, zt = (s, i) => {
+      z.value = s.id, (i = r.value) == null || i.setLabelStyle(s.color);
+    }, Lt = (s, i) => {
       if (!s.startsWith("#")) return s;
-      let l = 0, d = 0, f = 0;
-      return s.length === 4 ? (l = parseInt(s[1] + s[1], 16), d = parseInt(s[2] + s[2], 16), f = parseInt(s[3] + s[3], 16)) : s.length === 7 && (l = parseInt(s.slice(1, 3), 16), d = parseInt(s.slice(3, 5), 16), f = parseInt(s.slice(5, 7), 16)), `rgba(${l}, ${d}, ${f}, ${i})`;
-    }, $t = (s) => {
+      let c = 0, d = 0, f = 0;
+      return s.length === 4 ? (c = parseInt(s[1] + s[1], 16), d = parseInt(s[2] + s[2], 16), f = parseInt(s[3] + s[3], 16)) : s.length === 7 && (c = parseInt(s.slice(1, 3), 16), d = parseInt(s.slice(3, 5), 16), f = parseInt(s.slice(5, 7), 16)), `rgba(${c}, ${d}, ${f}, ${i})`;
+    }, zt = (s) => {
       var i;
-      if (s.id === $.value && ((i = r.value) == null || i.setLabelStyle(s.color)), r.value) {
-        const l = r.value.getAnnotations();
+      if (s.id === z.value && ((i = r.value) == null || i.setLabelStyle(s.color)), r.value) {
+        const c = r.value.getAnnotations();
         let d = !1;
-        l.forEach((f) => {
-          f.label === s.name && (f.style || (f.style = {}), f.style.strokeColor = s.color, f.style.fillColor = zt(s.color, 0.2), d = !0);
+        c.forEach((f) => {
+          f.label === s.name && (f.style || (f.style = {}), f.style.strokeColor = s.color, f.style.fillColor = Lt(s.color, 0.2), d = !0);
         }), d && r.value.render();
       }
-      a("labelChange", _.value), E();
-    }, Lt = (s) => {
+      l("labelChange", _.value), E();
+    }, $t = (s) => {
       s.visible = !s.visible, E();
-    }, Bt = (s) => {
-      const i = _.value.findIndex((l) => l.id === s);
-      i > -1 && (_.value.splice(i, 1), a("labelChange", _.value), $.value === s && ($.value = _.value.length > 0 ? _.value[0].id : "", $.value && tt(_.value[0])), E());
+    }, Rt = (s) => {
+      const i = _.value.findIndex((c) => c.id === s);
+      i > -1 && (_.value.splice(i, 1), l("labelChange", _.value), z.value === s && (z.value = _.value.length > 0 ? _.value[0].id : "", z.value && tt(_.value[0])), E());
     };
     K(() => e.labels, (s) => {
       const i = JSON.parse(JSON.stringify(s || []));
       if (_.value = i, _.value.length > 0)
-        if (!$.value || !_.value.find((l) => l.id === $.value))
+        if (!z.value || !_.value.find((c) => c.id === z.value))
           tt(_.value[0]);
         else {
-          const l = _.value.find((d) => d.id === $.value);
-          l && tt(l);
+          const c = _.value.find((d) => d.id === z.value);
+          c && tt(c);
         }
       else
-        $.value = "";
+        z.value = "";
       E();
     }, { immediate: !0, deep: !0 });
-    const Rt = () => {
-      w.value > 0 && (gt(), w.value--, W(), ut());
+    const Bt = () => {
+      w.value > 0 && (gt(), w.value--, N(), ut());
     }, Ht = () => {
-      w.value < e.batchImages.length - 1 && (gt(), w.value++, W(), ut());
+      w.value < e.batchImages.length - 1 && (gt(), w.value++, N(), ut());
     }, Et = () => {
       w.value > 0 && ot(0);
     }, Ut = () => {
@@ -816,7 +848,7 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
       }
     }, ut = () => {
       const s = e.batchImages[w.value];
-      a("batchChange", {
+      l("batchChange", {
         currentIndex: w.value,
         total: e.batchImages.length,
         currentImageUrl: s.imageUrl,
@@ -825,68 +857,68 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
     }, Ct = (s = []) => {
       var f;
       if (!r.value) return;
-      if (p.value = JSON.parse(JSON.stringify(s)), p.value.length === 0) {
+      if (x.value = JSON.parse(JSON.stringify(s)), x.value.length === 0) {
         S.value = "none";
         return;
       }
       S.value = "loaded";
-      const l = (r.value.getAnnotations() || []).filter((A) => !A.predictionId), d = p.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;
+      const c = (r.value.getAnnotations() || []).filter((I) => !I.predictionId), d = x.value.map((I) => {
+        const P = JSON.parse(JSON.stringify(I.annotation));
+        return P.id = P.id || `pred-${I.id}`, P.predictionId = I.id, P.modelRunId = I.modelRunId || P.modelRunId, P.confidence = I.confidence ?? P.confidence, P.reviewStatus = P.reviewStatus || "draft", P;
       });
-      r.value.setAnnotations([...l, ...d]), a("prediction:loaded", {
+      r.value.setAnnotations([...c, ...d]), l("prediction:loaded", {
         meta: j(),
-        modelRunId: (f = p.value[0]) == null ? void 0 : f.modelRunId,
-        candidates: p.value
+        modelRunId: (f = x.value[0]) == null ? void 0 : f.modelRunId,
+        candidates: x.value
       });
-    }, Vt = (s, i) => {
+    }, Ot = (s, i) => {
       var f;
       if (!r.value) return [];
       S.value = "applying";
-      const d = (r.value.getAnnotations() || []).filter((A) => A.predictionId && s.includes(A.predictionId));
-      return d.forEach((A) => {
-        A.reviewStatus = "accepted";
-      }), S.value = "applied", a("prediction:apply", {
+      const d = (r.value.getAnnotations() || []).filter((I) => I.predictionId && s.includes(I.predictionId));
+      return d.forEach((I) => {
+        I.reviewStatus = "accepted";
+      }), S.value = "applied", l("prediction:apply", {
         meta: j(),
         modelRunId: (f = d[0]) == null ? void 0 : f.modelRunId,
         candidateIds: s,
         threshold: i,
         acceptedAnnotations: d
       }), r.value.render(), d;
-    }, Ot = (s, i) => {
+    }, Vt = (s, i) => {
       var f;
       if (!r.value) return;
-      const l = r.value.getAnnotations() || [], d = l.filter((A) => !(A.predictionId && s.includes(A.predictionId)));
-      r.value.setAnnotations(d), a("prediction:reject", {
+      const c = r.value.getAnnotations() || [], d = c.filter((I) => !(I.predictionId && s.includes(I.predictionId)));
+      r.value.setAnnotations(d), l("prediction:reject", {
         meta: j(),
-        modelRunId: (f = l.find((A) => A.predictionId && s.includes(A.predictionId))) == null ? void 0 : f.modelRunId,
+        modelRunId: (f = c.find((I) => I.predictionId && s.includes(I.predictionId))) == null ? void 0 : f.modelRunId,
         candidateIds: s,
         reason: i
       });
     }, Ft = (s, i = []) => {
       r.value && (r.value.loadImage(s.url), r.value.setAnnotations(i));
-    }, Nt = (s) => {
+    }, Wt = (s) => {
       var i;
       (i = r.value) == null || i.setAnnotations(s);
     }, _t = () => {
       var s;
       return ((s = r.value) == null ? void 0 : s.getAnnotations()) || [];
-    }, Wt = (s = "json") => {
-      var l, d;
+    }, Nt = (s = "json") => {
+      var c, d;
       const i = _t();
       return {
         format: s,
-        image: ((l = e.batchImages[w.value]) == null ? void 0 : l.imageUrl) || ((d = e.image) == null ? void 0 : d.url) || "",
+        image: ((c = e.batchImages[w.value]) == null ? void 0 : c.imageUrl) || ((d = e.image) == null ? void 0 : d.url) || "",
         annotations: i
       };
     }, ot = (s) => {
-      s >= 0 && s < e.batchImages.length && (gt(), w.value = s, W(), ut());
+      s >= 0 && s < e.batchImages.length && (gt(), w.value = s, N(), ut());
     }, Gt = (s) => {
       var i;
       return s === w.value && r.value ? r.value.getAnnotations() || [] : ((i = e.batchImages[s]) == null ? void 0 : i.annotations) || [];
     }, Yt = (s) => s.type === "rectangle", Jt = (s) => s.type === "polygon", jt = (s) => s.type === "point", Xt = (s) => s.type === "rotatedRect", qt = (s) => s.type === "category", et = (s) => {
-      var l, d;
-      const i = (l = _.value.find((f) => f.name === s.label)) == null ? void 0 : l.color;
+      var c, d;
+      const i = (c = _.value.find((f) => f.name === s.label)) == null ? void 0 : c.color;
       return ((d = s.style) == null ? void 0 : d.strokeColor) || i || "#409eff";
     }, kt = (s) => {
       const i = s.coordinates;
@@ -895,24 +927,24 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
       const i = e.batchImages[s];
       if (i != null && i.width && (i != null && i.height))
         return { width: i.width, height: i.height };
-      const l = i != null && i.imageUrl ? H.value[i.imageUrl] : void 0;
-      return l || (i != null && i.imageUrl && it(i.imageUrl), { width: 1, height: 1 });
+      const c = i != null && i.imageUrl ? H.value[i.imageUrl] : void 0;
+      return c || (i != null && i.imageUrl && it(i.imageUrl), { width: 1, height: 1 });
     }, Kt = (s) => {
       const i = e.batchImages[s];
       return i != null && i.width && (i != null && i.height) ? !0 : i != null && i.imageUrl ? !!H.value[i.imageUrl] : !1;
     }, Zt = (s, i) => {
-      const l = i.coordinates, d = st(s), f = et(i), A = Math.min(l.x1, l.x2), P = Math.min(l.y1, l.y2), ne = Math.max(l.x1, l.x2), oe = Math.max(l.y1, l.y2);
+      const c = i.coordinates, d = st(s), f = et(i), I = Math.min(c.x1, c.x2), P = Math.min(c.y1, c.y2), ne = Math.max(c.x1, c.x2), oe = Math.max(c.y1, c.y2);
       return {
-        left: `${A / d.width * 100}%`,
+        left: `${I / d.width * 100}%`,
         top: `${P / d.height * 100}%`,
-        width: `${(ne - A) / d.width * 100}%`,
+        width: `${(ne - I) / d.width * 100}%`,
         height: `${(oe - P) / d.height * 100}%`,
         borderColor: f,
         backgroundColor: `${f}22`
       };
     }, Qt = (s, i) => {
-      const l = st(s);
-      return kt(i).map((d) => `${d.x / l.width * 100},${d.y / l.height * 100}`).join(" ");
+      const c = st(s);
+      return kt(i).map((d) => `${d.x / c.width * 100},${d.y / c.height * 100}`).join(" ");
     }, te = (s) => {
       const i = et(s);
       return {
@@ -920,29 +952,29 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
         stroke: i,
         strokeWidth: "1.4"
       };
-    }, ee = (s, i, l) => {
-      const d = st(s), f = et(l);
+    }, ee = (s, i, c) => {
+      const d = st(s), f = et(c);
       return {
         left: `${i.x / d.width * 100}%`,
         top: `${i.y / d.height * 100}%`,
         backgroundColor: f
       };
     }, se = (s, i) => {
-      const l = i.coordinates, d = st(s), f = et(i), A = Math.abs(l.width), P = Math.abs(l.height);
+      const c = i.coordinates, d = st(s), f = et(i), I = Math.abs(c.width), P = Math.abs(c.height);
       return {
-        left: `${(l.x - A / 2) / d.width * 100}%`,
-        top: `${(l.y - P / 2) / d.height * 100}%`,
-        width: `${A / d.width * 100}%`,
+        left: `${(c.x - I / 2) / d.width * 100}%`,
+        top: `${(c.y - P / 2) / d.height * 100}%`,
+        width: `${I / d.width * 100}%`,
         height: `${P / d.height * 100}%`,
-        transform: `rotate(${l.angle || 0}deg)`,
+        transform: `rotate(${c.angle || 0}deg)`,
         borderColor: f,
         backgroundColor: `${f}22`
       };
     }, ie = (s, i) => {
-      const l = i.coordinates, d = st(s), f = et(i);
+      const c = i.coordinates, d = st(s), f = et(i);
       return {
-        left: `${l.x / d.width * 100}%`,
-        top: `${l.y / d.height * 100}%`,
+        left: `${c.x / d.width * 100}%`,
+        top: `${c.y / d.height * 100}%`,
         backgroundColor: `${f}d9`
         // ~85% opacity
       };
@@ -950,13 +982,13 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
     return t({
       jumpTo: ot,
       setImage: Ft,
-      setAnnotations: Nt,
+      setAnnotations: Wt,
       getAnnotations: _t,
       selectTool: Y,
       loadPredictionCandidates: Ct,
-      applyPredictions: Vt,
-      rejectPredictions: Ot,
-      exportAnnotations: Wt,
+      applyPredictions: Ot,
+      rejectPredictions: Vt,
+      exportAnnotations: Nt,
       getAllAnnotations: () => {
         var s, i;
         return e.batchImages.length > 0 ? e.batchImages : [{
@@ -965,10 +997,10 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
         }];
       },
       getCurrentAnnotation: () => {
-        var s, i, l;
+        var s, i, c;
         return {
           imageUrl: ((s = e.batchImages[w.value]) == null ? void 0 : s.imageUrl) || ((i = e.image) == null ? void 0 : i.url) || "",
-          annotations: ((l = r.value) == null ? void 0 : l.getAnnotations()) || []
+          annotations: ((c = r.value) == null ? void 0 : c.getAnnotations()) || []
         };
       }
     }), K(() => {
@@ -976,7 +1008,7 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
       return (s = e.image) == null ? void 0 : s.url;
     }, () => {
       var s;
-      e.batchImages.length === 0 && ((s = e.image) != null && s.url) && W();
+      e.batchImages.length === 0 && ((s = e.image) != null && s.url) && N();
     }), K(() => e.predictionCandidates, (s) => {
       s && Ct(s);
     }, { immediate: !0, deep: !0 }), K(
@@ -990,31 +1022,36 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
       () => {
         at(() => Q());
       }
+    ), K(
+      () => e.readOnly,
+      (s) => {
+        r.value && r.value.setShowLabels(s);
+      }
     ), (s, i) => (v(), m("div", {
-      class: X(["annotation-container", x.theme])
+      class: q(["annotation-container", y.theme])
     }, [
-      x.batchImages && x.batchImages.length > 0 ? (v(), m("div", Pe, [
-        h("div", ze, "共 " + z(x.batchImages.length) + " 张", 1),
+      y.batchImages && y.batchImages.length > 0 ? (v(), m("div", Pe, [
+        h("div", Le, "共 " + L(y.batchImages.length) + " 张", 1),
         h("div", {
           ref_key: "imageListScrollRef",
           ref: g,
           class: "image-list-scroll"
         }, [
-          (v(!0), m(N, null, J(x.batchImages, (l, d) => (v(), m("button", {
-            key: `${l.imageUrl}-${d}`,
+          (v(!0), m(W, null, J(y.batchImages, (c, d) => (v(), m("button", {
+            key: `${c.imageUrl}-${d}`,
             ref_for: !0,
             ref: (f) => ht(f, d),
-            class: X(["image-list-item", { active: d === w.value }]),
+            class: q(["image-list-item", { active: d === w.value }]),
             onClick: (f) => ot(d)
           }, [
-            h("div", Le, [
+            h("div", $e, [
               h("img", {
-                src: l.imageUrl,
+                src: c.imageUrl,
                 alt: `第${d + 1}张`,
                 class: "image-list-thumb"
-              }, null, 8, Be),
-              Kt(d) ? (v(), m("div", Re, [
-                (v(!0), m(N, null, J(Gt(d), (f) => (v(), m(N, {
+              }, null, 8, Re),
+              Kt(d) ? (v(), m("div", Be, [
+                (v(!0), m(W, null, J(Gt(d), (f) => (v(), m(W, {
                   key: f.id
                 }, [
                   Yt(f) ? (v(), m("div", {
@@ -1026,10 +1063,10 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
                       points: Qt(d, f),
                       style: U(te(f))
                     }, null, 12, Ee)
-                  ])) : jt(f) ? (v(!0), m(N, { key: 2 }, J(kt(f), (A, P) => (v(), m("div", {
+                  ])) : jt(f) ? (v(!0), m(W, { key: 2 }, J(kt(f), (I, P) => (v(), m("div", {
                     key: `${f.id}-${P}`,
                     class: "thumb-overlay-point",
-                    style: U(ee(d, A, f))
+                    style: U(ee(d, I, f))
                   }, null, 4))), 128)) : Xt(f) ? (v(), m("div", {
                     key: 3,
                     class: "thumb-overlay-rotated",
@@ -1038,39 +1075,39 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
                     key: 4,
                     class: "thumb-overlay-category",
                     style: U(ie(d, f))
-                  }, z(f.label), 5)) : B("", !0)
+                  }, L(f.label), 5)) : R("", !0)
                 ], 64))), 128))
-              ])) : B("", !0)
+              ])) : R("", !0)
             ]),
-            h("span", Ue, "第 " + z(d + 1) + " 张", 1)
-          ], 10, $e))), 128))
+            h("span", Ue, "第 " + L(d + 1) + " 张", 1)
+          ], 10, ze))), 128))
         ], 512)
-      ])) : B("", !0),
-      h("div", Ve, [
-        x.readOnly ? B("", !0) : (v(), m("div", Oe, [
+      ])) : R("", !0),
+      h("div", Oe, [
+        y.readOnly ? R("", !0) : (v(), m("div", Ve, [
           h("div", {
-            class: X(["tool-btn", { active: k.value === "pan" }]),
-            onClick: i[0] || (i[0] = (l) => Y("pan")),
+            class: q(["tool-btn", { active: A.value === "pan" }]),
+            onClick: i[0] || (i[0] = (c) => Y("pan")),
             title: "拖动"
           }, [
-            R(L, { name: "rank" })
+            B($, { name: "rank" })
           ], 2),
           h("div", {
-            class: X(["tool-btn", { active: k.value === "select" }]),
-            onClick: i[1] || (i[1] = (l) => Y("select")),
+            class: q(["tool-btn", { active: A.value === "select" }]),
+            onClick: i[1] || (i[1] = (c) => Y("select")),
             title: "选择"
           }, [
-            R(L, { name: "pointer" })
+            B($, { name: "pointer" })
           ], 2),
           i[5] || (i[5] = h("div", { class: "divider" }, null, -1)),
-          (v(!0), m(N, null, J(b.value, (l) => (v(), m("div", {
-            key: l,
-            class: X(["tool-btn", { active: k.value === l }]),
-            onClick: (d) => Y(l),
-            title: F(l)
+          (v(!0), m(W, null, J(b.value, (c) => (v(), m("div", {
+            key: c,
+            class: q(["tool-btn", { active: A.value === c }]),
+            onClick: (d) => Y(c),
+            title: F(c)
           }, [
-            R(L, {
-              name: I(l)
+            B($, {
+              name: k(c)
             }, null, 8, ["name"])
           ], 10, Fe))), 128)),
           i[6] || (i[6] = h("div", { class: "divider" }, null, -1)),
@@ -1079,31 +1116,31 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
             onClick: Mt,
             title: "放大"
           }, [
-            R(L, { name: "zoom-in" })
+            B($, { name: "zoom-in" })
           ]),
           h("div", {
             class: "tool-btn",
             onClick: Tt,
             title: "缩小"
           }, [
-            R(L, { name: "zoom-out" })
+            B($, { name: "zoom-out" })
           ]),
-          O.value ? (v(), m("div", Ne)) : B("", !0),
-          O.value ? (v(), m("div", {
+          V.value ? (v(), m("div", We)) : R("", !0),
+          V.value ? (v(), m("div", {
             key: 1,
             class: "tool-btn",
             onClick: St,
             title: "删除选中"
           }, [
-            R(L, { name: "delete" })
-          ])) : B("", !0)
+            B($, { name: "delete" })
+          ])) : R("", !0)
         ]))
       ]),
-      h("div", We, [
+      h("div", Ne, [
         h("div", {
           class: "canvas-wrapper",
           ref_key: "canvasWrapper",
-          ref: c,
+          ref: a,
           onWheel: i[2] || (i[2] = It(() => {
           }, ["prevent"]))
         }, [
@@ -1111,7 +1148,7 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
             ref_key: "canvasRef",
             ref: o
           }, null, 512),
-          x.readOnly ? B("", !0) : (v(), m("div", Ge, [
+          y.readOnly ? R("", !0) : (v(), m("div", Ge, [
             h("div", {
               class: "selector-trigger",
               onClick: xt
@@ -1121,72 +1158,72 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
                   class: "color-dot",
                   style: U({ backgroundColor: Z.value.color })
                 }, null, 4),
-                h("span", Je, z(Z.value.name), 1)
+                h("span", Je, L(Z.value.name), 1)
               ])) : (v(), m("div", je, [...i[7] || (i[7] = [
                 h("span", { class: "label-name" }, "请选择标签", -1)
               ])])),
-              R(L, {
+              B($, {
                 name: "right",
-                class: X(["arrow-icon", { "is-open": G.value }])
+                class: q(["arrow-icon", { "is-open": G.value }])
               }, null, 8, ["class"])
             ]),
             G.value ? (v(), m("div", Xe, [
-              _.value.length === 0 ? (v(), m("div", qe, "请在右侧创建标签")) : (v(!0), m(N, { key: 1 }, J(_.value, (l) => (v(), m("div", {
-                key: l.id,
-                class: X(["dropdown-item", { active: $.value === l.id }]),
-                onClick: (d) => wt(l)
+              _.value.length === 0 ? (v(), m("div", qe, "请在右侧创建标签")) : (v(!0), m(W, { key: 1 }, J(_.value, (c) => (v(), m("div", {
+                key: c.id,
+                class: q(["dropdown-item", { active: z.value === c.id }]),
+                onClick: (d) => wt(c)
               }, [
                 h("span", {
                   class: "color-dot",
-                  style: U({ backgroundColor: l.color })
+                  style: U({ backgroundColor: c.color })
                 }, null, 4),
-                h("span", Ze, z(l.name), 1),
-                $.value === l.id ? (v(), vt(L, {
+                h("span", Ze, L(c.name), 1),
+                z.value === c.id ? (v(), vt($, {
                   key: 0,
                   name: "aim",
                   class: "check-icon"
-                })) : B("", !0)
+                })) : R("", !0)
               ], 10, Ke))), 128))
-            ])) : B("", !0)
+            ])) : R("", !0)
           ]))
         ], 544),
-        x.batchImages && x.batchImages.length > 0 ? (v(), m("div", Qe, [
+        y.batchImages && y.batchImages.length > 0 ? (v(), m("div", Qe, [
           h("button", {
             class: "icon-btn",
             onClick: Et,
             disabled: w.value <= 0,
             title: "第一张"
           }, [
-            R(L, { name: "first" })
+            B($, { name: "first" })
           ], 8, ts),
           h("button", {
             class: "icon-btn",
-            onClick: Rt,
+            onClick: Bt,
             disabled: w.value <= 0,
             title: "上一张"
           }, [
-            R(L, { name: "back" })
+            B($, { name: "back" })
           ], 8, es),
-          h("span", null, z(w.value + 1) + " / " + z(x.batchImages.length), 1),
+          h("span", null, L(w.value + 1) + " / " + L(y.batchImages.length), 1),
           h("button", {
             class: "icon-btn",
             onClick: Ht,
-            disabled: w.value >= x.batchImages.length - 1,
+            disabled: w.value >= y.batchImages.length - 1,
             title: "下一张"
           }, [
-            R(L, { name: "right" })
+            B($, { name: "right" })
           ], 8, ss),
           h("button", {
             class: "icon-btn",
             onClick: Ut,
-            disabled: w.value >= x.batchImages.length - 1,
+            disabled: w.value >= y.batchImages.length - 1,
             title: "最后一张"
           }, [
-            R(L, { name: "last" })
+            B($, { name: "last" })
           ], 8, is)
-        ])) : B("", !0)
+        ])) : R("", !0)
       ]),
-      x.readOnly ? B("", !0) : (v(), m("div", ns, [
+      y.readOnly ? R("", !0) : (v(), m("div", ns, [
         h("div", { class: "sidebar-header" }, [
           i[8] || (i[8] = h("h3", null, "标签", -1)),
           h("button", {
@@ -1195,37 +1232,37 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
           }, "添加标签")
         ]),
         h("div", os, [
-          (v(!0), m(N, null, J(_.value, (l) => (v(), m("div", {
-            key: l.id,
+          (v(!0), m(W, null, J(_.value, (c) => (v(), m("div", {
+            key: c.id,
             class: "label-item",
-            style: U({ backgroundColor: l.color + "1A", color: l.color })
+            style: U({ backgroundColor: c.color + "1A", color: c.color })
           }, [
             h("div", as, [
               h("label", {
                 class: "color-wrapper",
-                style: U({ backgroundColor: l.color })
+                style: U({ backgroundColor: c.color })
               }, [
                 ft(h("input", {
                   type: "color",
-                  "onUpdate:modelValue": (d) => l.color = d,
-                  onChange: (d) => $t(l),
+                  "onUpdate:modelValue": (d) => c.color = d,
+                  onChange: (d) => zt(c),
                   style: { visibility: "hidden", width: "0", height: "0" }
                 }, null, 40, ls), [
-                  [mt, l.color]
+                  [mt, c.color]
                 ])
               ], 4),
               h("span", {
                 class: "label-name",
-                title: l.name
-              }, z(l.name), 9, cs),
+                title: c.name
+              }, L(c.name), 9, cs),
               h("span", {
                 class: "action-icon eye",
-                onClick: (d) => Lt(l)
+                onClick: (d) => $t(c)
               }, [
-                l.visible ? (v(), vt(L, {
+                c.visible ? (v(), vt($, {
                   key: 0,
                   name: "view"
-                })) : (v(), vt(L, {
+                })) : (v(), vt($, {
                   key: 1,
                   name: "hide"
                 }))
@@ -1234,17 +1271,17 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
                 i[9] || (i[9] = h("span", { class: "dots" }, "•••", -1)),
                 h("span", {
                   class: "delete-btn",
-                  onClick: (d) => Bt(l.id),
+                  onClick: (d) => Rt(c.id),
                   title: "删除"
                 }, [
-                  R(L, { name: "delete" })
+                  B($, { name: "delete" })
                 ], 8, ds)
               ])
             ])
           ], 4))), 128))
         ])
       ])),
-      q.value ? (v(), m("div", {
+      X.value ? (v(), m("div", {
         key: 2,
         class: "modal-overlay",
         onClick: It(dt, ["self"])
@@ -1260,7 +1297,7 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
                 h("span", { class: "required" }, "*")
               ], -1)),
               ft(h("input", {
-                "onUpdate:modelValue": i[3] || (i[3] = (l) => C.value.name = l),
+                "onUpdate:modelValue": i[3] || (i[3] = (c) => C.value.name = c),
                 placeholder: "请输入标签名称",
                 class: "modal-input",
                 autofocus: ""
@@ -1277,13 +1314,13 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
                 }, [
                   ft(h("input", {
                     type: "color",
-                    "onUpdate:modelValue": i[4] || (i[4] = (l) => C.value.color = l),
+                    "onUpdate:modelValue": i[4] || (i[4] = (c) => C.value.color = c),
                     class: "modal-color-picker"
                   }, null, 512), [
                     [mt, C.value.color]
                   ])
                 ], 4),
-                h("span", ps, z(C.value.color), 1)
+                h("span", ps, L(C.value.color), 1)
               ])
             ])
           ]),
@@ -1299,16 +1336,16 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
             }, "确认", 8, xs)
           ])
         ])
-      ])) : B("", !0)
+      ])) : R("", !0)
     ], 2));
   }
-}), bs = /* @__PURE__ */ rt(ws, [["__scopeId", "data-v-914fe07d"]]), Cs = {
+}), bs = /* @__PURE__ */ rt(ws, [["__scopeId", "data-v-08cbbaca"]]), Cs = {
   class: "thumbnail-wrapper",
   ref: "wrapper"
-}, _s = ["src", "alt"], ks = ["viewBox", "preserveAspectRatio"], Is = ["x", "y", "width", "height", "stroke", "stroke-width"], As = ["points", "stroke", "stroke-width"], Ss = ["transform"], Ms = ["x", "y", "width", "height", "stroke", "stroke-width"], Ts = { key: 3 }, Ds = ["cx", "cy", "r", "fill", "stroke-width"], Ps = ["x", "y", "width", "height", "fill"], zs = ["x", "y", "fill", "font-size", "font-weight", "text-anchor", "dominant-baseline"], $s = {
+}, _s = ["src", "alt"], ks = ["viewBox", "preserveAspectRatio"], Is = ["x", "y", "width", "height", "stroke", "stroke-width"], As = ["points", "stroke", "stroke-width"], Ss = ["transform"], Ms = ["x", "y", "width", "height", "stroke", "stroke-width"], Ts = { key: 3 }, Ds = ["cx", "cy", "r", "fill", "stroke-width"], Ps = { key: 4 }, Ls = ["x", "y", "height"], zs = {
   key: 1,
   class: "loading-placeholder"
-}, Ls = /* @__PURE__ */ ct({
+}, $s = /* @__PURE__ */ ct({
   __name: "AnnotationThumbnail",
   props: {
     src: {},
@@ -1319,21 +1356,21 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
     strokeWidth: {},
     fontSize: {}
   },
-  setup(x) {
-    const t = x, n = M(null), e = M(!1), a = M(0), o = M(0), c = () => {
-      n.value && (a.value = n.value.naturalWidth, o.value = n.value.naturalHeight, e.value = !0);
-    }, g = V(() => t.fit === "contain" ? "xMidYMid meet" : "xMidYMid slice"), u = V(() => t.strokeWidth ?? 10), r = V(() => t.fontSize ?? 30), k = (C) => {
+  setup(y) {
+    const t = y, n = M(null), e = M(!1), l = M(0), o = M(0), a = () => {
+      n.value && (l.value = n.value.naturalWidth, o.value = n.value.naturalHeight, e.value = !0);
+    }, g = O(() => t.fit === "contain" ? "xMidYMid meet" : "xMidYMid slice"), u = O(() => t.strokeWidth ?? 10), r = O(() => t.fontSize ?? 30), A = (C) => {
       var S;
       if ((S = C.style) != null && S.strokeColor) return C.style.strokeColor;
       if (t.labels) {
-        const p = t.labels.find((H) => H.name === C.label);
-        if (p) return p.color;
+        const x = t.labels.find((H) => H.name === C.label);
+        if (x) return x.color;
       }
       return "#FF0000";
     }, w = (C) => {
-      const S = C.coordinates, p = Math.min(S.x1, S.x2), H = Math.min(S.y1, S.y2), O = Math.abs(S.x1 - S.x2), G = Math.abs(S.y1 - S.y2);
-      return { x: p, y: H, width: O, height: G };
-    }, D = (C) => C.coordinates.points.map((p) => `${p.x},${p.y}`).join(" "), _ = (C) => {
+      const S = C.coordinates, x = Math.min(S.x1, S.x2), H = Math.min(S.y1, S.y2), V = Math.abs(S.x1 - S.x2), G = Math.abs(S.y1 - S.y2);
+      return { x, y: H, width: V, height: G };
+    }, D = (C) => C.coordinates.points.map((x) => `${x.x},${x.y}`).join(" "), _ = (C) => {
       if (C.type === "rectangle") {
         const S = w(C);
         return { x: S.x, y: S.y - 5 };
@@ -1350,97 +1387,101 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
           return { x: C.coordinates.x, y: C.coordinates.y };
       }
       return { x: 0, y: 0 };
-    }, $ = (C) => {
-      const { x: S, y: p, angle: H } = C.coordinates, O = H * 180 / Math.PI;
-      return `translate(${S}, ${p}) rotate(${O})`;
-    }, q = (C) => ({ x: C.coordinates.x, y: C.coordinates.y });
+    }, z = (C) => {
+      const { x: S, y: x, angle: H } = C.coordinates, V = H * 180 / Math.PI;
+      return `translate(${S}, ${x}) rotate(${V})`;
+    }, X = (C) => ({ x: C.coordinates.x, y: C.coordinates.y });
     return (C, S) => (v(), m("div", Cs, [
       h("img", {
         ref_key: "img",
         ref: n,
-        src: x.src,
+        src: y.src,
         class: "thumbnail-image",
-        style: U({ objectFit: x.fit }),
-        onLoad: c,
-        alt: x.alt
+        style: U({ objectFit: y.fit }),
+        onLoad: a,
+        alt: y.alt
       }, null, 44, _s),
       e.value ? (v(), m("svg", {
         key: 0,
         class: "annotation-overlay",
-        viewBox: `0 0 ${a.value} ${o.value}`,
+        viewBox: `0 0 ${l.value} ${o.value}`,
         preserveAspectRatio: g.value
       }, [
-        (v(!0), m(N, null, J(x.annotations, (p) => (v(), m(N, {
-          key: p.id
+        (v(!0), m(W, null, J(y.annotations, (x) => (v(), m(W, {
+          key: x.id
         }, [
-          p.type === "rectangle" ? (v(), m("rect", {
+          x.type === "rectangle" ? (v(), m("rect", {
             key: 0,
-            x: w(p).x,
-            y: w(p).y,
-            width: w(p).width,
-            height: w(p).height,
-            stroke: k(p),
+            x: w(x).x,
+            y: w(x).y,
+            width: w(x).width,
+            height: w(x).height,
+            stroke: A(x),
             "stroke-width": u.value,
             fill: "transparent"
-          }, null, 8, Is)) : p.type === "polygon" ? (v(), m("polygon", {
+          }, null, 8, Is)) : x.type === "polygon" ? (v(), m("polygon", {
             key: 1,
-            points: D(p),
-            stroke: k(p),
+            points: D(x),
+            stroke: A(x),
             "stroke-width": u.value,
             fill: "transparent"
-          }, null, 8, As)) : p.type === "rotatedRect" ? (v(), m("g", {
+          }, null, 8, As)) : x.type === "rotatedRect" ? (v(), m("g", {
             key: 2,
-            transform: $(p)
+            transform: z(x)
           }, [
             h("rect", {
-              x: -p.coordinates.width / 2,
-              y: -p.coordinates.height / 2,
-              width: p.coordinates.width,
-              height: p.coordinates.height,
-              stroke: k(p),
+              x: -x.coordinates.width / 2,
+              y: -x.coordinates.height / 2,
+              width: x.coordinates.width,
+              height: x.coordinates.height,
+              stroke: A(x),
               "stroke-width": u.value,
               fill: "transparent"
             }, null, 8, Ms)
-          ], 8, Ss)) : p.type === "point" ? (v(), m("g", Ts, [
-            (v(!0), m(N, null, J(p.coordinates.points, (H, O) => (v(), m("circle", {
-              key: O,
+          ], 8, Ss)) : x.type === "point" ? (v(), m("g", Ts, [
+            (v(!0), m(W, null, J(x.coordinates.points, (H, V) => (v(), m("circle", {
+              key: V,
               cx: H.x,
               cy: H.y,
               r: u.value * 1.5,
-              fill: k(p),
+              fill: A(x),
               stroke: "white",
               "stroke-width": u.value * 0.5
             }, null, 8, Ds))), 128))
-          ])) : p.type === "category" ? (v(), m("rect", {
-            key: 4,
-            x: q(p).x - (p.label || "").length * r.value * 0.6 / 2 - 8,
-            y: q(p).y - r.value / 2 - 4,
-            width: (p.label || "").length * r.value * 0.6 + 16,
-            height: r.value + 8,
-            rx: "6",
-            ry: "6",
-            fill: k(p),
-            "fill-opacity": "0.85"
-          }, null, 8, Ps)) : B("", !0),
-          p.label ? (v(), m("text", {
-            key: 5,
-            x: _(p).x,
-            y: _(p).y,
-            fill: p.type === "category" ? "#ffffff" : k(p),
-            "font-size": r.value,
-            "font-weight": p.type === "category" ? "normal" : "bold",
-            "text-anchor": p.type === "category" ? "middle" : "start",
-            "dominant-baseline": p.type === "category" ? "middle" : "auto",
-            class: X({ "anno-label": p.type !== "category" })
-          }, z(p.label), 11, zs)) : B("", !0)
+          ])) : R("", !0),
+          x.label ? (v(), m("g", Ps, [
+            (v(), m("foreignObject", {
+              x: x.type === "category" ? X(x).x - 100 : _(x).x,
+              y: x.type === "category" ? X(x).y - r.value - 8 : _(x).y - r.value - 8,
+              width: "200",
+              height: r.value + 16,
+              style: { overflow: "visible" }
+            }, [
+              h("div", {
+                style: U({
+                  display: "inline-flex",
+                  alignItems: "center",
+                  justifyContent: x.type === "category" ? "center" : "flex-start",
+                  backgroundColor: `${A(x)}cc`,
+                  color: "#ffffff",
+                  fontSize: `${r.value}px`,
+                  padding: "4px 8px",
+                  borderRadius: "4px",
+                  whiteSpace: "nowrap",
+                  lineHeight: 1,
+                  transform: x.type === "category" ? "translateX(calc(100px - 50%))" : "none"
+                })
+              }, L(x.label), 5)
+            ], 8, Ls))
+          ])) : R("", !0)
         ], 64))), 128))
-      ], 8, ks)) : (v(), m("div", $s, "Loading..."))
+      ], 8, ks)) : (v(), m("div", zs, "Loading..."))
     ], 512));
   }
-}), Bs = /* @__PURE__ */ rt(Ls, [["__scopeId", "data-v-159a7956"]]), Rs = {
+}), Rs = /* @__PURE__ */ rt($s, [["__scopeId", "data-v-46e27181"]]), Bs = {
   key: 0,
   class: "gallery-view"
-}, Hs = { class: "gallery-layout" }, Es = { class: "gallery-sidebar" }, Us = { class: "label-stats-table" }, Vs = { class: "label-cover-wrapper" }, Os = ["src"], Fs = { class: "gallery-content" }, Ns = ["onClick"], Ws = { class: "thumbnail-wrapper" }, Gs = { class: "img-meta" }, Ys = { class: "img-index" }, Js = { class: "anno-count" }, js = {
+}, Hs = { class: "gallery-layout" }, Es = { class: "gallery-sidebar" }, Us = { class: "label-stats-table" }, Os = { class: "label-cover-wrapper" }, Vs = ["src"], Fs = { class: "gallery-content" }, Ws = ["onClick"], Ns = { class: "thumbnail-wrapper" }, Gs = { class: "img-meta" }, Ys = { class: "img-index" }, Js = { class: "anno-count" }, js = {
   key: 0,
   class: "bottom-bar"
 }, Xs = {
@@ -1454,113 +1495,114 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
     actionBar: {},
     clickToEnterEditor: { type: Boolean },
     thumbStrokeWidth: {},
-    thumbFontSize: {}
+    thumbFontSize: {},
+    readOnly: { type: Boolean }
   },
   emits: ["export", "update:images", "imageClick", "update:labels", "pageChange"],
-  setup(x, { expose: t, emit: n }) {
-    const e = x, a = n, o = M("gallery"), c = M([]), g = M([]), u = M(0), r = M(null), k = M(null), w = M(null), D = V(() => {
-      var y, b;
-      return ((b = (y = e.actionBar) == null ? void 0 : y.annotateButton) == null ? void 0 : b.show) === !0;
-    }), _ = V(() => {
-      var y, b;
-      return ((b = (y = e.actionBar) == null ? void 0 : y.exportButton) == null ? void 0 : b.show) === !0;
-    }), $ = V(() => D.value || _.value), q = V(() => {
-      var y, b;
-      return ((b = (y = e.actionBar) == null ? void 0 : y.annotateButton) == null ? void 0 : b.text) || "手动标注";
-    }), C = V(() => {
-      var y, b;
-      return ((b = (y = e.actionBar) == null ? void 0 : y.exportButton) == null ? void 0 : b.text) || "导出";
-    }), S = V(() => e.clickToEnterEditor !== !1), p = V(() => {
-      const y = {};
-      g.value.forEach((I) => {
-        y[I.name] = { count: 0, cover: "" };
+  setup(y, { expose: t, emit: n }) {
+    const e = y, l = n, o = M("gallery"), a = M([]), g = M([]), u = M(0), r = M(null), A = M(null), w = M(null), D = O(() => {
+      var p, b;
+      return ((b = (p = e.actionBar) == null ? void 0 : p.annotateButton) == null ? void 0 : b.show) === !0;
+    }), _ = O(() => {
+      var p, b;
+      return ((b = (p = e.actionBar) == null ? void 0 : p.exportButton) == null ? void 0 : b.show) === !0;
+    }), z = O(() => D.value || _.value), X = O(() => {
+      var p, b;
+      return ((b = (p = e.actionBar) == null ? void 0 : p.annotateButton) == null ? void 0 : b.text) || "手动标注";
+    }), C = O(() => {
+      var p, b;
+      return ((b = (p = e.actionBar) == null ? void 0 : p.exportButton) == null ? void 0 : b.text) || "导出";
+    }), S = O(() => e.clickToEnterEditor !== !1), x = O(() => {
+      const p = {};
+      g.value.forEach((k) => {
+        p[k.name] = { count: 0, cover: "" };
       });
       let b = 0;
-      return c.value.forEach((I) => {
-        I.annotations && I.annotations.forEach((F) => {
-          var W;
-          const E = F.label || (F.labelId ? (W = g.value.find((Y) => Y.id === F.labelId)) == null ? void 0 : W.name : null);
-          E && y[E] && (y[E].count++, b++, y[E].cover || (y[E].cover = I.imageUrl));
+      return a.value.forEach((k) => {
+        k.annotations && k.annotations.forEach((F) => {
+          var N;
+          const E = F.label || (F.labelId ? (N = g.value.find((Y) => Y.id === F.labelId)) == null ? void 0 : N.name : null);
+          E && p[E] && (p[E].count++, b++, p[E].cover || (p[E].cover = k.imageUrl));
         });
-      }), g.value.map((I) => {
-        var W, Y;
-        const F = ((W = y[I.name]) == null ? void 0 : W.count) || 0, E = b === 0 ? "0.00%" : (F / b * 100).toFixed(2) + "%";
+      }), g.value.map((k) => {
+        var N, Y;
+        const F = ((N = p[k.name]) == null ? void 0 : N.count) || 0, E = b === 0 ? "0.00%" : (F / b * 100).toFixed(2) + "%";
         return {
-          id: I.id,
-          name: I.name,
-          color: I.color,
+          id: k.id,
+          name: k.name,
+          color: k.color,
           count: F,
           percentage: E,
-          cover: ((Y = y[I.name]) == null ? void 0 : Y.cover) || ""
+          cover: ((Y = p[k.name]) == null ? void 0 : Y.cover) || ""
         };
       });
-    }), H = (y) => ({
-      color: y.color,
-      backgroundColor: y.color + "1A"
+    }), H = (p) => ({
+      color: p.color,
+      backgroundColor: p.color + "1A"
       // 1A represents ~10% opacity in hex
     });
     yt(() => {
-      a("pageChange", { nowPage: "listPage" });
-    }), K(() => e.images, (y) => {
-      c.value = JSON.parse(JSON.stringify(y));
-    }, { immediate: !0, deep: !0 }), K(() => e.labels, (y) => {
-      g.value = JSON.parse(JSON.stringify(y || []));
+      l("pageChange", { nowPage: "listPage" });
+    }), K(() => e.images, (p) => {
+      a.value = JSON.parse(JSON.stringify(p));
+    }, { immediate: !0, deep: !0 }), K(() => e.labels, (p) => {
+      g.value = JSON.parse(JSON.stringify(p || []));
     }, { immediate: !0, deep: !0 });
-    const O = (y) => {
-      u.value = y, o.value = "editor", a("pageChange", { nowPage: "editPage" }), w.value && (w.value.scrollTop = 0), at(() => {
-        k.value && (k.value.scrollTop = 0), window.scrollTo(0, 0), requestAnimationFrame(() => {
-          var b, I;
-          (I = (b = r.value) == null ? void 0 : b.jumpTo) == null || I.call(b, y);
+    const V = (p) => {
+      u.value = p, o.value = "editor", l("pageChange", { nowPage: "editPage" }), w.value && (w.value.scrollTop = 0), at(() => {
+        A.value && (A.value.scrollTop = 0), window.scrollTo(0, 0), requestAnimationFrame(() => {
+          var b, k;
+          (k = (b = r.value) == null ? void 0 : b.jumpTo) == null || k.call(b, p);
         });
       });
-    }, G = (y, b) => {
+    }, G = (p, b) => {
       if (S.value) {
-        O(y);
+        V(p);
         return;
       }
-      a("imageClick", { index: y, imageId: b.id, image: b });
-    }, Z = (y) => c.value.findIndex((b) => b.id === y);
+      l("imageClick", { index: p, imageId: b.id, image: b });
+    }, Z = (p) => a.value.findIndex((b) => b.id === p);
     t({
-      openImageById: (y) => {
-        const b = Z(y);
-        return b < 0 ? !1 : (O(b), !0);
+      openImageById: (p) => {
+        const b = Z(p);
+        return b < 0 ? !1 : (V(b), !0);
       },
-      triggerImageClickById: (y) => {
-        const b = Z(y);
+      triggerImageClickById: (p) => {
+        const b = Z(p);
         if (b < 0)
           return !1;
-        const I = c.value[b];
-        return I ? (a("imageClick", { index: b, imageId: I.id, image: I }), !0) : !1;
+        const k = a.value[b];
+        return k ? (l("imageClick", { index: b, imageId: k.id, image: k }), !0) : !1;
       },
       getFinalData: () => ({
-        images: JSON.parse(JSON.stringify(c.value)),
+        images: JSON.parse(JSON.stringify(a.value)),
         labels: JSON.parse(JSON.stringify(g.value))
       })
     });
     const it = () => {
       if (r.value && r.value.getCurrentAnnotation) {
-        const y = r.value.getCurrentAnnotation();
-        c.value[u.value] && (c.value[u.value].annotations = y.annotations);
+        const p = r.value.getCurrentAnnotation();
+        a.value[u.value] && (a.value[u.value].annotations = p.annotations);
       }
-      o.value = "gallery", a("pageChange", { nowPage: "listPage" });
+      o.value = "gallery", l("pageChange", { nowPage: "listPage" });
     }, nt = () => {
-      a("export", c.value);
-    }, ht = (y) => {
-      u.value = y.currentIndex, c.value[y.currentIndex] && (c.value[y.currentIndex].annotations = y.currentAnnotations);
-    }, Q = (y) => {
+      l("export", a.value);
+    }, ht = (p) => {
+      u.value = p.currentIndex, a.value[p.currentIndex] && (a.value[p.currentIndex].annotations = p.currentAnnotations);
+    }, Q = (p) => {
       if (r.value && r.value.getCurrentAnnotation) {
         const b = r.value.getCurrentAnnotation();
-        c.value[u.value] && (c.value[u.value].annotations = b.annotations, a("update:images", c.value));
+        a.value[u.value] && (a.value[u.value].annotations = b.annotations, l("update:images", a.value));
       }
-    }, j = (y) => {
-      g.value = JSON.parse(JSON.stringify(y || [])), a("update:labels", g.value);
+    }, j = (p) => {
+      g.value = JSON.parse(JSON.stringify(p || [])), l("update:labels", g.value);
     };
-    return (y, b) => (v(), m("div", {
+    return (p, b) => (v(), m("div", {
       ref_key: "batchRootRef",
-      ref: k,
+      ref: A,
       class: "batch-annotator"
     }, [
-      o.value === "gallery" ? (v(), m("div", Rs, [
+      o.value === "gallery" ? (v(), m("div", Bs, [
         h("div", Hs, [
           h("div", Es, [
             h("table", Us, [
@@ -1573,26 +1615,26 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
                 ])
               ], -1)),
               h("tbody", null, [
-                (v(!0), m(N, null, J(p.value, (I) => (v(), m("tr", {
-                  key: I.id,
-                  style: U(H(I))
+                (v(!0), m(W, null, J(x.value, (k) => (v(), m("tr", {
+                  key: k.id,
+                  style: U(H(k))
                 }, [
                   h("td", null, [
-                    h("div", Vs, [
-                      I.cover ? (v(), m("img", {
+                    h("div", Os, [
+                      k.cover ? (v(), m("img", {
                         key: 0,
-                        src: I.cover,
+                        src: k.cover,
                         class: "label-cover"
-                      }, null, 8, Os)) : (v(), m("div", {
+                      }, null, 8, Vs)) : (v(), m("div", {
                         key: 1,
                         class: "label-cover-empty",
-                        style: U({ backgroundColor: I.color })
+                        style: U({ backgroundColor: k.color })
                       }, null, 4))
                     ])
                   ]),
-                  h("td", null, z(I.name), 1),
-                  h("td", null, z(I.count), 1),
-                  h("td", null, z(I.percentage), 1)
+                  h("td", null, L(k.name), 1),
+                  h("td", null, L(k.count), 1),
+                  h("td", null, L(k.percentage), 1)
                 ], 4))), 128))
               ])
             ])
@@ -1603,15 +1645,15 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
               ref: w,
               class: "gallery-grid"
             }, [
-              (v(!0), m(N, null, J(c.value, (I, F) => (v(), m("div", {
+              (v(!0), m(W, null, J(a.value, (k, F) => (v(), m("div", {
                 key: F,
                 class: "gallery-item",
-                onClick: (E) => G(F, I)
+                onClick: (E) => G(F, k)
               }, [
-                h("div", Ws, [
-                  R(Bs, {
-                    src: I.imageUrl,
-                    annotations: I.annotations || [],
+                h("div", Ns, [
+                  B(Rs, {
+                    src: k.imageUrl,
+                    annotations: k.annotations || [],
                     labels: g.value,
                     fit: "cover",
                     strokeWidth: e.thumbStrokeWidth,
@@ -1619,31 +1661,31 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
                   }, null, 8, ["src", "annotations", "labels", "strokeWidth", "fontSize"])
                 ]),
                 h("div", Gs, [
-                  h("span", Ys, "#" + z(F + 1), 1),
-                  h("span", Js, z((I.annotations || []).length) + " 标注", 1)
+                  h("span", Ys, "#" + L(F + 1), 1),
+                  h("span", Js, L((k.annotations || []).length) + " 标注", 1)
                 ])
-              ], 8, Ns))), 128))
+              ], 8, Ws))), 128))
             ], 512)
           ])
         ]),
-        $.value ? (v(), m("div", js, [
+        z.value ? (v(), m("div", js, [
           D.value ? (v(), m("button", {
             key: 0,
             class: "action-btn primary",
-            onClick: b[0] || (b[0] = (I) => O(0))
+            onClick: b[0] || (b[0] = (k) => V(0))
           }, [
-            R(L, { name: "edit" }),
-            lt(" " + z(q.value), 1)
-          ])) : B("", !0),
+            B($, { name: "edit" }),
+            lt(" " + L(X.value), 1)
+          ])) : R("", !0),
           _.value ? (v(), m("button", {
             key: 1,
             class: "action-btn success",
             onClick: nt
           }, [
-            R(L, { name: "download" }),
-            lt(" " + z(C.value), 1)
-          ])) : B("", !0)
-        ])) : B("", !0)
+            B($, { name: "download" }),
+            lt(" " + L(C.value), 1)
+          ])) : R("", !0)
+        ])) : R("", !0)
       ])) : (v(), m("div", Xs, [
         h("div", qs, [
           h("div", Ks, [
@@ -1651,32 +1693,33 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
               class: "back-btn",
               onClick: it
             }, [
-              R(L, {
+              B($, {
                 name: "back",
                 class: "back-icon"
               }),
               b[2] || (b[2] = lt()),
               b[3] || (b[3] = h("span", { class: "back-text" }, "返回", -1))
             ]),
-            h("span", Zs, "正在标注: " + z(u.value + 1) + " / " + z(c.value.length), 1)
+            h("span", Zs, L(y.readOnly ? "正在查看" : "正在标注") + ": " + L(u.value + 1) + " / " + L(a.value.length), 1)
           ])
         ]),
         h("div", Qs, [
-          R(bs, {
+          B(bs, {
             ref_key: "annotatorRef",
             ref: r,
-            batchImages: c.value,
+            batchImages: a.value,
             labels: g.value,
+            readOnly: y.readOnly,
             annotationTypes: ["rectangle", "polygon", "point", "rotatedRect", "category"],
             onBatchChange: ht,
             onAnnotationChange: Q,
             onLabelChange: j
-          }, null, 8, ["batchImages", "labels"])
+          }, null, 8, ["batchImages", "labels", "readOnly"])
         ])
       ]))
     ], 512));
   }
-}), ii = /* @__PURE__ */ rt(ti, [["__scopeId", "data-v-5bb1d03b"]]);
+}), ii = /* @__PURE__ */ rt(ti, [["__scopeId", "data-v-448a060c"]]);
 export {
   ii as BatchAnnotator,
   bs as ImageAnnotator,