diff --git a/package.json b/package.json index 4b2bd1e..2eb0711 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@codemirror/lang-javascript": "^6.2.1", "@codemirror/lang-vue": "^0.1.2", "@codemirror/theme-one-dark": "^6.1.2", + "@ddietr/codemirror-themes": "^1.4.2", "@vueuse/components": "^10.5.0", "@vueuse/core": "^10.5.0", "@wangeditor/editor": "^5.1.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e45dc53..0803522 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -23,6 +23,9 @@ dependencies: '@codemirror/theme-one-dark': specifier: ^6.1.2 version: 6.1.2 + '@ddietr/codemirror-themes': + specifier: ^1.4.2 + version: 1.4.2 '@vueuse/components': specifier: ^10.5.0 version: 10.9.0(vue@3.4.21) @@ -855,6 +858,15 @@ packages: w3c-keyname: 2.2.8 dev: false + /@ddietr/codemirror-themes@1.4.2: + resolution: {integrity: sha512-8U3H3lmtmSWLD5VRlt7jf2HW62URnwgPxjZZDYjBX5EtMpgZ2QnqiIYrNzdQPPjJngT9D43gls3+JlekCBmrfw==} + dependencies: + '@codemirror/language': 6.10.1 + '@codemirror/state': 6.4.1 + '@codemirror/view': 6.26.0 + '@lezer/highlight': 1.2.0 + dev: false + /@esbuild/aix-ppc64@0.19.12: resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==} engines: {node: '>=12'} @@ -6354,4 +6366,4 @@ packages: resolution: {integrity: sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==} dependencies: tslib: 2.3.0 - dev: false \ No newline at end of file + dev: false diff --git a/src/components/GiCodeView/index.vue b/src/components/GiCodeView/index.vue index 7b61cd1..12ed864 100644 --- a/src/components/GiCodeView/index.vue +++ b/src/components/GiCodeView/index.vue @@ -13,24 +13,22 @@ import CodeMirror from 'vue-codemirror6' import { javascript } from '@codemirror/lang-javascript' import { vue } from '@codemirror/lang-vue' +import { githubLight } from '@ddietr/codemirror-themes/github-light' import { oneDark } from '@codemirror/theme-one-dark' +import { useAppStore } from '@/stores' + +const appStore = useAppStore() +const isDark = computed(() => appStore.theme === 'dark') interface Props { type?: 'javascript' | 'vue' codeJson: string } - const props = withDefaults(defineProps(), { type: 'javascript', codeJson: '' }) -const visible = ref(false) -const open = () => { - visible.value = true -} -defineExpose({ open }) - const defaultConfig = { tabSize: 2, basic: true, @@ -40,8 +38,14 @@ const defaultConfig = { const config = defaultConfig const codeValue = computed(() => props.codeJson) +const visible = ref(false) +// 打开 +const open = () => { + visible.value = true +} + const extensions = computed(() => { - const arr = [oneDark] + const arr = [isDark.value ? oneDark : githubLight] if (props.type === 'javascript') { arr.push(javascript()) } @@ -50,6 +54,8 @@ const extensions = computed(() => { } return arr }) + +defineExpose({ open })