vome-core 0.0.21 → 0.0.23
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/dist/admin/config/plugin-dev.js +1 -1
- package/dist/admin/crud/components/vm-file-preview.vue +1 -1
- package/dist/admin/crud/components/vm-preview-viewer.vue +234 -42
- package/dist/admin/crud/components/vm-upload-item.vue +1 -0
- package/dist/admin/crud/config.js +1 -1
- package/dist/admin/crud/confirm.js +1 -1
- package/dist/admin/crud/dict.js +1 -1
- package/dist/admin/crud/index.d.ts +1 -1
- package/dist/admin/crud/index.js +1 -1
- package/dist/admin/crud/key.js +1 -1
- package/dist/admin/crud/mitt.js +1 -1
- package/dist/admin/crud/plugins.js +1 -1
- package/dist/admin/crud/span.js +1 -1
- package/dist/admin/crud/style.js +1 -1
- package/dist/admin/crud/validate.js +1 -1
- package/dist/admin/directives/perm.js +1 -1
- package/dist/admin/hooks/useUpload.js +1 -1
- package/dist/admin/lib/browser.js +1 -1
- package/dist/admin/lib/cn.js +1 -1
- package/dist/admin/lib/dialog-float.js +1 -1
- package/dist/admin/lib/export-excel.js +1 -1
- package/dist/admin/lib/file-preview.js +1 -1
- package/dist/admin/lib/menu.js +1 -1
- package/dist/admin/lib/tree.js +1 -1
- package/dist/admin/lib/upload.js +1 -1
- package/dist/admin/lib/video-frame.js +1 -1
- package/dist/index.js +1 -1
- package/dist/server/index.js +1 -1
- package/dist/shared/excel.js +1 -1
- package/dist/shared/index.js +1 -1
- package/dist/shared/tree.js +1 -1
- package/package.json +1 -1
- package/dist/admin/crud/components/vm-image.vue +0 -413
package/dist/shared/excel.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(_0x118806,_0x10850d){const _0x4fa70e=_0x5dbe,_0x3cc5c2=_0x118806();while(!![]){try{const _0x26636f=parseInt(_0x4fa70e(0x1db))/0x1*(parseInt(_0x4fa70e(0x1e4))/0x2)+parseInt(_0x4fa70e(0x1da))/0x3*(-parseInt(_0x4fa70e(0x1e5))/0x4)+-parseInt(_0x4fa70e(0x1d7))/0x5*(-parseInt(_0x4fa70e(0x1dc))/0x6)+parseInt(_0x4fa70e(0x1de))/0x7+parseInt(_0x4fa70e(0x1dd))/0x8+-parseInt(_0x4fa70e(0x1e8))/0x9+parseInt(_0x4fa70e(0x1ea))/0xa*(parseInt(_0x4fa70e(0x1ec))/0xb);if(_0x26636f===_0x10850d)break;else _0x3cc5c2['push'](_0x3cc5c2['shift']());}catch(_0x5e97e0){_0x3cc5c2['push'](_0x3cc5c2['shift']());}}}(_0x2659,0x18a96));import*as _0x51edcb from'xlsx';export function buildExcelBuffer(_0x1840e4,_0x207d7b,_0x7f21b0){const _0x28642a=_0x5dbe,_0x135d57=_0x1840e4[_0x28642a(0x1e9)](_0x5d3a2e=>_0x5d3a2e[_0x28642a(0x1eb)]||_0x5d3a2e[_0x28642a(0x1e7)]),_0xa366d1=_0x207d7b['map'](_0x12cd1f=>_0x1840e4[_0x28642a(0x1e9)](_0x27b1f3=>{const _0xb2aaba=_0x28642a;if(_0x7f21b0)return _0x7f21b0(_0x27b1f3[_0xb2aaba(0x1e7)],_0x12cd1f);const _0x3e088c=_0x12cd1f[_0x27b1f3[_0xb2aaba(0x1e7)]];if(_0x3e088c==null)return'';return String(_0x3e088c);})),_0x473470=_0x51edcb[_0x28642a(0x1e6)]['aoa_to_sheet']([_0x135d57,..._0xa366d1]),_0x467253=_0x51edcb[_0x28642a(0x1e6)][_0x28642a(0x1e1)]();return _0x51edcb[_0x28642a(0x1e6)][_0x28642a(0x1d8)](_0x467253,_0x473470,_0x28642a(0x1e2)),_0x51edcb['write'](_0x467253,{'bookType':'xlsx','type':_0x28642a(0x1df)});}function _0x5dbe(_0x1f1328,_0x3c1aa8){_0x1f1328=_0x1f1328-0x1d7;const _0x2659ee=_0x2659();let _0x5dbe0b=_0x2659ee[_0x1f1328];if(_0x5dbe['jPKxQp']===undefined){var _0x2caec2=function(_0x2f71ba){const _0x9a333='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';let _0x51edcb='',_0x1840e4='';for(let _0x207d7b=0x0,_0x7f21b0,_0x135d57,_0xa366d1=0x0;_0x135d57=_0x2f71ba['charAt'](_0xa366d1++);~_0x135d57&&(_0x7f21b0=_0x207d7b%0x4?_0x7f21b0*0x40+_0x135d57:_0x135d57,_0x207d7b++%0x4)?_0x51edcb+=String['fromCharCode'](0xff&_0x7f21b0>>(-0x2*_0x207d7b&0x6)):0x0){_0x135d57=_0x9a333['indexOf'](_0x135d57);}for(let _0x473470=0x0,_0x467253=_0x51edcb['length'];_0x473470<_0x467253;_0x473470++){_0x1840e4+='%'+('00'+_0x51edcb['charCodeAt'](_0x473470)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0x1840e4);};_0x5dbe['KELTAa']=_0x2caec2,_0x5dbe['kZpFHz']={},_0x5dbe['jPKxQp']=!![];}const _0x3bdad3=_0x2659ee[0x0],_0x1ab41e=_0x1f1328+_0x3bdad3,_0x4e2ebf=_0x5dbe['kZpFHz'][_0x1ab41e];return!_0x4e2ebf?(_0x5dbe0b=_0x5dbe['KELTAa'](_0x5dbe0b),_0x5dbe['kZpFHz'][_0x1ab41e]=_0x5dbe0b):_0x5dbe0b=_0x4e2ebf,_0x5dbe0b;}export function excelFilename(_0x81eea2){const _0x4a5d35=_0x5dbe;return _0x81eea2[_0x4a5d35(0x1e3)]('.xlsx')?_0x81eea2:_0x81eea2+_0x4a5d35(0x1d9);}function _0x2659(){const _0x36adde=['zw5KC1DPDgG','mJG1mML3rKfQza','mZm5nLvcqNLAzG','DxrPBhm','ChjVCa','mtC2mJe2nhjRuKnqCq','BwfW','ntCWANLkBwXV','BgfIzwW','ntG4odnUDuTHzgu','mtiYnwHmuNbkuW','yM9VA19HChbLBMrFC2HLzxq','lNHSC3G','nJC4vNjTzevN','muf6wKnVwG','mZa2zK5nAuXm','mtmZntq4meLcDKL1AW','mtG5ndLwsLrbvwm','yxjYyxK','yxr0ywnOBwvUDdSGzMLSzw5HBwuQpvvurI04jYC','yM9VA19UzxC','u2HLzxqX'];_0x2659=function(){return _0x36adde;};return _0x2659();}export function excelResponseHeaders(_0x3fc48c){const _0x1e212e=_0x5dbe,_0x64593d=excelFilename(_0x3fc48c);return{'Content-Type':'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet','Content-Disposition':_0x1e212e(0x1e0)+encodeURIComponent(_0x64593d)};}
|
package/dist/shared/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(_0x133d5c,_0x37ad88){var _0x102eda=_0x1578,_0x39e8ce=_0x133d5c();while(!![]){try{var _0x868849=parseInt(_0x102eda(0xc5))/0x1*(-parseInt(_0x102eda(0xc1))/0x2)+-parseInt(_0x102eda(0xbe))/0x3*(-parseInt(_0x102eda(0xc6))/0x4)+parseInt(_0x102eda(0xc7))/0x5+-parseInt(_0x102eda(0xc0))/0x6*(parseInt(_0x102eda(0xc2))/0x7)+parseInt(_0x102eda(0xc9))/0x8+parseInt(_0x102eda(0xbf))/0x9*(-parseInt(_0x102eda(0xc4))/0xa)+parseInt(_0x102eda(0xc8))/0xb*(parseInt(_0x102eda(0xc3))/0xc);if(_0x868849===_0x37ad88)break;else _0x39e8ce['push'](_0x39e8ce['shift']());}catch(_0x7d45c){_0x39e8ce['push'](_0x39e8ce['shift']());}}}(_0x1ec9,0xa4a5c));function _0x1578(_0x28b5da,_0x183eea){_0x28b5da=_0x28b5da-0xbe;var _0x1ec938=_0x1ec9();var _0x157871=_0x1ec938[_0x28b5da];if(_0x1578['jnBTJZ']===undefined){var _0x2ed96e=function(_0x289ee1){var _0x5538cc='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';var _0x3cde5d='',_0x1f85a1='';for(var _0x31522e=0x0,_0x404b56,_0x18fd9b,_0x5e33ab=0x0;_0x18fd9b=_0x289ee1['charAt'](_0x5e33ab++);~_0x18fd9b&&(_0x404b56=_0x31522e%0x4?_0x404b56*0x40+_0x18fd9b:_0x18fd9b,_0x31522e++%0x4)?_0x3cde5d+=String['fromCharCode'](0xff&_0x404b56>>(-0x2*_0x31522e&0x6)):0x0){_0x18fd9b=_0x5538cc['indexOf'](_0x18fd9b);}for(var _0x1d47e6=0x0,_0x3dc132=_0x3cde5d['length'];_0x1d47e6<_0x3dc132;_0x1d47e6++){_0x1f85a1+='%'+('00'+_0x3cde5d['charCodeAt'](_0x1d47e6)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0x1f85a1);};_0x1578['edTZGg']=_0x2ed96e,_0x1578['YYJysa']={},_0x1578['jnBTJZ']=!![];}var _0x19a090=_0x1ec938[0x0],_0x16a863=_0x28b5da+_0x19a090,_0x2f5593=_0x1578['YYJysa'][_0x16a863];return!_0x2f5593?(_0x157871=_0x1578['edTZGg'](_0x157871),_0x1578['YYJysa'][_0x16a863]=_0x157871):_0x157871=_0x2f5593,_0x157871;}export{merge}from'../comm/merge';export{deepTree,flattenTree}from'./tree';function _0x1ec9(){var _0xc3208f=['mtqWuMrZAwHx','nJi0mdbWq3rIEuq','mZbRt0zcExy','mtuYndq1ChD6ALDx','ne5hAgP0qW','mJm0odGXnuPyDeXxyq','otC5yLrZwKzA','mta1mJy1ntjqvuLKqwG','mtm4ntq5zxfcA29t','mtu2mJiWmK5ms3bWuW','mtKYnJmWu2r4vg1L','nKfKs093sa'];_0x1ec9=function(){return _0xc3208f;};return _0x1ec9();}export{RES_CODE}from'../routing/base';export{buildExcelBuffer,excelFilename,excelResponseHeaders}from'./excel';
|
package/dist/shared/tree.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const
|
|
1
|
+
function _0x5e13(){const _0x1966d4=['y2HPBgrYzw4','mta2mZe4oe1czNDhuW','ngrszhv0Ca','C29YDa','DMfSDwvZ','nuXJu1v3ta','mJiXndqXngTTEhnQAq','B3jKzxjoDw0','nJbhAer1zfa','CgfYzw50swq','mJu3nJK5mNrAAefusW','nZm5mdy1EufhDMrm','AgfZ','BgvUz3rO','C2v0','ogn5vuDdyG','yxnJ','z2v0','nti3mZiXn3Hpuwfbta','odG0nJG1AMLTBgzJ','mZi1ota0nNzxwxzPzq','ChvZAa'];_0x5e13=function(){return _0x1966d4;};return _0x5e13();}const _0x2b80c2=_0xbad0;(function(_0x2c7a7c,_0x4dafde){const _0x4db102=_0xbad0,_0x25b43c=_0x2c7a7c();while(!![]){try{const _0x40ee6e=-parseInt(_0x4db102(0x73))/0x1+-parseInt(_0x4db102(0x78))/0x2*(parseInt(_0x4db102(0x6b))/0x3)+parseInt(_0x4db102(0x77))/0x4*(-parseInt(_0x4db102(0x65))/0x5)+-parseInt(_0x4db102(0x66))/0x6+parseInt(_0x4db102(0x74))/0x7+parseInt(_0x4db102(0x6f))/0x8*(parseInt(_0x4db102(0x72))/0x9)+-parseInt(_0x4db102(0x68))/0xa*(-parseInt(_0x4db102(0x6a))/0xb);if(_0x40ee6e===_0x4dafde)break;else _0x25b43c['push'](_0x25b43c['shift']());}catch(_0x22d464){_0x25b43c['push'](_0x25b43c['shift']());}}}(_0x5e13,0x6c9be));function _0xbad0(_0x56f59f,_0x19bda5){_0x56f59f=_0x56f59f-0x65;const _0x5e13b8=_0x5e13();let _0xbad07a=_0x5e13b8[_0x56f59f];if(_0xbad0['JWlFNg']===undefined){var _0x3d7d54=function(_0x4f5482){const _0x16aca3='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';let _0xe3bb4e='',_0x4da6ab='';for(let _0x24d288=0x0,_0x10747b,_0x4b09b1,_0x565280=0x0;_0x4b09b1=_0x4f5482['charAt'](_0x565280++);~_0x4b09b1&&(_0x10747b=_0x24d288%0x4?_0x10747b*0x40+_0x4b09b1:_0x4b09b1,_0x24d288++%0x4)?_0xe3bb4e+=String['fromCharCode'](0xff&_0x10747b>>(-0x2*_0x24d288&0x6)):0x0){_0x4b09b1=_0x16aca3['indexOf'](_0x4b09b1);}for(let _0x32cc93=0x0,_0x61e8c1=_0xe3bb4e['length'];_0x32cc93<_0x61e8c1;_0x32cc93++){_0x4da6ab+='%'+('00'+_0xe3bb4e['charCodeAt'](_0x32cc93)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0x4da6ab);};_0xbad0['JjBvkG']=_0x3d7d54,_0xbad0['hDNltV']={},_0xbad0['JWlFNg']=!![];}const _0x1bd292=_0x5e13b8[0x0],_0x3b1c6e=_0x56f59f+_0x1bd292,_0x3f7620=_0xbad0['hDNltV'][_0x3b1c6e];return!_0x3f7620?(_0xbad07a=_0xbad0['JjBvkG'](_0xbad07a),_0xbad0['hDNltV'][_0x3b1c6e]=_0xbad07a):_0xbad07a=_0x3f7620,_0xbad07a;}export function deepTree(_0xe3bb4e,_0x4da6ab=_0x2b80c2(0x70)){const _0x3f23fb=_0x2b80c2,_0x24d288=new Map();for(const _0x565280 of _0xe3bb4e){if(_0x565280['id']==null)continue;_0x24d288[_0x3f23fb(0x6e)](_0x565280['id'],{..._0x565280,'children':[]});}const _0x10747b=[];for(const _0x32cc93 of _0x24d288[_0x3f23fb(0x7a)]()){const _0x61e8c1=_0x32cc93[_0x3f23fb(0x69)];_0x61e8c1!=null&&_0x61e8c1!==''&&_0x24d288[_0x3f23fb(0x6c)](_0x61e8c1)?_0x24d288[_0x3f23fb(0x71)](_0x61e8c1)[_0x3f23fb(0x76)][_0x3f23fb(0x75)](_0x32cc93):_0x10747b[_0x3f23fb(0x75)](_0x32cc93);}const _0x4b09b1=_0x5520b4=>{const _0x1853e6=_0x3f23fb;_0x5520b4[_0x1853e6(0x79)]((_0x4faeea,_0x5851ae)=>{const _0x5b0700=_0x1853e6,_0x336a1b=_0x4faeea[_0x5b0700(0x67)]??0x0,_0x2a7d69=_0x5851ae['orderNum']??0x0,_0x1d9bde=_0x4da6ab==='desc'?_0x2a7d69-_0x336a1b:_0x336a1b-_0x2a7d69;return _0x1d9bde||Number(_0x4faeea['id'])-Number(_0x5851ae['id']);});for(const _0x4c8e17 of _0x5520b4)if(_0x4c8e17[_0x1853e6(0x76)]?.[_0x1853e6(0x6d)])_0x4b09b1(_0x4c8e17[_0x1853e6(0x76)]);};return _0x4b09b1(_0x10747b),_0x10747b;}export function flattenTree(_0x2f8ad4,_0x300643,_0x4bcc79=0x0,_0x51b4ab=[]){const _0x485ea9=_0x2b80c2;for(const _0x16de94 of _0x2f8ad4){const _0x1dc301=_0x16de94[_0x485ea9(0x76)]||[];_0x51b4ab[_0x485ea9(0x75)]({..._0x16de94,'depth':_0x4bcc79,'hasChildren':_0x1dc301[_0x485ea9(0x6d)]>0x0});if(_0x1dc301[_0x485ea9(0x6d)]&&_0x300643[_0x485ea9(0x6c)](_0x16de94['id']))flattenTree(_0x1dc301,_0x300643,_0x4bcc79+0x1,_0x51b4ab);}return _0x51b4ab;}
|
package/package.json
CHANGED
|
@@ -1,413 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div v-if="src" class="vm-image" :class="{ 'is-video': isVideoKind }">
|
|
3
|
-
<button
|
|
4
|
-
type="button"
|
|
5
|
-
class="vm-image__trigger"
|
|
6
|
-
:style="thumbStyle"
|
|
7
|
-
:disabled="!preview"
|
|
8
|
-
:title="preview ? (isVideoKind ? '播放视频' : '查看大图') : undefined"
|
|
9
|
-
@click="openViewer"
|
|
10
|
-
>
|
|
11
|
-
<img
|
|
12
|
-
v-if="!isVideoKind"
|
|
13
|
-
class="vm-image__media"
|
|
14
|
-
:src="src"
|
|
15
|
-
alt=""
|
|
16
|
-
:style="mediaStyle"
|
|
17
|
-
@error="onThumbError"
|
|
18
|
-
/>
|
|
19
|
-
<template v-else>
|
|
20
|
-
<img
|
|
21
|
-
v-if="videoFrameSrc"
|
|
22
|
-
class="vm-image__media"
|
|
23
|
-
:src="videoFrameSrc"
|
|
24
|
-
alt=""
|
|
25
|
-
:style="mediaStyle"
|
|
26
|
-
/>
|
|
27
|
-
<video
|
|
28
|
-
v-else-if="frameFailed"
|
|
29
|
-
class="vm-image__media"
|
|
30
|
-
:src="src"
|
|
31
|
-
muted
|
|
32
|
-
playsinline
|
|
33
|
-
preload="metadata"
|
|
34
|
-
:style="mediaStyle"
|
|
35
|
-
/>
|
|
36
|
-
<span v-else class="vm-image__loading" aria-hidden="true" />
|
|
37
|
-
<span class="vm-image__play" aria-hidden="true">
|
|
38
|
-
<i class="ri-play-fill" />
|
|
39
|
-
</span>
|
|
40
|
-
</template>
|
|
41
|
-
</button>
|
|
42
|
-
</div>
|
|
43
|
-
<span v-else class="vm-image is-empty">—</span>
|
|
44
|
-
|
|
45
|
-
<Teleport to="body">
|
|
46
|
-
<div
|
|
47
|
-
v-if="viewerOpen"
|
|
48
|
-
class="vm-image-viewer"
|
|
49
|
-
role="dialog"
|
|
50
|
-
aria-modal="true"
|
|
51
|
-
@click.self="closeViewer"
|
|
52
|
-
>
|
|
53
|
-
<button type="button" class="vm-image-viewer__close" title="关闭" @click="closeViewer">
|
|
54
|
-
<i class="ri-close-line" />
|
|
55
|
-
</button>
|
|
56
|
-
|
|
57
|
-
<div v-if="isVideoKind" class="vm-image-viewer__video-wrap">
|
|
58
|
-
<video
|
|
59
|
-
ref="videoRef"
|
|
60
|
-
class="vm-image-viewer__video"
|
|
61
|
-
:src="src"
|
|
62
|
-
controls
|
|
63
|
-
autoplay
|
|
64
|
-
playsinline
|
|
65
|
-
/>
|
|
66
|
-
</div>
|
|
67
|
-
|
|
68
|
-
<template v-else>
|
|
69
|
-
<div
|
|
70
|
-
ref="stageRef"
|
|
71
|
-
class="vm-image-viewer__stage"
|
|
72
|
-
@wheel.prevent="onWheel"
|
|
73
|
-
>
|
|
74
|
-
<img
|
|
75
|
-
class="vm-image-viewer__img"
|
|
76
|
-
:src="src"
|
|
77
|
-
alt=""
|
|
78
|
-
:style="viewerImgStyle"
|
|
79
|
-
draggable="false"
|
|
80
|
-
@load="onViewerImgLoad"
|
|
81
|
-
/>
|
|
82
|
-
</div>
|
|
83
|
-
<div class="vm-image-viewer__toolbar" @click.stop>
|
|
84
|
-
<button type="button" title="缩小" @click="zoomOut">
|
|
85
|
-
<i class="ri-subtract-line" />
|
|
86
|
-
</button>
|
|
87
|
-
<button type="button" title="放大" @click="zoomIn">
|
|
88
|
-
<i class="ri-add-line" />
|
|
89
|
-
</button>
|
|
90
|
-
<button type="button" title="原始尺寸" @click="resetView">
|
|
91
|
-
<i class="ri-aspect-ratio-line" />
|
|
92
|
-
</button>
|
|
93
|
-
<button type="button" title="逆时针旋转" @click="rotateLeft">
|
|
94
|
-
<i class="ri-anticlockwise-line" />
|
|
95
|
-
</button>
|
|
96
|
-
<button type="button" title="顺时针旋转" @click="rotateRight">
|
|
97
|
-
<i class="ri-clockwise-line" />
|
|
98
|
-
</button>
|
|
99
|
-
</div>
|
|
100
|
-
</template>
|
|
101
|
-
</div>
|
|
102
|
-
</Teleport>
|
|
103
|
-
</template>
|
|
104
|
-
|
|
105
|
-
<script setup lang="ts">
|
|
106
|
-
import { computed, nextTick, onUnmounted, ref, watch } from 'vue'
|
|
107
|
-
import { useVideoFrame } from '../../lib/video-frame'
|
|
108
|
-
|
|
109
|
-
defineOptions({ name: 'vm-image' })
|
|
110
|
-
|
|
111
|
-
const VIDEO_EXT = /\.(mp4|webm|mov|m4v|ogv|ogg)(\?|#|$)/i
|
|
112
|
-
|
|
113
|
-
const props = withDefaults(
|
|
114
|
-
defineProps<{
|
|
115
|
-
/** 图片或视频 URL(表格列绑定 modelValue) */
|
|
116
|
-
modelValue?: string | null
|
|
117
|
-
/** image | video | auto(按后缀推断) */
|
|
118
|
-
type?: 'image' | 'video' | 'auto'
|
|
119
|
-
/** 缩略图边长,默认 40 */
|
|
120
|
-
size?: number | string
|
|
121
|
-
/** 圆角,默认 8 */
|
|
122
|
-
radius?: number | string
|
|
123
|
-
/** 是否可点击预览/播放 */
|
|
124
|
-
preview?: boolean
|
|
125
|
-
fit?: 'cover' | 'contain'
|
|
126
|
-
}>(),
|
|
127
|
-
{
|
|
128
|
-
type: 'auto',
|
|
129
|
-
size: 40,
|
|
130
|
-
radius: 8,
|
|
131
|
-
preview: true,
|
|
132
|
-
fit: 'cover',
|
|
133
|
-
},
|
|
134
|
-
)
|
|
135
|
-
|
|
136
|
-
const viewerOpen = ref(false)
|
|
137
|
-
const scale = ref(1)
|
|
138
|
-
const rotate = ref(0)
|
|
139
|
-
const videoRef = ref<HTMLVideoElement | null>(null)
|
|
140
|
-
const stageRef = ref<HTMLElement | null>(null)
|
|
141
|
-
|
|
142
|
-
const src = computed(() => {
|
|
143
|
-
const v = props.modelValue
|
|
144
|
-
if (v == null) return ''
|
|
145
|
-
return String(v).trim()
|
|
146
|
-
})
|
|
147
|
-
|
|
148
|
-
const isVideoKind = computed(() => {
|
|
149
|
-
if (props.type === 'video') return true
|
|
150
|
-
if (props.type === 'image') return false
|
|
151
|
-
return VIDEO_EXT.test(src.value)
|
|
152
|
-
})
|
|
153
|
-
|
|
154
|
-
const videoThumbSource = computed(() => (isVideoKind.value ? src.value : ''))
|
|
155
|
-
const { videoFrameSrc, frameFailed } = useVideoFrame(videoThumbSource)
|
|
156
|
-
|
|
157
|
-
function toCssUnit(v: number | string) {
|
|
158
|
-
return typeof v === 'number' ? `${v}px` : v
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
const thumbStyle = computed(() => ({
|
|
162
|
-
width: toCssUnit(props.size),
|
|
163
|
-
height: toCssUnit(props.size),
|
|
164
|
-
borderRadius: toCssUnit(props.radius),
|
|
165
|
-
}))
|
|
166
|
-
|
|
167
|
-
const mediaStyle = computed(() => ({
|
|
168
|
-
objectFit: props.fit,
|
|
169
|
-
}))
|
|
170
|
-
|
|
171
|
-
const viewerImgStyle = computed(() => ({
|
|
172
|
-
transform: `scale(${scale.value}) rotate(${rotate.value}deg)`,
|
|
173
|
-
}))
|
|
174
|
-
|
|
175
|
-
function onThumbError() {
|
|
176
|
-
/* 缩略图失败仍允许点开预览 */
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
function resetView() {
|
|
180
|
-
scale.value = 1
|
|
181
|
-
rotate.value = 0
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
function zoomIn() {
|
|
185
|
-
scale.value = Math.min(5, +(scale.value + 0.2).toFixed(2))
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
function zoomOut() {
|
|
189
|
-
scale.value = Math.max(0.2, +(scale.value - 0.2).toFixed(2))
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
function rotateLeft() {
|
|
193
|
-
rotate.value -= 90
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
function rotateRight() {
|
|
197
|
-
rotate.value += 90
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
function onWheel(e: WheelEvent) {
|
|
201
|
-
if (e.deltaY < 0) zoomIn()
|
|
202
|
-
else zoomOut()
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
function onViewerImgLoad() {
|
|
206
|
-
resetView()
|
|
207
|
-
}
|
|
208
|
-
|
|
209
|
-
function lockBody(lock: boolean) {
|
|
210
|
-
if (typeof document === 'undefined') return
|
|
211
|
-
document.body.style.overflow = lock ? 'hidden' : ''
|
|
212
|
-
}
|
|
213
|
-
|
|
214
|
-
function openViewer() {
|
|
215
|
-
if (!props.preview || !src.value) return
|
|
216
|
-
resetView()
|
|
217
|
-
viewerOpen.value = true
|
|
218
|
-
lockBody(true)
|
|
219
|
-
void nextTick(() => {
|
|
220
|
-
videoRef.value?.play?.().catch(() => undefined)
|
|
221
|
-
})
|
|
222
|
-
}
|
|
223
|
-
|
|
224
|
-
function closeViewer() {
|
|
225
|
-
viewerOpen.value = false
|
|
226
|
-
lockBody(false)
|
|
227
|
-
videoRef.value?.pause?.()
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
function onKeydown(e: KeyboardEvent) {
|
|
231
|
-
if (!viewerOpen.value) return
|
|
232
|
-
if (e.key === 'Escape') closeViewer()
|
|
233
|
-
}
|
|
234
|
-
|
|
235
|
-
watch(viewerOpen, (open) => {
|
|
236
|
-
if (typeof window === 'undefined') return
|
|
237
|
-
if (open) window.addEventListener('keydown', onKeydown)
|
|
238
|
-
else window.removeEventListener('keydown', onKeydown)
|
|
239
|
-
})
|
|
240
|
-
|
|
241
|
-
onUnmounted(() => {
|
|
242
|
-
lockBody(false)
|
|
243
|
-
if (typeof window !== 'undefined') {
|
|
244
|
-
window.removeEventListener('keydown', onKeydown)
|
|
245
|
-
}
|
|
246
|
-
})
|
|
247
|
-
</script>
|
|
248
|
-
|
|
249
|
-
<style lang="scss" scoped>
|
|
250
|
-
.vm-image {
|
|
251
|
-
display: inline-flex;
|
|
252
|
-
vertical-align: middle;
|
|
253
|
-
}
|
|
254
|
-
|
|
255
|
-
.vm-image.is-empty {
|
|
256
|
-
color: var(--muted-foreground);
|
|
257
|
-
font-size: 12px;
|
|
258
|
-
}
|
|
259
|
-
|
|
260
|
-
.vm-image__trigger {
|
|
261
|
-
position: relative;
|
|
262
|
-
display: inline-flex;
|
|
263
|
-
flex-shrink: 0;
|
|
264
|
-
align-items: center;
|
|
265
|
-
justify-content: center;
|
|
266
|
-
padding: 0;
|
|
267
|
-
border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
|
|
268
|
-
background: var(--muted);
|
|
269
|
-
cursor: pointer;
|
|
270
|
-
overflow: hidden;
|
|
271
|
-
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
|
272
|
-
|
|
273
|
-
&:hover:not(:disabled) {
|
|
274
|
-
border-color: var(--focus-border);
|
|
275
|
-
box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 12%, transparent);
|
|
276
|
-
}
|
|
277
|
-
|
|
278
|
-
&:disabled {
|
|
279
|
-
cursor: default;
|
|
280
|
-
}
|
|
281
|
-
}
|
|
282
|
-
|
|
283
|
-
.vm-image__media {
|
|
284
|
-
display: block;
|
|
285
|
-
width: 100%;
|
|
286
|
-
height: 100%;
|
|
287
|
-
}
|
|
288
|
-
|
|
289
|
-
.vm-image__loading {
|
|
290
|
-
display: block;
|
|
291
|
-
width: 100%;
|
|
292
|
-
height: 100%;
|
|
293
|
-
background: color-mix(in srgb, var(--muted) 70%, var(--foreground) 8%);
|
|
294
|
-
}
|
|
295
|
-
|
|
296
|
-
.vm-image__play {
|
|
297
|
-
position: absolute;
|
|
298
|
-
inset: 0;
|
|
299
|
-
display: grid;
|
|
300
|
-
place-items: center;
|
|
301
|
-
background: rgb(20 24 40 / 28%);
|
|
302
|
-
color: #fff;
|
|
303
|
-
pointer-events: none;
|
|
304
|
-
|
|
305
|
-
i {
|
|
306
|
-
font-size: 18px;
|
|
307
|
-
line-height: 1;
|
|
308
|
-
}
|
|
309
|
-
}
|
|
310
|
-
</style>
|
|
311
|
-
|
|
312
|
-
<style lang="scss">
|
|
313
|
-
.vm-image-viewer {
|
|
314
|
-
position: fixed;
|
|
315
|
-
inset: 0;
|
|
316
|
-
z-index: 2200;
|
|
317
|
-
display: flex;
|
|
318
|
-
flex-direction: column;
|
|
319
|
-
align-items: center;
|
|
320
|
-
justify-content: center;
|
|
321
|
-
padding: 24px;
|
|
322
|
-
background: rgb(10 12 20 / 88%);
|
|
323
|
-
}
|
|
324
|
-
|
|
325
|
-
.vm-image-viewer__close {
|
|
326
|
-
position: absolute;
|
|
327
|
-
top: 16px;
|
|
328
|
-
right: 16px;
|
|
329
|
-
z-index: 2;
|
|
330
|
-
display: inline-flex;
|
|
331
|
-
width: 36px;
|
|
332
|
-
height: 36px;
|
|
333
|
-
align-items: center;
|
|
334
|
-
justify-content: center;
|
|
335
|
-
border: none;
|
|
336
|
-
border-radius: 10px;
|
|
337
|
-
background: rgb(255 255 255 / 12%);
|
|
338
|
-
color: #fff;
|
|
339
|
-
font-size: 20px;
|
|
340
|
-
cursor: pointer;
|
|
341
|
-
|
|
342
|
-
&:hover {
|
|
343
|
-
background: rgb(255 255 255 / 22%);
|
|
344
|
-
}
|
|
345
|
-
}
|
|
346
|
-
|
|
347
|
-
.vm-image-viewer__stage {
|
|
348
|
-
display: flex;
|
|
349
|
-
width: 100%;
|
|
350
|
-
max-width: min(1200px, calc(100vw - 48px));
|
|
351
|
-
height: calc(100vh - 120px);
|
|
352
|
-
align-items: center;
|
|
353
|
-
justify-content: center;
|
|
354
|
-
overflow: hidden;
|
|
355
|
-
}
|
|
356
|
-
|
|
357
|
-
.vm-image-viewer__img {
|
|
358
|
-
max-width: 100%;
|
|
359
|
-
max-height: 100%;
|
|
360
|
-
object-fit: contain;
|
|
361
|
-
transition: transform 0.15s ease;
|
|
362
|
-
user-select: none;
|
|
363
|
-
}
|
|
364
|
-
|
|
365
|
-
.vm-image-viewer__video-wrap {
|
|
366
|
-
display: flex;
|
|
367
|
-
width: min(960px, calc(100vw - 48px));
|
|
368
|
-
max-height: calc(100vh - 80px);
|
|
369
|
-
align-items: center;
|
|
370
|
-
justify-content: center;
|
|
371
|
-
}
|
|
372
|
-
|
|
373
|
-
.vm-image-viewer__video {
|
|
374
|
-
width: 100%;
|
|
375
|
-
max-height: calc(100vh - 80px);
|
|
376
|
-
border-radius: 12px;
|
|
377
|
-
background: #000;
|
|
378
|
-
outline: none;
|
|
379
|
-
}
|
|
380
|
-
|
|
381
|
-
.vm-image-viewer__toolbar {
|
|
382
|
-
position: fixed;
|
|
383
|
-
bottom: 24px;
|
|
384
|
-
left: 50%;
|
|
385
|
-
z-index: 2;
|
|
386
|
-
display: inline-flex;
|
|
387
|
-
align-items: center;
|
|
388
|
-
gap: 4px;
|
|
389
|
-
padding: 6px 8px;
|
|
390
|
-
border-radius: 12px;
|
|
391
|
-
background: rgb(24 28 40 / 92%);
|
|
392
|
-
transform: translateX(-50%);
|
|
393
|
-
|
|
394
|
-
button {
|
|
395
|
-
display: inline-flex;
|
|
396
|
-
width: 36px;
|
|
397
|
-
height: 36px;
|
|
398
|
-
align-items: center;
|
|
399
|
-
justify-content: center;
|
|
400
|
-
border: none;
|
|
401
|
-
border-radius: 8px;
|
|
402
|
-
background: transparent;
|
|
403
|
-
color: rgb(255 255 255 / 88%);
|
|
404
|
-
font-size: 18px;
|
|
405
|
-
cursor: pointer;
|
|
406
|
-
|
|
407
|
-
&:hover {
|
|
408
|
-
background: rgb(255 255 255 / 12%);
|
|
409
|
-
color: #fff;
|
|
410
|
-
}
|
|
411
|
-
}
|
|
412
|
-
}
|
|
413
|
-
</style>
|