c-image 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.
- package/.env +5 -0
- package/.env.development +8 -0
- package/.env.production +13 -0
- package/.eslintrc.cjs +32 -0
- package/.prettierrc.json +8 -0
- package/README.md +35 -0
- package/index.html +13 -0
- package/jsconfig.json +8 -0
- package/lib/favicon.ico +0 -0
- package/lib/my-vue-library.es.js +409 -0
- package/lib/my-vue-library.umd.js +1 -0
- package/lib/style.css +1 -0
- package/package.json +38 -0
- package/public/favicon.ico +0 -0
- package/vite.config.js +35 -0
package/.env
ADDED
package/.env.development
ADDED
package/.env.production
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
# 线上环境平台打包路径
|
|
2
|
+
VITE_PUBLIC_PATH = /
|
|
3
|
+
|
|
4
|
+
# 线上环境路由历史模式(Hash模式传"hash"、HTML5模式传"h5"、Hash模式带base参数传"hash,base参数"、HTML5模式带base参数传"h5,base参数")
|
|
5
|
+
VITE_ROUTER_HISTORY = "hash"
|
|
6
|
+
|
|
7
|
+
# 是否在打包时使用cdn替换本地库 替换 true 不替换 false
|
|
8
|
+
VITE_CDN = false
|
|
9
|
+
|
|
10
|
+
# 是否启用gzip压缩或brotli压缩(分两种情况,删除原始文件和不删除原始文件)
|
|
11
|
+
# 压缩时不删除原始文件的配置:gzip、brotli、both(同时开启 gzip 与 brotli 压缩)、none(不开启压缩,默认)
|
|
12
|
+
# 压缩时删除原始文件的配置:gzip-clear、brotli-clear、both-clear(同时开启 gzip 与 brotli 压缩)、none(不开启压缩,默认)
|
|
13
|
+
VITE_COMPRESSION = "none"
|
package/.eslintrc.cjs
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/* eslint-env node */
|
|
2
|
+
require('@rushstack/eslint-patch/modern-module-resolution')
|
|
3
|
+
|
|
4
|
+
module.exports = {
|
|
5
|
+
root: true,
|
|
6
|
+
env: {
|
|
7
|
+
browser: true,
|
|
8
|
+
es2021: true,
|
|
9
|
+
node: true,
|
|
10
|
+
},
|
|
11
|
+
extends: [
|
|
12
|
+
'plugin:vue/vue3-essential',
|
|
13
|
+
'eslint:recommended',
|
|
14
|
+
'@vue/eslint-config-prettier/skip-formatting',
|
|
15
|
+
],
|
|
16
|
+
parserOptions: {
|
|
17
|
+
ecmaVersion: 'latest',
|
|
18
|
+
},
|
|
19
|
+
rules: {
|
|
20
|
+
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
|
21
|
+
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
|
22
|
+
// 关闭组件命名规则
|
|
23
|
+
// 'vue/multi-word-component-names': 'off',
|
|
24
|
+
// 添加组件命名忽略规则
|
|
25
|
+
'vue/multi-word-component-names': [
|
|
26
|
+
'error',
|
|
27
|
+
{
|
|
28
|
+
ignores: ['Home', 'User', 'index'], //在这个数组中加入需要忽略的组件名
|
|
29
|
+
},
|
|
30
|
+
],
|
|
31
|
+
},
|
|
32
|
+
}
|
package/.prettierrc.json
ADDED
package/README.md
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
# 组件开发模板
|
|
2
|
+
|
|
3
|
+
使用vue3开发vue组件,本模板只包含必须的依赖,如需使用插件或UI组件,请自行添加依赖。
|
|
4
|
+
|
|
5
|
+
## Recommended IDE Setup
|
|
6
|
+
|
|
7
|
+
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
|
8
|
+
|
|
9
|
+
## Customize configuration
|
|
10
|
+
|
|
11
|
+
See [Vite Configuration Reference](https://vitejs.dev/config/).
|
|
12
|
+
|
|
13
|
+
## Project Setup
|
|
14
|
+
|
|
15
|
+
```sh
|
|
16
|
+
pnpm install
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
### Compile and Hot-Reload for Development
|
|
20
|
+
|
|
21
|
+
```sh
|
|
22
|
+
pnpm dev
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
### Compile and Minify for Production
|
|
26
|
+
|
|
27
|
+
```sh
|
|
28
|
+
pnpm build
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### Lint with [ESLint](https://eslint.org/)
|
|
32
|
+
|
|
33
|
+
```sh
|
|
34
|
+
pnpm lint
|
|
35
|
+
```
|
package/index.html
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<link rel="icon" href="/favicon.ico">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>Vite App</title>
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div id="app"></div>
|
|
11
|
+
<script type="module" src="/src/main.js"></script>
|
|
12
|
+
</body>
|
|
13
|
+
</html>
|
package/jsconfig.json
ADDED
package/lib/favicon.ico
ADDED
|
Binary file
|
|
@@ -0,0 +1,409 @@
|
|
|
1
|
+
import { defineComponent as S, createElementBlock as m, openBlock as n, createElementVNode as a, resolveComponent as o, createBlock as k, toDisplayString as C, withCtx as s, createVNode as t, unref as $, ref as v, Fragment as B, createTextVNode as y, renderList as V, normalizeClass as T, normalizeStyle as D } from "vue";
|
|
2
|
+
/*! Element Plus Icons Vue v2.3.2 */
|
|
3
|
+
var X = /* @__PURE__ */ S({
|
|
4
|
+
name: "ArrowLeft",
|
|
5
|
+
__name: "arrow-left",
|
|
6
|
+
setup(e) {
|
|
7
|
+
return (i, l) => (n(), m("svg", {
|
|
8
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
9
|
+
viewBox: "0 0 1024 1024"
|
|
10
|
+
}, [
|
|
11
|
+
a("path", {
|
|
12
|
+
fill: "currentColor",
|
|
13
|
+
d: "M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.59 30.59 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.59 30.59 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0"
|
|
14
|
+
})
|
|
15
|
+
]));
|
|
16
|
+
}
|
|
17
|
+
}), q = X, H = /* @__PURE__ */ S({
|
|
18
|
+
name: "ArrowRight",
|
|
19
|
+
__name: "arrow-right",
|
|
20
|
+
setup(e) {
|
|
21
|
+
return (i, l) => (n(), m("svg", {
|
|
22
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
23
|
+
viewBox: "0 0 1024 1024"
|
|
24
|
+
}, [
|
|
25
|
+
a("path", {
|
|
26
|
+
fill: "currentColor",
|
|
27
|
+
d: "M340.864 149.312a30.59 30.59 0 0 0 0 42.752L652.736 512 340.864 831.872a30.59 30.59 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"
|
|
28
|
+
})
|
|
29
|
+
]));
|
|
30
|
+
}
|
|
31
|
+
}), O = H, U = /* @__PURE__ */ S({
|
|
32
|
+
name: "Picture",
|
|
33
|
+
__name: "picture",
|
|
34
|
+
setup(e) {
|
|
35
|
+
return (i, l) => (n(), m("svg", {
|
|
36
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
37
|
+
viewBox: "0 0 1024 1024"
|
|
38
|
+
}, [
|
|
39
|
+
a("path", {
|
|
40
|
+
fill: "currentColor",
|
|
41
|
+
d: "M160 160v704h704V160zm-32-64h768a32 32 0 0 1 32 32v768a32 32 0 0 1-32 32H128a32 32 0 0 1-32-32V128a32 32 0 0 1 32-32"
|
|
42
|
+
}),
|
|
43
|
+
a("path", {
|
|
44
|
+
fill: "currentColor",
|
|
45
|
+
d: "M384 288q64 0 64 64t-64 64-64-64 64-64M185.408 876.992l-50.816-38.912L350.72 556.032a96 96 0 0 1 134.592-17.856l1.856 1.472 122.88 99.136a32 32 0 0 0 44.992-4.864l216-269.888 49.92 39.936-215.808 269.824-.256.32a96 96 0 0 1-135.04 14.464l-122.88-99.072-.64-.512a32 32 0 0 0-44.8 5.952z"
|
|
46
|
+
})
|
|
47
|
+
]));
|
|
48
|
+
}
|
|
49
|
+
}), M = U;
|
|
50
|
+
const w = (e, i) => {
|
|
51
|
+
const l = e.__vccOpts || e;
|
|
52
|
+
for (const [d, c] of i)
|
|
53
|
+
l[d] = c;
|
|
54
|
+
return l;
|
|
55
|
+
}, W = { class: "wrap" }, G = { class: "name" }, J = { class: "flex justify-center items-center h-full" }, K = {
|
|
56
|
+
key: 1,
|
|
57
|
+
class: "flex justify-center items-center h-full"
|
|
58
|
+
}, Q = {
|
|
59
|
+
__name: "cImageItem",
|
|
60
|
+
props: {
|
|
61
|
+
curImageIndex: { type: Number, default: 0 },
|
|
62
|
+
fit: { type: String, default: "contain" },
|
|
63
|
+
imgList: { type: Array, default: () => [] },
|
|
64
|
+
show: { type: Boolean, default: !0 }
|
|
65
|
+
},
|
|
66
|
+
setup(e) {
|
|
67
|
+
const i = {
|
|
68
|
+
0: "融合智能识别",
|
|
69
|
+
1: "声迅智能识别",
|
|
70
|
+
2: "海康智能识别",
|
|
71
|
+
3: "讯飞智能识别"
|
|
72
|
+
};
|
|
73
|
+
return (l, d) => {
|
|
74
|
+
const c = o("el-icon"), u = o("el-image");
|
|
75
|
+
return n(), m("div", W, [
|
|
76
|
+
a("div", G, C(i[e.curImageIndex]), 1),
|
|
77
|
+
e.show ? (n(), k(u, {
|
|
78
|
+
key: 0,
|
|
79
|
+
class: "image-item",
|
|
80
|
+
src: e.imgList[e.curImageIndex].url,
|
|
81
|
+
fit: e.fit,
|
|
82
|
+
"preview-src-list": e.imgList.map((g) => g.url)
|
|
83
|
+
}, {
|
|
84
|
+
error: s(() => [
|
|
85
|
+
a("div", J, [
|
|
86
|
+
t(c, null, {
|
|
87
|
+
default: s(() => [
|
|
88
|
+
t($(M))
|
|
89
|
+
]),
|
|
90
|
+
_: 1
|
|
91
|
+
})
|
|
92
|
+
])
|
|
93
|
+
]),
|
|
94
|
+
_: 1
|
|
95
|
+
}, 8, ["src", "fit", "preview-src-list"])) : (n(), m("div", K, [
|
|
96
|
+
t(c, null, {
|
|
97
|
+
default: s(() => [
|
|
98
|
+
t($(M))
|
|
99
|
+
]),
|
|
100
|
+
_: 1
|
|
101
|
+
})
|
|
102
|
+
]))
|
|
103
|
+
]);
|
|
104
|
+
};
|
|
105
|
+
}
|
|
106
|
+
}, L = /* @__PURE__ */ w(Q, [["__scopeId", "data-v-a887436b"]]), Y = { class: "image-box" }, Z = {
|
|
107
|
+
__name: "cImageBox",
|
|
108
|
+
props: {
|
|
109
|
+
images: {
|
|
110
|
+
type: Array,
|
|
111
|
+
default: () => []
|
|
112
|
+
},
|
|
113
|
+
typeList: {
|
|
114
|
+
type: Array,
|
|
115
|
+
default: () => [0, 1, 2, 3]
|
|
116
|
+
}
|
|
117
|
+
},
|
|
118
|
+
setup(e) {
|
|
119
|
+
return (i, l) => {
|
|
120
|
+
const d = o("el-col"), c = o("el-row"), u = o("el-empty");
|
|
121
|
+
return n(), m("div", Y, [
|
|
122
|
+
e.images.length ? (n(), k(c, {
|
|
123
|
+
key: 0,
|
|
124
|
+
gutter: 10,
|
|
125
|
+
class: "content"
|
|
126
|
+
}, {
|
|
127
|
+
default: s(() => [
|
|
128
|
+
t(d, {
|
|
129
|
+
span: 16,
|
|
130
|
+
class: "left"
|
|
131
|
+
}, {
|
|
132
|
+
default: s(() => [
|
|
133
|
+
t(L, {
|
|
134
|
+
"img-list": e.images,
|
|
135
|
+
"cur-image-index": 0,
|
|
136
|
+
show: e.typeList.includes(0)
|
|
137
|
+
}, null, 8, ["img-list", "show"])
|
|
138
|
+
]),
|
|
139
|
+
_: 1
|
|
140
|
+
}),
|
|
141
|
+
t(d, {
|
|
142
|
+
span: 8,
|
|
143
|
+
class: "right"
|
|
144
|
+
}, {
|
|
145
|
+
default: s(() => [
|
|
146
|
+
t(L, {
|
|
147
|
+
"img-list": e.images,
|
|
148
|
+
"cur-image-index": 1,
|
|
149
|
+
show: e.typeList.includes(1),
|
|
150
|
+
class: "item"
|
|
151
|
+
}, null, 8, ["img-list", "show"]),
|
|
152
|
+
t(L, {
|
|
153
|
+
"img-list": e.images,
|
|
154
|
+
"cur-image-index": 2,
|
|
155
|
+
show: e.typeList.includes(2),
|
|
156
|
+
class: "item"
|
|
157
|
+
}, null, 8, ["img-list", "show"]),
|
|
158
|
+
t(L, {
|
|
159
|
+
"img-list": e.images,
|
|
160
|
+
"cur-image-index": 3,
|
|
161
|
+
show: e.typeList.includes(3),
|
|
162
|
+
class: "item"
|
|
163
|
+
}, null, 8, ["img-list", "show"])
|
|
164
|
+
]),
|
|
165
|
+
_: 1
|
|
166
|
+
})
|
|
167
|
+
]),
|
|
168
|
+
_: 1
|
|
169
|
+
})) : (n(), k(u, { key: 1 }, {
|
|
170
|
+
description: s(() => l[0] || (l[0] = [
|
|
171
|
+
a("div", null, "点击列表图片查看", -1)
|
|
172
|
+
])),
|
|
173
|
+
_: 1
|
|
174
|
+
}))
|
|
175
|
+
]);
|
|
176
|
+
};
|
|
177
|
+
}
|
|
178
|
+
}, F = /* @__PURE__ */ w(Z, [["__scopeId", "data-v-56596cda"]]), ee = { class: "thumbnail-container" }, te = { class: "thumbnails-wrapper" }, le = ["onClick"], se = ["src", "alt"], ne = { class: "thumbnail-title" }, ae = { class: "image-container" }, N = 240, oe = {
|
|
179
|
+
__name: "cImage",
|
|
180
|
+
props: {
|
|
181
|
+
imageList: {
|
|
182
|
+
type: Array,
|
|
183
|
+
default: () => []
|
|
184
|
+
}
|
|
185
|
+
},
|
|
186
|
+
setup(e) {
|
|
187
|
+
const i = e, l = v([0, 1, 2, 3]), d = v([]), c = v(-1), u = {
|
|
188
|
+
0: "融合智能识别",
|
|
189
|
+
1: "声迅智能识别",
|
|
190
|
+
2: "海康智能识别",
|
|
191
|
+
3: "讯飞智能识别"
|
|
192
|
+
}, g = v(null), h = (R) => {
|
|
193
|
+
c.value = R;
|
|
194
|
+
const { items: _ } = i.imageList[R];
|
|
195
|
+
d.value = _.map((p) => ({
|
|
196
|
+
...p,
|
|
197
|
+
name: u[p.type]
|
|
198
|
+
}));
|
|
199
|
+
};
|
|
200
|
+
let f = 0, r = 0;
|
|
201
|
+
const x = () => {
|
|
202
|
+
r !== i.imageList.length && (r++, f -= N, g.value.style.transform = `translateX(${f}px)`);
|
|
203
|
+
}, A = () => {
|
|
204
|
+
r !== 0 && (r--, f += N, g.value.style.transform = `translateX(${f}px)`);
|
|
205
|
+
};
|
|
206
|
+
return (R, _) => {
|
|
207
|
+
const p = o("el-checkbox"), j = o("el-checkbox-group"), P = o("el-form-item"), E = o("el-form"), z = o("el-button");
|
|
208
|
+
return n(), m(B, null, [
|
|
209
|
+
t(E, { ref: "form" }, {
|
|
210
|
+
default: s(() => [
|
|
211
|
+
t(P, { label: "智能结果展示" }, {
|
|
212
|
+
default: s(() => [
|
|
213
|
+
t(j, {
|
|
214
|
+
modelValue: l.value,
|
|
215
|
+
"onUpdate:modelValue": _[0] || (_[0] = (b) => l.value = b),
|
|
216
|
+
min: 1
|
|
217
|
+
}, {
|
|
218
|
+
default: s(() => [
|
|
219
|
+
t(p, { label: 0 }, {
|
|
220
|
+
default: s(() => _[1] || (_[1] = [
|
|
221
|
+
y("融合智能识别")
|
|
222
|
+
])),
|
|
223
|
+
_: 1,
|
|
224
|
+
__: [1]
|
|
225
|
+
}),
|
|
226
|
+
t(p, { label: 1 }, {
|
|
227
|
+
default: s(() => _[2] || (_[2] = [
|
|
228
|
+
y("声迅智能识别")
|
|
229
|
+
])),
|
|
230
|
+
_: 1,
|
|
231
|
+
__: [2]
|
|
232
|
+
}),
|
|
233
|
+
t(p, { label: 2 }, {
|
|
234
|
+
default: s(() => _[3] || (_[3] = [
|
|
235
|
+
y("海康智能识别")
|
|
236
|
+
])),
|
|
237
|
+
_: 1,
|
|
238
|
+
__: [3]
|
|
239
|
+
}),
|
|
240
|
+
t(p, { label: 3 }, {
|
|
241
|
+
default: s(() => _[4] || (_[4] = [
|
|
242
|
+
y("讯飞智能识别")
|
|
243
|
+
])),
|
|
244
|
+
_: 1,
|
|
245
|
+
__: [4]
|
|
246
|
+
})
|
|
247
|
+
]),
|
|
248
|
+
_: 1
|
|
249
|
+
}, 8, ["modelValue"])
|
|
250
|
+
]),
|
|
251
|
+
_: 1
|
|
252
|
+
})
|
|
253
|
+
]),
|
|
254
|
+
_: 1
|
|
255
|
+
}, 512),
|
|
256
|
+
a("div", ee, [
|
|
257
|
+
t(z, {
|
|
258
|
+
class: "arrow-button",
|
|
259
|
+
icon: $(q),
|
|
260
|
+
circle: "",
|
|
261
|
+
onClick: x
|
|
262
|
+
}, null, 8, ["icon"]),
|
|
263
|
+
a("div", te, [
|
|
264
|
+
a("div", {
|
|
265
|
+
ref_key: "thumbNavRef",
|
|
266
|
+
ref: g,
|
|
267
|
+
class: "thumbnail-nav"
|
|
268
|
+
}, [
|
|
269
|
+
(n(!0), m(B, null, V(e.imageList, (b, I) => (n(), m("div", {
|
|
270
|
+
key: I,
|
|
271
|
+
class: T(["thumbnail", { active: c.value === I }]),
|
|
272
|
+
onClick: (ge) => h(I)
|
|
273
|
+
}, [
|
|
274
|
+
a("img", {
|
|
275
|
+
src: b.items[0].url,
|
|
276
|
+
alt: `缩略图 ${I + 1}`,
|
|
277
|
+
style: { "object-fit": "contain" }
|
|
278
|
+
}, null, 8, se),
|
|
279
|
+
a("span", ne, C(u[b.items[0].type]), 1)
|
|
280
|
+
], 10, le))), 128))
|
|
281
|
+
], 512)
|
|
282
|
+
]),
|
|
283
|
+
t(z, {
|
|
284
|
+
class: "arrow-button",
|
|
285
|
+
icon: $(O),
|
|
286
|
+
circle: "",
|
|
287
|
+
onClick: A
|
|
288
|
+
}, null, 8, ["icon"])
|
|
289
|
+
]),
|
|
290
|
+
a("div", ae, [
|
|
291
|
+
t(F, {
|
|
292
|
+
images: d.value,
|
|
293
|
+
"type-list": l.value
|
|
294
|
+
}, null, 8, ["images", "type-list"])
|
|
295
|
+
])
|
|
296
|
+
], 64);
|
|
297
|
+
};
|
|
298
|
+
}
|
|
299
|
+
}, ie = /* @__PURE__ */ w(oe, [["__scopeId", "data-v-9ccb063a"]]), ce = { class: "info" }, re = { class: "info" }, me = {
|
|
300
|
+
__name: "cImageList",
|
|
301
|
+
props: {
|
|
302
|
+
imageList: {
|
|
303
|
+
type: Array,
|
|
304
|
+
default: () => []
|
|
305
|
+
},
|
|
306
|
+
width: {
|
|
307
|
+
type: String,
|
|
308
|
+
default: "800px"
|
|
309
|
+
},
|
|
310
|
+
countPerRow: {
|
|
311
|
+
type: Number,
|
|
312
|
+
default: 5
|
|
313
|
+
}
|
|
314
|
+
},
|
|
315
|
+
emits: ["downFile", "showDetail"],
|
|
316
|
+
setup(e, { emit: i }) {
|
|
317
|
+
const l = i, d = (u) => {
|
|
318
|
+
l("downFile", u);
|
|
319
|
+
}, c = (u) => {
|
|
320
|
+
l("showDetail", u);
|
|
321
|
+
};
|
|
322
|
+
return (u, g) => {
|
|
323
|
+
const h = o("el-image"), f = o("el-button");
|
|
324
|
+
return n(!0), m(B, null, V(e.imageList, (r, x) => (n(), m("div", {
|
|
325
|
+
key: x,
|
|
326
|
+
class: "img-item",
|
|
327
|
+
style: D({ width: 100 / e.countPerRow + "%" })
|
|
328
|
+
}, [
|
|
329
|
+
t(h, {
|
|
330
|
+
src: r.srcList[0],
|
|
331
|
+
style: { height: "300px", width: "240px" },
|
|
332
|
+
"zoom-rate": 1.2,
|
|
333
|
+
"max-scale": 7,
|
|
334
|
+
"min-scale": 0.2,
|
|
335
|
+
"show-progress": "",
|
|
336
|
+
"initial-index": x,
|
|
337
|
+
fit: "contain",
|
|
338
|
+
onClick: (A) => c(r)
|
|
339
|
+
}, null, 8, ["src", "initial-index", "onClick"]),
|
|
340
|
+
a("span", ce, C(r.time), 1),
|
|
341
|
+
a("span", re, C(r.name), 1),
|
|
342
|
+
t(f, {
|
|
343
|
+
type: "primary",
|
|
344
|
+
size: "small",
|
|
345
|
+
onClick: (A) => d(r)
|
|
346
|
+
}, {
|
|
347
|
+
default: s(() => g[0] || (g[0] = [
|
|
348
|
+
y("下载")
|
|
349
|
+
])),
|
|
350
|
+
_: 2,
|
|
351
|
+
__: [0]
|
|
352
|
+
}, 1032, ["onClick"])
|
|
353
|
+
], 4))), 128);
|
|
354
|
+
};
|
|
355
|
+
}
|
|
356
|
+
}, ue = /* @__PURE__ */ w(me, [["__scopeId", "data-v-c9a26924"]]), _e = {
|
|
357
|
+
__name: "cImageScroll",
|
|
358
|
+
props: {
|
|
359
|
+
imageList: {
|
|
360
|
+
type: Array,
|
|
361
|
+
default: () => []
|
|
362
|
+
},
|
|
363
|
+
scrollBg: {
|
|
364
|
+
type: String,
|
|
365
|
+
default: "#ffffff"
|
|
366
|
+
}
|
|
367
|
+
},
|
|
368
|
+
setup(e, { expose: i }) {
|
|
369
|
+
const l = v(null);
|
|
370
|
+
return i({ setActive: (c) => {
|
|
371
|
+
l.value.setActiveItem(c);
|
|
372
|
+
} }), (c, u) => {
|
|
373
|
+
const g = o("CImageBox"), h = o("el-carousel-item"), f = o("el-carousel");
|
|
374
|
+
return n(), m("div", {
|
|
375
|
+
class: "c-image-scroll",
|
|
376
|
+
style: D({ background: e.scrollBg })
|
|
377
|
+
}, [
|
|
378
|
+
t(f, {
|
|
379
|
+
ref_key: "carouselRef",
|
|
380
|
+
ref: l,
|
|
381
|
+
arrow: "always",
|
|
382
|
+
trigger: "click",
|
|
383
|
+
autoplay: !1,
|
|
384
|
+
height: "100%",
|
|
385
|
+
style: { height: "100%" }
|
|
386
|
+
}, {
|
|
387
|
+
default: s(() => [
|
|
388
|
+
(n(!0), m(B, null, V(e.imageList, (r) => (n(), k(h, { key: r }, {
|
|
389
|
+
default: s(() => [
|
|
390
|
+
t(g, {
|
|
391
|
+
images: r.items
|
|
392
|
+
}, null, 8, ["images"])
|
|
393
|
+
]),
|
|
394
|
+
_: 2
|
|
395
|
+
}, 1024))), 128))
|
|
396
|
+
]),
|
|
397
|
+
_: 1
|
|
398
|
+
}, 512)
|
|
399
|
+
], 4);
|
|
400
|
+
};
|
|
401
|
+
}
|
|
402
|
+
}, de = /* @__PURE__ */ w(_e, [["__scopeId", "data-v-7f12f7d7"]]), pe = {
|
|
403
|
+
install(e) {
|
|
404
|
+
e.component("CImage", ie).component("CImageBox", F).component("CImageList", ue).component("CImageScroll", de);
|
|
405
|
+
}
|
|
406
|
+
};
|
|
407
|
+
export {
|
|
408
|
+
pe as default
|
|
409
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(function(e,_){typeof exports=="object"&&typeof module<"u"?module.exports=_(require("vue")):typeof define=="function"&&define.amd?define(["vue"],_):(e=typeof globalThis<"u"?globalThis:e||self,e.MyVueLibrary=_(e.Vue))})(this,function(e){"use strict";/*! Element Plus Icons Vue v2.3.2 */var _=e.defineComponent({name:"ArrowLeft",__name:"arrow-left",setup(t){return(n,o)=>(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},[e.createElementVNode("path",{fill:"currentColor",d:"M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.59 30.59 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.59 30.59 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0"})]))}}),u=_,b=e.defineComponent({name:"ArrowRight",__name:"arrow-right",setup(t){return(n,o)=>(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},[e.createElementVNode("path",{fill:"currentColor",d:"M340.864 149.312a30.59 30.59 0 0 0 0 42.752L652.736 512 340.864 831.872a30.59 30.59 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"})]))}}),L=b,I=e.defineComponent({name:"Picture",__name:"picture",setup(t){return(n,o)=>(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},[e.createElementVNode("path",{fill:"currentColor",d:"M160 160v704h704V160zm-32-64h768a32 32 0 0 1 32 32v768a32 32 0 0 1-32 32H128a32 32 0 0 1-32-32V128a32 32 0 0 1 32-32"}),e.createElementVNode("path",{fill:"currentColor",d:"M384 288q64 0 64 64t-64 64-64-64 64-64M185.408 876.992l-50.816-38.912L350.72 556.032a96 96 0 0 1 134.592-17.856l1.856 1.472 122.88 99.136a32 32 0 0 0 44.992-4.864l216-269.888 49.92 39.936-215.808 269.824-.256.32a96 96 0 0 1-135.04 14.464l-122.88-99.072-.64-.512a32 32 0 0 0-44.8 5.952z"})]))}}),C=I;const p=(t,n)=>{const o=t.__vccOpts||t;for(const[r,l]of n)o[r]=l;return o},E={class:"wrap"},$={class:"name"},S={class:"flex justify-center items-center h-full"},A={key:1,class:"flex justify-center items-center h-full"},g=p({__name:"cImageItem",props:{curImageIndex:{type:Number,default:0},fit:{type:String,default:"contain"},imgList:{type:Array,default:()=>[]},show:{type:Boolean,default:!0}},setup(t){const n={0:"融合智能识别",1:"声迅智能识别",2:"海康智能识别",3:"讯飞智能识别"};return(o,r)=>{const l=e.resolveComponent("el-icon"),c=e.resolveComponent("el-image");return e.openBlock(),e.createElementBlock("div",E,[e.createElementVNode("div",$,e.toDisplayString(n[t.curImageIndex]),1),t.show?(e.openBlock(),e.createBlock(c,{key:0,class:"image-item",src:t.imgList[t.curImageIndex].url,fit:t.fit,"preview-src-list":t.imgList.map(i=>i.url)},{error:e.withCtx(()=>[e.createElementVNode("div",S,[e.createVNode(l,null,{default:e.withCtx(()=>[e.createVNode(e.unref(C))]),_:1})])]),_:1},8,["src","fit","preview-src-list"])):(e.openBlock(),e.createElementBlock("div",A,[e.createVNode(l,null,{default:e.withCtx(()=>[e.createVNode(e.unref(C))]),_:1})]))])}}},[["__scopeId","data-v-a887436b"]]),z={class:"image-box"},V=p({__name:"cImageBox",props:{images:{type:Array,default:()=>[]},typeList:{type:Array,default:()=>[0,1,2,3]}},setup(t){return(n,o)=>{const r=e.resolveComponent("el-col"),l=e.resolveComponent("el-row"),c=e.resolveComponent("el-empty");return e.openBlock(),e.createElementBlock("div",z,[t.images.length?(e.openBlock(),e.createBlock(l,{key:0,gutter:10,class:"content"},{default:e.withCtx(()=>[e.createVNode(r,{span:16,class:"left"},{default:e.withCtx(()=>[e.createVNode(g,{"img-list":t.images,"cur-image-index":0,show:t.typeList.includes(0)},null,8,["img-list","show"])]),_:1}),e.createVNode(r,{span:8,class:"right"},{default:e.withCtx(()=>[e.createVNode(g,{"img-list":t.images,"cur-image-index":1,show:t.typeList.includes(1),class:"item"},null,8,["img-list","show"]),e.createVNode(g,{"img-list":t.images,"cur-image-index":2,show:t.typeList.includes(2),class:"item"},null,8,["img-list","show"]),e.createVNode(g,{"img-list":t.images,"cur-image-index":3,show:t.typeList.includes(3),class:"item"},null,8,["img-list","show"])]),_:1})]),_:1})):(e.openBlock(),e.createBlock(c,{key:1},{description:e.withCtx(()=>o[0]||(o[0]=[e.createElementVNode("div",null,"点击列表图片查看",-1)])),_:1}))])}}},[["__scopeId","data-v-56596cda"]]),M={class:"thumbnail-container"},R={class:"thumbnails-wrapper"},T=["onClick"],D=["src","alt"],F={class:"thumbnail-title"},j={class:"image-container"},N=240,P=p({__name:"cImage",props:{imageList:{type:Array,default:()=>[]}},setup(t){const n=t,o=e.ref([0,1,2,3]),r=e.ref([]),l=e.ref(-1),c={0:"融合智能识别",1:"声迅智能识别",2:"海康智能识别",3:"讯飞智能识别"},i=e.ref(null),f=k=>{l.value=k;const{items:s}=n.imageList[k];r.value=s.map(d=>({...d,name:c[d.type]}))};let m=0,a=0;const h=()=>{a!==n.imageList.length&&(a++,m-=N,i.value.style.transform=`translateX(${m}px)`)},y=()=>{a!==0&&(a--,m+=N,i.value.style.transform=`translateX(${m}px)`)};return(k,s)=>{const d=e.resolveComponent("el-checkbox"),U=e.resolveComponent("el-checkbox-group"),W=e.resolveComponent("el-form-item"),G=e.resolveComponent("el-form"),B=e.resolveComponent("el-button");return e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(G,{ref:"form"},{default:e.withCtx(()=>[e.createVNode(W,{label:"智能结果展示"},{default:e.withCtx(()=>[e.createVNode(U,{modelValue:o.value,"onUpdate:modelValue":s[0]||(s[0]=w=>o.value=w),min:1},{default:e.withCtx(()=>[e.createVNode(d,{label:0},{default:e.withCtx(()=>s[1]||(s[1]=[e.createTextVNode("融合智能识别")])),_:1,__:[1]}),e.createVNode(d,{label:1},{default:e.withCtx(()=>s[2]||(s[2]=[e.createTextVNode("声迅智能识别")])),_:1,__:[2]}),e.createVNode(d,{label:2},{default:e.withCtx(()=>s[3]||(s[3]=[e.createTextVNode("海康智能识别")])),_:1,__:[3]}),e.createVNode(d,{label:3},{default:e.withCtx(()=>s[4]||(s[4]=[e.createTextVNode("讯飞智能识别")])),_:1,__:[4]})]),_:1},8,["modelValue"])]),_:1})]),_:1},512),e.createElementVNode("div",M,[e.createVNode(B,{class:"arrow-button",icon:e.unref(u),circle:"",onClick:h},null,8,["icon"]),e.createElementVNode("div",R,[e.createElementVNode("div",{ref_key:"thumbNavRef",ref:i,class:"thumbnail-nav"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.imageList,(w,x)=>(e.openBlock(),e.createElementBlock("div",{key:x,class:e.normalizeClass(["thumbnail",{active:l.value===x}]),onClick:ee=>f(x)},[e.createElementVNode("img",{src:w.items[0].url,alt:`缩略图 ${x+1}`,style:{"object-fit":"contain"}},null,8,D),e.createElementVNode("span",F,e.toDisplayString(c[w.items[0].type]),1)],10,T))),128))],512)]),e.createVNode(B,{class:"arrow-button",icon:e.unref(L),circle:"",onClick:y},null,8,["icon"])]),e.createElementVNode("div",j,[e.createVNode(V,{images:r.value,"type-list":o.value},null,8,["images","type-list"])])],64)}}},[["__scopeId","data-v-9ccb063a"]]),q={class:"info"},X={class:"info"},H=p({__name:"cImageList",props:{imageList:{type:Array,default:()=>[]},width:{type:String,default:"800px"},countPerRow:{type:Number,default:5}},emits:["downFile","showDetail"],setup(t,{emit:n}){const o=n,r=c=>{o("downFile",c)},l=c=>{o("showDetail",c)};return(c,i)=>{const f=e.resolveComponent("el-image"),m=e.resolveComponent("el-button");return e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.imageList,(a,h)=>(e.openBlock(),e.createElementBlock("div",{key:h,class:"img-item",style:e.normalizeStyle({width:100/t.countPerRow+"%"})},[e.createVNode(f,{src:a.srcList[0],style:{height:"300px",width:"240px"},"zoom-rate":1.2,"max-scale":7,"min-scale":.2,"show-progress":"","initial-index":h,fit:"contain",onClick:y=>l(a)},null,8,["src","initial-index","onClick"]),e.createElementVNode("span",q,e.toDisplayString(a.time),1),e.createElementVNode("span",X,e.toDisplayString(a.name),1),e.createVNode(m,{type:"primary",size:"small",onClick:y=>r(a)},{default:e.withCtx(()=>i[0]||(i[0]=[e.createTextVNode("下载")])),_:2,__:[0]},1032,["onClick"])],4))),128)}}},[["__scopeId","data-v-c9a26924"]]),O=p({__name:"cImageScroll",props:{imageList:{type:Array,default:()=>[]},scrollBg:{type:String,default:"#ffffff"}},setup(t,{expose:n}){const o=e.ref(null);return n({setActive:l=>{o.value.setActiveItem(l)}}),(l,c)=>{const i=e.resolveComponent("CImageBox"),f=e.resolveComponent("el-carousel-item"),m=e.resolveComponent("el-carousel");return e.openBlock(),e.createElementBlock("div",{class:"c-image-scroll",style:e.normalizeStyle({background:t.scrollBg})},[e.createVNode(m,{ref_key:"carouselRef",ref:o,arrow:"always",trigger:"click",autoplay:!1,height:"100%",style:{height:"100%"}},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.imageList,a=>(e.openBlock(),e.createBlock(f,{key:a},{default:e.withCtx(()=>[e.createVNode(i,{images:a.items},null,8,["images"])]),_:2},1024))),128))]),_:1},512)],4)}}},[["__scopeId","data-v-7f12f7d7"]]);return{install(t){t.component("CImage",P).component("CImageBox",V).component("CImageList",H).component("CImageScroll",O)}}});
|
package/lib/style.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@charset "UTF-8";.wrap[data-v-a887436b]{width:100%;height:100%;position:relative;border:1px solid #eee}.wrap .name[data-v-a887436b]{position:absolute;top:20px;left:20px;z-index:1;padding:5px;font-size:16px}.wrap .image-item[data-v-a887436b]{width:100%;height:100%}.image-box[data-v-56596cda]{width:100%;height:100%;position:relative;overflow-y:auto}.image-box .content[data-v-56596cda]{width:100%;height:100%}.image-box .content .left[data-v-56596cda],.image-box .content .right[data-v-56596cda]{height:100%;display:flex;flex-direction:column}.image-box .content .left .item[data-v-56596cda],.image-box .content .right .item[data-v-56596cda]{flex:1;overflow:hidden}.empty-state[data-v-56596cda]{padding:40px 0;text-align:center;color:#999;border:1px dashed #ddd;border-radius:8px;margin-top:15px}.image-container[data-v-9ccb063a]{height:100%;position:relative;overflow-y:auto}.thumbnail-container[data-v-9ccb063a]{width:100%;margin-top:10px;padding:5px 0;display:flex;align-items:center;gap:8px}.thumbnail-container .thumbnails-wrapper[data-v-9ccb063a]{flex:1;display:flex;overflow-x:auto}.thumbnail-container .thumbnails-wrapper .thumbnail-nav[data-v-9ccb063a]{display:flex;gap:10px}.thumbnail[data-v-9ccb063a]{position:relative;width:240px;height:160px;flex-shrink:0;border-radius:8px;overflow:hidden;cursor:pointer;opacity:.7;transition:all .3s;box-sizing:border-box;border:2px solid #e0e0e0}.thumbnail.active[data-v-9ccb063a]{opacity:1;border:2px solid #2196f3}.thumbnail .thumbnail-title[data-v-9ccb063a]{position:absolute;right:5px;top:5px;font-size:12px;color:#666}.thumbnail img[data-v-9ccb063a]{width:100%;height:100%;object-fit:cover;display:block;text-align:center;line-height:9}.thumbnail-nav[data-v-9ccb063a]::-webkit-scrollbar{display:none}.thumbnail-nav[data-v-9ccb063a]{-ms-overflow-style:none;scrollbar-width:none}.thumbnail-nav[data-v-9ccb063a]:before,.thumbnail-nav[data-v-9ccb063a]:after{content:"";position:absolute;top:0;bottom:0;width:30px;pointer-events:none;z-index:1}.thumbnail-nav[data-v-9ccb063a]:before{left:0;background:linear-gradient(to right,#fff,transparent)}.thumbnail-nav[data-v-9ccb063a]:after{right:0;background:linear-gradient(to left,#fff,transparent)}.info-meta p[data-v-9ccb063a]{margin-bottom:10px;color:#666;font-size:14px;display:flex}.info-meta span[data-v-9ccb063a]{width:80px;color:#999}@keyframes fadeInUp-9ccb063a{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.thumbnail-container[data-v-9ccb063a]{height:100px}}.icon-plus[data-v-9ccb063a]:before{content:"+";font-weight:700}.img-item[data-v-c9a26924]{position:relative;display:flex;flex-direction:column;align-items:center}.img-item[data-v-c9a26924] .el-image{cursor:pointer}.img-item .info[data-v-c9a26924]{line-height:25px;font-size:14px}.img-item .big-img-wrap[data-v-c9a26924]{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000080}.c-image-scroll[data-v-7f12f7d7]{width:100%;height:100%}
|
package/package.json
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "c-image",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"author": "",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"description": "封装vue3组件库",
|
|
8
|
+
"keywords": [
|
|
9
|
+
"vue3",
|
|
10
|
+
"封装组件库"
|
|
11
|
+
],
|
|
12
|
+
"main": "lib/my-vue-library.es.js",
|
|
13
|
+
"scripts": {
|
|
14
|
+
"dev": "vite",
|
|
15
|
+
"build": "vite build",
|
|
16
|
+
"preview": "vite preview",
|
|
17
|
+
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
|
|
18
|
+
"format": "prettier --write src/"
|
|
19
|
+
},
|
|
20
|
+
"dependencies": {
|
|
21
|
+
"@element-plus/icons-vue": "^2.3.2",
|
|
22
|
+
"element-plus": "^2.11.4",
|
|
23
|
+
"pinia": "^2.1.7",
|
|
24
|
+
"vue": "^3.4.29",
|
|
25
|
+
"vue-router": "^4.3.3"
|
|
26
|
+
},
|
|
27
|
+
"devDependencies": {
|
|
28
|
+
"@rushstack/eslint-patch": "^1.8.0",
|
|
29
|
+
"@vitejs/plugin-vue": "^5.0.5",
|
|
30
|
+
"@vitejs/plugin-vue-jsx": "^4.0.0",
|
|
31
|
+
"@vue/eslint-config-prettier": "^9.0.0",
|
|
32
|
+
"eslint": "^8.57.0",
|
|
33
|
+
"eslint-plugin-vue": "^9.23.0",
|
|
34
|
+
"prettier": "^3.2.5",
|
|
35
|
+
"sass-embedded": "^1.97.0",
|
|
36
|
+
"vite": "^5.3.1"
|
|
37
|
+
}
|
|
38
|
+
}
|
|
Binary file
|
package/vite.config.js
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { fileURLToPath, URL } from 'node:url'
|
|
2
|
+
|
|
3
|
+
import { defineConfig } from 'vite'
|
|
4
|
+
import vue from '@vitejs/plugin-vue'
|
|
5
|
+
import vueJsx from '@vitejs/plugin-vue-jsx'
|
|
6
|
+
import { resolve } from 'path'
|
|
7
|
+
|
|
8
|
+
// https://vitejs.dev/config/
|
|
9
|
+
export default defineConfig({
|
|
10
|
+
plugins: [vue(), vueJsx()],
|
|
11
|
+
resolve: {
|
|
12
|
+
alias: {
|
|
13
|
+
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
|
14
|
+
},
|
|
15
|
+
},
|
|
16
|
+
build: {
|
|
17
|
+
outDir: 'lib',
|
|
18
|
+
lib: {
|
|
19
|
+
entry: resolve(__dirname, './packages/index.js'), // 指定入口文件,通常是index.ts或index.js,用于导出所有组件
|
|
20
|
+
name: 'MyVueLibrary', // 库的名字,将会作为UMD模块的名字和包名的一部分
|
|
21
|
+
fileName: (format) => `my-vue-library.${format}.js`, // 指定输出文件的命名规则
|
|
22
|
+
},
|
|
23
|
+
rollupOptions: {
|
|
24
|
+
// 配置打包选项
|
|
25
|
+
// 确保外部化处理那些你不想打包进库的依赖
|
|
26
|
+
external: ['vue'],
|
|
27
|
+
output: {
|
|
28
|
+
// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
|
|
29
|
+
globals: {
|
|
30
|
+
vue: 'Vue',
|
|
31
|
+
},
|
|
32
|
+
},
|
|
33
|
+
},
|
|
34
|
+
},
|
|
35
|
+
})
|