feat: codemirror6

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>