539943419/miaoDirectory
1
0 Fork 0
Code Pull Requests Projects Releases 2 Activity

update

Browse Source
This commit is contained in:
539943419 committed 2024-08-10 02:11:20 +08:00
1 parent 4ce50f697b
commit d9363d3b93
12 files changed
+610 -91
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.gitignore
+2 -1
View File
@@ -22,4 +22,5 @@ dist-ssr
*.njsproj *.njsproj
*.sln *.sln
*.sw? *.sw?
.vscode .vscode
serve
index.html
+17 -11
View File
@@ -1,13 +1,19 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MDW</title> <title>MDW</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
<style>
#app{
height: 100vh;
width: 100vw;
}
</style>
</html> </html>
package.json
+2
View File
@@ -9,7 +9,9 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@vicons/ionicons5": "^0.12.0",
"naive-ui": "^2.39.0", "naive-ui": "^2.39.0",
"sass": "^1.77.8",
"vue": "^3.4.35" "vue": "^3.4.35"
}, },
"devDependencies": { "devDependencies": {
pnpm-lock.yaml
Generated
+144 -5
View File
@@ -8,9 +8,15 @@ importers:
.: .:
dependencies: dependencies:
'@vicons/ionicons5':
specifier: ^0.12.0
version: 0.12.0
naive-ui: naive-ui:
specifier: ^2.39.0 specifier: ^2.39.0
version: 2.39.0(vue@3.4.37(typescript@5.5.4)) version: 2.39.0(vue@3.4.37(typescript@5.5.4))
sass:
specifier: ^1.77.8
version: 1.77.8
vue: vue:
specifier: ^3.4.35 specifier: ^3.4.35
version: 3.4.37(typescript@5.5.4) version: 3.4.37(typescript@5.5.4)
@@ -20,13 +26,13 @@ importers:
version: 22.1.0 version: 22.1.0
'@vitejs/plugin-vue': '@vitejs/plugin-vue':
specifier: ^5.1.2 specifier: ^5.1.2
version: 5.1.2(vite@5.4.0(@types/node@22.1.0))(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.4.37(typescript@5.5.4))
typescript: typescript:
specifier: ^5.5.3 specifier: ^5.5.3
version: 5.5.4 version: 5.5.4
vite: vite:
specifier: ^5.4.0 specifier: ^5.4.0
version: 5.4.0(@types/node@22.1.0) version: 5.4.0(@types/node@22.1.0)(sass@1.77.8)
vue-tsc: vue-tsc:
specifier: ^2.0.29 specifier: ^2.0.29
version: 2.0.29(typescript@5.5.4) version: 2.0.29(typescript@5.5.4)
@@ -315,6 +321,9 @@ packages:
'@types/node@22.1.0': '@types/node@22.1.0':
resolution: {integrity: sha512-AOmuRF0R2/5j1knA3c6G3HOk523Ga+l+ZXltX8SF1+5oqcXijjfTd8fY3XRZqSihEu9XhtQnKYLmkFaoxgsJHw==} resolution: {integrity: sha512-AOmuRF0R2/5j1knA3c6G3HOk523Ga+l+ZXltX8SF1+5oqcXijjfTd8fY3XRZqSihEu9XhtQnKYLmkFaoxgsJHw==}
'@vicons/ionicons5@0.12.0':
resolution: {integrity: sha512-Iy1EUVRpX0WWxeu1VIReR1zsZLMc4fqpt223czR+Rpnrwu7pt46nbnC2ycO7ItI/uqDLJxnbcMC7FujKs9IfFA==}
'@vitejs/plugin-vue@5.1.2': '@vitejs/plugin-vue@5.1.2':
resolution: {integrity: sha512-nY9IwH12qeiJqumTCLJLE7IiNx7HZ39cbHaysEUd+Myvbz9KAqd2yq+U01Kab1R/H1BmiyM2ShTYlNH32Fzo3A==} resolution: {integrity: sha512-nY9IwH12qeiJqumTCLJLE7IiNx7HZ39cbHaysEUd+Myvbz9KAqd2yq+U01Kab1R/H1BmiyM2ShTYlNH32Fzo3A==}
engines: {node: ^18.0.0 || >=20.0.0} engines: {node: ^18.0.0 || >=20.0.0}
@@ -371,15 +380,31 @@ packages:
'@vue/shared@3.4.37': '@vue/shared@3.4.37':
resolution: {integrity: sha512-nIh8P2fc3DflG8+5Uw8PT/1i17ccFn0xxN/5oE9RfV5SVnd7G0XEFRwakrnNFE/jlS95fpGXDVG5zDETS26nmg==} resolution: {integrity: sha512-nIh8P2fc3DflG8+5Uw8PT/1i17ccFn0xxN/5oE9RfV5SVnd7G0XEFRwakrnNFE/jlS95fpGXDVG5zDETS26nmg==}
anymatch@3.1.3:
resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
engines: {node: '>= 8'}
async-validator@4.2.5: async-validator@4.2.5:
resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==} resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
balanced-match@1.0.2: balanced-match@1.0.2:
resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
binary-extensions@2.3.0:
resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
engines: {node: '>=8'}
brace-expansion@2.0.1: brace-expansion@2.0.1:
resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==} resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
braces@3.0.3:
resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
engines: {node: '>=8'}
chokidar@3.6.0:
resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
engines: {node: '>= 8.10.0'}
computeds@0.0.1: computeds@0.0.1:
resolution: {integrity: sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==} resolution: {integrity: sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==}
@@ -419,11 +444,19 @@ packages:
evtd@0.2.4: evtd@0.2.4:
resolution: {integrity: sha512-qaeGN5bx63s/AXgQo8gj6fBkxge+OoLddLniox5qtLAEY5HSnuSlISXVPxnSae1dWblvTh4/HoMIB+mbMsvZzw==} resolution: {integrity: sha512-qaeGN5bx63s/AXgQo8gj6fBkxge+OoLddLniox5qtLAEY5HSnuSlISXVPxnSae1dWblvTh4/HoMIB+mbMsvZzw==}
fill-range@7.1.1:
resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
engines: {node: '>=8'}
fsevents@2.3.3: fsevents@2.3.3:
resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==} resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
os: [darwin] os: [darwin]
glob-parent@5.1.2:
resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
engines: {node: '>= 6'}
he@1.2.0: he@1.2.0:
resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==} resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
hasBin: true hasBin: true
@@ -432,6 +465,25 @@ packages:
resolution: {integrity: sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==} resolution: {integrity: sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==}
engines: {node: '>=12.0.0'} engines: {node: '>=12.0.0'}
immutable@4.3.7:
resolution: {integrity: sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==}
is-binary-path@2.1.0:
resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
engines: {node: '>=8'}
is-extglob@2.1.1:
resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
engines: {node: '>=0.10.0'}
is-glob@4.0.3:
resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
engines: {node: '>=0.10.0'}
is-number@7.0.0:
resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
engines: {node: '>=0.12.0'}
lodash-es@4.17.21: lodash-es@4.17.21:
resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==} resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
@@ -458,16 +510,28 @@ packages:
engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
hasBin: true hasBin: true
normalize-path@3.0.0:
resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
engines: {node: '>=0.10.0'}
path-browserify@1.0.1: path-browserify@1.0.1:
resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==} resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
picocolors@1.0.1: picocolors@1.0.1:
resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==} resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==}
picomatch@2.3.1:
resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
engines: {node: '>=8.6'}
postcss@8.4.41: postcss@8.4.41:
resolution: {integrity: sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==} resolution: {integrity: sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==}
engines: {node: ^10 || ^12 || >=14} engines: {node: ^10 || ^12 || >=14}
readdirp@3.6.0:
resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
engines: {node: '>=8.10.0'}
regenerator-runtime@0.14.1: regenerator-runtime@0.14.1:
resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==} resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
@@ -476,6 +540,11 @@ packages:
engines: {node: '>=18.0.0', npm: '>=8.0.0'} engines: {node: '>=18.0.0', npm: '>=8.0.0'}
hasBin: true hasBin: true
sass@1.77.8:
resolution: {integrity: sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==}
engines: {node: '>=14.0.0'}
hasBin: true
seemly@0.3.8: seemly@0.3.8:
resolution: {integrity: sha512-MW8Qs6vbzo0pHmDpFSYPna+lwpZ6Zk1ancbajw/7E8TKtHdV+1DfZZD+kKJEhG/cAoB/i+LiT+5msZOqj0DwRA==} resolution: {integrity: sha512-MW8Qs6vbzo0pHmDpFSYPna+lwpZ6Zk1ancbajw/7E8TKtHdV+1DfZZD+kKJEhG/cAoB/i+LiT+5msZOqj0DwRA==}
@@ -492,6 +561,10 @@ packages:
resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==} resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
engines: {node: '>=4'} engines: {node: '>=4'}
to-regex-range@5.0.1:
resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
engines: {node: '>=8.0'}
treemate@0.3.11: treemate@0.3.11:
resolution: {integrity: sha512-M8RGFoKtZ8dF+iwJfAJTOH/SM4KluKOKRJpjCMhI8bG3qB74zrFoArKZ62ll0Fr3mqkMJiQOmWYkdYgDeITYQg==} resolution: {integrity: sha512-M8RGFoKtZ8dF+iwJfAJTOH/SM4KluKOKRJpjCMhI8bG3qB74zrFoArKZ62ll0Fr3mqkMJiQOmWYkdYgDeITYQg==}
@@ -731,9 +804,11 @@ snapshots:
dependencies: dependencies:
undici-types: 6.13.0 undici-types: 6.13.0
'@vitejs/plugin-vue@5.1.2(vite@5.4.0(@types/node@22.1.0))(vue@3.4.37(typescript@5.5.4))': '@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))':
dependencies: dependencies:
vite: 5.4.0(@types/node@22.1.0) vite: 5.4.0(@types/node@22.1.0)(sass@1.77.8)
vue: 3.4.37(typescript@5.5.4) vue: 3.4.37(typescript@5.5.4)
'@volar/language-core@2.4.0-alpha.18': '@volar/language-core@2.4.0-alpha.18':
@@ -820,14 +895,37 @@ snapshots:
'@vue/shared@3.4.37': {} '@vue/shared@3.4.37': {}
anymatch@3.1.3:
dependencies:
normalize-path: 3.0.0
picomatch: 2.3.1
async-validator@4.2.5: {} async-validator@4.2.5: {}
balanced-match@1.0.2: {} balanced-match@1.0.2: {}
binary-extensions@2.3.0: {}
brace-expansion@2.0.1: brace-expansion@2.0.1:
dependencies: dependencies:
balanced-match: 1.0.2 balanced-match: 1.0.2
braces@3.0.3:
dependencies:
fill-range: 7.1.1
chokidar@3.6.0:
dependencies:
anymatch: 3.1.3
braces: 3.0.3
glob-parent: 5.1.2
is-binary-path: 2.1.0
is-glob: 4.0.3
normalize-path: 3.0.0
readdirp: 3.6.0
optionalDependencies:
fsevents: 2.3.3
computeds@0.0.1: {} computeds@0.0.1: {}
css-render@0.15.14: css-render@0.15.14:
@@ -881,13 +979,35 @@ snapshots:
evtd@0.2.4: {} evtd@0.2.4: {}
fill-range@7.1.1:
dependencies:
to-regex-range: 5.0.1
fsevents@2.3.3: fsevents@2.3.3:
optional: true optional: true
glob-parent@5.1.2:
dependencies:
is-glob: 4.0.3
he@1.2.0: {} he@1.2.0: {}
highlight.js@11.10.0: {} highlight.js@11.10.0: {}
immutable@4.3.7: {}
is-binary-path@2.1.0:
dependencies:
binary-extensions: 2.3.0
is-extglob@2.1.1: {}
is-glob@4.0.3:
dependencies:
is-extglob: 2.1.1
is-number@7.0.0: {}
lodash-es@4.17.21: {} lodash-es@4.17.21: {}
lodash@4.17.21: {} lodash@4.17.21: {}
@@ -927,16 +1047,24 @@ snapshots:
nanoid@3.3.7: {} nanoid@3.3.7: {}
normalize-path@3.0.0: {}
path-browserify@1.0.1: {} path-browserify@1.0.1: {}
picocolors@1.0.1: {} picocolors@1.0.1: {}
picomatch@2.3.1: {}
postcss@8.4.41: postcss@8.4.41:
dependencies: dependencies:
nanoid: 3.3.7 nanoid: 3.3.7
picocolors: 1.0.1 picocolors: 1.0.1
source-map-js: 1.2.0 source-map-js: 1.2.0
readdirp@3.6.0:
dependencies:
picomatch: 2.3.1
regenerator-runtime@0.14.1: {} regenerator-runtime@0.14.1: {}
rollup@4.20.0: rollup@4.20.0:
@@ -961,6 +1089,12 @@ snapshots:
'@rollup/rollup-win32-x64-msvc': 4.20.0 '@rollup/rollup-win32-x64-msvc': 4.20.0
fsevents: 2.3.3 fsevents: 2.3.3
sass@1.77.8:
dependencies:
chokidar: 3.6.0
immutable: 4.3.7
source-map-js: 1.2.0
seemly@0.3.8: {} seemly@0.3.8: {}
semver@7.6.3: {} semver@7.6.3: {}
@@ -969,6 +1103,10 @@ snapshots:
to-fast-properties@2.0.0: {} to-fast-properties@2.0.0: {}
to-regex-range@5.0.1:
dependencies:
is-number: 7.0.0
treemate@0.3.11: {} treemate@0.3.11: {}
typescript@5.5.4: {} typescript@5.5.4: {}
@@ -980,7 +1118,7 @@ snapshots:
evtd: 0.2.4 evtd: 0.2.4
vue: 3.4.37(typescript@5.5.4) vue: 3.4.37(typescript@5.5.4)
vite@5.4.0(@types/node@22.1.0): vite@5.4.0(@types/node@22.1.0)(sass@1.77.8):
dependencies: dependencies:
esbuild: 0.21.5 esbuild: 0.21.5
postcss: 8.4.41 postcss: 8.4.41
@@ -988,6 +1126,7 @@ snapshots:
optionalDependencies: optionalDependencies:
'@types/node': 22.1.0 '@types/node': 22.1.0
fsevents: 2.3.3 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.4.37(typescript@5.5.4)):
dependencies: dependencies:
src/App.vue
+137 -12
View File
@@ -1,20 +1,145 @@
<script setup lang="ts"> <script setup lang="ts">
import { NBreadcrumbItem, NBreadcrumb } from 'naive-ui' import { onMounted, reactive } from 'vue';
import type { stats, file, directory } from '@/types/type.ts' import { NIcon } from 'naive-ui';
import VirtualDirectory from '@/class/virtualDirectory'; import { EyeOffOutline, EyeOutline, CloseOutline, AddOutline } from '@vicons/ionicons5'
// import test from './hooks/test.ts'; import miaoDirectory from './views/miaoDirectory.vue';
import VirtualPage from './class/virtualPage';
const testData: string[] = ['111', '222', '333'] const views = reactive<VirtualPage[]>([])
const createView = () => {
views.push(reactive<VirtualPage>(new VirtualPage()))
}
const deleteView = (index: number) => {
views.splice(index, 1)
if(views.length === 0){
createView()
}
}
onMounted(() => {
createView()
})
</script> </script>
<template> <template>
<n-breadcrumb separator=">"> <div class="view-controler">
<n-breadcrumb-item v-for="(title, index) in testData"> <div class="tag" v-for="(view, index) of views" :key="view.uid">
{{ title }} <div class="tag-title">{{ view.title }}</div>
</n-breadcrumb-item> <div class="tag-control">
</n-breadcrumb> <n-icon class="tag-control-icon icon" @click="view.switchShow()">
<div>miao</div> <EyeOutline v-show="view.visible" class="icon-inner" />
<EyeOffOutline v-show="!view.visible" class="icon-inner" />
</n-icon>
<n-icon class="tag-control-icon icon" @click="deleteView(index)">
<CloseOutline class="icon-inner" />
</n-icon>
</div>
</div>
<div class="tag-short">
<n-icon class="icon icon-larger" @click="createView()" size="20">
<AddOutline class="icon-inner" />
</n-icon>
</div>
</div>
<div class="view-container">
<div class="view" v-for="(view) of views" v-show="view.visible" :key="view.uid">
<!-- title: {{ view.title }} -->
<miao-directory @on-title-change="(_t) => view.setTitle(_t)"></miao-directory>
</div>
</div>
</template> </template>
<style scoped></style> <style lang="scss" scoped>
$controler-height: 25px;
.view-controler {
display: flex;
height: $controler-height;
width: 100%;
overflow: hidden;
.tag-short {
position: relative;
// margin-left: 5px;
height: $controler-height;
width: $controler-height;
display: flex;
justify-content: center;
align-items: center;
}
.tag {
position: relative;
width: 170px;
// flex: 1;
margin: 0 5px;
display: flex;
border-radius: 5px 5px 0 0;
align-items: center;
&::after {
content: '';
height: calc($controler-height*0.6);
width: 1px;
border-right: 1px solid black;
position: absolute;
right: 0px;
}
.tag-title {
margin-left: 4px;
width: 70%;
user-select: none;
}
.tag-control {
position: absolute;
right: 10px;
display: flex;
align-items: center;
.tag-control-icon:not(:last-child) {
margin-right: 5px;
}
}
}
.icon {
height: calc($controler-height * 0.7);
width: calc($controler-height * 0.7);
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
background-color: rgba(128, 128, 128, 0);
transition: background-color 0.3s;
&:hover {
background-color: rgba(128, 128, 128, 0.4);
}
}
.icon-larger {
height: calc($controler-height * 0.85);
width: calc($controler-height * 0.85);
}
}
.view-container {
position: relative;
display: flex;
height: calc(100% - $controler-height);
.view {
border: 1px solid black;
margin: 0 5px;
padding: 3px;
flex: 1;
}
}
</style>
src/class/virtualDirectory.ts
+90 -44
View File
@@ -1,51 +1,97 @@
import type { stats, file, directory } from '@/types/type.ts' import type { stats, file, directory } from "@/types/type.ts";
class VirtualFile { class VirtualFile {
constructor(info: file, parent: VirtualDirectory) { constructor(info: file, parent: VirtualDirectory) {
this.name = info.name this.name = info.name;
this.size = info.size this.size = info.size;
this.stats = info.stats this.stats = info.stats;
this.parent = parent this.parent = parent;
} this.type = "file";
name: string }
size: number name: string;
stats: stats type: "file";
parent: VirtualDirectory size: number;
get path() { stats: stats;
return `${this.parent.path}${this.name}` parent: VirtualDirectory;
} get path() {
return `${this.parent.path}${this.name}`;
}
} }
class VirtualDirectory { class VirtualDirectory {
constructor(info: directory, parent: VirtualDirectory) { constructor(info: directory, parent?: VirtualDirectory) {
this.name = info.name this.name = info.name;
this.type = info.type this.type = "directory";
this.stats = info.stats this.stats = info.stats;
this.parent = parent ?? undefined this.parent = parent ?? undefined;
// 这里要改 // 这里要改
this.content = info.content.map((v) => { }
if (v.type === 'file') { // 文件夹名
return new VirtualFile(v, this) name: string;
} else { // 子文件
return new VirtualDirectory(v, this) files?: VirtualFile[];
} // 子目录
}) directorys?: VirtualDirectory[];
} // 没啥意义，标注一下就是了
name: string type: "directory";
content: (VirtualFile | VirtualDirectory)[] // 文件夹创建时间等杂项属性
type: 'directory' stats: stats;
stats: stats // 父文件夹
parent?: VirtualDirectory parent?: VirtualDirectory;
/** /**
* 相对于根目录的路径， 如: "/", "/123/321/" * 获取相对于根目录的路径的层数
* @returns {string} * 用于目录下文件定位
*/ * @returns {string}
get path(): string { */
if (!this.parent) { get layer(): number {
return '/' return this.parent ? this.parent.layer + 1 : 0;
} }
return `${this.parent.path}${this.name}/` /**
} * 相对于根目录的路径， 如: "/", "/123/321/"
* 用于目录下文件定位
* @returns {string}
*/
get path(): string {
if (!this.parent) {
return "/";
}
return `${this.parent.path}${this.name}/`;
}
/**
* 获取从根目录开始的按顺序的文件夹
* @returns {VirtualDirectory[]}
*/
get directoryArray(): VirtualDirectory[] {
if (!this.parent) {
return [this];
}
return [...this.parent.directoryArray, this];
}
/**
* 获取 layer 级父文件夹, 如getParent(1)就返回父级
* @param {number} layer 需要跳转的层数
* @returns {VirtualDirectory}
*/
getParent(layer: number): VirtualDirectory {
if (layer <= 0 || !this.parent) {
return this;
}
return this.parent.getParent(layer - 1);
}
setContent(content: (file | directory)[]) {
this.files = [];
this.directorys = [];
for (let item of content) {
if (item.type === "file") {
this.files.push(new VirtualFile(item, this));
} else if (item.type === "directory") {
this.directorys.push(new VirtualDirectory(item, this));
}
}
}
} }
export default VirtualDirectory export default VirtualDirectory;
src/class/virtualPage.ts
+22
View File
@@ -0,0 +1,22 @@
import { ref, Ref } from "vue";
export default class VirtualPage {
constructor() {
this.visible = ref<boolean>(true);
this.title = ref<string>("");
this.uid = Math.ceil(Math.random() * 10000000000000);
}
visible: Ref<boolean>;
title: Ref<string>;
uid: number;
switchShow() {
// @ts-ignore 你只要知道这是对的就行了
this.visible = !this.visible;
}
setTitle(newTitle: string) {
// @ts-ignore 你只要知道这是对的就行了
this.title = newTitle;
}
}
src/components/miaoHeader.vue
+10
View File
@@ -0,0 +1,10 @@
<template>
<div class="container">
</div>
</template>
<script lang="ts" setup>
</script>
<style lang="scss" scoped></style>
src/config.ts
+3 -2
View File
@@ -1,3 +1,4 @@
export default { export default {
baseUrl: 'http://127.0.0.1:17705/' baseUrl: "http://127.0.0.1:17705",
} uploadSizeLimit: 1024 * 1024 * 100
};
src/hooks/dropHandler.ts
+94
View File
@@ -0,0 +1,94 @@
import config from "@/config";
const { uploadSizeLimit } = config;
type dropHandlerHooks = {
onDrop?: (files: File[]) => void;
onEnter?: () => void;
/**
* 当拖动时
*/
onOver?: () => void;
onLeave?: () => void;
};
const isFile = (file: File) =>
new Promise(resolve => {
const reader = new FileReader();
reader.onload = () => {
resolve(true);
reader.abort();
};
reader.onerror = () => {
resolve(false);
reader.abort();
};
reader.readAsText(file);
});
/**
* 只保留文件，移去文件夹
* @param {File[]} files
*/
const filesFilter = async (files: File[]) => {
let index = 0;
while (index < files.length) {
const currentFile = files[index];
const _isFile = await isFile(currentFile);
console.log(_isFile);
if (_isFile) {
index += 1;
continue;
} else {
files.splice(index, 1);
continue;
}
}
};
export default function dropHandler(dom: HTMLDivElement, hooks?: dropHandlerHooks) {
console.log(dom);
dom.addEventListener(
"dragenter",
function (e) {
e.preventDefault();
e.stopPropagation();
hooks?.onEnter && hooks?.onEnter();
},
false
);
dom.addEventListener(
"dragover",
function (e) {
e.preventDefault();
e.stopPropagation();
hooks?.onOver && hooks?.onOver();
},
false
);
dom.addEventListener(
"dragleave",
function (e) {
e.preventDefault();
e.stopPropagation();
hooks?.onLeave && hooks?.onLeave();
},
false
);
dom.addEventListener(
"drop",
async function (e) {
// console.log(e, e.dataTransfer?.types);
e.preventDefault();
e.stopPropagation();
const files = [...(e.dataTransfer?.files ?? [])].filter(file => file.size < uploadSizeLimit);
await filesFilter(files);
hooks?.onDrop && hooks.onDrop(files);
},
false
);
}
src/types/type.ts
+17 -16
View File
@@ -1,21 +1,22 @@
export type stats = { export type stats = {
atimeMs: number // 上次访问时间（毫秒） atimeMs: number; // 上次访问时间（毫秒）
birthtimeMs: number // 创建时间（毫秒） birthtimeMs: number; // 创建时间（毫秒）
ctimeMs: number // 状态更改时间（毫秒） ctimeMs: number; // 状态更改时间（毫秒）
mtimeMs: number // 上次修改时间（毫秒） mtimeMs: number; // 上次修改时间（毫秒）
} };
export type file = { export type file = {
name: string name: string;
size: number size: number;
type: 'file' type?: "file";
stats: stats stats: stats;
} };
export type directory = { export type directory = {
name: string name: string;
content: (file | directory)[] // 考虑到可能还没请求过来
type: 'directory' content?: (file | directory)[];
stats: stats type?: "directory";
parent?: directory stats: stats;
} parent?: directory;
};
src/views/miaoDirectory.vue
+72
View File
@@ -0,0 +1,72 @@
<template>
<div class="container" ref="rootDom">
<n-breadcrumb separator=">">
<n-breadcrumb-item v-for="(dir) in currentDirectory?.directoryArray" @click="setCurrentDirectory(dir)">
{{ dir.name }}
</n-breadcrumb-item>
</n-breadcrumb>
<button v-for="(dir) in currentDirectory?.directorys" @click="setCurrentDirectory(dir)" style="display: block;">
{{ `dir ===> ${dir.name}` }}
</button>
<a v-for="(file) in currentDirectory?.files" :href="`${baseUrl}/get${file.path}`" target="_blank" style="display: block;">
{{ `file ===> ${file.name}` }}
</a>
</div>
</template>
<script setup lang="ts">
import { NBreadcrumbItem, NBreadcrumb } from 'naive-ui'
import type { file, directory } from '@/types/type.ts'
import VirtualDirectory from '@/class/virtualDirectory';
import { onMounted, ref } from 'vue';
import Config from '@/config'
import dropHandler from '@/hooks/dropHandler';
const emit = defineEmits<{
(e: 'onTitleChange', title: string): void
}>()
const { baseUrl } = Config
const rootDom = ref<HTMLDivElement>()
const rootDirectory = new VirtualDirectory({
name: '根目录',
stats: {
atimeMs: 0,
birthtimeMs: 0,
ctimeMs: 0,
mtimeMs: 0,
}
})
const currentDirectory = ref<VirtualDirectory | undefined>(rootDirectory)
// 设置显示的dir
const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
if (virtualDirectory.files === undefined && virtualDirectory.directorys === undefined) {
const data: (file | directory)[] = await (await fetch(`${baseUrl}/get${virtualDirectory.path}`)).json()
virtualDirectory.setContent(data)
}
// 刷新一下
currentDirectory.value = undefined
currentDirectory.value = virtualDirectory
emit("onTitleChange", currentDirectory.value.name)
}
onMounted(async () => {
await setCurrentDirectory(rootDirectory)
rootDom.value && dropHandler(rootDom.value, {
onDrop(files){
console.log(files, files.map(v=>v.name))
}
})
})
</script>
<style scoped lang="scss">
.container {
height: 100%;
width: 100%;
}
</style>