From 1d4feb471c3996c37f8b7e4cc77b714c0a2ae251 Mon Sep 17 00:00:00 2001 From: Miao_Spring <539943419@qq.com> Date: Sun, 11 Aug 2024 01:00:49 +0800 Subject: [PATCH] v1.0.0 --- src/App.vue | 28 +-- src/class/virtualDirectory.ts | 46 +++-- src/class/virtualPage.ts | 34 +++- .../miaoDirectory/miaoDirectoryItem.vue | 81 +++++++- src/components/miaoDirectory/miaoHeader.vue | 10 - src/components/miaoMask.vue | 1 + src/config.ts | 9 +- src/views/miaoDirectory.vue | 192 +++++++++++++++--- vite.config.ts | 44 +++- 9 files changed, 342 insertions(+), 103 deletions(-) delete mode 100644 src/components/miaoDirectory/miaoHeader.vue diff --git a/src/App.vue b/src/App.vue index ef7f8db..e4b1ffb 100644 --- a/src/App.vue +++ b/src/App.vue @@ -44,6 +44,7 @@ onMounted(() => {
{{ view.title }}
+
@@ -68,8 +69,8 @@ onMounted(() => {
-
- +
+
@@ -81,7 +82,7 @@ $controler-height: 25px; display: flex; height: $controler-height; width: 100%; - background-color: #f2f2f2; + background-color: #dadada; // overflow: hidden; .tags-container { @@ -100,10 +101,17 @@ $controler-height: 25px; .tag-title { margin-left: 4px; - width: 70%; + // width: 70%; user-select: none; } + .tag-point { + height: 5px; + aspect-ratio: 1; + border-radius: 66px; + margin-left: 5px; + } + .tag-control { position: absolute; right: 10px; @@ -172,6 +180,10 @@ $controler-height: 25px; height: calc(100% - $controler-height); overflow-y: overlay; overflow-x: overlay; + .view { + flex: 1; + height: 100%; + } &::-webkit-scrollbar { position: absolute; width: 4px; @@ -190,13 +202,5 @@ $controler-height: 25px; background: #999999; } - .view { - // border: 1px solid black; - // outline: 1px solid black; - // margin: 0 5px; - // padding: 3px; - flex: 1; - height: 100%; - } } diff --git a/src/class/virtualDirectory.ts b/src/class/virtualDirectory.ts index 2fbd0d1..9f00026 100644 --- a/src/class/virtualDirectory.ts +++ b/src/class/virtualDirectory.ts @@ -8,14 +8,14 @@ export class VirtualFile { this.stats = info.stats; this.parent = parent; this.type = "file"; - this.uid = generateId() + this.uid = generateId(); } name: string; type: "file"; size: number; stats: stats; parent: VirtualDirectory; - uid: number + uid: number; get path() { return `${this.parent.path}${this.name}`; } @@ -27,7 +27,7 @@ class VirtualDirectory { this.type = "directory"; this.stats = info.stats; this.parent = parent ?? undefined; - this.uid = generateId() + this.uid = generateId(); } // 文件夹名 name: string; @@ -42,7 +42,7 @@ class VirtualDirectory { // 父文件夹 parent?: VirtualDirectory; - uid: number + uid: number; /** * 获取相对于根目录的路径的层数 @@ -87,37 +87,45 @@ class VirtualDirectory { return this.parent.getParent(layer - 1); } - setContent(content: (file | directory)[]) { + updateContent(content: (file | directory)[]) { this.files = this.files ?? []; this.directorys = this.directorys ?? []; - const fileNames:string[] = this.files.map(v=>v.name) - const dirNames:string[] = this.directorys.map(v=>v.name) - const itemNames:string[] = content.map(v=>v.name) + const fileNames: string[] = this.files.map(v => v.name); + const dirNames: string[] = this.directorys.map(v => v.name); + const itemNames: string[] = content.map(v => v.name); // 删去远程端已不存在的文件与文件夹 const _delete = (target: (VirtualFile | VirtualDirectory)[]) => { - let index = 0 - while(index < target.length){ - if(!itemNames.includes(target[index].name)){ - target.splice(index, 1) - }else{ - index += 1 + let index = 0; + while (index < target.length) { + if (!itemNames.includes(target[index].name)) { + target.splice(index, 1); + } else { + index += 1; } } - } - _delete(this.files) - _delete(this.directorys) + }; + _delete(this.files); + _delete(this.directorys); // 加入新的文件与文件夹 for (let item of content) { if (item.type === "file") { - if(!fileNames.includes(item.name)){ + if (!fileNames.includes(item.name)) { this.files.push(new VirtualFile(item, this)); } } else if (item.type === "directory") { - if(!dirNames.includes(item.name)){ + if (!dirNames.includes(item.name)) { this.directorys.push(new VirtualDirectory(item, this)); } } } } + + hasChild(item: VirtualDirectory | VirtualFile): boolean { + if (item.type === "directory") { + return this.directorys?.includes(item) ?? false; + } else { + return this.files?.includes(item) ?? false; + } + } } export default VirtualDirectory; diff --git a/src/class/virtualPage.ts b/src/class/virtualPage.ts index 7601145..81fbf9d 100644 --- a/src/class/virtualPage.ts +++ b/src/class/virtualPage.ts @@ -1,36 +1,48 @@ import VirtualDirectory from "./virtualDirectory"; import generateId from "@/hooks/generateId"; +const getRandomWebSafeColor = (() => { + const webSafeColors = ["#009900", "#999900", "#009999", "#990099", "#0000ee"]; + let counter = 0 + return () => { + const color = webSafeColors[counter % webSafeColors.length] + counter += 1 + return color; + }; +})(); + export default class VirtualPage { constructor(initDirectory: VirtualDirectory) { this.visible = true; - this.uid = generateId() - this.currentDirectory = initDirectory - this.refreshKey = Math.random() + this.uid = generateId(); + this.currentDirectory = initDirectory; + this.refreshKey = Math.random(); + this.color = getRandomWebSafeColor(); } visible: boolean; currentDirectory: VirtualDirectory; // 区分每一个页面的唯一id uid: number; // 当refreshKey改变时需要刷新页面，目前还没接入刷新 - refreshKey:number; + refreshKey: number; - get title(){ - return this.currentDirectory.name + color: string; + + get title() { + return this.currentDirectory.name; } // 切换显示状态 switchShow() { this.visible = !this.visible; } - + // 设置（同步）正在展示的文件夹 setCurrrentDirectory(currDir: VirtualDirectory) { - this.currentDirectory = currDir + this.currentDirectory = currDir; } - refresh(){ - this.refreshKey = Math.random() + refresh() { + this.refreshKey = Math.random(); } - } diff --git a/src/components/miaoDirectory/miaoDirectoryItem.vue b/src/components/miaoDirectory/miaoDirectoryItem.vue index f560203..9c8eceb 100644 --- a/src/components/miaoDirectory/miaoDirectoryItem.vue +++ b/src/components/miaoDirectory/miaoDirectoryItem.vue @@ -1,6 +1,7 @@ diff --git a/src/components/miaoDirectory/miaoHeader.vue b/src/components/miaoDirectory/miaoHeader.vue deleted file mode 100644 index f8a2d5a..0000000 --- a/src/components/miaoDirectory/miaoHeader.vue +++ /dev/null @@ -1,10 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/components/miaoMask.vue b/src/components/miaoMask.vue index 72f3796..9145ca9 100644 --- a/src/components/miaoMask.vue +++ b/src/components/miaoMask.vue @@ -24,6 +24,7 @@ const showMask = defineModel('show', { default: false, require justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.3); + z-index: 7058214053994319; &-show { display: flex; transition: opacity 0.3s 0.01s; diff --git a/src/config.ts b/src/config.ts index f4aad62..d3ee6e1 100644 --- a/src/config.ts +++ b/src/config.ts @@ -1,4 +1,9 @@ +const baseUrl = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : ''); + export default { - baseUrl: "http://127.0.0.1:17705", - uploadSizeLimit: 1024 * 1024 * 100 + baseUrl, + uploadSizeLimit: 1024 * 1024 * 100, + api: { + get: '/get' + } }; diff --git a/src/views/miaoDirectory.vue b/src/views/miaoDirectory.vue index 81989a7..84ab16e 100644 --- a/src/views/miaoDirectory.vue +++ b/src/views/miaoDirectory.vue @@ -1,28 +1,55 @@