diff --git a/babel.config.js b/babel.config.js
index 4fe62293efcf2ab07f91e236380f319869f5bb4f..beb68e22dc2fc37761fe2c3539cc2e23c890228c 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -13,7 +13,7 @@ plugins.push(['import', {
   'libraryName': 'ant-design-vue',
   'libraryDirectory': 'es',
   'style': true // `style: true` 会加载 less 文件
-}])
+}, 'antdv'])
 
 module.exports = {
   presets: [
diff --git a/package.json b/package.json
index d130aa77e487e1ccbb315a2bb54a834b7b0eeddd..8b9bb386c49444da63cb696f62c4795fa35f1cb6 100644
--- a/package.json
+++ b/package.json
@@ -13,14 +13,13 @@
   "dependencies": {
     "@ant-design-vue/pro-layout": "^1.0.13",
     "@antv/data-set": "^0.11.8",
-    "@form-create/ant-design-vue": "^2.5.23",
-    "@wangeditor/editor": "^5.1.1",
-    "@wangeditor/editor-for-vue": "^1.0.1",
+    "@wangeditor/editor": "^5.1.14",
+    "@wangeditor/editor-for-vue": "^1.0.2",
     "@wangeditor/plugin-md": "^1.0.0",
     "ant-design-vue": "^1.7.8",
     "axios": "^0.27.2",
-    "core-js": "^3.23.2",
-    "cron-parser": "^4.4.0",
+    "core-js": "^3.24.0",
+    "cron-parser": "^4.5.0",
     "echarts": "^5.3.3",
     "enquire.js": "^2.1.6",
     "lodash": "^4.17.21",
@@ -34,17 +33,21 @@
     "prismjs": "^1.28.0",
     "screenfull": "^5.2.0",
     "store": "^2.0.12",
+    "vcolorpicker": "^1.1.0",
     "viser-vue": "^2.4.6",
     "vue": "^2.6.14",
     "vue-bus": "^1.2.1",
     "vue-clipboard2": "^0.3.3",
+    "vue-codemirror-lite": "^1.0.4",
     "vue-cropper": "0.5.8",
     "vue-qr": "^2.5.0",
+    "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.5.2",
     "vue-svg-component-runtime": "^1.0.1",
+    "vuedraggable": "^2.23.2",
     "vuex": "^3.6.2",
-    "vxe-table": "^3.5.8",
-    "xe-utils": "^3.5.4"
+    "vxe-table": "^3.5.9",
+    "xe-utils": "^3.5.6"
   },
   "devDependencies": {
     "@ant-design/colors": "^3.2.1",
diff --git a/src/api/starter/codeGen.js b/src/api/develop/codeGen.js
similarity index 100%
rename from src/api/starter/codeGen.js
rename to src/api/develop/codeGen.js
diff --git a/src/api/starter/fileUpload.js b/src/api/develop/fileUpload.js
similarity index 98%
rename from src/api/starter/fileUpload.js
rename to src/api/develop/fileUpload.js
index 949f413bba054452965390a05dc6f28d454478e2..269a742aecb78cb342278340b5656e496d040829 100644
--- a/src/api/starter/fileUpload.js
+++ b/src/api/develop/fileUpload.js
@@ -6,4 +6,4 @@ export function page (params) {
     method: 'GET',
     params: params
   })
-}
\ No newline at end of file
+}
diff --git a/src/api/notice/dingRobotConfig.js b/src/api/third/dingRobotConfig.js
similarity index 100%
rename from src/api/notice/dingRobotConfig.js
rename to src/api/third/dingRobotConfig.js
diff --git a/src/api/third/weComRobotConfig.js b/src/api/third/weComRobotConfig.js
new file mode 100644
index 0000000000000000000000000000000000000000..fb2824070c03300f8addd2792baae141227f2509
--- /dev/null
+++ b/src/api/third/weComRobotConfig.js
@@ -0,0 +1,59 @@
+import { axios } from '@/utils/request'
+
+export function add (obj) {
+  return axios({
+    url: '/wecom/robot/config/add',
+    method: 'POST',
+    data: obj
+  })
+}
+
+export function update (obj) {
+  return axios({
+    url: '/wecom/robot/config/update',
+    method: 'POST',
+    data: obj
+  })
+}
+
+export function page (params) {
+  return axios({
+    url: '/wecom/robot/config/page',
+    method: 'GET',
+    params: params
+  })
+}
+
+export function get (id) {
+  return axios({
+    url: '/wecom/robot/config/findById',
+    method: 'GET',
+    params: { id }
+  })
+}
+
+/**
+ * 编码是否被使用
+ */
+export function existsByCode (code) {
+  return axios({
+    url: '/wecom/robot/config/existsByCode',
+    method: 'GET',
+    params: { code }
+  })
+}
+export function existsByCodeNotId (code, id) {
+  return axios({
+    url: '/wecom/robot/config/existsByCodeNotId',
+    method: 'GET',
+    params: { code, id }
+  })
+}
+
+export function del (id) {
+  return axios({
+    url: '/wecom/robot/config/delete',
+    params: { id },
+    method: 'DELETE'
+  })
+}
diff --git a/src/components/Bootx/SuperQuery/README.md b/src/components/Bootx/SuperQuery/README.md
index 0c242cc2efb812e41bb03ca1973e40f127200c53..d2a9050d825e52dd67caa891dbdb932c36525ce4 100644
--- a/src/components/Bootx/SuperQuery/README.md
+++ b/src/components/Bootx/SuperQuery/README.md
@@ -46,9 +46,9 @@
     type: LIST,
     list:
       [
-        { name: '测试1', value: 'cs1' },
-        { name: '测试2', value: 'cs2' },
-        { name: '测试3', value: 'cs3' }
+        { label: '测试1', value: 'cs1' },
+        { label: '测试2', value: 'cs2' },
+        { label: '测试3', value: 'cs3' }
       ] }
 ]
 ```
@@ -58,7 +58,7 @@
 - `type`：数据类型，根据传入不同的的数据类型，使用不同的组件进行查询，对应后端`ParamTypeEnum` 枚举
 - `underLine`：参数名称是否需要转换成下划线命名，默认转换
 - `list`：type数据类型为list的时候，通过这个字段传入
-  - `name`：显示名称
+  - `label`：显示名称
   - `value`：查询的值，等同`field`
 
 **数据类型（type）**
diff --git a/src/components/Bootx/SuperQuery/SuperQueryItem.vue b/src/components/Bootx/SuperQuery/SuperQueryItem.vue
index eaec7b108fb22d0e374a6ca591c4ec708d089eb8..40e34c1325b7dda7c7ae0348de52237de266766d 100644
--- a/src/components/Bootx/SuperQuery/SuperQueryItem.vue
+++ b/src/components/Bootx/SuperQuery/SuperQueryItem.vue
@@ -33,39 +33,38 @@
         <!-- 判断条件是否是判空 -->
         <a-input disabled v-if="['is_null','not_null'].includes(queryParam.compareType)" value="空"/>
         <!-- 文本输入 -->
-        <a-input v-else-if="paramTypeJudge(index,'string')" placeholder="请输入查询值" v-model="queryParam.paramValue"/>
+        <a-input v-else-if="paramTypeJudge(index,STRING)" placeholder="请输入查询值" v-model="queryParam.paramValue"/>
         <!-- 数字输入 -->
         <a-input-number
           style="width: 100%"
-          v-else-if="paramTypeJudge(index,'number')"
+          v-else-if="paramTypeJudge(index,NUMBER)"
           placeholder="请输入查询值"
           :precision="queryParam.precision?queryParam.precision:0"
           v-model="queryParam.paramValue"/>
         <!-- 布尔 -->
-        <a-radio-group v-else-if="paramTypeJudge(index,'boolean')" v-model="queryParam.paramValue">
+        <a-radio-group v-else-if="paramTypeJudge(index,BOOLEAN)" v-model="queryParam.paramValue">
           <a-radio :value="true">是</a-radio>
           <a-radio :value="false">否</a-radio>
         </a-radio-group>
         <!-- 列表 -->
-        <a-select v-else-if="paramTypeJudge(index,'list')" placeholder="请选择查询值" v-model="queryParam.paramValue">
-          <a-select-option v-for="o in getSelectData(index)" :key="o.value" :value="o.value"> {{ o.name }}</a-select-option>
+        <a-select v-else-if="paramTypeJudge(index,LIST)" placeholder="请选择查询值" v-model="queryParam.paramValue" :options="getSelectData(index)">
         </a-select>
         <!-- 日期 -->
         <a-date-picker
-          v-else-if="paramTypeJudge(index,'date')"
+          v-else-if="paramTypeJudge(index,DATE)"
           placeholder="请选择日期"
           :valueFormat="queryParam.format?queryParam.format:'yyyy-MM-DD'"
           v-model="queryParam.paramValue"/>
         <!-- 时间 -->
         <a-time-picker
-          v-else-if="paramTypeJudge(index,'time')"
+          v-else-if="paramTypeJudge(index,TIME)"
           placeholder="请选择时间"
           :valueFormat="queryParam.format?queryParam.format:'HH:mm:ss'"
           v-model="queryParam.paramValue"/>
         <!-- 日期时间 -->
         <a-date-picker
           showTime
-          v-else-if="paramTypeJudge(index,'date_time')"
+          v-else-if="paramTypeJudge(index,DATE_TIME)"
           placeholder="请选择日期时间"
           :valueFormat="queryParam.format?queryParam.format:'yyyy-MM-DD HH:mm:ss'"
           v-model="queryParam.paramValue"/>
@@ -85,7 +84,7 @@
 </template>
 
 <script>
-
+import { NUMBER, LIST, BOOLEAN, DATE, DATE_TIME, TIME, STRING } from './superQueryCode'
 export default {
   name: 'SuperQueryItem',
   model: {
@@ -112,6 +111,13 @@ export default {
 
   data () {
     return {
+      NUMBER,
+      LIST,
+      BOOLEAN,
+      DATE,
+      DATE_TIME,
+      TIME,
+      STRING,
       // 查询类型
       compareTypeList: [
         { type: 'eq', name: '等于' },
diff --git a/src/components/Editor/WangEditor.vue b/src/components/Editor/WangEditor.vue
deleted file mode 100644
index 39352294e90e022e8db03dd39b15eba46c2ed066..0000000000000000000000000000000000000000
--- a/src/components/Editor/WangEditor.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-  <div :class="prefixCls">
-    <div ref="editor" class="editor-wrapper"></div>
-  </div>
-</template>
-
-<script>
-import WEditor from '@wangeditor/editorwangeditor'
-
-export default {
-  name: 'WangEditor',
-  props: {
-    prefixCls: {
-      type: String,
-      default: 'ant-editor-wang'
-    },
-    // eslint-disable-next-line
-    value: {
-      type: String
-    }
-  },
-  data () {
-    return {
-      editor: null,
-      editorContent: null
-    }
-  },
-  watch: {
-    value (val) {
-      this.editorContent = val
-      this.editor.txt.html(val)
-    }
-  },
-  mounted () {
-    this.initEditor()
-  },
-  methods: {
-    initEditor () {
-      this.editor = new WEditor(this.$refs.editor)
-      // this.editor.onchangeTimeout = 200
-      this.editor.config.onchange = (html) => {
-        this.editorContent = html
-        this.$emit('change', this.editorContent)
-      }
-      this.editor.create()
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.ant-editor-wang {
-  .editor-wrapper {
-    text-align: left;
-  }
-}
-</style>
diff --git a/src/components/KFormDesign/packages/KBatch/batch.vue b/src/components/KFormDesign/packages/KBatch/batch.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6c3c7369d0a08ae5d7db338e05bc286a55db05fc
--- /dev/null
+++ b/src/components/KFormDesign/packages/KBatch/batch.vue
@@ -0,0 +1,204 @@
+<!--
+ * @Description: 动态表格 用于批量填入数据
+ * @Author: kcz
+ * @Date: 2020-03-27 18:36:56
+ * @LastEditors: kcz
+ * @LastEditTime: 2021-05-14 14:04:14
+ -->
+<template>
+  <a-form-model
+    ref="dynamicValidateForm"
+    layout="inline"
+    :model="dynamicValidateForm"
+  >
+    <a-table
+      class="batch-table"
+      :pagination="false"
+      :rowKey="record => record.key"
+      :columns="columns"
+      :dataSource="dynamicValidateForm.domains"
+      bordered
+      :scroll="{
+        x: listLength * 190 + 80 + (!record.options.hideSequence ? 60 : 0),
+        y: record.options.scrollY
+      }"
+    >
+      <template
+        v-for="item in record.list"
+        :slot="item.key"
+        slot-scope="text, record, index"
+      >
+        <KFormModelItem
+          :key="item.key + '1'"
+          :record="item"
+          :config="config"
+          :parentDisabled="disabled"
+          :index="index"
+          :domains="dynamicValidateForm.domains"
+          :dynamicData="dynamicData"
+          v-model="record[item.model]"
+          @input="handleInput"
+        />
+      </template>
+      <template slot="dynamic-opr-button" slot-scope="text, record">
+        <a-icon
+          title="删除该行"
+          v-if="!disabled"
+          class="dynamic-opr-button"
+          type="minus-circle-o"
+          @click="removeDomain(record)"
+        />
+        <a-icon
+          title="复制添加"
+          v-if="!disabled"
+          type="copy-o"
+          class="dynamic-opr-button"
+          @click="copyDomain(record)"
+        />
+      </template>
+    </a-table>
+    <a-button type="dashed" :disabled="disabled" @click="addDomain">
+      <a-icon type="plus" />增加
+    </a-button>
+  </a-form-model>
+</template>
+
+<script>
+import KFormModelItem from './module/KFormModelItem'
+export default {
+  name: 'KBatch',
+  props: ['record', 'value', 'dynamicData', 'config', 'parentDisabled'],
+
+  components: {
+    KFormModelItem
+  },
+  watch: {
+    value: {
+      // value 需要深度监听及默认先执行handler函数
+      handler (val) {
+        this.dynamicValidateForm.domains = val || []
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  data () {
+    return {
+      dynamicValidateForm: {
+        domains: []
+      }
+    }
+  },
+  computed: {
+    listLength () {
+      return this.record.list.filter(item => !item.options.hidden).length
+    },
+    columns () {
+      const columns = []
+      if (!this.record.options.hideSequence) {
+        columns.push({
+          title: '序号',
+          dataIndex: 'sequence_index_number',
+          width: '60px',
+          align: 'center',
+          customRender: (text, record, index) => {
+            return index + 1
+          }
+        })
+      }
+
+      columns.push(
+        ...this.record.list
+          .filter(item => !item.options.hidden)
+          .map((item, index) => {
+            return {
+              title: item.label,
+              dataIndex: item.key,
+              width: index === this.record.list.length - 1 ? '' : '190px',
+              scopedSlots: { customRender: item.key }
+            }
+          })
+      )
+
+      columns.push({
+        title: '操作',
+        dataIndex: 'dynamic-opr-button',
+        fixed: 'right',
+        width: '80px',
+        align: 'center',
+        scopedSlots: { customRender: 'dynamic-opr-button' }
+      })
+
+      return columns
+    },
+    disabled () {
+      return this.record.options.disabled || this.parentDisabled
+    }
+  },
+  methods: {
+    validationSubform () {
+      let verification
+      this.$refs.dynamicValidateForm.validate(valid => {
+        verification = valid
+      })
+      return verification
+    },
+    resetForm () {
+      this.$refs.dynamicValidateForm.resetFields()
+    },
+    removeDomain (item) {
+      const index = this.dynamicValidateForm.domains.indexOf(item)
+      if (index !== -1) {
+        this.dynamicValidateForm.domains.splice(index, 1)
+      }
+    },
+    copyDomain (record) {
+      const data = {}
+      this.record.list.forEach(item => {
+        data[item.model] = record[item.model]
+      })
+      this.dynamicValidateForm.domains.push({
+        ...data,
+        key: Date.now()
+      })
+      this.handleInput()
+    },
+    addDomain () {
+      const data = {}
+      this.record.list.forEach(item => {
+        data[item.model] = item.options.defaultValue
+      })
+
+      this.dynamicValidateForm.domains.push({
+        ...data,
+        key: Date.now()
+      })
+      this.handleInput()
+    },
+    handleInput () {
+      this.$emit('change', this.dynamicValidateForm.domains)
+    }
+  }
+}
+</script>
+<style scoped>
+.dynamic-opr-button:last {
+  margin-left: 0px;
+}
+.dynamic-opr-button {
+  cursor: pointer;
+  position: relative;
+  top: 4px;
+  font-size: 16px;
+  color: #999;
+  transition: all 0.3s;
+  margin-left: 6px;
+}
+.dynamic-opr-button:hover {
+  color: #e89;
+}
+.dynamic-opr-button[disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+</style>
diff --git a/src/components/KFormDesign/packages/KBatch/index.js b/src/components/KFormDesign/packages/KBatch/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..c8c01b5afb85ac3058f535f17633f00ecd5469a0
--- /dev/null
+++ b/src/components/KFormDesign/packages/KBatch/index.js
@@ -0,0 +1,2 @@
+import KBatch from './batch.vue'
+export default KBatch
diff --git a/src/components/KFormDesign/packages/KBatch/module/KFormModelItem.vue b/src/components/KFormDesign/packages/KBatch/module/KFormModelItem.vue
new file mode 100644
index 0000000000000000000000000000000000000000..45fe554b605f4cfe4e50ea42cce4e7610c332a2e
--- /dev/null
+++ b/src/components/KFormDesign/packages/KBatch/module/KFormModelItem.vue
@@ -0,0 +1,255 @@
+<!--
+ * @Description: 传入record数据，通过判断record.type，来渲染对应的组件
+ * @Author: kcz
+ * @Date: 2020-01-02 22:41:48
+ * @LastEditors: kcz
+ * @LastEditTime: 2021-05-14 17:30:17
+ -->
+<template>
+  <a-form-model-item
+    v-if="
+      [
+        'input',
+        'textarea',
+        'date',
+        'time',
+        'number',
+        'radio',
+        'checkbox',
+        'select',
+        'rate',
+        'switch',
+        'slider',
+        'uploadImg',
+        'uploadFile',
+        'cascader',
+        'treeSelect'
+      ].includes(record.type)
+    "
+    :prop="`domains.${index}.${record.model}`"
+    :rules="record.rules"
+  >
+    <!-- 多行文本 -->
+    <a-textarea
+      :style="`width:${record.options.width}`"
+      v-if="record.type === 'textarea'"
+      :autoSize="{
+        minRows: record.options.minRows,
+        maxRows: record.options.maxRows
+      }"
+      :disabled="record.options.disabled || parentDisabled"
+      :placeholder="record.options.placeholder"
+      :allowClear="record.options.clearable"
+      :maxLength="record.options.maxLength"
+      :rows="4"
+      :value="value"
+      @change="handleChange($event.target.value)"
+    />
+
+    <!-- 单选框 -->
+    <a-radio-group
+      v-else-if="record.type === 'radio'"
+      :options="
+        !record.options.dynamic
+          ? record.options.options
+          : dynamicData[record.options.dynamicKey]
+          ? dynamicData[record.options.dynamicKey]
+          : []
+      "
+      :disabled="record.options.disabled || parentDisabled"
+      :placeholder="record.options.placeholder"
+      :value="value"
+      :checked="value"
+      @change="handleChange($event.target.value)"
+    />
+
+    <!-- 多选框 -->
+    <a-checkbox-group
+      v-else-if="record.type === 'checkbox'"
+      :options="
+        !record.options.dynamic
+          ? record.options.options
+          : dynamicData[record.options.dynamicKey]
+          ? dynamicData[record.options.dynamicKey]
+          : []
+      "
+      :disabled="record.options.disabled || parentDisabled"
+      :placeholder="record.options.placeholder"
+      :value="value"
+      @change="handleChange"
+    />
+
+    <!-- 滑块 -->
+    <div
+      v-else-if="record.type === 'slider'"
+      :style="`width:${record.options.width}`"
+      class="slider-box"
+    >
+      <div class="slider">
+        <a-slider
+          :disabled="record.options.disabled || parentDisabled"
+          :min="record.options.min"
+          :max="record.options.max"
+          :step="record.options.step"
+          :value="value"
+          @change="handleChange"
+        />
+      </div>
+      <div class="number" v-if="record.options.showInput">
+        <a-input-number
+          style="width:100%"
+          :disabled="record.options.disabled || parentDisabled"
+          :min="record.options.min"
+          :max="record.options.max"
+          :step="record.options.step"
+          :value="value"
+          @change="handleChange"
+        />
+      </div>
+    </div>
+
+    <component
+      v-else
+      :style="`width:${record.options.width}`"
+      v-bind="componentOption"
+      :min="
+        record.options.min || record.options.min === 0
+          ? record.options.min
+          : -Infinity
+      "
+      :max="
+        record.options.max || record.options.max === 0
+          ? record.options.max
+          : Infinity
+      "
+      :count="record.options.max"
+      :precision="
+        record.options.precision > 50 ||
+        (!record.options.precision && record.options.precision !== 0)
+          ? null
+          : record.options.precision
+      "
+      :record="record"
+      :config="config"
+      :disabled="record.options.disabled || parentDisabled"
+      :parentDisabled="record.options.disabled || parentDisabled"
+      :allowClear="record.options.clearable"
+      :dynamicData="dynamicData"
+      :filterOption="
+        record.options.showSearch
+          ? (inputValue, option) => {
+              return (
+                option.componentOptions.children[0].text
+                  .toLowerCase()
+                  .indexOf(inputValue.toLowerCase()) >= 0
+              );
+            }
+          : false
+      "
+      :treeData="
+        !record.options.dynamic
+          ? record.options.options
+          : dynamicData[record.options.dynamicKey]
+          ? dynamicData[record.options.dynamicKey]
+          : []
+      "
+      :options="
+        !record.options.dynamic
+          ? record.options.options
+          : dynamicData[record.options.dynamicKey]
+          ? dynamicData[record.options.dynamicKey]
+          : []
+      "
+      :mode="record.options.multiple ? 'multiple' : ''"
+      :checked="value"
+      :value="value"
+      @change="handleChange($event)"
+      :is="componentItem"
+    ></component>
+  </a-form-model-item>
+  <!-- 文本 -->
+  <a-form-model-item v-else-if="record.type === 'text'">
+    <div :style="{ textAlign: record.options.textAlign }">
+      <label
+        :class="{ 'ant-form-item-required': record.options.showRequiredMark }"
+        :style="{
+          fontFamily: record.options.fontFamily,
+          fontSize: record.options.fontSize,
+          color: record.options.color
+        }"
+        v-text="record.label"
+      ></label>
+    </div>
+  </a-form-model-item>
+  <!-- html -->
+  <div
+    v-else-if="record.type === 'html'"
+    v-html="record.options.defaultValue"
+  ></div>
+
+  <div v-else>
+    <!-- 空 -->
+  </div>
+</template>
+<script>
+/*
+ * author kcz
+ * date 2019-11-20
+ */
+// import moment from "moment";
+
+import UploadFile from "../../UploadFile";
+import UploadImg from "../../UploadImg";
+import KDatePicker from "../../KDatePicker";
+import KTimePicker from "../../KTimePicker";
+import ComponentArray from "../../core/components_use";
+const _ = require("lodash/object");
+
+export default {
+  name: "KFormItem",
+  props: [
+    "record",
+    "domains",
+    "index",
+    "value",
+    "parentDisabled",
+    "dynamicData",
+    "config"
+  ],
+  components: {
+    UploadImg,
+    UploadFile,
+    KDatePicker,
+    KTimePicker
+  },
+  computed: {
+    componentItem() {
+      return ComponentArray[this.record.type];
+    },
+    componentOption() {
+      return _.omit(this.record.options, ["defaultValue", "disabled"]);
+    }
+  },
+  methods: {
+    handleChange(e) {
+      let value = e;
+      if (e.target) {
+        value = e.target.value;
+      }
+      this.$emit("input", value);
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.slider-box {
+  display: flex;
+  > .slider {
+    flex: 1;
+    margin-right: 16px;
+  }
+  > .number {
+    width: 70px;
+  }
+}
+</style>
diff --git a/src/components/KFormDesign/packages/KChangeOption/index.vue b/src/components/KFormDesign/packages/KChangeOption/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b8679128f7ea72d07958f8b6bc61621c1d8fcd78
--- /dev/null
+++ b/src/components/KFormDesign/packages/KChangeOption/index.vue
@@ -0,0 +1,151 @@
+<template>
+  <div class="option-change-container">
+    <a-row v-if="type === 'option' || type === 'tab'" :gutter="8">
+      <div class="option-change-box" v-for="(val, index) in value" :key="index">
+        <a-col
+          :span="9"
+        ><a-input
+          v-model="val.label"
+          placeholder="名称"
+        /></a-col>
+        <a-col :span="9"><a-input v-model="val.value" placeholder="值"/></a-col>
+        <a-col
+          :span="6"
+        ><div @click="handleDelete(index)" class="option-delete-box">
+          <a-icon type="delete" /></div
+        ></a-col>
+      </div>
+      <a-col :span="24"><a @click="handleAdd">添加</a></a-col>
+    </a-row>
+
+    <a-row v-if="type === 'rules'" :gutter="8">
+      <span v-for="(val, index) in value" :key="index">
+        <div class="option-change-box" v-if="index !== 0">
+          <a-col
+            :span="18"
+          ><a-input
+            v-model="val.message"
+            placeholder="提示信息"
+          /></a-col>
+          <a-col
+            :span="18"
+          ><a-input
+            v-model="val.pattern"
+            placeholder="正则表达式pattern"
+          /></a-col>
+          <a-col
+            :span="6"
+          ><div @click="handleDelete(index)" class="option-delete-box">
+            <a-icon type="delete" /></div
+          ></a-col>
+        </div>
+      </span>
+      <a-col :span="24"><a @click="handleAddRules">增加校验</a></a-col>
+    </a-row>
+    <a-row v-else-if="type === 'colspan'" :gutter="8">
+      <div class="option-change-box" v-for="(val, index) in value" :key="index">
+        <a-col
+          :span="18"
+        ><a-input-number
+          style="width:100%"
+          :max="24"
+          v-model="val.span"
+          placeholder="名称"
+        /></a-col>
+        <a-col
+          :span="6"
+        ><div @click="handleDelete(index)" class="option-delete-box">
+          <a-icon type="delete" /></div
+        ></a-col>
+      </div>
+      <a-col :span="24"><a @click="handleAddCol">添加</a></a-col>
+    </a-row>
+  </div>
+</template>
+<script>
+/*
+ * author kcz
+ * date 2019-11-20
+ * description 修改多选、下拉、单选等控件options的组件，添加移除校验规制的组件
+ */
+export default {
+  name: 'KChangeOption',
+  props: {
+    value: {
+      type: Array,
+      required: true
+    },
+    type: {
+      type: String,
+      default: 'option'
+    }
+  },
+  methods: {
+    handleAdd () {
+      // 添加
+      const addData = [
+        ...this.value,
+        {
+          value: `${this.value.length + 1}`,
+          label: '选项' + (this.value.length + 1),
+          list: this.type === 'tab' ? [] : undefined
+        }
+      ]
+      this.$emit('input', addData)
+    },
+    handleAddCol () {
+      // 添加栅格Col
+      const addData = [
+        ...this.value,
+        {
+          span: 12,
+          list: []
+        }
+      ]
+      this.$emit('input', addData)
+    },
+    handleAddRules () {
+      const addData = [
+        ...this.value,
+        {
+          pattern: '',
+          message: ''
+        }
+      ]
+      this.$emit('input', addData)
+    },
+    handleDelete (deleteIndex) {
+      // 删除
+      this.$emit(
+        'input',
+        this.value.filter((val, index) => index !== deleteIndex)
+      )
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.option-change-container {
+  width: calc(100% - 8px);
+}
+.option-change-box {
+  height: 38px;
+  padding-bottom: 6px;
+  .option-delete-box {
+    margin-top: 3px;
+    background: #ffe9e9;
+    color: #f22;
+    width: 32px;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    border-radius: 50%;
+    overflow: hidden;
+    transition: all 0.3s;
+    &:hover {
+      background: #f22;
+      color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/components/KFormDesign/packages/KCheckbox/index.vue b/src/components/KFormDesign/packages/KCheckbox/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4397c23068955f904b1cdc4a7b9bc3235c37ced2
--- /dev/null
+++ b/src/components/KFormDesign/packages/KCheckbox/index.vue
@@ -0,0 +1,44 @@
+<template>
+  <a-checkbox :val="_val" @change="handleChange" :checked="chackboxVal">
+    {{ label }}
+  </a-checkbox>
+</template>
+<script>
+/*
+ * author kcz
+ * date 2019-11-20
+ * description 多选框组件,改成v-model Boolean值
+ */
+export default {
+  name: 'KCheckbox',
+  data () {
+    return {
+      chackboxVal: false
+    }
+  },
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    label: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    _val () {
+      this.handleSetChackboxVal(this.value)
+      return this.value
+    }
+  },
+  methods: {
+    handleChange (e) {
+      this.$emit('input', e.target.checked)
+    },
+    handleSetChackboxVal (val) {
+      this.chackboxVal = val
+    }
+  }
+}
+</script>
diff --git a/src/components/KFormDesign/packages/KDatePicker/datePicker.vue b/src/components/KFormDesign/packages/KDatePicker/datePicker.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c2f517ff3c3d97356b41b26ff55bfe595d215d91
--- /dev/null
+++ b/src/components/KFormDesign/packages/KDatePicker/datePicker.vue
@@ -0,0 +1,89 @@
+<!--
+ * @Description: 日期选择器
+ * @Author: kcz
+ * @Date: 2020-01-11 15:38:28
+ * @LastEditors: kcz
+ * @LastEditTime: 2020-03-28 17:37:49
+ -->
+<template>
+  <!-- 月份选择 -->
+  <a-month-picker
+    :style="`width:${record.options.width}`"
+    v-if="
+      record.type === 'date' &&
+        record.options.format === 'YYYY-MM' &&
+        record.options.range === false
+    "
+    :disabled="record.options.disabled || parentDisabled"
+    :allowClear="record.options.clearable"
+    :placeholder="record.options.placeholder"
+    :format="record.options.format"
+    @change="handleSelectChange"
+    :value="date"
+  />
+  <!-- 日期选择 -->
+  <a-date-picker
+    :style="`width:${record.options.width}`"
+    v-else-if="record.type === 'date' && record.options.range === false"
+    :disabled="record.options.disabled || parentDisabled"
+    :show-time="record.options.showTime"
+    :allowClear="record.options.clearable"
+    :placeholder="record.options.placeholder"
+    :format="record.options.format"
+    @change="handleSelectChange"
+    :value="date"
+  />
+
+  <!-- 范围日期选择 -->
+  <a-range-picker
+    :style="`width:${record.options.width}`"
+    v-else-if="record.type === 'date' && record.options.range === true"
+    :show-time="record.options.showTime"
+    :disabled="record.options.disabled || parentDisabled"
+    :allowClear="record.options.clearable"
+    :placeholder="record.options.rangePlaceholder"
+    :format="record.options.format"
+    @change="handleSelectChange"
+    :value="date"
+  />
+</template>
+<script>
+import moment from 'moment'
+export default {
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['record', 'value', 'parentDisabled'],
+  data () {
+    return {
+      // date: undefined
+    }
+  },
+  computed: {
+    date () {
+      if (
+        !this.value ||
+        (this.record.options.range && this.value.length === 0)
+      ) {
+        return undefined
+      } else if (this.record.options.range) {
+        return this.value.map(item => moment(item, this.record.options.format))
+      } else {
+        return moment(this.value, this.record.options.format)
+      }
+    }
+  },
+  methods: {
+    handleSelectChange (val) {
+      let date
+      if (!val || (this.record.options.range && val.length === 0)) {
+        date = ''
+      } else if (this.record.options.range) {
+        date = val.map(item => item.format(this.record.options.format))
+      } else {
+        date = val.format(this.record.options.format)
+      }
+      this.$emit('change', date)
+      this.$emit('input', date)
+    }
+  }
+}
+</script>
diff --git a/src/components/KFormDesign/packages/KDatePicker/index.js b/src/components/KFormDesign/packages/KDatePicker/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..c47ad8ed81bd023a68a22876c3b1f29a6a198eaa
--- /dev/null
+++ b/src/components/KFormDesign/packages/KDatePicker/index.js
@@ -0,0 +1,2 @@
+import DatePicker from './datePicker.vue'
+export default DatePicker
diff --git a/src/components/KFormDesign/packages/KEditor/index.js b/src/components/KFormDesign/packages/KEditor/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..a3f87269edf77dc40d742afdbe5cc1428ac9dd67
--- /dev/null
+++ b/src/components/KFormDesign/packages/KEditor/index.js
@@ -0,0 +1,9 @@
+/*
+ * @Description:导出富文本编辑器
+ * @Author: kcz
+ * @Date: 2020-03-30 12:45:04
+ * @LastEditors: kcz
+ * @LastEditTime: 2020-03-30 12:45:40
+ */
+import KEditor from './kEditor.vue'
+export default KEditor
diff --git a/src/components/KFormDesign/packages/KEditor/kEditor.vue b/src/components/KFormDesign/packages/KEditor/kEditor.vue
new file mode 100644
index 0000000000000000000000000000000000000000..237887ea4952ff67d576940d2241b29158e66814
--- /dev/null
+++ b/src/components/KFormDesign/packages/KEditor/kEditor.vue
@@ -0,0 +1,62 @@
+<!--
+ * @Description: 对vue-quill-editor封装
+ * @Author: kcz
+ * @Date: 2020-03-30 12:44:03
+ * @LastEditors: kcz
+ * @LastEditTime: 2020-04-26 19:21:27
+ -->
+<template>
+  <quillEditor
+    :style="{ height: `${record.options.height}px` }"
+    :value="value"
+    ref="vueQuillEditor"
+    class="ql-editor-class"
+    :class="{ chinesization: record.options.chinesization }"
+    :options="editorOption"
+    :disabled="record.options.disabled || parentDisabled"
+    @blur="onEditorBlur($event)"
+    @focus="onEditorFocus($event)"
+    @change="onEditorChange($event)"
+  >
+  </quillEditor>
+</template>
+<script>
+import { quillEditor } from 'vue-quill-editor' // 调用编辑器
+import 'quill/dist/quill.core.css'
+import 'quill/dist/quill.snow.css'
+import 'quill/dist/quill.bubble.css'
+
+export default {
+  name: 'Editor',
+  props: ['value', 'record', 'parentDisabled'],
+  components: { quillEditor },
+  data () {
+    return {
+      editorOption: {
+        placeholder: this.record.options.placeholder
+      }
+    }
+  },
+  methods: {
+    onEditorBlur () {}, // 失去焦点事件
+    onEditorFocus () {}, // 获得焦点事件
+    onEditorChange (e) {
+      this.$emit('change', e.html)
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.ql-editor-class {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  line-height: 1.42;
+  height: 100%;
+  outline: none;
+  padding: 0 0 66px;
+  tab-size: 4;
+  -moz-tab-size: 4;
+  text-align: left;
+  word-wrap: break-word;
+}
+</style>
diff --git a/src/components/KFormDesign/packages/KFormBuild/README.md b/src/components/KFormDesign/packages/KFormBuild/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..a5945262f61cc1d6c9d726a12c64a1f8d62137e8
--- /dev/null
+++ b/src/components/KFormDesign/packages/KFormBuild/README.md
@@ -0,0 +1,62 @@
+KFormBuild
+====
+  构建表单
+ 将传入的json数组,解析成ant UI组件
+
+
+### 使用方式
+
+```vue
+<template>
+  <k-form-build :value="jsonData" />
+</template>
+
+<script>
+
+const jsonData = {
+	"list": [
+		{
+			"type": "input",
+			"name": "单行文本",
+			"options": {
+				"width": "100%",
+				"defaultValue": "",
+				"placeholder": "请输入",
+				"disabled": false
+			},
+			"model": "input_1569051592984",
+			"key": "input_1569051592984",
+			"rules": [
+				{
+					"required": false,
+					"message": "必填项"
+				}
+			]
+		}
+	],
+	"config": {
+		"layout": "horizontal",
+		"labelCol": {
+			"span": 4
+		},
+		"wrapperCol": {
+			"span": 18
+		},
+		"hideRequiredMark": false,
+		"customStyle": ""
+	}
+}
+export default {
+  data() {
+    return {
+      form: this.$form.createForm(this),
+      jsonData
+    }
+  }
+}
+</script>
+```
+
+
+父组件可调用函数 getData - 返回Porimse对象
+
diff --git a/src/components/KFormDesign/packages/KFormBuild/buildBlocks.vue b/src/components/KFormDesign/packages/KFormBuild/buildBlocks.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3e69500b18426b52439926b69bb94d67c4b8dca4
--- /dev/null
+++ b/src/components/KFormDesign/packages/KFormBuild/buildBlocks.vue
@@ -0,0 +1,220 @@
+<template>
+  <!-- 标签页布局 -->
+  <a-tabs
+    v-if="record.type === 'tabs'"
+    class="grid-row"
+    :default-active-key="0"
+    :tabBarGutter="record.options.tabBarGutter"
+    :type="record.options.type"
+    :size="record.options.size"
+    :tabPosition="record.options.tabPosition"
+    :animated="record.options.animated"
+    v-model="activeKey"
+  >
+    <a-tab-pane
+      v-for="(tabItem, index) in record.columns"
+      :key="index"
+      :tab="tabItem.label"
+      :forceRender="true"
+    >
+      <buildBlocks
+        ref="nestedComponents"
+        @handleReset="$emit('handleReset')"
+        @change="handleChange"
+        v-for="item in tabItem.list"
+        :disabled="disabled"
+        :dynamicData="dynamicData"
+        :key="item.key"
+        :record="item"
+        :formConfig="formConfig"
+        :config="config"
+      />
+    </a-tab-pane>
+  </a-tabs>
+  <!-- 栅格布局 -->
+  <a-row
+    v-else-if="record.type === 'grid'"
+    class="grid-row"
+    :gutter="record.options.gutter"
+  >
+    <a-col
+      class="grid-col"
+      v-for="(colItem, idnex) in record.columns"
+      :key="idnex"
+      :span="colItem.span || 0"
+    >
+      <buildBlocks
+        ref="nestedComponents"
+        @handleReset="$emit('handleReset')"
+        @change="handleChange"
+        v-for="item in colItem.list"
+        :disabled="disabled"
+        :dynamicData="dynamicData"
+        :key="item.key"
+        :record="item"
+        :formConfig="formConfig"
+        :config="config"
+      />
+    </a-col>
+  </a-row>
+  <!-- 卡片布局 -->
+  <a-card
+    v-else-if="record.type === 'card'"
+    class="grid-row"
+    :title="record.label"
+  >
+    <buildBlocks
+      ref="nestedComponents"
+      @handleReset="$emit('handleReset')"
+      @change="handleChange"
+      v-for="item in record.list"
+      :disabled="disabled"
+      :dynamicData="dynamicData"
+      :key="item.key"
+      :record="item"
+      :formConfig="formConfig"
+      :config="config"
+    />
+  </a-card>
+  <!-- 表格布局 -->
+  <table
+    v-else-if="record.type === 'table'"
+    class="kk-table-9136076486841527"
+    :class="{
+      bright: record.options.bright,
+      small: record.options.small,
+      bordered: record.options.bordered
+    }"
+    :style="record.options.customStyle"
+  >
+    <tr v-for="(trItem, trIndex) in record.trs" :key="trIndex">
+      <td
+        class="table-td"
+        v-for="(tdItem, tdIndex) in trItem.tds.filter(
+          item => item.colspan && item.rowspan
+        )"
+        :key="tdIndex"
+        :colspan="tdItem.colspan"
+        :rowspan="tdItem.rowspan"
+      >
+        <buildBlocks
+          ref="nestedComponents"
+          @handleReset="$emit('handleReset')"
+          @change="handleChange"
+          v-for="item in tdItem.list"
+          :disabled="disabled"
+          :dynamicData="dynamicData"
+          :key="item.key"
+          :record="item"
+          :formConfig="formConfig"
+          :config="config"
+        />
+      </td>
+    </tr>
+  </table>
+
+  <KFormItem
+    v-else-if="!record.options.hidden"
+    ref="nestedComponents"
+    @handleReset="$emit('handleReset')"
+    @change="handleChange"
+    :disabled="disabled"
+    :dynamicData="dynamicData"
+    :key="record.key"
+    :record="record"
+    :formConfig="formConfig"
+    :config="config"
+  />
+</template>
+<script>
+/*
+ * author kcz
+ * date 2019-11-20
+ */
+import KFormItem from '../KFormItem/index'
+export default {
+  name: 'BuildBlocks',
+  props: {
+    record: {
+      type: Object,
+      required: true
+    },
+    formConfig: {
+      type: Object,
+      required: true
+    },
+    config: {
+      type: Object,
+      default: () => ({})
+    },
+    dynamicData: {
+      type: Object,
+      required: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    validatorError: {
+      type: [Object, null],
+      default: () => ({})
+    }
+  },
+  components: {
+    KFormItem
+  },
+  data () {
+    return {
+      activeKey: 0
+    }
+  },
+  methods: {
+    validationSubform () {
+      // 验证动态表格
+      const nestedComponents = this.$refs.nestedComponents
+      if (
+        typeof nestedComponents === 'object' &&
+        nestedComponents instanceof Array
+      ) {
+        for (let i = 0; nestedComponents.length > i; i++) {
+          if (!nestedComponents[i].validationSubform()) {
+            return false
+          }
+        }
+        return true
+      } else if (typeof nestedComponents !== 'undefined') {
+        return nestedComponents.validationSubform()
+      } else {
+        return true
+      }
+    },
+    handleChange (value, key) {
+      this.$emit('change', value, key)
+    }
+  },
+  watch: {
+    /**
+     * @author: lizhichao<meteoroc@outlook.com>
+     * @description: 监视validatorError对象，当检测到Tabs中有表单校验无法通过时，切换到最近校验失败的tab页。
+     */
+    validatorError: {
+      deep: true,
+      handler: function (n) {
+        const errorItems = Object.keys(n)
+        if (errorItems.length) {
+          if (!this.record.columns) return false
+          for (let i = 0; i < this.record.columns.length; i++) {
+            const err = this.record.columns[i].list.filter(item =>
+              errorItems.includes(item.model)
+            )
+            if (err.length) {
+              this.activeKey = i
+              break
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>
diff --git a/src/components/KFormDesign/packages/KFormBuild/index.js b/src/components/KFormDesign/packages/KFormBuild/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..0e0173097a5efb9f6c25bcc55e5995466a72d867
--- /dev/null
+++ b/src/components/KFormDesign/packages/KFormBuild/index.js
@@ -0,0 +1,11 @@
+/*
+ * author kcz
+ * date 2019-11-20
+ */
+import KFormBuild from './index.vue'
+
+KFormBuild.install = function (Vue) {
+  Vue.component(KFormBuild.name, KFormBuild)
+}
+
+export default KFormBuild
diff --git a/src/components/KFormDesign/packages/KFormBuild/index.vue b/src/components/KFormDesign/packages/KFormBuild/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9993d5dcf30982fec06ec558cc31d6a6c0092fe4
--- /dev/null
+++ b/src/components/KFormDesign/packages/KFormBuild/index.vue
@@ -0,0 +1,232 @@
+<template>
+  <a-config-provider :locale="locale">
+    <a-form
+      v-if="
+        typeof value.list !== 'undefined' && typeof value.config !== 'undefined'
+      "
+      class="k-form-build-9136076486841527"
+      :layout="value.config.layout"
+      :hideRequiredMark="value.config.hideRequiredMark"
+      :form="form"
+      @submit="handleSubmit"
+      :style="value.config.customStyle"
+    >
+      <buildBlocks
+        ref="buildBlocks"
+        @handleReset="reset"
+        v-for="(record, index) in value.list"
+        :record="record"
+        :dynamicData="getDynamicData"
+        :config="config"
+        :disabled="disabled"
+        :formConfig="value.config"
+        :validatorError="validatorError"
+        :key="index"
+        @change="handleChange"
+      />
+    </a-form>
+  </a-config-provider>
+</template>
+<script>
+/*
+ * author kcz
+ * date 2019-11-20
+ * description 将json数据构建成表单
+ */
+import buildBlocks from "./buildBlocks";
+import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
+// import moment from "moment";
+export default {
+  name: "KFormBuild",
+  data() {
+    return {
+      locale: zhCN,
+      form: this.$form.createForm(this),
+      validatorError: {},
+      defaultDynamicData: {}
+    };
+  },
+  // props: ["value", "dynamicData"],
+  props: {
+    value: {
+      type: Object,
+      required: true
+    },
+    dynamicData: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    config: {
+      type: Object,
+      default: () => ({})
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    outputString: {
+      type: Boolean,
+      default: false
+    },
+    defaultValue: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  components: {
+    buildBlocks
+  },
+  computed: {
+    getDynamicData() {
+      return typeof this.dynamicData === "object" &&
+        Object.keys(this.dynamicData).length
+        ? this.dynamicData
+        : window.$kfb_dynamicData || {};
+    }
+  },
+  methods: {
+    // moment,
+    handleSubmit(e) {
+      // 提交按钮触发，并触发submit函数，返回getData函数
+      e.preventDefault();
+      this.$emit("submit", this.getData);
+    },
+    reset() {
+      // 重置表单
+      this.form.resetFields();
+    },
+    getData() {
+      // 提交函数，提供父级组件调用
+      return new Promise((resolve, reject) => {
+        try {
+          this.form.validateFields((err, values) => {
+            if (err) {
+              reject(err);
+              /**
+               * @author: lizhichao<meteoroc@outlook.com>
+               * @Description: 多容器校验时，提供error返回给多容器进行判断。
+               */
+              this.validatorError = err;
+              return;
+            }
+            this.validatorError = {};
+            this.$refs.buildBlocks.forEach(item => {
+              if (!item.validationSubform()) {
+                reject(err);
+              }
+            });
+            if (this.outputString) {
+              // 需要所有value转成字符串
+              for (const key in values) {
+                const type = typeof values[key];
+                if (type === "string" || type === "undefined") {
+                  continue;
+                } else if (type === "object") {
+                  values[key] = `k-form-design#${type}#${JSON.stringify(
+                    values[key]
+                  )}`;
+                } else {
+                  values[key] = `k-form-design#${type}#${String(values[key])}`;
+                }
+              }
+              resolve(values);
+            } else {
+              resolve(values);
+            }
+          });
+        } catch (err) {
+          console.error(err);
+          reject(err);
+        }
+      });
+    },
+    setData(json) {
+      return new Promise((resolve, reject) => {
+        try {
+          if (this.outputString) {
+            // 将非string数据还原
+            for (const key in json) {
+              if (!json[key].startsWith("k-form-design#")) {
+                continue;
+              }
+              const array = json[key].split("#");
+              if (array[1] === "object") {
+                json[key] = JSON.parse(array[2]);
+              } else if (array[1] === "number") {
+                json[key] = Number(array[2]);
+              } else if (array[1] === "boolean") {
+                json[key] = Boolean(array[2]);
+              }
+            }
+            this.form.setFieldsValue(json);
+          } else {
+            this.form.setFieldsValue(json);
+          }
+          resolve(true);
+        } catch (err) {
+          console.error(err);
+          reject(err);
+        }
+      });
+    },
+
+    // 批量设置某个option的值
+    setOptions(fields, optionName, value) {
+      fields = new Set(fields);
+
+      // 递归遍历控件树
+      const traverse = array => {
+        array.forEach(element => {
+          if (fields.has(element.model)) {
+            this.$set(element.options, optionName, value);
+          }
+          if (element.type === "grid" || element.type === "tabs") {
+            // 栅格布局 and 标签页
+            element.columns.forEach(item => {
+              traverse(item.list);
+            });
+          } else if (element.type === "card" || element.type === "batch") {
+            // 卡片布局 and  动态表格
+            traverse(element.list);
+          } else if (element.type === "table") {
+            // 表格布局
+            element.trs.forEach(item => {
+              item.tds.forEach(val => {
+                traverse(val.list);
+              });
+            });
+          }
+        });
+      };
+      traverse(this.value.list);
+    },
+    // 隐藏表单字段
+    hide(fields) {
+      this.setOptions(fields, "hidden", true);
+    },
+    // 显示表单字段
+    show(fields) {
+      this.setOptions(fields, "hidden", false);
+    },
+    // 禁用表单字段
+    disable(fields) {
+      this.setOptions(fields, "disabled", true);
+    },
+    // 启用表单字段
+    enable(fields) {
+      this.setOptions(fields, "disabled", false);
+    },
+    handleChange(value, key) {
+      // 触发change事件
+      this.$emit("change", value, key);
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.setData(this.defaultValue);
+    });
+  }
+};
+</script>
diff --git a/src/components/KFormDesign/packages/KFormDesign/config/formItemsConfig.js b/src/components/KFormDesign/packages/KFormDesign/config/formItemsConfig.js
new file mode 100644
index 0000000000000000000000000000000000000000..99e03d6644b4af1682704039df05597c03e8469e
--- /dev/null
+++ b/src/components/KFormDesign/packages/KFormDesign/config/formItemsConfig.js
@@ -0,0 +1,727 @@
+/*
+ * author kcz
+ * date 2019-11-20
+ * description 表单控件项
+ */
+// 基础控件
+export const basicsList = [
+  {
+    type: 'input', // 表单类型
+    label: '输入框', // 标题文字
+    icon: 'icon-write',
+    options: {
+      type: 'text',
+      width: '100%', // 宽度
+      defaultValue: '', // 默认值
+      placeholder: '请输入', // 没有输入时，提示文字
+      clearable: false,
+      maxLength: null,
+      addonBefore: '',
+      addonAfter: '',
+      hidden: false, // 是否隐藏，false显示，true隐藏
+      disabled: false // 是否禁用，false不禁用，true禁用
+    },
+    model: '', // 数据字段
+    key: '',
+    help: '',
+    rules: [
+      // 验证规则
+      {
+        required: false, // 必须填写
+        message: '必填项'
+      }
+    ]
+  },
+  {
+    type: 'textarea', // 表单类型
+    label: '文本框', // 标题文字
+    icon: 'icon-edit',
+    options: {
+      width: '100%', // 宽度
+      minRows: 4,
+      maxRows: 6,
+      maxLength: null,
+      defaultValue: '',
+      clearable: false,
+      hidden: false, // 是否隐藏，false显示，true隐藏
+      disabled: false,
+      placeholder: '请输入'
+    },
+    model: '', // 数据字段
+    key: '',
+    help: '',
+    rules: [
+      {
+        required: false,
+        message: '必填项'
+      }
+    ]
+  },
+  {
+    type: 'number', // 表单类型
+    label: '数字输入框', // 标题文字
+    icon: 'icon-number',
+    options: {
+      width: '100%', // 宽度
+      defaultValue: 0, // 默认值
+      min: null, // 可输入最小值
+      max: null, // 可输入最大值
+      precision: null,
+      step: 1, // 步长，点击加减按钮时候，加减多少
+      hidden: false, // 是否隐藏，false显示，true隐藏
+      disabled: false, // 是否禁用
+      placeholder: '请输入'
+    },
+    model: '', // 数据字段
+    key: '',
+    help: '',
+    rules: [
+      {
+        required: false,
+        message: '必填项'
+      }
+    ]
+  },
+  {
+    type: 'select', // 表单类型
+    label: '下拉选择器', // 标题文字
+    icon: 'icon-xiala',
+    options: {
+      width: '100%', // 宽度
+      defaultValue: undefined, // 下拉选框请使用undefined为默认值
+      multiple: false, // 是否允许多选
+      disabled: false, // 是否禁用
+      clearable: false, // 是否显示清除按钮
+      hidden: false, // 是否隐藏，false显示，true隐藏
+      placeholder: '请选择', // 默认提示文字
+      dynamicKey: '',
+      dynamic: false,
+      options: [
+        // 下拉选择项配置
+        {
+          value: '1',
+          label: '下拉框1'
+        },
+        {
+          value: '2',
+          label: '下拉框2'
+        }
+      ],
+      showSearch: false // 是否显示搜索框，搜索选择的项的值，而不是文字
+    },
+    model: '',
+    key: '',
+    help: '',
+    rules: [
+      {
+        required: false,
+        message: '必填项'
+      }
+    ]
+  },
+  {
+    type: 'checkbox',
+    label: '多选框',
+    icon: 'icon-duoxuan1',
+    options: {
+      disabled: false, // 是否禁用
+      hidden: false, // 是否隐藏，false显示，true隐藏
+      defaultValue: [],
+      dynamicKey: '',
+      dynamic: false,
+      options: [
+        {
+          value: '1',
+          label: '选项1'
+        },
+        {
+          value: '2',
+          label: '选项2'
+        },
+        {
+          value: '3',
+          label: '选项3'
+        }
+      ]
+    },
+    model: '',
+    key: '',
+    help: '',
+    rules: [
+      {
+        required: false,
+        message: '必填项'
+      }
+    ]
+  },
+  {
+    type: 'radio', // 表单类型
+    label: '单选框', // 标题文字
+    icon: 'icon-danxuan-cuxiantiao',
+    options: {
+      disabled: false, // 是否禁用
+      hidden: false, // 是否隐藏，false显示，true隐藏
+      defaultValue: '', // 默认值
+      dynamicKey: '',
+      dynamic: false,
+      options: [
+        {
+          value: '1',
+          label: '选项1'
+        },
+        {
+          value: '2',
+          label: '选项2'
+        },
+        {
+          value: '3',
+          label: '选项3'
+        }
+      ]
+    },
+    model: '',
+    key: '',
+    help: '',
+    rules: [
+      {
+        required: false,
+        message: '必填项'
+      }
+    ]
+  },
+  {
+    type: 'date', // 表单类型
+    label: '日期选择框', // 标题文字
+    icon: 'icon-calendar',
+    options: {
+      width: '100%', // 宽度
+      defaultValue: '', // 默认值，字符串 12:00:00
+      rangeDefaultValue: [], // 默认值，字符串 12:00:00
+      range: false, // 范围日期选择，为true则会显示两个时间选择框（同时defaultValue和placeholder要改成数组），
+      showTime: false, // 是否显示时间选择器
+      disabled: false, // 是否禁用
+      hidden: false, // 是否隐藏，false显示，true隐藏
+      clearable: false, // 是否显示清除按钮
+      placeholder: '请选择',
+      rangePlaceholder: ['开始时间', '结束时间'],
+      format: 'YYYY-MM-DD' // 展示格式  （请按照这个规则写 YYYY-MM-DD HH:mm:ss，区分大小写）
+    },
+    model: '',
+    key: '',
+    help: '',
+    rules: [
+      {
+        required: false,
+        message: '必填项'
+      }
+    ]
+  },
+  {
+    type: 'time', // 表单类型
+    label: '时间选择框', // 标题文字
+    icon: 'icon-time',
+    options: {
+      width: '100%', // 宽度
+      defaultValue: '', // 默认值，字符串 12:00:00
+      disabled: false, // 是否禁用
+      hidden: false, // 是否隐藏，false显示，true隐藏
+      clearable: false, // 是否显示清除按钮
+      placeholder: '请选择',
+      format: 'HH:mm:ss' // 展示格式
+    },
+    model: '',
+    key: '',
+    help: '',
+    rules: [
+      {
+        required: false,
+        message: '必填项'
+      }
+    ]
+  },
+  {
+    type: 'rate', // 表单类型
+    label: '评分', // 标题文字
+    icon: 'icon-pingfen_moren',
+    options: {
+      defaultValue: 0,
+      max: 5, // 最大值
+      disabled: false, // 是否禁用
+      hidden: false, // 是否隐藏，false显示，true隐藏
+      allowHalf: false // 是否允许半选
+    },
+    model: '',
+    key: '',
+    help: '',
+    rules: [
+      {
+        required: false,
+        message: '必填项'
+      }
+    ]
+  },
+  {
+    type: 'slider', // 表单类型
+    label: '滑动输入条', // 标题文字
+    icon: 'icon-menu',
+    options: {
+      width: '100%', // 宽度
+      defaultValue: 0, // 默认值， 如果range为true的时候，则需要改成数组,如：[12,15]
+      disabled: false, // 是否禁用
+      hidden: false, // 是否隐藏，false显示，true隐藏
+      min: 0, // 最小值
+      max: 100, // 最大值
+      step: 1, // 步长，取值必须大于 0，并且可被 (max - min) 整除
+      showInput: false // 是否显示输入框，range为true时，请勿开启
+      // range: false // 双滑块模式
+    },
+    model: '',
+    key: '',
+    help: '',
+    rules: [
+      {
+        required: false,
+        message: '必填项'
+      }
+    ]
+  },
+  {
+    type: 'uploadFile', // 表单类型
+    label: '上传文件', // 标题文字
+    icon: 'icon-upload',
+    options: {
+      defaultValue: '[]',
+      multiple: false,
+      disabled: false,
+      hidden: false, // 是否隐藏，false显示，true隐藏
+      drag: false,
+      downloadWay: 'a',
+      dynamicFun: '',
+      width: '100%',
+      limit: 3,
+      data: '{}',
+      fileName: 'file',
+      headers: {},
+      action: 'http://127..0.0.1/uploadFile.txt',
+      placeholder: '上传'
+    },
+    model: '',
+    key: '',
+    help: '',
+    rules: [
+      {
+        required: false,
+        message: '必填项'
+      }
+    ]
+  },
+  {
+    type: 'uploadImg',
+    label: '上传图片',
+    icon: 'icon-image',
+    options: {
+      defaultValue: '[]',
+      multiple: false,
+      hidden: false, // 是否隐藏，false显示，true隐藏
+      disabled: false,
+      width: '100%',
+      data: '{}',
+      limit: 3,
+      placeholder: '上传',
+      fileName: 'image',
+      headers: {},
+      action: 'http://127.0.0.1/upload-img.txt',
+      listType: 'picture-card'
+    },
+    model: '',
+    key: '',
+    help: '',
+    rules: [
+      {
+        required: false,
+        message: '必填项'
+      }
+    ]
+  },
+  {
+    type: 'treeSelect', // 表单类型
+    label: '树选择器', // 标题文字
+    icon: 'icon-tree',
+    options: {
+      disabled: false, // 是否禁用
+      defaultValue: undefined, // 默认值
+      multiple: false,
+      hidden: false, // 是否隐藏，false显示，true隐藏
+      clearable: false, // 是否显示清除按钮
+      showSearch: false, // 是否显示搜索框，搜索选择的项的值，而不是文字
+      treeCheckable: false,
+      placeholder: '请选择',
+      dynamicKey: '',
+      dynamic: true,
+      options: [
+        {
+          value: '1',
+          label: '选项1',
+          children: [
+            {
+              value: '11',
+              label: '选项11'
+            }
+          ]
+        },
+        {
+          value: '2',
+          label: '选项2',
+          children: [
+            {
+              value: '22',
+              label: '选项22'
+            }
+          ]
+        }
+      ]
+    },
+    model: '',
+    key: '',
+    help: '',
+    rules: [
+      {
+        required: false,
+        message: '必填项'
+      }
+    ]
+  },
+  {
+    type: 'cascader', // 表单类型
+    label: '级联选择器', // 标题文字
+    icon: 'icon-guanlian',
+    options: {
+      disabled: false, // 是否禁用
+      hidden: false, // 是否隐藏，false显示，true隐藏
+      defaultValue: undefined, // 默认值
+      showSearch: false, // 是否显示搜索框，搜索选择的项的值，而不是文字
+      placeholder: '请选择',
+      clearable: false, // 是否显示清除按钮
+      dynamicKey: '',
+      dynamic: true,
+      options: [
+        {
+          value: '1',
+          label: '选项1',
+          children: [
+            {
+              value: '11',
+              label: '选项11'
+            }
+          ]
+        },
+        {
+          value: '2',
+          label: '选项2',
+          children: [
+            {
+              value: '22',
+              label: '选项22'
+            }
+          ]
+        }
+      ]
+    },
+    model: '',
+    key: '',
+    help: '',
+    rules: [
+      {
+        required: false,
+        message: '必填项'
+      }
+    ]
+  },
+  {
+    type: 'batch',
+    label: '动态表格',
+    icon: 'icon-biaoge',
+    list: [],
+    options: {
+      scrollY: 0,
+      disabled: false,
+      hidden: false, // 是否隐藏，false显示，true隐藏
+      showLabel: false,
+      hideSequence: false,
+      width: '100%'
+    },
+    model: '',
+    key: '',
+    help: ''
+  },
+  {
+    type: 'selectInputList',
+    label: '选择输入列',
+    icon: 'icon-biaoge',
+    columns: [
+      {
+        value: '1',
+        label: '选项1',
+        list: []
+      },
+      {
+        value: '2',
+        label: '选项2',
+        list: []
+      }
+    ],
+    options: {
+      disabled: false,
+      multiple: true, // 是否允许多选
+      hidden: false, // 是否隐藏，false显示，true隐藏
+      showLabel: false,
+      width: '100%'
+    },
+    model: '',
+    key: '',
+    help: ''
+  },
+  {
+    type: 'editor',
+    label: '富文本',
+    icon: 'icon-LC_icon_edit_line_1',
+    list: [],
+    options: {
+      height: 300,
+      placeholder: '请输入',
+      defaultValue: '',
+      chinesization: true,
+      hidden: false, // 是否隐藏，false显示，true隐藏
+      disabled: false,
+      showLabel: false,
+      width: '100%'
+    },
+    model: '',
+    key: '',
+    help: '',
+    rules: [
+      {
+        required: false,
+        message: '必填项'
+      }
+    ]
+  },
+  {
+    type: 'switch', // 表单类型
+    label: '开关', // 标题文字
+    icon: 'icon-kaiguan3',
+    options: {
+      defaultValue: false, // 默认值 Boolean 类型
+      hidden: false, // 是否隐藏，false显示，true隐藏
+      disabled: false // 是否禁用
+    },
+    model: '',
+    key: '',
+    help: '',
+    rules: [
+      {
+        required: false,
+        message: '必填项'
+      }
+    ]
+  },
+  {
+    type: 'button', // 表单类型
+    label: '按钮', // 标题文字
+    icon: 'icon-button-remove',
+    options: {
+      type: 'primary',
+      handle: 'submit',
+      dynamicFun: '',
+      hidden: false, // 是否隐藏，false显示，true隐藏
+      disabled: false // 是否禁用，false不禁用，true禁用
+    },
+    key: ''
+  },
+  {
+    type: 'alert',
+    label: '警告提示',
+    icon: 'icon-zu',
+    options: {
+      type: 'success',
+      description: '',
+      showIcon: false,
+      banner: false,
+      hidden: false, // 是否隐藏，false显示，true隐藏
+      closable: false
+    },
+    key: ''
+  },
+  {
+    type: 'text',
+    label: '文字',
+    icon: 'icon-zihao',
+    options: {
+      textAlign: 'left',
+      hidden: false, // 是否隐藏，false显示，true隐藏
+      showRequiredMark: false,
+      color: 'rgb(0, 0, 0)',
+      fontFamily: 'SimHei',
+      fontSize: '16pt'
+    },
+    key: ''
+  },
+  {
+    type: 'html',
+    label: 'HTML',
+    icon: 'icon-ai-code',
+    options: {
+      hidden: false, // 是否隐藏，false显示，true隐藏
+      defaultValue: '<strong>HTML</strong>'
+    },
+    key: ''
+  }
+]
+
+// 高级控件
+// export const highList = [];
+
+// import { Alert } from "ant-design-vue";
+
+// 自定义组件
+export const customComponents = {
+  title: '自定义组件',
+  list: [
+    // {
+    //   label: "测试",
+    //   type: "jkjksdf",
+    //   component: Alert,
+    //   options: {
+    //     multiple: false,
+    //     disabled: false,
+    //     width: "100%",
+    //     data: "{}",
+    //     limit: 3,
+    //     placeholder: "上传",
+    //     action: "",
+    //     listType: "picture-card"
+    //   },
+    //   model: "",
+    //   key: "",
+    //   rules: [
+    //     {
+    //       required: false,
+    //       message: "必填项"
+    //     }
+    //   ]
+    // }
+  ]
+}
+// window.$customComponentList = customComponents.list;
+
+// 布局控件
+export const layoutList = [
+  {
+    type: 'divider',
+    label: '分割线',
+    icon: 'icon-fengexian',
+    options: {
+      orientation: 'left'
+    },
+    key: '',
+    model: ''
+  },
+  {
+    type: 'card',
+    label: '卡片布局',
+    icon: 'icon-qiapian',
+    list: [],
+    key: '',
+    model: ''
+  },
+  {
+    type: 'tabs',
+    label: '标签页布局',
+    icon: 'icon-tabs',
+    options: {
+      tabBarGutter: null,
+      type: 'line',
+      tabPosition: 'top',
+      size: 'default',
+      animated: true
+    },
+    columns: [
+      {
+        value: '1',
+        label: '选项1',
+        list: []
+      },
+      {
+        value: '2',
+        label: '选项2',
+        list: []
+      }
+    ],
+    key: '',
+    model: ''
+  },
+  {
+    type: 'grid',
+    label: '栅格布局',
+    icon: 'icon-zhage',
+    columns: [
+      {
+        span: 12,
+        list: []
+      },
+      {
+        span: 12,
+        list: []
+      }
+    ],
+    options: {
+      gutter: 0
+    },
+    key: '',
+    model: ''
+  },
+  {
+    type: 'table',
+    label: '表格布局',
+    icon: 'icon-biaoge',
+    trs: [
+      {
+        tds: [
+          {
+            colspan: 1,
+            rowspan: 1,
+            list: []
+          },
+          {
+            colspan: 1,
+            rowspan: 1,
+            list: []
+          }
+        ]
+      },
+      {
+        tds: [
+          {
+            colspan: 1,
+            rowspan: 1,
+            list: []
+          },
+          {
+            colspan: 1,
+            rowspan: 1,
+            list: []
+          }
+        ]
+      }
+    ],
+    options: {
+      width: '100%',
+      bordered: true,
+      bright: false,
+      small: true,
+      customStyle: ''
+    },
+    key: '',
+    model: ''
+  }
+]
diff --git a/src/components/KFormDesign/packages/KFormDesign/config/jsonFormat.js b/src/components/KFormDesign/packages/KFormDesign/config/jsonFormat.js
new file mode 100644
index 0000000000000000000000000000000000000000..68241faeed521ed47de198bb03f55cb302e76b8e
--- /dev/null
+++ b/src/components/KFormDesign/packages/KFormDesign/config/jsonFormat.js
@@ -0,0 +1,52 @@
+/*
+ * author kcz
+ * date 2019-11-20
+ * description 默认导入json数据格式
+ */
+export default `{
+	"list": [
+		{
+			"type": "input",
+			"label": "输入框",
+			"options": {
+				"type": "text",
+				"width": "100%",
+				"defaultValue": "",
+				"placeholder": "请输入",
+				"clearable": false,
+				"maxLength": null,
+				"hidden": false,
+				"disabled": false
+			},
+			"model": "input_1603939737389",
+			"key": "input_1603939737389",
+			"rules": [
+				{
+					"required": false,
+					"message": "必填项"
+				}
+			]
+		}
+	],
+	"config": {
+		"layout": "horizontal",
+		"labelCol": {
+			"xs": 4,
+			"sm": 4,
+			"md": 4,
+			"lg": 4,
+			"xl": 4,
+			"xxl": 4
+		},
+		"wrapperCol": {
+			"xs": 18,
+			"sm": 18,
+			"md": 18,
+			"lg": 18,
+			"xl": 18,
+			"xxl": 18
+		},
+		"hideRequiredMark": false,
+		"customStyle": ""
+	}
+}`;
diff --git a/src/components/KFormDesign/packages/KFormDesign/index.js b/src/components/KFormDesign/packages/KFormDesign/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..331cb64a18ce31fd37c2437b46b41c6f8a567ddc
--- /dev/null
+++ b/src/components/KFormDesign/packages/KFormDesign/index.js
@@ -0,0 +1,11 @@
+/*
+ * author kcz
+ * date 2019-11-20
+ */
+import KFormDesign from './index.vue'
+
+KFormDesign.install = function (Vue) {
+  Vue.component(KFormDesign.name, KFormDesign)
+}
+
+export default KFormDesign
diff --git a/src/components/KFormDesign/packages/KFormDesign/index.vue b/src/components/KFormDesign/packages/KFormDesign/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7b3064df55be081bb518d99f119d667948d7da33
--- /dev/null
+++ b/src/components/KFormDesign/packages/KFormDesign/index.vue
@@ -0,0 +1,588 @@
+<template>
+  <a-config-provider :locale="locale">
+    <div class="form-designer-container-9136076486841527">
+      <k-header v-if="showHead" :title="title" />
+      <!-- 操作区域 start -->
+      <operatingArea
+        v-if="toolbarsTop"
+        :showToolbarsText="showToolbarsText"
+        :toolbars="toolbars"
+        @handleSave="handleSave"
+        @handlePreview="handlePreview"
+        @handleOpenImportJsonModal="handleOpenImportJsonModal"
+        @handleOpenCodeModal="handleOpenCodeModal"
+        @handleOpenJsonModal="handleOpenJsonModal"
+        @handleReset="handleReset"
+        @handleClose="handleClose"
+        @handleUndo="handleUndo"
+        @handleRedo="handleRedo"
+        :recordList="recordList"
+        :redoList="redoList"
+      >
+        <template slot="left-action">
+          <slot name="left-action"></slot>
+        </template>
+
+        <template slot="right-action">
+          <slot name="right-action"></slot>
+        </template>
+      </operatingArea>
+      <!-- 操作区域 end -->
+      <div
+        class="content"
+        :class="{
+          'show-head': showHead,
+          'toolbars-top': toolbarsTop,
+          'show-head-and-toolbars-top': toolbarsTop && showHead
+        }"
+      >
+        <!-- 左侧控件区域 start -->
+        <aside class="left">
+          <a-collapse
+            @change="collapseChange"
+            :defaultActiveKey="collapseDefaultActiveKey"
+          >
+            <!-- 基础控件 start -->
+            <a-collapse-panel
+              v-if="basicsArray.length > 0"
+              header="基础控件"
+              key="1"
+            >
+              <collapseItem
+                :list="basicsArray"
+                @generateKey="generateKey"
+                @handleListPush="handleListPush"
+                @start="handleStart"
+              />
+            </a-collapse-panel>
+            <!-- 基础控件 end -->
+            <!-- 自定义控件 start -->
+            <a-collapse-panel
+              v-if="customComponents.list.length > 0"
+              :header="customComponents.title"
+              key="3"
+            >
+              <collapseItem
+                :list="customComponents.list"
+                @generateKey="generateKey"
+                @handleListPush="handleListPush"
+                @start="handleStart"
+              />
+            </a-collapse-panel>
+            <!-- 自定义控件 end -->
+
+            <!-- 布局控件 start -->
+            <a-collapse-panel
+              v-if="layoutArray.length > 0"
+              header="布局控件"
+              key="4"
+            >
+              <collapseItem
+                :list="layoutArray"
+                @generateKey="generateKey"
+                @handleListPush="handleListPush"
+                @start="handleStart"
+              />
+            </a-collapse-panel>
+            <!-- 布局控件 end -->
+          </a-collapse>
+        </aside>
+        <!-- 左侧控件区域 end -->
+
+        <!-- 中间面板区域 start -->
+        <section>
+          <!-- 操作区域 start -->
+          <operatingArea
+            v-if="!toolbarsTop"
+            :showToolbarsText="showToolbarsText"
+            :toolbars="toolbars"
+            @handleSave="handleSave"
+            @handlePreview="handlePreview"
+            @handleOpenImportJsonModal="handleOpenImportJsonModal"
+            @handleOpenCodeModal="handleOpenCodeModal"
+            @handleOpenJsonModal="handleOpenJsonModal"
+            @handleReset="handleReset"
+            @handleClose="handleClose"
+            @handleUndo="handleUndo"
+            @handleRedo="handleRedo"
+            :recordList="recordList"
+            :redoList="redoList"
+          >
+            <template slot="left-action">
+              <slot name="left-action"></slot>
+            </template>
+
+            <template slot="right-action">
+              <slot name="right-action"></slot>
+            </template>
+          </operatingArea>
+          <!-- 操作区域 end -->
+          <k-form-component-panel
+            :class="{ 'no-toolbars-top': !toolbarsTop }"
+            :data="data"
+            :selectItem="selectItem"
+            :noModel="noModel"
+            :hideModel="hideModel"
+            :startType="startType"
+            ref="KFCP"
+            @handleSetSelectItem="handleSetSelectItem"
+          />
+          <!-- 操作区域 start -->
+          <k-json-modal ref="jsonModal" />
+          <k-code-modal ref="codeModal" />
+          <importJsonModal ref="importJsonModal" />
+          <previewModal ref="previewModal" />
+        </section>
+        <!-- 中间面板区域 end -->
+
+        <!-- 右侧控件属性区域 start -->
+        <aside class="right">
+          <a-tabs
+            :activeKey="activeKey"
+            @change="changeTab"
+            :tabBarStyle="{ margin: 0 }"
+          >
+            <a-tab-pane :key="1" tab="表单属性设置">
+              <formProperties
+                :config="data.config"
+                :previewOptions="previewOptions"
+              />
+            </a-tab-pane>
+            <a-tab-pane :key="2" tab="控件属性设置">
+              <formItemProperties
+                class="form-item-properties"
+                :selectItem="selectItem"
+                :hideModel="hideModel"
+              />
+            </a-tab-pane>
+          </a-tabs>
+        </aside>
+        <!-- 右侧控件属性区域 end -->
+      </div>
+      <!-- <k-footer /> -->
+    </div>
+  </a-config-provider>
+</template>
+<script>
+/*
+ * author kcz
+ * date 2019-11-20
+ * description 表单设计器
+ */
+import kHeader from './module/header'
+import operatingArea from './module/operatingArea'
+
+// import kFooter from "./module/footer";
+import kFormComponentPanel from './module/formComponentPanel'
+import kJsonModal from './module/jsonModal'
+import kCodeModal from './module/codeModal'
+import collapseItem from './module/collapseItem'
+import importJsonModal from './module/importJsonModal'
+import previewModal from '../KFormPreview/index.vue'
+import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
+
+import { Revoke } from '../core/revoke'
+import {
+  basicsList,
+  layoutList,
+  customComponents
+} from './config/formItemsConfig'
+import formItemProperties from './module/formItemProperties'
+import formProperties from './module/formProperties'
+export default {
+  name: 'KFormDesign',
+  props: {
+    title: {
+      type: String,
+      default: '表单设计器 --by kcz'
+    },
+    showHead: {
+      type: Boolean,
+      default: true
+    },
+    hideResetHint: {
+      type: Boolean,
+      default: false
+    },
+    toolbarsTop: {
+      type: Boolean,
+      default: false
+    },
+    toolbars: {
+      type: Array,
+      default: () => [
+        'save',
+        'preview',
+        'importJson',
+        'exportJson',
+        'exportCode',
+        'reset',
+        'close',
+        'undo',
+        'redo'
+      ]
+    },
+    showToolbarsText: {
+      type: Boolean,
+      default: false
+    },
+    fields: {
+      type: Array,
+      default: () => [
+        'input',
+        'textarea',
+        'number',
+        'select',
+        'checkbox',
+        'radio',
+        'date',
+        'time',
+        'rate',
+        'slider',
+        'uploadFile',
+        'uploadImg',
+        'cascader',
+        'treeSelect',
+        'batch',
+        'selectInputList',
+        'editor',
+        'switch',
+        'button',
+        'alert',
+        'text',
+        'html',
+        'divider',
+        'card',
+        'tabs',
+        'grid',
+        'table'
+      ]
+    },
+    hideModel: {
+      // 隐藏数据字段
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      locale: zhCN,
+      customComponents,
+      activeKey: 1,
+      updateTime: 0,
+      updateRecordTime: 0,
+      startType: '',
+      revoke: null,
+      recordList: [],
+      redoList: [],
+      noModel: [
+        'button',
+        'divider',
+        'card',
+        'grid',
+        'tabs',
+        'table',
+        'alert',
+        'text',
+        'html'
+      ],
+      data: {
+        list: [],
+        config: {
+          layout: 'horizontal',
+          labelCol: { xs: 4, sm: 4, md: 4, lg: 4, xl: 4, xxl: 4 },
+          labelWidth: 100,
+          labelLayout: 'flex',
+          wrapperCol: { xs: 18, sm: 18, md: 18, lg: 18, xl: 18, xxl: 18 },
+          hideRequiredMark: false,
+          customStyle: ''
+        }
+      },
+      previewOptions: {
+        width: 850
+      },
+      selectItem: {
+        key: ''
+      }
+    }
+  },
+  components: {
+    kHeader,
+    // kFooter,
+    operatingArea,
+    collapseItem,
+    kJsonModal,
+    kCodeModal,
+    importJsonModal,
+    previewModal,
+    kFormComponentPanel,
+    formItemProperties,
+    formProperties
+  },
+  watch: {
+    data: {
+      handler (e) {
+        this.$nextTick(() => {
+          this.revoke.push(e)
+        })
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  computed: {
+    basicsArray () {
+      // 计算需要显示的基础字段
+      return basicsList.filter(item => this.fields.includes(item.type))
+    },
+    layoutArray () {
+      // 计算需要显示的布局字段
+      return layoutList.filter(item => this.fields.includes(item.type))
+    },
+    collapseDefaultActiveKey () {
+      // 计算当前展开的控件列表
+      const defaultActiveKey = window.localStorage.getItem(
+        'collapseDefaultActiveKey'
+      )
+      if (defaultActiveKey) {
+        return defaultActiveKey.split(',')
+      } else {
+        return ['1']
+      }
+    }
+  },
+  methods: {
+    generateKey (list, index) {
+      // 生成key值
+      const key = list[index].type + '_' + new Date().getTime()
+      this.$set(list, index, {
+        ...list[index],
+        key,
+        model: key
+      })
+      if (this.noModel.includes(list[index].type)) {
+        // 删除不需要的model属性
+        delete list[index].model
+      }
+    },
+    handleListPush (item) {
+      // 双击控件按钮push到list
+      // 生成key值
+      if (!this.selectItem.key) {
+        // 在没有选择表单时，将数据push到this.data.list
+        const key = item.type + '_' + new Date().getTime()
+        item = {
+          ...item,
+          key,
+          model: key
+        }
+        if (this.noModel.includes(item.type)) {
+          // 删除不需要的model属性
+          delete item.model
+        }
+        const itemString = JSON.stringify(item)
+        const record = JSON.parse(itemString)
+        // 删除icon及compoent属性
+        delete record.icon
+        delete record.component
+        this.data.list.push(record)
+        this.handleSetSelectItem(record)
+        return false
+      }
+      this.$refs.KFCP.handleCopy(false, item)
+    },
+    handleOpenJsonModal () {
+      // 打开json预览模态框
+      this.$refs.jsonModal.jsonData = this.data
+      this.$refs.jsonModal.visible = true
+    },
+    handleOpenCodeModal () {
+      // 打开代码预览模态框
+      this.$refs.codeModal.jsonData = this.data
+      this.$refs.codeModal.visible = true
+    },
+    handleOpenImportJsonModal () {
+      // 打开json预览模态框
+      this.$refs.importJsonModal.jsonData = this.data
+      this.$refs.importJsonModal.handleSetSelectItem = this.handleSetSelectItem
+      this.$refs.importJsonModal.visible = true
+    },
+    handlePreview () {
+      // 打开预览模态框
+      this.$refs.previewModal.jsonData = this.data
+      this.$refs.previewModal.previewWidth = this.previewOptions.width
+      this.$refs.previewModal.visible = true
+    },
+    handleReset () {
+      // 清空
+      if (this.hideResetHint) {
+        // 不显示提示直接清空
+        this.resetData()
+        return
+      }
+
+      this.$confirm({
+        title: '警告',
+        content: '是否确认清空内容?',
+        okText: '是',
+        okType: 'danger',
+        cancelText: '否',
+        onOk: () => {
+          this.resetData()
+        }
+      })
+    },
+    resetData () {
+      this.data = {
+        list: [],
+        config: {
+          layout: 'horizontal',
+          labelCol: { xs: 4, sm: 4, md: 4, lg: 4, xl: 4, xxl: 4 },
+          labelWidth: 100,
+          labelLayout: 'flex',
+          wrapperCol: { xs: 18, sm: 18, md: 18, lg: 18, xl: 18, xxl: 18 },
+          hideRequiredMark: false,
+          customStyle: ''
+        }
+      }
+      this.handleSetSelectItem({ key: '' })
+      this.$message.success('已清空')
+    },
+    handleSetSelectItem (record) {
+      // 操作间隔不能低于100毫秒
+      const newTime = new Date().getTime()
+      if (newTime - this.updateTime < 100) {
+        return false
+      }
+
+      this.updateTime = newTime
+
+      // 设置selectItem的值
+      this.selectItem = record
+
+      // 判断是否选中控件，如果选中则弹出属性面板，否则关闭属性面板
+      if (record.key) {
+        this.startType = record.type
+        this.changeTab(2)
+      } else {
+        this.changeTab(1)
+      }
+    },
+    /**
+     * @description: 切换属性设置面板
+     * @param {*}
+     * @return {*}
+     */
+
+    changeTab (e) {
+      this.activeKey = e
+    },
+    /**
+     * @Author: kcz
+     * @description: 遍历json结构，获取所有字段
+     * @param {*}
+     * @return {*} Array
+     */
+    getFieldSchema () {
+      const fields = []
+      const traverse = array => {
+        array.forEach(element => {
+          if (element.type === 'grid' || element.type === 'tabs') {
+            // 栅格布局
+            element.columns.forEach(item => {
+              traverse(item.list)
+            })
+          } else if (element.type === 'card') {
+            // 卡片布局
+            traverse(element.list)
+          } else if (element.type === 'batch') {
+            // 动态表格内复制
+            traverse(element.list)
+          } else if (element.type === 'table') {
+            // 表格布局
+            element.trs.forEach(item => {
+              item.tds.forEach(val => {
+                traverse(val.list)
+              })
+            })
+          } else {
+            if (element.model) {
+              fields.push(element)
+            }
+          }
+        })
+      }
+      traverse(this.data.list)
+      return fields
+    },
+    handleSetData (data) {
+      // 用于父组件赋值
+      try {
+        if (typeof data !== 'object') {
+          return false
+        } else {
+          this.data = data
+          // 导入json数据后，需要清除已选择key
+          this.handleSetSelectItem({ key: '' })
+        }
+        return true
+      } catch (error) {
+        console.error(error)
+        return false
+      }
+    },
+    collapseChange (val) {
+      // 点击collapse时，保存当前collapse状态
+      window.localStorage.setItem('collapseDefaultActiveKey', val)
+    },
+    handleStart (type) {
+      this.startType = type
+    },
+
+    /**
+     * @description: 撤销
+     * @param {*}
+     * @return {*}
+     */
+    handleUndo () {
+      const record = this.revoke.undo()
+      if (!record) {
+        return false
+      }
+      this.data = record
+
+      this.handleSetSelectItem({ key: '' })
+    },
+
+    /**
+     * @description: 重做
+     * @param {*}
+     * @return {*}
+     */
+    handleRedo () {
+      const record = this.revoke.redo()
+      if (!record) {
+        return false
+      }
+      this.data = record
+    },
+
+    handleSave () {
+      // 保存函数
+      this.$emit('save', JSON.stringify(this.data))
+    },
+    getValue () {
+      // 获取数据
+      return this.data
+    },
+    handleClose () {
+      this.$emit('close')
+    }
+  },
+  created () {
+    this.revoke = new Revoke()
+    this.recordList = this.revoke.recordList
+    this.redoList = this.revoke.redoList
+  }
+}
+</script>
diff --git a/src/components/KFormDesign/packages/KFormDesign/module/codeModal.vue b/src/components/KFormDesign/packages/KFormDesign/module/codeModal.vue
new file mode 100644
index 0000000000000000000000000000000000000000..142e559fb5174b7b9a0bbfe604ccee898add1c08
--- /dev/null
+++ b/src/components/KFormDesign/packages/KFormDesign/module/codeModal.vue
@@ -0,0 +1,163 @@
+<!--
+ * @Description: 代码预览组件
+ * @Author: kcz
+ * @Date: 2019-12-30 00:37:05
+ * @LastEditors: kcz
+ * @LastEditTime: 2021-05-27 15:18:39
+ -->
+<template>
+  <a-modal
+    title="代码"
+    :footer="null"
+    :visible="visible"
+    @cancel="handleCancel"
+    wrapClassName="code-modal-9136076486841527"
+    style="top:20px;"
+    width="850px"
+    :destroyOnClose="true"
+  >
+    <a-tabs tabPosition="left" style="height:100%">
+      <a-tab-pane tab="VUE" key="1">
+        <!-- vue code start -->
+        <previewCode :editorJson="editorVueJson" fileFormat="vue" />
+        <!-- vue code end -->
+      </a-tab-pane>
+      <a-tab-pane tab="HTML" key="2">
+        <!-- html code start -->
+        <previewCode :editorJson="editorHtmlJson" fileFormat="html" />
+        <!-- html code end -->
+      </a-tab-pane>
+    </a-tabs>
+  </a-modal>
+</template>
+<script>
+/* eslint-enable */
+import previewCode from '../../PreviewCode/index'
+const codeVueFront = `<template>
+  <div>
+    <k-form-build
+      :value="jsonData"
+      ref="KFB"
+      @submit="handleSubmit"
+    />
+    <button @click="getData">提交</button>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Demo',
+  data () {
+    return {
+      jsonData: `
+/* eslint-disable */
+let codeVueLast = `
+    }
+  },
+  methods: {
+    handleSubmit(p) {
+       // 通过表单提交按钮触发，获取promise对象
+       p().then(res => {
+         // 获取数据成功
+         alert(JSON.stringify(res))
+       })
+         .catch(err => {
+           console.log(err, '校验失败')
+         })
+     },
+     getData() {
+       // 通过函数获取数据
+       this.$refs.KFB.getData().then(res => {
+         // 获取数据成功
+         alert(JSON.stringify(res))
+       })
+         .catch(err => {
+           console.log(err, '校验失败')
+         })
+     }
+  }
+}
+<\/script>`;
+
+let codeHtmlFront = `<!DOCTYPE html>
+<html>
+
+<head>
+  <title>表单设计器kcz</title>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" href="http://unpkg.com/k-form-design/lib/k-form-design.css">
+</head>
+
+<body>
+  <div class="app">
+    <k-form-build ref="KFB" @submit="handleSubmit" :value="jsonData"></k-form-build>
+    <button @click="getData">提交</button>
+  </div>
+  <script src="http://cdn.kcz66.com/vue.min.js"><\/script>
+  <script src="http://unpkg.com/k-form-design/lib/k-form-design.umd.min.js"><\/script>
+  <script>
+    let jsonData = `;
+
+    let codeHtmlLast = `
+    let vm = new Vue({
+      el: '.app',
+      data: {
+        jsonData
+      },
+      methods: {
+        handleSubmit(p) {
+          // 通过表单提交按钮触发，获取promise对象
+          p().then(res => {
+            // 获取数据成功
+            alert(JSON.stringify(res))
+          })
+            .catch(err => {
+              console.log(err, '校验失败')
+            })
+        },
+        getData() {
+          // 通过函数获取数据
+          this.$refs.KFB.getData().then(res => {
+            // 获取数据成功
+            alert(JSON.stringify(res))
+          })
+            .catch(err => {
+              console.log(err, '校验失败')
+            })
+        }
+      }
+    })
+  <\/script>
+</body>
+
+</html>`
+export default {
+  name: 'CodeModal',
+  data () {
+    return {
+      visible: false,
+      editorVueJson: '',
+      editorHtmlJson: '',
+      jsonData: {}
+    }
+  },
+  watch: {
+    visible (val) {
+      if (val) {
+        this.editorVueJson =
+          codeVueFront + JSON.stringify(this.jsonData) + codeVueLast
+
+        this.editorHtmlJson =
+          codeHtmlFront + JSON.stringify(this.jsonData) + codeHtmlLast
+      }
+    }
+  },
+  components: {
+    previewCode
+  },
+  methods: {
+    handleCancel () {
+      this.visible = false
+    }
+  }
+}
+</script>
diff --git a/src/components/KFormDesign/packages/KFormDesign/module/collapseItem.vue b/src/components/KFormDesign/packages/KFormDesign/module/collapseItem.vue
new file mode 100644
index 0000000000000000000000000000000000000000..54f26bca775f85841ed9ca28f6d89bafc4b2422b
--- /dev/null
+++ b/src/components/KFormDesign/packages/KFormDesign/module/collapseItem.vue
@@ -0,0 +1,47 @@
+<!--
+ * @Description: 折叠组件
+ * @Author: kcz
+ * @Date: 2020-01-13 00:37:54
+ * @LastEditors: kcz
+ * @LastEditTime: 2020-03-28 11:32:39
+ -->
+<template>
+  <draggable
+    tag="ul"
+    :value="list"
+    v-bind="{
+      group: { name: 'form-draggable', pull: 'clone', put: false },
+      sort: false,
+      animation: 180,
+      ghostClass: 'moving'
+    }"
+    @start="handleStart($event, list)"
+  >
+    <li
+      v-for="(val, index) in list"
+      :key="index"
+      @dragstart="$emit('generateKey', list, index)"
+      @click="$emit('handleListPush', val)"
+    >
+      <svg v-if="val.icon" class="icon" aria-hidden="true">
+        <use :xlink:href="`#${val.icon}`"></use>
+      </svg>
+      {{ val.label }}
+    </li>
+  </draggable>
+</template>
+<script>
+import draggable from 'vuedraggable'
+export default {
+  name: 'CollapseItem',
+  props: ['list'],
+  components: {
+    draggable
+  },
+  methods: {
+    handleStart (e, list) {
+      this.$emit('start', list[e.oldIndex].type)
+    }
+  }
+}
+</script>
diff --git a/src/components/KFormDesign/packages/KFormDesign/module/footer.vue b/src/components/KFormDesign/packages/KFormDesign/module/footer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5b34994768ec49c00482e567c8254a12508e3b43
--- /dev/null
+++ b/src/components/KFormDesign/packages/KFormDesign/module/footer.vue
@@ -0,0 +1,16 @@
+<!--
+ * @Description: 页脚
+ * @Author: kcz
+ * @Date: 2019-12-26 21:15:52
+ * @LastEditors: kcz
+ * @LastEditTime: 2021-05-27 15:18:48
+ -->
+<template>
+  <footer class="footer-9136076486841527">
+    <a
+      target="_new_page"
+      href="https://github.com/Kchengz/k-form-design"
+    >k-form-design</a
+    >
+  </footer>
+</template>
diff --git a/src/components/KFormDesign/packages/KFormDesign/module/formComponentPanel.vue b/src/components/KFormDesign/packages/KFormDesign/module/formComponentPanel.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8c184bb59e3b87fcc4b9633fc893ff21e93b77e1
--- /dev/null
+++ b/src/components/KFormDesign/packages/KFormDesign/module/formComponentPanel.vue
@@ -0,0 +1,510 @@
+<!--
+ * @Description: 表单设计器内容展示操作组件
+ * @Author: kcz
+ * @Date: 2019-12-31 19:39:48
+ * @LastEditors: kcz
+ * @LastEditTime: 2021-05-28 00:27:22
+ -->
+<template>
+  <div class="form-panel">
+    <p class="hint-text" v-show="data.list.length === 0">
+      <a-empty description="从左侧选择控件添加" />
+    </p>
+
+    <a-form
+      class="a-form-box k-form-build"
+      :form="form"
+      :layout="data.config.layout"
+      :hideRequiredMark="data.config.hideRequiredMark"
+      :style="data.config.customStyle"
+    >
+      <draggable
+        tag="div"
+        class="draggable-box"
+        v-bind="{
+          group: 'form-draggable',
+          ghostClass: 'moving',
+          animation: 180,
+          handle: '.drag-move'
+        }"
+        v-model="data.list"
+        @add="deepClone"
+        @start="dragStart($event, data.list)"
+      >
+        <transition-group tag="div" name="list" class="list-main">
+          <layoutItem
+            class="drag-move"
+            v-for="record in data.list"
+            :key="record.key"
+            :record="record"
+            :config="data.config"
+            :selectItem.sync="selectItem"
+            :startType="startType"
+            :insertAllowedType="insertAllowedType"
+            :hideModel="hideModel"
+            @dragStart="dragStart"
+            @handleSelectItem="handleSelectItem"
+            @handleCopy="handleCopy"
+            @handleDelete="handleDelete"
+            @handleColAdd="handleColAdd"
+            @handleShowRightMenu="handleShowRightMenu"
+          />
+        </transition-group>
+      </draggable>
+    </a-form>
+    <!-- 右键菜单 start -->
+    <div
+      v-show="showRightMenu"
+      :style="{ top: menuTop + 'px', left: menuLeft + 'px' }"
+      class="right-menu"
+    >
+      <ul>
+        <li @click="handleDownMerge"><a-icon type="caret-down" />向下合并</li>
+        <li @click="handleRightMerge"><a-icon type="caret-right" />向右合并</li>
+        <li @click="handleRightSplit">
+          <a-icon type="border-inner" />拆分单元格
+        </li>
+        <li @click="handleAddCol">
+          <a-icon type="border-horizontal" />增加一列
+        </li>
+        <li @click="handleAddRow"><a-icon type="border-verticle" />增加一行</li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+import draggable from 'vuedraggable'
+import layoutItem from './layoutItem'
+import 'codemirror/mode/javascript/javascript'
+export default {
+  name: 'KCenter',
+  data () {
+    return {
+      form: this.$form.createForm(this),
+      insertAllowedType: [
+        'input',
+        'textarea',
+        'number',
+        'select',
+        'checkbox',
+        'radio',
+        'date',
+        'time',
+        'rate',
+        'slider',
+        'uploadFile',
+        'uploadImg',
+        'cascader',
+        'treeSelect',
+        'switch',
+        'text',
+        'html'
+      ],
+      rightMenuSelectValue: {},
+      showRightMenu: false,
+      menuTop: 0,
+      menuLeft: 0,
+      trIndex: 0,
+      tdIndex: 0
+    }
+  },
+  props: {
+    noModel: {
+      type: Array,
+      required: true
+    },
+    startType: {
+      type: String,
+      required: true
+    },
+    data: {
+      type: Object,
+      required: true
+    },
+    selectItem: {
+      type: Object,
+      default: () => {}
+    },
+    hideModel: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {
+    draggable,
+    layoutItem
+  },
+  methods: {
+    deepClone (evt) {
+      const newIndex = evt.newIndex
+      // json深拷贝一次
+      const listString = JSON.stringify(this.data.list)
+      this.data.list = JSON.parse(listString)
+      // 删除icon及compoent属性
+      delete this.data.list[newIndex].icon
+      delete this.data.list[newIndex].component
+      this.$emit('handleSetSelectItem', this.data.list[newIndex])
+    },
+    handleColAdd (evt, columns, isCopy = false) {
+      // 重置或者生成key值
+      const newIndex = evt.newIndex
+      const key = columns[newIndex].type + '_' + new Date().getTime()
+      if (columns[newIndex].key === '' || isCopy) {
+        this.$set(columns, newIndex, {
+          ...columns[newIndex],
+          key,
+          model: key
+        })
+        if (this.noModel.includes(columns[newIndex].type)) {
+          // 删除不需要的model属性
+          delete columns[newIndex].model
+        }
+        if (typeof columns[newIndex].options !== 'undefined') {
+          // 深拷贝options
+          const optionsStr = JSON.stringify(columns[newIndex].options)
+          columns[newIndex].options = JSON.parse(optionsStr)
+        }
+        if (typeof columns[newIndex].rules !== 'undefined') {
+          // 深拷贝rules
+          const rulesStr = JSON.stringify(columns[newIndex].rules)
+          columns[newIndex].rules = JSON.parse(rulesStr)
+        }
+        if (typeof columns[newIndex].list !== 'undefined') {
+          // 深拷贝list
+          columns[newIndex].list = []
+        }
+        if (typeof columns[newIndex].columns !== 'undefined') {
+          // 深拷贝columns
+          const columnsStr = JSON.stringify(columns[newIndex].columns)
+          columns[newIndex].columns = JSON.parse(columnsStr)
+          // 复制时，清空数据
+          columns[newIndex].columns.forEach(item => {
+            item.list = []
+          })
+        }
+        if (columns[newIndex].type === 'table') {
+          // 深拷贝trs
+          const trsStr = JSON.stringify(columns[newIndex].trs)
+          columns[newIndex].trs = JSON.parse(trsStr)
+          // 复制时，清空数据
+          columns[newIndex].trs.forEach(item => {
+            item.tds.forEach(val => {
+              val.list = []
+            })
+          })
+        }
+      }
+      // 深拷贝数据
+      const listString = JSON.stringify(columns[newIndex])
+      columns[newIndex] = JSON.parse(listString)
+      this.$emit('handleSetSelectItem', columns[newIndex])
+    },
+    dragStart (evt, list) {
+      // 拖拽结束,自动选择拖拽的控件项
+      this.$emit('handleSetSelectItem', list[evt.oldIndex])
+    },
+    handleSelectItem (record) {
+      // 修改选择Item
+      this.$emit('handleSetSelectItem', record)
+    },
+    handleCopy (isCopy = true, data) {
+      const traverse = array => {
+        array.forEach((element, index) => {
+          if (element.key === this.selectItem.key) {
+            if (isCopy) {
+              // 复制添加到选择节点后面
+              array.splice(index + 1, 0, element)
+            } else {
+              // 双击添加到选择节点后面
+              array.splice(index + 1, 0, data)
+            }
+            // 复制完成，重置key值
+            const evt = {
+              newIndex: index + 1
+            }
+            this.handleColAdd(evt, array, true)
+            return
+          }
+          if (['grid', 'tabs', 'selectInputList'].includes(element.type)) {
+            // 栅格布局
+            element.columns.forEach(item => {
+              traverse(item.list)
+            })
+          } else if (element.type === 'card') {
+            // 卡片布局
+            traverse(element.list)
+          } else if (element.type === 'batch') {
+            // 动态表格内复制
+            if (!isCopy && !this.insertAllowedType.includes(data.type)) {
+              // 插入不允许的字段时，直接return false
+              return false
+            }
+            traverse(element.list)
+          }
+          if (element.type === 'table') {
+            // 表格布局
+            element.trs.forEach(item => {
+              item.tds.forEach(val => {
+                traverse(val.list)
+              })
+            })
+          }
+        })
+      }
+      traverse(this.data.list)
+    },
+    handleDelete () {
+      // 删除已选择
+      const traverse = array => {
+        array = array.filter((element, index) => {
+          if (['grid', 'tabs', 'selectInputList'].includes(element.type)) {
+            // 栅格布局
+            element.columns.forEach(item => {
+              item.list = traverse(item.list)
+            })
+          }
+          if (element.type === 'card' || element.type === 'batch') {
+            // 卡片布局
+            element.list = traverse(element.list)
+          }
+          if (element.type === 'table') {
+            // 表格布局
+            element.trs.forEach(item => {
+              item.tds.forEach(val => {
+                val.list = traverse(val.list)
+              })
+            })
+          }
+          if (element.key !== this.selectItem.key) {
+            return true
+          } else {
+            if (array.length === 1) {
+              this.handleSelectItem({ key: '' })
+            } else if (array.length - 1 > index) {
+              this.handleSelectItem(array[index + 1])
+            } else {
+              this.handleSelectItem(array[index - 1])
+            }
+            return false
+          }
+        })
+        return array
+      }
+
+      this.data.list = traverse(this.data.list)
+    },
+    handleDownMerge () {
+      // 向下合并
+
+      // 判断当前行是否是最后一行，最后一行无法向下合并
+      if (
+        this.rightMenuSelectValue.trs.length -
+          this.rightMenuSelectValue.trs[this.trIndex].tds[this.tdIndex]
+            .rowspan <=
+        this.trIndex
+      ) {
+        this.$message.error('当前是最后一行，无法向下合并')
+        return false
+      }
+
+      // 获取当前单元格的rowspan
+      const currentRowspan = this.rightMenuSelectValue.trs[this.trIndex].tds[
+        this.tdIndex
+      ].rowspan
+
+      // 判断下一列单元格与当前单元格的colspan是否一致，如果不一致则无法合并
+      if (
+        this.rightMenuSelectValue.trs[this.trIndex].tds[this.tdIndex]
+          .colspan !==
+        this.rightMenuSelectValue.trs[this.trIndex + currentRowspan].tds[
+          this.tdIndex
+        ].colspan
+      ) {
+        this.$message.error('当前表格无法向下合并')
+        return false
+      }
+
+      // 获取下一列单元格的rowspan
+      const nextRowSpan = this.rightMenuSelectValue.trs[
+        this.trIndex + currentRowspan
+      ].tds[this.tdIndex].rowspan
+
+      // 当前单元格rowspan等于当前单元格rowspan加上下一列单元格rowspan
+      this.rightMenuSelectValue.trs[this.trIndex].tds[this.tdIndex].rowspan =
+        currentRowspan + nextRowSpan
+
+      // 将被合并的单元rowspan修改为0
+      this.rightMenuSelectValue.trs[this.trIndex + currentRowspan].tds[
+        this.tdIndex
+      ].rowspan = 0
+
+      // 清空被合并单元格list
+      this.rightMenuSelectValue.trs[this.trIndex + currentRowspan].tds[
+        this.tdIndex
+      ].list = []
+    },
+    handleRightMerge () {
+      // 向右合并
+      // 获取当前列的所有colspan总和
+      const sumCols = this.rightMenuSelectValue.trs[this.trIndex].tds
+        .map(item => item.colspan)
+        .reduce(function (partial, value) {
+          return partial + value
+        })
+
+      // 判断是否是最后一列，最后一列无法继续向右合并
+      if (
+        sumCols -
+          this.rightMenuSelectValue.trs[this.trIndex].tds[this.tdIndex]
+            .colspan <=
+        this.tdIndex
+      ) {
+        this.$message.error('当前是最后一列，无法向右合并')
+        return false
+      }
+
+      // 获取当前单元格的colspan
+      const currentColspan = this.rightMenuSelectValue.trs[this.trIndex].tds[
+        this.tdIndex
+      ].colspan
+
+      // 判断需要合并的单元格rowspan是否与当前单元格一致
+      if (
+        this.rightMenuSelectValue.trs[this.trIndex].tds[this.tdIndex]
+          .rowspan !==
+        this.rightMenuSelectValue.trs[this.trIndex].tds[
+          this.tdIndex + currentColspan
+        ].rowspan
+      ) {
+        this.$message.error('当前表格无法向右合并')
+        return false
+      }
+
+      // 合并单元格colspan
+      this.rightMenuSelectValue.trs[this.trIndex].tds[
+        this.tdIndex
+      ].colspan += this.rightMenuSelectValue.trs[this.trIndex].tds[
+        this.tdIndex + currentColspan
+      ].colspan
+
+      // 将被合并的单元格colspan设置为0
+      this.rightMenuSelectValue.trs[this.trIndex].tds[
+        this.tdIndex + currentColspan
+      ].colspan = 0
+
+      // 情况被合并单元格的list
+      this.rightMenuSelectValue.trs[this.trIndex].tds[
+        this.tdIndex + currentColspan
+      ].list = []
+    },
+    // 拆分单元格
+    handleRightSplit () {
+      // 获取当前单元格的colspan及rowspan
+      const { colspan, rowspan } = this.rightMenuSelectValue.trs[
+        this.trIndex
+      ].tds[this.tdIndex]
+
+      for (
+        let rowIndex = this.trIndex, rowLen = this.trIndex + rowspan;
+        rowIndex < rowLen;
+        rowIndex++
+      ) {
+        for (
+          let colIndex = this.tdIndex, colLen = this.tdIndex + colspan;
+          colIndex < colLen;
+          colIndex++
+        ) {
+          if (rowIndex === this.trIndex && colIndex === this.tdIndex) continue
+          this.rightMenuSelectValue.trs[rowIndex].tds.splice(colIndex, 1, {
+            colspan: 1,
+            rowspan: 1,
+            list: []
+          })
+        }
+      }
+      // 修改当前单元格colspan、rowspan为1
+      this.rightMenuSelectValue.trs[this.trIndex].tds[this.tdIndex].colspan = 1
+      this.rightMenuSelectValue.trs[this.trIndex].tds[this.tdIndex].rowspan = 1
+    },
+    handleAddCol () {
+      // 增加列
+
+      this.rightMenuSelectValue.trs.forEach(item => {
+        item.tds.splice(this.tdIndex + 1, 0, {
+          colspan: 1,
+          rowspan: 1,
+          list: []
+        })
+      })
+    },
+    handleAddRow () {
+      // 增加行
+      // 获取总col值
+      const sumCols = this.rightMenuSelectValue.trs[0].tds
+        .map(item => item.colspan)
+        .reduce(function (partial, value) {
+          return partial + value
+        })
+      const rowJson = { tds: [] }
+      for (let i = 0; i < sumCols; i++) {
+        rowJson.tds.push({
+          colspan: 1,
+          rowspan: 1,
+          list: []
+        })
+      }
+
+      // 取当前rowspan最大值
+      let maxRowSpan = 1
+      this.rightMenuSelectValue.trs[this.trIndex].tds.forEach(item => {
+        if (maxRowSpan < item.rowspan) {
+          maxRowSpan = item.rowspan
+        }
+      })
+
+      // 在rowspan最大值处插入数据
+      this.rightMenuSelectValue.trs.splice(
+        this.trIndex + maxRowSpan,
+        0,
+        rowJson
+      )
+    },
+    handleShowRightMenu (e, val, trIndex, tdIndex) {
+      // 显示右键菜单
+      e.stopPropagation()
+      // this.fileItem = item
+      // 显示
+      this.showRightMenu = true
+
+      // 定位
+      this.menuTop = e.clientY
+      this.menuLeft = e.clientX
+      // this.rightMenuType = type
+      // this.rightId = id
+      this.activeArr = [val]
+      this.rightMenuSelectValue = val
+      this.trIndex = trIndex
+      this.tdIndex = tdIndex
+      return false
+    },
+    handleRemoveRightMenu () {
+      // 取消右键菜单
+      this.showRightMenu = false
+    }
+  },
+  mounted () {
+    // 添加监听取消右键菜单
+    document.addEventListener('click', this.handleRemoveRightMenu, true)
+    document.addEventListener('contextmenu', this.handleRemoveRightMenu, true)
+  },
+  destroyed () {
+    // 移除监听
+    document.removeEventListener('click', this.handleRemoveRightMenu, true)
+    document.removeEventListener(
+      'contextmenu',
+      this.handleRemoveRightMenu,
+      true
+    )
+  }
+}
+</script>
diff --git a/src/components/KFormDesign/packages/KFormDesign/module/formItemProperties.vue b/src/components/KFormDesign/packages/KFormDesign/module/formItemProperties.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a84268516665aef0486d09d7f07d040a4ac55743
--- /dev/null
+++ b/src/components/KFormDesign/packages/KFormDesign/module/formItemProperties.vue
@@ -0,0 +1,664 @@
+<template>
+  <div class="properties-centent kk-checkbox">
+    <div class="properties-body">
+      <a-empty
+        class="hint-box"
+        v-show="selectItem.key === ''"
+        description="未选择控件"
+      />
+
+      <a-form v-show="selectItem.key !== ''">
+        <a-form-item
+          v-if="typeof selectItem.label !== 'undefined'"
+          label="标签"
+        >
+          <a-input v-model="selectItem.label" placeholder="请输入" />
+        </a-form-item>
+
+        <a-form-item
+          v-if="!hideModel && typeof selectItem.model !== 'undefined'"
+          label="数据字段"
+        >
+          <a-input v-model="selectItem.model" placeholder="请输入" />
+        </a-form-item>
+        <!-- input type start -->
+        <a-form-item v-if="selectItem.type === 'input'" label="输入框type">
+          <a-input v-model="options.type" placeholder="请输入" />
+        </a-form-item>
+        <!-- input type end -->
+        <a-form-item
+          v-if="
+            typeof options.rangePlaceholder !== 'undefined' && options.range
+          "
+          label="占位内容"
+        >
+          <a-input placeholder="请输入" v-model="options.rangePlaceholder[0]" />
+          <a-input placeholder="请输入" v-model="options.rangePlaceholder[1]" />
+        </a-form-item>
+
+        <a-form-item
+          v-else-if="typeof options.placeholder !== 'undefined'"
+          label="占位内容"
+        >
+          <a-input placeholder="请输入" v-model="options.placeholder" />
+        </a-form-item>
+        <a-form-item
+          v-if="selectItem.type === 'textarea'"
+          label="自适应内容高度"
+        >
+          <a-input-number
+            style="width: 100%"
+            v-model="options.minRows"
+            placeholder="最小高度"
+          />
+          <a-input-number
+            style="width: 100%"
+            v-model="options.maxRows"
+            placeholder="最大高度"
+          />
+        </a-form-item>
+        <a-form-item v-if="typeof options.width !== 'undefined'" label="宽度">
+          <a-input placeholder="请输入" v-model="options.width" />
+        </a-form-item>
+        <a-form-item v-if="typeof options.height !== 'undefined'" label="高度">
+          <a-input-number v-model="options.height" />
+        </a-form-item>
+        <a-form-item v-if="typeof options.step !== 'undefined'" label="步长">
+          <a-input-number v-model="options.step" placeholder="请输入" />
+        </a-form-item>
+        <a-form-item v-if="typeof options.min !== 'undefined'" label="最小值">
+          <a-input-number v-model="options.min" placeholder="请输入" />
+        </a-form-item>
+        <a-form-item v-if="typeof options.max !== 'undefined'" label="最大值">
+          <a-input-number v-model="options.max" placeholder="请输入" />
+        </a-form-item>
+        <a-form-item
+          v-if="typeof options.maxLength !== 'undefined'"
+          label="最大长度"
+        >
+          <a-input-number v-model="options.maxLength" placeholder="请输入" />
+        </a-form-item>
+        <a-form-item
+          v-if="typeof options.tabBarGutter !== 'undefined'"
+          label="标签间距"
+        >
+          <a-input-number v-model="options.tabBarGutter" placeholder="请输入" />
+        </a-form-item>
+        <a-form-item
+          v-if="typeof options.precision !== 'undefined'"
+          label="数值精度"
+        >
+          <a-input-number
+            :min="0"
+            :max="50"
+            v-model="options.precision"
+            placeholder="请输入"
+          />
+        </a-form-item>
+        <a-form-item
+          v-if="typeof options.dictCode !== 'undefined'"
+          label="dictCode"
+        >
+          <a-input v-model="options.dictCode"></a-input>
+        </a-form-item>
+        <!-- 选项配置及动态数据配置 start -->
+        <a-form-item
+          v-if="typeof options.options !== 'undefined'"
+          label="选项配置"
+        >
+          <a-radio-group buttonStyle="solid" v-model="options.dynamic">
+            <a-radio-button :value="false">静态数据</a-radio-button>
+            <a-radio-button :value="true">动态数据</a-radio-button>
+          </a-radio-group>
+
+          <a-input
+            v-show="options.dynamic"
+            v-model="options.dynamicKey"
+            placeholder="动态数据变量名"
+          ></a-input>
+
+          <KChangeOption v-show="!options.dynamic" v-model="options.options" />
+        </a-form-item>
+        <!-- 选项配置及动态数据配置 end -->
+        <!-- tabs配置 start -->
+        <a-form-item
+          v-if="['tabs', 'selectInputList'].includes(selectItem.type)"
+          :label="selectItem.type === 'tabs' ? '页签配置' : '列选项配置'"
+        >
+          <KChangeOption v-model="selectItem.columns" type="tab" />
+        </a-form-item>
+        <!-- tabs配置 end -->
+        <a-form-item v-if="selectItem.type === 'grid'" label="栅格间距">
+          <a-input-number
+            v-model="selectItem.options.gutter"
+            placeholder="请输入"
+          />
+        </a-form-item>
+        <a-form-item v-if="selectItem.type === 'grid'" label="列配置项">
+          <KChangeOption v-model="selectItem.columns" type="colspan" />
+        </a-form-item>
+
+        <a-form-item v-if="selectItem.type === 'switch'" label="默认值">
+          <a-switch v-model="options.defaultValue" />
+        </a-form-item>
+        <a-form-item
+          v-if="['number', 'slider'].indexOf(selectItem.type) >= 0"
+          label="默认值"
+        >
+          <a-input-number
+            :step="options.step"
+            :min="options.min || -Infinity"
+            :max="options.max || Infinity"
+            v-model="options.defaultValue"
+          />
+        </a-form-item>
+        <a-form-item v-if="selectItem.type === 'rate'" label="默认值">
+          <a-rate
+            v-model="options.defaultValue"
+            :allowHalf="options.allowHalf"
+            :count="options.max"
+          />
+        </a-form-item>
+        <a-form-item v-if="selectItem.type === 'select'" label="默认值">
+          <a-select :options="options.options" v-model="options.defaultValue" />
+        </a-form-item>
+        <a-form-item v-if="selectItem.type === 'radio'" label="默认值">
+          <a-radio-group
+            :options="options.options"
+            v-model="options.defaultValue"
+          />
+        </a-form-item>
+        <a-form-item v-if="selectItem.type === 'checkbox'" label="默认值">
+          <a-checkbox-group
+            :options="options.options"
+            v-model="options.defaultValue"
+          />
+        </a-form-item>
+        <!-- 日期选择器默认值 start -->
+        <a-form-item v-if="selectItem.type === 'date'" label="默认值">
+          <a-input
+            v-if="!options.range"
+            v-model="options.defaultValue"
+            :placeholder="
+              typeof options.format === 'undefined' ? '' : options.format
+            "
+          />
+          <a-input
+            v-if="options.range"
+            v-model="options.rangeDefaultValue[0]"
+            :placeholder="
+              typeof options.format === 'undefined' ? '' : options.format
+            "
+          />
+          <a-input
+            v-if="options.range"
+            v-model="options.rangeDefaultValue[1]"
+            :placeholder="
+              typeof options.format === 'undefined' ? '' : options.format
+            "
+          />
+        </a-form-item>
+        <!-- 日期选择器默认值 start -->
+        <a-form-item
+          v-if="
+            ![
+              'number',
+              'radio',
+              'checkbox',
+              'date',
+              'rate',
+              'select',
+              'switch',
+              'slider',
+              'html'
+            ].includes(selectItem.type) &&
+              typeof options.defaultValue !== 'undefined'
+          "
+          label="默认值"
+        >
+          <a-input
+            v-model="options.defaultValue"
+            :placeholder="
+              typeof options.format === 'undefined' ? '请输入' : options.format
+            "
+          />
+        </a-form-item>
+        <!-- 修改html -->
+        <a-form-item v-if="selectItem.type === 'html'" label="默认值">
+          <a-textarea
+            v-model="options.defaultValue"
+            :autoSize="{ minRows: 4, maxRows: 8 }"
+          />
+        </a-form-item>
+        <a-form-item
+          v-if="typeof options.format !== 'undefined'"
+          label="时间格式"
+        >
+          <a-input
+            v-model="options.format"
+            placeholder="时间格式如：YYYY-MM-DD HH:mm:ss"
+          />
+        </a-form-item>
+
+        <a-form-item
+          v-if="typeof options.orientation !== 'undefined'"
+          label="标签位置"
+        >
+          <a-radio-group buttonStyle="solid" v-model="options.orientation">
+            <a-radio-button value="left">左</a-radio-button>
+            <a-radio-button value="">居中</a-radio-button>
+            <a-radio-button value="right">右</a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <!-- 页签位置 start -->
+        <a-form-item v-if="selectItem.type === 'tabs'" label="页签位置">
+          <a-radio-group buttonStyle="solid" v-model="options.tabPosition">
+            <a-radio value="top">top</a-radio>
+            <a-radio value="right">right</a-radio>
+            <a-radio value="bottom">bottom</a-radio>
+            <a-radio value="left">left</a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <!-- 页签位置 end -->
+        <!-- 页签类型 start -->
+        <a-form-item v-if="selectItem.type === 'tabs'" label="页签类型">
+          <a-radio-group buttonStyle="solid" v-model="options.type">
+            <a-radio-button value="line">line</a-radio-button>
+            <a-radio-button value="card">card</a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <!-- 页签类型 end -->
+        <!-- 页签大小 start -->
+        <a-form-item v-if="typeof options.size !== 'undefined'" label="大小">
+          <a-radio-group buttonStyle="solid" v-model="options.size">
+            <a-radio-button value="large">large</a-radio-button>
+            <a-radio-button value="default">default</a-radio-button>
+            <a-radio-button value="small">small</a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <!-- 页签大小 end -->
+        <a-form-item v-if="selectItem.type === 'button'" label="类型">
+          <a-radio-group buttonStyle="solid" v-model="options.type">
+            <a-radio value="primary">Primary</a-radio>
+            <a-radio value="default">Default</a-radio>
+            <a-radio value="dashed">Dashed</a-radio>
+            <a-radio value="danger">Danger</a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <!-- 下载方式 start -->
+        <a-form-item
+          v-if="typeof options.downloadWay !== 'undefined'"
+          label="下载方式"
+        >
+          <a-radio-group buttonStyle="solid" v-model="options.downloadWay">
+            <a-radio-button value="a">a标签</a-radio-button>
+            <a-radio-button value="ajax">ajax</a-radio-button>
+            <a-radio-button value="dynamic">动态函数</a-radio-button>
+          </a-radio-group>
+          <a-input
+            v-show="options.downloadWay === 'dynamic'"
+            v-model="options.dynamicFun"
+            placeholder="动态函数名"
+          ></a-input>
+        </a-form-item>
+        <!-- 下载方式 end -->
+        <a-form-item v-if="selectItem.type === 'button'" label="按钮操作">
+          <a-radio-group buttonStyle="solid" v-model="options.handle">
+            <a-radio-button value="submit">提交</a-radio-button>
+            <a-radio-button value="reset">重置</a-radio-button>
+            <a-radio-button value="dynamic">动态函数</a-radio-button>
+          </a-radio-group>
+          <a-input
+            v-show="options.handle === 'dynamic'"
+            v-model="options.dynamicFun"
+            placeholder="动态函数名"
+          ></a-input>
+        </a-form-item>
+        <a-form-item v-if="selectItem.type === 'alert'" label="辅助描述">
+          <a-input v-model="options.description"></a-input>
+        </a-form-item>
+        <a-form-item v-if="selectItem.type === 'alert'" label="类型">
+          <a-radio-group buttonStyle="solid" v-model="options.type">
+            <a-radio value="success">success</a-radio>
+            <a-radio value="info">info</a-radio>
+            <a-radio value="warning">warning</a-radio>
+            <a-radio value="error">error</a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item v-if="selectItem.type === 'alert'" label="操作属性">
+          <kCheckbox v-model="options.showIcon" label="显示图标" />
+          <kCheckbox v-model="options.banner" label="无边框" />
+          <kCheckbox v-model="options.closable" label="可关闭" />
+        </a-form-item>
+        <!-- 上传图片 -->
+        <a-form-item v-if="selectItem.type === 'uploadImg'" label="样式">
+          <a-radio-group buttonStyle="solid" v-model="options.listType">
+            <a-radio-button value="text">text</a-radio-button>
+            <a-radio-button value="picture">picture</a-radio-button>
+            <a-radio-button value="picture-card">card</a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <!-- 上传数量 -->
+        <a-form-item
+          v-if="typeof options.limit !== 'undefined'"
+          label="最大上传数量"
+        >
+          <a-input-number :min="1" v-model="options.limit" />
+        </a-form-item>
+
+        <!-- scrollY -->
+        <a-form-item
+          v-if="typeof options.scrollY !== 'undefined'"
+          label="scrollY"
+        >
+          <a-input-number :min="0" v-model="options.scrollY" />
+        </a-form-item>
+
+        <!-- 上传地址 -->
+        <a-form-item
+          v-if="typeof options.action !== 'undefined'"
+          label="上传地址"
+        >
+          <a-input v-model="options.action" placeholder="请输入"></a-input>
+        </a-form-item>
+
+        <!-- 文件name -->
+        <a-form-item
+          v-if="typeof options.fileName !== 'undefined'"
+          label="文件name"
+        >
+          <a-input v-model="options.fileName" placeholder="请输入"></a-input>
+        </a-form-item>
+        <!-- 上传额外参数 -->
+        <a-form-item
+          v-if="typeof options.data !== 'undefined'"
+          label="额外参数（JSON格式）"
+        >
+          <a-textarea
+            v-model="options.data"
+            placeholder="严格JSON格式"
+          ></a-textarea>
+        </a-form-item>
+        <!-- 文字对齐方式 -->
+        <a-form-item v-if="selectItem.type === 'text'" label="文字对齐方式">
+          <a-radio-group buttonStyle="solid" v-model="options.textAlign">
+            <a-radio-button value="left">左</a-radio-button>
+            <a-radio-button value="center">居中</a-radio-button>
+            <a-radio-button value="right">右</a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <!-- 文字字体 -->
+        <a-form-item v-if="selectItem.type === 'text'" label="字体属性设置">
+          <colorPicker v-model="options.color" />
+          <a-select
+            :options="familyOptions"
+            v-model="options.fontFamily"
+            style="width:36%;margin-left:2%;vertical-align:bottom;"
+          />
+          <a-select
+            :options="sizeOptions"
+            v-model="options.fontSize"
+            style="width:35%;margin-left:2%;vertical-align:bottom;"
+          />
+        </a-form-item>
+        <a-form-item v-if="selectItem.type === 'text'" label="操作属性">
+          <kCheckbox v-model="options.showRequiredMark" label="显示必选标记" />
+        </a-form-item>
+
+        <a-form-item
+          v-if="
+            typeof options.hidden !== 'undefined' ||
+              typeof options.disabled !== 'undefined' ||
+              typeof options.readonly !== 'undefined' ||
+              typeof options.clearable !== 'undefined' ||
+              typeof options.multiple !== 'undefined' ||
+              typeof options.range !== 'undefined' ||
+              typeof options.showTime !== 'undefined' ||
+              typeof options.allowHalf !== 'undefined' ||
+              typeof options.showInput !== 'undefined' ||
+              typeof options.animated !== 'undefined'
+          "
+          label="操作属性"
+        >
+          <kCheckbox
+            v-if="typeof options.hidden !== 'undefined'"
+            v-model="options.hidden"
+            label="隐藏"
+          />
+          <kCheckbox
+            v-if="typeof options.disabled !== 'undefined'"
+            v-model="options.disabled"
+            label="禁用"
+          />
+          <kCheckbox
+            v-if="typeof options.readonly !== 'undefined'"
+            v-model="options.readonly"
+            label="只读"
+          />
+          <kCheckbox
+            v-if="typeof options.clearable !== 'undefined'"
+            v-model="options.clearable"
+            label="可清除"
+          />
+          <kCheckbox
+            v-if="typeof options.multiple !== 'undefined'"
+            v-model="options.multiple"
+            label="多选"
+          />
+          <kCheckbox
+            v-if="typeof options.range !== 'undefined'"
+            v-model="options.range"
+            label="范围选择"
+          />
+          <kCheckbox
+            v-if="typeof options.showTime !== 'undefined'"
+            v-model="options.showTime"
+            label="时间选择器"
+          />
+          <kCheckbox
+            v-if="typeof options.allowHalf !== 'undefined'"
+            v-model="options.allowHalf"
+            label="允许半选"
+          />
+          <kCheckbox
+            v-if="typeof options.showInput !== 'undefined'"
+            v-model="options.showInput"
+            label="显示输入框"
+          />
+          <kCheckbox
+            v-if="typeof options.showLabel !== 'undefined'"
+            v-model="options.showLabel"
+            label="显示Label"
+          />
+          <kCheckbox
+            v-if="typeof options.chinesization !== 'undefined'"
+            v-model="options.chinesization"
+            label="汉化"
+          />
+          <kCheckbox
+            v-if="typeof options.hideSequence !== 'undefined'"
+            v-model="options.hideSequence"
+            label="隐藏序号"
+          />
+          <kCheckbox
+            v-if="typeof options.drag !== 'undefined'"
+            v-model="options.drag"
+            label="允许拖拽"
+          />
+          <kCheckbox
+            v-if="typeof options.showSearch !== 'undefined'"
+            v-model="options.showSearch"
+            label="可搜索"
+          />
+          <kCheckbox
+            v-if="typeof options.treeCheckable !== 'undefined'"
+            v-model="options.treeCheckable"
+            label="可勾选"
+          />
+          <kCheckbox
+            v-if="typeof options.animated !== 'undefined'"
+            v-model="options.animated"
+            label="动画切换"
+          />
+        </a-form-item>
+
+        <a-form-item
+          v-if="
+            typeof selectItem.rules !== 'undefined' &&
+              selectItem.rules.length > 0
+          "
+          label="校验"
+        >
+          <kCheckbox v-model="selectItem.rules[0].required" label="必填" />
+          <a-input
+            v-model="selectItem.rules[0].message"
+            placeholder="必填校验提示信息"
+          />
+          <KChangeOption v-model="selectItem.rules" type="rules" />
+        </a-form-item>
+
+        <!-- 表格选项 -->
+        <a-form-item v-if="selectItem.type === 'table'" label="表格样式CSS">
+          <a-input v-model="selectItem.options.customStyle" />
+        </a-form-item>
+        <a-form-item v-if="selectItem.type === 'table'" label="属性">
+          <kCheckbox v-model="selectItem.options.bordered" label="显示边框" />
+          <kCheckbox v-model="selectItem.options.bright" label="鼠标经过点亮" />
+          <kCheckbox v-model="selectItem.options.small" label="紧凑型" />
+        </a-form-item>
+
+        <a-form-item v-if="selectItem.type === 'table'" label="提示">
+          <p style="line-height: 26px">请点击右键增加行列，或者合并单元格</p>
+        </a-form-item>
+
+        <a-form-item
+          v-if="typeof selectItem.help !== 'undefined'"
+          label="帮助信息"
+        >
+          <a-input v-model="selectItem.help" placeholder="请输入" />
+        </a-form-item>
+
+        <!-- 前缀 -->
+        <a-form-item
+          label="前缀"
+          v-if="typeof options.addonBefore !== 'undefined'"
+        >
+          <a-input v-model="options.addonBefore" placeholder="请输入" />
+        </a-form-item>
+
+        <!-- 后缀 -->
+        <a-form-item
+          label="后缀"
+          v-if="typeof options.addonAfter !== 'undefined'"
+        >
+          <a-input v-model="options.addonAfter" placeholder="请输入" />
+        </a-form-item>
+      </a-form>
+    </div>
+  </div>
+</template>
+<script>
+/*
+ * author kcz
+ * date 2019-11-20
+ * description 表单控件属性设置组件,因为配置数据是引用关系，所以可以直接修改
+ */
+import KChangeOption from '../../KChangeOption/index.vue'
+import kCheckbox from '../../KCheckbox/index.vue'
+export default {
+  name: 'FormItemProperties',
+  data () {
+    return {
+      familyOptions: [
+        // 字体选择设置
+        {
+          value: 'SimSun',
+          label: '宋体'
+        },
+        {
+          value: 'FangSong',
+          label: '仿宋'
+        },
+        {
+          value: 'SimHei',
+          label: '黑体'
+        },
+        {
+          value: 'PingFangSC-Regular',
+          label: '苹方'
+        },
+        {
+          value: 'KaiTi',
+          label: '楷体'
+        },
+        {
+          value: 'LiSu',
+          label: '隶书'
+        }
+      ],
+      sizeOptions: [
+        // 字号选择设置
+        {
+          value: '26pt',
+          label: '一号'
+        },
+        {
+          value: '24pt',
+          label: '小一'
+        },
+        {
+          value: '22pt',
+          label: '二号'
+        },
+        {
+          value: '18pt',
+          label: '小二'
+        },
+        {
+          value: '16pt',
+          label: '三号'
+        },
+        {
+          value: '15pt',
+          label: '小三'
+        },
+        {
+          value: '14pt',
+          label: '四号'
+        },
+        {
+          value: '12pt',
+          label: '小四'
+        },
+        {
+          value: '10.5pt',
+          label: '五号'
+        },
+        {
+          value: '9pt',
+          label: '小五'
+        }
+      ]
+    }
+  },
+  computed: {
+    options () {
+      return this.selectItem.options || {}
+    }
+  },
+  props: {
+    selectItem: {
+      type: Object,
+      required: true
+    },
+    hideModel: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {
+    KChangeOption,
+    kCheckbox
+  }
+}
+</script>
diff --git a/src/components/KFormDesign/packages/KFormDesign/module/formNode.vue b/src/components/KFormDesign/packages/KFormDesign/module/formNode.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7bab21762659384f677cf0c6290bc4b1fee5c1bc
--- /dev/null
+++ b/src/components/KFormDesign/packages/KFormDesign/module/formNode.vue
@@ -0,0 +1,69 @@
+<!--
+ * @Description: 将数据通过k-form-item组件解析，生成控件
+ * @Author: kcz
+ * @Date: 2019-12-30 00:37:05
+ * @LastEditTime: 2021-05-27 15:19:02
+ * @LastEditors: kcz
+ * @FilePath: \k-form-design\packages\KFormDesign\module\formNode.vue
+ -->
+<template>
+  <div
+    class="drag-move-box"
+    @click.stop="$emit('handleSelectItem', record)"
+    :class="{ active: record.key === selectItem.key }"
+  >
+    <div class="form-item-box">
+      <kFormItem :formConfig="config" :record="record" />
+    </div>
+    <div
+      v-if="!hideModel"
+      class="show-key-box"
+      v-text="record.label + (record.model ? '/' + record.model : '')"
+    />
+    <div
+      class="copy"
+      :class="record.key === selectItem.key ? 'active' : 'unactivated'"
+      @click.stop="$emit('handleCopy')"
+    >
+      <a-icon type="copy" />
+    </div>
+    <div
+      class="delete"
+      :class="record.key === selectItem.key ? 'active' : 'unactivated'"
+      @click.stop="$emit('handleDelete')"
+    >
+      <a-icon type="delete" />
+    </div>
+  </div>
+</template>
+<script>
+/*
+ * author kcz
+ * date 2019-11-20
+ * description 通过json生成的单个表单节点
+ */
+import kFormItem from '../../KFormItem/index'
+export default {
+  props: {
+    record: {
+      type: Object,
+      required: true
+    },
+    selectItem: {
+      type: Object,
+      default: () => {}
+    },
+    config: {
+      type: Object,
+      required: true
+    },
+    hideModel: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {
+    kFormItem
+  }
+}
+</script>
diff --git a/src/components/KFormDesign/packages/KFormDesign/module/formProperties.vue b/src/components/KFormDesign/packages/KFormDesign/module/formProperties.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ffdbc96f503a601a0106469d1db6fd70b0d0f81b
--- /dev/null
+++ b/src/components/KFormDesign/packages/KFormDesign/module/formProperties.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="properties-centent kk-checkbox">
+    <div class="properties-body">
+      <a-form>
+        <a-form-item label="表单布局">
+          <a-radio-group buttonStyle="solid" v-model="config.layout">
+            <a-radio-button value="horizontal">水平</a-radio-button>
+            <a-radio-button value="vertical">垂直</a-radio-button>
+            <a-radio-button value="inline">行内</a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item label="标签布局（水平布局生效）">
+          <a-radio-group buttonStyle="solid" v-model="config.labelLayout">
+            <a-radio-button value="flex">固定</a-radio-button>
+            <a-radio-button value="Grid">栅格</a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item
+          v-show="config.labelLayout === 'flex'"
+          label="标签宽度（px）"
+        >
+          <a-input-number v-model="config.labelWidth" />
+        </a-form-item>
+        <a-form-item label="labelCol" v-show="config.labelLayout !== 'flex'">
+          <div class="change-col-box">
+            <a-slider
+              id="test"
+              :max="24"
+              :min="0"
+              v-model="config.labelCol.xs"
+              @change="handleChangeCol"
+            />
+            <div>
+              <label>xs:</label>
+              <a-input-number v-model="config.labelCol.xs" />
+            </div>
+            <div>
+              <label>sm:</label>
+              <a-input-number v-model="config.labelCol.sm" />
+            </div>
+            <div>
+              <label>md:</label>
+              <a-input-number v-model="config.labelCol.md" />
+            </div>
+            <div>
+              <label>lg:</label>
+              <a-input-number v-model="config.labelCol.lg" />
+            </div>
+            <div>
+              <label>xl:</label>
+              <a-input-number v-model="config.labelCol.xl" />
+            </div>
+            <div>
+              <label>xxl:</label>
+              <a-input-number v-model="config.labelCol.xxl" />
+            </div>
+          </div>
+        </a-form-item>
+        <a-form-item label="wrapperCol" v-show="config.labelLayout !== 'flex'">
+          <div class="change-col-box">
+            <div>
+              <label>xs:</label>
+              <a-input-number v-model="config.wrapperCol.xs" />
+            </div>
+            <div>
+              <label>sm:</label>
+              <a-input-number v-model="config.wrapperCol.sm" />
+            </div>
+            <div>
+              <label>md:</label>
+              <a-input-number v-model="config.wrapperCol.md" />
+            </div>
+            <div>
+              <label>lg:</label>
+              <a-input-number v-model="config.wrapperCol.lg" />
+            </div>
+            <div>
+              <label>xl:</label>
+              <a-input-number v-model="config.wrapperCol.xl" />
+            </div>
+            <div>
+              <label>xxl:</label>
+              <a-input-number v-model="config.wrapperCol.xxl" />
+            </div>
+          </div>
+        </a-form-item>
+        <a-form-item label="预览模态框宽度">
+          <a-input-number style="width:100%;" v-model="previewOptions.width" />
+        </a-form-item>
+        <a-form-item label="表单CSS">
+          <a-textarea v-model="config.customStyle" />
+        </a-form-item>
+        <a-form-item label="表单属性">
+          <kCheckbox v-model="config.hideRequiredMark" label="隐藏必选标记" />
+        </a-form-item>
+        <a-form-item label="提示">
+          实际预览效果请点击预览查看
+        </a-form-item>
+      </a-form>
+    </div>
+  </div>
+</template>
+<script>
+/*
+ * author kcz
+ * date 2019-11-20
+ * description 表单属性设置面板组件
+ */
+import kCheckbox from '../../KCheckbox/index.vue'
+export default {
+  name: 'FormProperties',
+  components: {
+    kCheckbox
+  },
+  props: {
+    config: {
+      type: Object,
+      required: true
+    },
+    previewOptions: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    handleChangeCol (e) {
+      this.config.labelCol.xs = this.config.labelCol.sm = this.config.labelCol.md = this.config.labelCol.lg = this.config.labelCol.xl = this.config.labelCol.xxl = e
+
+      this.config.wrapperCol.xs = this.config.wrapperCol.sm = this.config.wrapperCol.md = this.config.wrapperCol.lg = this.config.wrapperCol.xl = this.config.wrapperCol.xxl =
+        24 - e
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.change-col-box {
+  > div {
+    padding: 5px;
+    display: flex;
+    > label {
+      text-align: right;
+      padding-right: 8px;
+      display: block;
+      font-size: 16px;
+      width: 45px;
+    }
+  }
+}
+</style>
diff --git a/src/components/KFormDesign/packages/KFormDesign/module/header.vue b/src/components/KFormDesign/packages/KFormDesign/module/header.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e0944f30fa137f0c7efc946438e7afc7a76b7e26
--- /dev/null
+++ b/src/components/KFormDesign/packages/KFormDesign/module/header.vue
@@ -0,0 +1,20 @@
+<!--
+ * @Description: 头部
+ * @Author: kcz
+ * @Date: 2019-12-30 00:37:05
+ * @LastEditors: kcz
+ * @LastEditTime: 2020-03-26 20:18:56
+ -->
+<template>
+  <header class="header" v-text="title"></header>
+</template>
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '表单设计器 --by kcz'
+    }
+  }
+}
+</script>
diff --git a/src/components/KFormDesign/packages/KFormDesign/module/importJsonModal.vue b/src/components/KFormDesign/packages/KFormDesign/module/importJsonModal.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3d33a529cf3df3a202eac0cac56b603112268175
--- /dev/null
+++ b/src/components/KFormDesign/packages/KFormDesign/module/importJsonModal.vue
@@ -0,0 +1,107 @@
+<template>
+  <a-modal
+    title="JSON数据"
+    :visible="visible"
+    @ok="handleImportJson"
+    @cancel="handleCancel"
+    cancelText="关闭"
+    :destroyOnClose="true"
+    wrapClassName="code-modal-9136076486841527"
+    style="top:20px;"
+    width="850px"
+  >
+    <p class="hint-box">导入格式如下:</p>
+    <div class="json-box-9136076486841527">
+      <codemirror
+        style="height:100%;"
+        ref="myEditor"
+        v-model="jsonFormat"
+      ></codemirror>
+    </div>
+    <a-upload
+      action="/abc"
+      :beforeUpload="beforeUpload"
+      :showUploadList="false"
+      accept="application/json"
+    >
+      <a-button type="primary"> 导入json文件 </a-button>
+    </a-upload>
+  </a-modal>
+</template>
+<script>
+/*
+ * author kcz
+ * date 2019-11-20
+ * description 导入json Modal
+ */
+import { codemirror } from 'vue-codemirror-lite'
+import jsonFormat from '../config/jsonFormat'
+export default {
+  name: 'ImportJsonModal',
+  data () {
+    return {
+      visible: false,
+      jsonFormat,
+      jsonData: {},
+      handleSetSelectItem: null
+    }
+  },
+  watch: {
+    visible (val) {
+      if (val) {
+        this.jsonFormat = jsonFormat
+      }
+    }
+  },
+  components: {
+    codemirror
+  },
+  computed: {
+    editor () {
+      // get current editor object
+      return this.$refs.myEditor.editor
+    }
+  },
+  methods: {
+    handleCancel () {
+      this.visible = false
+    },
+    beforeUpload (e) {
+      // 通过json文件导入
+      const _this = this
+      const reader = new FileReader()
+      reader.readAsText(e)
+      reader.onload = function () {
+        _this.jsonFormat = this.result
+        _this.handleImportJson()
+      }
+      return false
+    },
+    handleImportJson () {
+      // 导入JSON
+      try {
+        const editorJsonData = JSON.parse(this.jsonFormat)
+        this.jsonData.list = editorJsonData.list
+        this.jsonData.config = editorJsonData.config
+        this.jsonData.config.layout = editorJsonData.config.layout
+        this.handleCancel()
+        // 导入之后，需要清除已选择key
+        this.handleSetSelectItem({ key: '' })
+
+        this.$message.success('导入成功')
+      } catch (error) {
+        console.error(error)
+        this.$message.error('导入失败，数据格式不对')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.hint-box {
+  background: #e9e9e9;
+  margin: 0;
+  border-bottom: 2px solid #fff;
+}
+</style>
diff --git a/src/components/KFormDesign/packages/KFormDesign/module/jsonModal.vue b/src/components/KFormDesign/packages/KFormDesign/module/jsonModal.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a8c1cff1c122dea35b5d47e13167f7ed7a886836
--- /dev/null
+++ b/src/components/KFormDesign/packages/KFormDesign/module/jsonModal.vue
@@ -0,0 +1,47 @@
+<template>
+  <a-modal
+    title="JSON数据"
+    :footer="null"
+    :visible="visible"
+    @cancel="handleCancel"
+    :destroyOnClose="true"
+    wrapClassName="code-modal-9136076486841527"
+    style="top:20px;"
+    width="850px"
+  >
+    <previewCode :editorJson="editorJson" />
+  </a-modal>
+</template>
+<script>
+/*
+ * author kcz
+ * date 2019-11-20
+ * description 生成json Modal
+ */
+import previewCode from '../../PreviewCode/index'
+export default {
+  name: 'JsonModal',
+  data () {
+    return {
+      visible: false,
+      editorJson: '',
+      jsonData: {}
+    }
+  },
+  watch: {
+    visible (val) {
+      if (val) {
+        this.editorJson = JSON.stringify(this.jsonData, null, '\t')
+      }
+    }
+  },
+  components: {
+    previewCode
+  },
+  methods: {
+    handleCancel () {
+      this.visible = false
+    }
+  }
+}
+</script>
diff --git a/src/components/KFormDesign/packages/KFormDesign/module/layoutItem.vue b/src/components/KFormDesign/packages/KFormDesign/module/layoutItem.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e803e5b6a3611d840673f9e482738086c299d0b3
--- /dev/null
+++ b/src/components/KFormDesign/packages/KFormDesign/module/layoutItem.vue
@@ -0,0 +1,541 @@
+<template>
+  <div
+    :class="{
+      'layout-width': ['grid', 'table', 'card', 'divider', 'html'].includes(
+        record.type
+      )
+    }"
+  >
+    <!-- 动态表格设计模块 start -->
+    <template v-if="record.type === 'batch'">
+      <div
+        class="batch-box"
+        :class="{ active: record.key === selectItem.key }"
+        @click.stop="handleSelectItem(record)"
+      >
+        <a-form-item
+          :label="!record.options.showLabel ? '' : record.label"
+          :label-col="
+            config.layout === 'horizontal' && record.options.showLabel
+              ? config.labelLayout === 'flex'
+                ? { style: `width:${config.labelWidth}px` }
+                : config.labelCol
+              : {}
+          "
+          :wrapper-col="
+            config.layout === 'horizontal' && record.options.showLabel
+              ? config.labelLayout === 'flex'
+                ? { style: 'width:auto;flex:1' }
+                : config.wrapperCol
+              : {}
+          "
+          :style="
+            config.layout === 'horizontal' &&
+            config.labelLayout === 'flex' &&
+            record.options.showLabel
+              ? { display: 'flex' }
+              : {}
+          "
+        >
+          <draggable
+            tag="div"
+            class="draggable-box"
+            v-bind="{
+              group: insertAllowed ? 'form-draggable' : '',
+              ghostClass: 'moving',
+              animation: 180,
+              handle: '.drag-move'
+            }"
+            v-model="record.list"
+            @start="$emit('dragStart', $event, record.list)"
+            @add="$emit('handleColAdd', $event, record.list)"
+          >
+            <transition-group tag="div" name="list" class="list-main">
+              <formNode
+                v-for="item in record.list"
+                :key="item.key"
+                class="drag-move"
+                :selectItem.sync="selectItem"
+                :record="item"
+                :hideModel="hideModel"
+                :config="config"
+                @handleSelectItem="handleSelectItem"
+                @handleColAdd="handleColAdd"
+                @handleCopy="$emit('handleCopy')"
+                @handleShowRightMenu="handleShowRightMenu"
+                @handleDelete="$emit('handleDelete')"
+              />
+            </transition-group>
+          </draggable>
+        </a-form-item>
+        <div
+          class="copy"
+          :class="record.key === selectItem.key ? 'active' : 'unactivated'"
+          @click.stop="$emit('handleCopy')"
+        >
+          <a-icon type="copy" />
+        </div>
+        <div
+          class="delete"
+          :class="record.key === selectItem.key ? 'active' : 'unactivated'"
+          @click.stop="$emit('handleDelete')"
+        >
+          <a-icon type="delete" />
+        </div>
+      </div>
+    </template>
+    <!-- 动态表格设计模块 end -->
+    <!-- 选择输入列 start -->
+    <template v-else-if="record.type === 'selectInputList'">
+      <div
+        class="select-input-list-box"
+        :class="{ active: record.key === selectItem.key }"
+        @click.stop="handleSelectItem(record)"
+      >
+        <a-form-item
+          :label="!record.options.showLabel ? '' : record.label"
+          :label-col="
+            config.layout === 'horizontal' && record.options.showLabel
+              ? config.labelLayout === 'flex'
+                ? { style: `width:${config.labelWidth}px` }
+                : config.labelCol
+              : {}
+          "
+          :wrapper-col="
+            config.layout === 'horizontal' && record.options.showLabel
+              ? config.labelLayout === 'flex'
+                ? { style: 'width:auto;flex:1' }
+                : config.wrapperCol
+              : {}
+          "
+          :style="
+            config.layout === 'horizontal' &&
+            config.labelLayout === 'flex' &&
+            record.options.showLabel
+              ? { display: 'flex' }
+              : {}
+          "
+        >
+          <div
+            class="column-box"
+            v-for="(column, index) in record.columns"
+            :key="index"
+          >
+            <div class="check-box">
+              <a-checkbox v-if="record.options.multiple" disabled>
+                {{ column.label }}
+              </a-checkbox>
+              <a-radio-group v-else disabled name="radio">
+                <a-radio :value="column.value">{{ column.label }}</a-radio>
+              </a-radio-group>
+            </div>
+            <draggable
+              tag="div"
+              class="draggable-box"
+              v-bind="{
+                group: insertAllowed ? 'form-draggable' : '',
+                ghostClass: 'moving',
+                animation: 180,
+                handle: '.drag-move'
+              }"
+              v-model="column.list"
+              @start="$emit('dragStart', $event, column.list)"
+              @add="$emit('handleColAdd', $event, column.list)"
+            >
+              <transition-group tag="div" name="list" class="list-main">
+                <formNode
+                  v-for="item in column.list"
+                  :key="item.key"
+                  class="drag-move"
+                  :selectItem.sync="selectItem"
+                  :record="item"
+                  :hideModel="hideModel"
+                  :config="config"
+                  @handleSelectItem="handleSelectItem"
+                  @handleColAdd="handleColAdd"
+                  @handleCopy="$emit('handleCopy')"
+                  @handleShowRightMenu="handleShowRightMenu"
+                  @handleDelete="$emit('handleDelete')"
+                />
+              </transition-group>
+            </draggable>
+          </div>
+        </a-form-item>
+        <div
+          class="copy"
+          :class="record.key === selectItem.key ? 'active' : 'unactivated'"
+          @click.stop="$emit('handleCopy')"
+        >
+          <a-icon type="copy" />
+        </div>
+        <div
+          class="delete"
+          :class="record.key === selectItem.key ? 'active' : 'unactivated'"
+          @click.stop="$emit('handleDelete')"
+        >
+          <a-icon type="delete" />
+        </div>
+      </div>
+    </template>
+    <!-- 选择输入列 end -->
+    <!-- 标签Tabs布局 start -->
+    <template v-else-if="record.type === 'tabs'">
+      <div
+        class="grid-box"
+        :class="{ active: record.key === selectItem.key }"
+        @click.stop="handleSelectItem(record)"
+      >
+        <a-tabs
+          class="grid-row"
+          :default-active-key="0"
+          :tabBarGutter="record.options.tabBarGutter || null"
+          :type="record.options.type"
+          :size="record.options.size"
+          :tabPosition="record.options.tabPosition"
+          :animated="record.options.animated"
+        >
+          <a-tab-pane
+            v-for="(tabItem, index) in record.columns"
+            :key="index"
+            :tab="tabItem.label"
+          >
+            <div class="grid-col">
+              <draggable
+                tag="div"
+                class="draggable-box"
+                v-bind="{
+                  group: 'form-draggable',
+                  ghostClass: 'moving',
+                  animation: 180,
+                  handle: '.drag-move'
+                }"
+                v-model="tabItem.list"
+                @start="$emit('dragStart', $event, tabItem.list)"
+                @add="$emit('handleColAdd', $event, tabItem.list)"
+              >
+                <transition-group tag="div" name="list" class="list-main">
+                  <layoutItem
+                    class="drag-move"
+                    v-for="item in tabItem.list"
+                    :key="item.key"
+                    :selectItem.sync="selectItem"
+                    :startType="startType"
+                    :insertAllowedType="insertAllowedType"
+                    :record="item"
+                    :hideModel="hideModel"
+                    :config="config"
+                    @handleSelectItem="handleSelectItem"
+                    @handleColAdd="handleColAdd"
+                    @handleCopy="$emit('handleCopy')"
+                    @handleShowRightMenu="handleShowRightMenu"
+                    @handleDelete="$emit('handleDelete')"
+                  />
+                </transition-group>
+              </draggable>
+            </div>
+          </a-tab-pane>
+        </a-tabs>
+
+        <div
+          class="copy"
+          :class="record.key === selectItem.key ? 'active' : 'unactivated'"
+          @click.stop="$emit('handleCopy')"
+        >
+          <a-icon type="copy" />
+        </div>
+        <div
+          class="delete"
+          :class="record.key === selectItem.key ? 'active' : 'unactivated'"
+          @click.stop="$emit('handleDelete')"
+        >
+          <a-icon type="delete" />
+        </div>
+      </div>
+    </template>
+    <!-- 标签Tabs布局 end -->
+    <!-- 栅格布局 start -->
+    <template v-else-if="record.type === 'grid'">
+      <div
+        class="grid-box"
+        :class="{ active: record.key === selectItem.key }"
+        @click.stop="handleSelectItem(record)"
+      >
+        <a-row class="grid-row" :gutter="record.options.gutter">
+          <a-col
+            class="grid-col"
+            v-for="(colItem, idnex) in record.columns"
+            :key="idnex"
+            :span="colItem.span || 0"
+          >
+            <draggable
+              tag="div"
+              class="draggable-box"
+              v-bind="{
+                group: 'form-draggable',
+                ghostClass: 'moving',
+                animation: 180,
+                handle: '.drag-move'
+              }"
+              v-model="colItem.list"
+              @start="$emit('dragStart', $event, colItem.list)"
+              @add="$emit('handleColAdd', $event, colItem.list)"
+            >
+              <transition-group tag="div" name="list" class="list-main">
+                <layoutItem
+                  class="drag-move"
+                  v-for="item in colItem.list"
+                  :key="item.key"
+                  :selectItem.sync="selectItem"
+                  :startType="startType"
+                  :insertAllowedType="insertAllowedType"
+                  :record="item"
+                  :hideModel="hideModel"
+                  :config="config"
+                  @handleSelectItem="handleSelectItem"
+                  @handleColAdd="handleColAdd"
+                  @handleCopy="$emit('handleCopy')"
+                  @handleShowRightMenu="handleShowRightMenu"
+                  @handleDelete="$emit('handleDelete')"
+                />
+              </transition-group>
+            </draggable>
+          </a-col>
+        </a-row>
+
+        <div
+          class="copy"
+          :class="record.key === selectItem.key ? 'active' : 'unactivated'"
+          @click.stop="$emit('handleCopy')"
+        >
+          <a-icon type="copy" />
+        </div>
+        <div
+          class="delete"
+          :class="record.key === selectItem.key ? 'active' : 'unactivated'"
+          @click.stop="$emit('handleDelete')"
+        >
+          <a-icon type="delete" />
+        </div>
+      </div>
+    </template>
+    <!-- 栅格布局 end -->
+    <!-- 卡片布局 start -->
+    <template v-else-if="record.type === 'card'">
+      <div
+        class="grid-box"
+        :class="{ active: record.key === selectItem.key }"
+        @click.stop="handleSelectItem(record)"
+      >
+        <a-card class="grid-row" :title="record.label">
+          <div class="grid-col">
+            <draggable
+              tag="div"
+              class="draggable-box"
+              v-bind="{
+                group: 'form-draggable',
+                ghostClass: 'moving',
+                animation: 180,
+                handle: '.drag-move'
+              }"
+              v-model="record.list"
+              @start="$emit('dragStart', $event, record.list)"
+              @add="$emit('handleColAdd', $event, record.list)"
+            >
+              <transition-group tag="div" name="list" class="list-main">
+                <layoutItem
+                  class="drag-move"
+                  v-for="item in record.list"
+                  :key="item.key"
+                  :selectItem.sync="selectItem"
+                  :startType="startType"
+                  :insertAllowedType="insertAllowedType"
+                  :record="item"
+                  :hideModel="hideModel"
+                  :config="config"
+                  @handleSelectItem="handleSelectItem"
+                  @handleColAdd="handleColAdd"
+                  @handleCopy="$emit('handleCopy')"
+                  @handleShowRightMenu="handleShowRightMenu"
+                  @handleDelete="$emit('handleDelete')"
+                />
+              </transition-group>
+            </draggable>
+          </div>
+        </a-card>
+
+        <div
+          class="copy"
+          :class="record.key === selectItem.key ? 'active' : 'unactivated'"
+          @click.stop="$emit('handleCopy')"
+        >
+          <a-icon type="copy" />
+        </div>
+        <div
+          class="delete"
+          :class="record.key === selectItem.key ? 'active' : 'unactivated'"
+          @click.stop="$emit('handleDelete')"
+        >
+          <a-icon type="delete" />
+        </div>
+      </div>
+    </template>
+    <!-- 卡片布局 end -->
+    <!-- 表格布局 start -->
+    <template v-else-if="record.type === 'table'">
+      <div
+        class="table-box"
+        :class="{ active: record.key === selectItem.key }"
+        @click.stop="handleSelectItem(record)"
+      >
+        <table
+          class="table-layout kk-table-9136076486841527"
+          :class="{
+            bright: record.options.bright,
+            small: record.options.small,
+            bordered: record.options.bordered
+          }"
+          :style="record.options.customStyle"
+        >
+          <tr v-for="(trItem, trIndex) in record.trs" :key="trIndex">
+            <td
+              class="table-td"
+              v-for="(tdItem, tdIndex) in trItem.tds"
+              v-show="tdItem.colspan && tdItem.rowspan"
+              :key="tdIndex"
+              :colspan="tdItem.colspan"
+              :rowspan="tdItem.rowspan"
+              @contextmenu.prevent="
+                $emit('handleShowRightMenu', $event, record, trIndex, tdIndex)
+              "
+            >
+              <draggable
+                tag="div"
+                class="draggable-box"
+                v-bind="{
+                  group: 'form-draggable',
+                  ghostClass: 'moving',
+                  animation: 180,
+                  handle: '.drag-move'
+                }"
+                v-model="tdItem.list"
+                @start="$emit('dragStart', $event, tdItem.list)"
+                @add="$emit('handleColAdd', $event, tdItem.list)"
+              >
+                <transition-group
+                  tag="div"
+                  name="list"
+                  :style="{ 'min-height': tdItem.rowspan * 80 - 19 + 'px' }"
+                  class="list-main"
+                >
+                  <layoutItem
+                    class="drag-move"
+                    v-for="item in tdItem.list"
+                    :key="item.key"
+                    :selectItem.sync="selectItem"
+                    :startType="startType"
+                    :insertAllowedType="insertAllowedType"
+                    :record="item"
+                    :hideModel="hideModel"
+                    :config="config"
+                    @handleSelectItem="handleSelectItem"
+                    @handleColAdd="handleColAdd"
+                    @handleCopy="$emit('handleCopy')"
+                    @handleShowRightMenu="handleShowRightMenu"
+                    @handleDelete="$emit('handleDelete')"
+                  />
+                </transition-group>
+              </draggable>
+            </td>
+          </tr>
+        </table>
+
+        <div
+          class="copy"
+          :class="record.key === selectItem.key ? 'active' : 'unactivated'"
+          @click.stop="$emit('handleCopy')"
+        >
+          <a-icon type="copy" />
+        </div>
+        <div
+          class="delete"
+          :class="record.key === selectItem.key ? 'active' : 'unactivated'"
+          @click.stop="$emit('handleDelete')"
+        >
+          <a-icon type="delete" />
+        </div>
+      </div>
+    </template>
+    <!-- 表格布局 end -->
+    <template v-else>
+      <formNode
+        :key="record.key"
+        :selectItem.sync="selectItem"
+        :record="record"
+        :config="config"
+        :hideModel="hideModel"
+        @handleSelectItem="handleSelectItem"
+        @handleCopy="$emit('handleCopy')"
+        @handleDelete="$emit('handleDelete')"
+        @handleShowRightMenu="$emit('handleShowRightMenu')"
+      />
+    </template>
+  </div>
+</template>
+<script>
+/*
+ * author kcz
+ * date 2019-11-20
+ * description 使用递归组件调用自己，生成布局结构及表单
+ */
+import draggable from 'vuedraggable'
+import formNode from './formNode'
+export default {
+  name: 'LayoutItem',
+  props: {
+    record: {
+      type: Object,
+      required: true
+    },
+    selectItem: {
+      type: Object,
+      required: true
+    },
+    config: {
+      type: Object,
+      required: true
+    },
+    startType: {
+      type: String,
+      required: true
+    },
+    insertAllowedType: {
+      type: Array,
+      required: true
+    },
+    hideModel: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    insertAllowed () {
+      return this.insertAllowedType.includes(this.startType)
+    }
+  },
+  components: {
+    formNode,
+    draggable
+  },
+  methods: {
+    handleShowRightMenu (e, record, trIndex, tdIndex) {
+      this.$emit('handleShowRightMenu', e, record, trIndex, tdIndex)
+    },
+    handleSelectItem (record) {
+      this.$emit('handleSelectItem', record)
+    },
+    handleColAdd (e, list) {
+      this.$emit('handleColAdd', e, list)
+    }
+  }
+}
+</script>
diff --git a/src/components/KFormDesign/packages/KFormDesign/module/operatingArea.vue b/src/components/KFormDesign/packages/KFormDesign/module/operatingArea.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ea662ece031a9b4ff264971ed2387ea30676dbb3
--- /dev/null
+++ b/src/components/KFormDesign/packages/KFormDesign/module/operatingArea.vue
@@ -0,0 +1,137 @@
+<!--
+ * @Description: 头部
+ * @Author: kcz
+ * @Date: 2019-12-30 00:37:05
+ * @LastEditors: kcz
+ * @LastEditTime: 2021-05-27 23:01:59
+ -->
+<template>
+  <div class="operating-area">
+    <!-- 头部操作按钮区域 start -->
+    <!-- 操作左侧区域 start -->
+    <div class="left-btn-box">
+      <a-tooltip title="保存">
+        <a v-if="toolbars.includes('save')" @click="$emit('handleSave')">
+          <a-icon type="save" />
+          <span v-if="showToolbarsText">保存</span>
+        </a>
+      </a-tooltip>
+
+      <a-tooltip title="预览">
+        <a v-if="toolbars.includes('preview')" @click="$emit('handlePreview')">
+          <a-icon type="chrome" />
+          <span v-if="showToolbarsText">预览</span>
+        </a>
+      </a-tooltip>
+
+      <a-tooltip title="导入">
+        <a
+          v-if="toolbars.includes('importJson')"
+          @click="$emit('handleOpenImportJsonModal')"
+        >
+          <a-icon type="upload" />
+          <span v-if="showToolbarsText">导入</span>
+        </a>
+      </a-tooltip>
+
+      <a-tooltip title="生成JSON">
+        <a
+          v-if="toolbars.includes('exportJson')"
+          @click="$emit('handleOpenJsonModal')"
+        >
+          <a-icon type="credit-card" />
+          <span v-if="showToolbarsText">生成JSON</span>
+        </a>
+      </a-tooltip>
+
+      <a-tooltip title="生成代码">
+        <a
+          v-if="toolbars.includes('exportCode')"
+          @click="$emit('handleOpenCodeModal')"
+        >
+          <a-icon type="code" />
+          <span v-if="showToolbarsText">生成代码</span>
+        </a>
+      </a-tooltip>
+
+      <a-tooltip title="清空">
+        <a v-if="toolbars.includes('reset')" @click="$emit('handleReset')">
+          <a-icon type="delete" />
+          <span v-if="showToolbarsText">清空</span>
+        </a>
+      </a-tooltip>
+      <a-divider type="vertical" />
+      <a-tooltip title="撤销">
+        <a
+          v-if="toolbars.includes('undo')"
+          :class="{ disabled: !(recordList.length > 0) }"
+          @click="$emit('handleUndo')"
+        >
+          <a-icon type="undo" />
+          <span v-if="showToolbarsText">撤销</span>
+        </a>
+      </a-tooltip>
+      <a-tooltip title="重做">
+        <a
+          v-if="toolbars.includes('redo')"
+          :class="{ disabled: !(redoList.length > 0) }"
+          @click="$emit('handleRedo')"
+        >
+          <a-icon type="redo" />
+          <span v-if="showToolbarsText">重做</span>
+        </a>
+      </a-tooltip>
+      <!-- 按钮左侧插槽 start -->
+      <slot name="left-action"></slot>
+      <!-- 按钮左侧插槽 end -->
+    </div>
+    <!-- 操作左侧区域 end -->
+
+    <!-- 操作右侧区域 start -->
+    <div class="right-btn-box">
+      <!-- 按钮右侧插槽 start -->
+      <slot name="right-action"></slot>
+      <!-- 按钮右侧插槽 end -->
+
+      <a-tooltip title="关闭">
+        <a v-if="toolbars.includes('close')" @click="$emit('handleClose')">
+          <a-icon type="close" />
+        </a>
+      </a-tooltip>
+    </div>
+    <!-- 操作右侧区域 end -->
+
+    <!-- 头部操作按钮区域 end -->
+  </div>
+  <!-- 操作区域 start -->
+</template>
+<script>
+export default {
+  props: {
+    toolbars: {
+      type: Array,
+      default: () => [
+        "save",
+        "preview",
+        "importJson",
+        "exportJson",
+        "exportCode",
+        "reset",
+        "close"
+      ]
+    },
+    recordList: {
+      type: Array,
+      require: true
+    },
+    redoList: {
+      type: Array,
+      require: true
+    },
+    showToolbarsText: {
+      type: Boolean,
+      default: false
+    }
+  }
+};
+</script>
diff --git a/src/components/KFormDesign/packages/KFormItem/README.md b/src/components/KFormDesign/packages/KFormItem/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..6c6f76425efbd40215c38178d41a95ce299ee1a4
--- /dev/null
+++ b/src/components/KFormDesign/packages/KFormItem/README.md
@@ -0,0 +1,35 @@
+KFormItem
+====
+构建表单控件
+根据参数不同的type，生成对应的控件
+
+
+### 使用方式
+
+```
+# 参数record：
+{
+    type: "input", // 表单类型
+    name: "输入框", // 标题文字
+    options: {
+      type: "text", // input的type类型
+      width: "100%", // 宽度
+      defaultValue: "", // 默认值
+      placeholder: "请输入", // 占位内容
+      disabled: false // 是否禁用
+    },
+    model: "", // 数据字段
+    key: "",
+    rules: [  //验证规则
+      {
+        required: false, // 是否必填
+        message: "必填项"
+      }
+    ]
+  }
+	
+```
+
+
+
+
diff --git a/src/components/KFormDesign/packages/KFormItem/customComponent.vue b/src/components/KFormDesign/packages/KFormItem/customComponent.vue
new file mode 100644
index 0000000000000000000000000000000000000000..344a895535f799bc5c3990d38593c5baa1c0765d
--- /dev/null
+++ b/src/components/KFormDesign/packages/KFormItem/customComponent.vue
@@ -0,0 +1,76 @@
+<!--
+ * @Descripttion: 
+ * @Author: kcz
+ * @Date: 2021-05-02 16:04:02
+ * @LastEditors: kcz
+ * @LastEditTime: 2021-05-14 21:24:50
+-->
+<template>
+  <a-form-item
+    :label="record.label"
+    :label-col="
+      formConfig.layout === 'horizontal'
+        ? formConfig.labelLayout === 'flex'
+          ? { style: `width:${formConfig.labelWidth}px` }
+          : formConfig.labelCol
+        : {}
+    "
+    :wrapper-col="
+      formConfig.layout === 'horizontal'
+        ? formConfig.labelLayout === 'flex'
+          ? { style: 'width:auto;flex:1' }
+          : formConfig.wrapperCol
+        : {}
+    "
+    :style="
+      formConfig.layout === 'horizontal' && formConfig.labelLayout === 'flex'
+        ? { display: 'flex' }
+        : {}
+    "
+  >
+    <component
+      :record="record"
+      :style="`width:${record.options.width}`"
+      @change="handleChange"
+      :disabled="disabled"
+      :dynamicData="dynamicData"
+      :height="
+        typeof record.options.height !== 'undefined'
+          ? record.options.height
+          : ''
+      "
+      v-decorator="[
+        record.model,
+        {
+          initialValue: record.options.defaultValue,
+          rules: record.rules
+        }
+      ]"
+      :is="customComponent"
+    ></component>
+  </a-form-item>
+</template>
+<script>
+export default {
+  name: "customComponent",
+  props: ["record", "formConfig", "disabled", "dynamicData"],
+  computed: {
+    customComponent() {
+      // 计算需要显示的组件
+      const customComponentList = {};
+      if (window.$customComponentList) {
+        // 将数组映射成json
+        window.$customComponentList.forEach(item => {
+          customComponentList[item.type] = item.component;
+        });
+      }
+      return customComponentList[this.record.type];
+    }
+  },
+  methods: {
+    handleChange(value, key) {
+      this.$emit("change", value, key);
+    }
+  }
+};
+</script>
diff --git a/src/components/KFormDesign/packages/KFormItem/index.js b/src/components/KFormDesign/packages/KFormItem/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..e8082df3a2ea40ea628f7d8bace56a19d7726e80
--- /dev/null
+++ b/src/components/KFormDesign/packages/KFormItem/index.js
@@ -0,0 +1,11 @@
+/*
+ * author kcz
+ * date 2019-11-20
+ */
+import KFormItem from "./index.vue";
+
+KFormItem.install = function(Vue) {
+  Vue.component(KFormItem.name, KFormItem);
+};
+
+export default KFormItem;
diff --git a/src/components/KFormDesign/packages/KFormItem/index.vue b/src/components/KFormDesign/packages/KFormItem/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1afe157bf88d8b4ada66ce3d83c8a636fb9d9595
--- /dev/null
+++ b/src/components/KFormDesign/packages/KFormItem/index.vue
@@ -0,0 +1,467 @@
+<!--
+ * @Description: 传入record数据，通过判断record.type，来渲染对应的组件
+ * @Author: kcz
+ * @Date: 2020-01-02 22:41:48
+ * @LastEditors: kcz
+ * @LastEditTime: 2021-05-28 00:59:02
+ -->
+<template>
+  <a-form-item
+    v-if="
+      [
+        'input',
+        'textarea',
+        'date',
+        'time',
+        'number',
+        'radio',
+        'checkbox',
+        'select',
+        'rate',
+        'switch',
+        'slider',
+        'uploadImg',
+        'uploadFile',
+        'cascader',
+        'treeSelect'
+      ].includes(record.type)
+    "
+    :label-col="
+      formConfig.layout === 'horizontal'
+        ? formConfig.labelLayout === 'flex'
+          ? { style: `width:${formConfig.labelWidth}px` }
+          : formConfig.labelCol
+        : {}
+    "
+    :wrapper-col="
+      formConfig.layout === 'horizontal'
+        ? formConfig.labelLayout === 'flex'
+          ? { style: 'width:auto;flex:1' }
+          : formConfig.wrapperCol
+        : {}
+    "
+    :style="
+      formConfig.layout === 'horizontal' && formConfig.labelLayout === 'flex'
+        ? { display: 'flex' }
+        : {}
+    "
+  >
+    <span slot="label">
+      <a-tooltip>
+        <span v-text="record.label"></span>
+        <span v-if="record.help" slot="title" v-html="record.help"></span>
+        <a-icon
+          v-if="record.help"
+          class="question-circle"
+          type="question-circle-o"
+        />
+      </a-tooltip>
+    </span>
+    <!-- 多行文本 -->
+    <a-textarea
+      :style="`width:${record.options.width}`"
+      v-if="record.type === 'textarea'"
+      :autoSize="{
+        minRows: record.options.minRows,
+        maxRows: record.options.maxRows
+      }"
+      :disabled="disabled || record.options.disabled"
+      :placeholder="record.options.placeholder"
+      :allowClear="record.options.clearable"
+      :maxLength="record.options.maxLength"
+      :rows="4"
+      @change="handleChange($event.target.value, record.model)"
+      v-decorator="[
+        record.model, // input 的 name
+        {
+          initialValue: record.options.defaultValue, // 默认值
+          rules: record.rules // 验证规则
+        }
+      ]"
+    />
+    <!-- 单选框 -->
+    <a-radio-group
+      v-else-if="record.type === 'radio'"
+      :options="
+        !record.options.dynamic
+          ? record.options.options
+          : dynamicData[record.options.dynamicKey]
+          ? dynamicData[record.options.dynamicKey]
+          : []
+      "
+      :disabled="disabled || record.options.disabled"
+      :placeholder="record.options.placeholder"
+      @change="handleChange($event.target.value, record.model)"
+      v-decorator="[
+        record.model,
+        {
+          initialValue: record.options.defaultValue,
+          rules: record.rules
+        }
+      ]"
+    />
+    <!-- 多选框 -->
+    <a-checkbox-group
+      v-else-if="record.type === 'checkbox'"
+      :options="
+        !record.options.dynamic
+          ? record.options.options
+          : dynamicData[record.options.dynamicKey]
+          ? dynamicData[record.options.dynamicKey]
+          : []
+      "
+      :disabled="disabled || record.options.disabled"
+      :placeholder="record.options.placeholder"
+      @change="handleChange($event, record.model)"
+      v-decorator="[
+        record.model,
+        {
+          initialValue: record.options.defaultValue,
+          rules: record.rules
+        }
+      ]"
+    />
+    <!-- 开关 -->
+    <a-switch
+      v-else-if="record.type === 'switch'"
+      :disabled="disabled || record.options.disabled"
+      @change="handleChange($event, record.model)"
+      v-decorator="[
+        record.model,
+        {
+          initialValue: record.options.defaultValue,
+          valuePropName: 'checked',
+          rules: record.rules
+        }
+      ]"
+    />
+    <!-- 滑块 -->
+    <div
+      v-else-if="record.type === 'slider'"
+      :style="`width:${record.options.width}`"
+      class="slider-box"
+    >
+      <div class="slider">
+        <a-slider
+          :disabled="disabled || record.options.disabled"
+          :min="record.options.min"
+          :max="record.options.max"
+          :step="record.options.step"
+          @change="handleChange($event, record.model)"
+          v-decorator="[
+            record.model,
+            {
+              initialValue: record.options.defaultValue,
+              rules: record.rules
+            }
+          ]"
+        />
+      </div>
+      <div class="number" v-if="record.options.showInput">
+        <a-input-number
+          style="width: 100%"
+          :disabled="disabled || record.options.disabled"
+          :min="record.options.min"
+          :max="record.options.max"
+          :step="record.options.step"
+          @change="handleChange($event, record.model)"
+          v-decorator="[
+            record.model,
+            {
+              initialValue: record.options.defaultValue,
+              rules: [
+                {
+                  validator: (rule, value, callback) => {
+                    if (
+                      record.options.step &&
+                      value % record.options.step !== 0
+                    ) {
+                      callback('输入值必须是步长的倍数');
+                    }
+                    callback();
+                  }
+                }
+              ]
+            }
+          ]"
+        />
+      </div>
+    </div>
+    <component
+      v-else
+      :style="`width:${record.options.width}`"
+      v-bind="componentOption"
+      :min="
+        record.options.min || record.options.min === 0
+          ? record.options.min
+          : -Infinity
+      "
+      :max="
+        record.options.max || record.options.max === 0
+          ? record.options.max
+          : Infinity
+      "
+      :precision="
+        record.options.precision > 50 ||
+        (!record.options.precision && record.options.precision !== 0)
+          ? null
+          : record.options.precision
+      "
+      :parentDisabled="disabled || record.options.disabled"
+      :disabled="disabled || record.options.disabled"
+      :record="record"
+      :config="config"
+      :filterOption="
+        record.options.showSearch
+          ? (inputValue, option) => {
+              return (
+                option.componentOptions.children[0].text
+                  .toLowerCase()
+                  .indexOf(inputValue.toLowerCase()) >= 0
+              );
+            }
+          : false
+      "
+      :allowClear="record.options.clearable"
+      :dynamicData="dynamicData"
+      :treeData="
+        !record.options.dynamic
+          ? record.options.options
+          : dynamicData[record.options.dynamicKey]
+          ? dynamicData[record.options.dynamicKey]
+          : []
+      "
+      :options="
+        !record.options.dynamic
+          ? record.options.options
+          : dynamicData[record.options.dynamicKey]
+          ? dynamicData[record.options.dynamicKey]
+          : []
+      "
+      :mode="record.options.multiple ? 'multiple' : ''"
+      @change="handleChange($event, record.model)"
+      v-decorator="[
+        record.model, // input 的 name
+        {
+          initialValue: record.options.defaultValue, // 默认值
+          rules: record.rules // 验证规则
+        }
+      ]"
+      :is="componentItem"
+    ></component>
+  </a-form-item>
+  <!-- 可隐藏label -->
+  <a-form-item
+    v-else-if="['batch', 'editor', 'selectInputList'].includes(record.type)"
+    :label="!record.options.showLabel ? '' : record.label"
+    :label-col="
+      formConfig.layout === 'horizontal' && record.options.showLabel
+        ? formConfig.labelLayout === 'flex'
+          ? { style: `width:${formConfig.labelWidth}px` }
+          : formConfig.labelCol
+        : {}
+    "
+    :wrapper-col="
+      formConfig.layout === 'horizontal' && record.options.showLabel
+        ? formConfig.labelLayout === 'flex'
+          ? { style: 'width:auto;flex:1' }
+          : formConfig.wrapperCol
+        : {}
+    "
+    :style="
+      formConfig.layout === 'horizontal' &&
+      formConfig.labelLayout === 'flex' &&
+      record.options.showLabel
+        ? { display: 'flex' }
+        : {}
+    "
+  >
+    <component
+      :ref="['batch', 'selectInputList'].includes(record.type) && 'KBatch'"
+      :style="`width:${record.options.width}`"
+      v-bind="componentOption"
+      :record="record"
+      :config="config"
+      :parentDisabled="disabled || record.options.disabled"
+      :disabled="disabled || record.options.disabled"
+      :dynamicData="dynamicData"
+      @change="handleChange($event, record.model)"
+      v-decorator="[
+        record.model, // input 的 name
+        {
+          initialValue: record.options.defaultValue, // 默认值
+          rules: record.rules // 验证规则
+        }
+      ]"
+      :is="componentItem"
+    ></component>
+  </a-form-item>
+  <!-- button按钮 -->
+  <a-form-item v-else-if="record.type === 'button'">
+    <a-button
+      :disabled="disabled || record.options.disabled"
+      @click="
+        record.options.handle === 'submit'
+          ? false
+          : record.options.handle === 'reset'
+          ? $emit('handleReset')
+          : dynamicData[record.options.dynamicFun]
+          ? dynamicData[record.options.dynamicFun]()
+          : false
+      "
+      :type="record.options.type"
+      :html-type="record.options.handle === 'submit' ? 'submit' : undefined"
+      v-text="record.label"
+    ></a-button>
+  </a-form-item>
+  <!-- alert提示 -->
+  <a-form-item v-else-if="record.type === 'alert'">
+    <a-alert
+      :message="record.label"
+      :description="record.options.description"
+      :type="record.options.type"
+      :showIcon="record.options.showIcon"
+      :closable="record.options.closable"
+      :banner="record.options.banner"
+    />
+  </a-form-item>
+
+  <!-- 文本 -->
+  <a-form-item v-else-if="record.type === 'text'">
+    <div :style="{ textAlign: record.options.textAlign }">
+      <label
+        :class="{ 'ant-form-item-required': record.options.showRequiredMark }"
+        :style="{
+          fontFamily: record.options.fontFamily,
+          fontSize: record.options.fontSize,
+          color: record.options.color
+        }"
+        v-text="record.label"
+      ></label>
+    </div>
+  </a-form-item>
+  <!-- html -->
+  <div
+    v-else-if="record.type === 'html'"
+    v-html="record.options.defaultValue"
+  ></div>
+
+  <!-- 自定义组件 -->
+  <customComponent
+    v-else-if="customList.includes(record.type)"
+    :record="record"
+    :disabled="disabled"
+    :dynamicData="dynamicData"
+    @change="handleChange($event, record.model)"
+    :formConfig="formConfig"
+  />
+
+  <div v-else>
+    <!-- 分割线 -->
+    <a-divider
+      v-if="
+        record.type === 'divider' &&
+          record.label !== '' &&
+          record.options.orientation
+      "
+      :orientation="record.options.orientation"
+      >{{ record.label }}</a-divider
+    >
+    <a-divider v-else-if="record.type === 'divider' && record.label !== ''">{{
+      record.label
+    }}</a-divider>
+    <a-divider v-else-if="record.type === 'divider' && record.label === ''" />
+  </div>
+</template>
+<script>
+/*
+ * author kcz
+ * date 2019-11-20
+ */
+// import moment from "moment";
+import customComponent from "./customComponent";
+import ComponentArray from "../core/components_use";
+const _ = require("lodash/object");
+
+export default {
+  name: "KFormItem",
+  props: {
+    // 表单数组
+    record: {
+      type: Object,
+      required: true
+    },
+    // form-item 宽度配置
+    formConfig: {
+      type: Object,
+      required: true
+    },
+    config: {
+      type: Object,
+      default: () => ({})
+    },
+    dynamicData: {
+      type: Object,
+      default: () => ({})
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {
+    customComponent
+  },
+  computed: {
+    customList() {
+      if (window.$customComponentList) {
+        return window.$customComponentList.map(item => item.type);
+      } else {
+        return [];
+      }
+    },
+    /**
+     * @description: 输出对应组件
+     * @param {*}
+     * @return {*} component
+     */
+
+    componentItem() {
+      return ComponentArray[this.record.type];
+    },
+    componentOption() {
+      return _.omit(this.record.options, ["defaultValue", "disabled"]);
+    }
+  },
+  methods: {
+    validationSubform() {
+      // 验证动态表格
+      if (!this.$refs.KBatch) return true;
+      return this.$refs.KBatch.validationSubform();
+    },
+    handleChange(e, key) {
+      let value = e;
+      if (e && e.target) {
+        value = e.target.value;
+      }
+      // 传递change事件
+      this.$emit("change", value, key);
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.slider-box {
+  display: flex;
+  > .slider {
+    flex: 1;
+    margin-right: 16px;
+  }
+  > .number {
+    width: 70px;
+  }
+}
+.anticon.anticon-question-circle-o {
+  margin-left: 5px;
+}
+</style>
diff --git a/src/components/KFormDesign/packages/KFormPreview/README.md b/src/components/KFormDesign/packages/KFormPreview/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/components/KFormDesign/packages/KFormPreview/index.js b/src/components/KFormDesign/packages/KFormPreview/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..69eee30a426d0bc84f51f49cf1627a508188041b
--- /dev/null
+++ b/src/components/KFormDesign/packages/KFormPreview/index.js
@@ -0,0 +1,11 @@
+/*
+ * author kcz
+ * date 2019-11-20
+ */
+import KFormPreview from "./index.vue";
+
+KFormPreview.install = function(Vue) {
+  Vue.component(KFormPreview.name, KFormPreview);
+};
+
+export default KFormPreview;
diff --git a/src/components/KFormDesign/packages/KFormPreview/index.vue b/src/components/KFormDesign/packages/KFormPreview/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2bfdbd6efbb7748328931940fb6dc3f55377e8db
--- /dev/null
+++ b/src/components/KFormDesign/packages/KFormPreview/index.vue
@@ -0,0 +1,68 @@
+<template>
+  <a-modal
+    title="预览"
+    :visible="visible"
+    @ok="handleGetData"
+    @cancel="handleCancel"
+    okText="获取数据"
+    cancelText="关闭"
+    style="top:20px;"
+    :destroyOnClose="true"
+    :centered="true"
+    :dialogStyle="dialogStyle"
+    :bodyStyle="bodyStyle"
+    wrapClassName="k-form-modal"
+    :width="`${previewWidth}px`"
+  >
+    <k-form-build :value="jsonData" @submit="handleSubmit" ref="KFormBuild" />
+    <jsonModel ref="jsonModel" />
+  </a-modal>
+</template>
+<script>
+/*
+ * author kcz
+ * date 2019-11-20
+ */
+import jsonModel from "../KFormDesign/module/jsonModal";
+import { dialogStyle, bodyStyle } from "../config/modal.js";
+export default {
+  name: "KFormPreview",
+  data() {
+    return {
+      visible: false,
+      previewWidth: 850,
+      jsonData: {},
+      dialogStyle,
+      bodyStyle
+    };
+  },
+  components: {
+    jsonModel
+  },
+  methods: {
+    handleSubmit(p) {
+      p.then(res => {
+        console.log(res, "获取数据成功");
+        this.$refs.jsonModel.jsonData = res;
+        this.$refs.jsonModel.visible = true;
+      }).catch(err => {
+        console.error(err, "获取数据失败");
+      });
+    },
+    handleGetData() {
+      this.$refs.KFormBuild.getData()
+        .then(res => {
+          console.log(res, "获取数据成功");
+          this.$refs.jsonModel.jsonData = res;
+          this.$refs.jsonModel.visible = true;
+        })
+        .catch(err => {
+          console.log(err, "获取数据失败");
+        });
+    },
+    handleCancel() {
+      this.visible = false;
+    }
+  }
+};
+</script>
diff --git a/src/components/KFormDesign/packages/KSelectInputList/index.js b/src/components/KFormDesign/packages/KSelectInputList/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..80d0fd7773333a31b56ea75f7217df226751fd82
--- /dev/null
+++ b/src/components/KFormDesign/packages/KSelectInputList/index.js
@@ -0,0 +1,2 @@
+import KSelectInputList from "./selectInputList.vue";
+export default KSelectInputList;
diff --git a/src/components/KFormDesign/packages/KSelectInputList/module/KFormModelItem.vue b/src/components/KFormDesign/packages/KSelectInputList/module/KFormModelItem.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5ca06c02d0055d0a82ce2eaa62e653e2b5f9d781
--- /dev/null
+++ b/src/components/KFormDesign/packages/KSelectInputList/module/KFormModelItem.vue
@@ -0,0 +1,259 @@
+<!--
+ * @Description: 传入record数据，通过判断record.type，来渲染对应的组件
+ * @Author: kcz
+ * @Date: 2020-01-02 22:41:48
+ * @LastEditors: kcz
+ * @LastEditTime: 2021-05-15 16:32:09
+ -->
+<template>
+  <a-form-model-item
+    v-if="
+      [
+        'input',
+        'textarea',
+        'date',
+        'time',
+        'number',
+        'radio',
+        'checkbox',
+        'select',
+        'rate',
+        'switch',
+        'slider',
+        'uploadImg',
+        'uploadFile',
+        'cascader',
+        'treeSelect'
+      ].includes(record.type)
+    "
+    :prop="`domains.${record.model}`"
+    :rules="record.rules"
+  >
+    <!-- 多行文本 -->
+    <a-textarea
+      :style="`width:${record.options.width}`"
+      v-if="record.type === 'textarea'"
+      :autoSize="{
+        minRows: record.options.minRows,
+        maxRows: record.options.maxRows
+      }"
+      :disabled="record.options.disabled || parentDisabled"
+      :placeholder="record.options.placeholder"
+      :allowClear="record.options.clearable"
+      :maxLength="record.options.maxLength"
+      :rows="4"
+      :value="value"
+      @change="handleChange($event.target.value)"
+    />
+
+    <!-- 单选框 -->
+    <a-radio-group
+      v-else-if="record.type === 'radio'"
+      :options="
+        !record.options.dynamic
+          ? record.options.options
+          : dynamicData[record.options.dynamicKey]
+          ? dynamicData[record.options.dynamicKey]
+          : []
+      "
+      :disabled="record.options.disabled || parentDisabled"
+      :placeholder="record.options.placeholder"
+      :value="value"
+      :checked="value"
+      @change="handleChange($event.target.value)"
+    />
+
+    <!-- 多选框 -->
+    <a-checkbox-group
+      v-else-if="record.type === 'checkbox'"
+      :options="
+        !record.options.dynamic
+          ? record.options.options
+          : dynamicData[record.options.dynamicKey]
+          ? dynamicData[record.options.dynamicKey]
+          : []
+      "
+      :disabled="record.options.disabled || parentDisabled"
+      :placeholder="record.options.placeholder"
+      :value="value"
+      @change="handleChange"
+    />
+
+    <!-- 滑块 -->
+    <div
+      v-else-if="record.type === 'slider'"
+      :style="`width:${record.options.width}`"
+      class="slider-box"
+    >
+      <div class="slider">
+        <a-slider
+          :disabled="record.options.disabled || parentDisabled"
+          :min="record.options.min"
+          :max="record.options.max"
+          :step="record.options.step"
+          :value="value"
+          @change="handleChange"
+        />
+      </div>
+      <div class="number" v-if="record.options.showInput">
+        <a-input-number
+          style="width:100%"
+          :disabled="record.options.disabled || parentDisabled"
+          :min="record.options.min"
+          :max="record.options.max"
+          :step="record.options.step"
+          :value="value"
+          @change="handleChange"
+        />
+      </div>
+    </div>
+
+    <component
+      v-else
+      :style="
+        `width:${
+          record.options.width !== '100%' ? record.options.width : '120px'
+        }`
+      "
+      v-bind="componentOption"
+      :min="
+        record.options.min || record.options.min === 0
+          ? record.options.min
+          : -Infinity
+      "
+      :max="
+        record.options.max || record.options.max === 0
+          ? record.options.max
+          : Infinity
+      "
+      :count="record.options.max"
+      :precision="
+        record.options.precision > 50 ||
+        (!record.options.precision && record.options.precision !== 0)
+          ? null
+          : record.options.precision
+      "
+      :record="record"
+      :config="config"
+      :disabled="record.options.disabled || parentDisabled"
+      :parentDisabled="record.options.disabled || parentDisabled"
+      :allowClear="record.options.clearable"
+      :dynamicData="dynamicData"
+      :filterOption="
+        record.options.showSearch
+          ? (inputValue, option) => {
+              return (
+                option.componentOptions.children[0].text
+                  .toLowerCase()
+                  .indexOf(inputValue.toLowerCase()) >= 0
+              );
+            }
+          : false
+      "
+      :treeData="
+        !record.options.dynamic
+          ? record.options.options
+          : dynamicData[record.options.dynamicKey]
+          ? dynamicData[record.options.dynamicKey]
+          : []
+      "
+      :options="
+        !record.options.dynamic
+          ? record.options.options
+          : dynamicData[record.options.dynamicKey]
+          ? dynamicData[record.options.dynamicKey]
+          : []
+      "
+      :mode="record.options.multiple ? 'multiple' : ''"
+      :checked="value"
+      :value="value"
+      @change="handleChange($event)"
+      :is="componentItem"
+    ></component>
+  </a-form-model-item>
+  <!-- 文本 -->
+  <a-form-model-item v-else-if="record.type === 'text'">
+    <div :style="{ textAlign: record.options.textAlign }">
+      <label
+        :class="{ 'ant-form-item-required': record.options.showRequiredMark }"
+        :style="{
+          fontFamily: record.options.fontFamily,
+          fontSize: record.options.fontSize,
+          color: record.options.color
+        }"
+        v-text="record.label"
+      ></label>
+    </div>
+  </a-form-model-item>
+  <!-- html -->
+  <div
+    v-else-if="record.type === 'html'"
+    v-html="record.options.defaultValue"
+  ></div>
+
+  <div v-else>
+    <!-- 空 -->
+  </div>
+</template>
+<script>
+/*
+ * author kcz
+ * date 2019-11-20
+ */
+// import moment from "moment";
+
+import UploadFile from "../../UploadFile";
+import UploadImg from "../../UploadImg";
+import KDatePicker from "../../KDatePicker";
+import KTimePicker from "../../KTimePicker";
+import ComponentArray from "../../core/components_use";
+const _ = require("lodash/object");
+
+export default {
+  name: "KFormItem",
+  props: [
+    "record",
+    "domains",
+    "index",
+    "value",
+    "parentDisabled",
+    "dynamicData",
+    "config"
+  ],
+  components: {
+    UploadImg,
+    UploadFile,
+    KDatePicker,
+    KTimePicker
+  },
+  computed: {
+    componentItem() {
+      return ComponentArray[this.record.type];
+    },
+    componentOption() {
+      return _.omit(this.record.options, ["defaultValue", "disabled"]);
+    }
+  },
+  methods: {
+    handleChange(e) {
+      let value = e;
+      if (e.target) {
+        value = e.target.value;
+      }
+      this.$emit("input", value);
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.slider-box {
+  display: flex;
+  > .slider {
+    flex: 1;
+    margin-right: 16px;
+  }
+  > .number {
+    width: 70px;
+  }
+}
+</style>
diff --git a/src/components/KFormDesign/packages/KSelectInputList/selectInputList.vue b/src/components/KFormDesign/packages/KSelectInputList/selectInputList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8baaf8bcb905aff7c2bbdc2ca3af9dc7a273199c
--- /dev/null
+++ b/src/components/KFormDesign/packages/KSelectInputList/selectInputList.vue
@@ -0,0 +1,118 @@
+<!--
+ * @Description: 多列选择 用于选择并且需要输入的表单
+ * @Author: kcz
+ * @Date: 2020-03-27 18:36:56
+ * @LastEditors: kcz
+ * @LastEditTime: 2021-05-16 11:03:45
+ -->
+<template>
+  <a-form-model
+    class="select-input-list-box"
+    ref="dynamicValidateForm"
+    layout="inline"
+    :model="dynamicValidateForm"
+  >
+    <div v-for="(column, i) in record.columns" :key="i">
+      <a-form-model-item>
+        <a-checkbox
+          v-if="record.options.multiple"
+          @change="onCheckboxChange($event, i)"
+          :checked="dynamicValidateForm.domains[i].checked"
+        >
+          {{ column.label }}
+        </a-checkbox>
+        <a-radio
+          v-else
+          @change="onRadioChange($event, i)"
+          :checked="dynamicValidateForm.domains[i].checked"
+          >{{ column.label }}</a-radio
+        >
+      </a-form-model-item>
+      <span v-for="(item, index) in column.list" :key="index">
+        <KFormModelItem
+          :key="item.key + '1'"
+          :record="item"
+          :config="config"
+          :parentDisabled="disabled"
+          :domains="dynamicValidateForm.domains[i]"
+          :dynamicData="dynamicData"
+          v-model="dynamicValidateForm.domains[i][item.model]"
+          @input="handleInput"
+        />
+      </span>
+    </div>
+  </a-form-model>
+</template>
+
+<script>
+import KFormModelItem from "./module/KFormModelItem";
+export default {
+  name: "KBatch",
+  props: ["record", "value", "dynamicData", "config", "parentDisabled"],
+
+  components: {
+    KFormModelItem
+  },
+  watch: {
+    value: {
+      // value 需要深度监听及默认先执行handler函数
+      handler(val) {
+        const initValue = val || [];
+        if (!initValue.length) {
+          this.record.columns.forEach(item => {
+            const itemData = {};
+            item.list.forEach(e => e.model && (itemData[e.model] = null));
+            itemData.checked = false;
+            itemData.value = item.value;
+            itemData.label = item.label;
+            initValue.push(itemData);
+          });
+        }
+
+        this.dynamicValidateForm.domains = initValue;
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  data() {
+    return {
+      dynamicValidateForm: {
+        domains: []
+      }
+    };
+  },
+  computed: {
+    disabled() {
+      return this.record.options.disabled || this.parentDisabled;
+    }
+  },
+  methods: {
+    validationSubform() {
+      let verification;
+      this.$refs.dynamicValidateForm.validate(valid => {
+        verification = valid;
+      });
+      return verification;
+    },
+    resetForm() {
+      this.$refs.dynamicValidateForm.resetFields();
+    },
+    onCheckboxChange(e, index) {
+      this.dynamicValidateForm.domains[index].checked = e.target.checked;
+      this.handleInput();
+    },
+    onRadioChange(e, index) {
+      this.dynamicValidateForm.domains.forEach(item => (item.checked = false));
+      this.dynamicValidateForm.domains[index].checked = e.target.checked;
+      this.handleInput();
+    },
+    handleInput() {
+      this.$emit("change", this.dynamicValidateForm.domains);
+    }
+  },
+  mounted() {
+    this.handleInput();
+  }
+};
+</script>
diff --git a/src/components/KFormDesign/packages/KTimePicker/index.js b/src/components/KFormDesign/packages/KTimePicker/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..624ad6d94afbc596f1cde796d329efdfc176cee1
--- /dev/null
+++ b/src/components/KFormDesign/packages/KTimePicker/index.js
@@ -0,0 +1,2 @@
+import TimePicker from "./timePicker.vue";
+export default TimePicker;
diff --git a/src/components/KFormDesign/packages/KTimePicker/timePicker.vue b/src/components/KFormDesign/packages/KTimePicker/timePicker.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2b10eec4806c1183ad07a9f69700c67fed33c142
--- /dev/null
+++ b/src/components/KFormDesign/packages/KTimePicker/timePicker.vue
@@ -0,0 +1,46 @@
+<!--
+ * @Description: 时间选择器
+ * @Author: kcz
+ * @Date: 2020-01-11 17:30:48
+ * @LastEditors: kcz
+ * @LastEditTime: 2020-03-28 17:35:43
+ -->
+<template>
+  <a-time-picker
+    :style="`width:${record.options.width}`"
+    :disabled="record.options.disabled || parentDisabled"
+    :allowClear="record.options.clearable"
+    :placeholder="record.options.placeholder"
+    :format="record.options.format"
+    @change="handleSelectChange"
+    :value="time"
+  />
+</template>
+<script>
+import moment from "moment";
+export default {
+  // eslint-disable-next-line vue/require-prop-types
+  props: ["record", "value", "parentDisabled"],
+  computed: {
+    time() {
+      if (!this.value) {
+        return undefined;
+      } else {
+        return moment(this.value, this.record.options.format);
+      }
+    }
+  },
+  methods: {
+    handleSelectChange(val) {
+      let time;
+      if (!val) {
+        time = "";
+      } else {
+        time = val.format(this.record.options.format);
+      }
+      this.$emit("change", time);
+      this.$emit("input", time);
+    }
+  }
+};
+</script>
diff --git a/src/components/KFormDesign/packages/PreviewCode/index.vue b/src/components/KFormDesign/packages/PreviewCode/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cd6437b5ae6fe57109e14b1a2da88d730ce6e4eb
--- /dev/null
+++ b/src/components/KFormDesign/packages/PreviewCode/index.vue
@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <div class="json-box-9136076486841527">
+      <codemirror
+        style="height:100%;"
+        ref="myEditor"
+        :value="editorJson"
+      ></codemirror>
+    </div>
+    <div class="copy-btn-box-9136076486841527">
+      <a-button
+        @click="handleCopyJson"
+        type="primary"
+        class="copy-btn"
+        data-clipboard-action="copy"
+        :data-clipboard-text="editorJson"
+      >
+        复制数据
+      </a-button>
+      <a-button @click="handleExportJson" type="primary">
+        导出代码
+      </a-button>
+    </div>
+  </div>
+</template>
+<script>
+// 剪切板组件
+import Clipboard from "clipboard";
+import { codemirror } from "vue-codemirror-lite";
+export default {
+  name: "PreviewCode",
+  props: {
+    fileFormat: {
+      type: String,
+      default: "json"
+    },
+    editorJson: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      visible: false
+    };
+  },
+
+  components: {
+    codemirror
+  },
+  methods: {
+    exportData(data, fileName = `demo.${this.fileFormat}`) {
+      let content = "data:text/csv;charset=utf-8,";
+      content += data;
+      var encodedUri = encodeURI(content);
+      var actions = document.createElement("a");
+      actions.setAttribute("href", encodedUri);
+      actions.setAttribute("download", fileName);
+      actions.click();
+    },
+    handleExportJson() {
+      // 导出JSON
+      this.exportData(this.editorJson);
+    },
+    handleCopyJson() {
+      // 复制数据
+      const clipboard = new Clipboard(".copy-btn");
+      clipboard.on("success", () => {
+        this.$message.success("复制成功");
+      });
+      clipboard.on("error", () => {
+        this.$message.error("复制失败");
+      });
+      setTimeout(() => {
+        // 销毁实例
+        clipboard.destroy();
+      }, 122);
+    }
+  }
+};
+</script>
diff --git a/src/components/KFormDesign/packages/UploadFile/index.js b/src/components/KFormDesign/packages/UploadFile/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..b440b1ad687b1cbc4de49a2a05f89c839a5101f7
--- /dev/null
+++ b/src/components/KFormDesign/packages/UploadFile/index.js
@@ -0,0 +1,2 @@
+import UploadFile from "./uploadFile.vue";
+export default UploadFile;
diff --git a/src/components/KFormDesign/packages/UploadFile/uploadFile.vue b/src/components/KFormDesign/packages/UploadFile/uploadFile.vue
new file mode 100644
index 0000000000000000000000000000000000000000..28c4e90d026b40c01cf64d6f9bbd2fc804ebdac6
--- /dev/null
+++ b/src/components/KFormDesign/packages/UploadFile/uploadFile.vue
@@ -0,0 +1,217 @@
+<!--
+ * @Description: 对上传文件组件进行封装
+ * @Author: kcz
+ * @Date: 2020-03-17 12:53:50
+ * @LastEditors: kcz
+ * @LastEditTime: 2021-05-05 12:12:30
+ -->
+<template>
+  <div :style="{ width: record.options.width }">
+    <a-upload
+      v-if="!record.options.drag"
+      :disabled="record.options.disabled || parentDisabled"
+      :name="config.uploadFileName || record.options.fileName"
+      :headers="config.uploadFileHeaders || record.options.headers"
+      :data="config.uploadFileData || optionsData"
+      :action="config.uploadFile || record.options.action"
+      :multiple="record.options.multiple"
+      :fileList="fileList"
+      @preview="handlePreview"
+      @change="handleChange"
+      :remove="remove"
+      :beforeUpload="beforeUpload"
+    >
+      <a-button
+        v-if="fileList.length < record.options.limit"
+        :disabled="record.options.disabled || parentDisabled"
+      >
+        <a-icon type="upload" /> {{ record.options.placeholder }}
+      </a-button>
+    </a-upload>
+    <a-upload-dragger
+      v-else
+      :class="{ 'hide-upload-drag': !(fileList.length < record.options.limit) }"
+      :disabled="record.options.disabled || parentDisabled"
+      :name="config.uploadFileName || record.options.fileName"
+      :headers="config.uploadFileHeaders || record.options.headers"
+      :data="config.uploadFileData || optionsData"
+      :action="config.uploadFile || record.options.action"
+      :multiple="record.options.multiple"
+      :fileList="fileList"
+      @preview="handlePreview"
+      @change="handleChange"
+      :remove="remove"
+      :beforeUpload="beforeUpload"
+    >
+      <p class="ant-upload-drag-icon">
+        <a-icon type="cloud-upload" />
+      </p>
+      <p class="ant-upload-text">单击或拖动文件到此区域</p>
+    </a-upload-dragger>
+  </div>
+</template>
+<script>
+/*
+ * author kcz
+ * date 2019-12-31
+ * description 上传文件组件
+ */
+export default {
+  name: "KUploadFile",
+  // eslint-disable-next-line vue/require-prop-types
+  props: ["record", "value", "config", "parentDisabled", "dynamicData"],
+  data() {
+    return {
+      fileList: []
+    };
+  },
+  watch: {
+    value: {
+      // value 需要深度监听及默认先执行handler函数
+      handler(val) {
+        if (val) {
+          this.setFileList();
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+
+  computed: {
+    optionsData() {
+      try {
+        return JSON.parse(this.record.options.data);
+      } catch (err) {
+        console.error(err);
+        return {};
+      }
+    }
+  },
+  methods: {
+    setFileList() {
+      // 当传入value改变时，fileList也要改变
+      // 如果传入的值为字符串，则转成json
+      if (typeof this.value === "string") {
+        this.fileList = JSON.parse(this.value);
+        // 将转好的json覆盖组件默认值的字符串
+        this.handleSelectChange();
+      } else {
+        this.fileList = this.value;
+      }
+    },
+    handleSelectChange() {
+      setTimeout(() => {
+        const arr = this.fileList.map(item => {
+          if (typeof item.response !== "undefined") {
+            const res = item.response;
+            return {
+              type: "file",
+              name: item.name,
+              status: item.status,
+              uid: res.data.fileId || Date.now(),
+              url: res.data.url || ""
+            };
+          } else {
+            return {
+              type: "file",
+              name: item.name,
+              status: item.status,
+              uid: item.uid,
+              url: item.url || ""
+            };
+          }
+        });
+
+        this.$emit("change", arr);
+        this.$emit("input", arr);
+      }, 10);
+    },
+    handlePreview(file) {
+      // 下载文件
+      const downloadWay = this.record.options.downloadWay;
+      const dynamicFun = this.record.options.dynamicFun;
+      if (downloadWay === "a") {
+        // 使用a标签下载
+        const a = document.createElement("a");
+        a.href = file.url || file.thumbUrl;
+        a.download = file.name;
+        a.click();
+      } else if (downloadWay === "ajax") {
+        // 使用ajax获取文件blob，并保持到本地
+        this.getBlob(file.url || file.thumbUrl).then(blob => {
+          this.saveAs(blob, file.name);
+        });
+      } else if (downloadWay === "dynamic") {
+        // 触发动态函数
+        this.dynamicData[dynamicFun](file);
+      }
+    },
+    /**
+     * 获取 blob
+     * url 目标文件地址
+     */
+    getBlob(url) {
+      return new Promise(resolve => {
+        const xhr = new XMLHttpRequest();
+
+        xhr.open("GET", url, true);
+        xhr.responseType = "blob";
+        xhr.onload = () => {
+          if (xhr.status === 200) {
+            resolve(xhr.response);
+          }
+        };
+
+        xhr.send();
+      });
+    },
+    /**
+     * 保存 blob
+     * filename 想要保存的文件名称
+     */
+    saveAs(blob, filename) {
+      if (window.navigator.msSaveOrOpenBlob) {
+        navigator.msSaveBlob(blob, filename);
+      } else {
+        const link = document.createElement("a");
+        const body = document.querySelector("body");
+        link.href = window.URL.createObjectURL(blob);
+        link.download = filename;
+
+        // fix Firefox
+        link.style.display = "none";
+        body.appendChild(link);
+
+        link.click();
+        body.removeChild(link);
+
+        window.URL.revokeObjectURL(link.href);
+      }
+    },
+    remove() {
+      this.handleSelectChange();
+    },
+    beforeUpload(e, files) {
+      if (files.length + this.fileList.length > this.record.options.limit) {
+        this.$message.warning(`最大上传数量为${this.record.options.limit}`);
+        files.splice(this.record.options.limit - this.fileList.length);
+      }
+    },
+    handleChange(info) {
+      this.fileList = info.fileList;
+      if (info.file.status === "done") {
+        const res = info.file.response;
+        if (res.code === 0) {
+          this.handleSelectChange();
+        } else {
+          this.fileList.pop();
+          this.$message.error(`文件上传失败`);
+        }
+      } else if (info.file.status === "error") {
+        this.$message.error(`文件上传失败`);
+      }
+    }
+  }
+};
+</script>
diff --git a/src/components/KFormDesign/packages/UploadImg/index.js b/src/components/KFormDesign/packages/UploadImg/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..a9d36500e8086cf96e48520c1e94874785270fab
--- /dev/null
+++ b/src/components/KFormDesign/packages/UploadImg/index.js
@@ -0,0 +1,2 @@
+import UploadImg from "./uploadImg.vue";
+export default UploadImg;
diff --git a/src/components/KFormDesign/packages/UploadImg/uploadImg.vue b/src/components/KFormDesign/packages/UploadImg/uploadImg.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b17b3e92484e5d07fa13f1075d5e8555a593c711
--- /dev/null
+++ b/src/components/KFormDesign/packages/UploadImg/uploadImg.vue
@@ -0,0 +1,180 @@
+<!--
+ * @Description: 对上传图片组件进行封装
+ * @Author: kcz
+ * @Date: 2020-03-17 12:53:50
+ * @LastEditors: kcz
+ * @LastEditTime: 2021-05-05 12:12:39
+ -->
+<template>
+  <div
+    :style="{ width: record.options.width }"
+    class="upload-img-box-9136076486841527"
+  >
+    <a-upload
+      :name="config.uploadImageName || record.options.fileName"
+      :headers="config.uploadImageHeaders || record.options.headers"
+      :data="config.uploadImageData || optionsData"
+      :action="config.uploadImage || record.options.action"
+      :multiple="record.options.multiple"
+      :listType="record.options.listType"
+      :disabled="record.options.disabled || parentDisabled"
+      :fileList="fileList"
+      accept="image/gif, image/jpeg, image/png"
+      @change="handleChange"
+      @preview="handlePreview"
+      :remove="remove"
+      :beforeUpload="beforeUpload"
+    >
+      <a-button
+        v-if="
+          record.options.listType !== 'picture-card' &&
+            fileList.length < record.options.limit
+        "
+        :disabled="record.options.disabled || parentDisabled"
+      >
+        <a-icon type="upload" /> {{ record.options.placeholder }}
+      </a-button>
+      <div
+        v-if="
+          record.options.listType === 'picture-card' &&
+            fileList.length < record.options.limit
+        "
+        :disabled="record.options.disabled || parentDisabled"
+      >
+        <a-icon type="plus" />
+        <div class="ant-upload-text">{{ record.options.placeholder }}</div>
+      </div>
+    </a-upload>
+    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
+      <img alt="example" style="width: 100%" :src="previewImageUrl" />
+    </a-modal>
+  </div>
+</template>
+<script>
+/*
+ * author kcz
+ * date 2019-12-31
+ * description 上传图片组件
+ */
+export default {
+  name: "KUploadImg",
+  // eslint-disable-next-line vue/require-prop-types
+  props: ["record", "value", "config", "parentDisabled"],
+  data() {
+    return {
+      fileList: [],
+      previewVisible: false,
+      previewImageUrl: ""
+    };
+  },
+  watch: {
+    value: {
+      // value 需要深度监听及默认先执行handler函数
+      handler(val) {
+        if (val) {
+          this.setFileList();
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  computed: {
+    optionsData() {
+      try {
+        return JSON.parse(this.record.options.data);
+      } catch (err) {
+        console.error(err);
+        return {};
+      }
+    }
+  },
+  methods: {
+    setFileList() {
+      // 当传入value改变时，fileList也要改变
+      // 如果传入的值为字符串，则转成json
+      if (typeof this.value === "string") {
+        this.fileList = JSON.parse(this.value);
+        // 将转好的json覆盖组件默认值的字符串
+        this.handleSelectChange();
+      } else {
+        this.fileList = this.value;
+      }
+    },
+    handleSelectChange() {
+      setTimeout(() => {
+        const arr = this.fileList.map(item => {
+          if (typeof item.response !== "undefined") {
+            const res = item.response;
+            return {
+              type: "img",
+              name: item.name,
+              status: item.status,
+              uid: item.uid,
+              url: res.data.url || ""
+            };
+          } else {
+            return {
+              type: "img",
+              name: item.name,
+              status: item.status,
+              uid: item.uid,
+              url: item.url || ""
+            };
+          }
+        });
+
+        this.$emit("change", arr);
+        this.$emit("input", arr);
+      }, 10);
+    },
+    handlePreview(file) {
+      // 预览图片
+      this.previewImageUrl = file.url || file.thumbUrl;
+      this.previewVisible = true;
+    },
+    handleCancel() {
+      // 取消操作
+      this.previewVisible = false;
+    },
+    remove() {
+      this.handleSelectChange();
+    },
+    beforeUpload(e, files) {
+      if (files.length + this.fileList.length > this.record.options.limit) {
+        this.$message.warning(`最大上传数量为${this.record.options.limit}`);
+        files.splice(this.record.options.limit - this.fileList.length);
+      }
+    },
+    handleChange(info) {
+      // 上传数据改变时
+      this.fileList = info.fileList;
+      if (info.file.status === "done") {
+        const res = info.file.response;
+        if (res.code === 0) {
+          this.handleSelectChange();
+        } else {
+          this.fileList.pop();
+          this.$message.error(`图片上传失败`);
+        }
+      } else if (info.file.status === "error") {
+        this.$message.error(`图片上传失败`);
+      }
+    }
+  }
+};
+</script>
+<style lang="less">
+.upload-img-box-9136076486841527 {
+  /* you can make up upload button and sample style by using stylesheets */
+  .ant-upload-select-picture-card i {
+    font-size: 32px;
+    color: #999;
+  }
+
+  .ant-upload-select-picture-card .ant-upload-text {
+    margin-top: 8px;
+    color: #666;
+  }
+}
+</style>
diff --git a/src/components/KFormDesign/packages/config/modal.js b/src/components/KFormDesign/packages/config/modal.js
new file mode 100644
index 0000000000000000000000000000000000000000..aa83e62e401f7cdec6d10eb45091cbf5ba0bfbd1
--- /dev/null
+++ b/src/components/KFormDesign/packages/config/modal.js
@@ -0,0 +1,15 @@
+export const dialogStyle = {
+  position: 'absolute',
+  right: '150px',
+  left: '150px',
+  minWidth: '700px',
+  width: 'auto',
+  top: '56px',
+  bottom: '30px',
+  minHeight: '500px'
+}
+
+export const bodyStyle = {
+  height: 'calc(100% - 108px)',
+  overflow: 'auto'
+}
diff --git a/src/components/KFormDesign/packages/core/components_use.js b/src/components/KFormDesign/packages/core/components_use.js
new file mode 100644
index 0000000000000000000000000000000000000000..158d2d0163fb062153e17bac9b7176df5bb216c0
--- /dev/null
+++ b/src/components/KFormDesign/packages/core/components_use.js
@@ -0,0 +1,47 @@
+/**
+ * 该文件是为了按需加载，剔除掉了一些不需要的框架组件。
+ * 减少了编译支持库包大小
+ *
+ * 当需要更多组件依赖时，在该文件加入即可
+ */
+import Vue from 'vue'
+import {
+  Input,
+  Rate,
+  Slider,
+  InputNumber,
+  Switch,
+  Radio,
+  Checkbox,
+  Select,
+  Cascader,
+  TreeSelect
+} from 'ant-design-vue'
+
+import KBatch from '../KBatch'
+import KSelectInputList from '../KSelectInputList'
+import KEditor from '../KEditor'
+import UploadFile from '../UploadFile'
+import UploadImg from '../UploadImg'
+import KDatePicker from '../KDatePicker'
+import KTimePicker from '../KTimePicker'
+
+export default {
+  input: Input,
+  number: InputNumber,
+  select: Select,
+  checkbox: Checkbox,
+  radio: Radio,
+  date: KDatePicker,
+  time: KTimePicker,
+  rate: Rate,
+  slider: Slider,
+  switch: Switch,
+  uploadFile: UploadFile,
+  uploadImg: UploadImg,
+  treeSelect: TreeSelect,
+  cascader: Cascader,
+  batch: KBatch,
+  selectInputList: KSelectInputList,
+  editor: KEditor
+}
diff --git a/src/components/KFormDesign/packages/core/revoke.js b/src/components/KFormDesign/packages/core/revoke.js
new file mode 100644
index 0000000000000000000000000000000000000000..23c13b237ae7964f7413260289c3de7dcad5b01a
--- /dev/null
+++ b/src/components/KFormDesign/packages/core/revoke.js
@@ -0,0 +1,93 @@
+/**
+ 撤销重做功能
+ */
+export class Revoke {
+  // 历史记录
+  recordList = [];
+
+  // 撤销记录，用于重做
+  redoList = [];
+
+  // 当前记录用currentRecord变量暂时存储，当用户修改时，再存放到recordList
+  currentRecord = null;
+
+  // 上次插入数据时间
+  time = 0;
+
+  /**
+   * @description: 插入历史记录
+   * @param {object}record
+   * @return {boolean}
+   */
+  push (record) {
+    const nowTime = Date.now()
+    // 防止添加重复的时间，当添加间隔小于100ms时，则替换当前记录并取消执行添加
+    if (this.time + 100 > nowTime) {
+      this.currentRecord = JSON.stringify(record)
+      return false
+    }
+
+    this.time = nowTime
+
+    // 判断之前是否已经存在currentRecord记录，有则存储到recordList
+    if (this.currentRecord) {
+      this.recordList.push(this.currentRecord)
+      // 增加记录后则应该清空重做记录
+      this.redoList.splice(0, this.redoList.length)
+    }
+
+    // 将json转成字符串存储
+    this.currentRecord = JSON.stringify(record)
+
+    // 最多存储20条记录，超过20天记录则删除之前的记录
+    if (this.length > 20) {
+      this.recordList.unshift()
+    }
+
+    return true
+  }
+
+  /**
+   * @description: 撤销操作
+   * @param {*}
+   * @return {object}
+   */
+  undo () {
+    // 没有记录时,返回false
+    if (this.recordList.length === 0) {
+      return false
+    }
+    const record = this.recordList.pop()
+
+    // 将当前记录添加到重做记录里面
+    if (this.currentRecord) {
+      this.redoList.push(this.currentRecord)
+    }
+    // 丢弃当前记录，防止重复添加
+    this.currentRecord = null
+
+    return JSON.parse(record)
+  }
+
+  /**
+   * @description: 重做操作
+   * @param {*}
+   * @return {*}
+   */
+  redo () {
+    // 没有重做记录时,返回false
+    if (this.redoList.length === 0) {
+      return false
+    }
+
+    const record = this.redoList.pop()
+    // 添加到重做记录里面
+    if (this.currentRecord) {
+      this.recordList.push(this.currentRecord)
+    }
+    // 丢弃当前记录，防止重复添加
+    this.currentRecord = null
+
+    return JSON.parse(record)
+  }
+}
diff --git a/src/components/KFormDesign/packages/index.js b/src/components/KFormDesign/packages/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..28a55eca581447f678e67eab0416432766a4d21c
--- /dev/null
+++ b/src/components/KFormDesign/packages/index.js
@@ -0,0 +1,19 @@
+/*
+ * @Description: 增加antd ui 组件
+ * @Author: kcz
+ * @Date: 2020-01-02 22:41:48
+ * @LastEditors: kcz
+ * @LastEditTime: 2021-05-14 14:20:45
+ */
+
+// 导入ant组件
+import './core/components_use'
+import * as all from './mini'
+
+export default all.default
+export const setFormDesignConfig = all.setFormDesignConfig
+export const setFormBuildConfig = all.setFormBuildConfig
+export const KFormDesign = all.KFormDesign
+export const KFormPreview = all.KFormPreview
+export const KFormBuild = all.KFormBuild
+export const KFormItem = all.KFormItem
diff --git a/src/components/KFormDesign/packages/mini.js b/src/components/KFormDesign/packages/mini.js
new file mode 100644
index 0000000000000000000000000000000000000000..f75905604f9f8e5ad9535660a1576d5abfe87287
--- /dev/null
+++ b/src/components/KFormDesign/packages/mini.js
@@ -0,0 +1,126 @@
+/*
+ * @Description: 组件输出文件,不打包antd ui组件
+ * @Author: kcz
+ * @Date: 2020-01-02 22:41:48
+ * @LastEditors: kcz
+ * @LastEditTime: 2021-05-14 19:09:25
+ */
+
+// 解决Chrome控制台non-passive event listener输出问题
+// import "default-passive-events";
+// 导入样式
+import '../styles/form-design.less'
+
+// 导出本地iconfont
+import '../static/icons/iconfont'
+
+// 导入单个组件
+import KFormDesign from './KFormDesign/index'
+import KFormPreview from './KFormPreview/index'
+import KFormBuild from './KFormBuild/index'
+import KFormItem from './KFormItem/index'
+import {
+  customComponents,
+  basicsList
+} from './KFormDesign/config/formItemsConfig'
+
+const components = [KFormDesign, KFormBuild, KFormItem, KFormPreview]
+
+const install = function (Vue) {
+  // use ant组件
+  if (install.installed) return
+  install.installed = true
+
+  components.map(component => {
+    Vue.component(component.name, component)
+  })
+}
+
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
+/**
+ * @Author: kcz
+ * @description: 配置组件及添加自定义组件
+ * @param {json}
+ * @return: Boolean
+ */
+function setFormDesignConfig (config) {
+  if (!config || typeof config !== 'object') {
+    console.error('传入config的参数必须为对象')
+    return false
+  }
+  try {
+    customComponents.title = config.title || '自义定组件'
+    customComponents.list = config.list || []
+    // 将自定义组件列表绑到window.$customComponentList上
+    window.$customComponentList = config.list || []
+    // uploadFile 配置 start
+    // 配置uploadFile默认上传地址
+    const uploadFile = basicsList.filter(item => item.type === 'uploadFile')[0]
+    uploadFile.options.action =
+      config.uploadFile || 'http://127.0.0.1/uploadFile.txt'
+
+    // 配置uploadFile默认额外参数
+    uploadFile.options.data = JSON.stringify(config.uploadFileData || {})
+
+    // 配置uploadFile默认name
+    uploadFile.options.fileName = config.uploadFileName || 'file'
+    // 配置uploadFile默认headers
+    uploadFile.options.headers = config.uploadFileHeaders || {}
+    // uploadFile 配置 end
+
+    // uploadImage配置 start
+    // 配置uploadImage默认上传地址
+    const uploadImg = basicsList.filter(item => item.type === 'uploadImg')[0]
+    uploadImg.options.action =
+      config.uploadImage || 'http://127.0.0.1/upload-img.txt'
+    // 配置uploadImage默认额外参数
+    uploadImg.options.data = JSON.stringify(config.uploadImageData || {})
+    // 配置uploadFile默认name
+    uploadImg.options.fileName = config.uploadImageName || 'image'
+    // 配置uploadFile默认headers
+    uploadImg.options.headers = config.uploadImageHeaders || {}
+    // uploadImage配置 end
+
+    return true
+  } catch (err) {
+    console.error(err)
+    return false
+  }
+}
+
+/**
+ * @author lizhichao<meteoroc@outlook.com>
+ * @description 配置k-form-build(预览时)，暂只支持dynamicData的设置
+ * @param { object }config
+ */
+function setFormBuildConfig (config) {
+  if (!config || typeof config !== 'object') {
+    console.error('传入setFormBuildConfig的参数必须为对象')
+    return false
+  }
+  if (config.dynamicData) {
+    window.$kfb_dynamicData = config.dynamicData
+  }
+}
+
+// 这里可以用es6的解构语法导入组件
+export {
+  install,
+  KFormDesign,
+  KFormBuild,
+  KFormItem,
+  KFormPreview,
+  setFormDesignConfig,
+  setFormBuildConfig
+}
+
+// 这里默认导入全部组件
+export default {
+  install,
+  setConfig: setFormDesignConfig,
+  setFormDesignConfig: setFormDesignConfig,
+  setFormBuildConfig: setFormBuildConfig
+}
diff --git a/src/components/KFormDesign/static/icons/demo.css b/src/components/KFormDesign/static/icons/demo.css
new file mode 100644
index 0000000000000000000000000000000000000000..e06b41e547b0f934ca12e6f80b4ed81e94c1d481
--- /dev/null
+++ b/src/components/KFormDesign/static/icons/demo.css
@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  /*z-index: 1;*/
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
diff --git a/src/components/KFormDesign/static/icons/demo_index.html b/src/components/KFormDesign/static/icons/demo_index.html
new file mode 100644
index 0000000000000000000000000000000000000000..a38507bb087c2b486fad5f75c02570c3a5cb097f
--- /dev/null
+++ b/src/components/KFormDesign/static/icons/demo_index.html
@@ -0,0 +1,1154 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
+      
+    </a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1609652" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe653;</span>
+                <div class="name">拆分</div>
+                <div class="code-name">&amp;#xe653;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe609;</span>
+                <div class="name">撤销</div>
+                <div class="code-name">&amp;#xe609;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60d;</span>
+                <div class="name">全屏</div>
+                <div class="code-name">&amp;#xe60d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60e;</span>
+                <div class="name">重做</div>
+                <div class="code-name">&amp;#xe60e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60f;</span>
+                <div class="name">组件</div>
+                <div class="code-name">&amp;#xe60f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe610;</span>
+                <div class="name">编辑2</div>
+                <div class="code-name">&amp;#xe610;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe8cd;</span>
+                <div class="name">tabs</div>
+                <div class="code-name">&amp;#xe8cd;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe65b;</span>
+                <div class="name">LC_icon_edit_line_1</div>
+                <div class="code-name">&amp;#xe65b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe72a;</span>
+                <div class="name">edit</div>
+                <div class="code-name">&amp;#xe72a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe83b;</span>
+                <div class="name">edit-2</div>
+                <div class="code-name">&amp;#xe83b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7a5;</span>
+                <div class="name">树型</div>
+                <div class="code-name">&amp;#xe7a5;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe608;</span>
+                <div class="name">模型树</div>
+                <div class="code-name">&amp;#xe608;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61f;</span>
+                <div class="name">关联</div>
+                <div class="code-name">&amp;#xe61f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe607;</span>
+                <div class="name">edit-编辑</div>
+                <div class="code-name">&amp;#xe607;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe612;</span>
+                <div class="name">write-写</div>
+                <div class="code-name">&amp;#xe612;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe613;</span>
+                <div class="name">gallery-画廊</div>
+                <div class="code-name">&amp;#xe613;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe606;</span>
+                <div class="name">代码</div>
+                <div class="code-name">&amp;#xe606;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe693;</span>
+                <div class="name">html5</div>
+                <div class="code-name">&amp;#xe693;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe615;</span>
+                <div class="name">提示</div>
+                <div class="code-name">&amp;#xe615;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe633;</span>
+                <div class="name">time-时间</div>
+                <div class="code-name">&amp;#xe633;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe639;</span>
+                <div class="name">number</div>
+                <div class="code-name">&amp;#xe639;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe605;</span>
+                <div class="name">menu-菜单</div>
+                <div class="code-name">&amp;#xe605;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60b;</span>
+                <div class="name">download-下载</div>
+                <div class="code-name">&amp;#xe60b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60c;</span>
+                <div class="name">upload-上传</div>
+                <div class="code-name">&amp;#xe60c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe611;</span>
+                <div class="name">folder-文件夹</div>
+                <div class="code-name">&amp;#xe611;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61a;</span>
+                <div class="name">image-图像</div>
+                <div class="code-name">&amp;#xe61a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60a;</span>
+                <div class="name">calendar-日历</div>
+                <div class="code-name">&amp;#xe60a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe676;</span>
+                <div class="name">单选-粗线条</div>
+                <div class="code-name">&amp;#xe676;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe623;</span>
+                <div class="name">字号</div>
+                <div class="code-name">&amp;#xe623;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe637;</span>
+                <div class="name">button-add-按钮添加</div>
+                <div class="code-name">&amp;#xe637;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe638;</span>
+                <div class="name">button-remove-按钮删除</div>
+                <div class="code-name">&amp;#xe638;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe66d;</span>
+                <div class="name">多选</div>
+                <div class="code-name">&amp;#xe66d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6e6;</span>
+                <div class="name">单行文本</div>
+                <div class="code-name">&amp;#xe6e6;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6e7;</span>
+                <div class="name">多行文本</div>
+                <div class="code-name">&amp;#xe6e7;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62d;</span>
+                <div class="name">单选 选中</div>
+                <div class="code-name">&amp;#xe62d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6da;</span>
+                <div class="name">开关3</div>
+                <div class="code-name">&amp;#xe6da;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe63e;</span>
+                <div class="name">表格</div>
+                <div class="code-name">&amp;#xe63e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe674;</span>
+                <div class="name">卡片</div>
+                <div class="code-name">&amp;#xe674;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe63f;</span>
+                <div class="name">栅格</div>
+                <div class="code-name">&amp;#xe63f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe640;</span>
+                <div class="name">下拉2</div>
+                <div class="code-name">&amp;#xe640;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xec7f;</span>
+                <div class="name">分割线</div>
+                <div class="code-name">&amp;#xec7f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe877;</span>
+                <div class="name">评分_默认</div>
+                <div class="code-name">&amp;#xe877;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1622099828259') format('woff2'),
+       url('iconfont.woff?t=1622099828259') format('woff'),
+       url('iconfont.ttf?t=1622099828259') format('truetype');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-chaifen"></span>
+            <div class="name">
+              拆分
+            </div>
+            <div class="code-name">.icon-chaifen
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-chexiao"></span>
+            <div class="name">
+              撤销
+            </div>
+            <div class="code-name">.icon-chexiao
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-quanping"></span>
+            <div class="name">
+              全屏
+            </div>
+            <div class="code-name">.icon-quanping
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zhongzuo"></span>
+            <div class="name">
+              重做
+            </div>
+            <div class="code-name">.icon-zhongzuo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zujian"></span>
+            <div class="name">
+              组件
+            </div>
+            <div class="code-name">.icon-zujian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-bianji2"></span>
+            <div class="name">
+              编辑2
+            </div>
+            <div class="code-name">.icon-bianji2
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tabs"></span>
+            <div class="name">
+              tabs
+            </div>
+            <div class="code-name">.icon-tabs
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-LC_icon_edit_line_1"></span>
+            <div class="name">
+              LC_icon_edit_line_1
+            </div>
+            <div class="code-name">.icon-LC_icon_edit_line_1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-edit1"></span>
+            <div class="name">
+              edit
+            </div>
+            <div class="code-name">.icon-edit1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-edit-"></span>
+            <div class="name">
+              edit-2
+            </div>
+            <div class="code-name">.icon-edit-
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-juxingkaobei"></span>
+            <div class="name">
+              树型
+            </div>
+            <div class="code-name">.icon-juxingkaobei
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tree"></span>
+            <div class="name">
+              模型树
+            </div>
+            <div class="code-name">.icon-tree
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-guanlian"></span>
+            <div class="name">
+              关联
+            </div>
+            <div class="code-name">.icon-guanlian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-edit"></span>
+            <div class="name">
+              edit-编辑
+            </div>
+            <div class="code-name">.icon-edit
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-write"></span>
+            <div class="name">
+              write-写
+            </div>
+            <div class="code-name">.icon-write
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-gallery"></span>
+            <div class="name">
+              gallery-画廊
+            </div>
+            <div class="code-name">.icon-gallery
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-ai-code"></span>
+            <div class="name">
+              代码
+            </div>
+            <div class="code-name">.icon-ai-code
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-html"></span>
+            <div class="name">
+              html5
+            </div>
+            <div class="code-name">.icon-html
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zu"></span>
+            <div class="name">
+              提示
+            </div>
+            <div class="code-name">.icon-zu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-time"></span>
+            <div class="name">
+              time-时间
+            </div>
+            <div class="code-name">.icon-time
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-number"></span>
+            <div class="name">
+              number
+            </div>
+            <div class="code-name">.icon-number
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-menu"></span>
+            <div class="name">
+              menu-菜单
+            </div>
+            <div class="code-name">.icon-menu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-download"></span>
+            <div class="name">
+              download-下载
+            </div>
+            <div class="code-name">.icon-download
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-upload"></span>
+            <div class="name">
+              upload-上传
+            </div>
+            <div class="code-name">.icon-upload
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-folder"></span>
+            <div class="name">
+              folder-文件夹
+            </div>
+            <div class="code-name">.icon-folder
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-image"></span>
+            <div class="name">
+              image-图像
+            </div>
+            <div class="code-name">.icon-image
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-calendar"></span>
+            <div class="name">
+              calendar-日历
+            </div>
+            <div class="code-name">.icon-calendar
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-danxuan-cuxiantiao"></span>
+            <div class="name">
+              单选-粗线条
+            </div>
+            <div class="code-name">.icon-danxuan-cuxiantiao
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zihao"></span>
+            <div class="name">
+              字号
+            </div>
+            <div class="code-name">.icon-zihao
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-button-add"></span>
+            <div class="name">
+              button-add-按钮添加
+            </div>
+            <div class="code-name">.icon-button-add
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-button-remove"></span>
+            <div class="name">
+              button-remove-按钮删除
+            </div>
+            <div class="code-name">.icon-button-remove
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-duoxuan1"></span>
+            <div class="name">
+              多选
+            </div>
+            <div class="code-name">.icon-duoxuan1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-danhangwenben"></span>
+            <div class="name">
+              单行文本
+            </div>
+            <div class="code-name">.icon-danhangwenben
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-duohangwenben"></span>
+            <div class="name">
+              多行文本
+            </div>
+            <div class="code-name">.icon-duohangwenben
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-danxuanxuanzhong"></span>
+            <div class="name">
+              单选 选中
+            </div>
+            <div class="code-name">.icon-danxuanxuanzhong
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-kaiguan3"></span>
+            <div class="name">
+              开关3
+            </div>
+            <div class="code-name">.icon-kaiguan3
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-biaoge"></span>
+            <div class="name">
+              表格
+            </div>
+            <div class="code-name">.icon-biaoge
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-qiapian"></span>
+            <div class="name">
+              卡片
+            </div>
+            <div class="code-name">.icon-qiapian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zhage"></span>
+            <div class="name">
+              栅格
+            </div>
+            <div class="code-name">.icon-zhage
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xiala"></span>
+            <div class="name">
+              下拉2
+            </div>
+            <div class="code-name">.icon-xiala
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-fengexian"></span>
+            <div class="name">
+              分割线
+            </div>
+            <div class="code-name">.icon-fengexian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-pingfen_moren"></span>
+            <div class="name">
+              评分_默认
+            </div>
+            <div class="code-name">.icon-pingfen_moren
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-chaifen"></use>
+                </svg>
+                <div class="name">拆分</div>
+                <div class="code-name">#icon-chaifen</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-chexiao"></use>
+                </svg>
+                <div class="name">撤销</div>
+                <div class="code-name">#icon-chexiao</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-quanping"></use>
+                </svg>
+                <div class="name">全屏</div>
+                <div class="code-name">#icon-quanping</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zhongzuo"></use>
+                </svg>
+                <div class="name">重做</div>
+                <div class="code-name">#icon-zhongzuo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zujian"></use>
+                </svg>
+                <div class="name">组件</div>
+                <div class="code-name">#icon-zujian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-bianji2"></use>
+                </svg>
+                <div class="name">编辑2</div>
+                <div class="code-name">#icon-bianji2</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tabs"></use>
+                </svg>
+                <div class="name">tabs</div>
+                <div class="code-name">#icon-tabs</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-LC_icon_edit_line_1"></use>
+                </svg>
+                <div class="name">LC_icon_edit_line_1</div>
+                <div class="code-name">#icon-LC_icon_edit_line_1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-edit1"></use>
+                </svg>
+                <div class="name">edit</div>
+                <div class="code-name">#icon-edit1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-edit-"></use>
+                </svg>
+                <div class="name">edit-2</div>
+                <div class="code-name">#icon-edit-</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-juxingkaobei"></use>
+                </svg>
+                <div class="name">树型</div>
+                <div class="code-name">#icon-juxingkaobei</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tree"></use>
+                </svg>
+                <div class="name">模型树</div>
+                <div class="code-name">#icon-tree</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-guanlian"></use>
+                </svg>
+                <div class="name">关联</div>
+                <div class="code-name">#icon-guanlian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-edit"></use>
+                </svg>
+                <div class="name">edit-编辑</div>
+                <div class="code-name">#icon-edit</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-write"></use>
+                </svg>
+                <div class="name">write-写</div>
+                <div class="code-name">#icon-write</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-gallery"></use>
+                </svg>
+                <div class="name">gallery-画廊</div>
+                <div class="code-name">#icon-gallery</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-ai-code"></use>
+                </svg>
+                <div class="name">代码</div>
+                <div class="code-name">#icon-ai-code</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-html"></use>
+                </svg>
+                <div class="name">html5</div>
+                <div class="code-name">#icon-html</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zu"></use>
+                </svg>
+                <div class="name">提示</div>
+                <div class="code-name">#icon-zu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-time"></use>
+                </svg>
+                <div class="name">time-时间</div>
+                <div class="code-name">#icon-time</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-number"></use>
+                </svg>
+                <div class="name">number</div>
+                <div class="code-name">#icon-number</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-menu"></use>
+                </svg>
+                <div class="name">menu-菜单</div>
+                <div class="code-name">#icon-menu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-download"></use>
+                </svg>
+                <div class="name">download-下载</div>
+                <div class="code-name">#icon-download</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-upload"></use>
+                </svg>
+                <div class="name">upload-上传</div>
+                <div class="code-name">#icon-upload</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-folder"></use>
+                </svg>
+                <div class="name">folder-文件夹</div>
+                <div class="code-name">#icon-folder</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-image"></use>
+                </svg>
+                <div class="name">image-图像</div>
+                <div class="code-name">#icon-image</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-calendar"></use>
+                </svg>
+                <div class="name">calendar-日历</div>
+                <div class="code-name">#icon-calendar</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-danxuan-cuxiantiao"></use>
+                </svg>
+                <div class="name">单选-粗线条</div>
+                <div class="code-name">#icon-danxuan-cuxiantiao</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zihao"></use>
+                </svg>
+                <div class="name">字号</div>
+                <div class="code-name">#icon-zihao</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-button-add"></use>
+                </svg>
+                <div class="name">button-add-按钮添加</div>
+                <div class="code-name">#icon-button-add</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-button-remove"></use>
+                </svg>
+                <div class="name">button-remove-按钮删除</div>
+                <div class="code-name">#icon-button-remove</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-duoxuan1"></use>
+                </svg>
+                <div class="name">多选</div>
+                <div class="code-name">#icon-duoxuan1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-danhangwenben"></use>
+                </svg>
+                <div class="name">单行文本</div>
+                <div class="code-name">#icon-danhangwenben</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-duohangwenben"></use>
+                </svg>
+                <div class="name">多行文本</div>
+                <div class="code-name">#icon-duohangwenben</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-danxuanxuanzhong"></use>
+                </svg>
+                <div class="name">单选 选中</div>
+                <div class="code-name">#icon-danxuanxuanzhong</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-kaiguan3"></use>
+                </svg>
+                <div class="name">开关3</div>
+                <div class="code-name">#icon-kaiguan3</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-biaoge"></use>
+                </svg>
+                <div class="name">表格</div>
+                <div class="code-name">#icon-biaoge</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-qiapian"></use>
+                </svg>
+                <div class="name">卡片</div>
+                <div class="code-name">#icon-qiapian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zhage"></use>
+                </svg>
+                <div class="name">栅格</div>
+                <div class="code-name">#icon-zhage</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xiala"></use>
+                </svg>
+                <div class="name">下拉2</div>
+                <div class="code-name">#icon-xiala</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-fengexian"></use>
+                </svg>
+                <div class="name">分割线</div>
+                <div class="code-name">#icon-fengexian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-pingfen_moren"></use>
+                </svg>
+                <div class="name">评分_默认</div>
+                <div class="code-name">#icon-pingfen_moren</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>
diff --git a/src/components/KFormDesign/static/icons/iconfont.css b/src/components/KFormDesign/static/icons/iconfont.css
new file mode 100644
index 0000000000000000000000000000000000000000..42a8562b146d4a3a05d0c9239d2180544357b9d5
--- /dev/null
+++ b/src/components/KFormDesign/static/icons/iconfont.css
@@ -0,0 +1,183 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 1609652 */
+  src: url('iconfont.woff2?t=1622099828259') format('woff2'),
+       url('iconfont.woff?t=1622099828259') format('woff'),
+       url('iconfont.ttf?t=1622099828259') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-chaifen:before {
+  content: "\e653";
+}
+
+.icon-chexiao:before {
+  content: "\e609";
+}
+
+.icon-quanping:before {
+  content: "\e60d";
+}
+
+.icon-zhongzuo:before {
+  content: "\e60e";
+}
+
+.icon-zujian:before {
+  content: "\e60f";
+}
+
+.icon-bianji2:before {
+  content: "\e610";
+}
+
+.icon-tabs:before {
+  content: "\e8cd";
+}
+
+.icon-LC_icon_edit_line_1:before {
+  content: "\e65b";
+}
+
+.icon-edit1:before {
+  content: "\e72a";
+}
+
+.icon-edit-:before {
+  content: "\e83b";
+}
+
+.icon-juxingkaobei:before {
+  content: "\e7a5";
+}
+
+.icon-tree:before {
+  content: "\e608";
+}
+
+.icon-guanlian:before {
+  content: "\e61f";
+}
+
+.icon-edit:before {
+  content: "\e607";
+}
+
+.icon-write:before {
+  content: "\e612";
+}
+
+.icon-gallery:before {
+  content: "\e613";
+}
+
+.icon-ai-code:before {
+  content: "\e606";
+}
+
+.icon-html:before {
+  content: "\e693";
+}
+
+.icon-zu:before {
+  content: "\e615";
+}
+
+.icon-time:before {
+  content: "\e633";
+}
+
+.icon-number:before {
+  content: "\e639";
+}
+
+.icon-menu:before {
+  content: "\e605";
+}
+
+.icon-download:before {
+  content: "\e60b";
+}
+
+.icon-upload:before {
+  content: "\e60c";
+}
+
+.icon-folder:before {
+  content: "\e611";
+}
+
+.icon-image:before {
+  content: "\e61a";
+}
+
+.icon-calendar:before {
+  content: "\e60a";
+}
+
+.icon-danxuan-cuxiantiao:before {
+  content: "\e676";
+}
+
+.icon-zihao:before {
+  content: "\e623";
+}
+
+.icon-button-add:before {
+  content: "\e637";
+}
+
+.icon-button-remove:before {
+  content: "\e638";
+}
+
+.icon-duoxuan1:before {
+  content: "\e66d";
+}
+
+.icon-danhangwenben:before {
+  content: "\e6e6";
+}
+
+.icon-duohangwenben:before {
+  content: "\e6e7";
+}
+
+.icon-danxuanxuanzhong:before {
+  content: "\e62d";
+}
+
+.icon-kaiguan3:before {
+  content: "\e6da";
+}
+
+.icon-biaoge:before {
+  content: "\e63e";
+}
+
+.icon-qiapian:before {
+  content: "\e674";
+}
+
+.icon-zhage:before {
+  content: "\e63f";
+}
+
+.icon-xiala:before {
+  content: "\e640";
+}
+
+.icon-fengexian:before {
+  content: "\ec7f";
+}
+
+.icon-pingfen_moren:before {
+  content: "\e877";
+}
+
diff --git a/src/components/KFormDesign/static/icons/iconfont.js b/src/components/KFormDesign/static/icons/iconfont.js
new file mode 100644
index 0000000000000000000000000000000000000000..a07d883b349797f1ad545ab670f049bb0937a015
--- /dev/null
+++ b/src/components/KFormDesign/static/icons/iconfont.js
@@ -0,0 +1 @@
+!function(a){var h,t,o,l,v,i,c='<svg><symbol id="icon-chaifen" viewBox="0 0 1024 1024"><path d="M719.4624 472.5248l0 246.9376L472.4736 719.4624 472.4736 472.5248 719.4624 472.5248M764.0064 427.9808 427.9296 427.9808l0 336.0256 336.0256 0L763.9552 427.9808 764.0064 427.9808z"  ></path><path d="M551.4752 304.5376l0 246.8864L304.5888 551.424 304.5888 304.5376 551.4752 304.5376M596.0704 259.9936 259.9936 259.9936l0 336.0256 336.0256 0L596.0192 259.9936 596.0704 259.9936z"  ></path><path d="M51.2 102.4l921.6 0 0 51.2-921.6 0 0-51.2Z"  ></path><path d="M51.2 870.4l102.4 0 0 102.4-102.4 0 0-102.4Z"  ></path><path d="M51.2 870.4l921.6 0 0 51.2-921.6 0 0-51.2Z"  ></path><path d="M102.4 51.2l51.2 0 0 921.6-51.2 0 0-921.6Z"  ></path><path d="M870.4 51.2l51.2 0 0 921.6-51.2 0 0-921.6Z"  ></path><path d="M51.2 51.2l102.4 0 0 102.4-102.4 0 0-102.4Z"  ></path><path d="M460.8 51.2l102.4 0 0 102.4-102.4 0 0-102.4Z"  ></path><path d="M870.4 51.2l102.4 0 0 102.4-102.4 0 0-102.4Z"  ></path><path d="M460.8 870.4l102.4 0 0 102.4-102.4 0 0-102.4Z"  ></path><path d="M870.4 870.4l102.4 0 0 102.4-102.4 0 0-102.4Z"  ></path><path d="M51.2 460.8l102.4 0 0 102.4-102.4 0 0-102.4Z"  ></path><path d="M870.4 460.8l102.4 0 0 102.4-102.4 0 0-102.4Z"  ></path></symbol><symbol id="icon-chexiao" viewBox="0 0 1024 1024"><path d="M248.035556 112.014222a7.964444 7.964444 0 0 1 7.964444 7.964445v87.267555a397.994667 397.994667 0 1 1-141.767111 319.146667l-0.170667-6.428445a7.793778 7.793778 0 0 1 7.395556-7.964444h56.661333a7.964444 7.964444 0 0 1 7.964445 7.566222v0.455111A325.973333 325.973333 0 1 0 310.101333 256h81.92a7.964444 7.964444 0 0 1 7.964445 7.964444v56.035556a7.964444 7.964444 0 0 1-7.964445 7.964444H192a7.964444 7.964444 0 0 1-7.964444-7.964444V119.978667a7.964444 7.964444 0 0 1 7.964444-7.964445h55.978667z" fill="#1D1F24" ></path></symbol><symbol id="icon-quanping" viewBox="0 0 1024 1024"><path d="M903.964444 112.014222a7.964444 7.964444 0 0 1 8.021334 7.736889v784.270222a7.964444 7.964444 0 0 1-7.736889 7.964445H119.978667a7.964444 7.964444 0 0 1-7.964445-7.736889V119.978667a7.964444 7.964444 0 0 1 7.736889-7.964445h784.270222z m-63.943111 71.964445H183.978667v656.042666h656.042666V183.978667z m-387.185777 352.711111l39.480888 39.480889a7.964444 7.964444 0 0 1 0 11.320889l-128.512 128.512H442.026667a7.964444 7.964444 0 0 1 7.964444 7.964444v56.035556a7.964444 7.964444 0 0 1-7.964444 7.964444H244.053333a7.964444 7.964444 0 0 1-8.078222-7.964444v-197.973334a7.964444 7.964444 0 0 1 8.021333-8.021333h55.978667a7.964444 7.964444 0 0 1 8.021333 7.964444v88.177778l133.518223-133.518222a7.964444 7.964444 0 0 1 11.377777 0z m335.189333-292.693334v197.973334a7.964444 7.964444 0 0 1-8.021333 8.021333h-55.978667a7.964444 7.964444 0 0 1-8.021333-7.964444V353.507556l-133.916445 133.859555a7.964444 7.964444 0 0 1-11.264 0l-39.594667-39.594667a7.964444 7.964444 0 0 1 0-11.320888l128.455112-128.455112H581.973333a7.964444 7.964444 0 0 1-7.964444-7.964444v-56.035556a7.964444 7.964444 0 0 1 7.964444-7.964444h197.973334a7.964444 7.964444 0 0 1 8.078222 7.964444z" fill="#1D1F24" ></path></symbol><symbol id="icon-zhongzuo" viewBox="0 0 1024 1024"><path d="M775.964444 112.014222a7.964444 7.964444 0 0 0-7.964444 7.964445v87.267555a397.994667 397.994667 0 1 0 141.767111 319.146667l0.170667-6.428445a7.793778 7.793778 0 0 0-7.395556-7.964444h-56.661333a7.964444 7.964444 0 0 0-7.964445 7.566222v0.455111a325.973333 325.973333 0 1 1-124.017777-264.021333h-81.92a7.964444 7.964444 0 0 0-7.964445 7.964444v56.035556c0 4.437333 3.584 7.964444 7.964445 7.964444h200.021333a7.964444 7.964444 0 0 0 7.964444-7.964444V119.978667a7.964444 7.964444 0 0 0-7.964444-7.964445h-55.978667z" fill="#1D1F24" ></path></symbol><symbol id="icon-zujian" viewBox="0 0 1024 1024"><path d="M430.528 72.96c4.416 0 8 3.648 8 8.064v96h146.944v-96c0-4.48 3.584-8 8-8h56c4.48 0 8 3.584 8 8v96h183.552c4.288 0 7.872 3.392 8 7.68V366.592h93.952c4.48 0 8 3.584 8 8v56a8 8 0 0 1-8 8h-93.952V548.48h93.952c4.48 0 8 3.584 8 8v56a8 8 0 0 1-8 8h-93.952v220.544a8 8 0 0 1-7.744 8h-183.808v93.952a8 8 0 0 1-8 8h-56a8 8 0 0 1-8-8v-93.952H438.528v93.952a8 8 0 0 1-8 8h-56a8 8 0 0 1-8-8v-93.952H184.96a8 8 0 0 1-8-7.744v-220.8h-96a8 8 0 0 1-8-8v-56c0-4.416 3.584-8 8-8h96V438.528h-96a8 8 0 0 1-8-8v-56c0-4.48 3.584-8 8-8h96V184.96c0-4.352 3.392-7.872 7.68-8H366.592v-96c0-4.48 3.584-8 8-8h56z m346.496 176H248.96v528h528V248.96z m-126.08 120.064c4.416 0 7.936 3.392 8.064 7.68v274.24a8 8 0 0 1-7.744 8.064H376.96a8 8 0 0 1-8-7.744V376.96c0-4.352 3.392-7.872 7.68-8h274.24z m-64 72h-145.92v145.92h145.92v-145.92z" fill="#1D1F24" ></path></symbol><symbol id="icon-bianji2" viewBox="0 0 1024 1024"><path d="M170.666667 910.222222H113.777778V113.777778h56.888889v796.444444z m739.555555 0h-56.888889V113.777778h56.888889v796.444444z" fill="#1D1F24" ></path><path d="M739.555556 910.222222H284.444444V113.777778h455.111112v796.444444z m-56.888889-56.888889V170.666667H341.333333v682.666666h341.333334z" fill="#1D1F24" ></path></symbol><symbol id="icon-tabs" viewBox="0 0 1024 1024"><path d="M853.333333 170.666667H170.666667a85.333333 85.333333 0 0 0-85.333334 85.333333v512a85.333333 85.333333 0 0 0 85.333334 85.333333h682.666666a85.333333 85.333333 0 0 0 85.333334-85.333333V256a85.333333 85.333333 0 0 0-85.333334-85.333333z m0 597.333333H170.666667V298.666667a42.666667 42.666667 0 0 1 42.666666-42.666667h213.333334a42.666667 42.666667 0 0 1 42.666666 42.666667v85.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h341.333333z m0-426.666667h-298.666666V298.666667a42.666667 42.666667 0 0 1 42.666666-42.666667h213.333334a42.666667 42.666667 0 0 1 42.666666 42.666667z"  ></path></symbol><symbol id="icon-LC_icon_edit_line_1" viewBox="0 0 1024 1024"><path d="M64 896 64 128c0-35.312 28.752-64 64-64l640 0c35.312 0 64 28.688 64 64l0 376.248 64-64L896 128c0-70.688-57.312-128-128-128L128 0C57.312 0 0 57.312 0 128l0 768c0 70.688 57.312 128 128 128l352 0 0-64L128 960C92.752 960 64 931.312 64 896zM704 192 192 192l0 64 512 0L704 192zM704 320 192 320l0 64 512 0L704 320zM704 448 192 448l0 64 512 0L704 448zM192 640l256 0 0-64L192 576 192 640zM1005.248 576 960 530.752c-12.504-12.504-28.872-18.752-45.248-18.752s-32.752 6.248-45.248 18.752l-274.752 274.752C582.248 818 544 866.344 544 882.72L512 1024l141.248-32c0 0 64.752-38.248 77.248-50.752l274.752-274.752C1030.248 641.504 1030.248 600.968 1005.248 576zM707.936 918.56c-3.624 3.44-16.16 11.904-31.472 21.656l-82.904-82.904c8.504-11.656 17.968-23.376 23.816-29.184l206.872-206.872 90.504 90.504L707.936 918.56z"  ></path></symbol><symbol id="icon-edit1" viewBox="0 0 1024 1024"><path d="M413.8 253.4c23.1 0 41.9-18.7 41.9-41.9s-18.7-41.9-41.9-41.9-41.8 18.8-41.8 41.9 18.7 41.9 41.8 41.9z m0-55.8c7.7 0 14 6.3 14 14s-6.3 14-14 14-14-6.3-14-14 6.3-14 14-14z m-223.2 55.8c23.1 0 41.9-18.7 41.9-41.9s-18.7-41.9-41.9-41.9-41.9 18.7-41.9 41.9 18.8 41.9 41.9 41.9z m0-55.8c7.7 0 14 6.3 14 14s-6.3 14-14 14-14-6.3-14-14 6.3-14 14-14z m111.6 55.8c23.1 0 41.9-18.7 41.9-41.9s-18.7-41.9-41.9-41.9-41.9 18.7-41.9 41.9 18.8 41.9 41.9 41.9z m0-55.8c7.7 0 14 6.3 14 14s-6.3 14-14 14-14-6.3-14-14 6.3-14 14-14zM930.1 72H92.9C77.5 72 65 84.5 65 99.9v837.2c0 15.4 12.5 27.9 27.9 27.9h837.2c15.4 0 27.9-12.5 27.9-27.9V99.9c0-15.4-12.5-27.9-27.9-27.9z m0 865.1H92.9v-586h837.2v586z m0-613.9H92.9V99.9h837.2v223.3zM171.5 654.1l142.1 142.1c5.5 5.5 14.3 5.5 19.8 0s5.5-14.3 0-19.8L191.3 634.3l142.1-142.1c5.5-5.5 5.5-14.3 0-19.8s-14.3-5.5-19.8 0L171.5 614.5l-19.8 19.8 19.8 19.8z m515.3 142.1c5.5 5.5 14.3 5.5 19.8 0l142.1-142.1 19.8-19.8-19.8-19.8-142.1-142.1c-5.5-5.5-14.3-5.5-19.8 0s-5.5 14.3 0 19.8l142.1 142.1-142.1 142.1c-5.5 5.5-5.5 14.4 0 19.8z m-299.3 33c6.7 3.9 15.3 1.6 19.1-5.1l211-365.5c3.9-6.7 1.6-15.3-5.1-19.1-6.7-3.9-15.3-1.6-19.1 5.1l-211 365.5c-3.9 6.7-1.6 15.2 5.1 19.1z"  ></path></symbol><symbol id="icon-edit-" viewBox="0 0 1024 1024"><path d="M356.12672 870.13376A105.96352 105.96352 0 0 1 280.69888 901.12l-121.56928-0.49152a35.96288 35.96288 0 0 1-35.75808-35.75808L122.88 743.30112a105.96352 105.96352 0 0 1 30.98624-75.42784L672.0512 146.26816a79.11424 79.11424 0 0 1 111.90272-0.43008l94.0032 94.0032a79.11424 79.11424 0 0 1 0 111.88224l-521.8304 518.41024zM752.78336 368.64L819.2 304.27136 719.72864 204.8 655.36 271.21664 752.78336 368.64zM298.72128 134.88128L430.08 266.24l-163.84 163.84-131.35872-131.35872a40.96 40.96 0 0 1 0-57.93792l105.90208-105.90208a40.96 40.96 0 0 1 57.93792 0z m426.55744 754.23744L593.92 757.76l163.84-163.84 131.35872 131.35872a40.96 40.96 0 0 1 0 57.93792l-105.90208 105.90208a40.96 40.96 0 0 1-57.93792 0z"  ></path></symbol><symbol id="icon-juxingkaobei" viewBox="0 0 1024 1024"><path d="M128.692 127.99v191.05H319.04V127.99H128.692z m127.261 127.963h-64.169v-64.169h64.169v64.169zM511.333 704.223v191.416h385.792V704.223H511.333zM832 832H576.112v-64.198H832V832zM384.075 127.99v191.05h512.099V127.99H384.075z m448.087 127.963H448.087v-64.169h384.075v64.169zM511.333 448.209v191.416H896.23V448.209H511.333z m319.922 127.776H575.961v-64.198h255.294v64.198zM192.037 319.041h64.012v512.68h-64.012z"  ></path><path d="M256.05 767.802h255.284v63.919H256.05zM256.05 512h255.284v63.381H256.05z"  ></path></symbol><symbol id="icon-tree" viewBox="0 0 1024 1024"><path d="M490.666667 716.8h401.066666c25.6 0 46.933333 21.333333 46.933334 51.2v76.8c0 25.6-21.333333 51.2-46.933334 51.2h-401.066666c-25.6 0-46.933333-21.333333-46.933334-51.2v-8.533333H174.933333c-17.066667 0-29.866667-12.8-29.866666-29.866667V307.2h-12.8C106.666667 307.2 85.333333 281.6 85.333333 256V179.2C85.333333 149.333333 106.666667 128 132.266667 128H213.333333c25.6 0 46.933333 21.333333 46.933334 51.2V256c0 25.6-21.333333 51.2-46.933334 51.2h-12.8v179.2h238.933334v-8.533333c0-25.6 21.333333-51.2 46.933333-51.2h401.066667c25.6 0 46.933333 21.333333 46.933333 51.2V554.666667c0 25.6-21.333333 51.2-46.933333 51.2h-401.066667c-25.6 0-46.933333-21.333333-46.933333-51.2v-8.533334H200.533333v234.666667h238.933334V768c0-25.6 21.333333-51.2 51.2-51.2z m401.066666-409.6H366.933333c-29.866667 0-51.2-25.6-51.2-51.2V179.2c0-29.866667 21.333333-51.2 51.2-51.2h524.8c25.6 0 46.933333 21.333333 46.933334 51.2V256c0 25.6-21.333333 51.2-46.933334 51.2z"  ></path></symbol><symbol id="icon-guanlian" viewBox="0 0 1024 1024"><path d="M832 704V576h64V128H384v448h192v128H256V0h768v704h-192zM128 896h512V448H448V320h320v704H0V320h192v128H128v448z"  ></path></symbol><symbol id="icon-edit" viewBox="0 0 1024 1024"><path d="M869.855783 1024H51.167987a51.167987 51.167987 0 0 1-51.167987-51.167987V154.144217a51.167987 51.167987 0 0 1 51.167987-51.167988h460.511886v102.335975H102.335975v716.351821h716.351821V512.320127h102.335975v460.511886a51.167987 51.167987 0 0 1-51.167988 51.167987z"  ></path><path d="M475.493872 548.485661a51.167987 51.167987 0 0 1 0-72.351534l460.511885-460.511886a51.167987 51.167987 0 1 1 72.351534 72.351534l-460.511885 460.511886a51.167987 51.167987 0 0 1-72.351534 0z"  ></path></symbol><symbol id="icon-write" viewBox="0 0 1024 1024"><path d="M921.6 1024H102.4a51.2 51.2 0 0 1 0-102.4h819.2a51.2 51.2 0 1 1 0 102.4zM358.4 819.2H153.6a51.2 51.2 0 0 1-51.2-51.2V563.2a51.2 51.2 0 0 1 14.99136-36.18816l512-512a51.2 51.2 0 0 1 72.3968 0l204.8 204.8a51.2 51.2 0 0 1 0 72.3968l-512 512A51.2 51.2 0 0 1 358.4 819.2z m-153.6-102.4h132.4032l460.8-460.8L665.6 123.5968l-460.8 460.8z"  ></path></symbol><symbol id="icon-gallery" viewBox="0 0 1024 1024"><path d="M409.6 460.8H51.2a51.2 51.2 0 0 1-51.2-51.2V51.2A51.2 51.2 0 0 1 51.2 0h358.4a51.2 51.2 0 0 1 51.2 51.2v358.4a51.2 51.2 0 0 1-51.2 51.2zM102.4 358.4h256V102.4H102.4zM972.8 0H614.4a51.2 51.2 0 0 0-51.2 51.2v358.4a51.2 51.2 0 0 0 51.2 51.2h358.4a51.2 51.2 0 0 0 51.2-51.2V51.2a51.2 51.2 0 0 0-51.2-51.2zM409.6 563.2H51.2a51.2 51.2 0 0 0-51.2 51.2v358.4a51.2 51.2 0 0 0 51.2 51.2h358.4a51.2 51.2 0 0 0 51.2-51.2V614.4a51.2 51.2 0 0 0-51.2-51.2zM972.8 1024H614.4a51.2 51.2 0 0 1-51.2-51.2V614.4a51.2 51.2 0 0 1 51.2-51.2h358.4a51.2 51.2 0 0 1 51.2 51.2v358.4a51.2 51.2 0 0 1-51.2 51.2z m-307.2-102.4h256V665.6H665.6z"  ></path></symbol><symbol id="icon-ai-code" viewBox="0 0 1025 1024"><path d="M293.0688 755.2c-12.0832 0-24.2688-4.2496-33.9968-12.9024L0 512l273.4592-243.0976C294.5536 250.2144 326.912 252.0064 345.7024 273.152c18.7904 21.1456 16.896 53.504-4.2496 72.2944L154.112 512l172.9536 153.7024c21.1456 18.7904 23.04 51.1488 4.2496 72.2944C321.2288 749.4144 307.1488 755.2 293.0688 755.2zM751.0528 755.0976 1024.512 512l-259.072-230.2976c-21.1456-18.7904-53.504-16.896-72.2432 4.2496-18.7904 21.1456-16.896 53.504 4.2496 72.2944L870.4 512l-187.3408 166.5024c-21.1456 18.7904-23.04 51.1488-4.2496 72.2944C688.896 762.2144 702.976 768 717.056 768 729.1392 768 741.3248 763.7504 751.0528 755.0976zM511.5392 827.648l102.4-614.4c4.6592-27.904-14.1824-54.272-42.0864-58.9312-28.0064-4.7104-54.3232 14.1824-58.88 42.0864l-102.4 614.4c-4.6592 27.904 14.1824 54.272 42.0864 58.9312C455.5264 870.1952 458.2912 870.4 461.1072 870.4 485.6832 870.4 507.392 852.6336 511.5392 827.648z"  ></path></symbol><symbol id="icon-html" viewBox="0 0 1024 1024"><path d="M113.719 63.868l70.806 803.643 325.705 92.047 322.165-92.047 77.886-803.643H113.719z m637.25 265.521h-378.81l10.621 102.668h361.108L715.566 732.98 513.77 789.625l-201.796-53.104-17.701-155.772h99.128l7.081 77.886 113.289 31.862 109.749-31.862 14.161-127.45-346.947-3.54-28.322-293.843h499.179l-10.622 95.587z"  ></path></symbol><symbol id="icon-zu" viewBox="0 0 1024 1024"><path d="M0 512A512.605091 512.605091 0 0 1 512 0a512.605091 512.605091 0 0 1 512 512 512.558545 512.558545 0 0 1-512 512A512.605091 512.605091 0 0 1 0 512z m93.090909 0a419.421091 419.421091 0 0 0 418.909091 418.909091 419.421091 419.421091 0 0 0 418.909091-418.909091 419.467636 419.467636 0 0 0-418.909091-418.909091 419.467636 419.467636 0 0 0-418.909091 418.909091z m349.090909 231.377455a69.818182 69.818182 0 0 1 69.818182-69.818182 69.818182 69.818182 0 0 1 69.818182 69.818182 69.818182 69.818182 0 0 1-69.818182 69.818181 69.818182 69.818182 0 0 1-69.818182-69.771636z m23.272727-161.373091V222.626909h93.09091v359.377455z"  ></path></symbol><symbol id="icon-time" viewBox="0 0 1024 1024"><path d="M512 1024C229.6832 1024 0 794.29632 0 512S229.6832 0 512 0s512 229.70368 512 512-229.66272 512-512 512z m0-921.6C286.14656 102.4 102.4 286.14656 102.4 512s183.74656 409.6 409.6 409.6 409.6-183.74656 409.6-409.6S737.85344 102.4 512 102.4z"  ></path><path d="M704.36864 612.84352l-204.8-51.2A51.2 51.2 0 0 1 460.8 512V256a51.2 51.2 0 0 1 102.4 0v216.00256l166.03136 41.55392a51.2 51.2 0 1 1-24.84224 99.30752z"  ></path></symbol><symbol id="icon-number" viewBox="0 0 1024 1024"><path d="M279.272727 791.272727h512a46.545455 46.545455 0 0 1 0 93.090909H279.272727a46.545455 46.545455 0 0 1 0-93.090909z m33.838546-617.984V651.636364H193.722182V395.170909c0-37.003636-0.884364-59.298909-2.653091-66.746182a24.948364 24.948364 0 0 0-14.615273-16.989091c-8.005818-3.863273-25.786182-5.771636-53.341091-5.771636h-11.822545v-55.854545c57.716364-12.381091 101.562182-37.888 131.490909-76.520728h70.283636z m303.709091 396.8V651.636364H354.164364v-68.235637c77.777455-127.255273 124.043636-206.010182 138.705454-236.218182 14.661818-30.254545 22.016-53.853091 22.016-70.74909 0-13.032727-2.234182-22.714182-6.656-29.137455-4.421818-6.376727-11.170909-9.588364-20.247273-9.588364a22.248727 22.248727 0 0 0-20.200727 10.612364c-4.468364 7.121455-6.656 21.178182-6.656 42.263273v45.521454H354.164364v-17.454545c0-26.763636 1.396364-47.941818 4.142545-63.348364 2.746182-15.499636 9.541818-30.72 20.386909-45.661091 10.798545-14.987636 24.901818-26.298182 42.216727-33.978182 17.361455-7.68 38.167273-11.543273 62.37091-11.543272 47.476364 0 83.316364 11.776 107.706181 35.328 24.296727 23.552 36.445091 53.341091 36.445091 89.367272 0 27.368727-6.842182 56.32-20.48 86.853819-13.730909 30.533818-54.039273 95.325091-121.018182 194.420363h130.885819z m270.615272-189.393454c18.152727 6.097455 31.650909 16.104727 40.494546 29.975272 8.843636 13.917091 13.312 46.452364 13.312 97.652364 0 38.027636-4.328727 67.490909-13.032727 88.529455-8.657455 20.945455-23.598545 36.910545-44.869819 47.848727-21.271273 10.938182-48.593455 16.384-81.873454 16.384-37.794909 0-67.490909-6.330182-89.088-19.083636-21.550545-12.660364-35.746909-28.253091-42.542546-46.638546-6.795636-18.432-10.193455-50.362182-10.193454-95.883636v-37.841455h119.389091v77.730909c0 20.666182 1.210182 33.838545 3.723636 39.424 2.420364 5.585455 7.912727 8.424727 16.337455 8.424728 9.309091 0 15.36-3.537455 18.338909-10.612364 2.932364-7.121455 4.421818-25.6 4.421818-55.575273v-33.047273c0-18.338909-2.048-31.744-6.190546-40.215272a30.72 30.72 0 0 0-18.338909-16.709818c-8.052364-2.653091-23.738182-4.189091-46.964363-4.561455V357.050182c28.392727 0 45.893818-1.070545 52.596363-3.258182a22.946909 22.946909 0 0 0 14.475637-14.149818c2.932364-7.307636 4.421818-18.711273 4.421818-34.257455v-26.624c0-16.756364-1.722182-27.741091-5.12-33.047272-3.490909-5.352727-8.843636-8.005818-16.151273-8.005819-8.285091 0-13.963636 2.792727-16.989091 8.378182-3.025455 5.632-4.561455 17.640727-4.561454 35.933091v39.284364h-119.389091v-40.773818c0-45.661091 10.472727-76.567273 31.325091-92.625455 20.898909-16.058182 54.085818-24.064 99.607272-24.064 56.878545 0 95.511273 11.170909 115.805091 33.373091 20.293818 22.248727 30.394182 53.201455 30.394182 92.765091 0 26.810182-3.630545 46.173091-10.891636 58.088727-7.307636 11.915636-20.107636 22.807273-38.446546 32.628364z"  ></path></symbol><symbol id="icon-menu" viewBox="0 0 1462 1024"><path d="M1389.714286 146.285714H74.517943C37.215086 146.285714 2.896457 115.887543 0.2048 78.555429A73.142857 73.142857 0 0 1 73.142857 0h1315.0208c37.419886 0 71.767771 30.398171 74.430172 67.730286A73.142857 73.142857 0 0 1 1389.714286 146.285714z"  ></path><path d="M731.428571 585.142857H74.517943C37.215086 585.142857 2.896457 554.744686 0.2048 517.412571A73.142857 73.142857 0 0 1 73.142857 438.857143h656.735086c37.419886 0 71.738514 30.398171 74.430171 67.701028A73.142857 73.142857 0 0 1 731.428571 585.142857z"  ></path><path d="M1389.714286 1024H74.517943C37.215086 1024 2.896457 993.601829 0.2048 956.298971A73.142857 73.142857 0 0 1 73.142857 877.714286h1315.0208c37.419886 0 71.738514 30.398171 74.430172 67.701028A73.142857 73.142857 0 0 1 1389.714286 1024z"  ></path></symbol><symbol id="icon-download" viewBox="0 0 1137 1024"><path d="M1080.888889 1024H56.888889a56.888889 56.888889 0 0 1-56.888889-56.888889V682.666667h113.777778v227.555555h910.222222V682.666667h113.777778v284.444444a56.888889 56.888889 0 0 1-56.888889 56.888889z"  ></path><path d="M893.565156 357.9904a56.888889 56.888889 0 0 0-80.440889 0L625.777778 545.336889V56.888889a56.888889 56.888889 0 0 0-113.777778 0v488.448l-187.323733-187.323733a56.888889 56.888889 0 1 0-80.440889 80.440888l284.444444 284.444445a56.888889 56.888889 0 0 0 80.531911 0l284.444445-284.444445a56.888889 56.888889 0 0 0-0.091022-80.463644z"  ></path></symbol><symbol id="icon-upload" viewBox="0 0 1137 1024"><path d="M1080.90258 1024H56.889609a56.889609 56.889609 0 0 1-56.889609-56.889609v-284.448048h113.779219v227.558438h910.233752v-227.558438h113.779219v284.448048a56.889609 56.889609 0 0 1-56.88961 56.889609z"  ></path><path d="M893.576474 301.046843l-284.448047-284.448048a57.139924 57.139924 0 0 0-80.532931 0l-284.448048 284.448048a56.889609 56.889609 0 1 0 80.441908 80.441907L512.006485 194.162644v488.499699a56.889609 56.889609 0 0 0 113.779219 0V194.162644l187.326107 187.326106a56.889609 56.889609 0 1 0 80.441907-80.441907z"  ></path></symbol><symbol id="icon-folder" viewBox="0 0 1024 1024"><path d="M972.8 1024H51.2a51.2 51.2 0 0 1-51.2-51.2V409.6a51.2 51.2 0 0 1 51.2-51.2h921.6a51.2 51.2 0 0 1 51.2 51.2v563.2a51.2 51.2 0 0 1-51.2 51.2zM102.4 921.6h819.2V460.8H102.4zM972.8 102.4H556.46208L503.3984 22.79424A51.2 51.2 0 0 0 460.8 0H51.2A51.2 51.2 0 0 0 0 51.2v153.6a51.2 51.2 0 0 0 51.2 51.2h921.6a51.2 51.2 0 0 0 51.2-51.2V153.6a51.2 51.2 0 0 0-51.2-51.2z"  ></path></symbol><symbol id="icon-image" viewBox="0 0 1024 1024"><path d="M972.8 1024H51.2a51.2 51.2 0 0 1-51.2-51.2V51.2A51.2 51.2 0 0 1 51.2 0h921.6a51.2 51.2 0 0 1 51.2 51.2v921.6a51.2 51.2 0 0 1-51.2 51.2zM102.4 921.6h819.2V102.4H102.4z"  ></path><path d="M168.61184 804.20864a51.2 51.2 0 0 1 0-72.3968l204.8-204.8A51.07712 51.07712 0 0 1 440.32 522.24l169.30816 126.976 173.40416-173.40416a51.2 51.2 0 0 1 72.3968 72.3968l-204.8 204.8A51.2 51.2 0 0 1 583.68 757.76l-169.28768-126.976-173.40416 173.40416a51.2 51.2 0 0 1-72.37632 0.02048z"  ></path><path d="M563.2 307.2m-102.4 0a102.4 102.4 0 1 0 204.8 0 102.4 102.4 0 1 0-204.8 0Z"  ></path></symbol><symbol id="icon-calendar" viewBox="0 0 1024 1024"><path d="M972.8 102.4h-153.6V0h-102.4v102.4H307.2V0h-102.4v102.4H51.2A51.2 51.2 0 0 0 0 153.6v819.2a51.2 51.2 0 0 0 51.2 51.2h921.6a51.2 51.2 0 0 0 51.2-51.2V153.6a51.2 51.2 0 0 0-51.2-51.2z m-51.2 819.2H102.4V204.8h819.2z"  ></path><path d="M373.41184 753.00864l-102.4-102.4a51.2 51.2 0 0 1 72.3968-72.3968L409.6 644.4032l271.01184-271.01184a51.2 51.2 0 0 1 72.3968 72.3968l-307.2 307.2a51.2 51.2 0 0 1-72.3968 0.02048z"  ></path></symbol><symbol id="icon-danxuan-cuxiantiao" viewBox="0 0 1024 1024"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m0-938.666667C277.333333 85.333333 85.333333 277.333333 85.333333 512s192 426.666667 426.666667 426.666667 426.666667-192 426.666667-426.666667S746.666667 85.333333 512 85.333333z"  ></path><path d="M512 512m-213.333333 0a213.333333 213.333333 0 1 0 426.666666 0 213.333333 213.333333 0 1 0-426.666666 0Z"  ></path></symbol><symbol id="icon-zihao" viewBox="0 0 1192 1024"><path d="M0 597.333333h170.666667v426.666667h85.333333V597.333333h170.666667V512H0v85.333333z"  ></path><path d="M168.96 0v170.666667H597.333333v853.333333h170.666667V170.666667h424.106667V0H168.96z"  ></path></symbol><symbol id="icon-button-add" viewBox="0 0 1024 1024"><path d="M972.8 1024H51.2a51.2 51.2 0 0 1-51.2-51.2V51.2A51.2 51.2 0 0 1 51.2 0h921.6a51.2 51.2 0 0 1 51.2 51.2v921.6a51.2 51.2 0 0 1-51.2 51.2zM102.4 921.6h819.2V102.4H102.4z"  ></path><path d="M716.8 460.8h-153.6v-153.6h-102.4v153.6h-153.6v102.4h153.6v153.6h102.4v-153.6h153.6v-102.4z"  ></path></symbol><symbol id="icon-button-remove" viewBox="0 0 1024 1024"><path d="M972.8 1024H51.2a51.2 51.2 0 0 1-51.2-51.2V51.2A51.2 51.2 0 0 1 51.2 0h921.6a51.2 51.2 0 0 1 51.2 51.2v921.6a51.2 51.2 0 0 1-51.2 51.2zM102.4 921.6h819.2V102.4H102.4z"  ></path><path d="M307.2 460.8h409.6v102.4H307.2z"  ></path></symbol><symbol id="icon-duoxuan1" viewBox="0 0 1024 1024"><path d="M960 0 64 0C25.6 0 0 25.6 0 64L0 960C0 998.4 25.6 1024 64 1024L960 1024C998.4 1024 1024 998.4 1024 960L1024 64C1024 25.6 998.4 0 960 0ZM960 896C960 934.4 934.4 960 896 960L128 960C89.6 960 64 934.4 64 896L64 128C64 89.6 89.6 64 128 64L896 64C934.4 64 960 89.6 960 128L960 896ZM716.8 275.2 396.8 595.2 307.2 505.6C281.6 480 236.8 480 211.2 505.6 185.6 531.2 185.6 576 211.2 601.6L345.6 742.4C358.4 755.2 377.6 761.6 396.8 761.6 416 761.6 428.8 755.2 448 742.4L812.8 371.2C838.4 345.6 838.4 300.8 812.8 275.2 787.2 249.6 742.4 249.6 716.8 275.2Z"  ></path></symbol><symbol id="icon-danhangwenben" viewBox="0 0 1024 1024"><path d="M118.784 727.04h778.24v-430.08h-778.24v430.08z m-40.96-471.04h860.16v512h-860.16v-512z m116.736 153.6v204.8c0 12.288 8.192 20.48 20.48 20.48s20.48-8.192 20.48-20.48v-204.8c0-12.288-8.192-20.48-20.48-20.48s-20.48 8.192-20.48 20.48z"  ></path></symbol><symbol id="icon-duohangwenben" viewBox="0 0 1024 1024"><path d="M118.784 778.24h778.24v-532.48h-778.24v532.48z m-40.96-573.44h860.16v614.4h-860.16v-614.4z m778.24 409.6l-122.88 122.88h122.88v-122.88zM194.56 358.4v204.8c0 12.288 8.192 20.48 20.48 20.48s20.48-8.192 20.48-20.48v-204.8c0-12.288-8.192-20.48-20.48-20.48s-20.48 8.192-20.48 20.48z"  ></path></symbol><symbol id="icon-danxuanxuanzhong" viewBox="0 0 1024 1024"><path d="M512 1024C229.230208 1024 0 794.769792 0 512 0 229.230208 229.230208 0 512 0 794.769792 0 1024 229.230208 1024 512 1024 794.769792 794.769792 1024 512 1024ZM512 960C759.423565 960 960 759.423565 960 512 960 264.576432 759.423565 64 512 64 264.576432 64 64 264.576432 64 512 64 759.423565 264.576432 960 512 960ZM512 832C688.731117 832 832 688.731117 832 512 832 335.26888 688.731117 192 512 192 335.26888 192 192 335.26888 192 512 192 688.731117 335.26888 832 512 832Z"  ></path></symbol><symbol id="icon-kaiguan3" viewBox="0 0 1024 1024"><path d="M764.867148 249.793136 259.0735 249.793136c-143.070486 0-259.052011 115.984594-259.052011 259.052011 0 143.07151 115.982548 259.050987 259.052011 259.050987l505.793648 0c143.067416 0 259.050987-115.979478 259.050987-259.050987C1023.917112 365.778754 907.933541 249.793136 764.867148 249.793136zM259.0735 745.516428c-130.501216 0-236.671281-106.172111-236.671281-236.671281 0-130.501216 106.170065-236.671281 236.671281-236.671281S495.744781 378.344954 495.744781 508.84617C495.744781 639.34534 389.574716 745.516428 259.0735 745.516428z"  ></path></symbol><symbol id="icon-biaoge" viewBox="0 0 1024 1024"><path d="M959.825022 384.002258V191.939717C959.825022 121.2479 902.517291 63.940169 831.825474 63.940169H191.939717C121.2479 63.940169 63.940169 121.2479 63.940169 191.939717v639.885757C63.940169 902.517291 121.2479 959.825022 191.939717 959.825022h639.885757c70.691817 0 127.999548-57.307731 127.999548-127.999548V384.002258zM146.66502 146.66502a63.737872 63.737872 0 0 1 45.336109-18.784682h639.997742A63.961844 63.961844 0 0 1 895.884854 192.001129V320.062089H127.880338V192.001129A63.737872 63.737872 0 0 1 146.66502 146.66502z m269.1267 461.308451v-223.971213h192.181751v223.971213h-192.181751z m192.181751 63.940169v223.971214h-192.181751v-223.971214h192.181751z m-256.12192-63.940169H127.880338v-223.971213h223.971213v223.971213z m-205.186531 269.235073a63.466939 63.466939 0 0 1-18.784682-45.209673V671.91364h223.971213v223.971214H192.001129a63.625887 63.625887 0 0 1-45.336109-18.67631z m749.219834-45.209673A63.763159 63.763159 0 0 1 831.998871 895.884854H671.91364v-223.971214h223.971214v160.085231z m0-224.0254h-223.971214v-223.971213h223.971214v223.971213z" fill="" ></path></symbol><symbol id="icon-qiapian" viewBox="0 0 1024 1024"><path d="M797.527 512.901H638.428v53.315h159.099V512.9z m81.429-346.521H136.525c-43.93 0-79.545 35.799-79.545 79.964v533.115c0 44.16 35.615 79.964 79.545 79.964h742.43c43.93 0 79.545-35.804 79.545-79.964V246.344c0-44.165-35.61-79.964-79.544-79.964z m26.51 559.77c0 44.164-35.609 79.958-79.538 79.958h-636.37c-43.93 0-79.545-35.799-79.545-79.959V406.272h795.454v319.872z m0-373.182H110.014v-53.31c0-44.165 35.61-79.964 79.545-79.964h636.365c43.934 0 79.544 35.8 79.544 79.964v53.31zM534.257 512.9H163.042v53.315h371.216V512.9zM375.164 619.52H163.04v53.31h212.122v-53.31z"  ></path></symbol><symbol id="icon-zhage" viewBox="0 0 1371 1024"><path d="M1052.91381327 223.61256508h-165.52399247V800.42054084h165.5306138c11.42161264 0 21.14819137-4.03894707 29.26581204-12.07049191 8.07789413-8.07789413 12.13008315-17.75812433 12.13008387-29.1333884V264.81644539c0-11.36864273-4.05218974-21.08197883-12.12346254-29.13338767-8.12424271-8.05803016-17.85082147-12.09697724-29.27243337-12.09697724v0.02648459z m-248.29592034-0.0264846h-248.29592034v576.80135445h248.29592034V223.57945916zM473.55666605 800.38743492V223.57945916h-165.5306138c-11.42161264 0-21.14819137 4.03894707-29.26581206 12.10359856-8.06465149 8.0447875-12.13008315 17.75812433-12.13008315 29.13338767v494.38697248c0 11.37526406 4.06543166 21.05549423 12.12346183 29.1333884 8.12424271 8.03154558 17.85082147 12.07049265 29.27243338 12.07049192h165.5306138v-0.02648459zM308.01943164 141.21142578h744.90100296c34.23835189 0 63.51078599 12.07049265 87.76433096 36.21809854C1164.93831125 201.57050889 1177.06177308 230.70389656 1177.06177308 264.81644539v494.39359381c0 34.08606424-12.12346182 63.24593648-36.37700752 87.37367914-24.25354569 24.13436323-53.52597908 36.20485588-87.76433096 36.20485588H308.01943164c-34.23835189 0-63.52402793-12.07049265-87.76433167-36.20485588C196.00155426 822.45597643 183.87809244 793.29610344 183.87809244 759.2100392V264.81644539C183.87809244 230.70389656 196.00155426 201.57050889 220.25509997 177.42952433 244.48878167 153.28191843 273.78107903 141.21142578 308.02605225 141.21142578z"  ></path></symbol><symbol id="icon-xiala" viewBox="0 0 1024 1024"><path d="M192 128a64 64 0 0 0-64 64v640a64 64 0 0 0 64 64h640a64 64 0 0 0 64-64V192a64 64 0 0 0-64-64H192z m0-64h640a128 128 0 0 1 128 128v640a128 128 0 0 1-128 128H192a128 128 0 0 1-128-128V192a128 128 0 0 1 128-128z m64 320h512l-256 320-256-320z"  ></path></symbol><symbol id="icon-fengexian" viewBox="0 0 1024 1024"><path d="M32 464h960V576H32z"  ></path></symbol><symbol id="icon-pingfen_moren" viewBox="0 0 1024 1024"><path d="M1024 396.8l-353.792-51.2L512 25.088 353.792 345.6 0 396.8l256 249.344-60.416 352.768L512 832.512l316.416 166.4L768 646.656zM665.6 665.6l25.6 147.968-132.608-69.632L512 716.8l-47.616 25.088-132.608 69.632L358.4 665.6l9.216-51.2-39.936-40.96-107.52-102.4 148.48-21.504 51.2-7.68 24.064-48.128L512 256l66.56 134.656 24.064 48.128 51.2 7.68 148.48 21.504-107.52 102.4-38.4 37.376z"  ></path></symbol></svg>',e=(e=document.getElementsByTagName("script"))[e.length-1].getAttribute("data-injectcss");if(e&&!a.__iconfont__svg__cssinject__){a.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(a){console&&console.log(a)}}function d(){v||(v=!0,o())}h=function(){var a,h,t;(t=document.createElement("div")).innerHTML=c,c=null,(h=t.getElementsByTagName("svg")[0])&&(h.setAttribute("aria-hidden","true"),h.style.position="absolute",h.style.width=0,h.style.height=0,h.style.overflow="hidden",a=h,(t=document.body).firstChild?(h=t.firstChild).parentNode.insertBefore(a,h):t.appendChild(a))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(h,0):(t=function(){document.removeEventListener("DOMContentLoaded",t,!1),h()},document.addEventListener("DOMContentLoaded",t,!1)):document.attachEvent&&(o=h,l=a.document,v=!1,(i=function(){try{l.documentElement.doScroll("left")}catch(a){return void setTimeout(i,50)}d()})(),l.onreadystatechange=function(){"complete"==l.readyState&&(l.onreadystatechange=null,d())})}(window);
\ No newline at end of file
diff --git a/src/components/KFormDesign/static/icons/iconfont.json b/src/components/KFormDesign/static/icons/iconfont.json
new file mode 100644
index 0000000000000000000000000000000000000000..e3db0b3d89b43c772c83e2d89f74faaa180179f8
--- /dev/null
+++ b/src/components/KFormDesign/static/icons/iconfont.json
@@ -0,0 +1,303 @@
+{
+  "id": "1609652",
+  "name": "k-form-design",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "657585",
+      "name": "拆分",
+      "font_class": "chaifen",
+      "unicode": "e653",
+      "unicode_decimal": 58963
+    },
+    {
+      "icon_id": "16194540",
+      "name": "撤销",
+      "font_class": "chexiao",
+      "unicode": "e609",
+      "unicode_decimal": 58889
+    },
+    {
+      "icon_id": "16194544",
+      "name": "全屏",
+      "font_class": "quanping",
+      "unicode": "e60d",
+      "unicode_decimal": 58893
+    },
+    {
+      "icon_id": "16194545",
+      "name": "重做",
+      "font_class": "zhongzuo",
+      "unicode": "e60e",
+      "unicode_decimal": 58894
+    },
+    {
+      "icon_id": "16194678",
+      "name": "组件",
+      "font_class": "zujian",
+      "unicode": "e60f",
+      "unicode_decimal": 58895
+    },
+    {
+      "icon_id": "16198616",
+      "name": "编辑2",
+      "font_class": "bianji2",
+      "unicode": "e610",
+      "unicode_decimal": 58896
+    },
+    {
+      "icon_id": "15617359",
+      "name": "tabs",
+      "font_class": "tabs",
+      "unicode": "e8cd",
+      "unicode_decimal": 59597
+    },
+    {
+      "icon_id": "648145",
+      "name": "LC_icon_edit_line_1",
+      "font_class": "LC_icon_edit_line_1",
+      "unicode": "e65b",
+      "unicode_decimal": 58971
+    },
+    {
+      "icon_id": "7712657",
+      "name": "edit",
+      "font_class": "edit1",
+      "unicode": "e72a",
+      "unicode_decimal": 59178
+    },
+    {
+      "icon_id": "11249706",
+      "name": "edit-2",
+      "font_class": "edit-",
+      "unicode": "e83b",
+      "unicode_decimal": 59451
+    },
+    {
+      "icon_id": "7544797",
+      "name": "树型",
+      "font_class": "juxingkaobei",
+      "unicode": "e7a5",
+      "unicode_decimal": 59301
+    },
+    {
+      "icon_id": "10901926",
+      "name": "模型树",
+      "font_class": "tree",
+      "unicode": "e608",
+      "unicode_decimal": 58888
+    },
+    {
+      "icon_id": "12694622",
+      "name": "关联",
+      "font_class": "guanlian",
+      "unicode": "e61f",
+      "unicode_decimal": 58911
+    },
+    {
+      "icon_id": "1812699",
+      "name": "edit-编辑",
+      "font_class": "edit",
+      "unicode": "e607",
+      "unicode_decimal": 58887
+    },
+    {
+      "icon_id": "1813034",
+      "name": "write-写",
+      "font_class": "write",
+      "unicode": "e612",
+      "unicode_decimal": 58898
+    },
+    {
+      "icon_id": "1813038",
+      "name": "gallery-画廊",
+      "font_class": "gallery",
+      "unicode": "e613",
+      "unicode_decimal": 58899
+    },
+    {
+      "icon_id": "721659",
+      "name": "代码",
+      "font_class": "ai-code",
+      "unicode": "e606",
+      "unicode_decimal": 58886
+    },
+    {
+      "icon_id": "1467357",
+      "name": "html5",
+      "font_class": "html",
+      "unicode": "e693",
+      "unicode_decimal": 59027
+    },
+    {
+      "icon_id": "11976079",
+      "name": "提示",
+      "font_class": "zu",
+      "unicode": "e615",
+      "unicode_decimal": 58901
+    },
+    {
+      "icon_id": "1813719",
+      "name": "time-时间",
+      "font_class": "time",
+      "unicode": "e633",
+      "unicode_decimal": 58931
+    },
+    {
+      "icon_id": "11737013",
+      "name": "number",
+      "font_class": "number",
+      "unicode": "e639",
+      "unicode_decimal": 58937
+    },
+    {
+      "icon_id": "1812689",
+      "name": "menu-菜单",
+      "font_class": "menu",
+      "unicode": "e605",
+      "unicode_decimal": 58885
+    },
+    {
+      "icon_id": "1812743",
+      "name": "download-下载",
+      "font_class": "download",
+      "unicode": "e60b",
+      "unicode_decimal": 58891
+    },
+    {
+      "icon_id": "1812751",
+      "name": "upload-上传",
+      "font_class": "upload",
+      "unicode": "e60c",
+      "unicode_decimal": 58892
+    },
+    {
+      "icon_id": "1813029",
+      "name": "folder-文件夹",
+      "font_class": "folder",
+      "unicode": "e611",
+      "unicode_decimal": 58897
+    },
+    {
+      "icon_id": "1813190",
+      "name": "image-图像",
+      "font_class": "image",
+      "unicode": "e61a",
+      "unicode_decimal": 58906
+    },
+    {
+      "icon_id": "1812735",
+      "name": "calendar-日历",
+      "font_class": "calendar",
+      "unicode": "e60a",
+      "unicode_decimal": 58890
+    },
+    {
+      "icon_id": "5755487",
+      "name": "单选-粗线条",
+      "font_class": "danxuan-cuxiantiao",
+      "unicode": "e676",
+      "unicode_decimal": 58998
+    },
+    {
+      "icon_id": "7274115",
+      "name": "字号",
+      "font_class": "zihao",
+      "unicode": "e623",
+      "unicode_decimal": 58915
+    },
+    {
+      "icon_id": "1813731",
+      "name": "button-add-按钮添加",
+      "font_class": "button-add",
+      "unicode": "e637",
+      "unicode_decimal": 58935
+    },
+    {
+      "icon_id": "1813733",
+      "name": "button-remove-按钮删除",
+      "font_class": "button-remove",
+      "unicode": "e638",
+      "unicode_decimal": 58936
+    },
+    {
+      "icon_id": "731574",
+      "name": "多选",
+      "font_class": "duoxuan1",
+      "unicode": "e66d",
+      "unicode_decimal": 58989
+    },
+    {
+      "icon_id": "1790453",
+      "name": "单行文本",
+      "font_class": "danhangwenben",
+      "unicode": "e6e6",
+      "unicode_decimal": 59110
+    },
+    {
+      "icon_id": "1790454",
+      "name": "多行文本",
+      "font_class": "duohangwenben",
+      "unicode": "e6e7",
+      "unicode_decimal": 59111
+    },
+    {
+      "icon_id": "695129",
+      "name": "单选 选中",
+      "font_class": "danxuanxuanzhong",
+      "unicode": "e62d",
+      "unicode_decimal": 58925
+    },
+    {
+      "icon_id": "784217",
+      "name": "开关3",
+      "font_class": "kaiguan3",
+      "unicode": "e6da",
+      "unicode_decimal": 59098
+    },
+    {
+      "icon_id": "1305461",
+      "name": "表格",
+      "font_class": "biaoge",
+      "unicode": "e63e",
+      "unicode_decimal": 58942
+    },
+    {
+      "icon_id": "2471370",
+      "name": "卡片",
+      "font_class": "qiapian",
+      "unicode": "e674",
+      "unicode_decimal": 58996
+    },
+    {
+      "icon_id": "5203323",
+      "name": "栅格",
+      "font_class": "zhage",
+      "unicode": "e63f",
+      "unicode_decimal": 58943
+    },
+    {
+      "icon_id": "6022670",
+      "name": "下拉2",
+      "font_class": "xiala",
+      "unicode": "e640",
+      "unicode_decimal": 58944
+    },
+    {
+      "icon_id": "6337454",
+      "name": "分割线",
+      "font_class": "fengexian",
+      "unicode": "ec7f",
+      "unicode_decimal": 60543
+    },
+    {
+      "icon_id": "9626907",
+      "name": "评分_默认",
+      "font_class": "pingfen_moren",
+      "unicode": "e877",
+      "unicode_decimal": 59511
+    }
+  ]
+}
diff --git a/src/components/KFormDesign/static/icons/iconfont.ttf b/src/components/KFormDesign/static/icons/iconfont.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..b0bf224844ee172dbe51a5b4bf729b4b9de62169
Binary files /dev/null and b/src/components/KFormDesign/static/icons/iconfont.ttf differ
diff --git a/src/components/KFormDesign/static/icons/iconfont.woff b/src/components/KFormDesign/static/icons/iconfont.woff
new file mode 100644
index 0000000000000000000000000000000000000000..c9648fd6426e5424d8d899d9eff7ceadd8bbf93e
Binary files /dev/null and b/src/components/KFormDesign/static/icons/iconfont.woff differ
diff --git a/src/components/KFormDesign/static/icons/iconfont.woff2 b/src/components/KFormDesign/static/icons/iconfont.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..f1faf64f0de7fa4b8453d0832804351bd6c85727
Binary files /dev/null and b/src/components/KFormDesign/static/icons/iconfont.woff2 differ
diff --git a/src/components/KFormDesign/styles/form-design.less b/src/components/KFormDesign/styles/form-design.less
new file mode 100644
index 0000000000000000000000000000000000000000..3930f603e88365096656486c675516e0e0f7a332
--- /dev/null
+++ b/src/components/KFormDesign/styles/form-design.less
@@ -0,0 +1,874 @@
+// 表单设计器样式
+@primary-color: #13c2c2;
+@layout-color : #9867f7;
+
+@primary-background-color: fade(@primary-color, 6%);
+@primary-hover-bg-color  : fade(@primary-color, 20%);
+@layout-background-color : fade(@layout-color, 12%);
+@layout-hover-bg-color   : fade(@layout-color, 24%);
+
+@title-text-color: #fff;
+@border-color    : #ccc;
+
+@left-right-width      : 270px;
+@header-height         : 56px;
+@operating-area-height : 45px;
+@import "./k-table.less";
+@import "./k-editor.less";
+
+
+
+// 表单设计器样式
+.form-designer-container-9136076486841527 {
+  height  : 100vh;
+  width   : 100%;
+  overflow: hidden;
+
+
+
+
+
+  // header样式
+  .header {
+    width           : 100%;
+    height          : @header-height;
+    text-align      : center;
+    background      : @primary-color;
+    color           : @title-text-color;
+    // margin-bottom: 6px;
+    // border-bottom: 1px solid @border-color;
+    line-height     : @header-height;
+    font-size       : 18px;
+    font-weight     : bold;
+  }
+
+  // 头部操作按钮区域
+  .operating-area {
+    border-bottom  : 2px solid @border-color;
+    font-size      : 16px;
+    text-align     : left;
+    height         : @operating-area-height;
+    line-height    : @operating-area-height;
+    padding        : 0px 12px;
+    display        : flex;
+    justify-content: space-between;
+    align-content  : center;
+
+    a {
+      color : #666;
+      margin: 0 5px;
+
+      &.disabled,
+      &.disabled:hover {
+        color: #ccc;
+      }
+
+      &:hover {
+        color: @primary-color;
+      }
+
+      >span {
+        font-size   : 14px;
+        padding-left: 2px;
+      }
+    }
+  }
+
+  // iconfont 样式
+  .icon {
+    width         : 1em;
+    height        : 1em;
+    vertical-align: -0.15em;
+    fill          : currentColor;
+    overflow      : hidden;
+  }
+
+  // 设计器内容样式
+  .content {
+    display: flex;
+    height : 100%;
+    flex   : 1;
+
+    &.show-head {
+      margin-top: 6px;
+      height    : calc(100% - @header-height - 6px);
+    }
+
+    &.toolbars-top {
+      margin-top: 6px;
+      height    : calc(100% - @operating-area-height - 6px);
+    }
+
+    &.show-head-and-toolbars-top {
+      margin-top: 6px;
+      height    : calc(100% - @header-height - @operating-area-height - 6px);
+    }
+
+    // 左右栏
+    aside {
+      box-shadow      : 0px 0px 1px 1px @border-color;
+      width           : @left-right-width;
+      height          : 100%;
+      // >.left-title {
+      //   padding    : 12px 10px 8px;
+      //   user-select: none;
+      // }
+
+      &.left {
+        // border-right: 1px solid @aside-border-color;
+        height     : 100%;
+        overflow   : auto;
+        user-select: none;
+
+        .ant-collapse-content-box {
+          padding: 0;
+        }
+
+        .ant-collapse {
+          border: 0;
+
+          >.ant-collapse-item {
+            border-color: @border-color;
+
+            >.ant-collapse-header {
+              padding: 7px 0 7px 40px;
+            }
+
+            >.ant-collapse-content {
+              border-color: @border-color;
+            }
+          }
+        }
+
+
+        ul {
+          padding      : 5px;
+          list-style   : none;
+          display      : flex;
+          margin-bottom: 0;
+          flex-wrap    : wrap;
+          // background: #efefef;
+
+          li {
+            border-radius: 0;
+            border       : 0;
+            box-shadow   : 1px 0 0 0 @border-color, 0 1px 0 0 @border-color, 1px 1px 0 0 @border-color, 1px 0 0 0 @border-color inset, 0 1px 0 0 @border-color inset;
+            padding      : 8px 12px;
+            transition   : all 0.3s;
+            width        : calc(50% - 6px);
+            margin       : 2.7px;
+            height       : 36px;
+            line-height  : 20px;
+            cursor       : move;
+            border       : 1px solid transparent;
+            border-radius: 3px;
+            transition   : all .3s;
+
+            &:hover {
+              color     : @primary-color;
+              border    : 1px solid @primary-color;
+              position  : relative;
+              z-index   : 1;
+              box-shadow: 0 2px 6px @primary-color;
+            }
+          }
+        }
+      }
+
+      // 右侧区域
+      &.right {
+        height        : 100%;
+        // border-left: 1px solid @aside-border-color;
+        // border-top : 1px solid @aside-border-color;
+        color         : #fff;
+        overflow      : hidden;
+        position      : relative;
+
+
+        // 控件属性设置
+        .form-item-properties {
+          width : 100%;
+          height: 100%;
+        }
+
+        .ant-tabs {
+          height: 100%;
+
+          .ant-tabs-content {
+            height: 100%;
+
+            .ant-tabs-tabpane {
+
+              height  : calc(100% - 45px);
+              overflow: auto;
+            }
+          }
+        }
+
+        .properties-centent {
+          height    : 100%;
+          overflow  : hidden;
+          background: #fff;
+
+          .properties-body {
+            overflow: auto;
+            height  : 100%;
+            padding : 8px 16px;
+          }
+
+
+          .ant-form-item {
+            margin-bottom: 0;
+            padding      : 6px 0;
+            border-bottom: 1px solid @border-color;
+
+            .ant-form-item-label {
+              line-height: 2;
+            }
+          }
+        }
+
+        .hint-box {
+          margin-top: 120px;
+        }
+      }
+    }
+
+    // 中间内容区域
+    section {
+      flex       : 1;
+      max-width  : calc(100% - @left-right-width - @left-right-width);
+      user-select: none;
+      margin     : 0 8px 0;
+      box-shadow : 0px 0px 1px 1px @border-color;
+
+
+
+      // 内容操作区域
+      .form-panel {
+        // height       : calc(100% - 50px);
+        height          : 100%;
+        background      : #eee;
+        // border       : 1px solid #ccc;
+        position        : relative;
+
+        &.no-toolbars-top {
+          height: calc(100% - 50px);
+        }
+
+        >.hint-text {
+          position : absolute;
+          left     : 0;
+          top      : 50%;
+          width    : 100%;
+          transform: translateY(-50%);
+          font-size: 20px;
+          color    : #aaa;
+          z-index  : 16;
+        }
+
+        .a-form-box {
+          height       : 100%;
+          // box-shadow: 0px 1px 5px 1px #ccc;
+        }
+
+        .draggable-box {
+          height  : 100%;
+          overflow: auto;
+
+          .list-main {
+            min-height   : 100%;
+            padding      : 5px;
+            position     : relative;
+            background   : #fafafa;
+            // border    : 1px #ccc dashed;
+
+            .moving {
+              // 拖放移动中
+              // outline-width: 0;
+              min-height      : 35px;
+              box-sizing      : border-box;
+              overflow        : hidden;
+              padding         : 0 !important;
+              // margin       : 3px 0;
+              position        : relative;
+
+              &::before {
+                content   : '';
+                height    : 5px;
+                width     : 100%;
+                background: @primary-color;
+                position  : absolute;
+                top       : 0;
+                right     : 0;
+              }
+            }
+
+            .drag-move-box {
+              position  : relative;
+              box-sizing: border-box;
+              padding   : 8px;
+              overflow  : hidden;
+              transition: all .3s;
+              min-height: 36px;
+
+              &:hover {
+                background: @primary-hover-bg-color;
+              }
+
+              // 选择时 start
+              &::before {
+                content   : '';
+                height    : 5px;
+                width     : 100%;
+                background: @primary-color;
+                position  : absolute;
+                top       : 0;
+                right     : -100%;
+                transition: all .3s;
+              }
+
+              &.active {
+                &::before {
+                  right: 0;
+                }
+
+                background    : @primary-hover-bg-color;
+                outline-offset: 0;
+              }
+
+              // 选择时 end
+              .form-item-box {
+                position  : relative;
+                box-sizing: border-box;
+                word-wrap : break-word;
+
+                &::before {
+                  content : "";
+                  position: absolute;
+                  width   : 100%;
+                  height  : 100%;
+                  top     : 0;
+                  left    : 0;
+                  z-index : 888;
+                }
+
+                .ant-form-item {
+                  // 修改ant form-item的margin为padding
+                  margin        : 0;
+                  padding-bottom: 6px;
+                }
+              }
+
+              .show-key-box {
+                // 显示key
+                position : absolute;
+                bottom   : 2px;
+                right    : 5px;
+                font-size: 14px;
+                z-index  : 999;
+                color    : @primary-color;
+              }
+
+              >.copy,
+              >.delete {
+                position   : absolute;
+                top        : 0;
+                width      : 30px;
+                height     : 30px;
+                line-height: 30px;
+                text-align : center;
+                color      : #fff;
+                z-index    : 989;
+                transition : all .3s;
+
+                &.unactivated {
+                  opacity       : 0 !important;
+                  pointer-events: none;
+                }
+
+                &.active {
+                  opacity: 1 !important;
+                }
+              }
+
+              >.copy {
+                border-radius: 0 0 0 8px;
+                right        : 30px;
+                background   : @primary-color;
+              }
+
+              >.delete {
+                right     : 0px;
+                background: @primary-color;
+              }
+
+            }
+
+            // 动态表格设计面板样式
+            .batch-box,
+            .select-input-list-box {
+              >.batch-label {
+                font-size  : 16px;
+                font-weight: 500;
+                padding    : 10px 10px;
+
+              }
+
+
+              .draggable-box {
+                min-height: 60px;
+                width     : 100%;
+                border    : 1px #ccc dashed;
+                background: #fff;
+
+                .list-main {
+                  min-height : 60px;
+                  position   : relative;
+                  border     : 1px #ccc dashed;
+                  overflow-x : auto;
+                  overflow-y : auto;
+                  white-space: nowrap;
+
+                  .moving {
+                    // 拖放移动中
+                    width     : 175px;
+                    min-height: 94px;
+                    display   : inline-block;
+                  }
+
+                  >div {
+                    min-width     : 185px;
+                    display       : inline-block;
+                    vertical-align: top;
+
+                    .ant-form-item>.ant-form-item-label,
+                    .ant-form-item>.ant-form-item-control-wrapper {
+                      text-align: left;
+                      display   : block;
+                    }
+
+                    .ant-col {
+                      width: 100%;
+                    }
+
+                  }
+                }
+              }
+
+            }
+
+            .select-input-list-box {
+              .column-box {
+                display: flex;
+                width  : 100%;
+
+                .check-box {
+                  width: 80px;
+                }
+
+                .draggable-box {
+                  flex: 1;
+                }
+              }
+
+              // 隐藏选择输入列的所有组件的label
+              .draggable-box {
+                .ant-form-item-label {
+                  display: none !important;
+                }
+              }
+            }
+
+            .batch-box,
+            .select-input-list-box,
+            .grid-box,
+            .table-box {
+              position  : relative;
+              box-sizing: border-box;
+              padding   : 5px;
+              background: @layout-background-color;
+              width     : 100%;
+              transition: all .3s;
+              overflow  : hidden;
+
+              .form-item-box {
+                position  : relative;
+                box-sizing: border-box;
+
+                .ant-form-item {
+                  // 修改ant form-item的margin为padding
+                  margin        : 0;
+                  padding-bottom: 15px;
+                }
+              }
+
+              .grid-row,
+              .table-layout {
+                background: @layout-background-color;
+
+
+                .grid-col,
+                .table-td {
+                  .draggable-box {
+                    min-height: 60px;
+                    min-width : 50px;
+                    border    : 1px #ccc dashed;
+                    background: #fff;
+
+                    .list-main {
+                      min-height: 60px;
+                      position  : relative;
+                      border    : 1px #ccc dashed;
+                    }
+                  }
+                }
+              }
+
+              // 选择时 start
+              &::before {
+                content   : '';
+                height    : 5px;
+                width     : 100%;
+                background: transparent;
+                position  : absolute;
+                top       : 0;
+                right     : -100%;
+                transition: all .3s;
+              }
+
+              &.active {
+                &::before {
+                  background: @layout-color;
+                  right     : 0;
+                }
+
+                background    : @layout-hover-bg-color;
+                outline-offset: 0;
+              }
+
+              >.copy,
+              >.delete {
+                position   : absolute;
+                top        : 0px;
+                width      : 30px;
+                height     : 30px;
+                line-height: 30px;
+                text-align : center;
+                color      : #fff;
+                z-index    : 989;
+                transition : all .3s;
+
+                &.unactivated {
+                  opacity       : 0 !important;
+                  pointer-events: none;
+                }
+
+                &.active {
+                  opacity: 1 !important;
+                }
+              }
+
+              >.copy {
+                border-radius: 0 0 0 8px;
+                right        : 30px;
+                background   : @layout-color;
+              }
+
+              >.delete {
+                right     : 0px;
+                background: @layout-color;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // 表格右键菜单样式
+  .right-menu {
+    width        : 160px;
+    background   : #fff;
+    border       : 1px solid #ccc;
+    position     : fixed;
+    transition   : all 0s;
+    box-shadow   : 3px 3px 8px #999;
+    border-radius: 3px;
+    padding      : 8px 0;
+    z-index      : 2199;
+
+    ul {
+      padding   : 0;
+      margin    : 0;
+      list-style: none;
+
+      li {
+        cursor     : pointer;
+        user-select: none;
+        padding    : 0 15px;
+        height     : 30px;
+        line-height: 30px;
+        font-size  : 14px;
+
+        i {
+          margin-right: 4px;
+        }
+
+        &:hover {
+          background: #eee;
+        }
+      }
+    }
+  }
+
+  // 控件属性复选组件样式
+  .kk-checkbox {
+    .ant-checkbox-wrapper {
+      margin-left : 0 !important;
+      margin-right: 8px;
+    }
+  }
+
+  // 列表动画
+  .list-enter-active {
+    transition: all .5s;
+  }
+
+  .list-leave-active {
+    transition: all .3s;
+  }
+
+  .list-enter,
+  .list-leave-to
+
+  /* .list-leave-active for below version 2.1.8 */
+    {
+    opacity  : 0;
+    transform: translateX(-100px);
+  }
+
+  .list-enter {
+    height: 30px;
+  }
+
+  ::-webkit-scrollbar {
+    /*滚动条整体样式*/
+    width                : 6px;
+    /*高宽分别对应横竖滚动条的尺寸*/
+    height               : 6px;
+    scrollbar-arrow-color: red;
+
+  }
+
+  ::-webkit-scrollbar-thumb {
+    /*滚动条里面小方块*/
+    border-radius        : 5px;
+    box-shadow           : inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background           : rgba(0, 0, 0, 0.2);
+    scrollbar-arrow-color: red;
+  }
+
+  ::-webkit-scrollbar-track {
+    /*滚动条里面轨道*/
+    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+    border-radius: 0;
+    background   : rgba(0, 0, 0, 0.1);
+  }
+
+  // 行内组件宽度默认175px
+  .ant-form-inline {
+    .list-main {
+      display        : flex;
+      flex-wrap      : wrap;
+      justify-content: flex-start;
+      align-content  : flex-start;
+
+      .layout-width {
+        width: 100%;
+      }
+    }
+
+    .ant-form-item-control-wrapper {
+      width: 175px !important;
+    }
+  }
+}
+
+
+
+// code盒子样式
+.json-box-9136076486841527 {
+  height  : 570px;
+  overflow: auto;
+
+  .vue-codemirror-wrap {
+    height: 100%;
+
+    .CodeMirror-wrap {
+      height    : 100%;
+      background: #f6f6f6;
+
+      .CodeMirror-scroll {
+        height: 100%;
+        width : 100%;
+      }
+
+      pre.CodeMirror-line,
+      .CodeMirror-linenumber {
+        min-height : 21px;
+        line-height: 21px;
+      }
+    }
+  }
+}
+
+
+
+
+// modal样式
+.k-form-modal {
+  .ant-modal-content {
+    height: 100%;
+  }
+}
+
+ // code-modal盒子样式
+ &.code-modal-9136076486841527 {
+  .ant-modal-body {
+    padding: 12px;
+  }
+}
+
+
+// modal复制按钮样式
+.copy-btn-box-9136076486841527 {
+  padding-top: 8px;
+  text-align : center;
+
+  .copy-btn {
+    margin-right: 8px;
+  }
+}
+
+// k-form-build
+.k-form-build-9136076486841527 {
+
+  .select-input-list-box {
+    color    : rgba(0, 0, 0, 0.65);
+    font-size: 14px;
+
+    .ant-form-item {
+      margin-bottom: 2px;
+      margin-right : 8px
+    }
+
+    &.ant-form-horizontal {
+      .ant-col.ant-form-item-control-wrapper {
+        height     : 30px;
+        display    : flex;
+        align-items: center;
+      }
+
+      .text-box {
+        height     : 30px;
+        line-height: 30px;
+      }
+    }
+
+  }
+
+  .ant-form-item {
+    margin-bottom: 16px;
+  }
+
+  // 防止报错信息占位
+  .ant-form-item-control {
+    position: relative;
+
+    .ant-form-explain {
+      bottom  : -16px;
+      position: absolute;
+      z-index : 10;
+    }
+  }
+
+  &.ant-form-inline {
+    .ant-form-item-control-wrapper {
+      width: 175px !important;
+    }
+  }
+
+  // 动态表格样式
+  .batch-table {
+    .ant-form-item {
+      margin: 0;
+    }
+
+    .ant-form-item-control-wrapper {
+      width: 170px !important;
+    }
+
+    .ant-table-thead>tr>th {
+
+      padding: 12px;
+    }
+
+    .ant-table-tbody>tr>td {
+      padding: 8px;
+    }
+
+    .ant-form-inline .ant-form-item-with-help {
+      margin: 0;
+    }
+
+    .ant-table-placeholder {
+      padding: 0;
+    }
+  }
+
+  // 拖拽上传控件隐藏
+  .hide-upload-drag {
+    .ant-upload.ant-upload-drag {
+      display: none;
+    }
+  }
+
+}
+
+//颜色选择器覆盖
+.m-colorPicker {
+  width         : 25%;
+  vertical-align: bottom;
+  padding       : 5px;
+  border        : 1px solid #e6e6e6;
+  border-radius : 4px;
+  font-size     : 0;
+
+  .colorBtn {
+    height: 22px !important;
+    width : 100% !important;
+  }
+}
+
+
+
+
+// footer样式
+// .footer-9136076486841527 {
+//   width      : 100%;
+//   height     : 30px;
+//   line-height: 30px;
+//   padding    : 0 15px;
+//   text-align : right;
+//   background : #fafafa;
+//   color      : @primary-color;
+//   font-size  : 14px;
+//   font-weight: bold;
+//   border-top : 1px solid #e0e0e0;
+
+//   >a {
+//     color          : @primary-color;
+//     text-decoration: none;
+//   }
+// }
\ No newline at end of file
diff --git a/src/components/KFormDesign/styles/k-editor.less b/src/components/KFormDesign/styles/k-editor.less
new file mode 100644
index 0000000000000000000000000000000000000000..4fc92cfac8810bbb01deff6c99aa40bd35c76efa
--- /dev/null
+++ b/src/components/KFormDesign/styles/k-editor.less
@@ -0,0 +1,83 @@
+/*
+ * @Description: 用于汉化编辑器
+ * @Author: kcz
+ * @Date: 2020-03-30 14:00:29
+ * @LastEditors: kcz
+ * @LastEditTime: 2020-03-30 14:04:41
+ */
+
+ .form-designer-container-9136076486841527,.k-form-build-9136076486841527{
+   .chinesization{
+    .ql-snow .ql-tooltip[data-mode="link"]::before {
+      content: "请输入链接地址:";
+    }
+    .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
+      border-right: 0px;
+      content: "保存";
+      padding-right: 0px;
+    }
+    
+    .ql-snow .ql-tooltip[data-mode="video"]::before {
+      content: "请输入视频地址:";
+    }
+    
+    .ql-snow .ql-picker.ql-size .ql-picker-label::before,
+    .ql-snow .ql-picker.ql-size .ql-picker-item::before {
+      content: "14px";
+    }
+    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
+    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
+      content: "10px";
+    }
+    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
+    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
+      content: "18px";
+    }
+    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
+    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
+      content: "32px";
+    }
+    
+    .ql-snow .ql-picker.ql-header .ql-picker-label::before,
+    .ql-snow .ql-picker.ql-header .ql-picker-item::before {
+      content: "文本";
+    }
+    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
+    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
+      content: "标题1";
+    }
+    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
+    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
+      content: "标题2";
+    }
+    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
+    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
+      content: "标题3";
+    }
+    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
+    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
+      content: "标题4";
+    }
+    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
+    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
+      content: "标题5";
+    }
+    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
+    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
+      content: "标题6";
+    }
+    
+    .ql-snow .ql-picker.ql-font .ql-picker-label::before,
+    .ql-snow .ql-picker.ql-font .ql-picker-item::before {
+      content: "标准字体";
+    }
+    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
+    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
+      content: "衬线字体";
+    }
+    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
+    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
+      content: "等宽字体";
+    }
+   }
+ }
\ No newline at end of file
diff --git a/src/components/KFormDesign/styles/k-form-design.less b/src/components/KFormDesign/styles/k-form-design.less
new file mode 100644
index 0000000000000000000000000000000000000000..5ed7711eaf0cf33a9f2a835d65ec2b58092d775e
--- /dev/null
+++ b/src/components/KFormDesign/styles/k-form-design.less
@@ -0,0 +1,4 @@
+// 允许用户引入less，定义主题
+// @import "../lib/k-form-design.css";
+@import "./k-table.less";
+@import "./form-design.less";
diff --git a/src/components/KFormDesign/styles/k-table.less b/src/components/KFormDesign/styles/k-table.less
new file mode 100644
index 0000000000000000000000000000000000000000..3d8e7ddb0418f35e456528aa88a2660dd2d85961
--- /dev/null
+++ b/src/components/KFormDesign/styles/k-table.less
@@ -0,0 +1,46 @@
+// 表单设计器-表格样式
+.kk-table-9136076486841527 {
+  width: 100%;
+  box-sizing: border-box;
+  transition: all 0.3s;
+  border-collapse: collapse;
+  
+  tr {
+    transition: all 0.3s;
+    border-collapse: collapse;
+    td {
+      box-sizing: border-box;
+      transition: all 0.3s;
+      padding: 12px 12px;
+      border-collapse: collapse;
+      vertical-align:top;
+    }
+  }
+  &.bordered {
+    // 添加边框
+    tr {
+      td {
+        border: 1px solid #e8e8e8 !important;
+      }
+    }
+  }
+  &.bright {
+    // 点亮行
+    tr {
+      &:hover > td {
+        background: #e6f7ff;
+      }
+    }
+  }
+  &.small {
+    // 紧凑型
+    tr {
+      td {
+        padding: 8px 8px;
+      }
+    }
+  }
+  .ant-row.ant-form-item{
+    margin: 0 !important;
+  }
+}
diff --git a/src/components/MultiTab/MultiTab.vue b/src/components/MultiTab/MultiTab.vue
index 03154a04a52514cb092eba4de0216ba2cca78bcf..f91a386b45156eaa127acf5b26427c5b9b72f366 100644
--- a/src/components/MultiTab/MultiTab.vue
+++ b/src/components/MultiTab/MultiTab.vue
@@ -2,7 +2,7 @@
 import events from './events'
 import { CACHE_MULTI_TAB_COMPONENTS } from '@/store/mutation-types'
 import storage from 'store'
-
+import DefaultSettings from '@/config/defaultSettings'
 export default {
   name: 'MultiTab',
   data () {
@@ -182,7 +182,8 @@ export default {
     })
 
     return (
-      <div class="ant-pro-multi-tab">
+      /* 是否随着顶栏活动 */
+      <div class={DefaultSettings.fixedHeader ? 'ant-pro-multi-tab' : null}>
         <div class="ant-pro-multi-tab-wrapper">
           <a-tabs
             hideAdd
diff --git a/src/components/MultiTab/index.less b/src/components/MultiTab/index.less
index 2b9af972d11ab892ecac30ee9990a5c2452663c8..a9844b67e7cd29e1145275958751de1e486f8e5e 100644
--- a/src/components/MultiTab/index.less
+++ b/src/components/MultiTab/index.less
@@ -10,7 +10,6 @@
 }
 
 .topmenu .@{multi-tab-wrapper-prefix-cls} {
-  max-width: 1200px;
   margin: 0 auto;
 }
 
diff --git a/src/config/defaultSettings.js b/src/config/defaultSettings.js
index 694aa42b1995e2ff10fd7a7cce0047f65c7c5178..23b8b6a4a4d70b5930ae39d5bc5b990459442101 100644
--- a/src/config/defaultSettings.js
+++ b/src/config/defaultSettings.js
@@ -14,21 +14,23 @@
  */
 
 export default {
+  // 主题色
   navTheme: 'light', // theme for nav menu
+  // 默认主题色
   primaryColor: '#13C2C2', // primary color of ant design
+  // 内容区布局
   layout: 'sidemenu', // nav menu position: `sidemenu` or `topmenu`
   contentWidth: 'Fluid', // layout of content: `Fluid` or `Fixed`, only works when layout is topmenu
   // 菜单栏是否固定
   fixedHeader: true, // sticky header
   // 菜单栏是否固定
   fixSiderbar: true, // sticky siderbar
+  // 色弱模式(无效)
   colorWeak: false,
+  // 多页签
   multiTab: true,
-  menu: {
-    locale: true
-  },
+  // 标题
   title: 'Bootx Platform',
-  pwa: false,
   iconfontUrl: '',
   production: process.env.NODE_ENV === 'production' && process.env.VUE_APP_PREVIEW !== 'true'
 }
diff --git a/src/config/vxeTableConfig.js b/src/config/vxeTableConfig.js
index 778e4fd5ef4733ecdade40948fe23d284f2b5a04..11d098a84c427419ee3b8a921025c7aba4f191a0 100644
--- a/src/config/vxeTableConfig.js
+++ b/src/config/vxeTableConfig.js
@@ -30,5 +30,16 @@ VXETable.setup({
   pager: {
     border: true,
     size: 'medium'
+  },
+  // 弹窗
+  modal: {
+    showFooter: true,
+    // showZoom: true,
+    resize: true,
+    remember: true,
+    position: { top: '9%', left: '35%' },
+    // transfer: true,
+    escClosable: true
+
   }
 })
diff --git a/src/core/lazy_use.js b/src/core/lazy_use.js
index 40eb0f42bf7157271b701ba4593fa6f7d24ea993..74847cb15f7c0163a3c7d25de3b61597e6af8a3f 100644
--- a/src/core/lazy_use.js
+++ b/src/core/lazy_use.js
@@ -10,6 +10,7 @@ import {
   Empty,
   Switch,
   Radio,
+  Rate,
   Checkbox,
   Select,
   Tree,
@@ -19,6 +20,8 @@ import {
   FormModel,
   Row,
   Col,
+  Collapse,
+  Slider,
   Modal,
   Table,
   Tabs,
@@ -56,13 +59,15 @@ import Viser from 'viser-vue'
 // ext library
 import VueCropper from 'vue-cropper'
 import Dialog from '@/components/Dialog'
-import MultiTab from '@/components/MultiTab'
 import PageLoading from '@/components/PageLoading'
 import PermissionHelper from '@/core/permission/permission'
 import './directives/action'
 import VXETable from 'vxe-table'
 import 'vxe-table/lib/style.css'
 import VueBus from 'vue-bus'
+import KFormDesign from '@/components/KFormDesign/packages'
+import '@/components/KFormDesign/styles/form-design.less'
+import vcolorpicker from 'vcolorpicker'
 
 Vue.use(ConfigProvider)
 Vue.use(Layout)
@@ -72,6 +77,7 @@ Vue.use(Button)
 Vue.use(Empty)
 Vue.use(Switch)
 Vue.use(Radio)
+Vue.use(Rate)
 Vue.use(Checkbox)
 Vue.use(Select)
 Vue.use(Tree)
@@ -81,6 +87,8 @@ Vue.use(FormModel)
 Vue.use(Form)
 Vue.use(Row)
 Vue.use(Col)
+Vue.use(Collapse)
+Vue.use(Slider)
 Vue.use(Modal)
 Vue.use(Table)
 Vue.use(Tabs)
@@ -110,9 +118,13 @@ Vue.use(Result)
 Vue.use(Statistic)
 Vue.use(Descriptions)
 Vue.use(Space)
+// vxe
 Vue.use(VXETable)
 // 事件总线
 Vue.use(VueBus)
+// 动态表单
+Vue.use(KFormDesign)
+Vue.use(vcolorpicker)
 
 // vxe
 Vue.prototype.$XSaveFile = VXETable.saveFile
@@ -130,7 +142,6 @@ Vue.prototype.$warning = Modal.warning
 
 Vue.use(Viser)
 Vue.use(Dialog) // this.$dialog func
-Vue.use(MultiTab)
 Vue.use(PageLoading)
 Vue.use(PermissionHelper)
 Vue.use(VueCropper)
diff --git a/src/global.less b/src/global.less
index dd042f319a4f55f47ba36aa98cce62ac1c347a74..cbd6f2f2bea7a01b9e0d124486e1d82d94eefa97 100644
--- a/src/global.less
+++ b/src/global.less
@@ -57,7 +57,6 @@ ol {
 }
 // 数据列表 搜索条件
 .table-page-search-wrapper {
-
   .ant-form-inline {
     .ant-form-item {
       display: flex;
@@ -69,16 +68,18 @@ ol {
         display: inline-block;
         vertical-align: middle;
       }
-
       > .ant-form-item-label {
         line-height: 32px;
-        padding-right: 5px;
         width: auto;
       }
       .ant-form-item-control {
         height: 32px;
         line-height: 32px;
       }
+      .ant-input {
+        height: 32px;
+        line-height: 32px;
+      }
     }
   }
 
@@ -89,6 +90,28 @@ ol {
   }
 }
 
+// vxe模态框样式
+.vxe-modal--wrapper{
+  // 层级与保持antdv一致
+  z-index: 1000 !important;
+  .vxe-modal--box{
+    .vxe-modal--footer{
+      padding: .8em 1em;
+      border-top: 1px solid #ebeef5
+    }
+  }
+}
+// vxe表格相关
+.vxe-custom--option-wrapper{
+  // 需要低于顶栏
+  z-index: 8 !important;
+}
+.vxe-table--border-line{
+  // 需要低于顶栏
+  z-index: 8 !important;
+}
+
+
 /* 抽屉样式按钮 */
 .drawer-button {
   z-index: 1;
diff --git a/src/layouts/BasicLayout.less b/src/layouts/BasicLayout.less
index 6eb91672ac6225b4e25cdab2f9e7a40535e39c97..d389af8efa4b133a5784b2f75a39c82e0a9f1b3c 100644
--- a/src/layouts/BasicLayout.less
+++ b/src/layouts/BasicLayout.less
@@ -18,6 +18,17 @@
     transition: background 300ms;
   }
 }
+
+// 多页签
+.ant-pro-multi-tab{
+  z-index: 9;
+  position: fixed;
+  top: @headerHeight+10;
+  padding-top: 1px;
+  width: 100%;
+  background-color: #ececec;
+}
+
 #logo{
   .headHeight()
 }
@@ -43,7 +54,6 @@
   .headHeight()
 }
 
-
 // 主体边距
 .ant-layout-content{
   &.ant-pro-basicLayout-content{
diff --git a/src/layouts/BasicLayout.vue b/src/layouts/BasicLayout.vue
index e2634746e20dbd27a29d0bfb08875e70262d9edc..e978048db7312e1a8be41b354e990e5b229c0c0e 100644
--- a/src/layouts/BasicLayout.vue
+++ b/src/layouts/BasicLayout.vue
@@ -13,7 +13,7 @@
     -->
     <template #menuHeaderRender>
       <div class="menuHeaderRender">
-        <!--        <logo-svg />-->
+<!--                <logo-svg />-->
         <h1>{{ title }}</h1>
       </div>
     </template>
@@ -22,17 +22,12 @@
     -->
     <template #headerContentRender>
       <div>
-        <a-tooltip title="刷新字典缓存">
-          <a-icon type="reload" style="font-size: 18px;cursor: pointer;" @click="RefreshDictList" />
-        </a-tooltip>
+<!--        <a-tooltip title="刷新字典缓存">-->
+<!--          <a-icon type="reload" style="font-size: 18px;cursor: pointer;" @click="RefreshDictList" />-->
+<!--        </a-tooltip>-->
       </div>
     </template>
 
-    <setting-drawer v-if="isDev" :settings="settings" @change="handleSettingChange">
-      <div style="margin: 12px 0;">
-        This is SettingDrawer custom footer content.
-      </div>
-    </setting-drawer>
     <template #rightContentRender>
       <!-- 后期添加菜单搜索功能 -->
       <right-content :top-menu="settings.layout === 'topmenu'" :is-mobile="isMobile" :theme="settings.theme" />
@@ -44,7 +39,7 @@
     <!--  多页签  -->
     <multi-tab v-if="multiTab"/>
     <!--  页面  -->
-    <router-view/>
+    <router-view :style="{marginTop: settings.fixedHeader&&multiTab?'42px':'0px'}"/>
   </pro-layout>
 </template>
 
diff --git a/src/mixins/FormMixin.js b/src/mixins/FormMixin.js
index ff4e738907d32cf329cf21830aa3a3622955c17a..ba88168fe76b6bff8861f9c0130eb5eb40302bb3 100644
--- a/src/mixins/FormMixin.js
+++ b/src/mixins/FormMixin.js
@@ -8,12 +8,16 @@ import { findByParamKey } from '@/api/system/param'
 export const FormMixin = {
   data () {
     return {
+      // 表单项标题文字
       labelCol: {
         sm: { span: 7 }
       },
+      // 表单项内容
       wrapperCol: {
         sm: { span: 13 }
       },
+      // vxe 弹窗窗口的默认位置
+      vxePosition: { top: '9%', left: '35%' },
       title: '新增',
       rawForm: {},
       modalWidth: 640,
diff --git a/src/views/account/bind/Binding.vue b/src/views/account/bind/Binding.vue
index ebe123f65980dce1f10459a1707e8d3b623cda2a..612fd6bc0615a8d0753b99f93028ce474a345beb 100644
--- a/src/views/account/bind/Binding.vue
+++ b/src/views/account/bind/Binding.vue
@@ -102,8 +102,9 @@ export default {
         clientCode: this.currentClientCode
       }).then(() => {
         this.$message.success('绑定成功')
+      }).finally(() => {
+        this.init()
       })
-      this.init()
     },
     /**
      * 解绑账号
diff --git a/src/views/modules/demo/data/perm/DataPermDemoList.vue b/src/views/modules/demo/data/perm/DataPermDemoList.vue
index 7d6eb2740d274ccbc92816fa600d397e7ed3d51c..64fed2ee52ad5cf3cd82321624ae2bef986df055 100644
--- a/src/views/modules/demo/data/perm/DataPermDemoList.vue
+++ b/src/views/modules/demo/data/perm/DataPermDemoList.vue
@@ -2,7 +2,7 @@
   <a-card :bordered="false">
     <div class="table-page-search-wrapper">
       <a-form layout="inline">
-        <a-row :gutter="48">
+        <a-row :gutter="10">
           <a-col :md="6" :sm="24">
             <a-form-item label="名称">
               <a-input v-model="queryParam.name" placeholder="" />
diff --git a/src/views/modules/demo/query/SuperQueryDemoList.vue b/src/views/modules/demo/query/SuperQueryDemoList.vue
index 8596f1030e9e28dbaddce6011a899f2c4b239b2a..7e435ef96801cf6f5c905cc238e65e50867c4498 100644
--- a/src/views/modules/demo/query/SuperQueryDemoList.vue
+++ b/src/views/modules/demo/query/SuperQueryDemoList.vue
@@ -2,7 +2,7 @@
   <a-card :bordered="false">
     <div class="table-page-search-wrapper">
       <a-form layout="inline">
-        <a-row :gutter="48">
+        <a-row :gutter="10">
           <a-col :md="8" :sm="24">
             <a-form-item label="名称">
               <a-input v-model="queryParam.name" placeholder="请输入名称" />
diff --git a/src/views/modules/starter/codegen/CodeGenForm.vue b/src/views/modules/develop/codegen/CodeGenForm.vue
similarity index 98%
rename from src/views/modules/starter/codegen/CodeGenForm.vue
rename to src/views/modules/develop/codegen/CodeGenForm.vue
index 31842b0941d7c7f07922adf526acac921fff054b..eedaae58fdc826458180217875808097fa354836 100644
--- a/src/views/modules/starter/codegen/CodeGenForm.vue
+++ b/src/views/modules/develop/codegen/CodeGenForm.vue
@@ -18,7 +18,7 @@
         <a-input v-model="form.module"/>
       </a-form-model-item>
       <a-form-model-item
-        label="功能名称"
+        label="实体类名称"
         prop="method">
         <a-input v-model="form.method"/>
       </a-form-model-item>
diff --git a/src/views/modules/starter/codegen/CodeGenList.vue b/src/views/modules/develop/codegen/CodeGenList.vue
similarity index 96%
rename from src/views/modules/starter/codegen/CodeGenList.vue
rename to src/views/modules/develop/codegen/CodeGenList.vue
index 5bd7d4e83f66d4ed31870da08393622221ea2959..4605de105c1e9d9e56c88f915e69cd68876e3987 100644
--- a/src/views/modules/starter/codegen/CodeGenList.vue
+++ b/src/views/modules/develop/codegen/CodeGenList.vue
@@ -2,7 +2,7 @@
   <a-card :bordered="false">
     <div class="table-page-search-wrapper">
       <a-form layout="inline">
-        <a-row :gutter="48">
+        <a-row :gutter="10">
           <a-col :md="8" :sm="24">
             <a-form-item label="表名称">
               <a-input v-model="queryParam.tableName" placeholder="请输入表名称" />
@@ -59,7 +59,7 @@
 
 <script>
 import { TableMixin } from '@/mixins/TableMixin'
-import { codeGenPreview, genCodeZip, page } from '@/api/starter/codeGen'
+import { codeGenPreview, genCodeZip, page } from '@/api/develop/codeGen'
 import CodeGenForm from './CodeGenForm'
 export default {
   name: 'CodeGenList',
@@ -70,6 +70,8 @@ export default {
   data () {
     return {
       queryParam: {
+        tableName: '',
+        tableComment: ''
       }
     }
   },
diff --git a/src/views/modules/develop/dynamicform/DynamicDesign.vue b/src/views/modules/develop/dynamicform/DynamicDesign.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d8b23fc04c5315fd6d01ab7d7c8f4c8d777e25f0
--- /dev/null
+++ b/src/views/modules/develop/dynamicform/DynamicDesign.vue
@@ -0,0 +1,53 @@
+<template>
+  <vxe-modal
+    fullscreen
+    transfer
+    v-model="visible"
+    :title="title"
+    :esc-closable="false"
+    :show-footer="false"
+    :show-header="false"
+    @close="handleCancel"
+  >
+    <div>
+      <k-form-design
+        title="动态表单设计"
+        :show-head="false"
+        @close="close"
+        @save="save"
+      />
+    </div>
+  </vxe-modal>
+</template>
+
+<script>
+import { FormMixin } from '@/mixins/FormMixin'
+export default {
+  name: 'DynamicDesign',
+  mixins: [FormMixin],
+  data () {
+    return {
+    }
+  },
+  methods: {
+    /**
+     * 保存回调
+     */
+    save (values) {
+      console.log(values)
+    },
+    /**
+     * 关闭回调
+     */
+    close () {
+      console.log(111)
+
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/modules/develop/dynamicform/DynamicFormList.vue b/src/views/modules/develop/dynamicform/DynamicFormList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7d01a29c2d9baa2733c6310326b581db89df1ec4
--- /dev/null
+++ b/src/views/modules/develop/dynamicform/DynamicFormList.vue
@@ -0,0 +1,100 @@
+<template>
+  <a-card :bordered="false">
+    <div class="table-page-search-wrapper">
+      <a-form-model layout="inline">
+        <a-row :gutter="24">
+          <a-col :md="6" :sm="24">
+            <a-form-model-item label="名称">
+              <a-input placeholder="请输入名称" v-model="queryParam.name"></a-input>
+            </a-form-model-item>
+          </a-col>
+          <a-col :md="6" :sm="24">
+            <a-form-model-item label="AppId">
+              <a-input placeholder="请输入AppId" v-model="queryParam.appId"></a-input>
+            </a-form-model-item>
+          </a-col>
+          <a-col :md="6" :sm="24">
+            <a-form-model-item label="商户号">
+              <a-input placeholder="请输入商户号" v-model="queryParam.mchId"></a-input>
+            </a-form-model-item>
+          </a-col>
+          <a-col :md="6" :sm="24">
+            <a-button type="primary" @click="query">查询</a-button>
+            <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
+          </a-col>
+        </a-row>
+      </a-form-model>
+    </div>
+    <vxe-toolbar
+      custom
+      zoom
+      :refresh="{query: init}"
+    >
+      <template #buttons>
+        <a-button type="primary" icon="plus" @click="add">新建</a-button>
+      </template>
+    </vxe-toolbar>
+    <vxe-table
+      row-id="id"
+      :loading="loading"
+      :data="tableData"
+    >
+
+      <vxe-table-column type="seq" title="序号" width="60" />
+      <vxe-table-column field="name" title="名称"/>
+      <vxe-table-column field="mchId" title="商户号"/>
+      <vxe-table-column field="createTime" title="创建时间" />
+      <vxe-table-column fixed="right" width="170" :showOverflow="false" title="操作">
+        <template v-slot="{row}">
+          <span>
+            <a href="javascript:" @click="show(row)">查看</a>
+          </span>
+          <a-divider type="vertical"/>
+          <span>
+            <a href="javascript:" @click="edit(row)">编辑</a>
+          </span>
+          <a-divider type="vertical"/>
+        </template>
+      </vxe-table-column>
+    </vxe-table>
+    <vxe-pager
+      size="medium"
+      :loading="loading"
+      :current-page="pagination.current"
+      :page-size="pagination.size"
+      :total="pagination.total"
+      @page-change="handleTableChange"/>
+    <dynamic-design
+      ref="dynamicDesign"
+      @ok="handleOk"
+    />
+  </a-card>
+</template>
+
+<script>
+import { TableMixin } from '@/mixins/TableMixin'
+import DynamicDesign from './DynamicDesign'
+export default {
+  name: 'KFormList',
+  mixins: [TableMixin],
+  components: { DynamicDesign },
+  data () {
+    return {
+      queryParam: {
+        name: '',
+        appId: '',
+        mchId: ''
+      }
+    }
+  },
+  methods: {
+    add () {
+      this.$refs.dynamicDesign.init()
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/modules/starter/file/FileUploadList.vue b/src/views/modules/develop/file/FileUploadList.vue
similarity index 98%
rename from src/views/modules/starter/file/FileUploadList.vue
rename to src/views/modules/develop/file/FileUploadList.vue
index 9054df4a454c5a6ecacdb12f0d0fe92354fa61a1..48549c91a36c85c5cbe2532c3c064beb50decb21 100644
--- a/src/views/modules/starter/file/FileUploadList.vue
+++ b/src/views/modules/develop/file/FileUploadList.vue
@@ -51,7 +51,7 @@
 
 <script>
 import { TableMixin } from '@/mixins/TableMixin'
-import { page } from '@/api/starter/fileUpload'
+import { page } from '@/api/develop/fileUpload'
 import { getFileDownloadUrl, getFilePreviewUrl } from '@/api/common/fileUpload'
 import storage from 'store'
 import { ACCESS_TOKEN } from '@/store/mutation-types'
diff --git a/src/views/modules/goods/brand/BrandList.vue b/src/views/modules/goods/brand/BrandList.vue
index e78df0f6a062e8eb0eabaff82caac8b819df3f93..f34a169d6418aac6d6f1906b8c98ab440c61ff26 100644
--- a/src/views/modules/goods/brand/BrandList.vue
+++ b/src/views/modules/goods/brand/BrandList.vue
@@ -2,7 +2,7 @@
   <a-card :bordered="false">
     <div class="table-page-search-wrapper">
       <a-form layout="inline">
-        <a-row :gutter="48">
+        <a-row :gutter="10">
           <a-col :md="6" :sm="24">
             <a-form-item label="查询">
               <a-input v-model="queryParam.name" allow-clear placeholder="请输入品牌名称" />
diff --git a/src/views/modules/goods/category/CategoryList.vue b/src/views/modules/goods/category/CategoryList.vue
index 4b0443c2e7cc84c585884d7ff4ee42871a91260a..0cd3c6dc27835edd96ef82b742bd55f8062cbe8b 100644
--- a/src/views/modules/goods/category/CategoryList.vue
+++ b/src/views/modules/goods/category/CategoryList.vue
@@ -2,7 +2,7 @@
   <a-card :bordered="false">
     <div class="table-page-search-wrapper">
       <a-form layout="inline">
-        <a-row :gutter="48">
+        <a-row :gutter="10">
           <a-col :md="8" :sm="24">
             <a-form-item label="查询">
               <a-input v-model="searchName" @change="search" allow-clear placeholder="请输入类目名称" />
diff --git a/src/views/modules/goods/goods/GoodsList.vue b/src/views/modules/goods/goods/GoodsList.vue
index 76f6f3ab0ef93633fdcb9e1edd0fee905ac301d5..d58388b3fb055d41804d7dfd7babc7fe23f00efc 100644
--- a/src/views/modules/goods/goods/GoodsList.vue
+++ b/src/views/modules/goods/goods/GoodsList.vue
@@ -2,7 +2,7 @@
   <a-card>
     <div class="table-page-search-wrapper">
       <a-form layout="inline">
-        <a-row :gutter="48">
+        <a-row :gutter="10">
           <a-col :md="6" :sm="24">
             <a-form-item label="查询">
               <a-input v-model="queryParam.name" allow-clear placeholder="请输入商品名称" />
diff --git a/src/views/modules/goods/spec/SpecificationList.vue b/src/views/modules/goods/spec/SpecificationList.vue
index 843dedaaa87168e1365b823d511e3037f1cb123f..2c2b91b807738deb0487c62c1d5b79a9e7e7b159 100644
--- a/src/views/modules/goods/spec/SpecificationList.vue
+++ b/src/views/modules/goods/spec/SpecificationList.vue
@@ -2,7 +2,7 @@
   <a-card :bordered="false">
     <div class="table-page-search-wrapper">
       <a-form layout="inline">
-        <a-row :gutter="48">
+        <a-row :gutter="10">
           <a-col :md="6" :sm="24">
             <a-space>
               <a-button type="primary" @click="query">查询</a-button>
diff --git a/src/views/modules/notice/mail/MailConfigList.vue b/src/views/modules/notice/mail/MailConfigList.vue
index 12f4387daf84cd523d04c4dd9dcfd3e6878cce0c..b156c0cf6522a7bc0fd21d41d69c0635332c8571 100644
--- a/src/views/modules/notice/mail/MailConfigList.vue
+++ b/src/views/modules/notice/mail/MailConfigList.vue
@@ -2,7 +2,7 @@
   <a-card :bordered="false">
     <div class="table-page-search-wrapper">
       <a-form layout="inline">
-        <a-row :gutter="48">
+        <a-row :gutter="10">
           <a-col :md="8" :sm="24">
             <a-form-item label="编号">
               <a-input v-model="queryParam.code" placeholder="" />
diff --git a/src/views/modules/notice/template/TemplateEdit.vue b/src/views/modules/notice/template/TemplateEdit.vue
index cdc18e3f0b5d77aa4bec27647c5dca17b7ed1ccd..a7a8ca04a6c7631db06ff32d4913d64160dc5cec 100644
--- a/src/views/modules/notice/template/TemplateEdit.vue
+++ b/src/views/modules/notice/template/TemplateEdit.vue
@@ -1,67 +1,68 @@
 <template>
-  <a-modal
-    :title="title"
+  <vxe-modal
+    v-model="visible"
+    title="渲染测试"
     :width="modalWidth"
-    :visible="visible"
-    :confirmLoading="confirmLoading"
-    :maskClosable="false"
-    @cancel="handleCancel"
+    :position="vxePosition"
+    @close="handleCancel"
   >
-    <a-form-model
-      ref="form"
-      :model="form"
-      :rules="rules"
-      :label-col="labelCol"
-      :wrapper-col="wrapperCol"
-    >
-      <a-form-model-item label="主键" prop="id" hidden="true" >
-        <a-input v-model="form.id" :disabled="showable"/>
-      </a-form-model-item>
-      <a-form-model-item
-        label="编号"
-        prop="code"
+    <a-spin :spinning="confirmLoading">
+      <a-form-model
+        ref="form"
+        :model="form"
+        :rules="rules"
+        :label-col="labelCol"
+        :wrapper-col="wrapperCol"
       >
-        <a-input v-model="form.code" :disabled="showable"/>
-      </a-form-model-item>
-      <a-form-model-item
-        label="名称"
-        prop="name"
-      >
-        <a-input v-model="form.name" :disabled="showable"/>
-      </a-form-model-item>
-      <a-form-model-item
-        label="模板类型"
-        prop="type"
-      >
-        <a-select
-          :disabled="showable"
-          allowClear
-          v-model="form.type"
-          style="width: 100%"
-          placeholder="选择消息模板类型"
+        <a-form-model-item label="主键" prop="id" hidden="true" >
+          <a-input v-model="form.id" :disabled="showable"/>
+        </a-form-model-item>
+        <a-form-model-item
+          label="编号"
+          prop="code"
         >
-          <a-select-option v-for="item in messageTemplateCodeList" :key="item.code">{{ item.name }}</a-select-option>
-        </a-select>
-      </a-form-model-item>
-      <a-form-model-item
-        label="内容"
-        prop="data"
-      >
-        <a-textarea :rows="4" v-model="form.data" :disabled="showable"/>
-      </a-form-model-item>
-      <a-form-model-item
-        label="备注"
-        prop="remark"
-      >
-        <a-textarea v-model="form.remark" :disabled="showable"/>
-      </a-form-model-item>
-    </a-form-model>
+          <a-input v-model="form.code" :disabled="showable"/>
+        </a-form-model-item>
+        <a-form-model-item
+          label="名称"
+          prop="name"
+        >
+          <a-input v-model="form.name" :disabled="showable"/>
+        </a-form-model-item>
+        <a-form-model-item
+          label="模板类型"
+          prop="type"
+        >
+          <a-select
+            :disabled="showable"
+            allowClear
+            v-model="form.type"
+            style="width: 100%"
+            placeholder="选择消息模板类型"
+          >
+            <a-select-option v-for="item in messageTemplateCodeList" :key="item.code">{{ item.name }}</a-select-option>
+          </a-select>
+        </a-form-model-item>
+        <a-form-model-item
+          label="内容"
+          prop="data"
+        >
+          <a-textarea :rows="4" v-model="form.data" :disabled="showable"/>
+        </a-form-model-item>
+        <a-form-model-item
+          label="备注"
+          prop="remark"
+        >
+          <a-textarea v-model="form.remark" :disabled="showable"/>
+        </a-form-model-item>
+      </a-form-model>
+    </a-spin>
 
     <template #footer>
       <a-button key="cancel" @click="handleCancel">取消</a-button>
       <a-button v-if="!showable" key="forward" :loading="confirmLoading" type="primary" @click="handleOk">保存</a-button>
     </template>
-  </a-modal>
+  </vxe-modal>
 </template>
 
 <script>
diff --git a/src/views/modules/notice/template/TemplateList.vue b/src/views/modules/notice/template/TemplateList.vue
index d2c0a5597667a1fd3ffd98e5e48dddfa0533f411..8d7cd8fc5cc286f8b61c06ad7889bf9c8bdc5cbb 100644
--- a/src/views/modules/notice/template/TemplateList.vue
+++ b/src/views/modules/notice/template/TemplateList.vue
@@ -2,7 +2,7 @@
   <a-card :bordered="false">
     <div class="table-page-search-wrapper">
       <a-form layout="inline">
-        <a-row :gutter="48">
+        <a-row :gutter="10">
           <a-col :md="8" :sm="24">
             <a-form-item label="编码">
               <a-input v-model="queryParam.code" placeholder="" />
diff --git a/src/views/modules/notice/template/TemplateRender.vue b/src/views/modules/notice/template/TemplateRender.vue
index 4f9985d15282ad9738bc0a1577197f593f8c0c7d..9a9bf09109b666c305a4b0ea53b7b636946e496f 100644
--- a/src/views/modules/notice/template/TemplateRender.vue
+++ b/src/views/modules/notice/template/TemplateRender.vue
@@ -1,49 +1,52 @@
 <template>
-  <a-modal
+  <vxe-modal
+    v-model="visible"
     title="渲染测试"
     :width="modalWidth"
-    :visible="visible"
-    :confirmLoading="confirmLoading"
-    :maskClosable="false"
-    @cancel="handleCancel"
+    :position="vxePosition"
+    @close="handleCancel"
   >
-    <a-form-model
-      ref="form"
-      :label-col="labelCol"
-      :wrapper-col="wrapperCol"
-    >
-      <a-form-model-item
-        label="编号"
+    <a-spin :spinning="confirmLoading">
+      <a-form-model
+        ref="form"
+        :label-col="labelCol"
+        :wrapper-col="wrapperCol"
       >
-        <a-input v-model="template.code" disabled/>
-      </a-form-model-item>
-      <a-form-model-item
-        label="名称"
-      >
-        <a-input v-model="template.name" disabled/>
-      </a-form-model-item>
+        <a-form-model-item
+          label="编号"
+        >
+          <a-input v-model="template.code" disabled/>
+        </a-form-model-item>
+        <a-form-model-item
+          label="名称"
+        >
+          <a-input v-model="template.name" disabled/>
+        </a-form-model-item>
 
-      <a-form-model-item
-        label="测试数据"
-      >
-        <a-textarea v-model="template.data" disabled/>
-      </a-form-model-item>
-      <a-form-model-item
-        label="测试数据"
-      >
-        <a-textarea :rows="4" v-model="paramMap" allowClear placeholder="请输入json格式测试数据"/>
-      </a-form-model-item>
-      <a-form-model-item
-        label="内容"
-      >
-        <a-textarea v-model="renderContent" disabled/>
-      </a-form-model-item>
-    </a-form-model>
+        <a-form-model-item
+          label="测试数据"
+        >
+          <a-textarea v-model="template.data" disabled/>
+        </a-form-model-item>
+        <a-form-model-item
+          label="测试数据"
+        >
+          <a-textarea :rows="4" v-model="paramMap" allowClear placeholder="请输入json格式测试数据"/>
+        </a-form-model-item>
+        <a-form-model-item
+          label="内容"
+        >
+          <a-textarea v-model="renderContent" disabled/>
+        </a-form-model-item>
+      </a-form-model>
+    </a-spin>
     <template #footer>
-      <a-button key="cancel" @click="handleCancel">取消</a-button>
-      <a-button key="forward" :loading="confirmLoading" type="primary" @click="handleOk">渲染</a-button>
+      <a-space>
+        <a-button key="cancel" @click="handleCancel">取消</a-button>
+        <a-button key="forward" :loading="confirmLoading" type="primary" @click="handleOk">渲染</a-button>
+      </a-space>
     </template>
-  </a-modal>
+  </vxe-modal>
 </template>
 <script>
 import { FormMixin } from '@/mixins/FormMixin'
diff --git a/src/views/modules/payment/notify/PayNotifyRecordList.vue b/src/views/modules/payment/notify/PayNotifyRecordList.vue
index 233d944e2ae5b86abdddd9d5dc5eca1871523d21..1f037489fc3b6b79200a9ee0f290da031e22cd26 100644
--- a/src/views/modules/payment/notify/PayNotifyRecordList.vue
+++ b/src/views/modules/payment/notify/PayNotifyRecordList.vue
@@ -2,7 +2,7 @@
   <a-card :bordered="false">
     <div class="table-page-search-wrapper">
       <a-form layout="inline">
-        <a-row :gutter="48">
+        <a-row :gutter="10">
           <a-col :md="6" :sm="24">
             <a-form-item label="支付单号">
               <a-input v-model="queryParam.paymentId" placeholder="请输入支付单号" />
diff --git a/src/views/modules/payment/order/payment/PaymentInfo.vue b/src/views/modules/payment/order/payment/PaymentInfo.vue
index c0e4d9b084e28adb8f222a406e8c84bf45f4866e..fb8f980e3b76df2fdbbfa6ba2735097c78438dc2 100644
--- a/src/views/modules/payment/order/payment/PaymentInfo.vue
+++ b/src/views/modules/payment/order/payment/PaymentInfo.vue
@@ -9,7 +9,7 @@
   >
     <a-descriptions
       title=""
-      :column="{md: 1, sm: 1, xs: 1}"
+      :column="{md: 2, sm: 1, xs: 1}"
     >
       <a-descriptions-item label="用户id">
         {{ form.userId }}
@@ -41,6 +41,9 @@
       <a-descriptions-item label="可退款信息">
         <a-tag v-for="o in form.refundableInfo" :key="o.payChannel">{{ dictConvert('PayChannel',o.payChannel) }}: {{ o.amount }}</a-tag>
       </a-descriptions-item>
+      <a-descriptions-item label="客户IP">
+        {{ form.clientIp }}
+      </a-descriptions-item>
       <a-descriptions-item label="描述">
         {{ form.description }}
       </a-descriptions-item>
@@ -73,6 +76,7 @@ export default {
         refundableBalance: '',
         payStatus: '',
         title: '',
+        clientIp: '',
         description: '',
         errorCode: '',
         asyncPayMode: '',
diff --git a/src/views/modules/payment/order/payment/PaymentList.vue b/src/views/modules/payment/order/payment/PaymentList.vue
index c7b011c3219e456c0a7a9ccd351813a12aa2d1b7..35f8d3c75dfaf4ee19ef20e4ed51544eb54d816c 100644
--- a/src/views/modules/payment/order/payment/PaymentList.vue
+++ b/src/views/modules/payment/order/payment/PaymentList.vue
@@ -2,7 +2,7 @@
   <a-card :bordered="false">
     <div class="table-page-search-wrapper" >
       <a-form layout="inline">
-        <a-row :gutter="48">
+        <a-row :gutter="10">
           <a-col :md="6" :sm="24">
             <a-form-item label="支付单号">
               <a-input v-model="queryParam.paymentId" placeholder="请输入支付单号" />
@@ -166,6 +166,18 @@ export default {
     }
   },
   methods: {
+    // 初始化查询数据
+    initSelect () {
+      this.getDictDropDownAsync('PayStatus').then(res => {
+        console.log(res)
+        this.payStatusList = res
+      })
+      this.getDictDropDownAsync('PayChannel').then(res => {
+        console.log(res)
+        this.syncPayChannelList = res
+      })
+    },
+    // 初始化
     init () {
       if (this.superQueryFlag) {
         this.superQuery()
@@ -175,12 +187,6 @@ export default {
     queryPage () {
       this.superQueryFlag = false
       this.loading = true
-      this.getDictDropDownAsync('PayStatus').then(res => {
-        this.payStatusList = res
-      })
-      this.getDictDropDownAsync('PayChannel').then(res => {
-        this.syncPayChannelList = res
-      })
       page({
         ...this.queryParam,
         ...this.pages,
@@ -235,6 +241,7 @@ export default {
     }
   },
   created () {
+    this.initSelect()
     this.init()
   }
 }
diff --git a/src/views/modules/payment/order/refund/RefundRecordList.vue b/src/views/modules/payment/order/refund/RefundRecordList.vue
index 952c97c2c6612151e187455bab58e9eb9f48868f..96f748ce9fd40fc39c92e2745ec88f940edbb047 100644
--- a/src/views/modules/payment/order/refund/RefundRecordList.vue
+++ b/src/views/modules/payment/order/refund/RefundRecordList.vue
@@ -2,7 +2,7 @@
   <a-card :bordered="false">
     <div class="table-page-search-wrapper">
       <a-form layout="inline">
-        <a-row :gutter="48">
+        <a-row :gutter="10">
           <a-col :md="6" :sm="24">
             <a-form-item label="支付记录ID">
               <a-input v-model="queryParam.paymentId" placeholder="请输入支付记录ID" />
diff --git a/src/views/modules/payment/voucher/VoucherList.vue b/src/views/modules/payment/voucher/VoucherList.vue
index 874656a917b08a1d6e2592b6bcaceb23ec241e4b..3bc911e513be7829e55b9cac64678fe76fbeb522 100644
--- a/src/views/modules/payment/voucher/VoucherList.vue
+++ b/src/views/modules/payment/voucher/VoucherList.vue
@@ -2,7 +2,7 @@
   <a-card :bordered="false">
     <div class="table-page-search-wrapper" >
       <a-form layout="inline">
-        <a-row :gutter="48">
+        <a-row :gutter="10">
           <a-col :md="6" :sm="24">
             <a-form-item label="卡号">
               <a-input v-model="queryParam.cardNo" placeholder="请输入储值卡卡号" />
diff --git a/src/views/modules/payment/wallet/list/WalletList.vue b/src/views/modules/payment/wallet/list/WalletList.vue
index 9551430f804076a7aa82e058c16f5bca06e0e9fc..d885d6438f8ff3bc0a7f5a70f3fa234ca55489ce 100644
--- a/src/views/modules/payment/wallet/list/WalletList.vue
+++ b/src/views/modules/payment/wallet/list/WalletList.vue
@@ -2,7 +2,7 @@
   <a-card :bordered="false">
     <div class="table-page-search-wrapper" >
       <a-form layout="inline">
-        <a-row :gutter="48">
+        <a-row :gutter="10">
           <a-col :md="6" :sm="24">
             <a-form-item label="钱包ID">
               <a-input v-model="queryParam.walletId" placeholder="请输入钱包ID" />
diff --git a/src/views/modules/social/wechat/WeChatConfigList.vue b/src/views/modules/social/wechat/WeChatConfigList.vue
deleted file mode 100644
index d47b29aa1bd2cf33c080a6c667a8164d7352e622..0000000000000000000000000000000000000000
--- a/src/views/modules/social/wechat/WeChatConfigList.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <span>微信</span>
-</template>
-
-<script>
-export default {
-  name: 'WeChatConfigList'
-}
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/views/modules/starter/log/DataVersionLogList.vue b/src/views/modules/starter/log/DataVersionLogList.vue
index 497df5a7dd089710cf76a16626cafb996cdbe335..4c0c686bac55b4d1ecbb97b0307e796b4a770c6e 100644
--- a/src/views/modules/starter/log/DataVersionLogList.vue
+++ b/src/views/modules/starter/log/DataVersionLogList.vue
@@ -2,7 +2,7 @@
   <a-card :bordered="false">
     <div class="table-page-search-wrapper">
       <a-form layout="inline">
-        <a-row :gutter="48">
+        <a-row :gutter="10">
           <a-col :md="8" :sm="24">
             <a-form-item label="数据名称">
               <a-input v-model="queryParam.dataName" placeholder="" />
diff --git a/src/views/modules/starter/log/LoginLogList.vue b/src/views/modules/starter/log/LoginLogList.vue
index cae38d7d8e55c069b952b6c4fd3342fd1dc069ec..11f986af230760723401b09b833b63da8ba2fc27 100644
--- a/src/views/modules/starter/log/LoginLogList.vue
+++ b/src/views/modules/starter/log/LoginLogList.vue
@@ -2,7 +2,7 @@
   <a-card :bordered="false">
     <div class="table-page-search-wrapper">
       <a-form layout="inline">
-        <a-row :gutter="48">
+        <a-row :gutter="10">
           <a-col :md="6" :sm="24">
             <a-form-item label="账号">
               <a-input v-model="queryParam.account" placeholder="请输入账号" />
@@ -149,7 +149,6 @@ export default {
       return findOneByField(this.clients, code, 'code')?.['name']
     },
     getLoginType (code) {
-      console.log(this.loginTypes)
       return findOneByField(this.loginTypes, code, 'code')?.['name']
     }
   },
diff --git a/src/views/modules/starter/log/OperateLogList.vue b/src/views/modules/starter/log/OperateLogList.vue
index ace45b044d09edee7d21396b9e5d926d18fd618d..1e71d4f3e98337331e1d8d7513560b943b31be02 100644
--- a/src/views/modules/starter/log/OperateLogList.vue
+++ b/src/views/modules/starter/log/OperateLogList.vue
@@ -2,7 +2,7 @@
   <a-card :bordered="false">
     <div class="table-page-search-wrapper">
       <a-form layout="inline">
-        <a-row :gutter="48">
+        <a-row :gutter="10">
           <a-col :md="8" :sm="24">
             <a-form-item label="操作模块">
               <a-input v-model="queryParam.title" placeholder="" />
diff --git a/src/views/modules/starter/monitor/RedisInfoMonitor.vue b/src/views/modules/starter/monitor/RedisInfoMonitor.vue
index 983a02252af9e1032d7fd496e97c83f713b10885..2a65f67931d94a9e161389b2472860a05f3c1cc0 100644
--- a/src/views/modules/starter/monitor/RedisInfoMonitor.vue
+++ b/src/views/modules/starter/monitor/RedisInfoMonitor.vue
@@ -153,7 +153,6 @@ export default {
      * 图表自适应 防抖
      */
     chartReactive: debounce(function () {
-      console.log(123)
       this.commandStatsChart.resize()
       this.memoryUsedChart.resize()
     }, 300)
diff --git a/src/views/modules/system/client/ClientList.vue b/src/views/modules/system/client/ClientList.vue
index 4b07e6a391916d03d8b17d48530fb017026004b5..170483fe0406c2132bbd66706fda53f7d8318e07 100644
--- a/src/views/modules/system/client/ClientList.vue
+++ b/src/views/modules/system/client/ClientList.vue
@@ -2,7 +2,7 @@
   <a-card :bordered="false">
     <div class="table-page-search-wrapper">
       <a-form layout="inline">
-        <a-row :gutter="48">
+        <a-row :gutter="10">
           <a-col :md="6" :sm="24">
             <a-form-item label="编码">
               <a-input v-model="queryParam.code" placeholder="请输入编码"/>
diff --git a/src/views/modules/system/client/LoginTypeList.vue b/src/views/modules/system/client/LoginTypeList.vue
index ac5fea70213221f5f0399a1e8a459119787c27b1..3055d67fb73463c77887c8bd19817636f0cd8552 100644
--- a/src/views/modules/system/client/LoginTypeList.vue
+++ b/src/views/modules/system/client/LoginTypeList.vue
@@ -2,7 +2,7 @@
   <a-card :bordered="false">
     <div class="table-page-search-wrapper">
       <a-form layout="inline">
-        <a-row :gutter="48">
+        <a-row :gutter="10">
           <a-col :md="6" :sm="24">
             <a-form-item label="终端代码">
               <a-input v-model="queryParam.code" placeholder="请输入终端代码" />
diff --git a/src/views/modules/system/dept/DeptList.vue b/src/views/modules/system/dept/DeptList.vue
index 393053a5ffbae85d82641f020a2bf448a4b1c4a4..4bb957555f704c7cc96185be2725afed46a571c4 100644
--- a/src/views/modules/system/dept/DeptList.vue
+++ b/src/views/modules/system/dept/DeptList.vue
@@ -2,7 +2,7 @@
   <a-card :bordered="false">
     <div class="table-page-search-wrapper">
       <a-form layout="inline">
-        <a-row :gutter="48">
+        <a-row :gutter="10">
           <a-col :md="8" :sm="24">
             <a-form-item label="查询">
               <a-input v-model="searchName" @change="search" allow-clear placeholder="请输入部门名称或编码" />
diff --git a/src/views/modules/system/dict/DictList.vue b/src/views/modules/system/dict/DictList.vue
index a23d789ba65067a2255c5da91f6032d79c8d7b49..89b233f10b1431cad63df09686f0179c4e5aaa8e 100644
--- a/src/views/modules/system/dict/DictList.vue
+++ b/src/views/modules/system/dict/DictList.vue
@@ -2,7 +2,7 @@
   <a-card :bordered="false">
     <div class="table-page-search-wrapper">
       <a-form layout="inline">
-        <a-row :gutter="48">
+        <a-row :gutter="10">
           <a-col :md="6" :sm="24">
             <a-form-item label="字典编码">
               <a-input v-model="queryParam.code" placeholder="请输入字典编码" />
diff --git a/src/views/modules/system/menu/MenuList.vue b/src/views/modules/system/menu/MenuList.vue
index 21c7f56dac2832a34d4e73ccc046ab0a068c0a13..93ef8691e763d022170b7ba11ce1a3f4cd31d599 100644
--- a/src/views/modules/system/menu/MenuList.vue
+++ b/src/views/modules/system/menu/MenuList.vue
@@ -2,7 +2,7 @@
   <a-card :bordered="false">
     <div class="table-page-search-wrapper">
       <a-form layout="inline">
-        <a-row :gutter="48">
+        <a-row :gutter="10">
           <a-col :md="8" :sm="24">
             <a-form-item label="终端">
               <a-select
@@ -116,6 +116,7 @@ import ResourcePermList from './ResourcePermList'
 import { TableMixin } from '@/mixins/TableMixin'
 import XEUtils from 'xe-utils'
 import { findAll } from '@/api/system/client'
+import { debounce } from 'lodash'
 
 export default {
   name: 'MenuList',
@@ -189,7 +190,7 @@ export default {
     /**
      * 搜索
      */
-    search () {
+    search: debounce(function () {
       const searchName = XEUtils.toValueString(this.searchName).trim().toLowerCase()
       let treeExpand = this.treeExpand
       if (searchName) {
@@ -204,7 +205,7 @@ export default {
       this.$nextTick(() => {
         this.$refs.xTree.setAllTreeExpand(treeExpand)
       })
-    }
+    }, 500)
   },
   created () {
     this.initClients()
diff --git a/src/views/modules/system/role/RoleList.vue b/src/views/modules/system/role/RoleList.vue
index 8bc557d80b9372ccc732ec9d6bb3ba20f690b270..949a9f4388199d947080e0bd1907d58728127c14 100644
--- a/src/views/modules/system/role/RoleList.vue
+++ b/src/views/modules/system/role/RoleList.vue
@@ -2,7 +2,7 @@
   <a-card :bordered="false">
     <div class="table-page-search-wrapper">
       <a-form layout="inline">
-        <a-row :gutter="48">
+        <a-row :gutter="10">
           <a-col :md="8" :sm="24">
             <a-form-item label="角色代码">
               <a-input v-model="queryParam.code" placeholder="请输入角色代码" />
diff --git a/src/views/modules/system/scope/DataScopeList.vue b/src/views/modules/system/scope/DataScopeList.vue
index f558ad2c8f1a850d88edf361cfa090fae9e2fcbd..1c0806274906f3e7bc39e011991d965f9e0b1d58 100644
--- a/src/views/modules/system/scope/DataScopeList.vue
+++ b/src/views/modules/system/scope/DataScopeList.vue
@@ -2,7 +2,7 @@
   <a-card :bordered="false">
     <div class="table-page-search-wrapper">
       <a-form layout="inline">
-        <a-row :gutter="48">
+        <a-row :gutter="10">
           <a-col :md="8" :sm="24">
             <a-form-item label="编码">
               <a-input v-model="queryParam.code" placeholder="" />
diff --git a/src/views/modules/system/user/UserList.vue b/src/views/modules/system/user/UserList.vue
index 96ce774825805ca70f100968c420ee74b3f21e0c..aaf3ac9bed0d5bac3224e52cbeb52a3f1a266f2f 100644
--- a/src/views/modules/system/user/UserList.vue
+++ b/src/views/modules/system/user/UserList.vue
@@ -2,7 +2,7 @@
   <a-card :bordered="false">
     <div class="table-page-search-wrapper">
       <a-form layout="inline">
-        <a-row :gutter="48">
+        <a-row :gutter="10">
           <a-col :md="8" :sm="24">
             <a-form-item label="账号">
               <a-input v-model="queryParam.username" placeholder="请输入要查询的账号"/>
diff --git a/src/views/modules/social/dingtalk/config/DingTalkConfigEdit.vue b/src/views/modules/third/dingtalk/config/DingTalkConfigEdit.vue
similarity index 100%
rename from src/views/modules/social/dingtalk/config/DingTalkConfigEdit.vue
rename to src/views/modules/third/dingtalk/config/DingTalkConfigEdit.vue
diff --git a/src/views/modules/social/dingtalk/config/DingTalkConfigList.vue b/src/views/modules/third/dingtalk/config/DingTalkConfigList.vue
similarity index 99%
rename from src/views/modules/social/dingtalk/config/DingTalkConfigList.vue
rename to src/views/modules/third/dingtalk/config/DingTalkConfigList.vue
index ff828902e947af833b47b6f4d13cb65bc3e147a1..38f007b702fd581a1db57ab1fa622d401fc396fc 100644
--- a/src/views/modules/social/dingtalk/config/DingTalkConfigList.vue
+++ b/src/views/modules/third/dingtalk/config/DingTalkConfigList.vue
@@ -2,7 +2,7 @@
   <a-card :bordered="false">
     <div class="table-page-search-wrapper">
       <a-form layout="inline">
-        <a-row :gutter="48">
+        <a-row :gutter="10">
           <a-col :md="6" :sm="24">
             <a-form-item label="名称">
               <a-input v-model="queryParam.name" placeholder="请输入钉钉配置名称" />
diff --git a/src/views/modules/notice/dingTalk/robot/DingRobotConfigEdit.vue b/src/views/modules/third/dingtalk/robot/DingRobotConfigEdit.vue
similarity index 53%
rename from src/views/modules/notice/dingTalk/robot/DingRobotConfigEdit.vue
rename to src/views/modules/third/dingtalk/robot/DingRobotConfigEdit.vue
index cef636b4619cf6e18fc9b8606c09ee682040bcbe..dc14a1e8384c0bbedc0f5a994d2cc42341d8def8 100644
--- a/src/views/modules/notice/dingTalk/robot/DingRobotConfigEdit.vue
+++ b/src/views/modules/third/dingtalk/robot/DingRobotConfigEdit.vue
@@ -1,80 +1,81 @@
 <template>
-  <a-modal
+  <vxe-modal
+    v-model="visible"
     :title="title"
     :width="modalWidth"
-    :visible="visible"
-    :confirmLoading="confirmLoading"
-    :maskClosable="false"
-    @cancel="handleCancel"
+    :position="vxePosition"
+    @close="handleCancel"
   >
-    <a-form-model
-      ref="form"
-      :model="form"
-      :rules="rules"
-      :label-col="labelCol"
-      :wrapper-col="wrapperCol"
-    >
-      <a-form-model-item label="主键" prop="id" hidden="true" >
-        <a-input v-model="form.id" :disabled="showable"/>
-      </a-form-model-item>
-      <a-form-model-item
-        label="钉钉机器人编号"
-        prop="code"
+    <a-spin :spinning="confirmLoading">
+      <a-form-model
+        ref="form"
+        :model="form"
+        :rules="rules"
+        :label-col="labelCol"
+        :wrapper-col="wrapperCol"
       >
-        <a-input v-model="form.code" :disabled="showable"/>
-      </a-form-model-item>
-      <a-form-model-item
-        label="钉钉机器人名称"
-        prop="name"
-      >
-        <a-input v-model="form.name" :disabled="showable"/>
-      </a-form-model-item>
-      <a-form-model-item
-        label="AccessToken"
-        prop="accessToken"
-      >
-        <a-input v-model="form.accessToken" :disabled="showable"/>
-      </a-form-model-item>
-      <a-form-model-item
-        label="开启验签"
-      >
-        <a-switch
-          :disabled="showable"
-          checkedChildren="是"
-          unCheckedChildren="否"
-          v-model="form.enableSignatureCheck"/>
-      </a-form-model-item>
-      <a-form-model-item
-        label="验签秘钥"
-        prop="signSecret"
-      >
-        <a-input v-model="form.signSecret" :disabled="showable"/>
-      </a-form-model-item>
-      <a-form-model-item
-        label="备注"
-        prop="remark"
-      >
-        <a-input v-model="form.remark" :disabled="showable"/>
-      </a-form-model-item>
-    </a-form-model>
-
+        <a-form-model-item label="主键" prop="id" hidden="true" >
+          <a-input v-model="form.id" :disabled="showable"/>
+        </a-form-model-item>
+        <a-form-model-item
+          label="机器人编号"
+          prop="code"
+        >
+          <a-input v-model="form.code" :disabled="showable"/>
+        </a-form-model-item>
+        <a-form-model-item
+          label="机器人名称"
+          prop="name"
+        >
+          <a-input v-model="form.name" :disabled="showable"/>
+        </a-form-model-item>
+        <a-form-model-item
+          label="AccessToken"
+          prop="accessToken"
+        >
+          <a-input v-model="form.accessToken" :disabled="showable"/>
+        </a-form-model-item>
+        <a-form-model-item
+          label="开启验签"
+        >
+          <a-switch
+            :disabled="showable"
+            checkedChildren="是"
+            unCheckedChildren="否"
+            v-model="form.enableSignatureCheck"/>
+        </a-form-model-item>
+        <a-form-model-item
+          label="验签秘钥"
+          prop="signSecret"
+        >
+          <a-input v-model="form.signSecret" :disabled="showable"/>
+        </a-form-model-item>
+        <a-form-model-item
+          label="备注"
+          prop="remark"
+        >
+          <a-input v-model="form.remark" :disabled="showable"/>
+        </a-form-model-item>
+      </a-form-model>
+    </a-spin>
     <template #footer>
-      <a-button key="cancel" @click="handleCancel">取消</a-button>
-      <a-button v-if="!showable" key="forward" :loading="confirmLoading" type="primary" @click="handleOk">保存</a-button>
+      <a-space>
+        <a-button key="cancel" @click="handleCancel">取消</a-button>
+        <a-button v-if="!showable" key="forward" :loading="confirmLoading" type="primary" @click="handleOk">保存</a-button>
+      </a-space>
     </template>
-  </a-modal>
+  </vxe-modal>
 </template>
 
 <script>
 import { FormMixin } from '@/mixins/FormMixin'
-import { add, get, update, existsByCode, existsByCodeNotId } from '@/api/notice/dingRobotConfig'
+import { add, get, update, existsByCode, existsByCodeNotId } from '@/api/third/dingRobotConfig'
 
 export default {
   name: 'DingRobotConfigEdit',
   mixins: [FormMixin],
   data () {
     return {
-      mailSecurityCode: 'MailSecurityCode',
       securityTypeList: [],
       form: {
         code: '',
@@ -131,11 +132,9 @@ export default {
               ...this.diff
             })
           }
-          setTimeout(() => {
-            this.confirmLoading = false
-            this.$emit('ok')
-            this.visible = false
-          }, 200)
+          this.confirmLoading = false
+          this.$emit('ok')
+          this.visible = false
         } else {
           return false
         }
diff --git a/src/views/modules/notice/dingTalk/robot/DingRobotConfigList.vue b/src/views/modules/third/dingtalk/robot/DingRobotConfigList.vue
similarity index 84%
rename from src/views/modules/notice/dingTalk/robot/DingRobotConfigList.vue
rename to src/views/modules/third/dingtalk/robot/DingRobotConfigList.vue
index 583abbf1ede3dd62ead4d463e0dac9a0e293f43d..42dfb4c3369ca315e8e968a743ca5bc3f4bdf5a3 100644
--- a/src/views/modules/notice/dingTalk/robot/DingRobotConfigList.vue
+++ b/src/views/modules/third/dingtalk/robot/DingRobotConfigList.vue
@@ -2,18 +2,23 @@
   <a-card :bordered="false">
     <div class="table-page-search-wrapper">
       <a-form layout="inline">
-        <a-row :gutter="48">
-          <a-col :md="8" :sm="24">
+        <a-row :gutter="10">
+          <a-col :md="6" :sm="24">
             <a-form-item label="编号">
-              <a-input v-model="queryParam.code" placeholder="" />
+              <a-input v-model="queryParam.code" placeholder="编号" allowClear/>
             </a-form-item>
           </a-col>
-          <a-col :md="8" :sm="24">
+          <a-col :md="6" :sm="24">
             <a-form-item label="名称">
-              <a-input v-model="queryParam.name" placeholder="" />
+              <a-input v-model="queryParam.name" placeholder="名称" allowClear/>
             </a-form-item>
           </a-col>
-          <a-col :md="8" :sm="24">
+          <a-col :md="6" :sm="24">
+            <a-form-item label="AccessToken">
+              <a-input v-model="queryParam.accessToken" placeholder="AccessToken" allowClear/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="24">
             <a-button type="primary" @click="query">查询</a-button>
             <a-button style="margin-left: 8px" @click="() => this.queryParam = {}">重置</a-button>
           </a-col>
@@ -81,7 +86,7 @@
 
 <script>
 import { TableMixin } from '@/mixins/TableMixin'
-import { del, page } from '@/api/notice/dingRobotConfig'
+import { del, page } from '@/api/third/dingRobotConfig'
 import DingRobotConfigEdit from './DingRobotConfigEdit'
 
 export default {
@@ -92,10 +97,10 @@ export default {
   mixins: [TableMixin],
   data () {
     return {
-      mailSecurityCode: 'MailSecurityCode',
       queryParam: {
         code: '',
-        name: ''
+        name: '',
+        accessToken: ''
       }
     }
   },
@@ -125,7 +130,7 @@ export default {
       })
     }
   },
-  created () {
+  mounted () {
     this.init()
   }
 }
diff --git a/src/views/modules/third/wecom/robot/WeComRobotConfigList.vue b/src/views/modules/third/wecom/robot/WeComRobotConfigList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3a2442ae3249cac3faff43a766d5ebb8c43f29f8
--- /dev/null
+++ b/src/views/modules/third/wecom/robot/WeComRobotConfigList.vue
@@ -0,0 +1,130 @@
+<template>
+  <a-card >
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="10">
+          <a-col :md="6" :sm="24">
+            <a-form-item>
+              <a-input v-model="queryParam.code" placeholder="编码" allowClear/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="24" >
+            <a-form-item>
+              <a-input v-model="queryParam.name" placeholder="名称" allowClear/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="24">
+            <a-form-item >
+              <a-input v-model="queryParam.accessToken" placeholder="AccessToken" allowClear/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="24">
+            <a-button type="primary" @click="query">查询</a-button>
+            <a-button style="margin-left: 8px" @click="() => this.queryParam = {}">重置</a-button>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <vxe-toolbar
+      custom
+      zoom
+      :refresh="{query: init}"
+    >
+      <template #buttons>
+        <a-button type="primary" icon="plus" @click="add">新建</a-button>
+      </template>
+    </vxe-toolbar>
+    <vxe-table
+      row-id="id"
+      :loading="loading"
+      :data="tableData"
+    >
+      <vxe-table-column type="seq" title="序号" width="60" />
+      <vxe-table-column field="code" title="编号" />
+      <vxe-table-column field="name" title="配置名称" />
+      <vxe-table-column field="webhookKey" title="WebhookKey" />
+      <vxe-table-column field="remark" title="备注" />
+      <vxe-table-column field="createTime" title="创建时间" />
+      <vxe-table-column fixed="right" width="150" :showOverflow="false" title="操作">
+        <template v-slot="{row}">
+          <span>
+            <a href="javascript:" @click="show(row)">查看</a>
+          </span>
+          <a-divider type="vertical"/>
+          <span>
+            <a href="javascript:" @click="edit(row)">编辑</a>
+          </span>
+          <a-divider type="vertical"/>
+          <a-popconfirm
+            title="是否删除配置"
+            @confirm="remove(row)"
+            okText="是"
+            cancelText="否">
+            <a href="javascript:" style="color: red">删除</a>
+          </a-popconfirm>
+        </template>
+      </vxe-table-column>
+    </vxe-table>
+    <vxe-pager
+      :loading="loading"
+      :current-page="pagination.current"
+      :page-size="pagination.size"
+      :total="pagination.total"
+      @page-change="handleTableChange"/>
+    <wecom-robot-config-edit ref="wecomRobotConfigEdit" @ok="init"/>
+  </a-card>
+</template>
+
+<script>
+import { TableMixin } from '@/mixins/TableMixin'
+import WecomRobotConfigEdit from './WecomRobotConfigEdit'
+import { del, page } from '@/api/third/weComRobotConfig'
+
+export default {
+  name: 'WeComRobotConfigList',
+  components: { WecomRobotConfigEdit },
+  mixins: [TableMixin],
+  data () {
+    return {
+      queryParam: {
+        code: '',
+        name: '',
+        accessToken: ''
+      }
+    }
+  },
+  methods: {
+    init () {
+      this.loading = true
+      page({
+        ...this.queryParam,
+        ...this.pages
+      }).then(res => {
+        this.pageQueryResHandel(res, this)
+      })
+    },
+    add () {
+      this.$refs.wecomRobotConfigEdit.init('', 'add')
+    },
+    edit (record) {
+      this.$refs.wecomRobotConfigEdit.init(record.id, 'edit')
+    },
+    show (record) {
+      this.$refs.wecomRobotConfigEdit.init(record.id, 'show')
+    },
+    remove (record) {
+      del(record.id).then(_ => {
+        this.$message.info('删除成功')
+        this.init()
+      })
+    }
+  },
+  mounted () {
+    this.init()
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/modules/third/wecom/robot/WecomRobotConfigEdit.vue b/src/views/modules/third/wecom/robot/WecomRobotConfigEdit.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ada2f9642150f9cd9dd3fa158373bacd8f46691e
--- /dev/null
+++ b/src/views/modules/third/wecom/robot/WecomRobotConfigEdit.vue
@@ -0,0 +1,150 @@
+<template>
+  <vxe-modal
+    v-model="visible"
+    :title="title"
+    :width="modalWidth"
+    :position="vxePosition"
+    @close="handleCancel"
+  >
+    <a-spin :spinning="confirmLoading">
+      <a-form-model
+        ref="form"
+        :model="form"
+        :rules="rules"
+        :label-col="labelCol"
+        :wrapper-col="wrapperCol"
+      >
+        <a-form-model-item label="主键" prop="id" hidden="true" >
+          <a-input v-model="form.id" :disabled="showable"/>
+        </a-form-model-item>
+        <a-form-model-item
+          label="机器人编号"
+          prop="code"
+        >
+          <a-input v-model="form.code" :disabled="showable"/>
+        </a-form-model-item>
+        <a-form-model-item
+          label="机器人名称"
+          prop="name"
+        >
+          <a-input v-model="form.name" :disabled="showable"/>
+        </a-form-model-item>
+        <a-form-model-item
+          label="WebhookKey"
+          prop="webhookKey"
+        >
+          <a-input v-model="form.webhookKey" :disabled="showable"/>
+        </a-form-model-item>
+        <a-form-model-item
+          label="备注"
+          prop="remark"
+        >
+          <a-input v-model="form.remark" :disabled="showable"/>
+        </a-form-model-item>
+      </a-form-model>
+    </a-spin>
+    <template #footer>
+      <a-space>
+        <a-button key="cancel" @click="handleCancel">取消</a-button>
+        <a-button v-if="!showable" key="forward" :loading="confirmLoading" type="primary" @click="handleOk">保存</a-button>
+      </a-space>
+    </template>
+  </vxe-modal>
+</template>
+
+<script>
+import { FormMixin } from '@/mixins/FormMixin'
+import { add, existsByCode, existsByCodeNotId, get, update } from '@/api/third/weComRobotConfig'
+
+export default {
+  name: 'WecomRobotConfigEdit',
+  mixins: [FormMixin],
+  data () {
+    return {
+      securityTypeList: [],
+      form: {
+        code: '',
+        name: '',
+        webhookKey: '',
+        remark: ''
+      },
+      rules: {
+        code: [
+          { required: true, message: '请输入机器人编码' },
+          { validator: this.validateCode, trigger: 'blur' }
+        ],
+        name: [
+          { required: true, message: '请输入机器人名称' }
+        ],
+        webhookKey: [
+          { required: true, message: '请输入webhook的Key值' }
+        ]
+      }
+    }
+  },
+  computed: {
+    diff () {
+      return {
+        webhookKey: this.diffForm(this.form.webhookKey, this.rawForm.webhookKey)
+      }
+    }
+  },
+  methods: {
+    edit (id, type) {
+      if (['edit', 'show'].includes(type)) {
+        this.confirmLoading = true
+        get(id).then(res => {
+          this.form = res.data
+          this.rawForm = { ...res.data }
+          this.confirmLoading = false
+        })
+      } else {
+        this.confirmLoading = false
+      }
+    },
+    handleOk () {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          this.confirmLoading = true
+          if (this.type === 'add') {
+            await add(this.form)
+          } else if (this.type === 'edit') {
+            await update({
+              ...this.form,
+              ...this.diff
+            })
+          }
+          this.confirmLoading = false
+          this.$emit('ok')
+          this.visible = false
+        } else {
+          return false
+        }
+      })
+    },
+    resetForm () {
+      this.$nextTick(() => {
+        this.$refs.form.resetFields()
+      })
+    },
+    async validateCode (rule, value, callback) {
+      const { code, id } = this.form
+      let res
+      if (this.type === 'edit') {
+        res = await existsByCodeNotId(code, id)
+      } else {
+        res = await existsByCode(code)
+      }
+      if (!res.data) {
+        callback()
+      } else {
+        callback('该编码已存在!')
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 37fba0ac401b23cc7d293c243d91a6aa56dc028e..f6cb278ad7d8558669edba43264f03559597fec8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1105,56 +1105,6 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
-"@form-create/ant-design-vue@^2.5.23":
-  version "2.5.23"
-  resolved "https://registry.npmmirror.com/@form-create/ant-design-vue/-/ant-design-vue-2.5.23.tgz#0e00b6cb3dc1c364ed18453653816ac072437896"
-  integrity sha512-WAayHKQDHDQnxSqA6PUmKy03GHILpyFSZY2571BKJfIQX2OFUONTTGUknlCyd7VYQYHweXdTS0s5BlCnCI86dw==
-  dependencies:
-    "@form-create/component-antdv-frame" "^2.5.21"
-    "@form-create/component-antdv-group" "^2.5.22"
-    "@form-create/component-antdv-upload" "^2.5.18"
-    "@form-create/component-subform" "^2.5.20"
-    "@form-create/core" "^2.5.23"
-    "@form-create/utils" "^2.5.18"
-
-"@form-create/component-antdv-frame@^2.5.21":
-  version "2.5.21"
-  resolved "https://registry.npmmirror.com/@form-create/component-antdv-frame/-/component-antdv-frame-2.5.21.tgz#e701a34675164f99cb65b580fbf45938b168f834"
-  integrity sha512-QyACBHeoqCWJuA0Bh5geEKEYGp2+R8ekSLIE2hsxqqYF65drq7KURzYhTFzQvA33oeHc8Y1m7FbJXkKCzxRcqg==
-  dependencies:
-    "@form-create/utils" "^2.5.18"
-
-"@form-create/component-antdv-group@^2.5.22":
-  version "2.5.22"
-  resolved "https://registry.npmmirror.com/@form-create/component-antdv-group/-/component-antdv-group-2.5.22.tgz#fb3c871516c50fc0141421bedd31a50da092c286"
-  integrity sha512-gG1dvZCzn/iukPJCUnXoWCwkZkF5CbKbrCOY8b2h8q/5POA5dtpQKJwSYSgOo05r7fErICJZ/vIonHMpeUzAdQ==
-  dependencies:
-    "@form-create/utils" "^2.5.18"
-
-"@form-create/component-antdv-upload@^2.5.18":
-  version "2.5.18"
-  resolved "https://registry.npmmirror.com/@form-create/component-antdv-upload/-/component-antdv-upload-2.5.18.tgz#4e47993a54194c0753379dfbddb911d89e5d96d6"
-  integrity sha512-h+KdDkKJwfb7DXiaW20ah1tdXsKVjW3IyY35KNTG+EspAG2tRgk41/clb1ss8lN0g/NEEoqAaxZP3t/ByBC4hg==
-  dependencies:
-    "@form-create/utils" "^2.5.18"
-
-"@form-create/component-subform@^2.5.20":
-  version "2.5.20"
-  resolved "https://registry.npmmirror.com/@form-create/component-subform/-/component-subform-2.5.20.tgz#7a611ca015eb909b46e0f27406c389ca481bebd3"
-  integrity sha512-0km6B3kl9DXeSIpcrhwaqMCyLjj8b/QotG7dxZmmL1LILtOwe8DBNlxHuR20lYiICh33HLJSodGbHLNrFitpqg==
-
-"@form-create/core@^2.5.23":
-  version "2.5.23"
-  resolved "https://registry.npmmirror.com/@form-create/core/-/core-2.5.23.tgz#ad209a33dcea08987cbc259cc1c8f62beefec0ee"
-  integrity sha512-0j01KYp1KO7+Vpjgkm7jNeoeqlXIq4V1CM5XymjtgTGWGD08At62Bh1f7VCV0qJ9y8RRWngYjCd9mIqYHMKfDQ==
-  dependencies:
-    "@form-create/utils" "^2.5.18"
-
-"@form-create/utils@^2.5.18":
-  version "2.5.18"
-  resolved "https://registry.npmmirror.com/@form-create/utils/-/utils-2.5.18.tgz#cf30da9f89f360efdb16d65554c253f72fae2410"
-  integrity sha512-+TtDMHoRu0v1WT/ufLbTN2VSwY9TbkIyfcPvngVEAkVy6T8gBa7vCQd5i0x9Ce0Brg7rYLjSBGGaZlKGcPC/pA==
-
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.npmmirror.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -2046,10 +1996,10 @@
   resolved "https://registry.npmmirror.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz#b6b40a7625429d2bd7c2281ddba601ed05dc7f1a"
   integrity sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==
 
-"@wangeditor/basic-modules@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.npmmirror.com/@wangeditor/basic-modules/-/basic-modules-1.1.1.tgz#1ae0b11202b2ac319b4883e46f4d069ffce2f78d"
-  integrity sha512-tQl2Pw8M2g3CM+ESx2phzr9zSKeuFCM1AMBoPdnlbatU7Dnae0CsEB/b3C+gI0dIQzM2jh34yTmqgbbhrwuRLg==
+"@wangeditor/basic-modules@^1.1.3":
+  version "1.1.3"
+  resolved "https://registry.npmmirror.com/@wangeditor/basic-modules/-/basic-modules-1.1.3.tgz#57884ae60947613324e94acde5abae7f00d59e2a"
+  integrity sha512-TGJix4UelO46yAgwI946ctx4lSIJbYBwNvjSJ9Tf8mKr0WMCeLVBV+MV85rXPsfcmWtR4wBNwSg648Z+RbqRUg==
   dependencies:
     is-url "^1.2.4"
 
@@ -2060,10 +2010,10 @@
   dependencies:
     prismjs "^1.23.0"
 
-"@wangeditor/core@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.npmmirror.com/@wangeditor/core/-/core-1.1.1.tgz#f749a7d65ad95dbffccdf4d6f11272be8134eb88"
-  integrity sha512-SrbvOGlONMNMOeFIJI7fC9x0/6T6LvQHTITPCqjgbCm2QF+POcrHzRKGQOqKCsyKi9UJz9hLsjsvJnvP10rxjQ==
+"@wangeditor/core@^1.1.11":
+  version "1.1.11"
+  resolved "https://registry.npmmirror.com/@wangeditor/core/-/core-1.1.11.tgz#1525a7cddd2c41ceee7a4f9ef6a794b6bacf779b"
+  integrity sha512-BwHVRJzESnkjKikTc2U2zsbd06l1pSo7qKy5+SpZLudYWrFxmd85VN+5GxM57FodogkNw/k04DFHcFSUfXcaKA==
   dependencies:
     "@types/event-emitter" "^0.3.3"
     event-emitter "^0.3.5"
@@ -2072,25 +2022,25 @@
     scroll-into-view-if-needed "^2.2.28"
     slate-history "^0.66.0"
 
-"@wangeditor/editor-for-vue@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.npmmirror.com/@wangeditor/editor-for-vue/-/editor-for-vue-1.0.1.tgz#b17e5857870e124c48665e07c64febcd4a3ec181"
-  integrity sha512-Dpq7PUjg774OE8Ga+uXG/P2+CCBUkA2Dh+Vo0m/ViyktNu4cedF7KSAAR/8LSRfFeLcLYRIJ/zSj6ylwlSALYA==
+"@wangeditor/editor-for-vue@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.npmmirror.com/@wangeditor/editor-for-vue/-/editor-for-vue-1.0.2.tgz#62674d56354319ff8dcc83db5c62cec4437ee906"
+  integrity sha512-BOENvAXJVtVXlE2X50AAvjV82YlCUeu5cbeR0cvEQHQjYtiVnJtq7HSoj85r2kTgGouI5OrpJG9BBEjSjUSPyA==
 
-"@wangeditor/editor@^5.1.1":
-  version "5.1.1"
-  resolved "https://registry.npmmirror.com/@wangeditor/editor/-/editor-5.1.1.tgz#009b11277de86a4052087d0428934e7d2dd30147"
-  integrity sha512-BtccuHFm0QvYunIhIu7tllQWkwppkmEkD3OJ5Mn+F0REPQ/Z3HiEXbtlss2t9c/kHO4CtiFwv2XD/k/VEg7taA==
+"@wangeditor/editor@^5.1.14":
+  version "5.1.14"
+  resolved "https://registry.npmmirror.com/@wangeditor/editor/-/editor-5.1.14.tgz#863cef775ead194503d5636232e96b04ecc34040"
+  integrity sha512-erILPAkpKldyGi4cEwrOW65v12GhZy2qj2A8kPlypU46lE72Y3XowZxWogN1TI/mqMDR84AHr0QWOvygOV1xwQ==
   dependencies:
     "@uppy/core" "^2.1.1"
     "@uppy/xhr-upload" "^2.0.3"
-    "@wangeditor/basic-modules" "^1.1.1"
+    "@wangeditor/basic-modules" "^1.1.3"
     "@wangeditor/code-highlight" "^1.0.2"
-    "@wangeditor/core" "^1.1.1"
+    "@wangeditor/core" "^1.1.11"
     "@wangeditor/list-module" "^1.0.2"
-    "@wangeditor/table-module" "^1.1.0"
+    "@wangeditor/table-module" "^1.1.1"
     "@wangeditor/upload-image-module" "^1.0.1"
-    "@wangeditor/video-module" "^1.1.0"
+    "@wangeditor/video-module" "^1.1.1"
     dom7 "^3.0.0"
     is-hotkey "^0.2.0"
     lodash.camelcase "^4.3.0"
@@ -2114,20 +2064,20 @@
   resolved "https://registry.npmmirror.com/@wangeditor/plugin-md/-/plugin-md-1.0.0.tgz#8bbd604a54af2ab98c3d334135fcaa98095e3398"
   integrity sha512-wpbusrhSNmb6keC5vmiaQ2nBBfiwwVWmfRp+zNB65nGrPHVRjaFQBNxTpGoL+rc02KCYdflzEbZAg+kzGtMXlQ==
 
-"@wangeditor/table-module@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.npmmirror.com/@wangeditor/table-module/-/table-module-1.1.0.tgz#5cd4ebdd0500915c51793efd6227c43b5e185d77"
-  integrity sha512-QpjCXSzsXcsR0pEI5Pu28e8aYh9+lHcVV4TTmGV6lRGE/etQF3PHUZNGUlfhkCgmGPq+E7n/Whb4RpAM3PJVhw==
+"@wangeditor/table-module@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.npmmirror.com/@wangeditor/table-module/-/table-module-1.1.1.tgz#cc88f2d566a3f314801cda4ab7ffceeb3c21c251"
+  integrity sha512-VPjEWQtncS2DsXYXiHUxPSxn2Xhc8GdhG3la7N5YhvxQde1+4N0SZLXeWsYvbGzOq4um5XToq5pktLLbE8G+EA==
 
 "@wangeditor/upload-image-module@^1.0.1":
   version "1.0.1"
   resolved "https://registry.npmmirror.com/@wangeditor/upload-image-module/-/upload-image-module-1.0.1.tgz#a074518d73ce9c5cfd3e8ee56d1adf831996f142"
   integrity sha512-vgUV4ENttTITblqtVuzleIq732OmzmzzgrIvX6b3GRGPSw5u8glJ/87tOEhvHjHECc4oFo18B7xzJ1GpBj79/w==
 
-"@wangeditor/video-module@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.npmmirror.com/@wangeditor/video-module/-/video-module-1.1.0.tgz#664405b1eeef1e9ab09f84a50270a4394f885355"
-  integrity sha512-VR6x7Vk9ebvXtxCPwobiNiTGZGgqEzCVc6ViWlNH3v4jlDIeo/s7N7OCgpvELR7X/X7GHecBu7wySDkHIskB5w==
+"@wangeditor/video-module@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.npmmirror.com/@wangeditor/video-module/-/video-module-1.1.1.tgz#67f24a8a64bd94baf2116d26da042faf5e8a5eb8"
+  integrity sha512-6gzpS5cnJihW2T0HFjqmbv6v8ouyaeMUjdM2X8BPohwD74p1ov00dCmRt5QekNTyYSmRHK0ASkUMOvRGqaDxMg==
 
 "@webassemblyjs/ast@1.9.0":
   version "1.9.0"
@@ -3663,6 +3613,11 @@ coa@^2.0.2:
     chalk "^2.4.1"
     q "^1.1.2"
 
+codemirror@^5.22.0:
+  version "5.65.7"
+  resolved "https://registry.npmmirror.com/codemirror/-/codemirror-5.65.7.tgz#29af41ce5f4c2b8f1c1e16f4e645ff392823716a"
+  integrity sha512-zb67cXzgugIQmb6tfD4G11ILjYoMfTjwcjn+cWsa4GewlI2adhR/h3kolkoCQTm1msD/1BuqVTKuO09ELsS++A==
+
 collection-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmmirror.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
@@ -3955,10 +3910,10 @@ core-js@^2.4.0:
   resolved "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
   integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
 
-core-js@^3.23.2:
-  version "3.23.2"
-  resolved "https://registry.npmmirror.com/core-js/-/core-js-3.23.2.tgz#e07a60ca8b14dd129cabdc3d2551baf5a01c76f0"
-  integrity sha512-ELJOWxNrJfOH/WK4VJ3Qd+fOqZuOuDNDJz0xG6Bt4mGg2eO/UT9CljCrbqDGovjLKUrGajEEBcoTOc0w+yBYeQ==
+core-js@^3.24.0:
+  version "3.24.0"
+  resolved "https://registry.npmmirror.com/core-js/-/core-js-3.24.0.tgz#4928d4e99c593a234eb1a1f9abd3122b04d3ac57"
+  integrity sha512-IeOyT8A6iK37Ep4kZDD423mpi6JfPRoPUdQwEWYiGolvn4o6j2diaRzNfDfpTdu3a5qMbrGUzKUpYpRY8jXCkQ==
 
 core-js@^3.6.5:
   version "3.13.0"
@@ -4011,12 +3966,12 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-cron-parser@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.npmmirror.com/cron-parser/-/cron-parser-4.4.0.tgz#829d67f9e68eb52fa051e62de0418909f05db983"
-  integrity sha512-TrE5Un4rtJaKgmzPewh67yrER5uKM0qI9hGLDBfWb8GGRe9pn/SDkhVrdHa4z7h0SeyeNxnQnogws/H+AQANQA==
+cron-parser@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.npmmirror.com/cron-parser/-/cron-parser-4.5.0.tgz#2c6240a0301eff1424689835ce9c8de4cde9cfbd"
+  integrity sha512-QHdeh3zLWz6YvYTFKpRb860rJlip16pEinbxXT1i2NZB/nOxBjd2RbSv54sn5UrAj9WykiSLYWWDgo8azQK0HA==
   dependencies:
-    luxon "^1.28.0"
+    luxon "^2.4.0"
 
 cross-spawn@^5.0.1:
   version "5.1.0"
@@ -5304,6 +5259,11 @@ event-pubsub@4.3.0:
   resolved "https://registry.npmmirror.com/event-pubsub/-/event-pubsub-4.3.0.tgz#f68d816bc29f1ec02c539dc58c8dd40ce72cb36e"
   integrity sha512-z7IyloorXvKbFx9Bpie2+vMJKKx1fH1EN5yiTfp8CiLOTptSYy1g8H4yDpGlEdshL1PBiFtBHepF2cNsqeEeFQ==
 
+eventemitter3@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.npmmirror.com/eventemitter3/-/eventemitter3-2.0.3.tgz#b5e1079b59fb5e1ba2771c0a993be060a58c99ba"
+  integrity sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==
+
 eventemitter3@^4.0.0:
   version "4.0.7"
   resolved "https://registry.npmmirror.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
@@ -5464,10 +5424,10 @@ extend-shallow@^3.0.0, extend-shallow@^3.0.2:
     assign-symbols "^1.0.0"
     is-extendable "^1.0.1"
 
-extend@~3.0.2:
+extend@^3.0.2, extend@~3.0.2:
   version "3.0.2"
-  resolved "https://registry.npmmirror.com/extend/download/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
-  integrity sha1-+LETa0Bx+9jrFAr/hYsQGewpFfo=
+  resolved "https://registry.npmmirror.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
+  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
 
 external-editor@^3.0.3:
   version "3.1.0"
@@ -5514,6 +5474,11 @@ fast-deep-equal@^3.1.1:
   resolved "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+fast-diff@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npmmirror.com/fast-diff/-/fast-diff-1.1.2.tgz#4b62c42b8e03de3f848460b639079920695d0154"
+  integrity sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==
+
 fast-glob@^2.2.6:
   version "2.2.7"
   resolved "https://registry.npmmirror.com/fast-glob/-/fast-glob-2.2.7.tgz#6953857c3afa475fff92ee6015d52da70a4cd39d"
@@ -6154,6 +6119,11 @@ highlight.js@^10.7.1:
   resolved "https://registry.npmmirror.com/highlight.js/-/highlight.js-10.7.2.tgz#89319b861edc66c48854ed1e6da21ea89f847360"
   integrity sha512-oFLl873u4usRM9K63j4ME9u3etNF0PLiJhSQ8rdfuL51Wn3zkD6drf9ZW0dOzjnZI22YYG24z30JcmfCZjMgYg==
 
+highlight.js@^9.12.0:
+  version "9.18.5"
+  resolved "https://registry.npmmirror.com/highlight.js/-/highlight.js-9.18.5.tgz#d18a359867f378c138d6819edfc2a8acd5f29825"
+  integrity sha512-a5bFyofd/BHCX52/8i8uJkjr9DYwXIPnM/plwI6W7ezItLGqzt7X2G2nXuYSfsIJdkwwj/g9DG1LkcGJI/dDoA==
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -7979,10 +7949,10 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
-luxon@^1.28.0:
-  version "1.28.0"
-  resolved "https://registry.npmmirror.com/luxon/-/luxon-1.28.0.tgz#e7f96daad3938c06a62de0fb027115d251251fbf"
-  integrity sha512-TfTiyvZhwBYM/7QdAVDh+7dBTBA29v4ik0Ce9zda3Mnf8on1S5KJI8P2jKFZ8+5C0jhmr0KwJEO/Wdpm0VeWJQ==
+luxon@^2.4.0:
+  version "2.5.0"
+  resolved "https://registry.npmmirror.com/luxon/-/luxon-2.5.0.tgz#098090f67d690b247e83c090267a60b1aa8ea96c"
+  integrity sha512-IDkEPB80Rb6gCAU+FEib0t4FeJ4uVOuX1CQ9GsvU3O+JAGIgu0J7sf1OarXKaKDygTZIoJyU6YdZzTFRu+YR0A==
 
 make-dir@^2.0.0, make-dir@^2.1.0:
   version "2.1.0"
@@ -8889,6 +8859,11 @@ param-case@2.1.x:
   dependencies:
     no-case "^2.2.0"
 
+parchment@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.npmmirror.com/parchment/-/parchment-1.1.4.tgz#aeded7ab938fe921d4c34bc339ce1168bc2ffde5"
+  integrity sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==
+
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/parent-module/download/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -9701,6 +9676,27 @@ querystringify@^2.1.1:
   resolved "https://registry.npmmirror.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
   integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
 
+quill-delta@^3.6.2:
+  version "3.6.3"
+  resolved "https://registry.npmmirror.com/quill-delta/-/quill-delta-3.6.3.tgz#b19fd2b89412301c60e1ff213d8d860eac0f1032"
+  integrity sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==
+  dependencies:
+    deep-equal "^1.0.1"
+    extend "^3.0.2"
+    fast-diff "1.1.2"
+
+quill@^1.3.4:
+  version "1.3.7"
+  resolved "https://registry.npmmirror.com/quill/-/quill-1.3.7.tgz#da5b2f3a2c470e932340cdbf3668c9f21f9286e8"
+  integrity sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==
+  dependencies:
+    clone "^2.1.1"
+    deep-equal "^1.0.1"
+    eventemitter3 "^2.0.3"
+    extend "^3.0.2"
+    parchment "^1.1.4"
+    quill-delta "^3.6.2"
+
 raf@^3.4.0:
   version "3.4.1"
   resolved "https://registry.npmmirror.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
@@ -10567,6 +10563,11 @@ sort-keys@^1.0.0:
   dependencies:
     is-plain-obj "^1.0.0"
 
+sortablejs@1.10.2:
+  version "1.10.2"
+  resolved "https://registry.npmmirror.com/sortablejs/-/sortablejs-1.10.2.tgz#6e40364d913f98b85a14f6678f92b5c1221f5290"
+  integrity sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A==
+
 source-list-map@^2.0.0, source-list-map@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmmirror.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
@@ -11628,6 +11629,14 @@ vary@~1.1.2:
   resolved "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
 
+vcolorpicker@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/vcolorpicker/-/vcolorpicker-1.1.0.tgz#527e2463ab330faab8b9637a30f915aebbef75f6"
+  integrity sha512-FbI7rq0EliwaPU8Qh/QVv9MFdZnG3dHjZEvODIcpPS774TTvilg6tq6cWDRbtCITBNDdpgVWnNlJ0aKnecgrJg==
+  dependencies:
+    highlight.js "^9.12.0"
+    vue "^2.5.17"
+
 vendors@^1.0.0:
   version "1.0.4"
   resolved "https://registry.npmmirror.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"
@@ -11691,6 +11700,13 @@ vue-clipboard2@^0.3.3:
   dependencies:
     clipboard "^2.0.0"
 
+vue-codemirror-lite@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmmirror.com/vue-codemirror-lite/-/vue-codemirror-lite-1.0.4.tgz#48a5cd7d17c0914503c8cd9d9b56b438e49c3410"
+  integrity sha512-p9199uCWgJwkMEfr89vHRbhiYEg+w0NmucqOGt/o3XuR1LeEVmY0uSsBPvrBzVG5dqjaGPSAkEEePnc0Wtpb/w==
+  dependencies:
+    codemirror "^5.22.0"
+
 vue-container-query@^0.1.0:
   version "0.1.0"
   resolved "https://registry.npmmirror.com/vue-container-query/-/vue-container-query-0.1.0.tgz#8210b49388f2350aa4afda92df5caca18ff220a1"
@@ -11771,6 +11787,14 @@ vue-qr@^2.5.0:
   resolved "https://registry.npmmirror.com/vue-qr/download/vue-qr-2.5.0.tgz#2b938f8d4c3d07eaf9e4931b714e32f7ca15b5dd"
   integrity sha1-K5OPjUw9B+r55JMbcU4y98oVtd0=
 
+vue-quill-editor@^3.0.6:
+  version "3.0.6"
+  resolved "https://registry.npmmirror.com/vue-quill-editor/-/vue-quill-editor-3.0.6.tgz#1f85646211d68a31a80a72cb7f45bb2f119bc8fb"
+  integrity sha512-g20oSZNWg8Hbu41Kinjd55e235qVWPLfg4NvsLW6d+DhgBTFbEuMpcWlUdrD6qT3+Noim6DRu18VLM9lVShXOQ==
+  dependencies:
+    object-assign "^4.1.1"
+    quill "^1.3.4"
+
 vue-ref@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmmirror.com/vue-ref/-/vue-ref-2.0.0.tgz#483084d732abed11da796778a8266a3af0ea1a9c"
@@ -11837,15 +11861,22 @@ vue@^2.6.14:
   resolved "https://registry.npmmirror.com/vue/download/vue-2.6.14.tgz?cache=0&sync_timestamp=1631046210210&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fvue%2Fdownload%2Fvue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"
   integrity sha1-5RqlJQJQ1Wmj+606ilpofWA24jU=
 
+vuedraggable@^2.23.2:
+  version "2.24.3"
+  resolved "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-2.24.3.tgz#43c93849b746a24ce503e123d5b259c701ba0d19"
+  integrity sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==
+  dependencies:
+    sortablejs "1.10.2"
+
 vuex@^3.6.2:
   version "3.6.2"
   resolved "https://registry.npmmirror.com/vuex/download/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
   integrity sha1-I2vAhqhww655lG8QfxbeWdWJXnE=
 
-vxe-table@^3.5.8:
-  version "3.5.8"
-  resolved "https://registry.npmmirror.com/vxe-table/-/vxe-table-3.5.8.tgz#eeac1f103f2bddc27085d98454f236a817ec8cda"
-  integrity sha512-oozFUylUKUFXm7u2aWz5+rJaBRxgqFqKxc2C8Gw3qOTsU7g0qBj1K5cKB4b0rgHxxtAkMz0HL8cq3rmZbtS81w==
+vxe-table@^3.5.9:
+  version "3.5.9"
+  resolved "https://registry.npmmirror.com/vxe-table/-/vxe-table-3.5.9.tgz#b2fa902bef6cc4d2d4f02f0c2fa22aa90d891c3d"
+  integrity sha512-8idPnu377Ufwyv6/8GsAk2s9KNcF2nVdp3M8izMmrapOJ2fJRTWmaBTH//XbKqF4ELmvRPXAtkEOl6h37T7RaA==
 
 w3c-hr-time@^1.0.1:
   version "1.0.2"
@@ -12261,10 +12292,10 @@ ws@^7.3.1:
   resolved "https://registry.npmmirror.com/ws/-/ws-7.5.8.tgz#ac2729881ab9e7cbaf8787fe3469a48c5c7f636a"
   integrity sha512-ri1Id1WinAX5Jqn9HejiGb8crfRio0Qgu8+MtL36rlTA6RLsMdWt1Az/19A2Qij6uSHUMphEFaTKa4WG+UNHNw==
 
-xe-utils@^3.5.4:
-  version "3.5.4"
-  resolved "https://registry.npmmirror.com/xe-utils/-/xe-utils-3.5.4.tgz#d4335633fede280c68c1c0c9a4c8f3a533cfd831"
-  integrity sha512-oH7VOgvHv34pn198dhKPVKnuEHV22Q06YpCTVnAS3JuutylmZj/rtJGvn0BxxWQ37w2LgCknoebLA4uIGXwFtw==
+xe-utils@^3.5.6:
+  version "3.5.6"
+  resolved "https://registry.npmmirror.com/xe-utils/-/xe-utils-3.5.6.tgz#1d8cf03d635bc2ede3f34bfdf39ce6051b6fcaaa"
+  integrity sha512-oFZWxtTqxR6a2FtTQ1vSD10ab+XUXSz6jWaTaK+CsfbpIWH79jU6DipJJPgw9zxfYigcnJvb98aaT188kqhqcA==
 
 xml-name-validator@^3.0.0:
   version "3.0.0"