diff --git a/src/App.vue b/src/App.vue index 34f382d..3edd788 100644 --- a/src/App.vue +++ b/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]) }) diff --git a/src/class/PluginCenter.ts b/src/class/PluginCenter.ts index 50c75e3..ee3813c 100644 --- a/src/class/PluginCenter.ts +++ b/src/class/PluginCenter.ts @@ -7,6 +7,15 @@ export enum PluginGroup { mainMenu = 'mainMenu' } +export interface registerComponentOption { + key: string + name: string + icon?: any + getComponent: () => Promise + 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 - group?: PluginGroup[] - filter: ( - VDirectories: VirtualDirectory[], - VFiles: VirtualFile[] - ) => boolean - }): void { + registerComponent(option: registerComponentOption): void { const { key, name, diff --git a/src/hooks/init.ts b/src/hooks/init.ts index e0fcd52..81d8a24 100644 --- a/src/hooks/init.ts +++ b/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() } diff --git a/src/hooks/init/initPlugin.ts b/src/hooks/init/initPlugin.ts new file mode 100644 index 0000000..217cc68 --- /dev/null +++ b/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 diff --git a/src/plugins/miaoCodeMirror/export.ts b/src/plugins/miaoCodeMirror/export.ts new file mode 100644 index 0000000..b58e0a6 --- /dev/null +++ b/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 diff --git a/src/views/miaoCodeMirror.vue b/src/plugins/miaoCodeMirror/miaoCodeMirror.vue similarity index 100% rename from src/views/miaoCodeMirror.vue rename to src/plugins/miaoCodeMirror/miaoCodeMirror.vue diff --git a/src/components/miaoDirectory/miaoDirectoryBottom.vue b/src/plugins/miaoDirectory/components/miaoDirectoryBottom.vue similarity index 100% rename from src/components/miaoDirectory/miaoDirectoryBottom.vue rename to src/plugins/miaoDirectory/components/miaoDirectoryBottom.vue diff --git a/src/components/miaoDirectory/miaoDirectoryItem.vue b/src/plugins/miaoDirectory/components/miaoDirectoryItem.vue similarity index 99% rename from src/components/miaoDirectory/miaoDirectoryItem.vue rename to src/plugins/miaoDirectory/components/miaoDirectoryItem.vue index bc5cdab..8de1a5f 100644 --- a/src/components/miaoDirectory/miaoDirectoryItem.vue +++ b/src/plugins/miaoDirectory/components/miaoDirectoryItem.vue @@ -19,7 +19,7 @@