feat: codemirror6

apps/web-antd/package.json

@@ -52,7 +52,6 @@
     "pinia": "2.2.2",
     "tinymce": "^7.3.0",
     "vue": "^3.5.3",
-    "vue-json-pretty": "^2.4.0",
     "vue-router": "^4.4.3"
   },
   "devDependencies": {

apps/web-antd/src/components/code-editor/index.ts

@@ -1,5 +0,0 @@
-import { withInstall } from '#/utils';
-
-import jsonPreview from './src/json-preview/json-preview.vue';
-
-export const JsonPreview = withInstall(jsonPreview);

apps/web-antd/src/components/code-editor/src/json-preview/json-preview.vue

@@ -1,19 +0,0 @@
-<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>

apps/web-antd/src/views/system/role/index.vue

@@ -1,24 +1,28 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import { CodeMirror, JsonPreview, Page } from '@vben/common-ui';
 
+import packageJson from '#/../package.json';
 import { Card } from 'ant-design-vue';
 
-import { JsonPreview } from '#/components/code-editor';
-
-const obj = {
-  address: {
-    a: 1,
-    b: true,
-  },
-  age: 1234,
-  name: 'ruoyi-plus',
-};
+import code from '#/components/tinymce/src/editor.vue?raw';
 </script>
 
 <template>
-  <Page>
-    <Card title="json预览">
-      <JsonPreview :data="obj" />
+  <Page content-class="flex lg:flex-row flex-col gap-[16px]">
+    <Card class="flex-1" title="json预览">
+      <div class="h-[600px] overflow-y-auto">
+        <JsonPreview :data="packageJson" />
+      </div>
+    </Card>
+    <Card class="flex-1" title="codeMirror预览">
+      <div class="h-[600px] overflow-y-auto">
+        <CodeMirror
+          v-model="code"
+          class="text-[16px]"
+          language="vue"
+          readonly
+        />
+      </div>
     </Card>
   </Page>
 </template>