feat: 增加测试导入插件（已禁用）, 更新vue版本

.gitignore

@@ -23,4 +23,8 @@ dist-ssr
 *.sln
 *.sw?
 .vscode
-serve
+serve
+miao-directory.exe
+miao-directory-amd64-linux
+miao-directory-amd64-win.exe
+test

README.md

@@ -1,11 +1,27 @@
-todo: 标签页，miaoDirectory切换动画                      [finish]
+## TODO list:
-todo: 重构virtualPage，所有page以插件形式使用             [finish]
+
-todo: miaoDirectory插件化，为后续插件功能开发做准备        [finish]
+| 计划 | 状态 |
-todo: miaoPopupInput, 弹出一个输入框                     [finish]
+|---|---|
-todo: miaoDirectory的重命名功能                          [finish]
+| 拆分miaoDirectory | ✅ |
-todo: miaoDirectory的剪切功能                            [finish]
+| 完善视频插件 | ✅ |
-todo: miaoDirectory的上传按钮                            [finish]
+| 完善PDF插件 | ✅ |
-todo: miaoDirectory的新建文件/文件夹功能                  [finish]
+| 完善Code插件 | ✅ |
-todo: miaoDirectory的多选功能                            [finish]
+| 实现miaoDirectory的搜索功能 | ✅ |
-todo: VirtualDirectory更新时更新文件信息
+| plugin增加些属性，icon, disable, group之类的 | ❌ |
-todo: miaoDirectory的复制文件/文件夹功能
+| 完善miaoDirectory的搜索功能 | ❌ |
+| 实现miaoDirectory的排序功能 | ❌ |
+| 完善图片浏览插件 | ❌ |
+| VirtualDirectory更新时更新文件信息 | ❌ |
+| 创建音乐播放器组件（仿QQ音乐移动端吧） | ❌ |
+| miaoDirectory的复制文件/文件夹功能 | ❌ |
+
+
+| 长期计划 |
+|---|
+| 重构virtualDirectory，使其不用直接拥有父文件夹 |
+| 重构virtualDirectory，使其不用直接拥有父文件夹 |
+
+## 碎碎念：
+
+为什么不直接做成类似于windows的风格呢？其实技术实现上问题应该不大，重构也不用重构太多东西（APP.vue改改，插件部分改改这样），但是开学了事情一大堆，实习又没法比较美好地推掉。平时每天到宿舍都精疲力竭还要准备秋招和学校的破事。更何况搞不好还会被两个学分卡得没法毕业，好烦好烦。
+不过可能我对插件的价值也是有所高估吧。

index.html

@@ -2,9 +2,9 @@
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
+		<link rel="icon" type="image/svg+xml" href="./icon.ico" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>MDW</title>
+		<title>MiaoDirectory</title>
 	</head>
 	<body>
 		<div id="app"></div>

package.json

@@ -1,29 +1,50 @@
 {
-  "name": "miao-directory-web",
+    "name": "miao-directory-web",
-  "private": true,
+    "private": true,
-  "version": "0.0.0",
+    "version": "0.0.0",
-  "type": "module",
+    "type": "module",
-  "scripts": {
+    "scripts": {
-    "dev": "vite",
+        "dev": "vite",
-    "dev:host": "vite --host 0.0.0.0",
+        "dev:host": "vite --host 0.0.0.0",
-    "build": "vue-tsc -b && vite build",
+        "build": "vue-tsc -b && vite build",
-    "preview": "vite preview"
+        "build:auto": "pnpm run build && go env -w GOOS=windows GOARCH=amd64 && rm -rf ./serve/web/* && cp -r ./dist/* ./serve/web/ && cd ./serve && go env -w GOOS=windows && go build -o ../miao-directory.exe",
-  },
+        "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",
-  "dependencies": {
+        "preview": "vite preview"
-    "@vicons/ionicons5": "^0.12.0",
+    },
-    "axios": "^1.7.3",
+    "dependencies": {
-    "lodash": "^4.17.21",
+        "@codemirror/lang-go": "^6.0.1",
-    "naive-ui": "^2.39.0",
+        "@codemirror/lang-html": "^6.4.9",
-    "sass": "^1.77.8",
+        "@codemirror/lang-javascript": "^6.2.2",
-    "vue": "^3.4.35"
+        "@codemirror/lang-json": "^6.0.1",
-  },
+        "@codemirror/lang-markdown": "^6.2.5",
-  "devDependencies": {
+        "@codemirror/lang-python": "^6.1.6",
-    "@types/lodash": "^4.17.7",
+        "@codemirror/lang-sass": "^6.0.2",
-    "@types/node": "^22.1.0",
+        "@codemirror/lang-sql": "^6.7.1",
-    "@vitejs/plugin-vue": "^5.1.2",
+        "@codemirror/lang-vue": "^0.1.3",
-    "typescript": "^5.5.3",
+        "@codemirror/lang-xml": "^6.1.0",
-    "vite": "^5.4.0",
+        "@codemirror/lang-yaml": "^6.1.1",
-    "vite-plugin-singlefile": "^2.0.2",
+        "@vicons/ionicons5": "^0.12.0",
-    "vue-tsc": "^2.0.29"
+        "axios": "^1.7.3",
-  }
+        "codemirror": "^6.0.1",
+        "lodash": "^4.17.21",
+        "markdown-it": "^14.1.0",
+        "naive-ui": "^2.39.0",
+        "pdfjs-dist": "^4.5.136",
+        "sass": "^1.77.8",
+        "vue": "3.5.0",
+        "vue-codemirror": "^6.1.1",
+        "xgplayer": "^3.0.20",
+        "xgplayer-subtitles": "^3.0.20"
+    },
+    "devDependencies": {
+        "@types/lodash": "^4.17.7",
+        "@types/markdown-it": "^14.1.2",
+        "@types/node": "^22.1.0",
+        "@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,6 +1,6 @@
 <script setup lang="ts">
 import { h, onMounted, reactive, ref, shallowRef } from 'vue'
-import { NIcon, NScrollbar, NDropdown, NQrCode } from 'naive-ui'
+import { NIcon, NScrollbar, NDropdown } from 'naive-ui'
 import {
     EyeOffOutline,
     EyeOutline,
@@ -9,12 +9,12 @@ import {
     EllipsisVertical,
     QrCodeOutline
 } from '@vicons/ionicons5'
-import miaoDirectory from './views/miaoDirectory.vue'
+import miaoDirectory from '@/views/miaoDirectory.vue'
-import VirtualPage from './class/VirtualPage'
 import VirtualDirectory, { VirtualFile } from './class/VirtualDirectory'
 import MiaoMask from './components/miaoMask.vue'
 import config from './config'
 import useVirtualPages from './hooks/useVirtualPages'
+import init from './hooks/init'
 
 const { baseUrl } = config
 
@@ -42,23 +42,15 @@ const rootDirectory = reactive(
 // component就是一个vue组件，类似于miaoDirectory
 const createView = (
     component: any,
-    currentDirectorys?: VirtualDirectory[],
+    currentDirectories?: VirtualDirectory[],
     currentFiles?: VirtualFile[],
     index?: number
 ) => {
-    index ?? (index = views.length)
+    views.push(component, currentDirectories, currentFiles, index)
-    views.splice(
-        index,
-        0,
-        reactive<VirtualPage>(new VirtualPage(component, {
-          directorys: [...(currentDirectorys ?? [])],
-          files: [...(currentFiles ?? [])]
-        }))
-    )
 }
 
 const deleteView = (index: number) => {
-    views.splice(index, 1)
+    views.deleteView(index)
     if (views.length === 0) {
         createView(miaoDirectory, [rootDirectory])
     }
@@ -66,14 +58,15 @@ const deleteView = (index: number) => {
 
 // 点击标题是隐藏其他标签或显示其他标签，还挺好用的
 const handleClickTitle = (index: number) => {
-    let count = views.filter((v) => v.visible).length
+    let count = views._views.filter((v) => v.visible).length
-    let op = !views[index].visible || count > 1 ? 'hideOthers' : 'showOthers'
+    let op =
+        !views._views[index].visible || count > 1 ? 'hideOthers' : 'showOthers'
     let _index = 0
-    while (_index < views.length) {
+    while (_index < views._views.length) {
         if (_index !== index) {
-            views[_index].visible = op === 'hideOthers' ? false : true
+            views._views[_index].visible = op === 'hideOthers' ? false : true
         } else {
-            views[_index].visible = true
+            views._views[_index].visible = true
         }
         _index += 1
     }
@@ -96,11 +89,11 @@ const openMenuOption = [
     }
 ]
 
-const handleMenuSelect = (key: string) => {
+const handleMenuSelect = async (key: string) => {
     if (key === 'share') {
         showModal.value = true
         modalData.value = {
-            component: NQrCode,
+            component: (await import('naive-ui/es/qr-code')).NQrCode,
             props: {
                 value: baseUrl,
                 size: 300,
@@ -111,25 +104,31 @@ const handleMenuSelect = (key: string) => {
 }
 
 onMounted(() => {
+    init()
     createView(miaoDirectory, [rootDirectory])
 })
 </script>
 
 <template>
     <div class="view">
-        <div class="view-controler">
+        <div class="view-controller">
             <n-scrollbar x-scrollable>
-                <div class="tags-container">
+                <div class="tabs-container">
                     <transition-group name="tab">
                         <div
                             class="tab"
-                            v-for="(view, index) of views"
+                            v-for="(view, index) of views._views"
-                            :key="view.uid">
+                            :key="view.id">
-                            <div
+                            <span
                                 class="tab-title"
+                                :title="view.title"
                                 @click="handleClickTitle(index)">
-                                {{ view.title }}
+                                {{
-                            </div>
+                                    view.title.length > 5 && 0
+                                        ? `${view.title.substring(0, 5)}...`
+                                        : view.title
+                                }}
+                            </span>
                             <div
                                 class="tab-point"
                                 :style="{ backgroundColor: view.color }"></div>
@@ -149,7 +148,7 @@ onMounted(() => {
                                     @click="
                                         createView(
                                             view.component,
-                                            view.currentDirectorys,
+                                            view.currentDirectories,
                                             view.currentFiles,
                                             index + 1
                                         )
@@ -183,14 +182,17 @@ onMounted(() => {
             <transition-group name="page">
                 <div
                     class="view-container-item"
-                    v-for="(view, index) of views"
+                    v-for="(view, index) of views._views"
                     v-show="view.visible"
-                    :key="view.uid">
+                    :key="view.id">
                     <component
                         :is="view.component"
-                        v-model:current-objects="view.currentDirectorys"
+                        v-model:current-directories="view.currentDirectories"
-                        :id="view.uid"
+                        v-model:current-files="view.currentFiles"
+                        :id="view.id"
                         :color="view.color"
+                        :view="view"
+                        :views="views"
                         @exit="deleteView(index)"></component>
                 </div>
             </transition-group>
@@ -199,14 +201,14 @@ onMounted(() => {
     <!-- 模态框展示，用来显示分享二维码，设置菜单之类的东西 -->
     <MiaoMask v-model:show="showModal" @click="showModal = false">
         <component
-            @click="(e:any) => e.stopPropagation()"
+            @click="(e: any) => e.stopPropagation()"
             :is="modalData?.component"
             v-bind="modalData?.props"></component>
     </MiaoMask>
 </template>
 
 <style lang="scss" scoped>
-$controler-height: 25px;
+$controller-height: 25px;
 $tag-width: 170px;
 
 .view {
@@ -214,14 +216,14 @@ $tag-width: 170px;
     height: 100%;
     width: 100%;
 
-    .view-controler {
+    .view-controller {
         display: flex;
-        height: $controler-height;
+        height: $controller-height;
         width: 100%;
         background-color: #dadada;
         // overflow: hidden;
 
-        .tags-container {
+        .tabs-container {
             display: flex;
             margin-left: 5px;
             flex: 1;
@@ -230,6 +232,7 @@ $tag-width: 170px;
             .tab {
                 position: relative;
                 width: $tag-width;
+                height: $controller-height;
                 margin: 0 5px;
                 // flex: 1;
                 display: flex;
@@ -237,10 +240,20 @@ $tag-width: 170px;
                 align-items: center;
 
                 .tab-title {
+                    // font-family: monospace;
+                    // font-weight: bolder;
                     margin-left: 4px;
-                    // width: 70%;
+                    width: 90px;
                     user-select: none;
                     cursor: pointer;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+
+                    span {
+                        user-select: none;
+                        cursor: pointer;
+                    }
                 }
 
                 .tab-point {
@@ -263,7 +276,7 @@ $tag-width: 170px;
 
                 &:not(:last-child)::after {
                     content: '';
-                    height: calc($controler-height * 0.6);
+                    height: calc($controller-height * 0.6);
                     width: 1px;
                     border-right: 1px solid black;
                     position: absolute;
@@ -288,7 +301,7 @@ $tag-width: 170px;
 
             &::before {
                 content: '';
-                height: calc($controler-height * 0.6);
+                height: calc($controller-height * 0.6);
                 width: 1px;
                 border-right: 1px solid black;
                 position: absolute;
@@ -297,8 +310,8 @@ $tag-width: 170px;
         }
 
         .icon {
-            height: calc($controler-height * 0.7);
+            height: calc($controller-height * 0.7);
-            width: calc($controler-height * 0.7);
+            width: calc($controller-height * 0.7);
             border-radius: 5px;
             display: flex;
             justify-content: center;
@@ -317,13 +330,14 @@ $tag-width: 170px;
         position: relative;
         display: flex;
         // flex-direction: column;
-        height: calc(100% - $controler-height);
+        height: calc(100% - $controller-height);
-        overflow-y: overlay;
+        overflow-y: hidden;
         overflow-x: overlay;
 
         .view-container-item {
             flex: 1;
             height: 100%;
+            min-width: 180px;
         }
 
         &::-webkit-scrollbar {
@@ -351,14 +365,15 @@ $tag-width: 170px;
 
 // transition动画相关
 .view {
-    .view-controler {
+    .view-controller {
-        .tags-container {
+        .tabs-container {
             .tab-move,
             .tab-enter-active {
                 transition: all 0.2s ease;
             }
 
             .tab-leave-active {
+                opacity: 0;
                 transition: none;
             }
 

src/class/PluginCenter.ts

@@ -0,0 +1,117 @@
+import useVirtualPages from '@/hooks/useVirtualPages'
+import VirtualDirectory, { VirtualFile } from './VirtualDirectory'
+import { ShallowRef, shallowRef } from 'vue'
+
+export enum PluginGroup {
+    default = 'default',
+    mainMenu = 'mainMenu'
+}
+
+type Plugin = {
+    // 用于显示的名字
+    name: string
+    // 代表插件的icon
+    icon?: ShallowRef<any>
+    // 是否禁用插件
+    disable: boolean
+    // 插件所属的group，用于区分插件使用的场合
+    group: PluginGroup[]
+    // 判断在未禁用时是否可以使用这个组件
+    // 使用组件即调用下面的func
+    filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean
+    func: (
+        VDirectories: VirtualDirectory[],
+        VFiles: VirtualFile[],
+        ...args: any[]
+    ) => void
+}
+
+export default class PluginCenter {
+    constructor() {
+        this.pluginsMap = {}
+    }
+    pluginsMap: {
+        [key: string]: Plugin
+    }
+
+    register(key: string, plugin: Plugin) {
+        this.pluginsMap[key] = plugin
+    }
+
+    /**
+     * 便捷地注册一个组件为插件，触发时直接用新页面打开
+     */
+    registerComponent(option: {
+        key: string
+        name: string
+        icon?: any
+        getComponent: () => Promise<any>
+        group?: PluginGroup[]
+        filter: (
+            VDirectories: VirtualDirectory[],
+            VFiles: VirtualFile[]
+        ) => boolean
+    }): void {
+        const {
+            key,
+            name,
+            getComponent,
+            icon,
+            filter,
+            group = [PluginGroup.default]
+        } = option
+        let _component: any
+        const views = useVirtualPages()
+        this.register(key, {
+            name,
+            filter,
+            icon: shallowRef(icon),
+            group,
+            disable: false,
+            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[],
+        option?: {
+            group?: PluginGroup[]
+        }
+    ) {
+        const { group = [PluginGroup.default] } = option ?? {}
+        const usableList = []
+        for (let key of Object.keys(this.pluginsMap)) {
+            const _plugin = this.pluginsMap[key]
+            if (
+                !_plugin.disable &&
+                _plugin.group.filter((v) => group.includes(v)).length > 0 &&
+                _plugin.filter(VDirectories, VFiles)
+            ) {
+                usableList.push(key)
+            }
+        }
+        return usableList.map((key) => ({
+            key,
+            ...this.pluginsMap[key]
+        }))
+    }
+
+    usePlugin(
+        key: string,
+        VDirectories?: VirtualDirectory[],
+        VFiles?: VirtualFile[],
+        ...args: any[]
+    ) {
+        this.pluginsMap[key].func(VDirectories ?? [], VFiles ?? [], ...args)
+    }
+}

src/class/VirtualDirectory.ts

@@ -1,3 +1,4 @@
+import config from "@/config";
 import generateId from "@/hooks/generateId";
 import useMiaoFetchApi from "@/hooks/useMiaoFetchApi";
 // import { debounce } from "lodash";
@@ -12,17 +13,21 @@ export class VirtualFile {
 		this.stats = info.stats;
 		this.parent = parent;
 		this.type = "file";
-		this.uid = generateId();
+		this.id = generateId();
 	}
 	name: string;
 	type: "file";
 	size: number;
 	stats: stats;
 	parent: VirtualDirectory;
-	uid: number;
+	id: number;
 	get path() {
 		return `${this.parent.path}${this.name}`;
 	}
+
+	get url() {
+		return `${config.api.get}${this.parent.path}${this.name}`
+	}
 }
 
 class VirtualDirectory {
@@ -31,14 +36,14 @@ class VirtualDirectory {
 		this.type = "directory";
 		this.stats = info.stats;
 		this.parent = parent ?? undefined;
-		this.uid = generateId();
+		this.id = generateId();
 	}
 	// 文件夹名
 	name: string;
 	// 子文件
 	files?: VirtualFile[];
 	// 子目录
-	directorys?: VirtualDirectory[];
+	directories?: VirtualDirectory[];
 	// 没啥意义，标注一下就是了
 	type: "directory";
 	// 文件夹创建时间等杂项属性
@@ -46,7 +51,7 @@ class VirtualDirectory {
 	// 父文件夹
 	parent?: VirtualDirectory;
 
-	uid: number;
+	id: number;
 
 	/**
 	 * 获取相对于根目录的路径的层数
@@ -93,9 +98,9 @@ class VirtualDirectory {
 
 	updateContent(content: (file | directory)[]) {
 		this.files = this.files ?? [];
-		this.directorys = this.directorys ?? [];
+		this.directories = this.directories ?? [];
 		const fileNames: string[] = this.files.map(v => v.name);
-		const dirNames: string[] = this.directorys.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)[]) => {
@@ -109,7 +114,7 @@ class VirtualDirectory {
 			}
 		};
 		_delete(this.files);
-		_delete(this.directorys);
+		_delete(this.directories);
 		// 加入新的文件与文件夹
 		for (let item of content) {
 			if (item.type === "file") {
@@ -118,7 +123,7 @@ class VirtualDirectory {
 				}
 			} else if (item.type === "directory") {
 				if (!dirNames.includes(item.name)) {
-					this.directorys.push(new VirtualDirectory(item, this));
+					this.directories.push(new VirtualDirectory(item, this));
 				}
 			}
 		}
@@ -126,7 +131,7 @@ class VirtualDirectory {
 
 	hasChild(item: VirtualDirectory | VirtualFile): boolean {
 		if (item.type === "directory") {
-			return this.directorys?.includes(item) ?? false;
+			return this.directories?.includes(item) ?? false;
 		} else {
 			return this.files?.includes(item) ?? false;
 		}

src/class/VirtualPage.ts

@@ -1,4 +1,4 @@
-import { shallowRef } from "vue";
+import { reactive, shallowRef } from "vue";
 import VirtualDirectory, { VirtualFile } from "./VirtualDirectory";
 import generateId from "@/hooks/generateId";
 
@@ -13,12 +13,12 @@ const getRandomWebSafeColor = (() => {
 })();
 
 export default class VirtualPage {
-	constructor(component: any, initObjects?:{ directorys?: VirtualDirectory[], files?: VirtualFile[]}) {
+	constructor(component: any, initObjects?: { directories?: VirtualDirectory[]; files?: VirtualFile[] }) {
 		this.component = shallowRef(component);
-		this.currentDirectorys = initObjects?.directorys ?? [];
+		this.currentDirectories = initObjects?.directories ?? [];
 		this.currentFiles = initObjects?.files ?? [];
 		this.visible = true;
-		this.uid = generateId();
+		this.id = generateId();
 		this.refreshKey = Math.random();
 		this.color = getRandomWebSafeColor();
 	}
@@ -27,11 +27,11 @@ export default class VirtualPage {
 	// 是否可见
 	visible: boolean;
 	// 当前正在使用的文件夹
-	currentDirectorys: VirtualDirectory[];
+	currentDirectories: VirtualDirectory[];
 	// 当前正在使用的文件
 	currentFiles: VirtualFile[];
 	// 区分每一个页面的唯一id
-	uid: number;
+	id: number;
 	// 当refreshKey改变时需要刷新页面，目前还没接入刷新
 	refreshKey: number;
 	// 为了区分，每个虚拟页面都会分配一个color，这个color会体现在tab上
@@ -43,7 +43,7 @@ export default class VirtualPage {
 		if (this._title) {
 			return this._title;
 		}
-		return this.currentDirectorys[0].name;
+		return this?.currentDirectories[0]?.name ?? this?.currentFiles[0]?.name ?? "未命名标签";
 	}
 
 	setTitle(title: string) {
@@ -61,3 +61,63 @@ export default class VirtualPage {
 		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].id === id) {
+				return parseInt(i);
+			}
+		}
+		return -1;
+	}
+	/**
+	 * 根据id得到view
+	 * @param {any} id 要查询的页面的id
+	 */
+	getView(id: number) {
+		for (let v of this._views) {
+			if (v.id === 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,8 +1,7 @@
 <!-- 基于naiveui的下拉菜单实现的自定义下拉菜单 -->
 <!-- 支持长按和右键呼出下拉菜单 -->
 <template>
-    <div class="main" @contextmenu="handleContextMenu" @mouseleave="handleMainMouseLeave" @touchstart="handleTouchStart"
+    <div class="main" @contextmenu="handleContextMenu" @mouseleave="handleMainMouseLeave">
-     @touchend="handleTouchEnd">
         <slot></slot>
     </div>
     <n-dropdown placement="bottom-start" trigger="manual" :x="x" :y="y" :options="props.options"
@@ -28,7 +27,7 @@ const x = ref(0)
 const y = ref(0)
 const showContextMenu = ref(0)
 // 长按计时器
-let timer_touch: string | number | NodeJS.Timeout | undefined
+// let timer_touch: string | number | NodeJS.Timeout | undefined
 
 const onClickoutside = async () => {
     showContextMenu.value = 0
@@ -58,25 +57,25 @@ const handleContextMenu = (e: MouseEvent) => {
     })
 }
 
-const handleTouchStart = (e: TouchEvent) => {
+// const handleTouchStart = (e: TouchEvent) => {
-    if(props.touchTimeOut === undefined) {
+//     if(props.touchTimeOut === undefined) {
-        return
+//         return
-    }
+//     }
-    timer_touch ?? clearTimeout(timer_touch)
+//     timer_touch ?? clearTimeout(timer_touch)
-    timer_touch = setTimeout(() => {
+//     timer_touch = setTimeout(() => {
-        showContextMenu.value = 1
+//         showContextMenu.value = 1
-        x.value = e.targetTouches[0].clientX
+//         x.value = e.targetTouches[0].clientX
-        y.value = e.targetTouches[0].clientY
+//         y.value = e.targetTouches[0].clientY
-    }, props.touchTimeOut)
+//     }, props.touchTimeOut)
-}
+// }
 
-const handleTouchEnd = () => {
+// const handleTouchEnd = () => {
-    if(timer_touch) {
+//     if(timer_touch) {
-        clearTimeout(timer_touch)
+//         clearTimeout(timer_touch)
-        timer_touch = undefined
+//         timer_touch = undefined
-    }
+//     }
 
-}
+// }
 
 </script>
 

src/components/miaoDirectory/miaoDirectoryBottom.vue

@@ -0,0 +1,77 @@
+<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,31 +1,24 @@
 <template>
     <div class="miao-item" draggable="true" ref="itemRef" @dragstart="handleDragStart">
-        <miaoContextMenu :options="dropDownOptions" :touch-time-out="500" @select="handleDropdownSelect">
+        <miaoContextMenu :options="dropDownOptions ?? []" :touch-time-out="500" @select="handleDropdownSelect">
-            <div class="item-main" :class="props.selected ? 'item-main-selected' : ''" ref="mainRef">
+            <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-show="clientWidth <= 250"></Icon>
+                        <Icon class="item-main-info-name-icon" v-if="clientWidth <= 250"></Icon>
-                        <n-ellipsis style="max-width: 140px;">{{ name }}</n-ellipsis>
+                        <n-ellipsis :style="{ maxWidth: clientWidth > 250 ? '80%' : '75%' }">{{ 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,
@@ -39,30 +32,37 @@ import {
     PlayCircle,
     Disc
 } from '@vicons/ionicons5'
-import { computed, onMounted, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import dateFormatter from '@/hooks/dateFormatter'
 import { NEllipsis } from 'naive-ui'
+import { DropdownOption } from 'naive-ui/es/dropdown';
 // import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
 
 // const miaoFetchApi = useMiaoFetchApi()
 
 const props = defineProps<{
-    item: VirtualDirectory | VirtualFile
+    item: {
+        name: string,
+        type: 'directory' | 'file'
+        stats: {
+            mtimeMs: number
+        }
+    }
     name?: string
     color: string
-    selected: boolean
+    dropDownOptions?: DropdownOption[]
+    selected?: boolean
 }>()
 
 const emit = defineEmits<{
     download: []
     delete: []
     rename: []
-    dragStart: [event: DragEvent, item: VirtualDirectory | VirtualFile]
+    dragStart: [event: DragEvent]
     onSelected: []
+    plugin: [plugin: string]
 }>()
 
-const itemType = ref<'file' | 'directory'>(props.item.type)
-
 const mainRef = ref<HTMLDivElement>()
 
 // 使用ResizeObserver实现
@@ -70,6 +70,12 @@ const clientWidth = ref<number>(666)
 
 const name = props.name ?? props.item.name
 
+const observer = new ResizeObserver(entries => {
+    for (let entry of entries) {
+        clientWidth.value = entry.contentRect.width;
+    }
+});
+
 const time = computed(() => {
     return dateFormatter(
         new Date(props.item.stats.mtimeMs),
@@ -77,50 +83,8 @@ const time = computed(() => {
     )
 })
 
-const dropDownOptions = computed(() => {
-    const options = [
-        {
-            label: '重命名',
-            key: 'rename'
-        },
-        {
-            label: '删除',
-            key: 'delete'
-        },
-    ]
-    if (itemType.value === 'file') {
-        options.push(
-            ...[
-                {
-                    label: '下载',
-                    key: 'download'
-                }
-            ]
-        )
-    }
-    if (props.selected === false) {
-        options.push(
-            ...[
-                {
-                    label: '多选:选择',
-                    key: 'select'
-                }
-            ]
-        )
-    } else {
-        options.push(
-            ...[
-                {
-                    label: '多选:取消',
-                    key: 'select'
-                }
-            ]
-        )
-    }
-    return options
-})
-
 // 是不是可以直接在这里面实现？
+// 应该将所有事件emit出去才对
 const handleDropdownSelect = (key: string) => {
     if (key === 'rename') {
         emit('rename')
@@ -130,6 +94,9 @@ const handleDropdownSelect = (key: string) => {
         emit('delete')
     } else if (key === 'select') {
         emit('onSelected')
+    } else if (key.startsWith('plugin:')) {
+        const plugin = key.split(':')[1]
+        emit('plugin', plugin)
     }
 }
 
@@ -151,22 +118,22 @@ const Icon = computed(() => {
                 return Disc
             } else if (
                 [
-                    '.xbm',
+                    'xbm',
-                    '.tif',
+                    'tif',
                     'pjp',
-                    '.svgz',
+                    'svgz',
                     'jpg',
                     'jpeg',
                     'ico',
                     'tiff',
-                    '.gif',
+                    'gif',
                     'svg',
-                    '.jfif',
+                    'jfif',
-                    '.webp',
+                    'webp',
-                    '.png',
+                    'png',
-                    '.bmp',
+                    'bmp',
                     'pjpeg',
-                    '.avif'
+                    'avif'
                 ].includes(aft)
             ) {
                 return Image
@@ -191,27 +158,28 @@ const Icon = computed(() => {
 const itemRef = ref()
 
 const handleDragStart = (event: DragEvent) => {
-    emit('dragStart', event, props.item)
+    emit('dragStart', event)
     // 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);
     }
 })
+
+onBeforeUnmount(() => {
+    if (mainRef.value) {
+        observer.unobserve(mainRef.value);
+    }
+})
 </script>
 
 <style lang="scss" scoped>
 .miao-item {
     cursor: pointer;
     width: calc(100% - 20px);
-    min-width: 170px;
+    // min-width: 170px;
     // aspect-ratio: 66/9;
     height: 50px;
     position: relative;
@@ -232,14 +200,16 @@ onMounted(() => {
 
         .item-main-front {
             height: 100%;
-            width: 10px;
+            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: 80%;
+            height: 30px;
+            width: 30px;
             color: #00403e;
             transition: color 0.15s ease-out;
         }
@@ -247,6 +217,7 @@ onMounted(() => {
         .item-main-info {
             margin-left: 10px;
             height: 100%;
+            width: calc(100% - 10px);
             display: flex;
             flex-direction: column;
 
@@ -305,10 +276,13 @@ onMounted(() => {
             background-color: #d2d2d2;
         }
     }
+
     .item-main-selected {
         background-color: rgba(0, 128, 207, 0.32);
+
         &:hover {
-            background-color: rgba(0, 128, 207, 0.64);;
+            background-color: rgba(0, 128, 207, 0.64);
+            ;
         }
     }
 }

src/components/miaoDirectory/miaoDirectoryItemsContainer.vue

@@ -0,0 +1,181 @@
+<template>
+    <div
+        class="miao-directory-container-items"
+        :style="{
+            backgroundColor: index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
+        }">
+        <n-scrollbar ref="scrollbarRef" style="max-height: 100%">
+            <miao-lazy-div
+                v-for="dir in showData_directory"
+                :key="dir.id"
+                min-height="50px">
+                <miaoDirectoryItem
+                    :item="dir"
+                    :color="props.color"
+                    :selected="selectedItem.includes(dir)"
+                    :drop-down-options="itemDropDownOptions(dir).value"
+                    @delete="handleItemDelete(dir)"
+                    @plugin="(p) => handleItemUsePlugin(dir)(p)"
+                    @click="handleItemClick(dir)"
+                    @drag-start="(e) => handleItemDragStart(dir)(e)"
+                    @rename="handleItemRename(dir)"
+                    @on-selected="handleItemSelect(dir)" />
+            </miao-lazy-div>
+            <miao-lazy-div
+                v-for="file in showData_files"
+                :key="file.id"
+                min-height="50px">
+                <miaoDirectoryItem
+                    :item="file"
+                    :color="props.color"
+                    :selected="selectedItem.includes(file)"
+                    :drop-down-options="itemDropDownOptions(file).value"
+                    @click="handleItemClick(file)"
+                    @download="handleItemDownload(file)"
+                    @delete="handleItemDelete(file)"
+                    @drag-start="(e) => handleItemDragStart(file)(e)"
+                    @rename="handleItemRename(file)"
+                    @plugin="(p) => handleItemUsePlugin(file)(p)"
+                    @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 { computed, ref } from 'vue'
+import usePluginCenter from '@/hooks/usePluginCenter'
+import { renderIcon } from '@/hooks/miaoTools'
+
+const pluginCenter = usePluginCenter()
+
+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()
+
+const itemDropDownOptions = (item: VirtualDirectory | VirtualFile) =>
+    computed(() => {
+        const items = [...props.selectedItem]
+        const selected = props.selectedItem.includes(item)
+        if (!selected) {
+            items.push(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 (item.type === 'file') {
+            options.push(
+                ...[
+                    {
+                        label: '下载',
+                        key: 'download'
+                    }
+                ]
+            )
+        }
+        if (selected === 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}`,
+                icon: v.icon ? renderIcon(v.icon) : undefined
+            }))
+        )
+        return options
+    })
+
+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 =
+    (item: VirtualDirectory | VirtualFile) => (_event: DragEvent) => {
+        emit('item-drag-start', _event, item)
+    }
+
+const handleItemRename = (item: VirtualDirectory | VirtualFile) => {
+    emit('item-rename', item)
+}
+
+const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
+    emit('item-select', item)
+}
+
+const handleItemUsePlugin =
+    (item: VirtualDirectory | VirtualFile) => (plugin: string) => {
+        const items = [...props.selectedItem]
+        const selected = props.selectedItem.includes(item)
+        if (!selected) {
+            items.push(item)
+        }
+        const vDirs = items.filter((v) => v.type === 'directory')
+        const vFiles = items.filter((v) => v.type === 'file')
+        pluginCenter.usePlugin(plugin, vDirs, vFiles)
+    }
+
+defineExpose({
+    scrollTo: (...args: any) => scrollbarRef.value.scrollTo(...args)
+})
+</script>
+
+<style scoped lang="scss">
+.miao-directory-container-items {
+    width: 100%;
+    flex: 1;
+    min-height: 0;
+}
+</style>

src/components/miaoDirectory/miaoDirectoryTop.vue

@@ -0,0 +1,152 @@
+<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,9 +1,5 @@
 <template>
-    <div
+    <div class="container" @dragover="handleDragOver" @dragleave="handleDragLeave" @drop="handleDrop">
-        class="container"
-        @dragover="handleDragOver"
-        @dragleave="handleDragLeave"
-        @drop="handleDrop">
         <slot></slot>
         <miao-mask v-model:show="showMask"></miao-mask>
     </div>
@@ -63,8 +59,11 @@ const removeDirectory = async (files: File[]) => {
 }
 
 const handleDragOver = async (event: DragEvent) => {
-    showMask.value += 1
     event.preventDefault()
+    if (showMask.value === 1) {
+        return
+    }
+    showMask.value = 1
 }
 
 const handleDragLeave = async () => {

src/components/miaoLazyDiv.vue

@@ -0,0 +1,95 @@
+<!-- 只适合用于渲染过程较为复杂的组件，不然可能得不偿失
+     这么泛用的组件，性能差点也能理解 -->
+<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/miaoMessageProvider.vue

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

src/hooks/generateId.ts

@@ -1,4 +1,4 @@
-const idList: number[] = [];
+const idList: number[] = []
 
 /**
  * 生成一个唯一的id
@@ -6,11 +6,11 @@ const idList: number[] = [];
  * @returns {number}
  */
 export default function generateId(length?: number) {
-	length || (length = 16);
+    length || (length = 16)
-	let id;
+    let id
-	while (!id || idList.includes(id)) {
+    while (!id || idList.includes(id)) {
-		id = Math.ceil(Math.random() * 10 ** 16);
+        id = Math.ceil(Math.random() * 10 ** 16)
-	}
+    }
-	idList.push(id)
+    idList.push(id)
     return id
 }

src/hooks/init.ts

@@ -0,0 +1,167 @@
+import MiaoDirectory from "@/views/miaoDirectory.vue";
+import usePluginCenter from "./usePluginCenter";
+import { DocumentText, FileTray, Image, LogoChrome, CodeOutline, PlayCircle } from "@vicons/ionicons5";
+import { PluginGroup } from "@/class/PluginCenter";
+
+export default function init() {
+	const pluginCenter = usePluginCenter();
+	pluginCenter.registerComponent({
+		key: "miaoDirectory",
+		name: "文件夹",
+		icon: FileTray,
+		getComponent: async () => MiaoDirectory,
+		filter: (vDirs, vFiles) => {
+			if (vFiles.length) {
+				return false;
+			}
+			return vDirs.length === 1;
+		}
+	});
+	pluginCenter.registerComponent({
+		key: "miaoVideoPlayer",
+		name: "视频",
+		icon: PlayCircle,
+		getComponent: async () => (await import("@/views/miaoVideoPlayer.vue")).default,
+		filter: (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({
+		key: "miaoIframe",
+		name: "框架",
+		icon: LogoChrome,
+		getComponent: async () => (await import("@/views/miaoIframe.vue")).default,
+		filter: (vDirs, vFiles) => {
+			if (vDirs.length !== 0) {
+				return false;
+			}
+			if (vFiles.length !== 1) {
+				return false;
+			}
+			return vFiles[0].name.endsWith("html");
+		}
+	});
+
+	pluginCenter.registerComponent({
+		key: "miaoPDF",
+		name: "PDF浏览",
+		icon: DocumentText,
+		getComponent: async () => (await import("@/views/miaoPDF.vue")).default,
+		filter: (vDirs, vFiles) => {
+			if (vDirs.length !== 0) {
+				return false;
+			}
+			if (vFiles.length !== 1) {
+				return false;
+			}
+			return vFiles[0].name.endsWith("pdf");
+		}
+	});
+
+	pluginCenter.registerComponent({
+		key: "miaoCodeMirror",
+		name: "代码编辑",
+		icon: CodeOutline,
+		getComponent: async () => (await import("@/views/miaoCodeMirror.vue")).default,
+		filter: (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({
+		key: "miaoImages",
+		name: "图片浏览",
+		icon: Image,
+		getComponent: async () => (await import("@/views/miaoImages.vue")).default,
+		filter: (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;
+		}
+	});
+
+	pluginCenter.registerComponent({
+		key: "miaoMarkdown",
+		name: "markdown浏览",
+		icon: DocumentText,
+		getComponent: async () => (await import("@/views/miaoMarkdown.vue")).default,
+		filter: (vDirs, vFiles) => {
+			if (vDirs.length !== 0) {
+				return false;
+			}
+			if (vFiles.length !== 1) {
+				return false;
+			}
+			return vFiles[0].name.endsWith("md");
+		}
+	});
+
+	pluginCenter.register("test", {
+		name: "测试导入",
+		filter: (vDirs, vFiles) => {
+			if (vDirs.length !== 0) {
+				return false;
+			}
+			if (vFiles.length !== 1) {
+				return false;
+			}
+			return vFiles[0].name.endsWith("js");
+		},
+		disable: true,
+		group: [PluginGroup.default],
+		func: async (__, vfs) => {
+			const c = (await import(/* @vite-ignore */ vfs[0].url)).default;
+			console.log(c);
+			pluginCenter.registerComponent({
+				key: `test-${Math.random()}`,
+				name: `test-${Math.random()}`,
+				icon: DocumentText,
+				getComponent: async () => (await import(/* @vite-ignore */ vfs[0].url)).default,
+				filter: (vDirs, vFiles) => {
+					if (vDirs.length !== 0) {
+						return false;
+					}
+					if (vFiles.length !== 1) {
+						return false;
+					}
+					return vFiles[0].name.endsWith("html");
+				}
+			});
+		}
+	});
+}

src/hooks/miaoTools.ts

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

src/hooks/useMiaoFetchApi.ts

@@ -67,9 +67,30 @@ const miaoFetchApi = {
         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
+     * 正常上传文件请使用uploadQueue
      */
     upload(data: File, targetVDir: VirtualDirectory, option?: uploadOption) {
         const { baseUrl, api } = Config

src/hooks/usePluginCenter.ts

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

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

src/types/fetch.ts

@@ -1,8 +1,10 @@
+import { AxiosRequestConfig } from "axios";
 import { directory, file } from "./type";
 
 export type miaoFetchConfig = {
-	retry?: number;
+    retry?: number
-};
+    axiosOption?: AxiosRequestConfig<any>
+}
 
 export type getOption = {} & miaoFetchConfig;
 

src/views/miaoCodeMirror.vue

@@ -0,0 +1,200 @@
+<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',
+                headers: {
+                    'Cache-Control': 'no-cache'
+                }
+            }
+        })
+    ).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,87 +1,44 @@
 <template>
-    <miao-drop-handler @on-virtual-directory="handleDropVDirectory" @on-files="handleDropFiles"
+    <miao-drop-handler
+        @on-virtual-directory="handleDropVDirectory"
+        @on-files="handleDropFiles"
         @on-virtual-files="handleDropVirtualFiles">
         <div class="miao-directory-item-container" ref="rootDomRef">
-            <div class="container-top" :style="{
+            <!-- 顶部面包屑导航和工具栏 -->
-                backgroundColor:
+            <miao-directory-top
-                    index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
+                :color="props.color"
-            }">
+                :current-directory="currentDirectory"
-                <div class="container-top-colorfulBar" :style="{ backgroundColor: props.color }"></div>
+                @back="handleBack"
-                <div class="container-top-breadcrumb">
+                :open-menu-option="topBarMenuOption"
-                    <!-- <n-scrollbar x-scrollable> -->
+                @reload="handleReload"
-                    <div class="container-top-breadcrumb-container">
+                @exit="emit('exit')"
-                        <n-breadcrumb separator=">" style="margin-left: 5px">
+                :index="index"
-                            <n-breadcrumb-item :clickable="false">
+                @set-current-directory="setCurrentDirectory"
-                                <n-icon size="18">
+                @search="handleSearch"
-                                    <CloudOutline />
+                @menu-select="handleTopBarMenuSelect" />
-                                </n-icon>
+
-                            </n-breadcrumb-item>
+            <!-- 文件和文件夹列表 -->
-                            <n-breadcrumb-item v-for="dir in currentDirectory?.getParents"
+            <miao-directory-items
-                                @click="setCurrentDirectory(dir)" :clickable="true">
+                ref="miaoDirectoryItemRef"
-                                <div>{{ dir.name }}</div>
+                :color="props.color"
-                            </n-breadcrumb-item>
+                :showData_directory="showData_directory"
-                        </n-breadcrumb>
+                :showData_files="showData_files"
-                    </div>
+                :selected-item="selectedItem.value"
-                    <!-- </n-scrollbar> -->
+                :index="index"
-                </div>
+                @item-click="handleItemClick"
-                <div class="container-top-tools">
+                @item-download="handleItemDownload"
-                    <n-icon class="container-top-tools-item" size="15" @click="handleBack">
+                @item-delete="handleItemDelete"
-                        <ChevronBackOutline />
+                @item-drag-start="handleItemDragStart"
-                    </n-icon>
+                @item-rename="handleItemRename"
-                    <n-icon class="container-top-tools-item" size="14" @click="handleReload">
+                @item-select="handleItemSelect" />
-                        <ReloadOutline class="container-top-tools-item-reload" />
+
-                    </n-icon>
+            <!-- 底部工具栏 -->
-                    <n-icon class="container-top-tools-item" size="20" @click="emit('exit')">
+            <miao-directory-bottom
-                        <CloseOutline />
+                :index="index"
-                    </n-icon>
+                @add-new-item="handleAddNewItem"
-                </div>
+                v-if="false"
-            </div>
+                @pick-files-upload="handlePickFilesUpload" />
-            <div class="container-items" :style="{
+
-                backgroundColor:
-                    index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
-            }">
-                <n-scrollbar>
-                    <transition-group name="dirItem">
-                        <miaoDirectoryItem v-for="dir in showData_directory" :item="dir" :key="dir.uid"
-                            :color="props.color" :selected="selectedItem.value.includes(dir)"
-                            @delete="handleItemDelete(dir)" @click="handleItemClick(dir)"
-                            @drag-start="handleItemDragStart" @rename="handleItemRename(dir)"
-                            @on-selected="handleItemSelect(dir)" />
-                    </transition-group>
-                    <transition-group name="dirItem">
-                        <miaoDirectoryItem v-for="file in showData_files" :item="file" :key="file.uid"
-                            :color="props.color" :selected="selectedItem.value.includes(file)"
-                            @click="handleItemClick(file)" @download="handleItemDownload(file)"
-                            @delete="handleItemDelete(file)" @drag-start="handleItemDragStart"
-                            @rename="handleItemRename(file)" @on-selected="handleItemSelect(file)" />
-                    </transition-group>
-                </n-scrollbar>
-            </div>
-            <div class="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="handleAddNewItem" />
-                    </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="handlePickFilesUpload" />
-                    </div>
-                </div>
-            </div>
             <miao-mask v-model:show="showModel"></miao-mask>
             <miao-popup-input ref="popupInput"></miao-popup-input>
         </div>
@@ -89,34 +46,42 @@
 </template>
 
 <script setup lang="ts">
-import { NBreadcrumbItem, NBreadcrumb, NIcon, NScrollbar } from 'naive-ui'
+import { computed, nextTick, onMounted, reactive, ref } from 'vue'
 import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
-import { computed, onMounted, reactive, ref } from 'vue'
 import Config from '@/config'
-import miaoMask from '@/components/miaoMask.vue'
-import miaoDirectoryItem from '@/components/miaoDirectory/miaoDirectoryItem.vue'
-import miaoPopupInput from '@/components/miaoPopupInput.vue'
-import miaoDropHandler from '@/components/miaoDropHandler.vue'
 import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
 import useDataBus from '@/hooks/useDataBus'
-import {
-    CloudOutline,
-    ChevronBackOutline,
-    ReloadOutline,
-    CloseOutline,
-    CloudUploadOutline,
-    AddOutline
-} from '@vicons/ionicons5'
 import useUploadQueue from '@/hooks/useUploadQueue'
 import useVirtualPages from '@/hooks/useVirtualPages'
-import { filePicker } from '@/hooks/miaoTools'
+import { filePicker, renderIcon } 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 {
+    CloseOutline,
+    SearchOutline,
+    FilterOutline,
+    CheckmarkDoneOutline,
+    DocumentText,
+    ExtensionPuzzleOutline,
+    FileTray,
+    AddOutline,
+    CloudUploadOutline
+} 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
@@ -127,9 +92,13 @@ const emit = defineEmits<{
     exit: []
 }>()
 
-const popupInput = ref()
+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() {
@@ -140,75 +109,164 @@ class SelectedItem {
         this._selectedItem = [item, ...this._selectedItem]
     }
     remove(item: VirtualDirectory | VirtualFile) {
-        this._selectedItem = this._selectedItem.filter(v => v !== item)
+        this._selectedItem = this._selectedItem.filter((v) => v !== item)
     }
     clear() {
         this._selectedItem = []
     }
     // 保证内容仍然存在于dir中且各个元素不重复
     get value() {
-        return uniq(this._selectedItem).filter(v => {
+        const _filterList = [
+            ...(currentDirectory.value?.directories ?? []),
+            ...(currentDirectory.value?.files ?? [])
+        ]
+        return uniq(this._selectedItem).filter((v) => {
             if (currentDirectory.value === undefined) {
                 return false
             }
             // @ts-ignore
-            return [...currentDirectory.value?.directorys, ...currentDirectory.value?.files].includes(v)
+            return _filterList.includes(v)
         })
     }
 }
 // 已选择的item，用于多选功能
 const selectedItem = reactive(new SelectedItem())
 
-const currentObjects = defineModel<VirtualDirectory[]>('currentObjects', {
+const currentDirectories = defineModel<VirtualDirectory[]>(
-    required: true
+    'currentDirectories',
-})
+    {
+        required: true
+    }
+)
 
 // 目前展示的Dir
 const currentDirectory = computed(() => {
-    return currentObjects.value[0]
+    return currentDirectories.value[0]
 })
 
 // 当前组件在views中的序号
 const index = computed(() => {
-    for (let i in views) {
+    return views.getIndex(props.id)
-        if (views[i].uid === props.id) {
-            return parseInt(i)
-        }
-    }
-    return 0
 })
 
 // 用于展示的数据，后续会增加排序等操作
 const showData_directory = computed<VirtualDirectory[]>(() => {
-    const data = currentDirectory.value?.directorys
+    if (showDirs.value === false) {
-        ? [...currentDirectory.value?.directorys]
+        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[]>(() => {
-    const data = currentDirectory.value?.files
+    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(() => {
-const rootDomRef = ref<HTMLDivElement>()
+    return [
-
+        {
-const uploadQueue = useUploadQueue()
+            label: '新建',
+            key: 'create',
+            icon: renderIcon(AddOutline)
+        },
+        {
+            label: '上传',
+            key: 'upload',
+            icon: renderIcon(CloudUploadOutline)
+        },
+        {
+            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)
+        },
+        {
+            label: '插件',
+            key: 'plugin',
+            children: [
+                ...pluginCenter
+                    .getUsablePlugin([currentDirectories.value[0]], [])
+                    .map((v) => ({
+                        label: `${v.name}`,
+                        key: `plugin:${v.key}`,
+                        icon: v.icon ? renderIcon(v.icon) : undefined
+                    }))
+            ],
+            icon: renderIcon(ExtensionPuzzleOutline)
+        },
+        {
+            label: '关闭',
+            key: 'close',
+            icon: renderIcon(CloseOutline)
+        }
+    ].filter((v) => v !== undefined)
+})
 
 // 设置显示的dir
 const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
     // 若没有缓存数据则同步刷新，有缓存数据则异步刷新
     if (
         virtualDirectory.files === undefined ||
-        virtualDirectory.directorys === undefined
+        virtualDirectory.directories === undefined
     ) {
         await virtualDirectory.update()
     } else {
         virtualDirectory.update()
     }
-    currentObjects.value[0] = virtualDirectory
+    if (currentDirectories.value[0] !== virtualDirectory) {
+        selectedItem.clear()
+        handleSearchReset()
+        nextTick(() => {
+            miaoDirectoryItemRef.value.scrollTo({
+                top: 0,
+                behavior: 'instant'
+            })
+        })
+    }
+    currentDirectories.value[0] = virtualDirectory
 }
 
 const reload = () => {
@@ -230,6 +288,29 @@ const openUrl = (
     a.click()
 }
 
+const handleTopBarMenuSelect = (key: string) => {
+    if (key === 'close') {
+        emit('exit')
+    } else if (key === 'search') {
+        handleSearch()
+    } else if (key === 'upload') {
+        handlePickFilesUpload()
+    } else if (key === 'create') {
+        handleAddNewItem()
+    } 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)
@@ -260,7 +341,7 @@ const handleItemDownload = (item: VirtualFile) => {
 
 const handleItemDelete = async (_item: VirtualDirectory | VirtualFile) => {
     for (let item of uniq([...selectedItem.value, _item])) {
-        ; (async () => {
+        ;(async () => {
             const { response } = miaoFetchApi.delete(item, {
                 retry: 5
             })
@@ -276,9 +357,8 @@ const handleItemDelete = async (_item: VirtualDirectory | VirtualFile) => {
 }
 
 const handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
-    const popupRes = await popupInput.value.popup({
+    const popupRes = await popupInput.value?.popup({
         title: '重命名',
-        showInput: true,
         inputValue: item.name,
         inputProps: {
             placeholder: item.name
@@ -296,10 +376,13 @@ const handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
             }
         ]
     })
-    if (popupRes.key === false) {
+    if (popupRes?.key === false) {
+        return
+    }
+    const newName = popupRes?.text
+    if (!newName) {
         return
     }
-    const newName = popupRes.text
     const { response } = miaoFetchApi.rename(item, newName, {
         retry: 5
     })
@@ -316,9 +399,15 @@ const handleItemDragStart = async (
     item: VirtualDirectory | VirtualFile
 ) => {
     const items = uniq([item, ...selectedItem.value])
-    dataBus.set('dragData_vFiles', items.filter(v => v.type === 'file'))
+    dataBus.set(
-    dataBus.set('dragData_vDirectory', items.filter(v => v.type === 'directory'))
+        'dragData_vFiles',
-    selectedItem.clear()
+        items.filter((v) => v.type === 'file')
+    )
+    dataBus.set(
+        'dragData_vDirectory',
+        items.filter((v) => v.type === 'directory')
+    )
+    // selectedItem.clear()
 }
 
 const handleDropFiles = async (files: File[]) => {
@@ -336,9 +425,12 @@ const handleDropVDirectory = async (vDirs: VirtualDirectory[]) => {
         if (currentDirectory.value.getParents.includes(vDir)) {
             return
         }
+        if (vDir.parent === currentDirectory.value) {
+            return
+        }
     }
     for (let dir of vDirs) {
-        ; (async () => {
+        ;(async () => {
             const _from = dir.parent
             const { response } = miaoFetchApi.cut(dir, currentDirectory.value)
             const id = (await response).eventId
@@ -357,7 +449,7 @@ const handleDropVirtualFiles = (files: VirtualFile[]) => {
         return
     }
     for (let file of files) {
-        ; (async () => {
+        ;(async () => {
             const _from = file.parent
             const { response } = miaoFetchApi.cut(file, currentDirectory.value)
             const id = (await response).eventId
@@ -384,9 +476,8 @@ const handlePickFilesUpload = async () => {
 }
 
 const handleAddNewItem = async () => {
-    const popupRes = await popupInput.value.popup({
+    const popupRes = await popupInput.value?.popup({
         title: '新建文件/文件夹',
-        showInput: true,
         inputProps: {
             placeholder: ''
         },
@@ -409,12 +500,16 @@ const handleAddNewItem = async () => {
         ]
     })
     // todo: 上传前如重名文件夹等等的错误提前检查
-    if (popupRes.key === 'cancel' || popupRes.text === '') {
+    if (popupRes?.key === 'cancel' || popupRes?.text === '') {
         return
     }
     const _currDir = currentDirectory.value
-    const name = popupRes.text
+    const name = popupRes?.text
-    const opType: 'file' | 'dir' = popupRes.key
+    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') {
@@ -436,6 +531,45 @@ const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
         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)
 })
@@ -449,157 +583,9 @@ $bottom-bar-height: 60px;
     position: relative;
     height: 100%;
     width: inherit;
-    // min-width: 236px;
     display: flex;
     flex-direction: column;
     overflow: hidden;
-
+    min-width: 170px;
-    .container-top {
-        height: $top-height;
-        width: 100%;
-        user-select: none;
-        position: relative;
-        display: flex;
-        align-items: center;
-        overflow: hidden;
-        background-color: #f1f1f1;
-
-        .container-top-colorfulBar {
-            height: 70%;
-            width: 5px;
-            margin-left: 10px;
-            border-radius: 3px 0 0 3px;
-        }
-
-        .container-top-breadcrumb {
-            position: relative;
-            height: 70%;
-            width: calc(100% - 95px);
-            display: flex;
-            justify-content: flex-start;
-            align-items: center;
-            // overflow: hidden;
-            overflow-y: hidden;
-            overflow-x: hidden;
-            background-color: #ffffff;
-            padding: 0 5px;
-            border-radius: 0 3px 3px 0;
-
-            .container-top-breadcrumb-container {
-                position: absolute;
-                height: 100%;
-                right: 0;
-                top: 0;
-                min-width: 100%;
-                display: flex;
-                justify-content: flex-start;
-                align-items: center;
-            }
-        }
-
-        .container-top-tools {
-            position: relative;
-            height: 100%;
-            width: 70px;
-            padding: 0 5px;
-            display: flex;
-            justify-content: space-around;
-            align-items: center;
-
-            .container-top-tools-item {
-                width: 20px;
-                height: 20px;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                background-color: #ffffff00;
-                border-radius: 5px;
-                transition: background-color 0.3s;
-                cursor: pointer;
-
-                .container-top-tools-item-reload {
-                    transition: transform 0.6s ease-in-out;
-                }
-
-                &:hover {
-                    background-color: rgba(128, 128, 128, 0.4);
-                }
-
-                &:active .container-top-tools-item-reload {
-                    transform: rotate(360deg);
-                }
-            }
-
-            // &::after {
-            //     content: '';
-            //     height: 60%;
-            //     position: absolute;
-            //     right: -2px;
-            //     width: 2px;
-            //     background-color: #828282;
-            // }
-        }
-    }
-
-    .container-items {
-        width: 100%;
-        height: calc(100% - $top-height - $bottom-bar-height);
-        // flex: 1;
-    }
-
-    .container-bottom {
-        height: $bottom-bar-height;
-        background-color: bisque;
-        display: flex;
-        justify-content: 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: all 0.3s ease;
-                    cursor: pointer;
-                }
-
-                &:hover {
-                    svg {
-                        width: 40px;
-                        height: 40px;
-                    }
-                }
-            }
-        }
-    }
 }
-
+</style>
-// transition动画相关
-// .miao-directory-item-container {
-//     .container-items {
-//         .dirItem-move {
-//             transition: all 0.2s ease;
-//         }
-
-//         .dirItem-leave-active {
-//             transition: none;
-//         }
-
-//         .dirItem-enter-from {
-//             opacity: 0;
-//         }
-
-//         .dirItem-leave-active {
-//             position: absolute;
-//         }
-//     }
-// }</style>

src/views/miaoIframe.vue

@@ -0,0 +1,34 @@
+<template>
+    <div class="miao-markdown-container-miaomiaomiao">
+        <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">
+.miao-markdown-container-miaomiaomiao {
+    width: 100%;
+    height: 100%;
+    .iframe-container-iframe {
+        width: inherit;
+        height: inherit;
+    }
+}
+</style>

src/views/miaoImages.vue

@@ -0,0 +1,316 @@
+<template>
+    <miao-drop-handler @on-virtual-directory="handleDrop" @on-virtual-files="handleDrop">
+        <miao-message-provider ref="miaoMessageRef">
+            <div class="miaoImage" ref="rootRef">
+                <n-scrollbar ref="NScrollbarRef">
+                    <div class="miaoImage-container" v-for="imageGroup in imageGroupList">
+                        <div class="miaoImage-container-day">
+                            <!-- <div class="miaoImage-container-divide miaoImage-container-divide-before">
+                            <div class="miaoImage-container-divide-line"></div>
+                        </div> -->
+                            <span class="miaoImage-container-day-text">
+                                {{ imageGroup.day }}
+                            </span>
+                            <!-- <div class="miaoImage-container-divide">
+                            <div class="miaoImage-container-divide-line"></div>
+                        </div> -->
+                        </div>
+                        <div class="miaoImage-container-row" v-for="vFile in imageGroup.items" :key="vFile.id">
+                            <img :src="vFile.url" class="miaoImage-container-row-image" loading="lazy" :class="activeImage === vFile
+                                ? 'miaoImage-container-row-image-active'
+                                : ''
+                                " @click="activeImage = vFile" />
+                        </div>
+                    </div>
+                </n-scrollbar>
+                <miao-mask :show="activeImage !== undefined" @click="activeImage = undefined" class="miaoImage-mask">
+                    <ChevronBack class="miaoImage-mask-btn miaoImage-mask-btn-back" @click="handleActiveImageBack" />
+                    <img :src="activeImage?.url" class="miaoImage-mask-active" @click="(e) => e.stopPropagation()"
+                        draggable="false" />
+                    <ChevronForward class="miaoImage-mask-btn miaoImage-mask-btn-forward"
+                        @click="handleActiveImageForward" />
+                </miao-mask>
+            </div>
+        </miao-message-provider>
+    </miao-drop-handler>
+</template>
+
+<script setup lang="ts">
+import miaoMask from '@/components/miaoMask.vue'
+import miaoDropHandler from '@/components/miaoDropHandler.vue'
+import miaoMessageProvider from '@/components/miaoMessageProvider.vue'
+import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
+import { uniq } from 'lodash'
+import { computed, 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 miaoMessageRef = ref<InstanceType<typeof miaoMessageProvider>>()
+
+const imageFileList = ref<VirtualFile[]>([])
+
+const imageGroupList = computed(() => {
+    return groupByDay(imageFileList.value)
+})
+const activeImage = ref<VirtualFile>()
+
+const groupByDay = (array: VirtualFile[]) => {
+    const result = []
+    let currentDay = null
+    let currentGroup: VirtualFile[] = []
+
+    for (const item of array) {
+        const date = new Date(item.stats.mtimeMs)
+        const day = `${date.getFullYear()}年 ${String(
+            date.getMonth() + 1
+        ).padStart(2, '0')}月 ${String(date.getDate()).padStart(2, '0')}日`
+
+        if (day !== currentDay) {
+            if (currentGroup.length > 0) {
+                result.push({
+                    day: currentDay,
+                    items: currentGroup
+                })
+            }
+            currentDay = day
+            currentGroup = [item]
+        } else {
+            currentGroup.push(item)
+        }
+    }
+    if (currentGroup.length > 0) {
+        result.push({
+            day: currentDay,
+            items: currentGroup
+        })
+    }
+
+    return result
+}
+
+const scrollToActiveImage = () => {
+    const dom = rootRef.value?.querySelector(
+        '.miaoImage-container-row-image-active'
+    )
+    NScrollbarRef.value.scrollTo({
+        top: dom.offsetTop - 30,
+        behavior: 'smooth'
+    })
+}
+
+const handleActiveImageBack = (e: any) => {
+    e.stopPropagation()
+    if (!activeImage.value) {
+        return
+    }
+    const index = imageFileList.value.indexOf(activeImage.value)
+    activeImage.value =
+        imageFileList.value[
+        (index - 1 + imageFileList.value.length) %
+        imageFileList.value.length
+        ]
+    nextTick(scrollToActiveImage)
+}
+
+const handleActiveImageForward = (e: any) => {
+    e.stopPropagation()
+    if (!activeImage.value) {
+        return
+    }
+    const index = imageFileList.value.indexOf(activeImage.value)
+    activeImage.value =
+        imageFileList.value[
+        (index + 1 + imageFileList.value.length) %
+        imageFileList.value.length
+        ]
+    nextTick(scrollToActiveImage)
+}
+
+const handleDrop = async (vItems: (VirtualFile | VirtualDirectory)[]) => {
+    const length_before = imageFileList.value.length
+    if (vItems[0].type === 'directory') {
+        // @ts-ignore
+        currentDirectories.value = [...currentDirectories.value, ...vItems]
+        for (const i of vItems) {
+            // @ts-ignore
+            await updateImageSrcList(i)
+        }
+    } else {
+        // @ts-ignore
+        currentFiles.value = [...currentFiles, ...vItems]
+        // @ts-ignore
+        await updateImageSrcList(vItems)
+    }
+    miaoMessageRef.value?.message(length_before === imageFileList.value.length ? '未发现任何可添加图片' : `导入${imageFileList.value.length - length_before}张图片`, {
+        type: length_before === imageFileList.value.length ? 'info' : 'success'
+        , timeout: 5000
+    })
+}
+
+const updateImageSrcList = async (source: VirtualFile[] | VirtualDirectory) => {
+    let newFileList: VirtualFile[]
+    if ('type' in source) {
+        await source.update()
+        newFileList = [
+            ...(source.files?.filter((v) =>
+                imageSuffixList.includes(v.name.split('.').pop() ?? '')
+            ) ?? [])
+        ]
+    } else {
+        newFileList = [
+            ...(source.filter((v) =>
+                imageSuffixList.includes(v.name.split('.').pop() ?? '')
+            ) ?? [])
+        ]
+    }
+    imageFileList.value = uniq([...imageFileList.value, ...newFileList]).sort(
+        (a, b) => - a.stats.mtimeMs + b.stats.mtimeMs
+    )
+}
+
+onMounted(async () => {
+    const length_before = imageFileList.value.length;
+    for (const i of [currentFiles.value, ...currentDirectories.value]) {
+        await updateImageSrcList(i)
+    }
+    miaoMessageRef.value?.message(length_before === imageFileList.value.length ? '未发现任何新增图片' : `导入${imageFileList.value.length - length_before}张图片`, {
+        type: length_before === imageFileList.value.length ? 'info' : 'success'
+        , timeout: 5000
+    })
+})
+</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;
+        margin-bottom: 20px;
+        margin-top: 20px;
+
+        .miaoImage-container-day {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            position: relative;
+            margin: 0 20px;
+
+            .miaoImage-container-divide {
+                flex: 1;
+                height: 100%;
+                position: relative;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+
+            .miaoImage-container-divide-line {
+                height: 3px;
+                width: 100%;
+                border-radius: 5px;
+                background-color: rgb(244 244 244);
+            }
+
+            .miaoImage-container-divide-before {
+                flex: 0.1;
+            }
+
+            .miaoImage-container-day-text {
+                margin: 0 0 0 10px;
+                font-size: 15px;
+                user-select: none;
+            }
+        }
+
+        .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/miaoMarkdown.vue

@@ -0,0 +1,64 @@
+<template>
+  <n-scrollbar>
+    <div class="miao-markdown-container-miaomiaomiao" v-html="renderedMarkdown"></div>
+    <div style="height: 50px; width: 100%;"></div>
+  </n-scrollbar>
+</template>
+
+<script setup lang="ts">
+import { NScrollbar } from 'naive-ui';
+import { VirtualFile } from '@/class/VirtualDirectory'
+import { onMounted, ref } from 'vue'
+import MarkdownIt from 'markdown-it'
+import useMiaoFetchApi from '@/hooks/useMiaoFetchApi';
+
+const miaoFetchApi = useMiaoFetchApi()
+
+const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
+  required: true
+})
+
+const markdownSrc = ref<string>()
+const renderedMarkdown = ref<string>('')
+
+const md = new MarkdownIt()
+
+onMounted(async () => {
+  markdownSrc.value = currentFiles.value[0].url
+  const text = (await miaoFetchApi.getFile(currentFiles.value[0])).toString()
+  renderedMarkdown.value = md.render(text)
+})
+</script>
+
+<style lang="scss">
+.miao-markdown-container-miaomiaomiao {
+  width: 95%;
+  margin: 20px;
+
+  table,
+  td,
+  th {
+    border: 1px solid #ddd;
+    text-align: left;
+  }
+
+  table {
+    border-collapse: collapse;
+    margin-bottom: 20px;
+  }
+
+  th,
+  td {
+    padding: 15px;
+  }
+
+  tr:nth-child(even) {
+    background-color: #f2f2f2
+  }
+
+  th {
+    background-color: #04AA6D;
+    color: white;
+  }
+}
+</style>

src/views/miaoPDF.vue

@@ -0,0 +1,201 @@
+<template>
+    <miao-message-provider ref="miaoMessageRef">
+        <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>
+    </miao-message-provider>
+</template>
+
+<script setup lang="ts">
+import miaoMessageProvider from '@/components/miaoMessageProvider.vue'
+import { 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>()
+const miaoMessageRef = ref<InstanceType<typeof miaoMessageProvider>>()
+// 通过margin来实现缩小功能
+const pdfMargin = ref<number>(0)
+
+const pdfPageCount = ref<number>(-1)
+
+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
+}
+
+onMounted(async () => {
+    const setLoadingMessage = miaoMessageRef.value?.message('加载PDF插件中', {
+        type: 'info',
+        timeout: -1
+    })
+    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++) {
+        setLoadingMessage && setLoadingMessage(`渲染进度：${i}/${pdf.numPages}`)
+        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 // 一页一页的渲染
+    }
+    setLoadingMessage &&
+        setLoadingMessage(`渲染PDF完成`, {
+            type: 'success',
+            timeout: 3456
+        })
+})
+</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

@@ -0,0 +1,342 @@
+<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.id,
+                            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.id,
+                            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.id,
+                            url,
+                            text: i.name
+                        })
+                    } else {
+                        _list.push({
+                            id: i.id,
+                            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>

vite.config.ts

@@ -1,11 +1,15 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import { resolve } from 'path'
-import { viteSingleFile } from 'vite-plugin-singlefile'
+// import { viteSingleFile } from 'vite-plugin-singlefile'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [vue(), viteSingleFile()],
+    base: './',
+    plugins: [
+        vue()
+        // viteSingleFile()
+    ],
     resolve: {
         alias: {
             '@': resolve(__dirname, 'src')
@@ -55,16 +59,16 @@ export default defineConfig({
     build: {
         rollupOptions: {
             input: {
-                main: resolve(__dirname, 'index.html')
+                main: '/src/index.ts'
             },
-            output: {
+            // output: {
-                // 配置输出为单文件
+            //     entryFileNames: (chunkInfo) => {
-                inlineDynamicImports: true,
+            //         if (chunkInfo.name === 'main') {
-                manualChunks: undefined,
+            //             return 'main.js'
-                entryFileNames: 'bundle.js',
+            //         }
-                format: 'iife', // 立即执行函数格式
+            //         return '[name].[hash].js'
-                name: 'MyBundle'
+            //     }
-            }
+            // }
         }
     }
 })