luo-image-annotator 0.0.13 → 0.0.15

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

@@ -1,72 +1,72 @@
-var Jt = Object.defineProperty;
-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, 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);
+var ae = Object.defineProperty;
+var le = (w, t, n) => t in w ? ae(w, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : w[t] = n;
+var T = (w, t, n) => le(w, 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 kt, 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 = (w, t) => Math.sqrt(Math.pow(w.x - t.x, 2) + Math.pow(w.y - t.y, 2)), re = (w, t) => {
+  let n = !1;
+  for (let e = 0, l = t.length - 1; e < t.length; l = e++) {
+    const o = t[e].x, c = t[e].y, g = t[l].x, u = t[l].y;
+    c > w.y != u > w.y && w.x < (g - o) * (w.y - c) / (u - c) + o && (n = !n);
   }
-  return i;
-}, 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 n;
+}, At = (w, t, n) => {
+  const e = n * (Math.PI / 180), l = Math.cos(e), o = Math.sin(e), c = w.x - t.x, g = w.y - t.y;
   return {
-    x: t.x + (r * o - a * c),
-    y: t.y + (r * c + a * o)
+    x: t.x + (c * l - g * o),
+    y: t.y + (c * o + g * l)
   };
 };
-class Zt {
+class he {
   constructor(t) {
-    S(this, "canvas");
-    S(this, "ctx");
-    S(this, "img");
-    S(this, "annotations", []);
+    T(this, "canvas");
+    T(this, "ctx");
+    T(this, "img");
+    T(this, "annotations", []);
     // 状态
-    S(this, "currentTool", null);
-    S(this, "interactionMode", "none");
-    S(this, "activeAnnotation", null);
-    S(this, "hoverAnnotation", null);
-    S(this, "isDrawing", !1);
-    S(this, "isDragging", !1);
-    S(this, "isPanning", !1);
+    T(this, "currentTool", null);
+    T(this, "interactionMode", "none");
+    T(this, "activeAnnotation", null);
+    T(this, "hoverAnnotation", null);
+    T(this, "isDrawing", !1);
+    T(this, "isDragging", !1);
+    T(this, "isPanning", !1);
     // 平移模式
-    S(this, "panStartPoint", null);
+    T(this, "panStartPoint", null);
     // 平移起点
-    S(this, "dragStartPoint", null);
-    S(this, "dragStartAnnotation", null);
+    T(this, "dragStartPoint", null);
+    T(this, "dragStartAnnotation", null);
     // 快照用于撤销/diff
-    S(this, "lastMouseMovePoint", null);
+    T(this, "lastMouseMovePoint", null);
     // 用于绘制辅助线
-    S(this, "isHoveringStartPoint", !1);
+    T(this, "isHoveringStartPoint", !1);
     // 多边形闭合吸附状态
     // 设置
-    S(this, "currentLabelColor", "#FF4081");
+    T(this, "currentLabelColor", "#FF4081");
     // 当前选中标签颜色
-    S(this, "visibleLabels", /* @__PURE__ */ new Set());
+    T(this, "visibleLabels", /* @__PURE__ */ new Set());
     // 可见标签集合 (如果为空则全部可见，或者由外部控制渲染列表)
     // 交互
-    S(this, "selectedHandleIndex", -1);
+    T(this, "selectedHandleIndex", -1);
     // -1: 主体, >=0: 顶点索引, -2: 旋转手柄
-    S(this, "hoverHandleIndex", -1);
+    T(this, "hoverHandleIndex", -1);
     // 视口
-    S(this, "scale", 1);
-    S(this, "offset", { x: 0, y: 0 });
-    S(this, "listeners", {});
-    S(this, "imageUrl", "");
+    T(this, "scale", 1);
+    T(this, "offset", { x: 0, y: 0 });
+    T(this, "listeners", {});
+    T(this, "imageUrl", "");
     this.canvas = t;
-    const i = t.getContext("2d");
-    if (!i) throw new Error("Could not get 2d context");
-    this.ctx = i, this.img = new Image(), this.img.crossOrigin = "Anonymous", this.img.onload = () => {
+    const n = t.getContext("2d");
+    if (!n) throw new Error("Could not get 2d context");
+    this.ctx = n, this.img = new Image(), this.img.crossOrigin = "Anonymous", this.img.onload = () => {
       this.fitImageToCanvas(), this.render();
     }, this.bindEvents();
   }
   // --- 公共 API ---
-  on(t, i) {
-    this.listeners[t] || (this.listeners[t] = []), this.listeners[t].push(i);
+  on(t, n) {
+    this.listeners[t] || (this.listeners[t] = []), this.listeners[t].push(n);
   }
-  emit(t, i) {
-    this.listeners[t] && this.listeners[t].forEach((e) => e(i));
+  emit(t, n) {
+    this.listeners[t] && this.listeners[t].forEach((e) => e(n));
   }
   loadImage(t) {
     this.imageUrl = t, this.img.src = t, this.activeAnnotation = null, this.isDrawing = !1;
@@ -89,47 +89,49 @@ class Zt {
   zoom(t) {
     const e = t > 0 ? this.scale * 1.1 : this.scale / 1.1;
     if (e < 0.1 || e > 10) return;
-    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();
+    const l = this.canvas.width / 2, o = this.canvas.height / 2, c = this.toImageCoords(l, o);
+    this.scale = e, this.offset.x = l - c.x * this.scale, this.offset.y = o - c.y * this.scale, this.clampViewportOffset(), this.render();
   }
   resize() {
     this.fitImageToCanvas(), this.render();
   }
   // --- 坐标系统 ---
-  toImageCoords(t, i) {
+  toImageCoords(t, n) {
     return {
       x: (t - this.offset.x) / this.scale,
-      y: (i - this.offset.y) / this.scale
+      y: (n - this.offset.y) / this.scale
     };
   }
-  toScreenCoords(t, i) {
+  toScreenCoords(t, n) {
     return {
       x: t * this.scale + this.offset.x,
-      y: i * this.scale + this.offset.y
+      y: n * this.scale + this.offset.y
     };
   }
   fitImageToCanvas() {
     const t = this.canvas.parentElement;
     if (t) {
       if (this.canvas.width = t.clientWidth, this.canvas.height = t.clientHeight, this.img.width === 0) return;
-      const i = this.canvas.width / this.img.width, e = this.canvas.height / this.img.height;
-      this.scale = Math.min(i, e), this.offset.x = (this.canvas.width - this.img.width * this.scale) / 2, this.offset.y = (this.canvas.height - this.img.height * this.scale) / 2, this.clampViewportOffset();
+      const n = this.canvas.width / this.img.width, e = this.canvas.height / this.img.height;
+      this.scale = Math.min(n, e), this.offset.x = (this.canvas.width - this.img.width * this.scale) / 2, this.offset.y = (this.canvas.height - this.img.height * this.scale) / 2, this.clampViewportOffset();
     }
   }
   clampViewportOffset() {
     if (this.img.width === 0 || this.img.height === 0) return;
-    const t = this.img.width * this.scale, i = this.img.height * this.scale;
-    if (t <= this.canvas.width)
-      this.offset.x = (this.canvas.width - t) / 2;
-    else {
-      const e = this.canvas.width - t, o = 0;
-      this.offset.x = Math.min(o, Math.max(e, this.offset.x));
+    const t = this.img.width * this.scale, n = this.img.height * this.scale, e = 100;
+    if (t <= this.canvas.width) {
+      const l = -t + e, o = this.canvas.width - e;
+      this.offset.x = Math.min(o, Math.max(l, this.offset.x));
+    } else {
+      const l = this.canvas.width - t - e, o = e;
+      this.offset.x = Math.min(o, Math.max(l, this.offset.x));
     }
-    if (i <= this.canvas.height)
-      this.offset.y = (this.canvas.height - i) / 2;
-    else {
-      const e = this.canvas.height - i, o = 0;
-      this.offset.y = Math.min(o, Math.max(e, this.offset.y));
+    if (n <= this.canvas.height) {
+      const l = -n + e, o = this.canvas.height - e;
+      this.offset.y = Math.min(o, Math.max(l, this.offset.y));
+    } else {
+      const l = this.canvas.height - n - e, o = e;
+      this.offset.y = Math.min(o, Math.max(l, this.offset.y));
     }
   }
   // --- 事件处理 ---
@@ -140,10 +142,10 @@ class Zt {
     this.interactionMode === "select" && (t.key === "Delete" || t.key === "Backspace") && this.activeAnnotation && this.deleteAnnotation(this.activeAnnotation.id);
   }
   deleteAnnotation(t) {
-    const i = this.annotations.findIndex((e) => e.id === t);
-    if (i > -1) {
-      const e = this.annotations[i];
-      this.annotations.splice(i, 1), this.activeAnnotation = null, this.emit("annotationChange", {
+    const n = this.annotations.findIndex((e) => e.id === t);
+    if (n > -1) {
+      const e = this.annotations[n];
+      this.annotations.splice(n, 1), this.activeAnnotation = null, this.emit("annotationChange", {
         action: "delete",
         changedItem: e,
         imageUrl: this.imageUrl
@@ -151,28 +153,28 @@ class Zt {
     }
   }
   handleMouseDown(t) {
-    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: o }, this.canvas.style.cursor = "grabbing";
+    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: l }, this.canvas.style.cursor = "grabbing";
       return;
     }
     if (this.interactionMode === "select" && this.activeAnnotation) {
-      const d = this.getHitHandle(e, o, this.activeAnnotation);
-      if (d !== -100) {
-        this.isDragging = !0, this.dragStartPoint = c, this.selectedHandleIndex = d, this.dragStartAnnotation = JSON.parse(JSON.stringify(this.activeAnnotation));
+      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 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();
+    const c = this.interactionMode === "select" ? this.getHitCategory(e, l) : null;
+    if (c) {
+      this.activeAnnotation = c, this.isDragging = !1, this.selectedHandleIndex = -1, this.emit("annotationChange", { action: "select", changedItem: c, imageUrl: this.imageUrl }), this.render();
       return;
     }
-    const a = this.getHitAnnotation(c);
+    const g = this.getHitAnnotation(o);
     if (this.interactionMode === "select") {
-      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();
+      if (g) {
+        if (!(this.visibleLabels.size > 0 && !this.visibleLabels.has(g.label))) {
+          this.activeAnnotation = g, this.isDragging = !0, this.dragStartPoint = o, this.selectedHandleIndex = -1, this.dragStartAnnotation = JSON.parse(JSON.stringify(g)), this.emit("annotationChange", { action: "select", changedItem: g, imageUrl: this.imageUrl }), this.render();
           return;
         }
       } else
@@ -181,43 +183,43 @@ 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(c, d.points[0]) < 20 / this.scale) {
+        const u = this.activeAnnotation.coordinates;
+        if (u.points.length > 2 && pt(o, u.points[0]) < 20 / this.scale) {
           this.finishDrawing();
           return;
         }
-        this.startDrawing(c);
+        this.startDrawing(o);
         return;
       }
       if (this.currentTool) {
         if (this.currentTool === "polygon" && !this.isDrawing) {
-          this.startDrawing(c);
+          this.startDrawing(o);
           return;
         }
-        this.startDrawing(c);
+        this.startDrawing(o);
       }
       return;
     }
     this.activeAnnotation = null, this.render();
   }
   handleMouseMove(t) {
-    const i = this.canvas.getBoundingClientRect(), e = t.clientX - i.left, o = t.clientY - i.top, c = this.toImageCoords(e, o);
+    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 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();
+      const c = e - this.panStartPoint.x, g = l - this.panStartPoint.y;
+      this.offset.x += c, this.offset.y += g, this.clampViewportOffset(), this.panStartPoint = { x: e, y: l }, this.render();
       return;
     }
-    if (this.lastMouseMovePoint = c, this.isDrawing) {
+    if (this.lastMouseMovePoint = o, this.isDrawing) {
       if (this.currentTool === "polygon" && this.activeAnnotation) {
-        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;
+        const c = this.activeAnnotation.coordinates;
+        if (c.points.length > 2) {
+          const g = c.points[0], u = pt(o, g);
+          this.isHoveringStartPoint = u < 20 / this.scale;
         } else
           this.isHoveringStartPoint = !1;
       }
-      this.updateDrawing(c);
-    } else this.isDragging && this.activeAnnotation && this.dragStartPoint ? this.updateDragging(c) : this.checkHover(e, o, c);
+      this.updateDrawing(o);
+    } else this.isDragging && this.activeAnnotation && this.dragStartPoint ? this.updateDragging(o) : this.checkHover(e, l, o);
     this.render();
   }
   handleMouseUp(t) {
@@ -240,17 +242,17 @@ class Zt {
   }
   // --- 绘制逻辑 ---
   // 辅助函数：将 hex 转换为 rgba
-  hexToRgba(t, i) {
+  hexToRgba(t, n) {
     if (!t.startsWith("#")) return t;
-    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})`;
+    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;
-    const i = Date.now().toString();
+    const n = Date.now().toString();
     if (this.hexToRgba(this.currentLabelColor, 0.2), this.currentLabelColor, this.currentTool === "rectangle")
       this.isDrawing = !0, this.dragStartPoint = t, this.activeAnnotation = {
-        id: i,
+        id: n,
         type: "rectangle",
         label: "",
         // 组件应填充此项
@@ -259,7 +261,7 @@ class Zt {
       };
     else if (this.currentTool === "point") {
       const e = {
-        id: i,
+        id: n,
         type: "point",
         label: "",
         coordinates: { points: [t] },
@@ -268,7 +270,7 @@ class Zt {
       this.annotations.push(e), this.emit("annotationChange", { action: "add", changedItem: e, imageUrl: this.imageUrl }), this.activeAnnotation = e;
     } else if (this.currentTool === "polygon")
       this.activeAnnotation && this.activeAnnotation.type === "polygon" && this.isDrawing ? this.activeAnnotation.coordinates.points.push(t) : (this.isDrawing = !0, this.activeAnnotation = {
-        id: i,
+        id: n,
         type: "polygon",
         label: "",
         coordinates: { points: [t] },
@@ -276,17 +278,16 @@ class Zt {
       });
     else if (this.currentTool === "category") {
       const e = {
-        id: i,
+        id: n,
         type: "category",
         label: "",
         // 将被填充
-        coordinates: null,
-        // 或位置？
+        coordinates: { x: t.x, y: t.y },
         style: { strokeColor: this.currentLabelColor }
       };
       this.annotations.push(e), this.emit("annotationChange", { action: "add", changedItem: e, imageUrl: this.imageUrl }), this.activeAnnotation = e;
     } else this.currentTool === "rotatedRect" && (this.isDrawing = !0, this.dragStartPoint = t, this.activeAnnotation = {
-      id: i,
+      id: n,
       type: "rotatedRect",
       label: "",
       coordinates: { x: t.x, y: t.y, width: 0, height: 0, angle: 0 },
@@ -296,11 +297,11 @@ class Zt {
   updateDrawing(t) {
     if (this.activeAnnotation)
       if (this.activeAnnotation.type === "rectangle" && this.dragStartPoint) {
-        const i = this.activeAnnotation.coordinates;
-        i.x2 = t.x, i.y2 = t.y;
+        const n = this.activeAnnotation.coordinates;
+        n.x2 = t.x, n.y2 = t.y;
       } else if (this.activeAnnotation.type === "rotatedRect" && this.dragStartPoint) {
-        const 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;
+        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() {
@@ -311,8 +312,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), 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 });
+        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;
@@ -333,89 +334,92 @@ class Zt {
   }
   updateDragging(t) {
     if (!this.activeAnnotation || !this.dragStartPoint || !this.dragStartAnnotation) return;
-    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);
+    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, i, e, o) {
+  moveAnnotation(t, n, e, l) {
     if (t.type === "rectangle") {
-      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;
+      const o = n.coordinates, c = t.coordinates;
+      c.x1 = o.x1 + e, c.x2 = o.x2 + e, c.y1 = o.y1 + l, c.y2 = o.y2 + l;
     } else if (t.type === "point") {
-      const c = i.coordinates, r = t.coordinates;
-      r.points = c.points.map((a) => ({ x: a.x + e, y: a.y + o }));
+      const o = n.coordinates, c = t.coordinates;
+      c.points = o.points.map((g) => ({ x: g.x + e, y: g.y + l }));
     } else if (t.type === "rotatedRect") {
-      const c = i.coordinates, r = t.coordinates;
-      r.x = c.x + e, r.y = c.y + o;
+      const o = n.coordinates, c = t.coordinates;
+      c.x = o.x + e, c.y = o.y + l;
     } else if (t.type === "polygon") {
-      const c = i.coordinates, r = t.coordinates;
-      r.points = c.points.map((a) => ({ x: a.x + e, y: a.y + o }));
+      const o = n.coordinates, c = t.coordinates;
+      c.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 + l);
     }
   }
-  resizeAnnotation(t, i, e, o) {
+  resizeAnnotation(t, n, e, l) {
     if (t.type === "rectangle") {
-      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);
+      const o = t.coordinates;
+      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 c = t.coordinates;
-      e >= 0 && e < c.points.length && (c.points[e] = o);
+      const o = t.coordinates;
+      e >= 0 && e < o.points.length && (o.points[e] = l);
     } else if (t.type === "point") {
-      const c = t.coordinates;
-      e >= 0 && e < c.points.length && (c.points[e] = o);
+      const o = t.coordinates;
+      e >= 0 && e < o.points.length && (o.points[e] = l);
     } else if (t.type === "rotatedRect") {
-      const c = t.coordinates;
+      const o = t.coordinates;
       if (e === -2) {
-        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;
+        const c = o.x, g = o.y, u = l.x - c, r = l.y - g;
+        let k = Math.atan2(r, u) * 180 / Math.PI;
+        k += 90, o.angle = k;
       } else {
-        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);
+        const c = o.angle * Math.PI / 180, g = Math.cos(-c), u = Math.sin(-c), r = l.x - o.x, k = l.y - o.y, x = r * g - k * u, D = r * u + k * g;
+        (e === 0 || e === 3) && (o.width / 2, o.width = Math.abs(x) * 2), (e === 1 || e === 2) && (o.width = Math.abs(x) * 2), (e === 0 || e === 1) && (o.height = Math.abs(D) * 2), (e === 2 || e === 3) && (o.height = Math.abs(D) * 2);
       }
     }
   }
   // --- 命中测试和渲染辅助函数 ---
   getHitAnnotation(t) {
-    for (let i = this.annotations.length - 1; i >= 0; i--) {
-      const e = this.annotations[i];
+    for (let n = this.annotations.length - 1; n >= 0; n--) {
+      const e = this.annotations[n];
       if (this.isPointInAnnotation(t, e))
         return e;
     }
     return null;
   }
-  isPointInAnnotation(t, i) {
-    if (i.type === "rectangle") {
-      const e = i.coordinates;
+  isPointInAnnotation(t, n) {
+    if (n.type === "rectangle") {
+      const e = n.coordinates;
       return t.x >= e.x1 && t.x <= e.x2 && t.y >= e.y1 && t.y <= e.y2;
-    } else if (i.type === "polygon") {
-      const e = i.coordinates;
-      return Kt(t, e.points);
-    } else if (i.type === "rotatedRect") {
-      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((o) => ct(t, o) < 10 / this.scale);
+    } else if (n.type === "polygon") {
+      const e = n.coordinates;
+      return re(t, e.points);
+    } else if (n.type === "rotatedRect") {
+      const e = n.coordinates, l = At(t, { x: e.x, y: e.y }, -e.angle), o = e.width / 2, c = e.height / 2;
+      return l.x >= e.x - o && l.x <= e.x + o && l.y >= e.y - c && l.y <= e.y + c;
+    } else if (n.type === "point")
+      return n.coordinates.points.some((l) => pt(t, l) < 10 / this.scale);
     return !1;
   }
-  getHitHandle(t, i, e) {
-    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;
+  getHitHandle(t, n, e) {
+    const l = this.getAnnotationHandles(e), o = 6;
+    for (let c = 0; c < l.length; c++) {
+      const g = l[c], 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 -100;
   }
   getAnnotationHandles(t) {
     if (t.type === "rectangle") {
-      const i = t.coordinates;
+      const n = t.coordinates;
       return [
-        { x: i.x1, y: i.y1 },
+        { x: n.x1, y: n.y1 },
         // 左上
-        { x: i.x2, y: i.y1 },
+        { x: n.x2, y: n.y1 },
         // 右上
-        { x: i.x2, y: i.y2 },
+        { x: n.x2, y: n.y2 },
         // 右下
-        { x: i.x1, y: i.y2 }
+        { x: n.x1, y: n.y2 }
         // 左下
       ];
     } else {
@@ -424,24 +428,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 }, 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));
+        const n = t.coordinates, e = { x: n.x, y: n.y }, l = n.width / 2, o = n.height / 2, c = { 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 }, k = { x: n.x, y: n.y - o - 20 / this.scale };
+        return [c, g, u, r, k].map((x) => At(x, e, n.angle));
       }
     }
     return [];
   }
-  checkHover(t, i, e) {
-    const o = this.getHitCategory(t, i);
-    if (o) {
-      this.canvas.style.cursor = "pointer", this.hoverAnnotation = o;
+  checkHover(t, n, e) {
+    const l = this.getHitCategory(t, n);
+    if (l) {
+      this.canvas.style.cursor = "pointer", this.hoverAnnotation = l;
       return;
     }
-    if (this.activeAnnotation && this.getHitHandle(t, i, this.activeAnnotation) !== -100) {
+    if (this.activeAnnotation && this.getHitHandle(t, n, this.activeAnnotation) !== -100) {
       this.canvas.style.cursor = "pointer";
       return;
     }
-    const c = this.getHitAnnotation(e);
-    c ? (this.canvas.style.cursor = "move", this.hoverAnnotation = c) : (this.canvas.style.cursor = "default", this.hoverAnnotation = null);
+    const o = this.getHitAnnotation(e);
+    o ? (this.canvas.style.cursor = "move", this.hoverAnnotation = o) : (this.canvas.style.cursor = "default", this.hoverAnnotation = null);
   }
   render() {
     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height), this.img.complete && this.img.width > 0 && this.ctx.drawImage(this.img, this.offset.x, this.offset.y, this.img.width * this.scale, this.img.height * this.scale), this.annotations.forEach((t) => {
@@ -449,172 +453,153 @@ class Zt {
     }), this.activeAnnotation && this.drawItem(this.activeAnnotation, !0), this.renderCategories();
   }
   renderCategories() {
-    const t = this.annotations.filter((d) => d.type === "category");
+    const t = this.annotations.filter((e) => e.type === "category");
     if (t.length === 0) return;
-    this.ctx.save(), this.ctx.font = "14px sans-serif", this.ctx.textBaseline = "top";
-    let i = 10;
-    const e = 10, o = 8, c = 4, r = 24, a = 8;
-    t.forEach((d) => {
-      const u = d.label || "Unlabeled", w = this.ctx.measureText(u).width + o * 2, m = this.activeAnnotation === d, _ = this.hoverAnnotation === d;
-      this.ctx.fillStyle = m ? "#E3F2FD" : _ ? "#F5F5F5" : "rgba(255, 255, 255, 0.9)", this.ctx.strokeStyle = m ? "#2196F3" : "#666", this.ctx.lineWidth = m ? 2 : 1, this.ctx.beginPath(), this.ctx.rect(i, e, w, r), this.ctx.fill(), this.ctx.stroke(), this.ctx.fillStyle = m ? "#1976D2" : "#333", this.ctx.fillText(u, i + o, e + c), i += w + a;
+    this.ctx.save(), this.ctx.font = "14px sans-serif", this.ctx.textBaseline = "middle", this.ctx.textAlign = "center";
+    const n = 12;
+    t.forEach((e) => {
+      var _;
+      const l = e.label || "未命名分类", o = this.ctx.measureText(l).width + n * 2, c = 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, x = 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, x, 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, x - 3, o + 6, c + 6), this.ctx.restore()), this.ctx.fillStyle = "#ffffff", this.ctx.fillText(l, r.x, r.y);
     }), this.ctx.restore();
   }
-  getHitCategory(t, i) {
-    const e = this.annotations.filter((w) => w.type === "category");
+  getHitCategory(t, n) {
+    const e = this.annotations.filter((g) => g.type === "category");
     if (e.length === 0) return null;
     this.ctx.save(), this.ctx.font = "14px sans-serif";
-    let 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 + r * 2;
-      if (t >= o && t <= o + _ && i >= c && i <= c + a) {
-        u = w;
+    const l = 12, o = 28;
+    let c = null;
+    for (let g = e.length - 1; g >= 0; g--) {
+      const u = e[g], r = u.label || "未命名分类", k = this.ctx.measureText(r).width + l * 2;
+      let x = { x: 20, y: 20 };
+      u.coordinates && typeof u.coordinates.x == "number" && typeof u.coordinates.y == "number" && (x = this.toScreenCoords(u.coordinates.x, u.coordinates.y));
+      const D = x.x - k / 2, _ = x.y - o / 2;
+      if (t >= D && t <= D + k && n >= _ && n <= _ + o) {
+        c = u;
         break;
       }
-      o += _ + d;
     }
-    return this.ctx.restore(), u;
+    return this.ctx.restore(), c;
   }
-  drawItem(t, i) {
-    var c;
-    if (this.visibleLabels.size > 0 && !this.visibleLabels.has(t.label) && !i)
+  drawItem(t, n) {
+    var o;
+    if (this.visibleLabels.size > 0 && !this.visibleLabels.has(t.label) && !n)
       return;
     this.ctx.save();
-    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));
+    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 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), x = Math.abs(g.x - u.x), D = Math.abs(g.y - u.y);
+      this.ctx.strokeRect(r, k, x, D), n && this.drawHandles(this.getAnnotationHandles(t));
     } else if (t.type === "polygon") {
-      const r = t.coordinates;
-      if (r.points.length === 0) {
+      const c = t.coordinates;
+      if (c.points.length === 0) {
         this.ctx.restore();
         return;
       }
       this.ctx.beginPath();
-      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);
+      const g = this.toScreenCoords(c.points[0].x, c.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);
+        this.ctx.lineTo(r.x, r.y);
       }
       if (!this.isDrawing || t !== this.activeAnnotation)
         this.ctx.closePath();
       else if (this.lastMouseMovePoint) {
-        let d = this.lastMouseMovePoint;
-        if (this.isHoveringStartPoint && r.points.length > 0) {
-          d = r.points[0];
-          const w = this.toScreenCoords(r.points[0].x, r.points[0].y);
-          this.ctx.save(), this.ctx.beginPath(), this.ctx.arc(w.x, w.y, 10, 0, Math.PI * 2), this.ctx.fillStyle = "rgba(255, 215, 0, 0.6)", this.ctx.strokeStyle = "#FFFFFF", this.ctx.lineWidth = 2, this.ctx.fill(), this.ctx.stroke(), this.ctx.restore();
+        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();
         }
-        const u = this.toScreenCoords(d.x, d.y);
-        this.ctx.lineTo(u.x, u.y);
+        const r = this.toScreenCoords(u.x, u.y);
+        this.ctx.lineTo(r.x, r.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));
+      this.ctx.stroke(), n && this.drawHandles(this.getAnnotationHandles(t));
     } else if (t.type === "rotatedRect") {
-      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();
+      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));
+    } 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();
   }
   drawHandles(t) {
-    this.ctx.fillStyle = "#FFFFFF", this.ctx.strokeStyle = "#000000", this.ctx.lineWidth = 1, t.forEach((i) => {
-      const e = this.toScreenCoords(i.x, i.y);
+    this.ctx.fillStyle = "#FFFFFF", this.ctx.strokeStyle = "#000000", this.ctx.lineWidth = 1, t.forEach((n) => {
+      const e = this.toScreenCoords(n.x, n.y);
       this.ctx.fillRect(e.x - 4, e.y - 4, 8, 8), this.ctx.strokeRect(e.x - 4, e.y - 4, 8, 8);
     });
   }
 }
-const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
-  <path d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z m0-320a64 64 0 1 0 0-128 64 64 0 0 0 0 128z m0 64a128 128 0 1 1 0-256 128 128 0 0 1 0 256z" fill="currentColor"/>\r
-</svg>`, te = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
-  <path d="M609.408 149.376l-277.76 277.76a96 96 0 0 0 0 135.68l277.76 277.76a32 32 0 1 0 45.248-45.248L376.96 512l277.76-277.76a32 32 0 0 0-45.248-45.248z" fill="currentColor"/>\r
-</svg>`, ee = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
-  <path d="M704 192h160v160h-160z m-64-64v288h288V128H640zM160 672h160v160H160z m-64-64v288h288V608H96z m256-320h320v64H352z" fill="currentColor"/>\r
-</svg>`, ne = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
-  <path d="M256 256h512v512H256z m-64-64v640h640V192H192z" fill="currentColor"/>\r
-</svg>`, se = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
-  <path d="M160 256h704a32 32 0 1 1 0 64h-64v608a32 32 0 0 1-32 32H256a32 32 0 0 1-32-32V320h-64a32 32 0 1 1 0-64zm128 64v576h448V320H288z m128 0v512a32 32 0 1 1-64 0V320a32 32 0 1 1 64 0zm256 0v512a32 32 0 1 1-64 0V320a32 32 0 1 1 64 0zM352 128h320a32 32 0 0 1 32 32v64H320v-64a32 32 0 0 1 32-32z" fill="currentColor"/>\r
-</svg>`, ie = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
-  <path d="M512 666.56l-186.88-186.88a32 32 0 0 0-45.248 45.248l209.536 209.536a96 96 0 0 0 135.68 0l209.536-209.536a32 32 0 1 0-45.248-45.248L544 666.56V128a32 32 0 0 0-64 0v538.56zM192 832h640a32 32 0 1 1 0 64H192a32 32 0 1 1 0-64z" fill="currentColor"/>\r
-</svg>`, oe = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
-  <path d="M832 512a32 32 0 1 1 64 0v352a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h352a32 32 0 0 1 0 64H192v640h640V512z m-144-320l-480 480v160h160l480-480-160-160z m-114.56 480H256v-117.76L653.44 236.8l117.76 117.76L573.44 672z m208-208l-117.76-117.76 66.56-66.56a32 32 0 0 1 45.248 0l72.512 72.512a32 32 0 0 1 0 45.248l-66.56 66.56z" fill="currentColor"/>\r
-</svg>`, ae = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
-  <path d="M940.48 876.16L148.16 83.84a32 32 0 1 0-45.12 45.12L236.8 262.4C163.52 337.28 107.52 429.12 82.56 528.96a32 32 0 0 0 0 20.48C144.384 727.68 314.88 840.96 512 840.96c103.04 0 199.36-30.72 283.52-83.84l99.84 99.84a32 32 0 1 0 45.12-45.12zM512 776.96c-176.64 0-333.44-98.56-402.56-248.96 25.6-56.32 63.36-107.52 110.08-151.04L364.8 522.24a128 128 0 0 0 147.2 147.2l123.52 123.52A445.44 445.44 0 0 1 512 776.96z m373.12-32.64l-64-64C857.6 627.84 879.616 572.16 879.616 512c0-176.64-156.8-328.96-367.616-328.96-58.24 0-113.6 11.52-164.48 32.64l-55.68-55.68C346.88 136.96 427.52 119.04 512 119.04c229.76 0 425.216 142.08 493.44 346.24a32 32 0 0 1 0 20.48 450.56 450.56 0 0 1-120.32 258.56z m-309.12-309.12l-128-128A128 128 0 0 1 576 435.2z" fill="currentColor"/>\r
-</svg>`, le = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
-  <path d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 832a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm-48-384H320a32 32 0 0 1 0-64h144V304a32 32 0 1 1 64 0v144h144a32 32 0 1 1 0 64H528v144a32 32 0 1 1-64 0V512z" fill="currentColor"/>\r
-</svg>`, re = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
-  <path d="M224 448a32 32 0 0 0 9.536 22.592l416 416a32 32 0 0 0 45.248 0l226.24-226.24a32 32 0 0 0 0-45.248l-416-416A32 32 0 0 0 482.432 192H256a64 64 0 0 0-64 64v192z m64-192h160l384 384-160 160-384-384V256z m64 128a64 64 0 1 0 0-128 64 64 0 0 0 0 128z" fill="currentColor"/>\r
-</svg>`, ce = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
-  <path d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64zm0-704h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64zm0 352h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64z" fill="currentColor"/>\r
-</svg>`, he = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
-  <path d="M784.512 230.272v-50.56a32 32 0 1 1 64 0v149.056a32 32 0 0 1-32 32H667.52a32 32 0 1 1 0-64h92.992A320 320 0 1 0 524.8 833.152a320 320 0 0 0 320-320h64a384 384 0 0 1-384 384 384 384 0 0 1-384-384 384 384 0 0 1 643.712-282.88z" fill="currentColor"/>\r
-</svg>`, de = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
-  <path d="M340.864 149.376a32 32 0 0 0-45.248 45.248L573.44 512l-277.76 317.376a32 32 0 0 0 45.248 45.248l277.76-277.76a96 96 0 0 0 0-135.68L340.864 149.376z" fill="currentColor"/>\r
-</svg>`, ge = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
-  <path d="M512 192c229.76 0 425.216 142.08 493.44 346.24a32 32 0 0 1 0 20.48C937.216 762.88 741.76 904.96 512 904.96S86.784 762.88 18.56 558.72a32 32 0 0 1 0-20.48C86.784 334.08 282.24 192 512 192zm0 64c-197.12 0-367.616 120.32-428.16 296.32C144.384 727.68 314.88 840.96 512 840.96s367.616-113.28 428.16-288.64C879.616 376.32 709.12 256 512 256zm0 160a128 128 0 1 1 0 256 128 128 0 0 1 0-256zm0 64a64 64 0 1 0 0 128 64 64 0 0 0 0-128z" fill="currentColor"/>\r
-</svg>`, ue = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
-  <path d="M637.12 693.376l182.208 182.208a32 32 0 1 1-45.248 45.248L591.872 738.624a352 352 0 1 1 45.248-45.248z m-45.248-45.248A288 288 0 1 0 183.872 240.128a288 288 0 0 0 408 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__ */ tt({
+const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1775032114659" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21132" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 391.68c-66.56 0-120.32 54.187-120.32 120.32 0 66.56 53.76 120.32 120.32 120.32 66.133 0 120.32-53.76 120.32-120.32A120.747 120.747 0 0 0 512 391.68z" p-id="21133" fill="#515151"></path><path d="M512 113.493c-219.733 0-398.507 178.774-398.507 398.507S292.267 910.507 512 910.507 910.507 731.733 910.507 512 731.733 113.493 512 113.493z m0 720.214c-177.493 0-321.707-144.214-321.707-321.707S334.507 190.293 512 190.293 833.707 334.507 833.707 512 689.493 833.707 512 833.707z" p-id="21134" fill="#515151"></path></svg>', ge = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M15.7 4.3c.4.4.4 1 0 1.4L9.4 12l6.3 6.3c.4.4.4 1 0 1.4-.4.4-1 .4-1.4 0l-7-7c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0z"/></svg>', ue = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1775032015085" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16560" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M911.872 972.629333l-2.645333-1.621333-209.92-208.554667-91.306667 193.194667-147.029333-494.933333 486.4 179.968-177.834667 68.266666 201.472 200.362667a9.898667 9.898667 0 0 1 2.133333 4.608 10.069333 10.069333 0 0 1-1.024 4.778667l-2.389333 3.157333-47.786667 47.530667a9.813333 9.813333 0 0 1-4.522666 2.901333 12.544 12.544 0 0 1-2.56 0z m-657.066667-12.970666L0.256 501.248l97.109333-175.445333 64.256-115.456L254.805333 42.581333h510.208l259.328 466.858667h-100.608L714.325333 132.778667H305.322667l-204.8 368.384 204.8 368.725333H418.133333v90.026667z" fill="#515151" p-id="16561"></path></svg>', ve = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1775032973956" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6763" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M613.6 960H97.2c-17.7 0-32-14.3-32-32V98.5c0-17.7 14.3-32 32-32h829.5c17.7 0 32 14.3 32 32v518.2c0 17.7-14.3 32-32 32s-32-14.3-32-32V130.5H129.2V896h484.4c17.7 0 32 14.3 32 32s-14.3 32-32 32z" fill="#515151" p-id="6764"></path><path d="M711.3 694.9l120.3 46.9-100.7 80.7z" fill="#515151" p-id="6765"></path><path d="M707.6 882.1L671.3 645l223.6 87.1-187.3 150z m43.7-137.3l2.8 18 14.2-11.4-17-6.6z" fill="#515151" p-id="6766"></path><path d="M927 957.9c-8.2 0-16.4-3.1-22.6-9.4L723.2 767.2c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l181.2 181.2c12.5 12.5 12.5 32.8 0 45.3-6.3 6.3-14.5 9.5-22.7 9.5z" fill="#515151" p-id="6767"></path></svg>', fe = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M19 6h-4V5c0-1.1-.9-2-2-2h-2c-1.1 0-2 .9-2 2v1H5c-.6 0-1 .4-1 1s.4 1 1 1h14c.6 0 1-.4 1-1s-.4-1-1-1zM10 5h4v1h-4V5z"/><path fill="currentColor" d="M6 9v10c0 1.7 1.3 3 3 3h6c1.7 0 3-1.3 3-3V9H6zm4 9c0 .6-.4 1-1 1s-1-.4-1-1v-5c0-.6.4-1 1-1s1 .4 1 1v5zm4 0c0 .6-.4 1-1 1s-1-.4-1-1v-5c0-.6.4-1 1-1s1 .4 1 1v5z"/></svg>', me = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M19 15v4c0 1.1-.9 2-2 2H7c-1.1 0-2-.9-2-2v-4c0-.6.4-1 1-1s1 .4 1 1v4h10v-4c0-.6.4-1 1-1s1 .4 1 1zm-7.7 1.3c.2.2.4.3.7.3s.5-.1.7-.3l4.6-4.6c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0l-2.9 2.9V3c0-.6-.4-1-1-1s-1 .4-1 1v8.3l-2.9-2.9c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l4.6 4.6z"/></svg>', pe = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M3 17.2v4.3c0 .3.2.5.5.5h4.3c.1 0 .3-.1.4-.2l11.1-11.1-5.1-5.1L3.1 16.8c-.1.1-.1.3-.1.4zm18.8-10.9c.4-.4.4-1 0-1.4l-3.7-3.7c-.4-.4-1-.4-1.4 0l-2.3 2.3 5.1 5.1 2.3-2.3z"/></svg>', ye = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M18.7 4.3c.4.4.4 1 0 1.4L12.4 12l6.3 6.3c.4.4.4 1 0 1.4-.4.4-1 .4-1.4 0l-7-7c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0z"/><path fill="currentColor" d="M10.7 4.3c.4.4.4 1 0 1.4L4.4 12l6.3 6.3c.4.4.4 1 0 1.4-.4.4-1 .4-1.4 0l-7-7c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0z"/></svg>', we = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1775032412624" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3527" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M870.2976 144.0256l51.2 51.2-122.88 122.88a514.304 514.304 0 0 1 170.7264 193.8688C885.0432 679.04 711.8848 793.6 512 793.6c-56.832 0-111.488-9.2672-162.56-26.3424L197.4016 919.296l-51.2-51.2L870.2976 144.0256z m-127.1552 229.5296l-76.6208 76.6208a166.4 166.4 0 0 1-216.32 216.3712l-38.6048 38.5792c29.5168 6.9632 60.032 10.9312 91.1872 11.5712L512 716.8c150.6816 0 287.488-77.2096 366.464-200.3456l2.816-4.48-2.816-4.48a435.8144 435.8144 0 0 0-135.3216-133.9392zM512 230.4c49.664 0 97.664 7.0656 143.0528 20.2496l-63.8208 63.7696a436.4032 436.4032 0 0 0-70.016-7.1168L512 307.2a434.8928 434.8928 0 0 0-366.464 200.3456l-2.816 4.48 2.816 4.48a435.84 435.84 0 0 0 119.8848 123.776l-55.0912 55.04a514.2528 514.2528 0 0 1-155.648-183.296C138.9312 344.96 312.0896 230.4 512 230.4z m89.5488 284.8l-86.3744 86.2976 1.7408-0.0256a89.6 89.6 0 0 0 84.6336-86.272zM512 345.6a166.656 166.656 0 0 1 42.5728 5.504l-79.0272 79.0272a89.9328 89.9328 0 0 0-45.4144 45.4144l-79.0272 79.0272A166.4 166.4 0 0 1 512 345.6z" p-id="3528" fill="#515151"></path></svg>', xe = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M5.3 19.7c-.4-.4-.4-1 0-1.4l6.3-6.3-6.3-6.3c-.4-.4-.4-1 0-1.4.4-.4 1-.4 1.4 0l7 7c.4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0z"/><path fill="currentColor" d="M13.3 19.7c-.4-.4-.4-1 0-1.4l6.3-6.3-6.3-6.3c-.4-.4-.4-1 0-1.4.4-.4 1-.4 1.4 0l7 7c.4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0z"/></svg>', be = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1775031871732" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12257" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M174.63 78.98c0.03-12.61 16.41-19.91 25.81-11.5l328.72 293.98 318.27 284.63c10.51 9.4 0.4 26.75-14.25 24.46L435.7 608.43c-6.23-0.97-12.72 1.92-16.16 7.2L199.96 952.72c-8.09 12.42-27.76 8.34-27.72-5.76l1.17-426.97 1.22-441.01z" fill="#515151" p-id="12258"></path></svg>', Ce = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1775032210611" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23146" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M543.487882 0.00128a161.919393 161.919393 0 0 0-114.55957 47.359822L47.553742 428.991671a162.111392 162.111392 0 0 0 0 229.119141l318.270806 318.398806a161.983393 161.983393 0 0 0 229.119141 0l381.630569-381.694569A162.111392 162.111392 0 0 0 1023.99808 480.255479V161.920673A161.919393 161.919393 0 0 0 861.886688 0.00128H543.487882z m0 90.55966l318.462806 0.064a71.295733 71.295733 0 0 1 71.487732 71.295733v318.270806c0 18.943929-7.615971 37.119861-21.055921 50.559811l-381.56657 381.758568a71.423732 71.423732 0 0 1-101.055621 0L111.489502 594.111052a71.487732 71.487732 0 0 1 0-101.119621l381.566569-381.566569c13.37595-13.37595 31.551882-20.863922 50.431811-20.863922z m112.447578 124.159535a153.023426 153.023426 0 1 0 0 306.046852 153.023426 153.023426 0 0 0 0-306.046852z m57.727784 129.151515a62.463766 62.463766 0 1 1-115.455567 47.807821 62.463766 62.463766 0 0 1 115.455567-47.807821z" p-id="23147" fill="#515151"></path></svg>', _e = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1775096284335" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4580" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M308.377435 102.251961C318.982967 47.176334 372.449479 0 448.66303 0c39.496466 0 68.314257 20.040799 85.063685 46.07921 11.995223 18.577967 17.919693 39.935315 20.040799 60.341823 13.384913-4.388496 27.35496-6.582744 41.398147-6.655886 38.911333 0 68.021691 19.455666 85.72196 44.616378 16.822569 23.990446 23.551596 53.100804 23.551596 79.724347v29.988058c0.146283 98.960589 0.292566 197.921178 0.658274 296.954909-0.073142 13.165489 1.097124 26.47726 3.510797 39.569608 8.484426-7.533585 16.237436-15.213453 24.795004-23.69788l13.165488-13.019205c13.970046-13.604338 30.353765-28.598367 49.809432-41.178723 42.056422-27.208676 93.694394-39.642749 162.813209-22.600755 27.574384 6.802169 44.982086 25.380136 54.344211 44.543236 8.776992 18.285401 11.117524 38.545625 10.386108 56.392176-1.38969 33.864562-14.920887 75.26271-43.738679 101.447404l-1.755398 1.755398c-37.375359 36.424518-75.335851 72.263904-113.881477 107.518157-31.450889 28.964075-63.486912 57.050451-96.327491 84.478552-29.037217 24.063587-58.293858 46.51806-80.967755 58.952132A491.511574 491.511574 0 0 1 421.527495 1023.982446a45.567219 45.567219 0 0 1-46.810626-44.25067c0-24.795004 20.699074-44.835803 46.225493-44.762661a395.403507 395.403507 0 0 0 215.036314-64.072045 49.955715 49.955715 0 0 1 4.022788-2.340531c13.458055-7.167877 37.009651-24.502437 67.363417-49.590007 31.597173-26.47726 62.609212-53.612795 92.889836-81.552888a5027.973235 5027.973235 0 0 0 111.687228-105.470192l1.755399-1.755398 0.585133-0.511991 1.682257-1.535974a42.056422 42.056422 0 0 0 9.362125-15.140312c3.291372-8.118718 5.119912-16.749427 5.631903-25.453278a46.07921 46.07921 0 0 0-1.023982-12.580356c-39.715891-8.557568-62.536071-0.658274-81.479746 11.556374a234.126272 234.126272 0 0 0-35.473678 29.841774l-10.386108 10.239824c-9.800975 9.654692-20.845357 20.699074-31.96288 30.500049l-0.146283 0.146283c-19.016817 16.603144-42.787838 31.597173-70.435364 32.182306a74.897002 74.897002 0 0 1-65.096027-35.54682 141.602144 141.602144 0 0 1-18.870534-51.930538 302.074822 302.074822 0 0 1-4.169071-50.613989c-0.365708-99.033731-0.511991-198.213745-0.511992-297.247476v-29.988058c0-13.311772-3.65708-24.136729-7.826151-30.13434a13.896905 13.896905 0 0 0-4.388496-4.388496 7.679868 7.679868 0 0 0-4.022789-0.804558 46.956909 46.956909 0 0 0-28.232658 10.532391 30.719473 30.719473 0 0 0-12.214648 24.721862v232.736582a45.567219 45.567219 0 0 1-46.591201 44.543236 45.567219 45.567219 0 0 1-46.51806-44.616378V124.340726c0-14.628321-3.364514-25.745844-7.094736-31.45089a10.093541 10.093541 0 0 0-2.925664-3.364514 1.901682 1.901682 0 0 0-0.511991-0.292566 9.435267 9.435267 0 0 0-2.340531-0.146283c-38.618767 0-49.443724 23.697879-49.078016 33.791421v1.682256l-0.292567 77.822666v3.876505l-1.023982 253.508797a45.567219 45.567219 0 0 1-46.810626 44.323812 45.567219 45.567219 0 0 1-46.298635-44.68952l1.023983-250.656274a32.036022 32.036022 0 0 0-7.75301-15.140312c-1.82854-1.682257-5.851328-4.827346-17.188277-4.827346a41.178723 41.178723 0 0 0-26.477261 9.069559c-5.558762 4.754204-10.678674 12.580356-10.678674 26.257835v296.589202a45.567219 45.567219 0 0 1-46.518059 44.543236 45.567219 45.567219 0 0 1-46.51806-44.616378v-169.688519a31.158323 31.158323 0 0 0-4.607921-5.705045 11.84894 11.84894 0 0 0-5.193054-3.218231c-1.023982-0.292566-4.681063-1.023982-12.653497 1.462832-17.700268 5.705045-26.111552 14.994029-30.792615 27.208676-5.48562 14.189471-6.582744 35.10797-1.097124 61.438947 42.202705 201.139409 64.949744 301.123981 83.162003 350.34828 16.091153 43.372971 47.615184 81.918596 90.915013 109.566122a43.372971 43.372971 0 0 1 12.872922 61.804654 47.834609 47.834609 0 0 1-64.510894 12.28779c-59.171557-37.741067-103.934218-91.500146-127.046965-153.963075C71.179216 755.406479 46.896203 647.449472 5.571197 449.601435-1.889246 414.127758-3.059512 375.216425 10.471685 340.108455 24.734297 302.806238 54.210364 273.330171 99.265591 258.921276c16.603144-5.558762 34.376554-7.460444 51.784255-5.631904v-29.256641c0-81.18718 67.655983-124.340726 130.265196-124.340726 9.435267 0 18.431684 0.877699 27.062393 2.486815z" p-id="4581" fill="#515151"></path></svg>', ke = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1775033156525" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3463" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M694.4 960H195.2C131.7 960 80 908.4 80 845.1V462c0-63.4 51.7-114.9 115.2-114.9h499.2c63.5 0 115.2 51.6 115.2 114.9v383.1c0 63.3-51.7 114.9-115.2 114.9zM195.2 423.7c-21.2 0-38.4 17.2-38.4 38.3v383.1c0 21.1 17.2 38.3 38.4 38.3h499.2c21.2 0 38.4-17.2 38.4-38.3V462c0-21.1-17.2-38.3-38.4-38.3H195.2z" fill="#515151" p-id="3464"></path><path d="M905.6 450.3c-14.8 0-28.9-8.6-35.2-23C788.6 240.8 592.7 213 483.2 213c-21.2 0-38.4-17.2-38.4-38.3s17.2-38.3 38.4-38.3c218.2 0 385 94.9 457.6 260.3 8.5 19.4-0.4 42-19.8 50.5-5 2.1-10.3 3.1-15.4 3.1z" fill="#515151" p-id="3465"></path><path d="M473.6 285.4c-9.8 0-19.7-3.7-27.2-11.2l-72.5-72.4c-15-15-15-39.2 0-54.2l72.5-72.4c15-15 39.3-15 54.3 0s15 39.2 0 54.2l-45.4 45.3 45.4 45.3c15 15 15 39.2 0 54.2-7.4 7.4-17.3 11.2-27.1 11.2z" fill="#515151" p-id="3466"></path></svg>', Ie = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M8.3 19.7c-.4-.4-.4-1 0-1.4l6.3-6.3-6.3-6.3c-.4-.4-.4-1 0-1.4.4-.4 1-.4 1.4 0l7 7c.4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0z"/></svg>', Ae = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1775032400373" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3314" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 230.4c199.8848 0 373.0176 114.5344 457.344 281.5744C885.0432 679.04 711.8848 793.6 512 793.6c-199.8848 0-373.0176-114.5344-457.344-281.5744C138.9568 344.96 312.1152 230.4 512 230.4z m0 76.8a434.8928 434.8928 0 0 0-366.464 200.3456l-2.816 4.48 2.816 4.48a434.944 434.944 0 0 0 357.248 200.192L512 716.8c150.6816 0 287.488-77.2096 366.464-200.3456l2.816-4.48-2.816-4.48a434.944 434.944 0 0 0-357.248-200.192L512 307.2z m0 38.4a166.4 166.4 0 1 1 0 332.8 166.4 166.4 0 0 1 0-332.8z m0 76.8a89.6 89.6 0 1 0 0 179.2 89.6 89.6 0 0 0 0-179.2z" p-id="3315" fill="#515151"></path></svg>', Se = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1775032548251" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4695" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M849.7664 778.1376c1.9968 1.4848 3.84 3.072 5.632 4.864l72.3968 72.3968a51.2 51.2 0 1 1-72.3968 72.3968l-72.3968-72.3968a51.6096 51.6096 0 0 1-4.864-5.632 448 448 0 1 1 71.68-71.68zM460.8 460.8V358.4a51.2 51.2 0 1 1 102.4 0v102.4h102.4a51.2 51.2 0 0 1 0 102.4h-102.4v102.4a51.2 51.2 0 0 1-102.4 0v-102.4H358.4a51.2 51.2 0 0 1 0-102.4h102.4z m38.4 384a345.6 345.6 0 1 0 0-691.2 345.6 345.6 0 0 0 0 691.2z" fill="#515151" p-id="4696"></path></svg>', Me = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1775032629657" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1933" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M849.7664 778.1376c1.9968 1.4848 3.84 3.072 5.632 4.864l72.3968 72.3968a51.2 51.2 0 1 1-72.3968 72.3968l-72.3968-72.3968a51.6096 51.6096 0 0 1-4.864-5.632 448 448 0 1 1 71.68-71.68zM499.2 844.8a345.6 345.6 0 1 0 0-691.2 345.6 345.6 0 0 0 0 691.2zM358.4 563.2a51.2 51.2 0 0 1 0-102.4h307.2a51.2 51.2 0 0 1 0 102.4H358.4z" fill="#666666" p-id="1934"></path></svg>', Te = ["innerHTML"], De = /* @__PURE__ */ ct({
   __name: "SvgIcon",
   props: {
     name: {},
     size: {}
   },
-  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 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));
+  setup(w) {
+    const t = w, 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": we, "../assets/svg/last.svg": xe, "../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 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: X(["svg-icon", [w.size ? `size-${w.size}` : ""]]),
+      innerHTML: n.value
+    }, null, 10, Te));
   }
-}), et = (f, t) => {
-  const i = f.__vccOpts || f;
-  for (const [e, o] of t)
-    i[e] = o;
-  return i;
-}, H = /* @__PURE__ */ et(fe, [["__scopeId", "data-v-3928607b"]]), ye = {
+}), rt = (w, t) => {
+  const n = w.__vccOpts || w;
+  for (const [e, l] of t)
+    n[e] = l;
+  return n;
+}, L = /* @__PURE__ */ rt(De, [["__scopeId", "data-v-3928607b"]]), Pe = {
   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 = {
+}, ze = { class: "image-list-header" }, $e = ["onClick"], Le = { class: "image-list-stage" }, Be = ["src", "alt"], Re = {
   key: 0,
   class: "thumb-overlay-layer"
-}, _e = {
+}, He = {
   key: 1,
   class: "thumb-overlay-svg",
   viewBox: "0 0 100 100",
   preserveAspectRatio: "none"
-}, Ie = ["points"], ke = { class: "image-list-text" }, Se = {
-  key: 1,
+}, Ee = ["points"], Ue = { class: "image-list-text" }, Ve = { class: "center-sidebar" }, Oe = {
+  key: 0,
   class: "left-sidebar"
-}, Me = ["onClick", "title"], ze = { class: "center-area" }, $e = {
+}, Fe = ["onClick", "title"], Ne = {
+  key: 0,
+  class: "divider"
+}, We = { class: "center-area" }, Ge = {
   key: 0,
-  class: "top-bar"
-}, Te = { class: "label-selector" }, Pe = { class: "tags-row" }, He = ["onClick"], Le = {
+  class: "floating-label-selector"
+}, Ye = {
   key: 0,
-  class: "no-labels"
-}, Re = {
+  class: "current-label"
+}, Je = { class: "label-name" }, je = {
   key: 1,
+  class: "current-label empty"
+}, Xe = {
+  key: 0,
+  class: "selector-dropdown"
+}, qe = {
+  key: 0,
+  class: "dropdown-empty"
+}, Ke = ["onClick"], Ze = { class: "label-name" }, Qe = {
+  key: 0,
   class: "batch-nav"
-}, Be = ["disabled"], De = ["disabled"], Ue = {
-  key: 2,
+}, ts = ["disabled"], es = ["disabled"], ss = ["disabled"], is = ["disabled"], ns = {
+  key: 1,
   class: "right-sidebar"
-}, 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__ */ tt({
+}, os = { class: "label-list" }, as = { class: "label-row" }, ls = ["onUpdate:modelValue", "onChange"], cs = ["title"], rs = ["onClick"], hs = { class: "action-icon more-actions" }, ds = ["onClick"], gs = { class: "modal-content" }, us = { class: "modal-body" }, vs = { class: "form-group" }, fs = { class: "form-group" }, ms = { class: "color-input-wrapper" }, ps = { class: "color-value" }, ys = { class: "modal-actions" }, ws = ["disabled"], xs = /* @__PURE__ */ ct({
   __name: "ImageAnnotator",
   props: {
-    annotationTypes: { default: () => ["rectangle", "polygon", "point", "rotatedRect"] },
+    annotationTypes: { default: () => ["rectangle", "polygon", "point", "rotatedRect", "category"] },
     batchImages: { default: () => [] },
     labels: { default: () => [] },
     defaultActiveType: {},
@@ -628,581 +613,698 @@ 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(f, { expose: t, emit: i }) {
-    const e = f, o = i, c = M(null), r = M(null), a = M(null), d = M(null), u = M(0), w = M(""), m = M([]), _ = M(""), U = M(!1), k = M({ name: "", color: "#FF0000" }), I = M("none"), C = M([]), R = M({}), N = D(() => d.value === "select" && !!w.value), j = (n) => {
-      if (!n || R.value[n]) return;
-      const s = new Image();
-      s.onload = () => {
-        const l = s.naturalWidth || 1, h = s.naturalHeight || 1;
-        R.value = {
-          ...R.value,
-          [n]: { width: l, height: h }
+  setup(w, { expose: t, emit: n }) {
+    const e = w, l = n, o = M(null), c = M(null), g = M(null), u = M([]), r = M(null), k = M(null), x = 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)), yt = (s) => {
+      s.stopPropagation(), G.value = !G.value;
+    }, wt = (s) => {
+      tt(s), G.value = !1;
+    };
+    kt(() => {
+      document.addEventListener("click", (s) => {
+        s.target.closest(".floating-label-selector") || (G.value = !1);
+      });
+    });
+    const it = (s) => {
+      if (!s || H.value[s]) return;
+      const i = new Image();
+      i.onload = () => {
+        const a = i.naturalWidth || 1, d = i.naturalHeight || 1;
+        H.value = {
+          ...H.value,
+          [s]: { width: a, height: d }
         };
-      }, s.src = n;
-    }, X = () => {
-      e.batchImages.forEach((n) => {
-        j(n.imageUrl);
+      }, i.src = s;
+    }, nt = () => {
+      e.batchImages.forEach((s) => {
+        it(s.imageUrl);
       });
-    }, O = () => {
-      var l, h, v, A;
-      const n = e.batchImages[u.value], s = (n == null ? void 0 : n.imageUrl) || ((l = e.image) == null ? void 0 : l.url);
+    }, ht = (s, i) => {
+      u.value[i] = s;
+    }, Q = (s = x.value) => {
+      const i = g.value, a = u.value[s];
+      if (!i || !a) return;
+      const d = i.scrollTop, f = d + i.clientHeight, A = a.offsetTop, P = A + a.offsetHeight;
+      if (A < d) {
+        i.scrollTo({
+          top: Math.max(A - 8, 0),
+          behavior: "smooth"
+        });
+        return;
+      }
+      P > f && i.scrollTo({
+        top: P - i.clientHeight + 8,
+        behavior: "smooth"
+      });
+    }, j = () => {
+      var a, d, f, A;
+      const s = e.batchImages[x.value], i = (s == null ? void 0 : s.imageUrl) || ((a = e.image) == null ? void 0 : a.url);
       return {
         eventId: `${Date.now()}-${Math.random().toString(36).slice(2, 10)}`,
         timestamp: Date.now(),
         requestId: e.requestId,
-        taskId: (h = e.session) == null ? void 0 : h.taskId,
-        imageId: ((v = e.image) == null ? void 0 : v.id) || s,
+        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
       };
-    }, ht = (n) => {
-      var h;
-      const s = n == null ? void 0 : n.action;
-      if (!s) return;
-      const l = {
-        meta: O(),
-        action: s,
-        current: n == null ? void 0 : n.changedItem,
-        source: (h = n == null ? void 0 : n.changedItem) != null && h.predictionId ? "prediction" : "manual"
+    }, y = (s) => {
+      var d;
+      const i = s == null ? void 0 : s.action;
+      if (!i) return;
+      const a = {
+        meta: j(),
+        action: i,
+        current: s == null ? void 0 : s.changedItem,
+        source: (d = s == null ? void 0 : s.changedItem) != null && d.predictionId ? "prediction" : "manual"
       };
-      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) => ({
+      i === "add" && l("annotation:add", a), i === "update" && l("annotation:update", a), i === "delete" && l("annotation:delete", a), i === "select" && l("annotation:select", a);
+    }, b = V(() => e.annotationTypes), I = (s) => ({
       rectangle: "crop",
       polygon: "connection",
       point: "aim",
       rotatedRect: "refresh-right",
       category: "price-tag"
-    })[n] || n, it = (n) => ({
+    })[s] || s, F = (s) => ({
       rectangle: "矩形框",
       polygon: "多边形",
       point: "关键点",
       rotatedRect: "旋转矩形",
       category: "分类标签"
-    })[n] || n;
-    Xt(() => {
-      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] || s;
+    kt(() => {
+      if (nt(), o.value) {
+        r.value = new he(o.value), r.value.on("annotationChange", (i) => {
+          var a, d;
+          if (i.action === "add" && i.changedItem) {
+            const f = _.value.find((A) => A.id === $.value);
+            f && (i.changedItem.label = f.name, i.changedItem.labelId = f.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 = ""), o("annotationChange", s), ht(s);
+          i.action === "select" ? D.value = ((a = i.changedItem) == null ? void 0 : a.id) || "" : i.action === "delete" && ((d = i.changedItem) == null ? void 0 : d.id) === D.value && (D.value = ""), l("annotationChange", i), y(i);
         }), W(), E();
-        const n = new ResizeObserver(() => {
-          var s;
-          (s = a.value) == null || s.resize();
+        const s = new ResizeObserver(() => {
+          var i;
+          (i = r.value) == null || i.resize();
         });
-        r.value && n.observe(r.value), e.defaultActiveType && p(e.defaultActiveType), o("ready", { meta: O() });
+        c.value && s.observe(c.value), e.defaultActiveType && Y(e.defaultActiveType), at(() => Q()), l("ready", { meta: j() });
       }
     });
     const E = () => {
-      if (!a.value) return;
-      const n = m.value.find((l) => l.id === _.value);
-      n && a.value.setLabelStyle(n.color);
-      const s = m.value.filter((l) => l.visible).map((l) => l.name);
-      a.value.setVisibleLabels(s);
+      if (!r.value) return;
+      const s = _.value.find((a) => a.id === $.value);
+      s && r.value.setLabelStyle(s.color);
+      const i = _.value.filter((a) => a.visible).map((a) => a.name);
+      r.value.setVisibleLabels(i);
     }, W = () => {
-      var n;
-      if (a.value)
-        if (w.value = "", requestAnimationFrame(() => {
-          var s;
-          (s = a.value) == null || s.resize();
+      var s;
+      if (r.value)
+        if (D.value = "", requestAnimationFrame(() => {
+          var i;
+          (i = r.value) == null || i.resize();
         }), e.batchImages.length > 0) {
-          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) {
+          const i = e.batchImages[x.value];
+          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, a;
+      if (k.value = s, D.value = "", s !== "pan" && s !== "select" && _.value.length === 0) {
         alert("请先创建标签！");
         return;
       }
-      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 = 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 }
+      s === "pan" || s === "select" ? (i = r.value) == null || i.setTool(s) : (a = r.value) == null || a.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);
+    }, xt = () => {
+      r.value && l("viewport:change", {
+        meta: j(),
+        scale: r.value.scale,
+        offset: { ...r.value.offset }
       });
-    }, q = () => {
-      var n;
-      (n = a.value) == null || n.zoom(1), z();
+    }, Mt = () => {
+      var s;
+      (s = r.value) == null || s.zoom(1), xt();
+    }, Tt = () => {
+      var s;
+      (s = r.value) == null || s.zoom(-1), xt();
+    }, Dt = () => {
+      C.value = { name: "", color: "#2196F3" }, q.value = !0;
     }, dt = () => {
-      var n;
-      (n = a.value) == null || n.zoom(-1), z();
-    }, xt = () => {
-      k.value = { name: "", color: "#2196F3" }, U.value = !0;
-    }, gt = () => {
-      U.value = !1;
-    }, bt = () => {
-      if (!k.value.name.trim()) {
+      q.value = !1;
+    }, Pt = () => {
+      if (!C.value.name.trim()) {
         alert("请输入标签名称");
         return;
       }
-      const s = {
+      const i = {
         id: Date.now().toString(),
-        name: k.value.name,
-        color: k.value.color,
+        name: C.value.name,
+        color: C.value.color,
         visible: !0
       };
-      m.value.push(s), o("labelChange", m.value), E(), m.value.length === 1 && G(s), gt();
-    }, G = (n) => {
-      var s;
-      _.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 = a.value) == null || s.setLabelStyle(n.color)), a.value) {
-        const l = a.value.getAnnotations();
-        let h = !1;
-        l.forEach((v) => {
-          v.label === n.name && (v.style || (v.style = {}), v.style.strokeColor = n.color, v.style.fillColor = wt(n.color, 0.2), h = !0);
-        }), h && a.value.render();
+      _.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) => {
+      if (!s.startsWith("#")) return s;
+      let a = 0, d = 0, f = 0;
+      return s.length === 4 ? (a = parseInt(s[1] + s[1], 16), d = parseInt(s[2] + s[2], 16), f = parseInt(s[3] + s[3], 16)) : s.length === 7 && (a = parseInt(s.slice(1, 3), 16), d = parseInt(s.slice(3, 5), 16), f = parseInt(s.slice(5, 7), 16)), `rgba(${a}, ${d}, ${f}, ${i})`;
+    }, $t = (s) => {
+      var i;
+      if (s.id === $.value && ((i = r.value) == null || i.setLabelStyle(s.color)), r.value) {
+        const a = r.value.getAnnotations();
+        let d = !1;
+        a.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);
+        }), d && r.value.render();
       }
-      o("labelChange", m.value), E();
-    }, At = (n) => {
-      n.visible = !n.visible, E();
-    }, _t = (n) => {
-      const s = m.value.findIndex((l) => l.id === n);
-      s > -1 && (m.value.splice(s, 1), o("labelChange", m.value), _.value === n && (_.value = m.value.length > 0 ? m.value[0].id : "", _.value && G(m.value[0])), E());
+      l("labelChange", _.value), E();
+    }, Lt = (s) => {
+      s.visible = !s.visible, E();
+    }, Bt = (s) => {
+      const i = _.value.findIndex((a) => a.id === s);
+      i > -1 && (_.value.splice(i, 1), l("labelChange", _.value), $.value === s && ($.value = _.value.length > 0 ? _.value[0].id : "", $.value && tt(_.value[0])), E());
     };
-    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))
-          G(m.value[0]);
+    K(() => e.labels, (s) => {
+      const i = JSON.parse(JSON.stringify(s || []));
+      if (_.value = i, _.value.length > 0)
+        if (!$.value || !_.value.find((a) => a.id === $.value))
+          tt(_.value[0]);
         else {
-          const l = m.value.find((h) => h.id === _.value);
-          l && G(l);
+          const a = _.value.find((d) => d.id === $.value);
+          a && tt(a);
         }
       else
-        _.value = "";
+        $.value = "";
       E();
     }, { immediate: !0, deep: !0 });
-    const It = () => {
-      u.value > 0 && (ot(), u.value--, W(), at());
-    }, kt = () => {
-      u.value < e.batchImages.length - 1 && (ot(), u.value++, W(), at());
-    }, ot = () => {
-      if (a.value) {
-        const n = a.value.getAnnotations();
-        e.batchImages[u.value].annotations = n;
+    const Rt = () => {
+      x.value > 0 && (gt(), x.value--, W(), ut());
+    }, Ht = () => {
+      x.value < e.batchImages.length - 1 && (gt(), x.value++, W(), ut());
+    }, Et = () => {
+      x.value > 0 && ot(0);
+    }, Ut = () => {
+      x.value < e.batchImages.length - 1 && ot(e.batchImages.length - 1);
+    }, gt = () => {
+      if (r.value) {
+        const s = r.value.getAnnotations();
+        e.batchImages[x.value].annotations = s;
       }
-    }, at = () => {
-      const n = e.batchImages[u.value];
-      o("batchChange", {
-        currentIndex: u.value,
+    }, ut = () => {
+      const s = e.batchImages[x.value];
+      l("batchChange", {
+        currentIndex: x.value,
         total: e.batchImages.length,
-        currentImageUrl: n.imageUrl,
-        currentAnnotations: n.annotations || []
+        currentImageUrl: s.imageUrl,
+        currentAnnotations: s.annotations || []
       });
-    }, ut = (n = []) => {
-      var v;
-      if (!a.value) return;
-      if (C.value = JSON.parse(JSON.stringify(n)), C.value.length === 0) {
-        I.value = "none";
+    }, bt = (s = []) => {
+      var f;
+      if (!r.value) return;
+      if (p.value = JSON.parse(JSON.stringify(s)), p.value.length === 0) {
+        S.value = "none";
         return;
       }
-      I.value = "loaded";
-      const l = (a.value.getAnnotations() || []).filter((A) => !A.predictionId), h = C.value.map((A) => {
-        const $ = JSON.parse(JSON.stringify(A.annotation));
-        return $.id = $.id || `pred-${A.id}`, $.predictionId = A.id, $.modelRunId = A.modelRunId || $.modelRunId, $.confidence = A.confidence ?? $.confidence, $.reviewStatus = $.reviewStatus || "draft", $;
+      S.value = "loaded";
+      const a = (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;
       });
-      a.value.setAnnotations([...l, ...h]), o("prediction:loaded", {
-        meta: O(),
-        modelRunId: (v = C.value[0]) == null ? void 0 : v.modelRunId,
-        candidates: C.value
+      r.value.setAnnotations([...a, ...d]), l("prediction:loaded", {
+        meta: j(),
+        modelRunId: (f = p.value[0]) == null ? void 0 : f.modelRunId,
+        candidates: p.value
       });
-    }, St = (n, s) => {
-      var v;
-      if (!a.value) return [];
-      I.value = "applying";
-      const h = (a.value.getAnnotations() || []).filter((A) => A.predictionId && n.includes(A.predictionId));
-      return h.forEach((A) => {
+    }, Vt = (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";
-      }), I.value = "applied", o("prediction:apply", {
-        meta: O(),
-        modelRunId: (v = h[0]) == null ? void 0 : v.modelRunId,
-        candidateIds: n,
-        threshold: s,
-        acceptedAnnotations: h
-      }), a.value.render(), h;
-    }, Mt = (n, s) => {
-      var v;
-      if (!a.value) return;
-      const l = a.value.getAnnotations() || [], h = l.filter((A) => !(A.predictionId && n.includes(A.predictionId)));
-      a.value.setAnnotations(h), o("prediction:reject", {
-        meta: O(),
-        modelRunId: (v = l.find((A) => A.predictionId && n.includes(A.predictionId))) == null ? void 0 : v.modelRunId,
-        candidateIds: n,
-        reason: s
+      }), 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) => {
+      var f;
+      if (!r.value) return;
+      const a = r.value.getAnnotations() || [], d = a.filter((A) => !(A.predictionId && s.includes(A.predictionId)));
+      r.value.setAnnotations(d), l("prediction:reject", {
+        meta: j(),
+        modelRunId: (f = a.find((A) => A.predictionId && s.includes(A.predictionId))) == null ? void 0 : f.modelRunId,
+        candidateIds: s,
+        reason: i
       });
-    }, zt = (n, s = []) => {
-      a.value && (a.value.loadImage(n.url), a.value.setAnnotations(s));
-    }, $t = (n) => {
+    }, Ft = (s, i = []) => {
+      r.value && (r.value.loadImage(s.url), r.value.setAnnotations(i));
+    }, Nt = (s) => {
+      var i;
+      (i = r.value) == null || i.setAnnotations(s);
+    }, Ct = () => {
       var s;
-      (s = a.value) == null || s.setAnnotations(n);
-    }, vt = () => {
-      var n;
-      return ((n = a.value) == null ? void 0 : n.getAnnotations()) || [];
-    }, Tt = (n = "json") => {
-      var l, h;
-      const s = vt();
+      return ((s = r.value) == null ? void 0 : s.getAnnotations()) || [];
+    }, Wt = (s = "json") => {
+      var a, d;
+      const i = Ct();
       return {
-        format: n,
-        image: ((l = e.batchImages[u.value]) == null ? void 0 : l.imageUrl) || ((h = e.image) == null ? void 0 : h.url) || "",
-        annotations: s
+        format: s,
+        image: ((a = e.batchImages[x.value]) == null ? void 0 : a.imageUrl) || ((d = e.image) == null ? void 0 : d.url) || "",
+        annotations: i
       };
-    }, mt = (n) => {
-      n >= 0 && n < e.batchImages.length && (ot(), u.value = n, W(), at());
-    }, Pt = (n) => {
-      var s;
-      return n === u.value && a.value ? a.value.getAnnotations() || [] : ((s = e.batchImages[n]) == null ? void 0 : s.annotations) || [];
-    }, Ht = (n) => n.type === "rectangle", Lt = (n) => n.type === "polygon", Rt = (n) => n.type === "point", Bt = (n) => n.type === "rotatedRect", Z = (n) => {
-      var l, h;
-      const s = (l = m.value.find((v) => v.name === n.label)) == null ? void 0 : l.color;
-      return ((h = n.style) == null ? void 0 : h.strokeColor) || s || "#409eff";
-    }, ft = (n) => {
-      const s = n.coordinates;
-      return (s == null ? void 0 : s.points) || [];
-    }, 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 && 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 = 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);
+    }, ot = (s) => {
+      s >= 0 && s < e.batchImages.length && (gt(), x.value = s, W(), ut());
+    }, Gt = (s) => {
+      var i;
+      return s === x.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 a, d;
+      const i = (a = _.value.find((f) => f.name === s.label)) == null ? void 0 : a.color;
+      return ((d = s.style) == null ? void 0 : d.strokeColor) || i || "#409eff";
+    }, _t = (s) => {
+      const i = s.coordinates;
+      return (i == null ? void 0 : i.points) || [];
+    }, st = (s) => {
+      const i = e.batchImages[s];
+      if (i != null && i.width && (i != null && i.height))
+        return { width: i.width, height: i.height };
+      const a = i != null && i.imageUrl ? H.value[i.imageUrl] : void 0;
+      return a || (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 a = i.coordinates, d = st(s), f = et(i), A = Math.min(a.x1, a.x2), P = Math.min(a.y1, a.y2), ne = Math.max(a.x1, a.x2), oe = Math.max(a.y1, a.y2);
       return {
-        left: `${A / h.width * 100}%`,
-        top: `${$ / h.height * 100}%`,
-        width: `${(Nt - A) / h.width * 100}%`,
-        height: `${(Wt - $) / h.height * 100}%`,
-        borderColor: v,
-        backgroundColor: `${v}22`
+        left: `${A / d.width * 100}%`,
+        top: `${P / d.height * 100}%`,
+        width: `${(ne - A) / d.width * 100}%`,
+        height: `${(oe - P) / d.height * 100}%`,
+        borderColor: f,
+        backgroundColor: `${f}22`
       };
-    }, Ft = (n, s) => {
-      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);
+    }, Qt = (s, i) => {
+      const a = st(s);
+      return _t(i).map((d) => `${d.x / a.width * 100},${d.y / a.height * 100}`).join(" ");
+    }, te = (s) => {
+      const i = et(s);
       return {
-        fill: `${s}33`,
-        stroke: s,
+        fill: `${i}33`,
+        stroke: i,
         strokeWidth: "1.4"
       };
-    }, Et = (n, s, l) => {
-      const h = Q(n), v = Z(l);
+    }, ee = (s, i, a) => {
+      const d = st(s), f = et(a);
       return {
-        left: `${s.x / h.width * 100}%`,
-        top: `${s.y / h.height * 100}%`,
-        backgroundColor: v
+        left: `${i.x / d.width * 100}%`,
+        top: `${i.y / d.height * 100}%`,
+        backgroundColor: f
       };
-    }, Vt = (n, s) => {
-      const l = s.coordinates, h = Q(n), v = Z(s), A = Math.abs(l.width), $ = Math.abs(l.height);
+    }, se = (s, i) => {
+      const a = i.coordinates, d = st(s), f = et(i), A = Math.abs(a.width), P = Math.abs(a.height);
       return {
-        left: `${(l.x - A / 2) / h.width * 100}%`,
-        top: `${(l.y - $ / 2) / h.height * 100}%`,
-        width: `${A / h.width * 100}%`,
-        height: `${$ / h.height * 100}%`,
-        transform: `rotate(${l.angle || 0}deg)`,
-        borderColor: v,
-        backgroundColor: `${v}22`
+        left: `${(a.x - A / 2) / d.width * 100}%`,
+        top: `${(a.y - P / 2) / d.height * 100}%`,
+        width: `${A / d.width * 100}%`,
+        height: `${P / d.height * 100}%`,
+        transform: `rotate(${a.angle || 0}deg)`,
+        borderColor: f,
+        backgroundColor: `${f}22`
+      };
+    }, ie = (s, i) => {
+      const a = i.coordinates, d = st(s), f = et(i);
+      return {
+        left: `${a.x / d.width * 100}%`,
+        top: `${a.y / d.height * 100}%`,
+        backgroundColor: `${f}d9`
+        // ~85% opacity
       };
     };
     return t({
-      jumpTo: mt,
-      setImage: zt,
-      setAnnotations: $t,
-      getAnnotations: vt,
-      selectTool: p,
-      loadPredictionCandidates: ut,
-      applyPredictions: St,
-      rejectPredictions: Mt,
-      exportAnnotations: Tt,
+      jumpTo: ot,
+      setImage: Ft,
+      setAnnotations: Nt,
+      getAnnotations: Ct,
+      selectTool: Y,
+      loadPredictionCandidates: bt,
+      applyPredictions: Vt,
+      rejectPredictions: Ot,
+      exportAnnotations: Wt,
       getAllAnnotations: () => {
-        var n, s;
+        var s, i;
         return e.batchImages.length > 0 ? e.batchImages : [{
-          imageUrl: ((n = e.image) == null ? void 0 : n.url) || "",
-          annotations: ((s = a.value) == null ? void 0 : s.getAnnotations()) || []
+          imageUrl: ((s = e.image) == null ? void 0 : s.url) || "",
+          annotations: ((i = r.value) == null ? void 0 : i.getAnnotations()) || []
         }];
       },
       getCurrentAnnotation: () => {
-        var n, s, l;
+        var s, i, a;
         return {
-          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()) || []
+          imageUrl: ((s = e.batchImages[x.value]) == null ? void 0 : s.imageUrl) || ((i = e.image) == null ? void 0 : i.url) || "",
+          annotations: ((a = r.value) == null ? void 0 : a.getAnnotations()) || []
         };
       }
-    }), Y(() => {
-      var n;
-      return (n = e.image) == null ? void 0 : n.url;
+    }), K(() => {
+      var s;
+      return (s = e.image) == null ? void 0 : s.url;
     }, () => {
-      var n;
-      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 || ""}`),
+      var s;
+      e.batchImages.length === 0 && ((s = e.image) != null && s.url) && W();
+    }), K(() => e.predictionCandidates, (s) => {
+      s && bt(s);
+    }, { immediate: !0, deep: !0 }), K(
+      () => e.batchImages.map((s) => `${s.imageUrl}:${s.width || ""}x${s.height || ""}`),
       () => {
-        X();
+        nt(), u.value = u.value.slice(0, e.batchImages.length), at(() => Q());
       },
       { immediate: !0 }
-    ), (n, s) => (y(), x("div", {
-      class: J(["annotation-container", f.theme])
+    ), K(
+      () => x.value,
+      () => {
+        at(() => Q());
+      }
+    ), (s, i) => (v(), m("div", {
+      class: X(["annotation-container", w.theme])
     }, [
-      f.batchImages && f.batchImages.length > 0 ? (y(), x("div", ye, [
-        g("div", pe, "批量图片（" + P(f.batchImages.length) + "）", 1),
-        g("div", xe, [
-          (y(!0), x(B, null, F(f.batchImages, (l, h) => (y(), x("button", {
-            key: `${l.imageUrl}-${h}`,
-            class: J(["image-list-item", { active: h === u.value }]),
-            onClick: (v) => mt(h)
+      w.batchImages && w.batchImages.length > 0 ? (v(), m("div", Pe, [
+        h("div", ze, "共 " + z(w.batchImages.length) + " 张", 1),
+        h("div", {
+          ref_key: "imageListScrollRef",
+          ref: g,
+          class: "image-list-scroll"
+        }, [
+          (v(!0), m(N, null, J(w.batchImages, (a, d) => (v(), m("button", {
+            key: `${a.imageUrl}-${d}`,
+            ref_for: !0,
+            ref: (f) => ht(f, d),
+            class: X(["image-list-item", { active: d === x.value }]),
+            onClick: (f) => ot(d)
           }, [
-            g("div", we, [
-              g("img", {
-                src: l.imageUrl,
-                alt: `第${h + 1}张`,
+            h("div", Le, [
+              h("img", {
+                src: a.imageUrl,
+                alt: `第${d + 1}张`,
                 class: "image-list-thumb"
-              }, null, 8, Ce),
-              Dt(h) ? (y(), x("div", Ae, [
-                (y(!0), x(B, null, F(Pt(h), (v) => (y(), x(B, {
-                  key: v.id
+              }, null, 8, Be),
+              Kt(d) ? (v(), m("div", Re, [
+                (v(!0), m(N, null, J(Gt(d), (f) => (v(), m(N, {
+                  key: f.id
                 }, [
-                  Ht(v) ? (y(), x("div", {
+                  Yt(f) ? (v(), m("div", {
                     key: 0,
                     class: "thumb-overlay-rect",
-                    style: V(Ut(h, v))
-                  }, null, 4)) : Lt(v) ? (y(), x("svg", _e, [
-                    g("polygon", {
-                      points: Ft(h, v),
-                      style: V(Ot(v))
-                    }, null, 12, Ie)
-                  ])) : Rt(v) ? (y(!0), x(B, { key: 2 }, F(ft(v), (A, $) => (y(), x("div", {
-                    key: `${v.id}-${$}`,
+                    style: U(Zt(d, f))
+                  }, null, 4)) : Jt(f) ? (v(), m("svg", He, [
+                    h("polygon", {
+                      points: Qt(d, f),
+                      style: U(te(f))
+                    }, null, 12, Ee)
+                  ])) : jt(f) ? (v(!0), m(N, { key: 2 }, J(_t(f), (A, P) => (v(), m("div", {
+                    key: `${f.id}-${P}`,
                     class: "thumb-overlay-point",
-                    style: V(Et(h, A, v))
-                  }, null, 4))), 128)) : Bt(v) ? (y(), x("div", {
+                    style: U(ee(d, A, f))
+                  }, null, 4))), 128)) : Xt(f) ? (v(), m("div", {
                     key: 3,
                     class: "thumb-overlay-rotated",
-                    style: V(Vt(h, v))
-                  }, null, 4)) : T("", !0)
+                    style: U(se(d, f))
+                  }, null, 4)) : qt(f) ? (v(), m("div", {
+                    key: 4,
+                    class: "thumb-overlay-category",
+                    style: U(ie(d, f))
+                  }, z(f.label), 5)) : B("", !0)
                 ], 64))), 128))
-              ])) : T("", !0)
+              ])) : B("", !0)
             ]),
-            g("span", ke, "第 " + P(h + 1) + " 张", 1)
-          ], 10, be))), 128))
-        ])
-      ])) : T("", !0),
-      f.readOnly ? T("", !0) : (y(), x("div", Se, [
-        g("div", {
-          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: 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), x(B, null, F(nt.value, (l) => (y(), x("div", {
-          key: l,
-          class: J(["tool-btn", { active: d.value === l }]),
-          onClick: (h) => p(l),
-          title: it(l)
-        }, [
-          L(H, {
-            name: st(l)
-          }, null, 8, ["name"])
-        ], 10, Me))), 128)),
-        s[6] || (s[6] = g("div", { class: "divider" }, null, -1)),
-        g("div", {
-          class: "tool-btn",
-          onClick: q,
-          title: "放大"
-        }, [
-          L(H, { name: "zoom-in" })
-        ]),
-        g("div", {
-          class: "tool-btn",
-          onClick: dt,
-          title: "缩小"
-        }, [
-          L(H, { name: "zoom-out" })
-        ]),
-        s[7] || (s[7] = g("div", { class: "divider" }, null, -1)),
-        N.value ? (y(), x("div", {
-          key: 0,
-          class: "tool-btn",
-          onClick: b,
-          title: "删除选中"
-        }, [
-          L(H, { name: "delete" })
-        ])) : T("", !0)
-      ])),
-      g("div", ze, [
-        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), x(B, null, F(m.value, (l) => (y(), x("div", {
-                key: l.id,
-                class: J(["tag-chip", { active: _.value === l.id }]),
-                style: V({ backgroundColor: l.color, borderColor: l.color }),
-                onClick: (h) => G(l)
-              }, P(l.name), 15, He))), 128)),
-              m.value.length === 0 ? (y(), x("div", Le, "请在右侧创建标签")) : T("", !0)
-            ])
-          ])
-        ])),
-        g("div", {
+            h("span", Ue, "第 " + z(d + 1) + " 张", 1)
+          ], 10, $e))), 128))
+        ], 512)
+      ])) : B("", !0),
+      h("div", Ve, [
+        w.readOnly ? B("", !0) : (v(), m("div", Oe, [
+          h("div", {
+            class: X(["tool-btn", { active: k.value === "pan" }]),
+            onClick: i[0] || (i[0] = (a) => Y("pan")),
+            title: "拖动"
+          }, [
+            R(L, { name: "rank" })
+          ], 2),
+          h("div", {
+            class: X(["tool-btn", { active: k.value === "select" }]),
+            onClick: i[1] || (i[1] = (a) => Y("select")),
+            title: "选择"
+          }, [
+            R(L, { name: "pointer" })
+          ], 2),
+          i[5] || (i[5] = h("div", { class: "divider" }, null, -1)),
+          (v(!0), m(N, null, J(b.value, (a) => (v(), m("div", {
+            key: a,
+            class: X(["tool-btn", { active: k.value === a }]),
+            onClick: (d) => Y(a),
+            title: F(a)
+          }, [
+            R(L, {
+              name: I(a)
+            }, null, 8, ["name"])
+          ], 10, Fe))), 128)),
+          i[6] || (i[6] = h("div", { class: "divider" }, null, -1)),
+          h("div", {
+            class: "tool-btn",
+            onClick: Mt,
+            title: "放大"
+          }, [
+            R(L, { name: "zoom-in" })
+          ]),
+          h("div", {
+            class: "tool-btn",
+            onClick: Tt,
+            title: "缩小"
+          }, [
+            R(L, { name: "zoom-out" })
+          ]),
+          O.value ? (v(), m("div", Ne)) : B("", !0),
+          O.value ? (v(), m("div", {
+            key: 1,
+            class: "tool-btn",
+            onClick: St,
+            title: "删除选中"
+          }, [
+            R(L, { name: "delete" })
+          ])) : B("", !0)
+        ]))
+      ]),
+      h("div", We, [
+        h("div", {
           class: "canvas-wrapper",
           ref_key: "canvasWrapper",
-          ref: r,
-          onWheel: s[2] || (s[2] = qt(() => {
+          ref: c,
+          onWheel: i[2] || (i[2] = It(() => {
           }, ["prevent"]))
         }, [
-          g("canvas", {
+          h("canvas", {
             ref_key: "canvasRef",
-            ref: c
-          }, null, 512)
+            ref: o
+          }, null, 512),
+          w.readOnly ? B("", !0) : (v(), m("div", Ge, [
+            h("div", {
+              class: "selector-trigger",
+              onClick: yt
+            }, [
+              Z.value ? (v(), m("div", Ye, [
+                h("span", {
+                  class: "color-dot",
+                  style: U({ backgroundColor: Z.value.color })
+                }, null, 4),
+                h("span", Je, z(Z.value.name), 1)
+              ])) : (v(), m("div", je, [...i[7] || (i[7] = [
+                h("span", { class: "label-name" }, "请选择标签", -1)
+              ])])),
+              R(L, {
+                name: "right",
+                class: X(["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, (a) => (v(), m("div", {
+                key: a.id,
+                class: X(["dropdown-item", { active: $.value === a.id }]),
+                onClick: (d) => wt(a)
+              }, [
+                h("span", {
+                  class: "color-dot",
+                  style: U({ backgroundColor: a.color })
+                }, null, 4),
+                h("span", Ze, z(a.name), 1),
+                $.value === a.id ? (v(), vt(L, {
+                  key: 0,
+                  name: "aim",
+                  class: "check-icon"
+                })) : B("", !0)
+              ], 10, Ke))), 128))
+            ])) : B("", !0)
+          ]))
         ], 544),
-        f.batchImages && f.batchImages.length > 0 ? (y(), x("div", Re, [
-          g("button", {
-            onClick: It,
-            disabled: u.value <= 0
+        w.batchImages && w.batchImages.length > 0 ? (v(), m("div", Qe, [
+          h("button", {
+            class: "icon-btn",
+            onClick: Et,
+            disabled: x.value <= 0,
+            title: "第一张"
           }, [
-            L(H, { name: "back" }),
-            s[9] || (s[9] = K(" 上一张 ", -1))
-          ], 8, Be),
-          g("span", null, P(u.value + 1) + " / " + P(f.batchImages.length), 1),
-          g("button", {
-            onClick: kt,
-            disabled: u.value >= f.batchImages.length - 1
+            R(L, { name: "first" })
+          ], 8, ts),
+          h("button", {
+            class: "icon-btn",
+            onClick: Rt,
+            disabled: x.value <= 0,
+            title: "上一张"
           }, [
-            s[10] || (s[10] = K(" 下一张 ", -1)),
-            L(H, { name: "right" })
-          ], 8, De)
-        ])) : T("", !0)
+            R(L, { name: "back" })
+          ], 8, es),
+          h("span", null, z(x.value + 1) + " / " + z(w.batchImages.length), 1),
+          h("button", {
+            class: "icon-btn",
+            onClick: Ht,
+            disabled: x.value >= w.batchImages.length - 1,
+            title: "下一张"
+          }, [
+            R(L, { name: "right" })
+          ], 8, ss),
+          h("button", {
+            class: "icon-btn",
+            onClick: Ut,
+            disabled: x.value >= w.batchImages.length - 1,
+            title: "最后一张"
+          }, [
+            R(L, { name: "last" })
+          ], 8, is)
+        ])) : B("", !0)
       ]),
-      f.readOnly ? T("", !0) : (y(), x("div", Ue, [
-        g("div", { class: "sidebar-header" }, [
-          s[11] || (s[11] = g("h3", null, "标签管理", -1)),
-          g("button", {
+      w.readOnly ? B("", !0) : (v(), m("div", ns, [
+        h("div", { class: "sidebar-header" }, [
+          i[8] || (i[8] = h("h3", null, "标签", -1)),
+          h("button", {
             class: "add-btn",
-            onClick: xt
+            onClick: Dt
           }, "添加标签")
         ]),
-        g("div", Fe, [
-          (y(!0), x(B, null, F(m.value, (l) => (y(), x("div", {
-            key: l.id,
-            class: "label-item"
+        h("div", os, [
+          (v(!0), m(N, null, J(_.value, (a) => (v(), m("div", {
+            key: a.id,
+            class: "label-item",
+            style: U({ backgroundColor: a.color + "1A", color: a.color })
           }, [
-            g("div", Oe, [
-              g("label", {
+            h("div", as, [
+              h("label", {
                 class: "color-wrapper",
-                style: V({ backgroundColor: l.color })
+                style: U({ backgroundColor: a.color })
               }, [
-                lt(g("input", {
+                ft(h("input", {
                   type: "color",
-                  "onUpdate:modelValue": (h) => l.color = h,
-                  onChange: (h) => Ct(l),
+                  "onUpdate:modelValue": (d) => a.color = d,
+                  onChange: (d) => $t(a),
                   style: { visibility: "hidden", width: "0", height: "0" }
-                }, null, 40, Ee), [
-                  [rt, l.color]
+                }, null, 40, ls), [
+                  [mt, a.color]
                 ])
               ], 4),
-              g("span", {
+              h("span", {
                 class: "label-name",
-                title: l.name
-              }, P(l.name), 9, Ve),
-              g("span", {
+                title: a.name
+              }, z(a.name), 9, cs),
+              h("span", {
                 class: "action-icon eye",
-                onClick: (h) => At(l)
+                onClick: (d) => Lt(a)
               }, [
-                l.visible ? (y(), yt(H, {
+                a.visible ? (v(), vt(L, {
                   key: 0,
                   name: "view"
-                })) : (y(), yt(H, {
+                })) : (v(), vt(L, {
                   key: 1,
                   name: "hide"
                 }))
-              ], 8, Ne),
-              g("div", We, [
-                s[12] || (s[12] = g("span", { class: "dots" }, "•••", -1)),
-                g("span", {
+              ], 8, rs),
+              h("div", hs, [
+                i[9] || (i[9] = h("span", { class: "dots" }, "•••", -1)),
+                h("span", {
                   class: "delete-btn",
-                  onClick: (h) => _t(l.id),
+                  onClick: (d) => Bt(a.id),
                   title: "删除"
                 }, [
-                  L(H, { name: "delete" })
-                ], 8, Je)
+                  R(L, { name: "delete" })
+                ], 8, ds)
               ])
             ])
-          ]))), 128))
+          ], 4))), 128))
         ])
       ])),
-      U.value ? (y(), x("div", je, [
-        g("div", Ye, [
-          s[15] || (s[15] = g("h3", null, "新增标签", -1)),
-          g("div", Xe, [
-            s[13] || (s[13] = g("label", null, "名称", -1)),
-            lt(g("input", {
-              "onUpdate:modelValue": s[3] || (s[3] = (l) => k.value.name = l),
-              placeholder: "请输入标签名称",
-              class: "modal-input"
-            }, null, 512), [
-              [rt, k.value.name]
-            ])
-          ]),
-          g("div", qe, [
-            s[14] || (s[14] = g("label", null, "颜色", -1)),
-            g("div", Ge, [
-              lt(g("input", {
-                type: "color",
-                "onUpdate:modelValue": s[4] || (s[4] = (l) => k.value.color = l),
-                class: "modal-color-picker"
+      q.value ? (v(), m("div", {
+        key: 2,
+        class: "modal-overlay",
+        onClick: It(dt, ["self"])
+      }, [
+        h("div", gs, [
+          i[12] || (i[12] = h("div", { class: "modal-header" }, [
+            h("h3", null, "新增标签")
+          ], -1)),
+          h("div", us, [
+            h("div", vs, [
+              i[10] || (i[10] = h("label", null, [
+                lt("标签名称 "),
+                h("span", { class: "required" }, "*")
+              ], -1)),
+              ft(h("input", {
+                "onUpdate:modelValue": i[3] || (i[3] = (a) => C.value.name = a),
+                placeholder: "请输入标签名称",
+                class: "modal-input",
+                autofocus: ""
               }, null, 512), [
-                [rt, k.value.color]
-              ]),
-              g("span", null, P(k.value.color), 1)
+                [mt, C.value.name]
+              ])
+            ]),
+            h("div", fs, [
+              i[11] || (i[11] = h("label", null, "标签颜色", -1)),
+              h("div", ms, [
+                h("label", {
+                  class: "color-picker-box",
+                  style: U({ backgroundColor: C.value.color })
+                }, [
+                  ft(h("input", {
+                    type: "color",
+                    "onUpdate:modelValue": i[4] || (i[4] = (a) => C.value.color = a),
+                    class: "modal-color-picker"
+                  }, null, 512), [
+                    [mt, C.value.color]
+                  ])
+                ], 4),
+                h("span", ps, z(C.value.color), 1)
+              ])
             ])
           ]),
-          g("div", { class: "modal-actions" }, [
-            g("button", {
-              onClick: gt,
+          h("div", ys, [
+            h("button", {
+              onClick: dt,
               class: "cancel-btn"
             }, "取消"),
-            g("button", {
-              onClick: bt,
-              class: "confirm-btn"
-            }, "确认")
+            h("button", {
+              onClick: Pt,
+              class: "confirm-btn",
+              disabled: !C.value.name.trim()
+            }, "确认", 8, ws)
           ])
         ])
-      ])) : T("", !0)
+      ])) : B("", !0)
     ], 2));
   }
-}), Ze = /* @__PURE__ */ et(Ke, [["__scopeId", "data-v-ccc538f3"]]), Qe = {
+}), bs = /* @__PURE__ */ rt(xs, [["__scopeId", "data-v-914fe07d"]]), Cs = {
   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 = {
+}, _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 = {
   key: 1,
   class: "loading-placeholder"
-}, ln = /* @__PURE__ */ tt({
+}, Ls = /* @__PURE__ */ ct({
   __name: "AnnotationThumbnail",
   props: {
     src: {},
@@ -1213,89 +1315,134 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
     strokeWidth: {},
     fontSize: {}
   },
-  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;
+  setup(w) {
+    const t = w, n = M(null), e = M(!1), l = M(0), o = M(0), c = () => {
+      n.value && (l.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) => {
+      var S;
+      if ((S = C.style) != null && S.strokeColor) return C.style.strokeColor;
       if (t.labels) {
-        const C = t.labels.find((R) => R.name === k.label);
-        if (C) return C.color;
+        const p = t.labels.find((H) => H.name === C.label);
+        if (p) return p.color;
       }
       return "#FF0000";
-    }, m = (k) => {
-      const I = k.coordinates, C = Math.min(I.x1, I.x2), R = Math.min(I.y1, I.y2), N = Math.abs(I.x1 - I.x2), j = Math.abs(I.y1 - I.y2);
-      return { x: C, y: R, width: N, height: j };
-    }, _ = (k) => k.coordinates.points.map((C) => `${C.x},${C.y}`).join(" "), U = (k) => {
-      if (k.type === "rectangle") {
-        const I = m(k);
-        return { x: I.x, y: I.y - 5 };
-      } else if (k.type === "polygon") {
-        const I = k.coordinates.points;
-        if (I.length > 0) return { x: I[0].x, y: I[0].y - 5 };
+    }, x = (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) => {
+      if (C.type === "rectangle") {
+        const S = x(C);
+        return { x: S.x, y: S.y - 5 };
+      } else if (C.type === "polygon") {
+        const S = C.coordinates.points;
+        if (S.length > 0) return { x: S[0].x, y: S[0].y - 5 };
+      } else {
+        if (C.type === "rotatedRect")
+          return { x: C.coordinates.x, y: C.coordinates.y - C.coordinates.height / 2 - 5 };
+        if (C.type === "point") {
+          const S = C.coordinates.points;
+          if (S.length > 0) return { x: S[0].x, y: S[0].y - 15 };
+        } else if (C.type === "category")
+          return { x: C.coordinates.x, y: C.coordinates.y };
       }
       return { x: 0, y: 0 };
-    };
-    return (k, I) => (y(), x("div", Qe, [
-      g("img", {
+    }, $ = (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 });
+    return (C, S) => (v(), m("div", Cs, [
+      h("img", {
         ref_key: "img",
-        ref: i,
-        src: f.src,
+        ref: n,
+        src: w.src,
         class: "thumbnail-image",
-        style: V({ objectFit: f.fit }),
-        onLoad: r,
-        alt: f.alt
-      }, null, 44, tn),
-      e.value ? (y(), x("svg", {
+        style: U({ objectFit: w.fit }),
+        onLoad: c,
+        alt: w.alt
+      }, null, 44, _s),
+      e.value ? (v(), m("svg", {
         key: 0,
         class: "annotation-overlay",
-        viewBox: `0 0 ${o.value} ${c.value}`,
-        preserveAspectRatio: a.value
+        viewBox: `0 0 ${l.value} ${o.value}`,
+        preserveAspectRatio: g.value
       }, [
-        (y(!0), x(B, null, F(f.annotations, (C) => (y(), x(B, {
-          key: C.id
+        (v(!0), m(N, null, J(w.annotations, (p) => (v(), m(N, {
+          key: p.id
         }, [
-          C.type === "rectangle" ? (y(), x("rect", {
+          p.type === "rectangle" ? (v(), m("rect", {
             key: 0,
-            x: m(C).x,
-            y: m(C).y,
-            width: m(C).width,
-            height: m(C).height,
-            stroke: w(C),
-            "stroke-width": d.value,
+            x: x(p).x,
+            y: x(p).y,
+            width: x(p).width,
+            height: x(p).height,
+            stroke: k(p),
+            "stroke-width": u.value,
             fill: "transparent"
-          }, null, 8, nn)) : T("", !0),
-          C.type === "polygon" ? (y(), x("polygon", {
+          }, null, 8, Is)) : p.type === "polygon" ? (v(), m("polygon", {
             key: 1,
-            points: _(C),
-            stroke: w(C),
-            "stroke-width": d.value,
+            points: D(p),
+            stroke: k(p),
+            "stroke-width": u.value,
             fill: "transparent"
-          }, null, 8, sn)) : T("", !0),
-          C.label ? (y(), x("text", {
+          }, null, 8, As)) : p.type === "rotatedRect" ? (v(), m("g", {
             key: 2,
-            x: U(C).x,
-            y: U(C).y,
-            fill: w(C),
-            "font-size": u.value,
-            "font-weight": "bold",
-            class: "anno-label"
-          }, P(C.label), 9, on)) : T("", !0)
+            transform: $(p)
+          }, [
+            h("rect", {
+              x: -p.coordinates.width / 2,
+              y: -p.coordinates.height / 2,
+              width: p.coordinates.width,
+              height: p.coordinates.height,
+              stroke: k(p),
+              "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,
+              cx: H.x,
+              cy: H.y,
+              r: u.value * 1.5,
+              fill: k(p),
+              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)
         ], 64))), 128))
-      ], 8, en)) : (y(), x("div", an, "Loading..."))
+      ], 8, ks)) : (v(), m("div", $s, "Loading..."))
     ], 512));
   }
-}), rn = /* @__PURE__ */ et(ln, [["__scopeId", "data-v-d2fd08ec"]]), cn = {
+}), Bs = /* @__PURE__ */ rt(Ls, [["__scopeId", "data-v-159a7956"]]), Rs = {
   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 = {
+}, 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 = {
   key: 0,
   class: "bottom-bar"
-}, pn = {
+}, Xs = {
   key: 1,
   class: "editor-view"
-}, xn = { class: "editor-header" }, bn = { class: "header-left" }, wn = { class: "editor-title" }, Cn = { class: "editor-content" }, An = /* @__PURE__ */ tt({
+}, qs = { class: "editor-header" }, Ks = { class: "header-left" }, Zs = { class: "editor-title" }, Qs = { class: "editor-content" }, ti = /* @__PURE__ */ ct({
   __name: "BatchAnnotator",
   props: {
     images: {},
@@ -1305,166 +1452,227 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
     thumbStrokeWidth: {},
     thumbFontSize: {}
   },
-  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 || []));
+  emits: ["export", "update:images", "imageClick", "update:labels", "pageChange"],
+  setup(w, { expose: t, emit: n }) {
+    const e = w, l = n, o = M("gallery"), c = M([]), g = M([]), u = M(0), r = M(null), k = M(null), x = 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: "" };
+      });
+      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));
+        });
+      }), 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) + "%";
+        return {
+          id: I.id,
+          name: I.name,
+          color: I.color,
+          count: F,
+          percentage: E,
+          cover: ((Y = y[I.name]) == null ? void 0 : Y.cover) || ""
+        };
+      });
+    }), H = (y) => ({
+      color: y.color,
+      backgroundColor: y.color + "1A"
+      // 1A represents ~10% opacity in hex
+    });
+    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 || []));
     }, { immediate: !0, deep: !0 });
-    const N = (p) => {
-      d.value = p, c.value = "editor", m.value && (m.value.scrollTop = 0), Gt(() => {
-        w.value && (w.value.scrollTop = 0), window.scrollTo(0, 0), requestAnimationFrame(() => {
-          var b, z;
-          (z = (b = u.value) == null ? void 0 : b.jumpTo) == null || z.call(b, p);
+    const O = (y) => {
+      u.value = y, o.value = "editor", l("pageChange", { nowPage: "editPage" }), x.value && (x.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);
         });
       });
-    }, j = (p, b) => {
-      if (R.value) {
-        N(p);
+    }, G = (y, b) => {
+      if (S.value) {
+        O(y);
         return;
       }
-      o("imageClick", { index: p, imageId: b.id, image: b });
-    }, X = (p) => r.value.findIndex((b) => b.id === p);
+      l("imageClick", { index: y, imageId: b.id, image: b });
+    }, Z = (y) => c.value.findIndex((b) => b.id === y);
     t({
-      openImageById: (p) => {
-        const b = X(p);
-        return b < 0 ? !1 : (N(b), !0);
+      openImageById: (y) => {
+        const b = Z(y);
+        return b < 0 ? !1 : (O(b), !0);
       },
-      triggerImageClickById: (p) => {
-        const b = X(p);
+      triggerImageClickById: (y) => {
+        const b = Z(y);
         if (b < 0)
           return !1;
-        const z = r.value[b];
-        return z ? (o("imageClick", { index: b, imageId: z.id, image: z }), !0) : !1;
+        const I = c.value[b];
+        return I ? (l("imageClick", { index: b, imageId: I.id, image: I }), !0) : !1;
       },
       getFinalData: () => ({
-        images: JSON.parse(JSON.stringify(r.value)),
-        labels: JSON.parse(JSON.stringify(a.value))
+        images: JSON.parse(JSON.stringify(c.value)),
+        labels: JSON.parse(JSON.stringify(g.value))
       })
     });
-    const nt = () => {
-      if (u.value && u.value.getCurrentAnnotation) {
-        const p = u.value.getCurrentAnnotation();
-        r.value[d.value] && (r.value[d.value].annotations = p.annotations);
+    const it = () => {
+      if (r.value && r.value.getCurrentAnnotation) {
+        const y = r.value.getCurrentAnnotation();
+        c.value[u.value] && (c.value[u.value].annotations = y.annotations);
       }
-      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));
+      o.value = "gallery", l("pageChange", { nowPage: "listPage" });
+    }, nt = () => {
+      l("export", c.value);
+    }, ht = (y) => {
+      u.value = y.currentIndex, c.value[y.currentIndex] && (c.value[y.currentIndex].annotations = y.currentAnnotations);
+    }, Q = (y) => {
+      if (r.value && r.value.getCurrentAnnotation) {
+        const b = r.value.getCurrentAnnotation();
+        c.value[u.value] && (c.value[u.value].annotations = b.annotations, l("update:images", c.value));
       }
-    }, W = (p) => {
-      a.value = JSON.parse(JSON.stringify(p || [])), o("update:labels", a.value);
+    }, j = (y) => {
+      g.value = JSON.parse(JSON.stringify(y || [])), l("update:labels", g.value);
     };
-    return (p, b) => (y(), x("div", {
+    return (y, b) => (v(), m("div", {
       ref_key: "batchRootRef",
-      ref: w,
+      ref: k,
       class: "batch-annotator"
     }, [
-      c.value === "gallery" ? (y(), x("div", cn, [
-        g("div", hn, [
-          g("h3", null, "批量查看与标注 (" + P(r.value.length) + " 张)", 1),
-          g("div", dn, [
-            (y(!0), x(B, null, F(a.value, (z) => (y(), x("span", {
-              key: z.id,
-              class: "label-badge",
-              style: V({ backgroundColor: z.color })
-            }, P(z.name), 5))), 128))
+      o.value === "gallery" ? (v(), m("div", Rs, [
+        h("div", Hs, [
+          h("div", Es, [
+            h("table", Us, [
+              b[1] || (b[1] = h("thead", null, [
+                h("tr", null, [
+                  h("th", null, "标签封面"),
+                  h("th", null, "标签名称"),
+                  h("th", null, "标注数"),
+                  h("th", null, "占比")
+                ])
+              ], -1)),
+              h("tbody", null, [
+                (v(!0), m(N, null, J(p.value, (I) => (v(), m("tr", {
+                  key: I.id,
+                  style: U(H(I))
+                }, [
+                  h("td", null, [
+                    h("div", Vs, [
+                      I.cover ? (v(), m("img", {
+                        key: 0,
+                        src: I.cover,
+                        class: "label-cover"
+                      }, null, 8, Os)) : (v(), m("div", {
+                        key: 1,
+                        class: "label-cover-empty",
+                        style: U({ backgroundColor: I.color })
+                      }, null, 4))
+                    ])
+                  ]),
+                  h("td", null, z(I.name), 1),
+                  h("td", null, z(I.count), 1),
+                  h("td", null, z(I.percentage), 1)
+                ], 4))), 128))
+              ])
+            ])
+          ]),
+          h("div", Fs, [
+            h("div", {
+              ref_key: "galleryGridRef",
+              ref: x,
+              class: "gallery-grid"
+            }, [
+              (v(!0), m(N, null, J(c.value, (I, F) => (v(), m("div", {
+                key: F,
+                class: "gallery-item",
+                onClick: (E) => G(F, I)
+              }, [
+                h("div", Ws, [
+                  R(Bs, {
+                    src: I.imageUrl,
+                    annotations: I.annotations || [],
+                    labels: g.value,
+                    fit: "cover",
+                    strokeWidth: e.thumbStrokeWidth,
+                    fontSize: e.thumbFontSize
+                  }, 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)
+                ])
+              ], 8, Ns))), 128))
+            ], 512)
           ])
         ]),
-        g("div", {
-          ref_key: "galleryGridRef",
-          ref: m,
-          class: "gallery-grid"
-        }, [
-          (y(!0), x(B, null, F(r.value, (z, q) => (y(), x("div", {
-            key: q,
-            class: "gallery-item",
-            onClick: (dt) => j(q, z)
-          }, [
-            g("div", un, [
-              L(rn, {
-                src: z.imageUrl,
-                annotations: z.annotations || [],
-                labels: a.value,
-                fit: "cover",
-                strokeWidth: e.thumbStrokeWidth,
-                fontSize: e.thumbFontSize
-              }, null, 8, ["src", "annotations", "labels", "strokeWidth", "fontSize"])
-            ]),
-            g("div", vn, [
-              g("span", mn, "#" + P(q + 1), 1),
-              g("span", fn, P((z.annotations || []).length) + " 标注", 1)
-            ])
-          ], 8, gn))), 128))
-        ], 512),
-        k.value ? (y(), x("div", yn, [
-          _.value ? (y(), x("button", {
+        $.value ? (v(), m("div", js, [
+          D.value ? (v(), m("button", {
             key: 0,
             class: "action-btn primary",
-            onClick: b[0] || (b[0] = (z) => N(0))
+            onClick: b[0] || (b[0] = (I) => O(0))
           }, [
-            L(H, { name: "edit" }),
-            K(" " + P(I.value), 1)
-          ])) : T("", !0),
-          U.value ? (y(), x("button", {
+            R(L, { name: "edit" }),
+            lt(" " + z(q.value), 1)
+          ])) : B("", !0),
+          _.value ? (v(), m("button", {
             key: 1,
             class: "action-btn success",
-            onClick: st
+            onClick: nt
           }, [
-            L(H, { name: "download" }),
-            K(" " + P(C.value), 1)
-          ])) : T("", !0)
-        ])) : T("", !0)
-      ])) : (y(), x("div", pn, [
-        g("div", xn, [
-          g("div", bn, [
-            g("button", {
+            R(L, { name: "download" }),
+            lt(" " + z(C.value), 1)
+          ])) : B("", !0)
+        ])) : B("", !0)
+      ])) : (v(), m("div", Xs, [
+        h("div", qs, [
+          h("div", Ks, [
+            h("button", {
               class: "back-btn",
-              onClick: nt
+              onClick: it
             }, [
-              L(H, { name: "back" }),
-              b[1] || (b[1] = K(" 返回列表 ", -1))
+              R(L, {
+                name: "back",
+                class: "back-icon"
+              }),
+              b[2] || (b[2] = lt()),
+              b[3] || (b[3] = h("span", { class: "back-text" }, "返回", -1))
             ]),
-            g("span", wn, "正在标注: " + P(d.value + 1) + " / " + P(r.value.length), 1)
+            h("span", Zs, "正在标注: " + z(u.value + 1) + " / " + z(c.value.length), 1)
           ])
         ]),
-        g("div", Cn, [
-          L(Ze, {
+        h("div", Qs, [
+          R(bs, {
             ref_key: "annotatorRef",
-            ref: u,
-            batchImages: r.value,
-            labels: a.value,
-            annotationTypes: ["rectangle", "polygon", "point", "rotatedRect"],
-            onBatchChange: it,
-            onAnnotationChange: E,
-            onLabelChange: W
+            ref: r,
+            batchImages: c.value,
+            labels: g.value,
+            annotationTypes: ["rectangle", "polygon", "point", "rotatedRect", "category"],
+            onBatchChange: ht,
+            onAnnotationChange: Q,
+            onLabelChange: j
           }, null, 8, ["batchImages", "labels"])
         ])
       ]))
     ], 512));
   }
-}), kn = /* @__PURE__ */ et(An, [["__scopeId", "data-v-0ae1040a"]]);
+}), ii = /* @__PURE__ */ rt(ti, [["__scopeId", "data-v-701c81a6"]]);
 export {
-  kn as BatchAnnotator,
-  Ze as ImageAnnotator,
-  kn as default
+  ii as BatchAnnotator,
+  bs as ImageAnnotator,
+  ii as default
 };