luo-image-annotator 0.0.2 → 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 +2 -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 +2 -5
package/README.md
CHANGED
|
@@ -102,12 +102,6 @@ npm publish --otp=你的恢复码字符串
|
|
|
102
102
|
npm install luo-image-annotator
|
|
103
103
|
```
|
|
104
104
|
|
|
105
|
-
由于本组件库依赖 `element-plus` 和 `@element-plus/icons-vue`，如果你的项目中尚未安装，请同时安装它们：
|
|
106
|
-
|
|
107
|
-
```bash
|
|
108
|
-
npm install element-plus @element-plus/icons-vue
|
|
109
|
-
```
|
|
110
|
-
|
|
111
105
|
### 2. 全局引入 (推荐)
|
|
112
106
|
|
|
113
107
|
在 `main.ts` 或 `main.js` 中引入样式和组件：
|
|
@@ -116,25 +110,14 @@ npm install element-plus @element-plus/icons-vue
|
|
|
116
110
|
import { createApp } from 'vue'
|
|
117
111
|
import App from './App.vue'
|
|
118
112
|
|
|
119
|
-
// 1.
|
|
120
|
-
import ElementPlus from 'element-plus'
|
|
121
|
-
import 'element-plus/dist/index.css'
|
|
122
|
-
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
|
123
|
-
|
|
124
|
-
// 2. 引入本组件库样式
|
|
113
|
+
// 1. 引入本组件库样式
|
|
125
114
|
import 'luo-image-annotator/dist/style.css'
|
|
126
115
|
|
|
127
|
-
//
|
|
116
|
+
// 2. 引入组件
|
|
128
117
|
import { BatchAnnotator } from 'luo-image-annotator'
|
|
129
118
|
|
|
130
119
|
const app = createApp(App)
|
|
131
120
|
|
|
132
|
-
app.use(ElementPlus)
|
|
133
|
-
// 注册图标
|
|
134
|
-
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
|
135
|
-
app.component(key, component)
|
|
136
|
-
}
|
|
137
|
-
|
|
138
121
|
// 全局注册 BatchAnnotator 组件
|
|
139
122
|
app.component('BatchAnnotator', BatchAnnotator)
|
|
140
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}
|