diff --git a/README.md b/README.md
index 64a5ad2f108237a181718b3027b0ad6cb4dc4bd4..81c77473296e151f9828cb09ce22b4619166f029 100644
--- a/README.md
+++ b/README.md
@@ -2,16 +2,26 @@
 
 <p align="center">基于naiveui、typescript的表单生成器，支持复杂表格Tree等常用组件</p>
 <p align="center">
-  <a href="./LICENSE"><img allt="MIT License" src="https://badgen.net/github/license/zclzone/vue-naive-admin"/></a>
+  <a href="./LICENSE"><img allt="MIT License" src="https://badgen.net/badge/license/MIT/blue"/></a>
+  <a href="./LICENSE"><img allt="MIT License" src="https://badgen.net/badge/naive-ui/^2.30.6/green"/></a>
+  <a href="./LICENSE"><img allt="MIT License" src="https://badgen.net/badge/vue/^3.2.25/green"/></a>
+  <a href="./LICENSE"><img allt="MIT License" src="https://badgen.net/badge/vite/^2.9.9/green"/></a>
 </p>
 
 
 ### 简介
 
-[NaiveUi Form Generate](https://github.com/LvHuaiSheng/naiveui-form-generate)，一个基于 Vue3.0、Vite、Naive UI 表单生成器。
+[NaiveUi Form Generate](https://gitee.com/sourcenet/naiveui-form-generate)，一个基于 Vue3.0、Vite、Naive UI 表单生成器。
 
+### 分支说明
+- develop：开发分支，最新代码，但不具有稳定性
+- master：主分支，相对稳定代码（目前develop开发阶段，此分支可暂时忽略）
+
+### 特别提示
+推荐从Gitee仓库拉取代码，[NaiveUi Form Generate](https://gitee.com/sourcenet/naiveui-form-generate)，GitHub提交老是被墙，代码也许不是最新的
 
 ### 功能/计划
+> 基础组件
 - 🍉 单行/多行/密码输入组件 √
 - 🍉 数字组件 √
 - 🍉 单选 √
@@ -21,18 +31,31 @@
 - 🍉 评分 √
 - 🍉 开关 √
 - 🍉 滑块（横向、竖向）√
-- 🍉 富文本编辑器 √
-- 📦 naiveui的新版栅格布局 √
-- 🤹 普通文本 √
-- 🤹 Alert组件 √
-- 🍏 颜色选择器  √
+
+- 🍉 颜色选择器  √
+
+> 高级组件
 - 🍏 树形选择  √
 - 🍏 文件上传 √
 - 🍏 穿梭框 √
-- 🍏 级联选择 > 进行中
-- 🍏 树形组件 > 进行中
-- 🍏 静态表格（可启用原生样式，实现线上、线下合同表单的一比一样式） > 进行中
+- 🍏 级联选择 > √
+- 🍏 树形组件 > √
+- 🍏 富文本编辑器 √
+- 🍏 动态标签 √
 - 🍏 动态表格（主要用作子表的使用，支持弹窗/抽屉/行内编辑等多种样式） > 进行中
+
+> 布局组件
+- 📦 naiveui的新版栅格布局 √
+- 📦  静态表格（可启用原生样式，实现线上、线下合同表单的一比一样式）√
+- 📦  标签页 > 筹划中
+
+> 其它组件
+- 🤹 普通文本 √
+- 🤹 Alert组件 √
+- 🤹 Divider分割线 √
+- 🤹 按钮 √
+
+> 其它优化
 - 🚀 单个组件化封装（typescript）
 - 🚀 细节优化
 - 更多......
@@ -43,7 +66,6 @@
 ### 文档
 - 待编写
 
-
 ### 构建
 
 ```shell
diff --git a/package.json b/package.json
index d8691fd787705a1adc592d710973d434fb3d60a4..b008b23bf9dacd97a96fba1254fe9160eb995a5c 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
+    "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -22,6 +22,7 @@
     "@types/lodash": "^4.14.182",
     "@types/uuid": "^8.3.4",
     "@vitejs/plugin-vue": "^2.3.3",
+    "@vue/compiler-sfc": "^3.2.37",
     "fast-glob": "^3.2.11",
     "less": "^4.1.2",
     "less-loader": "^9.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6d5c9205a96307c1dc40a8a9b6068d1a97e71c17..8df727419e9d6a9a60b4a4245dd00bcca51c020c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,6 +4,7 @@ specifiers:
   '@types/lodash': ^4.14.182
   '@types/uuid': ^8.3.4
   '@vitejs/plugin-vue': ^2.3.3
+  '@vue/compiler-sfc': ^3.2.37
   ace-builds: ^1.4.12
   fast-glob: ^3.2.11
   less: ^4.1.2
@@ -36,6 +37,7 @@ devDependencies:
   '@types/lodash': registry.npmmirror.com/@types/lodash/4.14.182
   '@types/uuid': registry.npmmirror.com/@types/uuid/8.3.4
   '@vitejs/plugin-vue': registry.npmmirror.com/@vitejs/plugin-vue/2.3.3_vite@2.9.13+vue@3.2.37
+  '@vue/compiler-sfc': registry.npmmirror.com/@vue/compiler-sfc/3.2.37
   fast-glob: registry.npmmirror.com/fast-glob/3.2.11
   less: registry.npmmirror.com/less/4.1.3
   less-loader: registry.npmmirror.com/less-loader/9.1.0_less@4.1.3
diff --git a/src/App.vue b/src/App.vue
index 7c6cdaf34545955a5d2906a69966fd32f87c1143..d12ea80aa09b04a8cc9d5f197dac0b324d819c5b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import NaiveFormDesign from './core/naiveui/NaiveFormDesign.vue';
+import FormDesign from './components/naiveui/FormDesign.vue';
 import { BuiltInGlobalTheme } from 'naive-ui/es/themes/interface';
 /* 阻止火狐浏览器在  draggable组件时拖动 打开新窗口 */
 document.body.ondrop = function(event) {
@@ -11,7 +11,7 @@ document.body.ondrop = function(event) {
 <template>
   <n-config-provider >
     <n-message-provider :max="3">
-      <NaiveFormDesign />
+      <FormDesign />
     </n-message-provider>
   </n-config-provider>
 </template>
diff --git a/src/components/SvgIcon.vue b/src/components/SvgIcon.vue
index 057c4457036f663544f592f9fdf5dcebefc9208b..fee7f3e52a2c59523e73d837435d580d58a65f1d 100644
--- a/src/components/SvgIcon.vue
+++ b/src/components/SvgIcon.vue
@@ -12,7 +12,7 @@
 
 <script lang="ts">
 import { defineComponent, computed } from 'vue'
-import * as utils from '../utils'
+import * as utils from './naiveui/utils'
 
 export default defineComponent({
   name: 'SvgIcon',
diff --git a/src/core/naiveui/NaiveFormDesign.vue b/src/components/naiveui/FormDesign.vue
similarity index 85%
rename from src/core/naiveui/NaiveFormDesign.vue
rename to src/components/naiveui/FormDesign.vue
index abd4defd4488a6df5f2f65b781b49d2101271537..4a4b2cf65827d4c3b4abba2a3531f8720938ae05 100644
--- a/src/core/naiveui/NaiveFormDesign.vue
+++ b/src/components/naiveui/FormDesign.vue
@@ -27,17 +27,17 @@
       </n-layout-sider>
       <n-layout >
         <NaiveHeader style="height: 42px;line-height: 50px;border-bottom: 1px solid #e4e7ed;text-align: right;padding: 0 10px;"
-            v-bind="$props"
-            @preview="() => (previewVisible = true)"
-            @uploadJson="() => (uploadJsonVisible = true)"
-            @generateJson="handleGenerateJson"
-            @generateCode="handleGenerateCode"
-            @clearable="handleClearable"
+                     v-bind="$props"
+                     @preview="() => (previewVisible = true)"
+                     @uploadJson="() => (uploadJsonVisible = true)"
+                     @generateJson="handleGenerateJson"
+                     @generateCode="handleGenerateCode"
+                     @clearable="handleClearable"
         >
           <slot name="header"></slot>
         </NaiveHeader>
         <n-layout has-sider position="absolute" style="top: 45px;">
-          <NaiveWidgetForm
+          <DesignForm
               ref="widgetFormRef"
               v-model:widgetForm="widgetForm"
               v-model:widgetFormSelect="widgetFormSelect"
@@ -61,7 +61,7 @@
           </n-tabs>
         </n-layout-header>
         <n-layout-content class="config-content">
-          <NaiveWidgetConfig
+          <DesignConfig
               v-show="configTab === 'widget'"
               v-model:select="widgetFormSelect"
           />
@@ -87,12 +87,12 @@
       >JSON格式如下，直接复制生成的json覆盖此处代码点击确定即可</n-alert>
       <CodeEditor v-model:value="jsonEg" language="json" />
     </n-modal>
-    <n-modal v-model:show="previewVisible" preset="dialog" title="预览" style="width: 800px">
-<!--      <template #header>-->
-<!--        <div>标题</div>-->
-<!--      </template>-->
+    <n-modal v-model:show="previewVisible" preset="dialog" title="预览" style="width: max-content;max-width:100vw;min-width: 500px;overflow: auto">
+      <!--      <template #header>-->
+      <!--        <div>标题</div>-->
+      <!--      </template>-->
       <div>
-        <NaiveGenerateForm
+        <GenerateForm
             style="margin-top: 20px"
             ref="generateFormRef"
             :data="widgetForm"
@@ -164,28 +164,27 @@
 import { defineComponent, reactive, PropType, toRefs, watchEffect } from 'vue'
 import { useMessage } from 'naive-ui'
 import { merge } from 'lodash'
-import CodeEditor from '../../components/CodeEditor.vue'
-import ComponentGroup from '../../components/ComponentGroup.vue'
-import NaiveHeader from './NaiveHeader.vue'
-import NaiveWidgetForm from './NaiveWidgetForm.vue'
-import NaiveGenerateForm from './NaiveGenerateForm.vue'
-import NaiveWidgetConfig from './NaiveWidgetConfig.vue'
-import NaiveFormConfig from './NaiveFormConfig.vue'
-import { naiveui } from '../../config'
-import { copy } from '../../utils'
-import { CodeType, PlatformType } from '../../enums'
-import generateCode from '../../utils/generateCode'
-import { WidgetForm } from '../../config/naiveui'
+import CodeEditor from './components/CodeEditor.vue'
+import ComponentGroup from './components/ComponentGroup.vue'
+import NaiveHeader from './components/NaiveHeader.vue'
+import DesignForm from './components/design/DesignForm.vue'
+import GenerateForm from './components/generate/GenerateForm.vue'
+import DesignConfig from './components/design/DesignConfig.vue'
+import NaiveFormConfig from './components/NaiveFormConfig.vue'
+import { naiveui } from './config'
+import { copy } from './utils'
+import { CodeType, PlatformType } from './enums'
+import generateCode from './utils/generateCode'
 
 export default defineComponent({
-  name: 'DesignForm',
+  name: 'FormDesign',
   components: {
     NaiveHeader,
     ComponentGroup,
     CodeEditor,
-    NaiveWidgetForm,
-    NaiveGenerateForm,
-    NaiveWidgetConfig,
+    DesignForm,
+    GenerateForm,
+    DesignConfig,
     NaiveFormConfig
   },
   props: {
@@ -222,7 +221,6 @@ export default defineComponent({
         'select',
         'switch',
         'slider',
-        'text',
         'color',
       ]
     },
@@ -233,19 +231,19 @@ export default defineComponent({
         'richtext-editor',
         'cascader',
         'tree',
-        'table',
         'dynamicTable',
         'selectTree',
         'transfer',
+        'dynamicTags',
       ]
     },
     layoutFields: {
       type: Array as PropType<Array<string>>,
-      default: () => ['grid']
+      default: () => ['grid','table',]
     },
     otherFields: {
       type: Array as PropType<Array<string>>,
-      default: () => ['text','alert']
+      default: () => ['text','alert','divider','button']
     }
   },
   setup() {
@@ -324,7 +322,7 @@ export default defineComponent({
 
     const getJson = () => state.widgetForm
 
-    const setJson = (json: WidgetForm) => {
+    const setJson = (json: naiveui.WidgetForm) => {
       state.widgetForm.list = []
       merge(state.widgetForm, json)
       if (json.list.length) {
diff --git a/src/components/CodeEditor.vue b/src/components/naiveui/components/CodeEditor.vue
similarity index 100%
rename from src/components/CodeEditor.vue
rename to src/components/naiveui/components/CodeEditor.vue
diff --git a/src/components/ComponentGroup.vue b/src/components/naiveui/components/ComponentGroup.vue
similarity index 95%
rename from src/components/ComponentGroup.vue
rename to src/components/naiveui/components/ComponentGroup.vue
index ca0b4854baaa11a1fadb3c850184b2377d6318da..6678e20d7b088c314902d327f667aafdee70b6fd 100644
--- a/src/components/ComponentGroup.vue
+++ b/src/components/naiveui/components/ComponentGroup.vue
@@ -29,7 +29,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue'
 import Draggable from 'vuedraggable'
-import SvgIcon from './SvgIcon.vue'
+import SvgIcon from '../../../components/SvgIcon.vue'
 
 export default defineComponent({
   name: 'ComponentGroup',
diff --git a/src/core/naiveui/NaiveFormConfig.vue b/src/components/naiveui/components/NaiveFormConfig.vue
similarity index 80%
rename from src/core/naiveui/NaiveFormConfig.vue
rename to src/components/naiveui/components/NaiveFormConfig.vue
index cb109b0241ad5a458ba5fb9f04a1c86ebf420177..71789d62fe102874a8dc40f308926321fb6e592a 100644
--- a/src/core/naiveui/NaiveFormConfig.vue
+++ b/src/components/naiveui/components/NaiveFormConfig.vue
@@ -2,17 +2,21 @@
   <div class="form-config-container">
     <n-form >
       <n-form-item label="表单布局">
-        <n-radio-group v-model:value="data.inline">
-          <n-radio-button :value="false" label="默认"/>
-          <n-radio-button :value="true">
-            <n-tooltip trigger="hover">
-              <template #trigger>
+        <n-tooltip trigger="hover">
+          <template #trigger>
+            <n-switch
+                v-model:value="data.inline"
+            >
+              <template #checked>
                 行内表单
               </template>
-              推荐使用【栅格布局】实现行内表单
-            </n-tooltip>
-          </n-radio-button>
-        </n-radio-group>
+              <template #unchecked>
+                默认
+              </template>
+            </n-switch>
+          </template>
+          推荐使用【栅格布局】实现行内表单
+        </n-tooltip>
       </n-form-item>
       <n-form-item label="标签显示位置">
         <n-radio-group v-model:value="data.labelPlacement" button-style="solid" @change="changeLabelPlacement" >
@@ -55,12 +59,24 @@
           </template>
         </n-switch>
       </n-form-item>
+<!--      <n-form-item label="显示标签文本">
+        <n-switch
+            v-model:value="data.showLabel"
+        >
+          <template #checked>
+            显示
+          </template>
+          <template #unchecked>
+            隐藏
+          </template>
+        </n-switch>
+      </n-form-item>-->
     </n-form>
   </div>
 </template>
 
 <script lang="ts">
-import { WidgetForm } from '../../config/naiveui'
+import { WidgetForm } from '../config/naiveui'
 import {defineComponent, PropType, reactive, ref, toRefs, watch} from 'vue'
 
 export default defineComponent({
diff --git a/src/core/naiveui/NaiveHeader.vue b/src/components/naiveui/components/NaiveHeader.vue
similarity index 96%
rename from src/core/naiveui/NaiveHeader.vue
rename to src/components/naiveui/components/NaiveHeader.vue
index 2ff2bca9a4227d7f1fa146d44b1feb9ce9a5f0cc..b464a1bb8d7c3a1878ffdf24e4ef5b523840f5c0 100644
--- a/src/core/naiveui/NaiveHeader.vue
+++ b/src/components/naiveui/components/NaiveHeader.vue
@@ -63,7 +63,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import SvgIcon from '../../components/SvgIcon.vue'
+import SvgIcon from '../../../components/SvgIcon.vue'
 
 export default defineComponent({
   name: 'NaiveHeader',
diff --git a/src/components/naiveui/components/configs/Alert.vue b/src/components/naiveui/components/configs/Alert.vue
new file mode 100644
index 0000000000000000000000000000000000000000..10894e4e445df48782bed3cb9a9bba89b8adb6aa
--- /dev/null
+++ b/src/components/naiveui/components/configs/Alert.vue
@@ -0,0 +1,78 @@
+<template>
+  <n-form-item label="标题" >
+    <n-input v-model:value="data.options.title" />
+  </n-form-item>
+  <n-form-item label="内容" >
+    <n-input type="textarea" v-model:value="data.options.content" />
+  </n-form-item>
+  <n-form-item label="类型">
+    <n-radio-group v-model:value="data.options.type" button-style="solid">
+      <n-radio-button value="default">默认</n-radio-button>
+      <n-radio-button value="info">信息</n-radio-button>
+      <n-radio-button value="success">成功</n-radio-button>
+      <n-radio-button value="warning">警告</n-radio-button>
+      <n-radio-button value="error">错误</n-radio-button>
+    </n-radio-group>
+  </n-form-item>
+  <n-form-item label="显示图标">
+    <n-switch
+        checked-children="是"
+        un-checked-children="否"
+        v-model:value="data.options.showIcon"
+    >
+      <template #checked>
+        是
+      </template>
+      <template #unchecked>
+        否
+      </template>
+    </n-switch>
+  </n-form-item>
+  <n-form-item label="允许关闭">
+    <n-switch
+        checked-children="是"
+        un-checked-children="否"
+        v-model:value="data.options.closable"
+    >
+      <template #checked>
+        是
+      </template>
+      <template #unchecked>
+        否
+      </template>
+    </n-switch>
+  </n-form-item>
+</template>
+<script lang="ts">
+import {defineComponent, reactive, ref, toRefs, watch} from 'vue'
+import SvgIcon from '../../../../components/SvgIcon.vue'
+export default defineComponent({
+  name: 'Alert',
+  components:{
+    SvgIcon
+  },
+  props: {
+    select: {
+      type: Object
+    }
+  },
+  emits: ['update:select'],
+  setup(props, context) {
+    const data = ref<any>(props.select)
+    watch(
+        () => props.select,
+        val => (data.value = val)
+    )
+    watch(data, val => context.emit('update:select', val))
+    return {
+      data,
+    }
+  }
+})
+
+</script>
+
+
+<style scoped>
+
+</style>
diff --git a/src/components/naiveui/components/configs/Button.vue b/src/components/naiveui/components/configs/Button.vue
new file mode 100644
index 0000000000000000000000000000000000000000..78d64cb7df0166ba9ed8dc24f1949a7f3acea3f0
--- /dev/null
+++ b/src/components/naiveui/components/configs/Button.vue
@@ -0,0 +1,127 @@
+<template>
+  <n-form-item label="文字" >
+    <n-input v-model:value="data.options.text" />
+  </n-form-item>
+  <n-form-item label="类型">
+    <n-radio-group v-model:value="data.options.type" button-style="solid">
+      <n-radio-button value="default">默认</n-radio-button>
+      <n-radio-button value="info">信息</n-radio-button>
+      <n-radio-button value="success">成功</n-radio-button>
+      <n-radio-button value="warning">警告</n-radio-button>
+      <n-radio-button value="error">错误</n-radio-button>
+    </n-radio-group>
+  </n-form-item>
+  <n-form-item
+      label="显示属性">
+    <n-space item-style="display: flex;" align="center">
+      <n-checkbox
+          v-model:checked="data.options.block"
+      >块级
+      </n-checkbox>
+      <n-checkbox
+          v-model:checked="data.options.bordered"
+      >显示边框
+      </n-checkbox>
+      <n-checkbox
+          v-model:checked="data.options.dashed"
+      >虚线边框
+      </n-checkbox>
+      <n-checkbox
+          v-model:checked="data.options.circle"
+      >圆形
+      </n-checkbox>
+      <n-checkbox
+          v-model:checked="data.options.ghost"
+      >透明
+      </n-checkbox>
+      <n-checkbox
+          v-model:checked="data.options.strong"
+      >文字加粗
+      </n-checkbox>
+      <n-checkbox
+          v-model:checked="data.options.textBtn"
+      >文本按钮
+      </n-checkbox>
+    </n-space>
+  </n-form-item>
+  <n-form-item>
+    <template #label>
+      颜色设置
+      <n-tooltip trigger="hover">
+        <template #trigger>
+          <n-icon size="18">
+            <SvgIcon iconClass="question" style="margin-right: 10px;" />
+          </n-icon>
+        </template>
+        注意：设置该项后 【类型】 将失效
+      </n-tooltip>
+    </template>
+    <n-grid x-gap="2" :cols="3">
+      <n-gi>
+        <n-form-item label="背景" path="color">
+          <n-color-picker v-model:value="data.options.color" :modes="['hex']"/>
+        </n-form-item>
+
+      </n-gi>
+      <n-gi>
+        <n-form-item label="文字" path="textColor">
+          <n-color-picker v-model:value="data.options.textColor" :modes="['hex']"/>
+        </n-form-item>
+      </n-gi>
+      <n-gi>
+        <n-form-item >
+          <n-button @click="resetColors">重置</n-button>
+        </n-form-item>
+      </n-gi>
+    </n-grid>
+  </n-form-item>
+  <n-form-item label="操作属性">
+    <n-checkbox
+        v-model:checked="data.options.disabled"
+    >禁用
+    </n-checkbox>
+    <n-checkbox
+        v-model:checked="data.options.loading"
+    >加载状态
+    </n-checkbox>
+  </n-form-item>
+</template>
+<script lang="ts">
+import {defineComponent, reactive, ref, toRefs, watch} from 'vue'
+export default defineComponent({
+  name: 'Alert',
+  components:{
+
+  },
+  props: {
+    select: {
+      type: Object
+    }
+  },
+  emits: ['update:select'],
+  setup(props, context) {
+    const data = ref<any>(props.select)
+    watch(
+        () => props.select,
+        val => (data.value = val)
+    )
+    watch(data, val => context.emit('update:select', val))
+
+    const resetColors =()=>{
+      data.value.options.color=null
+      data.value.options.textColor=null
+    }
+
+    return {
+      data,
+      resetColors
+    }
+  }
+})
+
+</script>
+
+
+<style scoped>
+
+</style>
diff --git a/src/components/naiveui/components/configs/Cascader.vue b/src/components/naiveui/components/configs/Cascader.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6b88dd93b0b6e47a91db28dde912fcc376b4ea66
--- /dev/null
+++ b/src/components/naiveui/components/configs/Cascader.vue
@@ -0,0 +1,392 @@
+<template>
+  <n-form-item label="是否可搜索">
+    <n-switch
+        checked-children="是"
+        un-checked-children="否"
+        v-model:value="data.options.filterable"
+    >
+      <template #checked>
+        是
+      </template>
+      <template #unchecked>
+        否
+      </template>
+    </n-switch>
+  </n-form-item>
+  <n-form-item label="在多选时是否关联选项">
+    <n-switch
+        checked-children="是"
+        un-checked-children="否"
+        v-model:value="data.options.cascade"
+    >
+      <template #checked>
+        是
+      </template>
+      <template #unchecked>
+        否
+      </template>
+    </n-switch>
+  </n-form-item>
+  <n-form-item label="模式">
+    <n-radio-group
+        button-style="solid"
+        v-model:value="data.options.multiple"
+        @change="handleSelectModeChange"
+    >
+      <n-radio-button :value="false">单选</n-radio-button>
+      <n-radio-button :value="true">多选</n-radio-button>
+    </n-radio-group>
+  </n-form-item>
+  <n-form-item label="子项展开方式">
+    <n-radio-group
+        button-style="solid"
+        v-model:value="data.options.expandTrigger">
+      <n-radio-button value="click">点击</n-radio-button>
+      <n-radio-button value="hover">鼠标移入</n-radio-button>
+    </n-radio-group>
+  </n-form-item>
+  <n-form-item label="选中策略">
+    <n-radio-group v-model:value="data.options.checkStrategy">
+      <n-radio-button value="all">
+        All
+      </n-radio-button>
+      <n-radio-button value="parent">
+        Parent
+      </n-radio-button>
+      <n-radio-button value="child">
+        Child
+      </n-radio-button>
+    </n-radio-group>
+  </n-form-item>
+  <n-form-item label="面板的弹出位置">
+    <n-select v-model:value="data.options.placement" :options="placementOptions"></n-select>
+  </n-form-item>
+  <n-form-item label="数据分隔符">
+    <n-input  v-model:value="data.options.separator"/>
+  </n-form-item>
+  <n-form-item label="选项" >
+    <div style="width: 100%">
+      <n-radio-group button-style="solid" v-model:value="data.options.remote">
+        <n-radio-button :value="false">静态数据</n-radio-button>
+        <n-radio-button :value="true">远端数据</n-radio-button>
+      </n-radio-group>
+      <n-space
+          v-if="data.options.remote"
+          direction="vertical"
+          style="margin-top: 10px;"
+      >
+
+        <n-input-group>
+          <n-input-group-label>远端方法</n-input-group-label>
+          <n-input  v-model:value="data.options.remoteFunc"/>
+        </n-input-group>
+
+        <n-input-group>
+          <n-input-group-label>标签</n-input-group-label>
+          <n-input  v-model:value="data.options.props.label"/>
+        </n-input-group>
+
+        <n-input-group>
+          <n-input-group-label>值</n-input-group-label>
+          <n-input  v-model:value="data.options.props.value"/>
+        </n-input-group>
+      </n-space>
+      <template v-else>
+        <div style="margin-top: 10px">
+          <n-button @click="addTreeData()" type="primary">添加</n-button>
+          <n-data-table style="margin-top: 10px;" id="selectTree-target"
+                        :columns="treeDataColumns"
+                        :data="data.options.options"
+                        :row-key="rowKey"
+                        :min-height="100"
+                        :max-height="500"
+                        default-expand-all
+          />
+          <n-drawer
+              v-model:show="showTreeDataDriwer"
+              width="100%"
+              height="200px"
+              placement="right"
+              :trap-focus="false"
+              :block-scroll="false"
+              to="#selectTree-target"
+          >
+            <n-drawer-content>
+              <n-form
+                  ref="treeDataFormRef"
+                  :label-width="80"
+                  :model="treeData"
+                  :rules="treeRules"
+              >
+                <n-form-item label="Label" path="label">
+                  <n-input v-model:value="treeData.label" placeholder="请输入" />
+                </n-form-item>
+                <n-form-item label="Value" path="value">
+                  <n-input v-model:value="treeData.value" placeholder="请输入" />
+                </n-form-item>
+              </n-form>
+              <template #footer>
+                <n-space>
+                  <n-button @click="showTreeDataDriwer = false">取消</n-button>
+                  <n-button type="primary" @click="submitTreeData">确定</n-button>
+                </n-space>
+              </template>
+            </n-drawer-content>
+          </n-drawer>
+        </div>
+      </template>
+    </div>
+  </n-form-item>
+  <n-form-item
+      label="显示属性">
+    <n-checkbox
+        v-model:checked="data.options.showLabel"
+    >显示标签
+    </n-checkbox>
+  </n-form-item>
+  <n-form-item label="操作属性">
+    <n-checkbox
+        v-model:checked="data.options.rules.required"
+    >必填
+    </n-checkbox
+    >
+    <n-checkbox
+        v-model:checked="data.options.disabled"
+    >禁用
+    </n-checkbox>
+    <n-checkbox
+        v-model:checked="data.options.allowClear"
+    >清除
+    </n-checkbox>
+  </n-form-item>
+</template>
+<script lang="ts">
+import {defineComponent, h, reactive, ref, watch,toRefs} from 'vue'
+import Draggable from 'vuedraggable'
+import SvgIcon from '../../../../components/SvgIcon.vue'
+import {RowData} from "../../types/NaiveWidgetTypes";
+import {DataTableColumns, FormInst, NButton, NSpace} from "naive-ui";
+import {v4} from "uuid";
+export default defineComponent({
+  components:{
+    Draggable,
+    SvgIcon,
+  },
+  name: 'InputWidget',
+  props: {
+    select: {
+      type: Object
+    }
+  },
+  emits: ['update:select'],
+  setup(props, context) {
+    const data = ref<any>(props.select)
+    const treeDataFormRef = ref<FormInst | null>(null)
+    watch(
+        () => props.select,
+        val => (data.value = val)
+    )
+    watch(data, val => context.emit('update:select', val))
+
+    const treeDataColumns = ({
+                               add,
+                               edit,
+                               remove,
+                             }: {
+      add: (rowData: RowData,rowIndex: number) => void
+      edit: (rowData: RowData,rowIndex: number) => void
+      remove: (rowData: RowData,rowIndex: number) => void
+    }): DataTableColumns<RowData> => {
+      return [
+        {
+          title: 'Label',
+          key: 'label',
+        },
+        {
+          title: 'Value',
+          key: 'value',
+        },
+        {
+          title: '操作',
+          key: 'action',
+          render(row,index) {
+            return h(NSpace, {}, [
+              h(NButton, {strong: true, tertiary: true, size: 'small',text:true,type:'primary', onClick: () => edit(row,index)}, {default: () => '编辑'}),
+              h(NButton, {strong: true, tertiary: true, size: 'small',text:true,type:'primary', onClick: () => add(row,index)}, {default: () => '添加下级'}),
+              h(NButton, {strong: true, tertiary: true, size: 'small',text:true,type:'error', onClick: () => remove(row,index)}, {default: () => '删除'})
+            ])
+          }
+        }
+      ]
+    }
+    const treeData: RowData ={
+      parentKey:null,
+      key: '',
+      label:'',
+      value:'',
+    }
+    const state = reactive({
+      placementOptions: [
+        {label: 'top-start', value: 'top-start'},
+        {label: 'top', value: 'top'},
+        {label: 'top-end', value: 'top-end'},
+        {label: 'right-start', value: 'right-start'},
+        {label: 'right', value: 'right'},
+        {label: 'right-end', value: 'right-end'},
+        {label: 'bottom-start', value: 'bottom-start'},
+        {label: 'bottom', value: 'bottom'},
+        {label: 'bottom-end', value: 'bottom-end'},
+        {label: 'left-start', value: 'left-start'},
+        {label: 'left', value: 'left'},
+        {label: 'left-end', value: 'left-end'},
+      ],
+      showTreeDataType:'add',
+      showTreeDataDriwer:false,
+      treeData,
+      parentTreeData:null,
+      treeRules: {
+        label: {
+          required: true,
+          message: '请输入',
+          trigger: ['input', 'blur']
+        },
+        value: {
+          required: true,
+          message: '请输入',
+          trigger: ['input', 'blur']
+        }
+      },
+      treeDataColumns: treeDataColumns({
+        add (rowData) {
+          state.parentTreeData = rowData
+          state.treeData = {
+            parentKey:rowData.key,
+            key: v4().replaceAll('-', ''),
+            label:'',
+            value:'',
+          }
+          state.showTreeDataDriwer=true
+          state.showTreeDataType='add'
+        },
+        edit (rowData,rowIndex) {
+          state.parentTreeData = getParentTreeInfo(rowData.parentKey)
+          state.treeData = Object.assign({},rowData)
+          state.showTreeDataDriwer=true
+          state.showTreeDataType='edit'
+        },
+        remove (rowData,rowIndex) {
+          if (rowData.parentKey){
+            let parentTreeData = getParentTreeInfo(rowData.parentKey)
+            parentTreeData?.children?.forEach((v,i)=>{
+              if (v.key===rowData.key){
+                parentTreeData.children.splice(i,1)
+              }
+            })
+          }else {
+            let index = getTreeFirstIndex(rowData.key)
+            if (index!=undefined) data.value.options.options.splice(index,1)
+          }
+        }
+      }),
+      rowKey: (row: RowData) => row.key
+    })
+
+    // 获取父级tree（naiveui不提供父级信息，此步也没有存库，无奈只能循环取）
+    const getParentTreeInfo = (parentKey:string) => {
+      let parent = null;
+      eachOptions(data.value.options.options)
+      function eachOptions(children) {
+        children.forEach(v=>{
+          if (v.key===parentKey){
+            parent=v
+            return
+          }
+          if (v.children){
+            eachOptions(v.children)
+          }
+        })
+      }
+      return parent
+    }
+    // 获取根据key获取tree的一级索引 （目前用于一级tree的删除）
+    const getTreeFirstIndex = (key:string) => {
+      for (let i = 0; i <data.value.options.options.length; i++) {
+        if (data.value.options.options[i].key===key){
+          return i;
+        }
+      }
+    }
+
+    const handleSelectModeChange = (event: any) => {
+      const { value } = event.target
+      if (value!=='true') {
+        data.value.options.rules.type='string'
+        data.value.options.defaultValue.length
+            ? (data.value.options.defaultValue =
+                data.value.options.defaultValue[0])
+            : (data.value.options.defaultValue = null)
+      } else {
+        data.value.options.rules.type='array'
+        if (data.value.options.defaultValue) {
+          if (!(data.value.options.defaultValue instanceof Array)) {
+            data.value.options.defaultValue = [data.value.options.defaultValue]
+          }
+        } else {
+          data.value.options.defaultValue = []
+        }
+      }
+    }
+
+    const addTreeData = ()=>{
+      state.parentTreeData = null
+      state.treeData = {
+        parentKey:null,
+        key: v4().replaceAll('-', ''),
+        label:'',
+        value:'',
+      }
+      state.showTreeDataDriwer=true
+    }
+    const submitTreeData = (e: MouseEvent)=> {
+      e.preventDefault()
+      treeDataFormRef.value?.validate((errors) => {
+        if (!errors) {
+          if (state.parentTreeData){
+            if (state.showTreeDataType==='add'){
+              if (!state.parentTreeData.children) state.parentTreeData.children = []
+              state.parentTreeData.children.push(state.treeData)
+            }else {
+              state.parentTreeData.children.forEach((v,i)=>{
+                if (v.key===state.treeData.key){
+                  state.parentTreeData.children.splice(i,1,state.treeData)
+                }
+              })
+            }
+          }else{
+            data.value.options.options.push(state.treeData)
+          }
+          state.showTreeDataDriwer=false
+        } else {
+          console.log(errors)
+        }
+      })
+    }
+    return {
+      ...toRefs(state),
+      data,
+      treeDataFormRef,
+      handleSelectModeChange,
+      addTreeData,
+      submitTreeData,
+    }
+  }
+})
+
+</script>
+
+
+<style scoped lang="less">
+/deep/ .n-dynamic-input .n-dynamic-input-item .n-dynamic-input-item__action{
+  margin: 0 0 0 10px;
+}
+</style>
diff --git a/src/components/naiveui/components/configs/Checkbox.vue b/src/components/naiveui/components/configs/Checkbox.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0e8be579c9b7061a31ed5995507c4d66801bcf26
--- /dev/null
+++ b/src/components/naiveui/components/configs/Checkbox.vue
@@ -0,0 +1,128 @@
+<template>
+  <n-form-item label="布局方式">
+    <n-radio-group button-style="solid" v-model:value="data.options.groupType">
+      <n-radio-button value="radioGroup">单选组</n-radio-button>
+      <n-radio-button value="buttonGroup">按钮组</n-radio-button>
+    </n-radio-group>
+  </n-form-item>
+  <n-form-item label="选项">
+    <div>
+      <n-radio-group button-style="solid" v-model:value="data.options.remote">
+        <n-radio-button :value="false">静态数据</n-radio-button>
+        <n-radio-button :value="true">远端数据</n-radio-button>
+      </n-radio-group>
+      <n-space
+          v-if="data.options.remote"
+          direction="vertical"
+          style="margin-top: 10px;"
+      >
+
+        <n-input-group>
+          <n-input-group-label>远端方法</n-input-group-label>
+          <n-input  v-model:value="data.options.remoteFunc"/>
+        </n-input-group>
+
+        <n-input-group>
+          <n-input-group-label>标签</n-input-group-label>
+          <n-input  v-model:value="data.options.props.label"/>
+        </n-input-group>
+
+        <n-input-group>
+          <n-input-group-label>值</n-input-group-label>
+          <n-input  v-model:value="data.options.props.value"/>
+        </n-input-group>
+      </n-space>
+      <template v-else>
+        <n-checkbox-group v-model:value="data.options.defaultValue" style="margin-top: 10px;">
+          <n-dynamic-input v-model:value="data.options.options" :on-create="handleInsertOption" show-sort-button>
+            <template #default="{ value }">
+              <div style="display: flex; align-items: center; width: 100%">
+                <n-checkbox
+                    :value="value.value"
+                    style="margin-right: 5px"
+                />
+                <n-input v-model:value="value.label" type="text" style="margin-right: 12px; width: 160px"/>
+                <n-input v-model:value="value.value" type="text" />
+              </div>
+            </template>
+          </n-dynamic-input>
+        </n-checkbox-group>
+
+      </template>
+    </div>
+  </n-form-item>
+  <n-form-item
+      label="显示属性">
+    <n-checkbox
+        v-model:checked="data.options.showLabel"
+    >显示标签
+    </n-checkbox>
+  </n-form-item>
+  <n-form-item label="操作属性">
+    <n-checkbox
+        v-model:checked="data.options.rules.required"
+    >必填
+    </n-checkbox
+    >
+    <n-checkbox
+        v-model:checked="data.options.disabled"
+    >禁用
+    </n-checkbox>
+  </n-form-item>
+</template>
+<script lang="ts">
+import {defineComponent, ref, watch} from 'vue'
+import Draggable from 'vuedraggable'
+import SvgIcon from '../../../../components/SvgIcon.vue'
+export default defineComponent({
+  components:{
+    Draggable,
+    SvgIcon,
+  },
+  name: 'InputWidget',
+  props: {
+    select: {
+      type: Object
+    }
+  },
+  emits: ['update:select'],
+  setup(props, context) {
+    const data = ref<any>(props.select)
+    watch(
+        () => props.select,
+        val => (data.value = val)
+    )
+    watch(data, val => context.emit('update:select', val))
+
+    const handleInsertOption = () => {
+      const length = data.value.options.options.length + 1
+      return {
+        label: `Option ${length}`,
+        value: `Option ${length}`
+      }
+    }
+
+    const handleOptionsRemove = (index: number) => {
+      if (data.value.type === 'grid') {
+        data.value.columns.splice(index, 1)
+      } else {
+        data.value.options.options.splice(index, 1)
+      }
+    }
+
+    return {
+      data,
+      handleInsertOption,
+      handleOptionsRemove,
+    }
+  }
+})
+
+</script>
+
+
+<style scoped lang="less">
+/deep/ .n-dynamic-input .n-dynamic-input-item .n-dynamic-input-item__action{
+  margin: 0 0 0 10px;
+}
+</style>
diff --git a/src/components/naiveui/components/configs/Color.vue b/src/components/naiveui/components/configs/Color.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8f78d9ae4d685e3087d4ea259fd2738bb8b23c1a
--- /dev/null
+++ b/src/components/naiveui/components/configs/Color.vue
@@ -0,0 +1,133 @@
+<template>
+  <n-form-item label="默认值">
+    <n-color-picker v-model:value="data.options.defaultValue"
+                    :show-alpha="data.options.showAlpha"
+                    :show-preview="data.options.showPreview"
+                    :placement="data.options.placement"/>
+  </n-form-item>
+  <n-form-item
+      label="显示属性">
+    <n-checkbox
+        v-model:checked="data.options.showLabel"
+    >显示标签
+    </n-checkbox>
+  </n-form-item>
+  <n-form-item>
+    <template #label>
+      可用模式
+      <n-tooltip trigger="hover">
+        <template #trigger>
+          <n-icon size="18">
+            <SvgIcon iconClass="question" style="margin-right: 10px;" />
+          </n-icon>
+        </template>
+        颜色选择器支持颜色的格式<br/>注意一旦你在某个模式下选择了值，颜色选择器值的格式将跟随这个格式
+      </n-tooltip>
+    </template>
+    <n-checkbox-group v-model:value="data.options.modes">
+      <n-space item-style="display: flex;">
+        <n-checkbox value="rgb" label="rgb" />
+        <n-checkbox value="hex" label="hex" />
+        <n-checkbox value="hsl" label="hsl" />
+        <n-checkbox value="hsv" label="hsv" />
+      </n-space>
+    </n-checkbox-group>
+  </n-form-item>
+
+  <n-form-item label="是否可调节alpha通道">
+    <n-switch
+        checked-children="是"
+        un-checked-children="否"
+        v-model:value="data.options.showAlpha"
+    >
+      <template #checked>
+        是
+      </template>
+      <template #unchecked>
+        否
+      </template>
+    </n-switch>
+  </n-form-item>
+  <n-form-item label="是否展示颜色预览块">
+    <n-switch
+        checked-children="是"
+        un-checked-children="否"
+        v-model:value="data.options.showPreview"
+    >
+      <template #checked>
+        是
+      </template>
+      <template #unchecked>
+        否
+      </template>
+    </n-switch>
+  </n-form-item>
+  <n-form-item label="面板的弹出位置">
+    <n-select v-model:value="data.options.placement" :options="colorPlacementOptions"></n-select>
+  </n-form-item>
+
+  <n-form-item label="操作属性">
+    <n-space item-style="display: flex;" align="center">
+      <n-checkbox
+          v-model:checked="data.options.rules.required"
+      >必填
+      </n-checkbox
+      >
+      <n-checkbox
+          v-model:checked="data.options.disabled"
+      >禁用
+      </n-checkbox>
+    </n-space>
+  </n-form-item>
+</template>
+<script lang="ts">
+import {defineComponent, reactive, ref, toRefs, watch} from 'vue'
+import SvgIcon from '../../../../components/SvgIcon.vue'
+export default defineComponent({
+  name: 'InputWidget',
+  components:{
+    SvgIcon
+  },
+  props: {
+    select: {
+      type: Object
+    }
+  },
+  emits: ['update:select'],
+  setup(props, context) {
+    const data = ref<any>(props.select)
+    watch(
+        () => props.select,
+        val => (data.value = val)
+    )
+    watch(data, val => context.emit('update:select', val))
+
+    const state = reactive({
+      colorPlacementOptions: [
+        {label: 'top-start', value: 'top-start'},
+        {label: 'top', value: 'top'},
+        {label: 'top-end', value: 'top-end'},
+        {label: 'right-start', value: 'right-start'},
+        {label: 'right', value: 'right'},
+        {label: 'right-end', value: 'right-end'},
+        {label: 'bottom-start', value: 'bottom-start'},
+        {label: 'bottom', value: 'bottom'},
+        {label: 'bottom-end', value: 'bottom-end'},
+        {label: 'left-start', value: 'left-start'},
+        {label: 'left', value: 'left'},
+        {label: 'left-end', value: 'left-end'},
+      ],
+    })
+    return {
+      ...toRefs(state),
+      data,
+    }
+  }
+})
+
+</script>
+
+
+<style scoped>
+
+</style>
diff --git a/src/components/naiveui/components/configs/Date.vue b/src/components/naiveui/components/configs/Date.vue
new file mode 100644
index 0000000000000000000000000000000000000000..51718ba59c530b91c79999d65d5d959d40752ef7
--- /dev/null
+++ b/src/components/naiveui/components/configs/Date.vue
@@ -0,0 +1,90 @@
+<template>
+  <n-form-item label="默认值">
+    <n-date-picker
+        style="width: 100%;"
+        v-model:value="data.options.defaultValue"
+        :format="data.options.format"
+        :placeholder="data.options.placeholder"
+    />
+  </n-form-item>
+  <n-form-item label="组件类型">
+    <n-radio-group v-model:value="data.options.type" @change="changeDateType">
+      <n-radio-button value="date" label="日期"/>
+      <n-radio-button value="month" label="月份"/>
+      <n-radio-button value="quarter" label="季度"/>
+      <n-radio-button value="year" label="年份"/>
+    </n-radio-group>
+  </n-form-item>
+  <n-form-item label="格式">
+    <n-input v-model:value="data.options.format" />
+  </n-form-item>
+  <n-form-item label="绑定值格式">
+    <n-input v-model:value="data.options.valueFormat" />
+  </n-form-item>
+
+  <n-form-item label="操作属性">
+    <n-checkbox
+        v-model:checked="data.options.rules.required"
+    >必填
+    </n-checkbox
+    >
+    <n-checkbox
+        v-model:checked="data.options.disabled"
+    >禁用
+    </n-checkbox>
+    <n-checkbox
+        v-model:checked="data.options.allowClear"
+    >清除
+    </n-checkbox>
+  </n-form-item>
+</template>
+<script lang="ts">
+import {defineComponent, ref, watch} from 'vue'
+
+export default defineComponent({
+  name: 'InputWidget',
+  props: {
+    select: {
+      type: Object
+    }
+  },
+  emits: ['update:select'],
+  setup(props, context) {
+    const data = ref<any>(props.select)
+    watch(
+        () => props.select,
+        val => (data.value = val)
+    )
+    watch(data, val => context.emit('update:select', val))
+
+    const changeDateType = (e: Event)=> {
+      let value = (e.target as HTMLInputElement).value
+      switch (value) {
+        case 'date':
+          data.value.options.format='yyyy-MM-dd';
+          break
+        case 'month':
+          data.value.options.format='yyyy-MM';
+          break
+        case 'quarter':
+          data.value.options.format='yyyy-第Q季度';
+          break
+        case 'year':
+          data.value.options.format='yyyy';
+          break
+      }
+    }
+
+    return {
+      data,
+      changeDateType
+    }
+  }
+})
+
+</script>
+
+
+<style scoped>
+
+</style>
diff --git a/src/components/naiveui/components/configs/Divider.vue b/src/components/naiveui/components/configs/Divider.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b62034fc0a3da94d836fcc70433fcb1041260cc8
--- /dev/null
+++ b/src/components/naiveui/components/configs/Divider.vue
@@ -0,0 +1,82 @@
+<template>
+  <n-form-item label="文字" >
+    <n-input v-model:value="data.options.text" />
+  </n-form-item>
+  <n-form-item label="标题位置">
+    <n-radio-group v-model:value="data.options.titlePlacement" button-style="solid">
+      <n-radio-button value="left">居左</n-radio-button>
+      <n-radio-button value="center">居中</n-radio-button>
+      <n-radio-button value="right">居右</n-radio-button>
+    </n-radio-group>
+  </n-form-item>
+  <n-form-item
+      label="显示属性">
+    <n-checkbox
+        v-model:checked="data.options.dashed"
+    >虚线
+    </n-checkbox>
+    <n-tooltip trigger="hover">
+      <template #trigger>
+        <n-checkbox
+            v-model:checked="data.options.vertical"
+        >垂直
+        </n-checkbox>
+      </template>
+      启用垂直后标题位置将不再受控，标题默认将放置在线左侧
+    </n-tooltip>
+  </n-form-item>
+</template>
+<script lang="ts">
+import {defineComponent, reactive, ref, toRefs, watch} from 'vue'
+export default defineComponent({
+  name: 'Alert',
+  components:{
+
+  },
+  props: {
+    select: {
+      type: Object
+    }
+  },
+  emits: ['update:select'],
+  setup(props, context) {
+    const data = ref<any>(props.select)
+    watch(
+        () => props.select,
+        val => (data.value = val)
+    )
+    watch(data, val => context.emit('update:select', val))
+
+    const state = reactive({
+      verifyOptions:[
+        {label:'字符串',value:'6px'},
+        {label:'数字',value:'8'},
+        {label:'布尔值',value:'9'},
+        {label:'方法',value:'method'},
+        {label:'正则表达式',value:'regexp'},
+        {label:'整数',value:'integer'},
+        {label:'浮点数',value:'float'},
+        {label:'数组',value:'array'},
+        {label:'对象',value:'object'},
+        {label:'枚举',value:'enum'},
+        {label:'日期',value:'date'},
+        {label:'URL地址',value:'url'},
+        {label:'十六进制',value:'hex'},
+        {label:'邮箱地址',value:'email'},
+        {label:'任意类型',value:'any'},
+      ],
+    })
+
+    return {
+      ...toRefs(state),
+      data,
+    }
+  }
+})
+
+</script>
+
+
+<style scoped>
+
+</style>
diff --git a/src/components/naiveui/components/configs/DynamicTags.vue b/src/components/naiveui/components/configs/DynamicTags.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7de322a68afe8eac4bd551ab6a581de0c0212ba6
--- /dev/null
+++ b/src/components/naiveui/components/configs/DynamicTags.vue
@@ -0,0 +1,116 @@
+<template>
+  <n-form-item label="最大值">
+    <n-input-number v-model:value.number="data.options.max" />
+  </n-form-item>
+
+  <n-form-item label="类型">
+    <n-radio-group v-model:value="data.options.type" button-style="solid">
+      <n-radio-button value="default">默认</n-radio-button>
+      <n-radio-button value="info">信息</n-radio-button>
+      <n-radio-button value="success">成功</n-radio-button>
+      <n-radio-button value="warning">警告</n-radio-button>
+      <n-radio-button value="error">错误</n-radio-button>
+    </n-radio-group>
+  </n-form-item>
+  <n-form-item label="标签颜色">
+    <template #label>
+      标签颜色
+      <n-tooltip trigger="hover">
+        <template #trigger>
+          <n-icon size="18">
+            <SvgIcon iconClass="question" style="margin-right: 10px;" />
+          </n-icon>
+        </template>
+        注意：设置该项后 【类型】 将失效
+      </n-tooltip>
+    </template>
+    <n-grid x-gap="2" :cols="4">
+      <n-gi>
+        <n-form-item label="背景" path="color">
+          <n-color-picker v-model:value="data.options.color.color" :modes="['hex']"/>
+        </n-form-item>
+
+      </n-gi>
+      <n-gi>
+        <n-form-item label="边框" path="borderColor">
+          <n-color-picker v-model:value="data.options.color.borderColor" :modes="['hex']"/>
+        </n-form-item>
+      </n-gi>
+      <n-gi>
+        <n-form-item label="文字" path="textColor">
+          <n-color-picker v-model:value="data.options.color.textColor" :modes="['hex']"/>
+        </n-form-item>
+      </n-gi>
+      <n-gi>
+        <n-form-item >
+          <n-button @click="resetColors">重置</n-button>
+        </n-form-item>
+      </n-gi>
+    </n-grid>
+  </n-form-item>
+  <n-form-item
+      label="显示属性">
+    <n-checkbox
+        v-model:checked="data.options.showLabel"
+    >显示标签
+    </n-checkbox>
+    <n-checkbox
+        v-model:checked="data.options.round"
+    >圆角
+    </n-checkbox>
+    <n-checkbox
+        v-model:checked="data.options.closable"
+    >允许关闭
+    </n-checkbox>
+  </n-form-item>
+  <n-form-item label="操作属性">
+    <n-checkbox
+        v-model:checked="data.options.rules.required"
+    >必填
+    </n-checkbox
+    >
+    <n-checkbox
+        v-model:checked="data.options.disabled"
+    >禁用
+    </n-checkbox>
+  </n-form-item>
+</template>
+<script lang="ts">
+import {defineComponent, reactive, ref, toRefs, watch} from 'vue'
+import SvgIcon from '../../../../components/SvgIcon.vue'
+export default defineComponent({
+  name: 'Alert',
+  components:{
+    SvgIcon
+  },
+  props: {
+    select: {
+      type: Object
+    }
+  },
+  emits: ['update:select'],
+  setup(props, context) {
+    const data = ref<any>(props.select)
+    watch(
+        () => props.select,
+        val => (data.value = val)
+    )
+    watch(data, val => context.emit('update:select', val))
+    const resetColors =()=>{
+      data.value.options.color.color=null
+      data.value.options.color.borderColor=null
+      data.value.options.color.textColor=null
+    }
+    return {
+      data,
+      resetColors
+    }
+  }
+})
+
+</script>
+
+
+<style scoped>
+
+</style>
diff --git a/src/components/naiveui/components/configs/Grid.vue b/src/components/naiveui/components/configs/Grid.vue
new file mode 100644
index 0000000000000000000000000000000000000000..318826b2a6d6eacdd2fdcc96616cab75d9aecb49
--- /dev/null
+++ b/src/components/naiveui/components/configs/Grid.vue
@@ -0,0 +1,84 @@
+<template>
+  <n-form-item label="栅格列数">
+    <n-input-number v-model:value="data.options.cols" :min="1" />
+  </n-form-item>
+  <n-form-item label="横向间隔槽">
+    <n-input-number v-model:value="data.options.xGap" :min="0" />
+  </n-form-item>
+  <n-form-item label="纵向间隔槽">
+    <n-input-number v-model:value="data.options.yGap" :min="0" />
+  </n-form-item>
+
+  <n-form-item label="列配置项" class="fc-form-item-block">
+    <n-dynamic-input v-model:value="data.columns" :on-create="handleInsertColumn" show-sort-button>
+      <template #default="{ value }">
+        <n-input-number
+            placeholder="栅格值"
+            v-model:value="value.span"
+            :min="0"
+            :max="data.options.cols"
+        />
+      </template>
+    </n-dynamic-input>
+
+  </n-form-item>
+  <!--      <n-form-item label="子元素是否可具有响应式宽度">
+          <n-switch
+              v-model:value="data.options.itemResponsive"
+          >
+            <template #checked>
+              是
+            </template>
+            <template #unchecked>
+              否
+            </template>
+          </n-switch>
+        </n-form-item>-->
+</template>
+<script lang="ts">
+import {defineComponent, ref, watch} from 'vue'
+import SvgIcon from '../../../../components/SvgIcon.vue'
+export default defineComponent({
+  name: 'GridWidget',
+  components:{
+    SvgIcon
+  },
+  props: {
+    select: {
+      type: Object
+    }
+  },
+  emits: ['update:select'],
+  setup(props, context) {
+    const data = ref<any>(props.select)
+    watch(
+        () => props.select,
+        val => (data.value = val)
+    )
+    watch(data, val => context.emit('update:select', val))
+
+    const handleInsertColumn = () => {
+      return{
+        span: 12,
+        list: []
+      }
+    }
+
+    const handleOptionsRemove = (index: number) => {
+      data.value.columns.splice(index, 1)
+    }
+
+    return {
+      data,
+      handleInsertColumn,
+      handleOptionsRemove
+    }
+  }
+})
+
+</script>
+
+
+<style scoped>
+
+</style>
diff --git a/src/components/naiveui/components/configs/Input.vue b/src/components/naiveui/components/configs/Input.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e02dd51249e76ef5623fa8b6e932e7f661bd09f8
--- /dev/null
+++ b/src/components/naiveui/components/configs/Input.vue
@@ -0,0 +1,85 @@
+<template>
+  <n-form-item
+      label="默认内容">
+    <n-input v-model:value="data.options.defaultValue"/>
+  </n-form-item>
+  <n-form-item label="最大长度">
+    <n-input v-model:value.number="data.options.maxlength"/>
+  </n-form-item>
+  <n-form-item
+      label="显示属性">
+    <n-checkbox
+        v-model:checked="data.options.showLabel"
+    >显示标签
+    </n-checkbox>
+    <n-checkbox
+        v-model:checked="data.options.showCount"
+    >显示字数
+    </n-checkbox
+    >
+    <n-checkbox
+        v-model:checked="data.options.round"
+    >圆角
+    </n-checkbox
+    >
+  </n-form-item>
+  <n-form-item label="输入框类型">
+    <n-radio-group v-model:value="data.options.type">
+      <n-radio-button value="text" label="单行文本"/>
+      <n-radio-button value="textarea" label="多行文本"/>
+      <n-radio-button value="password" label="密码框"/>
+    </n-radio-group>
+  </n-form-item>
+  <n-form-item label="前缀">
+    <n-input v-model:value="data.options.prefix"/>
+  </n-form-item>
+
+  <n-form-item label="后缀">
+    <n-input v-model:value="data.options.suffix"/>
+  </n-form-item>
+  <n-form-item label="操作属性">
+    <n-checkbox
+        v-model:checked="data.options.rules.required"
+    >必填
+    </n-checkbox
+    >
+    <n-checkbox
+        v-model:checked="data.options.disabled"
+    >禁用
+    </n-checkbox>
+    <n-checkbox
+        v-model:checked="data.options.allowClear"
+    >清除
+    </n-checkbox>
+  </n-form-item>
+</template>
+<script lang="ts">
+import {defineComponent, ref, watch} from 'vue'
+
+export default defineComponent({
+  name: 'InputWidget',
+  props: {
+    select: {
+      type: Object
+    }
+  },
+  emits: ['update:select'],
+  setup(props, context) {
+    const data = ref<any>(props.select)
+    watch(
+        () => props.select,
+        val => (data.value = val)
+    )
+    watch(data, val => context.emit('update:select', val))
+    return {
+      data,
+    }
+  }
+})
+
+</script>
+
+
+<style scoped>
+
+</style>
diff --git a/src/components/naiveui/components/configs/Number.vue b/src/components/naiveui/components/configs/Number.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2a6a002c1270317c914f321b75db9279490ba9a0
--- /dev/null
+++ b/src/components/naiveui/components/configs/Number.vue
@@ -0,0 +1,69 @@
+<template>
+  <n-form-item
+      label="默认内容">
+    <n-input v-model:value="data.options.defaultValue"/>
+  </n-form-item>
+  <n-form-item label="最大值">
+    <n-input-number v-model:value.number="data.options.max" />
+  </n-form-item>
+
+  <n-form-item label="最小值">
+    <n-input-number v-model:value.number="data.options.min" />
+  </n-form-item>
+
+  <n-form-item label="步长">
+    <n-input-number v-model:value.number="data.options.step" :min="0" />
+  </n-form-item>
+  <n-form-item
+      label="显示属性">
+    <n-checkbox
+        v-model:checked="data.options.showLabel"
+    >显示标签
+    </n-checkbox>
+  </n-form-item>
+  <n-form-item label="操作属性">
+    <n-checkbox
+        v-model:checked="data.options.rules.required"
+    >必填
+    </n-checkbox
+    >
+    <n-checkbox
+        v-model:checked="data.options.disabled"
+    >禁用
+    </n-checkbox>
+    <n-checkbox
+        v-model:checked="data.options.allowClear"
+    >清除
+    </n-checkbox>
+  </n-form-item>
+</template>
+<script lang="ts">
+import {defineComponent, ref, watch} from 'vue'
+
+export default defineComponent({
+  name: 'InputWidget',
+  props: {
+    select: {
+      type: Object
+    }
+  },
+  emits: ['update:select'],
+  setup(props, context) {
+    const data = ref<any>(props.select)
+    watch(
+        () => props.select,
+        val => (data.value = val)
+    )
+    watch(data, val => context.emit('update:select', val))
+    return {
+      data,
+    }
+  }
+})
+
+</script>
+
+
+<style scoped>
+
+</style>
diff --git a/src/components/naiveui/components/configs/Radio.vue b/src/components/naiveui/components/configs/Radio.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4bab301ae7dd7e3088eef0f922605991eaf1c90e
--- /dev/null
+++ b/src/components/naiveui/components/configs/Radio.vue
@@ -0,0 +1,128 @@
+<template>
+  <n-form-item label="布局方式">
+    <n-radio-group button-style="solid" v-model:value="data.options.groupType">
+      <n-radio-button value="radioGroup">单选组</n-radio-button>
+      <n-radio-button value="buttonGroup">按钮组</n-radio-button>
+    </n-radio-group>
+  </n-form-item>
+  <n-form-item label="选项">
+    <div>
+      <n-radio-group button-style="solid" v-model:value="data.options.remote">
+        <n-radio-button :value="false">静态数据</n-radio-button>
+        <n-radio-button :value="true">远端数据</n-radio-button>
+      </n-radio-group>
+      <n-space
+          v-if="data.options.remote"
+          direction="vertical"
+          style="margin-top: 10px;"
+      >
+
+        <n-input-group>
+          <n-input-group-label>远端方法</n-input-group-label>
+          <n-input  v-model:value="data.options.remoteFunc"/>
+        </n-input-group>
+
+        <n-input-group>
+          <n-input-group-label>标签</n-input-group-label>
+          <n-input  v-model:value="data.options.props.label"/>
+        </n-input-group>
+
+        <n-input-group>
+          <n-input-group-label>值</n-input-group-label>
+          <n-input  v-model:value="data.options.props.value"/>
+        </n-input-group>
+      </n-space>
+      <template v-else>
+        <n-radio-group v-model:value="data.options.defaultValue" style="margin-top: 10px;">
+          <n-dynamic-input v-model:value="data.options.options" :on-create="handleInsertOption" show-sort-button>
+            <template #default="{ value }">
+              <div style="display: flex; align-items: center; width: 100%">
+                <n-radio
+                    :value="value.value"
+                    style="margin-right: 5px"
+                />
+                <n-input v-model:value="value.label" type="text" style="margin-right: 12px; width: 160px"/>
+                <n-input v-model:value="value.value" type="text" />
+              </div>
+            </template>
+          </n-dynamic-input>
+        </n-radio-group>
+
+      </template>
+    </div>
+  </n-form-item>
+  <n-form-item
+      label="显示属性">
+    <n-checkbox
+        v-model:checked="data.options.showLabel"
+    >显示标签
+    </n-checkbox>
+  </n-form-item>
+  <n-form-item label="操作属性">
+    <n-checkbox
+        v-model:checked="data.options.rules.required"
+    >必填
+    </n-checkbox
+    >
+    <n-checkbox
+        v-model:checked="data.options.disabled"
+    >禁用
+    </n-checkbox>
+  </n-form-item>
+</template>
+<script lang="ts">
+import {defineComponent, ref, watch} from 'vue'
+import Draggable from 'vuedraggable'
+import SvgIcon from '../../../../components/SvgIcon.vue'
+export default defineComponent({
+  components:{
+    Draggable,
+    SvgIcon,
+  },
+  name: 'InputWidget',
+  props: {
+    select: {
+      type: Object
+    }
+  },
+  emits: ['update:select'],
+  setup(props, context) {
+    const data = ref<any>(props.select)
+    watch(
+        () => props.select,
+        val => (data.value = val)
+    )
+    watch(data, val => context.emit('update:select', val))
+
+    const handleInsertOption = () => {
+      const length = data.value.options.options.length + 1
+      return {
+        label: `Option ${length}`,
+        value: `Option ${length}`
+      }
+    }
+
+    const handleOptionsRemove = (index: number) => {
+      if (data.value.type === 'grid') {
+        data.value.columns.splice(index, 1)
+      } else {
+        data.value.options.options.splice(index, 1)
+      }
+    }
+
+    return {
+      data,
+      handleInsertOption,
+      handleOptionsRemove,
+    }
+  }
+})
+
+</script>
+
+
+<style scoped lang="less">
+/deep/ .n-dynamic-input .n-dynamic-input-item .n-dynamic-input-item__action{
+  margin: 0 0 0 10px;
+}
+</style>
diff --git a/src/components/naiveui/components/configs/Rate.vue b/src/components/naiveui/components/configs/Rate.vue
new file mode 100644
index 0000000000000000000000000000000000000000..00dfd7cb3616c348c3a49fca344df673b1d68a84
--- /dev/null
+++ b/src/components/naiveui/components/configs/Rate.vue
@@ -0,0 +1,79 @@
+<template>
+  <n-form-item label="默认值">
+    <n-rate
+        v-model:value="data.options.defaultValue"
+        :count="data.options.max"
+        :allowHalf="data.options.allowHalf"
+        :allowClear="data.options.allowClear"
+    />
+  </n-form-item>
+  <n-form-item label="最大值">
+    <n-input-number v-model:value.number="data.options.max" />
+  </n-form-item>
+  <n-form-item label="是否允许半选">
+    <n-switch
+        checked-children="是"
+        un-checked-children="否"
+        v-model:value="data.options.allowHalf"
+    >
+      <template #checked>
+        是
+      </template>
+      <template #unchecked>
+        否
+      </template>
+    </n-switch>
+  </n-form-item>
+  <n-form-item
+      label="显示属性">
+    <n-checkbox
+        v-model:checked="data.options.showLabel"
+    >显示标签
+    </n-checkbox>
+  </n-form-item>
+  <n-form-item label="操作属性">
+    <n-checkbox
+        v-model:checked="data.options.rules.required"
+    >必填
+    </n-checkbox
+    >
+    <n-checkbox
+        v-model:checked="data.options.disabled"
+    >禁用
+    </n-checkbox>
+    <n-checkbox
+        v-model:checked="data.options.allowClear"
+    >清除
+    </n-checkbox>
+  </n-form-item>
+</template>
+<script lang="ts">
+import {defineComponent, ref, watch} from 'vue'
+
+export default defineComponent({
+  name: 'InputWidget',
+  props: {
+    select: {
+      type: Object
+    }
+  },
+  emits: ['update:select'],
+  setup(props, context) {
+    const data = ref<any>(props.select)
+    watch(
+        () => props.select,
+        val => (data.value = val)
+    )
+    watch(data, val => context.emit('update:select', val))
+    return {
+      data,
+    }
+  }
+})
+
+</script>
+
+
+<style scoped>
+
+</style>
diff --git a/src/components/naiveui/components/configs/RichtextEditor.vue b/src/components/naiveui/components/configs/RichtextEditor.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3dbea813c2fbaf4176c274818d88575284965839
--- /dev/null
+++ b/src/components/naiveui/components/configs/RichtextEditor.vue
@@ -0,0 +1,53 @@
+<template>
+  <n-form-item label="默认内容">
+    <n-input type="textarea" v-model:value="data.options.defaultValue"/>
+  </n-form-item>
+  <n-form-item
+      label="显示属性">
+    <n-checkbox
+        v-model:checked="data.options.showLabel"
+    >显示标签
+    </n-checkbox>
+  </n-form-item>
+  <n-form-item label="操作属性">
+    <n-checkbox
+        v-model:checked="data.options.rules.required"
+    >必填
+    </n-checkbox
+    >
+    <n-checkbox
+        v-model:checked="data.options.disabled"
+    >禁用
+    </n-checkbox>
+  </n-form-item>
+</template>
+<script lang="ts">
+import {defineComponent, ref, watch} from 'vue'
+
+export default defineComponent({
+  name: 'RichtextEditorWidget',
+  props: {
+    select: {
+      type: Object
+    }
+  },
+  emits: ['update:select'],
+  setup(props, context) {
+    const data = ref<any>(props.select)
+    watch(
+        () => props.select,
+        val => (data.value = val)
+    )
+    watch(data, val => context.emit('update:select', val))
+    return {
+      data,
+    }
+  }
+})
+
+</script>
+
+
+<style scoped>
+
+</style>
diff --git a/src/components/naiveui/components/configs/Select.vue b/src/components/naiveui/components/configs/Select.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8d3028b63c945919e05c4015208071b631e8ee4b
--- /dev/null
+++ b/src/components/naiveui/components/configs/Select.vue
@@ -0,0 +1,182 @@
+<template>
+  <n-form-item label="是否可搜索">
+    <n-switch
+        checked-children="是"
+        un-checked-children="否"
+        v-model:value="data.options.filterable"
+    >
+      <template #checked>
+        是
+      </template>
+      <template #unchecked>
+        否
+      </template>
+    </n-switch>
+  </n-form-item>
+  <n-form-item label="模式">
+    <n-radio-group
+        button-style="solid"
+        v-model:value="data.options.multiple"
+        @change="handleSelectModeChange"
+    >
+      <n-radio-button :value="false">单选</n-radio-button>
+      <n-radio-button :value="true">多选</n-radio-button>
+    </n-radio-group>
+  </n-form-item>
+  <n-form-item label="选项">
+    <div>
+      <n-radio-group button-style="solid" v-model:value="data.options.remote">
+        <n-radio-button :value="false">静态数据</n-radio-button>
+        <n-radio-button :value="true">远端数据</n-radio-button>
+      </n-radio-group>
+      <n-space
+          v-if="data.options.remote"
+          direction="vertical"
+          style="margin-top: 10px;"
+      >
+
+        <n-input-group>
+          <n-input-group-label>远端方法</n-input-group-label>
+          <n-input  v-model:value="data.options.remoteFunc"/>
+        </n-input-group>
+
+        <n-input-group>
+          <n-input-group-label>标签</n-input-group-label>
+          <n-input  v-model:value="data.options.props.label"/>
+        </n-input-group>
+
+        <n-input-group>
+          <n-input-group-label>值</n-input-group-label>
+          <n-input  v-model:value="data.options.props.value"/>
+        </n-input-group>
+      </n-space>
+      <template v-else>
+        <n-checkbox-group v-if="data.options.multiple" v-model:value="data.options.defaultValue" style="margin-top: 10px;">
+          <n-dynamic-input v-model:value="data.options.options" :on-create="handleInsertOption" show-sort-button>
+            <template #default="{ value }">
+              <div style="display: flex; align-items: center; width: 100%">
+                <n-checkbox
+                    :value="value.value"
+                    style="margin-right: 5px"
+                />
+                <n-input v-model:value="value.label" type="text" style="margin-right: 12px; width: 160px"/>
+                <n-input v-model:value="value.value" type="text" />
+              </div>
+            </template>
+          </n-dynamic-input>
+        </n-checkbox-group>
+        <n-radio-group v-else v-model:value="data.options.defaultValue" style="margin-top: 10px;">
+          <n-dynamic-input v-model:value="data.options.options" :on-create="handleInsertOption" show-sort-button>
+            <template #default="{ value }">
+              <div style="display: flex; align-items: center; width: 100%">
+                <n-radio
+                    :value="value.value"
+                    style="margin-right: 5px"
+                />
+                <n-input v-model:value="value.label" type="text" style="margin-right: 12px; width: 160px"/>
+                <n-input v-model:value="value.value" type="text" />
+              </div>
+            </template>
+          </n-dynamic-input>
+        </n-radio-group>
+      </template>
+    </div>
+  </n-form-item>
+  <n-form-item
+      label="显示属性">
+    <n-checkbox
+        v-model:checked="data.options.showLabel"
+    >显示标签
+    </n-checkbox>
+  </n-form-item>
+  <n-form-item label="操作属性">
+    <n-checkbox
+        v-model:checked="data.options.rules.required"
+    >必填
+    </n-checkbox
+    >
+    <n-checkbox
+        v-model:checked="data.options.disabled"
+    >禁用
+    </n-checkbox>
+    <n-checkbox
+        v-model:checked="data.options.allowClear"
+    >清除
+    </n-checkbox>
+  </n-form-item>
+</template>
+<script lang="ts">
+import {defineComponent, ref, watch} from 'vue'
+import Draggable from 'vuedraggable'
+import SvgIcon from '../../../../components/SvgIcon.vue'
+export default defineComponent({
+  components:{
+    Draggable,
+    SvgIcon,
+  },
+  name: 'InputWidget',
+  props: {
+    select: {
+      type: Object
+    }
+  },
+  emits: ['update:select'],
+  setup(props, context) {
+    const data = ref<any>(props.select)
+    watch(
+        () => props.select,
+        val => (data.value = val)
+    )
+    watch(data, val => context.emit('update:select', val))
+
+    const handleInsertOption = () => {
+      const length = data.value.options.options.length + 1
+      return {
+        label: `Option ${length}`,
+        value: `Option ${length}`
+      }
+    }
+
+    const handleOptionsRemove = (index: number) => {
+      if (data.value.type === 'grid') {
+        data.value.columns.splice(index, 1)
+      } else {
+        data.value.options.options.splice(index, 1)
+      }
+    }
+    const handleSelectModeChange = (event: any) => {
+      const { value } = event.target
+      if (value!=='true') {
+        data.value.options.rules.type='string'
+        data.value.options.defaultValue.length
+            ? (data.value.options.defaultValue =
+                data.value.options.defaultValue[0])
+            : (data.value.options.defaultValue = null)
+      } else {
+        data.value.options.rules.type='array'
+        if (data.value.options.defaultValue) {
+          if (!(data.value.options.defaultValue instanceof Array)) {
+            data.value.options.defaultValue = [data.value.options.defaultValue]
+          }
+        } else {
+          data.value.options.defaultValue = []
+        }
+      }
+    }
+    return {
+      data,
+      handleInsertOption,
+      handleOptionsRemove,
+      handleSelectModeChange,
+    }
+  }
+})
+
+</script>
+
+
+<style scoped lang="less">
+/deep/ .n-dynamic-input .n-dynamic-input-item .n-dynamic-input-item__action{
+  margin: 0 0 0 10px;
+}
+</style>
diff --git a/src/components/naiveui/components/configs/SelectTree.vue b/src/components/naiveui/components/configs/SelectTree.vue
new file mode 100644
index 0000000000000000000000000000000000000000..426d79d916b41995efc28d1faa2866f73222bbb8
--- /dev/null
+++ b/src/components/naiveui/components/configs/SelectTree.vue
@@ -0,0 +1,350 @@
+<template>
+  <n-form-item label="是否可搜索">
+    <n-switch
+        checked-children="是"
+        un-checked-children="否"
+        v-model:value="data.options.filterable"
+    >
+      <template #checked>
+        是
+      </template>
+      <template #unchecked>
+        否
+      </template>
+    </n-switch>
+  </n-form-item>
+  <n-form-item label="模式">
+    <n-radio-group
+        button-style="solid"
+        v-model:value="data.options.multiple"
+        @change="handleSelectModeChange"
+    >
+      <n-radio-button :value="false">单选</n-radio-button>
+      <n-radio-button :value="true">多选</n-radio-button>
+    </n-radio-group>
+  </n-form-item>
+  <n-form-item label="选中策略">
+    <n-radio-group v-model:value="data.options.checkStrategy">
+      <n-radio-button value="all">
+        All
+      </n-radio-button>
+      <n-radio-button value="parent">
+        Parent
+      </n-radio-button>
+      <n-radio-button value="child">
+        Child
+      </n-radio-button>
+    </n-radio-group>
+  </n-form-item>
+  <n-form-item label="选项" >
+    <div style="width: 100%">
+      <n-radio-group button-style="solid" v-model:value="data.options.remote">
+        <n-radio-button :value="false">静态数据</n-radio-button>
+        <n-radio-button :value="true">远端数据</n-radio-button>
+      </n-radio-group>
+      <n-space
+          v-if="data.options.remote"
+          direction="vertical"
+          style="margin-top: 10px;"
+      >
+
+        <n-input-group>
+          <n-input-group-label>远端方法</n-input-group-label>
+          <n-input  v-model:value="data.options.remoteFunc"/>
+        </n-input-group>
+
+        <n-input-group>
+          <n-input-group-label>标签</n-input-group-label>
+          <n-input  v-model:value="data.options.props.label"/>
+        </n-input-group>
+
+        <n-input-group>
+          <n-input-group-label>值</n-input-group-label>
+          <n-input  v-model:value="data.options.props.value"/>
+        </n-input-group>
+      </n-space>
+      <template v-else>
+        <div style="margin-top: 10px">
+          <n-button @click="addTreeData()" type="primary">添加</n-button>
+          <n-data-table style="margin-top: 10px;" id="selectTree-target"
+                        :columns="treeDataColumns"
+                        :data="data.options.options"
+                        :row-key="rowKey"
+                        :min-height="100"
+                        :max-height="500"
+                        default-expand-all
+          />
+          <n-drawer
+              v-model:show="showTreeDataDriwer"
+              width="100%"
+              height="200px"
+              placement="right"
+              :trap-focus="false"
+              :block-scroll="false"
+              to="#selectTree-target"
+          >
+            <n-drawer-content>
+              <n-form
+                  ref="treeDataFormRef"
+                  :label-width="80"
+                  :model="treeData"
+                  :rules="treeRules"
+              >
+                <n-form-item label="Label" path="label">
+                  <n-input v-model:value="treeData.label" placeholder="请输入" />
+                </n-form-item>
+                <n-form-item label="Value" path="value">
+                  <n-input v-model:value="treeData.value" placeholder="请输入" />
+                </n-form-item>
+              </n-form>
+              <template #footer>
+                <n-space>
+                  <n-button @click="showTreeDataDriwer = false">取消</n-button>
+                  <n-button type="primary" @click="submitTreeData">确定</n-button>
+                </n-space>
+              </template>
+            </n-drawer-content>
+          </n-drawer>
+        </div>
+      </template>
+    </div>
+  </n-form-item>
+  <n-form-item
+      label="显示属性">
+    <n-checkbox
+        v-model:checked="data.options.showLabel"
+    >显示标签
+    </n-checkbox>
+  </n-form-item>
+  <n-form-item label="操作属性">
+    <n-checkbox
+        v-model:checked="data.options.rules.required"
+    >必填
+    </n-checkbox
+    >
+    <n-checkbox
+        v-model:checked="data.options.disabled"
+    >禁用
+    </n-checkbox>
+    <n-checkbox
+        v-model:checked="data.options.allowClear"
+    >清除
+    </n-checkbox>
+  </n-form-item>
+</template>
+<script lang="ts">
+import {defineComponent, h, reactive, ref, watch,toRefs} from 'vue'
+import Draggable from 'vuedraggable'
+import SvgIcon from '../../../../components/SvgIcon.vue'
+import {RowData} from "../../types/NaiveWidgetTypes";
+import {DataTableColumns, FormInst, NButton, NSpace} from "naive-ui";
+import {v4} from "uuid";
+export default defineComponent({
+  components:{
+    Draggable,
+    SvgIcon,
+  },
+  name: 'InputWidget',
+  props: {
+    select: {
+      type: Object
+    }
+  },
+  emits: ['update:select'],
+  setup(props, context) {
+    const data = ref<any>(props.select)
+    const treeDataFormRef = ref<FormInst | null>(null)
+    watch(
+        () => props.select,
+        val => (data.value = val)
+    )
+    watch(data, val => context.emit('update:select', val))
+
+    const treeDataColumns = ({
+                               add,
+                               edit,
+                               remove,
+                             }: {
+      add: (rowData: RowData,rowIndex: number) => void
+      edit: (rowData: RowData,rowIndex: number) => void
+      remove: (rowData: RowData,rowIndex: number) => void
+    }): DataTableColumns<RowData> => {
+      return [
+        {
+          title: 'Label',
+          key: 'label',
+        },
+        {
+          title: 'Value',
+          key: 'value',
+        },
+        {
+          title: '操作',
+          key: 'action',
+          render(row,index) {
+            return h(NSpace, {}, [
+              h(NButton, {strong: true, tertiary: true, size: 'small',text:true,type:'primary', onClick: () => edit(row,index)}, {default: () => '编辑'}),
+              h(NButton, {strong: true, tertiary: true, size: 'small',text:true,type:'primary', onClick: () => add(row,index)}, {default: () => '添加下级'}),
+              h(NButton, {strong: true, tertiary: true, size: 'small',text:true,type:'error', onClick: () => remove(row,index)}, {default: () => '删除'})
+            ])
+          }
+        }
+      ]
+    }
+    const treeData: RowData ={
+      parentKey:null,
+      key: '',
+      label:'',
+      value:'',
+    }
+    const state = reactive({
+      showTreeDataType:'add',
+      showTreeDataDriwer:false,
+      treeData,
+      parentTreeData:null,
+      treeRules: {
+        label: {
+          required: true,
+          message: '请输入',
+          trigger: ['input', 'blur']
+        },
+        value: {
+          required: true,
+          message: '请输入',
+          trigger: ['input', 'blur']
+        }
+      },
+      treeDataColumns: treeDataColumns({
+        add (rowData) {
+          state.parentTreeData = rowData
+          state.treeData = {
+            parentKey:rowData.key,
+            key: v4().replaceAll('-', ''),
+            label:'',
+            value:'',
+          }
+          state.showTreeDataDriwer=true
+          state.showTreeDataType='add'
+        },
+        edit (rowData,rowIndex) {
+          state.parentTreeData = getParentTreeInfo(rowData.parentKey)
+          state.treeData = Object.assign({},rowData)
+          state.showTreeDataDriwer=true
+          state.showTreeDataType='edit'
+        },
+        remove (rowData,rowIndex) {
+          if (rowData.parentKey){
+            let parentTreeData = getParentTreeInfo(rowData.parentKey)
+            parentTreeData?.children?.forEach((v,i)=>{
+              if (v.key===rowData.key){
+                parentTreeData.children.splice(i,1)
+              }
+            })
+          }else {
+            let index = getTreeFirstIndex(rowData.key)
+            if (index!=undefined) data.value.options.options.splice(index,1)
+          }
+        }
+      }),
+      rowKey: (row: RowData) => row.key
+    })
+
+    // 获取父级tree（naiveui不提供父级信息，此步也没有存库，无奈只能循环取）
+    const getParentTreeInfo = (parentKey:string) => {
+      let parent = null;
+      eachOptions(data.value.options.options)
+      function eachOptions(children) {
+        children.forEach(v=>{
+          if (v.key===parentKey){
+            parent=v
+            return
+          }
+          if (v.children){
+            eachOptions(v.children)
+          }
+        })
+      }
+      return parent
+    }
+    // 获取根据key获取tree的一级索引 （目前用于一级tree的删除）
+    const getTreeFirstIndex = (key:string) => {
+      for (let i = 0; i <data.value.options.options.length; i++) {
+        if (data.value.options.options[i].key===key){
+          return i;
+        }
+      }
+    }
+
+    const handleSelectModeChange = (event: any) => {
+      const { value } = event.target
+      if (value!=='true') {
+        data.value.options.rules.type='string'
+        data.value.options.defaultValue.length
+            ? (data.value.options.defaultValue =
+                data.value.options.defaultValue[0])
+            : (data.value.options.defaultValue = null)
+      } else {
+        data.value.options.rules.type='array'
+        if (data.value.options.defaultValue) {
+          if (!(data.value.options.defaultValue instanceof Array)) {
+            data.value.options.defaultValue = [data.value.options.defaultValue]
+          }
+        } else {
+          data.value.options.defaultValue = []
+        }
+      }
+    }
+
+    const addTreeData = ()=>{
+      state.parentTreeData = null
+      state.treeData = {
+        parentKey:null,
+        key: v4().replaceAll('-', ''),
+        label:'',
+        value:'',
+      }
+      state.showTreeDataDriwer=true
+    }
+    const submitTreeData = (e: MouseEvent)=> {
+      e.preventDefault()
+      treeDataFormRef.value?.validate((errors) => {
+        if (!errors) {
+          if (state.parentTreeData){
+            if (state.showTreeDataType==='add'){
+              if (!state.parentTreeData.children) state.parentTreeData.children = []
+              state.parentTreeData.children.push(state.treeData)
+            }else {
+              state.parentTreeData.children.forEach((v,i)=>{
+                if (v.key===state.treeData.key){
+                  state.parentTreeData.children.splice(i,1,state.treeData)
+                }
+              })
+            }
+          }else{
+            data.value.options.options.push(state.treeData)
+          }
+          state.showTreeDataDriwer=false
+        } else {
+          console.log(errors)
+        }
+      })
+    }
+    return {
+      ...toRefs(state),
+      data,
+      treeDataFormRef,
+      handleSelectModeChange,
+      addTreeData,
+      submitTreeData,
+    }
+  }
+})
+
+</script>
+
+
+<style scoped lang="less">
+/deep/ .n-dynamic-input .n-dynamic-input-item .n-dynamic-input-item__action{
+  margin: 0 0 0 10px;
+}
+</style>
diff --git a/src/components/naiveui/components/configs/Slider.vue b/src/components/naiveui/components/configs/Slider.vue
new file mode 100644
index 0000000000000000000000000000000000000000..de9b2b75dc5aa4f27c4fc9aeff683a3264f1be05
--- /dev/null
+++ b/src/components/naiveui/components/configs/Slider.vue
@@ -0,0 +1,99 @@
+<template>
+  <n-form-item label="默认内容">
+    <n-input-group v-if="data.options.range">
+      <n-input-number v-model:value.number="data.options.defaultValue[0]" :style="{ width: '33%' }" />
+      <n-input-number v-model:value.number="data.options.defaultValue[1]" :style="{ width: '33%' }" />
+    </n-input-group>
+    <n-input-number v-else v-model:value.number="data.options.defaultValue"/>
+  </n-form-item>
+  <n-form-item label="最大值">
+    <n-input-number v-model:value.number="data.options.max" />
+  </n-form-item>
+
+  <n-form-item label="最小值">
+    <n-input-number v-model:value.number="data.options.min" />
+  </n-form-item>
+
+  <n-form-item label="步长">
+    <n-input-number v-model:value.number="data.options.step" :min="0" />
+  </n-form-item>
+
+  <n-form-item label="组件属性">
+    <n-space item-style="display: flex;" align="center">
+      <n-checkbox
+          v-model:checked="data.options.range" @change="handleSliderModeChange"
+      >双滑块模式
+      </n-checkbox>
+      <n-tooltip trigger="hover">
+          <template #trigger>
+            <n-checkbox
+                v-model:checked="data.options.vertical"
+            >垂直
+             </n-checkbox>
+          </template>
+        启用垂直，则必须设置组件的固定宽度、高度
+      </n-tooltip>
+      <n-checkbox
+          v-model:checked="data.options.reverse"
+      >反向坐标轴
+      </n-checkbox>
+    </n-space>
+  </n-form-item>
+  <n-form-item
+      label="显示属性">
+    <n-checkbox
+        v-model:checked="data.options.showLabel"
+    >显示标签
+    </n-checkbox>
+  </n-form-item>
+  <n-form-item label="操作属性">
+    <n-space item-style="display: flex;" align="center">
+      <n-checkbox
+          v-model:checked="data.options.rules.required"
+      >必填
+      </n-checkbox
+      >
+      <n-checkbox
+          v-model:checked="data.options.disabled"
+      >禁用
+      </n-checkbox>
+    </n-space>
+  </n-form-item>
+</template>
+<script lang="ts">
+import { defineComponent, ref, watch} from 'vue'
+
+export default defineComponent({
+  name: 'InputWidget',
+  props: {
+    select: {
+      type: Object
+    }
+  },
+  emits: ['update:select'],
+  setup(props, context) {
+    const data = ref<any>(props.select)
+    watch(
+        () => props.select,
+        val => (data.value = val)
+    )
+    watch(data, val => context.emit('update:select', val))
+
+    const handleSliderModeChange = (checked: boolean) => {
+      checked
+          ? (data.value.options.defaultValue = [0, 0])
+          : (data.value.options.defaultValue = 0)
+    }
+    return {
+      data,
+      handleSliderModeChange,
+    }
+  }
+})
+
+</script>
+
+
+<style scoped>
+
+</style>
diff --git a/src/components/naiveui/components/configs/Switch.vue b/src/components/naiveui/components/configs/Switch.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4c90a51c7dafffdcd6a7b47aac95aeeec817ceb2
--- /dev/null
+++ b/src/components/naiveui/components/configs/Switch.vue
@@ -0,0 +1,60 @@
+<template>
+  <n-form-item label="默认内容">
+    <n-switch v-model:value="data.options.defaultValue"/>
+  </n-form-item>
+  <n-form-item label="选中时的内容">
+    <n-input v-model:value="data.options.checkedChildren" />
+  </n-form-item>
+
+  <n-form-item label="非选中时的内容">
+    <n-input v-model:value="data.options.unCheckedChildren" />
+  </n-form-item>
+  <n-form-item
+      label="显示属性">
+    <n-checkbox
+        v-model:checked="data.options.showLabel"
+    >显示标签
+    </n-checkbox>
+  </n-form-item>
+  <n-form-item label="操作属性">
+    <n-checkbox
+        v-model:checked="data.options.rules.required"
+    >必填
+    </n-checkbox
+    >
+    <n-checkbox
+        v-model:checked="data.options.disabled"
+    >禁用
+    </n-checkbox>
+  </n-form-item>
+</template>
+<script lang="ts">
+import { defineComponent, ref, watch} from 'vue'
+
+export default defineComponent({
+  name: 'InputWidget',
+  props: {
+    select: {
+      type: Object
+    }
+  },
+  emits: ['update:select'],
+  setup(props, context) {
+    const data = ref<any>(props.select)
+    watch(
+        () => props.select,
+        val => (data.value = val)
+    )
+    watch(data, val => context.emit('update:select', val))
+    return {
+      data,
+    }
+  }
+})
+
+</script>
+
+
+<style scoped>
+
+</style>
diff --git a/src/components/naiveui/components/configs/Table.vue b/src/components/naiveui/components/configs/Table.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6ee505461b137a2034cc03a53005fa60b125c624
--- /dev/null
+++ b/src/components/naiveui/components/configs/Table.vue
@@ -0,0 +1,133 @@
+<template>
+
+  <n-form-item label="常用宽高">
+    <n-space style="margin-left: 3px">
+      <n-tag class="hoverTag" v-for="(item,index) in whTemplateList" :key="index" type="primary"
+             @click="changeWhType(item)">
+        {{item.label}}
+      </n-tag>
+    </n-space>
+  </n-form-item>
+
+<!--  <n-form-item label="快速生成">-->
+<!--    <n-space vertical>-->
+<!--      <n-input-group>-->
+<!--        <n-input-group-label>行数</n-input-group-label>-->
+<!--        <n-input-number v-model:value="data.columns.length" placeholder="行"/>-->
+<!--        <n-button type="primary">生成</n-button>-->
+<!--      </n-input-group>-->
+<!--      <n-input-group>-->
+<!--        <n-input-group-label>列数</n-input-group-label>-->
+<!--        <n-input-number v-model:value="data.options.col" placeholder="列"/>-->
+<!--        <n-button type="primary">生成</n-button>-->
+<!--      </n-input-group>-->
+<!--    </n-space>-->
+<!--  </n-form-item>-->
+
+  <n-form-item label="展示主题">
+    <n-radio-group v-model:value="data.options.theme">
+      <n-radio-button value="default">默认主题</n-radio-button>
+      <n-radio-button value="theme1">合同主题</n-radio-button>
+    </n-radio-group>
+  </n-form-item>
+
+  <n-form-item label="表格属性">
+    <n-space item-style="display: flex;" align="center">
+      <n-checkbox
+          v-model:checked="data.options.bordered"
+      >是否显示边框
+      </n-checkbox>
+      <n-checkbox
+          v-model:checked="data.options.bottomBordered"
+      >表格底部是否有边框
+      </n-checkbox>
+      <n-checkbox
+          v-model:checked="data.options.singleColumn"
+      >是否不设定行的分割线
+      </n-checkbox>
+      <n-checkbox
+          v-model:checked="data.options.singleLine"
+      >是否不设定列的分割线
+      </n-checkbox>
+      <n-checkbox
+          v-model:checked="data.options.striped"
+      >是否使用斑马线条纹
+      </n-checkbox>
+    </n-space>
+  </n-form-item>
+  <n-form-item label="操作属性">
+    <n-checkbox
+        v-model:checked="data.options.disabled"
+    >禁用
+    </n-checkbox>
+  </n-form-item>
+  <n-alert title="使用说明" type="info">
+    在表格处 <strong>右键鼠标</strong> 即可修改表格
+  </n-alert>
+</template>
+<script lang="ts">
+import {defineComponent, reactive, ref, watch,toRefs} from 'vue'
+
+export default defineComponent({
+  name: 'InputWidget',
+  props: {
+    select: {
+      type: Object
+    }
+  },
+  emits: ['update:select'],
+  setup(props, context) {
+    const data = ref<any>(props.select)
+    watch(
+        () => props.select,
+        val => (data.value = val)
+    )
+    watch(data, val => context.emit('update:select', val))
+    const state = reactive({
+      whTemplateList:[
+        {label:'A3 [297mm * 420mm]',value:'A3'},
+        {label:'A4 [210mm * 297mm]',value:'A4'},
+        {label:'A5 [148mm * 210mm]',value:'A5'},
+        {label:'A6 [105mm * 148mm]',value:'A6'},
+      ]
+    })
+    const changeWhType  = (item)=>{
+      switch (item.value) {
+          case 'A3':
+            data.value.options.width='297mm';
+            data.value.options.height='420mm';
+            break
+          case 'A4':
+            data.value.options.width='210mm';
+            data.value.options.height='297mm';
+            break
+          case 'A5':
+            data.value.options.width='148mm';
+            data.value.options.height='210mm';
+            break
+          case 'A6':
+            data.value.options.width='105mm';
+            data.value.options.height='148mm';
+            break
+      }
+    }
+    return {
+      ...toRefs(state),
+      data,
+      changeWhType,
+    }
+  }
+})
+
+</script>
+
+
+<style scoped lang="less">
+.hoverTag{
+  cursor: pointer;
+  &:hover {
+    outline-offset: 0;
+    outline: 1px solid;
+  }
+}
+</style>
diff --git a/src/components/naiveui/components/configs/Text.vue b/src/components/naiveui/components/configs/Text.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2cb7bae484f2983a7348e6cd3a42e13cd750b2db
--- /dev/null
+++ b/src/components/naiveui/components/configs/Text.vue
@@ -0,0 +1,78 @@
+<template>
+  <n-form-item label="文字" >
+    <n-input v-model:value="data.options.text" />
+  </n-form-item>
+  <n-form-item label="对齐方式">
+    <n-radio-group v-model:value="data.options.style.textAlign" button-style="solid">
+      <n-radio-button value="left">左对齐</n-radio-button>
+      <n-radio-button value="center">居中</n-radio-button>
+      <n-radio-button value="right">右对齐</n-radio-button>
+    </n-radio-group>
+  </n-form-item>
+  <n-form-item label="文字粗细">
+    <n-radio-group v-model:value="data.options.style.fontWeight" button-style="solid">
+      <n-radio-button value="400">正常</n-radio-button>
+      <n-radio-button value="600">加粗</n-radio-button>
+    </n-radio-group>
+  </n-form-item>
+  <n-form-item label="文字大小" >
+    <n-input v-model:value="data.options.style.fontSize" />
+  </n-form-item>
+  <n-form-item label="行高" >
+    <n-input v-model:value="data.options.style.lineHeight" />
+  </n-form-item>
+</template>
+<script lang="ts">
+import {defineComponent, reactive, ref, toRefs, watch} from 'vue'
+export default defineComponent({
+  name: 'Alert',
+  components:{
+
+  },
+  props: {
+    select: {
+      type: Object
+    }
+  },
+  emits: ['update:select'],
+  setup(props, context) {
+    const data = ref<any>(props.select)
+    watch(
+        () => props.select,
+        val => (data.value = val)
+    )
+    watch(data, val => context.emit('update:select', val))
+
+    const state = reactive({
+      verifyOptions:[
+        {label:'字符串',value:'6px'},
+        {label:'数字',value:'8'},
+        {label:'布尔值',value:'9'},
+        {label:'方法',value:'method'},
+        {label:'正则表达式',value:'regexp'},
+        {label:'整数',value:'integer'},
+        {label:'浮点数',value:'float'},
+        {label:'数组',value:'array'},
+        {label:'对象',value:'object'},
+        {label:'枚举',value:'enum'},
+        {label:'日期',value:'date'},
+        {label:'URL地址',value:'url'},
+        {label:'十六进制',value:'hex'},
+        {label:'邮箱地址',value:'email'},
+        {label:'任意类型',value:'any'},
+      ],
+    })
+
+    return {
+      ...toRefs(state),
+      data,
+    }
+  }
+})
+
+</script>
+
+
+<style scoped>
+
+</style>
diff --git a/src/components/naiveui/components/configs/Time.vue b/src/components/naiveui/components/configs/Time.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1c4ac696c393d4e5c271345b2701d77c553b50ca
--- /dev/null
+++ b/src/components/naiveui/components/configs/Time.vue
@@ -0,0 +1,68 @@
+<template>
+  <n-form-item label="默认值">
+    <n-time-picker
+        style="width: 100%;"
+        v-model:value="data.options.defaultValue"
+        :format="data.options.format"
+        :placeholder="data.options.placeholder"
+    />
+  </n-form-item>
+  <n-form-item label="格式">
+    <n-input v-model:value="data.options.format" />
+  </n-form-item>
+  <n-form-item label="绑定值格式">
+    <n-input v-model:value="data.options.valueFormat" />
+  </n-form-item>
+  <n-form-item
+      label="显示属性">
+    <n-checkbox
+        v-model:checked="data.options.showLabel"
+    >显示标签
+    </n-checkbox>
+  </n-form-item>
+  <n-form-item label="操作属性">
+    <n-checkbox
+        v-model:checked="data.options.rules.required"
+    >必填
+    </n-checkbox
+    >
+    <n-checkbox
+        v-model:checked="data.options.disabled"
+    >禁用
+    </n-checkbox>
+    <n-checkbox
+        v-model:checked="data.options.allowClear"
+    >清除
+    </n-checkbox>
+  </n-form-item>
+</template>
+<script lang="ts">
+import {defineComponent, ref, watch} from 'vue'
+
+export default defineComponent({
+  name: 'InputWidget',
+  props: {
+    select: {
+      type: Object
+    }
+  },
+  emits: ['update:select'],
+  setup(props, context) {
+    const data = ref<any>(props.select)
+    watch(
+        () => props.select,
+        val => (data.value = val)
+    )
+    watch(data, val => context.emit('update:select', val))
+    return {
+      data,
+    }
+  }
+})
+
+</script>
+
+
+<style scoped>
+
+</style>
diff --git a/src/components/naiveui/components/configs/Transfer.vue b/src/components/naiveui/components/configs/Transfer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..89f9545e45fb6505f88115105ad25733aa06e73e
--- /dev/null
+++ b/src/components/naiveui/components/configs/Transfer.vue
@@ -0,0 +1,111 @@
+<template>
+  <n-form-item label="源项标题">
+    <n-input v-model:value="data.options.sourceTitle" />
+  </n-form-item>
+  <n-form-item label="目标项标题">
+    <n-input v-model:value="data.options.targetTitle" />
+  </n-form-item>
+  <n-form-item label="是否可搜索">
+    <n-switch
+        checked-children="是"
+        un-checked-children="否"
+        v-model:value="data.options.filterable"
+    >
+      <template #checked>
+        是
+      </template>
+      <template #unchecked>
+        否
+      </template>
+    </n-switch>
+  </n-form-item>
+  <n-form-item label="开启虚拟滚动（停用动画）">
+    <n-switch
+        checked-children="是"
+        un-checked-children="否"
+        v-model:value="data.options.virtualScroll"
+    >
+      <template #checked>
+        是
+      </template>
+      <template #unchecked>
+        否
+      </template>
+    </n-switch>
+  </n-form-item>
+  <n-form-item label="选项">
+    <n-checkbox-group v-model:value="data.options.defaultValue" style="margin-top: 10px;">
+      <n-dynamic-input v-model:value="data.options.options" :on-create="handleInsertOption" show-sort-button>
+        <template #default="{ value }">
+          <div style="display: flex; align-items: center; width: 100%">
+            <n-checkbox
+                :value="value.value"
+                style="margin-right: 5px"
+            />
+            <n-input v-model:value="value.label" type="text" style="margin-right: 12px; width: 160px"/>
+            <n-input v-model:value="value.value" type="text" />
+          </div>
+        </template>
+      </n-dynamic-input>
+    </n-checkbox-group>
+  </n-form-item>
+  <n-form-item
+      label="显示属性">
+    <n-checkbox
+        v-model:checked="data.options.showLabel"
+    >显示标签
+    </n-checkbox>
+  </n-form-item>
+  <n-form-item label="操作属性">
+    <n-checkbox
+        v-model:checked="data.options.rules.required"
+    >必填
+    </n-checkbox
+    >
+    <n-checkbox
+        v-model:checked="data.options.disabled"
+    >禁用
+    </n-checkbox>
+  </n-form-item>
+</template>
+<script lang="ts">
+import {defineComponent, ref, watch} from 'vue'
+
+export default defineComponent({
+  name: 'RichtextEditorWidget',
+  props: {
+    select: {
+      type: Object
+    }
+  },
+  emits: ['update:select'],
+  setup(props, context) {
+    const data = ref<any>(props.select)
+    watch(
+        () => props.select,
+        val => (data.value = val)
+    )
+    watch(data, val => context.emit('update:select', val))
+
+    const handleInsertOption = () => {
+      const length = data.value.options.options.length + 1
+      return {
+        label: `Option ${length}`,
+        value: `Option ${length}`
+      }
+    }
+
+    return {
+      data,
+      handleInsertOption,
+    }
+  }
+})
+
+</script>
+
+<style scoped lang="less">
+/deep/ .n-dynamic-input .n-dynamic-input-item .n-dynamic-input-item__action{
+  margin: 0 0 0 10px;
+}
+</style>
diff --git a/src/components/naiveui/components/configs/Tree.vue b/src/components/naiveui/components/configs/Tree.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ce2c39346290206061ed53e729030351d1a6b1ff
--- /dev/null
+++ b/src/components/naiveui/components/configs/Tree.vue
@@ -0,0 +1,411 @@
+<template>
+  <n-form-item label="是否可搜索">
+    <n-switch
+        checked-children="是"
+        un-checked-children="否"
+        v-model:value="data.options.filterable"
+    >
+      <template #checked>
+        是
+      </template>
+      <template #unchecked>
+        否
+      </template>
+    </n-switch>
+  </n-form-item>
+  <n-form-item label="在多选时是否关联选项">
+    <n-switch
+        checked-children="是"
+        un-checked-children="否"
+        v-model:value="data.options.cascade"
+    >
+      <template #checked>
+        是
+      </template>
+      <template #unchecked>
+        否
+      </template>
+    </n-switch>
+  </n-form-item>
+  <n-form-item label="是否显示选择框">
+    <n-tooltip trigger="hover">
+      <template #trigger>
+        <n-switch
+            checked-children="是"
+            un-checked-children="否"
+            v-model:value="data.options.checkable"
+        >
+          <template #checked>
+            是
+          </template>
+          <template #unchecked>
+            否
+          </template>
+        </n-switch>
+      </template>
+      注意：选择框在单选时将不可控
+    </n-tooltip>
+  </n-form-item>
+  <n-form-item label="模式">
+    <n-radio-group
+        button-style="solid"
+        v-model:value="data.options.multiple"
+        @change="handleSelectModeChange"
+    >
+      <n-radio-button :value="false">单选</n-radio-button>
+      <n-radio-button :value="true">多选</n-radio-button>
+    </n-radio-group>
+  </n-form-item>
+  <n-form-item label="选中策略">
+    <n-radio-group v-model:value="data.options.checkStrategy">
+      <n-radio-button value="all">
+        All
+      </n-radio-button>
+      <n-radio-button value="parent">
+        Parent
+      </n-radio-button>
+      <n-radio-button value="child">
+        Child
+      </n-radio-button>
+    </n-radio-group>
+  </n-form-item>
+  <n-form-item label="开启虚拟滚动（停用动画）">
+    <n-switch
+        checked-children="是"
+        un-checked-children="否"
+        v-model:value="data.options.virtualScroll"
+    >
+      <template #checked>
+        是
+      </template>
+      <template #unchecked>
+        否
+      </template>
+    </n-switch>
+  </n-form-item>
+  <n-form-item label="选项" >
+    <div style="width: 100%">
+      <n-radio-group button-style="solid" v-model:value="data.options.remote">
+        <n-radio-button :value="false">静态数据</n-radio-button>
+        <n-radio-button :value="true">远端数据</n-radio-button>
+      </n-radio-group>
+      <n-space
+          v-if="data.options.remote"
+          direction="vertical"
+          style="margin-top: 10px;"
+      >
+
+        <n-input-group>
+          <n-input-group-label>远端方法</n-input-group-label>
+          <n-input  v-model:value="data.options.remoteFunc"/>
+        </n-input-group>
+
+        <n-input-group>
+          <n-input-group-label>标签</n-input-group-label>
+          <n-input  v-model:value="data.options.props.label"/>
+        </n-input-group>
+
+        <n-input-group>
+          <n-input-group-label>值</n-input-group-label>
+          <n-input  v-model:value="data.options.props.value"/>
+        </n-input-group>
+      </n-space>
+      <template v-else>
+        <div style="margin-top: 10px">
+          <n-button @click="addTreeData()" type="primary">添加</n-button>
+          <n-data-table style="margin-top: 10px;" id="selectTree-target"
+                        :columns="treeDataColumns"
+                        :data="data.options.options"
+                        :row-key="rowKey"
+                        :min-height="100"
+                        :max-height="500"
+                        default-expand-all
+          />
+          <n-drawer
+              v-model:show="showTreeDataDriwer"
+              width="100%"
+              height="200px"
+              placement="right"
+              :trap-focus="false"
+              :block-scroll="false"
+              to="#selectTree-target"
+          >
+            <n-drawer-content>
+              <n-form
+                  ref="treeDataFormRef"
+                  :label-width="80"
+                  :model="treeData"
+                  :rules="treeRules"
+              >
+                <n-form-item label="Label" path="label">
+                  <n-input v-model:value="treeData.label" placeholder="请输入" />
+                </n-form-item>
+                <n-form-item label="Value" path="value">
+                  <n-input v-model:value="treeData.value" placeholder="请输入" />
+                </n-form-item>
+              </n-form>
+              <template #footer>
+                <n-space>
+                  <n-button @click="showTreeDataDriwer = false">取消</n-button>
+                  <n-button type="primary" @click="submitTreeData">确定</n-button>
+                </n-space>
+              </template>
+            </n-drawer-content>
+          </n-drawer>
+        </div>
+      </template>
+    </div>
+  </n-form-item>
+  <n-form-item
+      label="显示属性">
+    <n-checkbox
+        v-model:checked="data.options.showLabel"
+    >显示标签
+    </n-checkbox>
+  </n-form-item>
+  <n-form-item label="操作属性">
+    <n-checkbox
+        v-model:checked="data.options.rules.required"
+    >必填
+    </n-checkbox
+    >
+    <n-checkbox
+        v-model:checked="data.options.disabled"
+    >禁用
+    </n-checkbox>
+    <n-checkbox
+        v-model:checked="data.options.allowClear"
+    >清除
+    </n-checkbox>
+  </n-form-item>
+</template>
+<script lang="ts">
+import {defineComponent, h, reactive, ref, watch,toRefs} from 'vue'
+import Draggable from 'vuedraggable'
+import SvgIcon from '../../../../components/SvgIcon.vue'
+import {RowData} from "../../types/NaiveWidgetTypes";
+import {DataTableColumns, FormInst, NButton, NSpace} from "naive-ui";
+import {v4} from "uuid";
+export default defineComponent({
+  components:{
+    Draggable,
+    SvgIcon,
+  },
+  name: 'InputWidget',
+  props: {
+    select: {
+      type: Object
+    }
+  },
+  emits: ['update:select'],
+  setup(props, context) {
+    const data = ref<any>(props.select)
+    const treeDataFormRef = ref<FormInst | null>(null)
+    watch(
+        () => props.select,
+        val => (data.value = val)
+    )
+    watch(data, val => context.emit('update:select', val))
+
+    const treeDataColumns = ({
+                               add,
+                               edit,
+                               remove,
+                             }: {
+      add: (rowData: RowData,rowIndex: number) => void
+      edit: (rowData: RowData,rowIndex: number) => void
+      remove: (rowData: RowData,rowIndex: number) => void
+    }): DataTableColumns<RowData> => {
+      return [
+        {
+          title: 'Label',
+          key: 'label',
+        },
+        {
+          title: 'Value',
+          key: 'value',
+        },
+        {
+          title: '操作',
+          key: 'action',
+          render(row,index) {
+            return h(NSpace, {}, [
+              h(NButton, {strong: true, tertiary: true, size: 'small',text:true,type:'primary', onClick: () => edit(row,index)}, {default: () => '编辑'}),
+              h(NButton, {strong: true, tertiary: true, size: 'small',text:true,type:'primary', onClick: () => add(row,index)}, {default: () => '添加下级'}),
+              h(NButton, {strong: true, tertiary: true, size: 'small',text:true,type:'error', onClick: () => remove(row,index)}, {default: () => '删除'})
+            ])
+          }
+        }
+      ]
+    }
+    const treeData: RowData ={
+      parentKey:null,
+      key: '',
+      label:'',
+      value:'',
+    }
+    const state = reactive({
+      placementOptions: [
+        {label: 'top-start', value: 'top-start'},
+        {label: 'top', value: 'top'},
+        {label: 'top-end', value: 'top-end'},
+        {label: 'right-start', value: 'right-start'},
+        {label: 'right', value: 'right'},
+        {label: 'right-end', value: 'right-end'},
+        {label: 'bottom-start', value: 'bottom-start'},
+        {label: 'bottom', value: 'bottom'},
+        {label: 'bottom-end', value: 'bottom-end'},
+        {label: 'left-start', value: 'left-start'},
+        {label: 'left', value: 'left'},
+        {label: 'left-end', value: 'left-end'},
+      ],
+      showTreeDataType:'add',
+      showTreeDataDriwer:false,
+      treeData,
+      parentTreeData:null,
+      treeRules: {
+        label: {
+          required: true,
+          message: '请输入',
+          trigger: ['input', 'blur']
+        },
+        value: {
+          required: true,
+          message: '请输入',
+          trigger: ['input', 'blur']
+        }
+      },
+      treeDataColumns: treeDataColumns({
+        add (rowData) {
+          state.parentTreeData = rowData
+          state.treeData = {
+            parentKey:rowData.key,
+            key: v4().replaceAll('-', ''),
+            label:'',
+            value:'',
+          }
+          state.showTreeDataDriwer=true
+          state.showTreeDataType='add'
+        },
+        edit (rowData,rowIndex) {
+          state.parentTreeData = getParentTreeInfo(rowData.parentKey)
+          state.treeData = Object.assign({},rowData)
+          state.showTreeDataDriwer=true
+          state.showTreeDataType='edit'
+        },
+        remove (rowData,rowIndex) {
+          if (rowData.parentKey){
+            let parentTreeData = getParentTreeInfo(rowData.parentKey)
+            parentTreeData?.children?.forEach((v,i)=>{
+              if (v.key===rowData.key){
+                parentTreeData.children.splice(i,1)
+              }
+            })
+          }else {
+            let index = getTreeFirstIndex(rowData.key)
+            if (index!=undefined) data.value.options.options.splice(index,1)
+          }
+        }
+      }),
+      rowKey: (row: RowData) => row.key
+    })
+
+    // 获取父级tree（naiveui不提供父级信息，此步也没有存库，无奈只能循环取）
+    const getParentTreeInfo = (parentKey:string) => {
+      let parent = null;
+      eachOptions(data.value.options.options)
+      function eachOptions(children) {
+        children.forEach(v=>{
+          if (v.key===parentKey){
+            parent=v
+            return
+          }
+          if (v.children){
+            eachOptions(v.children)
+          }
+        })
+      }
+      return parent
+    }
+    // 获取根据key获取tree的一级索引 （目前用于一级tree的删除）
+    const getTreeFirstIndex = (key:string) => {
+      for (let i = 0; i <data.value.options.options.length; i++) {
+        if (data.value.options.options[i].key===key){
+          return i;
+        }
+      }
+    }
+
+    const handleSelectModeChange = (event: any) => {
+      const { value } = event.target
+      if (value!=='true') {
+        // data.value.options.rules.type='string'
+        data.value.options.defaultValue.length
+            ? (data.value.options.defaultValue =
+                data.value.options.defaultValue[0])
+            : (data.value.options.defaultValue = null)
+      } else {
+        // data.value.options.rules.type='array'
+        if (data.value.options.defaultValue) {
+          if (!(data.value.options.defaultValue instanceof Array)) {
+            data.value.options.defaultValue = [data.value.options.defaultValue]
+          }
+        } else {
+          data.value.options.defaultValue = []
+        }
+      }
+    }
+
+    const addTreeData = ()=>{
+      state.parentTreeData = null
+      state.treeData = {
+        parentKey:null,
+        key: v4().replaceAll('-', ''),
+        label:'',
+        value:'',
+      }
+      state.showTreeDataDriwer=true
+    }
+    const submitTreeData = (e: MouseEvent)=> {
+      e.preventDefault()
+      treeDataFormRef.value?.validate((errors) => {
+        if (!errors) {
+          if (state.parentTreeData){
+            if (state.showTreeDataType==='add'){
+              if (!state.parentTreeData.children) state.parentTreeData.children = []
+              state.parentTreeData.children.push(state.treeData)
+            }else {
+              state.parentTreeData.children.forEach((v,i)=>{
+                if (v.key===state.treeData.key){
+                  state.parentTreeData.children.splice(i,1,state.treeData)
+                }
+              })
+            }
+          }else{
+            data.value.options.options.push(state.treeData)
+          }
+          state.showTreeDataDriwer=false
+        } else {
+          console.log(errors)
+        }
+      })
+    }
+    return {
+      ...toRefs(state),
+      data,
+      treeDataFormRef,
+      handleSelectModeChange,
+      addTreeData,
+      submitTreeData,
+    }
+  }
+})
+
+</script>
+
+
+<style scoped lang="less">
+/deep/ .n-dynamic-input .n-dynamic-input-item .n-dynamic-input-item__action{
+  margin: 0 0 0 10px;
+}
+</style>
diff --git a/src/components/naiveui/components/configs/Upload.vue b/src/components/naiveui/components/configs/Upload.vue
new file mode 100644
index 0000000000000000000000000000000000000000..af14f85e01a77f177b6eceb4b5e00a9dc63d8b7e
--- /dev/null
+++ b/src/components/naiveui/components/configs/Upload.vue
@@ -0,0 +1,102 @@
+<template>
+  <n-form-item label="模式">
+    <n-radio-group
+        button-style="solid"
+        v-model:value="data.options.listType"
+    >
+      <n-radio-button value="text">text</n-radio-button>
+      <n-radio-button value="image">image</n-radio-button>
+      <n-radio-button value="image-card">image-card</n-radio-button>
+    </n-radio-group>
+  </n-form-item>
+  <n-form-item label="文件参数名">
+    <n-input v-model:value="data.options.name" />
+  </n-form-item>
+
+  <n-form-item label="上传地址">
+    <n-input v-model:value="data.options.action" />
+  </n-form-item>
+
+  <n-form-item label="接受上传的文件类型(多个使用 , 隔开)">
+    <n-input v-model:value="data.options.accept" />
+  </n-form-item>
+  <n-form-item label="最大上传数量">
+    <n-input-number v-model:value.number="data.options.maxCount" :min="1" />
+  </n-form-item>
+
+  <n-form-item label="上传请求方法">
+    <n-radio-group button-style="solid" v-model:value="data.options.method">
+      <n-radio-button value="post">POST</n-radio-button>
+      <n-radio-button value="put">PUT</n-radio-button>
+      <n-radio-button value="get">GET</n-radio-button>
+      <n-radio-button value="delete">DELETE</n-radio-button>
+    </n-radio-group>
+  </n-form-item>
+
+  <n-form-item label="上传属性">
+    <n-space item-style="display: flex;" align="center">
+      <n-checkbox v-model:checked="data.options.showFileList">显示列表</n-checkbox>
+      <n-checkbox v-model:checked="data.options.multiple">多选</n-checkbox>
+      <n-checkbox v-model:checked="data.options.defaultUpload">否默认上传</n-checkbox>
+      <n-checkbox v-model:checked="data.options.directory">目录上传</n-checkbox>
+      <n-checkbox v-model:checked="data.options.directoryDnd">目录拖拽上传</n-checkbox>
+    </n-space>
+  </n-form-item>
+  <n-form-item label="操作属性">
+    <n-space item-style="display: flex;" align="center">
+      <n-checkbox v-model:checked="data.options.showDownloadButton">显示下载按钮</n-checkbox>
+      <n-checkbox v-model:checked="data.options.showRetryButton">显示重新上传按钮</n-checkbox>
+      <n-checkbox v-model:checked="data.options.showRemoveButton">显示删除按钮</n-checkbox>
+      <n-checkbox v-model:checked="data.options.showCancelButton">是否显示取消按钮</n-checkbox>
+      <n-checkbox v-model:checked="data.options.showPreviewButton">是否允许显示预览按钮</n-checkbox>
+    </n-space>
+  </n-form-item>
+  <n-form-item
+      label="显示属性">
+    <n-checkbox
+        v-model:checked="data.options.showLabel"
+    >显示标签
+    </n-checkbox>
+  </n-form-item>
+  <n-form-item label="操作属性">
+    <n-checkbox
+        v-model:checked="data.options.rules.required"
+    >必填
+    </n-checkbox
+    >
+    <n-checkbox
+        v-model:checked="data.options.disabled"
+    >禁用
+    </n-checkbox>
+  </n-form-item>
+</template>
+<script lang="ts">
+import {defineComponent, ref, watch} from 'vue'
+
+export default defineComponent({
+  name: 'InputWidget',
+  props: {
+    select: {
+      type: Object
+    }
+  },
+  emits: ['update:select'],
+  setup(props, context) {
+    const data = ref<any>(props.select)
+    watch(
+        () => props.select,
+        val => (data.value = val)
+    )
+    watch(data, val => context.emit('update:select', val))
+    return {
+      data,
+    }
+  }
+})
+
+</script>
+
+
+<style scoped>
+
+</style>
diff --git a/src/components/RichTextEditor.vue b/src/components/naiveui/components/custom/RichTextEditor.vue
similarity index 100%
rename from src/components/RichTextEditor.vue
rename to src/components/naiveui/components/custom/RichTextEditor.vue
diff --git a/src/components/naiveui/components/custom/table/GTable.vue b/src/components/naiveui/components/custom/table/GTable.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3e2273cd0bc1a47653cf161d81318fdd8a6a1d06
--- /dev/null
+++ b/src/components/naiveui/components/custom/table/GTable.vue
@@ -0,0 +1,363 @@
+
+<template>
+  <table v-if="data.key"
+         :key="data.key"
+         :class="(widgetFormSelect?.key === data.key?'active':'') +' table-'+data.options.theme"
+         :bordered="data.options.bordered"
+         :bottom-bordered="data.options.bottomBordered"
+         :single-column="data.options.singleColumn"
+         :single-line="data.options.singleLine"
+         :striped="data.options.striped"
+         :style="{ width: data.options.width,height: data.options.height }"
+         @click="handleItemClick(data)"
+         class="widget-col widget-view">
+    <tbody>
+    <tr v-for="(col,colIndex) in data.columns" :key="colIndex">
+      <td v-for="(td,tdIndex) in col" :key="'td_'+tdIndex" :colspan="td.col" :rowspan="td.row"
+          @contextmenu.prevent="rightClick($event,colIndex,tdIndex)"  :class="{CellHide:td.hide}">
+        <Draggable
+            class="widget-col-list"
+            item-key="key"
+            ghostClass="ghost"
+            handle=".drag-widget"
+            :animation="200"
+            :group="{ name: 'people' }"
+            :no-transition-on-drag="true"
+            :list="td.list"
+            @add="handleTdMoveAdd($event, data, colIndex,tdIndex)"
+        >
+          <template #item="{ element, index }">
+            <transition-group name="fade" tag="div">
+              <DesignFormItem
+                  v-if="element.key"
+                  :key="element.key"
+                  :element="element"
+                  :config="widgetForm.config"
+                  :selectWidget="widgetFormSelect"
+                  @click.stop="handleItemClick(element)"
+                  @copy="handleCopyClick(index, col.list)"
+                  @delete="handleDeleteClick(index, col.list)"
+              />
+            </transition-group>
+          </template>
+        </Draggable>
+        <div
+            class="widget-view-action widget-col-action"
+            v-if="widgetFormSelect?.key === data.key"
+        >
+          <SvgIcon
+              iconClass="delete" class-name="delete"
+              @click.stop="handleDeleteClick(index, widgetForm.list)"
+          />
+        </div>
+
+        <div
+            class="widget-view-drag widget-col-drag"
+            v-if="widgetFormSelect?.key === data.key"
+        >
+          <SvgIcon iconClass="move" className="drag-widget" />
+        </div>
+      </td>
+    </tr>
+    </tbody>
+  </table>
+  <div v-show="showContextMenu" class="right-menu" :style="{ top:  + positionY+'px',left:  + positionX+'px', }">
+    <ul style="list-style-type: none">
+      <li @click="handlerRightCol" v-if="showRightColMenu">
+        向右合并单元格
+      </li>
+      <li @click="handlerDownRow" v-if="showDownRowMenu">
+        向下合并单元格
+      </li>
+      <li @click="handlerResetTable" v-if="showResetTableMenu">
+        拆分单元格
+      </li>
+      <li @click="handlerAppendCol">
+        追加行
+      </li>
+      <li @click="handlerAppendRow">
+        追加列
+      </li>
+    </ul>
+  </div>
+
+</template>
+
+<script lang="ts">
+import {computed, defineComponent, PropType, reactive, ref, toRefs, watch} from "vue";
+import {WidgetForm} from "../../../config/naiveui";
+import Draggable from 'vuedraggable'
+import { merge } from 'lodash'
+import SvgIcon from '../../../../../components/SvgIcon.vue'
+import {naiveui} from "../../../config";
+import GenerateFormItem from '../../generate/GenerateFormItem.vue'
+import {v4} from "uuid";
+import DesignFormItem from "../../design/DesignFormItem.vue";
+let td = {col:1,row:1,hide:false,list:[]};
+let tr = [td,td];
+export default defineComponent({
+  name: 'GTable',
+  components:{
+    Draggable,
+    SvgIcon,
+    GenerateFormItem,
+    DesignFormItem
+  },
+  props: {
+    widgetForm: {
+      type: Object as PropType<WidgetForm>,
+      required: true
+    },
+    element: {
+      type: Object,
+      required: true
+    },
+    elementIndex: {
+      type: Number,
+      required: true
+    },
+    widgetFormSelect: {
+      type: Object
+    },
+  },
+  emits: ['update:widgetForm', 'update:widgetFormSelect', 'update:element'],
+  setup(props, context){
+    const data = ref<any>(props.element)
+    const widgetForm = ref<any>(props.widgetForm)
+    watch(
+        () => props.element,
+        val => (data.value = val)
+    )
+    watch(
+        () => props.widgetForm,
+        val => (widgetForm.value = val)
+    )
+    watch(data, val => context.emit('update:element', val))
+    watch(widgetForm, val => context.emit('update:widgetForm', val))
+
+    const state =  reactive({
+      positionX:0,
+      positionY:0,
+      showContextMenu:false,
+      currentRowIndex:0,
+      currentColIndex:0,
+    })
+
+    const showRightColMenu = computed(() => {
+      if(state.showContextMenu){
+        const col = data.value.columns[state.currentRowIndex][state.currentColIndex].col;
+        const td = data.value.columns[state.currentRowIndex][state.currentColIndex+col];
+        return (td&&td.row<2&&td.col<2&&!td.hide);
+      }else{
+        return false;
+      }
+    })
+    const showDownRowMenu = computed(() => {
+      if(state.showContextMenu){
+        const row = data.value.columns[state.currentRowIndex][state.currentColIndex].row;
+        let td = undefined;
+        if(typeof data.value.columns[state.currentRowIndex+row] !== 'undefined'){
+          td = data.value.columns[state.currentRowIndex+row][state.currentColIndex];
+        }
+        return (td&&td.row<2&&td.col<2&&!td.hide);
+      }else{
+        return false;
+      }
+    })
+    const showResetTableMenu = computed(() => {
+      if(state.showContextMenu){
+        const col = data.value.columns[state.currentRowIndex][state.currentColIndex].col;
+        const td = data.value.columns[state.currentRowIndex][state.currentColIndex];
+        console.log('td=',td)
+        return (td&&!td.hide&&(td.row>1||td.col>1));
+      }else{
+        return false;
+      }
+    })
+
+    const rightClick=(e,rowIndex,colIndex)=>{
+      state.positionX = e.clientX;
+      state.positionY = e.clientY;
+      state.currentRowIndex = rowIndex;
+      state.currentColIndex = colIndex;
+      state.showContextMenu = true;
+    }
+
+    const hideRightContextMenu=()=>{
+          state.showContextMenu = false;
+    }
+    // 添加监听取消右键菜单
+    document.addEventListener("click", hideRightContextMenu, true);
+    document.addEventListener("contextmenu", hideRightContextMenu, true);
+
+
+    //向右合并单元格
+    const handlerRightCol =()=>{
+      let col = data.value.columns[state.currentRowIndex][state.currentColIndex].col;
+      let row = data.value.columns[state.currentRowIndex][state.currentColIndex].row;
+      if(row>1){
+        for(let i =0;i<row;i++){
+          data.value.columns[state.currentRowIndex+i][state.currentColIndex+col].hide=true;
+          data.value.columns[state.currentRowIndex][state.currentColIndex].col=col+1;
+        }
+      }else{
+        data.value.columns[state.currentRowIndex][state.currentColIndex+col].hide=true;
+        data.value.columns[state.currentRowIndex][state.currentColIndex].col=col+1;
+      }
+      // let nextCol = this.columns[state.currentRowIndex][state.currentColIndex+col].col;
+      // let nextRow = this.columns[state.currentRowIndex][state.currentColIndex+col].row;
+      // if(nextCol<2&nextRow<2){
+
+      // }else{
+      //     alert('请先拆分右侧单元格！');
+      // }
+
+
+    },
+    //向下合并单元格
+    handlerDownRow=()=>{
+      let col = data.value.columns[state.currentRowIndex][state.currentColIndex].col;
+      let row = data.value.columns[state.currentRowIndex][state.currentColIndex].row;
+      if(col>1){
+        for(let i =0;i<col;i++){
+          data.value.columns[state.currentRowIndex+row][state.currentColIndex+i].hide=true;
+          data.value.columns[state.currentRowIndex][state.currentColIndex].row=row+1;
+        }
+      }else{
+        data.value.columns[state.currentRowIndex+row][state.currentColIndex].hide=true;
+        data.value.columns[state.currentRowIndex][state.currentColIndex].row=row+1;
+      }
+      // let nextCol = this.columns[state.currentRowIndex+1][state.currentColIndex].col;
+      // let nextRow = this.columns[state.currentRowIndex+1][state.currentColIndex].row;
+      // if(nextCol<2&nextRow<2){
+
+      // }else{
+      //     alert('请先拆分下方单元格！');
+      // }
+    }
+    const handlerResetTable=()=>{
+      //debugger;
+      let col = data.value.columns[state.currentRowIndex][state.currentColIndex].col;
+      let row = data.value.columns[state.currentRowIndex][state.currentColIndex].row;
+      if(col===1&&row===1)return;
+
+      for(let i = 0;i<row;i++){
+        for(let j = 0;j<col;j++){
+          data.value.columns[state.currentRowIndex+i][state.currentColIndex+j].hide = false;
+        }
+      }
+      data.value.columns[state.currentRowIndex][state.currentColIndex].row=1;
+      data.value.columns[state.currentRowIndex][state.currentColIndex].col=1;
+    }
+    //追加行
+    const handlerAppendCol=()=>{
+      console.log(tr);
+      const _tr = merge(JSON.parse(JSON.stringify(tr)))
+      data.value.columns.push(_tr);
+    }
+    const handlerAppendRow=()=>{
+      tr.push(td);
+      data.value.columns.forEach(item=>{
+        const _td = merge(JSON.parse(JSON.stringify(td)))
+        item.push(_td);
+      })
+    }
+    const handleTdMoveAdd = (
+        event: any,
+        row: any,
+        index: string | number | symbol,
+        tdIndex: string | number | symbol
+    ) => {
+      const { newIndex, oldIndex, item } = event
+      console.log('element=',data)
+      // console.log('JSON.stringify(props.widgetForm.list[index])=',JSON.stringify(props.widgetForm.list[index]))
+      // const list = JSON.parse(JSON.stringify(data))
+      //
+      // if (item.className.includes('data-grid')) {
+      //   item.tagName === 'DIV' &&
+      //   list.splice(oldIndex, 0, row.columns[index][tdIndex].list[newIndex])
+      //   row.columns[index][tdIndex].list.splice(newIndex, 1)
+      //   return false
+      // }
+
+      const key = v4().replaceAll('-', '')
+      console.log('JSS=',JSON.stringify(row.columns))
+      row.columns[index][tdIndex].list[newIndex] = {
+        ...row.columns[index][tdIndex].list[newIndex],
+        key,
+        model: `${row.columns[index][tdIndex].list[newIndex].type}_${key}`,
+        rules: []
+      }
+
+      if (
+          row.columns[index][tdIndex].list[newIndex].type === 'radio' ||
+          row.columns[index][tdIndex].list[newIndex].type === 'checkbox' ||
+          row.columns[index][tdIndex].list[newIndex].type === 'select'
+      ) {
+        row.columns[index][tdIndex].list[newIndex] = {
+          ...row.columns[index][tdIndex].list[newIndex],
+          options: {
+            ...row.columns[index][tdIndex].list[newIndex].options,
+            options: row.columns[index][tdIndex].list[
+                newIndex
+                ].options.options.map((item: any) => ({ ...item }))
+          }
+        }
+      }
+      context.emit('update:widgetFormSelect', row.columns[index][tdIndex].list[newIndex])
+    }
+    const handleItemClick = (row: any) => {
+      context.emit('update:widgetFormSelect', row)
+    }
+
+    return{
+      ...toRefs(state),
+      data,
+      widgetForm,
+      showRightColMenu,
+      showDownRowMenu,
+      showResetTableMenu,
+      rightClick,
+      hideRightContextMenu,
+      handlerDownRow,
+      handlerRightCol,
+      handlerResetTable,
+      handlerAppendCol,
+      handlerAppendRow,
+      handleTdMoveAdd,
+      handleItemClick
+    }
+  }
+
+})
+</script>
+
+<style scoped>
+.right-menu{
+  background-color:#ffffff;
+  z-index:100;
+  width:200px;
+  position: fixed;
+  border: 1px solid #ccc;
+  box-shadow: 3px 3px 8px #999;
+  border-radius: 3px;
+  padding: 8px 0;
+}
+.right-menu ul{
+  margin:0px;
+  padding:0px;
+}
+.right-menu ul li{
+  padding:0 15px;
+  height:30px;
+  line-height: 30px;
+}
+.right-menu ul li:hover{
+  cursor: pointer;
+  background-color: #ccc;
+}
+
+.CellHide{
+  display: none;
+}
+</style>
diff --git a/src/components/naiveui/components/custom/table/GTableItem.vue b/src/components/naiveui/components/custom/table/GTableItem.vue
new file mode 100644
index 0000000000000000000000000000000000000000..477bc7b9ddf2a91ee8f163fc64df7c78a905d095
--- /dev/null
+++ b/src/components/naiveui/components/custom/table/GTableItem.vue
@@ -0,0 +1,188 @@
+
+<template>
+  <td v-for="(td,tdIndex) in trItem"
+      :key="tdIndex"
+      :colspan="td.col"
+      :rowspan="td.row"
+      @contextmenu.prevent="rightClick($event,trIndex,tdIndex)"
+      :class={CellHide:td.hide}
+  >
+    <slot/>
+  </td>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent, PropType, reactive, ref, toRefs, watch} from "vue";
+import {WidgetForm} from "../../../config/naiveui";
+import { merge } from 'lodash'
+import {naiveui} from "../../../config";
+let td = {col:1,row:1,hide:false,columns:[]};
+let tr = [td,td];
+export default defineComponent({
+  name: 'GTable',
+  props: {
+    config: {
+      type: Object as PropType<WidgetForm['config']>,
+      required: true
+    },
+    element: {
+      type: Object,
+      required: true
+    },
+  },
+  setup(props, context){
+    const data = ref<any>(props.element)
+    watch(
+        () => props.element,
+        val => (data.value = val)
+    )
+    watch(data, val => context.emit('update:element', val))
+
+    const state =  reactive({
+      positionX:0,
+      positionY:0,
+      showContextMenu:false,
+      currentRowIndex:0,
+      currentColIndex:0,
+    })
+
+    const showRightColMenu = computed(() => {
+      if(state.showContextMenu){
+        const col = data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex].col;
+        const td = data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex+col];
+        return (td&&td.row<2&&td.col<2&&!td.hide);
+      }else{
+        return false;
+      }
+    })
+    const showDownRowMenu = computed(() => {
+      if(state.showContextMenu){
+        const row = data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex].row;
+        let td = undefined;
+        if(typeof data.value.options.layoutArray[state.currentRowIndex+row] !== 'undefined'){
+          td = data.value.options.layoutArray[state.currentRowIndex+row][state.currentColIndex];
+        }
+        return (td&&td.row<2&&td.col<2&&!td.hide);
+      }else{
+        return false;
+      }
+    })
+    const showResetTableMenu = computed(() => {
+      if(state.showContextMenu){
+        const col = data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex].col;
+        const td = data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex+col];
+        return (td&&td.row<2&&td.col<2&&!td.hide);
+      }else{
+        return false;
+      }
+    })
+
+    const rightClick=(e,rowIndex,colIndex)=>{
+      state.positionX = e.clientX;
+      state.positionY = e.clientY;
+      state.showContextMenu = true;
+      state.currentRowIndex = rowIndex;
+      state.currentColIndex = colIndex;
+    }
+
+    const hideRightContextMenu=()=>{
+          state.showContextMenu = false;
+    }
+
+
+    //向右合并单元格
+    const handlerRightCol =()=>{
+      let col = data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex].col;
+      let row = data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex].row;
+      if(row>1){
+        for(let i =0;i<row;i++){
+          data.value.options.layoutArray[state.currentRowIndex+i][state.currentColIndex+col].hide=true;
+          data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex].col=col+1;
+        }
+      }else{
+        data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex+col].hide=true;
+        data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex].col=col+1;
+      }
+      // let nextCol = this.columns[state.currentRowIndex][state.currentColIndex+col].col;
+      // let nextRow = this.columns[state.currentRowIndex][state.currentColIndex+col].row;
+      // if(nextCol<2&nextRow<2){
+
+      // }else{
+      //     alert('请先拆分右侧单元格！');
+      // }
+
+
+    },
+    //向下合并单元格
+    handlerDownRow=()=>{
+      let col = data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex].col;
+      let row = data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex].row;
+      if(col>1){
+        for(let i =0;i<col;i++){
+          data.value.options.layoutArray[state.currentRowIndex+row][state.currentColIndex+i].hide=true;
+          data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex].row=row+1;
+        }
+      }else{
+        data.value.options.layoutArray[state.currentRowIndex+row][state.currentColIndex].hide=true;
+        data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex].row=row+1;
+      }
+      // let nextCol = this.columns[state.currentRowIndex+1][state.currentColIndex].col;
+      // let nextRow = this.columns[state.currentRowIndex+1][state.currentColIndex].row;
+      // if(nextCol<2&nextRow<2){
+
+      // }else{
+      //     alert('请先拆分下方单元格！');
+      // }
+    }
+    const handlerResetTable=()=>{
+      //debugger;
+      let col = data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex].col;
+      let row = data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex].row;
+      if(col===1&&row===1)return;
+
+      for(let i = 0;i<row;i++){
+        for(let j = 0;j<col;j++){
+          data.value.options.layoutArray[state.currentRowIndex+i][state.currentColIndex+j].hide = false;
+        }
+      }
+      data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex].row=1;
+      data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex].col=1;
+    }
+    //追加行
+    const handlerAppendCol=()=>{
+      console.log(tr);
+      const _tr = merge(JSON.parse(JSON.stringify(tr)))
+      data.value.options.layoutArray.push(_tr);
+    }
+    const handlerAppendRow=()=>{
+      tr.push(td);
+      data.value.options.layoutArray.forEach(item=>{
+        const _td = merge(JSON.parse(JSON.stringify(td)))
+        item.push(_td);
+      })
+    }
+
+    return{
+      ...toRefs(state),
+      data,
+      showRightColMenu,
+      showDownRowMenu,
+      showResetTableMenu,
+      rightClick,
+      hideRightContextMenu,
+      handlerDownRow,
+      handlerRightCol,
+      handlerResetTable,
+      handlerAppendCol,
+      handlerAppendRow
+    }
+  }
+
+})
+</script>
+
+<style scoped>
+.CellHide{
+  display: none;
+}
+</style>
diff --git a/src/components/naiveui/components/custom/table/GTable_old.vue b/src/components/naiveui/components/custom/table/GTable_old.vue
new file mode 100644
index 0000000000000000000000000000000000000000..06969e2b7bbf46d993740592efb3c344841c4eae
--- /dev/null
+++ b/src/components/naiveui/components/custom/table/GTable_old.vue
@@ -0,0 +1,442 @@
+
+<template>
+  <table v-if="element.key"
+         :key="element.key"
+         :class="(select?.key === element.key?'active':'') +' table-'+element.options.theme"
+         :bordered="element.options.bordered"
+         :bottom-bordered="element.options.bottomBordered"
+         :single-column="element.options.singleColumn"
+         :single-line="element.options.singleLine"
+         :striped="element.options.striped"
+         :style="{ width: element.options.width,height: element.options.height }"
+         @click="handleItemClick(element)"
+         class="widget-col widget-view">
+    <tbody>
+    <tr v-for="(col,colIndex) in element.columns" :key="colIndex">
+      <td v-for="(td,tdIndex) in col" :key="tdIndex" :colspan="td.col" :rowspan="td.row">
+        <Draggable
+            class="widget-col-list"
+            item-key="key"
+            ghostClass="ghost"
+            handle=".drag-widget"
+            :animation="200"
+            :group="{ name: 'people' }"
+            :no-transition-on-drag="true"
+            :list="col.list"
+            @add="handleTdMoveAdd($event, element, colIndex)"
+        >
+          <template #item="{ element, index }">
+            <transition-group name="fade" tag="div">
+              <DesignFormItem
+                  v-if="element.key"
+                  :key="element.key"
+                  :element="element"
+                  :config="widgetForm.config"
+                  :selectWidget="select"
+                  @click.stop="handleItemClick(element)"
+                  @copy="handleCopyClick(index, col.list)"
+                  @delete="handleDeleteClick(index, col.list)"
+              />
+            </transition-group>
+          </template>
+        </Draggable>
+        <div
+            class="widget-view-action widget-col-action"
+            v-if="select?.key === element.key"
+        >
+          <SvgIcon
+              iconClass="delete" class-name="delete"
+              @click.stop="handleDeleteClick(index, widgetForm.list)"
+          />
+        </div>
+
+        <div
+            class="widget-view-drag widget-col-drag"
+            v-if="select?.key === element.key"
+        >
+          <SvgIcon iconClass="move" className="drag-widget" />
+        </div>
+      </td>
+    </tr>
+    </tbody>
+  </table>
+<!--  <div style="padding:5px;margin-top:10px" >-->
+<!--    <table :size="config.size"-->
+<!--             :class="'table-'+element.options.theme"-->
+<!--             :bordered="element.options.bordered"-->
+<!--             :bottom-bordered="element.options.bottomBordered"-->
+<!--             :single-column="element.options.singleColumn"-->
+<!--             :single-line="element.options.singleLine"-->
+<!--             :striped="element.options.striped"-->
+<!--             :style="{ width: element.options.width,height: element.options.height }">-->
+<!--&lt;!&ndash;      <thead>&ndash;&gt;-->
+<!--&lt;!&ndash;      <tr v-for="(tr,trIndex) in layoutArray" :key="trIndex">&ndash;&gt;-->
+<!--&lt;!&ndash;        <th>Abandon</th>&ndash;&gt;-->
+<!--&lt;!&ndash;        <th>Abormal</th>&ndash;&gt;-->
+<!--&lt;!&ndash;        <th>Abolish</th>&ndash;&gt;-->
+<!--&lt;!&ndash;        <th>...</th>&ndash;&gt;-->
+<!--&lt;!&ndash;        <th>万事开头难</th>&ndash;&gt;-->
+<!--&lt;!&ndash;      </tr>&ndash;&gt;-->
+<!--&lt;!&ndash;      </thead>&ndash;&gt;-->
+<!--      <tbody>-->
+<!--      <tr v-for="(tr,trIndex) in element.columns" :key="trIndex">-->
+<!--        <td v-for="(td,tdIndex) in tr" :key="tdIndex" :colspan="td.col" :rowspan="td.row"-->
+<!--            @contextmenu.prevent="rightClick($event,trIndex,tdIndex)" :class="{CellHide:td.hide}" >-->
+<!--          <Draggable-->
+<!--              class="widget-col-list"-->
+<!--              item-key="key"-->
+<!--              ghostClass="ghost"-->
+<!--              handle=".drag-widget"-->
+<!--              :animation="200"-->
+<!--              :group="{ name: 'people' }"-->
+<!--              :no-transition-on-drag="true"-->
+<!--              :list="td.list"-->
+<!--              @add="handleTdMoveAdd($event, tr, tdIndex)"-->
+<!--          >-->
+<!--            <template #item="{ element, index }">-->
+<!--              <transition-group name="fade" tag="div">-->
+<!--                <GenerateFormItem-->
+<!--                    v-if="element.key"-->
+<!--                    :key="element.key"-->
+<!--                    :element="element"-->
+<!--                    :config="config"-->
+<!--                    @click.stop="handleItemClick(element)"-->
+<!--                    @copy="handleCopyClick(index, td.list)"-->
+<!--                    @delete="handleDeleteClick(index, td.list)"-->
+<!--                />-->
+<!--              </transition-group>-->
+<!--            </template>-->
+<!--          </Draggable>-->
+<!--        </td>-->
+<!--      </tr>-->
+<!--      </tbody>-->
+<!--    </table>-->
+<!--  </div>-->
+  <div v-show="showContextMenu" class="right-menu" :style="{ top:  + positionY+'px',left:  + positionX+'px', }">
+    <ul style="list-style-type: none">
+      <li @click="handlerRightCol" v-if="showRightColMenu">
+        向右合并单元格
+      </li>
+      <li @click="handlerDownRow" v-if="showDownRowMenu">
+        向下合并单元格
+      </li>
+      <li @click="handlerResetTable" v-if="showResetTableMenu">
+        拆分单元格
+      </li>
+      <li @click="handlerAppendCol">
+        追加行
+      </li>
+      <li @click="handlerAppendRow">
+        追加列
+      </li>
+    </ul>
+  </div>
+
+</template>
+
+<script lang="ts">
+import {computed, defineComponent, PropType, reactive, ref, toRefs, watch} from "vue";
+import {WidgetForm} from "../../../config/naiveui";
+import Draggable from 'vuedraggable'
+import { merge } from 'lodash'
+import {naiveui} from "../../../config";
+import GenerateFormItem from '../../generate/GenerateFormItem.vue'
+import {v4} from "uuid";
+let td = {col:1,row:1,hide:false,columns:[]};
+let tr = [td,td];
+export default defineComponent({
+  name: 'GTable',
+  components:{
+    Draggable,
+    GenerateFormItem
+  },
+  props: {
+    widgetForm: {
+      type: Object as PropType<WidgetForm>,
+      required: true
+    },
+    element: {
+      type: Object,
+      required: true
+    },
+    select: {
+      type: Object
+    },
+  },
+  setup(props, context){
+    const data = ref<any>(props.element)
+    const widgetForm = ref<any>(props.widgetForm)
+    watch(
+        () => props.element,
+        val => (data.value = val)
+    )
+    watch(
+        () => props.widgetForm,
+        val => (widgetForm.value = val)
+    )
+    watch(data, val => context.emit('update:element', val))
+    watch(widgetForm, val => context.emit('update:widgetForm', val))
+
+    const state =  reactive({
+      positionX:0,
+      positionY:0,
+      showContextMenu:false,
+      currentRowIndex:0,
+      currentColIndex:0,
+    })
+
+    const showRightColMenu = computed(() => {
+      console.log('state.showContextMenu=',state.showContextMenu)
+
+      if(state.showContextMenu){
+        const col = data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex].col;
+        const td = data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex+col];
+        return (td&&td.row<2&&td.col<2&&!td.hide);
+      }else{
+        return false;
+      }
+    })
+    const showDownRowMenu = computed(() => {
+      if(state.showContextMenu){
+        const row = data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex].row;
+        let td = undefined;
+        if(typeof data.value.options.layoutArray[state.currentRowIndex+row] !== 'undefined'){
+          td = data.value.options.layoutArray[state.currentRowIndex+row][state.currentColIndex];
+        }
+        return (td&&td.row<2&&td.col<2&&!td.hide);
+      }else{
+        return false;
+      }
+    })
+    const showResetTableMenu = computed(() => {
+      if(state.showContextMenu){
+        const col = data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex].col;
+        const td = data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex+col];
+        return (td&&td.row<2&&td.col<2&&!td.hide);
+      }else{
+        return false;
+      }
+    })
+
+    const rightClick=(e,rowIndex,colIndex)=>{
+      state.positionX = e.clientX;
+      state.positionY = e.clientY;
+      state.showContextMenu = true;
+      state.currentRowIndex = rowIndex;
+      state.currentColIndex = colIndex;
+    }
+
+    const hideRightContextMenu=()=>{
+          state.showContextMenu = false;
+    }
+    // 添加监听取消右键菜单
+    document.addEventListener("click", hideRightContextMenu, true);
+    document.addEventListener("contextmenu", hideRightContextMenu, true);
+
+
+    //向右合并单元格
+    const handlerRightCol =()=>{
+      let col = data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex].col;
+      let row = data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex].row;
+      if(row>1){
+        for(let i =0;i<row;i++){
+          data.value.options.layoutArray[state.currentRowIndex+i][state.currentColIndex+col].hide=true;
+          data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex].col=col+1;
+        }
+      }else{
+        data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex+col].hide=true;
+        data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex].col=col+1;
+      }
+      // let nextCol = this.columns[state.currentRowIndex][state.currentColIndex+col].col;
+      // let nextRow = this.columns[state.currentRowIndex][state.currentColIndex+col].row;
+      // if(nextCol<2&nextRow<2){
+
+      // }else{
+      //     alert('请先拆分右侧单元格！');
+      // }
+
+
+    },
+    //向下合并单元格
+    handlerDownRow=()=>{
+      let col = data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex].col;
+      let row = data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex].row;
+      if(col>1){
+        for(let i =0;i<col;i++){
+          data.value.options.layoutArray[state.currentRowIndex+row][state.currentColIndex+i].hide=true;
+          data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex].row=row+1;
+        }
+      }else{
+        data.value.options.layoutArray[state.currentRowIndex+row][state.currentColIndex].hide=true;
+        data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex].row=row+1;
+      }
+      // let nextCol = this.columns[state.currentRowIndex+1][state.currentColIndex].col;
+      // let nextRow = this.columns[state.currentRowIndex+1][state.currentColIndex].row;
+      // if(nextCol<2&nextRow<2){
+
+      // }else{
+      //     alert('请先拆分下方单元格！');
+      // }
+    }
+    const handlerResetTable=()=>{
+      //debugger;
+      let col = data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex].col;
+      let row = data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex].row;
+      if(col===1&&row===1)return;
+
+      for(let i = 0;i<row;i++){
+        for(let j = 0;j<col;j++){
+          data.value.options.layoutArray[state.currentRowIndex+i][state.currentColIndex+j].hide = false;
+        }
+      }
+      data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex].row=1;
+      data.value.options.layoutArray[state.currentRowIndex][state.currentColIndex].col=1;
+    }
+    //追加行
+    const handlerAppendCol=()=>{
+      console.log(tr);
+      const _tr = merge(JSON.parse(JSON.stringify(tr)))
+      data.value.options.layoutArray.push(_tr);
+    }
+    const handlerAppendRow=()=>{
+      tr.push(td);
+      data.value.options.layoutArray.forEach(item=>{
+        const _td = merge(JSON.parse(JSON.stringify(td)))
+        item.push(_td);
+      })
+    }
+    const handleTdMoveAdd = (
+        event: any,
+        row: any,
+        index: string | number | symbol
+    ) => {
+      const { newIndex, oldIndex, item } = event
+      const list = JSON.parse(JSON.stringify(props.widgetForm.list))
+
+      if (item.className.includes('data-grid')) {
+        item.tagName === 'DIV' &&
+        list.splice(oldIndex, 0, row.columns[index].list[newIndex])
+        row.columns[index].list.splice(newIndex, 1)
+        return false
+      }
+
+      const key = v4().replaceAll('-', '')
+
+      row.columns[index].list[newIndex] = {
+        ...row.columns[index].list[newIndex],
+        key,
+        model: `${row.columns[index].list[newIndex].type}_${key}`,
+        rules: []
+      }
+
+      if (
+          row.columns[index].list[newIndex].type === 'radio' ||
+          row.columns[index].list[newIndex].type === 'checkbox' ||
+          row.columns[index].list[newIndex].type === 'select'
+      ) {
+        row.columns[index].list[newIndex] = {
+          ...row.columns[index].list[newIndex],
+          options: {
+            ...row.columns[index].list[newIndex].options,
+            options: row.columns[index].list[
+                newIndex
+                ].options.options.map((item: any) => ({ ...item }))
+          }
+        }
+      }
+      context.emit('update:widgetFormSelect', row.columns[index].list[newIndex])
+    }
+    // const handleTdMoveAdd = (
+    //     event: any,
+    //     tr: any,
+    //     index: string | number | symbol
+    // ) => {
+    //   const { newIndex, oldIndex, item } = event
+    //   // console.log('item=',item)
+    //   // tr[index].list.push(item)
+    //   // // td.list.push()
+    //   // const list = JSON.parse(JSON.stringify(data.value.options.list))
+    //   // console.log('td=',tr)
+    //   // const list = JSON.parse(JSON.stringify(tr[index].list))
+    //   //
+    //   const key = v4().replaceAll('-', '')
+    //   //
+    //   tr[index].list[newIndex] = {
+    //     ...tr[index].list[newIndex],
+    //     key,
+    //     model: `${tr[index].list[newIndex].type}_${key}`,
+    //     rules: []
+    //   }
+    //   //
+    //   // if (
+    //   //     row.columns[index].list[newIndex].type === 'radio' ||
+    //   //     row.columns[index].list[newIndex].type === 'checkbox' ||
+    //   //     row.columns[index].list[newIndex].type === 'select'
+    //   // ) {
+    //   //   row.columns[index].list[newIndex] = {
+    //   //     ...row.columns[index].list[newIndex],
+    //   //     options: {
+    //   //       ...row.columns[index].list[newIndex].options,
+    //   //       options: row.columns[index].list[
+    //   //           newIndex
+    //   //           ].options.options.map((item: any) => ({ ...item }))
+    //   //     }
+    //   //   }
+    //   // }
+    //   context.emit('update:widgetFormSelect', tr[index])
+    // }
+    const handleItemClick = (row: any) => {
+      context.emit('update:widgetFormSelect', row)
+    }
+
+    return{
+      ...toRefs(state),
+      data,
+      widgetForm,
+      showRightColMenu,
+      showDownRowMenu,
+      showResetTableMenu,
+      rightClick,
+      hideRightContextMenu,
+      handlerDownRow,
+      handlerRightCol,
+      handlerResetTable,
+      handlerAppendCol,
+      handlerAppendRow,
+      handleTdMoveAdd,
+      handleItemClick
+    }
+  }
+
+})
+</script>
+
+<style scoped>
+.right-menu{
+  background-color:#ffffff;
+  z-index:100;
+  width:200px;
+  position: fixed;
+  border: 1px solid #ccc;
+  box-shadow: 3px 3px 8px #999;
+  border-radius: 3px;
+  padding: 8px 0;
+}
+.right-menu ul{
+  margin:0px;
+  padding:0px;
+}
+.right-menu ul li{
+  padding:0 15px;
+  height:30px;
+  line-height: 30px;
+}
+.right-menu ul li:hover{
+  cursor: pointer;
+  background-color: #ccc;
+}
+
+.CellHide{
+  display: none;
+}
+</style>
diff --git a/src/components/naiveui/components/design/DesignConfig.vue b/src/components/naiveui/components/design/DesignConfig.vue
new file mode 100644
index 0000000000000000000000000000000000000000..611dc2954b8295d93b0763eac251885049d7134a
--- /dev/null
+++ b/src/components/naiveui/components/design/DesignConfig.vue
@@ -0,0 +1,183 @@
+<template>
+
+  <n-form layout="vertical" v-if="data" :key="data.key">
+    <n-form-item label="字段标识" v-if="data.type !== 'grid'">
+      <n-input v-model:value="data.model" />
+    </n-form-item>
+
+    <n-form-item label="标题" v-if="data.type !== 'grid'&&data.options.showLabel">
+      <n-input v-model:value="data.label" />
+    </n-form-item>
+
+    <n-form-item label="宽度" v-if="hasKey('width')">
+      <n-input v-model:value="data.options.width" />
+    </n-form-item>
+
+    <n-form-item label="高度" v-if="hasKey('height')">
+      <n-input v-model:value="data.options.height" />
+    </n-form-item>
+
+    <n-form-item label="占位内容" v-if="hasKey('placeholder')">
+      <n-input v-model:value="data.options.placeholder" />
+    </n-form-item>
+
+    <component  v-if="checkComponent(data.type)" :is="data.type" :select="data"/>
+    <template v-if="hasKey('rules')">
+      <h4>验证规则</h4>
+
+      <n-form-item label="触发时机">
+        <n-radio-group
+            v-model:value="data.options.rules.trigger"
+            button-style="solid"
+        >
+          <n-radio-button value="blur">Blur</n-radio-button>
+          <n-radio-button value="change">Change</n-radio-button>
+          <n-radio-button :value="['blur', 'change']">All</n-radio-button>
+        </n-radio-group>
+      </n-form-item>
+
+      <n-form-item label="枚举类型">
+        <n-input v-model:value="data.options.rules.enum" />
+      </n-form-item>
+      <n-form-item label="校验文案">
+        <n-input v-model:value="data.options.rules.message" />
+      </n-form-item>
+
+      <n-form-item label="正则表达式">
+        <n-input v-model:value="data.options.rules.pattern" />
+      </n-form-item>
+
+      <n-form-item label="校验类型">
+        <n-select v-model:value="data.options.rules.type" :options="verifyOptions"></n-select>
+      </n-form-item>
+    </template>
+  </n-form>
+</template>
+
+<script lang="ts">
+import {h, defineComponent, reactive, ref, toRefs, watch, onMounted, computed} from 'vue'
+import Draggable from 'vuedraggable'
+import Input from '../configs/Input.vue'
+import Number from '../configs/Number.vue'
+import Radio from '../configs/Radio.vue'
+import Checkbox from '../configs/Checkbox.vue'
+import Time from '../configs/Time.vue'
+import Date from '../configs/Date.vue'
+import Rate from '../configs/Rate.vue'
+import Select from '../configs/Select.vue'
+import Switch from '../configs/Switch.vue'
+import Slider from '../configs/Slider.vue'
+import Color from '../configs/Color.vue'
+import SelectTree from '../configs/SelectTree.vue'
+import Upload from '../configs/Upload.vue'
+import RichtextEditor from '../configs/RichtextEditor.vue'
+import Transfer from '../configs/Transfer.vue'
+import Grid from '../configs/Grid.vue'
+import Table from '../configs/Table.vue'
+import Alert from '../configs/Alert.vue'
+import Text from '../configs/Text.vue'
+import Divider from '../configs/Divider.vue'
+import Cascader from '../configs/Cascader.vue'
+import Tree from '../configs/Tree.vue'
+import DynamicTags from '../configs/DynamicTags.vue'
+import Button from '../configs/Button.vue'
+import SvgIcon from '../../../../components/SvgIcon.vue'
+import { NSpace,NButton,NInput, useMessage,FormInst } from 'naive-ui'
+import { v4 } from 'uuid'
+import {ComponentType,checkComponent} from '../../enums'
+import type {RowData} from '../../types/NaiveWidgetTypes'
+import type { DataTableColumns } from 'naive-ui'
+export default defineComponent({
+  name: 'DesignConfig',
+  components: {
+    Draggable,
+    SvgIcon,
+    Input,
+    Number,
+    Radio,
+    Checkbox,
+    Time,
+    Date,
+    Rate,
+    Select,
+    Switch,
+    Slider,
+    Color,
+    SelectTree,
+    Upload,
+    RichtextEditor,
+    Transfer,
+    Grid,
+    Table,
+    Alert,
+    Text,
+    Divider,
+    Cascader,
+    Tree,
+    DynamicTags,
+    Button,
+  },
+  props: {
+    select: {
+      type: Object
+    }
+  },
+  emits: ['update:select'],
+  setup(props, context) {
+    const data = ref<any>(props.select)
+    const treeDataFormRef = ref<FormInst | null>(null)
+    watch(
+      () => props.select,
+      val => (data.value = val)
+    )
+    // onMounted(() => {
+    //   item.mComponent = () => import(`@/views/workplace/${item.path}.vue`)
+    // })
+    watch(data, val => context.emit('update:select', val))
+
+    const state = reactive({
+      verifyOptions:[
+        {label:'字符串',value:'string'},
+        {label:'数字',value:'number'},
+        {label:'布尔值',value:'boolean'},
+        {label:'方法',value:'method'},
+        {label:'正则表达式',value:'regexp'},
+        {label:'整数',value:'integer'},
+        {label:'浮点数',value:'float'},
+        {label:'数组',value:'array'},
+        {label:'对象',value:'object'},
+        {label:'枚举',value:'enum'},
+        {label:'日期',value:'date'},
+        {label:'URL地址',value:'url'},
+        {label:'十六进制',value:'hex'},
+        {label:'邮箱地址',value:'email'},
+        {label:'任意类型',value:'any'},
+      ],
+      colorPlacementOptions:[
+        {label:'top-start',value:'top-start'},
+        {label:'top',value:'top'},
+        {label:'top-end',value:'top-end'},
+        {label:'right-start',value:'right-start'},
+        {label:'right',value:'right'},
+        {label:'right-end',value:'right-end'},
+        {label:'bottom-start',value:'bottom-start'},
+        {label:'bottom',value:'bottom'},
+        {label:'bottom-end',value:'bottom-end'},
+        {label:'left-start',value:'left-start'},
+        {label:'left',value:'left'},
+        {label:'left-end',value:'left-end'},
+      ],
+    })
+    const hasKey = (key: string) =>
+      Object.keys(data.value.options).includes(key)
+
+    return {
+      ...toRefs(state),
+      treeDataFormRef,
+      data,
+      hasKey,
+      checkComponent,
+    }
+  }
+})
+</script>
diff --git a/src/components/naiveui/components/design/DesignForm.js b/src/components/naiveui/components/design/DesignForm.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/core/naiveui/NaiveWidgetForm.vue b/src/components/naiveui/components/design/DesignForm.vue
similarity index 41%
rename from src/core/naiveui/NaiveWidgetForm.vue
rename to src/components/naiveui/components/design/DesignForm.vue
index 1d7d7572eefb06d956ec5d2b11b6dd84b787be50..744702d9af0099796ecb0a55a6cb17daf49a49dc 100644
--- a/src/core/naiveui/NaiveWidgetForm.vue
+++ b/src/components/naiveui/components/design/DesignForm.vue
@@ -7,6 +7,7 @@
       :label-placement="widgetForm.config.labelPlacement"
       :labelWidth="widgetForm.config.labelWidth"
       :show-require-mark="!widgetForm.config.hideRequiredMark"
+      :show-label="widgetForm.config.showLabel"
     >
       <Draggable
         class="widget-form-list"
@@ -50,7 +51,7 @@
                   >
                     <template #item="{ element, index }">
                       <transition-group name="fade" tag="div">
-                        <NaiveWidgetFormItem
+                        <DesignFormItem
                             v-if="element.key"
                             :key="element.key"
                             :element="element"
@@ -82,8 +83,94 @@
                 </n-gi>
               </n-grid>
             </template>
+            <template v-else-if="element.type === 'table'">
+<!--              <g-table :element="element" :elementIndex="index" v-model:widgetForm="widgetForm" v-model:widgetFormSelect="widgetFormSelect"/>-->
+              <n-table v-if="element.key"
+                     :key="element.key"
+                     :class="(widgetFormSelect?.key === element.key?'active':'') +' table-'+element.options.theme"
+                     :bordered="element.options.bordered"
+                     :bottom-bordered="element.options.bottomBordered"
+                     :single-column="element.options.singleColumn"
+                     :single-line="element.options.singleLine"
+                     :striped="element.options.striped"
+                     :style="{ width: element.options.width,height: element.options.height }"
+                     @click="handleItemClick(element)"
+                     class="widget-col widget-view">
+                <tbody>
+                <tr v-for="(col,colIndex) in element.columns" :key="colIndex">
+                  <td v-for="(td,tdIndex) in col" :key="'td_'+tdIndex" :colspan="td.col" :rowspan="td.row"
+                      @contextmenu.prevent="rightClick($event,element,colIndex,tdIndex)"  :class="{CellHide:td.hide}">
+                    <Draggable
+                        class="widget-col-list"
+                        item-key="key"
+                        ghostClass="ghost"
+                        handle=".drag-widget"
+                        :animation="200"
+                        :group="{ name: 'people' }"
+                        :no-transition-on-drag="true"
+                        :list="td.list"
+                        @add="handleTdMoveAdd($event, element, colIndex,tdIndex)"
+                    >
+                      <template #item="{ element, index }">
+                        <transition-group name="fade" tag="div">
+                          <DesignFormItem
+                              v-if="element.key"
+                              :key="element.key"
+                              :element="element"
+                              :config="widgetForm.config"
+                              :selectWidget="widgetFormSelect"
+                              @click.stop="handleItemClick(element)"
+                              @copy="handleCopyClick(index, td.list)"
+                              @delete="handleDeleteClick(index, td.list)"
+                          />
+                        </transition-group>
+                      </template>
+                    </Draggable>
+                    <div
+                        class="widget-view-action widget-col-action"
+                        v-if="widgetFormSelect?.key === element.key"
+                    >
+                      <SvgIcon
+                          iconClass="delete" class-name="delete"
+                          @click.stop="handleDeleteClick(index, widgetForm.list)"
+                      />
+                    </div>
+
+                    <div
+                        class="widget-view-drag widget-col-drag"
+                        v-if="widgetFormSelect?.key === element.key"
+                    >
+                      <SvgIcon iconClass="move" className="drag-widget" />
+                    </div>
+                  </td>
+                </tr>
+                </tbody>
+              </n-table>
+              <div v-show="showContextMenu" class="right-menu" :style="{ top:  + positionY+'px',left:  + positionX+'px', }">
+                <ul style="list-style-type: none">
+                  <li @click="handlerRightCol" v-if="showRightColMenu">
+                    向右合并单元格
+                  </li>
+                  <li @click="handlerDownRow" v-if="showDownRowMenu">
+                    向下合并单元格
+                  </li>
+                  <li @click="handlerResetTable" v-if="showResetTableMenu">
+                    拆分单元格
+                  </li>
+                  <li @click="handlerDeleteRow" v-if="showDeleteRowMenu">
+                    删除行
+                  </li>
+                  <li @click="handlerAppendCol">
+                    追加行
+                  </li>
+                  <li @click="handlerAppendRow">
+                    追加列
+                  </li>
+                </ul>
+              </div>
+            </template>
             <template v-else>
-              <NaiveWidgetFormItem
+              <DesignFormItem
                 v-if="element.key"
                 :key="element.key"
                 :element="element"
@@ -102,13 +189,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, nextTick, PropType } from 'vue'
+import {computed, defineComponent, nextTick, PropType, reactive, toRefs} from 'vue'
 import Draggable from 'vuedraggable'
 import { v4 } from 'uuid'
-import NaiveWidgetFormItem from './NaiveWidgetFormItem.vue'
-import SvgIcon from '../../components/SvgIcon.vue'
+import DesignFormItem from './DesignFormItem.vue'
+import SvgIcon from '../../../../components/SvgIcon.vue'
 import { WidgetForm } from '../../config/naiveui'
-
+import GTable from '../custom/table/GTable.vue'
+import {merge} from "lodash";
 const handleListInsert = (key: string, list: any[], obj: any) => {
   const newList: any[] = []
   list.forEach(item => {
@@ -116,7 +204,14 @@ const handleListInsert = (key: string, list: any[], obj: any) => {
       newList.push(item)
       newList.push(obj)
     } else {
-      if (item.columns) {
+      if (item.type==='table'){
+        item.columns = item.columns.map((tr: any) => (
+            tr.map((td: any) => ({
+              ...td,
+              list: handleListInsert(key, td.list, obj)
+            }))
+        ))
+      }else if (item.columns) {
         item.columns = item.columns.map((col: any) => ({
           ...col,
           list: handleListInsert(key, col.list, obj)
@@ -125,6 +220,7 @@ const handleListInsert = (key: string, list: any[], obj: any) => {
       newList.push(item)
     }
   })
+  console.log('newList=',newList)
   return newList
 }
 
@@ -132,7 +228,14 @@ const handleListDelete = (key: string, list: any[]) => {
   const newList: any[] = []
   list.forEach(item => {
     if (item.key !== key) {
-      if (item.columns) {
+      if (item.type==='table'){
+        item.columns = item.columns.map((tr: any) => (
+            tr.map((td: any) => ({
+              ...td,
+              list: handleListDelete(key, td.list)
+            }))
+        ))
+      }else if (item.columns) {
         item.columns = item.columns.map((col: any) => ({
           ...col,
           list: handleListDelete(key, col.list)
@@ -143,13 +246,15 @@ const handleListDelete = (key: string, list: any[]) => {
   })
   return newList
 }
-
+let td = {col:1,row:1,hide:false,list:[]};
+let tr = [td,td];
 export default defineComponent({
   name: 'WidgetForm',
   components: {
     SvgIcon,
     Draggable,
-    NaiveWidgetFormItem
+    DesignFormItem,
+    GTable
   },
   props: {
     widgetForm: {
@@ -301,14 +406,239 @@ export default defineComponent({
 
       context.emit('update:widgetFormSelect', row.columns[index].list[newIndex])
     }
+    const state =  reactive({
+      positionX:0,
+      positionY:0,
+      showContextMenu:false,
+      currentRowIndex:0,
+      currentColIndex:0,
+      currentElement:null,
+    })
+    const showRightColMenu = computed(() => {
+      if(state.showContextMenu){
+        const col = state.currentElement.columns[state.currentRowIndex][state.currentColIndex].col;
+        const td = state.currentElement.columns[state.currentRowIndex][state.currentColIndex+col];
+        return (td&&td.row<2&&td.col<2&&!td.hide);
+      }else{
+        return false;
+      }
+    })
+    const showDownRowMenu = computed(() => {
+      if(state.showContextMenu){
+        const row = state.currentElement.columns[state.currentRowIndex][state.currentColIndex].row;
+        let td = undefined;
+        if(typeof state.currentElement.columns[state.currentRowIndex+row] !== 'undefined'){
+          td = state.currentElement.columns[state.currentRowIndex+row][state.currentColIndex];
+        }
+        return (td&&td.row<2&&td.col<2&&!td.hide);
+      }else{
+        return false;
+      }
+    })
+    const showResetTableMenu = computed(() => {
+      if(state.showContextMenu){
+        const col = state.currentElement.columns[state.currentRowIndex][state.currentColIndex].col;
+        const td = state.currentElement.columns[state.currentRowIndex][state.currentColIndex];
+        return (td&&!td.hide&&(td.row>1||td.col>1));
+      }else{
+        return false;
+      }
+    })
+    const showDeleteRowMenu = computed(() => {
+      if(state.showContextMenu){
+        return state.currentElement.columns.length>1
+      }else{
+        return false;
+      }
+    })
+    const hideRightContextMenu=()=>{
+      state.showContextMenu = false;
+    }
+    // 添加监听取消右键菜单
+    document.addEventListener("click", hideRightContextMenu, true);
+    document.addEventListener("contextmenu", hideRightContextMenu, true);
+
+    const rightClick=(e,row,rowIndex,colIndex)=>{
+      state.positionX = e.clientX;
+      state.positionY = e.clientY;
+      state.currentElement = row;
+      state.currentRowIndex = rowIndex;
+      state.currentColIndex = colIndex;
+      state.showContextMenu = true;
+    }
+    //向右合并单元格
+    const handlerRightCol =()=>{
+      let col = state.currentElement.columns[state.currentRowIndex][state.currentColIndex].col;
+      let row = state.currentElement.columns[state.currentRowIndex][state.currentColIndex].row;
+      if(row>1){
+        for(let i =0;i<row;i++){
+          state.currentElement.columns[state.currentRowIndex+i][state.currentColIndex+col].hide=true;
+          state.currentElement.columns[state.currentRowIndex][state.currentColIndex].col=col+1;
+        }
+      }else{
+        state.currentElement.columns[state.currentRowIndex][state.currentColIndex+col].hide=true;
+        state.currentElement.columns[state.currentRowIndex][state.currentColIndex].col=col+1;
+      }
+      // let nextCol = this.columns[state.currentRowIndex][state.currentColIndex+col].col;
+      // let nextRow = this.columns[state.currentRowIndex][state.currentColIndex+col].row;
+      // if(nextCol<2&nextRow<2){
+
+      // }else{
+      //     alert('请先拆分右侧单元格！');
+      // }
+
+
+    },
+    //向下合并单元格
+    handlerDownRow=()=>{
+      let col = state.currentElement.columns[state.currentRowIndex][state.currentColIndex].col;
+      let row = state.currentElement.columns[state.currentRowIndex][state.currentColIndex].row;
+      if(col>1){
+        for(let i =0;i<col;i++){
+          state.currentElement.columns[state.currentRowIndex+row][state.currentColIndex+i].hide=true;
+          state.currentElement.columns[state.currentRowIndex][state.currentColIndex].row=row+1;
+        }
+      }else{
+        state.currentElement.columns[state.currentRowIndex+row][state.currentColIndex].hide=true;
+        state.currentElement.columns[state.currentRowIndex][state.currentColIndex].row=row+1;
+      }
+      // let nextCol = this.columns[state.currentRowIndex+1][state.currentColIndex].col;
+      // let nextRow = this.columns[state.currentRowIndex+1][state.currentColIndex].row;
+      // if(nextCol<2&nextRow<2){
+
+      // }else{
+      //     alert('请先拆分下方单元格！');
+      // }
+    }
+    const handlerResetTable=()=>{
+      let col = state.currentElement.columns[state.currentRowIndex][state.currentColIndex].col;
+      let row = state.currentElement.columns[state.currentRowIndex][state.currentColIndex].row;
+      if(col===1&&row===1)return;
+
+      for(let i = 0;i<row;i++){
+        for(let j = 0;j<col;j++){
+          state.currentElement.columns[state.currentRowIndex+i][state.currentColIndex+j].hide = false;
+        }
+      }
+      state.currentElement.columns[state.currentRowIndex][state.currentColIndex].row=1;
+      state.currentElement.columns[state.currentRowIndex][state.currentColIndex].col=1;
+    }
+    // 删除行
+    const handlerDeleteRow=()=>{
+      state.currentElement.columns.splice(state.currentRowIndex,1)
+    }
+    //追加行
+    const handlerAppendCol=()=>{
+      let lastTrLen = state.currentElement.columns[state.currentElement.columns.length-1].length
+      let trs = []
+      for (let i = 0; i < lastTrLen; i++) {
+        trs.push(td)
+      }
+      const _tr = merge(JSON.parse(JSON.stringify(trs)))
+      state.currentElement.columns.splice(state.currentRowIndex+1, 0, _tr);
+    }
+    const handlerAppendRow=()=>{
+      tr.push(td);
+      state.currentElement.columns.forEach(item=>{
+        const _td = merge(JSON.parse(JSON.stringify(td)))
+        item.push(_td);
+      })
+    }
+    const handleTdMoveAdd = (
+        event: any,
+        row: any,
+        index: string | number | symbol,
+        tdIndex: string | number | symbol
+    ) => {
+      const { newIndex, oldIndex, item } = event
+      // console.log('JSON.stringify(props.widgetForm.list[index])=',JSON.stringify(props.widgetForm.list[props.elementIndex]))
+      const list = JSON.parse(JSON.stringify(props.widgetForm.list))
+      // const list = JSON.parse(JSON.stringify(data))
+      //
+      if (item.className.includes('data-grid')) {
+        item.tagName === 'DIV' &&
+        list.splice(oldIndex, 0, row.columns[index][tdIndex].list[newIndex])
+        row.columns[index][tdIndex].list.splice(newIndex, 1)
+        return false
+      }
 
+      const key = v4().replaceAll('-', '')
+      console.log('JSS=',JSON.stringify(row.columns))
+      row.columns[index][tdIndex].list[newIndex] = {
+        ...row.columns[index][tdIndex].list[newIndex],
+        key,
+        model: `${row.columns[index][tdIndex].list[newIndex].type}_${key}`,
+        rules: []
+      }
+
+      if (
+          row.columns[index][tdIndex].list[newIndex].type === 'radio' ||
+          row.columns[index][tdIndex].list[newIndex].type === 'checkbox' ||
+          row.columns[index][tdIndex].list[newIndex].type === 'select'
+      ) {
+        row.columns[index][tdIndex].list[newIndex] = {
+          ...row.columns[index][tdIndex].list[newIndex],
+          options: {
+            ...row.columns[index][tdIndex].list[newIndex].options,
+            options: row.columns[index][tdIndex].list[
+                newIndex
+                ].options.options.map((item: any) => ({ ...item }))
+          }
+        }
+      }
+      context.emit('update:widgetFormSelect', row.columns[index][tdIndex].list[newIndex])
+    }
     return {
+      ...toRefs(state),
       handleItemClick,
       handleCopyClick,
       handleDeleteClick,
       handleMoveAdd,
-      handleColMoveAdd
+      handleColMoveAdd,
+      handleTdMoveAdd,
+      // 静态表格相关
+      hideRightContextMenu,
+      showRightColMenu,
+      showDownRowMenu,
+      showResetTableMenu,
+      showDeleteRowMenu,
+      rightClick,
+      handlerRightCol,
+      handlerDownRow,
+      handlerDeleteRow,
+      handlerResetTable,
+      handlerAppendCol,
+      handlerAppendRow,
     }
   }
 })
 </script>
+<style scoped>
+.right-menu{
+  background-color:#ffffff;
+  z-index:100;
+  width:200px;
+  position: fixed;
+  border: 1px solid #ccc;
+  box-shadow: 3px 3px 8px #999;
+  border-radius: 3px;
+  padding: 8px 0;
+}
+.right-menu ul{
+  margin:0px;
+  padding:0px;
+}
+.right-menu ul li{
+  padding:0 15px;
+  height:30px;
+  line-height: 30px;
+}
+.right-menu ul li:hover{
+  cursor: pointer;
+  background-color: #ccc;
+}
+
+.CellHide{
+  display: none;
+}
+</style>
diff --git a/src/core/naiveui/NaiveWidgetFormItem.vue b/src/components/naiveui/components/design/DesignFormItem.vue
similarity index 76%
rename from src/core/naiveui/NaiveWidgetFormItem.vue
rename to src/components/naiveui/components/design/DesignFormItem.vue
index 95c80c85511064d9e77a097ab2bf4864c3058e8f..51e10cf64de922001a8bc1dbc9544d4aa6df7874 100644
--- a/src/core/naiveui/NaiveWidgetFormItem.vue
+++ b/src/components/naiveui/components/design/DesignFormItem.vue
@@ -5,9 +5,10 @@
       v-if="element"
       :key="element.key"
       :class="{ active: selectWidget?.key === element.key }"
-      :label="!element.hideLabel?element.label:''"
       :rules="element.options.rules"
+      :label="element.label"
       :show-require-mark="!config.hideRequiredMark && (element.options.rules?element.options.rules.required:false)"
+      :show-label="element.options.showLabel"
     >
       <template v-if="element.type === 'input'">
         <n-input
@@ -209,10 +210,16 @@
       </template>
 
       <template v-if="element.type === 'text'">
-        <div :style="{ width: element.options.width,height:element.options.height }">
-          <span>{{ element.options.defaultValue }}</span>
+        <div :style="element.options.style">
+          <span>{{ element.options.text }}</span>
         </div>
       </template>
+      <template v-if="element.type === 'divider'">
+        {{element.options.vertical?element.options.text:''}}
+        <n-divider :dashed="element.options.dashed" :title-placement="element.options.titlePlacement" :vertical="element.options.vertical">
+          {{element.options.text}}
+        </n-divider>
+      </template>
       <template v-if="element.type === 'alert'">
         <n-alert :title="element.options.title"
                  :type="element.options.type"
@@ -268,42 +275,70 @@
           v-model:value="element.options.defaultValue"
           :options="element.options.options"
           :placeholder="element.options.placeholder"
-          :allowClear="element.options.allowClear"
+          :multiple="element.options.multiple"
+          :filterable="element.options.filterable"
+          :check-strategy="element.options.checkStrategy"
+          :clearable="element.options.allowClear"
+          :label-field="element.options.props.label"
+          :value-field="element.options.props.value"
           :disabled="element.options.disabled"
+          :show-path="element.options.showPath"
+          :placement="element.options.placement"
+          :separator="element.options.separator"
+          :expand-trigger="element.options.expandTrigger"
           :style="{ width: element.options.width }"
         />
       </template>
-      <template v-if="element.type === 'table'">
-        <n-table :bordered="false" :single-line="false">
-          <thead>
-          <tr>
-            <th>Abandon</th>
-            <th>Abormal</th>
-            <th>Abolish</th>
-            <th>...</th>
-            <th>万事开头难</th>
-          </tr>
-          </thead>
-          <tbody>
-          <tr>
-            <td>放弃</td>
-            <td>反常的</td>
-            <td>彻底废除</td>
-            <td>...</td>
-            <td>干！我刚才背的是啥</td>
-          </tr>
-          <tr>
-            <td>...</td>
-            <td>...</td>
-            <td>...</td>
-            <td>...</td>
-            <td>...</td>
-          </tr>
-          </tbody>
-        </n-table>
+      <template v-if="element.type === 'tree'">
+        <n-space vertical :size="12">
+          <n-input v-if="element.options.filterable" v-model:value="pattern" placeholder="搜索" />
+          <n-tree
+              :size="config.size"
+              :data="element.options.options"
+              v-model:checked-keys="element.options.defaultValue"
+              :label-field="element.options.props.label"
+              :key-field="element.options.props.value"
+              :disabled="element.options.disabled"
+              :multiple="element.options.multiple"
+              :cascade="element.options.cascade"
+              :checkable="element.options.checkable"
+              :show-irrelevant-nodes="element.options.showIrrelevantNodes"
+              :pattern="pattern"
+              :check-strategy="element.options.checkStrategy"
+              :virtual-scroll="element.options.virtualScroll"
+              :style="{ width: element.options.width }"
+          />
+        </n-space>
       </template>
-      <template v-if="element.type === 'transfer'">
-
+      <template v-if="element.type === 'dynamicTags'">
+        <n-dynamic-tags v-model:value="element.options.defaultValue"
+                        :size="config.size"
+                        :max="element.options.max"
+                        :closable="element.options.closable"
+                        :type="element.options.type"
+                        :color="element.options.color"
+                        :round="element.options.round"
+                        :disabled="element.options.disabled"
+                        :style="{ width: element.options.width }"/>
+      </template>
+      <template v-if="element.type === 'button'">
+        <n-button :size="config.size"
+                  :type="element.options.type"
+                  :block="element.options.block"
+                  :bordered="element.options.bordered"
+                  :circle="element.options.circle"
+                  :color="element.options.color"
+                  :dashed="element.options.dashed"
+                  :disabled="element.options.disabled"
+                  :ghost="element.options.ghost"
+                  :round="element.options.round"
+                  :strong="element.options.strong"
+                  :text="element.options.textBtn"
+                  :text-color="element.options.textColor"
+                  :loading="element.options.loading"
+                  :style="{ width: element.options.width,height: element.options.height}"
+        >{{element.options.text}}
+        </n-button>
       </template>
     </n-form-item>
     <div class="widget-view-action" v-if="selectWidget?.key === element.key">
@@ -318,16 +353,16 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue'
-import SvgIcon from '../../components/SvgIcon.vue'
-import RichTextEditor from '../../components/RichTextEditor.vue'
+import {defineComponent, PropType, ref} from 'vue'
+import SvgIcon from '../../../../components/SvgIcon.vue'
+import RichTextEditor from '../custom/RichTextEditor.vue'
 import { WidgetForm } from '../../config/naiveui'
 
 export default defineComponent({
   name: 'NaiveWidgetFormItem',
   components: {
     SvgIcon,
-    RichTextEditor
+    RichTextEditor,
   },
   props: {
     config: {
@@ -346,9 +381,9 @@ export default defineComponent({
   setup() {
     const handleFilterOption = (input: string, option: { label: string }) =>
       option.label.toLowerCase().includes(input)
-
     return {
-      handleFilterOption
+      pattern: ref(''),
+      handleFilterOption,
     }
   }
 })
diff --git a/src/core/naiveui/NaiveGenerateForm.vue b/src/components/naiveui/components/generate/GenerateForm.vue
similarity index 74%
rename from src/core/naiveui/NaiveGenerateForm.vue
rename to src/components/naiveui/components/generate/GenerateForm.vue
index 7a313c8c6e80dff32501e54345762df1b80c2f3a..3f46d01fee4af183a36f39d280d2ba655ddacba2 100644
--- a/src/core/naiveui/NaiveGenerateForm.vue
+++ b/src/components/naiveui/components/generate/GenerateForm.vue
@@ -9,6 +9,7 @@
       :label-placement="widgetForm.config.labelPlacement"
       :labelWidth="widgetForm.config.labelWidth"
       :show-require-mark="!widgetForm.config.hideRequiredMark"
+      :show-label="widgetForm.config.showLabel"
     >
       <template v-for="(element, index) of widgetForm.list">
         <template v-if="element.type === 'grid'">
@@ -24,7 +25,7 @@
               :item-responsive="element.options.itemResponsive"
           >
             <n-gi v-for="(col, colIndex) of element.columns" :key="colIndex" :span="col.span ?? 0">
-              <NaiveGenerateFormItem
+              <GenerateFormItem
                 v-for="colItem of col.list"
                 :model="model"
                 :key="colItem.key"
@@ -35,7 +36,36 @@
             </n-gi>
           </n-grid>
         </template>
-        <NaiveGenerateFormItem
+        <template v-else-if="element.type === 'table'">
+          <!--              <g-table :element="element" :elementIndex="index" v-model:widgetForm="widgetForm" v-model:widgetFormSelect="widgetFormSelect"/>-->
+          <n-table v-if="element.key"
+                   :key="element.key"
+                   :class="' table-'+element.options.theme"
+                   :bordered="element.options.bordered"
+                   :bottom-bordered="element.options.bottomBordered"
+                   :single-column="element.options.singleColumn"
+                   :single-line="element.options.singleLine"
+                   :striped="element.options.striped"
+                   :style="{ width: element.options.width,height: element.options.height }">
+            <tbody>
+            <tr v-for="(col,colIndex) in element.columns" :key="colIndex">
+              <td v-for="(td,tdIndex) in col" :key="'td_'+tdIndex" :colspan="td.col" :rowspan="td.row" :class="{CellHide:td.hide}">
+                <div class="widget-col-list">
+                  <GenerateFormItem
+                      v-for="colItem of td.list"
+                      :model="model"
+                      :key="colItem.key"
+                      :element="colItem"
+                      :config="data.config"
+                      :disabled="disabled"
+                  />
+                </div>
+              </td>
+            </tr>
+            </tbody>
+          </n-table>
+        </template>
+        <GenerateFormItem
           v-else
           :model="model"
           :key="element.key"
@@ -51,13 +81,13 @@
 <script lang="ts">
 import { defineComponent, onMounted, reactive, toRefs, watch,ref  } from 'vue'
 import { FormInst,useMessage } from 'naive-ui'
-import NaiveGenerateFormItem from './NaiveGenerateFormItem.vue'
+import GenerateFormItem from './GenerateFormItem.vue'
 import { naiveui } from '../../config'
 
 export default defineComponent({
   name: 'GenerateForm',
   components: {
-    NaiveGenerateFormItem
+    GenerateFormItem
   },
   props: {
     data: {
@@ -146,7 +176,6 @@ export default defineComponent({
 
     const getData = () => {
       return new Promise((resolve, reject) => {
-        console.log('generateForm.value=',generateForm.value)
         generateForm.value?.validate((errors) => {
           console.log('errors=',errors)
           if (!errors) {
diff --git a/src/core/naiveui/NaiveGenerateFormItem.vue b/src/components/naiveui/components/generate/GenerateFormItem.vue
similarity index 72%
rename from src/core/naiveui/NaiveGenerateFormItem.vue
rename to src/components/naiveui/components/generate/GenerateFormItem.vue
index 1af2ea7038df6002c93677ab49af93d9cfa18db5..65f68e553f52ada46bdbf84000cd387b8d8df333 100644
--- a/src/core/naiveui/NaiveGenerateFormItem.vue
+++ b/src/components/naiveui/components/generate/GenerateFormItem.vue
@@ -2,10 +2,11 @@
   <n-form-item
     v-if="element"
     :key="element.key"
-    :label="!element.hideLabel?element.label:''"
+    :label="element.label"
     :rule="element.options.rules"
     :show-require-mark="!config.hideRequiredMark && (element.options.rules?element.options.rules.required:false)"
     :path="element.model"
+    :show-label="element.options.showLabel"
   >
     <template v-if="element.type === 'input'">
       <n-input
@@ -191,12 +192,17 @@
                       :style="{ width: element.options.width }"/>
     </template>
 
-    <template v-if="element.type == 'text'">
-      <div :style="{ width: element.options.width,height:element.options.height }">
-        <span>{{ element.options.defaultValue }}</span>
+    <template v-if="element.type === 'text'">
+      <div :style="element.options.style">
+        <span>{{ element.options.text }}</span>
       </div>
     </template>
-
+    <template v-if="element.type === 'divider'">
+      {{element.options.vertical?element.options.text:''}}
+      <n-divider :dashed="element.options.dashed" :title-placement="element.options.titlePlacement" :vertical="element.options.vertical">
+        {{element.options.text}}
+      </n-divider>
+    </template>
     <template v-if="element.type === 'alert'">
       <n-alert :title="element.options.title"
                :type="element.options.type"
@@ -261,27 +267,87 @@
     </template>
 
     <template v-if="element.type === 'cascader'">
-      <a-cascader
-        v-model:value="data"
-        :size="config.size"
-        :options="element.options.remoteOptions"
-        :placeholder="element.options.placeholder"
-        :allowClear="element.options.allowClear"
-        :disabled="disabled || element.options.disabled"
-        :style="{ width: element.options.width }"
+      <n-cascader
+          :size="config.size"
+          v-model:value="data"
+          :options="element.options.options"
+          :placeholder="element.options.placeholder"
+          :multiple="element.options.multiple"
+          :filterable="element.options.filterable"
+          :check-strategy="element.options.checkStrategy"
+          :clearable="element.options.allowClear"
+          :label-field="element.options.props.label"
+          :value-field="element.options.props.value"
+          :disabled="disabled || element.options.disabled"
+          :show-path="element.options.showPath"
+          :placement="element.options.placement"
+          :separator="element.options.separator"
+          :expand-trigger="element.options.expandTrigger"
+          :style="{ width: element.options.width }"
       />
     </template>
+    <template v-if="element.type === 'tree'">
+      <n-space vertical :size="12">
+        <n-input v-if="element.options.filterable" v-model:value="pattern" placeholder="搜索" />
+        <n-tree
+            :size="config.size"
+            :data="data"
+            v-model:checked-keys="element.options.defaultValue"
+            :label-field="element.options.props.label"
+            :key-field="element.options.props.value"
+            :disabled="disabled ||  element.options.disabled"
+            :multiple="element.options.multiple"
+            :cascade="element.options.cascade"
+            :checkable="element.options.checkable"
+            :show-irrelevant-nodes="element.options.showIrrelevantNodes"
+            :pattern="pattern"
+            :check-strategy="element.options.checkStrategy"
+            :virtual-scroll="element.options.virtualScroll"
+            :style="{ width: element.options.width }"
+        />
+      </n-space>
+    </template>
+    <template v-if="element.type === 'dynamicTags'">
+      <n-dynamic-tags v-model:value="data"
+                      :size="config.size"
+                      :max="element.options.max"
+                      :closable="element.options.closable"
+                      :type="element.options.type"
+                      :color="element.options.color"
+                      :round="element.options.round"
+                      :disabled="disabled || element.options.disabled"
+                      :style="{ width: element.options.width }"/>
+    </template>
+    <template v-if="element.type === 'button'">
+      <n-button :size="config.size"
+                :type="element.options.type"
+                :block="element.options.block"
+                :bordered="element.options.bordered"
+                :circle="element.options.circle"
+                :color="element.options.color"
+                :dashed="element.options.dashed"
+                :disabled="disabled || element.options.disabled"
+                :ghost="element.options.ghost"
+                :round="element.options.round"
+                :strong="element.options.strong"
+                :text="element.options.textBtn"
+                :text-color="element.options.textColor"
+                :loading="element.options.loading"
+                :style="{ width: element.options.width,height: element.options.height}"
+      >{{element.options.text}}
+      </n-button>
+    </template>
   </n-form-item>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
-import SvgIcon from '../../components/SvgIcon.vue'
-import RichTextEditor from '../../components/RichTextEditor.vue'
+import { computed, defineComponent, PropType,ref } from 'vue'
+import SvgIcon from '../../../../components/SvgIcon.vue'
+import RichTextEditor from '../custom/RichTextEditor.vue'
 import { WidgetForm } from '../../config/naiveui'
 
 export default defineComponent({
-  name: 'NaiveGenerateFormItem',
+  name: 'GenerateFormItem',
   components: {
     SvgIcon,
     RichTextEditor
@@ -306,6 +372,7 @@ export default defineComponent({
   },
   setup(props) {
     const data = computed({
+      // get: () => 1,
       get: () => props.model[props.element.model],
       set: val => {
         // eslint-disable-next-line vue/no-mutating-props
@@ -322,6 +389,7 @@ export default defineComponent({
 
     return {
       data,
+      pattern: ref(''),
       handleFilterOption,
       handleUploadChange
     }
diff --git a/src/config/index.ts b/src/components/naiveui/config/index.ts
similarity index 100%
rename from src/config/index.ts
rename to src/components/naiveui/config/index.ts
diff --git a/src/config/naiveui.ts b/src/components/naiveui/config/naiveui.ts
similarity index 65%
rename from src/config/naiveui.ts
rename to src/components/naiveui/config/naiveui.ts
index 794599a77c57b112feca96203f25715c4900442a..0d963e0498d661a4a11741bb3dffccb68587be85 100644
--- a/src/config/naiveui.ts
+++ b/src/components/naiveui/config/naiveui.ts
@@ -19,6 +19,7 @@ export interface WidgetForm {
     groupType: string
     labelAlign: string
     labelWidth: any
+    showLabel: boolean
     labelPlacement: string
   }
 }
@@ -60,6 +61,7 @@ export const widgetForm: WidgetForm = {
     labelAlign: 'left',
     labelWidth: 'auto',
     labelPlacement: 'top',
+    showLabel: true,
   }
 }
 
@@ -70,6 +72,7 @@ export const basicComponents = [
     options: {
       width: '100%',
       type:'text',
+      showLabel: true,
       defaultValue: '',
       placeholder: '',
       maxlength: null,
@@ -87,7 +90,8 @@ export const basicComponents = [
     label: '数字输入',
     type: 'number',
     options: {
-      width: '',
+      showLabel: true,
+      width: '100%',
       defaultValue: 0,
       min: 0,
       max: 100,
@@ -105,7 +109,7 @@ export const basicComponents = [
       width: '',
       groupType: 'radioGroup',
       remote: false,
-      showLabel: false,
+      showLabel: true,
       remoteFunc:
         'https://raw.githubusercontent.com/fuchengwei/vue-form-create/master/mock/mock.json',
       options: [
@@ -139,7 +143,7 @@ export const basicComponents = [
       width: '',
       inline: true,
       remote: false,
-      showLabel: false,
+      showLabel: true,
       remoteFunc:
         'https://raw.githubusercontent.com/fuchengwei/vue-form-create/master/mock/mock.json',
       options: [
@@ -169,6 +173,7 @@ export const basicComponents = [
     label: '时间选择器',
     type: 'time',
     options: {
+      showLabel: true,
       defaultValue: null,
       width: '',
       placeholder: '请选择时间',
@@ -184,6 +189,7 @@ export const basicComponents = [
     label: '日期选择器',
     type: 'date',
     options: {
+      showLabel: true,
       defaultValue: null,
       width: '',
       placeholder: '请选择时间',
@@ -199,6 +205,7 @@ export const basicComponents = [
     label: '评分',
     type: 'rate',
     options: {
+      showLabel: true,
       defaultValue: null,
       max: 5,
       allowClear: true,
@@ -216,7 +223,7 @@ export const basicComponents = [
       placeholder: '请选择',
       multiple:false,
       remote: false,
-      showLabel: false,
+      showLabel: true,
       filterable: false,
       allowClear: false,
       disabled: false,
@@ -248,6 +255,7 @@ export const basicComponents = [
     label: '开关',
     type: 'switch',
     options: {
+      showLabel: true,
       defaultValue: false,
       disabled: false,
       checkedChildren: '',
@@ -259,6 +267,7 @@ export const basicComponents = [
     label: '滑块',
     type: 'slider',
     options: {
+      showLabel: true,
       defaultValue: 0,
       width: '',
       height: '',
@@ -276,6 +285,7 @@ export const basicComponents = [
     label: '颜色选择器',
     type: 'color',
     options: {
+      showLabel: true,
       defaultValue: '',
       width: '',
       disabled: false,
@@ -292,6 +302,7 @@ export const advanceComponents = [
     label: '树形选择',
     type: 'selectTree',
     options: {
+      showLabel: true,
       defaultValue: [],
       width: '',
       placeholder: '请选择',
@@ -308,36 +319,45 @@ export const advanceComponents = [
       },
       options: [
         {
-          id:'1',
+          index: 0,
+          parentKey:null,
+          key:'1',
           label: 'Option 1',
           value: 'Option 1',
           children:[
             {
-              id:'1-1',
+              parentKey: '1',
+              key:'1-1',
               label: '1-1',
               value: '1-1',
             }
           ],
         },
         {
-          id:'2',
+          index: 1,
+          parentKey: null,
+          key:'2',
           label: 'Option 2',
           value: 'Option 2',
           children:[
             {
-              id:'2-1',
+              parentKey: '2',
+              key:'2-1',
               label: '2-1',
               value: '2-1',
             }
           ],
         },
         {
-          id:'3',
+          index: 2,
+          parentKey: null,
+          key:'3',
           label: 'Option 3',
           value: 'Option 3',
           children:[
             {
-              id:'3-1',
+              parentKey: '3',
+              key:'3-1',
               label: '3-1',
               value: '3-1',
             }
@@ -353,6 +373,7 @@ export const advanceComponents = [
     label: '上传',
     type: 'upload',
     options: {
+      showLabel: true,
       defaultValue: [],
       defaultUpload:true,
       directory:false,
@@ -378,15 +399,18 @@ export const advanceComponents = [
     label: '富文本编辑器',
     type: 'richtext-editor',
     options: {
+      showLabel: true,
       defaultValue: '',
       width: '',
-      disabled: false
+      disabled: false,
+      rules:getRules('string')
     }
   },
   {
     label: '穿梭框',
     type: 'transfer',
     options: {
+      showLabel: true,
       defaultValue: '',
       width: '',
       disabled: false,
@@ -408,20 +432,28 @@ export const advanceComponents = [
           value: 'Option 3'
         }
       ],
+      rules:getRules('array')
     }
   },
   {
     label: '级联选择器',
     type: 'cascader',
-    dev:true,
     options: {
+      showLabel: true,
       defaultValue: [],
-      width: '200px',
-      placeholder: '',
+      width: '',
+      placeholder: '请选择',
       disabled: false,
       allowClear: false,
-      remote: true,
-      remoteOptions: [],
+      remote: false,
+      multiple: false,
+      filterable: false,
+      cascade: true,
+      showPath: true,
+      placement: 'bottom-start',
+      separator: '/',
+      expandTrigger: 'click',
+      checkStrategy: 'child',
       props: {
         label: 'label',
         value: 'value',
@@ -473,17 +505,83 @@ export const advanceComponents = [
   {
     label: '树形组件',
     type: 'tree',
-    dev:true,
     options: {
-      defaultValue: 'This is a tree',
+      showLabel: true,
+      defaultValue: [],
+      cascade: true,
+      checkable: true,
+      multiple: true,
+      filterable: false,
+      checkStrategy: 'child',
+      virtualScroll:false,
+      remote: false,
+      props: {
+        label: 'label',
+        value: 'value',
+        children: 'children'
+      },
+      options: [
+        {
+          id:'1',
+          label: 'Option 1',
+          value: 'Option 1',
+          children:[
+            {
+              id:'1-1',
+              label: '1-1',
+              value: '1-1',
+            }
+          ],
+        },
+        {
+          id:'2',
+          label: 'Option 2',
+          value: 'Option 2',
+          children:[
+            {
+              id:'2-1',
+              label: '2-1',
+              value: '2-1',
+            }
+          ],
+        },
+        {
+          id:'3',
+          label: 'Option 3',
+          value: 'Option 3',
+          children:[
+            {
+              id:'3-1',
+              label: '3-1',
+              value: '3-1',
+            }
+          ],
+        }
+      ],
+      rules:getRules('array')
     }
   },
   {
-    label: '静态表格',
-    type: 'table',
-    dev:true,
+    label: '动态标签',
+    type: 'dynamicTags',
     options: {
-      defaultValue: 'This is a table',
+      showLabel: true,
+      defaultValue: [],
+      max: undefined,
+      closable: true,
+      type: 'info',
+      color: {
+        color:null,
+        borderColor:null,
+        textColor:null,
+      },
+      round: false,
+      disabled: false,
+      style:{
+        width:'100%',
+        height:'',
+      },
+      rules:getRules('array')
     }
   },
   {
@@ -491,25 +589,44 @@ export const advanceComponents = [
     type: 'dynamicTable',
     dev:true,
     options: {
+      showLabel: true,
       defaultValue: 'This is a dynamicTable',
     }
   },
 ]
 export const otherComponents = [
   {
-    label: '文字',
     type: 'text',
+    label:'文字',
     options: {
-      defaultValue: 'This is a text',
-      width:'',
-      height:'',
+      showLabel: false,
+      text:'文字',
+      style:{
+        width:'100%',
+        height:'',
+        textAlign:'center',
+        fontWeight:'400',
+        fontSize:'20px',
+        lineHeight:'1.5'
+      },
+    }
+  },
+  {
+    type: 'divider',
+    label:'分割线',
+    options: {
+      showLabel: false,
+      text:'分割线',
+      dashed:false,
+      titlePlacement:'center',
+      vertical:false,
     }
   },
   {
     label: '警告信息',
-    hideLabel:true,
     type: 'alert',
     options: {
+      showLabel: false,
       title: 'This is a alert',
       content: 'This is a alert',
       type: 'default',
@@ -519,6 +636,27 @@ export const otherComponents = [
       closable: false,
     }
   },
+  {
+    label: '按钮',
+    type: 'button',
+    options: {
+      showLabel: false,
+      text:'按钮',
+      type: 'default',
+      width:'',
+      height:'',
+      block:false,
+      bordered:true,
+      dashed:false,
+      circle:false,
+      ghost:false,
+      strong:false,
+      textBtn:false,
+      color:null,
+      textColor:null,
+      loading:false,
+    }
+  },
 ]
 
 export const layoutComponents = [
@@ -546,5 +684,89 @@ export const layoutComponents = [
       justify: 'start',
       align: 'top'
     }
-  }
+  },
+  {
+    label: '静态表格',
+    type: 'table',
+    columns: [
+      [
+        {col:1, row:1, hide:false, list: []},
+        {col:1, row:1, hide:false, list: []},
+        {col:1, row:1, hide:false, list: []},
+        {col:1, row:1, hide:false, list: []},
+      ],
+      [
+        {col:1, row:1, hide:false, list: []},
+        {col:1, row:1, hide:false, list: []},
+        {col:1, row:1, hide:false, list: []},
+        {col:1, row:1, hide:false, list: []},
+      ],
+      [
+        {col:1, row:1, hide:false, list: []},
+        {col:1, row:1, hide:false, list: []},
+        {col:1, row:1, hide:false, list: []},
+        {col:1, row:1, hide:false, list: []},
+      ],
+      [
+        {col:1, row:1, hide:false, list: []},
+        {col:1, row:1, hide:false, list: []},
+        {col:1, row:1, hide:false, list: []},
+        {col:1, row:1, hide:false, list: []},
+      ],
+      [
+        {col:1, row:1, hide:false, list: []},
+        {col:1, row:1, hide:false, list: []},
+        {col:1, row:1, hide:false, list: []},
+        {col:1, row:1, hide:false, list: []},
+      ],
+      [
+        {col:1, row:1, hide:false, list: []},
+        {col:1, row:1, hide:false, list: []},
+        {col:1, row:1, hide:false, list: []},
+        {col:1, row:1, hide:false, list: []},
+      ],
+      [
+        {col:1, row:1, hide:false, list: []},
+        {col:1, row:1, hide:false, list: []},
+        {col:1, row:1, hide:false, list: []},
+        {col:1, row:1, hide:false, list: []},
+      ],
+      [
+        {col:1, row:1, hide:false, list: []},
+        {col:1, row:1, hide:false, list: []},
+        {col:1, row:1, hide:false, list: []},
+        {col:1, row:1, hide:false, list: []},
+      ],
+    ],
+    options: {
+      theme:'theme1',
+      width:'210mm',
+      height:'297mm',
+      disabled: false,
+      bordered:true,
+      bottomBordered:false,
+      singleColumn:false,
+      singleLine:false,
+      striped:true,
+    }
+  },
+  // {
+  //   label: '静态表格',
+  //   type: 'table',
+  //   dev:true,
+  //   options: {
+  //     defaultValue: 'This is a table',
+  //     theme:'theme1',
+  //     width:'210mm',
+  //     height:'297mm',
+  //     disabled: false,
+  //     bordered:true,
+  //     bottomBordered:false,
+  //     singleColumn:false,
+  //     singleLine:false,
+  //     striped:false,
+  //     layoutArray:[
+
+  //   }
+  // },
 ]
diff --git a/src/components/naiveui/enums/index.ts b/src/components/naiveui/enums/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..94ab7236ed1e7fdfd150d77b7f48d13c5b0709c4
--- /dev/null
+++ b/src/components/naiveui/enums/index.ts
@@ -0,0 +1,41 @@
+export enum CodeType {
+  Form = 'form',
+  Model = 'model'
+}
+
+export enum PlatformType {
+  NaiveUi,
+}
+
+export enum ComponentType {
+  Input = 'input',
+  Number = 'number',
+  Radio = 'radio',
+  Checkbox = 'checkbox',
+  Time = 'time',
+  Date = 'date',
+  Rate = 'rate',
+  Select = 'select',
+  Switch = 'switch',
+  Slider = 'slider',
+  Color = 'color',
+  // 高级组件
+  Upload = 'upload',
+  RichtextEditor = 'richtext-editor',
+  Cascader = 'cascader',
+  Tree = 'tree',
+  Table = 'table',
+  Grid = 'grid',
+  DynamicTable = 'dynamicTable',
+  SelectTree = 'selectTree',
+  Transfer = 'transfer',
+  Alert = 'alert',
+  Text = 'text',
+  Divider = 'divider',
+  DynamicTags = 'dynamicTags',
+  Button = 'button',
+}
+
+export function checkComponent(test: any): test is ComponentType {
+  return (Object.values(ComponentType).indexOf(test) !== -1);
+}
diff --git a/src/styles/index.less b/src/components/naiveui/styles/index.less
similarity index 98%
rename from src/styles/index.less
rename to src/components/naiveui/styles/index.less
index 643001c681444eb3cfda85aca7b78d4f4ef1a3c7..d2674dccf3b8fbcdcf9da40ca9261e366a6da4bf 100644
--- a/src/styles/index.less
+++ b/src/components/naiveui/styles/index.less
@@ -1,4 +1,5 @@
-@import './scrollbar.less';
+@import 'src/components/naiveui/styles/scrollbar.less';
+@import 'src/components/naiveui/styles/table.less';
 @primary-color: #18a058;
 @primary-background-color: #eafaef;
 // Color variables (appears count calculates by raw css)
@@ -186,12 +187,13 @@ body {
         background: @color0;
         border: 1px dashed @color8;
         min-height: 50px;
+        height: auto;
       }
       .widget-view {
         background-color: rgba(236,245,255,0.3);
         border: 1px dashed rgba(170,170,170,0.7);
         margin: 2px;
-        padding-bottom: 18px;
+        //padding-bottom: 18px;
         position: relative;
         .widget-view-description {
           color: #909399;
diff --git a/src/styles/scrollbar.less b/src/components/naiveui/styles/scrollbar.less
similarity index 100%
rename from src/styles/scrollbar.less
rename to src/components/naiveui/styles/scrollbar.less
diff --git a/src/components/naiveui/styles/table.less b/src/components/naiveui/styles/table.less
new file mode 100644
index 0000000000000000000000000000000000000000..ec6408ecee664981c3743d403452e02f61eb9e64
--- /dev/null
+++ b/src/components/naiveui/styles/table.less
@@ -0,0 +1,22 @@
+.table-theme1{
+  border-spacing: 0; /* 控制单元格之间的距离 */
+  border-collapse: collapse;  /* 控制是否合并边框：separate:缺省值 边框不合并；collapse:边框合并 */
+  border: 1px solid #000;
+  tr,td,th {
+    border: 1px solid;
+    border-color: #000 !important;
+    border-collapse: collapse;  /* 控制是否合并边框 */
+    border-spacing: 0;
+    height: auto !important;
+    //position: relative;
+    //left: 0;
+    //right: 0;
+    //top: 0;
+    //bottom: 0;
+    .widget-col-list{
+      //display: inline-block;
+      display: inline-flex !important;
+      width: 100%;
+    }
+  }
+}
diff --git a/src/components/naiveui/types/NaiveWidgetTypes.d.ts b/src/components/naiveui/types/NaiveWidgetTypes.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..aab1035dae0a70e057ad430adbf68dcf5a99dafa
--- /dev/null
+++ b/src/components/naiveui/types/NaiveWidgetTypes.d.ts
@@ -0,0 +1,8 @@
+export type RowData=  {
+    parentKey: string | null // 父级key
+    key: string // key
+    label: any
+    value: any,
+    children?:Array<RowData> | [] //下级数据
+}
+
diff --git a/src/utils/generateCode.ts b/src/components/naiveui/utils/generateCode.ts
similarity index 100%
rename from src/utils/generateCode.ts
rename to src/components/naiveui/utils/generateCode.ts
diff --git a/src/utils/index.ts b/src/components/naiveui/utils/index.ts
similarity index 97%
rename from src/utils/index.ts
rename to src/components/naiveui/utils/index.ts
index 3b9918aa0ea9ad534b1e3cc6c017543600c3aeea..c0dc5f1d4b0aeb84ed1ad35bac36547eaeecddab 100644
--- a/src/utils/index.ts
+++ b/src/components/naiveui/utils/index.ts
@@ -5,7 +5,6 @@ export function isExternal(path: string) {
 
 // 复制文本
 export function copy(text: string) {
-  debugger
   const input = document.createElement('textarea')
   input.value = text
   document.body.appendChild(input)
diff --git a/src/core/naiveui/NaiveWidgetConfig.vue b/src/core/naiveui/NaiveWidgetConfig.vue
deleted file mode 100644
index 3221a7e5b4caae04dfb645e772cd99f35bb1f115..0000000000000000000000000000000000000000
--- a/src/core/naiveui/NaiveWidgetConfig.vue
+++ /dev/null
@@ -1,1131 +0,0 @@
-<template>
-  <n-form layout="vertical" v-if="data" :key="data.key">
-    <n-form-item label="字段标识" v-if="data.type !== 'grid'">
-      <n-input v-model:value="data.model" />
-    </n-form-item>
-
-    <n-form-item label="标题" v-if="data.type !== 'grid'&&!data.hideLabel">
-      <n-input v-model:value="data.label" />
-    </n-form-item>
-
-    <n-form-item label="宽度" v-if="hasKey('width')">
-      <n-input v-model:value="data.options.width" />
-    </n-form-item>
-
-    <n-form-item label="高度" v-if="hasKey('height')">
-      <n-input v-model:value="data.options.height" />
-    </n-form-item>
-
-    <n-form-item label="占位内容" v-if="hasKey('placeholder')">
-      <n-input v-model:value="data.options.placeholder" />
-    </n-form-item>
-    <n-form-item
-      label="默认内容"
-      v-if="
-        hasKey('defaultValue') &&
-          (data.type === 'input' ||
-            data.type === 'password' ||
-            data.type === 'textarea' ||
-            data.type === 'text' ||
-            data.type === 'rate' ||
-            data.type === 'switch' ||
-            data.type === 'slider')
-      "
-    >
-      <n-input
-        v-if="
-          data.type === 'input'
-        "
-        v-model:value="data.options.defaultValue"
-      />
-      <n-input type="textarea"
-        v-if="data.type === 'text'"
-        v-model:value="data.options.defaultValue"
-      />
-      <n-rate
-        v-if="data.type === 'rate'"
-        v-model:value="data.options.defaultValue"
-        :count="data.options.max"
-        :allowHalf="data.options.allowHalf"
-        :allowClear="data.options.allowClear"
-      />
-      <n-switch
-        v-if="data.type === 'switch'"
-        v-model:value="data.options.defaultValue"
-      />
-      <template v-if="data.type === 'slider'">
-        <n-input-number
-          v-if="!data.options.range"
-          v-model:value.number="data.options.defaultValue"
-        />
-        <template v-if="data.options.range">
-          <n-input-number
-            v-model:value.number="data.options.defaultValue[0]"
-            :max="data.options.max"
-          />
-          <n-input-number
-            v-model:value.number="data.options.defaultValue[1]"
-            :max="data.options.max"
-          />
-        </template>
-      </template>
-    </n-form-item>
-
-    <n-form-item label="最大长度" v-if="hasKey('maxlength')">
-      <n-input v-model:value.number="data.options.maxlength" />
-    </n-form-item>
-    <n-form-item label="最小长度" v-if="hasKey('minlength')">
-      <n-input v-model:value.number="data.options.rules.min" />
-    </n-form-item>
-    <n-form-item
-        label="显示属性"
-        v-if="
-          hasKey('showCount') ||
-            hasKey('round')
-        "
-    >
-      <n-checkbox
-          v-if="hasKey('showCount')"
-          v-model:checked="data.options.showCount"
-      >显示字数</n-checkbox
-      >
-      <n-checkbox
-          v-if="hasKey('round')"
-          v-model:checked="data.options.round"
-      >圆角</n-checkbox
-      >
-    </n-form-item>
-    <n-form-item label="输入框类型" v-if="data.type === 'input'">
-      <n-radio-group v-model:value="data.options.type">
-        <n-radio-button value="text" label="单行文本"/>
-        <n-radio-button value="textarea" label="多行文本"/>
-        <n-radio-button value="password" label="密码框"/>
-      </n-radio-group>
-    </n-form-item>
-    <n-form-item label="最大值" v-if="hasKey('max')">
-      <n-input-number v-model:value.number="data.options.max" />
-    </n-form-item>
-
-    <n-form-item label="最小值" v-if="hasKey('min')">
-      <n-input-number v-model:value.number="data.options.min" />
-    </n-form-item>
-
-    <n-form-item label="步长" v-if="hasKey('step')">
-      <n-input-number v-model:value.number="data.options.step" :min="0" />
-    </n-form-item>
-
-    <n-form-item label="前缀" v-if="hasKey('prefix')">
-      <n-input v-model:value="data.options.prefix" />
-    </n-form-item>
-
-    <n-form-item label="后缀" v-if="hasKey('suffix')">
-      <n-input v-model:value="data.options.suffix" />
-    </n-form-item>
-
-    <n-form-item label="选中时的内容" v-if="hasKey('checkedChildren')">
-      <n-input v-model:value="data.options.checkedChildren" />
-    </n-form-item>
-
-    <n-form-item label="非选中时的内容" v-if="hasKey('unCheckedChildren')">
-      <n-input v-model:value="data.options.unCheckedChildren" />
-    </n-form-item>
-
-    <n-form-item label="双滑块模式" v-if="hasKey('range')">
-      <n-switch
-        v-model:value="data.options.range"
-        @change="handleSliderModeChange"
-      />
-    </n-form-item>
-    <n-form-item label="垂直" v-if="hasKey('vertical')">
-      <n-tooltip trigger="hover">
-        <template #trigger>
-          <n-switch
-              v-model:value="data.options.vertical"
-          />
-        </template>
-        如需启用垂直，则必须设置组件的宽度、高度
-      </n-tooltip>
-    </n-form-item>
-    <n-form-item label="反向坐标轴" v-if="hasKey('reverse')">
-      <n-switch v-model:value="data.options.reverse" />
-    </n-form-item>
-
-    <n-form-item label="是否显示切换按钮" v-if="hasKey('visibilityToggle')">
-      <n-switch
-        v-model:value="data.options.visibilityToggle"
-      >
-        <template #checked>
-          显示
-        </template>
-        <template #unchecked>
-          隐藏
-        </template>
-      </n-switch>
-    </n-form-item>
-
-    <n-form-item label="是否自适应内容高度" v-if="hasKey('autoSize')">
-      <n-switch
-        v-model:value="data.options.autoSize"
-      >
-        <template #checked>
-          是
-        </template>
-        <template #unchecked>
-          否
-        </template>
-      </n-switch>
-    </n-form-item>
-
-    <n-form-item label="行数" v-if="hasKey('rows') && !data.options.autosize">
-      <n-input-number v-model:value="data.options.rows" :min="0" />
-    </n-form-item>
-
-    <n-form-item label="是否允许半选" v-if="hasKey('allowHalf')">
-      <n-switch
-        checked-children="是"
-        un-checked-children="否"
-        v-model:value="data.options.allowHalf"
-      >
-        <template #checked>
-          是
-        </template>
-        <template #unchecked>
-          否
-        </template>
-      </n-switch>
-    </n-form-item>
-
-    <n-form-item label="布局方式" v-if="data.type === 'radio'">
-      <n-radio-group button-style="solid" v-model:value="data.options.groupType">
-        <n-radio-button value="radioGroup">单选组</n-radio-button>
-        <n-radio-button value="buttonGroup">按钮组</n-radio-button>
-      </n-radio-group>
-    </n-form-item>
-
-    <n-form-item label="模式" v-if="data.type === 'select'">
-      <n-radio-group
-        button-style="solid"
-        v-model:value="data.options.multiple"
-        @change="handleSelectModeChange"
-      >
-        <n-radio-button :value="false">单选</n-radio-button>
-        <n-radio-button :value="true">多选</n-radio-button>
-      </n-radio-group>
-    </n-form-item>
-
-    <n-form-item label="是否可搜索" v-if="hasKey('filterable')">
-      <n-switch
-        checked-children="是"
-        un-checked-children="否"
-        v-model:value="data.options.filterable"
-      >
-        <template #checked>
-          是
-        </template>
-        <template #unchecked>
-          否
-        </template>
-      </n-switch>
-    </n-form-item>
-
-    <n-form-item label="选项" v-if="hasKey('options') && (data.type==='radio' || data.type==='select'|| data.type==='checkbox')">
-      <div>
-        <n-radio-group button-style="solid" v-model:value="data.options.remote">
-          <n-radio-button :value="false">静态数据</n-radio-button>
-          <n-radio-button :value="true">远端数据</n-radio-button>
-        </n-radio-group>
-        <n-space
-            v-if="data.options.remote"
-            direction="vertical"
-            style="margin-top: 10px;"
-        >
-
-          <n-input-group>
-            <n-input-group-label>远端方法</n-input-group-label>
-            <n-input  v-model:value="data.options.remoteFunc"/>
-          </n-input-group>
-
-          <n-input-group>
-            <n-input-group-label>标签</n-input-group-label>
-            <n-input  v-model:value="data.options.props.label"/>
-          </n-input-group>
-
-          <n-input-group>
-            <n-input-group-label>值</n-input-group-label>
-            <n-input  v-model:value="data.options.props.value"/>
-          </n-input-group>
-        </n-space>
-        <template v-else>
-          <template
-              v-if="
-            data.type === 'radio' ||
-              (data.type === 'select' && data.options.mode === null)
-          "
-          >
-            <n-radio-group v-model:value="data.options.defaultValue">
-              <Draggable
-                  tag="ul"
-                  item-key="index"
-                  ghostClass="ghost"
-                  handle=".drag-item"
-                  :group="{ name: 'options' }"
-                  :list="data.options.options"
-              >
-                <template #item="{ element, index }">
-                  <div>
-                    <n-radio :value="element.value" style="margin-right: 0px;">
-                      <n-input
-                          size="small"
-                          :style="{
-                        width: data.options.showLabel ? '90px' : '180px'
-                      }"
-                          v-model:value="element.value"
-                      />
-                      <n-input
-                          size="small"
-                          :style="{
-                        width: data.options.showLabel ? '90px' : '0',
-                        padding: data.options.showLabel ? '0 7px' : '0',
-                        border: data.options.showLabel
-                          ? '1px solid #d9d9d9'
-                          : 'none'
-                      }"
-                          v-model:value="element.label"
-                      />
-                    </n-radio>
-                    <SvgIcon
-                        style="margin: 0; cursor: move;"
-                        iconClass="item"
-                        className="drag-item"
-                    />
-                    <n-button
-                        type="primary"
-                        shape="circle"
-                        size="small"
-                        style="margin-left: 10px;"
-                        @click="handleOptionsRemove(index)"
-                    >
-                      <template #icon>
-                        <SvgIcon iconClass="delete" />
-                      </template>
-                    </n-button>
-                  </div>
-                </template>
-              </Draggable>
-            </n-radio-group>
-          </template>
-
-          <template
-              v-if="
-            data.type === 'checkbox' ||
-              (data.type === 'select' && data.options.mode !== null)
-          "
-          >
-            <n-checkbox-group v-model:value="data.options.defaultValue">
-              <Draggable
-                  tag="ul"
-                  item-key="index"
-                  ghostClass="ghost"
-                  handle=".drag-item"
-                  :group="{ name: 'options' }"
-                  :list="data.options.options"
-              >
-                <template #item="{ element, index }">
-                  <li>
-                    <n-checkbox :value="element.value" style="margin-right: 0;">
-                      <n-input
-                          size="small"
-                          :style="{
-                        width: data.options.showLabel ? '90px' : '180px'
-                      }"
-                          v-model:value="element.value"
-                      />
-                      <n-input
-                          size="small"
-                          :style="{
-                        width: data.options.showLabel ? '90px' : '0',
-                        padding: data.options.showLabel ? '0 7px' : '0',
-                        border: data.options.showLabel
-                          ? '1px solid #d9d9d9'
-                          : 'none'
-                      }"
-                          v-model:value="element.label"
-                      />
-                    </n-checkbox>
-                    <SvgIcon
-                        style="margin: 0; cursor: move;"
-                        iconClass="item"
-                        className="drag-item"
-                    />
-                    <n-button
-                        type="primary"
-                        text
-                        round
-                        size="small"
-                        style="margin-left: 10px;"
-                        @click="handleOptionsRemove(index)"
-                    >
-                      <template #icon>
-                        <SvgIcon style="margin-top: 3px" iconClass="delete" />
-                      </template>
-                    </n-button>
-                  </li>
-                </template>
-              </Draggable>
-            </n-checkbox-group>
-          </template>
-          <div style="margin-top: 5px;">
-            <n-button text type="primary" size="small" @click="handleInsertOption"
-            >添加选项</n-button>
-          </div>
-        </template>
-      </div>
-    </n-form-item>
-
-    <template v-if="data.type === 'time'">
-      <n-form-item label="默认值">
-        <n-time-picker
-          style="width: 100%;"
-          v-model:value="data.options.defaultValue"
-          :format="data.options.format"
-          :placeholder="data.options.placeholder"
-        />
-      </n-form-item>
-    </template>
-
-    <template v-if="data.type === 'date'">
-      <n-form-item label="默认值">
-        <n-date-picker
-          style="width: 100%;"
-          v-model:value="data.options.defaultValue"
-          :format="data.options.format"
-          :placeholder="data.options.placeholder"
-        />
-      </n-form-item>
-      <n-form-item label="组件类型">
-        <n-radio-group v-model:value="data.options.type" @change="changeDateType">
-          <n-radio-button value="date" label="日期"/>
-          <n-radio-button value="month" label="月份"/>
-          <n-radio-button value="quarter" label="季度"/>
-          <n-radio-button value="year" label="年份"/>
-        </n-radio-group>
-      </n-form-item>
-    </template>
-
-    <template v-if="data.type === 'time' || data.type === 'date'">
-      <n-form-item label="格式">
-        <n-input v-model:value="data.options.format" />
-      </n-form-item>
-      <n-form-item label="绑定值格式">
-        <n-input v-model:value="data.options.valueFormat" />
-      </n-form-item>
-    </template>
-    <template v-if="data.type === 'color'">
-      <n-form-item label="默认值">
-        <n-color-picker v-model:value="data.options.defaultValue"/>
-      </n-form-item>
-      <n-form-item label="可用模式">
-        <n-checkbox-group v-model:value="data.options.modes">
-          <n-space item-style="display: flex;">
-            <n-checkbox value="rgb" label="rgb" />
-            <n-checkbox value="hex" label="hex" />
-            <n-checkbox value="hsl" label="hsl" />
-            <n-checkbox value="hsv" label="hsv" />
-          </n-space>
-        </n-checkbox-group>
-      </n-form-item>
-      <n-form-item label="是否可调节alpha通道">
-        <n-switch
-            checked-children="是"
-            un-checked-children="否"
-            v-model:value="data.options.showAlpha"
-        >
-          <template #checked>
-            是
-          </template>
-          <template #unchecked>
-            否
-          </template>
-        </n-switch>
-      </n-form-item>
-      <n-form-item label="是否展示颜色预览块">
-        <n-switch
-            checked-children="是"
-            un-checked-children="否"
-            v-model:value="data.options.showPreview"
-        >
-          <template #checked>
-            是
-          </template>
-          <template #unchecked>
-            否
-          </template>
-        </n-switch>
-      </n-form-item>
-      <n-form-item label="面板的弹出位置">
-        <n-select v-model:value="data.options.placement" :options="colorPlacementOptions"></n-select>
-      </n-form-item>
-    </template>
-    <template v-if="data.type==='selectTree'">
-      <n-form-item label="模式">
-        <n-radio-group
-            button-style="solid"
-            v-model:value="data.options.multiple"
-            @change="handleSelectModeChange"
-        >
-          <n-radio-button :value="false">单选</n-radio-button>
-          <n-radio-button :value="true">多选</n-radio-button>
-        </n-radio-group>
-      </n-form-item>
-
-      <n-form-item label="选中策略">
-        <n-radio-group v-model:value="data.options.checkStrategy">
-          <n-radio-button value="all">
-            All
-          </n-radio-button>
-          <n-radio-button value="parent">
-            Parent
-          </n-radio-button>
-          <n-radio-button value="child">
-            Child
-          </n-radio-button>
-        </n-radio-group>
-      </n-form-item>
-      <n-form-item label="选项" >
-        <div style="width: 100%">
-          <n-radio-group button-style="solid" v-model:value="data.options.remote">
-            <n-radio-button :value="false">静态数据</n-radio-button>
-            <n-radio-button :value="true">远端数据</n-radio-button>
-          </n-radio-group>
-          <n-space
-              v-if="data.options.remote"
-              direction="vertical"
-              style="margin-top: 10px;"
-          >
-
-            <n-input-group>
-              <n-input-group-label>远端方法</n-input-group-label>
-              <n-input  v-model:value="data.options.remoteFunc"/>
-            </n-input-group>
-
-            <n-input-group>
-              <n-input-group-label>标签</n-input-group-label>
-              <n-input  v-model:value="data.options.props.label"/>
-            </n-input-group>
-
-            <n-input-group>
-              <n-input-group-label>值</n-input-group-label>
-              <n-input  v-model:value="data.options.props.value"/>
-            </n-input-group>
-          </n-space>
-          <template v-else>
-            <div style="margin-top: 10px">
-              <n-button @click="addTreeData()" type="primary">添加</n-button>
-              <n-data-table style="margin-top: 10px;" id="selectTree-target"
-                            :columns="treeDataColumns"
-                            :data="data.options.options"
-                            :row-key="rowKey"
-                            default-expand-all
-              />
-              <n-drawer
-                  v-model:show="showTreeDataDriwer"
-                  width="100%"
-                  height="200px"
-                  placement="right"
-                  :trap-focus="false"
-                  :block-scroll="false"
-                  to="#selectTree-target"
-              >
-                <n-drawer-content>
-                  <n-form
-                      ref="treeDataFormRef"
-                      :label-width="80"
-                      :model="treeData"
-                      :rules="treeRules"
-                  >
-                    <n-form-item label="Label" path="label">
-                      <n-input v-model:value="treeData.label" placeholder="请输入" />
-                    </n-form-item>
-                    <n-form-item label="Value" path="value">
-                      <n-input v-model:value="treeData.value" placeholder="请输入" />
-                    </n-form-item>
-                  </n-form>
-                  <template #footer>
-                    <n-space>
-                      <n-button @click="showTreeDataDriwer = false">取消</n-button>
-                      <n-button type="primary" @click="submitTreeData">确定</n-button>
-                    </n-space>
-                  </template>
-                </n-drawer-content>
-              </n-drawer>
-            </div>
-          </template>
-        </div>
-      </n-form-item>
-    </template>
-    <template v-if="data.type === 'transfer'">
-      <n-form-item label="源项标题">
-        <n-input v-model:value="data.options.sourceTitle" />
-      </n-form-item>
-      <n-form-item label="目标项标题">
-        <n-input v-model:value="data.options.targetTitle" />
-      </n-form-item>
-
-      <n-form-item label="是否可过滤">
-        <n-switch
-            checked-children="是"
-            un-checked-children="否"
-            v-model:value="data.options.filterable"
-        >
-          <template #checked>
-            是
-          </template>
-          <template #unchecked>
-            否
-          </template>
-        </n-switch>
-      </n-form-item>
-      <n-form-item label="开启虚拟滚动">
-        <n-switch
-            checked-children="是"
-            un-checked-children="否"
-            v-model:value="data.options.virtualScroll"
-        >
-          <template #checked>
-            是
-          </template>
-          <template #unchecked>
-            否
-          </template>
-        </n-switch>
-      </n-form-item>
-    </template>
-
-    <template v-if="data.type === 'upload'">
-
-      <n-form-item label="模式">
-        <n-radio-group
-          button-style="solid"
-          v-model:value="data.options.listType"
-        >
-          <n-radio-button value="text">text</n-radio-button>
-          <n-radio-button value="image">image</n-radio-button>
-          <n-radio-button value="image-card">image-card</n-radio-button>
-        </n-radio-group>
-      </n-form-item>
-
-      <n-form-item label="文件参数名">
-        <n-input v-model:value="data.options.name" />
-      </n-form-item>
-
-      <n-form-item label="上传地址">
-        <n-input v-model:value="data.options.action" />
-      </n-form-item>
-
-      <n-form-item label="接受上传的文件类型(多个使用 , 隔开)">
-        <n-input v-model:value="data.options.accept" />
-      </n-form-item>
-      <n-form-item label="最大上传数量">
-        <n-input-number v-model:value.number="data.options.maxCount" :min="1" />
-      </n-form-item>
-
-      <n-form-item label="上传请求方法">
-        <n-radio-group button-style="solid" v-model:value="data.options.method">
-          <n-radio-button value="post">POST</n-radio-button>
-          <n-radio-button value="put">PUT</n-radio-button>
-          <n-radio-button value="get">GET</n-radio-button>
-          <n-radio-button value="delete">DELETE</n-radio-button>
-        </n-radio-group>
-      </n-form-item>
-
-      <n-form-item label="上传属性">
-        <n-space item-style="display: flex;" align="center">
-          <n-checkbox v-model:checked="data.options.showFileList">显示列表</n-checkbox>
-          <n-checkbox v-model:checked="data.options.multiple">多选</n-checkbox>
-          <n-checkbox v-model:checked="data.options.defaultUpload">否默认上传</n-checkbox>
-          <n-checkbox v-model:checked="data.options.directory">目录上传</n-checkbox>
-          <n-checkbox v-model:checked="data.options.directoryDnd">目录拖拽上传</n-checkbox>
-        </n-space>
-      </n-form-item>
-      <n-form-item label="操作属性">
-        <n-space item-style="display: flex;" align="center">
-          <n-checkbox v-model:checked="data.options.showDownloadButton">显示下载按钮</n-checkbox>
-          <n-checkbox v-model:checked="data.options.showRetryButton">显示重新上传按钮</n-checkbox>
-          <n-checkbox v-model:checked="data.options.showRemoveButton">显示删除按钮</n-checkbox>
-          <n-checkbox v-model:checked="data.options.showCancelButton">是否显示取消按钮</n-checkbox>
-          <n-checkbox v-model:checked="data.options.showPreviewButton">是否允许显示预览按钮</n-checkbox>
-        </n-space>
-      </n-form-item>
-    </template>
-
-    <n-form-item label="远端数据" v-if="data.type === 'cascader'">
-      <n-space direction="vertical">
-        <n-input
-          v-model:value="data.options.remoteFunc"
-          size="small"
-          addon-before="远端方法"
-        />
-        <n-input
-          v-model:value="data.options.props.label"
-          size="small"
-          addon-before="标签"
-        />
-        <n-input
-          v-model:value="data.options.props.value"
-          size="small"
-          addon-before="值"
-        />
-        <n-input
-          v-model:value="data.options.props.children"
-          size="small"
-          addon-before="子选项"
-        />
-      </n-space>
-    </n-form-item>
-
-    <template v-if="data.type === 'grid'">
-      <n-form-item label="栅格列数">
-        <n-input-number v-model:value="data.options.cols" :min="1" />
-      </n-form-item>
-      <n-form-item label="横向间隔槽">
-        <n-input-number v-model:value="data.options.xGap" :min="0" />
-      </n-form-item>
-      <n-form-item label="纵向间隔槽">
-        <n-input-number v-model:value="data.options.yGap" :min="0" />
-      </n-form-item>
-      <n-form-item label="列配置项" class="fc-form-item-block">
-        <Draggable
-          tag="ul"
-          item-key="index"
-          ghostClass="ghost"
-          handle=".drag-item"
-          :group="{ name: 'options' }"
-          :list="data.columns"
-        >
-          <template #item="{ element, index }">
-            <li style="margin-bottom: 5px;display: flex;">
-              <div style="padding-top: 4px">
-                <SvgIcon iconClass="item" className="drag-item" />
-              </div>
-              <n-input-number
-                placeholder="栅格值"
-                size="small"
-                v-model:value="element.span"
-                :min="0"
-                :max="24"
-              />
-              <n-button text
-                type="primary"
-                round
-                size="small"
-                style="margin-left: 5px;"
-                @click="handleOptionsRemove(index)"
-              >
-                <template #icon>
-                  <SvgIcon iconClass="delete" />
-                </template>
-              </n-button>
-            </li>
-          </template>
-        </Draggable>
-
-        <div>
-          <n-button text type="primary" size="small" @click="handleInsertColumn">
-            添加列
-          </n-button>
-        </div>
-      </n-form-item>
-<!--      <n-form-item label="子元素是否可具有响应式宽度">
-        <n-switch
-            v-model:value="data.options.itemResponsive"
-        >
-          <template #checked>
-            是
-          </template>
-          <template #unchecked>
-            否
-          </template>
-        </n-switch>
-      </n-form-item>-->
-      <n-space align="center">
-        <n-form-item label="是否默认折叠">
-          <n-switch
-              v-model:value="data.options.collapsed"
-          >
-            <template #checked>
-              是
-            </template>
-            <template #unchecked>
-              否
-            </template>
-          </n-switch>
-        </n-form-item>
-        <n-form-item label="默认展示的行数">
-          <n-input-number v-model:value="data.options.collapsedRows" :min="1" :disabled="!data.options.collapsed"/>
-        </n-form-item>
-      </n-space>
-    </template>
-
-    <template v-if="data.type !== 'grid'">
-      <n-form-item
-        label="操作属性"
-        v-if="
-          hasKey('rules') ||
-            hasKey('readonly') ||
-            hasKey('disabled') ||
-            hasKey('allowClear')
-        "
-      >
-        <n-checkbox
-          v-if="hasKey('rules')"
-          v-model:checked="data.options.rules.required"
-          >必填</n-checkbox
-        >
-        <n-checkbox
-          v-if="hasKey('readonly')"
-          v-model:checked="data.options.readonly"
-          >只读</n-checkbox
-        >
-        <n-checkbox
-          v-if="hasKey('disabled')"
-          v-model:checked="data.options.disabled"
-          >禁用</n-checkbox
-        >
-        <n-checkbox
-          v-if="hasKey('allowClear')"
-          v-model:checked="data.options.allowClear"
-          >清除</n-checkbox
-        >
-      </n-form-item>
-      <template v-if="data.type==='alert'">
-        <n-form-item label="标题" >
-          <n-input v-model:value="data.options.title" />
-        </n-form-item>
-        <n-form-item label="内容" >
-          <n-input type="textarea" v-model:value="data.options.content" />
-        </n-form-item>
-        <n-form-item label="类型">
-          <n-radio-group v-model:value="data.options.type" button-style="solid">
-            <n-radio-button value="default">默认</n-radio-button>
-            <n-radio-button value="info">信息</n-radio-button>
-            <n-radio-button value="success">成功</n-radio-button>
-            <n-radio-button value="warning">警告</n-radio-button>
-            <n-radio-button value="error">错误</n-radio-button>
-          </n-radio-group>
-        </n-form-item>
-        <n-form-item label="显示图标">
-          <n-switch
-              checked-children="是"
-              un-checked-children="否"
-              v-model:value="data.options.showIcon"
-          >
-            <template #checked>
-              是
-            </template>
-            <template #unchecked>
-              否
-            </template>
-          </n-switch>
-        </n-form-item>
-        <n-form-item label="允许关闭">
-          <n-switch
-              checked-children="是"
-              un-checked-children="否"
-              v-model:value="data.options.closable"
-          >
-            <template #checked>
-              是
-            </template>
-            <template #unchecked>
-              否
-            </template>
-          </n-switch>
-        </n-form-item>
-      </template>
-      <template v-if="hasKey('rules')">
-        <h4>验证规则</h4>
-
-        <n-form-item label="触发时机">
-          <n-radio-group
-            v-model:value="data.options.rules.trigger"
-            button-style="solid"
-          >
-            <n-radio-button value="blur">Blur</n-radio-button>
-            <n-radio-button value="change">Change</n-radio-button>
-            <n-radio-button :value="['blur', 'change']">All</n-radio-button>
-          </n-radio-group>
-        </n-form-item>
-
-        <n-form-item label="枚举类型">
-          <n-input v-model:value="data.options.rules.enum" />
-        </n-form-item>
-        <n-form-item label="校验文案">
-          <n-input v-model:value="data.options.rules.message" />
-        </n-form-item>
-
-        <n-form-item label="正则表达式">
-          <n-input v-model:value="data.options.rules.pattern" />
-        </n-form-item>
-
-        <n-form-item label="校验类型">
-          <n-select v-model:value="data.options.rules.type" :options="verifyOptions"></n-select>
-        </n-form-item>
-      </template>
-    </template>
-  </n-form>
-</template>
-
-<script lang="ts">
-import {h,defineComponent, reactive, ref, toRefs, watch} from 'vue'
-import Draggable from 'vuedraggable'
-import SvgIcon from '../../components/SvgIcon.vue'
-import { NSpace,NButton,NInput, useMessage } from 'naive-ui'
-import { v4 } from 'uuid'
-export default defineComponent({
-  name: 'NaiveWidgetConfig',
-  components: {
-    Draggable,
-    SvgIcon
-  },
-  props: {
-    select: {
-      type: Object
-    }
-  },
-  emits: ['update:select'],
-  setup(props, context) {
-    const data = ref<any>(props.select)
-    const treeDataFormRef = ref<FormInst | null>(null)
-    watch(
-      () => props.select,
-      val => (data.value = val)
-    )
-
-    watch(data, val => context.emit('update:select', val))
-
-    const treeDataColumns = ({
-                               add,
-                               edit,
-                               remove,
-                             }: {
-      add: (rowData: RowData,rowIndex: number) => void
-      edit: (rowData: RowData,rowIndex: number) => void
-      remove: (rowData: RowData,rowIndex: number) => void
-    }): DataTableColumns<RowData> => {
-      return [
-        {
-          title: 'Label',
-          key: 'label',
-        },
-        {
-          title: 'Value',
-          key: 'value',
-        },
-        {
-          title: '操作',
-          key: 'action',
-          render(row,index) {
-            return h(NSpace, {}, [
-              h(NButton, {strong: true, tertiary: true, size: 'small',text:true,type:'primary', onClick: () => edit(row,index)}, {default: () => '编辑'}),
-              h(NButton, {strong: true, tertiary: true, size: 'small',text:true,type:'primary', onClick: () => add(row,index)}, {default: () => '添加下级'}),
-              h(NButton, {strong: true, tertiary: true, size: 'small',text:true,type:'error', onClick: () => remove(row,index)}, {default: () => '删除'})
-            ])
-          }
-        }
-      ]
-    }
-    const addTreeData = ()=>{
-      state.treeData = {
-        key: v4().replaceAll('-', ''),
-        label:'',
-        value:'',
-        children:[]
-      }
-      state.showTreeDataDriwer=true
-    }
-    const state = reactive({
-      verifyOptions:[
-        {label:'字符串',value:'string'},
-        {label:'数字',value:'number'},
-        {label:'布尔值',value:'boolean'},
-        {label:'方法',value:'method'},
-        {label:'正则表达式',value:'regexp'},
-        {label:'整数',value:'integer'},
-        {label:'浮点数',value:'float'},
-        {label:'数组',value:'array'},
-        {label:'对象',value:'object'},
-        {label:'枚举',value:'enum'},
-        {label:'日期',value:'date'},
-        {label:'URL地址',value:'url'},
-        {label:'十六进制',value:'hex'},
-        {label:'邮箱地址',value:'email'},
-        {label:'任意类型',value:'any'},
-      ],
-      colorPlacementOptions:[
-        {label:'top-start',value:'top-start'},
-        {label:'top',value:'top'},
-        {label:'top-end',value:'top-end'},
-        {label:'right-start',value:'right-start'},
-        {label:'right',value:'right'},
-        {label:'right-end',value:'right-end'},
-        {label:'bottom-start',value:'bottom-start'},
-        {label:'bottom',value:'bottom'},
-        {label:'bottom-end',value:'bottom-end'},
-        {label:'left-start',value:'left-start'},
-        {label:'left',value:'left'},
-        {label:'left-end',value:'left-end'},
-      ],
-      showTreeDataType:'add',
-      showTreeDataDriwer:false,
-      treeData:{},
-      treeRules: {
-        label: {
-          required: true,
-          message: '请输入',
-          trigger: ['input', 'blur']
-        },
-        value: {
-          required: true,
-          message: '请输入',
-          trigger: ['input', 'blur']
-        }
-      },
-      treeDataColumns: treeDataColumns({
-        add (rowData) {
-          state.treeData = {
-            parent:rowData,
-            key: v4().replaceAll('-', ''),
-            label:'',
-            value:'',
-            children:[]
-          }
-          state.showTreeDataDriwer=true
-          state.showTreeDataType='add'
-        },
-        edit (rowData,rowIndex) {
-          state.treeData = Object.assign({},rowData)
-          state.showTreeDataDriwer=true
-          state.showTreeDataType='edit'
-        },
-        remove (rowData,rowIndex) {
-          if (rowData.parent){
-            rowData.parent.children.forEach((v,i)=>{
-              if (v.key===rowData.key){
-                rowData.parent.children.splice(i,1)
-              }
-            })
-          }else {
-            data.value.options.options.splice(rowIndex,1)
-          }
-        }
-      }),
-      rowKey: (row: RowData) => row.value
-    })
-    const hasKey = (key: string) =>
-      Object.keys(data.value.options).includes(key)
-
-    const handleInsertColumn = () => {
-      data.value.columns.push({
-        span: 12,
-        list: []
-      })
-    }
-
-    const handleInsertOption = () => {
-      const index = data.value.options.options.length + 1
-      data.value.options.options.push({
-        label: `Option ${index}`,
-        value: `Option ${index}`
-      })
-    }
-
-    const handleOptionsRemove = (index: number) => {
-      if (data.value.type === 'grid') {
-        data.value.columns.splice(index, 1)
-      } else {
-        data.value.options.options.splice(index, 1)
-      }
-    }
-
-    const handleSelectModeChange = (event: any) => {
-      const { value } = event.target
-      if (value!=='true') {
-        data.value.options.rules.type='string'
-        data.value.options.defaultValue.length
-          ? (data.value.options.defaultValue =
-              data.value.options.defaultValue[0])
-          : (data.value.options.defaultValue = null)
-      } else {
-        data.value.options.rules.type='array'
-        if (data.value.options.defaultValue) {
-          if (!(data.value.options.defaultValue instanceof Array)) {
-            data.value.options.defaultValue = [data.value.options.defaultValue]
-          }
-        } else {
-          data.value.options.defaultValue = []
-        }
-      }
-    }
-
-    const handleSliderModeChange = (checked: boolean) => {
-      checked
-        ? (data.value.options.defaultValue = [0, 0])
-        : (data.value.options.defaultValue = 0)
-    }
-    const changeDateType = (e: Event)=> {
-      let value = (e.target as HTMLInputElement).value
-      switch (value) {
-        case 'date':
-          data.value.options.format='yyyy-MM-dd';
-          break
-        case 'month':
-          data.value.options.format='yyyy-MM';
-          break
-        case 'quarter':
-          data.value.options.format='yyyy-第Q季度';
-          break
-        case 'year':
-          data.value.options.format='yyyy';
-          break
-      }
-    }
-    const submitTreeData = (e: MouseEvent)=> {
-      e.preventDefault()
-      treeDataFormRef.value?.validate((errors) => {
-        if (!errors) {
-          if (state.treeData.parent){
-            if (state.showTreeDataType==='add'){
-              state.treeData.parent.children.push(state.treeData)
-            }else {
-              state.treeData.parent.children.forEach((v,i)=>{
-                if (v.key===state.treeData.key){
-                  state.treeData.parent.children.splice(i,1,state.treeData)
-                }
-              })
-            }
-          }else{
-            data.value.options.options.push(state.treeData)
-          }
-          state.showTreeDataDriwer=false
-        } else {
-          console.log(errors)
-        }
-      })
-    }
-    return {
-      ...toRefs(state),
-      treeDataFormRef,
-      addTreeData,
-      submitTreeData,
-      data,
-      hasKey,
-      handleInsertColumn,
-      handleInsertOption,
-      handleOptionsRemove,
-      handleSelectModeChange,
-      handleSliderModeChange,
-      changeDateType
-    }
-  }
-})
-</script>
diff --git a/src/enums/index.ts b/src/enums/index.ts
deleted file mode 100644
index 9f5c0586d853d46e9d2f01f1a7ffb461713bfb4c..0000000000000000000000000000000000000000
--- a/src/enums/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export enum CodeType {
-  Form = 'form',
-  Model = 'model'
-}
-
-export enum PlatformType {
-  NaiveUi,
-}
diff --git a/src/icons/svg/button.svg b/src/icons/svg/button.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a0aa204969ced0891e170f00f868c299e1370f1a
--- /dev/null
+++ b/src/icons/svg/button.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20"><g fill="none"><path d="M6 7a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h.5a.5.5 0 0 0 0-1H6a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h.5a.5.5 0 0 0 0-1H6zm3 .5a.5.5 0 0 0-1 0V9h-.5a.5.5 0 0 0 0 1H8v1.75c0 .69.56 1.25 1.25 1.25h.25a.5.5 0 0 0 0-1h-.25a.25.25 0 0 1-.25-.25V10h.5a.5.5 0 0 0 0-1H9V7.5zm7 0a.5.5 0 0 0-1 0v5a.5.5 0 0 0 1 0v-5zm-4 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 0 0-1h-1a1.5 1.5 0 0 0-1.5 1.5v2a.5.5 0 0 0 1 0v-2zM4.75 4A2.75 2.75 0 0 0 2 6.75v6.5A2.75 2.75 0 0 0 4.75 16h10.5A2.75 2.75 0 0 0 18 13.25v-6.5A2.75 2.75 0 0 0 15.25 4H4.75zM3 6.75C3 5.784 3.784 5 4.75 5h10.5c.966 0 1.75.784 1.75 1.75v6.5A1.75 1.75 0 0 1 15.25 15H4.75A1.75 1.75 0 0 1 3 13.25v-6.5z" fill="currentColor"></path></g></svg>
diff --git a/src/icons/svg/divider.svg b/src/icons/svg/divider.svg
new file mode 100644
index 0000000000000000000000000000000000000000..145708eac40c61a3bb7d71537077a589208a76d2
--- /dev/null
+++ b/src/icons/svg/divider.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20"><g fill="none"><path d="M9.75 1a.75.75 0 0 1 .75.75v16.5a.75.75 0 0 1-1.5 0V1.75A.75.75 0 0 1 9.75 1z" fill="currentColor"></path></g></svg>
diff --git a/src/icons/svg/dynamicTable.svg b/src/icons/svg/dynamicTable.svg
new file mode 100644
index 0000000000000000000000000000000000000000..14fe5a4dea2f418ad3cb29aeac0452af3eff11f9
--- /dev/null
+++ b/src/icons/svg/dynamicTable.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28"><g fill="none"><path d="M3 6.75A3.75 3.75 0 0 1 6.75 3h14.5A3.75 3.75 0 0 1 25 6.75v7.75a7.486 7.486 0 0 0-1.5-.876V11h-5v2.27a7.45 7.45 0 0 0-1.5.595V11h-6v6h2.865a7.45 7.45 0 0 0-.595 1.5H11v5h2.624c.234.535.529 1.038.875 1.5H6.75A3.75 3.75 0 0 1 3 21.25V6.75zM4.5 18.5v2.75a2.25 2.25 0 0 0 2.25 2.25H9.5v-5h-5zm5-1.5v-6h-5v6h5zm14-10.25a2.25 2.25 0 0 0-2.25-2.25H18.5v5h5V6.75zM17 4.5h-6v5h6v-5zm-7.5 0H6.75A2.25 2.25 0 0 0 4.5 6.75V9.5h5v-5zm7.296 12.198a2 2 0 0 1-1.441 2.496l-1.024.254a6.803 6.803 0 0 0 .008 2.152l.976.235a2 2 0 0 1 1.45 2.51l-.324 1.098c.518.46 1.11.834 1.753 1.1l.843-.886a2 2 0 0 1 2.899 0l.85.895a6.206 6.206 0 0 0 1.751-1.09l-.335-1.16a2 2 0 0 1 1.441-2.496l1.026-.253a6.807 6.807 0 0 0-.008-2.152l-.977-.235a2 2 0 0 1-1.45-2.51l.324-1.1a6.208 6.208 0 0 0-1.753-1.1l-.843.888a2 2 0 0 1-2.9 0l-.849-.895a6.202 6.202 0 0 0-1.752 1.09l.335 1.16zM20.5 22a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3z" fill="currentColor"></path></g></svg>
diff --git a/src/icons/svg/dynamicTags.svg b/src/icons/svg/dynamicTags.svg
new file mode 100644
index 0000000000000000000000000000000000000000..cba401af5f611cd2d77cca6d3b7da486b1324f75
--- /dev/null
+++ b/src/icons/svg/dynamicTags.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.859 6H5.025A2.025 2.025 0 0 0 3 8.025v2.834c0 .537.213 1.052.593 1.432l6.116 6.116a2.025 2.025 0 0 0 2.864 0l2.834-2.834a2.025 2.025 0 0 0 0-2.864L9.29 6.593A2.025 2.025 0 0 0 7.859 6z"></path><path d="M17.573 18.407l2.834-2.834a2.025 2.025 0 0 0 0-2.864L13.29 5.593"></path><path d="M6 9h-.01"></path></g></svg>
diff --git a/src/icons/svg/question.svg b/src/icons/svg/question.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f2431e74a16eccca874ed401ad2e2e9f5f19d67c
--- /dev/null
+++ b/src/icons/svg/question.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20"><g fill="none"><path d="M10 2a8 8 0 1 1 0 16a8 8 0 0 1 0-16zm0 1a7 7 0 1 0 0 14a7 7 0 0 0 0-14zm0 10.5a.75.75 0 1 1 0 1.5a.75.75 0 0 1 0-1.5zm0-8a2.5 2.5 0 0 1 1.651 4.377l-.154.125l-.219.163l-.087.072a1.968 1.968 0 0 0-.156.149c-.339.36-.535.856-.535 1.614a.5.5 0 0 1-1 0c0-1.012.293-1.752.805-2.298a3.11 3.11 0 0 1 .356-.323l.247-.185l.118-.1A1.5 1.5 0 1 0 8.5 8a.5.5 0 0 1-1 .001A2.5 2.5 0 0 1 10 5.5z" fill="currentColor"></path></g></svg>
diff --git a/src/icons/svg/selectTree.svg b/src/icons/svg/selectTree.svg
index 2b43386e555429c773f85c0c42afd8faa61888b7..53a88a598283c0aeb66f5d9b4edbcb065505f394 100644
--- a/src/icons/svg/selectTree.svg
+++ b/src/icons/svg/selectTree.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><path d="M23 9.005h6a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2h-6a2 2 0 0 0-2 2v1H11v-1a2 2 0 0 0-2-2H3a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h4v20a2.002 2.002 0 0 0 2 2h4v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2h-6a2 2 0 0 0-2 2v1h-4v-9h4v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2h-6a2 2 0 0 0-2 2v1h-4v-9h4v1a2 2 0 0 0 2 2zm0-6h6v4h-6zm-14 4H3v-4h6zm14 18h6v4h-6zm0-11h6v4h-6z" fill="currentColor"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16"><g fill="none"><path d="M2.25 5a1.25 1.25 0 1 0 0-2.5a1.25 1.25 0 0 0 0 2.5zm0 4.25a1.25 1.25 0 1 0 0-2.5a1.25 1.25 0 0 0 0 2.5zm4.75 3a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0zM5.75 3a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5zM5 8a.75.75 0 0 1 .75-.75h8.5a.75.75 0 0 1 0 1.5h-8.5A.75.75 0 0 1 5 8zm4.25 3.5a.75.75 0 0 0 0 1.5h5a.75.75 0 0 0 0-1.5h-5z" fill="currentColor"></path></g></svg>
diff --git a/src/icons/svg/table.svg b/src/icons/svg/table.svg
new file mode 100644
index 0000000000000000000000000000000000000000..99a7c46295048e8a57bfcbe7c6aeaee9f5904fb6
--- /dev/null
+++ b/src/icons/svg/table.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><g fill="none"><path d="M4 9a5 5 0 0 1 5-5h14a5 5 0 0 1 5 5v14a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5V9zm5-3a3 3 0 0 0-3 3v2h5V6H9zm4 0v5h6V6h-6zm0 7v6h6v-6h-6zm-2 6v-6H6v6h5zm-5 2v2a3 3 0 0 0 3 3h2v-5H6zm7 0v5h6v-5h-6zm8 0v5h2a3 3 0 0 0 3-3v-2h-5zm5-2v-6h-5v6h5zM21 6v5h5V9a3 3 0 0 0-3-3h-2z" fill="currentColor"></path></g></svg>
diff --git a/src/icons/svg/tree.svg b/src/icons/svg/tree.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2b43386e555429c773f85c0c42afd8faa61888b7
--- /dev/null
+++ b/src/icons/svg/tree.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><path d="M23 9.005h6a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2h-6a2 2 0 0 0-2 2v1H11v-1a2 2 0 0 0-2-2H3a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h4v20a2.002 2.002 0 0 0 2 2h4v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2h-6a2 2 0 0 0-2 2v1h-4v-9h4v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2h-6a2 2 0 0 0-2 2v1h-4v-9h4v1a2 2 0 0 0 2 2zm0-6h6v4h-6zm-14 4H3v-4h6zm14 18h6v4h-6zm0-11h6v4h-6z" fill="currentColor"></path></svg>
diff --git a/src/main.ts b/src/main.ts
index 8ee809c95d6ce74f4b5e2497cbed77b561b1b3a0..cc65a734081c33c30b0f7c7cafa9ef9de5b38b00 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import naive from 'naive-ui';
 import 'virtual:svg-icons-register' // 引入SVG注册脚本
-import './styles/index.less'
+import './components/naiveui/styles/index.less'
 createApp(App)
     .use(naive)
     .mount('#app')
diff --git a/tsconfig.json b/tsconfig.json
index bcc4abda4c57f07c6bb73283dfa0aeb23d8b4a27..f03fae51cb7e144290b953d8bf00526d3e9998da 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,7 +4,7 @@
     "useDefineForClassFields": true,
     "module": "esnext",
     "moduleResolution": "node",
-    "strict": true,
+    "strict": false,
     "jsx": "preserve",
     "sourceMap": true,
     "resolveJsonModule": true,
diff --git a/vite.config.ts b/vite.config.ts
index d1ab3da14539de3447845c8d2d0ad4d37d659ee1..30329be2f36a36f6c88f3382c392cca1792ec5e8 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,6 +3,9 @@ import vue from '@vitejs/plugin-vue'
 import {resolve} from 'path'
 import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'
 // https://vitejs.dev/config/
+function pathResolve(dir: string) {
+    return resolve(process.cwd(), '.', dir);
+}
 export default defineConfig({
 
         plugins: [