feat: 为代码编辑插件增加了更多的语言支持，修复了一些bug，样式还没写。

src/class/PluginCenter.ts

@@ -20,7 +20,6 @@ export default class PluginCenter {
 
     register(key: string, plugin: plugin) {
         this.pluginsMap[key] = plugin
-        console.log(this.pluginsMap)
     }
 
     /**
@@ -29,7 +28,7 @@ export default class PluginCenter {
     registerComponent(
         key: string,
         name: string,
-        getComponent: () => any,
+        getComponent: () => Promise<any>,
         filter: (
             VDirectorys: VirtualDirectory[],
             VFiles: VirtualFile[]

src/hooks/init.ts

@@ -1,4 +1,4 @@
-// import MiaoDirectory from '@/views/miaoDirectory.vue'
+import MiaoDirectory from '@/views/miaoDirectory.vue'
 import usePluginCenter from './usePluginCenter'
 
 export default function init() {
@@ -6,7 +6,7 @@ export default function init() {
     pluginCenter.registerComponent(
         'miaoDirectory',
         '文件夹',
-        async() => (await import('@/views/miaoDirectory.vue')).default,
+        async () => MiaoDirectory,
         (vDirs, vFiles) => {
             if (vFiles.length) {
                 return false
@@ -74,7 +74,23 @@ export default function init() {
             if (vFiles.length !== 1) {
                 return false
             }
-            for (let end of ['js', 'ts', 'py', 'html', 'css']) {
+            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
                 }

src/hooks/useMiaoFetchApi.ts

@@ -77,12 +77,13 @@ const miaoFetchApi = {
         // const { baseUrl, api } = Config
         const url = vFile.url
         const retry = option?.retry ?? 0
+        const axiosOption = option?.axiosOption ?? {}
 
         const { miaoFetch } = useMiaoFetch({
             retry
         })
         const response = await miaoFetch({
-            url
+            url, ...axiosOption
         })
         return response.data
     },

src/types/fetch.ts

@@ -1,8 +1,10 @@
+import { AxiosRequestConfig } from "axios";
 import { directory, file } from "./type";
 
 export type miaoFetchConfig = {
-	retry?: number;
-};
+    retry?: number
+    axiosOption?: AxiosRequestConfig<any>
+}
 
 export type getOption = {} & miaoFetchConfig;
 

src/views/miaoCodeMirror.vue

@@ -1,5 +1,6 @@
 <template>
-    <div class="codemirror-container">
+    <div class="codemirror-container" ref="rootRef">
+        <button @click="handleSave">保存</button>
         <NScrollbar>
             <codemirror v-model="codeData" :extensions="extensions" />
         </NScrollbar>
@@ -19,21 +20,43 @@ const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
     required: true
 })
 
+let vFile: VirtualFile
+const rootRef = ref<HTMLDivElement>()
+
 const codeData = ref<string>()
-const extensions = ref<any[]>([])
+// 第一次点击保存时自动备份data，暂时懒得做
+const bakData = ref<string>()
+const extensions = ref<unknown[]>([])
+
+const handleSave = async () => {
+    if (bakData.value === codeData.value) {
+        return
+    }
+    const parentDir = vFile.parent
+    const file_bak = new File(
+        [new Blob([bakData.value ?? ''])],
+        `${vFile.name}.bak`
+    )
+    const file = new File([new Blob([codeData.value ?? ''])], vFile.name)
+    bakData.value = codeData.value
+    miaoFetchApi.upload(file, parentDir)
+    false && miaoFetchApi.upload(file_bak, parentDir)
+}
 
 const setExtensions = async (fileName: string) => {
-    const ext = fileName.split('.').pop()
+    const ext = fileName.split('.').pop()?.toLocaleLowerCase()
     switch (ext) {
         case 'js':
+        case 'jsx':
         case 'ts':
+        case 'tsx':
             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()]
+            const { sass } = await import('@codemirror/lang-sass')
+            extensions.value = [sass()]
             break
         case 'html':
             const { html } = await import('@codemirror/lang-html')
@@ -43,15 +66,51 @@ const setExtensions = async (fileName: string) => {
             const { python } = await import('@codemirror/lang-python')
             extensions.value = [python()]
             break
+        case 'go':
+            const { go } = await import('@codemirror/lang-go')
+            extensions.value = [go()]
+            break
+        case 'json':
+            const { json } = await import('@codemirror/lang-json')
+            extensions.value = [json()]
+            break
+        case 'md':
+            const { markdown } = await import('@codemirror/lang-markdown')
+            extensions.value = [markdown()]
+            break
+        case 'yaml':
+            const { yaml } = await import('@codemirror/lang-yaml')
+            extensions.value = [yaml()]
+            break
+        case 'vue':
+            const { vue } = await import('@codemirror/lang-vue')
+            extensions.value = [vue()]
+            break
+        case 'xml':
+            const { xml } = await import('@codemirror/lang-xml')
+            extensions.value = [xml()]
+            break
         default:
             extensions.value = []
     }
 }
 
 onMounted(async () => {
+    vFile = currentFiles.value[0]
     const fileName = currentFiles.value[0].name
-    codeData.value = (await miaoFetchApi.getFile(currentFiles.value[0])).toString()
+    codeData.value = (
+        await miaoFetchApi.getFile(currentFiles.value[0], {
+            axiosOption: { responseType: 'text' }
+        })
+    ).toString()
+    bakData.value = codeData.value
     await setExtensions(fileName)
+    rootRef.value?.addEventListener('keydown', (event) => {
+        if (event.ctrlKey && event.key === 's') {
+            event.preventDefault()
+            handleSave()
+        }
+    })
 })
 </script>