update
This commit is contained in:
1 parent
4ce50f697b
commit
d9363d3b93
12 files changed
+585
-66
No files matched your search
@@ -23,3 +23,4 @@ dist-ssr
|
||||
*.sln
|
||||
*.sw?
|
||||
.vscode
|
||||
serve
|
||||
+7
-1
@@ -1,4 +1,4 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
@@ -10,4 +10,10 @@
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
<style>
|
||||
#app{
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
@@ -9,7 +9,9 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vicons/ionicons5": "^0.12.0",
|
||||
"naive-ui": "^2.39.0",
|
||||
"sass": "^1.77.8",
|
||||
"vue": "^3.4.35"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
Generated
+144
-5
@@ -8,9 +8,15 @@ importers:
|
||||
|
||||
.:
|
||||
dependencies:
|
||||
'@vicons/ionicons5':
|
||||
specifier: ^0.12.0
|
||||
version: 0.12.0
|
||||
naive-ui:
|
||||
specifier: ^2.39.0
|
||||
version: 2.39.0(vue@3.4.37(typescript@5.5.4))
|
||||
sass:
|
||||
specifier: ^1.77.8
|
||||
version: 1.77.8
|
||||
vue:
|
||||
specifier: ^3.4.35
|
||||
version: 3.4.37(typescript@5.5.4)
|
||||
@@ -20,13 +26,13 @@ importers:
|
||||
version: 22.1.0
|
||||
'@vitejs/plugin-vue':
|
||||
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:
|
||||
specifier: ^5.5.3
|
||||
version: 5.5.4
|
||||
vite:
|
||||
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:
|
||||
specifier: ^2.0.29
|
||||
version: 2.0.29(typescript@5.5.4)
|
||||
@@ -315,6 +321,9 @@ packages:
|
||||
'@types/node@22.1.0':
|
||||
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':
|
||||
resolution: {integrity: sha512-nY9IwH12qeiJqumTCLJLE7IiNx7HZ39cbHaysEUd+Myvbz9KAqd2yq+U01Kab1R/H1BmiyM2ShTYlNH32Fzo3A==}
|
||||
engines: {node: ^18.0.0 || >=20.0.0}
|
||||
@@ -371,15 +380,31 @@ packages:
|
||||
'@vue/shared@3.4.37':
|
||||
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:
|
||||
resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
|
||||
|
||||
balanced-match@1.0.2:
|
||||
resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
|
||||
|
||||
binary-extensions@2.3.0:
|
||||
resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
|
||||
engines: {node: '>=8'}
|
||||
|
||||
brace-expansion@2.0.1:
|
||||
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:
|
||||
resolution: {integrity: sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==}
|
||||
|
||||
@@ -419,11 +444,19 @@ packages:
|
||||
evtd@0.2.4:
|
||||
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:
|
||||
resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
|
||||
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
|
||||
os: [darwin]
|
||||
|
||||
glob-parent@5.1.2:
|
||||
resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
|
||||
engines: {node: '>= 6'}
|
||||
|
||||
he@1.2.0:
|
||||
resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
|
||||
hasBin: true
|
||||
@@ -432,6 +465,25 @@ packages:
|
||||
resolution: {integrity: sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==}
|
||||
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:
|
||||
resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
|
||||
|
||||
@@ -458,16 +510,28 @@ packages:
|
||||
engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
|
||||
hasBin: true
|
||||
|
||||
normalize-path@3.0.0:
|
||||
resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
||||
path-browserify@1.0.1:
|
||||
resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
|
||||
|
||||
picocolors@1.0.1:
|
||||
resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==}
|
||||
|
||||
picomatch@2.3.1:
|
||||
resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
|
||||
engines: {node: '>=8.6'}
|
||||
|
||||
postcss@8.4.41:
|
||||
resolution: {integrity: sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==}
|
||||
engines: {node: ^10 || ^12 || >=14}
|
||||
|
||||
readdirp@3.6.0:
|
||||
resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
|
||||
engines: {node: '>=8.10.0'}
|
||||
|
||||
regenerator-runtime@0.14.1:
|
||||
resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
|
||||
|
||||
@@ -476,6 +540,11 @@ packages:
|
||||
engines: {node: '>=18.0.0', npm: '>=8.0.0'}
|
||||
hasBin: true
|
||||
|
||||
sass@1.77.8:
|
||||
resolution: {integrity: sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==}
|
||||
engines: {node: '>=14.0.0'}
|
||||
hasBin: true
|
||||
|
||||
seemly@0.3.8:
|
||||
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==}
|
||||
engines: {node: '>=4'}
|
||||
|
||||
to-regex-range@5.0.1:
|
||||
resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
|
||||
engines: {node: '>=8.0'}
|
||||
|
||||
treemate@0.3.11:
|
||||
resolution: {integrity: sha512-M8RGFoKtZ8dF+iwJfAJTOH/SM4KluKOKRJpjCMhI8bG3qB74zrFoArKZ62ll0Fr3mqkMJiQOmWYkdYgDeITYQg==}
|
||||
|
||||
@@ -731,9 +804,11 @@ snapshots:
|
||||
dependencies:
|
||||
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:
|
||||
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)
|
||||
|
||||
'@volar/language-core@2.4.0-alpha.18':
|
||||
@@ -820,14 +895,37 @@ snapshots:
|
||||
|
||||
'@vue/shared@3.4.37': {}
|
||||
|
||||
anymatch@3.1.3:
|
||||
dependencies:
|
||||
normalize-path: 3.0.0
|
||||
picomatch: 2.3.1
|
||||
|
||||
async-validator@4.2.5: {}
|
||||
|
||||
balanced-match@1.0.2: {}
|
||||
|
||||
binary-extensions@2.3.0: {}
|
||||
|
||||
brace-expansion@2.0.1:
|
||||
dependencies:
|
||||
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: {}
|
||||
|
||||
css-render@0.15.14:
|
||||
@@ -881,13 +979,35 @@ snapshots:
|
||||
|
||||
evtd@0.2.4: {}
|
||||
|
||||
fill-range@7.1.1:
|
||||
dependencies:
|
||||
to-regex-range: 5.0.1
|
||||
|
||||
fsevents@2.3.3:
|
||||
optional: true
|
||||
|
||||
glob-parent@5.1.2:
|
||||
dependencies:
|
||||
is-glob: 4.0.3
|
||||
|
||||
he@1.2.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@4.17.21: {}
|
||||
@@ -927,16 +1047,24 @@ snapshots:
|
||||
|
||||
nanoid@3.3.7: {}
|
||||
|
||||
normalize-path@3.0.0: {}
|
||||
|
||||
path-browserify@1.0.1: {}
|
||||
|
||||
picocolors@1.0.1: {}
|
||||
|
||||
picomatch@2.3.1: {}
|
||||
|
||||
postcss@8.4.41:
|
||||
dependencies:
|
||||
nanoid: 3.3.7
|
||||
picocolors: 1.0.1
|
||||
source-map-js: 1.2.0
|
||||
|
||||
readdirp@3.6.0:
|
||||
dependencies:
|
||||
picomatch: 2.3.1
|
||||
|
||||
regenerator-runtime@0.14.1: {}
|
||||
|
||||
rollup@4.20.0:
|
||||
@@ -961,6 +1089,12 @@ snapshots:
|
||||
'@rollup/rollup-win32-x64-msvc': 4.20.0
|
||||
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: {}
|
||||
|
||||
semver@7.6.3: {}
|
||||
@@ -969,6 +1103,10 @@ snapshots:
|
||||
|
||||
to-fast-properties@2.0.0: {}
|
||||
|
||||
to-regex-range@5.0.1:
|
||||
dependencies:
|
||||
is-number: 7.0.0
|
||||
|
||||
treemate@0.3.11: {}
|
||||
|
||||
typescript@5.5.4: {}
|
||||
@@ -980,7 +1118,7 @@ snapshots:
|
||||
evtd: 0.2.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:
|
||||
esbuild: 0.21.5
|
||||
postcss: 8.4.41
|
||||
@@ -988,6 +1126,7 @@ snapshots:
|
||||
optionalDependencies:
|
||||
'@types/node': 22.1.0
|
||||
fsevents: 2.3.3
|
||||
sass: 1.77.8
|
||||
|
||||
vooks@0.2.12(vue@3.4.37(typescript@5.5.4)):
|
||||
dependencies:
|
||||
|
||||
+137
-12
@@ -1,20 +1,145 @@
|
||||
<script setup lang="ts">
|
||||
import { NBreadcrumbItem, NBreadcrumb } from 'naive-ui'
|
||||
import type { stats, file, directory } from '@/types/type.ts'
|
||||
import VirtualDirectory from '@/class/virtualDirectory';
|
||||
// import test from './hooks/test.ts';
|
||||
import { onMounted, reactive } from 'vue';
|
||||
import { NIcon } from 'naive-ui';
|
||||
import { EyeOffOutline, EyeOutline, CloseOutline, AddOutline } from '@vicons/ionicons5'
|
||||
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>
|
||||
|
||||
<template>
|
||||
<n-breadcrumb separator=">">
|
||||
<n-breadcrumb-item v-for="(title, index) in testData">
|
||||
{{ title }}
|
||||
</n-breadcrumb-item>
|
||||
</n-breadcrumb>
|
||||
<div>miao</div>
|
||||
<div class="view-controler">
|
||||
<div class="tag" v-for="(view, index) of views" :key="view.uid">
|
||||
<div class="tag-title">{{ view.title }}</div>
|
||||
<div class="tag-control">
|
||||
<n-icon class="tag-control-icon icon" @click="view.switchShow()">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
@@ -1,51 +1,97 @@
|
||||
import type { stats, file, directory } from '@/types/type.ts'
|
||||
import type { stats, file, directory } from "@/types/type.ts";
|
||||
|
||||
class VirtualFile {
|
||||
constructor(info: file, parent: VirtualDirectory) {
|
||||
this.name = info.name
|
||||
this.size = info.size
|
||||
this.stats = info.stats
|
||||
this.parent = parent
|
||||
this.name = info.name;
|
||||
this.size = info.size;
|
||||
this.stats = info.stats;
|
||||
this.parent = parent;
|
||||
this.type = "file";
|
||||
}
|
||||
name: string
|
||||
size: number
|
||||
stats: stats
|
||||
parent: VirtualDirectory
|
||||
name: string;
|
||||
type: "file";
|
||||
size: number;
|
||||
stats: stats;
|
||||
parent: VirtualDirectory;
|
||||
get path() {
|
||||
return `${this.parent.path}${this.name}`
|
||||
return `${this.parent.path}${this.name}`;
|
||||
}
|
||||
}
|
||||
|
||||
class VirtualDirectory {
|
||||
constructor(info: directory, parent: VirtualDirectory) {
|
||||
this.name = info.name
|
||||
this.type = info.type
|
||||
this.stats = info.stats
|
||||
this.parent = parent ?? undefined
|
||||
constructor(info: directory, parent?: VirtualDirectory) {
|
||||
this.name = info.name;
|
||||
this.type = "directory";
|
||||
this.stats = info.stats;
|
||||
this.parent = parent ?? undefined;
|
||||
// 这里要改
|
||||
this.content = info.content.map((v) => {
|
||||
if (v.type === 'file') {
|
||||
return new VirtualFile(v, this)
|
||||
} else {
|
||||
return new VirtualDirectory(v, this)
|
||||
}
|
||||
})
|
||||
}
|
||||
name: string
|
||||
content: (VirtualFile | VirtualDirectory)[]
|
||||
type: 'directory'
|
||||
stats: stats
|
||||
parent?: VirtualDirectory
|
||||
// 文件夹名
|
||||
name: string;
|
||||
// 子文件
|
||||
files?: VirtualFile[];
|
||||
// 子目录
|
||||
directorys?: VirtualDirectory[];
|
||||
// 没啥意义,标注一下就是了
|
||||
type: "directory";
|
||||
// 文件夹创建时间等杂项属性
|
||||
stats: stats;
|
||||
// 父文件夹
|
||||
parent?: VirtualDirectory;
|
||||
|
||||
/**
|
||||
* 获取相对于根目录的路径的层数
|
||||
* 用于目录下文件定位
|
||||
* @returns {string}
|
||||
*/
|
||||
get layer(): number {
|
||||
return this.parent ? this.parent.layer + 1 : 0;
|
||||
}
|
||||
/**
|
||||
* 相对于根目录的路径, 如: "/", "/123/321/"
|
||||
* 用于目录下文件定位
|
||||
* @returns {string}
|
||||
*/
|
||||
get path(): string {
|
||||
if (!this.parent) {
|
||||
return '/'
|
||||
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));
|
||||
}
|
||||
}
|
||||
return `${this.parent.path}${this.name}/`
|
||||
}
|
||||
}
|
||||
export default VirtualDirectory
|
||||
export default VirtualDirectory;
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
+3
-2
@@ -1,3 +1,4 @@
|
||||
export default {
|
||||
baseUrl: 'http://127.0.0.1:17705/'
|
||||
}
|
||||
baseUrl: "http://127.0.0.1:17705",
|
||||
uploadSizeLimit: 1024 * 1024 * 100
|
||||
};
|
||||
@@ -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
|
||||
);
|
||||
}
|
||||
+17
-16
@@ -1,21 +1,22 @@
|
||||
export type stats = {
|
||||
atimeMs: number // 上次访问时间(毫秒)
|
||||
birthtimeMs: number // 创建时间(毫秒)
|
||||
ctimeMs: number // 状态更改时间(毫秒)
|
||||
mtimeMs: number // 上次修改时间(毫秒)
|
||||
}
|
||||
atimeMs: number; // 上次访问时间(毫秒)
|
||||
birthtimeMs: number; // 创建时间(毫秒)
|
||||
ctimeMs: number; // 状态更改时间(毫秒)
|
||||
mtimeMs: number; // 上次修改时间(毫秒)
|
||||
};
|
||||
|
||||
export type file = {
|
||||
name: string
|
||||
size: number
|
||||
type: 'file'
|
||||
stats: stats
|
||||
}
|
||||
name: string;
|
||||
size: number;
|
||||
type?: "file";
|
||||
stats: stats;
|
||||
};
|
||||
|
||||
export type directory = {
|
||||
name: string
|
||||
content: (file | directory)[]
|
||||
type: 'directory'
|
||||
stats: stats
|
||||
parent?: directory
|
||||
}
|
||||
name: string;
|
||||
// 考虑到可能还没请求过来
|
||||
content?: (file | directory)[];
|
||||
type?: "directory";
|
||||
stats: stats;
|
||||
parent?: directory;
|
||||
};
|
||||
@@ -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>
|
||||
Reference in new issue
Block a user