feat: CodemirrorCode组件

2024-06-04 13:03:46 +08:00 · 2024-06-04 13:03:46 +08:00 · e3d4e0947e
commit e3d4e0947e
parent 1b2c3c455e
5 changed files with 349 additions and 88 deletions
--- a/package.json
+++ b/package.json
@ -23,15 +23,19 @@
  },
  "dependencies": {
    "@arco-design/color": "^0.4.0",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/theme-one-dark": "^6.1.2",
    "@visactor/vchart": "^1.11.0",
    "@visactor/vchart-arco-theme": "^1.11.0",
    "axios": "^1.6.8",
+    "codemirror": "^6.0.1",
    "dc-admin": "link:",
    "nprogress": "^0.2.0",
    "pinia": "^2.1.7",
    "pinia-plugin-persistedstate": "^3.2.1",
    "sortablejs": "^1.15.2",
    "vue": "^3.4.21",
+    "vue-codemirror6": "^1.3.0",
    "vue-i18n": "10.0.0-alpha.3",
    "vue-router": "^4.3.0"
  },
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -11,6 +11,12 @@ importers:
      '@arco-design/color':
        specifier: ^0.4.0
        version: 0.4.0
+      '@codemirror/lang-json':
+        specifier: ^6.0.1
+        version: 6.0.1
+      '@codemirror/theme-one-dark':
+        specifier: ^6.1.2
+        version: 6.1.2
      '@visactor/vchart':
        specifier: ^1.11.0
        version: 1.11.0
@ -20,6 +26,9 @@ importers:
      axios:
        specifier: ^1.6.8
        version: 1.6.8
+      codemirror:
+        specifier: ^6.0.1
+        version: 6.0.1(@lezer/common@1.2.1)
      dc-admin:
        specifier: 'link:'
        version: 'link:'
@ -38,6 +47,9 @@ importers:
      vue:
        specifier: ^3.4.21
        version: 3.4.21(typescript@5.4.3)
+      vue-codemirror6:
+        specifier: ^1.3.0
+        version: 1.3.0(@lezer/common@1.2.1)(vue@3.4.21(typescript@5.4.3))
      vue-i18n:
        specifier: 10.0.0-alpha.3
        version: 10.0.0-alpha.3(vue@3.4.21(typescript@5.4.3))
@ -210,6 +222,38 @@ packages:
    resolution: {integrity: sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==}
    engines: {node: '>=6.9.0'}

+  '@codemirror/autocomplete@6.16.2':
+    resolution: {integrity: sha512-MjfDrHy0gHKlPWsvSsikhO1+BOh+eBHNgfH1OXs1+DAf30IonQldgMM3kxLDTG9ktE7kDLaA1j/l7KMPA4KNfw==}
+    peerDependencies:
+      '@codemirror/language': ^6.0.0
+      '@codemirror/state': ^6.0.0
+      '@codemirror/view': ^6.0.0
+      '@lezer/common': ^1.0.0
+
+  '@codemirror/commands@6.5.0':
+    resolution: {integrity: sha512-rK+sj4fCAN/QfcY9BEzYMgp4wwL/q5aj/VfNSoH1RWPF9XS/dUwBkvlL3hpWgEjOqlpdN1uLC9UkjJ4tmyjJYg==}
+
+  '@codemirror/lang-json@6.0.1':
+    resolution: {integrity: sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==}
+
+  '@codemirror/language@6.10.2':
+    resolution: {integrity: sha512-kgbTYTo0Au6dCSc/TFy7fK3fpJmgHDv1sG1KNQKJXVi+xBTEeBPY/M30YXiU6mMXeH+YIDLsbrT4ZwNRdtF+SA==}
+
+  '@codemirror/lint@6.8.0':
+    resolution: {integrity: sha512-lsFofvaw0lnPRJlQylNsC4IRt/1lI4OD/yYslrSGVndOJfStc58v+8p9dgGiD90ktOfL7OhBWns1ZETYgz0EJA==}
+
+  '@codemirror/search@6.5.6':
+    resolution: {integrity: sha512-rpMgcsh7o0GuCDUXKPvww+muLA1pDJaFrpq/CCHtpQJYz8xopu4D1hPcKRoDD0YlF8gZaqTNIRa4VRBWyhyy7Q==}
+
+  '@codemirror/state@6.4.1':
+    resolution: {integrity: sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==}
+
+  '@codemirror/theme-one-dark@6.1.2':
+    resolution: {integrity: sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==}
+
+  '@codemirror/view@6.26.3':
+    resolution: {integrity: sha512-gmqxkPALZjkgSxIeeweY/wGQXBfwTUaLs8h7OKtSwfbj9Ct3L11lD+u1sS7XHppxFQoMDiMDp07P9f3I2jWOHw==}
+
  '@commitlint/cli@19.2.1':
    resolution: {integrity: sha512-cbkYUJsLqRomccNxvoJTyv5yn0bSy05BBizVyIcLACkRbVUqYorC351Diw/XFSWC/GtpwiwT2eOvQgFZa374bg==}
    engines: {node: '>=v18'}
@ -713,6 +757,18 @@ packages:
  '@jridgewell/trace-mapping@0.3.25':
    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}

+  '@lezer/common@1.2.1':
+    resolution: {integrity: sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==}
+
+  '@lezer/highlight@1.2.0':
+    resolution: {integrity: sha512-WrS5Mw51sGrpqjlh3d4/fOwpEV2Hd3YOkp9DBt4k8XZQcoTHZFB7sx030A6OcahF4J1nDQAa3jXlTVVYH50IFA==}
+
+  '@lezer/json@1.0.2':
+    resolution: {integrity: sha512-xHT2P4S5eeCYECyKNPhr4cbEL9tc8w83SPwRC373o9uEdrvGKTZoJVAGxpOsZckMlEh9W23Pc72ew918RWQOBQ==}
+
+  '@lezer/lr@1.4.1':
+    resolution: {integrity: sha512-CHsKq8DMKBf9b3yXPDIU4DbH+ZJd/sJdYOW2llbW/HudP5u0VS6Bfq1hLYfgU7uAYGFIyGGQIsSOXGPEErZiJw==}
+
  '@nodelib/fs.scandir@2.1.5':
    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
    engines: {node: '>= 8'}
@ -1333,6 +1389,9 @@ packages:
    resolution: {integrity: sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==}
    engines: {node: '>=0.8'}

+  codemirror@6.0.1:
+    resolution: {integrity: sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==}
+
  collection-visit@1.0.0:
    resolution: {integrity: sha512-lNkKvzEeMBBjUGHZ+q6z9pSJla0KWAQPvtzhEV9+iGyQYG+pBpl7xKDhxoNSOZH2hhv0v5k0y2yAM4o4SjoSkw==}
    engines: {node: '>=0.10.0'}
@ -1443,6 +1502,9 @@ packages:
      typescript:
        optional: true

+  crelt@1.0.6:
+    resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
+
  cross-spawn@7.0.3:
    resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
    engines: {node: '>= 8'}
@ -3050,6 +3112,9 @@ packages:
  strip-literal@1.3.0:
    resolution: {integrity: sha512-PugKzOsyXpArk0yWmUwqOZecSO0GH0bPoctLcqNDH9J04pVW3lflYE0ujElBGTloevcxF5MofAOZ7C5l2b+wLg==}

+  style-mod@4.1.2:
+    resolution: {integrity: sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==}
+
  supports-color@2.0.0:
    resolution: {integrity: sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==}
    engines: {node: '>=0.8.0'}
@ -3272,6 +3337,12 @@ packages:
      terser:
        optional: true

+  vue-codemirror6@1.3.0:
+    resolution: {integrity: sha512-Wq+Ji0wNPF1JYT+ISrWePtJgm0QR0g3s/TwaViPbOHT9/hea1Ik7/bEZN3VCJxJsQksL8IR9T9Hm4tnHGYXiBw==}
+    engines: {yarn: '>=1.22.19'}
+    peerDependencies:
+      vue: ^2.7.14 || ^3.4
+
  vue-demi@0.14.7:
    resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==}
    engines: {node: '>=12'}
@ -3283,6 +3354,17 @@ packages:
      '@vue/composition-api':
        optional: true

+  vue-demi@0.14.8:
+    resolution: {integrity: sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==}
+    engines: {node: '>=12'}
+    hasBin: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
  vue-eslint-parser@9.4.2:
    resolution: {integrity: sha512-Ry9oiGmCAK91HrKMtCrKFWmSFWvYkpGglCeFAIqDdr9zdXmMMpJOmUJS7WWsW7fX81h6mwHmUZCQQ1E0PkSwYQ==}
    engines: {node: ^14.17.0 || >=16.0.0}
@ -3317,6 +3399,9 @@ packages:
      typescript:
        optional: true

+  w3c-keyname@2.2.8:
+    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
+
  webpack-sources@3.2.3:
    resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
    engines: {node: '>=10.13.0'}
@ -3477,6 +3562,61 @@ snapshots:
      '@babel/helper-validator-identifier': 7.22.20
      to-fast-properties: 2.0.0

+  '@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)':
+    dependencies:
+      '@codemirror/language': 6.10.2
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.26.3
+      '@lezer/common': 1.2.1
+
+  '@codemirror/commands@6.5.0':
+    dependencies:
+      '@codemirror/language': 6.10.2
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.26.3
+      '@lezer/common': 1.2.1
+
+  '@codemirror/lang-json@6.0.1':
+    dependencies:
+      '@codemirror/language': 6.10.2
+      '@lezer/json': 1.0.2
+
+  '@codemirror/language@6.10.2':
+    dependencies:
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.26.3
+      '@lezer/common': 1.2.1
+      '@lezer/highlight': 1.2.0
+      '@lezer/lr': 1.4.1
+      style-mod: 4.1.2
+
+  '@codemirror/lint@6.8.0':
+    dependencies:
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.26.3
+      crelt: 1.0.6
+
+  '@codemirror/search@6.5.6':
+    dependencies:
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.26.3
+      crelt: 1.0.6
+
+  '@codemirror/state@6.4.1': {}
+
+  '@codemirror/theme-one-dark@6.1.2':
+    dependencies:
+      '@codemirror/language': 6.10.2
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.26.3
+      '@lezer/highlight': 1.2.0
+
+  '@codemirror/view@6.26.3':
+    dependencies:
+      '@codemirror/state': 6.4.1
+      style-mod: 4.1.2
+      w3c-keyname: 2.2.8
+
  '@commitlint/cli@19.2.1(@types/node@20.11.30)(typescript@5.4.3)':
    dependencies:
      '@commitlint/format': 19.0.3
@ -3956,6 +4096,22 @@ snapshots:
      '@jridgewell/resolve-uri': 3.1.2
      '@jridgewell/sourcemap-codec': 1.4.15

+  '@lezer/common@1.2.1': {}
+
+  '@lezer/highlight@1.2.0':
+    dependencies:
+      '@lezer/common': 1.2.1
+
+  '@lezer/json@1.0.2':
+    dependencies:
+      '@lezer/common': 1.2.1
+      '@lezer/highlight': 1.2.0
+      '@lezer/lr': 1.4.1
+
+  '@lezer/lr@1.4.1':
+    dependencies:
+      '@lezer/common': 1.2.1
+
  '@nodelib/fs.scandir@2.1.5':
    dependencies:
      '@nodelib/fs.stat': 2.0.5
@ -4685,6 +4841,18 @@ snapshots:

  clone@2.1.2: {}

+  codemirror@6.0.1(@lezer/common@1.2.1):
+    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/commands': 6.5.0
+      '@codemirror/language': 6.10.2
+      '@codemirror/lint': 6.8.0
+      '@codemirror/search': 6.5.6
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.26.3
+    transitivePeerDependencies:
+      - '@lezer/common'
+
  collection-visit@1.0.0:
    dependencies:
      map-visit: 1.0.0
@ -4798,6 +4966,8 @@ snapshots:
    optionalDependencies:
      typescript: 5.4.3

+  crelt@1.0.6: {}
+
  cross-spawn@7.0.3:
    dependencies:
      path-key: 3.1.1
@ -6476,6 +6646,8 @@ snapshots:
    dependencies:
      acorn: 8.11.3

+  style-mod@4.1.2: {}
+
  supports-color@2.0.0: {}

  supports-color@3.2.3:
@ -6710,10 +6882,23 @@ snapshots:
      sass: 1.72.0
      terser: 5.29.2

+  vue-codemirror6@1.3.0(@lezer/common@1.2.1)(vue@3.4.21(typescript@5.4.3)):
+    dependencies:
+      codemirror: 6.0.1(@lezer/common@1.2.1)
+      vue: 3.4.21(typescript@5.4.3)
+      vue-demi: 0.14.8(vue@3.4.21(typescript@5.4.3))
+    transitivePeerDependencies:
+      - '@lezer/common'
+      - '@vue/composition-api'
+
  vue-demi@0.14.7(vue@3.4.21(typescript@5.4.3)):
    dependencies:
      vue: 3.4.21(typescript@5.4.3)

+  vue-demi@0.14.8(vue@3.4.21(typescript@5.4.3)):
+    dependencies:
+      vue: 3.4.21(typescript@5.4.3)
+
  vue-eslint-parser@9.4.2(eslint@8.57.0):
    dependencies:
      debug: 4.3.4
@ -6761,6 +6946,8 @@ snapshots:
    optionalDependencies:
      typescript: 5.4.3

+  w3c-keyname@2.2.8: {}
+
  webpack-sources@3.2.3: {}

  webpack-virtual-modules@0.6.1: {}
--- a/src/components.d.ts
+++ b/src/components.d.ts
@ -7,6 +7,7 @@ export {}

 declare module 'vue' {
  export interface GlobalComponents {
+    CodemirrorCode: typeof import('./components/codemirror-code/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']
--- a/src/components/codemirror-code/index.vue
+++ b/src/components/codemirror-code/index.vue
@ -0,0 +1,63 @@
+<template>
+  <div class="main">
+    <code-mirror basic :lang="lang" v-model="codeVal" style="height: 400px" :theme="theme" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import CodeMirror from "vue-codemirror6";
+import { json } from "@codemirror/lang-json";
+
+defineOptions({ name: "CodemirrorCode" });
+const props = defineProps({
+  initJson: {
+    type: Object,
+    default: () => {}
+  }
+});
+
+// const initJson = {
+//   name: `maybaby`,
+//   year: 25,
+//   weight: 45,
+//   height: 165
+// };
+// 初始化
+let codeVal = ref("");
+// 转成json字符串并格式化
+codeVal.value = JSON.stringify(props.initJson, null, "\t");
+// json
+const lang = json();
+// 主题样式设置
+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>
+.main {
+  width: 100%;
+  height: 100%;
+}
+/* required! */
+.cm-editor {
+  height: 100%;
+}
+</style>
--- a/src/views/form-management/common-form/common-form.vue
+++ b/src/views/form-management/common-form/common-form.vue
@ -1,5 +1,7 @@
 <template>
  <div class="dc-page">
+    <a-row :gutter="16">
+      <a-col :span="12">
        <a-form ref="formRef" :size="form.size" :model="form" :style="{ width: '600px' }" @submit="handleSubmit">
          <a-form-item field="size" label="表单大小">
            <a-radio-group v-model="form.size" type="button">
@ -86,12 +88,16 @@
            </a-space>
          </a-form-item>
        </a-form>
-    {{ form }}
+      </a-col>
+      <a-col :span="12">
+        <CodemirrorCode :initJson="form" />
+      </a-col>
+    </a-row>
  </div>
 </template>

 <script setup lang="ts">
-const handleSubmit = ({ values, errors }) => {
+const handleSubmit = ({ values, errors }: any) => {
  console.log("values:", values, "\nerrors:", errors);
 };