luo-image-annotator 0.0.1

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

@@ -0,0 +1,1152 @@
+var pt = Object.defineProperty;
+var xt = (u, t, e) => t in u ? pt(u, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : u[t] = e;
+var C = (u, t, e) => xt(u, typeof t != "symbol" ? t + "" : t, e);
+import { defineComponent as q, ref as k, computed as bt, onMounted as At, watch as it, resolveComponent as P, openBlock as m, createElementBlock as x, normalizeClass as N, createElementVNode as h, createVNode as b, withCtx as I, Fragment as $, renderList as F, createBlock as X, resolveDynamicComponent as Ct, createCommentVNode as L, normalizeStyle as K, toDisplayString as D, createTextVNode as J, withDirectives as j, vModelText as Y, nextTick as wt } from "vue";
+const Z = (u, t) => Math.sqrt(Math.pow(u.x - t.x, 2) + Math.pow(u.y - t.y, 2)), _t = (u, t) => {
+  let e = !1;
+  for (let n = 0, a = t.length - 1; n < t.length; a = n++) {
+    const i = t[n].x, o = t[n].y, s = t[a].x, r = t[a].y;
+    o > u.y != r > u.y && u.x < (s - i) * (u.y - o) / (r - o) + i && (e = !e);
+  }
+  return e;
+}, nt = (u, t, e) => {
+  const n = e * (Math.PI / 180), a = Math.cos(n), i = Math.sin(n), o = u.x - t.x, s = u.y - t.y;
+  return {
+    x: t.x + (o * a - s * i),
+    y: t.y + (o * i + s * a)
+  };
+};
+class kt {
+  constructor(t) {
+    C(this, "canvas");
+    C(this, "ctx");
+    C(this, "img");
+    C(this, "annotations", []);
+    // 状态
+    C(this, "currentTool", null);
+    C(this, "activeAnnotation", null);
+    C(this, "hoverAnnotation", null);
+    C(this, "isDrawing", !1);
+    C(this, "isDragging", !1);
+    C(this, "isPanning", !1);
+    // 平移模式
+    C(this, "panStartPoint", null);
+    // 平移起点
+    C(this, "dragStartPoint", null);
+    C(this, "dragStartAnnotation", null);
+    // 快照用于撤销/diff
+    C(this, "lastMouseMovePoint", null);
+    // 用于绘制辅助线
+    C(this, "isHoveringStartPoint", !1);
+    // 多边形闭合吸附状态
+    // 设置
+    C(this, "currentLabelColor", "#FF4081");
+    // 当前选中标签颜色
+    C(this, "visibleLabels", /* @__PURE__ */ new Set());
+    // 可见标签集合 (如果为空则全部可见，或者由外部控制渲染列表)
+    // 交互
+    C(this, "selectedHandleIndex", -1);
+    // -1: 主体, >=0: 顶点索引, -2: 旋转手柄
+    C(this, "hoverHandleIndex", -1);
+    // 视口
+    C(this, "scale", 1);
+    C(this, "offset", { x: 0, y: 0 });
+    C(this, "listeners", {});
+    C(this, "imageUrl", "");
+    this.canvas = t;
+    const e = t.getContext("2d");
+    if (!e) throw new Error("Could not get 2d context");
+    this.ctx = e, this.img = new Image(), this.img.crossOrigin = "Anonymous", this.img.onload = () => {
+      this.fitImageToCanvas(), this.render();
+    }, this.bindEvents();
+  }
+  // --- 公共 API ---
+  on(t, e) {
+    this.listeners[t] || (this.listeners[t] = []), this.listeners[t].push(e);
+  }
+  emit(t, e) {
+    this.listeners[t] && this.listeners[t].forEach((n) => n(e));
+  }
+  loadImage(t) {
+    this.imageUrl = t, this.img.src = t, this.activeAnnotation = null, this.isDrawing = !1;
+  }
+  setAnnotations(t) {
+    this.annotations = JSON.parse(JSON.stringify(t)), this.render();
+  }
+  getAnnotations() {
+    return this.annotations;
+  }
+  setTool(t) {
+    t === "pan" ? (this.currentTool = null, this.isPanning = !1, this.canvas.style.cursor = "grab") : t === "select" ? (this.currentTool = null, this.canvas.style.cursor = "default") : (this.currentTool = t, this.canvas.style.cursor = "crosshair"), this.activeAnnotation = null, this.isDrawing = !1, this.render();
+  }
+  setLabelStyle(t) {
+    this.currentLabelColor = t;
+  }
+  setVisibleLabels(t) {
+    this.visibleLabels = new Set(t), this.render();
+  }
+  zoom(t) {
+    const n = t > 0 ? this.scale * 1.1 : this.scale / 1.1;
+    if (n < 0.1 || n > 10) return;
+    const a = this.canvas.width / 2, i = this.canvas.height / 2, o = this.toImageCoords(a, i);
+    this.scale = n, this.offset.x = a - o.x * this.scale, this.offset.y = i - o.y * this.scale, this.render();
+  }
+  resize() {
+    this.fitImageToCanvas(), this.render();
+  }
+  // --- 坐标系统 ---
+  toImageCoords(t, e) {
+    return {
+      x: (t - this.offset.x) / this.scale,
+      y: (e - this.offset.y) / this.scale
+    };
+  }
+  toScreenCoords(t, e) {
+    return {
+      x: t * this.scale + this.offset.x,
+      y: e * this.scale + this.offset.y
+    };
+  }
+  fitImageToCanvas() {
+    const t = this.canvas.parentElement;
+    if (t) {
+      if (this.canvas.width = t.clientWidth, this.canvas.height = t.clientHeight, this.img.width === 0) return;
+      const e = this.canvas.width / this.img.width, n = this.canvas.height / this.img.height;
+      this.scale = Math.min(e, n), this.offset.x = (this.canvas.width - this.img.width * this.scale) / 2, this.offset.y = (this.canvas.height - this.img.height * this.scale) / 2;
+    }
+  }
+  // --- 事件处理 ---
+  bindEvents() {
+    this.canvas.addEventListener("mousedown", this.handleMouseDown.bind(this)), this.canvas.addEventListener("mousemove", this.handleMouseMove.bind(this)), this.canvas.addEventListener("mouseup", this.handleMouseUp.bind(this)), this.canvas.addEventListener("mouseleave", this.handleMouseUp.bind(this)), window.addEventListener("keydown", this.handleKeyDown.bind(this));
+  }
+  handleKeyDown(t) {
+    (t.key === "Delete" || t.key === "Backspace") && this.activeAnnotation && this.deleteAnnotation(this.activeAnnotation.id);
+  }
+  deleteAnnotation(t) {
+    const e = this.annotations.findIndex((n) => n.id === t);
+    if (e > -1) {
+      const n = this.annotations[e];
+      this.annotations.splice(e, 1), this.activeAnnotation = null, this.emit("annotationChange", {
+        action: "delete",
+        changedItem: n,
+        imageUrl: this.imageUrl
+      }), this.render();
+    }
+  }
+  handleMouseDown(t) {
+    const e = this.canvas.getBoundingClientRect(), n = t.clientX - e.left, a = t.clientY - e.top, i = this.toImageCoords(n, a);
+    if (this.canvas.style.cursor === "grab" || this.canvas.style.cursor === "grabbing") {
+      this.isPanning = !0, this.panStartPoint = { x: n, y: a }, this.canvas.style.cursor = "grabbing";
+      return;
+    }
+    if (this.activeAnnotation) {
+      const r = this.getHitHandle(n, a, this.activeAnnotation);
+      if (r !== -100) {
+        this.isDragging = !0, this.dragStartPoint = i, this.selectedHandleIndex = r, this.dragStartAnnotation = JSON.parse(JSON.stringify(this.activeAnnotation));
+        return;
+      }
+    }
+    const o = this.getHitCategory(n, a);
+    if (o) {
+      this.activeAnnotation = o, this.isDragging = !1, this.selectedHandleIndex = -1, this.emit("annotationChange", { action: "select", changedItem: o, imageUrl: this.imageUrl }), this.render();
+      return;
+    }
+    const s = this.getHitAnnotation(i);
+    if (this.currentTool) {
+      if (this.isDrawing && this.currentTool === "polygon" && this.activeAnnotation) {
+        const r = this.activeAnnotation.coordinates;
+        if (r.points.length > 2 && Z(i, r.points[0]) < 20 / this.scale) {
+          this.finishDrawing();
+          return;
+        }
+        this.startDrawing(i);
+        return;
+      }
+      if (this.currentTool) {
+        if (this.currentTool === "polygon" && !this.isDrawing) {
+          this.startDrawing(i);
+          return;
+        }
+        if (s) {
+          this.activeAnnotation = s, this.isDragging = !0, this.dragStartPoint = i, this.selectedHandleIndex = -1, this.dragStartAnnotation = JSON.parse(JSON.stringify(s)), this.emit("annotationChange", { action: "select", changedItem: s, imageUrl: this.imageUrl }), this.render();
+          return;
+        }
+        this.startDrawing(i);
+      } else s ? (this.activeAnnotation = s, this.isDragging = !0, this.dragStartPoint = i, this.selectedHandleIndex = -1, this.dragStartAnnotation = JSON.parse(JSON.stringify(s)), this.emit("annotationChange", { action: "select", changedItem: s, imageUrl: this.imageUrl }), this.render()) : (this.activeAnnotation = null, this.render());
+    } else if (s) {
+      if (!(this.visibleLabels.size > 0 && !this.visibleLabels.has(s.label))) {
+        this.activeAnnotation = s, this.isDragging = !0, this.dragStartPoint = i, this.selectedHandleIndex = -1, this.dragStartAnnotation = JSON.parse(JSON.stringify(s)), this.emit("annotationChange", { action: "select", changedItem: s, imageUrl: this.imageUrl }), this.render();
+        return;
+      }
+    } else
+      this.activeAnnotation = null, this.render();
+  }
+  handleMouseMove(t) {
+    const e = this.canvas.getBoundingClientRect(), n = t.clientX - e.left, a = t.clientY - e.top, i = this.toImageCoords(n, a);
+    if (this.isPanning && this.panStartPoint) {
+      const o = n - this.panStartPoint.x, s = a - this.panStartPoint.y;
+      this.offset.x += o, this.offset.y += s, this.panStartPoint = { x: n, y: a }, this.render();
+      return;
+    }
+    if (this.lastMouseMovePoint = i, this.isDrawing) {
+      if (this.currentTool === "polygon" && this.activeAnnotation) {
+        const o = this.activeAnnotation.coordinates;
+        if (o.points.length > 2) {
+          const s = o.points[0], r = Z(i, s);
+          this.isHoveringStartPoint = r < 20 / this.scale;
+        } else
+          this.isHoveringStartPoint = !1;
+      }
+      this.updateDrawing(i);
+    } else this.isDragging && this.activeAnnotation && this.dragStartPoint ? this.updateDragging(i) : this.checkHover(n, a, i);
+    this.render();
+  }
+  handleMouseUp(t) {
+    if (this.isPanning) {
+      this.isPanning = !1, this.panStartPoint = null, this.canvas.style.cursor = "grab";
+      return;
+    }
+    if (this.isDrawing) {
+      if (this.currentTool === "polygon") {
+        this.render();
+        return;
+      }
+      this.finishDrawing();
+    } else this.isDragging && this.activeAnnotation && this.emit("annotationChange", {
+      action: "update",
+      changedItem: this.activeAnnotation,
+      imageUrl: this.imageUrl
+    });
+    this.currentTool !== "polygon" && (this.isDrawing = !1), this.isDragging = !1, this.dragStartPoint = null, this.selectedHandleIndex = -1, this.render();
+  }
+  // --- 绘制逻辑 ---
+  // 辅助函数：将 hex 转换为 rgba
+  hexToRgba(t, e) {
+    if (!t.startsWith("#")) return t;
+    const n = parseInt(t.slice(1, 3), 16), a = parseInt(t.slice(3, 5), 16), i = parseInt(t.slice(5, 7), 16);
+    return `rgba(${n}, ${a}, ${i}, ${e})`;
+  }
+  startDrawing(t) {
+    if (!this.currentTool) return;
+    const e = Date.now().toString();
+    if (this.hexToRgba(this.currentLabelColor, 0.2), this.currentLabelColor, this.currentTool === "rectangle")
+      this.isDrawing = !0, this.dragStartPoint = t, this.activeAnnotation = {
+        id: e,
+        type: "rectangle",
+        label: "",
+        // 组件应填充此项
+        coordinates: { x1: t.x, y1: t.y, x2: t.x, y2: t.y },
+        style: { strokeColor: this.currentLabelColor }
+      };
+    else if (this.currentTool === "point") {
+      const n = {
+        id: e,
+        type: "point",
+        label: "",
+        coordinates: { points: [t] },
+        style: { strokeColor: this.currentLabelColor }
+      };
+      this.annotations.push(n), this.emit("annotationChange", { action: "add", changedItem: n, imageUrl: this.imageUrl }), this.activeAnnotation = n;
+    } else if (this.currentTool === "polygon")
+      this.activeAnnotation && this.activeAnnotation.type === "polygon" && this.isDrawing ? this.activeAnnotation.coordinates.points.push(t) : (this.isDrawing = !0, this.activeAnnotation = {
+        id: e,
+        type: "polygon",
+        label: "",
+        coordinates: { points: [t] },
+        style: { strokeColor: this.currentLabelColor }
+      });
+    else if (this.currentTool === "category") {
+      const n = {
+        id: e,
+        type: "category",
+        label: "",
+        // 将被填充
+        coordinates: null,
+        // 或位置？
+        style: { strokeColor: this.currentLabelColor }
+      };
+      this.annotations.push(n), this.emit("annotationChange", { action: "add", changedItem: n, imageUrl: this.imageUrl }), this.activeAnnotation = n;
+    } else this.currentTool === "rotatedRect" && (this.isDrawing = !0, this.dragStartPoint = t, this.activeAnnotation = {
+      id: e,
+      type: "rotatedRect",
+      label: "",
+      coordinates: { x: t.x, y: t.y, width: 0, height: 0, angle: 0 },
+      style: { strokeColor: this.currentLabelColor }
+    });
+  }
+  updateDrawing(t) {
+    if (this.activeAnnotation)
+      if (this.activeAnnotation.type === "rectangle" && this.dragStartPoint) {
+        const e = this.activeAnnotation.coordinates;
+        e.x2 = t.x, e.y2 = t.y;
+      } else if (this.activeAnnotation.type === "rotatedRect" && this.dragStartPoint) {
+        const e = this.activeAnnotation.coordinates, n = Math.abs(t.x - this.dragStartPoint.x), a = Math.abs(t.y - this.dragStartPoint.y);
+        e.width = n * 2, e.height = a * 2;
+      } else this.activeAnnotation.type;
+  }
+  finishDrawing() {
+    if (this.activeAnnotation) {
+      if (this.activeAnnotation.type === "rectangle") {
+        const t = this.activeAnnotation.coordinates;
+        if (Math.abs(t.x1 - t.x2) < 2 || Math.abs(t.y1 - t.y2) < 2) {
+          this.activeAnnotation = null, this.isDrawing = !1;
+          return;
+        }
+        const e = Math.min(t.x1, t.x2), n = Math.max(t.x1, t.x2), a = Math.min(t.y1, t.y2), i = Math.max(t.y1, t.y2);
+        t.x1 = e, t.x2 = n, t.y1 = a, t.y2 = i, this.annotations.push(this.activeAnnotation), this.emit("annotationChange", { action: "add", changedItem: this.activeAnnotation, imageUrl: this.imageUrl });
+      } else if (this.activeAnnotation.type === "polygon") {
+        if (this.activeAnnotation.coordinates.points.length < 3) {
+          this.activeAnnotation = null, this.isDrawing = !1;
+          return;
+        }
+        this.annotations.push(this.activeAnnotation), this.emit("annotationChange", { action: "add", changedItem: this.activeAnnotation, imageUrl: this.imageUrl });
+      } else if (this.activeAnnotation.type === "rotatedRect") {
+        const t = this.activeAnnotation.coordinates;
+        if (t.width < 2 || t.height < 2) {
+          this.activeAnnotation = null, this.isDrawing = !1;
+          return;
+        }
+        this.annotations.push(this.activeAnnotation), this.emit("annotationChange", { action: "add", changedItem: this.activeAnnotation, imageUrl: this.imageUrl });
+      }
+      this.activeAnnotation.type;
+    }
+    this.isDrawing = !1;
+  }
+  updateDragging(t) {
+    if (!this.activeAnnotation || !this.dragStartPoint || !this.dragStartAnnotation) return;
+    const e = t.x - this.dragStartPoint.x, n = t.y - this.dragStartPoint.y;
+    this.selectedHandleIndex === -1 ? this.moveAnnotation(this.activeAnnotation, this.dragStartAnnotation, e, n) : this.resizeAnnotation(this.activeAnnotation, this.dragStartAnnotation, this.selectedHandleIndex, t);
+  }
+  moveAnnotation(t, e, n, a) {
+    if (t.type === "rectangle") {
+      const i = e.coordinates, o = t.coordinates;
+      o.x1 = i.x1 + n, o.x2 = i.x2 + n, o.y1 = i.y1 + a, o.y2 = i.y2 + a;
+    } else if (t.type === "point") {
+      const i = e.coordinates, o = t.coordinates;
+      o.points = i.points.map((s) => ({ x: s.x + n, y: s.y + a }));
+    } else if (t.type === "rotatedRect") {
+      const i = e.coordinates, o = t.coordinates;
+      o.x = i.x + n, o.y = i.y + a;
+    } else if (t.type === "polygon") {
+      const i = e.coordinates, o = t.coordinates;
+      o.points = i.points.map((s) => ({ x: s.x + n, y: s.y + a }));
+    }
+  }
+  resizeAnnotation(t, e, n, a) {
+    if (t.type === "rectangle") {
+      const i = t.coordinates;
+      n === 0 && (i.x1 = a.x, i.y1 = a.y), n === 1 && (i.x2 = a.x, i.y1 = a.y), n === 2 && (i.x2 = a.x, i.y2 = a.y), n === 3 && (i.x1 = a.x, i.y2 = a.y);
+    } else if (t.type === "polygon") {
+      const i = t.coordinates;
+      n >= 0 && n < i.points.length && (i.points[n] = a);
+    } else if (t.type === "point") {
+      const i = t.coordinates;
+      n >= 0 && n < i.points.length && (i.points[n] = a);
+    } else if (t.type === "rotatedRect") {
+      const i = t.coordinates;
+      if (n === -2) {
+        const o = i.x, s = i.y, r = a.x - o, v = a.y - s;
+        let d = Math.atan2(v, r) * 180 / Math.PI;
+        d += 90, i.angle = d;
+      } else {
+        const o = i.angle * Math.PI / 180, s = Math.cos(-o), r = Math.sin(-o), v = a.x - i.x, d = a.y - i.y, g = v * s - d * r, f = v * r + d * s;
+        (n === 0 || n === 3) && (i.width / 2, i.width = Math.abs(g) * 2), (n === 1 || n === 2) && (i.width = Math.abs(g) * 2), (n === 0 || n === 1) && (i.height = Math.abs(f) * 2), (n === 2 || n === 3) && (i.height = Math.abs(f) * 2);
+      }
+    }
+  }
+  // --- 命中测试和渲染辅助函数 ---
+  getHitAnnotation(t) {
+    for (let e = this.annotations.length - 1; e >= 0; e--) {
+      const n = this.annotations[e];
+      if (this.isPointInAnnotation(t, n))
+        return n;
+    }
+    return null;
+  }
+  isPointInAnnotation(t, e) {
+    if (e.type === "rectangle") {
+      const n = e.coordinates;
+      return t.x >= n.x1 && t.x <= n.x2 && t.y >= n.y1 && t.y <= n.y2;
+    } else if (e.type === "polygon") {
+      const n = e.coordinates;
+      return _t(t, n.points);
+    } else if (e.type === "rotatedRect") {
+      const n = e.coordinates, a = nt(t, { x: n.x, y: n.y }, -n.angle), i = n.width / 2, o = n.height / 2;
+      return a.x >= n.x - i && a.x <= n.x + i && a.y >= n.y - o && a.y <= n.y + o;
+    } else if (e.type === "point")
+      return e.coordinates.points.some((a) => Z(t, a) < 10 / this.scale);
+    return !1;
+  }
+  getHitHandle(t, e, n) {
+    const a = this.getAnnotationHandles(n), i = 6;
+    for (let o = 0; o < a.length; o++) {
+      const s = a[o], r = this.toScreenCoords(s.x, s.y);
+      if (Math.abs(t - r.x) < i && Math.abs(e - r.y) < i)
+        return n.type === "rotatedRect" && o === 4 ? -2 : o;
+    }
+    return -100;
+  }
+  getAnnotationHandles(t) {
+    if (t.type === "rectangle") {
+      const e = t.coordinates;
+      return [
+        { x: e.x1, y: e.y1 },
+        // 左上
+        { x: e.x2, y: e.y1 },
+        // 右上
+        { x: e.x2, y: e.y2 },
+        // 右下
+        { x: e.x1, y: e.y2 }
+        // 左下
+      ];
+    } else {
+      if (t.type === "polygon")
+        return t.coordinates.points;
+      if (t.type === "point")
+        return t.coordinates.points;
+      if (t.type === "rotatedRect") {
+        const e = t.coordinates, n = { x: e.x, y: e.y }, a = e.width / 2, i = e.height / 2, o = { x: e.x - a, y: e.y - i }, s = { x: e.x + a, y: e.y - i }, r = { x: e.x + a, y: e.y + i }, v = { x: e.x - a, y: e.y + i }, d = { x: e.x, y: e.y - i - 20 / this.scale };
+        return [o, s, r, v, d].map((g) => nt(g, n, e.angle));
+      }
+    }
+    return [];
+  }
+  checkHover(t, e, n) {
+    const a = this.getHitCategory(t, e);
+    if (a) {
+      this.canvas.style.cursor = "pointer", this.hoverAnnotation = a;
+      return;
+    }
+    if (this.activeAnnotation && this.getHitHandle(t, e, this.activeAnnotation) !== -100) {
+      this.canvas.style.cursor = "pointer";
+      return;
+    }
+    const i = this.getHitAnnotation(n);
+    i ? (this.canvas.style.cursor = "move", this.hoverAnnotation = i) : (this.canvas.style.cursor = "default", this.hoverAnnotation = null);
+  }
+  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) => {
+      t !== this.activeAnnotation && this.drawItem(t, !1);
+    }), this.activeAnnotation && this.drawItem(this.activeAnnotation, !0), this.renderCategories();
+  }
+  renderCategories() {
+    const t = this.annotations.filter((r) => r.type === "category");
+    if (t.length === 0) return;
+    this.ctx.save(), this.ctx.font = "14px sans-serif", this.ctx.textBaseline = "top";
+    let e = 10;
+    const n = 10, a = 8, i = 4, o = 24, s = 8;
+    t.forEach((r) => {
+      const v = r.label || "Unlabeled", d = this.ctx.measureText(v).width + a * 2, g = this.activeAnnotation === r, f = this.hoverAnnotation === r;
+      this.ctx.fillStyle = g ? "#E3F2FD" : f ? "#F5F5F5" : "rgba(255, 255, 255, 0.9)", this.ctx.strokeStyle = g ? "#2196F3" : "#666", this.ctx.lineWidth = g ? 2 : 1, this.ctx.beginPath(), this.ctx.rect(e, n, d, o), this.ctx.fill(), this.ctx.stroke(), this.ctx.fillStyle = g ? "#1976D2" : "#333", this.ctx.fillText(v, e + a, n + i), e += d + s;
+    }), this.ctx.restore();
+  }
+  getHitCategory(t, e) {
+    const n = this.annotations.filter((d) => d.type === "category");
+    if (n.length === 0) return null;
+    this.ctx.save(), this.ctx.font = "14px sans-serif";
+    let a = 10;
+    const i = 10, o = 8, s = 24, r = 8;
+    let v = null;
+    for (const d of n) {
+      const g = d.label || "Unlabeled", f = this.ctx.measureText(g).width + o * 2;
+      if (t >= a && t <= a + f && e >= i && e <= i + s) {
+        v = d;
+        break;
+      }
+      a += f + r;
+    }
+    return this.ctx.restore(), v;
+  }
+  drawItem(t, e) {
+    var i;
+    if (this.visibleLabels.size > 0 && !this.visibleLabels.has(t.label) && !e)
+      return;
+    this.ctx.save();
+    const n = ((i = t.style) == null ? void 0 : i.strokeColor) || "#FF4081", a = e ? "#00E5FF" : n;
+    if (this.ctx.strokeStyle = a, this.ctx.lineWidth = 2, e ? this.ctx.fillStyle = "rgba(0, 229, 255, 0.2)" : this.ctx.fillStyle = this.hexToRgba(n, 0.2), t.type === "rectangle") {
+      const o = t.coordinates, s = this.toScreenCoords(o.x1, o.y1), r = this.toScreenCoords(o.x2, o.y2), v = Math.min(s.x, r.x), d = Math.min(s.y, r.y), g = Math.abs(s.x - r.x), f = Math.abs(s.y - r.y);
+      this.ctx.strokeRect(v, d, g, f), this.ctx.fillStyle = e ? "rgba(0, 229, 255, 0.2)" : "rgba(255, 64, 129, 0.2)", this.ctx.fillRect(v, d, g, f), e && this.drawHandles(this.getAnnotationHandles(t));
+    } else if (t.type === "polygon") {
+      const o = t.coordinates;
+      if (o.points.length === 0) {
+        this.ctx.restore();
+        return;
+      }
+      this.ctx.beginPath();
+      const s = this.toScreenCoords(o.points[0].x, o.points[0].y);
+      this.ctx.moveTo(s.x, s.y);
+      for (let r = 1; r < o.points.length; r++) {
+        const v = this.toScreenCoords(o.points[r].x, o.points[r].y);
+        this.ctx.lineTo(v.x, v.y);
+      }
+      if (!this.isDrawing || t !== this.activeAnnotation)
+        this.ctx.closePath();
+      else if (this.lastMouseMovePoint) {
+        let r = this.lastMouseMovePoint;
+        if (this.isHoveringStartPoint && o.points.length > 0) {
+          r = o.points[0];
+          const d = this.toScreenCoords(o.points[0].x, o.points[0].y);
+          this.ctx.save(), this.ctx.beginPath(), this.ctx.arc(d.x, d.y, 10, 0, Math.PI * 2), this.ctx.fillStyle = "rgba(255, 215, 0, 0.6)", this.ctx.strokeStyle = "#FFFFFF", this.ctx.lineWidth = 2, this.ctx.fill(), this.ctx.stroke(), this.ctx.restore();
+        }
+        const v = this.toScreenCoords(r.x, r.y);
+        this.ctx.lineTo(v.x, v.y);
+      }
+      this.ctx.stroke(), this.ctx.fillStyle = e ? "rgba(0, 229, 255, 0.2)" : "rgba(255, 64, 129, 0.2)", this.ctx.fill(), e && this.drawHandles(this.getAnnotationHandles(t));
+    } else if (t.type === "rotatedRect") {
+      const o = t.coordinates;
+      this.ctx.translate(this.toScreenCoords(o.x, o.y).x, this.toScreenCoords(o.x, o.y).y), this.ctx.rotate(o.angle * Math.PI / 180);
+      const s = o.width * this.scale, r = o.height * this.scale;
+      this.ctx.strokeRect(-s / 2, -r / 2, s, r), this.ctx.fillStyle = e ? "rgba(0, 229, 255, 0.2)" : "rgba(255, 64, 129, 0.2)", this.ctx.fillRect(-s / 2, -r / 2, s, r), this.ctx.rotate(-o.angle * Math.PI / 180), this.ctx.translate(-this.toScreenCoords(o.x, o.y).x, -this.toScreenCoords(o.x, o.y).y), e && this.drawHandles(this.getAnnotationHandles(t));
+    } else t.type === "point" && t.coordinates.points.forEach((s) => {
+      const r = this.toScreenCoords(s.x, s.y);
+      this.ctx.beginPath(), this.ctx.arc(r.x, r.y, 5, 0, Math.PI * 2), this.ctx.fillStyle = e ? "#00E5FF" : n, this.ctx.fill(), this.ctx.stroke();
+    });
+    this.ctx.restore();
+  }
+  drawHandles(t) {
+    this.ctx.fillStyle = "#FFFFFF", this.ctx.strokeStyle = "#000000", this.ctx.lineWidth = 1, t.forEach((e) => {
+      const n = this.toScreenCoords(e.x, e.y);
+      this.ctx.fillRect(n.x - 4, n.y - 4, 8, 8), this.ctx.strokeRect(n.x - 4, n.y - 4, 8, 8);
+    });
+  }
+}
+const St = {
+  key: 0,
+  class: "left-sidebar"
+}, It = ["onClick", "title"], Pt = { class: "center-area" }, Dt = {
+  key: 0,
+  class: "top-bar"
+}, Tt = { class: "label-selector" }, Ht = { class: "tags-row" }, Lt = ["onClick"], Mt = {
+  key: 0,
+  class: "no-labels"
+}, $t = {
+  key: 1,
+  class: "batch-nav"
+}, Rt = ["disabled"], Ut = ["disabled"], Ft = {
+  key: 1,
+  class: "right-sidebar"
+}, Ot = { class: "label-list" }, Et = { class: "label-row" }, zt = ["onUpdate:modelValue", "onChange"], Bt = ["title"], Nt = ["onClick"], Jt = { class: "action-icon more-actions" }, Wt = ["onClick"], Vt = {
+  key: 2,
+  class: "modal-overlay"
+}, Xt = { class: "modal-content" }, jt = { class: "form-group" }, Yt = { class: "form-group" }, Zt = { class: "color-input-wrapper" }, Kt = /* @__PURE__ */ q({
+  __name: "ImageAnnotator",
+  props: {
+    annotationTypes: { default: () => ["rectangle", "polygon", "point", "rotatedRect"] },
+    batchImages: { default: () => [] },
+    labels: { default: () => [] },
+    defaultActiveType: {},
+    theme: { default: "light" },
+    readOnly: { type: Boolean, default: !1 }
+  },
+  emits: ["annotationChange", "batchChange", "labelChange"],
+  setup(u, { expose: t, emit: e }) {
+    const n = u, a = e, i = k(null), o = k(null), s = k(null), r = k(null), v = k(0), d = k([]), g = k(""), f = k(!1), y = k({ name: "", color: "#FF0000" }), _ = bt(() => n.annotationTypes.filter((l) => l !== "category")), S = (l) => ({
+      rectangle: "Crop",
+      polygon: "Connection",
+      point: "Aim",
+      rotatedRect: "RefreshRight",
+      category: "PriceTag"
+    })[l] || l, O = (l) => ({
+      rectangle: "矩形框",
+      polygon: "多边形",
+      point: "关键点",
+      rotatedRect: "旋转矩形",
+      category: "分类标签"
+    })[l] || l;
+    At(() => {
+      if (i.value) {
+        s.value = new kt(i.value), s.value.on("annotationChange", (c) => {
+          if (c.action === "add" && c.changedItem) {
+            const A = d.value.find((w) => w.id === g.value);
+            A && (c.changedItem.label = A.name);
+          }
+          a("annotationChange", c);
+        }), R(), M();
+        const l = new ResizeObserver(() => {
+          var c;
+          (c = s.value) == null || c.resize();
+        });
+        o.value && l.observe(o.value);
+      }
+    });
+    const M = () => {
+      if (!s.value) return;
+      const l = d.value.find((A) => A.id === g.value);
+      l && s.value.setLabelStyle(l.color);
+      const c = d.value.filter((A) => A.visible).map((A) => A.name);
+      s.value.setVisibleLabels(c);
+    }, R = () => {
+      if (s.value && n.batchImages.length > 0) {
+        const l = n.batchImages[v.value];
+        s.value.loadImage(l.imageUrl), l.annotations && s.value.setAnnotations(l.annotations);
+      }
+    }, E = (l) => {
+      var c, A;
+      if (r.value = l, l !== "pan" && l !== "select" && d.value.length === 0) {
+        alert("请先创建标签！");
+        return;
+      }
+      l === "pan" || l === "select" ? (c = s.value) == null || c.setTool(l) : (A = s.value) == null || A.setTool(l);
+    }, H = () => {
+      var l;
+      (l = s.value) != null && l.activeAnnotation && s.value.deleteAnnotation(s.value.activeAnnotation.id);
+    }, z = () => {
+      var l;
+      return (l = s.value) == null ? void 0 : l.zoom(1);
+    }, Q = () => {
+      var l;
+      return (l = s.value) == null ? void 0 : l.zoom(-1);
+    }, st = () => {
+      y.value = { name: "", color: "#2196F3" }, f.value = !0;
+    }, tt = () => {
+      f.value = !1;
+    }, ot = () => {
+      if (!y.value.name.trim()) {
+        alert("请输入标签名称");
+        return;
+      }
+      const c = {
+        id: Date.now().toString(),
+        name: y.value.name,
+        color: y.value.color,
+        visible: !0
+      };
+      d.value.push(c), a("labelChange", d.value), d.value.length === 1 && B(c), tt();
+    }, B = (l) => {
+      var c;
+      g.value = l.id, (c = s.value) == null || c.setLabelStyle(l.color);
+    }, at = (l, c) => {
+      if (!l.startsWith("#")) return l;
+      let A = 0, w = 0, T = 0;
+      return l.length === 4 ? (A = parseInt(l[1] + l[1], 16), w = parseInt(l[2] + l[2], 16), T = parseInt(l[3] + l[3], 16)) : l.length === 7 && (A = parseInt(l.slice(1, 3), 16), w = parseInt(l.slice(3, 5), 16), T = parseInt(l.slice(5, 7), 16)), `rgba(${A}, ${w}, ${T}, ${c})`;
+    }, lt = (l) => {
+      var c;
+      if (l.id === g.value && ((c = s.value) == null || c.setLabelStyle(l.color)), s.value) {
+        const A = s.value.getAnnotations();
+        let w = !1;
+        A.forEach((T) => {
+          T.label === l.name && (T.style || (T.style = {}), T.style.strokeColor = l.color, T.style.fillColor = at(l.color, 0.2), w = !0);
+        }), w && s.value.render();
+      }
+      a("labelChange", d.value);
+    }, rt = (l) => {
+      l.visible = !l.visible, M();
+    }, ct = (l) => {
+      const c = d.value.findIndex((A) => A.id === l);
+      c > -1 && (d.value.splice(c, 1), a("labelChange", d.value), g.value === l && (g.value = d.value.length > 0 ? d.value[0].id : "", g.value && B(d.value[0])), M());
+    };
+    it(() => n.labels, (l) => {
+      const c = JSON.parse(JSON.stringify(l || []));
+      if (d.value = c, d.value.length > 0)
+        if (!g.value || !d.value.find((A) => A.id === g.value))
+          B(d.value[0]);
+        else {
+          const A = d.value.find((w) => w.id === g.value);
+          A && B(A);
+        }
+      else
+        g.value = "";
+      M();
+    }, { immediate: !0, deep: !0 });
+    const ht = () => {
+      v.value > 0 && (W(), v.value--, R(), V());
+    }, dt = () => {
+      v.value < n.batchImages.length - 1 && (W(), v.value++, R(), V());
+    }, W = () => {
+      if (s.value) {
+        const l = s.value.getAnnotations();
+        n.batchImages[v.value].annotations = l;
+      }
+    }, V = () => {
+      const l = n.batchImages[v.value];
+      a("batchChange", {
+        currentIndex: v.value,
+        total: n.batchImages.length,
+        currentImageUrl: l.imageUrl,
+        currentAnnotations: l.annotations || []
+      });
+    };
+    return t({
+      jumpTo: (l) => {
+        l >= 0 && l < n.batchImages.length && (W(), v.value = l, R(), V());
+      },
+      getAllAnnotations: () => n.batchImages,
+      getCurrentAnnotation: () => {
+        var l;
+        return {
+          imageUrl: n.batchImages[v.value].imageUrl,
+          annotations: ((l = s.value) == null ? void 0 : l.getAnnotations()) || []
+        };
+      }
+    }), (l, c) => {
+      const A = P("Rank"), w = P("el-icon"), T = P("Pointer"), gt = P("ZoomIn"), ut = P("ZoomOut"), et = P("Delete"), vt = P("Back"), ft = P("Right"), yt = P("View"), mt = P("Hide");
+      return m(), x("div", {
+        class: N(["annotation-container", u.theme])
+      }, [
+        u.readOnly ? L("", !0) : (m(), x("div", St, [
+          h("div", {
+            class: N(["tool-btn", { active: r.value === "pan" }]),
+            onClick: c[0] || (c[0] = (p) => E("pan")),
+            title: "拖动"
+          }, [
+            b(w, null, {
+              default: I(() => [
+                b(A)
+              ]),
+              _: 1
+            })
+          ], 2),
+          h("div", {
+            class: N(["tool-btn", { active: r.value === "select" }]),
+            onClick: c[1] || (c[1] = (p) => E("select")),
+            title: "选择"
+          }, [
+            b(w, null, {
+              default: I(() => [
+                b(T)
+              ]),
+              _: 1
+            })
+          ], 2),
+          c[4] || (c[4] = h("div", { class: "divider" }, null, -1)),
+          (m(!0), x($, null, F(_.value, (p) => (m(), x("div", {
+            key: p,
+            class: N(["tool-btn", { active: r.value === p }]),
+            onClick: (U) => E(p),
+            title: O(p)
+          }, [
+            b(w, null, {
+              default: I(() => [
+                (m(), X(Ct(S(p))))
+              ]),
+              _: 2
+            }, 1024)
+          ], 10, It))), 128)),
+          c[5] || (c[5] = h("div", { class: "divider" }, null, -1)),
+          h("div", {
+            class: "tool-btn",
+            onClick: z,
+            title: "放大"
+          }, [
+            b(w, null, {
+              default: I(() => [
+                b(gt)
+              ]),
+              _: 1
+            })
+          ]),
+          h("div", {
+            class: "tool-btn",
+            onClick: Q,
+            title: "缩小"
+          }, [
+            b(w, null, {
+              default: I(() => [
+                b(ut)
+              ]),
+              _: 1
+            })
+          ]),
+          c[6] || (c[6] = h("div", { class: "divider" }, null, -1)),
+          h("div", {
+            class: "tool-btn",
+            onClick: H,
+            title: "删除选中"
+          }, [
+            b(w, null, {
+              default: I(() => [
+                b(et)
+              ]),
+              _: 1
+            })
+          ])
+        ])),
+        h("div", Pt, [
+          u.readOnly ? L("", !0) : (m(), x("div", Dt, [
+            h("div", Tt, [
+              c[7] || (c[7] = h("span", { class: "label-text" }, "当前标签:", -1)),
+              h("div", Ht, [
+                (m(!0), x($, null, F(d.value, (p) => (m(), x("div", {
+                  key: p.id,
+                  class: N(["tag-chip", { active: g.value === p.id }]),
+                  style: K({ backgroundColor: p.color, borderColor: p.color }),
+                  onClick: (U) => B(p)
+                }, D(p.name), 15, Lt))), 128)),
+                d.value.length === 0 ? (m(), x("div", Mt, "请在右侧创建标签")) : L("", !0)
+              ])
+            ])
+          ])),
+          h("div", {
+            class: "canvas-wrapper",
+            ref_key: "canvasWrapper",
+            ref: o
+          }, [
+            h("canvas", {
+              ref_key: "canvasRef",
+              ref: i
+            }, null, 512)
+          ], 512),
+          u.batchImages && u.batchImages.length > 0 ? (m(), x("div", $t, [
+            h("button", {
+              onClick: ht,
+              disabled: v.value <= 0
+            }, [
+              b(w, null, {
+                default: I(() => [
+                  b(vt)
+                ]),
+                _: 1
+              }),
+              c[8] || (c[8] = J(" 上一张 ", -1))
+            ], 8, Rt),
+            h("span", null, D(v.value + 1) + " / " + D(u.batchImages.length), 1),
+            h("button", {
+              onClick: dt,
+              disabled: v.value >= u.batchImages.length - 1
+            }, [
+              c[9] || (c[9] = J(" 下一张 ", -1)),
+              b(w, null, {
+                default: I(() => [
+                  b(ft)
+                ]),
+                _: 1
+              })
+            ], 8, Ut)
+          ])) : L("", !0)
+        ]),
+        u.readOnly ? L("", !0) : (m(), x("div", Ft, [
+          h("div", { class: "sidebar-header" }, [
+            c[10] || (c[10] = h("h3", null, "标签管理", -1)),
+            h("button", {
+              class: "add-btn",
+              onClick: st
+            }, "添加标签")
+          ]),
+          h("div", Ot, [
+            (m(!0), x($, null, F(d.value, (p) => (m(), x("div", {
+              key: p.id,
+              class: "label-item"
+            }, [
+              h("div", Et, [
+                h("label", {
+                  class: "color-wrapper",
+                  style: K({ backgroundColor: p.color })
+                }, [
+                  j(h("input", {
+                    type: "color",
+                    "onUpdate:modelValue": (U) => p.color = U,
+                    onChange: (U) => lt(p),
+                    style: { visibility: "hidden", width: "0", height: "0" }
+                  }, null, 40, zt), [
+                    [Y, p.color]
+                  ])
+                ], 4),
+                h("span", {
+                  class: "label-name",
+                  title: p.name
+                }, D(p.name), 9, Bt),
+                h("span", {
+                  class: "action-icon eye",
+                  onClick: (U) => rt(p)
+                }, [
+                  p.visible ? (m(), X(w, { key: 0 }, {
+                    default: I(() => [
+                      b(yt)
+                    ]),
+                    _: 1
+                  })) : (m(), X(w, { key: 1 }, {
+                    default: I(() => [
+                      b(mt)
+                    ]),
+                    _: 1
+                  }))
+                ], 8, Nt),
+                h("div", Jt, [
+                  c[11] || (c[11] = h("span", { class: "dots" }, "•••", -1)),
+                  h("span", {
+                    class: "delete-btn",
+                    onClick: (U) => ct(p.id),
+                    title: "删除"
+                  }, [
+                    b(w, null, {
+                      default: I(() => [
+                        b(et)
+                      ]),
+                      _: 1
+                    })
+                  ], 8, Wt)
+                ])
+              ])
+            ]))), 128))
+          ])
+        ])),
+        f.value ? (m(), x("div", Vt, [
+          h("div", Xt, [
+            c[14] || (c[14] = h("h3", null, "新增标签", -1)),
+            h("div", jt, [
+              c[12] || (c[12] = h("label", null, "名称", -1)),
+              j(h("input", {
+                "onUpdate:modelValue": c[2] || (c[2] = (p) => y.value.name = p),
+                placeholder: "请输入标签名称",
+                class: "modal-input"
+              }, null, 512), [
+                [Y, y.value.name]
+              ])
+            ]),
+            h("div", Yt, [
+              c[13] || (c[13] = h("label", null, "颜色", -1)),
+              h("div", Zt, [
+                j(h("input", {
+                  type: "color",
+                  "onUpdate:modelValue": c[3] || (c[3] = (p) => y.value.color = p),
+                  class: "modal-color-picker"
+                }, null, 512), [
+                  [Y, y.value.color]
+                ]),
+                h("span", null, D(y.value.color), 1)
+              ])
+            ]),
+            h("div", { class: "modal-actions" }, [
+              h("button", {
+                onClick: tt,
+                class: "cancel-btn"
+              }, "取消"),
+              h("button", {
+                onClick: ot,
+                class: "confirm-btn"
+              }, "确认")
+            ])
+          ])
+        ])) : L("", !0)
+      ], 2);
+    };
+  }
+}), G = (u, t) => {
+  const e = u.__vccOpts || u;
+  for (const [n, a] of t)
+    e[n] = a;
+  return e;
+}, qt = /* @__PURE__ */ G(Kt, [["__scopeId", "data-v-d3dc5a63"]]), Gt = {
+  class: "thumbnail-wrapper",
+  ref: "wrapper"
+}, Qt = ["src", "alt"], te = ["viewBox"], ee = ["x", "y", "width", "height", "stroke"], ne = ["points", "stroke"], ie = ["x", "y", "fill"], se = {
+  key: 1,
+  class: "loading-placeholder"
+}, oe = /* @__PURE__ */ q({
+  __name: "AnnotationThumbnail",
+  props: {
+    src: {},
+    annotations: {},
+    alt: {},
+    labels: {}
+  },
+  setup(u) {
+    const t = u, e = k(null), n = k(!1), a = k(0), i = k(0), o = () => {
+      e.value && (a.value = e.value.naturalWidth, i.value = e.value.naturalHeight, n.value = !0);
+    }, s = (g) => {
+      var f;
+      if ((f = g.style) != null && f.strokeColor) return g.style.strokeColor;
+      if (t.labels) {
+        const y = t.labels.find((_) => _.name === g.label);
+        if (y) return y.color;
+      }
+      return "#FF0000";
+    }, r = (g) => {
+      const f = g.coordinates, y = Math.min(f.x1, f.x2), _ = Math.min(f.y1, f.y2), S = Math.abs(f.x1 - f.x2), O = Math.abs(f.y1 - f.y2);
+      return { x: y, y: _, width: S, height: O };
+    }, v = (g) => g.coordinates.points.map((y) => `${y.x},${y.y}`).join(" "), d = (g) => {
+      if (g.type === "rectangle") {
+        const f = r(g);
+        return { x: f.x, y: f.y - 5 };
+      } else if (g.type === "polygon") {
+        const f = g.coordinates.points;
+        if (f.length > 0) return { x: f[0].x, y: f[0].y - 5 };
+      }
+      return { x: 0, y: 0 };
+    };
+    return (g, f) => (m(), x("div", Gt, [
+      h("img", {
+        ref_key: "img",
+        ref: e,
+        src: u.src,
+        class: "thumbnail-image",
+        onLoad: o,
+        alt: u.alt
+      }, null, 40, Qt),
+      n.value ? (m(), x("svg", {
+        key: 0,
+        class: "annotation-overlay",
+        viewBox: `0 0 ${a.value} ${i.value}`,
+        preserveAspectRatio: "none"
+      }, [
+        (m(!0), x($, null, F(u.annotations, (y) => (m(), x($, {
+          key: y.id
+        }, [
+          y.type === "rectangle" ? (m(), x("rect", {
+            key: 0,
+            x: r(y).x,
+            y: r(y).y,
+            width: r(y).width,
+            height: r(y).height,
+            stroke: s(y),
+            "stroke-width": "2",
+            fill: "transparent"
+          }, null, 8, ee)) : L("", !0),
+          y.type === "polygon" ? (m(), x("polygon", {
+            key: 1,
+            points: v(y),
+            stroke: s(y),
+            "stroke-width": "2",
+            fill: "transparent"
+          }, null, 8, ne)) : L("", !0),
+          y.label ? (m(), x("text", {
+            key: 2,
+            x: d(y).x,
+            y: d(y).y,
+            fill: s(y),
+            "font-size": "14",
+            "font-weight": "bold",
+            class: "anno-label"
+          }, D(y.label), 9, ie)) : L("", !0)
+        ], 64))), 128))
+      ], 8, te)) : (m(), x("div", se, "Loading..."))
+    ], 512));
+  }
+}), ae = /* @__PURE__ */ G(oe, [["__scopeId", "data-v-78bcbe0c"]]), le = { class: "batch-annotator" }, re = {
+  key: 0,
+  class: "gallery-view"
+}, ce = { class: "gallery-header" }, he = { class: "label-summary" }, de = { class: "gallery-grid" }, ge = ["onClick"], ue = { class: "thumbnail-wrapper" }, ve = { class: "img-meta" }, fe = { class: "img-index" }, ye = { class: "anno-count" }, me = { class: "bottom-bar" }, pe = {
+  key: 1,
+  class: "editor-view"
+}, xe = { class: "editor-header" }, be = { class: "header-left" }, Ae = { class: "editor-title" }, Ce = { class: "editor-content" }, we = /* @__PURE__ */ q({
+  __name: "BatchAnnotator",
+  props: {
+    images: {},
+    labels: {}
+  },
+  emits: ["export", "update:images"],
+  setup(u, { emit: t }) {
+    const e = u, n = t, a = k("gallery"), i = k([]), o = k(0), s = k(null);
+    it(() => e.images, (_) => {
+      i.value = JSON.parse(JSON.stringify(_));
+    }, { immediate: !0, deep: !0 });
+    const r = (_) => {
+      o.value = _, a.value = "editor", wt(() => {
+        s.value && s.value.jumpTo && s.value.jumpTo(_);
+      });
+    }, v = () => {
+      if (s.value && s.value.getCurrentAnnotation) {
+        const _ = s.value.getCurrentAnnotation();
+        i.value[o.value] && (i.value[o.value].annotations = _.annotations);
+      }
+      a.value = "gallery";
+    }, d = () => {
+      n("export", i.value);
+    }, g = (_) => {
+      o.value = _.currentIndex, i.value[_.currentIndex] && (i.value[_.currentIndex].annotations = _.currentAnnotations);
+    }, f = (_) => {
+      if (s.value && s.value.getCurrentAnnotation) {
+        const S = s.value.getCurrentAnnotation();
+        i.value[o.value] && (i.value[o.value].annotations = S.annotations, n("update:images", i.value));
+      }
+    }, y = (_) => {
+    };
+    return (_, S) => {
+      const O = P("Edit"), M = P("el-icon"), R = P("Download"), E = P("Back");
+      return m(), x("div", le, [
+        a.value === "gallery" ? (m(), x("div", re, [
+          h("div", ce, [
+            h("h3", null, "批量查看与标注 (" + D(i.value.length) + " 张)", 1),
+            h("div", he, [
+              (m(!0), x($, null, F(u.labels, (H) => (m(), x("span", {
+                key: H.id,
+                class: "label-badge",
+                style: K({ backgroundColor: H.color })
+              }, D(H.name), 5))), 128))
+            ])
+          ]),
+          h("div", de, [
+            (m(!0), x($, null, F(i.value, (H, z) => (m(), x("div", {
+              key: z,
+              class: "gallery-item",
+              onClick: (Q) => r(z)
+            }, [
+              h("div", ue, [
+                b(ae, {
+                  src: H.imageUrl,
+                  annotations: H.annotations || [],
+                  labels: u.labels
+                }, null, 8, ["src", "annotations", "labels"])
+              ]),
+              h("div", ve, [
+                h("span", fe, "#" + D(z + 1), 1),
+                h("span", ye, D((H.annotations || []).length) + " 标注", 1)
+              ])
+            ], 8, ge))), 128))
+          ]),
+          h("div", me, [
+            h("button", {
+              class: "action-btn primary",
+              onClick: S[0] || (S[0] = (H) => r(0))
+            }, [
+              b(M, null, {
+                default: I(() => [
+                  b(O)
+                ]),
+                _: 1
+              }),
+              S[1] || (S[1] = J(" 手动标注 ", -1))
+            ]),
+            h("button", {
+              class: "action-btn success",
+              onClick: d
+            }, [
+              b(M, null, {
+                default: I(() => [
+                  b(R)
+                ]),
+                _: 1
+              }),
+              S[2] || (S[2] = J(" 导出 ", -1))
+            ])
+          ])
+        ])) : (m(), x("div", pe, [
+          h("div", xe, [
+            h("div", be, [
+              h("button", {
+                class: "back-btn",
+                onClick: v
+              }, [
+                b(M, null, {
+                  default: I(() => [
+                    b(E)
+                  ]),
+                  _: 1
+                }),
+                S[3] || (S[3] = J(" 返回列表 ", -1))
+              ]),
+              h("span", Ae, "正在标注: " + D(o.value + 1) + " / " + D(i.value.length), 1)
+            ])
+          ]),
+          h("div", Ce, [
+            b(qt, {
+              ref_key: "annotatorRef",
+              ref: s,
+              batchImages: i.value,
+              labels: u.labels,
+              annotationTypes: ["rectangle", "polygon", "point", "rotatedRect"],
+              onBatchChange: g,
+              onAnnotationChange: f,
+              onLabelChange: y
+            }, null, 8, ["batchImages", "labels"])
+          ])
+        ]))
+      ]);
+    };
+  }
+}), Ie = /* @__PURE__ */ G(we, [["__scopeId", "data-v-4cf50076"]]);
+export {
+  Ie as BatchAnnotator,
+  qt as ImageAnnotator,
+  Ie as default
+};