npm - @zzalai/leafer-point-annotation - Versions diffs - 1.0.0 - Mend

@zzalai/leafer-point-annotation 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/LICENSE +21 -0
package/README.md +308 -0
package/README_EN.md +308 -0
package/docs/assets/index-DGiYiG5f.css +1 -0
package/docs/assets/index-L8gL3x2V.js +1 -0
package/docs/index.html +14 -0
package/index.html +13 -0
package/package.json +64 -0
package/project-docs/ARCHITECTURE.md +401 -0
package/project-docs/IMPLEMENTATION_PLAN.md +196 -0
package/project-docs/REQUIREMENTS.md +517 -0
package/project-docs/TODO.md +167 -0
package/project-docs/leafer-development-guide/LEAFER_DEVELOPMENT_GUIDE.md +835 -0
package/project-docs/leafer-development-guide/LEAFER_UNDO_REDO_GUIDE.md +329 -0
package/project-docs/leafer-development-guide/TINYKEYS_GUIDE.md +407 -0
package/src/App.vue +464 -0
package/src/components/BrushSizeSlider.vue +190 -0
package/src/components/BrushStylePanel.vue +295 -0
package/src/components/PointAnnotation.vue +1663 -0
package/src/elements/PointAnnotationElement.ts +155 -0
package/src/index.ts +4 -0
package/src/main.ts +4 -0
package/src/types/index.ts +122 -0
package/src/utils/BrushCommands.ts +47 -0
package/src/utils/BrushStroke.ts +96 -0
package/src/utils/COCOExporter.ts +90 -0
package/src/utils/CanvasBrush.ts +179 -0
package/src/utils/PointCommands.ts +74 -0
package/src/utils/YOLOExporter.ts +39 -0
package/src/vite-env.d.ts +7 -0
package/tsconfig.json +24 -0
package/tsconfig.node.json +10 -0
package/vite.config.ts +42 -0
package/vite.docs.config.ts +28 -0

package/docs/index.html ADDED Viewed

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Leafer Point Annotation</title>
+    <script type="module" crossorigin src="./assets/index-L8gL3x2V.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-DGiYiG5f.css">
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

package/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Leafer Point Annotation</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,64 @@
+{
+  "name": "@zzalai/leafer-point-annotation",
+  "version": "1.0.0",
+  "description": "A Vue3 component for point annotation and brush painting on images using LeaferJS, supporting COCO/YOLO/JSON export, designed for AI model training dataset annotation",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/leafer-point-annotation.umd.js",
+  "module": "./dist/leafer-point-annotation.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/leafer-point-annotation.es.js",
+      "require": "./dist/leafer-point-annotation.umd.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "type-check": "tsc --noEmit",
+    "docs:build": "vite build --config vite.docs.config.ts"
+  },
+  "keywords": [
+    "vue3",
+    "leaferjs",
+    "point",
+    "annotation",
+    "image-processing"
+  ],
+  "author": "zzalai",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/otaku1951/leafer-point-annotation.git"
+  },
+  "homepage": "https://otaku1951.github.io/leafer-point-annotation/",
+  "packageManager": "pnpm@10.33.0",
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "dependencies": {
+    "@leafer-in/editor": "^2.0.8",
+    "@leafer-in/resize": "^2.0.8",
+    "@leafer-in/state": "^2.1.0",
+    "@leafer-in/text-editor": "^2.1.0",
+    "@leafer-in/view": "^2.0.8",
+    "@leafer-in/viewport": "^2.0.8",
+    "@zzalai/leafer-undo-redo": "1.0.3",
+    "leafer-ui": "^2.0.8",
+    "tinykeys": "^3.0.0",
+    "vue-pick-colors": "^1.8.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.6.0",
+    "@vitejs/plugin-vue": "^6.0.6",
+    "terser": "^5.46.1",
+    "typescript": "^6.0.2",
+    "vite": "^8.0.8",
+    "vite-plugin-dts": "^3.0.0"
+  }
+}

package/project-docs/ARCHITECTURE.md ADDED Viewed

@@ -0,0 +1,401 @@
+# 点标注与笔刷涂抹工具 - 功能架构文档
+## 1. 架构概述
+### 1.1 架构设计原则
+| 原则 | 说明 |
+|------|------|
+| **单一职责** | 每个组件/模块只负责一个功能 |
+| **分层架构** | 清晰的层次划分：UI层、业务层、数据层 |
+| **可扩展性** | 预留扩展接口，支持后续功能迭代 |
+| **响应式设计** | 使用 Vue3 Composition API |
+| **性能优先** | 优化 Canvas 渲染和事件处理 |
+### 1.2 整体架构图
+```
+┌─────────────────────────────────────────────────────────────┐
+│                        UI 层                               │
+│  ┌──────────────┐  ┌──────────────┐  ┌──────────────────┐ │
+│  │  BrushSize   │  │BrushStyle    │  │ PointAnnotation  │ │
+│  │ Slider.vue   │  │  Panel.vue   │  │ (主画布组件)     │ │
+│  └──────┬───────┘  └──────┬───────┘  └────────┬─────────┘ │
+│         │                 │                    │          │
+└─────────┼─────────────────┼────────────────────┼──────────┘
+          │                 │                    │
+          ▼                 ▼                    ▼
+┌─────────────────────────────────────────────────────────────┐
+│                      业务逻辑层                             │
+│  ┌──────────────────────────────────────────────────────┐  │
+│  │           PointAnnotation.vue (主组件)              │  │
+│  │  ┌──────────────┐  ┌──────────────┐  ┌───────────┐  │  │
+│  │  │ 工具切换逻辑 │  │ 事件处理逻辑 │  │ 命令管理  │  │  │
+│  │  └──────────────┘  └──────────────┘  └───────────┘  │  │
+│  └──────────────────────────────────────────────────────┘  │
+└───────────────────────────┬────────────────────────────────┘
+                            │
+          ┌─────────────────┼─────────────────┐
+          ▼                 ▼                 ▼
+┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
+│   元素封装层    │ │   工具类层      │ │   类型定义层    │
+│ PointAnnotation │ │CanvasBrush.ts   │ │   types/index   │
+│ Element.ts      │ │PointCommands.ts │ │   .ts           │
+│                 │ │BrushCommands.ts │ │                 │
+│                 │ │COCOExporter.ts  │ │                 │
+│                 │ │YOLOExporter.ts  │ │                 │
+└─────────────────┘ └─────────────────┘ └─────────────────┘
+```
+---
+## 2. 模块划分
+### 2.1 UI 层
+| 模块 | 文件路径 | 职责 |
+|------|----------|------|
+| BrushSizeSlider | src/components/BrushSizeSlider.vue | 笔刷大小调节浮动组件 |
+| BrushStylePanel | src/components/BrushStylePanel.vue | 笔刷样式配置面板（颜色、透明度、大小等） |
+| Canvas | 集成在 PointAnnotation.vue 中 | LeaferJS 画布渲染、事件监听 |
+| App.vue (测试入口) | src/App.vue | 提供完整的测试界面和示例 |
+### 2.2 业务逻辑层
+| 模块 | 文件路径 | 职责 |
+|------|----------|------|
+| 工具切换 | PointAnnotation.vue | 管理 currentTool 状态、Editor 动态配置 |
+| 事件处理 | PointAnnotation.vue | 处理鼠标/键盘事件、触发相应操作 |
+| 命令管理 | PointAnnotation.vue | 集成 CommandManager、管理撤销/重做 |
+| 数据管理 | PointAnnotation.vue | 管理点标注和笔刷数据的增删改查 |
+| 导出导入 | PointAnnotation.vue | 处理数据导出和导入逻辑 |
+| 标签编辑 | PointAnnotation.vue | 管理标签编辑状态，根据工具控制可编辑性 |
+### 2.3 元素封装层
+| 模块 | 文件路径 | 职责 |
+|------|----------|------|
+| PointAnnotationElement | src/elements/PointAnnotationElement.ts | 封装点标注元素（Group + Ellipse + Text），支持 hover/selected 状态 |
+### 2.4 工具类层
+| 模块 | 文件路径 | 职责 |
+|------|----------|------|
+| CanvasBrush | src/utils/CanvasBrush.ts | 使用 LeaferJS Canvas 实现笔刷绘制，支持 draw/erase/clear/hasContent |
+| PointCommands | src/utils/PointCommands.ts | 点标注的 Add/Remove 命令实现 |
+| BrushCommands | src/utils/BrushCommands.ts | 笔刷的快照命令实现（BrushSnapshotCommand） |
+| COCOExporter | src/utils/COCOExporter.ts | COCO 格式数据导出 |
+| YOLOExporter | src/utils/YOLOExporter.ts | YOLO 格式数据导出 |
+### 2.5 类型定义层
+| 模块 | 文件路径 | 职责 |
+|------|----------|------|
+| Types | src/types/index.ts | 定义所有 TypeScript 类型接口（PointAnnotation、BrushStyle、ExportOptions 等） |
+---
+## 3. 核心组件设计
+### 3.1 PointAnnotation.vue（主组件）
+**核心职责**：
+- 初始化 LeaferJS 应用和图片加载
+- 管理工具状态和切换逻辑
+- 处理用户交互事件
+- 管理撤销/重做队列
+- 提供对外 API
+- 处理数据导出/导入
+**状态管理**：
+```typescript
+// 工具状态
+const currentTool = ref<ToolType>('select');
+// 数据状态
+const pointAnnotations = ref<PointAnnotation[]>([]);
+const pointCounter = ref(1);
+// 画布状态
+const loadStatus = ref('idle');
+const imageWidth = ref<number | null>(null);
+const imageHeight = ref<number | null>(null);
+// UI 状态
+const showBrushPanel = ref(false);
+const brushButtonRect = ref({ x: 0, y: 0, width: 0, height: 0 });
+// 笔刷样式
+const localBrushStyle = ref<BrushStyle>({ ...DEFAULT_BRUSH_STYLE });
+```
+**事件处理**：
+| 事件 | 处理方法 | 触发操作 |
+|------|----------|----------|
+| pointerdown | handlePointerDown | 创建点标注/开始笔刷绘制 |
+| pointermove | handlePointerMove | 笔刷绘制/鼠标追踪 |
+| pointerup | handlePointerUp | 完成笔刷绘制 |
+| keydown | handleKeyDown | 热键处理（tinykeys） |
+**对外 API**：
+```typescript
+defineExpose({
+  getPointAnnotations,
+  getImageInfo,
+  exportCanvasJSON,
+  exportMaskImage,
+  exportCOCO,
+  exportYOLO,
+  importCanvasJSON,
+  loadImage,
+  clearBrush,
+  zoomIn,
+  zoomOut,
+  resetZoom,
+  undo,
+  redo,
+  getCurrentTool,
+  setTool,
+  createPointAnnotation,
+  removePointAnnotation,
+});
+```
+### 3.2 PointAnnotationElement（点标注元素）
+**结构设计**：
+```
+Group (容器) - id: 点数据的 id, _element_tag: 'point-annotation'
+├── Ellipse (圆点) - 负责视觉样式、hover/selected 效果
+└── Text (标签) - 负责显示标签文本、支持编辑，带 boxStyle 背景
+```
+**核心方法**：
+| 方法 | 功能 |
+|------|------|
+| constructor | 初始化元素、绑定事件、配置 hoverStyle |
+| handlePointAnnotationSelected | 更新选中状态样式（fill/stroke/scale） |
+| handleLabelChange | 处理标签编辑变更（非空校验） |
+| updatePosition | 更新位置坐标 |
+| updateLabel | 更新标签文本 |
+| getLabel / getLastValidLabel | 获取标签值 |
+### 3.3 CanvasBrush（笔刷绘制）
+**核心职责**：
+- 使用 LeaferJS Canvas 实现笔刷绘制
+- 外层 Group 控制整体透明度（避免多次叠加）
+- 支持绘制和擦除模式
+- 连续性阈值处理（两个点之间距离过远时自动连线）
+- 图片数据导出/恢复
+- hasContent() 检测是否有内容
+**核心方法**：
+| 方法 | 功能 |
+|------|------|
+| constructor | 初始化 Canvas 和外层 Group |
+| draw | 绘制笔刷（使用多个圆填充路径） |
+| erase | 擦除操作（destination-out） |
+| clear | 清除所有内容 |
+| getImageData | 导出为 PNG dataURL |
+| restoreImageData | 从 dataURL 恢复画布 |
+| hasContent | 检测是否有非透明像素 |
+| setPointerEvents | 控制 Canvas 是否拦截事件 |
+### 3.4 笔刷命令设计
+**BrushSnapshotCommand**：
+- 笔刷操作使用快照方式实现撤销/重做
+- 保存操作前后的完整图片状态
+- undo/redo 时恢复对应状态
+### 3.5 导出导入实现
+**导出格式**：
+1. **JSON Full**：完整数据（点标注 + 笔刷 mask）
+2. **JSON Points**：仅点标注数据
+3. **COCO**：COCO 数据集格式
+4. **YOLO**：YOLO 数据集格式
+5. **Mask**：二值图（PNG/JPEG 可选）
+**二值图特性**：
+- 前景色可配置（黑/白）
+- PNG 支持透明背景
+- JPG 自动处理背景色（前景黑则背景白，反之亦然）
+- 使用 getImageData() 扫描像素，重新绘制为纯二值图
+---
+## 4. 数据流转
+### 4.1 点标注数据流转
+```
+用户点击 → handlePointerDown → createPointAnnotation →
+  PointAnnotationElement → AddPointCommand → CommandManager →
+  pointAnnotations (响应式数组) → 导出数据
+```
+### 4.2 笔刷数据流转
+```
+用户绘制 → handlePointerMove → CanvasBrush.draw →
+  (操作结束) → BrushSnapshotCommand → CommandManager →
+  (内部保存 mask 图片)
+```
+### 4.3 导出/导入数据流转
+```
+导出：用户触发 → exportData(format) → Exporter 格式化 → 返回数据字符串/Blob
+导入：用户触发 → importCanvasJSON(json) → 解析数据 → 重建元素 → fitImageToCanvas
+```
+---
+## 5. 命令模式实现
+### 5.1 命令类型
+| 命令类 | 功能 | 撤销逻辑 |
+|--------|------|----------|
+| AddPointCommand | 添加点标注 | 移除点标注、从数组删除 |
+| RemovePointCommand | 删除点标注 | 重新添加点标注、插入原位置 |
+| BrushSnapshotCommand | 笔刷快照 | 恢复操作前的图片状态 |
+### 5.2 命令管理器集成
+```typescript
+// 初始化命令管理器（历史限制 100）
+const commandManager = new CommandManager(100);
+// 执行命令
+commandManager.executeCommand(new AddPointCommand(pointLayer, element, pointAnnotations.value, data));
+// 撤销/重做
+commandManager.undo();
+commandManager.redo();
+```
+---
+## 6. Editor 动态控制
+### 6.1 控制策略
+| 工具 | Editor 状态 | 说明 |
+|------|-------------|------|
+| select | 启用 | 允许选择和拖拽 |
+| point | 启用 | 允许选择和拖拽点标注 |
+| brush | 禁用 | 避免干扰笔刷绘制 |
+| eraser | 禁用 | 避免干扰擦除操作 |
+### 6.2 标签编辑控制
+| 工具 | 标签可编辑 | 说明 |
+|------|-----------|------|
+| select | true | 可以编辑标签 |
+| point | true | 可以编辑标签 |
+| brush | false | 禁用编辑，避免冲突 |
+| eraser | false | 禁用编辑，避免冲突 |
+### 6.3 实现逻辑
+```typescript
+const switchToSelect = () => {
+  currentTool.value = 'select';
+  showBrushPanel.value = false;
+  if (!app) return;
+  app.editor.config.moveable = false;
+  app.editor.config.resizeable = false;
+  app.editor.config.multipleSelect = true;
+  canvasBrush?.setPointerEvents(false);
+  updateLabelEditable(true);
+};
+```
+---
+## 7. 对外 API 设计
+### 7.1 方法列表
+| 方法名 | 参数 | 返回值 | 功能描述 |
+|--------|------|--------|----------|
+| getPointAnnotations | 无 | PointAnnotation[] | 获取所有点标注数据 |
+| createPointAnnotation | (x, y) | string \| null | 创建标注点，返回 id |
+| removePointAnnotation | (id) | boolean | 删除指定 id 的点标注 |
+| clearBrush | 无 | void | 清除所有笔刷内容 |
+| exportCanvasJSON | 无 | string | 导出完整 JSON 数据 |
+| exportMaskImage | (format, fgColor) | string \| null | 导出二值图 dataURL |
+| exportCOCO | 无 | COCOExport | 导出 COCO 格式数据 |
+| exportYOLO | 无 | YOLOExport | 导出 YOLO 格式数据 |
+| importCanvasJSON | (json) | void | 导入 JSON 数据 |
+| loadImage | (url) | Promise | 加载图片 |
+| undo | 无 | void | 撤销操作 |
+| redo | 无 | void | 重做操作 |
+| setTool | (tool) | void | 设置当前工具 |
+| getCurrentTool | 无 | ToolType | 获取当前工具 |
+| zoomIn | 无 | void | 放大画布 |
+| zoomOut | 无 | void | 缩小画布 |
+| resetZoom | 无 | void | 重置缩放 |
+### 7.2 Props 配置
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| imageSource | { id, url } | - | 图片源配置 |
+| pointStyle | Partial\<PointStyle\> | DEFAULT_POINT_STYLE | 点标注样式 |
+| brushStyle | Partial\<BrushStyle\> | DEFAULT_BRUSH_STYLE | 笔刷样式 |
+| options | { maskExportFormat, maskExportForeground } | - | 导出配置 |
+### 7.3 Events
+| 事件名 | 参数 | 说明 |
+|--------|------|------|
+| pointChange | PointAnnotation[] | 点标注数据变化 |
+| loadStart | - | 图片开始加载 |
+| loadSuccess | - | 图片加载成功 |
+| loadError | - | 图片加载失败 |
+---
+## 8. 性能优化策略
+### 8.1 Canvas 渲染优化
+| 策略 | 说明 |
+|------|------|
+| **Group 透明度控制** | 透明度设置在 Group 上，避免 Canvas 上多次叠加 |
+| **批量更新** | 使用 `set()` 批量更新属性，减少重绘次数 |
+| **图层分离** | 图片层、点标注层、笔刷层分离，独立控制 |
+| **路径填充** | 笔刷使用多个圆填充，避免复杂路径计算 |
+### 8.2 事件处理优化
+| 策略 | 说明 |
+|------|------|
+| **事件委托** | LeaferJS 自动处理事件冒泡 |
+| **条件监听** | 笔刷 Canvas 只在需要时拦截事件（pointerEvents） |
+| **updateLabelEditable** | 只在工具切换时更新标签可编辑性 |
+### 8.3 内存管理
+| 策略 | 说明 |
+|------|------|
+| **及时清理** | 移除元素时调用 destroy() |
+| **历史限制** | 设置合理的撤销历史记录限制（默认 100） |
+| **Canvas 重用** | CanvasBrush 复用同一 Canvas 对象 |
+### 8.4 导出优化
+| 策略 | 说明 |
+|------|------|
+| **异步处理** | 图片导出使用 async/await，避免阻塞 |
+| **DataURL 缓存** | 笔刷快照保存 dataURL，避免重复序列化 |
+---
+**文档版本**：2.0
+**创建日期**：2026-04-28
+**最后更新**：2026-05-02

package/project-docs/IMPLEMENTATION_PLAN.md ADDED Viewed

@@ -0,0 +1,196 @@
+# 点标注与笔刷涂抹工具 - 任务拆解实现先后文档
+## 1. 任务拆解原则
+### 1.1 优先级排序
+| 优先级 | 说明 | 示例 |
+|------|------|------|
+| P0 | 阻塞性任务，必须先完成 | 类型定义、核心工具类 |
+| P1 | 核心功能，影响后续开发 | 点标注创建、笔刷绘制 |
+| P2 | 重要功能，增强用户体验 | 撤销/重做、导出导入 |
+| P3 | 优化和完善 | 性能优化、边界处理 |
+### 1.2 依赖关系
+```
+类型定义 → 工具类 → 组件 → 主逻辑 → 导出导入 → 优化
+```
+---
+## 2. 任务拆解与实现顺序
+### 阶段一：基础准备（P0）✅ 已完成
+| 序号 | 任务 | 描述 | 依赖 | 状态 |
+|------|------|------|------|------|
+| 1 | 创建类型定义文件 | 定义所有 TypeScript 接口和类型 | 无 | ✅ |
+| 2 | 创建 PointAnnotationElement 类 | 封装点标注元素结构 | 类型定义 | ✅ |
+| 3 | 创建 CanvasBrush 工具类 | 使用 LeaferJS Canvas 实现笔刷绘制 | 类型定义 | ✅ |
+| 4 | 创建 BrushSizeSlider 组件 | 笔刷大小调节浮动组件 | 类型定义 | ✅ |
+| 5 | 创建 BrushStylePanel 组件 | 笔刷样式配置面板（颜色、透明度、大小、连续性） | 类型定义 | ✅ |
+### 阶段二：核心功能实现（P1）✅ 已完成
+| 序号 | 任务 | 描述 | 依赖 | 状态 |
+|------|------|------|------|------|
+| 6 | 初始化 LeaferJS 应用 | 在主组件中配置 App 实例、图片加载 | 无 | ✅ |
+| 7 | 实现工具切换逻辑 | 管理 currentTool 状态、动态配置 Editor | 阶段一 | ✅ |
+| 8 | 实现点标注创建功能 | 点击画布创建点标注 | PointAnnotationElement | ✅ |
+| 9 | 实现点标注移动功能 | 拖拽移动点标注 | PointAnnotationElement | ✅ |
+| 10 | 实现点标注删除功能 | 删除选中的点标注 | CommandManager | ✅ |
+| 11 | 实现标签编辑功能 | 双击编辑标签、非空校验 | PointAnnotationElement | ✅ |
+| 12 | 实现笔刷绘制功能 | 实时预览笔刷涂抹 | CanvasBrush | ✅ |
+| 13 | 实现擦除功能 | 切换擦除模式、使用 destination-out | CanvasBrush | ✅ |
+| 14 | 实现清除所有功能 | Select 模式未选中时按 Delete 清除所有（带确认对话框） | 所有功能 | ✅ |
+### 阶段三：撤销/重做系统（P1）✅ 已完成
+| 序号 | 任务 | 描述 | 依赖 | 状态 |
+|------|------|------|------|------|
+| 15 | 集成 CommandManager | 初始化命令管理器（历史限制 100） | @zzalai/leafer-undo-redo | ✅ |
+| 16 | 创建 AddPointCommand | 添加点标注命令 | PointAnnotationElement | ✅ |
+| 17 | 创建 RemovePointCommand | 删除点标注命令 | PointAnnotationElement | ✅ |
+| 18 | 创建 BrushSnapshotCommand | 笔刷快照命令（保存操作前后状态） | CanvasBrush | ✅ |
+| 19 | 实现撤销/重做热键 | Ctrl+Z / Ctrl+Y | 所有命令 | ✅ |
+### 阶段四：工具栏与交互（P2）✅ 已完成
+| 序号 | 任务 | 描述 | 依赖 | 状态 |
+|------|------|------|------|------|
+| 20 | 实现工具栏 UI | 添加工具按钮、图标、热键提示、激活状态 | 工具切换逻辑 | ✅ |
+| 21 | 实现笔刷大小调节 | 点击笔刷按钮后显示面板、滑块实时更新 | BrushSizeSlider | ✅ |
+| 22 | 实现笔刷样式配置 | 颜色选择器（vue-pick-colors）、透明度滑块、大小滑块、连续性滑块 | BrushStylePanel | ✅ |
+| 23 | 实现画布缩放功能 | 放大/缩小/重置、图片自适应 | LeaferJS viewport | ✅ |
+### 阶段五：导出/导入功能（P2）✅ 已完成
+| 序号 | 任务 | 描述 | 依赖 | 状态 |
+|------|------|------|------|------|
+| 24 | 实现 JSON Full 导出 | 导出完整画布数据（点标注 + 笔刷 mask） | 点标注数据、笔刷数据 | ✅ |
+| 25 | 实现二值图导出 | 导出 PNG/JPEG 格式二值图、支持前景色配置 | 笔刷数据 | ✅ |
+| 26 | 实现 COCO 格式导出 | 导出 COCO 标注格式 | 点标注数据 | ✅ |
+| 27 | 实现 YOLO 格式导出 | 导出 YOLO 标注格式 | 点标注数据 | ✅ |
+| 28 | 实现 JSON 导入 | 导入之前导出的数据、自动重置缩放和适应图片 | 所有数据结构 | ✅ |
+### 阶段六：样式与视觉效果（P2）✅ 已完成
+| 序号 | 任务 | 描述 | 依赖 | 状态 |
+|------|------|------|------|------|
+| 29 | 实现点标注 Hover 效果 | 鼠标悬停时样式变化（hoverStyle 配置） | PointAnnotationElement | ✅ |
+| 30 | 实现点标注 Selected 效果 | 选中时放大高亮（scale + 颜色变化） | PointAnnotationElement | ✅ |
+| 31 | 实现标签样式 | 带背景色的可编辑文本（boxStyle + shadow） | PointAnnotationElement | ✅ |
+| 32 | 实现工具栏样式 | 美观的按钮样式、激活状态、过渡动画 | 工具栏 UI | ✅ |
+| 33 | 实现画布样式 | 边框、背景、加载/错误状态 UI | LeaferJS 应用 | ✅ |
+### 阶段七：对外 API（P2）✅ 已完成
+| 序号 | 任务 | 描述 | 依赖 | 状态 |
+|------|------|------|------|------|
+| 34 | 暴露点标注操作方法 | createPointAnnotation / removePointAnnotation / getPointAnnotations | 点标注逻辑 | ✅ |
+| 35 | 暴露笔刷操作方法 | clearBrush / exportMaskImage | 笔刷逻辑 | ✅ |
+| 36 | 暴露撤销/重做方法 | undo / redo | CommandManager | ✅ |
+| 37 | 暴露工具控制方法 | setTool / getCurrentTool | 工具切换逻辑 | ✅ |
+| 38 | 暴露画布控制方法 | zoomIn / zoomOut / resetZoom | 画布缩放 | ✅ |
+| 39 | 暴露导出导入方法 | exportCanvasJSON / importCanvasJSON / exportCOCO / exportYOLO | 导出导入逻辑 | ✅ |
+### 阶段八：测试与优化（P3）⏳ 待完成
+| 序号 | 任务 | 描述 | 依赖 | 优先级 |
+|------|------|------|------|------|
+| 40 | 坐标转换测试 | 像素坐标 ↔ 归一化坐标正确性校验 | 点标注数据 | P1 |
+| 41 | 标签编辑测试 | 空值校验、编辑状态正确性 | 标签编辑逻辑 | P1 |
+| 42 | 撤销/重做完整性测试 | 确保所有操作可正确撤销/重做 | 所有命令 | P1 |
+| 43 | 性能优化 | Canvas 渲染优化、高频事件防抖 | 所有功能 | P2 |
+| 44 | 边界处理 | 极端坐标、空数据、异常输入的容错 | 所有功能 | P2 |
+| 45 | 跨浏览器测试 | 确保在各浏览器正常工作 | 所有功能 | P3 |
+| 46 | 文档完善 | 更新 README、API 文档、添加示例 | 所有功能 | P2 |
+---
+## 3. 任务依赖关系图
+```
+阶段一：基础准备
+├── 1. 类型定义
+├── 2. PointAnnotationElement ─────────┐
+├── 3. CanvasBrush ────────────────────┤
+├── 4. BrushSizeSlider ────────────────┤
+└── 5. BrushStylePanel ────────────────┘
+       ↓
+阶段二：核心功能
+├── 6. LeaferJS 初始化
+├── 7. 工具切换逻辑
+├── 8. 点标注创建 ────────────────────┐
+├── 9. 点标注移动 ────────────────────┤
+├── 10. 标签编辑 ─────────────────────┤
+├── 11. 点标注删除 ───────────────────┤
+├── 12. 笔刷绘制 ─────────────────────┤
+├── 13. 擦除功能 ─────────────────────┤
+└── 14. 清除所有（Select 模式）────────┘
+       ↓
+阶段三：撤销/重做
+├── 15. CommandManager 集成
+├── 16. AddPointCommand
+├── 17. RemovePointCommand
+├── 18. BrushSnapshotCommand
+└── 19. 撤销/重做热键
+       ↓
+阶段四：工具栏与交互
+├── 20. 工具栏 UI
+├── 21. 笔刷大小调节
+├── 22. 笔刷样式配置
+└── 23. 画布缩放
+       ↓
+阶段五：导出/导入
+├── 24. JSON Full 导出
+├── 25. 二值图导出
+├── 26. COCO 格式导出
+├── 27. YOLO 格式导出
+└── 28. JSON 导入
+       ↓
+阶段六：样式与视觉
+├── 29. Hover 效果
+├── 30. Selected 效果
+├── 31. 标签样式
+├── 32. 工具栏样式
+└── 33. 画布样式
+       ↓
+阶段七：对外 API
+├── 34. 点标注操作方法
+├── 35. 笔刷操作方法
+├── 36. 撤销/重做方法
+├── 37. 工具控制方法
+├── 38. 画布控制方法
+└── 39. 导出导入方法
+       ↓
+阶段八：测试与优化
+├── 40. 坐标转换测试
+├── 41. 标签编辑测试
+├── 42. 撤销/重做完整性测试
+├── 43. 性能优化
+├── 44. 边界处理
+├── 45. 跨浏览器测试
+└── 46. 文档完善
+```
+---
+## 4. 里程碑规划
+| 里程碑 | 阶段 | 完成标准 | 状态 |
+|--------|------|------|------|
+| M1 | 基础准备 | 类型定义、核心工具类完成 | ✅ 完成 |
+| M2 | 核心功能 | 点标注和笔刷涂抹基本功能可用 | ✅ 完成 |
+| M3 | 撤销/重做 | 所有操作支持撤销/重做 | ✅ 完成 |
+| M4 | 交互完善 | 工具栏、画布控制完成 | ✅ 完成 |
+| M5 | 数据导出 | 所有导出格式支持完成 | ✅ 完成 |
+| M6 | API 暴露 | 所有对外 API 完成 | ✅ 完成 |
+| M7 | 测试优化 | 测试通过、性能优化完成 | ⏳ 进行中 |
+---
+**文档版本**：2.0
+**创建日期**：2026-04-28
+**最后更新**：2026-05-02