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

package.json

@@ -10,13 +10,19 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@codemirror/lang-css": "^6.2.1",
+    "@codemirror/lang-html": "^6.4.9",
+    "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/lang-python": "^6.1.6",
     "@vicons/ionicons5": "^0.12.0",
     "axios": "^1.7.3",
+    "codemirror": "^6.0.1",
     "lodash": "^4.17.21",
     "naive-ui": "^2.39.0",
     "pdfjs-dist": "^4.5.136",
     "sass": "^1.77.8",
     "vue": "^3.4.35",
+    "vue-codemirror": "^6.1.1",
     "xgplayer": "^3.0.20",
     "xgplayer-subtitles": "^3.0.20"
   },

pnpm-lock.yaml

@@ -8,12 +8,27 @@ importers:
 
   .:
     dependencies:
+      '@codemirror/lang-css':
+        specifier: ^6.2.1
+        version: 6.2.1(@codemirror/view@6.33.0)
+      '@codemirror/lang-html':
+        specifier: ^6.4.9
+        version: 6.4.9
+      '@codemirror/lang-javascript':
+        specifier: ^6.2.2
+        version: 6.2.2
+      '@codemirror/lang-python':
+        specifier: ^6.1.6
+        version: 6.1.6(@codemirror/view@6.33.0)
       '@vicons/ionicons5':
         specifier: ^0.12.0
         version: 0.12.0
       axios:
         specifier: ^1.7.3
         version: 1.7.3
+      codemirror:
+        specifier: ^6.0.1
+        version: 6.0.1(@lezer/common@1.2.1)
       lodash:
         specifier: ^4.17.21
         version: 4.17.21
@@ -29,6 +44,9 @@ importers:
       vue:
         specifier: ^3.4.35
         version: 3.4.37(typescript@5.5.4)
+      vue-codemirror:
+        specifier: ^6.1.1
+        version: 6.1.1(codemirror@6.0.1(@lezer/common@1.2.1))(vue@3.4.37(typescript@5.5.4))
       xgplayer:
         specifier: ^3.0.20
         version: 3.0.20(core-js@3.38.1)
@@ -84,6 +102,44 @@ packages:
     resolution: {integrity: sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==}
     engines: {node: '>=6.9.0'}
 
+  '@codemirror/autocomplete@6.18.0':
+    resolution: {integrity: sha512-5DbOvBbY4qW5l57cjDsmmpDh3/TeK1vXfTHa+BUMrRzdWdcxKZ4U4V7vQaTtOpApNU4kLS4FQ6cINtLg245LXA==}
+    peerDependencies:
+      '@codemirror/language': ^6.0.0
+      '@codemirror/state': ^6.0.0
+      '@codemirror/view': ^6.0.0
+      '@lezer/common': ^1.0.0
+
+  '@codemirror/commands@6.6.0':
+    resolution: {integrity: sha512-qnY+b7j1UNcTS31Eenuc/5YJB6gQOzkUoNmJQc0rznwqSRpeaWWpjkWy2C/MPTcePpsKJEM26hXrOXl1+nceXg==}
+
+  '@codemirror/lang-css@6.2.1':
+    resolution: {integrity: sha512-/UNWDNV5Viwi/1lpr/dIXJNWiwDxpw13I4pTUAsNxZdg6E0mI2kTQb0P2iHczg1Tu+H4EBgJR+hYhKiHKko7qg==}
+
+  '@codemirror/lang-html@6.4.9':
+    resolution: {integrity: sha512-aQv37pIMSlueybId/2PVSP6NPnmurFDVmZwzc7jszd2KAF8qd4VBbvNYPXWQq90WIARjsdVkPbw29pszmHws3Q==}
+
+  '@codemirror/lang-javascript@6.2.2':
+    resolution: {integrity: sha512-VGQfY+FCc285AhWuwjYxQyUQcYurWlxdKYT4bqwr3Twnd5wP5WSeu52t4tvvuWmljT4EmgEgZCqSieokhtY8hg==}
+
+  '@codemirror/lang-python@6.1.6':
+    resolution: {integrity: sha512-ai+01WfZhWqM92UqjnvorkxosZ2aq2u28kHvr+N3gu012XqY2CThD67JPMHnGceRfXPDBmn1HnyqowdpF57bNg==}
+
+  '@codemirror/language@6.10.2':
+    resolution: {integrity: sha512-kgbTYTo0Au6dCSc/TFy7fK3fpJmgHDv1sG1KNQKJXVi+xBTEeBPY/M30YXiU6mMXeH+YIDLsbrT4ZwNRdtF+SA==}
+
+  '@codemirror/lint@6.8.1':
+    resolution: {integrity: sha512-IZ0Y7S4/bpaunwggW2jYqwLuHj0QtESf5xcROewY6+lDNwZ/NzvR4t+vpYgg9m7V8UXLPYqG+lu3DF470E5Oxg==}
+
+  '@codemirror/search@6.5.6':
+    resolution: {integrity: sha512-rpMgcsh7o0GuCDUXKPvww+muLA1pDJaFrpq/CCHtpQJYz8xopu4D1hPcKRoDD0YlF8gZaqTNIRa4VRBWyhyy7Q==}
+
+  '@codemirror/state@6.4.1':
+    resolution: {integrity: sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==}
+
+  '@codemirror/view@6.33.0':
+    resolution: {integrity: sha512-AroaR3BvnjRW8fiZBalAaK+ZzB5usGgI014YKElYZvQdNH5ZIidHlO+cyf/2rWzyBFRkvG6VhiXeAEbC53P2YQ==}
+
   '@css-render/plugin-bem@0.15.14':
     resolution: {integrity: sha512-QK513CJ7yEQxm/P3EwsI+d+ha8kSOcjGvD6SevM41neEMxdULE+18iuQK6tEChAWMOQNQPLG/Rw3Khb69r5neg==}
     peerDependencies:
@@ -241,6 +297,27 @@ packages:
   '@juggle/resize-observer@3.4.0':
     resolution: {integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==}
 
+  '@lezer/common@1.2.1':
+    resolution: {integrity: sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==}
+
+  '@lezer/css@1.1.8':
+    resolution: {integrity: sha512-7JhxupKuMBaWQKjQoLtzhGj83DdnZY9MckEOG5+/iLKNK2ZJqKc6hf6uc0HjwCX7Qlok44jBNqZhHKDhEhZYLA==}
+
+  '@lezer/highlight@1.2.1':
+    resolution: {integrity: sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==}
+
+  '@lezer/html@1.3.10':
+    resolution: {integrity: sha512-dqpT8nISx/p9Do3AchvYGV3qYc4/rKr3IBZxlHmpIKam56P47RSHkSF5f13Vu9hebS1jM0HmtJIwLbWz1VIY6w==}
+
+  '@lezer/javascript@1.4.17':
+    resolution: {integrity: sha512-bYW4ctpyGK+JMumDApeUzuIezX01H76R1foD6LcRX224FWfyYit/HYxiPGDjXXe/wQWASjCvVGoukTH68+0HIA==}
+
+  '@lezer/lr@1.4.2':
+    resolution: {integrity: sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==}
+
+  '@lezer/python@1.1.14':
+    resolution: {integrity: sha512-ykDOb2Ti24n76PJsSa4ZoDF0zH12BSw1LGfQXCYJhJyOGiFTfGaX0Du66Ze72R+u/P35U+O6I9m8TFXov1JzsA==}
+
   '@mapbox/node-pre-gyp@1.0.11':
     resolution: {integrity: sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==}
     hasBin: true
@@ -473,6 +550,9 @@ packages:
     resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
     engines: {node: '>=10'}
 
+  codemirror@6.0.1:
+    resolution: {integrity: sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==}
+
   color-support@1.1.3:
     resolution: {integrity: sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==}
     hasBin: true
@@ -493,6 +573,9 @@ packages:
   core-js@3.38.1:
     resolution: {integrity: sha512-OP35aUorbU3Zvlx7pjsFdu1rGNnD4pgw/CWoYzRY3t2EzoVT7shKHY1dlAy3f41cGIO7ZDPQimhGFTlEYkG/Hw==}
 
+  crelt@1.0.6:
+    resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
+
   css-render@0.15.14:
     resolution: {integrity: sha512-9nF4PdUle+5ta4W5SyZdLCCmFd37uVimSjg1evcTqKJCyvCEEj12WKzOSBNak6r4im4J4iYXKH1OWpUV5LBYFg==}
 
@@ -881,6 +964,9 @@ packages:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
 
+  style-mod@4.1.2:
+    resolution: {integrity: sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==}
+
   tar@6.2.1:
     resolution: {integrity: sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==}
     engines: {node: '>=10'}
@@ -964,6 +1050,12 @@ packages:
   vscode-uri@3.0.8:
     resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==}
 
+  vue-codemirror@6.1.1:
+    resolution: {integrity: sha512-rTAYo44owd282yVxKtJtnOi7ERAcXTeviwoPXjIc6K/IQYUsoDkzPvw/JDFtSP6T7Cz/2g3EHaEyeyaQCKoDMg==}
+    peerDependencies:
+      codemirror: 6.x
+      vue: 3.x
+
   vue-tsc@2.0.29:
     resolution: {integrity: sha512-MHhsfyxO3mYShZCGYNziSbc63x7cQ5g9kvijV7dRe1TTXBRLxXyL0FnXWpUF1xII2mJ86mwYpYsUmMwkmerq7Q==}
     hasBin: true
@@ -983,6 +1075,9 @@ packages:
     peerDependencies:
       vue: ^3.0.11
 
+  w3c-keyname@2.2.8:
+    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
+
   webidl-conversions@3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
 
@@ -1028,6 +1123,91 @@ snapshots:
       '@babel/helper-validator-identifier': 7.24.7
       to-fast-properties: 2.0.0
 
+  '@codemirror/autocomplete@6.18.0(@codemirror/language@6.10.2)(@codemirror/state@6.4.1)(@codemirror/view@6.33.0)(@lezer/common@1.2.1)':
+    dependencies:
+      '@codemirror/language': 6.10.2
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.33.0
+      '@lezer/common': 1.2.1
+
+  '@codemirror/commands@6.6.0':
+    dependencies:
+      '@codemirror/language': 6.10.2
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.33.0
+      '@lezer/common': 1.2.1
+
+  '@codemirror/lang-css@6.2.1(@codemirror/view@6.33.0)':
+    dependencies:
+      '@codemirror/autocomplete': 6.18.0(@codemirror/language@6.10.2)(@codemirror/state@6.4.1)(@codemirror/view@6.33.0)(@lezer/common@1.2.1)
+      '@codemirror/language': 6.10.2
+      '@codemirror/state': 6.4.1
+      '@lezer/common': 1.2.1
+      '@lezer/css': 1.1.8
+    transitivePeerDependencies:
+      - '@codemirror/view'
+
+  '@codemirror/lang-html@6.4.9':
+    dependencies:
+      '@codemirror/autocomplete': 6.18.0(@codemirror/language@6.10.2)(@codemirror/state@6.4.1)(@codemirror/view@6.33.0)(@lezer/common@1.2.1)
+      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.33.0)
+      '@codemirror/lang-javascript': 6.2.2
+      '@codemirror/language': 6.10.2
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.33.0
+      '@lezer/common': 1.2.1
+      '@lezer/css': 1.1.8
+      '@lezer/html': 1.3.10
+
+  '@codemirror/lang-javascript@6.2.2':
+    dependencies:
+      '@codemirror/autocomplete': 6.18.0(@codemirror/language@6.10.2)(@codemirror/state@6.4.1)(@codemirror/view@6.33.0)(@lezer/common@1.2.1)
+      '@codemirror/language': 6.10.2
+      '@codemirror/lint': 6.8.1
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.33.0
+      '@lezer/common': 1.2.1
+      '@lezer/javascript': 1.4.17
+
+  '@codemirror/lang-python@6.1.6(@codemirror/view@6.33.0)':
+    dependencies:
+      '@codemirror/autocomplete': 6.18.0(@codemirror/language@6.10.2)(@codemirror/state@6.4.1)(@codemirror/view@6.33.0)(@lezer/common@1.2.1)
+      '@codemirror/language': 6.10.2
+      '@codemirror/state': 6.4.1
+      '@lezer/common': 1.2.1
+      '@lezer/python': 1.1.14
+    transitivePeerDependencies:
+      - '@codemirror/view'
+
+  '@codemirror/language@6.10.2':
+    dependencies:
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.33.0
+      '@lezer/common': 1.2.1
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+      style-mod: 4.1.2
+
+  '@codemirror/lint@6.8.1':
+    dependencies:
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.33.0
+      crelt: 1.0.6
+
+  '@codemirror/search@6.5.6':
+    dependencies:
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.33.0
+      crelt: 1.0.6
+
+  '@codemirror/state@6.4.1': {}
+
+  '@codemirror/view@6.33.0':
+    dependencies:
+      '@codemirror/state': 6.4.1
+      style-mod: 4.1.2
+      w3c-keyname: 2.2.8
+
   '@css-render/plugin-bem@0.15.14(css-render@0.15.14)':
     dependencies:
       css-render: 0.15.14
@@ -1111,6 +1291,40 @@ snapshots:
 
   '@juggle/resize-observer@3.4.0': {}
 
+  '@lezer/common@1.2.1': {}
+
+  '@lezer/css@1.1.8':
+    dependencies:
+      '@lezer/common': 1.2.1
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
+  '@lezer/highlight@1.2.1':
+    dependencies:
+      '@lezer/common': 1.2.1
+
+  '@lezer/html@1.3.10':
+    dependencies:
+      '@lezer/common': 1.2.1
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
+  '@lezer/javascript@1.4.17':
+    dependencies:
+      '@lezer/common': 1.2.1
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
+  '@lezer/lr@1.4.2':
+    dependencies:
+      '@lezer/common': 1.2.1
+
+  '@lezer/python@1.1.14':
+    dependencies:
+      '@lezer/common': 1.2.1
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
   '@mapbox/node-pre-gyp@1.0.11':
     dependencies:
       detect-libc: 2.0.3
@@ -1369,6 +1583,18 @@ snapshots:
   chownr@2.0.0:
     optional: true
 
+  codemirror@6.0.1(@lezer/common@1.2.1):
+    dependencies:
+      '@codemirror/autocomplete': 6.18.0(@codemirror/language@6.10.2)(@codemirror/state@6.4.1)(@codemirror/view@6.33.0)(@lezer/common@1.2.1)
+      '@codemirror/commands': 6.6.0
+      '@codemirror/language': 6.10.2
+      '@codemirror/lint': 6.8.1
+      '@codemirror/search': 6.5.6
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.33.0
+    transitivePeerDependencies:
+      - '@lezer/common'
+
   color-support@1.1.3:
     optional: true
 
@@ -1386,6 +1612,8 @@ snapshots:
 
   core-js@3.38.1: {}
 
+  crelt@1.0.6: {}
+
   css-render@0.15.14:
     dependencies:
       '@emotion/hash': 0.8.0
@@ -1833,6 +2061,8 @@ snapshots:
       ansi-regex: 5.0.1
     optional: true
 
+  style-mod@4.1.2: {}
+
   tar@6.2.1:
     dependencies:
       chownr: 2.0.0
@@ -1891,6 +2121,15 @@ snapshots:
 
   vscode-uri@3.0.8: {}
 
+  vue-codemirror@6.1.1(codemirror@6.0.1(@lezer/common@1.2.1))(vue@3.4.37(typescript@5.5.4)):
+    dependencies:
+      '@codemirror/commands': 6.6.0
+      '@codemirror/language': 6.10.2
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.33.0
+      codemirror: 6.0.1(@lezer/common@1.2.1)
+      vue: 3.4.37(typescript@5.5.4)
+
   vue-tsc@2.0.29(typescript@5.5.4):
     dependencies:
       '@volar/typescript': 2.4.0-alpha.18
@@ -1919,6 +2158,8 @@ snapshots:
       vooks: 0.2.12(vue@3.4.37(typescript@5.5.4))
       vue: 3.4.37(typescript@5.5.4)
 
+  w3c-keyname@2.2.8: {}
+
   webidl-conversions@3.0.1:
     optional: true
 

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 useVirtualPages from '@/hooks/useVirtualPages'
-import VirtualDirectory, { VirtualFile } from "./VirtualDirectory"
+import VirtualDirectory, { VirtualFile } from './VirtualDirectory'
 
 type plugin = {
     // 用于显示的名字
@@ -26,16 +26,29 @@ 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[]) => {
+            func: async (
+                VDirectorys: VirtualDirectory[],
+                VFiles: VirtualFile[]
+            ) => {
                 if (filter(VDirectorys, VFiles) === false) {
                     return
                 }
-                const views = useViretualPages()
+                if (_component === undefined) _component = await getComponent()
-                views.push(component, VDirectorys, VFiles)
+                views.push(_component, VDirectorys, VFiles)
             }
         })
     }
@@ -47,14 +60,17 @@ export default class PluginCenter {
                 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,
+        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,6 +67,26 @@ 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

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;

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')
@@ -59,11 +63,18 @@ export default defineConfig({
             },
             output: {
                 // 配置输出为单文件
-                inlineDynamicImports: true,
+                // inlineDynamicImports: true,
-                manualChunks: undefined,
+                // manualChunks(id) {
-                entryFileNames: 'bundle.js',
+                //     if (id.includes('node_modules')) {
-                format: 'iife', // 立即执行函数格式
+                //         return 'vendor'
-                name: 'MyBundle'
+                //     }
+                //     if (id.includes('@codemirror')) {
+                //         return 'codemirror'
+                //     }
+                // },
+                // entryFileNames: 'bundle.js',
+                // format: 'iife', // 立即执行函数格式
+                // name: 'MyBundle'
             }
         }
     }