fix: 修正错别字

.gitignore

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

README.md

@@ -1,5 +0,0 @@
-# Vue 3 + TypeScript + Vite
-
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
-
-Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).

api/useCutApi.js

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,11 @@
+
+/**
+ * 生成一个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

@@ -0,0 +1,79 @@
+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

@@ -1,19 +0,0 @@
-<!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

@@ -0,0 +1,45 @@
+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,28 +1,27 @@
 {
-  "name": "miao-directory-web",
-  "private": true,
-  "version": "0.0.0",
+    "name": "miao-directory",
+    "version": "1.0.0",
+    "description": "",
+    "main": "index.js",
     "type": "module",
     "scripts": {
-    "dev": "vite",
-    "dev:host": "vite --host 0.0.0.0",
-    "build": "vue-tsc -b && vite build",
-    "preview": "vite preview"
+        "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": {
-    "@vicons/ionicons5": "^0.12.0",
-    "axios": "^1.7.3",
-    "naive-ui": "^2.39.0",
-    "sass": "^1.77.8",
-    "vue": "^3.4.35"
+        "cors": "^2.8.5",
+        "express": "^4.19.2",
+        "multer": "1.4.5-lts.1",
+        "ts-node": "^10.9.2"
     },
     "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"
+        "@vercel/ncc": "^0.38.1",
+        "uglify-js": "^3.19.1"
     }
 }

src/App.vue

@@ -1,260 +0,0 @@
-<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 from './class/VirtualDirectory';
-import MiaoMask from './components/miaoMask.vue';
-import config from './config';
-
-const {baseUrl} = config
-
-const showModal = ref<boolean>(false)
-
-const modalData = shallowRef<{
-    component: any
-    props: any
-}>()
-
-const views = reactive<VirtualPage[]>([])
-
-const rootDirectory = new VirtualDirectory({
-  name: '根目录',
-  stats: {
-    atimeMs: 0,
-    birthtimeMs: 0,
-    ctimeMs: 0,
-    mtimeMs: 0,
-  }
-})
-
-const createView = (initDirectory: VirtualDirectory, index?: number) => {
-  index ?? (index = views.length)
-  console.log(initDirectory)
-  views.splice(index, 0, reactive<VirtualPage>(new VirtualPage(initDirectory)))
-}
-
-const deleteView = (index: number) => {
-  views.splice(index, 1)
-  if (views.length === 0) {
-    createView(rootDirectory)
-  }
-}
-
-function renderIcon(icon: any) {
-  return () => {
-    return h(NIcon, null, {
-      default: () => h(icon)
-    })
-  }
-}
-
-const openMenuOption = [
-  {
-      label: '分享',
-      key: 'share',
-      icon: renderIcon(QrCodeOutline)
-  }
-]
-
-const handleMenuSelect = (key: string) => {
-  console.log(key)
-  if(key === 'share') {
-    showModal.value = true
-    modalData.value = {
-      component: NQrCode,
-      props: {
-        value: baseUrl,
-        size: 500,
-        errorCorrectionLevel: 'H'
-      }
-    }
-  }
-}
-
-onMounted(() => {
-  createView(rootDirectory)
-})
-
-// todo: 让所有伪页面共享一个rootDirectory
-</script>
-
-<template>
-	<div class="view">
-		<div class="view-controler">
-			<n-scrollbar x-scrollable>
-				<div class="tags-container">
-					<div class="tag" v-for="(view, index) of views" :key="view.uid">
-						<div class="tag-title">{{ view.title }}</div>
-						<div class="tag-point" :style="{ backgroundColor: view.color } "></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="createView(view.currentDirectory, index + 1)">
-								<CopyOutline />
-							</n-icon>
-							<n-icon class="tag-control-icon icon" @click="deleteView(index)">
-								<CloseOutline class="icon-inner" />
-							</n-icon>
-						</div>
-					</div>
-				</div>
-			</n-scrollbar>
-			<div class="view-controler-menu">
-				<div class="view-controler-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">
-			<div class="view-container-item" v-for="(view, index) of views" v-show="view.visible" :key="view.uid">
-				<miao-directory v-model:current-directory="view.currentDirectory" :color="view.color" :index="index" @exit="deleteView(index)"></miao-directory>
-			</div>
-		</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;
-.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;
-      .tag {
-        position: relative;
-        width: 170px;
-        margin: 0 5px;
-        // flex: 1;
-        display: flex;
-        border-radius: 5px 5px 0 0;
-        align-items: center;
-
-        .tag-title {
-          margin-left: 4px;
-          // width: 70%;
-          user-select: none;
-        }
-
-        .tag-point {
-          height: 5px;
-          aspect-ratio: 1;
-          border-radius: 66px;
-          margin-left: 5px;
-        }
-
-        .tag-control {
-          position: absolute;
-          right: 10px;
-          display: flex;
-          align-items: center;
-
-          .tag-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-controler-menu {
-      position: relative;
-      display: flex;
-      align-items: center;
-      padding: 0 5px;
-      .view-controler-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;
-    }
-
-  }
-}
-</style>

src/class/UploadQueue.ts

@@ -1,165 +0,0 @@
-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, status } = miaoFetchApi.upload(this.file, this.targetDirectory, {
-			onProcess: percent => {
-				this.process = percent;
-			}
-		});
-		this._abort = abort;
-		this._status = status;
-		this.status = "uploading";
-		status
-			.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

@@ -1,131 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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.color = getRandomWebSafeColor();
-	}
-	visible: boolean;
-	currentDirectory: VirtualDirectory;
-	// 区分每一个页面的唯一id
-	uid: number;
-	// 当refreshKey改变时需要刷新页面，目前还没接入刷新
-	refreshKey: number;
-
-	color: string;
-
-	get title() {
-		return this.currentDirectory.name;
-	}
-
-	// 切换显示状态
-	switchShow() {
-		this.visible = !this.visible;
-	}
-
-	// 设置（同步）正在展示的文件夹
-	setCurrrentDirectory(currDir: VirtualDirectory) {
-		this.currentDirectory = currDir;
-	}
-
-	refresh() {
-		this.refreshKey = Math.random();
-	}
-}

src/components/miaoDirectory/miaoDirectoryItem.vue

@@ -1,187 +0,0 @@
-<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 emit = defineEmits<{
-    download: []
-}>()
-
-const props = defineProps<{
-  item: VirtualDirectory | VirtualFile
-  name?: string
-  color:string
-}>()
-
-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') => {
-    console.log(key)
-    emit(key)
-}
-
-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 = () => {
-    dataBus.set('dragData', [ props.item ])
-}
-</script>
-
-<style lang="scss" scoped>
-.miao-item {
-    cursor: pointer;
-    width: calc(100% - 16px);
-    min-width: 250px;
-    // aspect-ratio: 66/9;
-    height: 50px;
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 10px 8px;
-    .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/miaoMask.vue

@@ -1,50 +0,0 @@
-<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/config.ts

@@ -1,11 +0,0 @@
-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'
-	},
-	enableUpload: true,
-};

src/hooks/dateFormatter.ts

@@ -1,20 +0,0 @@
-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

@@ -1,109 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,15 +0,0 @@
-const dataStorage: any = {};
-
-export default function useDataBus() {
-	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

@@ -1,95 +0,0 @@
-import VirtualDirectory from "@/class/VirtualDirectory";
-import { getOption, getResponse, miaoFetchConfig, uploadOption } 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;
-	},
-
-	/**
-	 * 上传单个文件到对应文件夹
-	 */
-	upload(file: 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 = file.size
-
-		const opType = option?.type ?? 'write'
-
-		const data = new FormData()
-
-		data.append('file', file)
-		data.append('oprateType', opType)
-
-		return {
-			abort: () => abortMiaoFetch(),
-			status: new Promise(async (resolve)=>{
-				const response = await miaoFetch({
-					url,
-					method: 'post',
-					data: data,
-					onUploadProgress(progressEvent) {
-						option && option.onProcess && option.onProcess(progressEvent.loaded / sizeTotal)
-					},
-				})
-				resolve(response.data)
-			})
-		};
-	}
-};
-
-export default function useMiaoFetchApi() {
-	return miaoFetchApi;
-}

src/hooks/useUploadQueue.ts

@@ -1,5 +0,0 @@
-import UploadQueue from "@/class/UploadQueue";
-
-const uploadQueue = new UploadQueue()
-
-export default () => uploadQueue

src/main.ts

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

src/types/fetch.ts

@@ -1,24 +0,0 @@
-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

src/types/type.ts

@@ -1,22 +0,0 @@
-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

@@ -1,276 +0,0 @@
-<template>
-	<div class="miao-directory-item-container" ref="rootDomRef" >
-		<div class="container-top" :style="{ backgroundColor: props.index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)' }">
-			<div class="container-top-colorbar" :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: props.index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)' }">
-			<n-scrollbar>
-				<miaoDirectoryItem v-for="(dir) in currentDirectory?.directorys" @click="setCurrentDirectory(dir)" :item="dir" :key="dir.uid" :color="props.color" />
-				<miaoDirectoryItem
-					v-for="(file) in currentDirectory?.files"
-					:item="file"
-					:key="file.uid"
-					@click="openUrl(`${baseUrl}${api.get}${file.path}`)"
-					@download="openUrl(`${baseUrl}${api.get}${file.path}`, {download: file.name})"
-					:color="props.color"
-				/>
-			</n-scrollbar>
-		</div>
-		<div class="container-bottom" :style="{ backgroundColor: props.index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)' }"></div>
-		<miaoMask v-model:show="showModel"></miaoMask>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { NBreadcrumbItem, NBreadcrumb, NIcon, NScrollbar } 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, { dropHandlerHooks } from '@/hooks/dropHandler';
-import miaoMask from '@/components/miaoMask.vue';
-import miaoDirectoryItem from '@/components/miaoDirectory/miaoDirectoryItem.vue';
-import useMiaoFetchApi from '@/hooks/useMiaoFetchApi';
-import useDataBus from '@/hooks/useDataBus';
-import { CloudOutline, ChevronBackOutline, ReloadOutline, CloseOutline } from '@vicons/ionicons5'
-import useUploadQueue from '@/hooks/useUploadQueue';
-
-const { baseUrl, api } = Config
-const dataBus = useDataBus()
-
-const miaoFetchApi = useMiaoFetchApi()
-
-const props = defineProps<{
-    color: string
-    index: number
-}>()
-
-const emit = defineEmits<{
-    exit: []
-}>()
-
-// 目前展示的Dir
-const currentDirectory = defineModel<VirtualDirectory | undefined>('currentDirectory', { required: true })
-
-// 是否显示模态框
-const showModel = ref(0)
-
-// 用于监听拖拽文件事件
-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)
-            currentDirectory.value = undefined
-            currentDirectory.value = virtualDirectory
-        })()
-    }
-    // 刷新一下
-    currentDirectory.value = undefined
-    currentDirectory.value = virtualDirectory
-    // emit("onCurrentDirectoryChange", currentDirectory.value)
-}
-
-const reload = () => {
-    currentDirectory.value && setCurrentDirectory(currentDirectory.value)
-}
-
-const openUrl = (href: string, config?: {
-    download?: string
-    target?: string
-}) => {
-    let {target, download} = config ?? {}
-
-    console.log({target, download, href})
-    const a = document.createElement('a');
-    a.setAttribute('href', href);
-    a.setAttribute('target', target ?? '_blank')
-    download && a.setAttribute('download', download);
-    a.click();
-    // var a = document.createElement("a");
-    // a.setAttribute('href', href)
-    // a.setAttribute('target', target ?? '_blank')
-    // a.setAttribute('download', download ?? '')
-    // console.log({target, download})
-    // a.click();
-}
-
-const handleBack = () => {
-    if(currentDirectory.value?.parent){
-        setCurrentDirectory(currentDirectory.value.parent)
-    }
-}
-
-const handleReload = () => {
-    reload()
-}
-
-onMounted(async () => {
-    currentDirectory.value && await setCurrentDirectory(currentDirectory.value)
-    // 拖动事件处理
-    const dropFileOption:dropHandlerHooks = {
-        onDropFiles(files: File[]) {
-            const dragData = dataBus.pop('dragData')
-            console.log({dragData, files})
-            if(files && files.length > 0){
-                currentDirectory.value && uploadQueue.push(files, currentDirectory.value, {
-                    onFinish() {
-                        reload()
-                    },
-                })
-                const _f = files[0]
-                currentDirectory.value && miaoFetchApi.upload(_f, currentDirectory.value)
-            }
-        },
-        onEnter() {
-            showModel.value += 1
-        },
-        onEnd() {
-            showModel.value -= 1
-        },
-    }
-    rootDomRef.value && dropHandler(rootDomRef.value, dropFileOption)
-})
-</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-colorbar {
-            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);
-    }
-    .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;
-    }
-}
-</style>

src/vite-env.d.ts

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

tsconfig.app.json

@@ -1,28 +0,0 @@
-{
-    "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

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

tsconfig.node.json

@@ -1,22 +0,0 @@
-{
-  "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

@@ -1,44 +0,0 @@
-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")
-			}
-		}
-	},
-	build: {
-		rollupOptions: {
-			input: {
-				main: resolve(__dirname, "index.html")
-			},
-			output: {
-				// 配置输出为单文件
-				inlineDynamicImports: true,
-				manualChunks: undefined,
-				entryFileNames: "bundle.js",
-				format: "iife", // 立即执行函数格式
-				name: "MyBundle"
-			}
-		}
-	}
-});