feat: 新增了代码编辑插件的主题选择（当然样式还是没改）

package.json

@@ -22,6 +22,7 @@
         "@codemirror/lang-vue": "^0.1.3",
         "@codemirror/lang-xml": "^6.1.0",
         "@codemirror/lang-yaml": "^6.1.1",
+        "@uiw/codemirror-theme-vscode": "^4.23.0",
         "@vicons/ionicons5": "^0.12.0",
         "axios": "^1.7.3",
         "codemirror": "^6.0.1",

pnpm-lock.yaml

@@ -41,6 +41,9 @@ importers:
       '@codemirror/lang-yaml':
         specifier: ^6.1.1
         version: 6.1.1(@codemirror/view@6.33.0)
+      '@uiw/codemirror-theme-vscode':
+        specifier: ^4.23.0
+        version: 4.23.0(@codemirror/language@6.10.2)(@codemirror/state@6.4.1)(@codemirror/view@6.33.0)
       '@vicons/ionicons5':
         specifier: ^0.12.0
         version: 0.12.0
@@ -493,6 +496,16 @@ packages:
     resolution: {integrity: sha512-TRdIPqdsvKmPla44kVy4jv5Nt5vjMfVjbIEke1CRULIrwKNRC4lIiZvNYDJvbUMNCFPNIUcOKhXTyMJrX18IMA==}
     deprecated: This is a stub types definition. pdfjs-dist provides its own type definitions, so you do not need this installed.
 
+  '@uiw/codemirror-theme-vscode@4.23.0':
+    resolution: {integrity: sha512-zl1FD7U1b58tqlF216jYv2okvVkTe+FP1ztqO/DF129bcH99QjszkakshyfxQEvvF4ys3zyzqZ7vU3VYBir8tg==}
+
+  '@uiw/codemirror-themes@4.23.0':
+    resolution: {integrity: sha512-9fiji9xooZyBQozR1i6iTr56YP7j/Dr/VgsNWbqf5Szv+g+4WM1iZuiDGwNXmFMWX8gbkDzp6ASE21VCPSofWw==}
+    peerDependencies:
+      '@codemirror/language': '>=6.0.0'
+      '@codemirror/state': '>=6.0.0'
+      '@codemirror/view': '>=6.0.0'
+
   '@vicons/ionicons5@0.12.0':
     resolution: {integrity: sha512-Iy1EUVRpX0WWxeu1VIReR1zsZLMc4fqpt223czR+Rpnrwu7pt46nbnC2ycO7ItI/uqDLJxnbcMC7FujKs9IfFA==}
 
@@ -1583,6 +1596,20 @@ snapshots:
       - encoding
       - supports-color
 
+  '@uiw/codemirror-theme-vscode@4.23.0(@codemirror/language@6.10.2)(@codemirror/state@6.4.1)(@codemirror/view@6.33.0)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.0(@codemirror/language@6.10.2)(@codemirror/state@6.4.1)(@codemirror/view@6.33.0)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-themes@4.23.0(@codemirror/language@6.10.2)(@codemirror/state@6.4.1)(@codemirror/view@6.33.0)':
+    dependencies:
+      '@codemirror/language': 6.10.2
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.33.0
+
   '@vicons/ionicons5@0.12.0': {}
 
   '@vitejs/plugin-vue@5.1.2(vite@5.4.0(@types/node@22.1.0)(sass@1.77.8))(vue@3.4.37(typescript@5.5.4))':

src/views/miaoCodeMirror.vue

@@ -1,9 +1,18 @@
 <template>
-    <div class="codemirror-container" ref="rootRef">
+    <div
+        class="codemirror-container"
+        ref="rootRef"
+        :class="`codemirror-container-${theme}`">
+        <div class="codemirror-container-top">
             <button @click="handleSave">保存</button>
-        <NScrollbar>
+            <button @click="switchTheme">切换主题</button>
-            <codemirror v-model="codeData" :extensions="extensions" />
+        </div>
-        </NScrollbar>
+        <!-- <NScrollbar :key="_key"> -->
+            <codemirror
+                v-model="codeData"
+                :extensions="extensions"
+                :style="{ height: '100%' }" />
+        <!-- </NScrollbar> -->
     </div>
 </template>
 
@@ -13,6 +22,7 @@ import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
 import { onMounted, ref } from 'vue'
 import { Codemirror } from 'vue-codemirror'
 import { NScrollbar } from 'naive-ui'
+import { vscodeDark, vscodeLight } from '@uiw/codemirror-theme-vscode'
 
 const miaoFetchApi = useMiaoFetchApi()
 
@@ -20,30 +30,43 @@ const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
     required: true
 })
 
-let vFile: VirtualFile
+const vFile = ref<VirtualFile>()
 const rootRef = ref<HTMLDivElement>()
-
+const _key = ref(Math.random())
 const codeData = ref<string>()
 // 第一次点击保存时自动备份data，暂时懒得做
 const bakData = ref<string>()
 const extensions = ref<any[]>([])
+const theme = ref<'light' | 'dark'>('light')
 
 const handleSave = async () => {
-    if (bakData.value === codeData.value) {
+    if (bakData.value === codeData.value || !vFile.value) {
         return
     }
-    const parentDir = vFile.parent
+    const parentDir = vFile.value?.parent
     const file_bak = new File(
         [new Blob([bakData.value ?? ''])],
-        `${vFile.name}.bak`
+        `${vFile.value?.name}.bak`
     )
-    const file = new File([new Blob([codeData.value ?? ''])], vFile.name)
+    const file = new File([new Blob([codeData.value ?? ''])], vFile.value.name)
     bakData.value = codeData.value
     miaoFetchApi.upload(file, parentDir)
     false && miaoFetchApi.upload(file_bak, parentDir)
 }
 
-const setExtensions = async (fileName: string) => {
+const switchTheme = async () => {
+    if (!vFile.value) {
+        return
+    }
+    theme.value = theme.value === 'dark' ? 'light' : 'dark'
+    extensions.value = [
+        ...(await getLangExtensions(vFile.value?.name)),
+        theme.value === 'dark' ? vscodeDark : vscodeLight
+    ]
+    _key.value = Math.random()
+}
+
+const getLangExtensions = async (fileName: string) => {
     const ext = fileName.split('.').pop()?.toLocaleLowerCase()
     switch (ext) {
         case 'js':
@@ -51,52 +74,52 @@ const setExtensions = async (fileName: string) => {
         case 'ts':
         case 'tsx':
             const { javascript } = await import('@codemirror/lang-javascript')
-            extensions.value = [javascript()]
+            return [javascript()]
             break
         case 'css':
         case 'scss':
             const { sass } = await import('@codemirror/lang-sass')
-            extensions.value = [sass()]
+            return [sass()]
             break
         case 'html':
             const { html } = await import('@codemirror/lang-html')
-            extensions.value = [html()]
+            return [html()]
             break
         case 'py':
             const { python } = await import('@codemirror/lang-python')
-            extensions.value = [python()]
+            return [python()]
             break
         case 'go':
             const { go } = await import('@codemirror/lang-go')
-            extensions.value = [go()]
+            return [go()]
             break
         case 'json':
             const { json } = await import('@codemirror/lang-json')
-            extensions.value = [json()]
+            return [json()]
             break
         case 'md':
             const { markdown } = await import('@codemirror/lang-markdown')
-            extensions.value = [markdown()]
+            return [markdown()]
             break
         case 'yaml':
             const { yaml } = await import('@codemirror/lang-yaml')
-            extensions.value = [yaml()]
+            return [yaml()]
             break
         case 'vue':
             const { vue } = await import('@codemirror/lang-vue')
-            extensions.value = [vue()]
+            return [vue()]
             break
         case 'xml':
             const { xml } = await import('@codemirror/lang-xml')
-            extensions.value = [xml()]
+            return [xml()]
             break
         default:
-            extensions.value = []
+            return []
     }
 }
 
 onMounted(async () => {
-    vFile = currentFiles.value[0]
+    vFile.value = currentFiles.value[0]
     const fileName = currentFiles.value[0].name
     codeData.value = (
         await miaoFetchApi.getFile(currentFiles.value[0], {
@@ -104,7 +127,8 @@ onMounted(async () => {
         })
     ).toString()
     bakData.value = codeData.value
-    await setExtensions(fileName)
+    extensions.value = [...(await getLangExtensions(fileName)), vscodeLight]
+
     rootRef.value?.addEventListener('keydown', (event) => {
         if (event.ctrlKey && event.key === 's') {
             event.preventDefault()
@@ -118,5 +142,14 @@ onMounted(async () => {
 .codemirror-container {
     width: 100%;
     height: 100%;
+    &-top {
+        background-color: aqua;
+    }
+}
+.codemirror-container-dark {
+    background-color: rgb(30, 30, 30);
+}
+.codemirror-container-light {
+    background-color: rgb(255, 255, 255);
 }
 </style>

vite.config.ts

@@ -64,14 +64,11 @@ export default defineConfig({
             output: {
                 // 配置输出为单文件
                 // inlineDynamicImports: true,
-                // manualChunks(id) {
+                manualChunks(id) {
-                //     if (id.includes('node_modules')) {
+                    if (id.includes('@codemirror')) {
-                //         return 'vendor'
+                        return id.split('@')[1].replace('+', '-')
-                //     }
+                    }
-                //     if (id.includes('@codemirror')) {
+                }
-                //         return 'codemirror'
-                //     }
-                // },
                 // entryFileNames: 'bundle.js',
                 // format: 'iife', // 立即执行函数格式
                 // name: 'MyBundle'