diff --git a/package.json b/package.json index e2020a5..526581f 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index dfdad0b..a9deccf 100644 --- a/pnpm-lock.yaml +++ b/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))': diff --git a/src/views/miaoCodeMirror.vue b/src/views/miaoCodeMirror.vue index 78482ef..42888b5 100644 --- a/src/views/miaoCodeMirror.vue +++ b/src/views/miaoCodeMirror.vue @@ -1,9 +1,18 @@ @@ -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('currentFiles', { required: true }) -let vFile: VirtualFile +const vFile = ref() const rootRef = ref() - +const _key = ref(Math.random()) const codeData = ref() // 第一次点击保存时自动备份data，暂时懒得做 const bakData = ref() const extensions = ref([]) +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); } diff --git a/vite.config.ts b/vite.config.ts index 8db9e01..74e736e 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -64,14 +64,11 @@ export default defineConfig({ output: { // 配置输出为单文件 // inlineDynamicImports: true, - // manualChunks(id) { - // if (id.includes('node_modules')) { - // return 'vendor' - // } - // if (id.includes('@codemirror')) { - // return 'codemirror' - // } - // }, + manualChunks(id) { + if (id.includes('@codemirror')) { + return id.split('@')[1].replace('+', '-') + } + } // entryFileNames: 'bundle.js', // format: 'iife', // 立即执行函数格式 // name: 'MyBundle'