diff --git a/apps/web-antd/src/views/code-generation/components/fileds.vue b/apps/web-antd/src/views/code-generation/components/fileds.vue
index 2f6f727a..fcf4106b 100644
--- a/apps/web-antd/src/views/code-generation/components/fileds.vue
+++ b/apps/web-antd/src/views/code-generation/components/fileds.vue
@@ -1,9 +1,11 @@
 <script lang="ts" setup>
+import type { JsonViewerAction, JsonViewerValue } from '@vben/common-ui';
+
 import { computed, ref } from 'vue';
 
-import { Page } from '@vben/common-ui';
+import { JsonViewer, Page } from '@vben/common-ui';
 
-import { Button, Input, Select, Switch, Table } from 'ant-design-vue';
+import { Button, Input, message, Select, Switch, Table } from 'ant-design-vue';
 
 import filedType from '#/util/json/filedType.json';
 import formType from '#/util/json/formType.json';
@@ -67,11 +69,39 @@ const columns = computed(() => [
     fixed: 'right',
   },
 ]);
+
+function handleKeyClick(key: string) {
+  message.info(`点击了Key ${key}`);
+}
+
+function handleValueClick(value: JsonViewerValue) {
+  message.info(`点击了Value ${JSON.stringify(value)}`);
+}
+
+function handleCopied(_event: JsonViewerAction) {
+  message.success('已复制JSON');
+}
+const jsonValue = ref('');
+
+const changeJsonValue = () => {
+  tableData.value = JSON.parse(jsonValue.value);
+};
 </script>
 
 <template>
   <Page auto-content-height>
-    {{ tableData }}
+    <Input v-model:value="jsonValue" />
+    <Button @click="changeJsonValue">写入json</Button>
+    <JsonViewer
+      :value="tableData"
+      :expand-depth="3"
+      copyable
+      :sort="false"
+      @key-click="handleKeyClick"
+      @value-click="handleValueClick"
+      @copied="handleCopied"
+      boxed
+    />
     <Table
       :columns="columns"
       :data-source="tableData"
@@ -122,7 +152,7 @@ const columns = computed(() => [
         <!-- 基础配置 -->
         <template v-if="column.dataIndex === 'base'">
           <!-- 开关控件 -->
-          <div>可以为空： <Switch v-model:checked="record.null" /></div>
+          <div>不能为空： <Switch v-model:checked="record.not_null" /></div>
           <div class="mt-2">
             表单显示： <Switch v-model:checked="record.formShow" />
           </div>