@zzalai/leafer-point-annotation 1.0.0 → 1.1.1

package/docs/assets/index-Dqqq7qvI.css

@@ -0,0 +1 @@
+.brush-panel-overlay[data-v-10bc9982]{z-index:1500;background:#0000004d;position:fixed;inset:0}.brush-style-panel[data-v-10bc9982]{z-index:1501;background:#fff;border-radius:10px;min-width:240px;position:fixed;overflow:visible;box-shadow:0 4px 24px #00000026}.panel-header[data-v-10bc9982]{background:var(--leafer-point-color-background-light);border-bottom:1px solid var(--leafer-point-color-border);border-radius:10px 10px 0 0;justify-content:space-between;align-items:center;padding:10px 16px;display:flex}.panel-header span[data-v-10bc9982]{color:var(--leafer-point-color-text);font-size:14px;font-weight:600}.close-btn[data-v-10bc9982]{cursor:pointer;width:24px;height:24px;color:var(--leafer-point-color-text);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:18px;transition:all .2s;display:flex}.close-btn[data-v-10bc9982]:hover{background:var(--leafer-point-color-border)}.panel-content[data-v-10bc9982]{padding:16px 16px 24px}.config-item[data-v-10bc9982]{align-items:center;margin-bottom:20px;display:flex}.config-item[data-v-10bc9982]:last-child{margin-bottom:0}.config-label[data-v-10bc9982]{color:var(--leafer-point-color-text);text-align:right;min-width:50px;padding-right:5px;font-size:12px;display:block}.config-value[data-v-10bc9982]{color:var(--leafer-point-color-text);width:30px;padding-left:5px;font-size:12px}.color-picker-wrapper[data-v-10bc9982]{width:100%;margin:-10px 0}.config-slider[data-v-10bc9982]{appearance:none;cursor:pointer;background:#e0e0e0;border-radius:3px;outline:none;width:200px;height:6px}.config-slider[data-v-10bc9982]::-webkit-slider-thumb{appearance:none;background:var(--leafer-point-color-primary);cursor:pointer;border:2px solid #fff;border-radius:50%;width:16px;height:16px;box-shadow:0 2px 4px #0003}.config-slider[data-v-10bc9982]::-moz-range-thumb{background:var(--leafer-point-color-primary);cursor:pointer;border:2px solid #fff;border-radius:50%;width:16px;height:16px;box-shadow:0 2px 4px #0003}:root{--leafer-point-color-primary:#007aff;--leafer-point-color-background:#f5f5f5;--leafer-point-color-background-light:#f0f0f0;--leafer-point-color-white:#fff;--leafer-point-color-text:#333;--leafer-point-color-text-secondary:#666;--leafer-point-color-text-tertiary:#999;--leafer-point-color-placeholder:#999;--leafer-point-color-border:#ddd;--leafer-point-color-border-light:#e0e0e0;--leafer-point-color-error:#e74c3c;--leafer-point-color-button:#3498db;--leafer-point-color-button-rgb:52, 152, 219;--leafer-point-color-button-hover:#2980b9;--leafer-point-padding-toolbar:10px;--leafer-point-padding-tool-button:8px;--leafer-point-size-tool-icon:18px;--leafer-point-size-zoom-button:36px;--leafer-point-size-zoom-value:60px;--leafer-point-font-size-hotkey:10px;--leafer-point-padding-hotkey:1px 3px;--leafer-point-padding-error:20px;--leafer-point-padding-error-button:8px 16px;--leafer-point-border-radius-tool-button:4px;--leafer-point-border-radius-hotkey:2px;--leafer-point-border-radius-overlay:8px;--leafer-point-border-radius-zoom:8px;--leafer-point-shadow-tool-button:0 2px 4px #0000001a;--leafer-point-shadow-tool-button-active:0 2px 4px #007aff4d;--leafer-point-shadow-tool-button-hover:0 4px 6px #0000001a;--leafer-point-shadow-overlay:0 4px 12px #0000001a;--leafer-point-shadow-zoom:0 2px 8px #00000026;--leafer-point-transition-time:.2s;--leafer-point-animation-gradient:2s}.point-annotation[data-v-f02f10ad]{width:100%;height:100%}.canvas-container[data-v-f02f10ad]{outline:none;width:100%;height:100%;position:relative;overflow:hidden}.point-annotation.has-image .canvas-container[data-v-f02f10ad]{height:calc(100% - 55px)}.canvas-container[data-v-f02f10ad]:focus{outline:2px solid var(--leafer-point-color-primary);outline-offset:-2px}.loading-overlay[data-v-f02f10ad]{background-color:var(--leafer-point-color-background-light);border-radius:var(--leafer-point-border-radius-overlay);box-shadow:var(--leafer-point-shadow-overlay);z-index:1000;justify-content:center;align-items:center;min-width:100%;min-height:100%;display:flex;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)}.gradient-animation[data-v-f02f10ad]{animation:gradientShift-f02f10ad var(--leafer-point-animation-gradient) ease-in-out infinite;opacity:.7;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%) 0 0/200% 200%;position:absolute;inset:0}@keyframes gradientShift-f02f10ad{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.loading-text[data-v-f02f10ad]{z-index:1;color:#fff;text-shadow:0 2px 4px #0003;font-size:18px;font-weight:500;position:relative}.upload-overlay[data-v-f02f10ad]{background-color:var(--leafer-point-color-white);z-index:1000;border:3px dashed var(--leafer-point-color-border);flex-direction:column;justify-content:center;align-items:center;transition:all .2s;display:flex;position:absolute;inset:0}.upload-icon[data-v-f02f10ad]{color:var(--leafer-point-color-placeholder);margin-bottom:24px;transform:scale(1.2)}.upload-text[data-v-f02f10ad]{color:var(--leafer-point-color-text);margin-bottom:12px;font-size:18px;font-weight:500}.upload-hint[data-v-f02f10ad]{color:var(--leafer-point-color-placeholder);margin-bottom:28px;font-size:14px}.upload-button[data-v-f02f10ad]{background-color:var(--leafer-point-color-button);color:#fff;border-radius:var(--leafer-point-border-radius-tool-button);cursor:pointer;border:none;padding:12px 32px;font-size:15px;font-weight:500;transition:all .2s}.upload-button[data-v-f02f10ad]:hover{background-color:var(--leafer-point-color-button-hover);transform:translateY(-1px)}.upload-overlay.drag-over[data-v-f02f10ad]{border-color:var(--leafer-point-color-button);background-color:rgba(var(--leafer-point-color-button-rgb), .05)}.upload-overlay.drag-over .upload-icon[data-v-f02f10ad]{color:var(--leafer-point-color-button)}.error-overlay[data-v-f02f10ad]{background-color:var(--leafer-point-color-white);z-index:1000;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.error-overlay p[data-v-f02f10ad]{color:var(--leafer-point-color-error);margin-bottom:24px;font-size:18px;font-weight:500}.error-overlay button[data-v-f02f10ad]{background-color:var(--leafer-point-color-button);color:#fff;border-radius:var(--leafer-point-border-radius-tool-button);cursor:pointer;border:none;padding:12px 32px;font-size:15px;font-weight:500;transition:all .2s}.error-overlay button[data-v-f02f10ad]:hover{background-color:var(--leafer-point-color-button-hover);transform:translateY(-1px)}.zoom-controller[data-v-f02f10ad]{background-color:var(--leafer-point-color-white);border-radius:var(--leafer-point-border-radius-zoom);box-shadow:var(--leafer-point-shadow-zoom);z-index:100;align-items:center;display:flex;position:absolute;bottom:16px;left:16px;overflow:hidden}.zoom-button[data-v-f02f10ad]{width:var(--leafer-point-size-zoom-button);height:var(--leafer-point-size-zoom-button);background-color:var(--leafer-point-color-white);color:var(--leafer-point-color-text);cursor:pointer;transition:all var(--leafer-point-transition-time) ease;border:none;justify-content:center;align-items:center;display:flex;position:relative}.zoom-button[data-v-f02f10ad]:hover{background-color:var(--leafer-point-color-background-light);color:var(--leafer-point-color-primary)}.zoom-button[data-v-f02f10ad]:active{background-color:#e0e0e0}.zoom-value[data-v-f02f10ad]{min-width:var(--leafer-point-size-zoom-value);height:var(--leafer-point-size-zoom-button);line-height:var(--leafer-point-size-zoom-button);text-align:center;color:var(--leafer-point-color-text);cursor:pointer;border-left:1px solid var(--leafer-point-color-border-light);border-right:1px solid var(--leafer-point-color-border-light);transition:all var(--leafer-point-transition-time) ease;font-size:14px;font-weight:500;position:relative}.zoom-value .hotkey-hint[data-v-f02f10ad]{line-height:1}.zoom-value[data-v-f02f10ad]:hover{background-color:var(--leafer-point-color-background-light);color:var(--leafer-point-color-primary)}.toolbar[data-v-f02f10ad]{padding:var(--leafer-point-padding-toolbar);background-color:var(--leafer-point-color-background);border-top:1px solid var(--leafer-point-color-border);justify-content:center;align-items:center;gap:10px;display:flex}.tool-button[data-v-f02f10ad]{padding:var(--leafer-point-padding-tool-button);border-radius:var(--leafer-point-border-radius-tool-button);background-color:var(--leafer-point-color-white);color:var(--leafer-point-color-text);cursor:pointer;transition:all var(--leafer-point-transition-time) ease;box-shadow:var(--leafer-point-shadow-tool-button);border:none;justify-content:center;align-items:center;display:flex;position:relative}.tool-button[data-v-f02f10ad]:hover{background-color:var(--leafer-point-color-background-light);color:var(--leafer-point-color-primary);box-shadow:var(--leafer-point-shadow-tool-button-hover)}.tool-button[data-v-f02f10ad]:active{box-shadow:var(--leafer-point-shadow-tool-button);transform:translateY(1px)}.tool-button.active[data-v-f02f10ad]{background-color:var(--leafer-point-color-primary);color:#fff;box-shadow:var(--leafer-point-shadow-tool-button-active)}.hotkey-hint[data-v-f02f10ad]{font-size:var(--leafer-point-font-size-hotkey);color:#fff;padding:var(--leafer-point-padding-hotkey);border-radius:var(--leafer-point-border-radius-hotkey);pointer-events:none;white-space:nowrap;background-color:#0009;position:absolute;top:0;right:0}.size-control[data-v-f02f10ad]{padding:var(--leafer-point-padding-tool-button);background-color:var(--leafer-point-color-white);border-radius:var(--leafer-point-border-radius-tool-button);box-shadow:var(--leafer-point-shadow-tool-button);align-items:center;gap:8px;display:flex}.size-label[data-v-f02f10ad]{color:var(--leafer-point-color-text);white-space:nowrap;font-size:12px}.size-slider[data-v-f02f10ad]{appearance:none;cursor:pointer;background:#e0e0e0;border-radius:4px;outline:none;width:120px;height:8px}.size-slider[data-v-f02f10ad]::-webkit-slider-thumb{appearance:none;background:var(--leafer-point-color-primary);cursor:pointer;width:18px;height:18px;transition:all var(--leafer-point-transition-time) ease;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 6px #0000004d}.size-slider[data-v-f02f10ad]::-webkit-slider-thumb:hover{background:var(--leafer-point-color-primary-hover);transform:scale(1.15);box-shadow:0 3px 8px #0006}.size-slider[data-v-f02f10ad]::-webkit-slider-thumb:active{background:var(--leafer-point-color-primary-hover);transform:scale(1.15);box-shadow:0 3px 8px #0006}.size-slider[data-v-f02f10ad]:focus::-webkit-slider-thumb{background:var(--leafer-point-color-primary-hover);transform:scale(1.15);box-shadow:0 3px 8px #0006}.size-slider[data-v-f02f10ad]::-moz-range-thumb{background:var(--leafer-point-color-primary);cursor:pointer;width:18px;height:18px;transition:all var(--leafer-point-transition-time) ease;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 6px #0000004d}.size-slider[data-v-f02f10ad]::-moz-range-thumb:hover{background:var(--leafer-point-color-primary-hover);transform:scale(1.15);box-shadow:0 3px 8px #0006}.size-slider[data-v-f02f10ad]::-moz-range-thumb:active{background:var(--leafer-point-color-primary-hover);transform:scale(1.15);box-shadow:0 3px 8px #0006}.size-slider[data-v-f02f10ad]:focus::-moz-range-thumb{background:var(--leafer-point-color-primary-hover);transform:scale(1.15);box-shadow:0 3px 8px #0006}.size-slider[data-v-f02f10ad]:focus{outline:none}.size-value[data-v-f02f10ad]{text-align:center;min-width:30px;color:var(--leafer-point-color-primary);font-size:12px;font-weight:600}.app[data-v-4ddc095b]{max-width:1200px;margin:0 auto;padding:20px;font-family:Arial,sans-serif}h1[data-v-4ddc095b]{text-align:center;margin-bottom:30px}.editor-container[data-v-4ddc095b]{border:1px solid #ddd;border-radius:8px;width:100%;height:600px;margin-bottom:30px;overflow:hidden}.controls[data-v-4ddc095b]{background-color:#f5f5f5;border-radius:8px;margin-bottom:30px;padding:20px}.control-group[data-v-4ddc095b]{margin-bottom:15px}label[data-v-4ddc095b]{margin-bottom:5px;font-weight:700;display:block}input[data-v-4ddc095b]{border:1px solid #ddd;border-radius:4px;width:100%;margin-bottom:10px;padding:8px}.mask-options[data-v-4ddc095b]{gap:15px;margin-bottom:10px;display:flex}.mask-options label[data-v-4ddc095b]{align-items:center;gap:5px;font-weight:400;display:flex}.mask-options select[data-v-4ddc095b]{border:1px solid #ddd;border-radius:4px;padding:4px 8px}button[data-v-4ddc095b]{color:#fff;cursor:pointer;background-color:#007bff;border:none;border-radius:4px;margin-right:10px;padding:8px 16px}button[data-v-4ddc095b]:hover{background-color:#0069d9}.output[data-v-4ddc095b]{background-color:#f5f5f5;border-radius:8px;margin-bottom:30px;padding:20px}pre[data-v-4ddc095b]{white-space:pre-wrap;word-wrap:break-word;background-color:#fff;border-radius:4px;max-height:300px;padding:15px;overflow-y:auto}.status[data-v-4ddc095b]{background-color:#f5f5f5;border-radius:8px;padding:20px}

package/docs/index.html

@@ -5,8 +5,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">
+    <script type="module" crossorigin src="./assets/index-CPn8AE3g.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-Dqqq7qvI.css">
   </head>
   <body>
     <div id="app"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zzalai/leafer-point-annotation",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "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": {
@@ -14,6 +14,10 @@
       "import": "./dist/leafer-point-annotation.es.js",
       "require": "./dist/leafer-point-annotation.umd.js",
       "types": "./dist/index.d.ts"
+    },
+    "./dist/leafer-point-annotation.css": {
+      "import": "./dist/leafer-point-annotation.css",
+      "require": "./dist/leafer-point-annotation.css"
     }
   },
   "scripts": {
@@ -21,7 +25,8 @@
     "build": "vite build",
     "preview": "vite preview",
     "type-check": "tsc --noEmit",
-    "docs:build": "vite build --config vite.docs.config.ts"
+    "docs:build": "vite build --config vite.docs.config.ts",
+    "build:all": "npm run build && npm run docs:build"
   },
   "keywords": [
     "vue3",
@@ -56,9 +61,10 @@
   "devDependencies": {
     "@types/node": "^25.6.0",
     "@vitejs/plugin-vue": "^6.0.6",
+    "@vue/language-core": "^3.3.3",
     "terser": "^5.46.1",
     "typescript": "^6.0.2",
     "vite": "^8.0.8",
-    "vite-plugin-dts": "^3.0.0"
+    "vite-plugin-dts": "^5.0.2"
   }
 }

package/project-docs/ARCHITECTURE.md

@@ -121,9 +121,15 @@ const loadStatus = ref('idle');
 const imageWidth = ref<number | null>(null);
 const imageHeight = ref<number | null>(null);
 
+// 本地图片上传状态
+const hasLocalImage = ref(false);
+const localImageUrl = ref('');
+const isDragOver = ref(false);
+
 // UI 状态
 const showBrushPanel = ref(false);
 const brushButtonRect = ref({ x: 0, y: 0, width: 0, height: 0 });
+const showTools = computed(() => loadStatus.value === 'success');
 
 // 笔刷样式
 const localBrushStyle = ref<BrushStyle>({ ...DEFAULT_BRUSH_STYLE });
@@ -136,6 +142,9 @@ const localBrushStyle = ref<BrushStyle>({ ...DEFAULT_BRUSH_STYLE });
 | pointermove | handlePointerMove | 笔刷绘制/鼠标追踪 |
 | pointerup | handlePointerUp | 完成笔刷绘制 |
 | keydown | handleKeyDown | 热键处理（tinykeys） |
+| dragover | handleDragOver | 拖拽文件时高亮边框 |
+| dragleave | handleDragLeave | 拖拽离开时取消高亮 |
+| drop | handleDrop | 拖拽文件时处理上传 |
 
 **对外 API**：
 ```typescript
@@ -344,12 +353,46 @@ const switchToSelect = () => {
 
 | 属性名 | 类型 | 默认值 | 说明 |
 |--------|------|--------|------|
-| imageSource | { id, url } | - | 图片源配置 |
+| imageSource | { id?: string, url: string } \| null | null | 图片源配置（可选，未提供时显示本地上传界面） |
 | pointStyle | Partial\<PointStyle\> | DEFAULT_POINT_STYLE | 点标注样式 |
 | brushStyle | Partial\<BrushStyle\> | DEFAULT_BRUSH_STYLE | 笔刷样式 |
 | options | { maskExportFormat, maskExportForeground } | - | 导出配置 |
 
-### 7.3 Events
+### 7.3 图片切换逻辑
+
+**图片加载策略**：
+1. 优先使用本地上传的图片（hasLocalImage 为 true）
+2. 其次使用 props.imageSource.url
+3. 无图片时显示上传界面
+
+**Props 监听**：
+```typescript
+watch(
+  () => props.imageSource?.url,
+  (newUrl, oldUrl) => {
+    if (newUrl) {
+      // 有新图片 URL，加载新图片
+      hasLocalImage.value = false;
+      localImageUrl.value = '';
+      loadImage(newUrl);
+    } else if (oldUrl && !newUrl) {
+      // 图片 URL 变空，清空画布回到上传状态
+      hasLocalImage.value = false;
+      localImageUrl.value = '';
+      clearAllAnnotationsAndBrush();
+      if (imageBox) {
+        contentLayer.clear();
+        imageBox.destroy();
+        imageBox = null;
+      }
+      loadStatus.value = 'idle';
+    }
+  },
+  { immediate: true }
+);
+```
+
+### 7.4 Events
 
 | 事件名 | 参数 | 说明 |
 |--------|------|------|
@@ -396,6 +439,6 @@ const switchToSelect = () => {
 
 ---
 
-**文档版本**：2.0  
+**文档版本**：2.1  
 **创建日期**：2026-04-28  
-**最后更新**：2026-05-02
+**最后更新**：2026-05-08

package/project-docs/IMPLEMENTATION_PLAN.md

@@ -95,17 +95,27 @@
 | 38 | 暴露画布控制方法 | zoomIn / zoomOut / resetZoom | 画布缩放 | ✅ |
 | 39 | 暴露导出导入方法 | exportCanvasJSON / importCanvasJSON / exportCOCO / exportYOLO | 导出导入逻辑 | ✅ |
 
-### 阶段八：测试与优化（P3）⏳ 待完成
+### 阶段八：测试与优化（P3）✅ 已完成
+
+| 序号 | 任务 | 描述 | 依赖 | 状态 |
+|------|------|------|------|------|
+| 40 | 本地图片上传功能 | 支持点击选择和拖拽上传本地图片 | 画布初始化 | ✅ |
+| 41 | props 图片切换优化 | 监听 props.imageSource.url 变化，自动切换图片 | 图片加载逻辑 | ✅ |
+| 42 | 图片清空功能 | props.imageSource.url 为空时，清空画布回到上传状态 | 图片加载逻辑 | ✅ |
+| 43 | 无图片界面优化 | 无图片时隐藏工具栏和缩放控制器，只显示上传界面 | UI 层 | ✅ |
+| 44 | 上传区域样式优化 | 上传区域占满整个画布，更大气简洁 | UI 层 | ✅ |
+
+### 阶段九：测试与优化（P3）⏳ 待完成
 
 | 序号 | 任务 | 描述 | 依赖 | 优先级 |
 |------|------|------|------|------|
-| 40 | 坐标转换测试 | 像素坐标 ↔ 归一化坐标正确性校验 | 点标注数据 | P1 |
-| 41 | 标签编辑测试 | 空值校验、编辑状态正确性 | 标签编辑逻辑 | P1 |
-| 42 | 撤销/重做完整性测试 | 确保所有操作可正确撤销/重做 | 所有命令 | P1 |
-| 43 | 性能优化 | Canvas 渲染优化、高频事件防抖 | 所有功能 | P2 |
-| 44 | 边界处理 | 极端坐标、空数据、异常输入的容错 | 所有功能 | P2 |
-| 45 | 跨浏览器测试 | 确保在各浏览器正常工作 | 所有功能 | P3 |
-| 46 | 文档完善 | 更新 README、API 文档、添加示例 | 所有功能 | P2 |
+| 45 | 坐标转换测试 | 像素坐标 ↔ 归一化坐标正确性校验 | 点标注数据 | P1 |
+| 46 | 标签编辑测试 | 空值校验、编辑状态正确性 | 标签编辑逻辑 | P1 |
+| 47 | 撤销/重做完整性测试 | 确保所有操作可正确撤销/重做 | 所有命令 | P1 |
+| 48 | 性能优化 | Canvas 渲染优化、高频事件防抖 | 所有功能 | P2 |
+| 49 | 边界处理 | 极端坐标、空数据、异常输入的容错 | 所有功能 | P2 |
+| 50 | 跨浏览器测试 | 确保在各浏览器正常工作 | 所有功能 | P3 |
+| 51 | 文档完善 | 更新 README、API 文档、添加示例 | 所有功能 | P2 |
 
 ---
 
@@ -165,14 +175,21 @@
 ├── 38. 画布控制方法
 └── 39. 导出导入方法
        ↓
-阶段八：测试与优化
-├── 40. 坐标转换测试
-├── 41. 标签编辑测试
-├── 42. 撤销/重做完整性测试
-├── 43. 性能优化
-├── 44. 边界处理
-├── 45. 跨浏览器测试
-└── 46. 文档完善
+阶段八：本地图片上传与优化
+├── 40. 本地图片上传功能
+├── 41. props 图片切换优化
+├── 42. 图片清空功能
+├── 43. 无图片界面优化
+└── 44. 上传区域样式优化
+       ↓
+阶段九：测试与优化
+├── 45. 坐标转换测试
+├── 46. 标签编辑测试
+├── 47. 撤销/重做完整性测试
+├── 48. 性能优化
+├── 49. 边界处理
+├── 50. 跨浏览器测试
+└── 51. 文档完善
 ```
 
 ---
@@ -187,10 +204,11 @@
 | M4 | 交互完善 | 工具栏、画布控制完成 | ✅ 完成 |
 | M5 | 数据导出 | 所有导出格式支持完成 | ✅ 完成 |
 | M6 | API 暴露 | 所有对外 API 完成 | ✅ 完成 |
-| M7 | 测试优化 | 测试通过、性能优化完成 | ⏳ 进行中 |
+| M7 | 本地图片上传 | 支持本地上传、拖拽、props 图片切换 | ✅ 完成 |
+| M8 | 测试优化 | 测试通过、性能优化完成 | ⏳ 进行中 |
 
 ---
 
-**文档版本**：2.0  
+**文档版本**：2.1  
 **创建日期**：2026-04-28  
-**最后更新**：2026-05-02
+**最后更新**：2026-05-08

package/project-docs/REQUIREMENTS.md

@@ -151,12 +151,22 @@
 | P6-003 | 支持图片自适应画布 | ⭐⭐⭐ |
 | P6-004 | 显示当前缩放比例 | ⭐⭐ |
 
-### 2.7 清除所有功能
+### 2.7 本地图片上传功能
 
 | 需求编号 | 功能描述 | 优先级 |
 |----------|----------|--------|
-| P7-001 | select 模式下未选中任何点时，按 Delete 清除所有标注和笔刷 | ⭐⭐⭐ |
-| P7-002 | 清除前显示确认对话框 | ⭐⭐⭐ |
+| P7-001 | imageSource 未提供时，显示本地上传界面 | ⭐⭐⭐ |
+| P7-002 | 支持点击选择本地图片文件 | ⭐⭐⭐ |
+| P7-003 | 支持拖拽图片文件到画布区域上传 | ⭐⭐⭐ |
+| P7-004 | 本地图片上传后，自动加载到画布 | ⭐⭐⭐ |
+| P7-005 | 上传区域样式：占满整个画布，虚线边框，拖拽时有视觉反馈 | ⭐⭐⭐ |
+
+### 2.8 清除所有功能
+
+| 需求编号 | 功能描述 | 优先级 |
+|----------|----------|--------|
+| P8-001 | select 模式下未选中任何标注点时，按 Delete 清除所有标注和笔刷 | ⭐⭐⭐ |
+| P8-002 | 清除前显示确认对话框 | ⭐⭐⭐ |
 
 ---
 
@@ -264,7 +274,7 @@ interface YOLOExport {
 
 | 属性名 | 类型 | 默认值 | 说明 |
 |--------|------|--------|------|
-| imageSource | { id?: string, url: string } | - | 图片源配置 |
+| imageSource | { id?: string, url: string } \| null | null | 图片源配置（可选，未提供时显示本地上传界面） |
 
 ### 4.2 点标注样式配置
 
@@ -352,7 +362,16 @@ interface YOLOExport {
 3. **清除**：点击删除按钮或按 Delete 键清除所有涂抹
 4. **配置**：点击笔刷工具按钮打开配置面板调整样式
 
-### 5.5 清除所有交互
+### 5.5 本地图片上传交互
+
+1. **无图片状态**：imageSource 未提供时，整个画布区域显示上传界面
+2. **点击上传**：点击"选择图片"按钮打开文件选择器
+3. **拖拽上传**：拖拽图片文件到画布区域，显示高亮边框反馈
+4. **文件选择**：选择本地图片后，自动加载到画布
+5. **图片切换**：通过 props.imageSource.url 变化时，自动切换图片并清空画布
+6. **图片清空**：props.imageSource.url 为空时，清空画布回到上传状态
+
+### 5.6 清除所有交互
 
 1. **条件**：select 模式下未选中任何标注点
 2. **触发**：点击删除按钮或按 Delete 键
@@ -512,6 +531,6 @@ PNG 或 JPG 格式图片，涂抹区域为前景色，其余为透明（PNG）
 
 ---
 
-**文档版本**：2.0
-**创建日期**：2024-04-28
-**最后更新**：2024-05-01
+**文档版本**：2.1  
+**创建日期**：2024-04-28  
+**最后更新**：2026-05-08

package/src/App.vue

@@ -116,11 +116,14 @@ import { ref, computed } from 'vue'
 import PointAnnotation from './components/PointAnnotation.vue'
 
 // 图片URL
-const imageUrl = ref('https://picsum.photos/1280/1080')
-const imageSource = computed(() => ({
-  id: 'test-image',
-  url: imageUrl.value
-}))
+const imageUrl = ref('')
+const imageSource = computed(() => {
+  if (!imageUrl.value) return undefined
+  return {
+    id: 'test-image',
+    url: imageUrl.value
+  }
+})
 
 // 编辑器选项
 const editorOptions = ref({