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

2024-08-29 15:19:36 +08:00
1 parent 86b3a02237
commit ef5a8f1a9e
@@ -10,10 +10,17 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "@codemirror/lang-css": "^6.2.1",
+    "@codemirror/lang-go": "^6.0.1",
    "@codemirror/lang-html": "^6.4.9",
    "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-markdown": "^6.2.5",
    "@codemirror/lang-python": "^6.1.6",
+    "@codemirror/lang-sass": "^6.0.2",
+    "@codemirror/lang-sql": "^6.7.1",
+    "@codemirror/lang-vue": "^0.1.3",
+    "@codemirror/lang-xml": "^6.1.0",
+    "@codemirror/lang-yaml": "^6.1.1",
    "@vicons/ionicons5": "^0.12.0",
    "axios": "^1.7.3",
    "codemirror": "^6.0.1",
@@ -8,18 +8,39 @@ importers:

  .:
    dependencies:
-      '@codemirror/lang-css':
-        specifier: ^6.2.1
-        version: 6.2.1(@codemirror/view@6.33.0)
+      '@codemirror/lang-go':
+        specifier: ^6.0.1
+        version: 6.0.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-json':
+        specifier: ^6.0.1
+        version: 6.0.1
+      '@codemirror/lang-markdown':
+        specifier: ^6.2.5
+        version: 6.2.5
      '@codemirror/lang-python':
        specifier: ^6.1.6
        version: 6.1.6(@codemirror/view@6.33.0)
+      '@codemirror/lang-sass':
+        specifier: ^6.0.2
+        version: 6.0.2(@codemirror/view@6.33.0)
+      '@codemirror/lang-sql':
+        specifier: ^6.7.1
+        version: 6.7.1(@codemirror/view@6.33.0)
+      '@codemirror/lang-vue':
+        specifier: ^0.1.3
+        version: 0.1.3
+      '@codemirror/lang-xml':
+        specifier: ^6.1.0
+        version: 6.1.0
+      '@codemirror/lang-yaml':
+        specifier: ^6.1.1
+        version: 6.1.1(@codemirror/view@6.33.0)
      '@vicons/ionicons5':
        specifier: ^0.12.0
        version: 0.12.0
@@ -116,15 +137,39 @@ packages:
  '@codemirror/lang-css@6.2.1':
    resolution: {integrity: sha512-/UNWDNV5Viwi/1lpr/dIXJNWiwDxpw13I4pTUAsNxZdg6E0mI2kTQb0P2iHczg1Tu+H4EBgJR+hYhKiHKko7qg==}

+  '@codemirror/lang-go@6.0.1':
+    resolution: {integrity: sha512-7fNvbyNylvqCphW9HD6WFnRpcDjr+KXX/FgqXy5H5ZS0eC5edDljukm/yNgYkwTsgp2busdod50AOTIy6Jikfg==}
+
  '@codemirror/lang-html@6.4.9':
    resolution: {integrity: sha512-aQv37pIMSlueybId/2PVSP6NPnmurFDVmZwzc7jszd2KAF8qd4VBbvNYPXWQq90WIARjsdVkPbw29pszmHws3Q==}

  '@codemirror/lang-javascript@6.2.2':
    resolution: {integrity: sha512-VGQfY+FCc285AhWuwjYxQyUQcYurWlxdKYT4bqwr3Twnd5wP5WSeu52t4tvvuWmljT4EmgEgZCqSieokhtY8hg==}

+  '@codemirror/lang-json@6.0.1':
+    resolution: {integrity: sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==}
+
+  '@codemirror/lang-markdown@6.2.5':
+    resolution: {integrity: sha512-Hgke565YcO4fd9pe2uLYxnMufHO5rQwRr+AAhFq8ABuhkrjyX8R5p5s+hZUTdV60O0dMRjxKhBLxz8pu/MkUVA==}
+
  '@codemirror/lang-python@6.1.6':
    resolution: {integrity: sha512-ai+01WfZhWqM92UqjnvorkxosZ2aq2u28kHvr+N3gu012XqY2CThD67JPMHnGceRfXPDBmn1HnyqowdpF57bNg==}

+  '@codemirror/lang-sass@6.0.2':
+    resolution: {integrity: sha512-l/bdzIABvnTo1nzdY6U+kPAC51czYQcOErfzQ9zSm9D8GmNPD0WTW8st/CJwBTPLO8jlrbyvlSEcN20dc4iL0Q==}
+
+  '@codemirror/lang-sql@6.7.1':
+    resolution: {integrity: sha512-flQa7zemrLKk0TIrOJnpeyH/b29BcVybtsTeZMgAo40O6kGbrnUSCgwI3TF5iJY3O9VXJKKCA+i0CBVvDfr88w==}
+
+  '@codemirror/lang-vue@0.1.3':
+    resolution: {integrity: sha512-QSKdtYTDRhEHCfo5zOShzxCmqKJvgGrZwDQSdbvCRJ5pRLWBS7pD/8e/tH44aVQT6FKm0t6RVNoSUWHOI5vNug==}
+
+  '@codemirror/lang-xml@6.1.0':
+    resolution: {integrity: sha512-3z0blhicHLfwi2UgkZYRPioSgVTo9PV5GP5ducFH6FaHy0IAJRg+ixj5gTR1gnT/glAIC8xv4w2VL1LoZfs+Jg==}
+
+  '@codemirror/lang-yaml@6.1.1':
+    resolution: {integrity: sha512-HV2NzbK9bbVnjWxwObuZh5FuPCowx51mEfoFT9y3y+M37fA3+pbxx4I7uePuygFzDsAmCTwQSc/kXh/flab4uw==}
+
  '@codemirror/language@6.10.2':
    resolution: {integrity: sha512-kgbTYTo0Au6dCSc/TFy7fK3fpJmgHDv1sG1KNQKJXVi+xBTEeBPY/M30YXiU6mMXeH+YIDLsbrT4ZwNRdtF+SA==}

@@ -303,6 +348,9 @@ packages:
  '@lezer/css@1.1.8':
    resolution: {integrity: sha512-7JhxupKuMBaWQKjQoLtzhGj83DdnZY9MckEOG5+/iLKNK2ZJqKc6hf6uc0HjwCX7Qlok44jBNqZhHKDhEhZYLA==}

+  '@lezer/go@1.0.0':
+    resolution: {integrity: sha512-co9JfT3QqX1YkrMmourYw2Z8meGC50Ko4d54QEcQbEYpvdUvN4yb0NBZdn/9ertgvjsySxHsKzH3lbm3vqJ4Jw==}
+
  '@lezer/highlight@1.2.1':
    resolution: {integrity: sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==}

@@ -312,12 +360,27 @@ packages:
  '@lezer/javascript@1.4.17':
    resolution: {integrity: sha512-bYW4ctpyGK+JMumDApeUzuIezX01H76R1foD6LcRX224FWfyYit/HYxiPGDjXXe/wQWASjCvVGoukTH68+0HIA==}

+  '@lezer/json@1.0.2':
+    resolution: {integrity: sha512-xHT2P4S5eeCYECyKNPhr4cbEL9tc8w83SPwRC373o9uEdrvGKTZoJVAGxpOsZckMlEh9W23Pc72ew918RWQOBQ==}
+
  '@lezer/lr@1.4.2':
    resolution: {integrity: sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==}

+  '@lezer/markdown@1.3.0':
+    resolution: {integrity: sha512-ErbEQ15eowmJUyT095e9NJc3BI9yZ894fjSDtHftD0InkfUBGgnKSU6dvan9jqsZuNHg2+ag/1oyDRxNsENupQ==}
+
  '@lezer/python@1.1.14':
    resolution: {integrity: sha512-ykDOb2Ti24n76PJsSa4ZoDF0zH12BSw1LGfQXCYJhJyOGiFTfGaX0Du66Ze72R+u/P35U+O6I9m8TFXov1JzsA==}

+  '@lezer/sass@1.0.6':
+    resolution: {integrity: sha512-w/RCO2dIzZH1To8p+xjs8cE+yfgGus8NZ/dXeWl/QzHyr+TeBs71qiE70KPImEwvTsmEjoWh0A5SxMzKd5BWBQ==}
+
+  '@lezer/xml@1.0.5':
+    resolution: {integrity: sha512-VFouqOzmUWfIg+tfmpcdV33ewtK+NSwd4ngSe1aG7HFb4BN0ExyY1b8msp+ndFrnlG4V4iC8yXacjFtrwERnaw==}
+
+  '@lezer/yaml@1.0.3':
+    resolution: {integrity: sha512-GuBLekbw9jDBDhGur82nuwkxKQ+a3W5H0GfaAthDXcAu+XdpS43VlnxA9E9hllkpSP5ellRDKjLLj7Lu9Wr6xA==}
+
  '@mapbox/node-pre-gyp@1.0.11':
    resolution: {integrity: sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==}
    hasBin: true
@@ -1147,6 +1210,16 @@ snapshots:
    transitivePeerDependencies:
      - '@codemirror/view'

+  '@codemirror/lang-go@6.0.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/go': 1.0.0
+    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)
@@ -1169,6 +1242,21 @@ snapshots:
      '@lezer/common': 1.2.1
      '@lezer/javascript': 1.4.17

+  '@codemirror/lang-json@6.0.1':
+    dependencies:
+      '@codemirror/language': 6.10.2
+      '@lezer/json': 1.0.2
+
+  '@codemirror/lang-markdown@6.2.5':
+    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-html': 6.4.9
+      '@codemirror/language': 6.10.2
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.33.0
+      '@lezer/common': 1.2.1
+      '@lezer/markdown': 1.3.0
+
  '@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)
@@ -1179,6 +1267,56 @@ snapshots:
    transitivePeerDependencies:
      - '@codemirror/view'

+  '@codemirror/lang-sass@6.0.2(@codemirror/view@6.33.0)':
+    dependencies:
+      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.33.0)
+      '@codemirror/language': 6.10.2
+      '@codemirror/state': 6.4.1
+      '@lezer/common': 1.2.1
+      '@lezer/sass': 1.0.6
+    transitivePeerDependencies:
+      - '@codemirror/view'
+
+  '@codemirror/lang-sql@6.7.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/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+    transitivePeerDependencies:
+      - '@codemirror/view'
+
+  '@codemirror/lang-vue@0.1.3':
+    dependencies:
+      '@codemirror/lang-html': 6.4.9
+      '@codemirror/lang-javascript': 6.2.2
+      '@codemirror/language': 6.10.2
+      '@lezer/common': 1.2.1
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
+  '@codemirror/lang-xml@6.1.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
+      '@codemirror/view': 6.33.0
+      '@lezer/common': 1.2.1
+      '@lezer/xml': 1.0.5
+
+  '@codemirror/lang-yaml@6.1.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/highlight': 1.2.1
+      '@lezer/yaml': 1.0.3
+    transitivePeerDependencies:
+      - '@codemirror/view'
+
  '@codemirror/language@6.10.2':
    dependencies:
      '@codemirror/state': 6.4.1
@@ -1299,6 +1437,12 @@ snapshots:
      '@lezer/highlight': 1.2.1
      '@lezer/lr': 1.4.2

+  '@lezer/go@1.0.0':
+    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
@@ -1315,16 +1459,45 @@ snapshots:
      '@lezer/highlight': 1.2.1
      '@lezer/lr': 1.4.2

+  '@lezer/json@1.0.2':
+    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/markdown@1.3.0':
+    dependencies:
+      '@lezer/common': 1.2.1
+      '@lezer/highlight': 1.2.1
+
  '@lezer/python@1.1.14':
    dependencies:
      '@lezer/common': 1.2.1
      '@lezer/highlight': 1.2.1
      '@lezer/lr': 1.4.2

+  '@lezer/sass@1.0.6':
+    dependencies:
+      '@lezer/common': 1.2.1
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
+  '@lezer/xml@1.0.5':
+    dependencies:
+      '@lezer/common': 1.2.1
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
+  '@lezer/yaml@1.0.3':
+    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
@@ -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[]
@@ -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
                }
@@ -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
    },
@@ -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;

@@ -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>