fix: 修正错别字

.gitignore

@@ -1,29 +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
+static
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-.vscode
-serve
-miao-directory.exe
-miao-directory-amd64-linux
-miao-directory-amd64-win.exe

README.md

@@ -1,13 +0,0 @@
-## TODO list:
-
-| 任务 | 状态 | 
-|---|---|
-| 拆分miaoDirectory | ✅ |
-| 完善视频插件 | ✅ |
-| 完善PDF插件 | ✅ |
-| 完善Code插件 | ✅ |
-| 实现miaoDirectory的搜索功能 | ❌ |
-| 完善miaoDirectory的搜索功能 | ❌ |
-| 完善图片浏览插件 | ❌ |
-| VirtualDirectory更新时更新文件信息 | ❌ |
-| miaoDirectory的复制文件/文件夹功能 | ❌ |

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="./icon.ico" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>MiaoDirectory</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,48 +1,27 @@
 {
-    "name": "miao-directory-web",
+    "name": "miao-directory",
-    "private": true,
+    "version": "1.0.0",
-    "version": "0.0.0",
+    "description": "",
+    "main": "index.js",
     "type": "module",
     "scripts": {
-        "dev": "vite",
+        "dev": "ts-node index.js",
-        "dev:host": "vite --host 0.0.0.0",
+        "dev:bun": "bun index.js",
-        "build": "vue-tsc -b && vite build",
+        "serve": "node dist/index.min.js",
-        "build:auto": "pnpm run build && rm -rf ./serve/web/* && cp -r ./dist/* ./serve/web/ && cd ./serve && go env -w GOOS=windows && go build -o ../miao-directory.exe",
+        "serve:bun": "bun dist/index.min.js",
-        "build:auto:release": "pnpm run build && rm -rf ./serve/web/* && cp -r ./dist/* ./serve/web/ && cd ./serve && go env -w GOOS=windows GOARCH=amd64 && go build -o ../miao-directory-amd64-win.exe && go env -w GOOS=linux GOARCH=amd64 && go build -o ../miao-directory-amd64-linux",
+        "build": "ncc build index.js && uglifyjs dist/index.js -o dist/index.min.js"
-        "preview": "vite preview"
     },
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
     "dependencies": {
-        "@codemirror/lang-go": "^6.0.1",
+        "cors": "^2.8.5",
-        "@codemirror/lang-html": "^6.4.9",
+        "express": "^4.19.2",
-        "@codemirror/lang-javascript": "^6.2.2",
+        "multer": "1.4.5-lts.1",
-        "@codemirror/lang-json": "^6.0.1",
+        "ts-node": "^10.9.2"
-        "@codemirror/lang-markdown": "^6.2.5",
-        "@codemirror/lang-python": "^6.1.6",
-        "@codemirror/lang-sass": "^6.0.2",
-        "@codemirror/lang-sql": "^6.7.1",
-        "@codemirror/lang-vue": "^0.1.3",
-        "@codemirror/lang-xml": "^6.1.0",
-        "@codemirror/lang-yaml": "^6.1.1",
-        "@vicons/ionicons5": "^0.12.0",
-        "axios": "^1.7.3",
-        "codemirror": "^6.0.1",
-        "lodash": "^4.17.21",
-        "naive-ui": "^2.39.0",
-        "pdfjs-dist": "^4.5.136",
-        "sass": "^1.77.8",
-        "vue": "^3.4.35",
-        "vue-codemirror": "^6.1.1",
-        "xgplayer": "^3.0.20",
-        "xgplayer-subtitles": "^3.0.20"
     },
     "devDependencies": {
-        "@types/lodash": "^4.17.7",
+        "@vercel/ncc": "^0.38.1",
-        "@types/node": "^22.1.0",
+        "uglify-js": "^3.19.1"
-        "@types/pdfjs-dist": "^2.10.378",
-        "@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

@@ -1,413 +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 VirtualDirectory, { VirtualFile } from './class/VirtualDirectory'
-import MiaoMask from './components/miaoMask.vue'
-import config from './config'
-import useVirtualPages from './hooks/useVirtualPages'
-import init from './hooks/init'
-
-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,
-    currentDirectories?: VirtualDirectory[],
-    currentFiles?: VirtualFile[],
-    index?: number
-) => {
-    views.push(component, currentDirectories, currentFiles, index)
-}
-
-const deleteView = (index: number) => {
-    views.deleteView(index)
-    if (views.length === 0) {
-        createView(miaoDirectory, [rootDirectory])
-    }
-}
-
-// 点击标题是隐藏其他标签或显示其他标签，还挺好用的
-const handleClickTitle = (index: number) => {
-    let count = views._views.filter((v) => v.visible).length
-    let op = !views._views[index].visible || count > 1 ? 'hideOthers' : 'showOthers'
-    let _index = 0
-    while (_index < views._views.length) {
-        if (_index !== index) {
-            views._views[_index].visible = op === 'hideOthers' ? false : true
-        } else {
-            views._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(() => {
-    init()
-    createView(miaoDirectory, [rootDirectory])
-})
-</script>
-
-<template>
-    <div class="view">
-        <div class="view-controller">
-            <n-scrollbar x-scrollable>
-                <div class="tabs-container">
-                    <transition-group name="tab">
-                        <div
-                            class="tab"
-                            v-for="(view, index) of views._views"
-                            :key="view.uid">
-                            <span
-                                class="tab-title"
-                                :title="view.title"
-                                @click="handleClickTitle(index)">
-                                {{
-                                    view.title.length > 5 && 0
-                                        ? `${view.title.substring(0, 5)}...`
-                                        : view.title
-                                }}
-                            </span>
-                            <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.currentDirectories,
-                                            view.currentFiles,
-                                            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._views"
-                    v-show="view.visible"
-                    :key="view.uid">
-                    <component
-                        :is="view.component"
-                        v-model:current-directories="view.currentDirectories"
-                        v-model:current-files="view.currentFiles"
-                        :id="view.uid"
-                        :color="view.color"
-                        @exit="deleteView(index)"></component>
-                </div>
-            </transition-group>
-        </div>
-    </div>
-    <!-- 模态框展示，用来显示分享二维码，设置菜单之类的东西 -->
-    <MiaoMask v-model:show="showModal" @click="showModal = false">
-        <component
-            @click="(e:any) => e.stopPropagation()"
-            :is="modalData?.component"
-            v-bind="modalData?.props"></component>
-    </MiaoMask>
-</template>
-
-<style lang="scss" scoped>
-$controller-height: 25px;
-$tag-width: 170px;
-
-.view {
-    position: relative;
-    height: 100%;
-    width: 100%;
-
-    .view-controller {
-        display: flex;
-        height: $controller-height;
-        width: 100%;
-        background-color: #dadada;
-        // overflow: hidden;
-
-        .tabs-container {
-            display: flex;
-            margin-left: 5px;
-            flex: 1;
-
-            // overflow-x: scroll;
-            .tab {
-                position: relative;
-                width: $tag-width;
-                height: $controller-height;
-                margin: 0 5px;
-                // flex: 1;
-                display: flex;
-                border-radius: 5px 5px 0 0;
-                align-items: center;
-
-                .tab-title {
-                    // font-family: monospace;
-                    // font-weight: bolder;
-                    margin-left: 4px;
-                    width: 90px;
-                    user-select: none;
-                    cursor: pointer;
-                    overflow: hidden;
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
-                    span {
-                        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($controller-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($controller-height * 0.6);
-                width: 1px;
-                border-right: 1px solid black;
-                position: absolute;
-                left: 2px;
-            }
-        }
-
-        .icon {
-            height: calc($controller-height * 0.7);
-            width: calc($controller-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% - $controller-height);
-        overflow-y: hidden;
-        overflow-x: overlay;
-
-        .view-container-item {
-            flex: 1;
-            height: 100%;
-            min-width: 200px;
-        }
-
-        &::-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-controller {
-        .tabs-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/PluginCenter.ts

@@ -1,75 +0,0 @@
-import useVirtualPages from '@/hooks/useVirtualPages'
-import VirtualDirectory, { VirtualFile } from './VirtualDirectory'
-
-type plugin = {
-    // 用于显示的名字
-    name: string
-    // 判断是否可以使用这个组件
-    // 使用组件即调用下面的func
-    filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean
-    func: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => void
-}
-
-export default class PluginCenter {
-    constructor() {
-        this.pluginsMap = {}
-    }
-    pluginsMap: {
-        [key: string]: plugin
-    }
-
-    register(key: string, plugin: plugin) {
-        this.pluginsMap[key] = plugin
-    }
-
-    /**
-     * 便捷地注册一个组件为插件，触发时直接用新页面打开
-     */
-    registerComponent(
-        key: string,
-        name: string,
-        getComponent: () => Promise<any>,
-        filter: (
-            VDirectories: VirtualDirectory[],
-            VFiles: VirtualFile[]
-        ) => boolean
-    ): void {
-        let _component: any
-        const views = useVirtualPages()
-        this.register(key, {
-            name,
-            filter,
-            func: async (
-                VDirectories: VirtualDirectory[],
-                VFiles: VirtualFile[]
-            ) => {
-                if (filter(VDirectories, VFiles) === false) {
-                    return
-                }
-                if (_component === undefined) _component = await getComponent()
-                views.push(_component, VDirectories, VFiles)
-            }
-        })
-    }
-
-    getUsablePlugin(VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) {
-        const usableList = []
-        for (let key of Object.keys(this.pluginsMap)) {
-            if (this.pluginsMap[key].filter(VDirectories, VFiles)) {
-                usableList.push(key)
-            }
-        }
-        return usableList.map((key) => ({
-            key,
-            ...this.pluginsMap[key]
-        }))
-    }
-
-    usePlugin(
-        key: string,
-        VDirectories: VirtualDirectory[],
-        VFiles: VirtualFile[]
-    ) {
-        this.pluginsMap[key].func(VDirectories, VFiles)
-    }
-}

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, 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

@@ -1,149 +0,0 @@
-import config from "@/config";
-import generateId from "@/hooks/generateId";
-import useMiaoFetchApi from "@/hooks/useMiaoFetchApi";
-// import { debounce } from "lodash";
-import type { stats, file, directory } from "@/types/type.ts";
-
-const miaoFetchApi = useMiaoFetchApi();
-
-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}`;
-	}
-
-	get url() {
-		return `${config.api.get}${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[];
-	// 子目录
-	directories?: 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 getParents(): VirtualDirectory[] {
-		if (!this.parent) {
-			return [this];
-		}
-		return [...this.parent.getParents, 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.directories = this.directories ?? [];
-		const fileNames: string[] = this.files.map(v => v.name);
-		const dirNames: string[] = this.directories.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.directories);
-		// 加入新的文件与文件夹
-		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.directories.push(new VirtualDirectory(item, this));
-				}
-			}
-		}
-	}
-
-	hasChild(item: VirtualDirectory | VirtualFile): boolean {
-		if (item.type === "directory") {
-			return this.directories?.includes(item) ?? false;
-		} else {
-			return this.files?.includes(item) ?? false;
-		}
-	}
-
-	/**
-	 * 调用后重新向远端拉取文件夹信息并进行更新
-	 * @returns {void}
-	 */
-	async update(): Promise<void> {
-		const data: (file | directory)[] = await miaoFetchApi.get(this);
-		this.updateContent(data);
-	}
-}
-export default VirtualDirectory;

src/class/VirtualPage.ts

@@ -1,123 +0,0 @@
-import { reactive, 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?: { directories?: VirtualDirectory[]; files?: VirtualFile[] }) {
-		this.component = shallowRef(component);
-		this.currentDirectories = initObjects?.directories ?? [];
-		this.currentFiles = initObjects?.files ?? [];
-		this.visible = true;
-		this.uid = generateId();
-		this.refreshKey = Math.random();
-		this.color = getRandomWebSafeColor();
-	}
-	// 页面使用的组件
-	component: any;
-	// 是否可见
-	visible: boolean;
-	// 当前正在使用的文件夹
-	currentDirectories: VirtualDirectory[];
-	// 当前正在使用的文件
-	currentFiles: 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?.currentDirectories[0]?.name ?? this?.currentFiles[0]?.name ?? "未命名标签";
-	}
-
-	setTitle(title: string) {
-		this._title = title;
-	}
-
-	// 切换显示状态
-	switchShow() {
-		this.visible = !this.visible;
-	}
-
-	// 刷新，不过好像没有用得到的时候吧
-	// 事实上也不应该用得到，因为更新应该是响应式的
-	refresh() {
-		this.refreshKey = Math.random();
-	}
-}
-
-export class VirtualPages {
-	constructor() {
-		this._views = reactive<VirtualPage[]>([]);
-	}
-	_views: VirtualPage[];
-
-	get length() {
-		return this._views.length;
-	}
-
-	/**
-	 * 查询一个页面位于_views中的次序
-	 * @param {any} id 要查询的页面的id
-	 * @returns {any}
-	 */
-	getIndex(id: number) {
-		for (let i in this._views) {
-			if (this._views[i].uid === id) {
-				return parseInt(i);
-			}
-		}
-		return -1;
-	}
-	/**
-	 * 根据id得到view
-	 * @param {any} id 要查询的页面的id
-	 */
-	getView(id: number) {
-		for (let v of this._views) {
-			if (v.uid === id) {
-				return v;
-			}
-		}
-		return undefined;
-	}
-
-	/**
-	 * 推入一个新的页面
-	 */
-	push(component: any, currentDirectories?: VirtualDirectory[], currentFiles?: VirtualFile[], index?: number) {
-		index ?? (index = this.length);
-		this._views.splice(
-			index,
-			0,
-			reactive<VirtualPage>(
-				new VirtualPage(component, {
-					directories: [...(currentDirectories ?? [])],
-					files: [...(currentFiles ?? [])]
-				})
-			)
-		);
-	}
-	/**
-	 * 根据次序删除一个页面
-	 */
-	deleteView(index: number) {
-		this._views.splice(index, 1);
-	}
-}

src/components/miaoContextMenu.vue

@@ -1,88 +0,0 @@
-<!-- 基于naiveui的下拉菜单实现的自定义下拉菜单 -->
-<!-- 支持长按和右键呼出下拉菜单 -->
-<template>
-    <div class="main" @contextmenu="handleContextMenu" @mouseleave="handleMainMouseLeave">
-        <slot></slot>
-    </div>
-    <n-dropdown placement="bottom-start" trigger="manual" :x="x" :y="y" :options="props.options"
-        :show="showContextMenu > 0" :on-clickoutside="onClickoutside" @select="handleSelect" @mouseleave="
-            showContextMenu -= 1" @mouseenter="showContextMenu += 1" />
-</template>
-
-<script setup lang="ts">
-import { NDropdown } from 'naive-ui/es/dropdown';
-import { DropdownOption } from 'naive-ui/es/dropdown';
-import { nextTick, ref } from 'vue';
-
-const props = defineProps<{
-    options: DropdownOption[]
-    // 长按呼出右键菜单的时延，undefined时不生效
-    touchTimeOut?: number
-}>()
-const emit = defineEmits<{
-    select: [key: string]
-}>()
-
-const x = ref(0)
-const y = ref(0)
-const showContextMenu = ref(0)
-// 长按计时器
-// let timer_touch: string | number | NodeJS.Timeout | undefined
-
-const onClickoutside = async () => {
-    showContextMenu.value = 0
-}
-
-const handleMainMouseLeave = async () => {
-    setTimeout(() => {
-        showContextMenu.value -= 1
-    }, 20)
-    // nextTick(()=>{
-    //     showContextMenu.value -= 1
-    // })
-}
-
-const handleSelect = async (key: string) => {
-    emit('select', key)
-    showContextMenu.value = 0
-}
-
-const handleContextMenu = (e: MouseEvent) => {
-    e.preventDefault()
-    showContextMenu.value = 0
-    nextTick().then(() => {
-        showContextMenu.value += 1
-        x.value = e.clientX
-        y.value = e.clientY
-    })
-}
-
-// const handleTouchStart = (e: TouchEvent) => {
-//     if(props.touchTimeOut === undefined) {
-//         return
-//     }
-//     timer_touch ?? clearTimeout(timer_touch)
-//     timer_touch = setTimeout(() => {
-//         showContextMenu.value = 1
-//         x.value = e.targetTouches[0].clientX
-//         y.value = e.targetTouches[0].clientY
-//     }, props.touchTimeOut)
-// }
-
-// const handleTouchEnd = () => {
-//     if(timer_touch) {
-//         clearTimeout(timer_touch)
-//         timer_touch = undefined
-//     }
-
-// }
-
-</script>
-
-<style>
-.main {
-    width: 100%;
-    height: 100%;
-    position: relative;
-}
-</style>

src/components/miaoDirectory/miaoDirectoryBottom.vue

@@ -1,77 +0,0 @@
-<template>
-    <div class="miao-directory-container-bottom" :style="{
-      backgroundColor:
-        index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)'
-    }">
-      <div class="container-bottom-item">
-        <div class="container-bottom-item-icon">
-          <add-outline :style="{
-            color:
-              index % 2 === 0
-                ? 'rgb(0 0 0)'
-                : 'rgb(255 255 255)'
-          }" @click="$emit('add-new-item')" />
-        </div>
-      </div>
-      <div class="container-bottom-item">
-        <div class="container-bottom-item-icon">
-          <cloud-upload-outline :style="{
-            color:
-              index % 2 === 0
-                ? 'rgb(0 0 0)'
-                : 'rgb(255 255 255)'
-          }" @click="$emit('pick-files-upload')" />
-        </div>
-      </div>
-    </div>
-  </template>
-  
-  <script setup lang="ts">
-  import { AddOutline, CloudUploadOutline } from '@vicons/ionicons5'
-  defineProps<{
-    index: number
-  }>()
-  
-  const emit = defineEmits<{
-    'add-new-item': []
-    'pick-files-upload': []
-  }>()
-  </script>
-  
-  <style scoped lang="scss">
-  .miao-directory-container-bottom {
-    height: 60px;
-    background-color: bisque;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    user-select: none;
-    box-shadow: 0px 1px 10px #888888;
-    z-index: 2;
-  
-    .container-bottom-item {
-      height: 40px;
-      width: 40px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-  
-      .container-bottom-item-icon {
-        svg {
-          width: 30px;
-          height: 30px;
-          transition: width 0.3s ease;
-          transition: height 0.3s ease;
-          cursor: pointer;
-        }
-  
-        &:hover {
-          svg {
-            width: 40px;
-            height: 40px;
-          }
-        }
-      }
-    }
-  }
-  </style>

src/components/miaoDirectory/miaoDirectoryItem.vue

@@ -1,349 +0,0 @@
-<template>
-    <div class="miao-item" draggable="true" ref="itemRef" @dragstart="handleDragStart">
-        <miaoContextMenu :options="dropDownOptions" :touch-time-out="500" @select="handleDropdownSelect">
-            <div class="item-main" :class="selected ? 'item-main-selected' : ''" ref="mainRef">
-                <div class="item-main-front" :style="{ backgroundColor: props.color }"></div>
-                <Icon class="item-main-icon" v-show="clientWidth > 250"></Icon>
-                <div class="item-main-info">
-                    <div class="item-main-info-name">
-                        <Icon class="item-main-info-name-icon" v-if="clientWidth <= 250"></Icon>
-                        <n-ellipsis style="max-width: 80%;">{{ name }}</n-ellipsis>
-                    </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>
-        </miaoContextMenu>
-    </div>
-</template>
-
-<script setup lang="ts">
-import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
-import miaoContextMenu from '../miaoContextMenu.vue'
-import {
-    DocumentText,
-    FileTray,
-    Help,
-    Image,
-    LogoChrome,
-    LogoCss3,
-    LogoJavascript,
-    LogoVue,
-    PlayCircle,
-    Disc
-} from '@vicons/ionicons5'
-import { computed, onMounted, ref } from 'vue'
-import dateFormatter from '@/hooks/dateFormatter'
-import { NEllipsis } from 'naive-ui'
-import usePluginCenter from '@/hooks/usePluginCenter'
-// import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
-
-// const miaoFetchApi = useMiaoFetchApi()
-
-const props = defineProps<{
-    item: VirtualDirectory | VirtualFile
-    name?: string
-    color: string
-    selectedItem: (VirtualDirectory | VirtualFile)[]
-}>()
-
-const emit = defineEmits<{
-    download: []
-    delete: []
-    rename: []
-    dragStart: [event: DragEvent, item: VirtualDirectory | VirtualFile]
-    onSelected: []
-}>()
-
-const pluginCenter = usePluginCenter()
-
-const itemType = ref<'file' | 'directory'>(props.item.type)
-
-const mainRef = ref<HTMLDivElement>()
-
-// 使用ResizeObserver实现
-const clientWidth = ref<number>(666)
-
-const name = props.name ?? props.item.name
-
-const selected = computed(() => {
-    return props.selectedItem.includes(props.item)
-})
-
-const time = computed(() => {
-    return dateFormatter(
-        new Date(props.item.stats.mtimeMs),
-        'yyyy-MM-dd hh:mm:ss'
-    )
-})
-
-const dropDownOptions = computed(() => {
-    const items = [...props.selectedItem]
-    if (!selected.value) {
-        items.push(props.item)
-    }
-    const vDirs = items.filter(v => v.type === 'directory')
-    const vFiles = items.filter(v => v.type === 'file')
-    const options = [
-        {
-            label: '重命名',
-            key: 'rename'
-        },
-        {
-            label: '删除',
-            key: 'delete'
-        },
-    ]
-    if (itemType.value === 'file') {
-        options.push(
-            ...[
-                {
-                    label: '下载',
-                    key: 'download'
-                }
-            ]
-        )
-    }
-    if (selected.value === false) {
-        options.push(
-            ...[
-                {
-                    label: '多选:选择',
-                    key: 'select'
-                }
-            ]
-        )
-    } else {
-        options.push(
-            ...[
-                {
-                    label: '多选:取消',
-                    key: 'select'
-                }
-            ]
-        )
-    }
-    options.push(...pluginCenter.getUsablePlugin(vDirs, vFiles).map(v => ({
-        label: `插件:${v.name}`,
-        key: `plugin:${v.key}`
-    })))
-    return options
-})
-
-// 是不是可以直接在这里面实现？
-// 应该将所有事件emit出去才对
-const handleDropdownSelect = (key: string) => {
-    if (key === 'rename') {
-        emit('rename')
-    } else if (key === 'download') {
-        emit('download')
-    } else if (key === 'delete') {
-        emit('delete')
-    } else if (key === 'select') {
-        emit('onSelected')
-    } else if (key.startsWith('plugin:')) {
-        const items = [...props.selectedItem]
-        if (!selected.value) {
-            items.push(props.item)
-        }
-        const vDirs = items.filter(v => v.type === 'directory')
-        const vFiles = items.filter(v => v.type === 'file')
-        const plugin = key.split(':')[1]
-        pluginCenter.usePlugin(plugin, vDirs, vFiles)
-    }
-}
-
-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])
-}
-
-onMounted(() => {
-    const observer = new ResizeObserver(entries => {
-        for (let entry of entries) {
-            clientWidth.value = entry.contentRect.width;
-        }
-    });
-    if (mainRef.value) {
-        observer.observe(mainRef.value);
-    }
-})
-</script>
-
-<style lang="scss" scoped>
-.miao-item {
-    cursor: pointer;
-    width: calc(100% - 20px);
-    min-width: 170px;
-    // 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%;
-        min-width: 200px;
-        height: 95%;
-        background-color: rgb(255, 255, 255);
-        border-radius: 7px;
-        display: flex;
-        align-items: center;
-        transition: background-color 0.3s ease;
-
-        .item-main-front {
-            height: 100%;
-            min-width: 10px;
-            border-radius: 7px 0 0 7px;
-            background-color: rgb(0, 0, 0);
-        }
-
-        .item-main-icon {
-            min-width: 30px;
-            margin-left: 10px;
-            height: 30px;
-            width: 30px;
-            color: #00403e;
-            transition: color 0.15s ease-out;
-        }
-
-        .item-main-info {
-            margin-left: 10px;
-            height: 100%;
-            width: calc( 100% - 10px );
-            display: flex;
-            flex-direction: column;
-
-            &-name {
-                position: relative;
-                user-select: none;
-                display: flex;
-                align-items: center;
-                margin-top: 3px;
-
-                &-icon {
-                    color: #00403e;
-                    width: 20px;
-                    margin-right: 5px;
-                    transition: color 0.15s ease-out;
-                }
-            }
-
-            &-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;
-        }
-    }
-
-    .item-main-selected {
-        background-color: rgba(0, 128, 207, 0.32);
-
-        &:hover {
-            background-color: rgba(0, 128, 207, 0.64);
-            ;
-        }
-    }
-}
-</style>

src/components/miaoDirectory/miaoDirectoryItemsContainer.vue

@@ -1,82 +0,0 @@
-<template>
-    <div class="miao-directory-container-items" :style="{
-        backgroundColor:
-            index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
-    }">
-        <n-scrollbar ref="scrollbarRef">
-            <miao-lazy-div v-for="(dir, index) in showData_directory" :key="dir.uid" :disableLazy="index < 20"
-                min-height="50px">
-                <miaoDirectoryItem :item="dir" :color="props.color" :selectedItem="selectedItem"
-                    @delete="handleItemDelete(dir)" @click="handleItemClick(dir)" @drag-start="handleItemDragStart"
-                    @rename="handleItemRename(dir)" @on-selected="handleItemSelect(dir)" />
-            </miao-lazy-div>
-            <miao-lazy-div v-for="(file, index) in showData_files" :key="file.uid" :disableLazy="index < 20"
-                min-height="50px">
-                <miaoDirectoryItem :item="file" :color="props.color" :selectedItem="selectedItem"
-                    @click="handleItemClick(file)" @download="handleItemDownload(file)" @delete="handleItemDelete(file)"
-                    @drag-start="handleItemDragStart" @rename="handleItemRename(file)"
-                    @on-selected="handleItemSelect(file)" />
-            </miao-lazy-div>
-        </n-scrollbar>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { NScrollbar } from 'naive-ui'
-import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
-import miaoDirectoryItem from '@/components/miaoDirectory/miaoDirectoryItem.vue'
-import miaoLazyDiv from '@/components/miaoLazyDiv.vue'
-import { ref } from 'vue';
-
-const props = defineProps<{
-    color: string
-    index: number
-    showData_directory: VirtualDirectory[]
-    showData_files: VirtualFile[]
-    selectedItem: (VirtualFile | VirtualDirectory)[]
-}>()
-
-const emit = defineEmits<{
-    'item-click': [item: VirtualDirectory | VirtualFile]
-    'item-download': [item: VirtualFile]
-    'item-delete': [item: VirtualDirectory | VirtualFile]
-    'item-drag-start': [_event: DragEvent, item: VirtualDirectory | VirtualFile]
-    'item-rename': [item: VirtualDirectory | VirtualFile]
-    'item-select': [item: VirtualDirectory | VirtualFile]
-}>()
-
-const scrollbarRef = ref()
-
-defineExpose({ scrollTo: (...args: any) => scrollbarRef.value.scrollTo(...args) });
-
-const handleItemClick = (item: VirtualDirectory | VirtualFile) => {
-    emit('item-click', item)
-}
-
-const handleItemDownload = (item: VirtualFile) => {
-    emit('item-download', item)
-}
-
-const handleItemDelete = (item: VirtualDirectory | VirtualFile) => {
-    emit('item-delete', item)
-}
-
-const handleItemDragStart = (_event: DragEvent, item: VirtualDirectory | VirtualFile) => {
-    emit('item-drag-start', _event, item)
-}
-
-const handleItemRename = (item: VirtualDirectory | VirtualFile) => {
-    emit('item-rename', item)
-}
-
-const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
-    emit('item-select', item)
-}
-</script>
-
-<style scoped lang="scss">
-.miao-directory-container-items {
-    width: 100%;
-    height: calc(100% - 30px - 60px);
-}
-</style>

src/components/miaoDirectory/miaoDirectoryTop.vue

@@ -1,152 +0,0 @@
-<template>
-    <div class="miao-directory-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">
-            <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?.getParents"
-                        @click="handleClickBreadcrumbItem(dir)" :clickable="true">
-                        <div>{{ dir.name }}</div>
-                    </n-breadcrumb-item>
-                </n-breadcrumb>
-            </div>
-        </div>
-        <div class="container-top-tools">
-            <n-icon class="container-top-tools-item" size="15" @click="$emit('back')">
-                <ChevronBackOutline />
-            </n-icon>
-            <n-icon class="container-top-tools-item" size="14" @click="$emit('reload')">
-                <ReloadOutline class="container-top-tools-item-reload" />
-            </n-icon>
-            <n-dropdown trigger="click" :options="openMenuOption" @select="(key: string) => emit('menuSelect', key)">
-                <n-icon class="container-top-tools-item" size="14">
-                    <EllipsisVertical />
-                </n-icon>
-            </n-dropdown>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { NBreadcrumbItem, NBreadcrumb, NIcon, NDropdown } from 'naive-ui'
-import {
-    CloudOutline,
-    ChevronBackOutline,
-    ReloadOutline,
-    EllipsisVertical,
-} from '@vicons/ionicons5'
-import VirtualDirectory from '@/class/VirtualDirectory'
-
-const props = defineProps<{
-    color: string;
-    index: number
-    currentDirectory: VirtualDirectory | undefined;
-    openMenuOption: {
-        key: string,
-        label: string,
-        [key: string]: any,
-    }[]
-}>()
-
-const emit = defineEmits<{
-    back: [],
-    reload: [],
-    menuSelect: [key: string]
-    'set-current-directory': [virtualDirectory: VirtualDirectory]
-}>()
-
-const handleClickBreadcrumbItem = (virtualDirectory: VirtualDirectory) => {
-    emit('set-current-directory', virtualDirectory)
-}
-
-</script>
-
-<style scoped lang="scss">
-.miao-directory-container-top {
-    height: 30px;
-    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;
-            margin: 0 1px;
-            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);
-            }
-        }
-
-    }
-}
-</style>

src/components/miaoDropHandler.vue

@@ -1,106 +0,0 @@
-<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/miaoLazyDiv.vue

@@ -1,95 +0,0 @@
-<!-- 只适合用于渲染过程较为复杂的组件，不然可能得不偿失
-     这么泛用的组件，性能差点也能理解 -->
-<template>
-    <div class="miao-lazy" ref="miaoLazyRoot" :style="!show ? { minHeight, minWidth } : {}">
-        <slot v-if="show" />
-    </div>
-</template>
-
-<script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref } from 'vue';
-
-const props = defineProps({
-    disableLazy: {
-        type: Boolean,
-        default: false,
-    },
-    // 仅在内容未加载时生效，用于占位
-    minHeight: {
-        type: String,
-        default: 'none',
-    },
-    minWidth: {
-        type: String,
-        default: 'none',
-    }
-})
-
-const miaoLazyRoot = ref<HTMLDivElement>()
-
-const show = ref<boolean>(props.disableLazy)
-
-const isVisible = (dom: HTMLDivElement) => {
-    const offset = dom.getBoundingClientRect().top
-    return offset > 0 && offset < 2000
-}
-
-const { showSlot, hideSlot, clearTimer } = (() => {
-    let timer: any
-    let timerInterval: any
-    const clearTimer = () => {
-        timer && clearTimeout(timer)
-        timerInterval && clearInterval(timerInterval)
-        timer = undefined
-        timerInterval = undefined
-    }
-    const hideSlot = () => {
-        clearTimer()
-        show.value = false
-    }
-    const showSlot = () => {
-        if (show.value === true) {
-            return
-        }
-        clearTimer()
-        // timer = setTimeout(() => {
-        if (!miaoLazyRoot.value || isVisible(miaoLazyRoot.value) === false) {
-            return
-        }
-        show.value = true
-        timerInterval = setInterval(() => {
-            if (show.value === false || miaoLazyRoot.value === undefined) {
-                return
-            }
-            if (isVisible(miaoLazyRoot.value) === false) {
-                hideSlot()
-            }
-        }, 1000)
-        // })
-    }
-    return { showSlot, hideSlot, clearTimer }
-})()
-
-onMounted(() => {
-    if (show.value === false) {
-        let options = {
-            threshold: 0
-        };
-
-        let observer: IntersectionObserver | undefined = new IntersectionObserver((entries) => {
-            if (entries[0].isIntersecting) {
-                showSlot()
-                // miaoLazyRoot.value && observer?.unobserve(miaoLazyRoot.value)
-                // observer = undefined
-            } else {
-                hideSlot()
-            }
-        }, options);
-        miaoLazyRoot.value && observer.observe(miaoLazyRoot.value);
-    }
-})
-
-onBeforeUnmount(() => {
-    clearTimer()
-})
-</script>

src/components/miaoMask.vue

@@ -1,55 +0,0 @@
-<template>
-  <transition name="transition">
-    <div class="mask-body" ref="maskBodyRef" v-show="showMask">
-        <slot></slot>
-    </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;
-
-  // &-container {
-
-  // }
-
-  &-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/miaoMessageProvider.vue

@@ -1,147 +0,0 @@
-<template>
-    <div class="miao-message-provider" ref="rootRef">
-        <slot></slot>
-        <transition-group name="message-fade" tag="div" class="miao-message-provider-container">
-            <div class="miao-message" v-for="msg in messageList" :key="msg.id"
-                :style="{ maxWidth: maxMessageWidth + 'px' }">
-                <n-icon class="miao-message-item" size="18" :color="msg.iconColor">
-                    <component :is="msg.icon"></component>
-                </n-icon>
-                <div class="miao-message-item miao-message-item-content">{{ msg.content }}</div>
-            </div>
-        </transition-group>
-    </div>
-</template>
-
-<script setup lang="ts">
-import generateId from '@/hooks/generateId';
-import { NIcon } from 'naive-ui';
-import { computed, onMounted, ref, shallowReactive } from 'vue';
-import { InformationCircle, CheckmarkCircle, CloseCircle } from '@vicons/ionicons5'
-
-interface MessageOptions {
-    type?: 'info' | 'success' | 'error'
-    timeout?: number
-    id?: number
-}
-
-interface Message {
-    icon: any,
-    timer: any,
-    iconColor: string,
-    content: string,
-}
-
-const iconMap = {
-    'info': { icon: InformationCircle, color: 'blue' },
-    'success': { icon: CheckmarkCircle, color: 'green' },
-    'error': { icon: CloseCircle, color: 'red' },
-}
-
-const messageMap = shallowReactive<Record<string, Message | undefined>>({})
-const rootRef = ref<HTMLDivElement>()
-const maxMessageWidth = ref<number>(-1)
-
-const messageList = computed(() => {
-    return Object.keys(messageMap).filter(v => messageMap[v] !== undefined).map(v => ({
-        id: v,
-        ...messageMap[v],
-    }))
-})
-const message = (content: string, options?: MessageOptions) => {
-    let timer: any
-    const { timeout = 0, type = 'info', id = generateId() } = options ?? {}
-    if (timeout > 0) {
-        messageMap[id]?.timer && clearTimeout(messageMap[id]?.timer)
-        timer = setTimeout(() => {
-            messageMap[id] = undefined
-        }, timeout)
-    }
-    messageMap[id] = {
-        icon: iconMap[type].icon,
-        iconColor: iconMap[type].color,
-        content,
-        timer
-    }
-    return (newContent: string, newOptions?: MessageOptions) => {
-        newOptions = newOptions ?? {}
-        newOptions.id = id
-        message(newContent, newOptions)
-    }
-}
-
-onMounted(async () => {
-    // const set = message('test', { timeout: 5000 })
-    // setTimeout(() => {
-    //     set('miao', { type: 'success' })
-    // }, 1000);
-    const observer = new ResizeObserver(entries => {
-        for (let entry of entries) {
-            maxMessageWidth.value = entry.contentRect.width * 0.8;
-        }
-    });
-    if (rootRef.value) {
-        observer.observe(rootRef.value);
-    }
-})
-
-
-defineExpose({ message });
-</script>
-
-<style scoped lang="scss">
-.miao-message-provider {
-    width: 100%;
-    height: 100%;
-    position: relative;
-
-    .miao-message-provider-container {
-        position: absolute;
-        width: 0;
-        height: 0;
-        left: 50%;
-        top: 30px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        overflow: visible;
-
-        .miao-message {
-            display: flex;
-            align-items: center;
-            width: max-content;
-            background-color: rgb(249, 249, 249);
-            padding: 5px 10px;
-            background-color: rgb(255 255 255);
-            box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);
-            border-radius: 5px;
-            user-select: none;
-            margin-top: 10px;
-
-            .miao-message-item {
-                margin: 0 5px;
-            }
-
-            .miao-message-item-content {
-                white-space: pre-wrap;
-            }
-        }
-    }
-
-    .message-fade-move,
-    .message-fade-enter-active,
-    .message-fade-leave-active {
-        transition: all 0.5s ease;
-    }
-
-    .message-fade-enter-from,
-    .message-fade-leave-to {
-        opacity: 0;
-        transform: translateX(30px);
-    }
-
-    .message-fade-leave-active {
-        position: absolute;
-    }
-}
-</style>

src/components/miaoPopupInput.vue

@@ -1,83 +0,0 @@
-<template>
-  <miao-mask v-model:show="showMask">
-    <n-card class="popup-card" :title="popupConfig?.title" size="medium">
-      {{ popupConfig?.content }}
-      <n-input class="popup-input" v-model:value="inputValue" type="text" v-bind="popupConfig?.inputProps"
-        v-if="popupConfig?.inputProps" />
-      <div class="popup-button-container">
-        <n-button class="popup-button-container-button" v-for="option in popupConfig?.options" :key="option.label"
-          :type="option.type" @click="_resolve && _resolve(option.key)">{{ option.label }}</n-button>
-      </div>
-    </n-card>
-  </miao-mask>
-</template>
-<script lang="ts" setup>
-import { ref, nextTick } from "vue";
-import { NCard, NInput, NButton } from "naive-ui";
-import miaoMask from "./miaoMask.vue";
-import { InputProps } from "naive-ui";
-
-const showMask = ref(false);
-const inputValue = ref<string>("");
-const _resolve = ref()
-
-type popupConfigType = {
-  title: string
-  content?: string
-  inputValue?: string,
-  inputProps?: InputProps
-  options: {
-    label: string
-    key: unknown
-    type: 'default' | 'tertiary' | 'primary' | 'success' | 'info' | 'warning' | 'error'
-  }[]
-}
-
-const popupConfig = ref<popupConfigType>()
-
-const popup = async (config: popupConfigType) => {
-  popupConfig.value = config
-  inputValue.value = config.inputValue ?? ''
-  showMask.value = true
-  const key = await new Promise((resolve: (key: unknown) => unknown) => {
-    _resolve.value = resolve
-  })
-  const text = inputValue.value
-  showMask.value = false;
-  nextTick(() => {
-    inputValue.value = ''
-    _resolve.value = undefined
-  })
-  return {
-    text,
-    key
-  };
-};
-
-defineExpose({ popup });
-</script>
-
-<style scoped lang="scss">
-.popup-card {
-  width: 80%;
-
-  .popup-input {
-    margin-bottom: 10px;
-  }
-
-  .popup-button-container {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    justify-content: flex-end;
-    flex-wrap: wrap;
-
-    .popup-button-container-button {
-      margin-top: 3px;
-      &:not(:last-child) {
-        margin-right: 5px;
-      }
-    }
-  }
-}
-</style>

src/config.ts

@@ -1,16 +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',
-        delete: '/delete',
-        query: '/query',
-        rename: '/rename',
-        mkdir: '/mkdir',
-        cut: '/cut'
-    },
-    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/init.ts

@@ -1,121 +0,0 @@
-import MiaoDirectory from '@/views/miaoDirectory.vue'
-import usePluginCenter from './usePluginCenter'
-
-export default function init() {
-    const pluginCenter = usePluginCenter()
-    pluginCenter.registerComponent(
-        'miaoDirectory',
-        '文件夹',
-        async () => MiaoDirectory,
-        (vDirs, vFiles) => {
-            if (vFiles.length) {
-                return false
-            }
-            return vDirs.length === 1
-        }
-    )
-    pluginCenter.registerComponent(
-        'miaoVideoPlayer',
-        '视频',
-        async () => (await import('@/views/miaoVideoPlayer.vue')).default,
-        (vDirs, vFiles) => {
-            if (vDirs.length !== 0) {
-                return false
-            }
-            if (vFiles.length === 0) {
-                return false
-            }
-            for (let i of vFiles) {
-                for (let s of ['mp4', 'm3u8', 'hls']) {
-                    if (i.name.endsWith(s)) {
-                        return true
-                    }
-                }
-            }
-            return false
-        }
-    )
-    pluginCenter.registerComponent(
-        'miaoIframe',
-        '框架',
-        async () => (await import('@/views/miaoIframe.vue')).default,
-        (vDirs, vFiles) => {
-            if (vDirs.length !== 0) {
-                return false
-            }
-            if (vFiles.length !== 1) {
-                return false
-            }
-            return vFiles[0].name.endsWith('html')
-        }
-    )
-    pluginCenter.registerComponent(
-        'miaoPDF',
-        'PDF浏览',
-        async () => (await import('@/views/miaoPDF.vue')).default,
-        (vDirs, vFiles) => {
-            if (vDirs.length !== 0) {
-                return false
-            }
-            if (vFiles.length !== 1) {
-                return false
-            }
-            return vFiles[0].name.endsWith('pdf')
-        }
-    )
-    pluginCenter.registerComponent(
-        'miaoCodeMirror',
-        '代码编辑',
-        async () => (await import('@/views/miaoCodeMirror.vue')).default,
-        (vDirs, vFiles) => {
-            if (vDirs.length !== 0) {
-                return false
-            }
-            if (vFiles.length !== 1) {
-                return false
-            }
-            for (let end of [
-                'js',
-                'ts',
-                'jsx',
-                'tsx',
-                'py',
-                'html',
-                'css',
-                'scss',
-                'go',
-                'json',
-                'md',
-                'yaml',
-                'txt',
-                'xml',
-                'vue',
-            ]) {
-                if (vFiles[0].name.endsWith(end)) {
-                    return true
-                }
-            }
-            return false
-        }
-    )
-	pluginCenter.registerComponent(
-		"miaoImages",
-		"图片浏览",
-		async () => (await import("@/views/miaoImages.vue")).default,
-		(vDirs, vFiles) => {
-			if (vDirs.length === 0 && vFiles.length === 0) {
-				return false;
-			}
-            if( vDirs.length ) {
-                return true
-            }
-			for (let vf of vFiles)
-				for (let end of ["xbm", "tif", "pjp", "svgz", "jpg", "jpeg", "ico", "tiff", "gif", "svg", "jfif", "webp", "png", ".bmp", "pjpeg", "avif"]) {
-					if (vf.name.endsWith(end)) {
-						return true
-					}
-				}
-			return false;
-		}
-	);
-}

src/hooks/miaoTools.ts

@@ -1,47 +0,0 @@
-export const filePicker = (() => {
-	let _resolve: ((files: File[]) => void) | undefined;
-	return (option?: { accept?: "string"; multiple: boolean }) => {
-		if (_resolve) {
-			_resolve([]);
-			_resolve = undefined;
-		}
-		return new Promise<File[]>(resolve => {
-			const inpEle = document.createElement("input");
-			inpEle.id = `__file_${Math.ceil(Math.random() * 100000000)}`;
-			inpEle.type = "file";
-			inpEle.style.display = "none";
-			_resolve = resolve;
-			// 文件类型限制
-			// inpEle.accept="image/*"
-			option?.accept && (inpEle.accept = option?.accept);
-			// 多选限制
-			option?.multiple && (inpEle.multiple = option?.multiple);
-			// inpEle.addEventListener("change", event => fn.call(inpEle, event, inpEle.files), { once: true });
-			inpEle.addEventListener(
-				"change",
-				() => {
-					if (!inpEle.files) {
-						return;
-					}
-					const files: File[] = [];
-					let i = 0;
-					while (i < inpEle.files?.length) {
-						const _file = inpEle?.files?.item(i);
-						if (_file !== null) {
-							files.push(_file);
-						}
-						i += 1;
-					}
-					resolve(files);
-                    _resolve = undefined
-				},
-				{ once: true }
-			);
-			inpEle.click();
-		});
-	};
-})();
-
-export default {
-	filePicker,
-};

src/hooks/useDataBus.ts

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

@@ -1,287 +0,0 @@
-import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
-import {
-    getOption,
-    getResponse,
-    miaoFetchConfig,
-    deleteOption,
-    uploadOption,
-    queryOption,
-    renameOption,
-    cutOption,
-    mkdirOption
-} 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
-    },
-
-    /**
-     * 获取对应文件夹下的数据
-     */
-    async getFile(
-        vFile: VirtualFile,
-        option?: getOption
-    ): Promise<getResponse> {
-        // const { baseUrl, api } = Config
-        const url = vFile.url
-        const retry = option?.retry ?? 0
-        const axiosOption = option?.axiosOption ?? {}
-
-        const { miaoFetch } = useMiaoFetch({
-            retry
-        })
-        const response = await miaoFetch({
-            url, ...axiosOption
-        })
-        return response.data
-    },
-
-    /**
-     * 上传单个文件到对应文件夹, 后续要将data类型改成buffer以支持分片上传
-     * 正常上传文件请使用uploadQueue
-     */
-    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('operateType', 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)
-            })
-        }
-    },
-
-    /**
-     * 在目标文件夹下创建新的文件夹
-     */
-    mkdir(
-        targetVDir: VirtualDirectory,
-        newFolderName: string,
-        option?: mkdirOption
-    ) {
-        const { baseUrl, api } = Config
-        const url = `${baseUrl}${api.mkdir}${targetVDir.path}`
-        const { miaoFetch } = useMiaoFetch({
-            retry: option?.retry ?? 0
-        })
-
-        return new Promise<{
-            message: 'success' | 'failed'
-            error?: string
-        }>(async (resolve) => {
-            const response = await miaoFetch({
-                url,
-                method: 'post',
-                data: {
-                    folderName: newFolderName
-                }
-            })
-            resolve(response.data)
-        })
-    },
-    /**
-     * 在目标文件夹下创建新的空文件，实际上是通过upload空文件实现
-     */
-    mkFile(
-        targetVDir: VirtualDirectory,
-        newFileName: string,
-        option?: uploadOption
-    ) {
-        const emptyBlob = new Blob([])
-        const emptyFile = new File([emptyBlob], newFileName, {
-            type: 'text/plain'
-        })
-        return this.upload(emptyFile, targetVDir, option)
-    },
-
-    /**
-     * 删除对应的文件或文件夹，若为文件夹会递归删除
-     */
-    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)
-            })
-        }
-    },
-    /**
-     * 重命名对应的文件或文件夹
-     */
-    rename(
-        target: VirtualFile | VirtualDirectory,
-        newName: string,
-        option?: renameOption
-    ) {
-        const { baseUrl, api } = Config
-        const url = `${baseUrl}${api.rename}${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',
-                    data: { newName }
-                })
-                resolve(response.data)
-            })
-        }
-    },
-    /**
-     * 剪切文件或文件夹
-     */
-    cut(
-        target: VirtualFile | VirtualDirectory,
-        to: VirtualDirectory,
-        option?: cutOption
-    ) {
-        const newPath = to.path
-        const { baseUrl, api } = Config
-        const url = `${baseUrl}${api.cut}${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',
-                    data: { newPath }
-                })
-                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/usePluginCenter.ts

@@ -1,11 +0,0 @@
-import PluginCenter from "@/class/PluginCenter";
-import { reactive } from "vue";
-
-let pluginCenter: PluginCenter
-
-export default function usePluginCenter(){
-    if(!pluginCenter) {
-        pluginCenter = reactive(new PluginCenter())
-    }
-    return pluginCenter
-}

src/hooks/useUploadQueue.ts

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

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

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,31 +0,0 @@
-import { AxiosRequestConfig } from "axios";
-import { directory, file } from "./type";
-
-export type miaoFetchConfig = {
-    retry?: number
-    axiosOption?: AxiosRequestConfig<any>
-}
-
-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 renameOption = {} & miaoFetchConfig;
-export type cutOption = {} & miaoFetchConfig
-export type mkdirOption = {} & miaoFetchConfig
-export type queryOption = {} & 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/miaoCodeMirror.vue

@@ -1,195 +0,0 @@
-<template>
-    <miao-message-provider ref="miaoMessage">
-        <div class="codemirror-container" ref="rootRef" :class="`codemirror-container-${theme}`">
-            <div class="codemirror-container-top">
-                <div class="codemirror-container-btn codemirror-container-btn-save" @click="handleSave">保存</div>
-                <div class="codemirror-container-btn codemirror-container-btn-save" @click="handleReset">恢复到上次保存</div>
-            </div>
-            <div class="codemirror-container-main">
-                <NScrollbar style="max-height: calc( 100% );">
-                    <codemirror v-model="codeData" :extensions="extensions" />
-                </NScrollbar>
-            </div>
-        </div>
-    </miao-message-provider>
-</template>
-
-<script setup lang="ts">
-import miaoMessageProvider from '@/components/miaoMessageProvider.vue'
-import { VirtualFile } from '@/class/VirtualDirectory'
-import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
-import { onMounted, ref } from 'vue'
-import { Codemirror } from 'vue-codemirror'
-import { NScrollbar } from 'naive-ui'
-
-const miaoFetchApi = useMiaoFetchApi()
-
-const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
-    required: true
-})
-
-const miaoMessage = ref<InstanceType<typeof miaoMessageProvider>>()
-const vFile = ref<VirtualFile>()
-const rootRef = ref<HTMLDivElement>()
-// const _key = ref(Math.random())
-const codeData = ref<string>()
-// 第一次点击保存时自动备份data，暂时懒得做
-const bakData = ref<string>()
-const extensions = ref<any[]>([])
-const theme = ref<'light' | 'dark'>('light')
-
-const handleSave = async () => {
-    if (bakData.value === codeData.value || !vFile.value) {
-        miaoMessage.value?.message('内容未改动', {
-            timeout: 3000,
-            type: 'info'
-        })
-        return
-    }
-    const parentDir = vFile.value?.parent
-    const file_bak = new File(
-        [new Blob([bakData.value ?? ''])],
-        `${vFile.value?.name}.bak`
-    )
-    const file = new File([new Blob([codeData.value ?? ''])], vFile.value.name)
-    bakData.value = codeData.value
-    const { response } = miaoFetchApi.upload(file, parentDir)
-    false && miaoFetchApi.upload(file_bak, parentDir)
-    await response
-    miaoMessage.value?.message('保存成功', {
-        timeout: 5000,
-        type: 'success'
-    })
-
-}
-
-const handleReset = async () => {
-    codeData.value = bakData.value
-}
-
-// const switchTheme = async () => {
-//     if (!vFile.value) {
-//         return
-//     }
-//     theme.value = theme.value === 'dark' ? 'light' : 'dark'
-//     extensions.value = [
-//         ...(await getLangExtensions(vFile.value?.name)),
-//         // theme.value === 'dark' ?
-//     ]
-//     _key.value = Math.random()
-// }
-
-const getLangExtensions = async (fileName: string) => {
-    const ext = fileName.split('.').pop()?.toLocaleLowerCase()
-    switch (ext) {
-        case 'js':
-        case 'jsx':
-        case 'ts':
-        case 'tsx':
-            const { javascript } = await import('@codemirror/lang-javascript')
-            return [javascript({ jsx: ext.substring(2, 3) === 'x', typescript: ext.substring(0, 2) === 'js', })]
-            break
-        case 'css':
-        case 'scss':
-            const { sass } = await import('@codemirror/lang-sass')
-            return [sass()]
-            break
-        case 'html':
-            const { html } = await import('@codemirror/lang-html')
-            return [html()]
-            break
-        case 'py':
-            const { python } = await import('@codemirror/lang-python')
-            return [python()]
-            break
-        case 'go':
-            const { go } = await import('@codemirror/lang-go')
-            return [go()]
-            break
-        case 'json':
-            const { json } = await import('@codemirror/lang-json')
-            return [json()]
-            break
-        case 'md':
-            const { markdown } = await import('@codemirror/lang-markdown')
-            return [markdown()]
-            break
-        case 'yaml':
-            const { yaml } = await import('@codemirror/lang-yaml')
-            return [yaml()]
-            break
-        case 'vue':
-            const { vue } = await import('@codemirror/lang-vue')
-            return [vue()]
-            break
-        case 'xml':
-            const { xml } = await import('@codemirror/lang-xml')
-            return [xml()]
-            break
-        default:
-            return []
-    }
-}
-
-onMounted(async () => {
-    vFile.value = currentFiles.value[0]
-    const fileName = currentFiles.value[0].name
-    codeData.value = (
-        await miaoFetchApi.getFile(currentFiles.value[0], {
-            axiosOption: { responseType: 'text' }
-        })
-    ).toString()
-    bakData.value = codeData.value
-    extensions.value = [...(await getLangExtensions(fileName))]
-
-    rootRef.value?.addEventListener('keydown', (event) => {
-        if (event.ctrlKey && event.key === 's') {
-            event.preventDefault()
-            handleSave()
-        }
-    })
-})
-</script>
-
-<style scoped lang="scss">
-.codemirror-container {
-    width: 100%;
-    height: 100%;
-    overflow-y: hidden;
-
-    .codemirror-container-top {
-        height: 25px;
-        display: flex;
-        border-bottom: 1px solid #000;
-    }
-
-    .codemirror-container-btn {
-        height: 25px;
-        padding: 0 10px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-        user-select: none;
-        background-color: none;
-        transition: background-color 0.25s;
-
-        &:hover {
-            background-color: #e8e8e8;
-        }
-    }
-
-    .codemirror-container-main {
-        height: calc(100% - 25px);
-        position: relative;
-    }
-}
-
-.codemirror-container-dark {
-    background-color: rgb(30, 30, 30);
-}
-
-.codemirror-container-light {
-    background-color: rgb(255, 255, 255);
-}
-</style>

src/views/miaoDirectory.vue

@@ -1,531 +0,0 @@
-<template>
-  <miao-drop-handler @on-virtual-directory="handleDropVDirectory" @on-files="handleDropFiles"
-    @on-virtual-files="handleDropVirtualFiles">
-    <div class="miao-directory-item-container" ref="rootDomRef">
-      <!-- 顶部面包屑导航和工具栏 -->
-      <miao-directory-top :color="props.color" :current-directory="currentDirectory" @back="handleBack"
-        :open-menu-option="topBarMenuOption" @reload="handleReload" @exit="emit('exit')" :index="index"
-        @set-current-directory="setCurrentDirectory" @search="handleSearch" @menu-select="handleTopBarMenuSelect" />
-
-      <!-- 文件和文件夹列表 -->
-      <miao-directory-items ref='miaoDirectoryItemRef' :color="props.color" :showData_directory="showData_directory"
-        :showData_files="showData_files" :selected-item="selectedItem.value" :index="index"
-        @item-click="handleItemClick" @item-download="handleItemDownload" @item-delete="handleItemDelete"
-        @item-drag-start="handleItemDragStart" @item-rename="handleItemRename" @item-select="handleItemSelect" />
-
-      <!-- 底部工具栏 -->
-      <miao-directory-bottom :index="index" @add-new-item="handleAddNewItem"
-        @pick-files-upload="handlePickFilesUpload" />
-
-      <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 { computed, h, nextTick, onMounted, reactive, ref } from 'vue'
-import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
-import Config from '@/config'
-import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
-import useDataBus from '@/hooks/useDataBus'
-import useUploadQueue from '@/hooks/useUploadQueue'
-import useVirtualPages from '@/hooks/useVirtualPages'
-import { filePicker } from '@/hooks/miaoTools'
-import { uniq } from 'lodash'
-
-// 导入子组件
-import MiaoDirectoryTop from '@/components/miaoDirectory/miaoDirectoryTop.vue'
-import MiaoDirectoryItems from '@/components/miaoDirectory/miaoDirectoryItemsContainer.vue'
-import MiaoDirectoryBottom from '@/components/miaoDirectory/miaoDirectoryBottom.vue'
-import MiaoMask from '@/components/miaoMask.vue'
-import MiaoPopupInput from '@/components/miaoPopupInput.vue'
-import MiaoDropHandler from '@/components/miaoDropHandler.vue'
-import { NIcon } from 'naive-ui'
-import {
-  CloseOutline, SearchOutline, FilterOutline, CheckmarkDoneOutline,
-  DocumentText,
-  FileTray
-} from '@vicons/ionicons5'
-import usePluginCenter from '@/hooks/usePluginCenter'
-
-const { baseUrl, api } = Config
-const dataBus = useDataBus()
-const views = useVirtualPages()
-const uploadQueue = useUploadQueue()
-const miaoFetchApi = useMiaoFetchApi()
-const pluginCenter = usePluginCenter()
-
-const props = defineProps<{
-  color: string
-  id: number
-}>()
-
-const emit = defineEmits<{
-  exit: []
-}>()
-
-const popupInput = ref<InstanceType<typeof MiaoPopupInput>>()
-// 是否显示模态框
-const showModel = ref(0)
-const searchText = ref<string>('')
-const showDirs = ref<boolean>(true)
-const showFiles = ref<boolean>(true)
-const miaoDirectoryItemRef = ref()
-
-class SelectedItem {
-  constructor() {
-    this._selectedItem = []
-  }
-  _selectedItem: (VirtualDirectory | VirtualFile)[]
-  push(item: VirtualDirectory | VirtualFile) {
-    this._selectedItem = [item, ...this._selectedItem]
-  }
-  remove(item: VirtualDirectory | VirtualFile) {
-    this._selectedItem = this._selectedItem.filter((v) => v !== item)
-  }
-  clear() {
-    this._selectedItem = []
-  }
-  // 保证内容仍然存在于dir中且各个元素不重复
-  get value() {
-    const _filterList = [
-      ...(currentDirectory.value?.directories ?? []),
-      ...(currentDirectory.value?.files ?? []),
-    ]
-    return uniq(this._selectedItem).filter((v) => {
-      if (currentDirectory.value === undefined) {
-        return false
-      }
-      // @ts-ignore
-      return _filterList.includes(v)
-    })
-  }
-}
-// 已选择的item，用于多选功能
-const selectedItem = reactive(new SelectedItem())
-
-const currentDirectories = defineModel<VirtualDirectory[]>('currentDirectories', {
-  required: true,
-})
-
-// 目前展示的Dir
-const currentDirectory = computed(() => {
-  return currentDirectories.value[0]
-})
-
-// 当前组件在views中的序号
-const index = computed(() => {
-  return views.getIndex(props.id)
-})
-
-// 用于展示的数据，后续会增加排序等操作
-const showData_directory = computed<VirtualDirectory[]>(() => {
-  if (showDirs.value === false) {
-    return []
-  }
-  let data = currentDirectory.value?.directories
-    ? [...currentDirectory.value?.directories]
-    : []
-  if (searchText.value !== '') {
-    data = data.filter(vd => vd.name.includes(searchText.value))
-  }
-  return data
-})
-const showData_files = computed<VirtualFile[]>(() => {
-  if (showFiles.value === false) {
-    return []
-  }
-  let data = currentDirectory.value?.files ? [...currentDirectory.value?.files] : []
-  if (searchText.value !== '') {
-    data = data.filter(vd => vd.name.includes(searchText.value))
-  }
-  return data
-})
-
-const topBarMenuOption = computed(() => {
-  return [
-    {
-      label: '搜索',
-      key: 'search',
-      icon: renderIcon(SearchOutline)
-    },
-    searchText.value !== '' ? {
-      label: '重置搜索',
-      key: 'searchReset',
-      icon: renderIcon(SearchOutline)
-    } : undefined,
-    selectedItem.value.length !== 0 ? {
-      label: '重置多选',
-      key: 'selectedItemReset',
-      icon: renderIcon(CheckmarkDoneOutline)
-    } : undefined,
-    {
-      label: '筛选',
-      key: 'filter',
-      children: [
-        {
-          label: `${showDirs.value ? '隐藏' : '显示'}文件夹`,
-          key: 'showDirs',
-          icon: renderIcon(FileTray)
-        },
-        {
-          label: `${showFiles.value ? '隐藏' : '显示'}文件`,
-          key: 'showFiles',
-          icon: renderIcon(DocumentText)
-        },
-      ],
-      icon: renderIcon(FilterOutline)
-    },
-    ...pluginCenter.getUsablePlugin([currentDirectories.value[0]], []).map(v => ({
-      label: `插件:${v.name}`,
-      key: `plugin:${v.key}`
-    })),
-    {
-      label: '关闭',
-      key: 'close',
-      icon: renderIcon(CloseOutline)
-    },
-  ].filter(v => v !== undefined)
-})
-
-const renderIcon = (icon: any) => {
-  return () => {
-    return h(NIcon, null, {
-      default: () => h(icon)
-    })
-  }
-}
-
-// 设置显示的dir
-const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
-  // 若没有缓存数据则同步刷新，有缓存数据则异步刷新
-  if (virtualDirectory.files === undefined || virtualDirectory.directories === undefined) {
-    await virtualDirectory.update()
-  } else {
-    virtualDirectory.update()
-  }
-  if (currentDirectories.value[0] !== virtualDirectory) {
-    selectedItem.clear()
-    handleSearchReset()
-    nextTick(() => {
-      miaoDirectoryItemRef.value.scrollTo({
-        top: 0,
-        behavior: "instant"
-      })
-    })
-  }
-  currentDirectories.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 handleTopBarMenuSelect = (key: string) => {
-  if (key === 'close') {
-    emit('exit')
-  } else if (key === 'search') {
-    handleSearch()
-  } else if (key === 'searchReset') {
-    handleSearchReset()
-  } else if (key === 'selectedItemReset') {
-    selectedItem.clear()
-  } else if (key === 'showDirs') {
-    showDirs.value = !showDirs.value
-  } else if (key === 'showFiles') {
-    showFiles.value = !showFiles.value
-  } else if (key.startsWith('plugin:')) {
-    const pluginName = key.split(':')[1]
-    pluginCenter.usePlugin(pluginName, [currentDirectory.value], [])
-  }
-}
-
-const handleBack = () => {
-  if (currentDirectory.value?.parent) {
-    setCurrentDirectory(currentDirectory.value.parent)
-  }
-}
-
-const handleReload = () => {
-  reload()
-}
-
-const handleItemClick = (item: VirtualDirectory | VirtualFile) => {
-  if (selectedItem.value.length > 0) {
-    handleItemSelect(item)
-  } else {
-    if (item.type === 'file') {
-      openUrl(`${baseUrl}${api.get}${item.path}`)
-    } else if (item.type === 'directory') {
-      setCurrentDirectory(item)
-    }
-  }
-}
-
-const handleItemDownload = (item: VirtualFile) => {
-  openUrl(`${baseUrl}${api.get}${item.path}`, {
-    download: item.name,
-  })
-}
-
-const handleItemDelete = async (_item: VirtualDirectory | VirtualFile) => {
-  for (let item of uniq([...selectedItem.value, _item])) {
-    ; (async () => {
-      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 handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
-  const popupRes = await popupInput.value?.popup({
-    title: '重命名',
-    inputValue: item.name,
-    inputProps: {
-      placeholder: item.name,
-    },
-    options: [
-      {
-        label: '取消',
-        key: false,
-        type: 'error',
-      },
-      {
-        label: '确认',
-        key: true,
-        type: 'success',
-      },
-    ],
-  })
-  if (popupRes?.key === false) {
-    return
-  }
-  const newName = popupRes?.text
-  if (!newName) {
-    return
-  }
-  const { response } = miaoFetchApi.rename(item, newName, {
-    retry: 5,
-  })
-  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,
-) => {
-  const items = uniq([item, ...selectedItem.value])
-  dataBus.set('dragData_vFiles', items.filter((v) => v.type === 'file'))
-  dataBus.set('dragData_vDirectory', items.filter((v) => v.type === 'directory'))
-  // selectedItem.clear()
-}
-
-const handleDropFiles = async (files: File[]) => {
-  currentDirectory.value &&
-    uploadQueue.push(files, currentDirectory.value, {
-      onFinish() {
-        reload()
-      },
-    })
-}
-
-const handleDropVDirectory = async (vDirs: VirtualDirectory[]) => {
-  // 不能移到自己或自己的子文件夹内
-  for (let vDir of vDirs) {
-    if (currentDirectory.value.getParents.includes(vDir)) {
-      return
-    }
-    if (vDir.parent === currentDirectory.value) {
-      return
-    }
-  }
-  for (let dir of vDirs) {
-    ; (async () => {
-      const _from = dir.parent
-      const { response } = miaoFetchApi.cut(dir, currentDirectory.value)
-      const id = (await response).eventId
-      const { response: res } = miaoFetchApi.query(id)
-      const eventResult = await res
-      if (eventResult.status === 'success') {
-        reload()
-        _from && _from.update()
-      }
-    })()
-  }
-}
-
-const handleDropVirtualFiles = (files: VirtualFile[]) => {
-  if (files[0].parent === currentDirectory.value) {
-    return
-  }
-  for (let file of files) {
-    ; (async () => {
-      const _from = file.parent
-      const { response } = miaoFetchApi.cut(file, currentDirectory.value)
-      const id = (await response).eventId
-      const { response: res } = miaoFetchApi.query(id)
-      const eventResult = await res
-      if (eventResult.status === 'success') {
-        reload()
-        _from.update()
-      }
-    })()
-  }
-}
-
-const handlePickFilesUpload = async () => {
-  const files = await filePicker({
-    multiple: true,
-  })
-  const _currDir = currentDirectory.value
-  uploadQueue.push(files, _currDir, {
-    onFinish() {
-      _currDir.update()
-    },
-  })
-}
-
-const handleAddNewItem = async () => {
-  const popupRes = await popupInput.value?.popup({
-    title: '新建文件/文件夹',
-    inputProps: {
-      placeholder: '',
-    },
-    options: [
-      {
-        label: '取消',
-        key: 'cancel',
-        type: 'error',
-      },
-      {
-        label: '文件',
-        key: 'file',
-        type: 'success',
-      },
-      {
-        label: '文件夹',
-        key: 'dir',
-        type: 'success',
-      },
-    ],
-  })
-  // todo: 上传前如重名文件夹等等的错误提前检查
-  if (popupRes?.key === 'cancel' || popupRes?.text === '') {
-    return
-  }
-  const _currDir = currentDirectory.value
-  const name = popupRes?.text
-  if (!name) {
-    return
-  }
-  // @ts-ignore
-  const opType: 'file' | 'dir' = popupRes?.key
-  if (opType === 'dir') {
-    const res = await miaoFetchApi.mkdir(currentDirectory.value, name)
-    if (res.message === 'success') {
-      _currDir.update()
-    }
-  } else {
-    const { response } = miaoFetchApi.mkFile(currentDirectory.value, name)
-    const res = await response
-    if (res.message === 'success') {
-      _currDir.update()
-    }
-  }
-}
-
-const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
-  if (!selectedItem.value.includes(item)) {
-    selectedItem.push(item)
-  } else {
-    selectedItem.remove(item)
-  }
-}
-
-const handleSearch = async () => {
-  const popupRes = await popupInput.value?.popup({
-    title: '搜索当前文件夹',
-    inputValue: searchText.value,
-    inputProps: {
-      placeholder: '',
-    },
-    options: [
-      {
-        label: '取消',
-        key: 'cancel',
-        type: 'default',
-      },
-      {
-        label: '重置',
-        key: 'reset',
-        type: 'default',
-      },
-      {
-        label: '搜索',
-        key: 'search',
-        type: 'success',
-      },
-    ],
-  })
-  if (!popupRes) {
-    return
-  }
-  if (popupRes.key === 'search') {
-    searchText.value = popupRes.text
-  } else if (popupRes.key === 'reset') {
-    handleSearchReset()
-  }
-}
-
-const handleSearchReset = () => {
-  searchText.value = ''
-}
-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: 236px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  min-width: 170px;
-}
-</style>

src/views/miaoIframe.vue

@@ -1,34 +0,0 @@
-<template>
-    <div class="iframe-container">
-        <iframe
-            :src="iframeSrc"
-            frameborder="0"
-            class="iframe-container-iframe"></iframe>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { VirtualFile } from '@/class/VirtualDirectory'
-import { onMounted, ref } from 'vue'
-
-const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
-    required: true
-})
-
-const iframeSrc = ref<string>()
-
-onMounted(() => {
-    iframeSrc.value = currentFiles.value[0].url
-})
-</script>
-
-<style scoped lang="scss">
-.iframe-container {
-    width: 100%;
-    height: 100%;
-    .iframe-container-iframe {
-        width: inherit;
-        height: inherit;
-    }
-}
-</style>

src/views/miaoImages.vue

@@ -1,185 +0,0 @@
-<template>
-    <miao-drop-handler @on-virtual-directory="handleDrop" @on-virtual-files="handleDrop">
-        <div class="miaoImage" ref="rootRef">
-            <n-scrollbar ref="NScrollbarRef">
-                <div class="miaoImage-container">
-                    <div class="miaoImage-container-row" v-for="(src, index) in imageSrcList" :key="index">
-                        <img :src="src" class="miaoImage-container-row-image" loading="lazy"
-                            :class="activeImageIndex === index ? 'miaoImage-container-row-image-active' : ''"
-                            @click="activeImageIndex = index" />
-                    </div>
-                </div>
-            </n-scrollbar>
-            <miao-mask :show="activeImageIndex !== -1" @click="activeImageIndex = -1" class="miaoImage-mask">
-                <ChevronBack class="miaoImage-mask-btn miaoImage-mask-btn-back" @click="handleActiveImageIndexBack" />
-                <img :src="imageSrcList[activeImageIndex]" class="miaoImage-mask-active"
-                    @click="e => e.stopPropagation()" draggable="false">
-                <ChevronForward class="miaoImage-mask-btn miaoImage-mask-btn-forward"
-                    @click="handleActiveImageIndexForward" />
-            </miao-mask>
-        </div>
-    </miao-drop-handler>
-</template>
-
-<script setup lang="ts">
-import miaoMask from '@/components/miaoMask.vue';
-import miaoDropHandler from '@/components/miaoDropHandler.vue';
-import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
-import { uniq } from 'lodash';
-import { nextTick, onMounted, ref } from 'vue'
-import { NScrollbar } from 'naive-ui';
-import { ChevronBack, ChevronForward } from '@vicons/ionicons5'
-
-const imageSuffixList = [
-    'xbm',
-    'tif',
-    'pjp',
-    'svgz',
-    'jpg',
-    'jpeg',
-    'ico',
-    'tiff',
-    'gif',
-    'svg',
-    'jfif',
-    'webp',
-    'png',
-    'bmp',
-    'pjpeg',
-    'avif'
-]
-
-const currentDirectories = defineModel<VirtualDirectory[]>('currentDirectories', {
-    required: true
-})
-const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
-    required: true
-})
-
-
-const NScrollbarRef = ref()
-const rootRef = ref<any>()
-
-const imageSrcList = ref<string[]>([])
-
-const activeImageIndex = ref(-1)
-
-const scrollToActiveImage = () => {
-    const dom = rootRef.value?.querySelector('.miaoImage-container-row-image-active')
-    NScrollbarRef.value.scrollTo({
-        top: dom.offsetTop - 30,
-        behavior: "smooth"
-    })
-}
-
-const handleActiveImageIndexBack = (e: any) => {
-    e.stopPropagation()
-    activeImageIndex.value = (activeImageIndex.value - 1 + imageSrcList.value.length) % imageSrcList.value.length
-    nextTick(scrollToActiveImage)
-}
-
-const handleActiveImageIndexForward = (e: any) => {
-    e.stopPropagation()
-    activeImageIndex.value = (activeImageIndex.value + 1 + imageSrcList.value.length) % imageSrcList.value.length
-    nextTick(scrollToActiveImage)
-}
-
-const handleDrop = (vItems: (VirtualFile | VirtualDirectory)[]) => {
-    if (vItems[0].type === 'directory') {
-        // @ts-ignore
-        currentDirectories.value = [...currentDirectories.value, ...vItems]
-    } else {
-        // @ts-ignore
-        currentFiles.value = [...currentFiles, ...vItems]
-    }
-    vItems.forEach(v => {
-        updateImageSrcList(v)
-    })
-}
-
-const updateImageSrcList = async (source: VirtualFile | VirtualDirectory) => {
-    let newSrcList: string[]
-    if (source.type === 'directory') {
-        await source.update()
-        newSrcList = source.files?.filter(v => imageSuffixList.includes(v.name.split('.').pop() ?? '')).map(v => v.url) ?? []
-    } else {
-        if (!imageSuffixList.includes(source.name.split('.').pop() ?? '')) {
-            return
-        }
-        newSrcList = [source.url]
-    }
-    imageSrcList.value = uniq([...imageSrcList.value, ...newSrcList])
-}
-
-onMounted(() => {
-    [...currentDirectories.value, ...currentFiles.value].forEach(updateImageSrcList)
-})
-</script>
-
-<style scoped lang="scss">
-.miaoImage {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-
-    .miaoImage-container {
-        width: 100%;
-        display: flex;
-        flex-wrap: wrap;
-
-        .miaoImage-container-row {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 25%;
-            aspect-ratio: 1;
-
-            .miaoImage-container-row-image {
-                width: 80%;
-                aspect-ratio: 1;
-                object-fit: cover;
-                transition: width 0.25s;
-                box-shadow: 0 0 10px -5px;
-                cursor: pointer;
-                user-select: none;
-
-                &:hover {
-                    width: 90%;
-                }
-
-                &-active {
-                    width: 90%;
-                }
-            }
-        }
-    }
-
-    .miaoImage-mask {
-        background-color: rgba(0, 0, 0, 0.444);
-    }
-
-    .miaoImage-mask-active {
-        max-width: 80%;
-        max-height: 80%;
-        user-select: none;
-    }
-
-    .miaoImage-mask-btn {
-        color: #ffffff99;
-        width: 7%;
-        position: absolute;
-        cursor: pointer;
-
-        &-back {
-            left: 1%;
-        }
-
-        &-forward {
-            right: 1%;
-        }
-    }
-}
-</style>

src/views/miaoPDF.vue

@@ -1,168 +0,0 @@
-<template>
-    <div class="miao-container">
-        <div class="miao-container-topBar">
-            <div class="miao-container-topBar-btn" @click="() => handleZoom(10)" title="快速缩小">--</div>
-            <div class="miao-container-topBar-btn" @click="() => handleZoom()" title="缩小">-</div>
-            <div class="miao-container-topBar-btn" @click="() => handleResetMargin()" title="还原">还原缩放</div>
-            <div class="miao-container-topBar-btn" @click="() => handleShrink()" title="放大">+</div>
-            <div class="miao-container-topBar-btn" @click="() => handleShrink(10)" title="快速放大">++</div>
-        </div>
-        <NScrollbar>
-            <div class="miao-container-pdf" :style="{alignItems: pdfMargin < 0 ? 'baseline' : 'center'}">
-                <div ref="pdfEl" class="miao-container-pdf-content" :style="{ width: `calc( 100% - ${pdfMargin}px)`}">
-                </div>
-            </div>
-        </NScrollbar>
-        <div class="miao-container-loading" v-if="isLoading">{{ loadingPercent === -1 ? '加载插件中' :
-            `渲染进度：${canvasList.length}/${pdfPageCount}` }}</div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted, ref, shallowReactive } from 'vue'
-import PdfjsWorker from 'pdfjs-dist/build/pdf.worker.mjs?worker'
-import { VirtualFile } from '@/class/VirtualDirectory'
-import { NScrollbar } from 'naive-ui';
-
-const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
-    required: true
-})
-
-const pdfEl = ref<HTMLDivElement>()
-
-// 通过margin来实现缩小功能
-const pdfMargin = ref<number>(0)
-
-const pdfPageCount = ref<number>(-1)
-
-const isLoading = computed(() => {
-    return canvasList.length !== pdfPageCount.value
-})
-
-const canvasList = shallowReactive<HTMLCanvasElement[]>([])
-
-const handleZoom = (index?: number) => {
-    const _index = index ?? 1
-    pdfMargin.value += 10 * _index
-}
-
-const handleShrink = (index?: number) => {
-    const _index = index ?? 1
-    // if (pdfMargin.value - 10 * _index <= 0) {
-    //     return pdfMargin.value = 0
-    // }
-    pdfMargin.value -= 10 * _index
-}
-
-const handleResetMargin = () => {
-    pdfMargin.value = 0
-}
-
-const loadingPercent = computed(() => {
-    if (pdfPageCount.value === -1) {
-        return -1
-    }
-    return canvasList.length / pdfPageCount.value
-})
-
-onMounted(async () => {
-    const pdfSrc = currentFiles.value[0].url
-    // @ts-ignore
-    const PDFJS = await import('pdfjs-dist/build/pdf.mjs')
-    if (typeof window !== 'undefined' && 'Worker' in window) {
-        PDFJS.GlobalWorkerOptions.workerPort = new PdfjsWorker()
-    }
-    // 加载文档
-    let loadingTask = PDFJS.getDocument({ url: pdfSrc })
-    loadingTask.__PDFDocumentLoadingTask = true
-    const pdf = await loadingTask.promise // 使用await等待加载完毕
-    pdfPageCount.value = pdf.numPages
-    // 循环渲染每一页
-    for (let i = 1; i <= pdf.numPages; i++) {
-        const page = await pdf.getPage(i)
-        let pixelRatio = 3
-        let viewport = page.getViewport({ scale: 1 })
-        // 使用canvas渲染
-        let canvas = window.document.createElement('canvas')
-        canvasList.push(canvas)
-        // @ts-ignore
-        pdfEl.value.appendChild(canvas)
-        canvas.width = viewport.width * pixelRatio // 计算宽度
-        canvas.height = viewport.height * pixelRatio
-        let renderContext = {
-            canvasContext: canvas.getContext('2d'),
-            viewport: viewport,
-            transform: [pixelRatio, 0, 0, pixelRatio, 0, 0]
-        }
-        await page.render(renderContext).promise // 一页一页的渲染
-    }
-})
-</script>
-
-<style scoped lang="scss">
-.miao-container {
-    width: 100%;
-    height: 100%;
-    background-color: rgb(201, 201, 201);
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    .miao-container-topBar {
-        box-sizing: border-box;
-        padding: 0 30px;
-        height: 30px;
-        width: 100%;
-        background-color: rgb(170, 176, 182);
-        display: flex;
-        justify-content: space-around;
-        align-items: center;
-
-        &-btn {
-            cursor: pointer;
-            user-select: none;
-            height: 80%;
-            padding: 0 5px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: larger;
-            letter-spacing: 1px;
-            color: black;
-            border-radius: 5px;
-
-            &:hover {
-                background-color: #eaeaea42;
-            }
-        }
-    }
-
-    .miao-container-pdf {
-        min-width: 0;
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        .miao-container-pdf-content {
-            display: flex;
-            flex-direction: column;
-        }
-    }
-
-    .miao-container-loading {
-        position: absolute;
-        top: 40px;
-        background-color: aliceblue;
-        border: 1px solid black;
-        height: 40px;
-        width: 200px;
-        border-radius: 10px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-size: 15px;
-        letter-spacing: 5px;
-        user-select: none;
-    }
-}
-</style>

src/views/miaoVideoPlayer.vue

@@ -1,342 +0,0 @@
-<template>
-    <miao-drop-handler @on-virtual-files="handleDropVFiles">
-        <div class="player-container">
-            <div ref="xgPlayer" id="xgplayer"></div>
-        </div>
-    </miao-drop-handler>
-</template>
-
-<script lang="ts" setup>
-import { VirtualFile } from '@/class/VirtualDirectory'
-import miaoDropHandler from '@/components/miaoDropHandler.vue'
-import { onBeforeUnmount, onMounted, ref } from 'vue'
-// import useVirtualPages from '@/hooks/useVirtualPages';
-import XGPlayer from 'xgplayer'
-import '@/style/xgplayer.scss'
-import TextTrack from 'xgplayer/es/plugins/track'
-import 'xgplayer/es/plugins/track/index.css'
-import axios from 'axios'
-import { uniq } from 'lodash'
-// import config from '@/config'
-
-// const props = defineProps<{
-//     id: number
-// }>()
-const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
-    required: true
-})
-
-// const views = useVirtualPages()
-// const view = views.getView(props.id)
-
-// const videoPath = ref<string>('');
-const xgPlayer = ref()
-
-let _player: XGPlayer
-const { setVideo } = (() => {
-    return {
-        setVideo: async (
-            videoVFile: VirtualFile,
-            textTrackFiles?: VirtualFile[]
-        ) => {
-            if(!currentFiles.value.includes(videoVFile)) {
-                currentFiles.value = [videoVFile]
-            }
-            videoVFile || (videoVFile = findVideo(currentFiles.value))
-            textTrackFiles &&
-                textTrackFiles.push(...findTextTrack(currentFiles.value))
-            textTrackFiles = uniq(textTrackFiles)
-            currentFiles.value = [videoVFile, ...(textTrackFiles ?? [])]
-            const _list = []
-            if (textTrackFiles) {
-                for (let i of textTrackFiles) {
-                    if (i.name.endsWith('srt')) {
-                        const response = await axios.get(i.url)
-                        // console.log(srtToVtt(response.data))
-                        const url = setUrl(new Blob([srtToVtt(response.data)]))
-                        _list.push({
-                            id: i.uid,
-                            url,
-                            // 这个language会覆盖id的设置，导致无法切换字幕
-                            // language: 'zh-cn',
-                            text: i.name
-                        })
-                    } else if (i.name.endsWith('ass')) {
-                        const response = await axios.get(i.url)
-                        // console.log(assToVtt(response.data))
-                        const url = setUrl(new Blob([assToVtt(response.data)]))
-                        _list.push({
-                            id: i.uid,
-                            url,
-                            text: i.name
-                        })
-                    } else if (i.name.endsWith('ssa')) {
-                        const response = await axios.get(i.url)
-                        // console.log(ssaToVtt(response.data))
-                        const url = setUrl(new Blob([ssaToVtt(response.data)]))
-                        _list.push({
-                            id: i.uid,
-                            url,
-                            text: i.name
-                        })
-                    } else {
-                        _list.push({
-                            id: i.uid,
-                            url: i.url,
-                            text: i.name
-                        })
-                    }
-                }
-            }
-            const texttrack = {
-                list: _list
-            }
-            _player && _player.destroy()
-            _player = new XGPlayer({
-                plugins: [TextTrack],
-                el: xgPlayer.value,
-                url: videoVFile.url,
-                width: '100%',
-                height: '100%',
-                volume: 1,
-                pip: true,
-                videoFillMode: 'contain',
-                autoplay: true,
-                download: true,
-                screenShot: {
-                    saveImg: true,
-                    quality: 0.92,
-                    type: 'image/png',
-                    format: '.png'
-                },
-                lang: 'zh-cn',
-                playbackRate: [0.1, 0.3, 0.5, 0.75, 1, 1.5, 2, 3, 5, 10],
-                playNext: {
-                    urlList: []
-                },
-                texttrack
-            })
-        }
-    }
-})()
-
-const { setUrl, destroyUrl } = (() => {
-    const urlList: string[] = []
-    return {
-        setUrl(blob: Blob) {
-            const url = URL.createObjectURL(blob)
-            urlList.push(url)
-            return url
-        },
-        destroyUrl() {
-            for (const url of urlList) {
-                URL.revokeObjectURL(url)
-            }
-        }
-    }
-})()
-
-const handleDropVFiles = (files: VirtualFile[]) => {
-    setVideo(findVideo(files), findTextTrack(files))
-}
-
-function srtToVtt(srt: string) {
-    // 将 SRT 字幕按行分割
-    const lines = srt.split('\n')
-    let vtt = 'WEBVTT\n\n' // VTT 文件的开头
-
-    let index = 0
-    while (index < lines.length) {
-        // 跳过空行
-        if (lines[index].trim() === '') {
-            index++
-            continue
-        }
-
-        // SRT 中的序号
-        lines[index].trim()
-        index++
-
-        // 时间戳
-        const timeLine = lines[index].trim().replace(/,/g, '.') // 将逗号替换为点
-        index++
-
-        // 字幕文本
-        let text = ''
-        while (index < lines.length && lines[index].trim() !== '') {
-            text += lines[index].trim() + '\n'
-            index++
-        }
-
-        // 添加到 VTT 字幕中
-        vtt += `${timeLine}\n${text.trim()}\n\n`
-    }
-
-    return vtt
-}
-
-function assToVtt(assContent: string) {
-    // 分割 ASS 内容为行
-    const lines = assContent.split('\n')
-    let vttContent = 'WEBVTT\n\n' // VTT 文件头
-
-    // 遍历每一行，寻找字幕条目
-    for (let line of lines) {
-        // 只处理 [Events] 部分后的 Dialogue 行
-        if (line.startsWith('Dialogue:')) {
-            // 提取时间戳和文本
-            const parts = line.split(',')
-            if (parts.length >= 5) {
-                // 将时间戳格式化为 VTT 格式
-                const startTime = parts[1]
-                    .trim()
-                    .replace('.', ',')
-                    .replace(',', '.') // 替换 . 为 ,，然后再替换为 .
-                const endTime = parts[2]
-                    .trim()
-                    .replace('.', ',')
-                    .replace(',', '.') // 替换 . 为 ,，然后再替换为 .
-
-                // 确保时间戳是两位数格式
-                const formattedStartTime = startTime.replace(
-                    /(\d+):(\d+):(\d+)\.(\d+)/,
-                    (match: any, h: any, m: any, s: any, ms: any) => {
-                        match
-                        return `${String(h).padStart(2, '0')}:${String(
-                            m
-                        ).padStart(2, '0')}:${String(s).padStart(
-                            2,
-                            '0'
-                        )}.${String(ms).padStart(3, '0')}`
-                    }
-                )
-
-                const formattedEndTime = endTime.replace(
-                    /(\d+):(\d+):(\d+)\.(\d+)/,
-                    (match: any, h: any, m: any, s: any, ms: any) => {
-                        match
-                        return `${String(h).padStart(2, '0')}:${String(
-                            m
-                        ).padStart(2, '0')}:${String(s).padStart(
-                            2,
-                            '0'
-                        )}.${String(ms).padStart(3, '0')}`
-                    }
-                )
-
-                const rawText = parts.slice(9).join(',').trim() // 提取文本
-
-                // 清理文本中的样式信息
-                const cleanText = rawText
-                    .replace(/{[^}]*}/g, '')
-                    .replace(/\\N/g, '\n')
-                    .trim()
-
-                // 添加到 VTT 内容
-                vttContent += `${formattedStartTime} --> ${formattedEndTime}\n${cleanText}\n\n`
-            }
-        }
-    }
-
-    return vttContent.trim() // 返回 VTT 内容，去掉末尾空行
-}
-
-function ssaToVtt(ssaContent: string): string {
-    function convertSsaTimeToVtt(ssaTime: string): string {
-        const timeParts = ssaTime.split(':')
-        const hours = timeParts[0].padStart(2, '0')
-        const minutes = timeParts[1].padStart(2, '0')
-        const secondsAndMilliseconds = timeParts[2].split('.')
-        const seconds = secondsAndMilliseconds[0].padStart(2, '0')
-        const milliseconds = (secondsAndMilliseconds[1] || '0').padEnd(3, '0')
-
-        return `${hours}:${minutes}:${seconds}.${milliseconds}`
-    }
-    const lines = ssaContent.split('\n')
-    let vttContent = 'WEBVTT\n\n' // VTT文件头
-    let inEvents = false
-
-    for (const line of lines) {
-        // 检查是否进入[Events]部分
-        if (line.startsWith('[Events]')) {
-            inEvents = true
-            continue
-        }
-
-        // 如果在[Events]部分，处理对话行
-        if (inEvents && line.startsWith('Dialogue:')) {
-            const parts = line.split(',')
-            if (parts.length >= 3) {
-                const startTime = convertSsaTimeToVtt(parts[1].trim())
-                const endTime = convertSsaTimeToVtt(parts[2].trim())
-                const text = parts.slice(9).join(',').trim() // 获取字幕文本
-
-                // 去除样式标签
-                const cleanText = text.replace(/{[^}]*}/g, '').trim()
-
-                // 添加到VTT内容
-                vttContent += `${startTime} --> ${endTime}\n${cleanText}\n\n`
-            }
-        }
-    }
-
-    return vttContent
-}
-
-const findVideo = (vFiles: VirtualFile[]) =>
-    vFiles.filter((v) => {
-        for (let s of ['mp4', 'm3u8', 'hls']) {
-            if (v.name.endsWith(s)) {
-                return true
-            }
-        }
-        return false
-    })[0]
-
-const findTextTrack = (vFiles: VirtualFile[]) =>
-    vFiles.filter((v) => {
-        for (let s of ['vtt', 'srt', 'ass', 'ssa']) {
-            if (v.name.endsWith(s)) {
-                return true
-            }
-        }
-        return false
-    })
-
-onMounted(() => {
-    if (currentFiles.value.length) {
-        setVideo(
-            findVideo(currentFiles.value),
-            findTextTrack(currentFiles.value)
-        )
-    }
-})
-
-onBeforeUnmount(() => {
-    _player.destroy()
-    destroyUrl()
-})
-</script>
-
-<style scoped lang="scss">
-.player-container {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    background-color: grey;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    #xgplayer {
-        width: 100%;
-        height: 500px;
-        background-color: black;
-    }
-}
-
-.video-js {
-    width: 100%;
-    background-color: rgb(0, 0, 0);
-}
-</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,79 +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({
-    base: './',
-    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')
-            },
-            '/rename': {
-                target: 'http://127.0.0.1:17705',
-                changeOrigin: true,
-                rewrite: (path) => path.replace(/^\/rename/, '/rename')
-            },
-            '/cut': {
-                target: 'http://127.0.0.1:17705',
-                changeOrigin: true,
-                rewrite: (path) => path.replace(/^\/cut/, '/cut')
-            },
-            '/mkdir': {
-                target: 'http://127.0.0.1:17705',
-                changeOrigin: true,
-                rewrite: (path) => path.replace(/^\/mkdir/, '/mkdir')
-            }
-        }
-    },
-    build: {
-        rollupOptions: {
-            input: {
-                main: resolve(__dirname, 'index.html')
-            },
-            output: {
-                // 配置输出为单文件
-                // inlineDynamicImports: true,
-                // manualChunks(id) {
-                //     加了会有bug
-                //     if (id.includes('@codemirror')) {
-                //         return id.split('@')[1].replace('+', '-')
-                //     }
-                // }
-                // entryFileNames: 'bundle.js',
-                // format: 'iife', // 立即执行函数格式
-                // name: 'MyBundle'
-            }
-        }
-    }
-})