From 3ad2fdbdd5af17d3c46682342635ea5b4cfbc982 Mon Sep 17 00:00:00 2001
From: lvhuaisheng <lvhuaisheng_k@163.com>
Date: Sat, 2 Jul 2022 17:34:25 +0800
Subject: [PATCH 1/9] =?UTF-8?q?=E6=8B=86=E5=88=86=E4=BA=86=E5=8F=B3?=
 =?UTF-8?q?=E4=BE=A7=E8=8F=9C=E5=8D=95=E6=A8=A1=E5=9D=97=EF=BC=8C=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E4=BA=86=E5=B7=B2=E7=9F=A5=E7=9A=84bug=EF=BC=8C?=
 =?UTF-8?q?=E6=AD=A4=E6=AC=A1=E6=94=B9=E5=8A=A8=E8=BE=83=E5=A4=A7=20?=
 =?UTF-8?q?=E6=8F=90=E4=BA=A4=E6=9A=82=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   3 +-
 pnpm-lock.yaml                                |   2 +
 src/config/naiveui.ts                         |  34 +-
 src/core/naiveui/NaiveFormConfig.vue          |  22 +-
 src/core/naiveui/NaiveFormDesign.vue          |   1 -
 src/core/naiveui/NaiveWidgetConfig.vue        | 915 ++----------------
 src/core/naiveui/NaiveWidgetFormItem.vue      |   9 +-
 src/core/naiveui/types/NaiveWidgetTypes.d.ts  |   8 +
 src/core/naiveui/widget/CheckboxWidget.vue    | 121 +++
 src/core/naiveui/widget/ColorWidget.vue       | 126 +++
 src/core/naiveui/widget/DateWidget.vue        |  62 ++
 src/core/naiveui/widget/InputWidget.vue       |  81 ++
 src/core/naiveui/widget/NumberWidget.vue      |  62 ++
 src/core/naiveui/widget/RadioWidget.vue       | 121 +++
 src/core/naiveui/widget/RateWidget.vue        |  73 ++
 .../naiveui/widget/RichtextEditorWidget.vue   |  46 +
 src/core/naiveui/widget/SelectTreeWidget.vue  | 329 +++++++
 src/core/naiveui/widget/SelectWidget.vue      | 161 +++
 src/core/naiveui/widget/SliderWidget.vue      |  92 ++
 src/core/naiveui/widget/SwitchWidget.vue      |  53 +
 src/core/naiveui/widget/TableWidget.vue       | 115 +++
 src/core/naiveui/widget/TimeWidget.vue        |  62 ++
 src/core/naiveui/widget/TransferWidget.vue    | 104 ++
 src/core/naiveui/widget/UploadWidget.vue      |  96 ++
 src/enums/index.ts                            |  27 +
 src/icons/svg/question.svg                    |   1 +
 src/styles/index.less                         |   1 +
 src/styles/table.less                         |   6 +
 tsconfig.json                                 |   2 +-
 29 files changed, 1870 insertions(+), 865 deletions(-)
 create mode 100644 src/core/naiveui/types/NaiveWidgetTypes.d.ts
 create mode 100644 src/core/naiveui/widget/CheckboxWidget.vue
 create mode 100644 src/core/naiveui/widget/ColorWidget.vue
 create mode 100644 src/core/naiveui/widget/DateWidget.vue
 create mode 100644 src/core/naiveui/widget/InputWidget.vue
 create mode 100644 src/core/naiveui/widget/NumberWidget.vue
 create mode 100644 src/core/naiveui/widget/RadioWidget.vue
 create mode 100644 src/core/naiveui/widget/RateWidget.vue
 create mode 100644 src/core/naiveui/widget/RichtextEditorWidget.vue
 create mode 100644 src/core/naiveui/widget/SelectTreeWidget.vue
 create mode 100644 src/core/naiveui/widget/SelectWidget.vue
 create mode 100644 src/core/naiveui/widget/SliderWidget.vue
 create mode 100644 src/core/naiveui/widget/SwitchWidget.vue
 create mode 100644 src/core/naiveui/widget/TableWidget.vue
 create mode 100644 src/core/naiveui/widget/TimeWidget.vue
 create mode 100644 src/core/naiveui/widget/TransferWidget.vue
 create mode 100644 src/core/naiveui/widget/UploadWidget.vue
 create mode 100644 src/icons/svg/question.svg
 create mode 100644 src/styles/table.less

diff --git a/package.json b/package.json
index d8691fd..b008b23 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 6d5c920..8df7274 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/config/naiveui.ts b/src/config/naiveui.ts
index 794599a..ba8b3b2 100644
--- a/src/config/naiveui.ts
+++ b/src/config/naiveui.ts
@@ -308,36 +308,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',
             }
@@ -380,7 +389,8 @@ export const advanceComponents = [
     options: {
       defaultValue: '',
       width: '',
-      disabled: false
+      disabled: false,
+      rules:getRules('string')
     }
   },
   {
@@ -408,6 +418,7 @@ export const advanceComponents = [
           value: 'Option 3'
         }
       ],
+      rules:getRules('array')
     }
   },
   {
@@ -484,6 +495,15 @@ export const advanceComponents = [
     dev:true,
     options: {
       defaultValue: 'This is a table',
+      theme:'default',
+      width:'210mm',
+      height:'297mm',
+      disabled: false,
+      bordered:true,
+      bottomBordered:false,
+      singleColumn:false,
+      singleLine:false,
+      striped:false,
     }
   },
   {
diff --git a/src/core/naiveui/NaiveFormConfig.vue b/src/core/naiveui/NaiveFormConfig.vue
index cb109b0..93ee779 100644
--- a/src/core/naiveui/NaiveFormConfig.vue
+++ b/src/core/naiveui/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" >
diff --git a/src/core/naiveui/NaiveFormDesign.vue b/src/core/naiveui/NaiveFormDesign.vue
index abd4def..fd20a6f 100644
--- a/src/core/naiveui/NaiveFormDesign.vue
+++ b/src/core/naiveui/NaiveFormDesign.vue
@@ -222,7 +222,6 @@ export default defineComponent({
         'select',
         'switch',
         'slider',
-        'text',
         'color',
       ]
     },
diff --git a/src/core/naiveui/NaiveWidgetConfig.vue b/src/core/naiveui/NaiveWidgetConfig.vue
index 3221a7e..c51fab0 100644
--- a/src/core/naiveui/NaiveWidgetConfig.vue
+++ b/src/core/naiveui/NaiveWidgetConfig.vue
@@ -19,873 +19,88 @@
     <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>
+    <div v-if="data.type">
 
-    <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>
+    </div>
+    <component  v-if="checkComponent(data.type)" :is="data.type+'Widget'" :select="data"/>
+    <template v-if="hasKey('rules')">
+      <h4>验证规则</h4>
 
-    <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-form-item label="触发时机">
         <n-radio-group
+            v-model:value="data.options.rules.trigger"
             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-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.name" />
+      <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.action" />
+      <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.accept" />
-      </n-form-item>
-      <n-form-item label="最大上传数量">
-        <n-input-number v-model:value.number="data.options.maxCount" :min="1" />
+      <n-form-item label="正则表达式">
+        <n-input v-model:value="data.options.rules.pattern" />
       </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 label="校验类型">
+        <n-select v-model:value="data.options.rules.type" :options="verifyOptions"></n-select>
       </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 {h, defineComponent, reactive, ref, toRefs, watch, onMounted} from 'vue'
 import Draggable from 'vuedraggable'
+import InputWidget from './widget/InputWidget.vue'
+import NumberWidget from './widget/NumberWidget.vue'
+import RadioWidget from './widget/RadioWidget.vue'
+import CheckboxWidget from './widget/CheckboxWidget.vue'
+import TimeWidget from './widget/TimeWidget.vue'
+import DateWidget from './widget/DateWidget.vue'
+import RateWidget from './widget/RateWidget.vue'
+import SelectWidget from './widget/SelectWidget.vue'
+import SwitchWidget from './widget/SwitchWidget.vue'
+import SliderWidget from './widget/SliderWidget.vue'
+import ColorWidget from './widget/ColorWidget.vue'
+import SelectTreeWidget from './widget/SelectTreeWidget.vue'
+import UploadWidget from './widget/UploadWidget.vue'
+import RichtextEditorWidget from './widget/RichtextEditorWidget.vue'
+import TransferWidget from './widget/TransferWidget.vue'
+import TableWidget from './widget/TableWidget.vue'
 import SvgIcon from '../../components/SvgIcon.vue'
-import { NSpace,NButton,NInput, useMessage } from 'naive-ui'
+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: 'NaiveWidgetConfig',
   components: {
     Draggable,
-    SvgIcon
+    SvgIcon,
+    InputWidget,
+    NumberWidget,
+    RadioWidget,
+    CheckboxWidget,
+    TimeWidget,
+    DateWidget,
+    RateWidget,
+    SelectWidget,
+    SwitchWidget,
+    SliderWidget,
+    ColorWidget,
+    SelectTreeWidget,
+    UploadWidget,
+    RichtextEditorWidget,
+    TransferWidget,
+    TableWidget,
   },
   props: {
     select: {
@@ -900,9 +115,10 @@ export default defineComponent({
       () => props.select,
       val => (data.value = val)
     )
-
+    // onMounted(() => {
+    //   item.mComponent = () => import(`@/views/workplace/${item.path}.vue`)
+    // })
     watch(data, val => context.emit('update:select', val))
-
     const treeDataColumns = ({
                                add,
                                edit,
@@ -934,8 +150,16 @@ export default defineComponent({
         }
       ]
     }
+    const treeData: RowData ={
+      parent:null,
+      key: '',
+      label:'',
+      value:'',
+      children:[]
+    }
     const addTreeData = ()=>{
       state.treeData = {
+        parent:null,
         key: v4().replaceAll('-', ''),
         label:'',
         value:'',
@@ -977,7 +201,7 @@ export default defineComponent({
       ],
       showTreeDataType:'add',
       showTreeDataDriwer:false,
-      treeData:{},
+      treeData,
       treeRules: {
         label: {
           required: true,
@@ -1124,7 +348,8 @@ export default defineComponent({
       handleOptionsRemove,
       handleSelectModeChange,
       handleSliderModeChange,
-      changeDateType
+      changeDateType,
+      checkComponent
     }
   }
 })
diff --git a/src/core/naiveui/NaiveWidgetFormItem.vue b/src/core/naiveui/NaiveWidgetFormItem.vue
index 95c80c8..c94dc13 100644
--- a/src/core/naiveui/NaiveWidgetFormItem.vue
+++ b/src/core/naiveui/NaiveWidgetFormItem.vue
@@ -274,7 +274,14 @@
         />
       </template>
       <template v-if="element.type === 'table'">
-        <n-table :bordered="false" :single-line="false">
+        <n-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 }">
           <thead>
           <tr>
             <th>Abandon</th>
diff --git a/src/core/naiveui/types/NaiveWidgetTypes.d.ts b/src/core/naiveui/types/NaiveWidgetTypes.d.ts
new file mode 100644
index 0000000..aab1035
--- /dev/null
+++ b/src/core/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/core/naiveui/widget/CheckboxWidget.vue b/src/core/naiveui/widget/CheckboxWidget.vue
new file mode 100644
index 0000000..29a2021
--- /dev/null
+++ b/src/core/naiveui/widget/CheckboxWidget.vue
@@ -0,0 +1,121 @@
+<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.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/core/naiveui/widget/ColorWidget.vue b/src/core/naiveui/widget/ColorWidget.vue
new file mode 100644
index 0000000..20b5153
--- /dev/null
+++ b/src/core/naiveui/widget/ColorWidget.vue
@@ -0,0 +1,126 @@
+<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>
+    <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/core/naiveui/widget/DateWidget.vue b/src/core/naiveui/widget/DateWidget.vue
new file mode 100644
index 0000000..16dbb10
--- /dev/null
+++ b/src/core/naiveui/widget/DateWidget.vue
@@ -0,0 +1,62 @@
+<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-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))
+    return {
+      data,
+    }
+  }
+})
+
+</script>
+
+
+<style scoped>
+
+</style>
diff --git a/src/core/naiveui/widget/InputWidget.vue b/src/core/naiveui/widget/InputWidget.vue
new file mode 100644
index 0000000..8681a05
--- /dev/null
+++ b/src/core/naiveui/widget/InputWidget.vue
@@ -0,0 +1,81 @@
+<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.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/core/naiveui/widget/NumberWidget.vue b/src/core/naiveui/widget/NumberWidget.vue
new file mode 100644
index 0000000..e00de13
--- /dev/null
+++ b/src/core/naiveui/widget/NumberWidget.vue
@@ -0,0 +1,62 @@
+<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.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/core/naiveui/widget/RadioWidget.vue b/src/core/naiveui/widget/RadioWidget.vue
new file mode 100644
index 0000000..acaed32
--- /dev/null
+++ b/src/core/naiveui/widget/RadioWidget.vue
@@ -0,0 +1,121 @@
+<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.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/core/naiveui/widget/RateWidget.vue b/src/core/naiveui/widget/RateWidget.vue
new file mode 100644
index 0000000..32c310a
--- /dev/null
+++ b/src/core/naiveui/widget/RateWidget.vue
@@ -0,0 +1,73 @@
+<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.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/core/naiveui/widget/RichtextEditorWidget.vue b/src/core/naiveui/widget/RichtextEditorWidget.vue
new file mode 100644
index 0000000..5fc5193
--- /dev/null
+++ b/src/core/naiveui/widget/RichtextEditorWidget.vue
@@ -0,0 +1,46 @@
+<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.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/core/naiveui/widget/SelectTreeWidget.vue b/src/core/naiveui/widget/SelectTreeWidget.vue
new file mode 100644
index 0000000..bc462fe
--- /dev/null
+++ b/src/core/naiveui/widget/SelectTreeWidget.vue
@@ -0,0 +1,329 @@
+<template>
+  <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.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/core/naiveui/widget/SelectWidget.vue b/src/core/naiveui/widget/SelectWidget.vue
new file mode 100644
index 0000000..b0377ce
--- /dev/null
+++ b/src/core/naiveui/widget/SelectWidget.vue
@@ -0,0 +1,161 @@
+<template>
+  <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.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/core/naiveui/widget/SliderWidget.vue b/src/core/naiveui/widget/SliderWidget.vue
new file mode 100644
index 0000000..c9637ed
--- /dev/null
+++ b/src/core/naiveui/widget/SliderWidget.vue
@@ -0,0 +1,92 @@
+<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-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/core/naiveui/widget/SwitchWidget.vue b/src/core/naiveui/widget/SwitchWidget.vue
new file mode 100644
index 0000000..a3b0509
--- /dev/null
+++ b/src/core/naiveui/widget/SwitchWidget.vue
@@ -0,0 +1,53 @@
+<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.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/core/naiveui/widget/TableWidget.vue b/src/core/naiveui/widget/TableWidget.vue
new file mode 100644
index 0000000..ba7e408
--- /dev/null
+++ b/src/core/naiveui/widget/TableWidget.vue
@@ -0,0 +1,115 @@
+<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-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>
+</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/core/naiveui/widget/TimeWidget.vue b/src/core/naiveui/widget/TimeWidget.vue
new file mode 100644
index 0000000..8ab4ff9
--- /dev/null
+++ b/src/core/naiveui/widget/TimeWidget.vue
@@ -0,0 +1,62 @@
+<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.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/core/naiveui/widget/TransferWidget.vue b/src/core/naiveui/widget/TransferWidget.vue
new file mode 100644
index 0000000..eec48b7
--- /dev/null
+++ b/src/core/naiveui/widget/TransferWidget.vue
@@ -0,0 +1,104 @@
+<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.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/core/naiveui/widget/UploadWidget.vue b/src/core/naiveui/widget/UploadWidget.vue
new file mode 100644
index 0000000..2832643
--- /dev/null
+++ b/src/core/naiveui/widget/UploadWidget.vue
@@ -0,0 +1,96 @@
+<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.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/enums/index.ts b/src/enums/index.ts
index 9f5c058..8db9733 100644
--- a/src/enums/index.ts
+++ b/src/enums/index.ts
@@ -6,3 +6,30 @@ export enum CodeType {
 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',
+  DynamicTable = 'dynamicTable',
+  SelectTree = 'selectTree',
+  Transfer = 'transfer',
+}
+
+export function checkComponent(test: any): test is ComponentType {
+  return (Object.values(ComponentType).indexOf(test) !== -1);
+}
diff --git a/src/icons/svg/question.svg b/src/icons/svg/question.svg
new file mode 100644
index 0000000..f2431e7
--- /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/styles/index.less b/src/styles/index.less
index 643001c..0fbe4d7 100644
--- a/src/styles/index.less
+++ b/src/styles/index.less
@@ -1,4 +1,5 @@
 @import './scrollbar.less';
+@import './table.less';
 @primary-color: #18a058;
 @primary-background-color: #eafaef;
 // Color variables (appears count calculates by raw css)
diff --git a/src/styles/table.less b/src/styles/table.less
new file mode 100644
index 0000000..25adddd
--- /dev/null
+++ b/src/styles/table.less
@@ -0,0 +1,6 @@
+.table-theme1{
+  border-color: #000 !important;
+  tr,td,th {
+    border-color: #000 !important;
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
index bcc4abd..f03fae5 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,
-- 
Gitee


From bf905a534cb4477f4e635329bff4ffc402b1b958 Mon Sep 17 00:00:00 2001
From: lvhuaisheng <lvhuaisheng_k@163.com>
Date: Sat, 2 Jul 2022 17:42:40 +0800
Subject: [PATCH 2/9] docs:update README.md

---
 README.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 64a5ad2..53338e7 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,9 @@
 
 [NaiveUi Form Generate](https://github.com/LvHuaiSheng/naiveui-form-generate)，一个基于 Vue3.0、Vite、Naive UI 表单生成器。
 
-
+### 分支说明
+- develop：开发分支，最新代码，但不具有稳定性
+- master：主分支，相对稳定代码（目前develop开发阶段，此分支可暂时忽略）
 ### 功能/计划
 - 🍉 单行/多行/密码输入组件 √
 - 🍉 数字组件 √
-- 
Gitee


From a18cabd71090da12245b80cc4fbd4c49e03fbc59 Mon Sep 17 00:00:00 2001
From: lvhuaisheng <lvhuaisheng_k@163.com>
Date: Sun, 3 Jul 2022 17:39:26 +0800
Subject: [PATCH 3/9] =?UTF-8?q?1.=E5=A2=9E=E5=8A=A0=E9=9D=99=E6=80=81?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E5=8A=9F=E8=83=BD=EF=BC=88=E4=B8=8D=E7=A8=B3?=
 =?UTF-8?q?=E5=AE=9A=20=E4=BB=A3=E7=A0=81=E6=9A=82=E5=AD=98=EF=BC=89?=
 =?UTF-8?q?=EF=BC=9B2.=E9=87=8D=E6=9E=84=E4=BA=86=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E7=BB=93=E6=9E=84=EF=BC=8C=E4=BD=BF=E5=85=B6=E6=9B=B4=E6=96=B9?=
 =?UTF-8?q?=E4=BE=BF=E7=9A=84=E8=A2=AB=E5=85=B6=E5=AE=83=E9=A1=B9=E7=9B=AE?=
 =?UTF-8?q?=E5=BC=95=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     |   5 +-
 src/App.vue                                   |   4 +-
 src/components/SvgIcon.vue                    |   2 +-
 .../naiveui/FormDesign.vue}                   |  60 ++-
 .../{ => naiveui/components}/CodeEditor.vue   |   0
 .../components}/ComponentGroup.vue            |   2 +-
 .../naiveui/components}/NaiveFormConfig.vue   |   2 +-
 .../naiveui/components}/NaiveHeader.vue       |   2 +-
 .../naiveui/components/configs/Checkbox.vue}  |   2 +-
 .../naiveui/components/configs/Color.vue}     |   2 +-
 .../naiveui/components/configs/Date.vue}      |   0
 .../naiveui/components/configs/Grid.vue       |  83 ++++
 .../naiveui/components/configs/Input.vue}     |   0
 .../naiveui/components/configs/Number.vue}    |   0
 .../naiveui/components/configs/Radio.vue}     |   2 +-
 .../naiveui/components/configs/Rate.vue}      |   0
 .../components/configs/RichtextEditor.vue}    |   0
 .../naiveui/components/configs/Select.vue}    |   2 +-
 .../components/configs/SelectTree.vue}        |   4 +-
 .../naiveui/components/configs/Slider.vue}    |   0
 .../naiveui/components/configs/Switch.vue}    |   0
 .../naiveui/components/configs/Table.vue}     |   0
 .../naiveui/components/configs/Time.vue}      |   0
 .../naiveui/components/configs/Transfer.vue}  |   0
 .../naiveui/components/configs/Upload.vue}    |   0
 .../components/custom}/RichTextEditor.vue     |   0
 .../components/custom/table/GTable.vue        | 357 ++++++++++++++
 .../components/custom/table/GTableItem.vue    | 188 ++++++++
 .../components/custom/table/GTable_old.vue    | 442 ++++++++++++++++++
 .../components/design/DesignConfig.vue}       |  77 +--
 .../naiveui/components/design/DesignForm.vue} |  64 ++-
 .../components/design/DesignFormItem.vue}     |  45 +-
 .../components/generate/GenerateForm.vue}     |   8 +-
 .../components/generate/GenerateFormItem.vue} |   7 +-
 src/{ => components/naiveui}/config/index.ts  |   0
 .../naiveui}/config/naiveui.ts                | 277 ++++++++++-
 src/{ => components/naiveui}/enums/index.ts   |   1 +
 .../naiveui}/styles/index.less                |   4 +-
 .../naiveui}/styles/scrollbar.less            |   0
 src/components/naiveui/styles/table.less      |  11 +
 .../naiveui/types/NaiveWidgetTypes.d.ts       |   0
 .../naiveui}/utils/generateCode.ts            |   0
 src/{ => components/naiveui}/utils/index.ts   |   1 -
 src/main.ts                                   |   2 +-
 src/styles/table.less                         |   6 -
 vite.config.ts                                |   5 +
 46 files changed, 1501 insertions(+), 166 deletions(-)
 rename src/{core/naiveui/NaiveFormDesign.vue => components/naiveui/FormDesign.vue} (87%)
 rename src/components/{ => naiveui/components}/CodeEditor.vue (100%)
 rename src/components/{ => naiveui/components}/ComponentGroup.vue (96%)
 rename src/{core/naiveui => components/naiveui/components}/NaiveFormConfig.vue (98%)
 rename src/{core/naiveui => components/naiveui/components}/NaiveHeader.vue (97%)
 rename src/{core/naiveui/widget/CheckboxWidget.vue => components/naiveui/components/configs/Checkbox.vue} (98%)
 rename src/{core/naiveui/widget/ColorWidget.vue => components/naiveui/components/configs/Color.vue} (98%)
 rename src/{core/naiveui/widget/DateWidget.vue => components/naiveui/components/configs/Date.vue} (100%)
 create mode 100644 src/components/naiveui/components/configs/Grid.vue
 rename src/{core/naiveui/widget/InputWidget.vue => components/naiveui/components/configs/Input.vue} (100%)
 rename src/{core/naiveui/widget/NumberWidget.vue => components/naiveui/components/configs/Number.vue} (100%)
 rename src/{core/naiveui/widget/RadioWidget.vue => components/naiveui/components/configs/Radio.vue} (98%)
 rename src/{core/naiveui/widget/RateWidget.vue => components/naiveui/components/configs/Rate.vue} (100%)
 rename src/{core/naiveui/widget/RichtextEditorWidget.vue => components/naiveui/components/configs/RichtextEditor.vue} (100%)
 rename src/{core/naiveui/widget/SelectWidget.vue => components/naiveui/components/configs/Select.vue} (98%)
 rename src/{core/naiveui/widget/SelectTreeWidget.vue => components/naiveui/components/configs/SelectTree.vue} (98%)
 rename src/{core/naiveui/widget/SliderWidget.vue => components/naiveui/components/configs/Slider.vue} (100%)
 rename src/{core/naiveui/widget/SwitchWidget.vue => components/naiveui/components/configs/Switch.vue} (100%)
 rename src/{core/naiveui/widget/TableWidget.vue => components/naiveui/components/configs/Table.vue} (100%)
 rename src/{core/naiveui/widget/TimeWidget.vue => components/naiveui/components/configs/Time.vue} (100%)
 rename src/{core/naiveui/widget/TransferWidget.vue => components/naiveui/components/configs/Transfer.vue} (100%)
 rename src/{core/naiveui/widget/UploadWidget.vue => components/naiveui/components/configs/Upload.vue} (100%)
 rename src/components/{ => naiveui/components/custom}/RichTextEditor.vue (100%)
 create mode 100644 src/components/naiveui/components/custom/table/GTable.vue
 create mode 100644 src/components/naiveui/components/custom/table/GTableItem.vue
 create mode 100644 src/components/naiveui/components/custom/table/GTable_old.vue
 rename src/{core/naiveui/NaiveWidgetConfig.vue => components/naiveui/components/design/DesignConfig.vue} (87%)
 rename src/{core/naiveui/NaiveWidgetForm.vue => components/naiveui/components/design/DesignForm.vue} (81%)
 rename src/{core/naiveui/NaiveWidgetFormItem.vue => components/naiveui/components/design/DesignFormItem.vue} (89%)
 rename src/{core/naiveui/NaiveGenerateForm.vue => components/naiveui/components/generate/GenerateForm.vue} (96%)
 rename src/{core/naiveui/NaiveGenerateFormItem.vue => components/naiveui/components/generate/GenerateFormItem.vue} (98%)
 rename src/{ => components/naiveui}/config/index.ts (100%)
 rename src/{ => components/naiveui}/config/naiveui.ts (66%)
 rename src/{ => components/naiveui}/enums/index.ts (97%)
 rename src/{ => components/naiveui}/styles/index.less (98%)
 rename src/{ => components/naiveui}/styles/scrollbar.less (100%)
 create mode 100644 src/components/naiveui/styles/table.less
 rename src/{core => components}/naiveui/types/NaiveWidgetTypes.d.ts (100%)
 rename src/{ => components/naiveui}/utils/generateCode.ts (100%)
 rename src/{ => components/naiveui}/utils/index.ts (97%)
 delete mode 100644 src/styles/table.less

diff --git a/README.md b/README.md
index 53338e7..a487922 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,10 @@
 
 <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>
 
 
diff --git a/src/App.vue b/src/App.vue
index 7c6cdaf..10b3b36 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 057c445..fee7f3e 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 87%
rename from src/core/naiveui/NaiveFormDesign.vue
rename to src/components/naiveui/FormDesign.vue
index fd20a6f..5859da6 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"
           />
@@ -88,11 +88,11 @@
       <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>-->
+      <!--      <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: {
@@ -232,7 +231,6 @@ export default defineComponent({
         'richtext-editor',
         'cascader',
         'tree',
-        'table',
         'dynamicTable',
         'selectTree',
         'transfer',
@@ -240,7 +238,7 @@ export default defineComponent({
     },
     layoutFields: {
       type: Array as PropType<Array<string>>,
-      default: () => ['grid']
+      default: () => ['grid','table',]
     },
     otherFields: {
       type: Array as PropType<Array<string>>,
@@ -323,7 +321,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 96%
rename from src/components/ComponentGroup.vue
rename to src/components/naiveui/components/ComponentGroup.vue
index ca0b485..2c40feb 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 98%
rename from src/core/naiveui/NaiveFormConfig.vue
rename to src/components/naiveui/components/NaiveFormConfig.vue
index 93ee779..c44e0b3 100644
--- a/src/core/naiveui/NaiveFormConfig.vue
+++ b/src/components/naiveui/components/NaiveFormConfig.vue
@@ -64,7 +64,7 @@
 </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 97%
rename from src/core/naiveui/NaiveHeader.vue
rename to src/components/naiveui/components/NaiveHeader.vue
index 2ff2bca..d63087e 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/core/naiveui/widget/CheckboxWidget.vue b/src/components/naiveui/components/configs/Checkbox.vue
similarity index 98%
rename from src/core/naiveui/widget/CheckboxWidget.vue
rename to src/components/naiveui/components/configs/Checkbox.vue
index 29a2021..3cfef80 100644
--- a/src/core/naiveui/widget/CheckboxWidget.vue
+++ b/src/components/naiveui/components/configs/Checkbox.vue
@@ -66,7 +66,7 @@
 <script lang="ts">
 import {defineComponent, ref, watch} from 'vue'
 import Draggable from 'vuedraggable'
-import SvgIcon from "../../../components/SvgIcon.vue";
+import SvgIcon from "@/components/SvgIcon.vue";
 export default defineComponent({
   components:{
     Draggable,
diff --git a/src/core/naiveui/widget/ColorWidget.vue b/src/components/naiveui/components/configs/Color.vue
similarity index 98%
rename from src/core/naiveui/widget/ColorWidget.vue
rename to src/components/naiveui/components/configs/Color.vue
index 20b5153..a9bd542 100644
--- a/src/core/naiveui/widget/ColorWidget.vue
+++ b/src/components/naiveui/components/configs/Color.vue
@@ -75,7 +75,7 @@
 </template>
 <script lang="ts">
 import {defineComponent, reactive, ref, toRefs, watch} from 'vue'
-import SvgIcon from '../../../components/SvgIcon.vue'
+import SvgIcon from '@/components/SvgIcon.vue'
 export default defineComponent({
   name: 'InputWidget',
   components:{
diff --git a/src/core/naiveui/widget/DateWidget.vue b/src/components/naiveui/components/configs/Date.vue
similarity index 100%
rename from src/core/naiveui/widget/DateWidget.vue
rename to src/components/naiveui/components/configs/Date.vue
diff --git a/src/components/naiveui/components/configs/Grid.vue b/src/components/naiveui/components/configs/Grid.vue
new file mode 100644
index 0000000..63a51d5
--- /dev/null
+++ b/src/components/naiveui/components/configs/Grid.vue
@@ -0,0 +1,83 @@
+<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/core/naiveui/widget/InputWidget.vue b/src/components/naiveui/components/configs/Input.vue
similarity index 100%
rename from src/core/naiveui/widget/InputWidget.vue
rename to src/components/naiveui/components/configs/Input.vue
diff --git a/src/core/naiveui/widget/NumberWidget.vue b/src/components/naiveui/components/configs/Number.vue
similarity index 100%
rename from src/core/naiveui/widget/NumberWidget.vue
rename to src/components/naiveui/components/configs/Number.vue
diff --git a/src/core/naiveui/widget/RadioWidget.vue b/src/components/naiveui/components/configs/Radio.vue
similarity index 98%
rename from src/core/naiveui/widget/RadioWidget.vue
rename to src/components/naiveui/components/configs/Radio.vue
index acaed32..a53efd4 100644
--- a/src/core/naiveui/widget/RadioWidget.vue
+++ b/src/components/naiveui/components/configs/Radio.vue
@@ -66,7 +66,7 @@
 <script lang="ts">
 import {defineComponent, ref, watch} from 'vue'
 import Draggable from 'vuedraggable'
-import SvgIcon from "../../../components/SvgIcon.vue";
+import SvgIcon from "@/components/SvgIcon.vue";
 export default defineComponent({
   components:{
     Draggable,
diff --git a/src/core/naiveui/widget/RateWidget.vue b/src/components/naiveui/components/configs/Rate.vue
similarity index 100%
rename from src/core/naiveui/widget/RateWidget.vue
rename to src/components/naiveui/components/configs/Rate.vue
diff --git a/src/core/naiveui/widget/RichtextEditorWidget.vue b/src/components/naiveui/components/configs/RichtextEditor.vue
similarity index 100%
rename from src/core/naiveui/widget/RichtextEditorWidget.vue
rename to src/components/naiveui/components/configs/RichtextEditor.vue
diff --git a/src/core/naiveui/widget/SelectWidget.vue b/src/components/naiveui/components/configs/Select.vue
similarity index 98%
rename from src/core/naiveui/widget/SelectWidget.vue
rename to src/components/naiveui/components/configs/Select.vue
index b0377ce..99cec49 100644
--- a/src/core/naiveui/widget/SelectWidget.vue
+++ b/src/components/naiveui/components/configs/Select.vue
@@ -87,7 +87,7 @@
 <script lang="ts">
 import {defineComponent, ref, watch} from 'vue'
 import Draggable from 'vuedraggable'
-import SvgIcon from "../../../components/SvgIcon.vue";
+import SvgIcon from "@/components/SvgIcon.vue";
 export default defineComponent({
   components:{
     Draggable,
diff --git a/src/core/naiveui/widget/SelectTreeWidget.vue b/src/components/naiveui/components/configs/SelectTree.vue
similarity index 98%
rename from src/core/naiveui/widget/SelectTreeWidget.vue
rename to src/components/naiveui/components/configs/SelectTree.vue
index bc462fe..633c669 100644
--- a/src/core/naiveui/widget/SelectTreeWidget.vue
+++ b/src/components/naiveui/components/configs/SelectTree.vue
@@ -114,8 +114,8 @@
 <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 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({
diff --git a/src/core/naiveui/widget/SliderWidget.vue b/src/components/naiveui/components/configs/Slider.vue
similarity index 100%
rename from src/core/naiveui/widget/SliderWidget.vue
rename to src/components/naiveui/components/configs/Slider.vue
diff --git a/src/core/naiveui/widget/SwitchWidget.vue b/src/components/naiveui/components/configs/Switch.vue
similarity index 100%
rename from src/core/naiveui/widget/SwitchWidget.vue
rename to src/components/naiveui/components/configs/Switch.vue
diff --git a/src/core/naiveui/widget/TableWidget.vue b/src/components/naiveui/components/configs/Table.vue
similarity index 100%
rename from src/core/naiveui/widget/TableWidget.vue
rename to src/components/naiveui/components/configs/Table.vue
diff --git a/src/core/naiveui/widget/TimeWidget.vue b/src/components/naiveui/components/configs/Time.vue
similarity index 100%
rename from src/core/naiveui/widget/TimeWidget.vue
rename to src/components/naiveui/components/configs/Time.vue
diff --git a/src/core/naiveui/widget/TransferWidget.vue b/src/components/naiveui/components/configs/Transfer.vue
similarity index 100%
rename from src/core/naiveui/widget/TransferWidget.vue
rename to src/components/naiveui/components/configs/Transfer.vue
diff --git a/src/core/naiveui/widget/UploadWidget.vue b/src/components/naiveui/components/configs/Upload.vue
similarity index 100%
rename from src/core/naiveui/widget/UploadWidget.vue
rename to src/components/naiveui/components/configs/Upload.vue
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 0000000..b62d979
--- /dev/null
+++ b/src/components/naiveui/components/custom/table/GTable.vue
@@ -0,0 +1,357 @@
+
+<template>
+  <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,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, col.list)"
+                  @delete="handleDeleteClick(index, col.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>
+  </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,columns:[]};
+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
+    },
+    widgetFormSelect: {
+      type: Object
+    },
+  },
+  emits: ['update:widgetForm', 'update:widgetFormSelect'],
+  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
+      const list = JSON.parse(JSON.stringify(props.widgetForm.list[index]))
+
+      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('-', '')
+
+      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 0000000..477bc7b
--- /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 0000000..06969e2
--- /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/core/naiveui/NaiveWidgetConfig.vue b/src/components/naiveui/components/design/DesignConfig.vue
similarity index 87%
rename from src/core/naiveui/NaiveWidgetConfig.vue
rename to src/components/naiveui/components/design/DesignConfig.vue
index c51fab0..913e7af 100644
--- a/src/core/naiveui/NaiveWidgetConfig.vue
+++ b/src/components/naiveui/components/design/DesignConfig.vue
@@ -1,4 +1,5 @@
 <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" />
@@ -19,10 +20,8 @@
     <n-form-item label="占位内容" v-if="hasKey('placeholder')">
       <n-input v-model:value="data.options.placeholder" />
     </n-form-item>
-    <div v-if="data.type">
 
-    </div>
-    <component  v-if="checkComponent(data.type)" :is="data.type+'Widget'" :select="data"/>
+    <component  v-if="checkComponent(data.type)" :is="data.type" :select="data"/>
     <template v-if="hasKey('rules')">
       <h4>验证规则</h4>
 
@@ -58,49 +57,51 @@
 <script lang="ts">
 import {h, defineComponent, reactive, ref, toRefs, watch, onMounted} from 'vue'
 import Draggable from 'vuedraggable'
-import InputWidget from './widget/InputWidget.vue'
-import NumberWidget from './widget/NumberWidget.vue'
-import RadioWidget from './widget/RadioWidget.vue'
-import CheckboxWidget from './widget/CheckboxWidget.vue'
-import TimeWidget from './widget/TimeWidget.vue'
-import DateWidget from './widget/DateWidget.vue'
-import RateWidget from './widget/RateWidget.vue'
-import SelectWidget from './widget/SelectWidget.vue'
-import SwitchWidget from './widget/SwitchWidget.vue'
-import SliderWidget from './widget/SliderWidget.vue'
-import ColorWidget from './widget/ColorWidget.vue'
-import SelectTreeWidget from './widget/SelectTreeWidget.vue'
-import UploadWidget from './widget/UploadWidget.vue'
-import RichtextEditorWidget from './widget/RichtextEditorWidget.vue'
-import TransferWidget from './widget/TransferWidget.vue'
-import TableWidget from './widget/TableWidget.vue'
-import SvgIcon from '../../components/SvgIcon.vue'
+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 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 {RowData} from '../../types/NaiveWidgetTypes'
 import type { DataTableColumns } from 'naive-ui'
 export default defineComponent({
-  name: 'NaiveWidgetConfig',
+  name: 'DesignConfig',
   components: {
     Draggable,
     SvgIcon,
-    InputWidget,
-    NumberWidget,
-    RadioWidget,
-    CheckboxWidget,
-    TimeWidget,
-    DateWidget,
-    RateWidget,
-    SelectWidget,
-    SwitchWidget,
-    SliderWidget,
-    ColorWidget,
-    SelectTreeWidget,
-    UploadWidget,
-    RichtextEditorWidget,
-    TransferWidget,
-    TableWidget,
+    Input,
+    Number,
+    Radio,
+    Checkbox,
+    Time,
+    Date,
+    Rate,
+    Select,
+    Switch,
+    Slider,
+    Color,
+    SelectTree,
+    Upload,
+    RichtextEditor,
+    Transfer,
+    Grid,
+    Table,
   },
   props: {
     select: {
diff --git a/src/core/naiveui/NaiveWidgetForm.vue b/src/components/naiveui/components/design/DesignForm.vue
similarity index 81%
rename from src/core/naiveui/NaiveWidgetForm.vue
rename to src/components/naiveui/components/design/DesignForm.vue
index 1d7d757..ee49ece 100644
--- a/src/core/naiveui/NaiveWidgetForm.vue
+++ b/src/components/naiveui/components/design/DesignForm.vue
@@ -50,7 +50,7 @@
                   >
                     <template #item="{ element, index }">
                       <transition-group name="fade" tag="div">
-                        <NaiveWidgetFormItem
+                        <DesignFormItem
                             v-if="element.key"
                             :key="element.key"
                             :element="element"
@@ -82,8 +82,11 @@
                 </n-gi>
               </n-grid>
             </template>
+            <template v-else-if="element.type === 'table'">
+              <g-table :element="element" :widgetForm="widgetForm" :widgetFormSelect="widgetFormSelect"/>
+            </template>
             <template v-else>
-              <NaiveWidgetFormItem
+              <DesignFormItem
                 v-if="element.key"
                 :key="element.key"
                 :element="element"
@@ -105,10 +108,10 @@
 import { defineComponent, nextTick, PropType } 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'
 const handleListInsert = (key: string, list: any[], obj: any) => {
   const newList: any[] = []
   list.forEach(item => {
@@ -149,7 +152,8 @@ export default defineComponent({
   components: {
     SvgIcon,
     Draggable,
-    NaiveWidgetFormItem
+    DesignFormItem,
+    GTable
   },
   props: {
     widgetForm: {
@@ -301,13 +305,59 @@ export default defineComponent({
 
       context.emit('update:widgetFormSelect', row.columns[index].list[newIndex])
     }
+    const handleTdMoveAdd = (
+      event: any,
+      row: any,
+      index: string | number | symbol,
+      tdIndex: string | number | symbol
+    ) => {
+      console.log('row.columns[index]=',JSON.stringify(row.columns[index]))
+      console.log('row.columns[index]222=',JSON.stringify(row.columns[index][tdIndex]))
+
+      const { newIndex, oldIndex, item } = event
+      const list = JSON.parse(JSON.stringify(props.widgetForm.list[index]))
+
+      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('-', '')
+
+      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 {
       handleItemClick,
       handleCopyClick,
       handleDeleteClick,
       handleMoveAdd,
-      handleColMoveAdd
+      handleColMoveAdd,
+      handleTdMoveAdd,
     }
   }
 })
diff --git a/src/core/naiveui/NaiveWidgetFormItem.vue b/src/components/naiveui/components/design/DesignFormItem.vue
similarity index 89%
rename from src/core/naiveui/NaiveWidgetFormItem.vue
rename to src/components/naiveui/components/design/DesignFormItem.vue
index c94dc13..193692e 100644
--- a/src/core/naiveui/NaiveWidgetFormItem.vue
+++ b/src/components/naiveui/components/design/DesignFormItem.vue
@@ -273,45 +273,6 @@
           :style="{ width: element.options.width }"
         />
       </template>
-      <template v-if="element.type === 'table'">
-        <n-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 }">
-          <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>
-      <template v-if="element.type === 'transfer'">
-
-      </template>
     </n-form-item>
     <div class="widget-view-action" v-if="selectWidget?.key === element.key">
       <SvgIcon iconClass="copy" @click.stop="$emit('copy')" />
@@ -326,15 +287,15 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue'
-import SvgIcon from '../../components/SvgIcon.vue'
-import RichTextEditor from '../../components/RichTextEditor.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: {
diff --git a/src/core/naiveui/NaiveGenerateForm.vue b/src/components/naiveui/components/generate/GenerateForm.vue
similarity index 96%
rename from src/core/naiveui/NaiveGenerateForm.vue
rename to src/components/naiveui/components/generate/GenerateForm.vue
index 7a313c8..b1216a7 100644
--- a/src/core/naiveui/NaiveGenerateForm.vue
+++ b/src/components/naiveui/components/generate/GenerateForm.vue
@@ -24,7 +24,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 +35,7 @@
             </n-gi>
           </n-grid>
         </template>
-        <NaiveGenerateFormItem
+        <GenerateFormItem
           v-else
           :model="model"
           :key="element.key"
@@ -51,13 +51,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: {
diff --git a/src/core/naiveui/NaiveGenerateFormItem.vue b/src/components/naiveui/components/generate/GenerateFormItem.vue
similarity index 98%
rename from src/core/naiveui/NaiveGenerateFormItem.vue
rename to src/components/naiveui/components/generate/GenerateFormItem.vue
index 1af2ea7..fc2d117 100644
--- a/src/core/naiveui/NaiveGenerateFormItem.vue
+++ b/src/components/naiveui/components/generate/GenerateFormItem.vue
@@ -276,12 +276,12 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue'
-import SvgIcon from '../../components/SvgIcon.vue'
-import RichTextEditor from '../../components/RichTextEditor.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 +306,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
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 66%
rename from src/config/naiveui.ts
rename to src/components/naiveui/config/naiveui.ts
index ba8b3b2..6b6008c 100644
--- a/src/config/naiveui.ts
+++ b/src/components/naiveui/config/naiveui.ts
@@ -489,23 +489,6 @@ export const advanceComponents = [
       defaultValue: 'This is a tree',
     }
   },
-  {
-    label: '静态表格',
-    type: 'table',
-    dev:true,
-    options: {
-      defaultValue: 'This is a table',
-      theme:'default',
-      width:'210mm',
-      height:'297mm',
-      disabled: false,
-      bordered:true,
-      bottomBordered:false,
-      singleColumn:false,
-      singleLine:false,
-      striped:false,
-    }
-  },
   {
     label: '动态表格',
     type: 'dynamicTable',
@@ -566,5 +549,263 @@ 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: []
+        }
+      ]
+    ],
+    options: {
+      theme:'theme1',
+      width:'210mm',
+      height:'297mm',
+      cols:24,
+      xGap: 0,
+      yGap: 0,
+      collapsed: false,
+      collapsedRows: 1,
+      responsive: 'self',
+      itemResponsive: false,
+      justify: 'start',
+      align: 'top'
+    }
+  },
+  // {
+  //   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:[
+  //       [
+  //         {
+  //           "col": 1,
+  //           "row": 1,
+  //           "list": []
+  //         },
+  //         {
+  //           "col": 1,
+  //           "row": 1,
+  //           "list": []
+  //         },
+  //         {
+  //           "col": 1,
+  //           "row": 1,
+  //           "hide": false,
+  //           "columns": []
+  //         },
+  //         {
+  //           "col": 1,
+  //           "row": 1,
+  //           "hide": false,
+  //           "columns": []
+  //         }
+  //       ],
+  //       [
+  //         {
+  //           "col": 1,
+  //           "row": 1,
+  //           "list": []
+  //         },
+  //         {
+  //           "col": 1,
+  //           "row": 1,
+  //           "list": []
+  //         },
+  //         {
+  //           "col": 1,
+  //           "row": 1,
+  //           "hide": false,
+  //           "columns": []
+  //         },
+  //         {
+  //           "col": 1,
+  //           "row": 1,
+  //           "hide": false,
+  //           "columns": []
+  //         }
+  //       ],
+  //       [
+  //         {
+  //           "col": 1,
+  //           "row": 1,
+  //           "hide": false,
+  //           "columns": []
+  //         },
+  //         {
+  //           "col": 1,
+  //           "row": 1,
+  //           "hide": false,
+  //           "columns": []
+  //         },
+  //         {
+  //           "col": 1,
+  //           "row": 1,
+  //           "hide": false,
+  //           "columns": []
+  //         },
+  //         {
+  //           "col": 1,
+  //           "row": 1,
+  //           "hide": false,
+  //           "columns": []
+  //         }
+  //       ],
+  //       [
+  //         {
+  //           "col": 1,
+  //           "row": 1,
+  //           "hide": false,
+  //           "columns": []
+  //         },
+  //         {
+  //           "col": 1,
+  //           "row": 1,
+  //           "hide": false,
+  //           "columns": []
+  //         },
+  //         {
+  //           "col": 1,
+  //           "row": 1,
+  //           "hide": false,
+  //           "columns": []
+  //         },
+  //         {
+  //           "col": 1,
+  //           "row": 1,
+  //           "hide": false,
+  //           "columns": []
+  //         }
+  //       ],
+  //       [
+  //         {
+  //           "col": 1,
+  //           "row": 1,
+  //           "hide": false,
+  //           "columns": []
+  //         },
+  //         {
+  //           "col": 1,
+  //           "row": 1,
+  //           "hide": false,
+  //           "columns": []
+  //         },
+  //         {
+  //           "col": 1,
+  //           "row": 1,
+  //           "hide": false,
+  //           "columns": []
+  //         },
+  //         {
+  //           "col": 1,
+  //           "row": 1,
+  //           "hide": false,
+  //           "columns": []
+  //         }
+  //       ],
+  //       [
+  //         {
+  //           "col": 1,
+  //           "row": 1,
+  //           "hide": false,
+  //           "columns": []
+  //         },
+  //         {
+  //           "col": 1,
+  //           "row": 1,
+  //           "hide": false,
+  //           "columns": []
+  //         },
+  //         {
+  //           "col": 1,
+  //           "row": 1,
+  //           "hide": false,
+  //           "columns": []
+  //         },
+  //         {
+  //           "col": 1,
+  //           "row": 1,
+  //           "hide": false,
+  //           "columns": []
+  //         }
+  //       ],
+  //       [
+  //         {
+  //           "col": 1,
+  //           "row": 1,
+  //           "hide": false,
+  //           "columns": []
+  //         },
+  //         {
+  //           "col": 1,
+  //           "row": 1,
+  //           "hide": false,
+  //           "columns": []
+  //         },
+  //         {
+  //           "col": 1,
+  //           "row": 1,
+  //           "hide": false,
+  //           "columns": []
+  //         },
+  //         {
+  //           "col": 1,
+  //           "row": 1,
+  //           "hide": false,
+  //           "columns": []
+  //         }
+  //       ],
+  //       [
+  //         {
+  //           "col": 1,
+  //           "row": 1,
+  //           "hide": false,
+  //           "columns": []
+  //         },
+  //         {
+  //           "col": 1,
+  //           "row": 1,
+  //           "hide": false,
+  //           "columns": []
+  //         },
+  //         {
+  //           "col": 1,
+  //           "row": 1,
+  //           "hide": false,
+  //           "columns": []
+  //         },
+  //         {
+  //           "col": 1,
+  //           "row": 1,
+  //           "hide": false,
+  //           "columns": []
+  //         }
+  //       ],
+  //
+  //     ],
+  //   }
+  // },
 ]
diff --git a/src/enums/index.ts b/src/components/naiveui/enums/index.ts
similarity index 97%
rename from src/enums/index.ts
rename to src/components/naiveui/enums/index.ts
index 8db9733..c54997e 100644
--- a/src/enums/index.ts
+++ b/src/components/naiveui/enums/index.ts
@@ -25,6 +25,7 @@ export enum ComponentType {
   Cascader = 'cascader',
   Tree = 'tree',
   Table = 'table',
+  Grid = 'grid',
   DynamicTable = 'dynamicTable',
   SelectTree = 'selectTree',
   Transfer = 'transfer',
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 0fbe4d7..e0a5d23 100644
--- a/src/styles/index.less
+++ b/src/components/naiveui/styles/index.less
@@ -1,5 +1,5 @@
-@import './scrollbar.less';
-@import './table.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)
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 0000000..c3d8baa
--- /dev/null
+++ b/src/components/naiveui/styles/table.less
@@ -0,0 +1,11 @@
+.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;
+  }
+}
diff --git a/src/core/naiveui/types/NaiveWidgetTypes.d.ts b/src/components/naiveui/types/NaiveWidgetTypes.d.ts
similarity index 100%
rename from src/core/naiveui/types/NaiveWidgetTypes.d.ts
rename to src/components/naiveui/types/NaiveWidgetTypes.d.ts
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 3b9918a..c0dc5f1 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/main.ts b/src/main.ts
index 8ee809c..cc65a73 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/src/styles/table.less b/src/styles/table.less
deleted file mode 100644
index 25adddd..0000000
--- a/src/styles/table.less
+++ /dev/null
@@ -1,6 +0,0 @@
-.table-theme1{
-  border-color: #000 !important;
-  tr,td,th {
-    border-color: #000 !important;
-  }
-}
diff --git a/vite.config.ts b/vite.config.ts
index d1ab3da..b91e7ae 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -18,5 +18,10 @@ export default defineConfig({
          * @default '/'
          */
         base: '/naiveui-form-generate',
+        resolve: {
+            alias: {
+                '@/': '/src/'
+            }
+        },
     },
 )
-- 
Gitee


From 1e95f06d57d2b6318a71fddc45d8bfa9af9b9f15 Mon Sep 17 00:00:00 2001
From: lvhuaisheng <lvhuaisheng_k@163.com>
Date: Sun, 3 Jul 2022 18:01:06 +0800
Subject: [PATCH 4/9] =?UTF-8?q?1.=E5=A2=9E=E5=8A=A0=E9=9D=99=E6=80=81?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E5=8A=9F=E8=83=BD=EF=BC=88=E4=B8=8D=E7=A8=B3?=
 =?UTF-8?q?=E5=AE=9A=20=E4=BB=A3=E7=A0=81=E6=9A=82=E5=AD=98=EF=BC=89?=
 =?UTF-8?q?=EF=BC=9B2.=E9=87=8D=E6=9E=84=E4=BA=86=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E7=BB=93=E6=9E=84=EF=BC=8C=E4=BD=BF=E5=85=B6=E6=9B=B4=E6=96=B9?=
 =?UTF-8?q?=E4=BE=BF=E7=9A=84=E8=A2=AB=E5=85=B6=E5=AE=83=E9=A1=B9=E7=9B=AE?=
 =?UTF-8?q?=E5=BC=95=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                               | 2 +-
 src/components/naiveui/components/ComponentGroup.vue      | 2 +-
 src/components/naiveui/components/NaiveHeader.vue         | 2 +-
 src/components/naiveui/components/configs/Checkbox.vue    | 2 +-
 src/components/naiveui/components/configs/Color.vue       | 2 +-
 src/components/naiveui/components/configs/Grid.vue        | 2 +-
 src/components/naiveui/components/configs/Radio.vue       | 2 +-
 src/components/naiveui/components/configs/Select.vue      | 2 +-
 src/components/naiveui/components/configs/SelectTree.vue  | 2 +-
 src/components/naiveui/components/custom/table/GTable.vue | 2 +-
 src/components/naiveui/components/design/DesignConfig.vue | 2 +-
 src/components/naiveui/components/design/DesignForm.vue   | 2 +-
 .../naiveui/components/design/DesignFormItem.vue          | 2 +-
 .../naiveui/components/generate/GenerateFormItem.vue      | 2 +-
 vite.config.ts                                            | 8 +++-----
 15 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 10b3b36..d12ea80 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import FormDesign from '@/components/naiveui/FormDesign.vue';
+import FormDesign from './components/naiveui/FormDesign.vue';
 import { BuiltInGlobalTheme } from 'naive-ui/es/themes/interface';
 /* 阻止火狐浏览器在  draggable组件时拖动 打开新窗口 */
 document.body.ondrop = function(event) {
diff --git a/src/components/naiveui/components/ComponentGroup.vue b/src/components/naiveui/components/ComponentGroup.vue
index 2c40feb..6678e20 100644
--- a/src/components/naiveui/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 '@/components/SvgIcon.vue'
+import SvgIcon from '../../../components/SvgIcon.vue'
 
 export default defineComponent({
   name: 'ComponentGroup',
diff --git a/src/components/naiveui/components/NaiveHeader.vue b/src/components/naiveui/components/NaiveHeader.vue
index d63087e..b464a1b 100644
--- a/src/components/naiveui/components/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/Checkbox.vue b/src/components/naiveui/components/configs/Checkbox.vue
index 3cfef80..b2c4610 100644
--- a/src/components/naiveui/components/configs/Checkbox.vue
+++ b/src/components/naiveui/components/configs/Checkbox.vue
@@ -66,7 +66,7 @@
 <script lang="ts">
 import {defineComponent, ref, watch} from 'vue'
 import Draggable from 'vuedraggable'
-import SvgIcon from "@/components/SvgIcon.vue";
+import SvgIcon from '../../../../components/SvgIcon.vue'
 export default defineComponent({
   components:{
     Draggable,
diff --git a/src/components/naiveui/components/configs/Color.vue b/src/components/naiveui/components/configs/Color.vue
index a9bd542..3d73d4e 100644
--- a/src/components/naiveui/components/configs/Color.vue
+++ b/src/components/naiveui/components/configs/Color.vue
@@ -75,7 +75,7 @@
 </template>
 <script lang="ts">
 import {defineComponent, reactive, ref, toRefs, watch} from 'vue'
-import SvgIcon from '@/components/SvgIcon.vue'
+import SvgIcon from '../../../../components/SvgIcon.vue'
 export default defineComponent({
   name: 'InputWidget',
   components:{
diff --git a/src/components/naiveui/components/configs/Grid.vue b/src/components/naiveui/components/configs/Grid.vue
index 63a51d5..d18b41f 100644
--- a/src/components/naiveui/components/configs/Grid.vue
+++ b/src/components/naiveui/components/configs/Grid.vue
@@ -36,7 +36,7 @@
 </template>
 <script lang="ts">
 import {defineComponent, ref, watch} from 'vue'
-import SvgIcon from '@/components/SvgIcon.vue'
+import SvgIcon from '../../../../components/SvgIcon.vue'
 export default defineComponent({
   name: 'GridWidget',
   components:{
diff --git a/src/components/naiveui/components/configs/Radio.vue b/src/components/naiveui/components/configs/Radio.vue
index a53efd4..cad2830 100644
--- a/src/components/naiveui/components/configs/Radio.vue
+++ b/src/components/naiveui/components/configs/Radio.vue
@@ -66,7 +66,7 @@
 <script lang="ts">
 import {defineComponent, ref, watch} from 'vue'
 import Draggable from 'vuedraggable'
-import SvgIcon from "@/components/SvgIcon.vue";
+import SvgIcon from '../../../../components/SvgIcon.vue'
 export default defineComponent({
   components:{
     Draggable,
diff --git a/src/components/naiveui/components/configs/Select.vue b/src/components/naiveui/components/configs/Select.vue
index 99cec49..460f4e6 100644
--- a/src/components/naiveui/components/configs/Select.vue
+++ b/src/components/naiveui/components/configs/Select.vue
@@ -87,7 +87,7 @@
 <script lang="ts">
 import {defineComponent, ref, watch} from 'vue'
 import Draggable from 'vuedraggable'
-import SvgIcon from "@/components/SvgIcon.vue";
+import SvgIcon from '../../../../components/SvgIcon.vue'
 export default defineComponent({
   components:{
     Draggable,
diff --git a/src/components/naiveui/components/configs/SelectTree.vue b/src/components/naiveui/components/configs/SelectTree.vue
index 633c669..d3332e3 100644
--- a/src/components/naiveui/components/configs/SelectTree.vue
+++ b/src/components/naiveui/components/configs/SelectTree.vue
@@ -114,7 +114,7 @@
 <script lang="ts">
 import {defineComponent, h, reactive, ref, watch,toRefs} from 'vue'
 import Draggable from 'vuedraggable'
-import SvgIcon from "@/components/SvgIcon.vue";
+import SvgIcon from '../../../../components/SvgIcon.vue'
 import {RowData} from "../../types/NaiveWidgetTypes";
 import {DataTableColumns, FormInst, NButton, NSpace} from "naive-ui";
 import {v4} from "uuid";
diff --git a/src/components/naiveui/components/custom/table/GTable.vue b/src/components/naiveui/components/custom/table/GTable.vue
index b62d979..84ddc49 100644
--- a/src/components/naiveui/components/custom/table/GTable.vue
+++ b/src/components/naiveui/components/custom/table/GTable.vue
@@ -88,7 +88,7 @@ import {computed, defineComponent, PropType, reactive, ref, toRefs, watch} from
 import {WidgetForm} from "../../../config/naiveui";
 import Draggable from 'vuedraggable'
 import { merge } from 'lodash'
-import SvgIcon from '@/components/SvgIcon.vue'
+import SvgIcon from '../../../../../components/SvgIcon.vue'
 import {naiveui} from "../../../config";
 import GenerateFormItem from '../../generate/GenerateFormItem.vue'
 import {v4} from "uuid";
diff --git a/src/components/naiveui/components/design/DesignConfig.vue b/src/components/naiveui/components/design/DesignConfig.vue
index 913e7af..99a99d6 100644
--- a/src/components/naiveui/components/design/DesignConfig.vue
+++ b/src/components/naiveui/components/design/DesignConfig.vue
@@ -74,7 +74,7 @@ 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 SvgIcon from '@/components/SvgIcon.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'
diff --git a/src/components/naiveui/components/design/DesignForm.vue b/src/components/naiveui/components/design/DesignForm.vue
index ee49ece..2cff884 100644
--- a/src/components/naiveui/components/design/DesignForm.vue
+++ b/src/components/naiveui/components/design/DesignForm.vue
@@ -109,7 +109,7 @@ import { defineComponent, nextTick, PropType } from 'vue'
 import Draggable from 'vuedraggable'
 import { v4 } from 'uuid'
 import DesignFormItem from './DesignFormItem.vue'
-import SvgIcon from '@/components/SvgIcon.vue'
+import SvgIcon from '../../../../components/SvgIcon.vue'
 import { WidgetForm } from '../../config/naiveui'
 import GTable from '../custom/table/GTable.vue'
 const handleListInsert = (key: string, list: any[], obj: any) => {
diff --git a/src/components/naiveui/components/design/DesignFormItem.vue b/src/components/naiveui/components/design/DesignFormItem.vue
index 193692e..29fcd8d 100644
--- a/src/components/naiveui/components/design/DesignFormItem.vue
+++ b/src/components/naiveui/components/design/DesignFormItem.vue
@@ -287,7 +287,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue'
-import SvgIcon from '@/components/SvgIcon.vue'
+import SvgIcon from '../../../../components/SvgIcon.vue'
 import RichTextEditor from '../custom/RichTextEditor.vue'
 import { WidgetForm } from '../../config/naiveui'
 
diff --git a/src/components/naiveui/components/generate/GenerateFormItem.vue b/src/components/naiveui/components/generate/GenerateFormItem.vue
index fc2d117..2e111b3 100644
--- a/src/components/naiveui/components/generate/GenerateFormItem.vue
+++ b/src/components/naiveui/components/generate/GenerateFormItem.vue
@@ -276,7 +276,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue'
-import SvgIcon from '@/components/SvgIcon.vue'
+import SvgIcon from '../../../../components/SvgIcon.vue'
 import RichTextEditor from '../custom/RichTextEditor.vue'
 import { WidgetForm } from '../../config/naiveui'
 
diff --git a/vite.config.ts b/vite.config.ts
index b91e7ae..30329be 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: [
@@ -18,10 +21,5 @@ export default defineConfig({
          * @default '/'
          */
         base: '/naiveui-form-generate',
-        resolve: {
-            alias: {
-                '@/': '/src/'
-            }
-        },
     },
 )
-- 
Gitee


From d2ff1f051ae6be80cc5c37d2850a53a107d7e638 Mon Sep 17 00:00:00 2001
From: lvhuaisheng <lvhuaisheng_k@163.com>
Date: Tue, 5 Jul 2022 11:50:21 +0800
Subject: [PATCH 5/9] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E3=80=90=E5=88=86?=
 =?UTF-8?q?=E5=89=B2=E7=BA=BF=E3=80=91=EF=BC=8C=E4=BC=98=E5=8C=96=E3=80=90?=
 =?UTF-8?q?=E6=96=87=E5=AD=97=E3=80=91=E5=A4=A7=E5=B0=8F=E3=80=81=E7=B2=97?=
 =?UTF-8?q?=E7=BB=86=E3=80=81=E4=BD=8D=E7=BD=AE=E5=8F=AF=E6=8E=A7=EF=BC=9B?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=AE=AB=E6=A0=BC=E5=B8=83=E5=B1=80=E5=86=85?=
 =?UTF-8?q?=E7=9A=84=E7=BB=84=E4=BB=B6=E6=97=A0=E6=B3=95=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98=EF=BC=8C=E4=BC=98=E5=8C=96=E9=9D=99?=
 =?UTF-8?q?=E6=80=81=E8=A1=A8=E6=A0=BC=E7=BB=84=E4=BB=B6=E7=AD=89=E7=AD=89?=
 =?UTF-8?q?=E4=BC=97=E5=A4=9A=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     |  24 +-
 src/components/naiveui/FormDesign.vue         |   4 +-
 .../naiveui/components/NaiveFormConfig.vue    |  12 +
 .../naiveui/components/configs/Alert.vue      |  78 ++++
 .../naiveui/components/configs/Checkbox.vue   |   7 +
 .../naiveui/components/configs/Color.vue      |   7 +
 .../naiveui/components/configs/Date.vue       |  28 ++
 .../naiveui/components/configs/Divider.vue    |  82 +++++
 .../naiveui/components/configs/Grid.vue       |   1 +
 .../naiveui/components/configs/Input.vue      |   4 +
 .../naiveui/components/configs/Number.vue     |   7 +
 .../naiveui/components/configs/Radio.vue      |   7 +
 .../naiveui/components/configs/Rate.vue       |   8 +-
 .../components/configs/RichtextEditor.vue     |   7 +
 .../naiveui/components/configs/Select.vue     |   7 +
 .../naiveui/components/configs/SelectTree.vue |   7 +
 .../naiveui/components/configs/Slider.vue     |   7 +
 .../naiveui/components/configs/Switch.vue     |   7 +
 .../naiveui/components/configs/Table.vue      |  18 +
 .../naiveui/components/configs/Text.vue       |  78 ++++
 .../naiveui/components/configs/Time.vue       |   8 +-
 .../naiveui/components/configs/Transfer.vue   |   7 +
 .../naiveui/components/configs/Upload.vue     |   8 +-
 .../components/custom/table/GTable.vue        |  56 +--
 .../components/design/DesignConfig.vue        | 202 +----------
 .../naiveui/components/design/DesignForm.js   |   0
 .../naiveui/components/design/DesignForm.vue  | 324 +++++++++++++++--
 .../components/design/DesignFormItem.vue      |  13 +-
 .../components/generate/GenerateForm.vue      |  30 ++
 .../components/generate/GenerateFormItem.vue  |  16 +-
 src/components/naiveui/config/naiveui.ts      | 334 ++++++------------
 src/components/naiveui/enums/index.ts         |   3 +
 src/components/naiveui/styles/index.less      |   3 +-
 src/components/naiveui/styles/table.less      |  11 +
 src/icons/svg/divider.svg                     |   1 +
 src/icons/svg/table.svg                       |   1 +
 36 files changed, 923 insertions(+), 494 deletions(-)
 create mode 100644 src/components/naiveui/components/configs/Alert.vue
 create mode 100644 src/components/naiveui/components/configs/Divider.vue
 create mode 100644 src/components/naiveui/components/configs/Text.vue
 create mode 100644 src/components/naiveui/components/design/DesignForm.js
 create mode 100644 src/icons/svg/divider.svg
 create mode 100644 src/icons/svg/table.svg

diff --git a/README.md b/README.md
index a487922..29b06c8 100644
--- a/README.md
+++ b/README.md
@@ -17,6 +17,7 @@
 - develop：开发分支，最新代码，但不具有稳定性
 - master：主分支，相对稳定代码（目前develop开发阶段，此分支可暂时忽略）
 ### 功能/计划
+> 基础组件
 - 🍉 单行/多行/密码输入组件 √
 - 🍉 数字组件 √
 - 🍉 单选 √
@@ -26,18 +27,29 @@
 - 🍉 评分 √
 - 🍉 开关 √
 - 🍉 滑块（横向、竖向）√
-- 🍉 富文本编辑器 √
-- 📦 naiveui的新版栅格布局 √
-- 🤹 普通文本 √
-- 🤹 Alert组件 √
-- 🍏 颜色选择器  √
+
+- 🍉 颜色选择器  √
+
+> 高级组件
 - 🍏 树形选择  √
 - 🍏 文件上传 √
 - 🍏 穿梭框 √
 - 🍏 级联选择 > 进行中
 - 🍏 树形组件 > 进行中
-- 🍏 静态表格（可启用原生样式，实现线上、线下合同表单的一比一样式） > 进行中
+- 🍏 富文本编辑器 √
 - 🍏 动态表格（主要用作子表的使用，支持弹窗/抽屉/行内编辑等多种样式） > 进行中
+
+> 布局组件
+- 📦 naiveui的新版栅格布局 √
+- 📦  静态表格（可启用原生样式，实现线上、线下合同表单的一比一样式）√
+- 📦  标签页 > 筹划中
+
+> 其它组件
+- 🤹 普通文本 √
+- 🤹 Alert组件 √
+- 🤹 Divider分割线 √
+
+> 其它优化
 - 🚀 单个组件化封装（typescript）
 - 🚀 细节优化
 - 更多......
diff --git a/src/components/naiveui/FormDesign.vue b/src/components/naiveui/FormDesign.vue
index 5859da6..2596211 100644
--- a/src/components/naiveui/FormDesign.vue
+++ b/src/components/naiveui/FormDesign.vue
@@ -87,7 +87,7 @@
       >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">
+    <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>-->
@@ -242,7 +242,7 @@ export default defineComponent({
     },
     otherFields: {
       type: Array as PropType<Array<string>>,
-      default: () => ['text','alert']
+      default: () => ['text','alert','divider']
     }
   },
   setup() {
diff --git a/src/components/naiveui/components/NaiveFormConfig.vue b/src/components/naiveui/components/NaiveFormConfig.vue
index c44e0b3..71789d6 100644
--- a/src/components/naiveui/components/NaiveFormConfig.vue
+++ b/src/components/naiveui/components/NaiveFormConfig.vue
@@ -59,6 +59,18 @@
           </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>
diff --git a/src/components/naiveui/components/configs/Alert.vue b/src/components/naiveui/components/configs/Alert.vue
new file mode 100644
index 0000000..10894e4
--- /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/Checkbox.vue b/src/components/naiveui/components/configs/Checkbox.vue
index b2c4610..0e8be57 100644
--- a/src/components/naiveui/components/configs/Checkbox.vue
+++ b/src/components/naiveui/components/configs/Checkbox.vue
@@ -51,6 +51,13 @@
       </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"
diff --git a/src/components/naiveui/components/configs/Color.vue b/src/components/naiveui/components/configs/Color.vue
index 3d73d4e..8f78d9a 100644
--- a/src/components/naiveui/components/configs/Color.vue
+++ b/src/components/naiveui/components/configs/Color.vue
@@ -5,6 +5,13 @@
                     :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>
       可用模式
diff --git a/src/components/naiveui/components/configs/Date.vue b/src/components/naiveui/components/configs/Date.vue
index 16dbb10..51718ba 100644
--- a/src/components/naiveui/components/configs/Date.vue
+++ b/src/components/naiveui/components/configs/Date.vue
@@ -7,6 +7,14 @@
         :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>
@@ -48,8 +56,28 @@ export default defineComponent({
         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
     }
   }
 })
diff --git a/src/components/naiveui/components/configs/Divider.vue b/src/components/naiveui/components/configs/Divider.vue
new file mode 100644
index 0000000..b62034f
--- /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/Grid.vue b/src/components/naiveui/components/configs/Grid.vue
index d18b41f..318826b 100644
--- a/src/components/naiveui/components/configs/Grid.vue
+++ b/src/components/naiveui/components/configs/Grid.vue
@@ -8,6 +8,7 @@
   <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 }">
diff --git a/src/components/naiveui/components/configs/Input.vue b/src/components/naiveui/components/configs/Input.vue
index 8681a05..e02dd51 100644
--- a/src/components/naiveui/components/configs/Input.vue
+++ b/src/components/naiveui/components/configs/Input.vue
@@ -8,6 +8,10 @@
   </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"
     >显示字数
diff --git a/src/components/naiveui/components/configs/Number.vue b/src/components/naiveui/components/configs/Number.vue
index e00de13..2a6a002 100644
--- a/src/components/naiveui/components/configs/Number.vue
+++ b/src/components/naiveui/components/configs/Number.vue
@@ -14,6 +14,13 @@
   <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"
diff --git a/src/components/naiveui/components/configs/Radio.vue b/src/components/naiveui/components/configs/Radio.vue
index cad2830..4bab301 100644
--- a/src/components/naiveui/components/configs/Radio.vue
+++ b/src/components/naiveui/components/configs/Radio.vue
@@ -51,6 +51,13 @@
       </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"
diff --git a/src/components/naiveui/components/configs/Rate.vue b/src/components/naiveui/components/configs/Rate.vue
index 32c310a..00dfd7c 100644
--- a/src/components/naiveui/components/configs/Rate.vue
+++ b/src/components/naiveui/components/configs/Rate.vue
@@ -24,7 +24,13 @@
       </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"
diff --git a/src/components/naiveui/components/configs/RichtextEditor.vue b/src/components/naiveui/components/configs/RichtextEditor.vue
index 5fc5193..3dbea81 100644
--- a/src/components/naiveui/components/configs/RichtextEditor.vue
+++ b/src/components/naiveui/components/configs/RichtextEditor.vue
@@ -2,6 +2,13 @@
   <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"
diff --git a/src/components/naiveui/components/configs/Select.vue b/src/components/naiveui/components/configs/Select.vue
index 460f4e6..c0d25ee 100644
--- a/src/components/naiveui/components/configs/Select.vue
+++ b/src/components/naiveui/components/configs/Select.vue
@@ -68,6 +68,13 @@
       </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"
diff --git a/src/components/naiveui/components/configs/SelectTree.vue b/src/components/naiveui/components/configs/SelectTree.vue
index d3332e3..4336c4e 100644
--- a/src/components/naiveui/components/configs/SelectTree.vue
+++ b/src/components/naiveui/components/configs/SelectTree.vue
@@ -95,6 +95,13 @@
       </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"
diff --git a/src/components/naiveui/components/configs/Slider.vue b/src/components/naiveui/components/configs/Slider.vue
index c9637ed..de9b2b7 100644
--- a/src/components/naiveui/components/configs/Slider.vue
+++ b/src/components/naiveui/components/configs/Slider.vue
@@ -39,6 +39,13 @@
       </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
diff --git a/src/components/naiveui/components/configs/Switch.vue b/src/components/naiveui/components/configs/Switch.vue
index a3b0509..4c90a51 100644
--- a/src/components/naiveui/components/configs/Switch.vue
+++ b/src/components/naiveui/components/configs/Switch.vue
@@ -9,6 +9,13 @@
   <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"
diff --git a/src/components/naiveui/components/configs/Table.vue b/src/components/naiveui/components/configs/Table.vue
index ba7e408..6ee5054 100644
--- a/src/components/naiveui/components/configs/Table.vue
+++ b/src/components/naiveui/components/configs/Table.vue
@@ -9,6 +9,21 @@
     </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>
@@ -46,6 +61,9 @@
     >禁用
     </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'
diff --git a/src/components/naiveui/components/configs/Text.vue b/src/components/naiveui/components/configs/Text.vue
new file mode 100644
index 0000000..2cb7bae
--- /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
index 8ab4ff9..1c4ac69 100644
--- a/src/components/naiveui/components/configs/Time.vue
+++ b/src/components/naiveui/components/configs/Time.vue
@@ -13,7 +13,13 @@
   <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"
diff --git a/src/components/naiveui/components/configs/Transfer.vue b/src/components/naiveui/components/configs/Transfer.vue
index eec48b7..89f9545 100644
--- a/src/components/naiveui/components/configs/Transfer.vue
+++ b/src/components/naiveui/components/configs/Transfer.vue
@@ -49,6 +49,13 @@
       </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"
diff --git a/src/components/naiveui/components/configs/Upload.vue b/src/components/naiveui/components/configs/Upload.vue
index 2832643..af14f85 100644
--- a/src/components/naiveui/components/configs/Upload.vue
+++ b/src/components/naiveui/components/configs/Upload.vue
@@ -51,7 +51,13 @@
       <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"
diff --git a/src/components/naiveui/components/custom/table/GTable.vue b/src/components/naiveui/components/custom/table/GTable.vue
index 84ddc49..3e2273c 100644
--- a/src/components/naiveui/components/custom/table/GTable.vue
+++ b/src/components/naiveui/components/custom/table/GTable.vue
@@ -1,18 +1,18 @@
 
 <template>
-  <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)"
+  <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 element.columns" :key="colIndex">
+    <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
@@ -24,7 +24,7 @@
             :group="{ name: 'people' }"
             :no-transition-on-drag="true"
             :list="td.list"
-            @add="handleTdMoveAdd($event, element, colIndex,tdIndex)"
+            @add="handleTdMoveAdd($event, data, colIndex,tdIndex)"
         >
           <template #item="{ element, index }">
             <transition-group name="fade" tag="div">
@@ -43,7 +43,7 @@
         </Draggable>
         <div
             class="widget-view-action widget-col-action"
-            v-if="widgetFormSelect?.key === element.key"
+            v-if="widgetFormSelect?.key === data.key"
         >
           <SvgIcon
               iconClass="delete" class-name="delete"
@@ -53,7 +53,7 @@
 
         <div
             class="widget-view-drag widget-col-drag"
-            v-if="widgetFormSelect?.key === element.key"
+            v-if="widgetFormSelect?.key === data.key"
         >
           <SvgIcon iconClass="move" className="drag-widget" />
         </div>
@@ -93,7 +93,7 @@ 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,columns:[]};
+let td = {col:1,row:1,hide:false,list:[]};
 let tr = [td,td];
 export default defineComponent({
   name: 'GTable',
@@ -112,11 +112,15 @@ export default defineComponent({
       type: Object,
       required: true
     },
+    elementIndex: {
+      type: Number,
+      required: true
+    },
     widgetFormSelect: {
       type: Object
     },
   },
-  emits: ['update:widgetForm', 'update:widgetFormSelect'],
+  emits: ['update:widgetForm', 'update:widgetFormSelect', 'update:element'],
   setup(props, context){
     const data = ref<any>(props.element)
     const widgetForm = ref<any>(props.widgetForm)
@@ -265,17 +269,19 @@ export default defineComponent({
         tdIndex: string | number | symbol
     ) => {
       const { newIndex, oldIndex, item } = event
-      const list = JSON.parse(JSON.stringify(props.widgetForm.list[index]))
-
-      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
-      }
+      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,
diff --git a/src/components/naiveui/components/design/DesignConfig.vue b/src/components/naiveui/components/design/DesignConfig.vue
index 99a99d6..0c43a94 100644
--- a/src/components/naiveui/components/design/DesignConfig.vue
+++ b/src/components/naiveui/components/design/DesignConfig.vue
@@ -5,7 +5,7 @@
       <n-input v-model:value="data.model" />
     </n-form-item>
 
-    <n-form-item label="标题" v-if="data.type !== 'grid'&&!data.hideLabel">
+    <n-form-item label="标题" v-if="hasKey('label')&&data.type !== 'grid'&&!data.hideLabel">
       <n-input v-model:value="data.label" />
     </n-form-item>
 
@@ -55,7 +55,7 @@
 </template>
 
 <script lang="ts">
-import {h, defineComponent, reactive, ref, toRefs, watch, onMounted} from 'vue'
+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'
@@ -74,6 +74,9 @@ 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 SvgIcon from '../../../../components/SvgIcon.vue'
 import { NSpace,NButton,NInput, useMessage,FormInst } from 'naive-ui'
 import { v4 } from 'uuid'
@@ -102,6 +105,9 @@ export default defineComponent({
     Transfer,
     Grid,
     Table,
+    Alert,
+    Text,
+    Divider,
   },
   props: {
     select: {
@@ -120,54 +126,7 @@ export default defineComponent({
     //   item.mComponent = () => import(`@/views/workplace/${item.path}.vue`)
     // })
     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 ={
-      parent:null,
-      key: '',
-      label:'',
-      value:'',
-      children:[]
-    }
-    const addTreeData = ()=>{
-      state.treeData = {
-        parent:null,
-        key: v4().replaceAll('-', ''),
-        label:'',
-        value:'',
-        children:[]
-      }
-      state.showTreeDataDriwer=true
-    }
+
     const state = reactive({
       verifyOptions:[
         {label:'字符串',value:'string'},
@@ -200,157 +159,16 @@ export default defineComponent({
         {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,
-      checkComponent
+      checkComponent,
     }
   }
 })
diff --git a/src/components/naiveui/components/design/DesignForm.js b/src/components/naiveui/components/design/DesignForm.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/naiveui/components/design/DesignForm.vue b/src/components/naiveui/components/design/DesignForm.vue
index 2cff884..744702d 100644
--- a/src/components/naiveui/components/design/DesignForm.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"
@@ -83,7 +84,90 @@
               </n-grid>
             </template>
             <template v-else-if="element.type === 'table'">
-              <g-table :element="element" :widgetForm="widgetForm" :widgetFormSelect="widgetFormSelect"/>
+<!--              <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>
               <DesignFormItem
@@ -105,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 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 => {
@@ -119,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)
@@ -128,6 +220,7 @@ const handleListInsert = (key: string, list: any[], obj: any) => {
       newList.push(item)
     }
   })
+  console.log('newList=',newList)
   return newList
 }
 
@@ -135,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)
@@ -146,7 +246,8 @@ 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: {
@@ -305,27 +406,164 @@ 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
+        event: any,
+        row: any,
+        index: string | number | symbol,
+        tdIndex: string | number | symbol
     ) => {
-      console.log('row.columns[index]=',JSON.stringify(row.columns[index]))
-      console.log('row.columns[index]222=',JSON.stringify(row.columns[index][tdIndex]))
-
       const { newIndex, oldIndex, item } = event
-      const list = JSON.parse(JSON.stringify(props.widgetForm.list[index]))
-
+      // 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])
+        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,
@@ -334,31 +572,73 @@ export default defineComponent({
       }
 
       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].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 }))
+                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,
       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/components/naiveui/components/design/DesignFormItem.vue b/src/components/naiveui/components/design/DesignFormItem.vue
index 29fcd8d..64bea60 100644
--- a/src/components/naiveui/components/design/DesignFormItem.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"
diff --git a/src/components/naiveui/components/generate/GenerateForm.vue b/src/components/naiveui/components/generate/GenerateForm.vue
index b1216a7..a29880e 100644
--- a/src/components/naiveui/components/generate/GenerateForm.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'">
@@ -35,6 +36,35 @@
             </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="' 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"
diff --git a/src/components/naiveui/components/generate/GenerateFormItem.vue b/src/components/naiveui/components/generate/GenerateFormItem.vue
index 2e111b3..7d6ee6b 100644
--- a/src/components/naiveui/components/generate/GenerateFormItem.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"
diff --git a/src/components/naiveui/config/naiveui.ts b/src/components/naiveui/config/naiveui.ts
index 6b6008c..49af0a6 100644
--- a/src/components/naiveui/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,6 +90,7 @@ export const basicComponents = [
     label: '数字输入',
     type: 'number',
     options: {
+      showLabel: true,
       width: '',
       defaultValue: 0,
       min: 0,
@@ -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: '请选择',
@@ -362,6 +373,7 @@ export const advanceComponents = [
     label: '上传',
     type: 'upload',
     options: {
+      showLabel: true,
       defaultValue: [],
       defaultUpload:true,
       directory:false,
@@ -387,6 +399,7 @@ export const advanceComponents = [
     label: '富文本编辑器',
     type: 'richtext-editor',
     options: {
+      showLabel: true,
       defaultValue: '',
       width: '',
       disabled: false,
@@ -397,6 +410,7 @@ export const advanceComponents = [
     label: '穿梭框',
     type: 'transfer',
     options: {
+      showLabel: true,
       defaultValue: '',
       width: '',
       disabled: false,
@@ -426,6 +440,7 @@ export const advanceComponents = [
     type: 'cascader',
     dev:true,
     options: {
+      showLabel: true,
       defaultValue: [],
       width: '200px',
       placeholder: '',
@@ -486,6 +501,7 @@ export const advanceComponents = [
     type: 'tree',
     dev:true,
     options: {
+      showLabel: true,
       defaultValue: 'This is a tree',
     }
   },
@@ -494,18 +510,39 @@ export const advanceComponents = [
     type: 'dynamicTable',
     dev:true,
     options: {
+      showLabel: true,
       defaultValue: 'This is a dynamicTable',
     }
   },
 ]
 export const otherComponents = [
   {
-    label: '文字',
     type: 'text',
+    label:'文字',
+    hideLabel:true,
     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:'分割线',
+    hideLabel:true,
+    options: {
+      showLabel: false,
+      text:'分割线',
+      dashed:false,
+      titlePlacement:'center',
+      vertical:false,
     }
   },
   {
@@ -513,6 +550,7 @@ export const otherComponents = [
     hideLabel:true,
     type: 'alert',
     options: {
+      showLabel: false,
       title: 'This is a alert',
       content: 'This is a alert',
       type: 'default',
@@ -555,33 +593,64 @@ export const layoutComponents = [
     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: []},
+        {col:1, row:1, hide:false, list: []},
+        {col:1, row:1, hide:false, list: []},
+      ],
     ],
     options: {
       theme:'theme1',
       width:'210mm',
       height:'297mm',
-      cols:24,
-      xGap: 0,
-      yGap: 0,
-      collapsed: false,
-      collapsedRows: 1,
-      responsive: 'self',
-      itemResponsive: false,
-      justify: 'start',
-      align: 'top'
+      disabled: false,
+      bordered:true,
+      bottomBordered:false,
+      singleColumn:false,
+      singleLine:false,
+      striped:true,
     }
   },
   // {
@@ -600,212 +669,7 @@ export const layoutComponents = [
   //     singleLine:false,
   //     striped:false,
   //     layoutArray:[
-  //       [
-  //         {
-  //           "col": 1,
-  //           "row": 1,
-  //           "list": []
-  //         },
-  //         {
-  //           "col": 1,
-  //           "row": 1,
-  //           "list": []
-  //         },
-  //         {
-  //           "col": 1,
-  //           "row": 1,
-  //           "hide": false,
-  //           "columns": []
-  //         },
-  //         {
-  //           "col": 1,
-  //           "row": 1,
-  //           "hide": false,
-  //           "columns": []
-  //         }
-  //       ],
-  //       [
-  //         {
-  //           "col": 1,
-  //           "row": 1,
-  //           "list": []
-  //         },
-  //         {
-  //           "col": 1,
-  //           "row": 1,
-  //           "list": []
-  //         },
-  //         {
-  //           "col": 1,
-  //           "row": 1,
-  //           "hide": false,
-  //           "columns": []
-  //         },
-  //         {
-  //           "col": 1,
-  //           "row": 1,
-  //           "hide": false,
-  //           "columns": []
-  //         }
-  //       ],
-  //       [
-  //         {
-  //           "col": 1,
-  //           "row": 1,
-  //           "hide": false,
-  //           "columns": []
-  //         },
-  //         {
-  //           "col": 1,
-  //           "row": 1,
-  //           "hide": false,
-  //           "columns": []
-  //         },
-  //         {
-  //           "col": 1,
-  //           "row": 1,
-  //           "hide": false,
-  //           "columns": []
-  //         },
-  //         {
-  //           "col": 1,
-  //           "row": 1,
-  //           "hide": false,
-  //           "columns": []
-  //         }
-  //       ],
-  //       [
-  //         {
-  //           "col": 1,
-  //           "row": 1,
-  //           "hide": false,
-  //           "columns": []
-  //         },
-  //         {
-  //           "col": 1,
-  //           "row": 1,
-  //           "hide": false,
-  //           "columns": []
-  //         },
-  //         {
-  //           "col": 1,
-  //           "row": 1,
-  //           "hide": false,
-  //           "columns": []
-  //         },
-  //         {
-  //           "col": 1,
-  //           "row": 1,
-  //           "hide": false,
-  //           "columns": []
-  //         }
-  //       ],
-  //       [
-  //         {
-  //           "col": 1,
-  //           "row": 1,
-  //           "hide": false,
-  //           "columns": []
-  //         },
-  //         {
-  //           "col": 1,
-  //           "row": 1,
-  //           "hide": false,
-  //           "columns": []
-  //         },
-  //         {
-  //           "col": 1,
-  //           "row": 1,
-  //           "hide": false,
-  //           "columns": []
-  //         },
-  //         {
-  //           "col": 1,
-  //           "row": 1,
-  //           "hide": false,
-  //           "columns": []
-  //         }
-  //       ],
-  //       [
-  //         {
-  //           "col": 1,
-  //           "row": 1,
-  //           "hide": false,
-  //           "columns": []
-  //         },
-  //         {
-  //           "col": 1,
-  //           "row": 1,
-  //           "hide": false,
-  //           "columns": []
-  //         },
-  //         {
-  //           "col": 1,
-  //           "row": 1,
-  //           "hide": false,
-  //           "columns": []
-  //         },
-  //         {
-  //           "col": 1,
-  //           "row": 1,
-  //           "hide": false,
-  //           "columns": []
-  //         }
-  //       ],
-  //       [
-  //         {
-  //           "col": 1,
-  //           "row": 1,
-  //           "hide": false,
-  //           "columns": []
-  //         },
-  //         {
-  //           "col": 1,
-  //           "row": 1,
-  //           "hide": false,
-  //           "columns": []
-  //         },
-  //         {
-  //           "col": 1,
-  //           "row": 1,
-  //           "hide": false,
-  //           "columns": []
-  //         },
-  //         {
-  //           "col": 1,
-  //           "row": 1,
-  //           "hide": false,
-  //           "columns": []
-  //         }
-  //       ],
-  //       [
-  //         {
-  //           "col": 1,
-  //           "row": 1,
-  //           "hide": false,
-  //           "columns": []
-  //         },
-  //         {
-  //           "col": 1,
-  //           "row": 1,
-  //           "hide": false,
-  //           "columns": []
-  //         },
-  //         {
-  //           "col": 1,
-  //           "row": 1,
-  //           "hide": false,
-  //           "columns": []
-  //         },
-  //         {
-  //           "col": 1,
-  //           "row": 1,
-  //           "hide": false,
-  //           "columns": []
-  //         }
-  //       ],
-  //
-  //     ],
+
   //   }
   // },
 ]
diff --git a/src/components/naiveui/enums/index.ts b/src/components/naiveui/enums/index.ts
index c54997e..84385b4 100644
--- a/src/components/naiveui/enums/index.ts
+++ b/src/components/naiveui/enums/index.ts
@@ -29,6 +29,9 @@ export enum ComponentType {
   DynamicTable = 'dynamicTable',
   SelectTree = 'selectTree',
   Transfer = 'transfer',
+  Alert = 'alert',
+  Text = 'text',
+  Divider = 'divider',
 }
 
 export function checkComponent(test: any): test is ComponentType {
diff --git a/src/components/naiveui/styles/index.less b/src/components/naiveui/styles/index.less
index e0a5d23..d2674dc 100644
--- a/src/components/naiveui/styles/index.less
+++ b/src/components/naiveui/styles/index.less
@@ -187,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/components/naiveui/styles/table.less b/src/components/naiveui/styles/table.less
index c3d8baa..ec6408e 100644
--- a/src/components/naiveui/styles/table.less
+++ b/src/components/naiveui/styles/table.less
@@ -7,5 +7,16 @@
     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/icons/svg/divider.svg b/src/icons/svg/divider.svg
new file mode 100644
index 0000000..145708e
--- /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/table.svg b/src/icons/svg/table.svg
new file mode 100644
index 0000000..99a7c46
--- /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>
-- 
Gitee


From a4c46611d7b24f7a229e5703fa6d6e27458344be Mon Sep 17 00:00:00 2001
From: lvhuaisheng <lvhuaisheng_k@163.com>
Date: Tue, 5 Jul 2022 11:58:43 +0800
Subject: [PATCH 6/9] update README.md

---
 README.md | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 29b06c8..d61de66 100644
--- a/README.md
+++ b/README.md
@@ -11,11 +11,15 @@
 
 ### 简介
 
-[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提交老是被墙，代码也许不是最新的
+
 ### 功能/计划
 > 基础组件
 - 🍉 单行/多行/密码输入组件 √
@@ -60,7 +64,6 @@
 ### 文档
 - 待编写
 
-
 ### 构建
 
 ```shell
-- 
Gitee


From b73ad12573f76e72227c10e4b79bcf55820f95ba Mon Sep 17 00:00:00 2001
From: lvhuaisheng <lvhuaisheng_k@163.com>
Date: Wed, 6 Jul 2022 17:13:38 +0800
Subject: [PATCH 7/9] =?UTF-8?q?feat:=E5=A2=9E=E5=8A=A0=E7=BA=A7=E8=81=94?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E3=80=81=E5=8A=A8=E6=80=81=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E3=80=81=E6=A0=91=E5=9E=8B=E3=80=81=E6=8C=89=E9=92=AE=E7=AD=89?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=9B=E4=BC=98=E5=8C=96=E4=B8=8B=E6=8B=89?=
 =?UTF-8?q?=E6=A0=91=E9=80=89=E6=8B=A9=E3=80=81=E4=B8=8B=E6=8B=89=E6=A1=86?=
 =?UTF-8?q?=EF=BC=9A=E5=A2=9E=E5=8A=A0=E6=90=9C=E7=B4=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     |   6 +-
 src/components/naiveui/FormDesign.vue         |   3 +-
 .../naiveui/components/configs/Button.vue     | 127 ++++++
 .../naiveui/components/configs/Cascader.vue   | 392 +++++++++++++++++
 .../components/configs/DynamicTags.vue        | 120 +++++
 .../naiveui/components/configs/Select.vue     |  14 +
 .../naiveui/components/configs/SelectTree.vue |  14 +
 .../naiveui/components/configs/Tree.vue       | 411 ++++++++++++++++++
 .../components/design/DesignConfig.vue        |   8 +
 .../components/design/DesignFormItem.vue      |  68 ++-
 .../components/generate/GenerateForm.vue      |   2 +-
 .../components/generate/GenerateFormItem.vue  |  79 +++-
 src/components/naiveui/config/naiveui.ts      | 117 ++++-
 src/components/naiveui/enums/index.ts         |   2 +
 src/icons/svg/button.svg                      |   1 +
 src/icons/svg/dynamicTable.svg                |   1 +
 src/icons/svg/dynamicTags.svg                 |   1 +
 src/icons/svg/selectTree.svg                  |   2 +-
 src/icons/svg/tree.svg                        |   1 +
 19 files changed, 1343 insertions(+), 26 deletions(-)
 create mode 100644 src/components/naiveui/components/configs/Button.vue
 create mode 100644 src/components/naiveui/components/configs/Cascader.vue
 create mode 100644 src/components/naiveui/components/configs/DynamicTags.vue
 create mode 100644 src/components/naiveui/components/configs/Tree.vue
 create mode 100644 src/icons/svg/button.svg
 create mode 100644 src/icons/svg/dynamicTable.svg
 create mode 100644 src/icons/svg/dynamicTags.svg
 create mode 100644 src/icons/svg/tree.svg

diff --git a/README.md b/README.md
index d61de66..81c7747 100644
--- a/README.md
+++ b/README.md
@@ -38,9 +38,10 @@
 - 🍏 树形选择  √
 - 🍏 文件上传 √
 - 🍏 穿梭框 √
-- 🍏 级联选择 > 进行中
-- 🍏 树形组件 > 进行中
+- 🍏 级联选择 > √
+- 🍏 树形组件 > √
 - 🍏 富文本编辑器 √
+- 🍏 动态标签 √
 - 🍏 动态表格（主要用作子表的使用，支持弹窗/抽屉/行内编辑等多种样式） > 进行中
 
 > 布局组件
@@ -52,6 +53,7 @@
 - 🤹 普通文本 √
 - 🤹 Alert组件 √
 - 🤹 Divider分割线 √
+- 🤹 按钮 √
 
 > 其它优化
 - 🚀 单个组件化封装（typescript）
diff --git a/src/components/naiveui/FormDesign.vue b/src/components/naiveui/FormDesign.vue
index 2596211..4a4b2cf 100644
--- a/src/components/naiveui/FormDesign.vue
+++ b/src/components/naiveui/FormDesign.vue
@@ -234,6 +234,7 @@ export default defineComponent({
         'dynamicTable',
         'selectTree',
         'transfer',
+        'dynamicTags',
       ]
     },
     layoutFields: {
@@ -242,7 +243,7 @@ export default defineComponent({
     },
     otherFields: {
       type: Array as PropType<Array<string>>,
-      default: () => ['text','alert','divider']
+      default: () => ['text','alert','divider','button']
     }
   },
   setup() {
diff --git a/src/components/naiveui/components/configs/Button.vue b/src/components/naiveui/components/configs/Button.vue
new file mode 100644
index 0000000..78d64cb
--- /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 0000000..6b88dd9
--- /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/DynamicTags.vue b/src/components/naiveui/components/configs/DynamicTags.vue
new file mode 100644
index 0000000..e9ec796
--- /dev/null
+++ b/src/components/naiveui/components/configs/DynamicTags.vue
@@ -0,0 +1,120 @@
+<template>
+  <n-form-item label="标题" >
+    <n-input v-model:value="data.options.title" />
+  </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-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/Select.vue b/src/components/naiveui/components/configs/Select.vue
index c0d25ee..8d3028b 100644
--- a/src/components/naiveui/components/configs/Select.vue
+++ b/src/components/naiveui/components/configs/Select.vue
@@ -1,4 +1,18 @@
 <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"
diff --git a/src/components/naiveui/components/configs/SelectTree.vue b/src/components/naiveui/components/configs/SelectTree.vue
index 4336c4e..426d79d 100644
--- a/src/components/naiveui/components/configs/SelectTree.vue
+++ b/src/components/naiveui/components/configs/SelectTree.vue
@@ -1,4 +1,18 @@
 <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"
diff --git a/src/components/naiveui/components/configs/Tree.vue b/src/components/naiveui/components/configs/Tree.vue
new file mode 100644
index 0000000..ce2c393
--- /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/design/DesignConfig.vue b/src/components/naiveui/components/design/DesignConfig.vue
index 0c43a94..80cf4d9 100644
--- a/src/components/naiveui/components/design/DesignConfig.vue
+++ b/src/components/naiveui/components/design/DesignConfig.vue
@@ -77,6 +77,10 @@ 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'
@@ -108,6 +112,10 @@ export default defineComponent({
     Alert,
     Text,
     Divider,
+    Cascader,
+    Tree,
+    DynamicTags,
+    Button,
   },
   props: {
     select: {
diff --git a/src/components/naiveui/components/design/DesignFormItem.vue b/src/components/naiveui/components/design/DesignFormItem.vue
index 64bea60..51e10cf 100644
--- a/src/components/naiveui/components/design/DesignFormItem.vue
+++ b/src/components/naiveui/components/design/DesignFormItem.vue
@@ -275,11 +275,71 @@
           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 === '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 === '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">
       <SvgIcon iconClass="copy" @click.stop="$emit('copy')" />
@@ -293,7 +353,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue'
+import {defineComponent, PropType, ref} from 'vue'
 import SvgIcon from '../../../../components/SvgIcon.vue'
 import RichTextEditor from '../custom/RichTextEditor.vue'
 import { WidgetForm } from '../../config/naiveui'
@@ -321,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/components/naiveui/components/generate/GenerateForm.vue b/src/components/naiveui/components/generate/GenerateForm.vue
index a29880e..dec4ade 100644
--- a/src/components/naiveui/components/generate/GenerateForm.vue
+++ b/src/components/naiveui/components/generate/GenerateForm.vue
@@ -176,7 +176,7 @@ export default defineComponent({
 
     const getData = () => {
       return new Promise((resolve, reject) => {
-        console.log('generateForm.value=',generateForm.value)
+        console.log('generateForm.value=',JSON.stringify(generateForm.value))
         generateForm.value?.validate((errors) => {
           console.log('errors=',errors)
           if (!errors) {
diff --git a/src/components/naiveui/components/generate/GenerateFormItem.vue b/src/components/naiveui/components/generate/GenerateFormItem.vue
index 7d6ee6b..65f68e5 100644
--- a/src/components/naiveui/components/generate/GenerateFormItem.vue
+++ b/src/components/naiveui/components/generate/GenerateFormItem.vue
@@ -267,21 +267,81 @@
     </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 { computed, defineComponent, PropType,ref } from 'vue'
 import SvgIcon from '../../../../components/SvgIcon.vue'
 import RichTextEditor from '../custom/RichTextEditor.vue'
 import { WidgetForm } from '../../config/naiveui'
@@ -329,6 +389,7 @@ export default defineComponent({
 
     return {
       data,
+      pattern: ref(''),
       handleFilterOption,
       handleUploadChange
     }
diff --git a/src/components/naiveui/config/naiveui.ts b/src/components/naiveui/config/naiveui.ts
index 49af0a6..770df3b 100644
--- a/src/components/naiveui/config/naiveui.ts
+++ b/src/components/naiveui/config/naiveui.ts
@@ -91,7 +91,7 @@ export const basicComponents = [
     type: 'number',
     options: {
       showLabel: true,
-      width: '',
+      width: '100%',
       defaultValue: 0,
       min: 0,
       max: 100,
@@ -438,16 +438,22 @@ export const advanceComponents = [
   {
     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',
@@ -499,10 +505,83 @@ export const advanceComponents = [
   {
     label: '树形组件',
     type: 'tree',
-    dev:true,
     options: {
       showLabel: true,
-      defaultValue: 'This is a tree',
+      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: 'dynamicTags',
+    options: {
+      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')
     }
   },
   {
@@ -560,6 +639,28 @@ export const otherComponents = [
       closable: false,
     }
   },
+  {
+    label: '按钮',
+    hideLabel:true,
+    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 = [
diff --git a/src/components/naiveui/enums/index.ts b/src/components/naiveui/enums/index.ts
index 84385b4..94ab723 100644
--- a/src/components/naiveui/enums/index.ts
+++ b/src/components/naiveui/enums/index.ts
@@ -32,6 +32,8 @@ export enum ComponentType {
   Alert = 'alert',
   Text = 'text',
   Divider = 'divider',
+  DynamicTags = 'dynamicTags',
+  Button = 'button',
 }
 
 export function checkComponent(test: any): test is ComponentType {
diff --git a/src/icons/svg/button.svg b/src/icons/svg/button.svg
new file mode 100644
index 0000000..a0aa204
--- /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/dynamicTable.svg b/src/icons/svg/dynamicTable.svg
new file mode 100644
index 0000000..14fe5a4
--- /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 0000000..cba401a
--- /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/selectTree.svg b/src/icons/svg/selectTree.svg
index 2b43386..53a88a5 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/tree.svg b/src/icons/svg/tree.svg
new file mode 100644
index 0000000..2b43386
--- /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>
-- 
Gitee


From 35a4d084527ec72462715b8d5324f394fa9cf6f2 Mon Sep 17 00:00:00 2001
From: lvhuaisheng <lvhuaisheng_k@163.com>
Date: Wed, 6 Jul 2022 17:21:04 +0800
Subject: [PATCH 8/9] =?UTF-8?q?fix:=E6=A0=87=E9=A2=98=E4=B8=8D=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/naiveui/components/configs/DynamicTags.vue | 4 ----
 src/components/naiveui/components/design/DesignConfig.vue | 2 +-
 src/components/naiveui/config/naiveui.ts                  | 4 ----
 3 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/components/naiveui/components/configs/DynamicTags.vue b/src/components/naiveui/components/configs/DynamicTags.vue
index e9ec796..7de322a 100644
--- a/src/components/naiveui/components/configs/DynamicTags.vue
+++ b/src/components/naiveui/components/configs/DynamicTags.vue
@@ -1,8 +1,4 @@
 <template>
-  <n-form-item label="标题" >
-    <n-input v-model:value="data.options.title" />
-  </n-form-item>
-
   <n-form-item label="最大值">
     <n-input-number v-model:value.number="data.options.max" />
   </n-form-item>
diff --git a/src/components/naiveui/components/design/DesignConfig.vue b/src/components/naiveui/components/design/DesignConfig.vue
index 80cf4d9..611dc29 100644
--- a/src/components/naiveui/components/design/DesignConfig.vue
+++ b/src/components/naiveui/components/design/DesignConfig.vue
@@ -5,7 +5,7 @@
       <n-input v-model:value="data.model" />
     </n-form-item>
 
-    <n-form-item label="标题" v-if="hasKey('label')&&data.type !== 'grid'&&!data.hideLabel">
+    <n-form-item label="标题" v-if="data.type !== 'grid'&&data.options.showLabel">
       <n-input v-model:value="data.label" />
     </n-form-item>
 
diff --git a/src/components/naiveui/config/naiveui.ts b/src/components/naiveui/config/naiveui.ts
index 770df3b..0d963e0 100644
--- a/src/components/naiveui/config/naiveui.ts
+++ b/src/components/naiveui/config/naiveui.ts
@@ -598,7 +598,6 @@ export const otherComponents = [
   {
     type: 'text',
     label:'文字',
-    hideLabel:true,
     options: {
       showLabel: false,
       text:'文字',
@@ -615,7 +614,6 @@ export const otherComponents = [
   {
     type: 'divider',
     label:'分割线',
-    hideLabel:true,
     options: {
       showLabel: false,
       text:'分割线',
@@ -626,7 +624,6 @@ export const otherComponents = [
   },
   {
     label: '警告信息',
-    hideLabel:true,
     type: 'alert',
     options: {
       showLabel: false,
@@ -641,7 +638,6 @@ export const otherComponents = [
   },
   {
     label: '按钮',
-    hideLabel:true,
     type: 'button',
     options: {
       showLabel: false,
-- 
Gitee


From 0405800a37440f8c801ff739c05260f2b8fdc5e1 Mon Sep 17 00:00:00 2001
From: lvhuaisheng <lvhuaisheng_k@163.com>
Date: Sun, 10 Jul 2022 08:15:24 +0800
Subject: [PATCH 9/9] =?UTF-8?q?fix:=E4=BF=AE=E5=A4=8D=E5=9B=A0=E4=B8=BAcon?=
 =?UTF-8?q?sole.log=E5=AF=BC=E8=87=B4build=E5=90=8Ejson=E5=BE=AA=E7=8E=AF?=
 =?UTF-8?q?=E5=BC=95=E7=94=A8=E7=9A=84=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/naiveui/components/generate/GenerateForm.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/naiveui/components/generate/GenerateForm.vue b/src/components/naiveui/components/generate/GenerateForm.vue
index dec4ade..3f46d01 100644
--- a/src/components/naiveui/components/generate/GenerateForm.vue
+++ b/src/components/naiveui/components/generate/GenerateForm.vue
@@ -176,7 +176,6 @@ export default defineComponent({
 
     const getData = () => {
       return new Promise((resolve, reject) => {
-        console.log('generateForm.value=',JSON.stringify(generateForm.value))
         generateForm.value?.validate((errors) => {
           console.log('errors=',errors)
           if (!errors) {
-- 
Gitee