Compare commits
21
Commits
2.0.0
...
afb2440d8b
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
afb2440d8b | ||
|
|
f0748997be | ||
|
|
b2c5c7cc6d | ||
|
|
d16f11c263 | ||
|
|
0f6e817966 | ||
|
|
6b8f7aa6b4 | ||
|
|
78dac7482c | ||
|
|
9aec221ea3 | ||
|
|
938dde4c1c | ||
|
|
8e884eb178 | ||
|
|
8c65e66ab6 | ||
|
|
a34e27cc65 | ||
|
|
de2e53cbcf | ||
|
|
b3c6dad1b1 | ||
|
|
fcb2fe8f7f | ||
|
|
c02f6743e3 | ||
|
|
3e24d4a363 | ||
|
|
7574acdad2 | ||
|
|
704c80e019 | ||
|
|
210e251b23 | ||
|
|
93ca2a29a6 |
No files matched your search
+2
-1
@@ -26,4 +26,5 @@ dist-ssr
|
||||
serve
|
||||
miao-directory.exe
|
||||
miao-directory-amd64-linux
|
||||
miao-directory-amd64-win.exe
|
||||
miao-directory-amd64-win.exe
|
||||
test
|
||||
@@ -1,11 +1,27 @@
|
||||
todo: 标签页,miaoDirectory切换动画 [finish]
|
||||
todo: 重构virtualPage,所有page以插件形式使用 [finish]
|
||||
todo: miaoDirectory插件化,为后续插件功能开发做准备 [finish]
|
||||
todo: miaoPopupInput, 弹出一个输入框 [finish]
|
||||
todo: miaoDirectory的重命名功能 [finish]
|
||||
todo: miaoDirectory的剪切功能 [finish]
|
||||
todo: miaoDirectory的上传按钮 [finish]
|
||||
todo: miaoDirectory的新建文件/文件夹功能 [finish]
|
||||
todo: miaoDirectory的多选功能 [finish]
|
||||
todo: VirtualDirectory更新时更新文件信息
|
||||
todo: miaoDirectory的复制文件/文件夹功能
|
||||
## TODO list:
|
||||
|
||||
| 计划 | 状态 |
|
||||
|---|---|
|
||||
| 拆分miaoDirectory | ✅ |
|
||||
| 完善视频插件 | ✅ |
|
||||
| 完善PDF插件 | ✅ |
|
||||
| 完善Code插件 | ✅ |
|
||||
| 实现miaoDirectory的搜索功能 | ✅ |
|
||||
| plugin增加些属性,icon, disable, group之类的 | ❌ |
|
||||
| 完善miaoDirectory的搜索功能 | ❌ |
|
||||
| 实现miaoDirectory的排序功能 | ❌ |
|
||||
| 完善图片浏览插件 | ❌ |
|
||||
| VirtualDirectory更新时更新文件信息 | ❌ |
|
||||
| 创建音乐播放器组件(仿QQ音乐移动端吧) | ❌ |
|
||||
| miaoDirectory的复制文件/文件夹功能 | ❌ |
|
||||
|
||||
|
||||
| 长期计划 |
|
||||
|---|
|
||||
| 重构virtualDirectory,使其不用直接拥有父文件夹 |
|
||||
| 重构virtualDirectory,使其不用直接拥有父文件夹 |
|
||||
|
||||
## 碎碎念:
|
||||
|
||||
为什么不直接做成类似于windows的风格呢?其实技术实现上问题应该不大,重构也不用重构太多东西(APP.vue改改,插件部分改改这样),但是开学了事情一大堆,实习又没法比较美好地推掉。平时每天到宿舍都精疲力竭还要准备秋招和学校的破事。更何况搞不好还会被两个学分卡得没法毕业,好烦好烦。
|
||||
不过可能我对插件的价值也是有所高估吧。
|
||||
+1
-1
@@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="./public/favicon.ico" />
|
||||
<link rel="icon" type="image/svg+xml" href="./icon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>MiaoDirectory</title>
|
||||
</head>
|
||||
|
||||
+4
-2
@@ -7,7 +7,7 @@
|
||||
"dev": "vite",
|
||||
"dev:host": "vite --host 0.0.0.0",
|
||||
"build": "vue-tsc -b && vite build",
|
||||
"build:auto": "pnpm run build && rm -rf ./serve/web/* && cp -r ./dist/* ./serve/web/ && cd ./serve && go build && mv ./miao-directory.exe ../",
|
||||
"build:auto": "pnpm run build && go env -w GOOS=windows GOARCH=amd64 && rm -rf ./serve/web/* && cp -r ./dist/* ./serve/web/ && cd ./serve && go env -w GOOS=windows && go build -o ../miao-directory.exe",
|
||||
"build:auto:release": "pnpm run build && rm -rf ./serve/web/* && cp -r ./dist/* ./serve/web/ && cd ./serve && go env -w GOOS=windows GOARCH=amd64 && go build -o ../miao-directory-amd64-win.exe && go env -w GOOS=linux GOARCH=amd64 && go build -o ../miao-directory-amd64-linux",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
@@ -27,16 +27,18 @@
|
||||
"axios": "^1.7.3",
|
||||
"codemirror": "^6.0.1",
|
||||
"lodash": "^4.17.21",
|
||||
"markdown-it": "^14.1.0",
|
||||
"naive-ui": "^2.39.0",
|
||||
"pdfjs-dist": "^4.5.136",
|
||||
"sass": "^1.77.8",
|
||||
"vue": "^3.4.35",
|
||||
"vue": "3.5.0",
|
||||
"vue-codemirror": "^6.1.1",
|
||||
"xgplayer": "^3.0.20",
|
||||
"xgplayer-subtitles": "^3.0.20"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/lodash": "^4.17.7",
|
||||
"@types/markdown-it": "^14.1.2",
|
||||
"@types/node": "^22.1.0",
|
||||
"@types/pdfjs-dist": "^2.10.378",
|
||||
"@vitejs/plugin-vue": "^5.1.2",
|
||||
|
||||
Generated
+174
-69
@@ -53,9 +53,12 @@ importers:
|
||||
lodash:
|
||||
specifier: ^4.17.21
|
||||
version: 4.17.21
|
||||
markdown-it:
|
||||
specifier: ^14.1.0
|
||||
version: 14.1.0
|
||||
naive-ui:
|
||||
specifier: ^2.39.0
|
||||
version: 2.39.0(vue@3.4.37(typescript@5.5.4))
|
||||
version: 2.39.0(vue@3.5.0(typescript@5.5.4))
|
||||
pdfjs-dist:
|
||||
specifier: ^4.5.136
|
||||
version: 4.5.136
|
||||
@@ -63,11 +66,11 @@ importers:
|
||||
specifier: ^1.77.8
|
||||
version: 1.77.8
|
||||
vue:
|
||||
specifier: ^3.4.35
|
||||
version: 3.4.37(typescript@5.5.4)
|
||||
specifier: 3.5.0
|
||||
version: 3.5.0(typescript@5.5.4)
|
||||
vue-codemirror:
|
||||
specifier: ^6.1.1
|
||||
version: 6.1.1(codemirror@6.0.1(@lezer/common@1.2.1))(vue@3.4.37(typescript@5.5.4))
|
||||
version: 6.1.1(codemirror@6.0.1(@lezer/common@1.2.1))(vue@3.5.0(typescript@5.5.4))
|
||||
xgplayer:
|
||||
specifier: ^3.0.20
|
||||
version: 3.0.20(core-js@3.38.1)
|
||||
@@ -78,6 +81,9 @@ importers:
|
||||
'@types/lodash':
|
||||
specifier: ^4.17.7
|
||||
version: 4.17.7
|
||||
'@types/markdown-it':
|
||||
specifier: ^14.1.2
|
||||
version: 14.1.2
|
||||
'@types/node':
|
||||
specifier: ^22.1.0
|
||||
version: 22.1.0
|
||||
@@ -86,7 +92,7 @@ importers:
|
||||
version: 2.10.378
|
||||
'@vitejs/plugin-vue':
|
||||
specifier: ^5.1.2
|
||||
version: 5.1.2(vite@5.4.0(@types/node@22.1.0)(sass@1.77.8))(vue@3.4.37(typescript@5.5.4))
|
||||
version: 5.1.2(vite@5.4.0(@types/node@22.1.0)(sass@1.77.8))(vue@3.5.0(typescript@5.5.4))
|
||||
typescript:
|
||||
specifier: ^5.5.3
|
||||
version: 5.5.4
|
||||
@@ -480,12 +486,21 @@ packages:
|
||||
'@types/katex@0.16.7':
|
||||
resolution: {integrity: sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ==}
|
||||
|
||||
'@types/linkify-it@5.0.0':
|
||||
resolution: {integrity: sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==}
|
||||
|
||||
'@types/lodash-es@4.17.12':
|
||||
resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
|
||||
|
||||
'@types/lodash@4.17.7':
|
||||
resolution: {integrity: sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==}
|
||||
|
||||
'@types/markdown-it@14.1.2':
|
||||
resolution: {integrity: sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==}
|
||||
|
||||
'@types/mdurl@2.0.0':
|
||||
resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==}
|
||||
|
||||
'@types/node@22.1.0':
|
||||
resolution: {integrity: sha512-AOmuRF0R2/5j1knA3c6G3HOk523Ga+l+ZXltX8SF1+5oqcXijjfTd8fY3XRZqSihEu9XhtQnKYLmkFaoxgsJHw==}
|
||||
|
||||
@@ -515,14 +530,20 @@ packages:
|
||||
'@vue/compiler-core@3.4.37':
|
||||
resolution: {integrity: sha512-ZDDT/KiLKuCRXyzWecNzC5vTcubGz4LECAtfGPENpo0nrmqJHwuWtRLxk/Sb9RAKtR9iFflFycbkjkY+W/PZUQ==}
|
||||
|
||||
'@vue/compiler-core@3.5.0':
|
||||
resolution: {integrity: sha512-ja7cpqAOfw4tyFAxgBz70Z42miNDeaqTxExTsnXDLomRpqfyCgyvZvFp482fmsElpfvsoMJUsvzULhvxUTW6Iw==}
|
||||
|
||||
'@vue/compiler-dom@3.4.37':
|
||||
resolution: {integrity: sha512-rIiSmL3YrntvgYV84rekAtU/xfogMUJIclUMeIKEtVBFngOL3IeZHhsH3UaFEgB5iFGpj6IW+8YuM/2Up+vVag==}
|
||||
|
||||
'@vue/compiler-sfc@3.4.37':
|
||||
resolution: {integrity: sha512-vCfetdas40Wk9aK/WWf8XcVESffsbNkBQwS5t13Y/PcfqKfIwJX2gF+82th6dOpnpbptNMlMjAny80li7TaCIg==}
|
||||
'@vue/compiler-dom@3.5.0':
|
||||
resolution: {integrity: sha512-xYjUybWZXl+1R/toDy815i4PbeehL2hThiSGkcpmIOCy2HoYyeeC/gAWK/Y/xsoK+GSw198/T5O31bYuQx5uvQ==}
|
||||
|
||||
'@vue/compiler-ssr@3.4.37':
|
||||
resolution: {integrity: sha512-TyAgYBWrHlFrt4qpdACh8e9Ms6C/AZQ6A6xLJaWrCL8GCX5DxMzxyeFAEMfU/VFr4tylHm+a2NpfJpcd7+20XA==}
|
||||
'@vue/compiler-sfc@3.5.0':
|
||||
resolution: {integrity: sha512-B9DgLtrqok2GLuaFjLlSL15ZG3ZDBiitUH1ecex9guh/ZcA5MCdwuVE6nsfQxktuZY/QY0awJ35/ripIviCQTQ==}
|
||||
|
||||
'@vue/compiler-ssr@3.5.0':
|
||||
resolution: {integrity: sha512-E263QZmA1dqRd7c3u/sWTLRMpQOT0aZ8av/L9SoD/v/BVMZaWFHPUUBswS+bzrfvG2suJF8vSLKx6k6ba5SUdA==}
|
||||
|
||||
'@vue/compiler-vue2@2.7.16':
|
||||
resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
|
||||
@@ -535,23 +556,26 @@ packages:
|
||||
typescript:
|
||||
optional: true
|
||||
|
||||
'@vue/reactivity@3.4.37':
|
||||
resolution: {integrity: sha512-UmdKXGx0BZ5kkxPqQr3PK3tElz6adTey4307NzZ3whZu19i5VavYal7u2FfOmAzlcDVgE8+X0HZ2LxLb/jgbYw==}
|
||||
'@vue/reactivity@3.5.0':
|
||||
resolution: {integrity: sha512-Ew3F5riP3B3ZDGjD3ZKb9uZylTTPSqt8hAf4sGbvbjrjDjrFb3Jm15Tk1/w7WwTE5GbQ2Qhwxx1moc9hr8A/OQ==}
|
||||
|
||||
'@vue/runtime-core@3.4.37':
|
||||
resolution: {integrity: sha512-MNjrVoLV/sirHZoD7QAilU1Ifs7m/KJv4/84QVbE6nyAZGQNVOa1HGxaOzp9YqCG+GpLt1hNDC4RbH+KtanV7w==}
|
||||
'@vue/runtime-core@3.5.0':
|
||||
resolution: {integrity: sha512-mQyW0F9FaNRdt8ghkAs+BMG3iQ7LGgWKOpkzUzR5AI5swPNydHGL5hvVTqFaeMzwecF1g0c86H4yFQsSxJhH1w==}
|
||||
|
||||
'@vue/runtime-dom@3.4.37':
|
||||
resolution: {integrity: sha512-Mg2EwgGZqtwKrqdL/FKMF2NEaOHuH+Ks9TQn3DHKyX//hQTYOun+7Tqp1eo0P4Ds+SjltZshOSRq6VsU0baaNg==}
|
||||
'@vue/runtime-dom@3.5.0':
|
||||
resolution: {integrity: sha512-NQQXjpdXgyYVJ2M56FJ+lSJgZiecgQ2HhxhnQBN95FymXegRNY/N2htI7vOTwpP75pfxhIeYOJ8mE8sW8KAW6A==}
|
||||
|
||||
'@vue/server-renderer@3.4.37':
|
||||
resolution: {integrity: sha512-jZ5FAHDR2KBq2FsRUJW6GKDOAG9lUTX8aBEGq4Vf6B/35I9fPce66BornuwmqmKgfiSlecwuOb6oeoamYMohkg==}
|
||||
'@vue/server-renderer@3.5.0':
|
||||
resolution: {integrity: sha512-HyDIFUg+l7L4PKrEnJlCYWHUOlm6NxZhmSxIefZ5MTYjkIPfDfkwhX7hqxAQHfgIAE1uLMLQZwuNR/ozI0NhZg==}
|
||||
peerDependencies:
|
||||
vue: 3.4.37
|
||||
vue: 3.5.0
|
||||
|
||||
'@vue/shared@3.4.37':
|
||||
resolution: {integrity: sha512-nIh8P2fc3DflG8+5Uw8PT/1i17ccFn0xxN/5oE9RfV5SVnd7G0XEFRwakrnNFE/jlS95fpGXDVG5zDETS26nmg==}
|
||||
|
||||
'@vue/shared@3.5.0':
|
||||
resolution: {integrity: sha512-m9IgiteBpCkFaMNwCOBkFksA7z8QiKc30ooRuoXWUFRDu0mGyNPlFHmbncF0/Kra1RlX8QrmBbRaIxVvikaR0Q==}
|
||||
|
||||
abbrev@1.1.1:
|
||||
resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
|
||||
|
||||
@@ -575,6 +599,9 @@ packages:
|
||||
engines: {node: '>=10'}
|
||||
deprecated: This package is no longer supported.
|
||||
|
||||
argparse@2.0.1:
|
||||
resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
|
||||
|
||||
async-validator@4.2.5:
|
||||
resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
|
||||
|
||||
@@ -700,6 +727,10 @@ packages:
|
||||
emoji-regex@8.0.0:
|
||||
resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
|
||||
|
||||
entities@4.5.0:
|
||||
resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
|
||||
engines: {node: '>=0.12'}
|
||||
|
||||
entities@5.0.0:
|
||||
resolution: {integrity: sha512-BeJFvFRJddxobhvEdm5GqHzRV/X+ACeuw0/BuuxsCh1EUZcAIz8+kYmBp/LrQuloy6K1f3a0M7+IhmZ7QnkISA==}
|
||||
engines: {node: '>=0.12'}
|
||||
@@ -826,6 +857,9 @@ packages:
|
||||
resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
|
||||
engines: {node: '>=0.12.0'}
|
||||
|
||||
linkify-it@5.0.0:
|
||||
resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
|
||||
|
||||
lodash-es@4.17.21:
|
||||
resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
|
||||
|
||||
@@ -839,6 +873,13 @@ packages:
|
||||
resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
|
||||
engines: {node: '>=8'}
|
||||
|
||||
markdown-it@14.1.0:
|
||||
resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
|
||||
hasBin: true
|
||||
|
||||
mdurl@2.0.0:
|
||||
resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
|
||||
|
||||
micromatch@4.0.7:
|
||||
resolution: {integrity: sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==}
|
||||
engines: {node: '>=8.6'}
|
||||
@@ -956,9 +997,17 @@ packages:
|
||||
resolution: {integrity: sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==}
|
||||
engines: {node: ^10 || ^12 || >=14}
|
||||
|
||||
postcss@8.4.44:
|
||||
resolution: {integrity: sha512-Aweb9unOEpQ3ezu4Q00DPvvM2ZTUitJdNKeP/+uQgr1IBIqu574IaZoURId7BKtWMREwzKa9OgzPzezWGPWFQw==}
|
||||
engines: {node: ^10 || ^12 || >=14}
|
||||
|
||||
proxy-from-env@1.1.0:
|
||||
resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
|
||||
|
||||
punycode.js@2.3.1:
|
||||
resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
|
||||
engines: {node: '>=6'}
|
||||
|
||||
readable-stream@3.6.2:
|
||||
resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
|
||||
engines: {node: '>= 6'}
|
||||
@@ -1056,6 +1105,9 @@ packages:
|
||||
engines: {node: '>=14.17'}
|
||||
hasBin: true
|
||||
|
||||
uc.micro@2.1.0:
|
||||
resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
|
||||
|
||||
undici-types@6.13.0:
|
||||
resolution: {integrity: sha512-xtFJHudx8S2DSoujjMd1WeWvn7KKWFRESZTMeL1RptAYERu29D6jphMjjY+vn96jvN3kVPDNxU/E13VTaXj6jg==}
|
||||
|
||||
@@ -1125,8 +1177,8 @@ packages:
|
||||
peerDependencies:
|
||||
typescript: '>=5.0.0'
|
||||
|
||||
vue@3.4.37:
|
||||
resolution: {integrity: sha512-3vXvNfkKTBsSJ7JP+LyR7GBuwQuckbWvuwAid3xbqK9ppsKt/DUvfqgZ48fgOLEfpy1IacL5f8QhUVl77RaI7A==}
|
||||
vue@3.5.0:
|
||||
resolution: {integrity: sha512-1t70favYoFijwfWJ7g81aTd32obGaAnKYE9FNyMgnEzn3F4YncRi/kqAHHKloG0VXTD8vBYMhbgLKCA+Sk6QDw==}
|
||||
peerDependencies:
|
||||
typescript: '*'
|
||||
peerDependenciesMeta:
|
||||
@@ -1350,9 +1402,9 @@ snapshots:
|
||||
dependencies:
|
||||
css-render: 0.15.14
|
||||
|
||||
'@css-render/vue3-ssr@0.15.14(vue@3.4.37(typescript@5.5.4))':
|
||||
'@css-render/vue3-ssr@0.15.14(vue@3.5.0(typescript@5.5.4))':
|
||||
dependencies:
|
||||
vue: 3.4.37(typescript@5.5.4)
|
||||
vue: 3.5.0(typescript@5.5.4)
|
||||
|
||||
'@emotion/hash@0.8.0': {}
|
||||
|
||||
@@ -1566,12 +1618,21 @@ snapshots:
|
||||
|
||||
'@types/katex@0.16.7': {}
|
||||
|
||||
'@types/linkify-it@5.0.0': {}
|
||||
|
||||
'@types/lodash-es@4.17.12':
|
||||
dependencies:
|
||||
'@types/lodash': 4.17.7
|
||||
|
||||
'@types/lodash@4.17.7': {}
|
||||
|
||||
'@types/markdown-it@14.1.2':
|
||||
dependencies:
|
||||
'@types/linkify-it': 5.0.0
|
||||
'@types/mdurl': 2.0.0
|
||||
|
||||
'@types/mdurl@2.0.0': {}
|
||||
|
||||
'@types/node@22.1.0':
|
||||
dependencies:
|
||||
undici-types: 6.13.0
|
||||
@@ -1585,10 +1646,10 @@ snapshots:
|
||||
|
||||
'@vicons/ionicons5@0.12.0': {}
|
||||
|
||||
'@vitejs/plugin-vue@5.1.2(vite@5.4.0(@types/node@22.1.0)(sass@1.77.8))(vue@3.4.37(typescript@5.5.4))':
|
||||
'@vitejs/plugin-vue@5.1.2(vite@5.4.0(@types/node@22.1.0)(sass@1.77.8))(vue@3.5.0(typescript@5.5.4))':
|
||||
dependencies:
|
||||
vite: 5.4.0(@types/node@22.1.0)(sass@1.77.8)
|
||||
vue: 3.4.37(typescript@5.5.4)
|
||||
vue: 3.5.0(typescript@5.5.4)
|
||||
|
||||
'@volar/language-core@2.4.0-alpha.18':
|
||||
dependencies:
|
||||
@@ -1610,27 +1671,40 @@ snapshots:
|
||||
estree-walker: 2.0.2
|
||||
source-map-js: 1.2.0
|
||||
|
||||
'@vue/compiler-core@3.5.0':
|
||||
dependencies:
|
||||
'@babel/parser': 7.25.3
|
||||
'@vue/shared': 3.5.0
|
||||
entities: 4.5.0
|
||||
estree-walker: 2.0.2
|
||||
source-map-js: 1.2.0
|
||||
|
||||
'@vue/compiler-dom@3.4.37':
|
||||
dependencies:
|
||||
'@vue/compiler-core': 3.4.37
|
||||
'@vue/shared': 3.4.37
|
||||
|
||||
'@vue/compiler-sfc@3.4.37':
|
||||
'@vue/compiler-dom@3.5.0':
|
||||
dependencies:
|
||||
'@vue/compiler-core': 3.5.0
|
||||
'@vue/shared': 3.5.0
|
||||
|
||||
'@vue/compiler-sfc@3.5.0':
|
||||
dependencies:
|
||||
'@babel/parser': 7.25.3
|
||||
'@vue/compiler-core': 3.4.37
|
||||
'@vue/compiler-dom': 3.4.37
|
||||
'@vue/compiler-ssr': 3.4.37
|
||||
'@vue/shared': 3.4.37
|
||||
'@vue/compiler-core': 3.5.0
|
||||
'@vue/compiler-dom': 3.5.0
|
||||
'@vue/compiler-ssr': 3.5.0
|
||||
'@vue/shared': 3.5.0
|
||||
estree-walker: 2.0.2
|
||||
magic-string: 0.30.11
|
||||
postcss: 8.4.41
|
||||
postcss: 8.4.44
|
||||
source-map-js: 1.2.0
|
||||
|
||||
'@vue/compiler-ssr@3.4.37':
|
||||
'@vue/compiler-ssr@3.5.0':
|
||||
dependencies:
|
||||
'@vue/compiler-dom': 3.4.37
|
||||
'@vue/shared': 3.4.37
|
||||
'@vue/compiler-dom': 3.5.0
|
||||
'@vue/shared': 3.5.0
|
||||
|
||||
'@vue/compiler-vue2@2.7.16':
|
||||
dependencies:
|
||||
@@ -1650,30 +1724,32 @@ snapshots:
|
||||
optionalDependencies:
|
||||
typescript: 5.5.4
|
||||
|
||||
'@vue/reactivity@3.4.37':
|
||||
'@vue/reactivity@3.5.0':
|
||||
dependencies:
|
||||
'@vue/shared': 3.4.37
|
||||
'@vue/shared': 3.5.0
|
||||
|
||||
'@vue/runtime-core@3.4.37':
|
||||
'@vue/runtime-core@3.5.0':
|
||||
dependencies:
|
||||
'@vue/reactivity': 3.4.37
|
||||
'@vue/shared': 3.4.37
|
||||
'@vue/reactivity': 3.5.0
|
||||
'@vue/shared': 3.5.0
|
||||
|
||||
'@vue/runtime-dom@3.4.37':
|
||||
'@vue/runtime-dom@3.5.0':
|
||||
dependencies:
|
||||
'@vue/reactivity': 3.4.37
|
||||
'@vue/runtime-core': 3.4.37
|
||||
'@vue/shared': 3.4.37
|
||||
'@vue/reactivity': 3.5.0
|
||||
'@vue/runtime-core': 3.5.0
|
||||
'@vue/shared': 3.5.0
|
||||
csstype: 3.1.3
|
||||
|
||||
'@vue/server-renderer@3.4.37(vue@3.4.37(typescript@5.5.4))':
|
||||
'@vue/server-renderer@3.5.0(vue@3.5.0(typescript@5.5.4))':
|
||||
dependencies:
|
||||
'@vue/compiler-ssr': 3.4.37
|
||||
'@vue/shared': 3.4.37
|
||||
vue: 3.4.37(typescript@5.5.4)
|
||||
'@vue/compiler-ssr': 3.5.0
|
||||
'@vue/shared': 3.5.0
|
||||
vue: 3.5.0(typescript@5.5.4)
|
||||
|
||||
'@vue/shared@3.4.37': {}
|
||||
|
||||
'@vue/shared@3.5.0': {}
|
||||
|
||||
abbrev@1.1.1:
|
||||
optional: true
|
||||
|
||||
@@ -1701,6 +1777,8 @@ snapshots:
|
||||
readable-stream: 3.6.2
|
||||
optional: true
|
||||
|
||||
argparse@2.0.1: {}
|
||||
|
||||
async-validator@4.2.5: {}
|
||||
|
||||
asynckit@0.4.0: {}
|
||||
@@ -1840,6 +1918,8 @@ snapshots:
|
||||
emoji-regex@8.0.0:
|
||||
optional: true
|
||||
|
||||
entities@4.5.0: {}
|
||||
|
||||
entities@5.0.0: {}
|
||||
|
||||
es5-ext@0.10.64:
|
||||
@@ -1999,6 +2079,10 @@ snapshots:
|
||||
|
||||
is-number@7.0.0: {}
|
||||
|
||||
linkify-it@5.0.0:
|
||||
dependencies:
|
||||
uc.micro: 2.1.0
|
||||
|
||||
lodash-es@4.17.21: {}
|
||||
|
||||
lodash@4.17.21: {}
|
||||
@@ -2012,6 +2096,17 @@ snapshots:
|
||||
semver: 6.3.1
|
||||
optional: true
|
||||
|
||||
markdown-it@14.1.0:
|
||||
dependencies:
|
||||
argparse: 2.0.1
|
||||
entities: 4.5.0
|
||||
linkify-it: 5.0.0
|
||||
mdurl: 2.0.0
|
||||
punycode.js: 2.3.1
|
||||
uc.micro: 2.1.0
|
||||
|
||||
mdurl@2.0.0: {}
|
||||
|
||||
micromatch@4.0.7:
|
||||
dependencies:
|
||||
braces: 3.0.3
|
||||
@@ -2057,10 +2152,10 @@ snapshots:
|
||||
|
||||
muggle-string@0.4.1: {}
|
||||
|
||||
naive-ui@2.39.0(vue@3.4.37(typescript@5.5.4)):
|
||||
naive-ui@2.39.0(vue@3.5.0(typescript@5.5.4)):
|
||||
dependencies:
|
||||
'@css-render/plugin-bem': 0.15.14(css-render@0.15.14)
|
||||
'@css-render/vue3-ssr': 0.15.14(vue@3.4.37(typescript@5.5.4))
|
||||
'@css-render/vue3-ssr': 0.15.14(vue@3.5.0(typescript@5.5.4))
|
||||
'@types/katex': 0.16.7
|
||||
'@types/lodash': 4.17.7
|
||||
'@types/lodash-es': 4.17.12
|
||||
@@ -2075,10 +2170,10 @@ snapshots:
|
||||
lodash-es: 4.17.21
|
||||
seemly: 0.3.8
|
||||
treemate: 0.3.11
|
||||
vdirs: 0.1.8(vue@3.4.37(typescript@5.5.4))
|
||||
vooks: 0.2.12(vue@3.4.37(typescript@5.5.4))
|
||||
vue: 3.4.37(typescript@5.5.4)
|
||||
vueuc: 0.4.58(vue@3.4.37(typescript@5.5.4))
|
||||
vdirs: 0.1.8(vue@3.5.0(typescript@5.5.4))
|
||||
vooks: 0.2.12(vue@3.5.0(typescript@5.5.4))
|
||||
vue: 3.5.0(typescript@5.5.4)
|
||||
vueuc: 0.4.58(vue@3.5.0(typescript@5.5.4))
|
||||
|
||||
nan@2.20.0:
|
||||
optional: true
|
||||
@@ -2141,8 +2236,16 @@ snapshots:
|
||||
picocolors: 1.0.1
|
||||
source-map-js: 1.2.0
|
||||
|
||||
postcss@8.4.44:
|
||||
dependencies:
|
||||
nanoid: 3.3.7
|
||||
picocolors: 1.0.1
|
||||
source-map-js: 1.2.0
|
||||
|
||||
proxy-from-env@1.1.0: {}
|
||||
|
||||
punycode.js@2.3.1: {}
|
||||
|
||||
readable-stream@3.6.2:
|
||||
dependencies:
|
||||
inherits: 2.0.4
|
||||
@@ -2261,15 +2364,17 @@ snapshots:
|
||||
|
||||
typescript@5.5.4: {}
|
||||
|
||||
uc.micro@2.1.0: {}
|
||||
|
||||
undici-types@6.13.0: {}
|
||||
|
||||
util-deprecate@1.0.2:
|
||||
optional: true
|
||||
|
||||
vdirs@0.1.8(vue@3.4.37(typescript@5.5.4)):
|
||||
vdirs@0.1.8(vue@3.5.0(typescript@5.5.4)):
|
||||
dependencies:
|
||||
evtd: 0.2.4
|
||||
vue: 3.4.37(typescript@5.5.4)
|
||||
vue: 3.5.0(typescript@5.5.4)
|
||||
|
||||
vite-plugin-singlefile@2.0.2(rollup@4.20.0)(vite@5.4.0(@types/node@22.1.0)(sass@1.77.8)):
|
||||
dependencies:
|
||||
@@ -2287,21 +2392,21 @@ snapshots:
|
||||
fsevents: 2.3.3
|
||||
sass: 1.77.8
|
||||
|
||||
vooks@0.2.12(vue@3.4.37(typescript@5.5.4)):
|
||||
vooks@0.2.12(vue@3.5.0(typescript@5.5.4)):
|
||||
dependencies:
|
||||
evtd: 0.2.4
|
||||
vue: 3.4.37(typescript@5.5.4)
|
||||
vue: 3.5.0(typescript@5.5.4)
|
||||
|
||||
vscode-uri@3.0.8: {}
|
||||
|
||||
vue-codemirror@6.1.1(codemirror@6.0.1(@lezer/common@1.2.1))(vue@3.4.37(typescript@5.5.4)):
|
||||
vue-codemirror@6.1.1(codemirror@6.0.1(@lezer/common@1.2.1))(vue@3.5.0(typescript@5.5.4)):
|
||||
dependencies:
|
||||
'@codemirror/commands': 6.6.0
|
||||
'@codemirror/language': 6.10.2
|
||||
'@codemirror/state': 6.4.1
|
||||
'@codemirror/view': 6.33.0
|
||||
codemirror: 6.0.1(@lezer/common@1.2.1)
|
||||
vue: 3.4.37(typescript@5.5.4)
|
||||
vue: 3.5.0(typescript@5.5.4)
|
||||
|
||||
vue-tsc@2.0.29(typescript@5.5.4):
|
||||
dependencies:
|
||||
@@ -2310,26 +2415,26 @@ snapshots:
|
||||
semver: 7.6.3
|
||||
typescript: 5.5.4
|
||||
|
||||
vue@3.4.37(typescript@5.5.4):
|
||||
vue@3.5.0(typescript@5.5.4):
|
||||
dependencies:
|
||||
'@vue/compiler-dom': 3.4.37
|
||||
'@vue/compiler-sfc': 3.4.37
|
||||
'@vue/runtime-dom': 3.4.37
|
||||
'@vue/server-renderer': 3.4.37(vue@3.4.37(typescript@5.5.4))
|
||||
'@vue/shared': 3.4.37
|
||||
'@vue/compiler-dom': 3.5.0
|
||||
'@vue/compiler-sfc': 3.5.0
|
||||
'@vue/runtime-dom': 3.5.0
|
||||
'@vue/server-renderer': 3.5.0(vue@3.5.0(typescript@5.5.4))
|
||||
'@vue/shared': 3.5.0
|
||||
optionalDependencies:
|
||||
typescript: 5.5.4
|
||||
|
||||
vueuc@0.4.58(vue@3.4.37(typescript@5.5.4)):
|
||||
vueuc@0.4.58(vue@3.5.0(typescript@5.5.4)):
|
||||
dependencies:
|
||||
'@css-render/vue3-ssr': 0.15.14(vue@3.4.37(typescript@5.5.4))
|
||||
'@css-render/vue3-ssr': 0.15.14(vue@3.5.0(typescript@5.5.4))
|
||||
'@juggle/resize-observer': 3.4.0
|
||||
css-render: 0.15.14
|
||||
evtd: 0.2.4
|
||||
seemly: 0.3.8
|
||||
vdirs: 0.1.8(vue@3.4.37(typescript@5.5.4))
|
||||
vooks: 0.2.12(vue@3.4.37(typescript@5.5.4))
|
||||
vue: 3.4.37(typescript@5.5.4)
|
||||
vdirs: 0.1.8(vue@3.5.0(typescript@5.5.4))
|
||||
vooks: 0.2.12(vue@3.5.0(typescript@5.5.4))
|
||||
vue: 3.5.0(typescript@5.5.4)
|
||||
|
||||
w3c-keyname@2.2.8: {}
|
||||
|
||||
|
||||
+18
-13
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { h, onMounted, reactive, ref, shallowRef } from 'vue'
|
||||
import { NIcon, NScrollbar, NDropdown, NQrCode } from 'naive-ui'
|
||||
import { NIcon, NScrollbar, NDropdown } from 'naive-ui'
|
||||
import {
|
||||
EyeOffOutline,
|
||||
EyeOutline,
|
||||
@@ -42,11 +42,11 @@ const rootDirectory = reactive(
|
||||
// component就是一个vue组件,类似于miaoDirectory
|
||||
const createView = (
|
||||
component: any,
|
||||
currentDirectorys?: VirtualDirectory[],
|
||||
currentDirectories?: VirtualDirectory[],
|
||||
currentFiles?: VirtualFile[],
|
||||
index?: number
|
||||
) => {
|
||||
views.push(component, currentDirectorys, currentFiles, index)
|
||||
views.push(component, currentDirectories, currentFiles, index)
|
||||
}
|
||||
|
||||
const deleteView = (index: number) => {
|
||||
@@ -59,7 +59,8 @@ const deleteView = (index: number) => {
|
||||
// 点击标题是隐藏其他标签或显示其他标签,还挺好用的
|
||||
const handleClickTitle = (index: number) => {
|
||||
let count = views._views.filter((v) => v.visible).length
|
||||
let op = !views._views[index].visible || count > 1 ? 'hideOthers' : 'showOthers'
|
||||
let op =
|
||||
!views._views[index].visible || count > 1 ? 'hideOthers' : 'showOthers'
|
||||
let _index = 0
|
||||
while (_index < views._views.length) {
|
||||
if (_index !== index) {
|
||||
@@ -88,11 +89,11 @@ const openMenuOption = [
|
||||
}
|
||||
]
|
||||
|
||||
const handleMenuSelect = (key: string) => {
|
||||
const handleMenuSelect = async (key: string) => {
|
||||
if (key === 'share') {
|
||||
showModal.value = true
|
||||
modalData.value = {
|
||||
component: NQrCode,
|
||||
component: (await import('naive-ui/es/qr-code')).NQrCode,
|
||||
props: {
|
||||
value: baseUrl,
|
||||
size: 300,
|
||||
@@ -117,7 +118,7 @@ onMounted(() => {
|
||||
<div
|
||||
class="tab"
|
||||
v-for="(view, index) of views._views"
|
||||
:key="view.uid">
|
||||
:key="view.id">
|
||||
<span
|
||||
class="tab-title"
|
||||
:title="view.title"
|
||||
@@ -147,7 +148,7 @@ onMounted(() => {
|
||||
@click="
|
||||
createView(
|
||||
view.component,
|
||||
view.currentDirectorys,
|
||||
view.currentDirectories,
|
||||
view.currentFiles,
|
||||
index + 1
|
||||
)
|
||||
@@ -183,13 +184,15 @@ onMounted(() => {
|
||||
class="view-container-item"
|
||||
v-for="(view, index) of views._views"
|
||||
v-show="view.visible"
|
||||
:key="view.uid">
|
||||
:key="view.id">
|
||||
<component
|
||||
:is="view.component"
|
||||
v-model:current-directorys="view.currentDirectorys"
|
||||
v-model:current-directories="view.currentDirectories"
|
||||
v-model:current-files="view.currentFiles"
|
||||
:id="view.uid"
|
||||
:id="view.id"
|
||||
:color="view.color"
|
||||
:view="view"
|
||||
:views="views"
|
||||
@exit="deleteView(index)"></component>
|
||||
</div>
|
||||
</transition-group>
|
||||
@@ -198,7 +201,7 @@ onMounted(() => {
|
||||
<!-- 模态框展示,用来显示分享二维码,设置菜单之类的东西 -->
|
||||
<MiaoMask v-model:show="showModal" @click="showModal = false">
|
||||
<component
|
||||
@click="(e:any) => e.stopPropagation()"
|
||||
@click="(e: any) => e.stopPropagation()"
|
||||
:is="modalData?.component"
|
||||
v-bind="modalData?.props"></component>
|
||||
</MiaoMask>
|
||||
@@ -246,6 +249,7 @@ $tag-width: 170px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
span {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
@@ -333,7 +337,7 @@ $tag-width: 170px;
|
||||
.view-container-item {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
min-width: 200px;
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
@@ -369,6 +373,7 @@ $tag-width: 170px;
|
||||
}
|
||||
|
||||
.tab-leave-active {
|
||||
opacity: 0;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
|
||||
+62
-20
@@ -1,13 +1,29 @@
|
||||
import useVirtualPages from '@/hooks/useVirtualPages'
|
||||
import VirtualDirectory, { VirtualFile } from './VirtualDirectory'
|
||||
import { ShallowRef, shallowRef } from 'vue'
|
||||
|
||||
type plugin = {
|
||||
export enum PluginGroup {
|
||||
default = 'default',
|
||||
mainMenu = 'mainMenu'
|
||||
}
|
||||
|
||||
type Plugin = {
|
||||
// 用于显示的名字
|
||||
name: string
|
||||
// 判断是否可以使用这个组件
|
||||
// 代表插件的icon
|
||||
icon?: ShallowRef<any>
|
||||
// 是否禁用插件
|
||||
disable: boolean
|
||||
// 插件所属的group,用于区分插件使用的场合
|
||||
group: PluginGroup[]
|
||||
// 判断在未禁用时是否可以使用这个组件
|
||||
// 使用组件即调用下面的func
|
||||
filter: (VDirectorys: VirtualDirectory[], VFiles: VirtualFile[]) => boolean
|
||||
func: (VDirectorys: VirtualDirectory[], VFiles: VirtualFile[]) => void
|
||||
filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean
|
||||
func: (
|
||||
VDirectories: VirtualDirectory[],
|
||||
VFiles: VirtualFile[],
|
||||
...args: any[]
|
||||
) => void
|
||||
}
|
||||
|
||||
export default class PluginCenter {
|
||||
@@ -15,47 +31,72 @@ export default class PluginCenter {
|
||||
this.pluginsMap = {}
|
||||
}
|
||||
pluginsMap: {
|
||||
[key: string]: plugin
|
||||
[key: string]: Plugin
|
||||
}
|
||||
|
||||
register(key: string, plugin: plugin) {
|
||||
register(key: string, plugin: Plugin) {
|
||||
this.pluginsMap[key] = plugin
|
||||
}
|
||||
|
||||
/**
|
||||
* 便捷地注册一个组件为插件,触发时直接用新页面打开
|
||||
*/
|
||||
registerComponent(
|
||||
key: string,
|
||||
name: string,
|
||||
getComponent: () => Promise<any>,
|
||||
registerComponent(option: {
|
||||
key: string
|
||||
name: string
|
||||
icon?: any
|
||||
getComponent: () => Promise<any>
|
||||
group?: PluginGroup[]
|
||||
filter: (
|
||||
VDirectorys: VirtualDirectory[],
|
||||
VDirectories: VirtualDirectory[],
|
||||
VFiles: VirtualFile[]
|
||||
) => boolean
|
||||
): void {
|
||||
}): void {
|
||||
const {
|
||||
key,
|
||||
name,
|
||||
getComponent,
|
||||
icon,
|
||||
filter,
|
||||
group = [PluginGroup.default]
|
||||
} = option
|
||||
let _component: any
|
||||
const views = useVirtualPages()
|
||||
this.register(key, {
|
||||
name,
|
||||
filter,
|
||||
icon: shallowRef(icon),
|
||||
group,
|
||||
disable: false,
|
||||
func: async (
|
||||
VDirectorys: VirtualDirectory[],
|
||||
VDirectories: VirtualDirectory[],
|
||||
VFiles: VirtualFile[]
|
||||
) => {
|
||||
if (filter(VDirectorys, VFiles) === false) {
|
||||
if (filter(VDirectories, VFiles) === false) {
|
||||
return
|
||||
}
|
||||
if (_component === undefined) _component = await getComponent()
|
||||
views.push(_component, VDirectorys, VFiles)
|
||||
views.push(_component, VDirectories, VFiles)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
getUsablePlugin(VDirectorys: VirtualDirectory[], VFiles: VirtualFile[]) {
|
||||
getUsablePlugin(
|
||||
VDirectories: VirtualDirectory[],
|
||||
VFiles: VirtualFile[],
|
||||
option?: {
|
||||
group?: PluginGroup[]
|
||||
}
|
||||
) {
|
||||
const { group = [PluginGroup.default] } = option ?? {}
|
||||
const usableList = []
|
||||
for (let key of Object.keys(this.pluginsMap)) {
|
||||
if (this.pluginsMap[key].filter(VDirectorys, VFiles)) {
|
||||
const _plugin = this.pluginsMap[key]
|
||||
if (
|
||||
!_plugin.disable &&
|
||||
_plugin.group.filter((v) => group.includes(v)).length > 0 &&
|
||||
_plugin.filter(VDirectories, VFiles)
|
||||
) {
|
||||
usableList.push(key)
|
||||
}
|
||||
}
|
||||
@@ -67,9 +108,10 @@ export default class PluginCenter {
|
||||
|
||||
usePlugin(
|
||||
key: string,
|
||||
VDirectorys: VirtualDirectory[],
|
||||
VFiles: VirtualFile[]
|
||||
VDirectories?: VirtualDirectory[],
|
||||
VFiles?: VirtualFile[],
|
||||
...args: any[]
|
||||
) {
|
||||
this.pluginsMap[key].func(VDirectorys, VFiles)
|
||||
this.pluginsMap[key].func(VDirectories ?? [], VFiles ?? [], ...args)
|
||||
}
|
||||
}
|
||||
@@ -13,14 +13,14 @@ export class VirtualFile {
|
||||
this.stats = info.stats;
|
||||
this.parent = parent;
|
||||
this.type = "file";
|
||||
this.uid = generateId();
|
||||
this.id = generateId();
|
||||
}
|
||||
name: string;
|
||||
type: "file";
|
||||
size: number;
|
||||
stats: stats;
|
||||
parent: VirtualDirectory;
|
||||
uid: number;
|
||||
id: number;
|
||||
get path() {
|
||||
return `${this.parent.path}${this.name}`;
|
||||
}
|
||||
@@ -36,14 +36,14 @@ class VirtualDirectory {
|
||||
this.type = "directory";
|
||||
this.stats = info.stats;
|
||||
this.parent = parent ?? undefined;
|
||||
this.uid = generateId();
|
||||
this.id = generateId();
|
||||
}
|
||||
// 文件夹名
|
||||
name: string;
|
||||
// 子文件
|
||||
files?: VirtualFile[];
|
||||
// 子目录
|
||||
directorys?: VirtualDirectory[];
|
||||
directories?: VirtualDirectory[];
|
||||
// 没啥意义,标注一下就是了
|
||||
type: "directory";
|
||||
// 文件夹创建时间等杂项属性
|
||||
@@ -51,7 +51,7 @@ class VirtualDirectory {
|
||||
// 父文件夹
|
||||
parent?: VirtualDirectory;
|
||||
|
||||
uid: number;
|
||||
id: number;
|
||||
|
||||
/**
|
||||
* 获取相对于根目录的路径的层数
|
||||
@@ -98,9 +98,9 @@ class VirtualDirectory {
|
||||
|
||||
updateContent(content: (file | directory)[]) {
|
||||
this.files = this.files ?? [];
|
||||
this.directorys = this.directorys ?? [];
|
||||
this.directories = this.directories ?? [];
|
||||
const fileNames: string[] = this.files.map(v => v.name);
|
||||
const dirNames: string[] = this.directorys.map(v => v.name);
|
||||
const dirNames: string[] = this.directories.map(v => v.name);
|
||||
const itemNames: string[] = content.map(v => v.name);
|
||||
// 删去远程端已不存在的文件与文件夹
|
||||
const _delete = (target: (VirtualFile | VirtualDirectory)[]) => {
|
||||
@@ -114,7 +114,7 @@ class VirtualDirectory {
|
||||
}
|
||||
};
|
||||
_delete(this.files);
|
||||
_delete(this.directorys);
|
||||
_delete(this.directories);
|
||||
// 加入新的文件与文件夹
|
||||
for (let item of content) {
|
||||
if (item.type === "file") {
|
||||
@@ -123,7 +123,7 @@ class VirtualDirectory {
|
||||
}
|
||||
} else if (item.type === "directory") {
|
||||
if (!dirNames.includes(item.name)) {
|
||||
this.directorys.push(new VirtualDirectory(item, this));
|
||||
this.directories.push(new VirtualDirectory(item, this));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -131,7 +131,7 @@ class VirtualDirectory {
|
||||
|
||||
hasChild(item: VirtualDirectory | VirtualFile): boolean {
|
||||
if (item.type === "directory") {
|
||||
return this.directorys?.includes(item) ?? false;
|
||||
return this.directories?.includes(item) ?? false;
|
||||
} else {
|
||||
return this.files?.includes(item) ?? false;
|
||||
}
|
||||
|
||||
+10
-10
@@ -13,12 +13,12 @@ const getRandomWebSafeColor = (() => {
|
||||
})();
|
||||
|
||||
export default class VirtualPage {
|
||||
constructor(component: any, initObjects?: { directorys?: VirtualDirectory[]; files?: VirtualFile[] }) {
|
||||
constructor(component: any, initObjects?: { directories?: VirtualDirectory[]; files?: VirtualFile[] }) {
|
||||
this.component = shallowRef(component);
|
||||
this.currentDirectorys = initObjects?.directorys ?? [];
|
||||
this.currentDirectories = initObjects?.directories ?? [];
|
||||
this.currentFiles = initObjects?.files ?? [];
|
||||
this.visible = true;
|
||||
this.uid = generateId();
|
||||
this.id = generateId();
|
||||
this.refreshKey = Math.random();
|
||||
this.color = getRandomWebSafeColor();
|
||||
}
|
||||
@@ -27,11 +27,11 @@ export default class VirtualPage {
|
||||
// 是否可见
|
||||
visible: boolean;
|
||||
// 当前正在使用的文件夹
|
||||
currentDirectorys: VirtualDirectory[];
|
||||
currentDirectories: VirtualDirectory[];
|
||||
// 当前正在使用的文件
|
||||
currentFiles: VirtualFile[];
|
||||
// 区分每一个页面的唯一id
|
||||
uid: number;
|
||||
id: number;
|
||||
// 当refreshKey改变时需要刷新页面,目前还没接入刷新
|
||||
refreshKey: number;
|
||||
// 为了区分,每个虚拟页面都会分配一个color,这个color会体现在tab上
|
||||
@@ -43,7 +43,7 @@ export default class VirtualPage {
|
||||
if (this._title) {
|
||||
return this._title;
|
||||
}
|
||||
return this?.currentDirectorys[0]?.name ?? this?.currentFiles[0]?.name ?? "未命名标签";
|
||||
return this?.currentDirectories[0]?.name ?? this?.currentFiles[0]?.name ?? "未命名标签";
|
||||
}
|
||||
|
||||
setTitle(title: string) {
|
||||
@@ -79,7 +79,7 @@ export class VirtualPages {
|
||||
*/
|
||||
getIndex(id: number) {
|
||||
for (let i in this._views) {
|
||||
if (this._views[i].uid === id) {
|
||||
if (this._views[i].id === id) {
|
||||
return parseInt(i);
|
||||
}
|
||||
}
|
||||
@@ -91,7 +91,7 @@ export class VirtualPages {
|
||||
*/
|
||||
getView(id: number) {
|
||||
for (let v of this._views) {
|
||||
if (v.uid === id) {
|
||||
if (v.id === id) {
|
||||
return v;
|
||||
}
|
||||
}
|
||||
@@ -101,14 +101,14 @@ export class VirtualPages {
|
||||
/**
|
||||
* 推入一个新的页面
|
||||
*/
|
||||
push(component: any, currentDirectorys?: VirtualDirectory[], currentFiles?: VirtualFile[], index?: number) {
|
||||
push(component: any, currentDirectories?: VirtualDirectory[], currentFiles?: VirtualFile[], index?: number) {
|
||||
index ?? (index = this.length);
|
||||
this._views.splice(
|
||||
index,
|
||||
0,
|
||||
reactive<VirtualPage>(
|
||||
new VirtualPage(component, {
|
||||
directorys: [...(currentDirectorys ?? [])],
|
||||
directories: [...(currentDirectories ?? [])],
|
||||
files: [...(currentFiles ?? [])]
|
||||
})
|
||||
)
|
||||
|
||||
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div class="miao-directory-container-bottom" :style="{
|
||||
backgroundColor:
|
||||
index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)'
|
||||
}">
|
||||
<div class="container-bottom-item">
|
||||
<div class="container-bottom-item-icon">
|
||||
<add-outline :style="{
|
||||
color:
|
||||
index % 2 === 0
|
||||
? 'rgb(0 0 0)'
|
||||
: 'rgb(255 255 255)'
|
||||
}" @click="emit('add-new-item')" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-bottom-item">
|
||||
<div class="container-bottom-item-icon">
|
||||
<cloud-upload-outline :style="{
|
||||
color:
|
||||
index % 2 === 0
|
||||
? 'rgb(0 0 0)'
|
||||
: 'rgb(255 255 255)'
|
||||
}" @click="emit('pick-files-upload')" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { AddOutline, CloudUploadOutline } from '@vicons/ionicons5'
|
||||
defineProps<{
|
||||
index: number
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'add-new-item': []
|
||||
'pick-files-upload': []
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.miao-directory-container-bottom {
|
||||
height: 60px;
|
||||
background-color: bisque;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
box-shadow: 0px 1px 10px #888888;
|
||||
z-index: 2;
|
||||
|
||||
.container-bottom-item {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.container-bottom-item-icon {
|
||||
svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
transition: width 0.3s ease;
|
||||
transition: height 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,31 +1,24 @@
|
||||
<template>
|
||||
<div class="miao-item" draggable="true" ref="itemRef" @dragstart="handleDragStart">
|
||||
<miaoContextMenu :options="dropDownOptions" :touch-time-out="500" @select="handleDropdownSelect">
|
||||
<miaoContextMenu :options="dropDownOptions ?? []" :touch-time-out="500" @select="handleDropdownSelect">
|
||||
<div class="item-main" :class="selected ? 'item-main-selected' : ''" ref="mainRef">
|
||||
<div class="item-main-front" :style="{ backgroundColor: props.color }"></div>
|
||||
<Icon class="item-main-icon" v-show="clientWidth > 250"></Icon>
|
||||
<div class="item-main-info">
|
||||
<div class="item-main-info-name">
|
||||
<Icon class="item-main-info-name-icon" v-if="clientWidth <= 250"></Icon>
|
||||
<n-ellipsis style="max-width: 80%;">{{ name }}</n-ellipsis>
|
||||
<n-ellipsis :style="{ maxWidth: clientWidth > 250 ? '80%' : '75%' }">{{ name }}</n-ellipsis>
|
||||
</div>
|
||||
<div class="item-main-info-date" v-if="time">
|
||||
{{ time }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 菜单现在通过右键/长按呼出 -->
|
||||
<!-- <n-dropdown trigger="click" :options="dropDownOptions" @select="handleDropdownSelect">
|
||||
<div class="item-main-option" @click="(e) => e.stopPropagation()">
|
||||
<EllipsisVertical class="item-main-option-icon" />
|
||||
</div>
|
||||
</n-dropdown> -->
|
||||
</div>
|
||||
</miaoContextMenu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
|
||||
import miaoContextMenu from '../miaoContextMenu.vue'
|
||||
import {
|
||||
DocumentText,
|
||||
@@ -39,33 +32,37 @@ import {
|
||||
PlayCircle,
|
||||
Disc
|
||||
} from '@vicons/ionicons5'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
import dateFormatter from '@/hooks/dateFormatter'
|
||||
import { NEllipsis } from 'naive-ui'
|
||||
import usePluginCenter from '@/hooks/usePluginCenter'
|
||||
import { DropdownOption } from 'naive-ui/es/dropdown';
|
||||
// import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
|
||||
|
||||
// const miaoFetchApi = useMiaoFetchApi()
|
||||
|
||||
const props = defineProps<{
|
||||
item: VirtualDirectory | VirtualFile
|
||||
item: {
|
||||
name: string,
|
||||
type: 'directory' | 'file'
|
||||
stats: {
|
||||
mtimeMs: number
|
||||
}
|
||||
}
|
||||
name?: string
|
||||
color: string
|
||||
selectedItem: (VirtualDirectory | VirtualFile)[]
|
||||
dropDownOptions?: DropdownOption[]
|
||||
selected?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
download: []
|
||||
delete: []
|
||||
rename: []
|
||||
dragStart: [event: DragEvent, item: VirtualDirectory | VirtualFile]
|
||||
dragStart: [event: DragEvent]
|
||||
onSelected: []
|
||||
plugin: [plugin: string]
|
||||
}>()
|
||||
|
||||
const pluginCenter = usePluginCenter()
|
||||
|
||||
const itemType = ref<'file' | 'directory'>(props.item.type)
|
||||
|
||||
const mainRef = ref<HTMLDivElement>()
|
||||
|
||||
// 使用ResizeObserver实现
|
||||
@@ -73,9 +70,11 @@ const clientWidth = ref<number>(666)
|
||||
|
||||
const name = props.name ?? props.item.name
|
||||
|
||||
const selected = computed(() => {
|
||||
return props.selectedItem.includes(props.item)
|
||||
})
|
||||
const observer = new ResizeObserver(entries => {
|
||||
for (let entry of entries) {
|
||||
clientWidth.value = entry.contentRect.width;
|
||||
}
|
||||
});
|
||||
|
||||
const time = computed(() => {
|
||||
return dateFormatter(
|
||||
@@ -84,60 +83,8 @@ const time = computed(() => {
|
||||
)
|
||||
})
|
||||
|
||||
const dropDownOptions = computed(() => {
|
||||
const items = [...props.selectedItem]
|
||||
if (!selected.value) {
|
||||
items.push(props.item)
|
||||
}
|
||||
const vDirs = items.filter(v => v.type === 'directory')
|
||||
const vFiles = items.filter(v => v.type === 'file')
|
||||
const options = [
|
||||
{
|
||||
label: '重命名',
|
||||
key: 'rename'
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
key: 'delete'
|
||||
},
|
||||
]
|
||||
if (itemType.value === 'file') {
|
||||
options.push(
|
||||
...[
|
||||
{
|
||||
label: '下载',
|
||||
key: 'download'
|
||||
}
|
||||
]
|
||||
)
|
||||
}
|
||||
if (selected.value === false) {
|
||||
options.push(
|
||||
...[
|
||||
{
|
||||
label: '多选:选择',
|
||||
key: 'select'
|
||||
}
|
||||
]
|
||||
)
|
||||
} else {
|
||||
options.push(
|
||||
...[
|
||||
{
|
||||
label: '多选:取消',
|
||||
key: 'select'
|
||||
}
|
||||
]
|
||||
)
|
||||
}
|
||||
options.push(...pluginCenter.getUsablePlugin(vDirs, vFiles).map(v => ({
|
||||
label: `插件:${v.name}`,
|
||||
key: `plugin:${v.key}`
|
||||
})))
|
||||
return options
|
||||
})
|
||||
|
||||
// 是不是可以直接在这里面实现?
|
||||
// 应该将所有事件emit出去才对
|
||||
const handleDropdownSelect = (key: string) => {
|
||||
if (key === 'rename') {
|
||||
emit('rename')
|
||||
@@ -148,14 +95,8 @@ const handleDropdownSelect = (key: string) => {
|
||||
} else if (key === 'select') {
|
||||
emit('onSelected')
|
||||
} else if (key.startsWith('plugin:')) {
|
||||
const items = [...props.selectedItem]
|
||||
if (!selected.value) {
|
||||
items.push(props.item)
|
||||
}
|
||||
const vDirs = items.filter(v => v.type === 'directory')
|
||||
const vFiles = items.filter(v => v.type === 'file')
|
||||
const plugin = key.split(':')[1]
|
||||
pluginCenter.usePlugin(plugin, vDirs, vFiles)
|
||||
emit('plugin', plugin)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -177,22 +118,22 @@ const Icon = computed(() => {
|
||||
return Disc
|
||||
} else if (
|
||||
[
|
||||
'.xbm',
|
||||
'.tif',
|
||||
'xbm',
|
||||
'tif',
|
||||
'pjp',
|
||||
'.svgz',
|
||||
'svgz',
|
||||
'jpg',
|
||||
'jpeg',
|
||||
'ico',
|
||||
'tiff',
|
||||
'.gif',
|
||||
'gif',
|
||||
'svg',
|
||||
'.jfif',
|
||||
'.webp',
|
||||
'.png',
|
||||
'.bmp',
|
||||
'jfif',
|
||||
'webp',
|
||||
'png',
|
||||
'bmp',
|
||||
'pjpeg',
|
||||
'.avif'
|
||||
'avif'
|
||||
].includes(aft)
|
||||
) {
|
||||
return Image
|
||||
@@ -217,27 +158,28 @@ const Icon = computed(() => {
|
||||
const itemRef = ref()
|
||||
|
||||
const handleDragStart = (event: DragEvent) => {
|
||||
emit('dragStart', event, props.item)
|
||||
emit('dragStart', event)
|
||||
// dataBus.set('dragData', [props.item])
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const observer = new ResizeObserver(entries => {
|
||||
for (let entry of entries) {
|
||||
clientWidth.value = entry.contentRect.width;
|
||||
}
|
||||
});
|
||||
if (mainRef.value) {
|
||||
observer.observe(mainRef.value);
|
||||
}
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (mainRef.value) {
|
||||
observer.unobserve(mainRef.value);
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.miao-item {
|
||||
cursor: pointer;
|
||||
width: calc(100% - 20px);
|
||||
min-width: 170px;
|
||||
// min-width: 170px;
|
||||
// aspect-ratio: 66/9;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
@@ -249,7 +191,6 @@ onMounted(() => {
|
||||
.item-main {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-width: 200px;
|
||||
height: 95%;
|
||||
background-color: rgb(255, 255, 255);
|
||||
border-radius: 7px;
|
||||
@@ -276,7 +217,7 @@ onMounted(() => {
|
||||
.item-main-info {
|
||||
margin-left: 10px;
|
||||
height: 100%;
|
||||
width: calc( 100% - 10px );
|
||||
width: calc(100% - 10px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
@@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<div
|
||||
class="miao-directory-container-items"
|
||||
:style="{
|
||||
backgroundColor: index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
|
||||
}">
|
||||
<n-scrollbar ref="scrollbarRef" style="max-height: 100%">
|
||||
<miao-lazy-div
|
||||
v-for="dir in showData_directory"
|
||||
:key="dir.id"
|
||||
min-height="50px">
|
||||
<miaoDirectoryItem
|
||||
:item="dir"
|
||||
:color="props.color"
|
||||
:selected="selectedItem.includes(dir)"
|
||||
:drop-down-options="itemDropDownOptions(dir).value"
|
||||
@delete="handleItemDelete(dir)"
|
||||
@plugin="(p) => handleItemUsePlugin(dir)(p)"
|
||||
@click="handleItemClick(dir)"
|
||||
@drag-start="(e) => handleItemDragStart(dir)(e)"
|
||||
@rename="handleItemRename(dir)"
|
||||
@on-selected="handleItemSelect(dir)" />
|
||||
</miao-lazy-div>
|
||||
<miao-lazy-div
|
||||
v-for="file in showData_files"
|
||||
:key="file.id"
|
||||
min-height="50px">
|
||||
<miaoDirectoryItem
|
||||
:item="file"
|
||||
:color="props.color"
|
||||
:selected="selectedItem.includes(file)"
|
||||
:drop-down-options="itemDropDownOptions(file).value"
|
||||
@click="handleItemClick(file)"
|
||||
@download="handleItemDownload(file)"
|
||||
@delete="handleItemDelete(file)"
|
||||
@drag-start="(e) => handleItemDragStart(file)(e)"
|
||||
@rename="handleItemRename(file)"
|
||||
@plugin="(p) => handleItemUsePlugin(file)(p)"
|
||||
@on-selected="handleItemSelect(file)" />
|
||||
</miao-lazy-div>
|
||||
</n-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { NScrollbar } from 'naive-ui'
|
||||
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
|
||||
import miaoDirectoryItem from '@/components/miaoDirectory/miaoDirectoryItem.vue'
|
||||
import miaoLazyDiv from '@/components/miaoLazyDiv.vue'
|
||||
import { computed, ref } from 'vue'
|
||||
import usePluginCenter from '@/hooks/usePluginCenter'
|
||||
import { renderIcon } from '@/hooks/miaoTools'
|
||||
|
||||
const pluginCenter = usePluginCenter()
|
||||
|
||||
const props = defineProps<{
|
||||
color: string
|
||||
index: number
|
||||
showData_directory: VirtualDirectory[]
|
||||
showData_files: VirtualFile[]
|
||||
selectedItem: (VirtualFile | VirtualDirectory)[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'item-click': [item: VirtualDirectory | VirtualFile]
|
||||
'item-download': [item: VirtualFile]
|
||||
'item-delete': [item: VirtualDirectory | VirtualFile]
|
||||
'item-drag-start': [_event: DragEvent, item: VirtualDirectory | VirtualFile]
|
||||
'item-rename': [item: VirtualDirectory | VirtualFile]
|
||||
'item-select': [item: VirtualDirectory | VirtualFile]
|
||||
}>()
|
||||
|
||||
const scrollbarRef = ref()
|
||||
|
||||
const itemDropDownOptions = (item: VirtualDirectory | VirtualFile) =>
|
||||
computed(() => {
|
||||
const items = [...props.selectedItem]
|
||||
const selected = props.selectedItem.includes(item)
|
||||
if (!selected) {
|
||||
items.push(item)
|
||||
}
|
||||
const vDirs = items.filter((v) => v.type === 'directory')
|
||||
const vFiles = items.filter((v) => v.type === 'file')
|
||||
const options = [
|
||||
{
|
||||
label: '重命名',
|
||||
key: 'rename'
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
key: 'delete'
|
||||
}
|
||||
]
|
||||
if (item.type === 'file') {
|
||||
options.push(
|
||||
...[
|
||||
{
|
||||
label: '下载',
|
||||
key: 'download'
|
||||
}
|
||||
]
|
||||
)
|
||||
}
|
||||
if (selected === false) {
|
||||
options.push(
|
||||
...[
|
||||
{
|
||||
label: '多选:选择',
|
||||
key: 'select'
|
||||
}
|
||||
]
|
||||
)
|
||||
} else {
|
||||
options.push(
|
||||
...[
|
||||
{
|
||||
label: '多选:取消',
|
||||
key: 'select'
|
||||
}
|
||||
]
|
||||
)
|
||||
}
|
||||
options.push(
|
||||
...pluginCenter.getUsablePlugin(vDirs, vFiles).map((v) => ({
|
||||
label: `插件:${v.name}`,
|
||||
key: `plugin:${v.key}`,
|
||||
icon: v.icon ? renderIcon(v.icon) : undefined
|
||||
}))
|
||||
)
|
||||
return options
|
||||
})
|
||||
|
||||
const handleItemClick = (item: VirtualDirectory | VirtualFile) => {
|
||||
emit('item-click', item)
|
||||
}
|
||||
|
||||
const handleItemDownload = (item: VirtualFile) => {
|
||||
emit('item-download', item)
|
||||
}
|
||||
|
||||
const handleItemDelete = (item: VirtualDirectory | VirtualFile) => {
|
||||
emit('item-delete', item)
|
||||
}
|
||||
|
||||
const handleItemDragStart =
|
||||
(item: VirtualDirectory | VirtualFile) => (_event: DragEvent) => {
|
||||
emit('item-drag-start', _event, item)
|
||||
}
|
||||
|
||||
const handleItemRename = (item: VirtualDirectory | VirtualFile) => {
|
||||
emit('item-rename', item)
|
||||
}
|
||||
|
||||
const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
|
||||
emit('item-select', item)
|
||||
}
|
||||
|
||||
const handleItemUsePlugin =
|
||||
(item: VirtualDirectory | VirtualFile) => (plugin: string) => {
|
||||
const items = [...props.selectedItem]
|
||||
const selected = props.selectedItem.includes(item)
|
||||
if (!selected) {
|
||||
items.push(item)
|
||||
}
|
||||
const vDirs = items.filter((v) => v.type === 'directory')
|
||||
const vFiles = items.filter((v) => v.type === 'file')
|
||||
pluginCenter.usePlugin(plugin, vDirs, vFiles)
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
scrollTo: (...args: any) => scrollbarRef.value.scrollTo(...args)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.miao-directory-container-items {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<div class="miao-directory-container-top" :style="{
|
||||
backgroundColor:
|
||||
index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
|
||||
}">
|
||||
<div class="container-top-colorfulBar" :style="{ backgroundColor: props.color }"></div>
|
||||
<div class="container-top-breadcrumb">
|
||||
<div class="container-top-breadcrumb-container">
|
||||
<n-breadcrumb separator=">" style="margin-left: 5px">
|
||||
<n-breadcrumb-item :clickable="false">
|
||||
<n-icon size="18">
|
||||
<CloudOutline />
|
||||
</n-icon>
|
||||
</n-breadcrumb-item>
|
||||
<n-breadcrumb-item v-for="dir in currentDirectory?.getParents"
|
||||
@click="handleClickBreadcrumbItem(dir)" :clickable="true">
|
||||
<div>{{ dir.name }}</div>
|
||||
</n-breadcrumb-item>
|
||||
</n-breadcrumb>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-top-tools">
|
||||
<n-icon class="container-top-tools-item" size="15" @click="$emit('back')">
|
||||
<ChevronBackOutline />
|
||||
</n-icon>
|
||||
<n-icon class="container-top-tools-item" size="14" @click="$emit('reload')">
|
||||
<ReloadOutline class="container-top-tools-item-reload" />
|
||||
</n-icon>
|
||||
<n-dropdown trigger="click" :options="openMenuOption" @select="(key: string) => emit('menuSelect', key)">
|
||||
<n-icon class="container-top-tools-item" size="14">
|
||||
<EllipsisVertical />
|
||||
</n-icon>
|
||||
</n-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { NBreadcrumbItem, NBreadcrumb, NIcon, NDropdown } from 'naive-ui'
|
||||
import {
|
||||
CloudOutline,
|
||||
ChevronBackOutline,
|
||||
ReloadOutline,
|
||||
EllipsisVertical,
|
||||
} from '@vicons/ionicons5'
|
||||
import VirtualDirectory from '@/class/VirtualDirectory'
|
||||
|
||||
const props = defineProps<{
|
||||
color: string;
|
||||
index: number
|
||||
currentDirectory: VirtualDirectory | undefined;
|
||||
openMenuOption: {
|
||||
key: string,
|
||||
label: string,
|
||||
[key: string]: any,
|
||||
}[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
back: [],
|
||||
reload: [],
|
||||
menuSelect: [key: string]
|
||||
'set-current-directory': [virtualDirectory: VirtualDirectory]
|
||||
}>()
|
||||
|
||||
const handleClickBreadcrumbItem = (virtualDirectory: VirtualDirectory) => {
|
||||
emit('set-current-directory', virtualDirectory)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.miao-directory-container-top {
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
background-color: #f1f1f1;
|
||||
|
||||
.container-top-colorfulBar {
|
||||
height: 70%;
|
||||
width: 5px;
|
||||
margin-left: 10px;
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.container-top-breadcrumb {
|
||||
position: relative;
|
||||
height: 70%;
|
||||
width: calc(100% - 95px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
// overflow: hidden;
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
background-color: #ffffff;
|
||||
padding: 0 5px;
|
||||
border-radius: 0 3px 3px 0;
|
||||
|
||||
.container-top-breadcrumb-container {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
min-width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.container-top-tools {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
// width: 70px;
|
||||
padding: 0 5px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
.container-top-tools-item {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0 1px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #ffffff00;
|
||||
border-radius: 5px;
|
||||
transition: background-color 0.3s;
|
||||
cursor: pointer;
|
||||
|
||||
.container-top-tools-item-reload {
|
||||
transition: transform 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(128, 128, 128, 0.4);
|
||||
}
|
||||
|
||||
&:active .container-top-tools-item-reload {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,9 +1,5 @@
|
||||
<template>
|
||||
<div
|
||||
class="container"
|
||||
@dragover="handleDragOver"
|
||||
@dragleave="handleDragLeave"
|
||||
@drop="handleDrop">
|
||||
<div class="container" @dragover="handleDragOver" @dragleave="handleDragLeave" @drop="handleDrop">
|
||||
<slot></slot>
|
||||
<miao-mask v-model:show="showMask"></miao-mask>
|
||||
</div>
|
||||
@@ -63,8 +59,11 @@ const removeDirectory = async (files: File[]) => {
|
||||
}
|
||||
|
||||
const handleDragOver = async (event: DragEvent) => {
|
||||
showMask.value += 1
|
||||
event.preventDefault()
|
||||
if (showMask.value === 1) {
|
||||
return
|
||||
}
|
||||
showMask.value = 1
|
||||
}
|
||||
|
||||
const handleDragLeave = async () => {
|
||||
|
||||
@@ -0,0 +1,95 @@
|
||||
<!-- 只适合用于渲染过程较为复杂的组件,不然可能得不偿失
|
||||
这么泛用的组件,性能差点也能理解 -->
|
||||
<template>
|
||||
<div class="miao-lazy" ref="miaoLazyRoot" :style="!show ? { minHeight, minWidth } : {}">
|
||||
<slot v-if="show" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, onMounted, ref } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
disableLazy: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 仅在内容未加载时生效,用于占位
|
||||
minHeight: {
|
||||
type: String,
|
||||
default: 'none',
|
||||
},
|
||||
minWidth: {
|
||||
type: String,
|
||||
default: 'none',
|
||||
}
|
||||
})
|
||||
|
||||
const miaoLazyRoot = ref<HTMLDivElement>()
|
||||
|
||||
const show = ref<boolean>(props.disableLazy)
|
||||
|
||||
const isVisible = (dom: HTMLDivElement) => {
|
||||
const offset = dom.getBoundingClientRect().top
|
||||
return offset > 0 && offset < 2000
|
||||
}
|
||||
|
||||
const { showSlot, hideSlot, clearTimer } = (() => {
|
||||
let timer: any
|
||||
let timerInterval: any
|
||||
const clearTimer = () => {
|
||||
timer && clearTimeout(timer)
|
||||
timerInterval && clearInterval(timerInterval)
|
||||
timer = undefined
|
||||
timerInterval = undefined
|
||||
}
|
||||
const hideSlot = () => {
|
||||
clearTimer()
|
||||
show.value = false
|
||||
}
|
||||
const showSlot = () => {
|
||||
if (show.value === true) {
|
||||
return
|
||||
}
|
||||
clearTimer()
|
||||
// timer = setTimeout(() => {
|
||||
if (!miaoLazyRoot.value || isVisible(miaoLazyRoot.value) === false) {
|
||||
return
|
||||
}
|
||||
show.value = true
|
||||
timerInterval = setInterval(() => {
|
||||
if (show.value === false || miaoLazyRoot.value === undefined) {
|
||||
return
|
||||
}
|
||||
if (isVisible(miaoLazyRoot.value) === false) {
|
||||
hideSlot()
|
||||
}
|
||||
}, 1000)
|
||||
// })
|
||||
}
|
||||
return { showSlot, hideSlot, clearTimer }
|
||||
})()
|
||||
|
||||
onMounted(() => {
|
||||
if (show.value === false) {
|
||||
let options = {
|
||||
threshold: 0
|
||||
};
|
||||
|
||||
let observer: IntersectionObserver | undefined = new IntersectionObserver((entries) => {
|
||||
if (entries[0].isIntersecting) {
|
||||
showSlot()
|
||||
// miaoLazyRoot.value && observer?.unobserve(miaoLazyRoot.value)
|
||||
// observer = undefined
|
||||
} else {
|
||||
hideSlot()
|
||||
}
|
||||
}, options);
|
||||
miaoLazyRoot.value && observer.observe(miaoLazyRoot.value);
|
||||
}
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
clearTimer()
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<div class="miao-message-provider" ref="rootRef">
|
||||
<slot></slot>
|
||||
<transition-group name="message-fade" tag="div" class="miao-message-provider-container">
|
||||
<div class="miao-message" v-for="msg in messageList" :key="msg.id"
|
||||
:style="{ maxWidth: maxMessageWidth + 'px' }">
|
||||
<n-icon class="miao-message-item" size="18" :color="msg.iconColor">
|
||||
<component :is="msg.icon"></component>
|
||||
</n-icon>
|
||||
<div class="miao-message-item miao-message-item-content">{{ msg.content }}</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import generateId from '@/hooks/generateId';
|
||||
import { NIcon } from 'naive-ui';
|
||||
import { computed, onMounted, ref, shallowReactive } from 'vue';
|
||||
import { InformationCircle, CheckmarkCircle, CloseCircle } from '@vicons/ionicons5'
|
||||
|
||||
interface MessageOptions {
|
||||
type?: 'info' | 'success' | 'error'
|
||||
timeout?: number
|
||||
id?: number
|
||||
}
|
||||
|
||||
interface Message {
|
||||
icon: any,
|
||||
timer: any,
|
||||
iconColor: string,
|
||||
content: string,
|
||||
}
|
||||
|
||||
const iconMap = {
|
||||
'info': { icon: InformationCircle, color: 'blue' },
|
||||
'success': { icon: CheckmarkCircle, color: 'green' },
|
||||
'error': { icon: CloseCircle, color: 'red' },
|
||||
}
|
||||
|
||||
const messageMap = shallowReactive<Record<string, Message | undefined>>({})
|
||||
const rootRef = ref<HTMLDivElement>()
|
||||
const maxMessageWidth = ref<number>(-1)
|
||||
|
||||
const messageList = computed(() => {
|
||||
return Object.keys(messageMap).map(v => ({
|
||||
id: v,
|
||||
...messageMap[v],
|
||||
}))
|
||||
})
|
||||
const message = (content: string, options?: MessageOptions) => {
|
||||
let timer: any
|
||||
const { timeout = 0, type = 'info', id = generateId() } = options ?? {}
|
||||
if (timeout > 0) {
|
||||
messageMap[id]?.timer && clearTimeout(messageMap[id]?.timer)
|
||||
timer = setTimeout(() => {
|
||||
delete messageMap[id]
|
||||
}, timeout)
|
||||
}
|
||||
messageMap[id] = {
|
||||
icon: iconMap[type].icon,
|
||||
iconColor: iconMap[type].color,
|
||||
content,
|
||||
timer
|
||||
}
|
||||
return (newContent: string, newOptions?: MessageOptions) => {
|
||||
newOptions = newOptions ?? {}
|
||||
newOptions.id = id
|
||||
message(newContent, newOptions)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
// const set = message('test', { timeout: 5000 })
|
||||
// setTimeout(() => {
|
||||
// set('miao', { type: 'success' })
|
||||
// }, 1000);
|
||||
const observer = new ResizeObserver(entries => {
|
||||
for (let entry of entries) {
|
||||
maxMessageWidth.value = entry.contentRect.width * 0.8;
|
||||
}
|
||||
});
|
||||
if (rootRef.value) {
|
||||
observer.observe(rootRef.value);
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
defineExpose({ message });
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.miao-message-provider {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.miao-message-provider-container {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
left: 50%;
|
||||
top: 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow: visible;
|
||||
|
||||
.miao-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: max-content;
|
||||
background-color: rgb(249, 249, 249);
|
||||
padding: 5px 10px;
|
||||
background-color: rgb(255 255 255);
|
||||
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);
|
||||
border-radius: 5px;
|
||||
user-select: none;
|
||||
margin-top: 10px;
|
||||
|
||||
.miao-message-item {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.miao-message-item-content {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-fade-move,
|
||||
.message-fade-enter-active,
|
||||
.message-fade-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.message-fade-enter-from,
|
||||
.message-fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
|
||||
.message-fade-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,83 +1,102 @@
|
||||
<template>
|
||||
<miao-mask v-model:show="showMask">
|
||||
<n-card class="popup-card" :title="popupConfig?.title" size="medium">
|
||||
{{ popupConfig?.content }}
|
||||
<n-input class="popup-input" v-model:value="inputValue" type="text" v-bind="popupConfig?.inputProps"
|
||||
v-if="popupConfig?.inputProps" />
|
||||
<div class="popup-button-container">
|
||||
<n-button class="popup-button-container-button" v-for="option in popupConfig?.options" :key="option.label"
|
||||
:type="option.type" @click="_resolve && _resolve(option.key)">{{ option.label }}</n-button>
|
||||
</div>
|
||||
</n-card>
|
||||
</miao-mask>
|
||||
<miao-mask v-model:show="showMask">
|
||||
<n-card class="popup-card" :title="popupConfig?.title" size="medium">
|
||||
{{ popupConfig?.content }}
|
||||
<n-input
|
||||
class="popup-input"
|
||||
v-model:value="inputValue"
|
||||
type="text"
|
||||
v-bind="popupConfig?.inputProps"
|
||||
passively-activated
|
||||
autofocus
|
||||
v-if="popupConfig?.inputProps" />
|
||||
<div class="popup-button-container">
|
||||
<n-button
|
||||
class="popup-button-container-button"
|
||||
v-for="option in popupConfig?.options"
|
||||
:key="option.label"
|
||||
:type="option.type"
|
||||
@click="_resolve && _resolve(option.key)">
|
||||
{{ option.label }}
|
||||
</n-button>
|
||||
</div>
|
||||
</n-card>
|
||||
</miao-mask>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick } from "vue";
|
||||
import { NCard, NInput, NButton } from "naive-ui";
|
||||
import miaoMask from "./miaoMask.vue";
|
||||
import { InputProps } from "naive-ui";
|
||||
import { ref, nextTick } from 'vue'
|
||||
import { NCard, NInput, NButton } from 'naive-ui'
|
||||
import miaoMask from './miaoMask.vue'
|
||||
import { InputProps } from 'naive-ui'
|
||||
|
||||
const showMask = ref(false);
|
||||
const inputValue = ref<string>("");
|
||||
const showMask = ref(false)
|
||||
const inputValue = ref<string>('')
|
||||
const _resolve = ref()
|
||||
|
||||
type popupConfigType = {
|
||||
title: string
|
||||
content?: string
|
||||
inputValue?: string,
|
||||
inputProps?: InputProps
|
||||
options: {
|
||||
label: string
|
||||
key: unknown
|
||||
type: 'default' | 'tertiary' | 'primary' | 'success' | 'info' | 'warning' | 'error'
|
||||
}[]
|
||||
title: string
|
||||
content?: string
|
||||
inputValue?: string
|
||||
inputProps?: InputProps
|
||||
options: {
|
||||
label: string
|
||||
key: unknown
|
||||
type:
|
||||
| 'default'
|
||||
| 'tertiary'
|
||||
| 'primary'
|
||||
| 'success'
|
||||
| 'info'
|
||||
| 'warning'
|
||||
| 'error'
|
||||
}[]
|
||||
}
|
||||
|
||||
const popupConfig = ref<popupConfigType>()
|
||||
|
||||
const popup = async (config: popupConfigType) => {
|
||||
popupConfig.value = config
|
||||
inputValue.value = config.inputValue ?? ''
|
||||
showMask.value = true
|
||||
const key = await new Promise((resolve: (key: unknown) => unknown) => {
|
||||
_resolve.value = resolve
|
||||
})
|
||||
const text = inputValue.value
|
||||
showMask.value = false;
|
||||
nextTick(() => {
|
||||
inputValue.value = ''
|
||||
_resolve.value = undefined
|
||||
})
|
||||
return {
|
||||
text,
|
||||
key
|
||||
};
|
||||
};
|
||||
popupConfig.value = config
|
||||
inputValue.value = config.inputValue ?? ''
|
||||
showMask.value = true
|
||||
const key = await new Promise((resolve: (key: unknown) => unknown) => {
|
||||
_resolve.value = resolve
|
||||
})
|
||||
const text = inputValue.value
|
||||
showMask.value = false
|
||||
nextTick(() => {
|
||||
inputValue.value = ''
|
||||
_resolve.value = undefined
|
||||
})
|
||||
return {
|
||||
text,
|
||||
key
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ popup });
|
||||
defineExpose({ popup })
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.popup-card {
|
||||
width: 80%;
|
||||
width: 80%;
|
||||
|
||||
.popup-input {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.popup-button-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.popup-button-container-button {
|
||||
margin-top: 3px;
|
||||
&:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.popup-input {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.popup-button-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.popup-button-container-button {
|
||||
margin-top: 3px;
|
||||
&:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,4 +1,4 @@
|
||||
const idList: number[] = [];
|
||||
const idList: number[] = []
|
||||
|
||||
/**
|
||||
* 生成一个唯一的id
|
||||
@@ -6,11 +6,11 @@ const idList: number[] = [];
|
||||
* @returns {number}
|
||||
*/
|
||||
export default function generateId(length?: number) {
|
||||
length || (length = 16);
|
||||
let id;
|
||||
while (!id || idList.includes(id)) {
|
||||
id = Math.ceil(Math.random() * 10 ** 16);
|
||||
}
|
||||
idList.push(id)
|
||||
length || (length = 16)
|
||||
let id
|
||||
while (!id || idList.includes(id)) {
|
||||
id = Math.ceil(Math.random() * 10 ** 16)
|
||||
}
|
||||
idList.push(id)
|
||||
return id
|
||||
}
|
||||
+164
-98
@@ -1,101 +1,167 @@
|
||||
import MiaoDirectory from '@/views/miaoDirectory.vue'
|
||||
import usePluginCenter from './usePluginCenter'
|
||||
import MiaoDirectory from "@/views/miaoDirectory.vue";
|
||||
import usePluginCenter from "./usePluginCenter";
|
||||
import { DocumentText, FileTray, Image, LogoChrome, CodeOutline, PlayCircle } from "@vicons/ionicons5";
|
||||
import { PluginGroup } from "@/class/PluginCenter";
|
||||
|
||||
export default function init() {
|
||||
const pluginCenter = usePluginCenter()
|
||||
pluginCenter.registerComponent(
|
||||
'miaoDirectory',
|
||||
'文件夹',
|
||||
async () => MiaoDirectory,
|
||||
(vDirs, vFiles) => {
|
||||
if (vFiles.length) {
|
||||
return false
|
||||
}
|
||||
return vDirs.length === 1
|
||||
}
|
||||
)
|
||||
pluginCenter.registerComponent(
|
||||
'miaoVideoPlayer',
|
||||
'视频',
|
||||
async () => (await import('@/views/miaoVideoPlayer.vue')).default,
|
||||
(vDirs, vFiles) => {
|
||||
if (vDirs.length !== 0) {
|
||||
return false
|
||||
}
|
||||
if (vFiles.length === 0) {
|
||||
return false
|
||||
}
|
||||
for (let i of vFiles) {
|
||||
for (let s of ['mp4', 'm3u8', 'hls']) {
|
||||
if (i.name.endsWith(s)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
)
|
||||
pluginCenter.registerComponent(
|
||||
'miaoIframe',
|
||||
'框架',
|
||||
async () => (await import('@/views/miaoIframe.vue')).default,
|
||||
(vDirs, vFiles) => {
|
||||
if (vDirs.length !== 0) {
|
||||
return false
|
||||
}
|
||||
if (vFiles.length !== 1) {
|
||||
return false
|
||||
}
|
||||
return vFiles[0].name.endsWith('html')
|
||||
}
|
||||
)
|
||||
pluginCenter.registerComponent(
|
||||
'miaoPDF',
|
||||
'PDF浏览',
|
||||
async () => (await import('@/views/miaoPDF.vue')).default,
|
||||
(vDirs, vFiles) => {
|
||||
if (vDirs.length !== 0) {
|
||||
return false
|
||||
}
|
||||
if (vFiles.length !== 1) {
|
||||
return false
|
||||
}
|
||||
return vFiles[0].name.endsWith('pdf')
|
||||
}
|
||||
)
|
||||
pluginCenter.registerComponent(
|
||||
'miaoCodeMirror',
|
||||
'代码编辑',
|
||||
async () => (await import('@/views/miaoCodeMirror.vue')).default,
|
||||
(vDirs, vFiles) => {
|
||||
if (vDirs.length !== 0) {
|
||||
return false
|
||||
}
|
||||
if (vFiles.length !== 1) {
|
||||
return false
|
||||
}
|
||||
for (let end of [
|
||||
'js',
|
||||
'ts',
|
||||
'jsx',
|
||||
'tsx',
|
||||
'py',
|
||||
'html',
|
||||
'css',
|
||||
'scss',
|
||||
'go',
|
||||
'json',
|
||||
'md',
|
||||
'yaml',
|
||||
'txt',
|
||||
'xml',
|
||||
'vue',
|
||||
]) {
|
||||
if (vFiles[0].name.endsWith(end)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
)
|
||||
const pluginCenter = usePluginCenter();
|
||||
pluginCenter.registerComponent({
|
||||
key: "miaoDirectory",
|
||||
name: "文件夹",
|
||||
icon: FileTray,
|
||||
getComponent: async () => MiaoDirectory,
|
||||
filter: (vDirs, vFiles) => {
|
||||
if (vFiles.length) {
|
||||
return false;
|
||||
}
|
||||
return vDirs.length === 1;
|
||||
}
|
||||
});
|
||||
pluginCenter.registerComponent({
|
||||
key: "miaoVideoPlayer",
|
||||
name: "视频",
|
||||
icon: PlayCircle,
|
||||
getComponent: async () => (await import("@/views/miaoVideoPlayer.vue")).default,
|
||||
filter: (vDirs, vFiles) => {
|
||||
if (vDirs.length !== 0) {
|
||||
return false;
|
||||
}
|
||||
if (vFiles.length === 0) {
|
||||
return false;
|
||||
}
|
||||
for (let i of vFiles) {
|
||||
for (let s of ["mp4", "m3u8", "hls"]) {
|
||||
if (i.name.endsWith(s)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
pluginCenter.registerComponent({
|
||||
key: "miaoIframe",
|
||||
name: "框架",
|
||||
icon: LogoChrome,
|
||||
getComponent: async () => (await import("@/views/miaoIframe.vue")).default,
|
||||
filter: (vDirs, vFiles) => {
|
||||
if (vDirs.length !== 0) {
|
||||
return false;
|
||||
}
|
||||
if (vFiles.length !== 1) {
|
||||
return false;
|
||||
}
|
||||
return vFiles[0].name.endsWith("html");
|
||||
}
|
||||
});
|
||||
|
||||
pluginCenter.registerComponent({
|
||||
key: "miaoPDF",
|
||||
name: "PDF浏览",
|
||||
icon: DocumentText,
|
||||
getComponent: async () => (await import("@/views/miaoPDF.vue")).default,
|
||||
filter: (vDirs, vFiles) => {
|
||||
if (vDirs.length !== 0) {
|
||||
return false;
|
||||
}
|
||||
if (vFiles.length !== 1) {
|
||||
return false;
|
||||
}
|
||||
return vFiles[0].name.endsWith("pdf");
|
||||
}
|
||||
});
|
||||
|
||||
pluginCenter.registerComponent({
|
||||
key: "miaoCodeMirror",
|
||||
name: "代码编辑",
|
||||
icon: CodeOutline,
|
||||
getComponent: async () => (await import("@/views/miaoCodeMirror.vue")).default,
|
||||
filter: (vDirs, vFiles) => {
|
||||
if (vDirs.length !== 0) {
|
||||
return false;
|
||||
}
|
||||
if (vFiles.length !== 1) {
|
||||
return false;
|
||||
}
|
||||
for (let end of ["js", "ts", "jsx", "tsx", "py", "html", "css", "scss", "go", "json", "md", "yaml", "txt", "xml", "vue"]) {
|
||||
if (vFiles[0].name.endsWith(end)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
pluginCenter.registerComponent({
|
||||
key: "miaoImages",
|
||||
name: "图片浏览",
|
||||
icon: Image,
|
||||
getComponent: async () => (await import("@/views/miaoImages.vue")).default,
|
||||
filter: (vDirs, vFiles) => {
|
||||
if (vDirs.length === 0 && vFiles.length === 0) {
|
||||
return false;
|
||||
}
|
||||
if (vDirs.length) {
|
||||
return true;
|
||||
}
|
||||
for (let vf of vFiles)
|
||||
for (let end of ["xbm", "tif", "pjp", "svgz", "jpg", "jpeg", "ico", "tiff", "gif", "svg", "jfif", "webp", "png", ".bmp", "pjpeg", "avif"]) {
|
||||
if (vf.name.endsWith(end)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
pluginCenter.registerComponent({
|
||||
key: "miaoMarkdown",
|
||||
name: "markdown浏览",
|
||||
icon: DocumentText,
|
||||
getComponent: async () => (await import("@/views/miaoMarkdown.vue")).default,
|
||||
filter: (vDirs, vFiles) => {
|
||||
if (vDirs.length !== 0) {
|
||||
return false;
|
||||
}
|
||||
if (vFiles.length !== 1) {
|
||||
return false;
|
||||
}
|
||||
return vFiles[0].name.endsWith("md");
|
||||
}
|
||||
});
|
||||
|
||||
pluginCenter.register("test", {
|
||||
name: "测试导入",
|
||||
filter: (vDirs, vFiles) => {
|
||||
if (vDirs.length !== 0) {
|
||||
return false;
|
||||
}
|
||||
if (vFiles.length !== 1) {
|
||||
return false;
|
||||
}
|
||||
return vFiles[0].name.endsWith("js");
|
||||
},
|
||||
disable: true,
|
||||
group: [PluginGroup.default],
|
||||
func: async (__, vfs) => {
|
||||
const c = (await import(/* @vite-ignore */ vfs[0].url)).default;
|
||||
console.log(c);
|
||||
pluginCenter.registerComponent({
|
||||
key: `test-${Math.random()}`,
|
||||
name: `test-${Math.random()}`,
|
||||
icon: DocumentText,
|
||||
getComponent: async () => (await import(/* @vite-ignore */ vfs[0].url)).default,
|
||||
filter: (vDirs, vFiles) => {
|
||||
if (vDirs.length !== 0) {
|
||||
return false;
|
||||
}
|
||||
if (vFiles.length !== 1) {
|
||||
return false;
|
||||
}
|
||||
return vFiles[0].name.endsWith("html");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
+55
-43
@@ -1,47 +1,59 @@
|
||||
import { NIcon } from 'naive-ui'
|
||||
import { h } from 'vue'
|
||||
|
||||
export const filePicker = (() => {
|
||||
let _resolve: ((files: File[]) => void) | undefined;
|
||||
return (option?: { accept?: "string"; multiple: boolean }) => {
|
||||
if (_resolve) {
|
||||
_resolve([]);
|
||||
_resolve = undefined;
|
||||
}
|
||||
return new Promise<File[]>(resolve => {
|
||||
const inpEle = document.createElement("input");
|
||||
inpEle.id = `__file_${Math.ceil(Math.random() * 100000000)}`;
|
||||
inpEle.type = "file";
|
||||
inpEle.style.display = "none";
|
||||
_resolve = resolve;
|
||||
// 文件类型限制
|
||||
// inpEle.accept="image/*"
|
||||
option?.accept && (inpEle.accept = option?.accept);
|
||||
// 多选限制
|
||||
option?.multiple && (inpEle.multiple = option?.multiple);
|
||||
// inpEle.addEventListener("change", event => fn.call(inpEle, event, inpEle.files), { once: true });
|
||||
inpEle.addEventListener(
|
||||
"change",
|
||||
() => {
|
||||
if (!inpEle.files) {
|
||||
return;
|
||||
}
|
||||
const files: File[] = [];
|
||||
let i = 0;
|
||||
while (i < inpEle.files?.length) {
|
||||
const _file = inpEle?.files?.item(i);
|
||||
if (_file !== null) {
|
||||
files.push(_file);
|
||||
}
|
||||
i += 1;
|
||||
}
|
||||
resolve(files);
|
||||
let _resolve: ((files: File[]) => void) | undefined
|
||||
return (option?: { accept?: 'string'; multiple: boolean }) => {
|
||||
if (_resolve) {
|
||||
_resolve([])
|
||||
_resolve = undefined
|
||||
}
|
||||
return new Promise<File[]>((resolve) => {
|
||||
const inpEle = document.createElement('input')
|
||||
inpEle.id = `__file_${Math.ceil(Math.random() * 100000000)}`
|
||||
inpEle.type = 'file'
|
||||
inpEle.style.display = 'none'
|
||||
_resolve = resolve
|
||||
// 文件类型限制
|
||||
// inpEle.accept="image/*"
|
||||
option?.accept && (inpEle.accept = option?.accept)
|
||||
// 多选限制
|
||||
option?.multiple && (inpEle.multiple = option?.multiple)
|
||||
// inpEle.addEventListener("change", event => fn.call(inpEle, event, inpEle.files), { once: true });
|
||||
inpEle.addEventListener(
|
||||
'change',
|
||||
() => {
|
||||
if (!inpEle.files) {
|
||||
return
|
||||
}
|
||||
const files: File[] = []
|
||||
let i = 0
|
||||
while (i < inpEle.files?.length) {
|
||||
const _file = inpEle?.files?.item(i)
|
||||
if (_file !== null) {
|
||||
files.push(_file)
|
||||
}
|
||||
i += 1
|
||||
}
|
||||
resolve(files)
|
||||
_resolve = undefined
|
||||
},
|
||||
{ once: true }
|
||||
);
|
||||
inpEle.click();
|
||||
});
|
||||
};
|
||||
})();
|
||||
},
|
||||
{ once: true }
|
||||
)
|
||||
inpEle.click()
|
||||
})
|
||||
}
|
||||
})()
|
||||
|
||||
export const renderIcon = (icon: any) => {
|
||||
return () => {
|
||||
return h(NIcon, null, {
|
||||
default: () => h(icon)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
filePicker
|
||||
};
|
||||
filePicker,
|
||||
renderIcon
|
||||
}
|
||||
@@ -3,7 +3,7 @@ import { Reactive, reactive } from "vue"
|
||||
|
||||
let views: Reactive<VirtualPages>
|
||||
|
||||
export default function useViretualPages(){
|
||||
export default function useVirtualPages(){
|
||||
if(views === undefined) {
|
||||
// views = reactive<VirtualPage[]>([])
|
||||
views = reactive(new VirtualPages())
|
||||
|
||||
@@ -1,16 +1,21 @@
|
||||
<template>
|
||||
<div class="codemirror-container" ref="rootRef" :class="`codemirror-container-${theme}`">
|
||||
<div class="codemirror-container-top">
|
||||
<div class="codemirror-container-btn codemirror-container-btn-save" @click="handleSave">保存</div>
|
||||
<div class="codemirror-container-btn codemirror-container-btn-save" @click="handleReset">恢复到上次保存</div>
|
||||
<miao-message-provider ref="miaoMessage">
|
||||
<div class="codemirror-container" ref="rootRef" :class="`codemirror-container-${theme}`">
|
||||
<div class="codemirror-container-top">
|
||||
<div class="codemirror-container-btn codemirror-container-btn-save" @click="handleSave">保存</div>
|
||||
<div class="codemirror-container-btn codemirror-container-btn-save" @click="handleReset">恢复到上次保存</div>
|
||||
</div>
|
||||
<div class="codemirror-container-main">
|
||||
<NScrollbar style="max-height: calc( 100% );">
|
||||
<codemirror v-model="codeData" :extensions="extensions" />
|
||||
</NScrollbar>
|
||||
</div>
|
||||
</div>
|
||||
<NScrollbar>
|
||||
<codemirror v-model="codeData" :extensions="extensions" :style="{ height: '100%' }" />
|
||||
</NScrollbar>
|
||||
</div>
|
||||
</miao-message-provider>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import miaoMessageProvider from '@/components/miaoMessageProvider.vue'
|
||||
import { VirtualFile } from '@/class/VirtualDirectory'
|
||||
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
|
||||
import { onMounted, ref } from 'vue'
|
||||
@@ -23,6 +28,7 @@ const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
|
||||
required: true
|
||||
})
|
||||
|
||||
const miaoMessage = ref<InstanceType<typeof miaoMessageProvider>>()
|
||||
const vFile = ref<VirtualFile>()
|
||||
const rootRef = ref<HTMLDivElement>()
|
||||
// const _key = ref(Math.random())
|
||||
@@ -34,6 +40,10 @@ const theme = ref<'light' | 'dark'>('light')
|
||||
|
||||
const handleSave = async () => {
|
||||
if (bakData.value === codeData.value || !vFile.value) {
|
||||
miaoMessage.value?.message('内容未改动', {
|
||||
timeout: 3000,
|
||||
type: 'info'
|
||||
})
|
||||
return
|
||||
}
|
||||
const parentDir = vFile.value?.parent
|
||||
@@ -43,8 +53,14 @@ const handleSave = async () => {
|
||||
)
|
||||
const file = new File([new Blob([codeData.value ?? ''])], vFile.value.name)
|
||||
bakData.value = codeData.value
|
||||
miaoFetchApi.upload(file, parentDir)
|
||||
const { response } = miaoFetchApi.upload(file, parentDir)
|
||||
false && miaoFetchApi.upload(file_bak, parentDir)
|
||||
await response
|
||||
miaoMessage.value?.message('保存成功', {
|
||||
timeout: 5000,
|
||||
type: 'success'
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
const handleReset = async () => {
|
||||
@@ -120,7 +136,12 @@ onMounted(async () => {
|
||||
const fileName = currentFiles.value[0].name
|
||||
codeData.value = (
|
||||
await miaoFetchApi.getFile(currentFiles.value[0], {
|
||||
axiosOption: { responseType: 'text' }
|
||||
axiosOption: {
|
||||
responseType: 'text',
|
||||
headers: {
|
||||
'Cache-Control': 'no-cache'
|
||||
}
|
||||
}
|
||||
})
|
||||
).toString()
|
||||
bakData.value = codeData.value
|
||||
@@ -139,8 +160,10 @@ onMounted(async () => {
|
||||
.codemirror-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
|
||||
.codemirror-container-top {
|
||||
height: 25px;
|
||||
display: flex;
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
@@ -160,6 +183,11 @@ onMounted(async () => {
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
}
|
||||
|
||||
.codemirror-container-main {
|
||||
height: calc(100% - 25px);
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.codemirror-container-dark {
|
||||
|
||||
+266
-286
@@ -1,89 +1,44 @@
|
||||
<template>
|
||||
<miao-drop-handler @on-virtual-directory="handleDropVDirectory" @on-files="handleDropFiles"
|
||||
<miao-drop-handler
|
||||
@on-virtual-directory="handleDropVDirectory"
|
||||
@on-files="handleDropFiles"
|
||||
@on-virtual-files="handleDropVirtualFiles">
|
||||
<div class="miao-directory-item-container" ref="rootDomRef">
|
||||
<div class="container-top" :style="{
|
||||
backgroundColor:
|
||||
index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
|
||||
}">
|
||||
<div class="container-top-colorfulBar" :style="{ backgroundColor: props.color }"></div>
|
||||
<div class="container-top-breadcrumb">
|
||||
<!-- <n-scrollbar x-scrollable> -->
|
||||
<div class="container-top-breadcrumb-container">
|
||||
<n-breadcrumb separator=">" style="margin-left: 5px">
|
||||
<n-breadcrumb-item :clickable="false">
|
||||
<n-icon size="18">
|
||||
<CloudOutline />
|
||||
</n-icon>
|
||||
</n-breadcrumb-item>
|
||||
<n-breadcrumb-item v-for="dir in currentDirectory?.getParents"
|
||||
@click="setCurrentDirectory(dir)" :clickable="true">
|
||||
<div>{{ dir.name }}</div>
|
||||
</n-breadcrumb-item>
|
||||
</n-breadcrumb>
|
||||
</div>
|
||||
<!-- </n-scrollbar> -->
|
||||
</div>
|
||||
<div class="container-top-tools">
|
||||
<n-icon class="container-top-tools-item" size="15" @click="handleBack">
|
||||
<ChevronBackOutline />
|
||||
</n-icon>
|
||||
<n-icon class="container-top-tools-item" size="14" @click="handleReload">
|
||||
<ReloadOutline class="container-top-tools-item-reload" />
|
||||
</n-icon>
|
||||
<n-icon class="container-top-tools-item" size="20" @click="emit('exit')">
|
||||
<CloseOutline />
|
||||
</n-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-items" :style="{
|
||||
backgroundColor:
|
||||
index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
|
||||
}">
|
||||
<n-scrollbar>
|
||||
<transition-group name="dirItem">
|
||||
<miaoDirectoryItem v-for="dir in showData_directory" :item="dir" :key="dir.uid"
|
||||
:color="props.color" :selectedItem="selectedItem.value" @delete="handleItemDelete(dir)"
|
||||
@click="handleItemClick(dir)" @drag-start="handleItemDragStart"
|
||||
@rename="handleItemRename(dir)" @on-selected="handleItemSelect(dir)" />
|
||||
</transition-group>
|
||||
<transition-group name="dirItem">
|
||||
<miaoDirectoryItem v-for="file in showData_files" :item="file" :key="file.uid"
|
||||
:color="props.color" :selectedItem="selectedItem.value" @click="handleItemClick(file)"
|
||||
@download="handleItemDownload(file)" @delete="handleItemDelete(file)"
|
||||
@drag-start="handleItemDragStart" @rename="handleItemRename(file)"
|
||||
@on-selected="handleItemSelect(file)" />
|
||||
</transition-group>
|
||||
<!-- <n-virtual-list :item="showData_all" :item-size="50">
|
||||
<!-- 顶部面包屑导航和工具栏 -->
|
||||
<miao-directory-top
|
||||
:color="props.color"
|
||||
:current-directory="currentDirectory"
|
||||
@back="handleBack"
|
||||
:open-menu-option="topBarMenuOption"
|
||||
@reload="handleReload"
|
||||
@exit="emit('exit')"
|
||||
:index="index"
|
||||
@set-current-directory="setCurrentDirectory"
|
||||
@search="handleSearch"
|
||||
@menu-select="handleTopBarMenuSelect" />
|
||||
|
||||
<!-- 文件和文件夹列表 -->
|
||||
<miao-directory-items
|
||||
ref="miaoDirectoryItemRef"
|
||||
:color="props.color"
|
||||
:showData_directory="showData_directory"
|
||||
:showData_files="showData_files"
|
||||
:selected-item="selectedItem.value"
|
||||
:index="index"
|
||||
@item-click="handleItemClick"
|
||||
@item-download="handleItemDownload"
|
||||
@item-delete="handleItemDelete"
|
||||
@item-drag-start="handleItemDragStart"
|
||||
@item-rename="handleItemRename"
|
||||
@item-select="handleItemSelect" />
|
||||
|
||||
<!-- 底部工具栏 -->
|
||||
<miao-directory-bottom
|
||||
:index="index"
|
||||
@add-new-item="handleAddNewItem"
|
||||
v-if="false"
|
||||
@pick-files-upload="handlePickFilesUpload" />
|
||||
|
||||
</n-virtual-list> -->
|
||||
</n-scrollbar>
|
||||
</div>
|
||||
<div class="container-bottom" :style="{
|
||||
backgroundColor:
|
||||
index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)'
|
||||
}">
|
||||
<div class="container-bottom-item">
|
||||
<div class="container-bottom-item-icon">
|
||||
<add-outline :style="{
|
||||
color:
|
||||
index % 2 === 0
|
||||
? 'rgb(0 0 0)'
|
||||
: 'rgb(255 255 255)'
|
||||
}" @click="handleAddNewItem" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-bottom-item">
|
||||
<div class="container-bottom-item-icon">
|
||||
<cloud-upload-outline :style="{
|
||||
color:
|
||||
index % 2 === 0
|
||||
? 'rgb(0 0 0)'
|
||||
: 'rgb(255 255 255)'
|
||||
}" @click="handlePickFilesUpload" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<miao-mask v-model:show="showModel"></miao-mask>
|
||||
<miao-popup-input ref="popupInput"></miao-popup-input>
|
||||
</div>
|
||||
@@ -91,34 +46,42 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { NBreadcrumbItem, NBreadcrumb, NIcon, NScrollbar } from 'naive-ui'
|
||||
import { computed, nextTick, onMounted, reactive, ref } from 'vue'
|
||||
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
|
||||
import { computed, onMounted, reactive, ref } from 'vue'
|
||||
import Config from '@/config'
|
||||
import miaoMask from '@/components/miaoMask.vue'
|
||||
import miaoDirectoryItem from '@/components/miaoDirectory/miaoDirectoryItem.vue'
|
||||
import miaoPopupInput from '@/components/miaoPopupInput.vue'
|
||||
import miaoDropHandler from '@/components/miaoDropHandler.vue'
|
||||
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
|
||||
import useDataBus from '@/hooks/useDataBus'
|
||||
import {
|
||||
CloudOutline,
|
||||
ChevronBackOutline,
|
||||
ReloadOutline,
|
||||
CloseOutline,
|
||||
CloudUploadOutline,
|
||||
AddOutline
|
||||
} from '@vicons/ionicons5'
|
||||
import useUploadQueue from '@/hooks/useUploadQueue'
|
||||
import useVirtualPages from '@/hooks/useVirtualPages'
|
||||
import { filePicker } from '@/hooks/miaoTools'
|
||||
import { filePicker, renderIcon } from '@/hooks/miaoTools'
|
||||
import { uniq } from 'lodash'
|
||||
|
||||
// 导入子组件
|
||||
import MiaoDirectoryTop from '@/components/miaoDirectory/miaoDirectoryTop.vue'
|
||||
import MiaoDirectoryItems from '@/components/miaoDirectory/miaoDirectoryItemsContainer.vue'
|
||||
import MiaoDirectoryBottom from '@/components/miaoDirectory/miaoDirectoryBottom.vue'
|
||||
import MiaoMask from '@/components/miaoMask.vue'
|
||||
import MiaoPopupInput from '@/components/miaoPopupInput.vue'
|
||||
import MiaoDropHandler from '@/components/miaoDropHandler.vue'
|
||||
import {
|
||||
CloseOutline,
|
||||
SearchOutline,
|
||||
FilterOutline,
|
||||
CheckmarkDoneOutline,
|
||||
DocumentText,
|
||||
ExtensionPuzzleOutline,
|
||||
FileTray,
|
||||
AddOutline,
|
||||
CloudUploadOutline
|
||||
} from '@vicons/ionicons5'
|
||||
import usePluginCenter from '@/hooks/usePluginCenter'
|
||||
|
||||
const { baseUrl, api } = Config
|
||||
const dataBus = useDataBus()
|
||||
const views = useVirtualPages()
|
||||
|
||||
const uploadQueue = useUploadQueue()
|
||||
const miaoFetchApi = useMiaoFetchApi()
|
||||
const pluginCenter = usePluginCenter()
|
||||
|
||||
const props = defineProps<{
|
||||
color: string
|
||||
@@ -129,9 +92,13 @@ const emit = defineEmits<{
|
||||
exit: []
|
||||
}>()
|
||||
|
||||
const popupInput = ref()
|
||||
const popupInput = ref<InstanceType<typeof MiaoPopupInput>>()
|
||||
// 是否显示模态框
|
||||
const showModel = ref(0)
|
||||
const searchText = ref<string>('')
|
||||
const showDirs = ref<boolean>(true)
|
||||
const showFiles = ref<boolean>(true)
|
||||
const miaoDirectoryItemRef = ref()
|
||||
|
||||
class SelectedItem {
|
||||
constructor() {
|
||||
@@ -142,32 +109,39 @@ class SelectedItem {
|
||||
this._selectedItem = [item, ...this._selectedItem]
|
||||
}
|
||||
remove(item: VirtualDirectory | VirtualFile) {
|
||||
this._selectedItem = this._selectedItem.filter(v => v !== item)
|
||||
this._selectedItem = this._selectedItem.filter((v) => v !== item)
|
||||
}
|
||||
clear() {
|
||||
this._selectedItem = []
|
||||
}
|
||||
// 保证内容仍然存在于dir中且各个元素不重复
|
||||
get value() {
|
||||
return uniq(this._selectedItem).filter(v => {
|
||||
const _filterList = [
|
||||
...(currentDirectory.value?.directories ?? []),
|
||||
...(currentDirectory.value?.files ?? [])
|
||||
]
|
||||
return uniq(this._selectedItem).filter((v) => {
|
||||
if (currentDirectory.value === undefined) {
|
||||
return false
|
||||
}
|
||||
// @ts-ignore
|
||||
return [...currentDirectory.value?.directorys, ...currentDirectory.value?.files].includes(v)
|
||||
return _filterList.includes(v)
|
||||
})
|
||||
}
|
||||
}
|
||||
// 已选择的item,用于多选功能
|
||||
const selectedItem = reactive(new SelectedItem())
|
||||
|
||||
const currentDirectorys = defineModel<VirtualDirectory[]>('currentDirectorys', {
|
||||
required: true
|
||||
})
|
||||
const currentDirectories = defineModel<VirtualDirectory[]>(
|
||||
'currentDirectories',
|
||||
{
|
||||
required: true
|
||||
}
|
||||
)
|
||||
|
||||
// 目前展示的Dir
|
||||
const currentDirectory = computed(() => {
|
||||
return currentDirectorys.value[0]
|
||||
return currentDirectories.value[0]
|
||||
})
|
||||
|
||||
// 当前组件在views中的序号
|
||||
@@ -177,42 +151,122 @@ const index = computed(() => {
|
||||
|
||||
// 用于展示的数据,后续会增加排序等操作
|
||||
const showData_directory = computed<VirtualDirectory[]>(() => {
|
||||
const data = currentDirectory.value?.directorys
|
||||
? [...currentDirectory.value?.directorys]
|
||||
if (showDirs.value === false) {
|
||||
return []
|
||||
}
|
||||
let data = currentDirectory.value?.directories
|
||||
? [...currentDirectory.value?.directories]
|
||||
: []
|
||||
if (searchText.value !== '') {
|
||||
data = data.filter((vd) => vd.name.includes(searchText.value))
|
||||
}
|
||||
return data
|
||||
})
|
||||
const showData_files = computed<VirtualFile[]>(() => {
|
||||
const data = currentDirectory.value?.files
|
||||
if (showFiles.value === false) {
|
||||
return []
|
||||
}
|
||||
let data = currentDirectory.value?.files
|
||||
? [...currentDirectory.value?.files]
|
||||
: []
|
||||
if (searchText.value !== '') {
|
||||
data = data.filter((vd) => vd.name.includes(searchText.value))
|
||||
}
|
||||
return data
|
||||
})
|
||||
// const showData_all = computed<(VirtualDirectory | VirtualFile)[]>(() => {
|
||||
// const data = currentDirectory.value?.directorys
|
||||
// ? [...currentDirectory.value?.directorys]
|
||||
// : []
|
||||
// data.push(...currentDirectory.value?.files)
|
||||
// return data
|
||||
// })
|
||||
|
||||
// 用于监听拖拽文件事件
|
||||
const rootDomRef = ref<HTMLDivElement>()
|
||||
|
||||
const uploadQueue = useUploadQueue()
|
||||
const topBarMenuOption = computed(() => {
|
||||
return [
|
||||
{
|
||||
label: '新建',
|
||||
key: 'create',
|
||||
icon: renderIcon(AddOutline)
|
||||
},
|
||||
{
|
||||
label: '上传',
|
||||
key: 'upload',
|
||||
icon: renderIcon(CloudUploadOutline)
|
||||
},
|
||||
{
|
||||
label: '搜索',
|
||||
key: 'search',
|
||||
icon: renderIcon(SearchOutline)
|
||||
},
|
||||
searchText.value !== ''
|
||||
? {
|
||||
label: '重置搜索',
|
||||
key: 'searchReset',
|
||||
icon: renderIcon(SearchOutline)
|
||||
}
|
||||
: undefined,
|
||||
selectedItem.value.length !== 0
|
||||
? {
|
||||
label: '重置多选',
|
||||
key: 'selectedItemReset',
|
||||
icon: renderIcon(CheckmarkDoneOutline)
|
||||
}
|
||||
: undefined,
|
||||
{
|
||||
label: '筛选',
|
||||
key: 'filter',
|
||||
children: [
|
||||
{
|
||||
label: `${showDirs.value ? '隐藏' : '显示'}文件夹`,
|
||||
key: 'showDirs',
|
||||
icon: renderIcon(FileTray)
|
||||
},
|
||||
{
|
||||
label: `${showFiles.value ? '隐藏' : '显示'}文件`,
|
||||
key: 'showFiles',
|
||||
icon: renderIcon(DocumentText)
|
||||
}
|
||||
],
|
||||
icon: renderIcon(FilterOutline)
|
||||
},
|
||||
{
|
||||
label: '插件',
|
||||
key: 'plugin',
|
||||
children: [
|
||||
...pluginCenter
|
||||
.getUsablePlugin([currentDirectories.value[0]], [])
|
||||
.map((v) => ({
|
||||
label: `${v.name}`,
|
||||
key: `plugin:${v.key}`,
|
||||
icon: v.icon ? renderIcon(v.icon) : undefined
|
||||
}))
|
||||
],
|
||||
icon: renderIcon(ExtensionPuzzleOutline)
|
||||
},
|
||||
{
|
||||
label: '关闭',
|
||||
key: 'close',
|
||||
icon: renderIcon(CloseOutline)
|
||||
}
|
||||
].filter((v) => v !== undefined)
|
||||
})
|
||||
|
||||
// 设置显示的dir
|
||||
const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
|
||||
// 若没有缓存数据则同步刷新,有缓存数据则异步刷新
|
||||
if (
|
||||
virtualDirectory.files === undefined ||
|
||||
virtualDirectory.directorys === undefined
|
||||
virtualDirectory.directories === undefined
|
||||
) {
|
||||
await virtualDirectory.update()
|
||||
} else {
|
||||
virtualDirectory.update()
|
||||
}
|
||||
currentDirectorys.value[0] = virtualDirectory
|
||||
if (currentDirectories.value[0] !== virtualDirectory) {
|
||||
selectedItem.clear()
|
||||
handleSearchReset()
|
||||
nextTick(() => {
|
||||
miaoDirectoryItemRef.value.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'instant'
|
||||
})
|
||||
})
|
||||
}
|
||||
currentDirectories.value[0] = virtualDirectory
|
||||
}
|
||||
|
||||
const reload = () => {
|
||||
@@ -234,6 +288,29 @@ const openUrl = (
|
||||
a.click()
|
||||
}
|
||||
|
||||
const handleTopBarMenuSelect = (key: string) => {
|
||||
if (key === 'close') {
|
||||
emit('exit')
|
||||
} else if (key === 'search') {
|
||||
handleSearch()
|
||||
} else if (key === 'upload') {
|
||||
handlePickFilesUpload()
|
||||
} else if (key === 'create') {
|
||||
handleAddNewItem()
|
||||
} else if (key === 'searchReset') {
|
||||
handleSearchReset()
|
||||
} else if (key === 'selectedItemReset') {
|
||||
selectedItem.clear()
|
||||
} else if (key === 'showDirs') {
|
||||
showDirs.value = !showDirs.value
|
||||
} else if (key === 'showFiles') {
|
||||
showFiles.value = !showFiles.value
|
||||
} else if (key.startsWith('plugin:')) {
|
||||
const pluginName = key.split(':')[1]
|
||||
pluginCenter.usePlugin(pluginName, [currentDirectory.value], [])
|
||||
}
|
||||
}
|
||||
|
||||
const handleBack = () => {
|
||||
if (currentDirectory.value?.parent) {
|
||||
setCurrentDirectory(currentDirectory.value.parent)
|
||||
@@ -264,7 +341,7 @@ const handleItemDownload = (item: VirtualFile) => {
|
||||
|
||||
const handleItemDelete = async (_item: VirtualDirectory | VirtualFile) => {
|
||||
for (let item of uniq([...selectedItem.value, _item])) {
|
||||
; (async () => {
|
||||
;(async () => {
|
||||
const { response } = miaoFetchApi.delete(item, {
|
||||
retry: 5
|
||||
})
|
||||
@@ -280,9 +357,8 @@ const handleItemDelete = async (_item: VirtualDirectory | VirtualFile) => {
|
||||
}
|
||||
|
||||
const handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
|
||||
const popupRes = await popupInput.value.popup({
|
||||
const popupRes = await popupInput.value?.popup({
|
||||
title: '重命名',
|
||||
showInput: true,
|
||||
inputValue: item.name,
|
||||
inputProps: {
|
||||
placeholder: item.name
|
||||
@@ -300,10 +376,13 @@ const handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
|
||||
}
|
||||
]
|
||||
})
|
||||
if (popupRes.key === false) {
|
||||
if (popupRes?.key === false) {
|
||||
return
|
||||
}
|
||||
const newName = popupRes?.text
|
||||
if (!newName) {
|
||||
return
|
||||
}
|
||||
const newName = popupRes.text
|
||||
const { response } = miaoFetchApi.rename(item, newName, {
|
||||
retry: 5
|
||||
})
|
||||
@@ -320,8 +399,14 @@ const handleItemDragStart = async (
|
||||
item: VirtualDirectory | VirtualFile
|
||||
) => {
|
||||
const items = uniq([item, ...selectedItem.value])
|
||||
dataBus.set('dragData_vFiles', items.filter(v => v.type === 'file'))
|
||||
dataBus.set('dragData_vDirectory', items.filter(v => v.type === 'directory'))
|
||||
dataBus.set(
|
||||
'dragData_vFiles',
|
||||
items.filter((v) => v.type === 'file')
|
||||
)
|
||||
dataBus.set(
|
||||
'dragData_vDirectory',
|
||||
items.filter((v) => v.type === 'directory')
|
||||
)
|
||||
// selectedItem.clear()
|
||||
}
|
||||
|
||||
@@ -340,9 +425,12 @@ const handleDropVDirectory = async (vDirs: VirtualDirectory[]) => {
|
||||
if (currentDirectory.value.getParents.includes(vDir)) {
|
||||
return
|
||||
}
|
||||
if (vDir.parent === currentDirectory.value) {
|
||||
return
|
||||
}
|
||||
}
|
||||
for (let dir of vDirs) {
|
||||
; (async () => {
|
||||
;(async () => {
|
||||
const _from = dir.parent
|
||||
const { response } = miaoFetchApi.cut(dir, currentDirectory.value)
|
||||
const id = (await response).eventId
|
||||
@@ -361,7 +449,7 @@ const handleDropVirtualFiles = (files: VirtualFile[]) => {
|
||||
return
|
||||
}
|
||||
for (let file of files) {
|
||||
; (async () => {
|
||||
;(async () => {
|
||||
const _from = file.parent
|
||||
const { response } = miaoFetchApi.cut(file, currentDirectory.value)
|
||||
const id = (await response).eventId
|
||||
@@ -388,9 +476,8 @@ const handlePickFilesUpload = async () => {
|
||||
}
|
||||
|
||||
const handleAddNewItem = async () => {
|
||||
const popupRes = await popupInput.value.popup({
|
||||
const popupRes = await popupInput.value?.popup({
|
||||
title: '新建文件/文件夹',
|
||||
showInput: true,
|
||||
inputProps: {
|
||||
placeholder: ''
|
||||
},
|
||||
@@ -413,12 +500,16 @@ const handleAddNewItem = async () => {
|
||||
]
|
||||
})
|
||||
// todo: 上传前如重名文件夹等等的错误提前检查
|
||||
if (popupRes.key === 'cancel' || popupRes.text === '') {
|
||||
if (popupRes?.key === 'cancel' || popupRes?.text === '') {
|
||||
return
|
||||
}
|
||||
const _currDir = currentDirectory.value
|
||||
const name = popupRes.text
|
||||
const opType: 'file' | 'dir' = popupRes.key
|
||||
const name = popupRes?.text
|
||||
if (!name) {
|
||||
return
|
||||
}
|
||||
// @ts-ignore
|
||||
const opType: 'file' | 'dir' = popupRes?.key
|
||||
if (opType === 'dir') {
|
||||
const res = await miaoFetchApi.mkdir(currentDirectory.value, name)
|
||||
if (res.message === 'success') {
|
||||
@@ -440,6 +531,45 @@ const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
|
||||
selectedItem.remove(item)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSearch = async () => {
|
||||
const popupRes = await popupInput.value?.popup({
|
||||
title: '搜索当前文件夹',
|
||||
inputValue: searchText.value,
|
||||
inputProps: {
|
||||
placeholder: ''
|
||||
},
|
||||
options: [
|
||||
{
|
||||
label: '取消',
|
||||
key: 'cancel',
|
||||
type: 'default'
|
||||
},
|
||||
{
|
||||
label: '重置',
|
||||
key: 'reset',
|
||||
type: 'default'
|
||||
},
|
||||
{
|
||||
label: '搜索',
|
||||
key: 'search',
|
||||
type: 'success'
|
||||
}
|
||||
]
|
||||
})
|
||||
if (!popupRes) {
|
||||
return
|
||||
}
|
||||
if (popupRes.key === 'search') {
|
||||
searchText.value = popupRes.text
|
||||
} else if (popupRes.key === 'reset') {
|
||||
handleSearchReset()
|
||||
}
|
||||
}
|
||||
|
||||
const handleSearchReset = () => {
|
||||
searchText.value = ''
|
||||
}
|
||||
onMounted(async () => {
|
||||
await setCurrentDirectory(currentDirectory.value)
|
||||
})
|
||||
@@ -453,159 +583,9 @@ $bottom-bar-height: 60px;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: inherit;
|
||||
// min-width: 236px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
min-width: 170px;
|
||||
|
||||
.container-top {
|
||||
height: $top-height;
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
background-color: #f1f1f1;
|
||||
|
||||
.container-top-colorfulBar {
|
||||
height: 70%;
|
||||
width: 5px;
|
||||
margin-left: 10px;
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.container-top-breadcrumb {
|
||||
position: relative;
|
||||
height: 70%;
|
||||
width: calc(100% - 95px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
// overflow: hidden;
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
background-color: #ffffff;
|
||||
padding: 0 5px;
|
||||
border-radius: 0 3px 3px 0;
|
||||
|
||||
.container-top-breadcrumb-container {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
min-width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.container-top-tools {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 70px;
|
||||
padding: 0 5px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
.container-top-tools-item {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #ffffff00;
|
||||
border-radius: 5px;
|
||||
transition: background-color 0.3s;
|
||||
cursor: pointer;
|
||||
|
||||
.container-top-tools-item-reload {
|
||||
transition: transform 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(128, 128, 128, 0.4);
|
||||
}
|
||||
|
||||
&:active .container-top-tools-item-reload {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
// &::after {
|
||||
// content: '';
|
||||
// height: 60%;
|
||||
// position: absolute;
|
||||
// right: -2px;
|
||||
// width: 2px;
|
||||
// background-color: #828282;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.container-items {
|
||||
width: 100%;
|
||||
height: calc(100% - $top-height - $bottom-bar-height);
|
||||
// flex: 1;
|
||||
}
|
||||
|
||||
.container-bottom {
|
||||
height: $bottom-bar-height;
|
||||
background-color: bisque;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
box-shadow: 0px 1px 10px #888888;
|
||||
z-index: 2;
|
||||
|
||||
.container-bottom-item {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.container-bottom-item-icon {
|
||||
svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// transition动画相关
|
||||
// .miao-directory-item-container {
|
||||
// .container-items {
|
||||
// .dirItem-move {
|
||||
// transition: all 0.2s ease;
|
||||
// }
|
||||
|
||||
// .dirItem-leave-active {
|
||||
// transition: none;
|
||||
// }
|
||||
|
||||
// .dirItem-enter-from {
|
||||
// opacity: 0;
|
||||
// }
|
||||
|
||||
// .dirItem-leave-active {
|
||||
// position: absolute;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="iframe-container">
|
||||
<div class="miao-markdown-container-miaomiaomiao">
|
||||
<iframe
|
||||
:src="iframeSrc"
|
||||
frameborder="0"
|
||||
@@ -23,7 +23,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.iframe-container {
|
||||
.miao-markdown-container-miaomiaomiao {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.iframe-container-iframe {
|
||||
|
||||
@@ -0,0 +1,316 @@
|
||||
<template>
|
||||
<miao-drop-handler @on-virtual-directory="handleDrop" @on-virtual-files="handleDrop">
|
||||
<miao-message-provider ref="miaoMessageRef">
|
||||
<div class="miaoImage" ref="rootRef">
|
||||
<n-scrollbar ref="NScrollbarRef">
|
||||
<div class="miaoImage-container" v-for="imageGroup in imageGroupList">
|
||||
<div class="miaoImage-container-day">
|
||||
<!-- <div class="miaoImage-container-divide miaoImage-container-divide-before">
|
||||
<div class="miaoImage-container-divide-line"></div>
|
||||
</div> -->
|
||||
<span class="miaoImage-container-day-text">
|
||||
{{ imageGroup.day }}
|
||||
</span>
|
||||
<!-- <div class="miaoImage-container-divide">
|
||||
<div class="miaoImage-container-divide-line"></div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="miaoImage-container-row" v-for="vFile in imageGroup.items" :key="vFile.id">
|
||||
<img :src="vFile.url" class="miaoImage-container-row-image" loading="lazy" :class="activeImage === vFile
|
||||
? 'miaoImage-container-row-image-active'
|
||||
: ''
|
||||
" @click="activeImage = vFile" />
|
||||
</div>
|
||||
</div>
|
||||
</n-scrollbar>
|
||||
<miao-mask :show="activeImage !== undefined" @click="activeImage = undefined" class="miaoImage-mask">
|
||||
<ChevronBack class="miaoImage-mask-btn miaoImage-mask-btn-back" @click="handleActiveImageBack" />
|
||||
<img :src="activeImage?.url" class="miaoImage-mask-active" @click="(e) => e.stopPropagation()"
|
||||
draggable="false" />
|
||||
<ChevronForward class="miaoImage-mask-btn miaoImage-mask-btn-forward"
|
||||
@click="handleActiveImageForward" />
|
||||
</miao-mask>
|
||||
</div>
|
||||
</miao-message-provider>
|
||||
</miao-drop-handler>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import miaoMask from '@/components/miaoMask.vue'
|
||||
import miaoDropHandler from '@/components/miaoDropHandler.vue'
|
||||
import miaoMessageProvider from '@/components/miaoMessageProvider.vue'
|
||||
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
|
||||
import { uniq } from 'lodash'
|
||||
import { computed, nextTick, onMounted, ref } from 'vue'
|
||||
import { NScrollbar } from 'naive-ui'
|
||||
import { ChevronBack, ChevronForward } from '@vicons/ionicons5'
|
||||
|
||||
const imageSuffixList = [
|
||||
'xbm',
|
||||
'tif',
|
||||
'pjp',
|
||||
'svgz',
|
||||
'jpg',
|
||||
'jpeg',
|
||||
'ico',
|
||||
'tiff',
|
||||
'gif',
|
||||
'svg',
|
||||
'jfif',
|
||||
'webp',
|
||||
'png',
|
||||
'bmp',
|
||||
'pjpeg',
|
||||
'avif'
|
||||
]
|
||||
|
||||
const currentDirectories = defineModel<VirtualDirectory[]>(
|
||||
'currentDirectories',
|
||||
{
|
||||
required: true
|
||||
}
|
||||
)
|
||||
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
|
||||
required: true
|
||||
})
|
||||
|
||||
const NScrollbarRef = ref()
|
||||
const rootRef = ref<any>()
|
||||
const miaoMessageRef = ref<InstanceType<typeof miaoMessageProvider>>()
|
||||
|
||||
const imageFileList = ref<VirtualFile[]>([])
|
||||
|
||||
const imageGroupList = computed(() => {
|
||||
return groupByDay(imageFileList.value)
|
||||
})
|
||||
const activeImage = ref<VirtualFile>()
|
||||
|
||||
const groupByDay = (array: VirtualFile[]) => {
|
||||
const result = []
|
||||
let currentDay = null
|
||||
let currentGroup: VirtualFile[] = []
|
||||
|
||||
for (const item of array) {
|
||||
const date = new Date(item.stats.mtimeMs)
|
||||
const day = `${date.getFullYear()}年 ${String(
|
||||
date.getMonth() + 1
|
||||
).padStart(2, '0')}月 ${String(date.getDate()).padStart(2, '0')}日`
|
||||
|
||||
if (day !== currentDay) {
|
||||
if (currentGroup.length > 0) {
|
||||
result.push({
|
||||
day: currentDay,
|
||||
items: currentGroup
|
||||
})
|
||||
}
|
||||
currentDay = day
|
||||
currentGroup = [item]
|
||||
} else {
|
||||
currentGroup.push(item)
|
||||
}
|
||||
}
|
||||
if (currentGroup.length > 0) {
|
||||
result.push({
|
||||
day: currentDay,
|
||||
items: currentGroup
|
||||
})
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
const scrollToActiveImage = () => {
|
||||
const dom = rootRef.value?.querySelector(
|
||||
'.miaoImage-container-row-image-active'
|
||||
)
|
||||
NScrollbarRef.value.scrollTo({
|
||||
top: dom.offsetTop - 30,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
|
||||
const handleActiveImageBack = (e: any) => {
|
||||
e.stopPropagation()
|
||||
if (!activeImage.value) {
|
||||
return
|
||||
}
|
||||
const index = imageFileList.value.indexOf(activeImage.value)
|
||||
activeImage.value =
|
||||
imageFileList.value[
|
||||
(index - 1 + imageFileList.value.length) %
|
||||
imageFileList.value.length
|
||||
]
|
||||
nextTick(scrollToActiveImage)
|
||||
}
|
||||
|
||||
const handleActiveImageForward = (e: any) => {
|
||||
e.stopPropagation()
|
||||
if (!activeImage.value) {
|
||||
return
|
||||
}
|
||||
const index = imageFileList.value.indexOf(activeImage.value)
|
||||
activeImage.value =
|
||||
imageFileList.value[
|
||||
(index + 1 + imageFileList.value.length) %
|
||||
imageFileList.value.length
|
||||
]
|
||||
nextTick(scrollToActiveImage)
|
||||
}
|
||||
|
||||
const handleDrop = async (vItems: (VirtualFile | VirtualDirectory)[]) => {
|
||||
const length_before = imageFileList.value.length
|
||||
if (vItems[0].type === 'directory') {
|
||||
// @ts-ignore
|
||||
currentDirectories.value = [...currentDirectories.value, ...vItems]
|
||||
for (const i of vItems) {
|
||||
// @ts-ignore
|
||||
await updateImageSrcList(i)
|
||||
}
|
||||
} else {
|
||||
// @ts-ignore
|
||||
currentFiles.value = [...currentFiles, ...vItems]
|
||||
// @ts-ignore
|
||||
await updateImageSrcList(vItems)
|
||||
}
|
||||
miaoMessageRef.value?.message(length_before === imageFileList.value.length ? '未发现任何可添加图片' : `导入${imageFileList.value.length - length_before}张图片`, {
|
||||
type: length_before === imageFileList.value.length ? 'info' : 'success'
|
||||
, timeout: 5000
|
||||
})
|
||||
}
|
||||
|
||||
const updateImageSrcList = async (source: VirtualFile[] | VirtualDirectory) => {
|
||||
let newFileList: VirtualFile[]
|
||||
if ('type' in source) {
|
||||
await source.update()
|
||||
newFileList = [
|
||||
...(source.files?.filter((v) =>
|
||||
imageSuffixList.includes(v.name.split('.').pop() ?? '')
|
||||
) ?? [])
|
||||
]
|
||||
} else {
|
||||
newFileList = [
|
||||
...(source.filter((v) =>
|
||||
imageSuffixList.includes(v.name.split('.').pop() ?? '')
|
||||
) ?? [])
|
||||
]
|
||||
}
|
||||
imageFileList.value = uniq([...imageFileList.value, ...newFileList]).sort(
|
||||
(a, b) => - a.stats.mtimeMs + b.stats.mtimeMs
|
||||
)
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const length_before = imageFileList.value.length;
|
||||
for (const i of [currentFiles.value, ...currentDirectories.value]) {
|
||||
await updateImageSrcList(i)
|
||||
}
|
||||
miaoMessageRef.value?.message(length_before === imageFileList.value.length ? '未发现任何新增图片' : `导入${imageFileList.value.length - length_before}张图片`, {
|
||||
type: length_before === imageFileList.value.length ? 'info' : 'success'
|
||||
, timeout: 5000
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.miaoImage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
|
||||
.miaoImage-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 20px;
|
||||
|
||||
.miaoImage-container-day {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
margin: 0 20px;
|
||||
|
||||
.miaoImage-container-divide {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.miaoImage-container-divide-line {
|
||||
height: 3px;
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
background-color: rgb(244 244 244);
|
||||
}
|
||||
|
||||
.miaoImage-container-divide-before {
|
||||
flex: 0.1;
|
||||
}
|
||||
|
||||
.miaoImage-container-day-text {
|
||||
margin: 0 0 0 10px;
|
||||
font-size: 15px;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.miaoImage-container-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 25%;
|
||||
aspect-ratio: 1;
|
||||
|
||||
.miaoImage-container-row-image {
|
||||
width: 80%;
|
||||
aspect-ratio: 1;
|
||||
object-fit: cover;
|
||||
transition: width 0.25s;
|
||||
box-shadow: 0 0 10px -5px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
&-active {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.miaoImage-mask {
|
||||
background-color: rgba(0, 0, 0, 0.444);
|
||||
}
|
||||
|
||||
.miaoImage-mask-active {
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.miaoImage-mask-btn {
|
||||
color: #ffffff99;
|
||||
width: 7%;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
|
||||
&-back {
|
||||
left: 1%;
|
||||
}
|
||||
|
||||
&-forward {
|
||||
right: 1%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<n-scrollbar>
|
||||
<div class="miao-markdown-container-miaomiaomiao" v-html="renderedMarkdown"></div>
|
||||
<div style="height: 50px; width: 100%;"></div>
|
||||
</n-scrollbar>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { NScrollbar } from 'naive-ui';
|
||||
import { VirtualFile } from '@/class/VirtualDirectory'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import MarkdownIt from 'markdown-it'
|
||||
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi';
|
||||
|
||||
const miaoFetchApi = useMiaoFetchApi()
|
||||
|
||||
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
|
||||
required: true
|
||||
})
|
||||
|
||||
const markdownSrc = ref<string>()
|
||||
const renderedMarkdown = ref<string>('')
|
||||
|
||||
const md = new MarkdownIt()
|
||||
|
||||
onMounted(async () => {
|
||||
markdownSrc.value = currentFiles.value[0].url
|
||||
const text = (await miaoFetchApi.getFile(currentFiles.value[0])).toString()
|
||||
renderedMarkdown.value = md.render(text)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.miao-markdown-container-miaomiaomiao {
|
||||
width: 95%;
|
||||
margin: 20px;
|
||||
|
||||
table,
|
||||
td,
|
||||
th {
|
||||
border: 1px solid #ddd;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #f2f2f2
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #04AA6D;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+62
-29
@@ -1,44 +1,74 @@
|
||||
<template>
|
||||
<div class="miao-container">
|
||||
<div class="miao-container-topBar">
|
||||
<div class="miao-container-topBar-btn" @click="() => handleZoom(10)" title="快速缩小">--</div>
|
||||
<div class="miao-container-topBar-btn" @click="() => handleZoom()" title="缩小">-</div>
|
||||
<div class="miao-container-topBar-btn" @click="() => handleResetMargin()" title="还原">还原缩放</div>
|
||||
<div class="miao-container-topBar-btn" @click="() => handleShrink()" title="放大">+</div>
|
||||
<div class="miao-container-topBar-btn" @click="() => handleShrink(10)" title="快速放大">++</div>
|
||||
</div>
|
||||
<NScrollbar>
|
||||
<div class="miao-container-pdf" :style="{alignItems: pdfMargin < 0 ? 'baseline' : 'center'}">
|
||||
<div ref="pdfEl" class="miao-container-pdf-content" :style="{ width: `calc( 100% - ${pdfMargin}px)`}">
|
||||
<miao-message-provider ref="miaoMessageRef">
|
||||
<div class="miao-container">
|
||||
<div class="miao-container-topBar">
|
||||
<div
|
||||
class="miao-container-topBar-btn"
|
||||
@click="() => handleZoom(10)"
|
||||
title="快速缩小">
|
||||
--
|
||||
</div>
|
||||
<div
|
||||
class="miao-container-topBar-btn"
|
||||
@click="() => handleZoom()"
|
||||
title="缩小">
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="miao-container-topBar-btn"
|
||||
@click="() => handleResetMargin()"
|
||||
title="还原">
|
||||
还原缩放
|
||||
</div>
|
||||
<div
|
||||
class="miao-container-topBar-btn"
|
||||
@click="() => handleShrink()"
|
||||
title="放大">
|
||||
+
|
||||
</div>
|
||||
<div
|
||||
class="miao-container-topBar-btn"
|
||||
@click="() => handleShrink(10)"
|
||||
title="快速放大">
|
||||
++
|
||||
</div>
|
||||
</div>
|
||||
</NScrollbar>
|
||||
<div class="miao-container-loading" v-if="isLoading">{{ loadingPercent === -1 ? '加载插件中' :
|
||||
`渲染进度:${canvasList.length}/${pdfPageCount}` }}</div>
|
||||
</div>
|
||||
<NScrollbar>
|
||||
<div
|
||||
class="miao-container-pdf"
|
||||
:style="{
|
||||
alignItems: pdfMargin < 0 ? 'baseline' : 'center'
|
||||
}">
|
||||
<div
|
||||
ref="pdfEl"
|
||||
class="miao-container-pdf-content"
|
||||
:style="{
|
||||
width: `calc( 100% - ${pdfMargin}px)`
|
||||
}"></div>
|
||||
</div>
|
||||
</NScrollbar>
|
||||
</div>
|
||||
</miao-message-provider>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref, shallowReactive } from 'vue'
|
||||
import miaoMessageProvider from '@/components/miaoMessageProvider.vue'
|
||||
import { onMounted, ref, shallowReactive } from 'vue'
|
||||
import PdfjsWorker from 'pdfjs-dist/build/pdf.worker.mjs?worker'
|
||||
import { VirtualFile } from '@/class/VirtualDirectory'
|
||||
import { NScrollbar } from 'naive-ui';
|
||||
import { NScrollbar } from 'naive-ui'
|
||||
|
||||
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
|
||||
required: true
|
||||
})
|
||||
|
||||
const pdfEl = ref<HTMLDivElement>()
|
||||
|
||||
const miaoMessageRef = ref<InstanceType<typeof miaoMessageProvider>>()
|
||||
// 通过margin来实现缩小功能
|
||||
const pdfMargin = ref<number>(0)
|
||||
|
||||
const pdfPageCount = ref<number>(-1)
|
||||
|
||||
const isLoading = computed(() => {
|
||||
return canvasList.length !== pdfPageCount.value
|
||||
})
|
||||
|
||||
const canvasList = shallowReactive<HTMLCanvasElement[]>([])
|
||||
|
||||
const handleZoom = (index?: number) => {
|
||||
@@ -58,14 +88,11 @@ const handleResetMargin = () => {
|
||||
pdfMargin.value = 0
|
||||
}
|
||||
|
||||
const loadingPercent = computed(() => {
|
||||
if (pdfPageCount.value === -1) {
|
||||
return -1
|
||||
}
|
||||
return canvasList.length / pdfPageCount.value
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
const setLoadingMessage = miaoMessageRef.value?.message('加载PDF插件中', {
|
||||
type: 'info',
|
||||
timeout: -1
|
||||
})
|
||||
const pdfSrc = currentFiles.value[0].url
|
||||
// @ts-ignore
|
||||
const PDFJS = await import('pdfjs-dist/build/pdf.mjs')
|
||||
@@ -79,6 +106,7 @@ onMounted(async () => {
|
||||
pdfPageCount.value = pdf.numPages
|
||||
// 循环渲染每一页
|
||||
for (let i = 1; i <= pdf.numPages; i++) {
|
||||
setLoadingMessage && setLoadingMessage(`渲染进度:${i}/${pdf.numPages}`)
|
||||
const page = await pdf.getPage(i)
|
||||
let pixelRatio = 3
|
||||
let viewport = page.getViewport({ scale: 1 })
|
||||
@@ -96,6 +124,11 @@ onMounted(async () => {
|
||||
}
|
||||
await page.render(renderContext).promise // 一页一页的渲染
|
||||
}
|
||||
setLoadingMessage &&
|
||||
setLoadingMessage(`渲染PDF完成`, {
|
||||
type: 'success',
|
||||
timeout: 3456
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
import { VirtualFile } from '@/class/VirtualDirectory'
|
||||
import miaoDropHandler from '@/components/miaoDropHandler.vue'
|
||||
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
// import useViretualPages from '@/hooks/useVirtualPages';
|
||||
// import useVirtualPages from '@/hooks/useVirtualPages';
|
||||
import XGPlayer from 'xgplayer'
|
||||
import '@/style/xgplayer.scss'
|
||||
import TextTrack from 'xgplayer/es/plugins/track'
|
||||
@@ -26,7 +26,7 @@ const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
|
||||
required: true
|
||||
})
|
||||
|
||||
// const views = useViretualPages()
|
||||
// const views = useVirtualPages()
|
||||
// const view = views.getView(props.id)
|
||||
|
||||
// const videoPath = ref<string>('');
|
||||
@@ -55,7 +55,7 @@ const { setVideo } = (() => {
|
||||
// console.log(srtToVtt(response.data))
|
||||
const url = setUrl(new Blob([srtToVtt(response.data)]))
|
||||
_list.push({
|
||||
id: i.uid,
|
||||
id: i.id,
|
||||
url,
|
||||
// 这个language会覆盖id的设置,导致无法切换字幕
|
||||
// language: 'zh-cn',
|
||||
@@ -66,7 +66,7 @@ const { setVideo } = (() => {
|
||||
// console.log(assToVtt(response.data))
|
||||
const url = setUrl(new Blob([assToVtt(response.data)]))
|
||||
_list.push({
|
||||
id: i.uid,
|
||||
id: i.id,
|
||||
url,
|
||||
text: i.name
|
||||
})
|
||||
@@ -75,13 +75,13 @@ const { setVideo } = (() => {
|
||||
// console.log(ssaToVtt(response.data))
|
||||
const url = setUrl(new Blob([ssaToVtt(response.data)]))
|
||||
_list.push({
|
||||
id: i.uid,
|
||||
id: i.id,
|
||||
url,
|
||||
text: i.name
|
||||
})
|
||||
} else {
|
||||
_list.push({
|
||||
id: i.uid,
|
||||
id: i.id,
|
||||
url: i.url,
|
||||
text: i.name
|
||||
})
|
||||
|
||||
+9
-14
@@ -59,21 +59,16 @@ export default defineConfig({
|
||||
build: {
|
||||
rollupOptions: {
|
||||
input: {
|
||||
main: resolve(__dirname, 'index.html')
|
||||
main: '/src/index.ts'
|
||||
},
|
||||
output: {
|
||||
// 配置输出为单文件
|
||||
// inlineDynamicImports: true,
|
||||
// manualChunks(id) {
|
||||
// 加了会有bug
|
||||
// if (id.includes('@codemirror')) {
|
||||
// return id.split('@')[1].replace('+', '-')
|
||||
// }
|
||||
// }
|
||||
// entryFileNames: 'bundle.js',
|
||||
// format: 'iife', // 立即执行函数格式
|
||||
// name: 'MyBundle'
|
||||
}
|
||||
// output: {
|
||||
// entryFileNames: (chunkInfo) => {
|
||||
// if (chunkInfo.name === 'main') {
|
||||
// return 'main.js'
|
||||
// }
|
||||
// return '[name].[hash].js'
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in new issue
Block a user