diff --git a/README.md b/README.md
index df04dc68dd2d829959000a00970e8bce93bb8974..64a5ad2f108237a181718b3027b0ad6cb4dc4bd4 100644
--- a/README.md
+++ b/README.md
@@ -12,27 +12,29 @@
 
 
 ### 功能/计划
-- 🍉 单行/多行/密码输入组件√
-- 🍉 数字组件√
-- 🍉 单选√
-- 🍉 多选√
-- 🍉 时间选择√
+- 🍉 单行/多行/密码输入组件 √
+- 🍉 数字组件 √
+- 🍉 单选 √
+- 🍉 多选 √
+- 🍉 时间选择 √
 - 🍉 日期选择（年份、月份、季度等）√
-- 🍉 评分√
-- 🍉 开关√
+- 🍉 评分 √
+- 🍉 开关 √
 - 🍉 滑块（横向、竖向）√
-- 🍉 富文本编辑器√
-- 📦 naiveui的新版栅格布局√
-- 🤹 普通文本√
-- 🤹 Alert组件√
-- 🍏 颜色选择器 > 进行中
-- 🍏 树形选择 > 进行中
-- 🍏 文件上传 > 进行中
-- 🍏 穿梭框 > 进行中
+- 🍉 富文本编辑器 √
+- 📦 naiveui的新版栅格布局 √
+- 🤹 普通文本 √
+- 🤹 Alert组件 √
+- 🍏 颜色选择器  √
+- 🍏 树形选择  √
+- 🍏 文件上传 √
+- 🍏 穿梭框 √
 - 🍏 级联选择 > 进行中
 - 🍏 树形组件 > 进行中
 - 🍏 静态表格（可启用原生样式，实现线上、线下合同表单的一比一样式） > 进行中
 - 🍏 动态表格（主要用作子表的使用，支持弹窗/抽屉/行内编辑等多种样式） > 进行中
+- 🚀 单个组件化封装（typescript）
+- 🚀 细节优化
 - 更多......
 ### 预览
 
@@ -46,8 +48,12 @@
 
 ```shell
 # 克隆项目
+#github
 git clone https://github.com/LvHuaiSheng/naiveui-form-generate.git
 
+#gitee
+git clone https://gitee.com/sourcenet/naiveui-form-generate.git
+
 # 进入项目目录
 cd naiveui-form-generate
 
diff --git a/src/config/naiveui.ts b/src/config/naiveui.ts
index e6a5eb1893527c91af0da68951de4792e814b4f7..794599a77c57b112feca96203f25715c4900442a 100644
--- a/src/config/naiveui.ts
+++ b/src/config/naiveui.ts
@@ -276,50 +276,93 @@ export const basicComponents = [
     label: '颜色选择器',
     type: 'color',
     options: {
-      defaultValue: 0,
+      defaultValue: '',
       width: '',
-      height: '',
-      min: 0,
-      max: 100,
-      step: 1,
       disabled: false,
-      range: false,
-      vertical: false,
-      reverse: false,
+      showAlpha: true,
+      showPreview: false,
+      placement: 'bottom-start',
+      modes: ['hex'],
       rules:getRules('number'),
     }
   },
 ]
-
 export const advanceComponents = [
   {
     label: '树形选择',
     type: 'selectTree',
-    dev:true,
     options: {
       defaultValue: [],
-      width: '200px',
-      placeholder: '',
+      width: '',
+      placeholder: '请选择',
       disabled: false,
       allowClear: false,
-      remote: true,
+      remote: false,
+      multiple: false,
+      filterable: false,
+      checkStrategy: 'all',
       remoteOptions: [],
       props: {
         label: 'label',
-        value: 'value',
-        children: 'children'
+        value: 'value'
       },
+      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',
+            }
+          ],
+        }
+      ],
       remoteFunc:
           'https://raw.githubusercontent.com/fuchengwei/vue-form-create/master/mock/mock.json',
       rules:getRules('string')
     }
   },
   {
-    label: '图片',
-    type: 'img-upload',
-    dev:true,
+    label: '上传',
+    type: 'upload',
     options: {
       defaultValue: [],
+      defaultUpload:true,
+      directory:false,
+      directoryDnd:false,
+      showDownloadButton:false,
+      showFileList:true,
+      showRetryButton:true,
+      showRemoveButton:true,
+      showCancelButton:true,
+      showPreviewButton:true,
       name: 'file',
       action: 'http://example.com/upload',
       method: 'post',
@@ -343,11 +386,28 @@ export const advanceComponents = [
   {
     label: '穿梭框',
     type: 'transfer',
-    dev:true,
     options: {
       defaultValue: '',
       width: '',
-      disabled: false
+      disabled: false,
+      filterable:false,
+      virtualScroll:false,
+      sourceTitle:'源项',
+      targetTitle:'目标项',
+      options: [
+        {
+          label: 'Option 1',
+          value: 'Option 1'
+        },
+        {
+          label: 'Option 2',
+          value: 'Option 2'
+        },
+        {
+          label: 'Option 3',
+          value: 'Option 3'
+        }
+      ],
     }
   },
   {
@@ -367,6 +427,44 @@ export const advanceComponents = [
         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',
+            }
+          ],
+        }
+      ],
       remoteFunc:
         'https://raw.githubusercontent.com/fuchengwei/vue-form-create/master/mock/mock.json',
       rules
diff --git a/src/core/naiveui/NaiveFormDesign.vue b/src/core/naiveui/NaiveFormDesign.vue
index 09e06b462c0fd74d25ace782ac49528ca189fd95..abd4defd4488a6df5f2f65b781b49d2101271537 100644
--- a/src/core/naiveui/NaiveFormDesign.vue
+++ b/src/core/naiveui/NaiveFormDesign.vue
@@ -229,7 +229,7 @@ export default defineComponent({
     advanceFields: {
       type: Array as PropType<Array<string>>,
       default: () => [
-          'img-upload',
+        'upload',
         'richtext-editor',
         'cascader',
         'tree',
diff --git a/src/core/naiveui/NaiveGenerateFormItem.vue b/src/core/naiveui/NaiveGenerateFormItem.vue
index 69a9442c18e9f2b26504edbfc4d672d8832de99e..1af2ea7038df6002c93677ab49af93d9cfa18db5 100644
--- a/src/core/naiveui/NaiveGenerateFormItem.vue
+++ b/src/core/naiveui/NaiveGenerateFormItem.vue
@@ -167,12 +167,36 @@
           :style="{ width: element.options.width,height: element.options.height }"
       />
     </template>
+    <template v-if="element.type === 'selectTree'">
+      <n-tree-select
+          v-model:value="data"
+          :options="element.options.options"
+          :placeholder="element.options.placeholder"
+          :size="config.size"
+          :multiple="element.options.multiple"
+          :filterable="element.options.filterable"
+          :check-strategy="element.options.checkStrategy"
+          :clearable="element.options.allowClear"
+          :label-field="element.options.props.label"
+          :key-field="element.options.props.value"
+          :disabled="disabled || element.options.disabled"
+          :style="{ width: element.options.width }"
+      />
+    </template>
+    <template v-if="element.type === 'color'">
+      <n-color-picker v-model:value="data"
+                      :size="config.size"
+                      :modes="element.options.modes"
+                      :disabled="disabled || element.options.disabled"
+                      :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>
       </div>
     </template>
+
     <template v-if="element.type === 'alert'">
       <n-alert :title="element.options.title"
                :type="element.options.type"
@@ -183,11 +207,34 @@
       </n-alert>
     </template>
 
-    <template v-if="element.type === 'img-upload'">
-      <a-upload
+    <template v-if="element.type === 'transfer'">
+      <n-transfer v-model:value="data"
+                  :size="config.size"
+                  :filterable="element.options.filterable"
+                  :disabled="disabled || element.options.disabled"
+                  :source-title="element.options.sourceTitle"
+                  :target-title="element.options.targetTitle"
+                  :virtual-scroll="element.options.virtualScroll"
+                  :options="element.options.options"
+                  :style="{ width: element.options.width }"
+      />
+    </template>
+
+    <template v-if="element.type === 'upload'">
+      <n-upload
         :name="element.options.file"
         :action="element.options.action"
         :accept="element.options.accept"
+        :max="element.options.maxCount"
+        :defaultUpload="element.options.defaultUpload"
+        :directory="element.options.directory"
+        :directoryDnd="element.options.directoryDnd"
+        :showDownloadButton="element.options.showDownloadButton"
+        :showFileList="element.options.showFileList"
+        :showRetryButton="element.options.showRetryButton"
+        :showRemoveButton="element.options.showRemoveButton"
+        :showCancelButton="element.options.showCancelButton"
+        :showPreviewButton="element.options.showPreviewButton"
         :file-list="data"
         :listType="element.options.listType"
         :multiple="element.options.multiple"
@@ -195,14 +242,14 @@
         @change="handleUploadChange"
       >
         <SvgIcon
-          v-if="element.options.listType === 'picture-card'"
+          v-if="element.options.listType === 'image-card'"
           iconClass="insert"
         />
-        <a-button v-else>
+        <n-button v-else>
           <SvgIcon iconClass="img-upload" style="margin-right: 10px;" />
           点击上传
-        </a-button>
-      </a-upload>
+        </n-button>
+      </n-upload>
     </template>
 
     <template v-if="element.type === 'richtext-editor'">
diff --git a/src/core/naiveui/NaiveWidgetConfig.vue b/src/core/naiveui/NaiveWidgetConfig.vue
index a4c7aa8e0af52659b3ae7d1ec5e009db9bc80c81..3221a7e5b4caae04dfb645e772cd99f35bb1f115 100644
--- a/src/core/naiveui/NaiveWidgetConfig.vue
+++ b/src/core/naiveui/NaiveWidgetConfig.vue
@@ -228,7 +228,7 @@
       </n-switch>
     </n-form-item>
 
-    <n-form-item label="选项" v-if="hasKey('options')">
+    <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>
@@ -420,13 +420,176 @@
         <n-input v-model:value="data.options.valueFormat" />
       </n-form-item>
     </template>
+    <template v-if="data.type === 'color'">
+      <n-form-item label="默认值">
+        <n-color-picker v-model:value="data.options.defaultValue"/>
+      </n-form-item>
+      <n-form-item label="可用模式">
+        <n-checkbox-group v-model:value="data.options.modes">
+          <n-space item-style="display: flex;">
+            <n-checkbox value="rgb" label="rgb" />
+            <n-checkbox value="hex" label="hex" />
+            <n-checkbox value="hsl" label="hsl" />
+            <n-checkbox value="hsv" label="hsv" />
+          </n-space>
+        </n-checkbox-group>
+      </n-form-item>
+      <n-form-item label="是否可调节alpha通道">
+        <n-switch
+            checked-children="是"
+            un-checked-children="否"
+            v-model:value="data.options.showAlpha"
+        >
+          <template #checked>
+            是
+          </template>
+          <template #unchecked>
+            否
+          </template>
+        </n-switch>
+      </n-form-item>
+      <n-form-item label="是否展示颜色预览块">
+        <n-switch
+            checked-children="是"
+            un-checked-children="否"
+            v-model:value="data.options.showPreview"
+        >
+          <template #checked>
+            是
+          </template>
+          <template #unchecked>
+            否
+          </template>
+        </n-switch>
+      </n-form-item>
+      <n-form-item label="面板的弹出位置">
+        <n-select v-model:value="data.options.placement" :options="colorPlacementOptions"></n-select>
+      </n-form-item>
+    </template>
+    <template v-if="data.type==='selectTree'">
+      <n-form-item label="模式">
+        <n-radio-group
+            button-style="solid"
+            v-model:value="data.options.multiple"
+            @change="handleSelectModeChange"
+        >
+          <n-radio-button :value="false">单选</n-radio-button>
+          <n-radio-button :value="true">多选</n-radio-button>
+        </n-radio-group>
+      </n-form-item>
+
+      <n-form-item label="选中策略">
+        <n-radio-group v-model:value="data.options.checkStrategy">
+          <n-radio-button value="all">
+            All
+          </n-radio-button>
+          <n-radio-button value="parent">
+            Parent
+          </n-radio-button>
+          <n-radio-button value="child">
+            Child
+          </n-radio-button>
+        </n-radio-group>
+      </n-form-item>
+      <n-form-item label="选项" >
+        <div style="width: 100%">
+          <n-radio-group button-style="solid" v-model:value="data.options.remote">
+            <n-radio-button :value="false">静态数据</n-radio-button>
+            <n-radio-button :value="true">远端数据</n-radio-button>
+          </n-radio-group>
+          <n-space
+              v-if="data.options.remote"
+              direction="vertical"
+              style="margin-top: 10px;"
+          >
+
+            <n-input-group>
+              <n-input-group-label>远端方法</n-input-group-label>
+              <n-input  v-model:value="data.options.remoteFunc"/>
+            </n-input-group>
 
-    <template v-if="data.type === 'img-upload'">
-      <n-form-item label="是否支持多选">
+            <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.multiple"
+            checked-children="是"
+            un-checked-children="否"
+            v-model:value="data.options.virtualScroll"
         >
           <template #checked>
             是
@@ -436,6 +599,9 @@
           </template>
         </n-switch>
       </n-form-item>
+    </template>
+
+    <template v-if="data.type === 'upload'">
 
       <n-form-item label="模式">
         <n-radio-group
@@ -443,8 +609,8 @@
           v-model:value="data.options.listType"
         >
           <n-radio-button value="text">text</n-radio-button>
-          <n-radio-button value="picture">picture</n-radio-button>
-          <n-radio-button value="picture-card">picture-card</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>
 
@@ -459,7 +625,6 @@
       <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>
@@ -472,6 +637,25 @@
           <n-radio-button value="delete">DELETE</n-radio-button>
         </n-radio-group>
       </n-form-item>
+
+      <n-form-item label="上传属性">
+        <n-space item-style="display: flex;" align="center">
+          <n-checkbox v-model:checked="data.options.showFileList">显示列表</n-checkbox>
+          <n-checkbox v-model:checked="data.options.multiple">多选</n-checkbox>
+          <n-checkbox v-model:checked="data.options.defaultUpload">否默认上传</n-checkbox>
+          <n-checkbox v-model:checked="data.options.directory">目录上传</n-checkbox>
+          <n-checkbox v-model:checked="data.options.directoryDnd">目录拖拽上传</n-checkbox>
+        </n-space>
+      </n-form-item>
+      <n-form-item label="操作属性">
+        <n-space item-style="display: flex;" align="center">
+          <n-checkbox v-model:checked="data.options.showDownloadButton">显示下载按钮</n-checkbox>
+          <n-checkbox v-model:checked="data.options.showRetryButton">显示重新上传按钮</n-checkbox>
+          <n-checkbox v-model:checked="data.options.showRemoveButton">显示删除按钮</n-checkbox>
+          <n-checkbox v-model:checked="data.options.showCancelButton">是否显示取消按钮</n-checkbox>
+          <n-checkbox v-model:checked="data.options.showPreviewButton">是否允许显示预览按钮</n-checkbox>
+        </n-space>
+      </n-form-item>
     </template>
 
     <n-form-item label="远端数据" v-if="data.type === 'cascader'">
@@ -692,10 +876,11 @@
 </template>
 
 <script lang="ts">
-import {defineComponent, reactive, ref, toRefs, watch} from 'vue'
+import {h,defineComponent, reactive, ref, toRefs, watch} from 'vue'
 import Draggable from 'vuedraggable'
 import SvgIcon from '../../components/SvgIcon.vue'
-
+import { NSpace,NButton,NInput, useMessage } from 'naive-ui'
+import { v4 } from 'uuid'
 export default defineComponent({
   name: 'NaiveWidgetConfig',
   components: {
@@ -710,6 +895,54 @@ export default defineComponent({
   emits: ['update:select'],
   setup(props, context) {
     const data = ref<any>(props.select)
+    const treeDataFormRef = ref<FormInst | null>(null)
+    watch(
+      () => props.select,
+      val => (data.value = val)
+    )
+
+    watch(data, val => context.emit('update:select', val))
+
+    const treeDataColumns = ({
+                               add,
+                               edit,
+                               remove,
+                             }: {
+      add: (rowData: RowData,rowIndex: number) => void
+      edit: (rowData: RowData,rowIndex: number) => void
+      remove: (rowData: RowData,rowIndex: number) => void
+    }): DataTableColumns<RowData> => {
+      return [
+        {
+          title: 'Label',
+          key: 'label',
+        },
+        {
+          title: 'Value',
+          key: 'value',
+        },
+        {
+          title: '操作',
+          key: 'action',
+          render(row,index) {
+            return h(NSpace, {}, [
+              h(NButton, {strong: true, tertiary: true, size: 'small',text:true,type:'primary', onClick: () => edit(row,index)}, {default: () => '编辑'}),
+              h(NButton, {strong: true, tertiary: true, size: 'small',text:true,type:'primary', onClick: () => add(row,index)}, {default: () => '添加下级'}),
+              h(NButton, {strong: true, tertiary: true, size: 'small',text:true,type:'error', onClick: () => remove(row,index)}, {default: () => '删除'})
+            ])
+          }
+        }
+      ]
+    }
+    const addTreeData = ()=>{
+      state.treeData = {
+        key: v4().replaceAll('-', ''),
+        label:'',
+        value:'',
+        children:[]
+      }
+      state.showTreeDataDriwer=true
+    }
     const state = reactive({
       verifyOptions:[
         {label:'字符串',value:'string'},
@@ -727,16 +960,67 @@ export default defineComponent({
         {label:'十六进制',value:'hex'},
         {label:'邮箱地址',value:'email'},
         {label:'任意类型',value:'any'},
-      ]
+      ],
+      colorPlacementOptions:[
+        {label:'top-start',value:'top-start'},
+        {label:'top',value:'top'},
+        {label:'top-end',value:'top-end'},
+        {label:'right-start',value:'right-start'},
+        {label:'right',value:'right'},
+        {label:'right-end',value:'right-end'},
+        {label:'bottom-start',value:'bottom-start'},
+        {label:'bottom',value:'bottom'},
+        {label:'bottom-end',value:'bottom-end'},
+        {label:'left-start',value:'left-start'},
+        {label:'left',value:'left'},
+        {label:'left-end',value:'left-end'},
+      ],
+      showTreeDataType:'add',
+      showTreeDataDriwer:false,
+      treeData:{},
+      treeRules: {
+        label: {
+          required: true,
+          message: '请输入',
+          trigger: ['input', 'blur']
+        },
+        value: {
+          required: true,
+          message: '请输入',
+          trigger: ['input', 'blur']
+        }
+      },
+      treeDataColumns: treeDataColumns({
+        add (rowData) {
+          state.treeData = {
+            parent:rowData,
+            key: v4().replaceAll('-', ''),
+            label:'',
+            value:'',
+            children:[]
+          }
+          state.showTreeDataDriwer=true
+          state.showTreeDataType='add'
+        },
+        edit (rowData,rowIndex) {
+          state.treeData = Object.assign({},rowData)
+          state.showTreeDataDriwer=true
+          state.showTreeDataType='edit'
+        },
+        remove (rowData,rowIndex) {
+          if (rowData.parent){
+            rowData.parent.children.forEach((v,i)=>{
+              if (v.key===rowData.key){
+                rowData.parent.children.splice(i,1)
+              }
+            })
+          }else {
+            data.value.options.options.splice(rowIndex,1)
+          }
+        }
+      }),
+      rowKey: (row: RowData) => row.value
     })
-
-    watch(
-      () => props.select,
-      val => (data.value = val)
-    )
-
-    watch(data, val => context.emit('update:select', val))
-
     const hasKey = (key: string) =>
       Object.keys(data.value.options).includes(key)
 
@@ -765,12 +1049,14 @@ export default defineComponent({
 
     const handleSelectModeChange = (event: any) => {
       const { value } = event.target
-      if (value === null) {
+      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]
@@ -803,9 +1089,34 @@ export default defineComponent({
           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,
diff --git a/src/core/naiveui/NaiveWidgetFormItem.vue b/src/core/naiveui/NaiveWidgetFormItem.vue
index 5249de60628d18254ef1c65ccfbdb061a5c37ab4..95c80c85511064d9e77a097ab2bf4864c3058e8f 100644
--- a/src/core/naiveui/NaiveWidgetFormItem.vue
+++ b/src/core/naiveui/NaiveWidgetFormItem.vue
@@ -141,12 +141,17 @@
         </n-select>
       </template>
       <template v-if="element.type === 'selectTree'">
-        <n-cascader
-            :size="config.size"
-            :value="element.options.defaultValue"
-            :options="element.options.remoteOptions"
+        <n-tree-select
+            v-model:value="element.options.defaultValue"
+            :options="element.options.options"
             :placeholder="element.options.placeholder"
-            :allowClear="element.options.allowClear"
+            :size="config.size"
+            :multiple="element.options.multiple"
+            :filterable="element.options.filterable"
+            :check-strategy="element.options.checkStrategy"
+            :clearable="element.options.allowClear"
+            :label-field="element.options.props.label"
+            :key-field="element.options.props.value"
             :disabled="element.options.disabled"
             :style="{ width: element.options.width }"
         />
@@ -180,6 +185,29 @@
           />
       </template>
 
+      <template v-if="element.type === 'color'">
+        <n-color-picker v-model:value="element.options.defaultValue"
+                        :size="config.size"
+                        :modes="element.options.modes"
+                        :disabled="element.options.disabled"
+                        :show-alpha="element.options.showAlpha"
+                        :show-preview="element.options.showPreview"
+                        :placement="element.options.placement"
+                        :style="{ width: element.options.width }"/>
+      </template>
+      <template v-if="element.type === 'transfer'">
+        <n-transfer ref="transfer" v-model:value="element.options.defaultValue"
+                    :size="config.size"
+                    :filterable="element.options.filterable"
+                    :disabled="element.options.disabled"
+                    :source-title="element.options.sourceTitle"
+                    :target-title="element.options.targetTitle"
+                    :virtual-scroll="element.options.virtualScroll"
+                    :options="element.options.options"
+                    :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>
@@ -195,18 +223,28 @@
         </n-alert>
       </template>
 
-      <template v-if="element.type === 'img-upload'">
+      <template v-if="element.type === 'upload'">
         <n-upload
           :name="element.options.file"
           :action="element.options.action"
           :accept="element.options.accept"
+          :max="element.options.maxCount"
+          :defaultUpload="element.options.defaultUpload"
+          :directory="element.options.directory"
+          :directoryDnd="element.options.directoryDnd"
+          :showDownloadButton="element.options.showDownloadButton"
+          :showFileList="element.options.showFileList"
+          :showRetryButton="element.options.showRetryButton"
+          :showRemoveButton="element.options.showRemoveButton"
+          :showCancelButton="element.options.showCancelButton"
+          :showPreviewButton="element.options.showPreviewButton"
           :file-list="element.options.defaultValue"
           :listType="element.options.listType"
           :multiple="element.options.multiple"
           :disabled="element.options.disabled"
         >
           <SvgIcon
-            v-if="element.options.listType === 'picture-card'"
+            v-if="element.options.listType === 'image-card'"
             iconClass="insert"
           />
           <n-button v-else>
@@ -227,8 +265,8 @@
       <template v-if="element.type === 'cascader'">
         <n-cascader
           :size="config.size"
-          :value="element.options.defaultValue"
-          :options="element.options.remoteOptions"
+          v-model:value="element.options.defaultValue"
+          :options="element.options.options"
           :placeholder="element.options.placeholder"
           :allowClear="element.options.allowClear"
           :disabled="element.options.disabled"
diff --git a/src/icons/svg/alert.svg b/src/icons/svg/alert.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e17df97d7626ca1fc6344e03649eb291bc5a3c82
--- /dev/null
+++ b/src/icons/svg/alert.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="M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2zm0 26a12 12 0 1 1 12-12a12 12 0 0 1-12 12z" fill="currentColor"></path><path d="M15 8h2v11h-2z" fill="currentColor"></path><path d="M16 22a1.5 1.5 0 1 0 1.5 1.5A1.5 1.5 0 0 0 16 22z" fill="currentColor"></path></svg>
diff --git a/src/icons/svg/selectTree.svg b/src/icons/svg/selectTree.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2b43386e555429c773f85c0c42afd8faa61888b7
--- /dev/null
+++ b/src/icons/svg/selectTree.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><path d="M23 9.005h6a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2h-6a2 2 0 0 0-2 2v1H11v-1a2 2 0 0 0-2-2H3a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h4v20a2.002 2.002 0 0 0 2 2h4v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2h-6a2 2 0 0 0-2 2v1h-4v-9h4v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2h-6a2 2 0 0 0-2 2v1h-4v-9h4v1a2 2 0 0 0 2 2zm0-6h6v4h-6zm-14 4H3v-4h6zm14 18h6v4h-6zm0-11h6v4h-6z" fill="currentColor"></path></svg>
diff --git a/src/icons/svg/transfer.svg b/src/icons/svg/transfer.svg
new file mode 100644
index 0000000000000000000000000000000000000000..de015135319a0abdebd35ccbb4018118b2f78986
--- /dev/null
+++ b/src/icons/svg/transfer.svg
@@ -0,0 +1 @@
+<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="M8 1.5a.5.5 0 0 1 .5.5v3.382a1.508 1.508 0 0 0-.071.068L8 5.879l-.44-.44c-.019-.02-.04-.038-.06-.057V2a.5.5 0 0 1 .5-.5zm.428 9.05c.023.023.047.046.072.068V14a.5.5 0 0 1-1 0v-3.382a1.52 1.52 0 0 0 .06-.057l.44-.44l.428.428zM2.5 14a.5.5 0 0 1-.5-.5V11h3v.5A2.5 2.5 0 0 1 2.5 14zM5 6v4H2V6h3zm0-1v-.5A2.5 2.5 0 0 0 2.5 2a.5.5 0 0 0-.5.5V5h3zm8.5-3A2.5 2.5 0 0 0 11 4.5V5h3V2.5a.5.5 0 0 0-.5-.5zM11 6h3v4h-3V6zm3 5h-3v.5a2.5 2.5 0 0 0 2.5 2.5a.5.5 0 0 0 .5-.5V11zM6.146 6.146a.5.5 0 0 1 .708 0L8 7.293l1.146-1.147a.5.5 0 1 1 .708.708L8.707 8l1.147 1.146a.5.5 0 0 1-.708.708L8 8.707L6.854 9.854a.5.5 0 0 1-.708-.708L7.293 8L6.146 6.854a.5.5 0 0 1 0-.708z" fill="currentColor"></path></g></svg>
diff --git a/src/styles/index.less b/src/styles/index.less
index dfdc9d7d27109b54d68f2b82c4885395b1284984..643001c681444eb3cfda85aca7b78d4f4ef1a3c7 100644
--- a/src/styles/index.less
+++ b/src/styles/index.less
@@ -1,11 +1,10 @@
 @import './scrollbar.less';
-
-@primary-color: #409EFF;
-@primary-background-color: #ecf5ff;
+@primary-color: #18a058;
+@primary-background-color: #eafaef;
 // Color variables (appears count calculates by raw css)
 @color0: #ffffff; // Appears 15 times
-@color1: #f56c6c; // Appears 9 times
-@color2: #e6a23c; // Appears 7 times
+@color1: #18a058; // Appears 9 times
+@color2: #f0a020; // Appears 7 times
 @color3: #e4e7ed; // Appears 3 times
 @color4: #f4f6fc; // Appears 3 times
 @color5: #e1e1e1; // Appears 3 times
@@ -109,7 +108,7 @@ body {
       position: relative;
       text-overflow: ellipsis;
       white-space: nowrap;
-      min-width: 105px;
+      min-width: 100px;
       text-align: center;
       &:hover {
         border: 1px dashed@primary-color;
@@ -144,6 +143,7 @@ body {
     position: absolute;
     right: 0;
     top: 0;
+    overflow: auto;
     .widget-form-list {
       background: @color0;
       border: 1px dashed #999999;
diff --git a/src/styles/scrollbar.less b/src/styles/scrollbar.less
index 52d07db9395297e0d0e42dc2df590b634baccc43..6ed7e1efbb97152c1e16b2e861c593a0a927a3f5 100644
--- a/src/styles/scrollbar.less
+++ b/src/styles/scrollbar.less
@@ -10,3 +10,6 @@
   border-radius: 1em;
   background-color: rgba(50, 50, 50, 0.1);
 }
+.n-layout-sider-scroll-container,.widget-form-container{
+  scrollbar-width: thin;
+}