feat: 1.现在miaoFetchApi.getFile始终返回Promise<uint8array>. 2.增加文件加/解密插件，样式还没写，加密功能是挺正常的。3.加了个插件模板

README.md

@@ -7,6 +7,7 @@
 | 完善PDF插件 | ✅ |
 | 完善Code插件 | ✅ |
 | 实现miaoDirectory的搜索功能 | ✅ |
+| 重构miaoFetchApi.getFile， 增加进度 | ❌ |
 | plugin增加些属性，icon, disable, group之类的 | ❌ |
 | 完善miaoDirectory的搜索功能 | ❌ |
 | 实现miaoDirectory的排序功能 | ❌ |
@@ -14,6 +15,8 @@
 | VirtualDirectory更新时更新文件信息 | ❌ |
 | 创建音乐播放器组件（仿QQ音乐移动端吧） | ❌ |
 | miaoDirectory的复制文件/文件夹功能 | ❌ |
+| 重构miaoDropHandler的实现 | ❌ |
+| 重构主界面，拆分主界面组件的实现 | ❌ |
 
 
 | 长期计划 |
@@ -23,5 +26,4 @@
 
 ## 碎碎念：
 
-为什么不直接做成类似于windows的风格呢？其实技术实现上问题应该不大，重构也不用重构太多东西（APP.vue改改，插件部分改改这样），但是开学了事情一大堆，实习又没法比较美好地推掉。平时每天到宿舍都精疲力竭还要准备秋招和学校的破事。更何况搞不好还会被两个学分卡得没法毕业，好烦好烦。
-不过可能我对插件的价值也是有所高估吧。
+为什么不直接做成类似于windows的风格呢？其实技术实现上问题应该不大，重构也不用重构太多东西（APP.vue改改，插件部分改改这样），但是开学了事情一大堆，实习又没法比较美好地推掉。平时每天到宿舍都精疲力竭还要准备秋招和学校的破事。更何况搞不好还会被两个学分卡得没法毕业，好烦好烦。md想这么多干嘛，反正都快岩壁了，mdmdmdmd

package.json

@@ -24,6 +24,7 @@
         "@codemirror/lang-xml": "^6.1.0",
         "@codemirror/lang-yaml": "^6.1.1",
         "@vicons/ionicons5": "^0.12.0",
+        "aes-js": "^3.1.2",
         "axios": "^1.7.3",
         "codemirror": "^6.0.1",
         "lodash": "^4.17.21",
@@ -37,6 +38,7 @@
         "xgplayer-subtitles": "^3.0.20"
     },
     "devDependencies": {
+        "@types/aes-js": "^3.1.4",
         "@types/lodash": "^4.17.7",
         "@types/markdown-it": "^14.1.2",
         "@types/node": "^22.1.0",

pnpm-lock.yaml

@@ -44,6 +44,9 @@ importers:
       '@vicons/ionicons5':
         specifier: ^0.12.0
         version: 0.12.0
+      aes-js:
+        specifier: ^3.1.2
+        version: 3.1.2
       axios:
         specifier: ^1.7.3
         version: 1.7.3
@@ -78,6 +81,9 @@ importers:
         specifier: ^3.0.20
         version: 3.0.20(core-js@3.38.1)
     devDependencies:
+      '@types/aes-js':
+        specifier: ^3.1.4
+        version: 3.1.4
       '@types/lodash':
         specifier: ^4.17.7
         version: 4.17.7
@@ -480,6 +486,9 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@types/aes-js@3.1.4':
+    resolution: {integrity: sha512-v3D66IptpUqh+pHKVNRxY8yvp2ESSZXe0rTzsGdzUhEwag7ljVfgCllkWv2YgiYXDhWFBrEywll4A5JToyTNFA==}
+
   '@types/estree@1.0.5':
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
 
@@ -579,6 +588,9 @@ packages:
   abbrev@1.1.1:
     resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
 
+  aes-js@3.1.2:
+    resolution: {integrity: sha512-e5pEa2kBnBOgR4Y/p20pskXI74UEz7de8ZGVo58asOtvSVG5YAbJeELPZxOmt+Bnz3rX753YKhfIn4X4l1PPRQ==}
+
   agent-base@6.0.2:
     resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
     engines: {node: '>= 6.0.0'}
@@ -1614,6 +1626,8 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.20.0':
     optional: true
 
+  '@types/aes-js@3.1.4': {}
+
   '@types/estree@1.0.5': {}
 
   '@types/katex@0.16.7': {}
@@ -1753,6 +1767,8 @@ snapshots:
   abbrev@1.1.1:
     optional: true
 
+  aes-js@3.1.2: {}
+
   agent-base@6.0.2:
     dependencies:
       debug: 4.3.6

src/App.vue

@@ -9,12 +9,12 @@ import {
     EllipsisVertical,
     QrCodeOutline
 } from '@vicons/ionicons5'
-import miaoDirectory from '@/views/miaoDirectory.vue'
 import VirtualDirectory, { VirtualFile } from './class/VirtualDirectory'
 import MiaoMask from './components/miaoMask.vue'
 import config from './config'
 import useVirtualPages from './hooks/useVirtualPages'
 import init from './hooks/init'
+import usePluginCenter from './hooks/usePluginCenter'
 
 const { baseUrl } = config
 
@@ -26,6 +26,7 @@ const modalData = shallowRef<{
 }>()
 
 const views = useVirtualPages()
+const pluginCenter = usePluginCenter()
 
 const rootDirectory = reactive(
     new VirtualDirectory({
@@ -46,13 +47,13 @@ const createView = (
     currentFiles?: VirtualFile[],
     index?: number
 ) => {
-    views.push(component, currentDirectories, currentFiles, index)
+    views.push(component, currentDirectories, currentFiles, { index })
 }
 
 const deleteView = (index: number) => {
     views.deleteView(index)
     if (views.length === 0) {
-        createView(miaoDirectory, [rootDirectory])
+        pluginCenter.usePlugin('miaoDirectory', [rootDirectory], [])
     }
 }
 
@@ -103,9 +104,10 @@ const handleMenuSelect = async (key: string) => {
     }
 }
 
-onMounted(() => {
-    init()
-    createView(miaoDirectory, [rootDirectory])
+onMounted(async () => {
+    await init()
+    pluginCenter.usePlugin('miaoDirectory', [rootDirectory], [])
+    // createView(miaoDirectory, [rootDirectory])
 })
 </script>
 

src/class/PluginCenter.ts

@@ -7,6 +7,17 @@ export enum PluginGroup {
     mainMenu = 'mainMenu'
 }
 
+export interface registerComponentOption {
+    key: string
+    name: string
+    icon?: any
+    getComponent: () => Promise<any>
+    group?: PluginGroup[]
+    filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean
+    disable?: boolean
+    exitConfirm?: boolean
+}
+
 type Plugin = {
     // 用于显示的名字
     name: string
@@ -41,24 +52,16 @@ export default class PluginCenter {
     /**
      * 便捷地注册一个组件为插件，触发时直接用新页面打开
      */
-    registerComponent(option: {
-        key: string
-        name: string
-        icon?: any
-        getComponent: () => Promise<any>
-        group?: PluginGroup[]
-        filter: (
-            VDirectories: VirtualDirectory[],
-            VFiles: VirtualFile[]
-        ) => boolean
-    }): void {
+    registerComponent(option: registerComponentOption): void {
         const {
             key,
             name,
             getComponent,
             icon,
             filter,
-            group = [PluginGroup.default]
+            group = [PluginGroup.default],
+            disable = false,
+            exitConfirm = false
         } = option
         let _component: any
         const views = useVirtualPages()
@@ -67,7 +70,7 @@ export default class PluginCenter {
             filter,
             icon: shallowRef(icon),
             group,
-            disable: false,
+            disable,
             func: async (
                 VDirectories: VirtualDirectory[],
                 VFiles: VirtualFile[]
@@ -76,7 +79,11 @@ export default class PluginCenter {
                     return
                 }
                 if (_component === undefined) _component = await getComponent()
-                views.push(_component, VDirectories, VFiles)
+                views.push(_component, VDirectories, VFiles, {
+                    VirtualPageOption: {
+                        exitConfirm
+                    }
+                })
             }
         })
     }

src/class/VirtualPage.ts

@@ -1,75 +1,104 @@
-import { reactive, shallowRef } from "vue";
-import VirtualDirectory, { VirtualFile } from "./VirtualDirectory";
-import generateId from "@/hooks/generateId";
+import { reactive, shallowRef } from 'vue'
+import VirtualDirectory, { VirtualFile } from './VirtualDirectory'
+import generateId from '@/hooks/generateId'
+
+export interface VirtualPageOption {
+    exitConfirm?: boolean
+}
+
+export interface ViewsPushOption {
+    index?: number
+    VirtualPageOption?: VirtualPageOption
+}
 
 const getRandomWebSafeColor = (() => {
-	const webSafeColors = ["#009900", "#999900", "#009999", "#990099", "#0000ee"];
-	let counter = 0;
+    const webSafeColors = [
+        '#009900',
+        '#999900',
+        '#009999',
+        '#990099',
+        '#0000ee'
+    ]
+    let counter = 0
     return () => {
-		const color = webSafeColors[counter % webSafeColors.length];
-		counter += 1;
-		return color;
-	};
-})();
+        const color = webSafeColors[counter % webSafeColors.length]
+        counter += 1
+        return color
+    }
+})()
 
 export default class VirtualPage {
-	constructor(component: any, initObjects?: { directories?: VirtualDirectory[]; files?: VirtualFile[] }) {
-		this.component = shallowRef(component);
-		this.currentDirectories = initObjects?.directories ?? [];
-		this.currentFiles = initObjects?.files ?? [];
-		this.visible = true;
-		this.id = generateId();
-		this.refreshKey = Math.random();
-		this.color = getRandomWebSafeColor();
+    constructor(
+        component: any,
+        initObjects?: {
+            directories?: VirtualDirectory[]
+            files?: VirtualFile[]
+            option?: VirtualPageOption
+        }
+    ) {
+        this.component = shallowRef(component)
+        this.currentDirectories = initObjects?.directories ?? []
+        this.currentFiles = initObjects?.files ?? []
+        this.visible = true
+        this.id = generateId()
+        this.refreshKey = Math.random()
+        this.color = getRandomWebSafeColor()
+        this.exitConfirm = initObjects?.option?.exitConfirm ?? false
     }
     // 页面使用的组件
-	component: any;
+    component: any
     // 是否可见
-	visible: boolean;
+    visible: boolean
     // 当前正在使用的文件夹
-	currentDirectories: VirtualDirectory[];
+    currentDirectories: VirtualDirectory[]
     // 当前正在使用的文件
-	currentFiles: VirtualFile[];
+    currentFiles: VirtualFile[]
     // 区分每一个页面的唯一id
-	id: number;
+    id: number
     // 当refreshKey改变时需要刷新页面，目前还没接入刷新
-	refreshKey: number;
+    refreshKey: number
     // 为了区分，每个虚拟页面都会分配一个color，这个color会体现在tab上
-	color: string;
+    color: string
     // 用于展示的title
-	_title?: string;
+    _title?: string
+    // 关闭时是否需要确认
+    exitConfirm: boolean
 
     get title() {
         if (this._title) {
-			return this._title;
+            return this._title
         }
-		return this?.currentDirectories[0]?.name ?? this?.currentFiles[0]?.name ?? "未命名标签";
+        return (
+            this?.currentDirectories[0]?.name ??
+            this?.currentFiles[0]?.name ??
+            '未命名标签'
+        )
     }
 
     setTitle(title: string) {
-		this._title = title;
+        this._title = title
     }
 
     // 切换显示状态
     switchShow() {
-		this.visible = !this.visible;
+        this.visible = !this.visible
     }
 
     // 刷新，不过好像没有用得到的时候吧
     // 事实上也不应该用得到，因为更新应该是响应式的
     refresh() {
-		this.refreshKey = Math.random();
+        this.refreshKey = Math.random()
     }
 }
 
 export class VirtualPages {
     constructor() {
-		this._views = reactive<VirtualPage[]>([]);
+        this._views = reactive<VirtualPage[]>([])
     }
-	_views: VirtualPage[];
+    _views: VirtualPage[]
 
     get length() {
-		return this._views.length;
+        return this._views.length
     }
 
     /**
@@ -80,10 +109,10 @@ export class VirtualPages {
     getIndex(id: number) {
         for (let i in this._views) {
             if (this._views[i].id === id) {
-				return parseInt(i);
+                return parseInt(i)
             }
         }
-		return -1;
+        return -1
     }
     /**
      * 根据id得到view
@@ -92,32 +121,38 @@ export class VirtualPages {
     getView(id: number) {
         for (let v of this._views) {
             if (v.id === id) {
-				return v;
+                return v
             }
         }
-		return undefined;
+        return undefined
     }
 
     /**
      * 推入一个新的页面
      */
-	push(component: any, currentDirectories?: VirtualDirectory[], currentFiles?: VirtualFile[], index?: number) {
-		index ?? (index = this.length);
+    push(
+        component: any,
+        currentDirectories?: VirtualDirectory[],
+        currentFiles?: VirtualFile[],
+        option?: ViewsPushOption
+    ) {
+        const { index = this.length, VirtualPageOption } = option ?? {}
         this._views.splice(
             index,
             0,
             reactive<VirtualPage>(
                 new VirtualPage(component, {
                     directories: [...(currentDirectories ?? [])],
-					files: [...(currentFiles ?? [])]
+                    files: [...(currentFiles ?? [])],
+                    option: VirtualPageOption
                 })
             )
-		);
+        )
     }
     /**
      * 根据次序删除一个页面
      */
     deleteView(index: number) {
-		this._views.splice(index, 1);
+        this._views.splice(index, 1)
     }
 }

src/hooks/init.ts

@@ -1,167 +1,5 @@
-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";
+import initPlugin from "./init/initPlugin";
 
-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");
-				}
-			});
-		}
-	});
+export default async function init() {
+	await initPlugin()
 }

src/hooks/init/initPlugin.ts

@@ -0,0 +1,16 @@
+
+import usePluginCenter from '@/hooks/usePluginCenter'
+import { registerComponentOption } from '@/class/PluginCenter'
+
+const initPlugin = async () => {
+    const modulesFiles = import.meta.glob('@/plugins/**/export.ts')
+    const pluginCenter = usePluginCenter()
+    for (let pluginConfig of Object.values(modulesFiles)) {
+        const _config = pluginConfig as () => Promise<{
+            default: registerComponentOption
+        }>
+        pluginCenter.registerComponent((await _config()).default)
+    }
+}
+
+export default initPlugin

src/hooks/useMiaoFetchApi.ts

@@ -11,14 +11,16 @@ import {
     mkdirOption
 } from '@/types/fetch'
 import Config from '@/config'
-import axios, { AxiosRequestConfig } from 'axios'
+import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'
 
 export const useMiaoFetch = (option?: miaoFetchConfig) => {
     const retry = option?.retry ?? 0
     const controller = new AbortController()
     let flag = true
     return {
-        miaoFetch: async (config: AxiosRequestConfig<any>) => {
+        miaoFetch: async (
+            config: AxiosRequestConfig<any>
+        ): Promise<AxiosResponse<any, any>> => {
             let counter = 0
             let response: any
             let errList = []
@@ -68,12 +70,12 @@ const miaoFetchApi = {
     },
 
     /**
-     * 获取对应文件夹下的数据
+     * 获取对应文件下的数据
      */
     async getFile(
         vFile: VirtualFile,
         option?: getOption
-    ): Promise<getResponse> {
+    ) {
         // const { baseUrl, api } = Config
         const url = vFile.url
         const retry = option?.retry ?? 0
@@ -83,9 +85,11 @@ const miaoFetchApi = {
             retry
         })
         const response = await miaoFetch({
-            url, ...axiosOption
+            url,
+            responseType: 'arraybuffer',
+            ...axiosOption
         })
-        return response.data
+        return new Uint8Array(response.data)
     },
 
     /**

src/plugins/miaoCodeMirror/export.ts

@@ -0,0 +1,42 @@
+import { registerComponentOption } from '@/class/PluginCenter'
+import { CodeOutline } from '@vicons/ionicons5'
+
+const pluginConfig: registerComponentOption = {
+    key: 'miaoCodeMirror',
+    name: '代码编辑',
+    icon: CodeOutline,
+    getComponent: async () =>
+        (await import('@/plugins/miaoCodeMirror/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
+    }
+}
+
+export default pluginConfig

src/plugins/miaoCodeMirror/miaoCodeMirror.vue

@@ -1,12 +1,23 @@
 <template>
     <miao-message-provider ref="miaoMessage">
-        <div class="codemirror-container" ref="rootRef" :class="`codemirror-container-${theme}`">
+        <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
+                    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% );">
+                <NScrollbar style="max-height: calc(100%)">
                     <codemirror v-model="codeData" :extensions="extensions" />
                 </NScrollbar>
             </div>
@@ -28,6 +39,8 @@ const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
     required: true
 })
 
+const decoder = new TextDecoder('utf-8')
+
 const miaoMessage = ref<InstanceType<typeof miaoMessageProvider>>()
 const vFile = ref<VirtualFile>()
 const rootRef = ref<HTMLDivElement>()
@@ -60,7 +73,6 @@ const handleSave = async () => {
         timeout: 5000,
         type: 'success'
     })
-
 }
 
 const handleReset = async () => {
@@ -87,7 +99,12 @@ const getLangExtensions = async (fileName: string) => {
         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', })]
+            return [
+                javascript({
+                    jsx: ext.substring(2, 3) === 'x',
+                    typescript: ext.substring(0, 2) === 'js'
+                })
+            ]
             break
         case 'css':
         case 'scss':
@@ -134,16 +151,15 @@ const getLangExtensions = async (fileName: string) => {
 onMounted(async () => {
     vFile.value = currentFiles.value[0]
     const fileName = currentFiles.value[0].name
-    codeData.value = (
+    codeData.value = decoder.decode(
         await miaoFetchApi.getFile(currentFiles.value[0], {
             axiosOption: {
-                responseType: 'text',
                 headers: {
                     'Cache-Control': 'no-cache'
                 }
             }
         })
-    ).toString()
+    )
     bakData.value = codeData.value
     extensions.value = [...(await getLangExtensions(fileName))]
 

src/plugins/miaoCrypto/export.ts

@@ -0,0 +1,21 @@
+// @ts-nocheck
+import { registerComponentOption } from '@/class/PluginCenter'
+
+const pluginConfig: registerComponentOption = {
+    key: 'miaoCrypto',
+    name: '文件加密',
+    getComponent: async () =>
+        (await import('./miaoCrypto.vue')).default,
+    filter: (vDirs, vFiles) => {
+        return true
+        if (vDirs.length !== 0) {
+            return false
+        }
+        if (vFiles.length !== 1) {
+            return false
+        }
+        return vFiles[0].name.endsWith('txt')
+    },
+}
+
+export default pluginConfig

src/plugins/miaoCrypto/hooks/AES.ts

@@ -0,0 +1,19 @@
+import aesJs from 'aes-js'
+import aes_worker from '../workers/aes-worker?worker'
+
+/**
+ * 使用worker进行aes加密
+ * @param {any} key:string 须保证长度正确
+ * @param {any} data:Uint8Array
+ * @returns {Uint8Array}
+ */
+export default (key: string, data: Uint8Array) => {
+    const key_u8i = aesJs.utils.utf8.toBytes(key)
+    return new Promise<Uint8Array>((resolve) => {
+        const aesWorker = new aes_worker()
+        aesWorker.onmessage = (event) => {
+            resolve(event.data)
+        }
+        aesWorker.postMessage({ data, key: key_u8i })
+    })
+}

src/plugins/miaoCrypto/miaoCrypto.vue

@@ -0,0 +1,164 @@
+<template>
+    <miao-drop-handler @on-virtual-files="handleDropVirtualFiles">
+        <div class="miaoCrypto-container">
+            <div class="miaoCrypto-container-encrypt miaoCrypto-container-item">
+                <n-scrollbar style="max-height: 100%">
+                    <div
+                        v-for="item of workItemList"
+                        class="miaoCrypto-container-item-item">
+                        <div
+                            class="miaoCrypto-container-item-percentBar"
+                            :style="{
+                                zIndex: 0,
+                                width: item.buffer ? `100%` : `0%`,
+                                backgroundColor: 'blue'
+                            }"></div>
+                        <div
+                            class="miaoCrypto-container-item-percentBar"
+                            :style="{
+                                zIndex: 1,
+                                width: item.status === 'finish' ? `100%` : `0%`,
+                                backgroundColor: 'green'
+                            }"></div>
+                        <span class="miaoCrypto-container-item-content">{{ item.name }}{{ item.status }}</span>
+                    </div>
+                </n-scrollbar>
+            </div>
+            <div
+                class="miaoCrypto-container-decrypt miaoCrypto-container-item"></div>
+        </div>
+    </miao-drop-handler>
+</template>
+
+<script setup lang="ts">
+import { NScrollbar } from 'naive-ui'
+import { ref } from 'vue'
+import aes_ctr_worker from './hooks/AES'
+import { VirtualFile } from '@/class/VirtualDirectory'
+import miaoDropHandler from '@/components/miaoDropHandler.vue'
+import { reactive } from 'vue'
+import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
+import { onMounted } from 'vue'
+import { computed } from 'vue'
+
+const miaoFetchApi = useMiaoFetchApi()
+
+interface workItem {
+    status: 'wait' | 'process' | 'finish'
+    buffer?: Uint8Array
+    getBuffer: () => Promise<Uint8Array>
+    isGettingBuffer: boolean
+    name: string
+}
+
+class Work {
+    constructor(func: (key: string, data: Uint8Array) => Promise<Uint8Array>) {
+        this.queue = []
+        this.func = func
+    }
+    queue: workItem[]
+    func: (key: string, data: Uint8Array) => Promise<Uint8Array>
+    get isBusy() {
+        return this.queue.filter((v) => v.status === 'process').length > 0
+    }
+    async funcLoop() {
+        if (this.isBusy) {
+            return
+        }
+        const currentItem = this.queue.filter((v) => v.status === 'wait')[0]
+        if (currentItem === undefined || currentItem.buffer === undefined) {
+            return
+        }
+        currentItem.status = 'process'
+        currentItem.buffer = await this.func(key.value, currentItem.buffer)
+        currentItem.status = 'finish'
+        this.funcLoop()
+    }
+    async getBufferLoop() {
+        const _list = this.queue.filter(
+            (v) => v.isGettingBuffer === false && v.buffer === undefined
+        )
+        if (_list.length === 0) {
+            return
+        }
+        const item = _list[0]
+        item.isGettingBuffer = true
+        item.buffer = await item.getBuffer()
+        item.isGettingBuffer = false
+        this.funcLoop()
+        this.getBufferLoop()
+    }
+    push(itemList: workItem[]) {
+        this.queue.push(...itemList)
+        this.getBufferLoop()
+    }
+    pushVFiles(itemList: VirtualFile[]) {
+        this.push(
+            itemList.map((v) => ({
+                name: v.name,
+                getBuffer: () => miaoFetchApi.getFile(v),
+                status: 'wait',
+                isGettingBuffer: false
+            }))
+        )
+    }
+}
+
+const encryptWork = reactive(new Work(aes_ctr_worker))
+// const decryptWork = reactive(new Work(aes_ctr_worker))
+
+const workItemList = computed(() => [
+    ...encryptWork.queue
+    // ...decryptWork.queue
+])
+
+const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
+    required: true
+})
+
+const key = ref('ABlockIs16Bytes!')
+
+const handleDropVirtualFiles = (vFiles: VirtualFile[]) => {
+    encryptWork.pushVFiles(vFiles)
+}
+
+onMounted(() => {
+    encryptWork.pushVFiles(currentFiles.value)
+})
+</script>
+
+<style scoped lang="scss">
+.miaoCrypto-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    &-item {
+        max-height: 100%;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        &-item {
+            margin: 10px auto;
+            width: 95%;
+            height: 40px;
+            background-color: #fff;
+            box-shadow: 0 0 15px -7px rgba(0, 0, 0, 0.1725490196),
+                0 0 3px 1px #43434359;
+            border-radius: 5px;
+            position: relative;
+            .miaoCrypto-container-item-percentBar {
+                height: 100%;
+                position: absolute;
+                top: 0;
+                left: 0;
+            }
+            .miaoCrypto-container-item-content {
+                position: relative;
+                z-index: 3
+            }
+        }
+    }
+}
+</style>

src/plugins/miaoCrypto/workers/aes-worker.ts

@@ -0,0 +1,10 @@
+import aesJs from 'aes-js'
+
+self.onmessage = async function (event) {
+    const data = event.data.data as Uint8Array
+    const key = event.data.key as Uint8Array
+    console.log(event)
+    var aesCtr = new aesJs.ModeOfOperation.ctr(key, new aesJs.Counter(7058))
+    const encryptData = aesCtr.encrypt(data)
+    self.postMessage(encryptData)
+}

src/plugins/miaoDirectory/components/miaoDirectoryItem.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script setup lang="ts">
-import miaoContextMenu from '../miaoContextMenu.vue'
+import miaoContextMenu from '@/components/miaoContextMenu.vue'
 import {
     DocumentText,
     FileTray,

src/plugins/miaoDirectory/components/miaoDirectoryItemsContainer.vue

@@ -45,7 +45,7 @@
 <script setup lang="ts">
 import { NScrollbar } from 'naive-ui'
 import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
-import miaoDirectoryItem from '@/components/miaoDirectory/miaoDirectoryItem.vue'
+import miaoDirectoryItem from './miaoDirectoryItem.vue'
 import miaoLazyDiv from '@/components/miaoLazyDiv.vue'
 import { computed, ref } from 'vue'
 import usePluginCenter from '@/hooks/usePluginCenter'

src/plugins/miaoDirectory/export.ts

@@ -0,0 +1,19 @@
+import { registerComponentOption } from '@/class/PluginCenter'
+import FileTray from '@vicons/ionicons5/es/FileTray'
+// import MiaoDirectory from '@/plugins/miaoDirectory/miaoDirectory.vue'
+
+const pluginConfig: registerComponentOption = {
+    key: 'miaoDirectory',
+    name: '文件夹',
+    icon: FileTray,
+    getComponent: async () =>
+        (await import('@/plugins/miaoDirectory/miaoDirectory.vue')).default,
+    filter: (vDirs, vFiles) => {
+        if (vFiles.length) {
+            return false
+        }
+        return vDirs.length === 1
+    }
+}
+
+export default pluginConfig

src/plugins/miaoDirectory/miaoDirectory.vue

@@ -57,9 +57,9 @@ 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 miaoDirectoryTop from './components/miaoDirectoryTop.vue'
+import MiaoDirectoryItems from './components/miaoDirectoryItemsContainer.vue'
+import MiaoDirectoryBottom from './components/miaoDirectoryBottom.vue'
 import MiaoMask from '@/components/miaoMask.vue'
 import MiaoPopupInput from '@/components/miaoPopupInput.vue'
 import MiaoDropHandler from '@/components/miaoDropHandler.vue'

src/plugins/miaoIframe/export.ts

@@ -0,0 +1,21 @@
+import { registerComponentOption } from '@/class/PluginCenter'
+import LogoChrome from '@vicons/ionicons5/es/LogoChrome'
+
+const pluginConfig: registerComponentOption = {
+    key: 'miaoIframe',
+    name: '框架',
+    icon: LogoChrome,
+    getComponent: async () =>
+        (await import('@/plugins/miaoIframe/miaoIframe.vue')).default,
+    filter: (vDirs, vFiles) => {
+        if (vDirs.length !== 0) {
+            return false
+        }
+        if (vFiles.length !== 1) {
+            return false
+        }
+        return vFiles[0].name.endsWith('html')
+    }
+}
+
+export default pluginConfig

src/plugins/miaoImages/export.ts

@@ -0,0 +1,45 @@
+import { registerComponentOption } from '@/class/PluginCenter'
+import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
+import { Image } from '@vicons/ionicons5'
+
+const pluginConfig: registerComponentOption = {
+    key: 'miaoImages',
+    name: '图片浏览',
+    icon: Image,
+    getComponent: async () =>
+        (await import('@/plugins/miaoImages/miaoImages.vue')).default,
+    filter: (vDirs: VirtualDirectory[], vFiles: VirtualFile[]) => {
+        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
+    }
+}
+
+export default pluginConfig

src/plugins/miaoImages/miaoImages.vue

@@ -1,9 +1,13 @@
 <template>
-    <miao-drop-handler @on-virtual-directory="handleDrop" @on-virtual-files="handleDrop">
+    <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"
+                        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>
@@ -15,19 +19,39 @@
                             <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
+                        <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" />
+                                "
+                                @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"
+                <miao-mask
+                    :show="activeImage !== undefined"
+                    @click="activeImage = undefined"
+                    class="miaoImage-mask"
+                    @wheel="handleWheel">
+                    <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"
+                        :style="{transform: `scale(${imgViewScale})`}" />
+                    <ChevronForward
+                        class="miaoImage-mask-btn miaoImage-mask-btn-forward"
                         @click="handleActiveImageForward" />
                 </miao-mask>
             </div>
@@ -41,7 +65,7 @@ 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 { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { NScrollbar } from 'naive-ui'
 import { ChevronBack, ChevronForward } from '@vicons/ionicons5'
 
@@ -77,13 +101,18 @@ const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
 const NScrollbarRef = ref()
 const rootRef = ref<any>()
 const miaoMessageRef = ref<InstanceType<typeof miaoMessageProvider>>()
-
+const imgViewScale = ref(1)
 const imageFileList = ref<VirtualFile[]>([])
+const activeImage = ref<VirtualFile>()
 
 const imageGroupList = computed(() => {
     return groupByDay(imageFileList.value)
 })
-const activeImage = ref<VirtualFile>()
+
+watch(activeImage, () => {
+    nextTick(scrollToActiveImage)
+    imgViewScale.value = 1
+})
 
 const groupByDay = (array: VirtualFile[]) => {
     const result = []
@@ -140,7 +169,6 @@ const handleActiveImageBack = (e: any) => {
             (index - 1 + imageFileList.value.length) %
                 imageFileList.value.length
         ]
-    nextTick(scrollToActiveImage)
 }
 
 const handleActiveImageForward = (e: any) => {
@@ -154,7 +182,6 @@ const handleActiveImageForward = (e: any) => {
             (index + 1 + imageFileList.value.length) %
                 imageFileList.value.length
         ]
-    nextTick(scrollToActiveImage)
 }
 
 const handleDrop = async (vItems: (VirtualFile | VirtualDirectory)[]) => {
@@ -172,10 +199,18 @@ const handleDrop = async (vItems: (VirtualFile | VirtualDirectory)[]) => {
         // @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
-    })
+    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) => {
@@ -199,15 +234,31 @@ const updateImageSrcList = async (source: VirtualFile[] | VirtualDirectory) => {
     )
 }
 
+const handleWheel = (e: WheelEvent) => {
+    if (e.deltaY < 0) {
+        imgViewScale.value *= 1.42857
+    } else {
+        imgViewScale.value /= 1.42857
+    }
+}
+
 onMounted(async () => {
-    const length_before = imageFileList.value.length;
+    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
-    })
+    miaoMessageRef.value?.message(
+        length_before === imageFileList.value.length
+            ? '未发现任何新增图片'
+            : `导入${imageFileList.value.length - length_before}张图片`,
+        {
+            type:
+                length_before === imageFileList.value.length
+                    ? 'info'
+                    : 'success',
+            timeout: 5000
+        }
+    )
 })
 </script>
 
@@ -290,6 +341,7 @@ onMounted(async () => {
 
     .miaoImage-mask {
         background-color: rgba(0, 0, 0, 0.444);
+        overflow: hidden;
     }
 
     .miaoImage-mask-active {

src/plugins/miaoMarkdown/export.ts

@@ -0,0 +1,21 @@
+import { registerComponentOption } from '@/class/PluginCenter'
+import DocumentText from '@vicons/ionicons5/es/DocumentText'
+
+const pluginConfig: registerComponentOption = {
+    key: 'miaoMarkdown',
+    name: 'markdown浏览',
+    icon: DocumentText,
+    getComponent: async () =>
+        (await import('@/plugins/miaoMarkdown/miaoMarkdown.vue')).default,
+    filter: (vDirs, vFiles) => {
+        if (vDirs.length !== 0) {
+            return false
+        }
+        if (vFiles.length !== 1) {
+            return false
+        }
+        return vFiles[0].name.endsWith('md')
+    }
+}
+
+export default pluginConfig

src/plugins/miaoMarkdown/miaoMarkdown.vue

@@ -12,6 +12,9 @@ import { onMounted, ref } from 'vue'
 import MarkdownIt from 'markdown-it'
 import useMiaoFetchApi from '@/hooks/useMiaoFetchApi';
 
+
+    const decoder = new TextDecoder('utf-8');
+
 const miaoFetchApi = useMiaoFetchApi()
 
 const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
@@ -25,7 +28,7 @@ const md = new MarkdownIt()
 
 onMounted(async () => {
   markdownSrc.value = currentFiles.value[0].url
-  const text = (await miaoFetchApi.getFile(currentFiles.value[0])).toString()
+  const text = decoder.decode(await miaoFetchApi.getFile(currentFiles.value[0]))
   renderedMarkdown.value = md.render(text)
 })
 </script>

src/plugins/miaoPDF/export.ts

@@ -0,0 +1,21 @@
+import { registerComponentOption } from '@/class/PluginCenter'
+import DocumentText from '@vicons/ionicons5/es/DocumentText'
+
+const pluginConfig: registerComponentOption = {
+    key: 'miaoPDF',
+    name: 'PDF浏览',
+    icon: DocumentText,
+    getComponent: async () =>
+        (await import('@/plugins/miaoPDF/miaoPDF.vue')).default,
+    filter: (vDirs, vFiles) => {
+        if (vDirs.length !== 0) {
+            return false
+        }
+        if (vFiles.length !== 1) {
+            return false
+        }
+        return vFiles[0].name.endsWith('pdf')
+    }
+}
+
+export default pluginConfig

src/plugins/miaoPluginTemplate/_export.ts

@@ -0,0 +1,22 @@
+// @ts-nocheck
+import { registerComponentOption } from '@/class/PluginCenter'
+
+const pluginConfig: registerComponentOption = {
+    key: 'yourPluginKey',
+    name: 'yourPluginName',
+    // icon: LogoChrome,
+    getComponent: async () => null,
+        // (await import('yourPluginPath')).default,
+    filter: (vDirs, vFiles) => {
+        if (vDirs.length !== 0) {
+            return false
+        }
+        if (vFiles.length !== 1) {
+            return false
+        }
+        return vFiles[0].name.endsWith('?')
+    },
+    disable: true
+}
+
+export default pluginConfig

src/plugins/miaoPluginTemplate/template.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="miaoCrypto-container"></div>
+</template>
+
+<script setup lang="ts">
+import { VirtualFile } from '@/class/VirtualDirectory'
+
+const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
+    required: true
+})
+
+</script>
+
+<style scoped lang="scss">
+.miaoCrypto-container {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/plugins/miaoVideoPlayer/export.ts

@@ -0,0 +1,28 @@
+import { registerComponentOption } from '@/class/PluginCenter'
+import PlayCircle from '@vicons/ionicons5/es/PlayCircle'
+
+const pluginConfig: registerComponentOption = {
+    key: 'miaoVideoPlayer',
+    name: '视频',
+    icon: PlayCircle,
+    getComponent: async () =>
+        (await import('@/plugins/miaoVideoPlayer/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']) {
+                if (i.name.endsWith(s)) {
+                    return true
+                }
+            }
+        }
+        return false
+    }
+}
+
+export default pluginConfig

vite.config.ts

@@ -59,7 +59,7 @@ export default defineConfig({
     build: {
         rollupOptions: {
             input: {
-                main: '/src/index.ts'
+                main: 'index.html'
             },
             // output: {
             //     entryFileNames: (chunkInfo) => {