diff --git a/index.html b/index.html index 6687935..cdd0520 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,9 @@ - + - MDW + MiaoDirectory
diff --git a/package.json b/package.json index 526581f..e2020a5 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,6 @@ "@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 a9deccf..dfdad0b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -41,9 +41,6 @@ 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 @@ -496,16 +493,6 @@ 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==} @@ -1596,20 +1583,6 @@ 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/public/icon.ico b/public/icon.ico new file mode 100644 index 0000000..3792ff0 Binary files /dev/null and b/public/icon.ico differ diff --git a/src/views/miaoCodeMirror.vue b/src/views/miaoCodeMirror.vue index 42888b5..89c3b0a 100644 --- a/src/views/miaoCodeMirror.vue +++ b/src/views/miaoCodeMirror.vue @@ -1,18 +1,12 @@ @@ -22,7 +16,6 @@ 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() @@ -32,7 +25,7 @@ const currentFiles = defineModel('currentFiles', { const vFile = ref() const rootRef = ref() -const _key = ref(Math.random()) +// const _key = ref(Math.random()) const codeData = ref() // 第一次点击保存时自动备份data，暂时懒得做 const bakData = ref() @@ -54,18 +47,22 @@ const handleSave = async () => { false && miaoFetchApi.upload(file_bak, parentDir) } -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 handleReset = async () => { + codeData.value = bakData.value } +// const switchTheme = async () => { +// if (!vFile.value) { +// return +// } +// theme.value = theme.value === 'dark' ? 'light' : 'dark' +// extensions.value = [ +// ...(await getLangExtensions(vFile.value?.name)), +// // theme.value === 'dark' ? +// ] +// _key.value = Math.random() +// } + const getLangExtensions = async (fileName: string) => { const ext = fileName.split('.').pop()?.toLocaleLowerCase() switch (ext) { @@ -74,7 +71,7 @@ const getLangExtensions = async (fileName: string) => { case 'ts': case 'tsx': const { javascript } = await import('@codemirror/lang-javascript') - return [javascript()] + return [javascript({ jsx: ext.substring(2, 3) === 'x', typescript: ext.substring(0, 2) === 'js', })] break case 'css': case 'scss': @@ -127,7 +124,7 @@ onMounted(async () => { }) ).toString() bakData.value = codeData.value - extensions.value = [...(await getLangExtensions(fileName)), vscodeLight] + extensions.value = [...(await getLangExtensions(fileName))] rootRef.value?.addEventListener('keydown', (event) => { if (event.ctrlKey && event.key === 's') { @@ -142,13 +139,33 @@ onMounted(async () => { .codemirror-container { width: 100%; height: 100%; - &-top { - background-color: aqua; + + .codemirror-container-top { + display: flex; + border-bottom: 1px solid #000; + } + + .codemirror-container-btn { + height: 25px; + padding: 0 10px; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + user-select: none; + background-color: none; + transition: background-color 0.25s; + + &:hover { + background-color: #e8e8e8; + } } } + .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 74e736e..fe92d62 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -64,11 +64,12 @@ export default defineConfig({ output: { // 配置输出为单文件 // inlineDynamicImports: true, - manualChunks(id) { - if (id.includes('@codemirror')) { - return id.split('@')[1].replace('+', '-') - } - } + // manualChunks(id) { + // 加了会有bug + // if (id.includes('@codemirror')) { + // return id.split('@')[1].replace('+', '-') + // } + // } // entryFileNames: 'bundle.js', // format: 'iife', // 立即执行函数格式 // name: 'MyBundle'