feat: 重新组织代码结构

src/App.vue

@@ -9,12 +9,13 @@ import {
     EllipsisVertical,
     QrCodeOutline
 } from '@vicons/ionicons5'
-import miaoDirectory from '@/views/miaoDirectory.vue'
+// import miaoDirectory from '@/plugins/miaoDirectory/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 +27,7 @@ const modalData = shallowRef<{
 }>()
 
 const views = useVirtualPages()
+const pluginCenter = usePluginCenter()
 
 const rootDirectory = reactive(
     new VirtualDirectory({
@@ -52,7 +54,7 @@ const createView = (
 const deleteView = (index: number) => {
     views.deleteView(index)
     if (views.length === 0) {
-        createView(miaoDirectory, [rootDirectory])
+        pluginCenter.usePlugin('miaoDirectory', [rootDirectory], [])
     }
 }
 
@@ -103,9 +105,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,15 @@ 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
+}
+
 type Plugin = {
     // 用于显示的名字
     name: string
@@ -41,17 +50,7 @@ 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,

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/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/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/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/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/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) => {