luo-image-annotator 0.0.1 → 0.0.3
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.
- package/README.md +58 -19
- package/dist/luo-image-annotator.css +1 -1
- package/dist/luo-image-annotator.es.js +603 -623
- package/dist/luo-image-annotator.umd.js +33 -1
- package/package.json +4 -6
package/README.md
CHANGED
|
@@ -36,20 +36,70 @@
|
|
|
36
36
|
|
|
37
37
|
构建产物将输出到 `dist` 目录。
|
|
38
38
|
|
|
39
|
-
##
|
|
39
|
+
## 发布到 npm
|
|
40
40
|
|
|
41
|
-
|
|
41
|
+
如果你想更新并发布这个组件库到 npm，请按照以下步骤操作：
|
|
42
42
|
|
|
43
|
-
|
|
43
|
+
### 1. 构建项目
|
|
44
|
+
|
|
45
|
+
首先确保代码已经构建为最新的发布版本：
|
|
44
46
|
|
|
45
47
|
```bash
|
|
46
|
-
npm
|
|
48
|
+
npm run build
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
这会在 `dist` 目录下生成打包好的文件。
|
|
52
|
+
|
|
53
|
+
### 2. 更新版本号
|
|
54
|
+
|
|
55
|
+
在发布之前，必须更新 `package.json` 中的版本号，否则 npm 会拒绝发布。
|
|
56
|
+
|
|
57
|
+
```bash
|
|
58
|
+
# 自动更新补丁版本 (例如从 0.0.1 -> 0.0.2)
|
|
59
|
+
npm version patch
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
或者手动修改 `package.json` 文件中的 `version` 字段。
|
|
63
|
+
|
|
64
|
+
### 3. 登录 npm (如果未登录)
|
|
65
|
+
|
|
66
|
+
如果你还没有登录 npm，或者登录已过期：
|
|
67
|
+
|
|
68
|
+
```bash
|
|
69
|
+
npm login
|
|
70
|
+
```
|
|
71
|
+
按提示输入你的用户名、密码和邮箱。如果开启了双重验证 (2FA)，还需要输入一次性验证码。
|
|
72
|
+
|
|
73
|
+
### 4. 发布
|
|
74
|
+
|
|
75
|
+
执行发布命令：
|
|
76
|
+
|
|
77
|
+
```bash
|
|
78
|
+
npm publish
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
**注意：**
|
|
82
|
+
由于 npm 强制要求开启双重验证 (2FA)，发布时可能需要提供验证码。
|
|
83
|
+
请在命令后加上 `--otp` 参数，填入你手机验证器 App (如 Google Authenticator) 上的 6 位数字，或者使用 npm 提供的恢复码 (Recovery Code)：
|
|
84
|
+
|
|
85
|
+
```bash
|
|
86
|
+
# 示例：使用手机验证码
|
|
87
|
+
npm publish --otp=123456
|
|
88
|
+
|
|
89
|
+
# 示例：使用恢复码 (如果你无法使用手机 App)
|
|
90
|
+
npm publish --otp=你的恢复码字符串
|
|
47
91
|
```
|
|
48
92
|
|
|
49
|
-
|
|
93
|
+
发布成功后，你就可以在其他项目中通过 `npm update luo-image-annotator` 来获取最新版本了。
|
|
94
|
+
|
|
95
|
+
## 在其他项目中使用
|
|
96
|
+
|
|
97
|
+
### 1. 安装
|
|
98
|
+
|
|
99
|
+
在你的 Vue 3 项目中安装本组件库：
|
|
50
100
|
|
|
51
101
|
```bash
|
|
52
|
-
npm install
|
|
102
|
+
npm install luo-image-annotator
|
|
53
103
|
```
|
|
54
104
|
|
|
55
105
|
### 2. 全局引入 (推荐)
|
|
@@ -60,25 +110,14 @@ npm install element-plus @element-plus/icons-vue
|
|
|
60
110
|
import { createApp } from 'vue'
|
|
61
111
|
import App from './App.vue'
|
|
62
112
|
|
|
63
|
-
// 1.
|
|
64
|
-
import ElementPlus from 'element-plus'
|
|
65
|
-
import 'element-plus/dist/index.css'
|
|
66
|
-
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
|
67
|
-
|
|
68
|
-
// 2. 引入本组件库样式
|
|
113
|
+
// 1. 引入本组件库样式
|
|
69
114
|
import 'luo-image-annotator/dist/style.css'
|
|
70
115
|
|
|
71
|
-
//
|
|
116
|
+
// 2. 引入组件
|
|
72
117
|
import { BatchAnnotator } from 'luo-image-annotator'
|
|
73
118
|
|
|
74
119
|
const app = createApp(App)
|
|
75
120
|
|
|
76
|
-
app.use(ElementPlus)
|
|
77
|
-
// 注册图标
|
|
78
|
-
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
|
79
|
-
app.component(key, component)
|
|
80
|
-
}
|
|
81
|
-
|
|
82
121
|
// 全局注册 BatchAnnotator 组件
|
|
83
122
|
app.component('BatchAnnotator', BatchAnnotator)
|
|
84
123
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.annotation-container[data-v-
|
|
1
|
+
.svg-icon[data-v-3928607b]{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;fill:currentColor;font-style:normal;line-height:0;text-align:center;text-transform:none;vertical-align:-.125em;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.svg-icon[data-v-3928607b] svg{width:1em;height:1em;fill:currentColor}.size-small[data-v-3928607b]{font-size:12px}.size-large[data-v-3928607b]{font-size:20px}.annotation-container[data-v-fe1b36c0]{display:flex;height:100%;width:100%;border:1px solid #e0e0e0;background:#f5f5f5;overflow:hidden}.left-sidebar[data-v-fe1b36c0]{width:50px;background:#fff;border-right:1px solid #e0e0e0;display:flex;flex-direction:column;align-items:center;padding:8px 0;gap:8px;z-index:10}.tool-btn[data-v-fe1b36c0]{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:18px;transition:all .2s}.tool-btn[data-v-fe1b36c0]:hover{background:#f0f0f0}.tool-btn.active[data-v-fe1b36c0]{background:#e3f2fd;border-color:#2196f3;color:#2196f3}.divider[data-v-fe1b36c0]{width:80%;height:1px;background:#ddd;margin:4px 0}.center-area[data-v-fe1b36c0]{flex:1;display:flex;flex-direction:column;position:relative;overflow:hidden}.top-bar[data-v-fe1b36c0]{height:50px;background:#fff;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;padding:0 16px}.label-selector[data-v-fe1b36c0]{display:flex;align-items:center;gap:12px;width:100%;overflow-x:auto}.label-text[data-v-fe1b36c0]{font-size:14px;font-weight:700;color:#555;white-space:nowrap}.tags-row[data-v-fe1b36c0]{display:flex;gap:8px}.tag-chip[data-v-fe1b36c0]{padding:4px 12px;border-radius:16px;font-size:12px;color:#fff;cursor:pointer;border:2px solid transparent;opacity:.7;transition:all .2s;white-space:nowrap}.tag-chip.active[data-v-fe1b36c0]{opacity:1;transform:scale(1.05);box-shadow:0 2px 4px #0003}.canvas-wrapper[data-v-fe1b36c0]{flex:1;background:#333;position:relative;overflow:hidden}.batch-nav[data-v-fe1b36c0]{height:48px;background:#fff;border-top:1px solid #e0e0e0;display:flex;justify-content:center;align-items:center;gap:16px}.batch-nav button[data-v-fe1b36c0]{padding:6px 16px;background:#f5f5f5;border:1px solid #ddd;border-radius:4px;cursor:pointer}.batch-nav button[data-v-fe1b36c0]:hover:not(:disabled){background:#e0e0e0}.right-sidebar[data-v-fe1b36c0]{width:250px;background:#fff;border-left:1px solid #e0e0e0;display:flex;flex-direction:column;z-index:10}.sidebar-header[data-v-fe1b36c0]{padding:16px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center}.sidebar-header h3[data-v-fe1b36c0]{margin:0;font-size:16px}.add-btn[data-v-fe1b36c0]{padding:4px 8px;background:#2196f3;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:12px}.label-list[data-v-fe1b36c0]{flex:1;overflow-y:auto;padding:8px}.label-item[data-v-fe1b36c0]{margin-bottom:8px;padding:8px;background:#f9f9f9;border-radius:4px;border:1px solid #eee}.label-row[data-v-fe1b36c0]{display:flex;align-items:center;gap:8px}.eye-icon[data-v-fe1b36c0],.delete-icon[data-v-fe1b36c0]{cursor:pointer;font-size:16px;-webkit-user-select:none;user-select:none;opacity:.7}.eye-icon[data-v-fe1b36c0]:hover,.delete-icon[data-v-fe1b36c0]:hover{opacity:1}.color-picker[data-v-fe1b36c0]{width:24px;height:24px;padding:0;border:none;cursor:pointer;background:none}.name-input[data-v-fe1b36c0]{flex:1;border:1px solid transparent;background:transparent;font-size:14px;padding:2px 4px}.name-input[data-v-fe1b36c0]:focus{border-color:#2196f3;background:#fff;outline:none}.color-wrapper[data-v-fe1b36c0]{width:16px;height:16px;border-radius:50%;cursor:pointer;border:1px solid rgba(0,0,0,.1);flex-shrink:0}.label-name[data-v-fe1b36c0]{flex:1;font-size:14px;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.action-icon[data-v-fe1b36c0]{cursor:pointer;font-size:16px;-webkit-user-select:none;user-select:none;width:24px;text-align:center;opacity:.6}.action-icon[data-v-fe1b36c0]:hover{opacity:1}.more-actions[data-v-fe1b36c0]{position:relative;display:flex;justify-content:center;align-items:center}.more-actions .delete-btn[data-v-fe1b36c0]{display:none;font-size:14px}.more-actions:hover .dots[data-v-fe1b36c0]{display:none}.more-actions:hover .delete-btn[data-v-fe1b36c0]{display:inline-block;color:#f44336}.modal-overlay[data-v-fe1b36c0]{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content[data-v-fe1b36c0]{background:#fff;padding:20px;border-radius:8px;width:300px;box-shadow:0 4px 12px #00000026}.modal-content h3[data-v-fe1b36c0]{margin:0 0 16px;font-size:18px;color:#333}.form-group[data-v-fe1b36c0]{margin-bottom:16px}.form-group label[data-v-fe1b36c0]{display:block;margin-bottom:8px;font-size:14px;color:#666}.modal-input[data-v-fe1b36c0]{width:100%;padding:8px;border:1px solid #ddd;border-radius:4px;font-size:14px;box-sizing:border-box}.color-input-wrapper[data-v-fe1b36c0]{display:flex;align-items:center;gap:8px}.modal-color-picker[data-v-fe1b36c0]{width:40px;height:30px;padding:0;border:none;background:none;cursor:pointer}.modal-actions[data-v-fe1b36c0]{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}.cancel-btn[data-v-fe1b36c0]{padding:6px 16px;background:#f5f5f5;border:1px solid #ddd;border-radius:4px;cursor:pointer;color:#666}.confirm-btn[data-v-fe1b36c0]{padding:6px 16px;background:#2196f3;border:none;border-radius:4px;cursor:pointer;color:#fff}.cancel-btn[data-v-fe1b36c0]:hover{background:#e0e0e0}.confirm-btn[data-v-fe1b36c0]:hover{background:#1976d2}.thumbnail-wrapper[data-v-78bcbe0c]{position:relative;width:100%;height:100%;overflow:hidden;border-radius:4px;background:#f0f0f0}.thumbnail-image[data-v-78bcbe0c]{width:100%;height:100%;object-fit:cover;display:block}.annotation-overlay[data-v-78bcbe0c]{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.loading-placeholder[data-v-78bcbe0c]{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#999;font-size:12px}.anno-label[data-v-78bcbe0c]{paint-order:stroke;stroke:#fff;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.batch-annotator[data-v-87f3e002]{width:100%;height:100vh;display:flex;flex-direction:column;background:#f5f5f5}.gallery-view[data-v-87f3e002]{flex:1;display:flex;flex-direction:column;overflow:hidden;padding:20px;position:relative}.gallery-header[data-v-87f3e002]{margin-bottom:20px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.gallery-header h3[data-v-87f3e002]{margin:0;font-size:20px;color:#333}.label-summary[data-v-87f3e002]{display:flex;gap:8px}.label-badge[data-v-87f3e002]{padding:4px 10px;border-radius:12px;color:#fff;font-size:12px;font-weight:700}.gallery-grid[data-v-87f3e002]{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;overflow-y:auto;padding-bottom:80px}.gallery-item[data-v-87f3e002]{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px #0000001a;cursor:pointer;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;height:240px}.gallery-item[data-v-87f3e002]:hover{transform:translateY(-4px);box-shadow:0 4px 12px #00000026}.thumbnail-wrapper[data-v-87f3e002]{flex:1;overflow:hidden;position:relative}.img-meta[data-v-87f3e002]{padding:8px;font-size:12px;color:#666;display:flex;justify-content:space-between;background:#fff;border-top:1px solid #eee;height:32px;align-items:center}.bottom-bar[data-v-87f3e002]{position:absolute;bottom:0;left:0;width:100%;height:60px;background:#fff;border-top:1px solid #e0e0e0;display:flex;justify-content:space-between;align-items:center;padding:0 40px;box-shadow:0 -2px 10px #0000000d;z-index:100}.action-btn[data-v-87f3e002]{display:flex;align-items:center;gap:8px;padding:10px 24px;border:none;border-radius:4px;font-size:16px;cursor:pointer;transition:background .2s}.action-btn.primary[data-v-87f3e002]{background:#2196f3;color:#fff}.action-btn.primary[data-v-87f3e002]:hover{background:#1976d2}.action-btn.success[data-v-87f3e002]{background:#4caf50;color:#fff}.action-btn.success[data-v-87f3e002]:hover{background:#388e3c}.editor-view[data-v-87f3e002]{flex:1;display:flex;flex-direction:column;height:100%}.editor-header[data-v-87f3e002]{height:50px;background:#fff;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;padding:0 16px;justify-content:space-between;flex-shrink:0}.header-left[data-v-87f3e002]{display:flex;align-items:center;gap:16px}.back-btn[data-v-87f3e002]{display:flex;align-items:center;gap:4px;background:transparent;border:1px solid #ddd;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:14px;color:#666}.back-btn[data-v-87f3e002]:hover{background:#f5f5f5;color:#333}.editor-content[data-v-87f3e002]{flex:1;overflow:hidden;position:relative}
|