feat: json-preview组件

apps/web-antd/package.json

@@ -52,6 +52,7 @@
     "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

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

@@ -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>

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

@@ -1,9 +1,24 @@
 <script setup lang="ts">
-import CommonSkeleton from '#/views/common';
+import { Page } from '@vben/common-ui';
+
+import { Card } from 'ant-design-vue';
+
+import { JsonPreview } from '#/components/code-editor';
+
+const obj = {
+  address: {
+    a: 1,
+    b: true,
+  },
+  age: 1234,
+  name: 'ruoyi-plus',
+};
 </script>
 
 <template>
-  <div>
-    <CommonSkeleton />
-  </div>
+  <Page>
+    <Card title="json预览">
+      <JsonPreview :data="obj" />
+    </Card>
+  </Page>
 </template>