feat: codemirror6

packages/effects/common-ui/package.json

@@ -20,16 +20,27 @@
     }
   },
   "dependencies": {
+    "@codemirror/lang-html": "^6.4.9",
+    "@codemirror/lang-java": "^6.0.1",
+    "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/lang-sql": "^6.7.1",
+    "@codemirror/lang-vue": "^0.1.3",
+    "@codemirror/lang-xml": "^6.1.0",
+    "@codemirror/theme-one-dark": "^6.1.2",
     "@vben-core/popup-ui": "workspace:*",
     "@vben-core/shadcn-ui": "workspace:*",
     "@vben/constants": "workspace:*",
     "@vben/hooks": "workspace:*",
     "@vben/icons": "workspace:*",
     "@vben/locales": "workspace:*",
+    "@vben/preferences": "workspace:*",
     "@vben/types": "workspace:*",
     "@vueuse/integrations": "^11.0.3",
+    "codemirror": "^6.0.1",
     "qrcode": "^1.5.4",
     "vue": "^3.5.3",
+    "vue-codemirror6": "^1.3.4",
+    "vue-json-pretty": "^2.4.0",
     "vue-router": "^4.4.3"
   },
   "devDependencies": {

packages/effects/common-ui/src/components/code-mirror/code-mirror.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, useTemplateRef, watch } from 'vue';
+import CodeMirror from 'vue-codemirror6';
+
+import { usePreferences } from '@vben/preferences';
+
+import { javascript } from '@codemirror/lang-javascript';
+import { oneDark } from '@codemirror/theme-one-dark';
+
+import { type LanguageSupport, languageSupportMap } from './data';
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * 语言
+     */
+    language: LanguageSupport;
+    /**
+     * 只读
+     */
+    readonly: boolean;
+  }>(),
+  {
+    language: 'js',
+    readonly: false,
+  },
+);
+
+const codeMirrorRef =
+  useTemplateRef<InstanceType<typeof CodeMirror>>('codeMirrorRef');
+
+const { isDark } = usePreferences();
+
+const modelValue = defineModel({ default: '', type: String });
+
+const lang = computed(() => languageSupportMap[props.language] ?? javascript());
+
+// 通过v-if 卸载挂载达到更新语言的目的
+const langChanged = ref(true);
+watch(
+  () => props.language,
+  () => {
+    langChanged.value = false;
+    nextTick(() => (langChanged.value = true));
+  },
+);
+/** 插件 */
+const extensions = [oneDark];
+</script>
+
+<template>
+  <CodeMirror
+    v-if="langChanged"
+    v-bind="$attrs"
+    ref="codeMirrorRef"
+    v-model="modelValue"
+    :dark="isDark"
+    :extensions="extensions"
+    :lang="lang"
+    :readonly="props.readonly"
+    basic
+    wrap
+  >
+    <template v-for="slotName in Object.keys($slots)" #[slotName]="scope">
+      <slot :name="slotName" v-bind="scope ?? {}"></slot>
+    </template>
+  </CodeMirror>
+</template>

packages/effects/common-ui/src/components/code-mirror/data.ts

@@ -0,0 +1,24 @@
+import { html } from '@codemirror/lang-html';
+import { java } from '@codemirror/lang-java';
+import { javascript } from '@codemirror/lang-javascript';
+import { sql } from '@codemirror/lang-sql';
+import { vue } from '@codemirror/lang-vue';
+import { xml } from '@codemirror/lang-xml';
+
+/**
+ * 可自行安装依赖并按格式配置 函数形参为配置项
+ * @see https://github.com/logue/vue-codemirror6?tab=readme-ov-file#supported-languages Language Support项
+ */
+export const languageSupportMap = {
+  html: html(),
+  java: java(),
+  js: javascript(),
+  jsx: javascript({ jsx: true }),
+  sql: sql(),
+  ts: javascript({ typescript: true }),
+  tsx: javascript({ jsx: true, typescript: true }),
+  vue: vue(),
+  xml: xml(),
+};
+
+export type LanguageSupport = keyof typeof languageSupportMap;

packages/effects/common-ui/src/components/code-mirror/index.ts

@@ -0,0 +1,2 @@
+export { default as CodeMirror } from './code-mirror.vue';
+export type { LanguageSupport } from './data';

packages/effects/common-ui/src/components/index.ts

@@ -1,5 +1,7 @@
 export * from './captcha';
+export * from './code-mirror';
 export * from './ellipsis-text';
+export * from './json-preview';
 export * from './page';
 export * from '@vben-core/popup-ui';
 

packages/effects/common-ui/src/components/json-preview/index.ts

@@ -0,0 +1 @@
+export { default as JsonPreview } from './json-preview.vue';

packages/effects/common-ui/src/components/json-preview/json-preview.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import VueJsonPretty from 'vue-json-pretty';
+
+import 'vue-json-pretty/lib/styles.css';
+
+defineProps<{ data: any }>();
+</script>
+
+<template>
+  <VueJsonPretty :data="data" :deep="3" :show-length="true" path="res" />
+</template>
+
+<style lang="less">
+html[class='dark'] {
+  .vjs-tree-node:hover {
+    background-color: #333;
+  }
+}
+</style>