@zzalai/leafer-point-annotation 1.0.0 → 1.1.1

package/README.md

@@ -14,6 +14,7 @@
 - 🔍 **画布缩放** - 支持缩放、平移、重置
 - ⌨️ **热键支持** - V/P/B/E/Ctrl+Z/Ctrl+Y 等
 - 📱 **响应式设计** - Vue3 组件化架构
+- 🖼️ **本地上传** - 支持本地图片上传和拖拽上传
 
 ## 安装
 
@@ -37,7 +38,7 @@ pnpm add @zzalai/leafer-point-annotation
 
 ## 快速开始
 
-### 基础使用
+### 使用远程图片
 
 ```vue
 <template>
@@ -59,6 +60,7 @@ pnpm add @zzalai/leafer-point-annotation
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { PointAnnotation } from '@zzalai/leafer-point-annotation'
+import '@zzalai/leafer-point-annotation/dist/leafer-point-annotation.css'
 
 const annotationRef = ref<InstanceType<typeof PointAnnotation> | null>(null)
 const imageSource = computed(() => ({
@@ -126,13 +128,66 @@ const exportMask = async () => {
 </style>
 ```
 
+### 使用本地图片上传
+
+不提供 `imageSource` prop 时，会显示本地上传界面，支持点击选择或拖拽上传。
+
+```vue
+<template>
+  <div class="demo-container">
+    <PointAnnotation
+      ref="annotationRef"
+      :options="options"
+      @pointChange="handlePointChange"
+      @loadSuccess="handleLoadSuccess"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { PointAnnotation } from '@zzalai/leafer-point-annotation'
+import '@zzalai/leafer-point-annotation/dist/leafer-point-annotation.css'
+
+const annotationRef = ref<InstanceType<typeof PointAnnotation> | null>(null)
+
+const options = ref({
+  pointStyle: {
+    circleFill: '#ff4d4f',
+    circleStroke: '#ffffff',
+    labelBackgroundColor: '#ffffff'
+  },
+  brushStyle: {
+    color: '#ff4d4f',
+    opacity: 0.55,
+    size: 100
+  }
+})
+
+const handlePointChange = (points) => {
+  console.log('标注点变化:', points)
+}
+
+const handleLoadSuccess = () => {
+  console.log('图片加载成功')
+}
+</script>
+
+<style scoped>
+.demo-container {
+  width: 100%;
+  height: 600px;
+}
+</style>
+```
+
 ## API 文档
 
 ### Props
 
 | 属性名 | 类型 | 默认值 | 说明 |
 |--------|------|--------|------|
-| imageSource | `{ id?: string; url: string }` | 必填 | 图片源配置 |
+| imageSource | `{ id?: string; url: string }` | `null` | 图片源配置（可选，不提供时显示本地上传入口） |
 | options | `Object` | `{}` | 配置选项 |
 
 #### Options 配置

package/README_EN.md

@@ -14,6 +14,7 @@ A point annotation and brush painting tool based on Vue3 + LeaferJS, supporting
 - 🔍 **Canvas Zoom** - Zoom, pan, reset support
 - ⌨️ **Hotkeys** - V/P/B/E/Ctrl+Z/Ctrl+Y and more
 - 📱 **Responsive Design** - Vue3 component architecture
+- 🖼️ **Local Upload** - Support local image upload and drag-and-drop
 
 ## Installation
 
@@ -37,7 +38,7 @@ pnpm add @zzalai/leafer-point-annotation
 
 ## Quick Start
 
-### Basic Usage
+### Using Remote Image
 
 ```vue
 <template>
@@ -59,6 +60,7 @@ pnpm add @zzalai/leafer-point-annotation
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { PointAnnotation } from '@zzalai/leafer-point-annotation'
+import '@zzalai/leafer-point-annotation/dist/leafer-point-annotation.css'
 
 const annotationRef = ref<InstanceType<typeof PointAnnotation> | null>(null)
 const imageSource = computed(() => ({
@@ -126,13 +128,66 @@ const exportMask = async () => {
 </style>
 ```
 
+### Using Local Image Upload
+
+When not providing the `imageSource` prop, the local upload interface will be displayed, supporting click to select or drag and drop.
+
+```vue
+<template>
+  <div class="demo-container">
+    <PointAnnotation
+      ref="annotationRef"
+      :options="options"
+      @pointChange="handlePointChange"
+      @loadSuccess="handleLoadSuccess"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { PointAnnotation } from '@zzalai/leafer-point-annotation'
+import '@zzalai/leafer-point-annotation/dist/leafer-point-annotation.css'
+
+const annotationRef = ref<InstanceType<typeof PointAnnotation> | null>(null)
+
+const options = ref({
+  pointStyle: {
+    circleFill: '#ff4d4f',
+    circleStroke: '#ffffff',
+    labelBackgroundColor: '#ffffff'
+  },
+  brushStyle: {
+    color: '#ff4d4f',
+    opacity: 0.55,
+    size: 100
+  }
+})
+
+const handlePointChange = (points) => {
+  console.log('Points changed:', points)
+}
+
+const handleLoadSuccess = () => {
+  console.log('Image loaded successfully')
+}
+</script>
+
+<style scoped>
+.demo-container {
+  width: 100%;
+  height: 600px;
+}
+</style>
+```
+
 ## API Documentation
 
 ### Props
 
 | Property | Type | Default | Description |
 |----------|------|---------|-------------|
-| imageSource | `{ id?: string; url: string }` | Required | Image source configuration |
+| imageSource | `{ id?: string; url: string }` | `null` | Image source configuration (optional, shows upload UI when not provided) |
 | options | `Object` | `{}` | Configuration options |
 
 #### Options Configuration