From 9a7a2573ced192793e8d0c90d9ae09c3587a4ba4 Mon Sep 17 00:00:00 2001
From: vdpAdmin <vdpadmin@163.com>
Date: Mon, 25 Oct 2021 14:18:13 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=BA=8C=E6=AC=A1=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91=E7=BB=84=E4=BB=B6=E7=A4=BA=E4=BE=8B=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/form-designer/designer.js      |  26 +--
 .../container-widget/container-wrapper.vue    |   5 +-
 .../container-widget/grid-col-widget.vue      |  12 +-
 .../form-widget/container-widget/index.js     |  14 ++
 .../container-widget/tab-widget.vue           |   2 -
 .../container-widget/table-cell-widget.vue    |   2 -
 .../form-widget/field-widget/fieldMixin.js    |   3 +-
 .../field-widget/form-item-wrapper.vue        |   2 +-
 .../field-widget/static-content-wrapper.vue   |   8 +-
 .../form-designer/form-widget/index.vue       |   3 +-
 src/components/form-designer/index.vue        |   5 +-
 .../setting-panel/property-editor-factory.js  | 173 ++++++++++++++++++
 .../grid-col-offset-editor.vue                |  24 +++
 .../grid-col-pull-editor.vue                  |  24 +++
 .../grid-col-push-editor.vue                  |  24 +++
 .../event-handler/eventMixin.js               |   9 +-
 .../field-switch/activeColor-editor.vue       |  23 +++
 .../field-switch/activeText-editor.vue        |   4 +-
 .../field-switch/inactiveText-editor.vue      |  23 +++
 .../switch-defaultValue-editor.vue            |   6 +-
 .../property-editor/name-editor.vue           |   2 +-
 .../setting-panel/propertyRegister.js         |  26 ++-
 .../form-designer/toolbar-panel/index.vue     |   9 +-
 .../form-designer/widget-panel/index.vue      |  24 ++-
 .../widget-panel/widgetsConfig.js             |  61 ++++++
 .../container-item/grid-col-item.vue          |   5 +-
 .../form-render/container-item/index.js       |  14 ++
 .../form-render/container-item/tab-item.vue   |   2 -
 .../container-item/table-cell-item.vue        |   4 +-
 src/components/form-render/index.vue          |   3 +-
 src/components/v-table/index.vue              | 106 +++++++++++
 src/extension/extension-helper.js             |  23 +++
 src/extension/extension-loader.js             |  97 ++++++++++
 src/extension/samples/alert/alert-widget.vue  |  72 ++++++++
 src/extension/samples/card/card-item.vue      |  66 +++++++
 src/extension/samples/card/card-widget.vue    |  83 +++++++++
 src/extension/samples/extension-schema.js     |  34 ++++
 src/icons/svg/alert.svg                       |   1 +
 src/icons/svg/card.svg                        |   1 +
 src/icons/svg/data-table.svg                  |   1 +
 src/lang/en-US.js                             |  10 +-
 src/lang/en-US_extension.js                   |  19 ++
 src/lang/zh-CN.js                             |   8 +-
 src/lang/zh-CN_extension.js                   |  19 ++
 src/main.js                                   |   3 +
 src/utils/i18n.js                             |  11 +-
 46 files changed, 1006 insertions(+), 90 deletions(-)
 create mode 100644 src/components/form-designer/setting-panel/property-editor-factory.js
 create mode 100644 src/components/form-designer/setting-panel/property-editor/container-grid-col/grid-col-offset-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/container-grid-col/grid-col-pull-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/container-grid-col/grid-col-push-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-switch/activeColor-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-switch/inactiveText-editor.vue
 create mode 100644 src/components/v-table/index.vue
 create mode 100644 src/extension/extension-helper.js
 create mode 100644 src/extension/extension-loader.js
 create mode 100644 src/extension/samples/alert/alert-widget.vue
 create mode 100644 src/extension/samples/card/card-item.vue
 create mode 100644 src/extension/samples/card/card-widget.vue
 create mode 100644 src/extension/samples/extension-schema.js
 create mode 100644 src/icons/svg/alert.svg
 create mode 100644 src/icons/svg/card.svg
 create mode 100644 src/icons/svg/data-table.svg

diff --git a/src/components/form-designer/designer.js b/src/components/form-designer/designer.js
index 900875e..1116ab6 100644
--- a/src/components/form-designer/designer.js
+++ b/src/components/form-designer/designer.js
@@ -7,8 +7,8 @@
  */
 
 import {deepClone, generateId, overwriteObj} from "@/utils/util"
-import {advancedFields, basicFields, containers} from "@/components/form-designer/widget-panel/widgetsConfig.js";
-import {VARIANT_FORM_VERSION} from "@/utils/config";
+import {containers, advancedFields, basicFields, customFields} from "@/components/form-designer/widget-panel/widgetsConfig.js"
+import {VARIANT_FORM_VERSION} from "@/utils/config"
 
 export function createDesigner(vueInstance) {
   let defaultFormConfig = {
@@ -443,9 +443,10 @@ export function createDesigner(vueInstance) {
     },
 
     getContainerByType(typeName) {
+      let allWidgets = [...containers, ...basicFields, ...advancedFields, ...customFields]
       let foundCon = null
-      containers.forEach(con => {
-        if (!!con.type && (con.type === typeName)) {
+      allWidgets.forEach(con => {
+        if (!!con.category && !!con.type && (con.type === typeName)) {
           foundCon = con
         }
       })
@@ -454,20 +455,11 @@ export function createDesigner(vueInstance) {
     },
 
     getFieldWidgetByType(typeName) {
+      let allWidgets = [...containers, ...basicFields, ...advancedFields, ...customFields]
       let foundWidget = null
-      basicFields.forEach(bf => {
-        if (!!bf.type && (bf.type === typeName)) {
-          foundWidget = bf
-        }
-      })
-
-      if (!!foundWidget) {
-        return foundWidget
-      }
-
-      advancedFields.forEach(af => {
-        if (!!af.type && (af.type === typeName)) {
-          foundWidget = af
+      allWidgets.forEach(widget => {
+        if (!!!widget.category && !!widget.type && (widget.type === typeName)) {
+          foundWidget = widget
         }
       })
 
diff --git a/src/components/form-designer/form-widget/container-widget/container-wrapper.vue b/src/components/form-designer/form-widget/container-widget/container-wrapper.vue
index 40c5e08..9fc3bfd 100644
--- a/src/components/form-designer/form-widget/container-widget/container-wrapper.vue
+++ b/src/components/form-designer/form-widget/container-widget/container-wrapper.vue
@@ -30,7 +30,8 @@
 
     <div class="drag-handler" v-if="designer.selectedId === widget.id && !widget.internal">
       <i class="el-icon-rank" :title="i18nt('designer.hint.dragHandler')"></i>
-      <i>{{i18nt('designer.widgetLabel.' + widget.type)}}</i>
+      <i>{{i18n2t(`designer.widgetLabel.${widget.type}`, `extension.widgetLabel.${widget.type}`)}}</i>
+      <i v-if="widget.options.hidden === true" class="iconfont icon-hide"></i>
     </div>
   </div>
 </template>
@@ -79,7 +80,7 @@
       position: absolute;
       top: -2px;
       //bottom: -24px;  /* 拖拽手柄位于组件下方，有时无法正常拖动，原因未明？？ */
-      left: -6px;
+      left: -2px;
       height: 22px;
       line-height: 22px;
       background: $--color-primary;
diff --git a/src/components/form-designer/form-widget/container-widget/grid-col-widget.vue b/src/components/form-designer/form-widget/container-widget/grid-col-widget.vue
index 4c7b79a..288ebf7 100644
--- a/src/components/form-designer/form-widget/container-widget/grid-col-widget.vue
+++ b/src/components/form-designer/form-widget/container-widget/grid-col-widget.vue
@@ -1,5 +1,6 @@
 <template>
   <el-col v-else-if="widget.type === 'grid-col'" class="grid-cell" :span="widget.options.span || 12"
+          :offset="widget.options.offset || 0" :push="widget.options.push || 0" :pull="widget.options.pull || 0"
           :class="[selected ? 'selected' : '', customClass]"
           :key="widget.id" @click.native.stop="selectWidget(widget)">
     <draggable :list="widget.widgetList" v-bind="{group:'dragGroup', ghostClass: 'ghost',animation: 200}"
@@ -40,7 +41,6 @@
 <script>
   import Draggable from 'vuedraggable'
   import i18n from "@/utils/i18n";
-  import ContainerComponents from '@/components/form-designer/form-widget/container-widget/index'
   import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
 
   export default {
@@ -49,7 +49,6 @@
     mixins: [i18n],
     components: {
       Draggable,
-      ...ContainerComponents,
       ...FieldComponents,
     },
     props: {
@@ -150,11 +149,8 @@
 <style lang="scss" scoped>
   .grid-cell {
     min-height: 38px;
-    //line-height: 36px;
-    margin: 6px 0;
+    //margin: 6px 0;  /* 设置了margin，栅格列的offset、push、pull会失效！！ */
     padding: 3px;
-    //min-height: 300px;
-    //border-right: 1px dotted #cccccc;
     outline: 1px dashed #336699;
     position: relative;
 
@@ -164,7 +160,6 @@
 
     .grid-col-action{
       position: absolute;
-      //bottom: -30px;
       bottom: 0;
       right: -2px;
       height: 28px;
@@ -183,7 +178,6 @@
     .grid-col-handler {
       position: absolute;
       top: -2px;
-      //bottom: -24px;  /* 拖拽手柄位于组件下方，有时无法正常拖动，原因未明？？ */
       left: -2px;
       height: 22px;
       line-height: 22px;
@@ -195,7 +189,7 @@
         font-style: normal;
         color: #fff;
         margin: 4px;
-        cursor: default;  //cursor: move;
+        cursor: default;
       }
     }
   }
diff --git a/src/components/form-designer/form-widget/container-widget/index.js b/src/components/form-designer/form-widget/container-widget/index.js
index 9e0f6ae..79f6d00 100644
--- a/src/components/form-designer/form-widget/container-widget/index.js
+++ b/src/components/form-designer/form-widget/container-widget/index.js
@@ -1,5 +1,11 @@
+import Vue from 'vue'
+
 const requireComponent = require.context('./', false, /\w+\.vue$/)
 
+/**
+ * 容器组件时递归组件，且内部可以嵌套其他容器，局部注册会找不到组件，必须注册为全局组件，原因不明？！
+ * begin
+ *
 let comps = {}
 
 requireComponent.keys().map(fileName => {
@@ -8,3 +14,11 @@ requireComponent.keys().map(fileName => {
 })
 
 export default comps;
+
+end */
+
+/* 全局注册！！ */
+requireComponent.keys().map(fileName => {
+  let comp = requireComponent(fileName).default;
+  Vue.component(comp.name, comp)
+})
diff --git a/src/components/form-designer/form-widget/container-widget/tab-widget.vue b/src/components/form-designer/form-widget/container-widget/tab-widget.vue
index ac8b9fe..ba48b39 100644
--- a/src/components/form-designer/form-widget/container-widget/tab-widget.vue
+++ b/src/components/form-designer/form-widget/container-widget/tab-widget.vue
@@ -48,7 +48,6 @@
   import i18n from "@/utils/i18n"
   import containerMixin from "@/components/form-designer/form-widget/container-widget/containerMixin"
   import ContainerWrapper from "@/components/form-designer/form-widget/container-widget/container-wrapper"
-  import ContainerComponents from '@/components/form-designer/form-widget/container-widget/index'
   import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
 
   export default {
@@ -59,7 +58,6 @@
       ContainerWrapper,
       Draggable,
 
-      ...ContainerComponents,
       ...FieldComponents,
     },
     props: {
diff --git a/src/components/form-designer/form-widget/container-widget/table-cell-widget.vue b/src/components/form-designer/form-widget/container-widget/table-cell-widget.vue
index a7113aa..f596c6d 100644
--- a/src/components/form-designer/form-widget/container-widget/table-cell-widget.vue
+++ b/src/components/form-designer/form-widget/container-widget/table-cell-widget.vue
@@ -54,7 +54,6 @@
 <script>
   import Draggable from 'vuedraggable'
   import i18n from "@/utils/i18n"
-  import ContainerComponents from '@/components/form-designer/form-widget/container-widget/index'
   import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
 
   export default {
@@ -63,7 +62,6 @@
     mixins: [i18n],
     components: {
       Draggable,
-      ...ContainerComponents,
       ...FieldComponents,
     },
     props: {
diff --git a/src/components/form-designer/form-widget/field-widget/fieldMixin.js b/src/components/form-designer/form-widget/field-widget/fieldMixin.js
index d6f1c1d..09e9bdd 100644
--- a/src/components/form-designer/form-widget/field-widget/fieldMixin.js
+++ b/src/components/form-designer/form-widget/field-widget/fieldMixin.js
@@ -1,4 +1,5 @@
-import {deepClone} from "@/utils/util";
+import {deepClone} from "@/utils/util"
+import FormValidators from '@/utils/validators'
 
 export default {
   inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
diff --git a/src/components/form-designer/form-widget/field-widget/form-item-wrapper.vue b/src/components/form-designer/form-widget/field-widget/form-item-wrapper.vue
index b349931..08a4572 100644
--- a/src/components/form-designer/form-widget/field-widget/form-item-wrapper.vue
+++ b/src/components/form-designer/form-widget/field-widget/form-item-wrapper.vue
@@ -48,7 +48,7 @@
 
       <div class="drag-handler background-opacity" v-if="designer.selectedId === field.id">
         <i class="el-icon-rank" :title="i18nt('designer.hint.dragHandler')"></i>
-        <i>{{i18nt('designer.widgetLabel.' + field.type)}}</i>
+        <i>{{i18n2t(`designer.widgetLabel.${field.type}`, `extension.widgetLabel.${field.type}`)}}</i>
         <i v-if="field.options.hidden === true" class="iconfont icon-hide"></i>
       </div>
     </template>
diff --git a/src/components/form-designer/form-widget/field-widget/static-content-wrapper.vue b/src/components/form-designer/form-widget/field-widget/static-content-wrapper.vue
index 6000353..02f7363 100644
--- a/src/components/form-designer/form-widget/field-widget/static-content-wrapper.vue
+++ b/src/components/form-designer/form-widget/field-widget/static-content-wrapper.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="field-wrapper" :class="{'design-time-bottom-margin': !!this.designer}">
     <div class="static-content-item" v-show="!field.options.hidden || (designState === true)"
-         :class="{'selected': selected}" @click.stop="selectField(field)">
+         :class="[selected ? 'selected' : '', customClass]" @click.stop="selectField(field)">
       <slot></slot>
     </div>
 
@@ -17,7 +17,7 @@
 
       <div class="drag-handler background-opacity" v-if="designer.selectedId === field.id">
         <i class="el-icon-rank" :title="i18nt('designer.hint.dragHandler')"></i>
-        <i>{{i18nt('designer.widgetLabel.' + field.type)}}</i>
+        <i>{{i18n2t(`designer.widgetLabel.${field.type}`, `extension.widgetLabel.${field.type}`)}}</i>
         <i v-if="field.options.hidden === true" class="iconfont icon-hide"></i>
       </div>
     </template>
@@ -60,6 +60,10 @@
         return !!this.designer && this.field.id === this.designer.selectedId
       },
 
+      customClass() {
+        return !!this.field.options.customClass ? this.field.options.customClass.join(' ') : ''
+      },
+
     },
     methods: {
 
diff --git a/src/components/form-designer/form-widget/index.vue b/src/components/form-designer/form-widget/index.vue
index 527ea24..f9df19b 100644
--- a/src/components/form-designer/form-widget/index.vue
+++ b/src/components/form-designer/form-widget/index.vue
@@ -29,7 +29,7 @@
 
 <script>
   import Draggable from 'vuedraggable'
-  import ContainerComponents from '@/components/form-designer/form-widget/container-widget/index'
+  import '@/components/form-designer/form-widget/container-widget/index'
   import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
   import i18n from "@/utils/i18n"
 
@@ -40,7 +40,6 @@
     components: {
       Draggable,
 
-      ...ContainerComponents,
       ...FieldComponents,
     },
     props: {
diff --git a/src/components/form-designer/index.vue b/src/components/form-designer/index.vue
index 56bd118..9ed0b5c 100644
--- a/src/components/form-designer/index.vue
+++ b/src/components/form-designer/index.vue
@@ -9,7 +9,7 @@
 -->
 
 <template>
-  <el-container class="full-height">
+  <el-container class="main-container full-height">
     <el-header class="main-header">
       <div class="float-left main-title">
         <img src="../../assets/vform-logo.png" @click="openHome">
@@ -267,9 +267,10 @@
   }
 
   .el-header.toolbar-header {
+    font-size: 14px;
     border-bottom: 1px dotted #CCCCCC;
     height: 42px !important;
-    line-height: 42px !important;
+    //line-height: 42px !important;
   }
 
   .el-aside.side-panel {
diff --git a/src/components/form-designer/setting-panel/property-editor-factory.js b/src/components/form-designer/setting-panel/property-editor-factory.js
new file mode 100644
index 0000000..ea2b100
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor-factory.js
@@ -0,0 +1,173 @@
+import {translate} from "@/utils/i18n"
+import emitter from 'element-ui/lib/mixins/emitter'
+
+export const createInputTextEditor = function (propName, propLabelKey) {
+  return {
+    props: {
+      optionModel: Object,
+    },
+    render(h) {
+      return (
+        <el-form-item label={translate(propLabelKey)}>
+          <el-input type="text" v-model={this.optionModel[propName]} />
+        </el-form-item>
+      )
+    }
+  }
+}
+
+export const createInputNumberEditor = function (propName, propLabelKey) {
+  return {
+    props: {
+      optionModel: Object,
+    },
+    methods: {
+      updateValue(newValue) {
+        if ((newValue === undefined) || (newValue === null) || isNaN(newValue)) {
+          this.optionModel[propName] = null
+        } else {
+          this.optionModel[propName] = Number(newValue)
+        }
+      },
+    },
+    render(h) {
+      return (
+          <el-form-item label={translate(propLabelKey)}>
+            <el-input-number type="text" v-model={this.optionModel[propName]}
+                             onChange={this.updateValue} style="width: 100%" />
+          </el-form-item>
+      )
+    }
+  }
+}
+
+export const createBooleanEditor = function (propName, propLabelKey) {
+  return {
+    props: {
+      optionModel: Object,
+    },
+    render(h) {
+      return (
+        <el-form-item label={translate(propLabelKey)}>
+          <el-checkbox v-model={this.optionModel[propName]} />
+        </el-form-item>
+      )
+    }
+  }
+}
+
+export const createCheckboxGroupEditor = function (propName, propLabelKey, configs) {
+  return {
+    props: {
+      optionModel: Object,
+    },
+    render(h) {
+      return (
+        <el-form-item label={translate(propLabelKey)}>
+          <el-checkbox-group v-model={this.optionModel[propName]}>
+            {
+              configs.optionItems.map(item => {
+                return <el-checkbox label={item.value}>{item.label}</el-checkbox>
+              })
+            }
+          </el-checkbox-group>
+        </el-form-item>
+      )
+    }
+  }
+}
+
+
+export const createRadioGroupEditor = function (propName, propLabelKey, configs) {
+  return {
+    props: {
+      optionModel: Object,
+    },
+    render(h) {
+      return (
+        <el-form-item label={translate(propLabelKey)}>
+          <el-radio-group v-model={this.optionModel[propName]}>
+            {
+              configs.optionItems.map(item => {
+                return <el-radio label={item.value}>{item.label}</el-radio>
+              })
+            }
+          </el-radio-group>
+        </el-form-item>
+      )
+    }
+  }
+}
+
+export const createRadioButtonGroupEditor = function (propName, propLabelKey, configs) {
+  return {
+    props: {
+      optionModel: Object,
+    },
+    render(h) {
+      return (
+          <el-form-item label={translate(propLabelKey)}>
+            <el-radio-group v-model={this.optionModel[propName]}>
+              {
+                configs.optionItems.map(item => {
+                  return <el-radio-button label={item.value}>{item.label}</el-radio-button>
+                })
+              }
+            </el-radio-group>
+          </el-form-item>
+      )
+    }
+  }
+}
+
+export const createSelectEditor = function (propName, propLabelKey, configs) {
+  return {
+    props: {
+      optionModel: Object,
+    },
+    render(h) {
+      return (
+        <el-form-item label={translate(propLabelKey)}>
+          <el-select v-model={this.optionModel[propName]}>
+            {
+              configs.optionItems.map(item => {
+                return <el-option label={item.label} value={item.value} />
+              })
+            }
+          </el-select>
+        </el-form-item>
+      )
+    }
+  }
+}
+
+export const createEventHandlerEditor = function (eventPropName, eventParams) {
+  return {
+    props: {
+      optionModel: Object,
+    },
+    mixins: [emitter],
+    methods: {
+      editEventHandler() {
+        this.dispatch('SettingPanel', 'editEventHandler', [eventPropName, [...eventParams]])
+      },
+    },
+    render(h) {
+      return (
+        <el-form-item label={eventPropName} label-width="150px">
+            <el-button type="info" icon="el-icon-edit" plain round onClick={this.editEventHandler}>
+            {translate('designer.setting.addEventHandler')}</el-button>
+        </el-form-item>
+      )
+    }
+  }
+}
+
+export const createEmptyEditor = function () {
+  return {
+    render() {
+      return <div style="display: none" />
+    }
+  }
+}
+
diff --git a/src/components/form-designer/setting-panel/property-editor/container-grid-col/grid-col-offset-editor.vue b/src/components/form-designer/setting-panel/property-editor/container-grid-col/grid-col-offset-editor.vue
new file mode 100644
index 0000000..046818c
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/container-grid-col/grid-col-offset-editor.vue
@@ -0,0 +1,24 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.colOffsetTitle')">
+    <el-input-number v-model.number="optionModel.offset" :min="0" :max="24"
+                     style="width: 100%"></el-input-number>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n";
+
+  export default {
+    name: "grid-col-offset-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/container-grid-col/grid-col-pull-editor.vue b/src/components/form-designer/setting-panel/property-editor/container-grid-col/grid-col-pull-editor.vue
new file mode 100644
index 0000000..3cfb0c4
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/container-grid-col/grid-col-pull-editor.vue
@@ -0,0 +1,24 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.colPullTitle')">
+    <el-input-number v-model.number="optionModel.pull" :min="0" :max="24"
+                     style="width: 100%"></el-input-number>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n";
+
+  export default {
+    name: "grid-col-pull-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/container-grid-col/grid-col-push-editor.vue b/src/components/form-designer/setting-panel/property-editor/container-grid-col/grid-col-push-editor.vue
new file mode 100644
index 0000000..23d0815
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/container-grid-col/grid-col-push-editor.vue
@@ -0,0 +1,24 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.colPushTitle')">
+    <el-input-number v-model.number="optionModel.push" :min="0" :max="24"
+                     style="width: 100%"></el-input-number>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n";
+
+  export default {
+    name: "grid-col-push-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/event-handler/eventMixin.js b/src/components/form-designer/setting-panel/property-editor/event-handler/eventMixin.js
index b056222..ef86675 100644
--- a/src/components/form-designer/setting-panel/property-editor/event-handler/eventMixin.js
+++ b/src/components/form-designer/setting-panel/property-editor/event-handler/eventMixin.js
@@ -2,18 +2,11 @@ import emitter from 'element-ui/lib/mixins/emitter'
 
 export default {
   mixins: [emitter],
-  created() {
-    // this.$on('saveEventHandler', function (params) {
-    //   //this.optionModel[eventName] = handlerCodes
-    //   this.optionModel[params[0]] = params[1]
-    // })
-
-  },
+  created() {},
   methods: {
     editEventHandler(eventName, eventParams) {
       this.dispatch('SettingPanel', 'editEventHandler', [eventName, [...eventParams]])
     },
 
-
   }
 }
diff --git a/src/components/form-designer/setting-panel/property-editor/field-switch/activeColor-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-switch/activeColor-editor.vue
new file mode 100644
index 0000000..641bc94
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-switch/activeColor-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.activeColor')">
+    <el-color-picker v-model="optionModel.activeColor"></el-color-picker>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "activeColor-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-switch/activeText-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-switch/activeText-editor.vue
index ee05395..5c77879 100644
--- a/src/components/form-designer/setting-panel/property-editor/field-switch/activeText-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/field-switch/activeText-editor.vue
@@ -1,6 +1,6 @@
 <template>
-  <el-form-item :label="i18nt('designer.setting.activeColor')">
-    <el-color-picker v-model="optionModel.activeColor"></el-color-picker>
+  <el-form-item :label="i18nt('designer.setting.activeText')">
+    <el-input v-model="optionModel.activeText"></el-input>
   </el-form-item>
 </template>
 
diff --git a/src/components/form-designer/setting-panel/property-editor/field-switch/inactiveText-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-switch/inactiveText-editor.vue
new file mode 100644
index 0000000..c37698a
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-switch/inactiveText-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.inactiveText')">
+    <el-input v-model="optionModel.inactiveText"></el-input>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "inactiveText-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-switch/switch-defaultValue-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-switch/switch-defaultValue-editor.vue
index 1cd9b67..08012b6 100644
--- a/src/components/form-designer/setting-panel/property-editor/field-switch/switch-defaultValue-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/field-switch/switch-defaultValue-editor.vue
@@ -1,6 +1,8 @@
 <template>
-  <el-switch v-model="optionModel.defaultValue" @change="emitDefaultValueChange"
-             active-text="true" inactive-text="false"></el-switch>
+  <el-form-item :label="i18nt('designer.setting.defaultValue')">
+    <el-switch v-model="optionModel.defaultValue" @change="emitDefaultValueChange"
+               active-text="true" inactive-text="false"></el-switch>
+  </el-form-item>
 </template>
 
 <script>
diff --git a/src/components/form-designer/setting-panel/property-editor/name-editor.vue b/src/components/form-designer/setting-panel/property-editor/name-editor.vue
index 73e9b3d..30fe888 100644
--- a/src/components/form-designer/setting-panel/property-editor/name-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/name-editor.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-form-item :label="i18nt('designer.setting.fieldName')" :rules="nameRequiredRule">
+  <el-form-item :label="i18nt('designer.setting.uniqueName')" :rules="nameRequiredRule">
     <el-input type="text" v-model="optionModel.name" @change="updateWidgetNameAndRef"></el-input>
   </el-form-item>
 </template>
diff --git a/src/components/form-designer/setting-panel/propertyRegister.js b/src/components/form-designer/setting-panel/propertyRegister.js
index 1e1c9f3..048d25d 100644
--- a/src/components/form-designer/setting-panel/propertyRegister.js
+++ b/src/components/form-designer/setting-panel/propertyRegister.js
@@ -1,7 +1,9 @@
+import Vue from 'vue'
+
 /**
  * 格式说明：属性名称==对应属性编辑器的组件名称
  */
-let COMMON_PROPERTIES = {
+const COMMON_PROPERTIES = {
   //字段
   'name'              :            'name-editor',
   'label'             :            'label-editor',
@@ -56,10 +58,13 @@ let COMMON_PROPERTIES = {
   'cellHeight'         :            'cellHeight-editor',
   'gutter'             :            'gutter-editor',
   'span'               :            'span-editor',
+  'offset'             :            'offset-editor',
+  'push'               :            'push-editor',
+  'pull'               :            'pull-editor',
 
 }
 
-let ADVANCED_PROPERTIES = {
+const ADVANCED_PROPERTIES = {
   'min'               :            'min-editor',
   'max'               :            'max-editor',
   'precision'         :            'precision-editor',
@@ -95,7 +100,7 @@ let ADVANCED_PROPERTIES = {
 
 }
 
-let EVENT_PROPERTIES = {
+const EVENT_PROPERTIES = {
   //字段
   'onCreated'         :            'onCreated-editor',
   'onMounted'         :            'onMounted-editor',
@@ -135,6 +140,21 @@ export function registerEventProperty(propName, propEditorName) {
   EVENT_PROPERTIES[propName] = propEditorName
 }
 
+export function registerCPEditor(propName, propEditorName, editorComponent) {
+  Vue.component(propEditorName, editorComponent)
+  registerCommonProperty(propName, propEditorName)
+}
+
+export function registerAPEditor(propName, propEditorName, editorComponent) {
+  Vue.component(propEditorName, editorComponent)
+  registerAdvancedProperty(propName, propEditorName)
+}
+
+export function registerEPEditor(propName, propEditorName, editorComponent) {
+  Vue.component(propEditorName, editorComponent)
+  registerEventProperty(propName, propEditorName)
+}
+
 export default {
   COMMON_PROPERTIES,
   ADVANCED_PROPERTIES,
diff --git a/src/components/form-designer/toolbar-panel/index.vue b/src/components/form-designer/toolbar-panel/index.vue
index 10cf0e4..e81ecf0 100644
--- a/src/components/form-designer/toolbar-panel/index.vue
+++ b/src/components/form-designer/toolbar-panel/index.vue
@@ -45,7 +45,7 @@
     <el-dialog :title="i18nt('designer.toolbar.importJson')" :visible.sync="showImportJsonDialogFlag"
                v-if="showImportJsonDialogFlag" :show-close="true" class="small-padding-dialog" center v-dialog-drag
                :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
-      <el-alert type="info" :title="i18nt('designer.hint.importJsonHint')" show-icon></el-alert>
+      <el-alert type="info" :title="i18nt('designer.hint.importJsonHint')" show-icon class="alert-padding"></el-alert>
       <code-editor :mode="'json'" :readonly="false" v-model="importTemplate"></code-editor>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="doJsonImport">
@@ -445,15 +445,15 @@
 
   .small-padding-dialog {
     ::v-deep .el-dialog__header {
-      padding-top: 3px;
-      padding-bottom: 3px;
+      //padding-top: 3px;
+      //padding-bottom: 3px;
       background: #f1f2f3;
     }
 
     ::v-deep .el-dialog__body {
       padding: 12px 15px 12px 15px;
 
-      .el-alert {
+      .el-alert.alert-padding {
         padding: 0 10px;
       }
     }
@@ -481,6 +481,7 @@
 
   .form-render-wrapper {
     //height: calc(100vh - 142px);
+    all: revert !important; /* 防止表单继承el-dialog等外部样式，未生效，原因不明？？ */
   }
 
   .form-render-wrapper.h5-layout {
diff --git a/src/components/form-designer/widget-panel/index.vue b/src/components/form-designer/widget-panel/index.vue
index 497bd56..caaea31 100644
--- a/src/components/form-designer/widget-panel/index.vue
+++ b/src/components/form-designer/widget-panel/index.vue
@@ -9,7 +9,7 @@
                      :move="checkContainerMove" @end="onContainerDragEnd">
             <li v-for="(ctn, index) in containers" :key="index" class="container-widget-item" :title="ctn.displayName"
                 @dblclick="addContainerByDbClick(ctn)">
-              <span><svg-icon :icon-class="ctn.icon" />{{i18nt(`designer.widgetLabel.${ctn.type}`)}}</span>
+              <span><svg-icon :icon-class="ctn.icon" />{{i18n2t(`designer.widgetLabel.${ctn.type}`, `extension.widgetLabel.${ctn.type}`)}}</span>
             </li>
           </draggable>
         </el-collapse-item>
@@ -19,7 +19,7 @@
                      :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
             <li v-for="(fld, index) in basicFields" :key="index" class="field-widget-item" :title="fld.displayName"
                 @dblclick="addFieldByDbClick(fld)">
-              <span><svg-icon :icon-class="fld.icon" />{{i18nt(`designer.widgetLabel.${fld.type}`)}}</span>
+              <span><svg-icon :icon-class="fld.icon" />{{i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)}}</span>
             </li>
           </draggable>
         </el-collapse-item>
@@ -29,22 +29,23 @@
                      :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
             <li v-for="(fld, index) in advancedFields" :key="index" class="field-widget-item" :title="fld.displayName"
                 @dblclick="addFieldByDbClick(fld)">
-              <span><svg-icon :icon-class="fld.icon" />{{i18nt(`designer.widgetLabel.${fld.type}`)}}</span>
+              <span><svg-icon :icon-class="fld.icon" />{{i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)}}</span>
             </li>
           </draggable>
         </el-collapse-item>
 
-        <!--
+        <!-- -->
         <el-collapse-item name="4" :title="i18nt('designer.customFieldTitle')">
           <draggable tag="ul" :list="customFields" :group="{name: 'dragGroup', pull: 'clone', put: false}"
                      :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
             <li v-for="(fld, index) in customFields" :key="index" class="field-widget-item" :title="fld.displayName"
                 @dblclick="addFieldByDbClick(fld)">
-              <span :title="fld.displayName"><svg-icon :icon-class="fld.icon" />{{i18nt(`designer.widgetLabel.${fld.type}`)}}</span>
+              <span>
+                <svg-icon :icon-class="fld.icon" />{{i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)}}</span>
             </li>
           </draggable>
         </el-collapse-item>
-        -->
+        <!-- -->
 
       </el-collapse>
 
@@ -102,8 +103,7 @@
         this.containers = this.containers.map(con => {
           return {
             ...con,
-            //category: 'container',
-            displayName: this.i18nt(`designer.widgetLabel.${con.type}`)
+            displayName: this.i18n2t(`designer.widgetLabel.${con.type}`, `extension.widgetLabel.${con.type}`)
           }
         }).filter(con => {
           return !con.internal
@@ -112,25 +112,23 @@
         this.basicFields = this.basicFields.map(fld => {
           return {
             ...fld,
-            displayName: this.i18nt(`designer.widgetLabel.${fld.type}`)
+            displayName: this.i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)
           }
         })
 
         this.advancedFields = this.advancedFields.map(fld => {
           return {
             ...fld,
-            displayName: this.i18nt(`designer.widgetLabel.${fld.type}`)
+            displayName: this.i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)
           }
         })
 
-        ///*
         this.customFields = this.customFields.map(fld => {
           return {
             ...fld,
-            displayName: this.i18nt(`designer.widgetLabel.${fld.type}`)
+            displayName: this.i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)
           }
         })
-        //*/
       },
 
       handleContainerWidgetClone(origin) {
diff --git a/src/components/form-designer/widget-panel/widgetsConfig.js b/src/components/form-designer/widget-panel/widgetsConfig.js
index be26dd4..fbb77b5 100644
--- a/src/components/form-designer/widget-panel/widgetsConfig.js
+++ b/src/components/form-designer/widget-panel/widgetsConfig.js
@@ -62,6 +62,9 @@ export const containers = [
       name: '',
       hidden: false,
       span: 12,
+      offset: 0,
+      push: 0,
+      pull: 0,
       customClass: '',  //自定义css类名
     }
   },
@@ -99,6 +102,46 @@ export const containers = [
     }
   },
 
+  /*
+  {
+    type: 'data-table',
+    category: 'container',
+    icon: 'data-table',
+    options: {
+      name: '',
+      label: '',
+      hidden: false,
+      columns: {},
+      checkboxColumn: {
+        width: 45,
+      },
+      operationColumn: {
+        buttons: [
+          {label: 'Edit', name: '', type: '', plain: false, round: true, circle: false, disabled: false, hidden: false},
+          {label: 'View', name: '', type: '', plain: false, round: true, circle: false, disabled: false, hidden: false},
+          {label: 'Delete', name: '', type: '', plain: false, round: true, circle: false, disabled: false, hidden: false},
+          {label: 'More...', name: '', type: '', plain: false, round: true, circle: false, disabled: false, hidden: false},
+        ]
+      },
+      size: 'medium',
+      height: '100%',
+      maxHeight: '1200px',
+      stripe: false,
+      border: false,
+      fit: true,
+      highlightCurrentRow: false,
+      emptyText: 'no data',
+      showHeader: true,
+      showCheckBox: true,
+      showPager: false,
+      pagerPosition: 'center',
+      pagerSmall: false,
+      pagerBackground: false,
+      pagerCount: 7,
+    }
+  }
+  */
+
 ]
 
 export const basicFields = [
@@ -886,6 +929,7 @@ export const advancedFields = [
 ]
 
 export const customFields = [
+  /*
   {
     type: 'custom',
     icon: 'custom-component',
@@ -895,5 +939,22 @@ export const customFields = [
     type: 'slot',
     icon: 'slot-component',
   },
+  */
 
 ]
+
+export function addContainerWidgetSchema(containerSchema) {
+  containers.push(containerSchema)
+}
+
+export function addBasicFieldSchema(fieldSchema) {
+  basicFields.push(fieldSchema)
+}
+
+export function addAdvancedFieldSchema(fieldSchema) {
+  advancedFields.push(fieldSchema)
+}
+
+export function addCustomWidgetSchema(widgetSchema) {
+  customFields.push(widgetSchema)
+}
diff --git a/src/components/form-render/container-item/grid-col-item.vue b/src/components/form-render/container-item/grid-col-item.vue
index bf20f3b..d7e748a 100644
--- a/src/components/form-render/container-item/grid-col-item.vue
+++ b/src/components/form-render/container-item/grid-col-item.vue
@@ -1,5 +1,6 @@
 <template>
   <el-col class="grid-cell" :span="widget.options.span" :class="[customClass]"
+          :offset="widget.options.offset || 0" :push="widget.options.push || 0" :pull="widget.options.pull || 0"
           :key="widget.id" v-show="!widget.options.hidden">
     <template v-if="!!widget.widgetList && (widget.widgetList.length > 0)">
       <template v-for="(subWidget, swIdx) in widget.widgetList">
@@ -24,15 +25,13 @@
 <script>
   import i18n from "../../../utils/i18n"
   import refMixin from "../../../components/form-render/refMixin"
-  import ContainerItems from './index'
   import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
 
   export default {
     name: "GridColItem",
-    componentName: 'GridColItem',
+    componentName: 'ContainerItem',
     mixins: [i18n, refMixin],
     components: {
-      ...ContainerItems,
       ...FieldComponents,
     },
     props: {
diff --git a/src/components/form-render/container-item/index.js b/src/components/form-render/container-item/index.js
index 9e0f6ae..ac67666 100644
--- a/src/components/form-render/container-item/index.js
+++ b/src/components/form-render/container-item/index.js
@@ -1,5 +1,11 @@
+import Vue from "vue"
+
 const requireComponent = require.context('./', false, /\w+\.vue$/)
 
+/**
+ * 容器组件时递归组件，且内部可以嵌套其他容器，局部注册会找不到组件，必须注册为全局组件，原因不明？！
+ * begin
+ *
 let comps = {}
 
 requireComponent.keys().map(fileName => {
@@ -8,3 +14,11 @@ requireComponent.keys().map(fileName => {
 })
 
 export default comps;
+
+end */
+
+/* 全局注册！！ */
+requireComponent.keys().map(fileName => {
+  let comp = requireComponent(fileName).default;
+  Vue.component(comp.name, comp)
+})
diff --git a/src/components/form-render/container-item/tab-item.vue b/src/components/form-render/container-item/tab-item.vue
index 6b07cf6..feace4c 100644
--- a/src/components/form-render/container-item/tab-item.vue
+++ b/src/components/form-render/container-item/tab-item.vue
@@ -29,7 +29,6 @@
   import refMixin from "../../../components/form-render/refMixin"
   import ContainerItemWrapper from './container-item-wrapper'
   import containerItemMixin from "./containerItemMixin";
-  import ContainerItems from './index'
   import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
 
   export default {
@@ -38,7 +37,6 @@
     mixins: [emitter, i18n, refMixin, containerItemMixin],
     components: {
       ContainerItemWrapper,
-      ...ContainerItems,
       ...FieldComponents,
     },
     props: {
diff --git a/src/components/form-render/container-item/table-cell-item.vue b/src/components/form-render/container-item/table-cell-item.vue
index 99e33ba..0af8d89 100644
--- a/src/components/form-render/container-item/table-cell-item.vue
+++ b/src/components/form-render/container-item/table-cell-item.vue
@@ -18,15 +18,13 @@
 <script>
   import i18n from "../../../utils/i18n"
   import refMixin from "../../../components/form-render/refMixin"
-  import ContainerItems from './index'
   import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
 
   export default {
     name: "TableCellItem",
-    componentName: "TableCellItem",
+    componentName: "ContainerItem",
     mixins: [i18n, refMixin],
     components: {
-      ...ContainerItems,
       ...FieldComponents,
     },
     props: {
diff --git a/src/components/form-render/index.vue b/src/components/form-render/index.vue
index 133d1d7..6251e00 100644
--- a/src/components/form-render/index.vue
+++ b/src/components/form-render/index.vue
@@ -29,7 +29,7 @@
 <script>
   //import ElForm from 'element-ui/packages/form/src/form.vue'  /* 用于源码调试Element UI */
   import emitter from 'element-ui/lib/mixins/emitter'
-  import ContainerComponents from './container-item/index'
+  import './container-item/index'
   import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
   import {deepClone, insertCustomCssToHead, insertGlobalFunctionsToHtml} from "../../utils/util"
   import i18n, { changeLocale } from "../../utils/i18n"
@@ -41,7 +41,6 @@
     components: {
       //ElForm,
 
-      ...ContainerComponents,
       ...FieldComponents,
     },
     props: {
diff --git a/src/components/v-table/index.vue b/src/components/v-table/index.vue
new file mode 100644
index 0000000..371330d
--- /dev/null
+++ b/src/components/v-table/index.vue
@@ -0,0 +1,106 @@
+<template>
+  <el-container id="commonTable">
+    <el-main>
+      <el-table :data="data" :height="height" :max-height="maxHeight" border stripe tooltip-effect="light"
+                @selection-change="handleSelectionChange" :size="tableSize" :style="{width: tableWidth}">
+        <el-table-column v-if="showCheckBox" type="selection" width="45"></el-table-column>
+        <template v-for="(item, index) in columns">
+          <el-table-column
+                  v-if="item.show !== false"
+                  :key="index"
+                  :fixed="item.fixed"
+                  :prop="item.prop"
+                  :label="item.label"
+                  :align="item.align ? item.align:'center'"
+                  :width="item.width"
+                  :show-overflow-tooltip="true"
+                  :formatter="item.formatter ? item.formatter : formatterValue">
+          </el-table-column>
+        </template>
+        <slot name="table_operation"/>
+      </el-table>
+    </el-main>
+
+    <el-footer id="simpleTableFooter" v-if="showPager" style="height: 42px;padding-top: 6px; background: white">
+      <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              style="text-align: right;margin:0;"
+              :current-page="pagination.pageNo"
+              :page-size="pagination.limit"
+              :page-sizes="pagination.sizes"
+              :total="pagination.total"
+              layout="total, sizes, prev, pager, next, jumper">
+      </el-pagination>
+    </el-footer>
+  </el-container>
+</template>
+
+<script>
+  export default {
+    name: 'VTable',
+    props: {
+      tableWidth: [String, Number],
+      columns: Array,
+      data: Array,
+      showPager: {
+        type: Boolean,
+        default: true
+      },
+      showCheckBox: {
+        type: Boolean,
+        default: false
+      },
+      pagination: Object,
+      height: {
+        type: String,
+        default: "100%"
+      },
+      maxHeight: {
+        type: Number,
+        default: 2000
+      },
+      tableSize: {
+        type: String,
+        default: 'medium'
+      },
+    },
+    methods: {
+      handleSelectionChange(val) {
+        this.$emit('handleSelectionChange', val);
+      },
+      handleSizeChange(val) {
+        this.$emit('handleSizeChange', val);
+      },
+      handleCurrentChange(val) {
+        this.$emit('handleCurrentChange', val);
+      },
+      formatterValue(row, column, cellValue) {
+        return cellValue;
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+  .el-table {
+    // 解决table组件内容滚动时页面滚动条同步滚动
+    overflow: auto;
+    // 必须设置
+    position: relative;
+
+    ::v-deep .el-table__fixed-header-wrapper thead th > .cell {
+      white-space: nowrap !important;  /* 禁止表头换行 */
+    }
+
+    ::v-deep .el-table__header-wrapper thead th > .cell {
+      white-space: nowrap !important;  /* 禁止表头换行 */
+    }
+
+    ::v-deep .el-table__body-wrapper {
+      //height: 100% !important;
+    }
+  }
+
+</style>
diff --git a/src/extension/extension-helper.js b/src/extension/extension-helper.js
new file mode 100644
index 0000000..6f6c1f4
--- /dev/null
+++ b/src/extension/extension-helper.js
@@ -0,0 +1,23 @@
+import {
+  addContainerWidgetSchema,
+  addBasicFieldSchema,
+  addAdvancedFieldSchema,
+  addCustomWidgetSchema
+} from '@/components/form-designer/widget-panel/widgetsConfig'
+import {
+  registerCommonProperty,
+  registerAdvancedProperty,
+  registerEventProperty
+} from '@/components/form-designer/setting-panel/propertyRegister'
+
+
+export default {
+  addContainerWidgetSchema,
+  addBasicFieldSchema,
+  addAdvancedFieldSchema,
+  addCustomWidgetSchema,
+
+  registerCommonProperty,
+  registerAdvancedProperty,
+  registerEventProperty,
+}
diff --git a/src/extension/extension-loader.js b/src/extension/extension-loader.js
new file mode 100644
index 0000000..0248c41
--- /dev/null
+++ b/src/extension/extension-loader.js
@@ -0,0 +1,97 @@
+import Vue from 'vue'
+
+import {
+  addContainerWidgetSchema,
+  addCustomWidgetSchema
+} from '@/components/form-designer/widget-panel/widgetsConfig'
+import * as PERegister from '@/components/form-designer/setting-panel/propertyRegister'
+import * as PEFactory from '@/components/form-designer/setting-panel/property-editor-factory'
+
+import {cardSchema} from "@/extension/samples/extension-schema"
+import CardWidget from '@/extension/samples/card/card-widget'
+import CardItem from '@/extension/samples/card/card-item'
+
+import {alertSchema} from "@/extension/samples/extension-schema"
+import AlertWidget from '@/extension/samples/alert/alert-widget'
+
+
+export const loadExtension = function () {
+
+  /**
+   * 加载容器组件步骤：
+   * 1. 加载组件Json Schema;
+   * 2. 全局注册容器组件，容器组件有两种状态——设计期和运行期，故需要注册两个组件；
+   * 3. 全局注册属性编辑器组件（基本属性、高级属性、事件属性）；
+   * 4. 加载完毕。
+   */
+  addContainerWidgetSchema(cardSchema)  //加载组件Json Schema
+  /* -------------------------------------------------- */
+  Vue.component(CardWidget.name, CardWidget)  //设计期的容器组件
+  Vue.component(CardItem.name, CardItem)  //运行期的容器组件
+  /* -------------------------------------------------- */
+  PERegister.registerCPEditor('cardWidth', 'card-cardWidth-editor',
+      PEFactory.createInputTextEditor('cardWidth', 'extension.setting.cardWidth'))
+
+  let shadowOptions = [
+    {label: 'never', value: 'never'},
+    {label: 'hover', value: 'hover'},
+    {label: 'always', value: 'always'},
+  ]
+  PERegister.registerCPEditor('shadow', 'card-shadow-editor',
+      PEFactory.createSelectEditor('shadow', 'extension.setting.cardShadow',
+          {optionItems: shadowOptions}))
+  /* -------------------------------------------------- */
+  /* 容器组件加载完毕 end */
+
+  /**
+   * 加载字段组件步骤：
+   * 1. 加载组件Json Schema;
+   * 2. 全局注册字段组件，字段组件设计期和运行期共用，故需要仅需注册一个组件；
+   * 3. 全局注册属性编辑器组件（基本属性、高级属性、事件属性）；
+   * 4. 加载完毕。
+   */
+  addCustomWidgetSchema(alertSchema)  //加载组件Json Schema
+  /* -------------------------------------------------- */
+  Vue.component(AlertWidget.name, AlertWidget)  //注册组件
+  /* -------------------------------------------------- */
+  PERegister.registerCPEditor('title', 'alert-title-editor',
+      PEFactory.createInputTextEditor('title', 'extension.setting.alertTitle'))
+
+  let typeOptions = [
+    {label: 'success', value: 'success'},
+    {label: 'warning', value: 'warning'},
+    {label: 'info', value: 'info'},
+    {label: 'error', value: 'error'},
+  ]
+  PERegister.registerCPEditor('type', 'alert-type-editor',
+      PEFactory.createSelectEditor('type', 'extension.setting.alertType',
+          {optionItems: typeOptions}))
+
+  PERegister.registerCPEditor('description', 'alert-description-editor',
+      PEFactory.createInputTextEditor('description', 'extension.setting.description'))
+
+  PERegister.registerCPEditor('closable', 'alert-closable-editor',
+      PEFactory.createBooleanEditor('closable', 'extension.setting.closable'))
+
+  PERegister.registerCPEditor('closeText', 'alert-closeText-editor',
+      PEFactory.createInputTextEditor('closeText', 'extension.setting.closeText'))
+
+  PERegister.registerCPEditor('center', 'alert-center-editor',
+      PEFactory.createBooleanEditor('center', 'extension.setting.center'))
+
+  PERegister.registerCPEditor('showIcon', 'alert-showIcon-editor',
+      PEFactory.createBooleanEditor('showIcon', 'extension.setting.showIcon'))
+
+  let effectOptions = [
+    {label: 'light', value: 'light'},
+    {label: 'dark', value: 'dark'},
+  ]
+  PERegister.registerCPEditor('effect', 'alert-effect-editor',
+      PEFactory.createRadioButtonGroupEditor('effect', 'extension.setting.effect',
+          {optionItems: effectOptions}))
+
+  PERegister.registerEPEditor('onClose', 'alert-onClose-editor',
+      PEFactory.createEventHandlerEditor('onClose', []))
+  /* -------------------------------------------------- */
+  /* 字段组件加载完毕 end */
+}
diff --git a/src/extension/samples/alert/alert-widget.vue b/src/extension/samples/alert/alert-widget.vue
new file mode 100644
index 0000000..1c4a0f0
--- /dev/null
+++ b/src/extension/samples/alert/alert-widget.vue
@@ -0,0 +1,72 @@
+<template>
+  <static-content-wrapper :designer="designer" :field="field" :design-state="designState"
+                          :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
+                          :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
+    <el-alert ref="fieldEditor" :title="field.options.title" :type="field.options.type"
+              :description="field.options.description" :closable="field.options.closable"
+              :center="field.options.center" :close-text="field.options.closeText"
+              :show-icon="field.options.showIcon" :effect="field.options.effect" @close="handelCloseCustomEvent"></el-alert>
+  </static-content-wrapper>
+</template>
+
+<script>
+  import StaticContentWrapper from '@/components/form-designer/form-widget/field-widget/static-content-wrapper'
+  import emitter from 'element-ui/lib/mixins/emitter'
+  import i18n from "@/utils/i18n"
+  import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin"
+
+  export default {
+    name: "alert-widget",
+    componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
+    mixins: [emitter, fieldMixin, i18n],
+    props: {
+      field: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+
+      designState: {
+        type: Boolean,
+        default: false
+      },
+
+      subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
+        type: String,
+        default: ''
+      },
+
+    },
+    components: {
+      StaticContentWrapper,
+    },
+    created() {
+      this.registerToRefList()
+      this.initEventHandler()
+    },
+    beforeDestroy() {
+      this.unregisterFromRefList()
+    },
+    methods: {
+      handelCloseCustomEvent() {
+        if (!!this.field.options.onClose) {
+          let changeFn = new Function(this.field.options.onClose)
+          changeFn.call(this)
+        }
+      }
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/extension/samples/card/card-item.vue b/src/extension/samples/card/card-item.vue
new file mode 100644
index 0000000..7039320
--- /dev/null
+++ b/src/extension/samples/card/card-item.vue
@@ -0,0 +1,66 @@
+<template>
+  <container-item-wrapper>
+    <el-card :key="widget.id" class="card-container" :class="[customClass]"
+             :shadow="widget.options.shadow" :style="{width: widget.options.cardWidth + '!important' || ''}"
+             :ref="widget.id" v-show="!widget.options.hidden">
+      <div slot="header"><span>{{widget.options.label}}</span></div>
+      <template v-if="!!widget.widgetList && (widget.widgetList.length > 0)">
+        <template v-for="(subWidget, swIdx) in widget.widgetList">
+          <template v-if="'container' === subWidget.category">
+            <component :is="subWidget.type + '-item'" :widget="subWidget" :key="swIdx" :parent-list="widget.widgetList"
+                       :index-of-parent-list="swIdx" :parent-widget="widget"></component>
+          </template>
+          <template v-else>
+            <component :is="subWidget.type + '-widget'" :field="subWidget" :designer="null" :key="swIdx" :parent-list="widget.widgetList"
+                       :index-of-parent-list="swIdx" :parent-widget="widget"></component>
+          </template>
+        </template>
+      </template>
+    </el-card>
+  </container-item-wrapper>
+</template>
+
+<script>
+  import emitter from 'element-ui/lib/mixins/emitter'
+  import i18n from "@/utils/i18n"
+  import refMixin from "@/components/form-render/refMixin"
+  import ContainerItemWrapper from '@/components/form-render/container-item/container-item-wrapper'
+  import containerItemMixin from "@/components/form-render/container-item/containerItemMixin"
+  import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
+
+  export default {
+    name: "card-item",
+    componentName: 'ContainerItem',
+    mixins: [emitter, i18n, refMixin, containerItemMixin],
+    components: {
+      ContainerItemWrapper,
+      ...FieldComponents,
+    },
+    props: {
+      widget: Object,
+    },
+    inject: ['refList', 'sfRefList', 'globalModel'],
+    computed: {
+      customClass() {
+        return this.widget.options.customClass || ''
+      },
+
+    },
+    created() {
+      this.initRefList()
+    },
+    beforeDestroy() {
+      this.unregisterFromRefList()
+    },
+    methods: {
+
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  ::v-deep .el-card__header {
+    padding: 10px 12px;
+  }
+
+</style>
diff --git a/src/extension/samples/card/card-widget.vue b/src/extension/samples/card/card-widget.vue
new file mode 100644
index 0000000..186d620
--- /dev/null
+++ b/src/extension/samples/card/card-widget.vue
@@ -0,0 +1,83 @@
+<template>
+  <container-wrapper :designer="designer" :widget="widget" :parent-widget="parentWidget" :parent-list="parentList"
+                     :index-of-parent-list="indexOfParentList">
+    <el-card :key="widget.id" class="card-container" @click.native.stop="selectWidget(widget)"
+             :shadow="widget.options.shadow" :style="{width: widget.options.cardWidth + '!important' || ''}"
+             :class="[selected ? 'selected' : '', customClass]">
+      <div slot="header"><span>{{widget.options.label}}</span></div>
+      <draggable :list="widget.widgetList" v-bind="{group:'dragGroup', ghostClass: 'ghost',animation: 200}"
+                 handle=".drag-handler"
+                 @add="(evt) => onContainerDragAdd(evt, widget.widgetList)"
+                 @update="onContainerDragUpdate" :move="checkContainerMove">
+        <transition-group name="fade" tag="div" class="form-widget-list">
+          <template v-for="(subWidget, swIdx) in widget.widgetList">
+            <template v-if="'container' === subWidget.category">
+              <component :is="subWidget.type + '-widget'" :widget="subWidget" :designer="designer" :key="subWidget.id" :parent-list="widget.widgetList"
+                         :index-of-parent-list="swIdx" :parent-widget="widget"></component>
+            </template>
+            <template v-else>
+              <component :is="subWidget.type + '-widget'" :field="subWidget" :designer="designer" :key="subWidget.id" :parent-list="widget.widgetList"
+                         :index-of-parent-list="swIdx" :parent-widget="widget" :design-state="true"></component>
+            </template>
+          </template>
+        </transition-group>
+      </draggable>
+    </el-card>
+  </container-wrapper>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import containerMixin from "@/components/form-designer/form-widget/container-widget/containerMixin"
+  import Draggable from 'vuedraggable'
+  import ContainerWrapper from "@/components/form-designer/form-widget/container-widget/container-wrapper"
+  import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
+
+  export default {
+    name: "card-widget",
+    componentName: 'ContainerWidget',
+    mixins: [i18n, containerMixin],
+    components: {
+      Draggable,
+      ContainerWrapper,
+      ...FieldComponents,
+    },
+    props: {
+      widget: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+    },
+    computed: {
+      selected() {
+        return this.widget.id === this.designer.selectedId
+      },
+
+      customClass() {
+        return this.widget.options.customClass || ''
+      },
+
+    },
+    methods: {
+      /**
+       * 检查接收哪些组件拖放，如不接受某些组件拖放，则根据组件类型判断后返回false
+       * @param evt
+       * @returns {boolean}
+       */
+      checkContainerMove(evt) {
+        return true
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .card-container.selected {
+    outline: 2px solid $--color-primary !important;
+  }
+
+  ::v-deep .el-card__header {
+    padding: 10px 12px;
+  }
+</style>
diff --git a/src/extension/samples/extension-schema.js b/src/extension/samples/extension-schema.js
new file mode 100644
index 0000000..d2210d3
--- /dev/null
+++ b/src/extension/samples/extension-schema.js
@@ -0,0 +1,34 @@
+export const cardSchema = {
+  type: 'card',
+  category: 'container',
+  icon: 'card',
+  widgetList: [],
+  options: {
+    name: '',
+    label: 'card',
+    hidden: false,
+    cardWidth: '100%',
+    shadow: 'never',
+    customClass: '',
+  }
+}
+
+export const alertSchema = {
+  type: 'alert',
+  icon: 'alert',
+  formItemFlag: false,
+  options: {
+    name: '',
+    title: 'Good things are coming...',
+    type: 'info',
+    description: '',
+    closable: true,
+    closeText: '',
+    center: true,
+    showIcon: false,
+    effect: 'light',
+    hidden: false,
+    onClose: '',
+    customClass: '',
+  }
+}
diff --git a/src/icons/svg/alert.svg b/src/icons/svg/alert.svg
new file mode 100644
index 0000000..f1182f0
--- /dev/null
+++ b/src/icons/svg/alert.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1634810180296" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6431" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300"><defs><style type="text/css"></style></defs><path d="M512 85.162667a319.573333 319.573333 0 0 1 319.829333 309.333333l0.170667 10.666667v174.805333l58.88 134.656a53.290667 53.290667 0 0 1-48.853333 74.709333L640 789.418667a128 128 0 0 1-255.786667 7.509333L384 789.290667l-201.6 0.042666a53.333333 53.333333 0 0 1-48.938667-74.581333L192 580.010667V405.162667c0-177.28 143.018667-320 320-320zM576 789.333333l-128 0.128a64 64 0 0 0 127.701333 6.144l0.256-6.272zM512 149.162667c-141.653333 0-256 114.090667-256 256v188.16L198.656 725.333333h627.072L768 593.365333V405.717333l-0.170667-9.6A255.488 255.488 0 0 0 512 149.162667z m384 202.837333h85.333333a32 32 0 0 1 4.352 63.701333L981.333333 416h-85.333333a32 32 0 0 1-4.352-63.701333L896 352z m-853.333333 0h85.333333a32 32 0 0 1 4.352 63.701333L128 416H42.666667a32 32 0 0 1-4.352-63.701333L42.666667 352z m921.6-243.2a32 32 0 0 1-2.816 41.685333l-3.584 3.114667-85.333334 64a32 32 0 0 1-41.984-48.085333l3.584-3.114667 85.333334-64a32 32 0 0 1 44.8 6.4zM104.533333 102.4l85.333334 64a32 32 0 1 1-38.4 51.2l-85.333334-64a32 32 0 1 1 38.4-51.2z" p-id="6432"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/card.svg b/src/icons/svg/card.svg
new file mode 100644
index 0000000..515441d
--- /dev/null
+++ b/src/icons/svg/card.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1634802035575" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4165" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300"><defs><style type="text/css"></style></defs><path d="M858.656 864H165.344C109.472 864 64 818.56 64 762.688V261.312C64 205.44 109.472 160 165.344 160h693.312C914.528 160 960 205.44 960 261.312v501.376C960 818.56 914.528 864 858.656 864zM165.344 224C144.736 224 128 240.736 128 261.312v501.376C128 783.264 144.736 800 165.344 800h693.312C879.264 800 896 783.264 896 762.688V261.312C896 240.736 879.264 224 858.656 224H165.344zM800 416H224c-17.664 0-32-14.336-32-32s14.336-32 32-32h576c17.696 0 32 14.336 32 32s-14.304 32-32 32zM320 736h-96c-17.664 0-32-14.304-32-32s14.336-32 32-32h96c17.664 0 32 14.304 32 32s-14.336 32-32 32z" fill="#333333" p-id="4166"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/data-table.svg b/src/icons/svg/data-table.svg
new file mode 100644
index 0000000..d4e7caf
--- /dev/null
+++ b/src/icons/svg/data-table.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1634631759986" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11934" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300"><defs><style type="text/css"></style></defs><path d="M915.692 39.385H108.308c-15.754 0-29.539 13.784-29.539 29.538v98.462c0 15.753 13.785 29.538 29.539 29.538h807.384c15.754 0 29.539-13.785 29.539-29.538V68.923c0-15.754-13.785-29.538-29.539-29.538zM285.538 275.692h-177.23c-15.754 0-29.539 13.785-29.539 29.539v59.077c0 15.754 13.785 29.538 29.539 29.538h177.23c15.754 0 29.539-13.784 29.539-29.538V305.23c0-15.754-13.785-29.539-29.539-29.539z m315.077 0h-177.23c-15.754 0-29.539 13.785-29.539 29.539v59.077c0 15.754 13.785 29.538 29.539 29.538h177.23c15.754 0 29.539-13.784 29.539-29.538V305.23c0-15.754-13.785-29.539-29.539-29.539z m315.077 0h-177.23c-15.754 0-29.539 13.785-29.539 29.539v59.077c0 15.754 13.785 29.538 29.539 29.538h177.23c15.754 0 29.539-13.784 29.539-29.538V305.23c0-15.754-13.785-29.539-29.539-29.539zM285.538 472.615h-177.23c-15.754 0-29.539 13.785-29.539 29.539v59.077c0 15.754 13.785 29.538 29.539 29.538h177.23c15.754 0 29.539-13.784 29.539-29.538v-59.077c0-15.754-13.785-29.539-29.539-29.539z m315.077 0h-177.23c-15.754 0-29.539 13.785-29.539 29.539v59.077c0 15.754 13.785 29.538 29.539 29.538h177.23c15.754 0 29.539-13.784 29.539-29.538v-59.077c0-15.754-13.785-29.539-29.539-29.539z m315.077 0h-177.23c-15.754 0-29.539 13.785-29.539 29.539v59.077c0 15.754 13.785 29.538 29.539 29.538h177.23c15.754 0 29.539-13.784 29.539-29.538v-59.077c0-15.754-13.785-29.539-29.539-29.539zM285.538 669.538h-177.23c-15.754 0-29.539 13.785-29.539 29.539v59.077c0 15.754 13.785 29.538 29.539 29.538h177.23c15.754 0 29.539-13.784 29.539-29.538v-59.077c0-15.754-13.785-29.539-29.539-29.539z m315.077 0h-177.23c-15.754 0-29.539 13.785-29.539 29.539v59.077c0 15.754 13.785 29.538 29.539 29.538h177.23c15.754 0 29.539-13.784 29.539-29.538v-59.077c0-15.754-13.785-29.539-29.539-29.539z m315.077 0h-177.23c-15.754 0-29.539 13.785-29.539 29.539v59.077c0 15.754 13.785 29.538 29.539 29.538h177.23c15.754 0 29.539-13.784 29.539-29.538v-59.077c0-15.754-13.785-29.539-29.539-29.539zM285.538 866.462h-177.23c-15.754 0-29.539 13.784-29.539 29.538v59.077c0 15.754 13.785 29.538 29.539 29.538h177.23c15.754 0 29.539-13.784 29.539-29.538V896c0-15.754-13.785-29.538-29.539-29.538z m315.077 0h-177.23c-15.754 0-29.539 13.784-29.539 29.538v59.077c0 15.754 13.785 29.538 29.539 29.538h177.23c15.754 0 29.539-13.784 29.539-29.538V896c0-15.754-13.785-29.538-29.539-29.538z m315.077 0h-177.23c-15.754 0-29.539 13.784-29.539 29.538v59.077c0 15.754 13.785 29.538 29.539 29.538h177.23c15.754 0 29.539-13.784 29.539-29.538V896c0-15.754-13.785-29.538-29.539-29.538z" p-id="11935"></path></svg>
\ No newline at end of file
diff --git a/src/lang/en-US.js b/src/lang/en-US.js
index 832bfa8..fdfa20c 100644
--- a/src/lang/en-US.js
+++ b/src/lang/en-US.js
@@ -29,6 +29,7 @@ export default {
       'grid-col':       'GridCol',
       'table-cell':     'TableCell',
       'tab-pane':       'TabPane',
+      'data-table':     'DataTable',
 
       input:          'Input',
       textarea:       'Textarea',
@@ -154,7 +155,7 @@ export default {
       commonSetting: 'Common Setting',
       advancedSetting: 'Advanced Setting',
       eventSetting: 'Event Setting',
-      fieldName: 'Unique Name',
+      uniqueName: 'Unique Name',
       label: 'Label',
       displayType: 'Type',
       defaultValue: 'Default Value',
@@ -212,12 +213,15 @@ export default {
       fileTypesHelp: 'Allows to add more file types',
       headers: 'Request Headers',
 
-      cellWidth: 'width',
-      cellHeight: 'height',
+      cellWidth: 'Width',
+      cellHeight: 'Height',
       gutter: 'Gutter(px)',
       columnSetting: 'Cols Setting',
       colsOfGrid: 'Cols Of Grid:',
       colSpanTitle: 'Spans Of Col',
+      colOffsetTitle: 'Offset Of Col',
+      colPushTitle: 'Push Of Col',
+      colPullTitle: 'Pull Of Col',
       addColumn: 'Add Column',
 
       tabPaneSetting: 'Tab Panes',
diff --git a/src/lang/en-US_extension.js b/src/lang/en-US_extension.js
index a91909f..a5c2ff3 100644
--- a/src/lang/en-US_extension.js
+++ b/src/lang/en-US_extension.js
@@ -1,5 +1,24 @@
 export default {
   extension: {
+    widgetLabel: {
+      card: 'Card',
+      alert: 'Alert',
+    },
+
+    setting: {
+      cardWidth: 'Width Of Card',
+      cardShadow: 'Shadow',
+
+      alertTitle: 'Title',
+      alertType: 'Type',
+      description: 'Description',
+      closable: 'Closable',
+      closeText: 'Text On Close Btn',
+      center: 'Center',
+      showIcon: 'Show Icon',
+      effect: 'Effect',
+
+    },
 
   }
 }
diff --git a/src/lang/zh-CN.js b/src/lang/zh-CN.js
index 8569f97..2d6e3c1 100644
--- a/src/lang/zh-CN.js
+++ b/src/lang/zh-CN.js
@@ -29,6 +29,7 @@ export default {
       'grid-col':       '栅格列',
       'table-cell':     '单元格',
       'tab-pane':       '选项卡页',
+      'data-table':     '数据表格',
 
       input:          '单行输入',
       textarea:       '多行输入',
@@ -154,7 +155,7 @@ export default {
       commonSetting: '常见属性',
       advancedSetting: '高级属性',
       eventSetting: '事件属性',
-      fieldName: '字段唯一名称',
+      uniqueName: '唯一名称',
       label: '字段标签',
       displayType: '显示类型',
       defaultValue: '默认值',
@@ -217,7 +218,10 @@ export default {
       gutter: '栅格间隔(像素)',
       columnSetting: '栅格属性设置',
       colsOfGrid: '当前栅格列:',
-      colSpanTitle: '栅格列',
+      colSpanTitle: '栅格宽度',
+      colOffsetTitle: '左侧间隔格数',
+      colPushTitle: '右移栅格数',
+      colPullTitle: '左移栅格数',
       addColumn: '增加栅格',
 
       tabPaneSetting: '选项卡设置',
diff --git a/src/lang/zh-CN_extension.js b/src/lang/zh-CN_extension.js
index a91909f..db17e34 100644
--- a/src/lang/zh-CN_extension.js
+++ b/src/lang/zh-CN_extension.js
@@ -1,5 +1,24 @@
 export default {
   extension: {
+    widgetLabel: {
+      card: '卡片',
+      alert: '提示',
+    },
+
+    setting: {
+      cardWidth: '卡片宽度',
+      cardShadow: '显示阴影',
+
+      alertTitle: '标题',
+      alertType: '类型',
+      description: '辅助性文字',
+      closable: '是否可关闭',
+      closeText: '关闭按钮文字',
+      center: '文字居中',
+      showIcon: '显示图标',
+      effect: '显示效果',
+
+    },
 
   }
 }
diff --git a/src/main.js b/src/main.js
index 8f92203..6b28b0b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -11,6 +11,9 @@ import 'element-ui/lib/theme-chalk/index.css'
 import '@/styles/index.scss'
 import '@/iconfont/iconfont.css'
 
+import {loadExtension} from '@/extension/extension-loader'
+
+loadExtension()
 
 Vue.use(ElementUI, { size: 'small' })
 
diff --git a/src/utils/i18n.js b/src/utils/i18n.js
index dda4717..9cbc003 100644
--- a/src/utils/i18n.js
+++ b/src/utils/i18n.js
@@ -36,7 +36,6 @@ const langResources = {
 
 Vue.use(VueI18n)
 
-
 const i18n = new VueI18n({
   locale: localStorage.getItem('v_form_locale') || 'zh-CN',
   //locale: 'en-US',
@@ -58,6 +57,14 @@ export default {
   methods: {
     i18nt(key) {
       return i18n._t(key, i18n.locale, i18n._getMessages())
-    }
+    },
+
+    /* 如果key1不存在，则查找key2 */
+    i18n2t(key1, key2) {
+      return i18n.te(key1) ? i18n._t(key1, i18n.locale, i18n._getMessages()) :
+          i18n._t(key2, i18n.locale, i18n._getMessages())
+    },
+
+
   }
 }