diff --git a/front-end/h5/package.json b/front-end/h5/package.json
index 34be1404..be3dee79 100644
--- a/front-end/h5/package.json
+++ b/front-end/h5/package.json
@@ -6,7 +6,7 @@
     "dev": "vue-cli-service serve",
     "serve": "vue-cli-service serve",
     "build": "npm run build:editor && npm run build:engine",
-    "lint": "vue-cli-service lint --fix",
+    "lint": "vue-cli-service lint --fix src",
     "deploy": "rm -rf dist && npm run build:editor && npm run build:engine && ./deploy.sh",
     "test:e2e": "vue-cli-service test:e2e",
     "test:unit": "vue-cli-service test:unit",
@@ -44,11 +44,12 @@
     "vue-matomo": "^3.13.0-2",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.0.3",
+    "vuedraggable": "^2.24.3",
     "vuex": "^3.0.1",
     "x-data-spreadsheet": "^1.1.4"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-optional-chaining": "^7.12.16",
+    "@babel/plugin-proposal-optional-chaining": "^7.14.5",
     "@vue/cli-plugin-babel": "^3.8.0",
     "@vue/cli-plugin-eslint": "^3.8.0",
     "@vue/cli-plugin-pwa": "^3.8.0",
diff --git a/front-end/h5/src/components/core/editor/canvas/KFormItem/README.md b/front-end/h5/src/components/core/editor/canvas/KFormItem/README.md
new file mode 100644
index 00000000..6c6f7642
--- /dev/null
+++ b/front-end/h5/src/components/core/editor/canvas/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/front-end/h5/src/components/core/editor/canvas/KFormItem/customComponent.vue b/front-end/h5/src/components/core/editor/canvas/KFormItem/customComponent.vue
new file mode 100644
index 00000000..344a8955
--- /dev/null
+++ b/front-end/h5/src/components/core/editor/canvas/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/front-end/h5/src/components/core/editor/canvas/KFormItem/index.js b/front-end/h5/src/components/core/editor/canvas/KFormItem/index.js
new file mode 100644
index 00000000..36a0e169
--- /dev/null
+++ b/front-end/h5/src/components/core/editor/canvas/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/front-end/h5/src/components/core/editor/canvas/KFormItem/index.vue b/front-end/h5/src/components/core/editor/canvas/KFormItem/index.vue
new file mode 100644
index 00000000..47286da9
--- /dev/null
+++ b/front-end/h5/src/components/core/editor/canvas/KFormItem/index.vue
@@ -0,0 +1,468 @@
+<!--
+ * @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',
+        'lbp-text',
+        '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 === 'lbp-text'"
+      :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/front-end/h5/src/components/core/editor/canvas/core/components_use copy 2.js b/front-end/h5/src/components/core/editor/canvas/core/components_use copy 2.js
new file mode 100644
index 00000000..aa69dc77
--- /dev/null
+++ b/front-end/h5/src/components/core/editor/canvas/core/components_use copy 2.js	
@@ -0,0 +1,106 @@
+/**
+ * 该文件是为了按需加载，剔除掉了一些不需要的框架组件。
+ * 减少了编译支持库包大小
+ *
+ * 当需要更多组件依赖时，在该文件加入即可
+ */
+import Vue from "vue";
+import {
+  ConfigProvider,
+  Layout,
+  Input,
+  Rate,
+  Slider,
+  InputNumber,
+  Button,
+  Switch,
+  Radio,
+  Checkbox,
+  Select,
+  Card,
+  Empty,
+  Form,
+  Row,
+  Col,
+  Modal,
+  Table,
+  Tabs,
+  Icon,
+  Steps,
+  Alert,
+  Tag,
+  Divider,
+  DatePicker,
+  TimePicker,
+  message,
+  Upload,
+  Tooltip,
+  FormModel,
+  Collapse,
+  Cascader,
+  TreeSelect
+} from "ant-design-vue";
+import vcolorpicker from "vcolorpicker";
+
+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
+};
+
+Vue.use(ConfigProvider);
+Vue.use(Tooltip);
+Vue.use(Empty);
+Vue.use(FormModel);
+Vue.use(Collapse);
+Vue.use(Layout);
+Vue.use(Input);
+Vue.use(Rate);
+Vue.use(Slider);
+Vue.use(InputNumber);
+Vue.use(Button);
+Vue.use(Switch);
+Vue.use(Radio);
+Vue.use(Checkbox);
+Vue.use(Select);
+Vue.use(Card);
+Vue.use(Form);
+Vue.use(Row);
+Vue.use(Col);
+Vue.use(Modal);
+Vue.use(Table);
+Vue.use(Tabs);
+Vue.use(Icon);
+Vue.use(Steps);
+Vue.use(Alert);
+Vue.use(Tag);
+Vue.use(Divider);
+Vue.use(DatePicker);
+Vue.use(TimePicker);
+Vue.use(Upload);
+Vue.use(vcolorpicker);
+
+Vue.prototype.$confirm = Modal.confirm;
+Vue.prototype.$message = message;
diff --git a/front-end/h5/src/components/core/editor/canvas/core/components_use.js b/front-end/h5/src/components/core/editor/canvas/core/components_use.js
new file mode 100644
index 00000000..ca383bee
--- /dev/null
+++ b/front-end/h5/src/components/core/editor/canvas/core/components_use.js
@@ -0,0 +1,106 @@
+/**
+ * 该文件是为了按需加载，剔除掉了一些不需要的框架组件。
+ * 减少了编译支持库包大小
+ *
+ * 当需要更多组件依赖时，在该文件加入即可
+ */
+import Vue from 'vue'
+import {
+  ConfigProvider,
+  Layout,
+  Input,
+  Rate,
+  Slider,
+  InputNumber,
+  Button,
+  Switch,
+  Radio,
+  Checkbox,
+  Select,
+  Card,
+  Empty,
+  Form,
+  Row,
+  Col,
+  Modal,
+  Table,
+  Tabs,
+  Icon,
+  Steps,
+  Alert,
+  Tag,
+  Divider,
+  DatePicker,
+  TimePicker,
+  message,
+  Upload,
+  Tooltip,
+  FormModel,
+  Collapse,
+  Cascader,
+  TreeSelect
+} from 'ant-design-vue'
+// import vcolorpicker from 'vcolorpicker'
+
+// 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
+}
+
+Vue.use(ConfigProvider)
+Vue.use(Tooltip)
+Vue.use(Empty)
+Vue.use(FormModel)
+Vue.use(Collapse)
+Vue.use(Layout)
+Vue.use(Input)
+Vue.use(Rate)
+Vue.use(Slider)
+Vue.use(InputNumber)
+Vue.use(Button)
+Vue.use(Switch)
+Vue.use(Radio)
+Vue.use(Checkbox)
+Vue.use(Select)
+Vue.use(Card)
+Vue.use(Form)
+Vue.use(Row)
+Vue.use(Col)
+Vue.use(Modal)
+Vue.use(Table)
+Vue.use(Tabs)
+Vue.use(Icon)
+Vue.use(Steps)
+Vue.use(Alert)
+Vue.use(Tag)
+Vue.use(Divider)
+Vue.use(DatePicker)
+Vue.use(TimePicker)
+Vue.use(Upload)
+// Vue.use(vcolorpicker)
+
+Vue.prototype.$confirm = Modal.confirm
+Vue.prototype.$message = message
diff --git a/front-end/h5/src/components/core/editor/canvas/core/revoke.js b/front-end/h5/src/components/core/editor/canvas/core/revoke.js
new file mode 100644
index 00000000..c13e2675
--- /dev/null
+++ b/front-end/h5/src/components/core/editor/canvas/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/front-end/h5/src/components/core/editor/canvas/formComponentPanel.vue b/front-end/h5/src/components/core/editor/canvas/formComponentPanel.vue
new file mode 100644
index 00000000..9760b488
--- /dev/null
+++ b/front-end/h5/src/components/core/editor/canvas/formComponentPanel.vue
@@ -0,0 +1,504 @@
+<!--
+ * @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>
+
+<style lang="stylus" scoped>
+.form-panel,
+.a-form-box,
+.list-main,
+.draggable-box {
+    height: 100%;
+}
+
+.form-panel > .hint-text {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 100%;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+  font-size: 20px;
+  color: #aaa;
+  z-index: 16;
+}
+</style>
diff --git a/front-end/h5/src/components/core/editor/canvas/formNode.vue b/front-end/h5/src/components/core/editor/canvas/formNode.vue
new file mode 100644
index 00000000..1bf0d147
--- /dev/null
+++ b/front-end/h5/src/components/core/editor/canvas/formNode.vue
@@ -0,0 +1,90 @@
+<!--
+ * @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="action-icon copy"
+      :class="record.key === selectItem.key ? 'active' : 'unactivated'"
+      @click.stop="$emit('handleCopy')"
+    >
+      <a-icon type="copy" />
+    </div>
+    <div
+      class="action-icon 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>
+
+<style lang="scss" scoped>
+.action-icon {
+  position: absolute;
+  top: 0;
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  /* color: #fff; */
+  z-index: 989;
+  -webkit-transition: all .3s;
+  transition: all .3s;
+  &.delete {
+    right: 0;
+  }
+  &.copy {
+    right: 30px;
+  }
+}
+</style>
diff --git a/front-end/h5/src/components/core/editor/canvas/index.js b/front-end/h5/src/components/core/editor/canvas/index.js
index 68dfa801..cdafb89a 100644
--- a/front-end/h5/src/components/core/editor/canvas/index.js
+++ b/front-end/h5/src/components/core/editor/canvas/index.js
@@ -2,11 +2,39 @@ import { mapState, mapActions } from 'vuex'
 
 import RenderEditCanvas from './edit'
 import RenderPreviewCanvas from './preview'
+import formComponentPanel from './formComponentPanel.vue'
 
+import './styles/form-design.less'
 export default {
   name: 'EditorCanvas',
   data: () => ({
-    isPreviewMode: false
+    isPreviewMode: false,
+    selectItem: {
+      key: ''
+    },
+    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: ''
+      }
+    }
   }),
   computed: {
     ...mapState('editor', {
@@ -15,7 +43,8 @@ export default {
       elements: state => state.editingPage.elements,
       pages: state => state.work.pages,
       work: state => state.work,
-      scaleRate: state => state.scaleRate
+      scaleRate: state => state.scaleRate,
+      startType: state => state.startType
     }),
     ...mapState('loading', [
       'saveWork_loading',
@@ -54,24 +83,41 @@ export default {
           onInput={this.handleToggleMode}
         >
           {/* 编辑模式、预览模式 */}
-          <a-radio-button label={false} value={false}>{this.$t('editor.centerPanel.mode.edit')}</a-radio-button>
-          <a-radio-button label={true} value={true}>{this.$t('editor.centerPanel.mode.preview')}</a-radio-button>
+          <a-radio-button label={false} value={false}>
+            {this.$t('editor.centerPanel.mode.edit')}
+          </a-radio-button>
+          <a-radio-button label={true} value={true}>
+            {this.$t('editor.centerPanel.mode.preview')}
+          </a-radio-button>
         </a-radio-group>
-        <a-layout-content style={{ transform: `scale(${this.scaleRate})`, 'transform-origin': 'center top' }}>
+        <a-layout-content
+          style={{
+            transform: `scale(${this.scaleRate})`,
+            transformOrigin: 'center top'
+          }}
+        >
           <div
-            class='canvas-wrapper'
+            class="canvas-wrapper"
             style={{
-              height: `${this.work.height}px`,
-              width: `${this.work.width}px`
+              // height: `${this.work.height}px`
+              // width: `${this.work.width}px`
             }}
           >
-            { this.isPreviewMode
-              ? <RenderPreviewCanvas elements={this.elements}/>
-              : <RenderEditCanvas
-                class="edit-mode"
-                elements={this.elements}
-              />
-            }
+            <formComponentPanel
+              class={{ 'no-toolbars-top': !this.toolbarsTop }}
+              data={this.data}
+              selectItem={this.selectItem}
+              noModel={this.noModel}
+              hideModel={this.hideModel}
+              startType={this.startType}
+              ref="KFCP"
+              onHandleSetSelectItem={() => {}}
+            />
+            {/* {this.isPreviewMode ? (
+                <RenderPreviewCanvas elements={this.elements} />
+              ) : (
+                <RenderEditCanvas class="edit-mode" elements={this.elements} />
+              )} */}
           </div>
         </a-layout-content>
       </a-layout>
diff --git a/front-end/h5/src/components/core/editor/canvas/layoutItem.vue b/front-end/h5/src/components/core/editor/canvas/layoutItem.vue
new file mode 100644
index 00000000..814c5fa2
--- /dev/null
+++ b/front-end/h5/src/components/core/editor/canvas/layoutItem.vue
@@ -0,0 +1,556 @@
+<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="action-icon copy"
+          :class="record.key === selectItem.key ? 'active' : 'unactivated'"
+          @click.stop="$emit('handleCopy')"
+        >
+          <a-icon type="copy" />
+        </div>
+        <div
+          class="action-icon 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="action-icon copy"
+          :class="record.key === selectItem.key ? 'active' : 'unactivated'"
+          @click.stop="$emit('handleCopy')"
+        >
+          <a-icon type="copy" />
+        </div>
+        <div
+          class="action-icon 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="action-icon copy"
+          :class="record.key === selectItem.key ? 'active' : 'unactivated'"
+          @click.stop="$emit('handleCopy')"
+        >
+          <a-icon type="copy" />
+        </div>
+        <div
+          class="action-icon 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="action-icon copy"
+          :class="record.key === selectItem.key ? 'active' : 'unactivated'"
+          @click.stop="$emit('handleCopy')"
+        >
+          <a-icon type="copy" />
+        </div>
+        <div
+          class="action-icon 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="action-icon copy"
+          :class="record.key === selectItem.key ? 'active' : 'unactivated'"
+          @click.stop="$emit('handleCopy')"
+        >
+          <a-icon type="copy" />
+        </div>
+        <div
+          class="action-icon 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" 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="action-icon copy"
+          :class="record.key === selectItem.key ? 'active' : 'unactivated'"
+          @click.stop="$emit('handleCopy')"
+        >
+          <a-icon type="copy" />
+        </div>
+        <div
+          class="action-icon 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>
+<style lang="scss" scoped>
+.action-icon {
+  position: absolute;
+  top: 0;
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  /* color: #fff; */
+  z-index: 989;
+  -webkit-transition: all .3s;
+  transition: all .3s;
+  &.delete {
+    right: 0;
+  }
+  &.copy {
+    right: 30px;
+  }
+}
+</style>
diff --git a/front-end/h5/src/components/core/editor/canvas/styles/form-design.less b/front-end/h5/src/components/core/editor/canvas/styles/form-design.less
new file mode 100644
index 00000000..18811bfd
--- /dev/null
+++ b/front-end/h5/src/components/core/editor/canvas/styles/form-design.less
@@ -0,0 +1,1204 @@
+// 表单设计器样式
+@primary-color: #13c2c2;
+@layout-color : #ccc;
+
+@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;
+      }
+    }
+  }
+}
+
+// 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;
+  }
+}
+
+// .k-form-build-9136076486841527 {
+
+// }
+
+
+// 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;
+//   }
+// }
+
+ // 中间内容区域
+    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;
+              }
+            }
+          }
+        }
+      }
+    }
\ No newline at end of file
diff --git a/front-end/h5/src/components/core/editor/canvas/styles/k-editor.less b/front-end/h5/src/components/core/editor/canvas/styles/k-editor.less
new file mode 100644
index 00000000..4fc92cfa
--- /dev/null
+++ b/front-end/h5/src/components/core/editor/canvas/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/front-end/h5/src/components/core/editor/canvas/styles/k-form-design.less b/front-end/h5/src/components/core/editor/canvas/styles/k-form-design.less
new file mode 100644
index 00000000..5ed7711e
--- /dev/null
+++ b/front-end/h5/src/components/core/editor/canvas/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/front-end/h5/src/components/core/editor/canvas/styles/k-table.less b/front-end/h5/src/components/core/editor/canvas/styles/k-table.less
new file mode 100644
index 00000000..3d8e7ddb
--- /dev/null
+++ b/front-end/h5/src/components/core/editor/canvas/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/front-end/h5/src/components/core/editor/data-source/data-source.js b/front-end/h5/src/components/core/editor/data-source/data-source.js
index 95d3cf8d..f3205a78 100644
--- a/front-end/h5/src/components/core/editor/data-source/data-source.js
+++ b/front-end/h5/src/components/core/editor/data-source/data-source.js
@@ -109,7 +109,7 @@ export default {
               description="使用 {{DC.[keyPath]}} 消费数据。比如输入框内容为 下载了{{DC.count}}次 => 下载了count次"
               type="info"
             />
-            <codemirror value={JSON.stringify(LuBanDC, null, 2)}  />
+            <codemirror value={JSON.stringify(LuBanDC, null, 2)} />
 
           </template>
         </a-popover>
@@ -131,17 +131,17 @@ export default {
       this.toggleAddDialog()
       switch (actionType) {
         case 'edit':
-          this.activeDataSource = {...ds}
+          this.activeDataSource = { ...ds }
           this.dataSourceManager({
             type: actionType,
-            value: {...ds }
+            value: { ...ds }
           })
           break
         case 'delete':
         case 'add':
           this.dataSourceManager({
             type: actionType,
-            value: {...ds }
+            value: { ...ds }
           })
           break
       }
diff --git a/front-end/h5/src/components/core/editor/data-source/variable-pool.vue b/front-end/h5/src/components/core/editor/data-source/variable-pool.vue
index 4f13a8ba..7fb8713f 100644
--- a/front-end/h5/src/components/core/editor/data-source/variable-pool.vue
+++ b/front-end/h5/src/components/core/editor/data-source/variable-pool.vue
@@ -9,7 +9,7 @@
         <template
           v-for="col in ['name', 'address']"
           :slot="col"
-          slot-scope="text, record, index"
+          slot-scope="text, record"
         >
           <div :key="col">
             <a-input
@@ -23,7 +23,7 @@
             </template>
           </div>
         </template>
-        <template slot="operation" slot-scope="text, record, index">
+        <template slot="operation" slot-scope="text, record">
           <div class="editable-row-operations">
             <span v-if="record.editable">
               <a @click="() => save(record.key)">Save</a>
diff --git a/front-end/h5/src/components/core/editor/left-panel/shortcuts-panel/draggable/collapseItem.vue b/front-end/h5/src/components/core/editor/left-panel/shortcuts-panel/draggable/collapseItem.vue
new file mode 100644
index 00000000..9887ddec
--- /dev/null
+++ b/front-end/h5/src/components/core/editor/left-panel/shortcuts-panel/draggable/collapseItem.vue
@@ -0,0 +1,95 @@
+<!--
+ * @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="(plugin, index) in list"
+      :key="index"
+      @dragstart="$emit('generateKey', list, index)"
+      @click="$emit('handleListPush', plugin)"
+    >
+    <ShortcutButton
+      :title="plugin.title"
+      :faIcon="plugin.icon"
+      :disabled="plugin.disabled" />
+    <!-- <slot scop></slot> -->
+      <!-- <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'
+import ShortcutButton from '../shortcut-button'
+export default {
+  name: 'collapseItem',
+  props: ['list'],
+  components: {
+    draggable,
+    ShortcutButton
+  },
+  methods: {
+    handleStart (e, list) {
+      console.log('handleStart')
+      this.$emit('start', list[e.oldIndex].name)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  // iconfont 样式
+  .icon {
+    width         : 1em;
+    height        : 1em;
+    vertical-align: -0.15em;
+    fill          : currentColor;
+    overflow      : hidden;
+  }
+
+//    ul {
+//     padding: 5px;
+//     list-style: none;
+//     display: -webkit-box;
+//     display: -ms-flexbox;
+//     display: flex;
+//     margin-bottom: 0;
+//     -ms-flex-wrap: wrap;
+//     flex-wrap: wrap;
+
+//       li {
+//           border-radius: 0;
+//           border: 0;
+//           -webkit-box-shadow: 1px 0 0 0 #ccc, 0 1px 0 0 #ccc, 1px 1px 0 0 #ccc, 1px 0 0 0 #ccc inset, 0 1px 0 0 #ccc inset;
+//           box-shadow: 1px 0 0 0 #ccc, 0 1px 0 0 #ccc, 1px 1px 0 0 #ccc, inset 1px 0 0 0 #ccc, inset 0 1px 0 0 #ccc;
+//           padding: 8px 12px;
+//           width: calc(50% - 6px);
+//           margin: 2.7px;
+//           height: 36px;
+//           line-height: 20px;
+//           cursor: move;
+//           border: 1px solid transparent;
+//           border-radius: 3px;
+//           -webkit-transition: all .3s;
+//           transition: all .3s;
+//       }
+// }
+
+</style>
diff --git a/front-end/h5/src/components/core/editor/left-panel/shortcuts-panel/index.js b/front-end/h5/src/components/core/editor/left-panel/shortcuts-panel/index.js
index f10502fc..372f9959 100644
--- a/front-end/h5/src/components/core/editor/left-panel/shortcuts-panel/index.js
+++ b/front-end/h5/src/components/core/editor/left-panel/shortcuts-panel/index.js
@@ -5,11 +5,13 @@ import langMixin from 'core/mixins/i18n'
 import dragMixin from 'core/mixins/drag'
 import loadPluginsMixin from 'core/plugins/index'
 import { mapActions } from 'vuex'
+import collapseItem from './draggable/collapseItem.vue'
 
 export default {
   mixins: [langMixin, dragMixin, loadPluginsMixin],
   data: () => ({
-    npmPackages: []
+    npmPackages: [],
+    startType: ''
   }),
   methods: {
     ...mapActions('editor', [
@@ -113,6 +115,30 @@ export default {
     return (
       <a-row gutter={10} style="max-height: calc(100vh - 150px);overflow: auto;margin:0;">
         <UsageTip />
+        <collapseItem
+          list={[].concat(this.pluginsList, this.npmPackages)}
+          onGenerateKey={(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
+            // }
+          }}
+          onStart={type => {
+            debugger
+            this.startType = type
+            this.elementManager({
+              type: 'setStartType',
+              value: type
+            })
+          }}
+        />
         {
           [].concat(this.pluginsList, this.npmPackages)
             .filter(plugin => plugin.visible)
diff --git a/front-end/h5/src/components/core/editor/right-panel/background.js b/front-end/h5/src/components/core/editor/right-panel/background.js
index 42473134..3b3bc614 100644
--- a/front-end/h5/src/components/core/editor/right-panel/background.js
+++ b/front-end/h5/src/components/core/editor/right-panel/background.js
@@ -33,7 +33,7 @@ export default {
             <ShareInfo />
           </a-collapse-panel>
           {/* #!zh: 页面模式 */}
-          <a-collapse-panel key="1" header={this.$t('editor.editPanel.common.pageMode')}>
+          <a-collapse-panel key="2" header={this.$t('editor.editPanel.common.pageMode')}>
             <RenderWorkMode />
           </a-collapse-panel>
         </a-collapse>
diff --git a/front-end/h5/src/components/core/plugins/index.js b/front-end/h5/src/components/core/plugins/index.js
index c01456cd..4b80f781 100644
--- a/front-end/h5/src/components/core/plugins/index.js
+++ b/front-end/h5/src/components/core/plugins/index.js
@@ -21,302 +21,366 @@ import LbpNewsList from 'core/plugins/lbp-news-list'
 // import LbpTabs from 'core/components/plugins/lbp-tabs'
 
 export const pluginsList = [
-  {
-    i18nTitle: {
-      'en-US': 'RadarChart',
-      'zh-CN': '雷达图'
-    },
-    title: '雷达图',
-    icon: 'line-chart',
-    component: LbpLineChart,
-    visible: true,
-    name: LbpLineChart.name,
-    shortcutProps: {
-      type: 'radar'
-    }
-  },
-  {
-    i18nTitle: {
-      'en-US': 'LineChart',
-      'zh-CN': '折线图'
-    },
-    title: '折线图',
-    icon: 'line-chart',
-    component: LbpLineChart,
-    visible: true,
-    name: LbpLineChart.name,
-    shortcutProps: {
-      type: 'line'
-    }
-  },
-  {
-    i18nTitle: {
-      'en-US': 'LineChart',
-      'zh-CN': '柱状图'
-    },
-    title: '柱状图',
-    icon: 'bar-chart',
-    component: LbpLineChart,
-    visible: true,
-    name: LbpLineChart.name,
-    shortcutProps: {
-      type: 'histogram'
-    }
-  },
-  {
-    i18nTitle: {
-      'en-US': 'LineChart',
-      'zh-CN': '饼状图'
-    },
-    title: '饼状图',
-    icon: 'pie-chart',
-    component: LbpLineChart,
-    visible: true,
-    name: LbpLineChart.name,
-    shortcutProps: {
-      type: 'pie'
-    }
-  },
-  {
-    i18nTitle: {
-      'en-US': 'LineChart',
-      'zh-CN': '漏斗图'
-    },
-    title: '漏斗图',
-    icon: 'filter',
-    component: LbpLineChart,
-    visible: true,
-    name: LbpLineChart.name,
-    shortcutProps: {
-      type: 'funnel'
-    }
-  },
-  {
-    title: '公告',
-    i18nTitle: {
-      'en-US': 'Notice-Bar',
-      'zh-CN': '公告'
-    },
-    icon: 'volume-up',
-    component: LbpNoticeBar,
-    visible: true,
-    name: LbpNoticeBar.name
-  },
-  // {
-  //   title: '标签页',
-  //   i18nTitle: {
-  //     'en-US': 'Tabs',
-  //     'zh-CN': '标签页'
-  //   },
-  //   icon: 'tab',
-  //   component: LbpTabs,
-  //   visible: true,
-  //   name: LbpTabs.name
-  // },
-  {
-    title: '评分',
-    i18nTitle: {
-      'en-US': 'Rate',
-      'zh-CN': '评分'
-    },
-    icon: 'star-o',
-    component: LbpRate,
-    visible: true,
-    name: LbpRate.name
-  },
-  {
-    title: '图片',
-    i18nTitle: {
-      'en-US': 'Picture',
-      'zh-CN': '图片'
-    },
-    icon: 'photo',
-    component: LbpPicture,
-    visible: true,
-    name: LbpPicture.name
-  },
-  {
-    i18nTitle: {
-      'en-US': 'Text',
-      'zh-CN': '文字'
-    },
-    title: '文字',
-    icon: 'text-width',
-    component: LbpText,
-    visible: true,
-    name: LbpText.name
-  },
-  {
-    i18nTitle: {
-      'en-US': 'Tiny-Text',
-      'zh-CN': 'Tiny-文字'
-    },
-    title: 'Tiny-文字',
-    icon: 'text-width',
-    component: LbpTextTinymce,
-    visible: true,
-    name: LbpTextTinymce.name
-  },
-  {
-    i18nTitle: {
-      'en-US': 'Button',
-      'zh-CN': '普通按钮'
-    },
-    title: '普通按钮',
-    icon: 'hand-pointer-o',
-    component: LbpButton,
-    visible: true,
-    name: LbpButton.name
-  },
-  {
-    i18nTitle: {
-      'en-US': 'Carousel',
-      'zh-CN': '轮播图'
-    },
-    title: '轮播图',
-    icon: 'photo',
-    component: LbpSlide,
-    visible: true,
-    name: LbpSlide.name
-    // disabled: true
-  },
-  {
-    i18nTitle: {
-      'en-US': 'Map',
-      'zh-CN': '地图'
-    },
-    title: '地图',
-    icon: 'map-o',
-    component: LbpQQMap,
-    visible: true,
-    name: LbpQQMap.name
-    // disabled: true
-  },
-  {
-    i18nTitle: {
-      'en-US': 'Video',
-      'zh-CN': '视频'
-    },
-    title: '视频',
-    icon: 'file-video-o',
-    component: LbpVideo,
-    visible: true,
-    name: LbpVideo.name
-  },
-  {
-    i18nTitle: {
-      'en-US': 'Form Input',
-      'zh-CN': '表单输入'
-    },
-    title: '表单输入',
-    icon: 'pencil-square-o',
-    component: LbpFormInput,
-    visible: true,
-    name: LbpFormInput.name
-  },
-  {
-    i18nTitle: {
-      'en-US': 'Form Submit',
-      'zh-CN': '表单提交'
-    },
-    title: '表单提交',
-    icon: 'hand-pointer-o',
-    component: LbpFormButton,
-    visible: true,
-    name: LbpFormButton.name
-  },
-  {
-    i18nTitle: {
-      'en-US': 'Form Checkbox',
-      'zh-CN': '表单多选'
-    },
-    title: '表单多选',
-    icon: 'check-square-o',
-    component: LbpFormCheckboxGroup,
-    visible: true,
-    name: LbpFormCheckboxGroup.name
-  },
-  {
-    i18nTitle: {
-      'en-US': 'Form Radio',
-      'zh-CN': '表单单选'
-    },
-    title: '表单单选',
-    icon: 'dot-circle-o',
-    component: LbpFormRadioGroup,
-    visible: true,
-    name: LbpFormRadioGroup.name
-  },
-  {
-    i18nTitle: {
-      'en-US': 'Background',
-      'zh-CN': '背景'
-    },
-    title: '背景',
-    icon: 'dot-circle-o',
-    component: LbpBackground,
-    visible: false,
-    name: LbpBackground.name
-  },
-  {
-    i18nTitle: {
-      'en-US': 'BgMusic',
-      'zh-CN': '背景音乐'
-    },
-    title: '背景音乐',
-    icon: 'music',
-    component: LbpBgMusic,
-    visible: true,
-    name: LbpBgMusic.name
-  },
-  {
-    i18nTitle: {
-      'en-US': 'Table(Default)',
-      'zh-CN': '默认表格'
-    },
-    icon: 'table',
-    component: LbpTable,
-    visible: true,
-    name: LbpTable.name
-  },
-  {
-    i18nTitle: {
-      'en-US': 'Table(Stripe)',
-      'zh-CN': '(斑马线)表格'
-    },
-    icon: 'table',
-    component: LbpTable,
-    visible: true,
-    name: LbpTable.name,
-    shortcutProps: {
-      theme: 'lbp-table-theme-stripe'
-    }
-  },
-  {
-    i18nTitle: {
-      'en-US': 'Table(LightBlue)',
-      'zh-CN': '(淡蓝色)表格'
-    },
-    icon: 'table',
-    component: LbpTable,
-    visible: true,
-    name: LbpTable.name,
-    shortcutProps: {
-      theme: 'lbp-table-theme-light-blue'
-    }
-  },
-  {
-    i18nTitle: {
-      'en-US': 'NewsList',
-      'zh-CN': '新闻列表'
-    },
-    title: '新闻列表',
-    icon: 'list',
-    component: LbpNewsList,
-    visible: true,
-    name: LbpNewsList.name
-  }
-]
+         {
+           i18nTitle: {
+             'en-US': 'RadarChart',
+             'zh-CN': '雷达图'
+           },
+           title: '雷达图',
+           icon: 'line-chart',
+           component: LbpLineChart,
+           visible: true,
+           name: LbpLineChart.name,
+           type: LbpLineChart.name,
+           shortcutProps: {
+             type: 'radar'
+           }
+         },
+         {
+           i18nTitle: {
+             'en-US': 'LineChart',
+             'zh-CN': '折线图'
+           },
+           title: '折线图',
+           icon: 'line-chart',
+           component: LbpLineChart,
+           visible: true,
+           name: LbpLineChart.name,
+           type: LbpLineChart.name,
+           shortcutProps: {
+             type: 'line'
+           }
+         },
+         {
+           i18nTitle: {
+             'en-US': 'LineChart',
+             'zh-CN': '柱状图'
+           },
+           title: '柱状图',
+           icon: 'bar-chart',
+           component: LbpLineChart,
+           visible: true,
+           name: LbpLineChart.name,
+           type: LbpLineChart.name,
+           shortcutProps: {
+             type: 'histogram'
+           }
+         },
+         {
+           i18nTitle: {
+             'en-US': 'LineChart',
+             'zh-CN': '饼状图'
+           },
+           title: '饼状图',
+           icon: 'pie-chart',
+           component: LbpLineChart,
+           visible: true,
+           name: LbpLineChart.name,
+           type: LbpLineChart.name,
+           shortcutProps: {
+             type: 'pie'
+           }
+         },
+         {
+           i18nTitle: {
+             'en-US': 'LineChart',
+             'zh-CN': '漏斗图'
+           },
+           title: '漏斗图',
+           icon: 'filter',
+           component: LbpLineChart,
+           visible: true,
+           name: LbpLineChart.name,
+           type: LbpLineChart.name,
+           shortcutProps: {
+             type: 'funnel'
+           }
+         },
+         {
+           title: '公告',
+           i18nTitle: {
+             'en-US': 'Notice-Bar',
+             'zh-CN': '公告'
+           },
+           icon: 'volume-up',
+           component: LbpNoticeBar,
+           visible: true,
+           name: LbpNoticeBar.name,
+           type: LbpNoticeBar.name
+         },
+         {
+           title: '标签页',
+           i18nTitle: {
+             'en-US': 'Tabs',
+             'zh-CN': '标签页'
+           },
+           icon: 'tab',
+           // component: LbpTabs,
+           visible: true,
+           name: 'tabs',
+           type: 'tabs',
+           options: {
+             tabBarGutter: null,
+             type: 'line',
+             tabPosition: 'top',
+             size: 'default',
+             animated: true
+           },
+           columns: [
+             {
+               value: '1',
+               label: '选项1',
+               list: []
+             },
+             {
+               value: '2',
+               label: '选项2',
+               list: []
+             }
+           ]
+         },
+         {
+           title: '评分',
+           i18nTitle: {
+             'en-US': 'Rate',
+             'zh-CN': '评分'
+           },
+           icon: 'star-o',
+           component: LbpRate,
+           visible: true,
+           name: LbpRate.name,
+           type: LbpRate.name
+         },
+         {
+           title: '图片',
+           i18nTitle: {
+             'en-US': 'Picture',
+             'zh-CN': '图片'
+           },
+           icon: 'photo',
+           component: LbpPicture,
+           visible: true,
+           name: LbpPicture.name,
+           type: LbpPicture.name
+         },
+         {
+           i18nTitle: {
+             'en-US': 'Text',
+             'zh-CN': '文字'
+           },
+           title: '文字',
+           icon: 'text-width',
+           component: LbpText,
+           visible: true,
+           name: LbpText.name,
+           type: LbpText.name,
+           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: '必填项'
+             }
+           ]
+         },
+         {
+           i18nTitle: {
+             'en-US': 'Tiny-Text',
+             'zh-CN': 'Tiny-文字'
+           },
+           title: 'Tiny-文字',
+           icon: 'text-width',
+           component: LbpTextTinymce,
+           visible: true,
+           name: LbpTextTinymce.name,
+           type: LbpTextTinymce.name
+         },
+         {
+           i18nTitle: {
+             'en-US': 'Button',
+             'zh-CN': '普通按钮'
+           },
+           title: '普通按钮',
+           icon: 'hand-pointer-o',
+           component: LbpButton,
+           visible: true,
+           name: LbpButton.name,
+           type: LbpButton.name
+         },
+         {
+           i18nTitle: {
+             'en-US': 'Carousel',
+             'zh-CN': '轮播图'
+           },
+           title: '轮播图',
+           icon: 'photo',
+           component: LbpSlide,
+           visible: true,
+           name: LbpSlide.name,
+           type: LbpSlide.name
+           // disabled: true
+         },
+         {
+           i18nTitle: {
+             'en-US': 'Map',
+             'zh-CN': '地图'
+           },
+           title: '地图',
+           icon: 'map-o',
+           component: LbpQQMap,
+           visible: true,
+           name: LbpQQMap.name,
+           type: LbpQQMap.name
+           // disabled: true
+         },
+         {
+           i18nTitle: {
+             'en-US': 'Video',
+             'zh-CN': '视频'
+           },
+           title: '视频',
+           icon: 'file-video-o',
+           component: LbpVideo,
+           visible: true,
+           name: LbpVideo.name,
+           type: LbpVideo.name
+         },
+         {
+           i18nTitle: {
+             'en-US': 'Form Input',
+             'zh-CN': '表单输入'
+           },
+           title: '表单输入',
+           icon: 'pencil-square-o',
+           component: LbpFormInput,
+           visible: true,
+           name: LbpFormInput.name,
+           type: LbpFormInput.name
+         },
+         {
+           i18nTitle: {
+             'en-US': 'Form Submit',
+             'zh-CN': '表单提交'
+           },
+           title: '表单提交',
+           icon: 'hand-pointer-o',
+           component: LbpFormButton,
+           visible: true,
+           name: LbpFormButton.name,
+           type: LbpFormButton.name
+         },
+         {
+           i18nTitle: {
+             'en-US': 'Form Checkbox',
+             'zh-CN': '表单多选'
+           },
+           title: '表单多选',
+           icon: 'check-square-o',
+           component: LbpFormCheckboxGroup,
+           visible: true,
+           name: LbpFormCheckboxGroup.name,
+           type: LbpFormCheckboxGroup.name
+         },
+         {
+           i18nTitle: {
+             'en-US': 'Form Radio',
+             'zh-CN': '表单单选'
+           },
+           title: '表单单选',
+           icon: 'dot-circle-o',
+           component: LbpFormRadioGroup,
+           visible: true,
+           name: LbpFormRadioGroup.name,
+           type: LbpFormRadioGroup.name
+         },
+         {
+           i18nTitle: {
+             'en-US': 'Background',
+             'zh-CN': '背景'
+           },
+           title: '背景',
+           icon: 'dot-circle-o',
+           component: LbpBackground,
+           visible: false,
+           name: LbpBackground.name,
+           type: LbpBackground.name
+         },
+         {
+           i18nTitle: {
+             'en-US': 'BgMusic',
+             'zh-CN': '背景音乐'
+           },
+           title: '背景音乐',
+           icon: 'music',
+           component: LbpBgMusic,
+           visible: true,
+           name: LbpBgMusic.name,
+           type: LbpBgMusic.name
+         },
+         {
+           i18nTitle: {
+             'en-US': 'Table(Default)',
+             'zh-CN': '默认表格'
+           },
+           icon: 'table',
+           component: LbpTable,
+           visible: true,
+           name: LbpTable.name,
+           type: LbpTable.name
+         },
+         {
+           i18nTitle: {
+             'en-US': 'Table(Stripe)',
+             'zh-CN': '(斑马线)表格'
+           },
+           icon: 'table',
+           component: LbpTable,
+           visible: true,
+           name: LbpTable.name,
+           type: LbpTable.name,
+           shortcutProps: {
+             theme: 'lbp-table-theme-stripe'
+           }
+         },
+         {
+           i18nTitle: {
+             'en-US': 'Table(LightBlue)',
+             'zh-CN': '(淡蓝色)表格'
+           },
+           icon: 'table',
+           component: LbpTable,
+           visible: true,
+           name: LbpTable.name,
+           type: LbpTable.name,
+           shortcutProps: {
+             theme: 'lbp-table-theme-light-blue'
+           }
+         },
+         {
+           i18nTitle: {
+             'en-US': 'NewsList',
+             'zh-CN': '新闻列表'
+           },
+           title: '新闻列表',
+           icon: 'list',
+           component: LbpNewsList,
+           visible: true,
+           name: LbpNewsList.name,
+           type: LbpNewsList.name
+         }
+       ]
 
 export default {
   data: () => ({
diff --git a/front-end/h5/src/components/core/store/modules/data-source.js b/front-end/h5/src/components/core/store/modules/data-source.js
index 8dcd976e..2a76dcb5 100644
--- a/front-end/h5/src/components/core/store/modules/data-source.js
+++ b/front-end/h5/src/components/core/store/modules/data-source.js
@@ -21,7 +21,7 @@ export const actions = {
       })
     }
 
-    function updateDs(ds) {
+    function updateDs (ds) {
       const targetDsIdx = state.work.datasources.findIndex(item => item.id === ds.id)
       state.work.datasources.splice(targetDsIdx, 1, new Datasource(ds))
     }
@@ -104,6 +104,6 @@ export const mutations = {
       return new Page(page)
     })
     state.dataSource = new Datasource(dataSource)
-  },
+  }
 
 }
diff --git a/front-end/h5/src/components/core/store/modules/editor.js b/front-end/h5/src/components/core/store/modules/editor.js
index 78fc4961..c898ef1a 100644
--- a/front-end/h5/src/components/core/store/modules/editor.js
+++ b/front-end/h5/src/components/core/store/modules/editor.js
@@ -18,7 +18,8 @@ const state = {
   },
   workTemplates: [],
   scaleRate: 1,
-  scripts: []
+  scripts: [],
+  startType: ''
 }
 
 // getters
diff --git a/front-end/h5/src/components/core/store/modules/element.js b/front-end/h5/src/components/core/store/modules/element.js
index 3b3a2143..3cb6d863 100644
--- a/front-end/h5/src/components/core/store/modules/element.js
+++ b/front-end/h5/src/components/core/store/modules/element.js
@@ -66,6 +66,9 @@ export const mutations = {
     const len = elements.length
 
     switch (type) {
+      case 'setStartType':
+        state.startType = value
+        break
       case 'add':
         const vm = getVM(value.name)
         const basicElement = vm.$options
diff --git a/front-end/h5/src/components/core/styles/canvas-wrapper.scss b/front-end/h5/src/components/core/styles/canvas-wrapper.scss
index e88435de..c21db9b1 100644
--- a/front-end/h5/src/components/core/styles/canvas-wrapper.scss
+++ b/front-end/h5/src/components/core/styles/canvas-wrapper.scss
@@ -12,12 +12,13 @@ $designerWidthHalf: math.div($designerWidth, 2);
 .canvas-wrapper {
   position: relative;
   top: 60px;
-  width: $designerWidth;
+  // width: $designerWidth;
   // height: $designerHeight;
   min-height: $designerHeight;
   margin: 0 auto;
   background: #fff;
   border: 1px solid #e7e7e7;
+  height: calc(100vh - 64px);
 
   .edit-mode {
     // box-shadow: 0 0 0 1px #d9d9d9;
diff --git a/front-end/h5/src/components/core/support/index.js b/front-end/h5/src/components/core/support/index.js
index e13985ee..48fc0107 100644
--- a/front-end/h5/src/components/core/support/index.js
+++ b/front-end/h5/src/components/core/support/index.js
@@ -19,6 +19,7 @@ import VideoGallery from './video-gallery/gallery.js'
 import LbsExcelEditor from './excel'
 import ColorsPanel from './colors-panel'
 import LbpTextAlign from '@luban-h5/lbs-text-align'
+// eslint-disable-next-line no-unused-vars
 import tinymce from 'tinymce/tinymce'
 import 'tinymce/themes/silver/theme.min.js'
 import 'tinymce/skins/ui/oxide/skin.min.css'
diff --git a/front-end/h5/vue.config.js b/front-end/h5/vue.config.js
index 84a4e2da..0cca2e38 100644
--- a/front-end/h5/vue.config.js
+++ b/front-end/h5/vue.config.js
@@ -64,7 +64,7 @@ module.exports = {
   outputDir: page.outputDir,
   publicPath: page.publicPath,
   lintOnSave: process.env.NODE_ENV !== 'production',
-  productionSourceMap: process.env.NODE_ENV !== 'production',
+  // productionSourceMap: process.env.NODE_ENV !== 'production',
   pages: { index: page },
   devServer: {
     proxy: {
diff --git a/front-end/h5/yarn.lock b/front-end/h5/yarn.lock
index 5efa511a..68b773fe 100644
--- a/front-end/h5/yarn.lock
+++ b/front-end/h5/yarn.lock
@@ -337,9 +337,9 @@
     "@babel/helper-plugin-utils" "^7.14.5"
     "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
 
-"@babel/plugin-proposal-optional-chaining@^7.12.16":
+"@babel/plugin-proposal-optional-chaining@^7.14.5":
   version "7.14.5"
-  resolved "https://registry.nlark.com/@babel/plugin-proposal-optional-chaining/download/@babel/plugin-proposal-optional-chaining-7.14.5.tgz#fa83651e60a360e3f13797eef00b8d519695b603"
+  resolved "http://npm.amh-group.com/@babel%2fplugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.14.5.tgz#fa83651e60a360e3f13797eef00b8d519695b603"
   integrity sha1-+oNlHmCjYOPxN5fu8AuNUZaVtgM=
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
@@ -9948,6 +9948,11 @@ sort-keys@^1.0.0:
   dependencies:
     is-plain-obj "^1.0.0"
 
+sortablejs@1.10.2:
+  version "1.10.2"
+  resolved "https://registry.nlark.com/sortablejs/download/sortablejs-1.10.2.tgz#6e40364d913f98b85a14f6678f92b5c1221f5290"
+  integrity sha1-bkA2TZE/mLhaFPZnj5K1wSIfUpA=
+
 source-list-map@^2.0.0:
   version "2.0.1"
   resolved "https://registry.npm.taobao.org/source-list-map/download/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
@@ -11165,6 +11170,13 @@ vue@^2.6.10:
   resolved "https://registry.nlark.com/vue/download/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"
   integrity sha1-5RqlJQJQ1Wmj+606ilpofWA24jU=
 
+vuedraggable@^2.24.3:
+  version "2.24.3"
+  resolved "https://registry.nlark.com/vuedraggable/download/vuedraggable-2.24.3.tgz#43c93849b746a24ce503e123d5b259c701ba0d19"
+  integrity sha1-Q8k4SbdGokzlA+Ej1bJZxwG6DRk=
+  dependencies:
+    sortablejs "1.10.2"
+
 vuex@^3.0.1:
   version "3.6.2"
   resolved "https://registry.nlark.com/vuex/download/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"