539943419/miaoDirectory
1
0 Fork 0
Code Pull Requests Projects Releases 2 Activity

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

Browse Source
This commit is contained in:
539943419 committed 2024-08-29 17:58:35 +08:00
1 parent 2d401f7a17
commit f8ca6dba67
4 files changed
+91 -33
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

package.json
+1
View File
@@ -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
Generated
+27
View File
@@ -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
+58 -25
View File
@@ -1,9 +1,18 @@
<template>
<div class="codemirror-container" ref="rootRef">
<button @click="handleSave">保存</button>
<NScrollbar>
<codemirror v-model="codeData" :extensions="extensions" />
</NScrollbar>
<div
class="codemirror-container"
ref="rootRef"
:class="`codemirror-container-${theme}`">
<div class="codemirror-container-top">
<button @click="handleSave">保存</button>
<button @click="switchTheme">切换主题</button>
</div>
<!-- <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
+5 -8
View File
@@ -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'