feat: code view组件

package.json

@@ -23,7 +23,9 @@
   },
   "dependencies": {
     "@arco-design/color": "^0.4.0",
+    "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-vue": "^0.1.3",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@visactor/vchart": "^1.11.0",
     "@visactor/vchart-arco-theme": "^1.11.0",

pnpm-lock.yaml

@@ -11,9 +11,15 @@ importers:
       '@arco-design/color':
         specifier: ^0.4.0
         version: 0.4.0
+      '@codemirror/lang-javascript':
+        specifier: ^6.2.2
+        version: 6.2.2
       '@codemirror/lang-json':
         specifier: ^6.0.1
         version: 6.0.1
+      '@codemirror/lang-vue':
+        specifier: ^0.1.3
+        version: 0.1.3
       '@codemirror/theme-one-dark':
         specifier: ^6.1.2
         version: 6.1.2
@@ -233,9 +239,21 @@ packages:
   '@codemirror/commands@6.5.0':
     resolution: {integrity: sha512-rK+sj4fCAN/QfcY9BEzYMgp4wwL/q5aj/VfNSoH1RWPF9XS/dUwBkvlL3hpWgEjOqlpdN1uLC9UkjJ4tmyjJYg==}
 
+  '@codemirror/lang-css@6.2.1':
+    resolution: {integrity: sha512-/UNWDNV5Viwi/1lpr/dIXJNWiwDxpw13I4pTUAsNxZdg6E0mI2kTQb0P2iHczg1Tu+H4EBgJR+hYhKiHKko7qg==}
+
+  '@codemirror/lang-html@6.4.9':
+    resolution: {integrity: sha512-aQv37pIMSlueybId/2PVSP6NPnmurFDVmZwzc7jszd2KAF8qd4VBbvNYPXWQq90WIARjsdVkPbw29pszmHws3Q==}
+
+  '@codemirror/lang-javascript@6.2.2':
+    resolution: {integrity: sha512-VGQfY+FCc285AhWuwjYxQyUQcYurWlxdKYT4bqwr3Twnd5wP5WSeu52t4tvvuWmljT4EmgEgZCqSieokhtY8hg==}
+
   '@codemirror/lang-json@6.0.1':
     resolution: {integrity: sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==}
 
+  '@codemirror/lang-vue@0.1.3':
+    resolution: {integrity: sha512-QSKdtYTDRhEHCfo5zOShzxCmqKJvgGrZwDQSdbvCRJ5pRLWBS7pD/8e/tH44aVQT6FKm0t6RVNoSUWHOI5vNug==}
+
   '@codemirror/language@6.10.2':
     resolution: {integrity: sha512-kgbTYTo0Au6dCSc/TFy7fK3fpJmgHDv1sG1KNQKJXVi+xBTEeBPY/M30YXiU6mMXeH+YIDLsbrT4ZwNRdtF+SA==}
 
@@ -760,9 +778,18 @@ packages:
   '@lezer/common@1.2.1':
     resolution: {integrity: sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==}
 
+  '@lezer/css@1.1.8':
+    resolution: {integrity: sha512-7JhxupKuMBaWQKjQoLtzhGj83DdnZY9MckEOG5+/iLKNK2ZJqKc6hf6uc0HjwCX7Qlok44jBNqZhHKDhEhZYLA==}
+
   '@lezer/highlight@1.2.0':
     resolution: {integrity: sha512-WrS5Mw51sGrpqjlh3d4/fOwpEV2Hd3YOkp9DBt4k8XZQcoTHZFB7sx030A6OcahF4J1nDQAa3jXlTVVYH50IFA==}
 
+  '@lezer/html@1.3.10':
+    resolution: {integrity: sha512-dqpT8nISx/p9Do3AchvYGV3qYc4/rKr3IBZxlHmpIKam56P47RSHkSF5f13Vu9hebS1jM0HmtJIwLbWz1VIY6w==}
+
+  '@lezer/javascript@1.4.16':
+    resolution: {integrity: sha512-84UXR3N7s11MPQHWgMnjb9571fr19MmXnr5zTv2XX0gHXXUvW3uPJ8GCjKrfTXmSdfktjRK0ayKklw+A13rk4g==}
+
   '@lezer/json@1.0.2':
     resolution: {integrity: sha512-xHT2P4S5eeCYECyKNPhr4cbEL9tc8w83SPwRC373o9uEdrvGKTZoJVAGxpOsZckMlEh9W23Pc72ew918RWQOBQ==}
 
@@ -3576,11 +3603,52 @@ snapshots:
       '@codemirror/view': 6.26.3
       '@lezer/common': 1.2.1
 
+  '@codemirror/lang-css@6.2.1(@codemirror/view@6.26.3)':
+    dependencies:
+      '@codemirror/autocomplete': 6.16.2(@codemirror/language@6.10.2)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3)(@lezer/common@1.2.1)
+      '@codemirror/language': 6.10.2
+      '@codemirror/state': 6.4.1
+      '@lezer/common': 1.2.1
+      '@lezer/css': 1.1.8
+    transitivePeerDependencies:
+      - '@codemirror/view'
+
+  '@codemirror/lang-html@6.4.9':
+    dependencies:
+      '@codemirror/autocomplete': 6.16.2(@codemirror/language@6.10.2)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3)(@lezer/common@1.2.1)
+      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.26.3)
+      '@codemirror/lang-javascript': 6.2.2
+      '@codemirror/language': 6.10.2
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.26.3
+      '@lezer/common': 1.2.1
+      '@lezer/css': 1.1.8
+      '@lezer/html': 1.3.10
+
+  '@codemirror/lang-javascript@6.2.2':
+    dependencies:
+      '@codemirror/autocomplete': 6.16.2(@codemirror/language@6.10.2)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3)(@lezer/common@1.2.1)
+      '@codemirror/language': 6.10.2
+      '@codemirror/lint': 6.8.0
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.26.3
+      '@lezer/common': 1.2.1
+      '@lezer/javascript': 1.4.16
+
   '@codemirror/lang-json@6.0.1':
     dependencies:
       '@codemirror/language': 6.10.2
       '@lezer/json': 1.0.2
 
+  '@codemirror/lang-vue@0.1.3':
+    dependencies:
+      '@codemirror/lang-html': 6.4.9
+      '@codemirror/lang-javascript': 6.2.2
+      '@codemirror/language': 6.10.2
+      '@lezer/common': 1.2.1
+      '@lezer/highlight': 1.2.0
+      '@lezer/lr': 1.4.1
+
   '@codemirror/language@6.10.2':
     dependencies:
       '@codemirror/state': 6.4.1
@@ -4098,10 +4166,28 @@ snapshots:
 
   '@lezer/common@1.2.1': {}
 
+  '@lezer/css@1.1.8':
+    dependencies:
+      '@lezer/common': 1.2.1
+      '@lezer/highlight': 1.2.0
+      '@lezer/lr': 1.4.1
+
   '@lezer/highlight@1.2.0':
     dependencies:
       '@lezer/common': 1.2.1
 
+  '@lezer/html@1.3.10':
+    dependencies:
+      '@lezer/common': 1.2.1
+      '@lezer/highlight': 1.2.0
+      '@lezer/lr': 1.4.1
+
+  '@lezer/javascript@1.4.16':
+    dependencies:
+      '@lezer/common': 1.2.1
+      '@lezer/highlight': 1.2.0
+      '@lezer/lr': 1.4.1
+
   '@lezer/json@1.0.2':
     dependencies:
       '@lezer/common': 1.2.1

src/components.d.ts

@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     CodemirrorCode: typeof import('./components/codemirror-code/index.vue')['default']
+    CodeView: typeof import('./components/code-view/index.vue')['default']
     LangProvider: typeof import('./components/lang-provider/index.vue')['default']
     MainTransition: typeof import('./components/main-transition/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/components/code-view/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <code-mirror
+    basic
+    v-model="codeValue"
+    :extensions="extensions"
+    :tab-size="config.tabSize"
+    :basic="config.basic"
+    :dark="config.dark"
+    :readonly="config.readonly"
+  />
+</template>
+
+<script setup lang="ts">
+import CodeMirror from "vue-codemirror6";
+import { oneDark } from "@codemirror/theme-one-dark";
+import { json } from "@codemirror/lang-json";
+import { javascript } from "@codemirror/lang-javascript";
+import { vue } from "@codemirror/lang-vue";
+
+defineOptions({ name: "CodeView" });
+
+interface Props {
+  type?: "javascript" | "vue" | "json";
+  codeJson: string;
+}
+// withDefaults为defineProps标注类型
+// https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-props
+const props = withDefaults(defineProps<Props>(), {
+  type: "javascript",
+  codeJson: ""
+});
+
+const codeValue = computed(() => JSON.stringify(props.codeJson, null, "\t"));
+
+const defaultConfig = {
+  tabSize: 2,
+  basic: true,
+  dark: true,
+  readonly: true
+};
+const config = defaultConfig;
+
+// 扩展
+const extensions = computed(() => {
+  const arr = [oneDark];
+  if (props.type === "javascript") {
+    arr.push(javascript());
+  }
+  if (props.type === "vue") {
+    arr.push(vue());
+  }
+  if (props.type === "json") {
+    arr.push(json());
+  }
+  return arr;
+});
+</script>
+
+<style lang="scss" scoped>
+// 修改code中的字体样式
+:deep(.ͼ1 .cm-scroller) {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;
+}
+</style>

src/components/codemirror-code/index.vue

@@ -1,49 +0,0 @@
-<template>
-  <code-mirror basic :lang="lang" v-model="codeVal" :theme="theme" :extensions="extensions" />
-</template>
-
-<script setup lang="ts">
-import CodeMirror from "vue-codemirror6";
-import { oneDark } from "@codemirror/theme-one-dark";
-import { json } from "@codemirror/lang-json";
-
-defineOptions({ name: "CodemirrorCode" });
-const props = defineProps({
-  initJson: {
-    type: Object,
-    default: {}
-  }
-});
-
-// 初始化
-let codeVal = ref("");
-// 转成json字符串并格式化
-codeVal.value = JSON.stringify(props.initJson, null, "\t");
-// json
-const lang = json();
-// 扩展
-const extensions = [oneDark];
-// 主题样式设置
-const theme = {
-  "&": {
-    color: "white",
-    backgroundColor: "#034"
-  },
-  ".cm-content": {
-    caretColor: "#0e9"
-  },
-  "&.cm-focused .cm-cursor": {
-    borderLeftColor: "#0e9"
-  },
-  "&.cm-focused .cm-selectionBackground, ::selection": {
-    backgroundColor: "#074"
-  },
-  ".cm-gutters": {
-    backgroundColor: "#045",
-    color: "#ddd",
-    border: "none"
-  }
-};
-</script>
-
-<style lang="scss" scoped></style>

src/views/form-management/common-form/common-form.vue

@@ -90,7 +90,7 @@
         </a-form>
       </a-col>
       <a-col :span="12">
-        <CodemirrorCode :initJson="form" />
+        <CodeView :code-json="form" />
       </a-col>
     </a-row>
   </div>

src/vite-env.d.ts

@@ -11,3 +11,5 @@ declare module "sortablejs";
 declare module "vue-codemirror6";
 declare module "@codemirror/theme-one-dark";
 declare module "@codemirror/lang-json";
+declare module "@codemirror/lang-javascript";
+declare module "@codemirror/lang-vue";