feat: 配置了插件动态导入，新增了一个完成度不高的代码编辑插件

src/App.vue

@@ -327,7 +327,7 @@ $tag-width: 170px;
         display: flex;
         // flex-direction: column;
         height: calc(100% - $controller-height);
-        overflow-y: overlay;
+        overflow-y: hidden;
         overflow-x: overlay;
 
         .view-container-item {

src/class/PluginCenter.ts

@@ -1,5 +1,5 @@
-import useViretualPages from "@/hooks/useVirtualPages"
-import VirtualDirectory, { VirtualFile } from "./VirtualDirectory"
+import useVirtualPages from '@/hooks/useVirtualPages'
+import VirtualDirectory, { VirtualFile } from './VirtualDirectory'
 
 type plugin = {
     // 用于显示的名字
@@ -18,7 +18,7 @@ export default class PluginCenter {
         [key: string]: plugin
     }
 
-    register(key: string, plugin: plugin){
+    register(key: string, plugin: plugin) {
         this.pluginsMap[key] = plugin
         console.log(this.pluginsMap)
     }
@@ -26,35 +26,51 @@ export default class PluginCenter {
     /**
      * 便捷地注册一个组件为插件，触发时直接用新页面打开
      */
-    registerComponent(key: string,name: string, component: any, filter:(VDirectorys: VirtualDirectory[], VFiles: VirtualFile[]) => boolean): void {
+    registerComponent(
+        key: string,
+        name: string,
+        getComponent: () => any,
+        filter: (
+            VDirectorys: VirtualDirectory[],
+            VFiles: VirtualFile[]
+        ) => boolean
+    ): void {
+        let _component: any
+        const views = useVirtualPages()
         this.register(key, {
             name,
             filter,
-            func: (VDirectorys: VirtualDirectory[], VFiles: VirtualFile[]) => {
-                if(filter(VDirectorys, VFiles) === false){
+            func: async (
+                VDirectorys: VirtualDirectory[],
+                VFiles: VirtualFile[]
+            ) => {
+                if (filter(VDirectorys, VFiles) === false) {
                     return
                 }
-                const views = useViretualPages()
-                views.push(component, VDirectorys, VFiles)
+                if (_component === undefined) _component = await getComponent()
+                views.push(_component, VDirectorys, VFiles)
             }
         })
     }
 
     getUsablePlugin(VDirectorys: VirtualDirectory[], VFiles: VirtualFile[]) {
         const usableList = []
-        for(let key of Object.keys(this.pluginsMap)) {
-            if(this.pluginsMap[key].filter(VDirectorys, VFiles)) {
+        for (let key of Object.keys(this.pluginsMap)) {
+            if (this.pluginsMap[key].filter(VDirectorys, VFiles)) {
                 usableList.push(key)
             }
         }
-        return usableList.map(key=>({
+        return usableList.map((key) => ({
             key,
             ...this.pluginsMap[key]
         }))
     }
 
-    usePlugin(key: string, VDirectorys: VirtualDirectory[], VFiles: VirtualFile[]) {
+    usePlugin(
+        key: string,
+        VDirectorys: VirtualDirectory[],
+        VFiles: VirtualFile[]
+    ) {
         this.pluginsMap[key].func(VDirectorys, VFiles)
     }
-
-}
+}

src/hooks/init.ts

@@ -1,15 +1,12 @@
-import MiaoDirectory from '@/views/miaoDirectory.vue'
+// import MiaoDirectory from '@/views/miaoDirectory.vue'
 import usePluginCenter from './usePluginCenter'
-import MiaoVideoPlayer from '@/views/miaoVideoPlayer.vue'
-import MiaoIframe from '@/views/miaoIframe.vue'
-import MiaoPDF from '@/views/miaoPDF.vue'
 
 export default function init() {
     const pluginCenter = usePluginCenter()
     pluginCenter.registerComponent(
         'miaoDirectory',
         '文件夹',
-        MiaoDirectory,
+        async() => (await import('@/views/miaoDirectory.vue')).default,
         (vDirs, vFiles) => {
             if (vFiles.length) {
                 return false
@@ -20,7 +17,7 @@ export default function init() {
     pluginCenter.registerComponent(
         'miaoVideoPlayer',
         '视频',
-        MiaoVideoPlayer,
+        async () => (await import('@/views/miaoVideoPlayer.vue')).default,
         (vDirs, vFiles) => {
             if (vDirs.length !== 0) {
                 return false
@@ -41,15 +38,21 @@ export default function init() {
     pluginCenter.registerComponent(
         'miaoIframe',
         '框架',
-        MiaoIframe,
-        () => {
-            return false
+        async () => (await import('@/views/miaoIframe.vue')).default,
+        (vDirs, vFiles) => {
+            if (vDirs.length !== 0) {
+                return false
+            }
+            if (vFiles.length !== 1) {
+                return false
+            }
+            return vFiles[0].name.endsWith('html')
         }
     )
     pluginCenter.registerComponent(
         'miaoPDF',
         'PDF浏览',
-        MiaoPDF,
+        async () => (await import('@/views/miaoPDF.vue')).default,
         (vDirs, vFiles) => {
             if (vDirs.length !== 0) {
                 return false
@@ -60,4 +63,23 @@ export default function init() {
             return vFiles[0].name.endsWith('pdf')
         }
     )
+    pluginCenter.registerComponent(
+        'miaoCodeMirror',
+        '代码编辑',
+        async () => (await import('@/views/miaoCodeMirror.vue')).default,
+        (vDirs, vFiles) => {
+            if (vDirs.length !== 0) {
+                return false
+            }
+            if (vFiles.length !== 1) {
+                return false
+            }
+            for (let end of ['js', 'ts', 'py', 'html', 'css']) {
+                if (vFiles[0].name.endsWith(end)) {
+                    return true
+                }
+            }
+            return false
+        }
+    )
 }

src/hooks/useMiaoFetchApi.ts

@@ -67,9 +67,29 @@ 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 { miaoFetch } = useMiaoFetch({
+            retry
+        })
+        const response = await miaoFetch({
+            url
+        })
+        return response.data
+    },
+
     /**
      * 上传单个文件到对应文件夹, 后续要将data类型改成buffer以支持分片上传
-		 * 正常上传文件请使用uploadQueue
+     * 正常上传文件请使用uploadQueue
      */
     upload(data: File, targetVDir: VirtualDirectory, option?: uploadOption) {
         const { baseUrl, api } = Config

src/views/miaoCodeMirror.vue

@@ -0,0 +1,63 @@
+<template>
+    <div class="codemirror-container">
+        <NScrollbar>
+            <codemirror v-model="codeData" :extensions="extensions" />
+        </NScrollbar>
+    </div>
+</template>
+
+<script setup lang="ts">
+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 codeData = ref<string>()
+const extensions = ref<any[]>([])
+
+const setExtensions = async (fileName: string) => {
+    const ext = fileName.split('.').pop()
+    switch (ext) {
+        case 'js':
+        case 'ts':
+            const { javascript } = await import('@codemirror/lang-javascript')
+            extensions.value = [javascript()]
+            break
+        case 'css':
+        case 'scss':
+            const { css } = await import('@codemirror/lang-css')
+            extensions.value = [css()]
+            break
+        case 'html':
+            const { html } = await import('@codemirror/lang-html')
+            extensions.value = [html()]
+            break
+        case 'py':
+            const { python } = await import('@codemirror/lang-python')
+            extensions.value = [python()]
+            break
+        default:
+            extensions.value = []
+    }
+}
+
+onMounted(async () => {
+    const fileName = currentFiles.value[0].name
+    codeData.value = (await miaoFetchApi.getFile(currentFiles.value[0])).toString()
+    await setExtensions(fileName)
+})
+</script>
+
+<style scoped lang="scss">
+.codemirror-container {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/views/miaoPDF.vue

@@ -13,7 +13,7 @@
                 </div>
             </div>
         </NScrollbar>
-        <div class="miao-container-loading" v-if="isLoading">{{ loadingPercent === -1 ? '缓存中' :
+        <div class="miao-container-loading" v-if="isLoading">{{ loadingPercent === -1 ? '加载插件中' :
             `渲染进度：${canvasList.length}/${pdfPageCount}` }}</div>
     </div>
 </template>
@@ -103,7 +103,7 @@ onMounted(async () => {
 .miao-container {
     width: 100%;
     height: 100%;
-    background-color: rgb(53, 53, 53);
+    background-color: rgb(201, 201, 201);
     overflow: hidden;
     display: flex;
     flex-direction: column;