diff --git a/README.md b/README.md
old mode 100644
new mode 100755
diff --git a/h5/.gitignore b/h5/.gitignore
old mode 100644
new mode 100755
diff --git a/h5/.prettierrc b/h5/.prettierrc
new file mode 100644
index 0000000..23acb00
--- /dev/null
+++ b/h5/.prettierrc
@@ -0,0 +1,10 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "jsxSingleQuote": false,
+  "tabWidth": 2,
+  "printWidth": 140,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false
+}
diff --git a/h5/package.json b/h5/package.json
index da7b0ca..b76cd32 100755
--- a/h5/package.json
+++ b/h5/package.json
@@ -27,6 +27,7 @@
     "node-sass": "^4.14.1",
     "sass-loader": "^8.0.2",
     "vue-grid-layout": "^2.3.7",
+    "vue-i18n": "^8.18.2",
     "vue-template-compiler": "^2.6.10",
     "vuedraggable": "^2.23.2"
   },
@@ -40,7 +41,8 @@
       "eslint:recommended"
     ],
     "rules": {
-      "no-console": "off"
+      "no-console": "off",
+      "no-debugger": "off"
     },
     "parserOptions": {
       "parser": "babel-eslint"
diff --git a/h5/public/favicon.ico b/h5/public/favicon.ico
old mode 100644
new mode 100755
diff --git a/h5/public/index.html b/h5/public/index.html
old mode 100644
new mode 100755
index 4f05700..25b2eab
--- a/h5/public/index.html
+++ b/h5/public/index.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>水母---Vue代码生成工具</title>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+    <title>Ker---Vue代码生成工具</title>
   </head>
   <body>
     <noscript>
diff --git a/h5/src/App.vue b/h5/src/App.vue
old mode 100644
new mode 100755
index 13524d5..d8a78d8
--- a/h5/src/App.vue
+++ b/h5/src/App.vue
@@ -1,14 +1,12 @@
 <template>
   <div id="app">
-    <router-view >
-    </router-view>
+    <router-view> </router-view>
   </div>
 </template>
 
 <script>
 export default {
   name: 'app',
-  components: {
-  }
+  components: {},
 }
 </script>
diff --git a/h5/src/assets/languages/en-us.json b/h5/src/assets/languages/en-us.json
new file mode 100644
index 0000000..9290578
--- /dev/null
+++ b/h5/src/assets/languages/en-us.json
@@ -0,0 +1,9 @@
+{
+  "common": {
+    "save": "save",
+    "edit": "edit",
+    "remove": "remove",
+    "preview": "preview",
+    "language": "English"
+  }
+}
diff --git a/h5/src/assets/languages/zh-cn.json b/h5/src/assets/languages/zh-cn.json
new file mode 100644
index 0000000..d9366f9
--- /dev/null
+++ b/h5/src/assets/languages/zh-cn.json
@@ -0,0 +1,9 @@
+{
+  "common": {
+    "save": "保存",
+    "edit": "编辑",
+    "remove": "删除",
+    "preview": "预览",
+    "language": "中文"
+  }
+}
diff --git a/h5/src/assets/logo.png b/h5/src/assets/logo.png
old mode 100644
new mode 100755
diff --git a/h5/src/components/HelloWorld.vue b/h5/src/components/HelloWorld.vue
deleted file mode 100644
index 879051a..0000000
--- a/h5/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/h5/src/components/dashboard/componentItem.vue b/h5/src/components/dashboard/componentItem.vue
deleted file mode 100644
index cbd574c..0000000
--- a/h5/src/components/dashboard/componentItem.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-  <div
-    :is="item.name"
-    v-bind="item.props"
-    :class="item.name == 'el-form-item' ? 'component-item':''"
-  >
-    <draggable
-      v-model="item.children"
-      :group="{name:'items', pull: 'move', put: true}"
-      @change="changeEvent"
-      :sort="true">   
-      <template v-for="(child,index) in item.children">
-        <componentItem :item="child" :key="index"></componentItem>
-      </template>
-      {{item.text}}
-    </draggable>
-  </div>
-</template>
-
-<script>
-import draggable from "vuedraggable";
-export default {
-  name: "componentItem",
-  props: ["item"],
-  components: {
-    draggable
-  },
-  data() {
-    return {};
-  },
-  methods:{
-    changeEvent(event){
-      debugger
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.component-item {
-  border: 1px dashed #409EFF;
-  padding: 5px;
-}
-.component-item:hover {
-  border: 1px dashed red;
-}
-
-/deep/ .el-form-item{
-	margin-bottom: 5px;
-}
-
-</style>
\ No newline at end of file
diff --git a/h5/src/components/dashboard/componentItems.vue b/h5/src/components/dashboard/componentItems.vue
deleted file mode 100644
index 327bd1d..0000000
--- a/h5/src/components/dashboard/componentItems.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<template>
-  <div class="view">
-    <componentItem :key="index" :item="item" v-for="(item, index) in items"></componentItem>
-  </div>
-</template>
-
-<script>
-import componentItem from "./componentItem";
-export default {
-  components: {
-    componentItem,
-  },
-  data() {
-    return {
-      items: [
-        {
-          name: "el-form",
-          props: {
-            "label-width": "180px",
-            "label-position": "rigth"
-          },
-          children: [
-            {
-              name: "el-form-item",
-              props: {
-                label: "姓名",
-                value: "3131"
-              },
-              children: [
-                {
-                  name: "el-input",
-                  props: {
-                    type: "textarea",
-                    size: "large",
-                    value: "3131",
-                    "v-model": "sddsds"
-                  },
-                  text: "username"
-                }
-              ]
-            },
-            {
-              name: "el-form-item",
-              props: {
-                label: "请选择请选择请选择请选择"
-              },
-              children: [
-                {
-                  name: "el-select",
-                  props: {
-                    size: "small",
-                    placeholder: "请选择",
-                    "v-model": "type",
-                    value: "1",
-                    clearable: true
-                  },
-                  children: [
-                    {
-                      name: "el-option",
-                      text: "选项一",
-                      props: {
-                        value: "type"
-                      }
-                    },
-                    {
-                      name: "el-option",
-                      text: "选项e",
-                      props: {
-                        value: "2"
-                      }
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    };
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.view {
-  width: 100%;
-  height: 100%;
-}
-/deep/ form.el-form.el-form--label-rigth {
-    border: 1px solid orange;
-    padding: 5px;
-}
-</style>
\ No newline at end of file
diff --git a/h5/src/components/dashboard/header.vue b/h5/src/components/dashboard/header.vue
deleted file mode 100644
index 04be227..0000000
--- a/h5/src/components/dashboard/header.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <div class="header">
-      <el-button type="default">导入 JSON 文件</el-button>
-      <el-button type="primary">预览</el-button>
-      <el-button type="success">导出</el-button>
-  </div>
-</template>
-
-<script>
-export default {
-
-}
-</script>
-
-<style>
-
-</style>
\ No newline at end of file
diff --git a/h5/src/datas/menus.json b/h5/src/datas/menus.json
new file mode 100755
index 0000000..133af0c
--- /dev/null
+++ b/h5/src/datas/menus.json
@@ -0,0 +1,86 @@
+{
+ "children": [
+		{
+          "title": "表单类",
+          "name": "form",
+          "children": [
+				{
+              "title": "单选框",
+              "name": "radio"
+				},
+				{
+              "title": "多选框",
+              "name": "checkbox"
+				},
+				{
+              "title": "输入框",
+              "name": "input"
+				},
+				{
+              "title": "选择器",
+              "name": "select"
+				},
+				{
+              "title": "时间日期选择器",
+              "name": "datetimepicker"
+				},
+				{
+              "title": "开关",
+              "name": "switch"
+				},
+				{
+              "title": "滑块",
+              "name": "slider"
+				},
+				{
+              "title": "评分",
+              "name": "rate"
+				},
+				{
+              "title": "上传",
+              "name": "upload"
+				}
+			]
+		},
+		{
+          "title": "数据类",
+          "name": "data",
+          "children": [
+				{
+              "title": "表格",
+              "name": "table"
+				}
+			]
+		},
+		{
+          "title": "通知类",
+          "name": "notice",
+          "children": [
+				{
+              "title": "警告",
+              "name": "alert"
+				}
+			]
+		},
+		{
+          "title": "导航类",
+          "name": "navigation",
+          "children": [
+				{
+              "title": "导航菜单",
+              "name": "menu"
+				}
+			]
+		},
+		{
+          "title": "其它",
+          "name": "others",
+          "children": [
+				{
+              "title": "对话框",
+              "name": "dialog"
+				}
+			]
+		}
+	]
+}
\ No newline at end of file
diff --git a/h5/src/main.js b/h5/src/main.js
old mode 100644
new mode 100755
index dc1761a..253d3bb
--- a/h5/src/main.js
+++ b/h5/src/main.js
@@ -1,17 +1,28 @@
 import Vue from 'vue'
 import App from './App.vue'
-
 import router from './router/index.js'
-import ElementUI from 'element-ui';
-import 'element-ui/lib/theme-chalk/index.css';
-import './static/common.css'
 
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+Vue.use(ElementUI)
+
+import VueI18n from 'vue-i18n'
+Vue.use(VueI18n)
+const i18n = new VueI18n({
+  locale: 'zh',
+  messages: {
+    zh: require('@/assets/languages/zh-cn.json'),
+    en: require('@/assets/languages/en-us.json'),
+  },
+})
+
+import './static/common.css'
 import store from './store'
-Vue.use(ElementUI);
 Vue.config.productionTip = false
 
 new Vue({
   router,
   store,
-  render: (h) => h(App),
-}).$mount('#app');
+  i18n,
+  render: h => h(App),
+}).$mount('#app')
diff --git a/h5/src/router/index.js b/h5/src/router/index.js
old mode 100644
new mode 100755
index a935528..42e9082
--- a/h5/src/router/index.js
+++ b/h5/src/router/index.js
@@ -1,21 +1,26 @@
-import Vue from 'vue';
-import Router from 'vue-router';
-Vue.use(Router);
+import Vue from 'vue'
+import Router from 'vue-router'
+Vue.use(Router)
 
-
-const routes = [{
+const routes = [
+  {
     name: 'home',
     path: '/',
-    redirect: '/dashboard'
-}, {
+    redirect: '/dashboard',
+  },
+  {
     name: 'dashboard',
     path: '/dashboard',
-    component: () => import('@/views/index.vue')
-}]
+    component: () => import('@/views/index.vue'),
+    meta: {
+      title: 'Dashboard',
+    },
+  },
+]
 
 const routers = new Router({
-    routes
-});
+  routes,
+})
 
 // routers.beforeEach((to, from, next) => {
 //     next()
@@ -24,4 +29,4 @@ const routers = new Router({
 // routers.afterEach(to => {
 
 // })
-export default routers;
+export default routers
diff --git a/h5/src/static/common.css b/h5/src/static/common.css
old mode 100644
new mode 100755
diff --git a/h5/src/store/index.js b/h5/src/store/index.js
old mode 100644
new mode 100755
index 10efb0f..98ebe73
--- a/h5/src/store/index.js
+++ b/h5/src/store/index.js
@@ -3,9 +3,11 @@ import Vuex from 'vuex'
 Vue.use(Vuex)
 import createLogger from 'vuex/dist/logger'
 import layout from './layout'
+import menu from './menu'
 export default new Vuex.Store({
 	modules: {
-		layout
+		layout,
+		menu
 	},
 	plugins: [createLogger()]
 })
\ No newline at end of file
diff --git a/h5/src/store/layout.js b/h5/src/store/layout.js
old mode 100644
new mode 100755
index ccec72c..b870c93
--- a/h5/src/store/layout.js
+++ b/h5/src/store/layout.js
@@ -1,16 +1,80 @@
-
 const layout = {
-	state: {
-		layout: []
-	},
-	mutations: {
-	},
-	actions: {
-		addComponent({ commit, dispatch }, component) {
-		}
-	},
-	getters: {
-		
-	}
-}
-export default layout
\ No newline at end of file
+  state: {
+    elements: [
+      {
+        name: "el-form",
+        props: {
+          "label-width": "180px",
+          "label-position": "rigth",
+        },
+        children: [
+          {
+            name: "el-form-item",
+            props: {
+              label: "姓名",
+              value: "3131",
+            },
+            children: [
+              {
+                name: "el-input",
+                props: {
+                  type: "textarea",
+                  size: "large",
+                  value: "3131",
+                  "v-model": "sddsds",
+                },
+                text: "username",
+              },
+            ],
+          },
+          {
+            name: "el-form-item",
+            props: {
+              label: "请选择请选择请选择请选择",
+            },
+            children: [
+              {
+                name: "el-select",
+                props: {
+                  size: "small",
+                  placeholder: "请选择",
+                  "v-model": "type",
+                  value: "1",
+                  clearable: true,
+                },
+                children: [
+                  {
+                    name: "el-option",
+                    text: "选项一",
+                    props: {
+                      value: "type",
+                    },
+                  },
+                  {
+                    name: "el-option",
+                    text: "选项e",
+                    props: {
+                      value: "2",
+                    },
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  mutations: {
+    updateElements: (state, payload) => {
+      state.elements = payload;
+    },
+  },
+  actions: {
+    updateElements: ({ commit }, payload) => {
+      commit("updateElements", payload);
+    },
+  },
+  getters: {},
+};
+export default layout;
diff --git a/h5/src/store/menu.js b/h5/src/store/menu.js
old mode 100644
new mode 100755
index 88b48c7..086184f
--- a/h5/src/store/menu.js
+++ b/h5/src/store/menu.js
@@ -1,15 +1,12 @@
+const menus = require("@/datas/menus.json");
 const menu = {
-	state: {
-		layout: []
-	},
-	mutations: {
-	},
-	actions: {
-		cloneMenuItem({ commit, dispatch }, component) {
-		}
-	},
-	getters: {
-
-	}
-}
-export default menu
\ No newline at end of file
+  state: {
+    layout: [],
+  },
+  mutations: {},
+  actions: {
+    getMenuDatas({ commit, dispatch }, component) {},
+  },
+  getters: {},
+};
+export default menu;
diff --git a/h5/src/utils/index.js b/h5/src/utils/index.js
old mode 100644
new mode 100755
index df4d31b..510f8fd
--- a/h5/src/utils/index.js
+++ b/h5/src/utils/index.js
@@ -1,36 +1,43 @@
+/*
+ * @Author: xin.tao
+ * @Date: 2020-06-20 13:02:02
+ * @Last Modified by:   xin.tao
+ * @Last Modified time: 2020-06-20 13:02:02
+ */
+
 const Utils = {
-	deepCopy: (obj) => {
-		let map = new WeakMap();
-		let dp = (obj) => {
-			let result = null;
-			let keys = null,
-				key = null,
-				temp = null,
-				existObj = null;
+  deepCopy: obj => {
+    let map = new WeakMap()
+    let dp = obj => {
+      let result = null
+      let keys = null,
+        key = null,
+        temp = null,
+        existObj = null
 
-			existObj = map.get(obj);
-			// 如果这个对象已被记录则直接返回
-			if (existObj) {
-				return existObj;
-			}
-			keys = Object.keys(obj);
-			result = {};
-			// 记录当前对象
-			map.set(obj, result);
-			for (let i = 0; i < keys.length; i++) {
-				key = keys[i];
-				temp = obj[key];
-				// 如果字段的值也是一个对象则递归复制
-				if (temp && typeof temp === 'object') {
-					result[key] = dp(temp);
-				} else {
-					// 否则直接赋值给新对象
-					result[key] = temp;
-				}
-			}
-			return result;
-		}
-		return dp(obj);
-	}
+      existObj = map.get(obj)
+      // 如果这个对象已被记录则直接返回
+      if (existObj) {
+        return existObj
+      }
+      keys = Object.keys(obj)
+      result = {}
+      // 记录当前对象
+      map.set(obj, result)
+      for (let i = 0; i < keys.length; i++) {
+        key = keys[i]
+        temp = obj[key]
+        // 如果字段的值也是一个对象则递归复制
+        if (temp && typeof temp === 'object') {
+          result[key] = dp(temp)
+        } else {
+          // 否则直接赋值给新对象
+          result[key] = temp
+        }
+      }
+      return result
+    }
+    return dp(obj)
+  },
 }
-export default Utils;
\ No newline at end of file
+export default Utils
diff --git a/h5/src/views/index.vue b/h5/src/views/index.vue
old mode 100644
new mode 100755
index a71bb4d..dd9892c
--- a/h5/src/views/index.vue
+++ b/h5/src/views/index.vue
@@ -25,21 +25,21 @@
   </div>
 </template>
 <script>
-import sider from "@/components/dashboard/sider";
-import top from "@/components/dashboard/header";
-import workMeta from "@/components/dashboard/workmeta";
-import right from '@/components/dashboard/right/index'
+import sider from '@/layout/dashboard/sider'
+import top from '@/layout/dashboard/header'
+import workMeta from '@/layout/dashboard/workmeta'
+import right from '@/layout/dashboard/right/index'
 export default {
   data() {
-    return {};
+    return {}
   },
   components: {
     sider,
     top,
     workMeta,
-    right
-  }
-};
+    right,
+  },
+}
 </script>
 
 <style lang="less" scoped>
@@ -68,7 +68,7 @@ export default {
       width: 200px;
     }
   }
-  .main-area{
+  .main-area {
     position: absolute;
     left: 300px;
     top: 60px;
@@ -77,4 +77,4 @@ export default {
     overflow: hidden;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/h5/src/views/layout/dashboard/Empty.vue b/h5/src/views/layout/dashboard/Empty.vue
new file mode 100644
index 0000000..a8f4d5c
--- /dev/null
+++ b/h5/src/views/layout/dashboard/Empty.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="empty">
+    {{ emptyText }}
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    emptyText: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.empty {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: -webkit-fill-available;
+  justify-content: center;
+  background-color: #dedede;
+}
+</style>
diff --git a/h5/src/views/layout/dashboard/componentItem.vue b/h5/src/views/layout/dashboard/componentItem.vue
new file mode 100755
index 0000000..520ba55
--- /dev/null
+++ b/h5/src/views/layout/dashboard/componentItem.vue
@@ -0,0 +1,69 @@
+<template>
+  <div :is="item.name" v-bind="item.props" :class="item.name == 'el-form-item' ? 'component-item' : ''">
+    <draggable v-model="item.children" :group="{ name: 'unit', pull: 'move', put: true }" :sort="true" :component-data="getComponentData()">
+      <template v-for="(child, index) in item.children">
+        <componentItem :element="child" :key="index"></componentItem>
+      </template>
+      {{ item.text }}
+    </draggable>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'componentItem',
+  props: ['element'],
+  components: {
+    draggable: () => import('vuedraggable'),
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    item: {
+      get() {
+        return this.element
+      },
+      set(val) {
+        debugger
+      },
+    },
+  },
+  methods: {
+    getComponentData() {
+      return {
+        on: {
+          change: this.handleChange,
+          input: this.inputChanged,
+        },
+        attrs: {
+          wrap: true,
+        },
+        props: {
+          value: this.activeNames,
+        },
+      }
+    },
+    handleChange() {
+      console.log('changed')
+    },
+    inputChanged(value) {
+      debugger
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.component-item {
+  border: 1px dashed #409eff;
+  padding: 5px;
+}
+.component-item:hover {
+  border: 1px dashed red;
+}
+
+/deep/ .el-form-item {
+  margin-bottom: 5px;
+}
+</style>
diff --git a/h5/src/views/layout/dashboard/componentItems.vue b/h5/src/views/layout/dashboard/componentItems.vue
new file mode 100755
index 0000000..e3d5ad9
--- /dev/null
+++ b/h5/src/views/layout/dashboard/componentItems.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="view">
+    <componentItem :key="index" :element="item" v-for="(item, index) in items"></componentItem>
+    <!-- <draggable v-model="items" group="people" @start="drag = true" @end="drag = false">
+      <div v-for="element in items" :key="element.id">{{ element.name }}</div>
+    </draggable> -->
+  </div>
+</template>
+
+<script>
+import componentItem from "./componentItem";
+import { mapState, mapActions } from "vuex";
+export default {
+  components: {
+    componentItem,
+    draggable: () => import("vuedraggable"),
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    items: {
+      get() {
+        return this.$store.state.layout.elements;
+      },
+      set(value) {
+        this.updateElements(value);
+      },
+    },
+  },
+  methods: {
+    ...mapActions(["updateElements"]),
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.view {
+  width: 100%;
+  height: 100%;
+}
+/deep/ form.el-form.el-form--label-rigth {
+  border: 1px solid orange;
+  padding: 5px;
+}
+</style>
diff --git a/h5/src/views/layout/dashboard/header.vue b/h5/src/views/layout/dashboard/header.vue
new file mode 100755
index 0000000..90abf66
--- /dev/null
+++ b/h5/src/views/layout/dashboard/header.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="header">
+    <el-button type="default">{{ $t('common.save') }}</el-button>
+    <el-button type="default">导入 JSON 文件</el-button>
+    <el-button type="primary">预览</el-button>
+    <el-button type="success">导出</el-button>
+    <el-dropdown @command="handleCommand">
+      <span>{{ currentLanguage }}</span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item command="zh">中文</el-dropdown-item>
+        <el-dropdown-item command="en">English</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      lan: '',
+    }
+  },
+  computed: {
+    currentLanguage() {
+      return this.$t('common.language')
+    },
+  },
+  methods: {
+    handleCommand(lan) {
+      this.lan = lan
+      this.$i18n.locale = lan
+    },
+  },
+}
+</script>
+
+<style></style>
diff --git a/h5/src/components/dashboard/right/formAttrs.vue b/h5/src/views/layout/dashboard/right/formAttrs.vue
old mode 100644
new mode 100755
similarity index 100%
rename from h5/src/components/dashboard/right/formAttrs.vue
rename to h5/src/views/layout/dashboard/right/formAttrs.vue
diff --git a/h5/src/components/dashboard/right/index.vue b/h5/src/views/layout/dashboard/right/index.vue
old mode 100644
new mode 100755
similarity index 100%
rename from h5/src/components/dashboard/right/index.vue
rename to h5/src/views/layout/dashboard/right/index.vue
diff --git a/h5/src/components/dashboard/sider.vue b/h5/src/views/layout/dashboard/sider.vue
old mode 100644
new mode 100755
similarity index 67%
rename from h5/src/components/dashboard/sider.vue
rename to h5/src/views/layout/dashboard/sider.vue
index bc624cf..c453427
--- a/h5/src/components/dashboard/sider.vue
+++ b/h5/src/views/layout/dashboard/sider.vue
@@ -1,16 +1,17 @@
 <template>
   <div class="sider">
     <el-collapse v-model="activeNames" @change="handleChange">
-      <template v-for="(list,m) of datas">
+      <template v-for="(list, m) of datas">
         <el-collapse-item :title="list.title" :name="list.name" :key="m">
           <draggable
             v-model="list.children"
-            :group="{name:'unit', pull: 'clone', put: false}"
+            :group="{ name: 'people', pull: 'clone', put: false }"
             :clone="cloneDog"
             @end="onEnd"
-            :sort="false">
-            <template v-for="(item,n) of list.children">
-              <el-tag :key="n" style="margin:3px;cursor: move" hit>{{item.title}}</el-tag>
+            :sort="false"
+          >
+            <template v-for="(item, n) of list.children">
+              <el-tag :key="n" style="margin:3px;cursor: move" hit>{{ item.title }}</el-tag>
             </template>
           </draggable>
         </el-collapse-item>
@@ -18,11 +19,13 @@
     </el-collapse>
   </div>
 </template>
+
 <script>
 import draggable from "vuedraggable";
+// import { mapState } from "vuex";
 export default {
   components: {
-    draggable
+    draggable,
   },
   data() {
     return {
@@ -34,41 +37,41 @@ export default {
           children: [
             {
               title: "单选框",
-              name: "radio"
+              name: "radio",
             },
             {
               title: "多选框",
-              name: "checkbox"
+              name: "checkbox",
             },
             {
               title: "输入框",
-              name: "input"
+              name: "input",
             },
             {
               title: "选择器",
-              name: "select"
+              name: "select",
             },
             {
               title: "时间日期选择器",
-              name: "datetimepicker"
+              name: "datetimepicker",
             },
             {
               title: "开关",
-              name: "switch"
+              name: "switch",
             },
             {
               title: "滑块",
-              name: "slider"
+              name: "slider",
             },
             {
               title: "评分",
-              name: "rate"
+              name: "rate",
             },
             {
               title: "上传",
-              name: "upload"
-            }
-          ]
+              name: "upload",
+            },
+          ],
         },
         {
           title: "数据类",
@@ -76,9 +79,9 @@ export default {
           children: [
             {
               title: "表格",
-              name: "table"
-            }
-          ]
+              name: "table",
+            },
+          ],
         },
         {
           title: "通知类",
@@ -86,9 +89,9 @@ export default {
           children: [
             {
               title: "警告",
-              name: "alert"
-            }
-          ]
+              name: "alert",
+            },
+          ],
         },
         {
           title: "导航类",
@@ -96,9 +99,9 @@ export default {
           children: [
             {
               title: "导航菜单",
-              name: "menu"
-            }
-          ]
+              name: "menu",
+            },
+          ],
         },
         {
           title: "其它",
@@ -106,26 +109,25 @@ export default {
           children: [
             {
               title: "对话框",
-              name: "dialog"
-            }
-          ]
-        }
-      ]
+              name: "dialog",
+            },
+          ],
+        },
+      ],
     };
   },
   methods: {
     handleChange(val) {
       console.log(val);
     },
-    cloneDog(item){
-      return item
+    cloneDog(item) {
+      return item;
     },
-    onEnd(item){
-      console.log(item)
-    }
-  }
+    onEnd(item) {
+      console.log(item);
+    },
+  },
 };
 </script>
 
-<style>
-</style>
\ No newline at end of file
+<style></style>
diff --git a/h5/src/components/dashboard/workmeta.vue b/h5/src/views/layout/dashboard/workmeta.vue
old mode 100644
new mode 100755
similarity index 54%
rename from h5/src/components/dashboard/workmeta.vue
rename to h5/src/views/layout/dashboard/workmeta.vue
index d6dd255..fe46ae7
--- a/h5/src/components/dashboard/workmeta.vue
+++ b/h5/src/views/layout/dashboard/workmeta.vue
@@ -1,26 +1,28 @@
 <template>
   <div class="workmeta">
     <div class="main">
-      <componentItems v-if="datas.length" />
-      <div class="empty" v-else>
-        {{emptyText}}
-      </div>
+      <template v-if="datas.length">
+        <componentItems id="_workspace" />
+      </template>
+      <Empty v-else :emptyText="emptyText" />
     </div>
   </div>
 </template>
 
 <script>
 import componentItems from "./componentItems";
+import Empty from "./Empty";
 export default {
   components: {
-    componentItems
+    componentItems,
+    Empty,
   },
   data() {
     return {
       datas: [1],
-      emptyText: "拖拽或添加组件到此处"
+      emptyText: "拖拽或添加组件到此处",
     };
-  }
+  },
 };
 </script>
 
@@ -34,14 +36,6 @@ export default {
     overflow: auto;
     padding: 10px;
     min-height: -webkit-fill-available;
-    .empty {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      height: -webkit-fill-available;
-      justify-content: center;
-      background-color: #dedede;
-    }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/h5/vue.config.js b/h5/vue.config.js
new file mode 100644
index 0000000..81c5f5c
--- /dev/null
+++ b/h5/vue.config.js
@@ -0,0 +1,27 @@
+const path = require('path')
+function resolve(dir) {
+  return path.join(__dirname, dir)
+}
+
+module.exports = {
+  devServer: {
+    hot: true,
+    disableHostCheck: true,
+    overlay: {
+      warnings: false,
+      errors: true,
+    },
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    },
+  },
+  // 自定义webpack配置
+  configureWebpack: {
+    devtool: 'source-map',
+    resolve: {
+      alias: {
+        '@': resolve('src'),
+      },
+    },
+  },
+}
diff --git a/h5/yarn.lock b/h5/yarn.lock
index dbbb1b3..dcf5c1c 100755
--- a/h5/yarn.lock
+++ b/h5/yarn.lock
@@ -8527,6 +8527,11 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-hot-reload-api%2Fdownload%2Fvue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
   integrity sha1-UylVzB6yCKPZkLOp+acFdGV+CPI=
 
+vue-i18n@^8.18.2:
+  version "8.18.2"
+  resolved "http://118.31.173.195:4873/vue-i18n/-/vue-i18n-8.18.2.tgz#cd7c12f2e178e6faa23b0e3cfd2f7bac9305f8fc"
+  integrity sha512-0X5nBTCZAVjlwcrPaYJwNs3iipBBTv0AUHwQUOa8yP3XbQGWKbRHqBb3OhCYtum/IHDD21d/df5Xd2VgyxbxfA==
+
 vue-loader@^15.7.0:
   version "15.7.1"
   resolved "https://registry.npm.taobao.org/vue-loader/download/vue-loader-15.7.1.tgz?cache=0&sync_timestamp=1563435501637&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-15.7.1.tgz#6ccacd4122aa80f69baaac08ff295a62e3aefcfd"
