fix: 更改錯別字

.gitignore

@@ -1,3 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
 dist
-static
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.vscode
+serve

README.md

@@ -0,0 +1,8 @@
+todo: 标签页，miaoDirectory切换动画                      [finish]
+todo: 重构virtualPage，所有page以插件形式使用             [finish]
+todo: miaoDirectory插件化，为后续插件功能开发做准备       [finish]
+todo: miaoPopupInput, 弹出一个输入框
+todo: miaoDirectory的新建文件/文件夹功能
+todo: miaoDirectory的重命名功能
+todo: miaoDirectory的多选功能
+todo: VirtualDirectory更新时更新文件信息

api/useCutApi.js

@@ -1,33 +0,0 @@
-import { api, staticPath } from "../config.js";
-import path from "path";
-import useFsOperateEventCenter from "../hooks/useFsOperateEventCenter.js";
-import fs from "fs";
-import express from "express";
-
-const fsOperateEventCenter = useFsOperateEventCenter();
-
-function cutPath(targetPath, newPath) {
-	return new Promise((resolve, reject) => {
-		fs.stat(targetPath, (err, stats) => {
-			if (err) {
-				console.log(err);
-				return reject(err);
-			}
-
-			fs.rename(targetPath, newPath, err => {
-				if (err) return reject(err);
-				resolve();
-			});
-		});
-	});
-}
-
-export default function useCutApi(app) {
-	app.post(api.cut, express.json(), (req, res) => {
-		const decodedPath = decodeURIComponent(req.path).substring(api.cut.length - 1);
-		const targetPath = path.join(staticPath, decodedPath);
-		const newPath = path.join(staticPath, req.body.newPath, path.basename(targetPath));
-		const eventId = fsOperateEventCenter.push(cutPath(targetPath, newPath));
-		res.send({ eventId });
-	});
-}

api/useDeleteApi.js

@@ -1,40 +0,0 @@
-import { api, staticPath } from "../config.js";
-import path from "path";
-import useFsOperateEventCenter from "../hooks/useFsOperateEventCenter.js";
-import fs from 'fs'
-
-const fsOperateEventCenter = useFsOperateEventCenter()
-
-function deletePath(targetPath) {
-    return new Promise((resolve, reject) => {
-        fs.stat(targetPath, (err, stats) => {
-            if (err) {
-                console.log(err)
-                return reject(err);
-            }
-
-            if (stats.isFile()) {
-                fs.rm(targetPath, { recursive: true }, (err) => {
-                    if (err) return reject(err);
-                    resolve();
-                });
-            } else if (stats.isDirectory()) {
-                fs.rm(targetPath, { recursive: true }, (err) => {
-                    if (err) return reject(err);
-                    resolve();
-                });
-            } else {
-                reject('unknow file');
-            }
-        });
-    });
-}
-
-export default function useDeleteApi(app) {
-	app.post(api.delete, (req, res) => {
-		const decodedPath = decodeURIComponent(req.path).substring(api.delete.length - 1);
-		const targetPath = path.join(staticPath, decodedPath);
-        const eventId = fsOperateEventCenter.push(deletePath(targetPath))
-		res.send({ eventId });
-	});
-}

api/useGetApi.js

@@ -1,50 +0,0 @@
-import express from "express";
-import path from "path";
-import fs from "fs";
-import { staticPath, api } from "../config.js";
-
-const api_get = api.get
-
-export default function useGetApi(app) {
-    // 不存在文件与文件夹同名的问题
-	app.use(api_get, (req, res, next) => {
-		const decodedPath = decodeURIComponent(req.path);
-		const directoryPath = path.join(staticPath, decodedPath);
-		fs.stat(directoryPath, (err, stats) => {
-			if (err) {
-				console.log(err, directoryPath);
-				// return res.status(500).json({ error: "Unable to access path" });
-				return next();
-			}
-
-			if (stats.isDirectory()) {
-				fs.readdir(directoryPath, (err, files) => {
-					if (err) {
-						console.log(err, directoryPath);
-						return res.status(500).json({ error: "Unable to scan directory" });
-					}
-					const fileDetails = files.map(file => {
-						const filePath = path.join(directoryPath, file);
-						const stats = fs.statSync(filePath);
-						return {
-							name: file,
-							size: stats.isDirectory() ? undefined : stats.size,
-							type: stats.isDirectory() ? "directory" : "file",
-							stats: {
-								atimeMs: stats.atimeMs,
-								birthtimeMs: stats.birthtimeMs,
-								ctimeMs: stats.ctimeMs,
-								mtimeMs: stats.mtimeMs
-							}
-						};
-					});
-					res.json(fileDetails);
-				});
-			} else {
-				next();
-			}
-		});
-	});
-
-	app.use(api_get, express.static(staticPath));
-}

api/useMkdirApi.js

@@ -1,23 +0,0 @@
-import fs from 'fs'
-import path from 'path'
-import express from 'express'
-import { api, staticPath } from '../config.js'
-
-export default function useMkdirApi(app) {
-    app.post(api.mkdir, express.json(), (req, res) => {
-        const folderName = req.body.folderName
-        const decodedPath = decodeURIComponent(req.path).substring(
-            api.mkdir.length - 1
-        )
-        const mkdirPath = path.join(staticPath, decodedPath, folderName)
-        // res.status(200).json({ mkdirPath, folderName })
-
-        // 创建文件夹
-        fs.mkdir(mkdirPath, { recursive: true }, (err) => {
-            if (err) {
-                return res.status(500).json({ message: 'failed', error: err })
-            }
-            res.status(200).json({ message: 'success' })
-        })
-    })
-}

api/useQueryApi.js

@@ -1,15 +0,0 @@
-import { api } from "../config.js";
-import useFsOperateEventCenter from "../hooks/useFsOperateEventCenter.js";
-
-const fsOperateEventCenter = useFsOperateEventCenter();
-
-/**
- * 获取一个文件操作事件的结果
- * @returns {any}
- */
-export default function useQueryApi(app) {
-	app.get(api.query, (req, res) => {
-		const id = req.query.id;
-		res.json(fsOperateEventCenter.query(id));
-	});
-}

api/useRenameApi.js

@@ -1,34 +0,0 @@
-import { api, staticPath } from "../config.js";
-import path from "path";
-import useFsOperateEventCenter from "../hooks/useFsOperateEventCenter.js";
-import fs from "fs";
-import express from "express";
-
-const fsOperateEventCenter = useFsOperateEventCenter();
-
-function renamePath(targetPath, newName) {
-	return new Promise((resolve, reject) => {
-		fs.stat(targetPath, (err, stats) => {
-			if (err) {
-				console.log(err);
-				return reject(err);
-			}
-
-			const newTargetPath = path.join(path.dirname(targetPath), newName);
-			fs.rename(targetPath, newTargetPath, err => {
-				if (err) return reject(err);
-				resolve();
-			});
-		});
-	});
-}
-
-export default function useRenameApi(app) {
-	app.post(api.rename, express.json(), (req, res) => {
-		const decodedPath = decodeURIComponent(req.path).substring(api.rename.length - 1);
-		const targetPath = path.join(staticPath, decodedPath);
-		const newName = req.body.newName;
-		const eventId = fsOperateEventCenter.push(renamePath(targetPath, newName));
-		res.send({ eventId });
-	});
-}

api/useUploadApi.js

@@ -1,37 +0,0 @@
-import path from "path";
-import fs from "fs";
-import multer from "multer";
-import { api, staticPath } from "../config.js";
-
-const storage = multer.memoryStorage();
-const upload = multer({ storage: storage }).single('file');
-
-export default function useUploadApi(app) {
-	app.post(api.upload, upload, (req, res) => {
-        // 必须这样传，不然中文乱码
-        const fileName = req.body.fileName
-
-		const decodedPath = decodeURIComponent(req.path).substring(api.upload.length - 1);
-        const savePath = path.join(staticPath, decodedPath, fileName)
-        // 覆盖写or追加写
-        const operateType = req.body.operateType === 'write' ? 'write' : 'append'
-        const data = req.file.buffer
-        if (operateType === 'write') {
-            // 覆盖写入
-            fs.writeFile(savePath, data, (err) => {
-                if (err) {
-                    return res.status(500).json({ message: 'failed', error: err });
-                }
-                res.status(200).json({ message: 'success' });
-            });
-        } else {
-            // 追加写入
-            fs.appendFile(savePath, data, (err) => {
-                if (err) {
-                    return res.status(500).json({ message: 'failed', error: err });
-                }
-                res.status(200).json({ message: 'success' });
-            });
-        }
-	});
-}

config.js

@@ -1,17 +0,0 @@
-import path from "path";
-
-
-export const staticPath = path.join("./static");
-export const port = 17705;
-
-export const api = {
-    get: `/${'get'}`,
-    query: `/${'query'}`,
-    upload: `/${'upload'}/*`,
-    delete: `/${'delete'}/*`,
-    rename: `/${'rename'}/*`,
-    mkdir: `/${'mkdir'}/*`,
-    cut: `/${'cut'}/*`
-}
-
-export default { staticPath, port, api }

hooks/generateId.js

@@ -1,11 +0,0 @@
-
-/**
- * 生成一个id，不唯一的几率比因为我代码烂的几率低
- * @param length 生成id的长度
- * @returns {number}
- */
-export default function generateId(length) {
-	length || (length = 16);
-	let id = Math.ceil(Math.random() * 10 ** 16);
-    return id
-}

hooks/useFsOperateEventCenter.js

@@ -1,79 +0,0 @@
-import generateId from "./generateId.js"
-
-// 一个文件操作事件
-class FsOperateEvent {
-    constructor(event){
-        this.status = 'progress'
-        this.uid = generateId()
-        event.then(()=>{
-            this.status = 'success'
-        }).catch((e)=>{
-            this.failedEvent = e
-            this.status = 'failed'
-        })
-    }
-    /**
-     * 事件状态，分为progress, success, failed
-     */
-    failedEvent
-    status
-    uid
-}
-
-class FsOprateEventCenter {
-    constructor(){
-        this.eventMap = {}
-    }
-    eventMap
-    /**
-     * 推送一个事件，返回这个事件的id，后续可以通过这个id查询这个事件的状态
-     * @param {Promise} event
-     * @returns {number} 事件id
-     */
-    push(event){
-        const ev = new FsOperateEvent(event)
-        const id = ev.uid
-        this.eventMap[id] = {
-            event: ev,
-            // 每小时自查询一下状态，防止一直没查询导致内存泄漏
-            timer: setInterval(()=>{
-                this.query(id)
-            }, 1000*60*60)
-        }
-        return id
-    }
-    /**
-     * 推送一个事件，返回这个事件的id，后续可以通过这个id查询这个事件的状态
-     * 当查询到这个事件已经完成的时候，将这个事件移除出事件表(eventMap)
-     * @param {number} id 事件id
-     * @returns {{status: 'success' | 'failed' | 'progress' | 'unknow'; result?: any}} 事件id
-     */
-    query(id){
-        let status
-        if(!this.eventMap[id]){
-            status = 'unknow'
-        }
-        else{
-            status = this.eventMap[id].event.status
-        }
-        const res = {status}
-        if( ['success', 'failed'].includes(status) ){
-            if(status === 'failed'){
-                res.failedEvent = this.eventMap[id].event.failedEvent
-            }
-            clearInterval(this.eventMap[id].timer)
-            this.eventMap[id] = undefined
-        }
-        return res
-    }
-}
-
-const fsOprateEventCenter = new FsOprateEventCenter()
-
-/**
- * 除了上传以外的所有文件操作都统一通过这个进行管理
- * @returns {fsOprateEventCenter}
- */
-export default function useFsOprateEventCenter(){
-    return fsOprateEventCenter
-}

index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>MDW</title>
+	</head>
+	<body>
+		<div id="app"></div>
+		<script type="module" src="/src/main.ts"></script>
+	</body>
+	<style>
+		#app{
+		  height: 100vh;
+		  width: 100vw;
+		}
+	</style>
+</html>

index.js

@@ -1,45 +0,0 @@
-import express from "express";
-import os from "os";
-import cors from "cors";
-import fs from "fs";
-import Config from "./config.js";
-import useGetApi from "./api/useGetApi.js";
-import useUploadApi from "./api/useUploadApi.js";
-import useDeleteApi from "./api/useDeleteApi.js";
-import useQueryApi from "./api/useQueryApi.js";
-import useRenameApi from "./api/useRenameApi.js";
-import useCutApi from "./api/useCutApi.js";
-import useMkdirApi from "./api/useMkdirApi.js";
-
-const { staticPath, port, api } = Config;
-
-if (!fs.existsSync(staticPath)) {
-	fs.mkdirSync(staticPath);
-}
-
-const app = express();
-app.use(cors());
-
-useGetApi(app);
-useUploadApi(app);
-useDeleteApi(app);
-useQueryApi(app);
-useRenameApi(app);
-useCutApi(app);
-useMkdirApi(app);
-
-app.listen(port, "::", () => {
-	const interfaces = os.networkInterfaces();
-	console.log(`服务器正在以下地址运行：`);
-	for (const name of Object.keys(interfaces)) {
-		for (const iface of interfaces[name]) {
-			iface.family === "IPv6" ? console.log(`http://[${iface.address}]:${port}`) : console.log(`http://${iface.address}:${port}`);
-		}
-	}
-	console.log(`以下地址访问文件/文件夹：`);
-	for (const name of Object.keys(interfaces)) {
-		for (const iface of interfaces[name]) {
-			iface.family === "IPv6" ? console.log(`http://[${iface.address}]:${port}${api.get}`) : console.log(`http://${iface.address}:${port}${api.get}`);
-		}
-	}
-});

package.json

@@ -1,27 +1,28 @@
 {
-    "name": "miao-directory",
-    "version": "1.0.0",
-    "description": "",
-    "main": "index.js",
-    "type": "module",
-    "scripts": {
-        "dev": "ts-node index.js",
-        "dev:bun": "bun index.js",
-        "serve": "node dist/index.min.js",
-        "serve:bun": "bun dist/index.min.js",
-        "build": "ncc build index.js && uglifyjs dist/index.js -o dist/index.min.js"
-    },
-    "keywords": [],
-    "author": "",
-    "license": "ISC",
-    "dependencies": {
-        "cors": "^2.8.5",
-        "express": "^4.19.2",
-        "multer": "1.4.5-lts.1",
-        "ts-node": "^10.9.2"
-    },
-    "devDependencies": {
-        "@vercel/ncc": "^0.38.1",
-        "uglify-js": "^3.19.1"
-    }
+  "name": "miao-directory-web",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "dev:host": "vite --host 0.0.0.0",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@vicons/ionicons5": "^0.12.0",
+    "axios": "^1.7.3",
+    "naive-ui": "^2.39.0",
+    "sass": "^1.77.8",
+    "vue": "^3.4.35"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.17.7",
+    "@types/node": "^22.1.0",
+    "@vitejs/plugin-vue": "^5.1.2",
+    "typescript": "^5.5.3",
+    "vite": "^5.4.0",
+    "vite-plugin-singlefile": "^2.0.2",
+    "vue-tsc": "^2.0.29"
+  }
 }

src/App.vue

@@ -0,0 +1,397 @@
+<script setup lang="ts">
+import { h, onMounted, reactive, ref, shallowRef } from 'vue'
+import { NIcon, NScrollbar, NDropdown, NQrCode } from 'naive-ui'
+import {
+    EyeOffOutline,
+    EyeOutline,
+    CloseOutline,
+    CopyOutline,
+    EllipsisVertical,
+    QrCodeOutline
+} from '@vicons/ionicons5'
+import miaoDirectory from './views/miaoDirectory.vue'
+import VirtualPage from './class/VirtualPage'
+import VirtualDirectory, { VirtualFile } from './class/VirtualDirectory'
+import MiaoMask from './components/miaoMask.vue'
+import config from './config'
+import useVirtualPages from './hooks/useVirtualPages'
+
+const { baseUrl } = config
+
+const showModal = ref<boolean>(false)
+
+const modalData = shallowRef<{
+    component: any
+    props: any
+}>()
+
+const views = useVirtualPages()
+
+const rootDirectory = reactive(
+    new VirtualDirectory({
+        name: '根目录',
+        stats: {
+            atimeMs: 0,
+            birthtimeMs: 0,
+            ctimeMs: 0,
+            mtimeMs: 0
+        }
+    })
+)
+
+// component就是一个vue组件，类似于miaoDirectory
+const createView = (
+    component: any,
+    currentObjects: (VirtualDirectory | VirtualFile)[],
+    index?: number
+) => {
+    index ?? (index = views.length)
+    views.splice(
+        index,
+        0,
+        reactive<VirtualPage>(new VirtualPage(component, [...currentObjects]))
+    )
+}
+
+const deleteView = (index: number) => {
+    views.splice(index, 1)
+    if (views.length === 0) {
+        createView(miaoDirectory, [rootDirectory])
+    }
+}
+
+// 点击标题是隐藏其他标签或显示其他标签，还挺好用的
+const handleClickTitle = (index: number) => {
+    let count = views.filter((v) => v.visible).length
+    let op = !views[index].visible || count > 1 ? 'hideOthers' : 'showOthers'
+    let _index = 0
+    while (_index < views.length) {
+        if (_index !== index) {
+            views[_index].visible = op === 'hideOthers' ? false : true
+        } else {
+            views[_index].visible = true
+        }
+        _index += 1
+    }
+}
+
+// 顶部菜单相关
+function renderIcon(icon: any) {
+    return () => {
+        return h(NIcon, null, {
+            default: () => h(icon)
+        })
+    }
+}
+
+const openMenuOption = [
+    {
+        label: '分享',
+        key: 'share',
+        icon: renderIcon(QrCodeOutline)
+    }
+]
+
+const handleMenuSelect = (key: string) => {
+    if (key === 'share') {
+        showModal.value = true
+        modalData.value = {
+            component: NQrCode,
+            props: {
+                value: baseUrl,
+                size: 300,
+                errorCorrectionLevel: 'H'
+            }
+        }
+    }
+}
+
+onMounted(() => {
+    createView(miaoDirectory, [rootDirectory])
+})
+</script>
+
+<template>
+    <div class="view">
+        <div class="view-controler">
+            <n-scrollbar x-scrollable>
+                <div class="tags-container">
+                    <transition-group name="tab">
+                        <div
+                            class="tab"
+                            v-for="(view, index) of views"
+                            :key="view.uid">
+                            <div
+                                class="tab-title"
+                                @click="handleClickTitle(index)">
+                                {{ view.title }}
+                            </div>
+                            <div
+                                class="tab-point"
+                                :style="{ backgroundColor: view.color }"></div>
+                            <div class="tab-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="
+                                        createView(
+                                            view.component,
+                                            view.currentObjects,
+                                            index + 1
+                                        )
+                                    ">
+                                    <CopyOutline />
+                                </n-icon>
+                                <n-icon
+                                    class="tag-control-icon icon"
+                                    @click="deleteView(index)">
+                                    <CloseOutline class="icon-inner" />
+                                </n-icon>
+                            </div>
+                        </div>
+                    </transition-group>
+                </div>
+            </n-scrollbar>
+            <div class="view-controller-menu">
+                <div class="view-controller-menu-item">
+                    <n-dropdown
+                        trigger="click"
+                        :options="openMenuOption"
+                        @select="handleMenuSelect">
+                        <n-icon class="icon">
+                            <EllipsisVertical class="icon-inner" />
+                        </n-icon>
+                    </n-dropdown>
+                </div>
+            </div>
+        </div>
+        <div class="view-container">
+            <transition-group name="page">
+                <div
+                    class="view-container-item"
+                    v-for="(view, index) of views"
+                    v-show="view.visible"
+                    :key="view.uid">
+                    <component
+                        :is="view.component"
+                        v-model:current-objects="view.currentObjects"
+                        :id="view.uid"
+                        :color="view.color"
+                        @exit="deleteView(index)"></component>
+                </div>
+            </transition-group>
+        </div>
+    </div>
+    <!-- 模态框展示，用来显示分享二维码，设置菜单之类的东西 -->
+    <MiaoMask v-model:show="showModal" @click="showModal = false">
+        <component
+            :is="modalData?.component"
+            v-bind="modalData?.props"></component>
+    </MiaoMask>
+</template>
+
+<style lang="scss" scoped>
+$controler-height: 25px;
+$tag-width: 170px;
+
+.view {
+    position: relative;
+    height: 100%;
+    width: 100%;
+
+    .view-controler {
+        display: flex;
+        height: $controler-height;
+        width: 100%;
+        background-color: #dadada;
+        // overflow: hidden;
+
+        .tags-container {
+            display: flex;
+            margin-left: 5px;
+            flex: 1;
+
+            // overflow-x: scroll;
+            .tab {
+                position: relative;
+                width: $tag-width;
+                margin: 0 5px;
+                // flex: 1;
+                display: flex;
+                border-radius: 5px 5px 0 0;
+                align-items: center;
+
+                .tab-title {
+                    margin-left: 4px;
+                    // width: 70%;
+                    user-select: none;
+                    cursor: pointer;
+                }
+
+                .tab-point {
+                    height: 5px;
+                    aspect-ratio: 1;
+                    border-radius: 66px;
+                    margin-left: 5px;
+                }
+
+                .tab-control {
+                    position: absolute;
+                    right: 10px;
+                    display: flex;
+                    align-items: center;
+
+                    .tab-control-icon:not(:last-child) {
+                        margin-right: 5px;
+                    }
+                }
+
+                &:not(:last-child)::after {
+                    content: '';
+                    height: calc($controler-height * 0.6);
+                    width: 1px;
+                    border-right: 1px solid black;
+                    position: absolute;
+                    right: 0px;
+                }
+            }
+        }
+
+        .view-controller-menu {
+            position: relative;
+            display: flex;
+            align-items: center;
+            padding: 0 5px;
+
+            .view-controller-menu-item {
+                height: 100%;
+                aspect-ratio: 1;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+
+            &::before {
+                content: '';
+                height: calc($controler-height * 0.6);
+                width: 1px;
+                border-right: 1px solid black;
+                position: absolute;
+                left: 2px;
+            }
+        }
+
+        .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);
+            }
+        }
+    }
+
+    .view-container {
+        position: relative;
+        display: flex;
+        // flex-direction: column;
+        height: calc(100% - $controler-height);
+        overflow-y: overlay;
+        overflow-x: overlay;
+
+        .view-container-item {
+            flex: 1;
+            height: 100%;
+        }
+
+        &::-webkit-scrollbar {
+            position: absolute;
+            width: 4px;
+        }
+
+        // 滚动条轨道
+        &::-webkit-scrollbar-track {
+            // background: rgb(239, 239, 239);
+            border-radius: 2px;
+        }
+
+        // 小滑块
+        &::-webkit-scrollbar-thumb {
+            background: #e0e0e0;
+            // border-radius: 5px;
+        }
+
+        &::-webkit-scrollbar-thumb:hover {
+            background: #999999;
+        }
+    }
+}
+
+// transition动画相关
+.view {
+    .view-controler {
+        .tags-container {
+            .tab-move,
+            .tab-enter-active {
+                transition: all 0.2s ease;
+            }
+
+            .tab-leave-active {
+                transition: none;
+            }
+
+            .tab-enter-from {
+                opacity: 0;
+                transform: translateY(-30px);
+            }
+
+            // .tab-leave-to {
+            //   opacity: 0;
+            //   transform: translateY(-80px) translateX(calc($tag-width + 10px));
+            // }
+
+            .tab-leave-active {
+                position: absolute;
+            }
+        }
+    }
+
+    // .view-container {
+    //     .page-move {
+    //       transition: all 0.2s ease;
+    //     }
+
+    //     .page-enter-active {
+
+    //     }
+
+    //     .page-leave-active {
+    //       transition: none;
+    //     }
+
+    //     .page-enter-from {
+    //       opacity: 0;
+    //     }
+
+    //     .page-leave-active {
+    //       position: absolute;
+    //     }
+    // }
+}
+</style>

src/class/UploadQueue.ts

@@ -0,0 +1,165 @@
+import generateId from "@/hooks/generateId";
+import useMiaoFetchApi from "@/hooks/useMiaoFetchApi";
+import VirtualDirectory from "./VirtualDirectory";
+
+const miaoFetchApi = useMiaoFetchApi();
+
+export class UploadQueueItem {
+	constructor(
+		file: File,
+		targetDirectory: VirtualDirectory,
+		config?: {
+			onSuccess?: () => void;
+			onFailed?: () => void;
+		}
+	) {
+		this.file = file;
+		this.targetDirectory = targetDirectory;
+		this.uid = generateId();
+		this.status = "waiting";
+		this.process = 0;
+		this.onSuccess = config && config.onSuccess;
+		this.onFailed = config && config.onFailed;
+	}
+	uid: number;
+	file: File;
+	targetDirectory: VirtualDirectory;
+	status: "waiting" | "uploading" | "success" | "failed";
+	process: number;
+	failedReason: unknown | undefined;
+
+	onSuccess?: () => void;
+	onFailed?: () => void;
+
+	_abort: (() => void | undefined) | undefined;
+	_status: Promise<any> | undefined;
+
+	/**
+	 * 开始上传文件
+	 */
+	startUpload() {
+		if (this.status === "uploading") {
+			return;
+		}
+		const { abort, response } = miaoFetchApi.upload(this.file, this.targetDirectory, {
+			onProcess: percent => {
+				this.process = percent;
+			}
+		});
+		this._abort = abort;
+		this._status = response;
+		this.status = "uploading";
+		response
+			.then(() => {
+				this.status = "success";
+				this.onSuccess && this.onSuccess();
+				this._abort = undefined;
+				this._status = undefined;
+			})
+			.catch(e => {
+				this.status = "failed";
+				this.failedReason = e;
+				this.onFailed && this.onFailed();
+			});
+	}
+
+	/**
+	 * 终止上传文件
+	 */
+	abortUpload() {
+		this._abort && this._abort();
+		this.status = "failed";
+		this.failedReason = "abort";
+	}
+}
+
+export default class UploadQueue {
+	constructor() {
+		this.uid = generateId();
+		this.queue = [];
+		this.mode = "serial";
+	}
+	uid: number;
+	queue: UploadQueueItem[];
+	current: UploadQueueItem | undefined;
+
+	// 未来再去实现，目前就是串行的
+	// 好像也不用去实现
+	mode: "serial" | "parallel";
+	get status() {
+		for (let item of this.queue) {
+			if (item.status === "uploading") {
+				return "busy";
+			}
+		}
+		return "free";
+	}
+
+	/**
+	 * 获取下一个需要被上传的item
+	 */
+	get nextUplpadItem() {
+		for (let item of this.queue) {
+			if (item.status === "waiting") {
+				return item;
+			}
+		}
+	}
+
+	/**
+	 * 开始串行的上传循环
+	 */
+	loop() {
+		if (this.status === "busy") {
+			return;
+		}
+		if (this.nextUplpadItem) {
+			this.nextUplpadItem.startUpload();
+		}
+	}
+
+	/**
+	 * 向上传文件队列输送一批新的文件
+	 * @param {any} files 需要上传的文件
+	 * @param {any} targetDirectory 目标文件夹
+	 * @param {any} option 每个文件上传完成以后都会触发一遍的回调函数
+	 * @returns {any}
+	 */
+	push(
+		files: File[],
+		targetDirectory: VirtualDirectory,
+		option?: {
+			/**
+			 * 每个文件上传完成以后都会触发一遍的回调函数
+			 */
+			onFinish?: () => void;
+			/**
+			 * 是否立即开始上传，若否则按队列顺序一个一个上传
+			 */
+			immediately?: boolean;
+		}
+	) {
+		const onFinish = option?.onFinish;
+		const immediately = option?.immediately ?? false;
+		const uploadQueue = files.map(file => {
+			return new UploadQueueItem(file, targetDirectory, {
+				onSuccess: () => {
+					this.loop();
+					onFinish && onFinish();
+				},
+				onFailed: () => {
+					this.loop();
+				}
+			});
+		});
+		this.queue.push(...uploadQueue);
+		if (!immediately) {
+			this.loop();
+		} else {
+			uploadQueue.forEach(item => {
+				item.startUpload();
+			});
+		}
+		return uploadQueue;
+	}
+}

src/class/VirtualDirectory.ts

@@ -0,0 +1,131 @@
+import generateId from "@/hooks/generateId";
+import type { stats, file, directory } from "@/types/type.ts";
+
+export class VirtualFile {
+	constructor(info: file, parent: VirtualDirectory) {
+		this.name = info.name;
+		this.size = info.size;
+		this.stats = info.stats;
+		this.parent = parent;
+		this.type = "file";
+		this.uid = generateId();
+	}
+	name: string;
+	type: "file";
+	size: number;
+	stats: stats;
+	parent: VirtualDirectory;
+	uid: number;
+	get path() {
+		return `${this.parent.path}${this.name}`;
+	}
+}
+
+class VirtualDirectory {
+	constructor(info: directory, parent?: VirtualDirectory) {
+		this.name = info.name;
+		this.type = "directory";
+		this.stats = info.stats;
+		this.parent = parent ?? undefined;
+		this.uid = generateId();
+	}
+	// 文件夹名
+	name: string;
+	// 子文件
+	files?: VirtualFile[];
+	// 子目录
+	directorys?: VirtualDirectory[];
+	// 没啥意义，标注一下就是了
+	type: "directory";
+	// 文件夹创建时间等杂项属性
+	stats: stats;
+	// 父文件夹
+	parent?: VirtualDirectory;
+
+	uid: number;
+
+	/**
+	 * 获取相对于根目录的路径的层数
+	 * 用于目录下文件定位
+	 * @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 `${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);
+	}
+
+	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 _delete = (target: (VirtualFile | VirtualDirectory)[]) => {
+			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);
+		// 加入新的文件与文件夹
+		for (let item of content) {
+			if (item.type === "file") {
+				if (!fileNames.includes(item.name)) {
+					this.files.push(new VirtualFile(item, this));
+				}
+			} else if (item.type === "directory") {
+				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;

src/class/VirtualPage.ts

@@ -0,0 +1,60 @@
+import { shallowRef } from "vue";
+import VirtualDirectory, { VirtualFile } 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(component: any, initObjects: (VirtualDirectory | VirtualFile)[]) {
+		this.component = shallowRef(component);
+		this.currentObjects = initObjects;
+
+		this.visible = true;
+		this.uid = generateId();
+		this.refreshKey = Math.random();
+		this.color = getRandomWebSafeColor();
+	}
+	component: any;
+	// 是否可见
+	visible: boolean;
+	// 当前正在使用的文件或是文件夹
+	currentObjects: (VirtualDirectory | VirtualFile)[];
+	// 区分每一个页面的唯一id
+	uid: number;
+	// 当refreshKey改变时需要刷新页面，目前还没接入刷新
+	refreshKey: number;
+	// 为了区分，每个虚拟页面都会分配一个color，这个color会体现在tab上
+	color: string;
+	// 用于展示的title
+	_title?: string;
+
+	get title() {
+		if (this._title) {
+			return this._title;
+		}
+		return this.currentObjects[0].name;
+	}
+
+	setTitle(title: string) {
+		this._title = title;
+	}
+
+	// 切换显示状态
+	switchShow() {
+		this.visible = !this.visible;
+	}
+
+	// 刷新，不过好像没有用得到的时候吧
+	// 事实上也不应该用得到，因为更新应该是响应式的
+	refresh() {
+		this.refreshKey = Math.random();
+	}
+}

src/components/miaoDirectory/miaoDirectoryItem.vue

@@ -0,0 +1,246 @@
+<template>
+    <div
+        class="miao-item"
+        draggable="true"
+        ref="itemRef"
+        @dragstart="handleDragStart">
+        <div class="item-main">
+            <div
+                class="item-main-front"
+                :style="{ backgroundColor: props.color }"></div>
+            <Icon class="item-main-icon"></Icon>
+            <div class="item-main-info">
+                <div class="item-main-info-name">
+                    {{ name }}
+                </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>
+    </div>
+</template>
+
+<script setup lang="ts">
+import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
+import {
+    DocumentText,
+    FileTray,
+    Help,
+    Image,
+    LogoChrome,
+    LogoCss3,
+    LogoJavascript,
+    LogoVue,
+    PlayCircle,
+    EllipsisVertical,
+    Disc
+} from '@vicons/ionicons5'
+import { computed, ref } from 'vue'
+import dateFormatter from '@/hooks/dateFormatter'
+// import useDataBus from '@/hooks/useDataBus'
+import { NDropdown } from 'naive-ui'
+
+// const dataBus = useDataBus()
+
+const props = defineProps<{
+    item: VirtualDirectory | VirtualFile
+    name?: string
+    color: string
+}>()
+
+const emit = defineEmits<{
+    download: []
+    delete: []
+    dragStart: [event: DragEvent, item: VirtualDirectory | VirtualFile]
+}>()
+
+const itemType = ref<'file' | 'directory'>(props.item.type)
+
+const name = props.name ?? props.item.name
+
+const time = computed(() => {
+    return dateFormatter(
+        new Date(props.item.stats.mtimeMs),
+        'yyyy-MM-dd hh:mm:ss'
+    )
+})
+
+const dropDownOptions = computed(() => {
+    const options = [
+        {
+            label: '删除',
+            key: 'delete'
+        }
+    ]
+    if (itemType.value === 'file') {
+        options.push(
+            ...[
+                {
+                    label: '下载',
+                    key: 'download'
+                }
+            ]
+        )
+    }
+    return options
+})
+
+const handleDropdownSelect = (key: 'download' | 'delete') => {
+    if (key === 'download') {
+        emit('download')
+    } else if (key === 'delete') {
+        emit('delete')
+    }
+}
+
+const Icon = computed(() => {
+    try {
+        if (props.item.type === 'directory') {
+            return FileTray
+        } else if (props.item.type === 'file') {
+            const aft = props.item.name.split('.').at(-1)?.toLowerCase()
+            if (!aft) {
+                throw 1
+            } else if (
+                ['txt', 'doc', 'docs', 'docx', 'xls', 'xlsx'].includes(aft)
+            ) {
+                return DocumentText
+            } else if (
+                ['mp3', 'wav', 'ape', 'acc', 'ogg', 'flac'].includes(aft)
+            ) {
+                return Disc
+            } else if (
+                [
+                    '.xbm',
+                    '.tif',
+                    'pjp',
+                    '.svgz',
+                    'jpg',
+                    'jpeg',
+                    'ico',
+                    'tiff',
+                    '.gif',
+                    'svg',
+                    '.jfif',
+                    '.webp',
+                    '.png',
+                    '.bmp',
+                    'pjpeg',
+                    '.avif'
+                ].includes(aft)
+            ) {
+                return Image
+            } else if (['mp4', 'm2v', 'mkv'].includes(aft)) {
+                return PlayCircle
+            } else if (['js', 'jsx', 'ts', 'tsx'].includes(aft)) {
+                return LogoJavascript
+            } else if (['html'].includes(aft)) {
+                return LogoChrome
+            } else if (['css', 'scss', 'less'].includes(aft)) {
+                return LogoCss3
+            } else if (['vue'].includes(aft)) {
+                return LogoVue
+            }
+            return DocumentText
+        }
+    } catch {
+        return Help
+    }
+})
+
+const itemRef = ref()
+
+const handleDragStart = (event: DragEvent) => {
+    emit('dragStart', event, props.item)
+    // dataBus.set('dragData', [props.item])
+}
+</script>
+
+<style lang="scss" scoped>
+.miao-item {
+    cursor: pointer;
+    width: calc(100% - 20px);
+    min-width: 250px;
+    // aspect-ratio: 66/9;
+    height: 50px;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 10px 10px;
+    .item-main {
+        position: relative;
+        width: 100%;
+        height: 95%;
+        background-color: rgb(255, 255, 255);
+        border-radius: 7px;
+        display: flex;
+        align-items: center;
+        transition: background-color 0.3s;
+        .item-main-front {
+            height: 100%;
+            width: 10px;
+            border-radius: 7px 0 0 7px;
+            background-color: rgb(0, 0, 0);
+        }
+        .item-main-icon {
+            margin-left: 10px;
+            height: 80%;
+            color: #00403e;
+        }
+        .item-main-info {
+            margin-left: 10px;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            &-name {
+                user-select: none;
+            }
+            &-date {
+                user-select: none;
+                font-size: small;
+            }
+        }
+        .item-main-option {
+            height: 100%;
+            width: 20px;
+            position: absolute;
+            right: 0;
+            border-radius: 0 7px 7px 0;
+            background-color: rgba(0, 0, 0, 0);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+
+            transition: background-color 0.3s;
+            .item-main-option-icon {
+                color: #000;
+                transition: color 0.15s;
+            }
+            &:hover,
+            &:active {
+                background-color: #8b8b8b;
+                .item-main-option-icon {
+                    color: #fff;
+                }
+            }
+        }
+        &:hover,
+        &:active {
+            background-color: #d2d2d2;
+        }
+    }
+}
+</style>

src/components/miaoDropHandler.vue

@@ -0,0 +1,106 @@
+<template>
+    <div
+        class="container"
+        @dragover="handleDragOver"
+        @dragleave="handleDragLeave"
+        @drop="handleDrop">
+        <slot></slot>
+        <miao-mask v-model:show="showMask"></miao-mask>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import miaoMask from './miaoMask.vue'
+import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
+import config from '@/config'
+import useDataBus from '@/hooks/useDataBus'
+
+const dataBus = useDataBus()
+
+const { uploadSizeLimit } = config
+
+const emit = defineEmits<{
+    onFiles: [files: File[]]
+    onVirtualFiles: [vFiles: VirtualFile[]]
+    onVirtualDirectory: [vDirectory: VirtualDirectory[]]
+}>()
+
+const showMask = ref<number>(0)
+
+// File類型的數據可能爲文件夾，通過FileReader進行判斷
+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 removeDirectory = async (files: File[]) => {
+    let index = 0
+    while (index < files.length) {
+        const currentFile = files[index]
+        const _isFile = await isFile(currentFile)
+        if (_isFile) {
+            index += 1
+            continue
+        } else {
+            files.splice(index, 1)
+            continue
+        }
+    }
+}
+
+const handleDragOver = async (event: DragEvent) => {
+    showMask.value += 1
+    event.preventDefault()
+}
+
+const handleDragLeave = async () => {
+    showMask.value = 0
+}
+
+const handleDrop = async (event: DragEvent) => {
+    showMask.value = 0
+    event.preventDefault()
+    event.stopPropagation()
+    // todo: uploadSize的限制不應該在這裏
+    const files = [...(event.dataTransfer?.files ?? [])].filter(
+        (file) => file.size < uploadSizeLimit
+    )
+    await removeDirectory(files)
+    const virtualFiles: VirtualFile[] = dataBus.pop('dragData_vFiles')
+    const virtualDirectory: VirtualDirectory[] = dataBus.pop(
+        'dragData_vDirectory'
+    )
+    // console.log({ virtualDirectory, virtualFiles })
+    if (files && files.length) {
+        emit('onFiles', files)
+    }
+    if (virtualFiles && virtualFiles.length) {
+        emit('onVirtualFiles', virtualFiles)
+    }
+    if (virtualDirectory && virtualDirectory.length) {
+        emit('onVirtualDirectory', virtualDirectory)
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+</style>

src/components/miaoMask.vue

@@ -0,0 +1,50 @@
+<template>
+	<transition name="transition">
+		<div class="mask-body" ref="maskBodyRef" v-show="showMask">
+      <div @click="e=>e.stopPropagation()">
+        <slot></slot>
+      </div>
+		</div>
+	</transition>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const maskBodyRef = ref<HTMLDivElement>()
+
+const showMask = defineModel<boolean | number>('show', { default: false, required: true })
+
+</script>
+<style lang="scss" scoped>
+.mask-body {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top:0;
+    left: 0;
+    display: flex;
+    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;
+        opacity: 1;
+    }
+    &-hide {
+        opacity: 0;
+        transition: display 0.01s 0.3s;
+        display: none;
+    }
+}
+.transition-enter-active,
+.transition-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.transition-enter-from,
+.transition-leave-to {
+  opacity: 0;
+}
+</style>

src/components/miaoPopupInput.vue

@@ -0,0 +1,43 @@
+<template>
+  <miao-mask v-model:show="showMask">
+    <n-card title="">
+      <n-input v-model:value="inputValue" type="text" placeholder="基本的 Input" />
+      <n-button @click="_resolve && _resolve(inputValue)">确认</n-button>
+    </n-card>
+  </miao-mask>
+</template>
+<script lang="ts" setup>
+import { reactive, ref } from "vue";
+import { NCard, NInput, NButton } from "naive-ui";
+import miaoMask from "./miaoMask.vue";
+
+const showMask = ref(true);
+const inputValue = ref<string>("");
+const _resolve = ref<(text: string) => void>()
+
+type popupConfig = {
+  title: string
+  placeholder: string
+  options: {
+    label
+  }
+}
+
+const _config = reactive<popupConfig>({
+  title: '',
+  placeholder: ''
+})
+
+
+const popup = () => {
+  showMask.value = true
+  return new Promise((resolve: (text: string) => void) => { _resolve.value = resolve }).then((text: string) => {
+    showMask.value = false
+    return text;
+  });
+};
+
+defineExpose({ popup });
+</script>
+
+<style scoped lang="scss"></style>

src/config.ts

@@ -0,0 +1,13 @@
+const baseUrl = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
+
+export default {
+	baseUrl,
+	uploadSizeLimit: 1024 * 1024 * 100,
+	api: {
+		get: '/get',
+		upload: '/upload',
+		delete: '/delete',
+		query: '/query'
+	},
+	enableUpload: true,
+};

src/hooks/dateFormatter.ts

@@ -0,0 +1,20 @@
+export default function dateFormatter(date: Date, fmt: string) {
+	var o:any = {
+		"M+": date.getMonth() + 1, //月份
+		"d+": date.getDate(), //日
+		"h+": date.getHours(), //小时
+		"m+": date.getMinutes(), //分
+		"s+": date.getSeconds(), //秒
+		"q+": Math.floor((date.getMonth() + 3) / 3), //季度
+		"S": date.getMilliseconds() //毫秒
+	};
+	if (/(y+)/.test(fmt)) {
+		fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
+	}
+	for (var k in o) {
+		if (new RegExp("(" + k + ")").test(fmt)) {
+			fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ?  o[k] : ("00" + o[k]).substr(("" + o[k]).length));
+		}
+	}
+	return fmt;
+}

src/hooks/dropHandler.ts

@@ -0,0 +1,109 @@
+import config from "@/config";
+
+const { uploadSizeLimit } = config;
+
+export type dropHandlerHooks = {
+	/**
+	 * 仅返回小于config.ts中大小限制的文件，不会返回文件夹
+	 */
+	onDropFiles?: (files: File[]) => void;
+	/**
+	 * 当拖动时
+	 */
+	onOver?: () => void;
+	/**
+	 * 当进入时
+	 */
+	onEnter?: () => void;
+
+	/**
+	 * 当离开时
+	 */
+	onLeave?: () => void;
+
+	/**
+	 * 离开或是放下时都会触发
+	 * @returns {any}
+	 */
+	onEnd?: () => 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);
+		if (_isFile) {
+			index += 1;
+			continue;
+		} else {
+			files.splice(index, 1);
+			continue;
+		}
+	}
+};
+
+export default function dropHandler(dom: HTMLDivElement, hooks?: dropHandlerHooks) {
+	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();
+			hooks?.onEnd && hooks.onEnd();
+		},
+		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?.onDropFiles && hooks.onDropFiles(files);
+			hooks?.onEnd && hooks.onEnd();
+		},
+		false
+	);
+}

src/hooks/generateId.ts

@@ -0,0 +1,16 @@
+const idList: number[] = [];
+
+/**
+ * 生成一个唯一的id
+ * @param {any} length 生成id的长度
+ * @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)
+    return id
+}

src/hooks/useDataBus.ts

@@ -0,0 +1,22 @@
+import { reactive } from "vue";
+
+let dataStorage: {
+	[key: string | number] : any
+};
+
+export default function useDataBus() {
+	if(dataStorage === undefined) {
+		dataStorage = reactive({})
+	}
+	return {
+		set(key: string | number, value: any) {
+			dataStorage[key] = value;
+			return value;
+		},
+		pop(key: string | number) {
+			const value = dataStorage[key];
+			dataStorage[key] = undefined;
+			return value;
+		}
+	};
+}

src/hooks/useMiaoFetchApi.ts

@@ -0,0 +1,151 @@
+import VirtualDirectory, { VirtualFile } from "@/class/VirtualDirectory";
+import { getOption, getResponse, miaoFetchConfig, deleteOption, uploadOption, queryOption } from "@/types/fetch";
+import Config from "@/config";
+import axios, { AxiosRequestConfig } from "axios";
+
+export const useMiaoFetch = (option?: miaoFetchConfig) => {
+	const retry = option?.retry ?? 0;
+	const controller = new AbortController();
+	let flag = true;
+	return {
+		miaoFetch: async (config: AxiosRequestConfig<any>) => {
+			let counter = 0;
+			let response: any;
+			let errList = [];
+			while (flag && counter <= retry) {
+				try {
+					response = await axios({
+						...config,
+						signal: controller.signal
+					});
+					return response;
+				} catch (_e) {
+					errList.push(_e);
+					counter += 1;
+				}
+			}
+			throw errList;
+		},
+		/**
+		 * 强制终止miaoFetch
+		 */
+		abortMiaoFetch: () => {
+			flag = false;
+			controller.abort();
+		}
+	};
+};
+
+const miaoFetchApi = {
+	/**
+	 * 获取对应文件夹下的数据
+	 */
+	async get(vDirectory: VirtualDirectory, option?: getOption): Promise<getResponse> {
+		const { baseUrl, api } = Config;
+		const url = `${baseUrl}${api.get}${vDirectory.path}`;
+		const retry = option?.retry ?? 0;
+
+		const { miaoFetch } = useMiaoFetch({
+			retry
+		});
+		const response = await miaoFetch({
+			url
+		});
+		return response.data;
+	},
+
+	/**
+	 * 上传单个文件到对应文件夹, 后续要将data类型改成buffer以支持分片上传
+	 */
+	upload(data: File, targetVDir: VirtualDirectory, option?: uploadOption) {
+		const { baseUrl, api } = Config;
+		const url = `${baseUrl}${api.upload}${targetVDir.path}`;
+		const retry = option?.retry ?? 0;
+		const { miaoFetch, abortMiaoFetch } = useMiaoFetch({
+			retry
+		});
+		const sizeTotal = data.size;
+
+		const opType = option?.type ?? "write";
+
+		const formData = new FormData();
+
+		formData.append("file", data);
+        // 必须这样传，不然中文乱码
+		formData.append("fileName", data.name)
+		formData.append("oprateType", opType);
+
+		return {
+			abort: () => abortMiaoFetch(),
+			response: new Promise<{
+				message: 'success' | 'failed'
+				error?: string
+			}>(async resolve => {
+				const response = await miaoFetch({
+					url,
+					method: "post",
+					data: formData,
+					onUploadProgress(progressEvent) {
+						option && option.onProcess && option.onProcess(progressEvent.loaded / sizeTotal);
+					}
+				});
+				resolve(response.data);
+			})
+		};
+	},
+
+	/**
+	 * 删除对应的文件或文件夹，若为文件夹会递归删除
+	 */
+	delete(target: VirtualFile | VirtualDirectory, option?: deleteOption) {
+		const { baseUrl, api } = Config;
+		const url = `${baseUrl}${api.delete}${target.path}`;
+		const retry = option?.retry ?? 0;
+		const { miaoFetch } = useMiaoFetch({
+			retry
+		});
+
+		return {
+			response: new Promise<{
+				eventId: number
+			}>(async resolve => {
+				const response = await miaoFetch({
+					url,
+					method: "post"
+				});
+				resolve(response.data);
+			})
+		};
+	},
+
+	/**
+	 * 查询服务端操作事件的进展
+	 */
+	query(eventId: number, option?: queryOption) {
+		const { baseUrl, api } = Config;
+		const url = `${baseUrl}${api.query}`;
+		const retry = option?.retry ?? 0;
+		const { miaoFetch } = useMiaoFetch({
+			retry
+		});
+		return {
+			response: new Promise<{
+				status: 'process' | 'success' | 'failed',
+				error?: unknown
+			}>(async resolve => {
+				const response = await miaoFetch({
+					url,
+					method: "get",
+					params: {
+                        id: eventId
+                    }
+				});
+				resolve(response.data);
+			})
+		};
+	}
+};
+
+export default function useMiaoFetchApi() {
+	return miaoFetchApi;
+}

src/hooks/useUploadQueue.ts

@@ -0,0 +1,11 @@
+import UploadQueue from "@/class/UploadQueue";
+import { reactive } from "vue";
+
+let uploadQueue: UploadQueue
+
+export default () => {
+    if(uploadQueue === undefined){
+        uploadQueue = reactive(new UploadQueue())
+    }
+    return uploadQueue
+}

src/hooks/useVirtualPages.ts

@@ -0,0 +1,11 @@
+import VirtualPage from "@/class/VirtualPage"
+import { Reactive, reactive } from "vue"
+
+let views: Reactive<VirtualPage[]>
+
+export default function useViretualPages(){
+    if(views === undefined) {
+        views = reactive<VirtualPage[]>([])
+    }
+    return views
+}

src/main.ts

@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')

src/types/fetch.ts

@@ -0,0 +1,29 @@
+import { directory, file } from "./type";
+
+export type miaoFetchConfig = {
+    retry?: number
+}
+
+export type getOption = {
+} & miaoFetchConfig
+
+export type getResponse = (file | directory)[]
+
+export type uploadOption = {
+    /**
+     * 上传进度回调函数
+     * @param {any} percent 进度百分比，float类型
+     */
+    onProcess?: (percent: number) => void
+    /**
+     * 上传文件执行的操作
+     * write即为覆盖写
+     * append即为增量写
+     */
+    type?: 'write' | 'append'
+} & miaoFetchConfig
+
+export type deleteOption = {
+} & miaoFetchConfig
+export type queryOption = {
+} & miaoFetchConfig

src/types/type.ts

@@ -0,0 +1,22 @@
+export type stats = {
+	atimeMs: number; // 上次访问时间（毫秒）
+	birthtimeMs: number; // 创建时间（毫秒）
+	ctimeMs: number; // 状态更改时间（毫秒）
+	mtimeMs: number; // 上次修改时间（毫秒）
+};
+
+export type file = {
+	name: string;
+	size: number;
+	type?: "file";
+	stats: stats;
+};
+
+export type directory = {
+	name: string;
+	// 考虑到可能还没请求过来
+	content?: (file | directory)[];
+	type?: "directory";
+	stats: stats;
+	parent?: directory;
+};

src/views/miaoDirectory.vue

@@ -0,0 +1,408 @@
+<template>
+    <miao-drop-handler @on-virtual-directory="handleDropVDirectory" @on-files="handleDropFiles">
+        <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?.directoryArray"
+                                @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"
+                            @click="setCurrentDirectory(dir)"
+                            :item="dir"
+                            :key="dir.uid"
+                            :color="props.color"
+                            @delete="handleItemDelete(dir)"
+                            @drag-start="handleItemDragStart" />
+                    </transition-group>
+                    <transition-group name="dirItem">
+                        <miaoDirectoryItem
+                            v-for="file in showData_files"
+                            :item="file"
+                            :key="file.uid"
+                            @click="openUrl(`${baseUrl}${api.get}${file.path}`)"
+                            @download="
+                                openUrl(`${baseUrl}${api.get}${file.path}`, {
+                                    download: file.name
+                                })
+                            "
+                            @delete="handleItemDelete(file)"
+                            @drag-start="handleItemDragStart"
+                            :color="props.color" />
+                    </transition-group>
+                </n-scrollbar>
+            </div>
+            <div
+                class="container-bottom"
+                :style="{
+                    backgroundColor:
+                        index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)'
+                }"></div>
+            <miao-mask v-model:show="showModel"></miao-mask>
+            <!-- <miao-popup-input ref="popupInput"></miao-popup-input> -->
+        </div>
+    </miao-drop-handler>
+</template>
+
+<script setup lang="ts">
+import { NBreadcrumbItem, NBreadcrumb, NIcon, NScrollbar } from 'naive-ui'
+import type { file, directory } from '@/types/type.ts'
+import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
+import { computed, onMounted, 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
+} from '@vicons/ionicons5'
+import useUploadQueue from '@/hooks/useUploadQueue'
+import useVirtualPages from '@/hooks/useVirtualPages'
+
+const { baseUrl, api } = Config
+const dataBus = useDataBus()
+const views = useVirtualPages()
+
+const miaoFetchApi = useMiaoFetchApi()
+
+const props = defineProps<{
+    color: string
+    id: number
+}>()
+
+const emit = defineEmits<{
+    exit: []
+}>()
+
+const popupInput = ref()
+// 是否显示模态框
+const showModel = ref(0)
+
+const currentObjects = defineModel<VirtualDirectory[]>('currentObjects', {
+    required: true
+})
+
+// 目前展示的Dir
+const currentDirectory = computed(() => {
+    return currentObjects.value[0]
+})
+
+const index = computed(() => {
+    for (let i in views) {
+        if (views[i].uid === props.id) {
+            return parseInt(i)
+        }
+    }
+    return 0
+})
+
+// 用于展示的数据，后续会增加排序等操作
+const showData_directory = computed<VirtualDirectory[]>(() => {
+    const data = currentDirectory.value?.directorys
+        ? [...currentDirectory.value?.directorys]
+        : []
+    return data
+})
+const showData_files = computed<VirtualFile[]>(() => {
+    const data = currentDirectory.value?.files
+        ? [...currentDirectory.value?.files]
+        : []
+    return data
+})
+
+// 用于监听拖拽文件事件
+const rootDomRef = ref<HTMLDivElement>()
+
+const uploadQueue = useUploadQueue()
+
+// 设置显示的dir
+const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
+    // 若没有缓存数据则同步刷新，有缓存数据则异步刷新
+    if (
+        virtualDirectory.files === undefined ||
+        virtualDirectory.directorys === undefined
+    ) {
+        const data: (file | directory)[] = await miaoFetchApi.get(
+            virtualDirectory
+        )
+        virtualDirectory.updateContent(data)
+    } else {
+        ;(async () => {
+            const data: (file | directory)[] = await miaoFetchApi.get(
+                virtualDirectory
+            )
+            virtualDirectory.updateContent(data)
+        })()
+    }
+    currentObjects.value[0] = virtualDirectory
+}
+
+const reload = () => {
+    setCurrentDirectory(currentDirectory.value)
+}
+
+const openUrl = (
+    href: string,
+    config?: {
+        download?: string
+        target?: string
+    }
+) => {
+    let { target, download } = config ?? {}
+    const a = document.createElement('a')
+    a.setAttribute('href', href)
+    a.setAttribute('target', target ?? '_blank')
+    download && a.setAttribute('download', download)
+    a.click()
+}
+
+const handleBack = () => {
+    if (currentDirectory.value?.parent) {
+        setCurrentDirectory(currentDirectory.value.parent)
+    }
+}
+
+const handleReload = () => {
+    reload()
+}
+
+const handleItemDelete = async (item: VirtualDirectory | VirtualFile) => {
+    const { response } = miaoFetchApi.delete(item, {
+        retry: 5
+    })
+    // todo: 将删除事件统一用一个事件管理中心管理
+    const id = (await response).eventId
+    const { response: res } = miaoFetchApi.query(id)
+    const eventResult = await res
+    if (eventResult.status === 'success') {
+        reload()
+    }
+}
+
+const handleItemDragStart = async (
+    _event: DragEvent,
+    item: VirtualDirectory | VirtualFile
+) => {
+    if (item.type === 'file') {
+        dataBus.set('dragData_vFiles', [item])
+    } else {
+        dataBus.set('dragData_vDirectory', [item])
+    }
+}
+
+const handleDropVDirectory = async (vDirs: VirtualDirectory[]) => {
+    setCurrentDirectory(vDirs[0])
+}
+
+const handleDropFiles = async (files: File[]) => {
+    currentDirectory.value &&
+        uploadQueue.push(files, currentDirectory.value, {
+            onFinish() {
+                reload()
+            }
+        })
+}
+
+onMounted(async () => {
+    await setCurrentDirectory(currentDirectory.value)
+})
+</script>
+
+<style scoped lang="scss">
+$top-height: 30px;
+$bottom-bar-height: 60px;
+
+.miao-directory-item-container {
+    position: relative;
+    height: 100%;
+    width: inherit;
+    min-width: 266px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    .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: center;
+        align-items: center;
+        user-select: none;
+        box-shadow: 0px 1px 10px #888888;
+        z-index: 2;
+    }
+}
+
+// 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>

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "useDefineForClassFields": true,
+        "module": "ESNext",
+        "lib": ["ES2020", "DOM", "DOM.Iterable"],
+        "skipLibCheck": true,
+
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "isolatedModules": true,
+        "moduleDetection": "force",
+        "noEmit": true,
+        "jsx": "preserve",
+
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true,
+        "baseUrl": ".",
+        "paths": {
+            "@/*": ["src/*"]
+        }
+    },
+    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}

tsconfig.json

@@ -0,0 +1,7 @@
+{
+    "files": [],
+    "references": [
+        { "path": "./tsconfig.app.json" },
+        { "path": "./tsconfig.node.json" }
+    ]
+}

tsconfig.node.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.ts

@@ -0,0 +1,55 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import { resolve } from "path";
+import { viteSingleFile } from "vite-plugin-singlefile"
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	plugins: [vue(), viteSingleFile()],
+	resolve: {
+		alias: {
+			"@": resolve(__dirname, "src")
+		}
+	},
+	server: {
+		proxy: {
+			"/get": {
+				target: "http://127.0.0.1:17705",
+				changeOrigin: true,
+				rewrite: path => path.replace(/^\/get/, "/get")
+			}, 
+			
+			"/upload": {
+				target: "http://127.0.0.1:17705",
+				changeOrigin: true,
+				rewrite: path => path.replace(/^\/upload/, "/upload")
+			},
+			
+			"/delete": {
+				target: "http://127.0.0.1:17705",
+				changeOrigin: true,
+				rewrite: path => path.replace(/^\/delete/, "/delete")
+			},
+			"/query": {
+				target: "http://127.0.0.1:17705",
+				changeOrigin: true,
+				rewrite: path => path.replace(/^\/query/, "/query")
+			}, 
+		}
+	},
+	build: {
+		rollupOptions: {
+			input: {
+				main: resolve(__dirname, "index.html")
+			},
+			output: {
+				// 配置输出为单文件
+				inlineDynamicImports: true,
+				manualChunks: undefined,
+				entryFileNames: "bundle.js",
+				format: "iife", // 立即执行函数格式
+				name: "MyBundle"
+			}
+		}
+	}
+});