diff --git a/src/api/index.js b/src/api/index.js
index b083602..82be318 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -30,7 +30,7 @@ api.interceptors.request.use(
          * 全局拦截请求发送前提交的参数
          * 以下代码为示例，在登录状态下，分别对 post 和 get 请求加上 token 参数
          */
-        if (store.getters['token/isLogin']) {
+        if (store.getters['user/isLogin']) {
             request.headers.token = store.state.user.token
         }
         if (request.method == 'post') {
diff --git a/src/assets/icons/gitee.svg b/src/assets/icons/gitee.svg
new file mode 100644
index 0000000..f8cf6de
--- /dev/null
+++ b/src/assets/icons/gitee.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="1606098068238" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1177" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 1024C229.2224 1024 0 794.7776 0 512S229.2224 0 512 0s512 229.2224 512 512-229.2224 512-512 512z m259.1488-568.8832H480.4096a25.2928 25.2928 0 0 0-25.2928 25.2928l-0.0256 63.2064c0 13.952 11.3152 25.2928 25.2672 25.2928h177.024c13.9776 0 25.2928 11.3152 25.2928 25.2672v12.6464a75.8528 75.8528 0 0 1-75.8528 75.8528H366.592a25.2928 25.2928 0 0 1-25.2672-25.2928v-240.1792a75.8528 75.8528 0 0 1 75.8272-75.8528h353.9456a25.2928 25.2928 0 0 0 25.2672-25.2928l0.0768-63.2064a25.2928 25.2928 0 0 0-25.2672-25.2928H417.152a189.6192 189.6192 0 0 0-189.6192 189.6448v353.9456c0 13.9776 11.3152 25.2928 25.2928 25.2928h372.9408a170.6496 170.6496 0 0 0 170.6496-170.6496v-145.408a25.2928 25.2928 0 0 0-25.2928-25.2672z" fill="#C71D23" p-id="1178"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/github.svg b/src/assets/icons/github.svg
new file mode 100644
index 0000000..08c7c9f
--- /dev/null
+++ b/src/assets/icons/github.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="1606098150184" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1902" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M347.8 794.8c0 4-4.6 7.2-10.4 7.2-6.6 0.6-11.2-2.6-11.2-7.2 0-4 4.6-7.2 10.4-7.2 6-0.6 11.2 2.6 11.2 7.2z m-62.2-9c-1.4 4 2.6 8.6 8.6 9.8 5.2 2 11.2 0 12.4-4s-2.6-8.6-8.6-10.4c-5.2-1.4-11 0.6-12.4 4.6z m88.4-3.4c-5.8 1.4-9.8 5.2-9.2 9.8 0.6 4 5.8 6.6 11.8 5.2 5.8-1.4 9.8-5.2 9.2-9.2-0.6-3.8-6-6.4-11.8-5.8zM505.6 16C228.2 16 16 226.6 16 504c0 221.8 139.6 411.6 339 478.4 25.6 4.6 34.6-11.2 34.6-24.2 0-12.4-0.6-80.8-0.6-122.8 0 0-140 30-169.4-59.6 0 0-22.8-58.2-55.6-73.2 0 0-45.8-31.4 3.2-30.8 0 0 49.8 4 77.2 51.6 43.8 77.2 117.2 55 145.8 41.8 4.6-32 17.6-54.2 32-67.4-111.8-12.4-224.6-28.6-224.6-221 0-55 15.2-82.6 47.2-117.8-5.2-13-22.2-66.6 5.2-135.8 41.8-13 138 54 138 54 40-11.2 83-17 125.6-17s85.6 5.8 125.6 17c0 0 96.2-67.2 138-54 27.4 69.4 10.4 122.8 5.2 135.8 32 35.4 51.6 63 51.6 117.8 0 193-117.8 208.4-229.6 221 18.4 15.8 34 45.8 34 92.8 0 67.4-0.6 150.8-0.6 167.2 0 13 9.2 28.8 34.6 24.2C872.4 915.6 1008 725.8 1008 504 1008 226.6 783 16 505.6 16zM210.4 705.8c-2.6 2-2 6.6 1.4 10.4 3.2 3.2 7.8 4.6 10.4 2 2.6-2 2-6.6-1.4-10.4-3.2-3.2-7.8-4.6-10.4-2z m-21.6-16.2c-1.4 2.6 0.6 5.8 4.6 7.8 3.2 2 7.2 1.4 8.6-1.4 1.4-2.6-0.6-5.8-4.6-7.8-4-1.2-7.2-0.6-8.6 1.4z m64.8 71.2c-3.2 2.6-2 8.6 2.6 12.4 4.6 4.6 10.4 5.2 13 2 2.6-2.6 1.4-8.6-2.6-12.4-4.4-4.6-10.4-5.2-13-2z m-22.8-29.4c-3.2 2-3.2 7.2 0 11.8 3.2 4.6 8.6 6.6 11.2 4.6 3.2-2.6 3.2-7.8 0-12.4-2.8-4.6-8-6.6-11.2-4z" p-id="1903"></path></svg>
\ No newline at end of file
diff --git a/src/assets/styles/home.scss b/src/assets/styles/home.scss
index f0226e0..b372445 100644
--- a/src/assets/styles/home.scss
+++ b/src/assets/styles/home.scss
@@ -5,6 +5,8 @@ $lighterBlue: #4aa0fa;
     width: 100%;
     height: 100%;
     overflow-y: hidden;
+    background-color: #f7f7f7;
+    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
 }
 .components-list {
     padding: 8px;
@@ -51,8 +53,8 @@ $lighterBlue: #4aa0fa;
 .left-board {
     width: 260px;
     position: absolute;
-    left: 0;
-    top: 20px;
+    left: 40px;
+    top: 0;
     height: 100vh;
     //background-color: rgba(255, 255, 255, 100);
 }
@@ -74,7 +76,7 @@ $lighterBlue: #4aa0fa;
     width: 80%;
     margin: 20px auto 0;
     box-sizing: border-box;
-    background-color: rgba(255, 255, 255, 100);
+    background-color: rgb(255, 255, 255);
     border: 2px solid rgba(255, 255, 255, 100);
     overflow-y: hidden;
 }
diff --git a/src/components/parser/Parser.vue b/src/components/parser/Parser.vue
index 8e275a3..1cc71b8 100644
--- a/src/components/parser/Parser.vue
+++ b/src/components/parser/Parser.vue
@@ -70,12 +70,31 @@ function renderFrom(h) {
 }
 
 function formBtns(h) {
-    return <el-col>
-        <el-form-item size="large">
-            <el-button type="primary" onClick={this.submitForm}>提交</el-button>
-            <el-button onClick={this.resetForm}>重置</el-button>
+    const { formConfCopy } = this
+    if(formConfCopy.resetBtn){
+        return   <el-col>
+            <el-form-item size="large" style="margin-top:30px">
+                <el-row>
+                    <el-col span="4" offset="6">
+                        <el-button type="primary" onClick={this.submitForm}>提交</el-button>
+                    </el-col>
+                    <el-col span="9" offset="3" >
+                        <el-button onClick={this.resetForm}>重置</el-button>
+                    </el-col>
+                </el-row>
+            </el-form-item>
+        </el-col>
+    }
+    return   <el-col>
+        <el-form-item size="large" style="margin-top:30px">
+            <el-row type="flex" justify="center" >
+                <el-col span="8" >
+                    <el-button type="primary" onClick={this.submitForm}>提交</el-button>
+                </el-col>
+            </el-row>
         </el-form-item>
     </el-col>
+
 }
 
 function renderFormItem(h, elementList) {
diff --git a/src/router/modules/root.js b/src/router/modules/root.js
index 0b7d699..f6fb21f 100644
--- a/src/router/modules/root.js
+++ b/src/router/modules/root.js
@@ -2,8 +2,13 @@ export default [
     {
         path: '/',
         meta: {requireLogin: false},
-        component: () => import(/* webpackChunkName: 'root' */ '@/views/welcome.vue'),
+        component: () => import(/* webpackChunkName: 'root' */ '@/views/official/index.vue'),
         children: [
+            {
+                path: '/',
+                meta: {requireLogin: false},
+                component: () => import(/* webpackChunkName: 'root' */ '@/views/official/introduction.vue')
+            },
             {
                 path: '/login',
                 meta: {requireLogin: false},
@@ -12,22 +17,17 @@ export default [
             {
                 path: '/enterprise',
                 meta: {requireLogin: false},
-                component: () => import(/* webpackChunkName: 'root' */ '@/views/common/enterprise/index.vue')
+                component: () => import(/* webpackChunkName: 'root' */ '@/views/official/enterprise')
             },
             {
                 path: '/sources',
                 meta: {requireLogin: false},
-                component: () => import(/* webpackChunkName: 'root' */ '@/views/common/sources/index.vue')
+                component: () => import(/* webpackChunkName: 'root' */ '@/views/official/sources')
             },
             {
                 path: '/proposal',
                 meta: {requireLogin: false},
-                component: () => import(/* webpackChunkName: 'root' */ '@/views/common/proposal/index.vue')
-            },
-            {
-                path: '/console',
-                meta: {requireLogin: true},
-                component: () => import(/* webpackChunkName: 'root' */ '@/views/account/console/index.vue')
+                component: () => import(/* webpackChunkName: 'root' */ '@/views/official/proposal')
             }
         ]
     }, {
diff --git a/src/store/modules/token.js b/src/store/modules/token.js
deleted file mode 100644
index b58f8b4..0000000
--- a/src/store/modules/token.js
+++ /dev/null
@@ -1,56 +0,0 @@
-// import api from '@/api'
-
-const state = {
-    token: localStorage.token,
-    failuretime: localStorage.failuretime
-}
-
-const getters = {
-    isLogin: state => {
-        return state.token
-    }
-}
-
-const actions = {
-    login({
-        commit
-    }) {
-        return new Promise(resolve => {
-            // 模拟登录成功，写入 token 信息
-            commit('setData', {
-                token: '1234567890',
-                failuretime: Date.parse(new Date()) / 1000 + 24 * 60 * 60
-            })
-            resolve()
-        })
-    }
-    // login({
-    //     commit
-    // }, data) {
-    //     return new Promise((resolve, reject) => {
-    //         api.post('member/login', data).then(res => {
-    //             commit('setData', res.data)
-    //             resolve(res)
-    //         }).catch(error => {
-    //             reject(error)
-    //         })
-    //     })
-    // }
-}
-
-const mutations = {
-    setData(state, data) {
-        localStorage.setItem('token', data.token)
-        localStorage.setItem('failuretime', data.failuretime)
-        state.token = data.token
-        state.failuretime = data.failuretime
-    }
-}
-
-export default {
-    namespaced: true,
-    state,
-    actions,
-    getters,
-    mutations
-}
diff --git a/src/views/404.vue b/src/views/404.vue
index fcd993e..6c5f495 100644
--- a/src/views/404.vue
+++ b/src/views/404.vue
@@ -4,17 +4,13 @@
     </div>
 </template>
 <script>
-import loadScript from '@/utils/loadScript'
-
 export default {
     name: '404',
     data() {
         return {}
     },
     mounted() {
-        loadScript('http://qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js', () => {
 
-        })
     },
     methods: {}
 }
diff --git a/src/views/account/console/index.vue b/src/views/account/console/index.vue
deleted file mode 100644
index cf3d61e..0000000
--- a/src/views/account/console/index.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-    <div id="console" style="height: 690px; /* 开发时请将此样式移除 */">
-        控制台
-    </div>
-</template>
-<script>
-export default {
-    name: 'Console',
-    data() {
-        return { }
-    }
-}
-</script>
diff --git a/src/views/account/login.vue b/src/views/account/login.vue
index e4c4be2..97b894f 100644
--- a/src/views/account/login.vue
+++ b/src/views/account/login.vue
@@ -1,10 +1,10 @@
 <template>
-    <div id="login">
-        <el-row class="loginBody">
-            <el-col :span="12">
-                <img class="loginBackImg" src="http://qiniu.smileyi.top/login-banner">
+    <div class="login-container" style=" border-top: 1px solid #205bb5;">
+        <el-row class="login-body">
+            <el-col :span="5" :offset="4">
+                <img class="login-img" src="http://qiniu.smileyi.top/login-banner">
             </el-col>
-            <el-col :span="12">
+            <el-col :offset="3" :span="12">
                 <el-tabs v-if="formType=='login'" v-model="loginType" class="login-form-tab" style="width: 320px;"
                          @tab-click="loginTypeHandleClick"
                 >
@@ -17,14 +17,22 @@
                                 <el-link icon="el-icon-refresh-left" :underline="false">刷新二维码</el-link>
                             </div>
                             <el-divider style="width: 100px;" />
-                            <div style="display: flex; flex-direction: row;">
-                                <el-link style="margin-left: 20px;">忘记密码</el-link>
-                                <el-link style="margin-left: 20px;" @click="()=>{this.formType='reg'}">立即注册</el-link>
-                                <div class="other-login">
-                                    <svg-icon name="loginQQ" class="other-login-icon" />
-                                    <svg-icon name="loginWx" class="other-login-icon" />
-                                </div>
-                            </div>
+                            <el-row>
+                                <el-col :span="6">
+                                    <el-link class="login-tip">忘记密码</el-link>
+                                </el-col>
+                                <el-col :span="6">
+                                    <el-link class="login-tip">
+                                        <el-link class="login-tip" @click="()=>{this.formType='reg'}">立即注册</el-link>
+                                    </el-link>
+                                </el-col>
+                                <el-col :span="9" :offset="3">
+                                    <div class="other-login">
+                                        <svg-icon name="loginQQ" class="other-login-icon" />
+                                        <svg-icon name="loginWx" class="other-login-icon" />
+                                    </div>
+                                </el-col>
+                            </el-row>
                             <el-divider style="width: 100px;" />
                             <p class="login-tip">关于TDuckCloud登录</p>
                             <p class="login-tip">
@@ -35,7 +43,8 @@
                         </div>
                     </el-tab-pane>
                     <el-tab-pane label="账号密码登录" name="account">
-                        <el-form ref="accountLoginForm" label-position="top" size="small" :model="accountForm" :rules="accountLoginRules"
+                        <el-form ref="accountLoginForm" label-position="top" size="small" :model="accountForm"
+                                 :rules="accountLoginRules"
                                  class="account-login-form" status-icon hide-required-asterisk
                         >
                             <el-form-item label="手机号/邮箱登录" prop="account">
@@ -47,27 +56,49 @@
                                 />
                             </el-form-item>
                             <el-form-item label="">
-                                <el-radio v-model="agreeProtocol" label="" />
-                                <span class="protocol-tip">我已同意</span>
-                                <el-link :underline="false" type="primary" class="protocol-tip">《TDuck用户服务协议》</el-link>
-                                <el-link :underline="false" type="primary" class="protocol-tip" style="float: right;">
-                                    忘记密码？
-                                </el-link>
+                                <el-row type="flex" align="middle">
+                                    <el-col :span="3">
+                                        <el-radio v-model="agreeProtocol" label="" />
+                                    </el-col>
+                                    <el-col :span="4">
+                                        <span class="protocol-tip">我已同意</span>
+                                    </el-col>
+                                    <el-col :span="10">
+                                        <el-link :underline="false" type="primary" class="protocol-tip">
+                                            《TDuck用户服务协议》
+                                        </el-link>
+                                    </el-col>
+                                    <el-col :span="6" :offset="1">
+                                        <el-link :underline="false" type="primary" class="protocol-tip">
+                                            忘记密码？
+                                        </el-link>
+                                    </el-col>
+                                </el-row>
                             </el-form-item>
                             <el-form-item>
                                 <el-button style="width: 100%;" type="primary" @click="loginHandle">登录</el-button>
                             </el-form-item>
-                            <el-form-item style="text-align: center;">
-                                <span class="protocol-tip">使用第三方登录 或 </span>
-                                <el-link :underline="false" type="primary" class="protocol-tip"
-                                         @click="()=>{this.formType='reg'}"
-                                >
-                                    立即注册
-                                </el-link>
-                                <div class="other-login">
-                                    <svg-icon name="loginQQ" class="other-login-icon" />
-                                    <svg-icon name="loginWx" class="other-login-icon" />
-                                </div>
+                            <el-form-item>
+                                <el-row type="flex" align="middle">
+                                    <el-col :span="8" :offset="6">
+                                        <span class="protocol-tip">使用第三方登录 或 </span>
+                                    </el-col>
+                                    <el-col :span="6">
+                                        <el-link :underline="false" type="primary" class="protocol-tip"
+                                                 @click="()=>{this.formType='reg'}"
+                                        >
+                                            立即注册
+                                        </el-link>
+                                    </el-col>
+                                </el-row>
+                                <el-row>
+                                    <el-col :offset="8">
+                                        <div class="other-login">
+                                            <svg-icon name="loginQQ" class="other-login-icon" />
+                                            <svg-icon name="loginWx" class="other-login-icon" />
+                                        </div>
+                                    </el-col>
+                                </el-row>
                             </el-form-item>
                         </el-form>
                     </el-tab-pane>
@@ -260,12 +291,12 @@ export default {
 }
 </script>
 <style scoped>
-.loginBody {
-    margin: 70px 0 0 0;
+
+.login-body {
+    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+    margin: 90px 0 0 0;
 }
-.loginBackImg {
-    left: 271px;
-    top: 353px;
+.login-img {
     width: 489px;
     height: 447px;
 }
@@ -284,8 +315,8 @@ export default {
         }
     }
 }
-.other-login {
-    margin-left: auto;
+.other-login .other-login-icon {
+    margin-left: 10px;
 }
 .login-tip {
     color: rgba(16, 16, 16, 1);
@@ -300,7 +331,15 @@ export default {
 .account-login-form .el-radio {
     margin-right: 0;
 }
+.wx-login .el-divider--horizontal {
+    margin: 10px 0;
+}
 .account-login-form .protocol-tip {
     font-size: 12px;
+    line-height: 40px;
+}
+.el-form-item--small .el-form-item__content,
+.el-form-item--small .el-form-item__label {
+    line-height: 40px;
 }
 </style>
diff --git a/src/views/form/PreView.vue b/src/views/form/PreView.vue
index 2c14111..481b16f 100644
--- a/src/views/form/PreView.vue
+++ b/src/views/form/PreView.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="preview-form">
         <div class="" v-if="!formState">
-            <el-row type="flex" justify="center" align="middle">
+            <el-row  type="flex" justify="center" align="middle">
                 <el-col :sm="{span:20}" :xs="{span:24,offset:0}" style="text-align: center">
                     <h4 class="form-name-text">
                         {{formConf.title}}</h4>
@@ -15,10 +15,11 @@
                 </el-col>
             </el-row>
             <el-divider></el-divider>
-            <parser v-if="formConf.fields.length" :form-conf="formConf" @submit="sumbitForm1"/>
+            <parser v-if="formConf.fields.length" :form-conf="formConf" @submit="submitForm"/>
         </div>
         <div v-if="formState">
-            <p style="text-align: center">您已完成本次问卷，感谢您的帮助与支持</p>
+            <p style="text-align: center">
+                <i class="el-icon-check"/>您已完成本次问卷，感谢您的帮助与支持</p>
         </div>
     </div>
 </template>
@@ -46,6 +47,7 @@ export default {
     data() {
         return {
             key2: +new Date(),
+            projectKey: '',
             formState: false,//是否填写
             formConf: {
                 fields: [],
@@ -72,6 +74,7 @@ export default {
                 disabled: false,
                 span: 24,
                 formBtns: true,
+                resetBtn: true ,
                 unFocusedComponentBorder: true
             }
         }
@@ -82,7 +85,7 @@ export default {
         this.formConf.size = window.innerWidth < 480 ? 'medium' : 'small'
     },
     mounted() {
-        this.$api.get(`/project/query/details/${this.$route.query.key}`).then(res => {
+        this.$api.get(`/user/project/query/details/${this.$route.query.key}`).then(res => {
             if (res.data) {
                 let fields = res.data.projectItems.map(item => {
                     return dbDataConvertForItemJson(item)
@@ -92,6 +95,7 @@ export default {
                 this.formConf.description = res.data.project.describe
             }
         })
+        this.projectKey = this.$route.query.key
     },
     methods: {
         fillFormData(form, data) {
@@ -102,18 +106,10 @@ export default {
                 }
             })
         },
-        change() {
-            this.key2 = +new Date()
-            const t = this.formConf
-            this.formConf = this.formConf2
-            this.formConf2 = t
-        },
-        sumbitForm1(data) {
-            console.log('sumbitForm1提交数据：', data)
-            this.formState = true
-        },
-        sumbitForm2(data) {
-            console.log('sumbitForm2提交数据：', data)
+        submitForm(data) {
+            this.$api.post('/user/project/result/create', {'projectKey': this.projectKey, 'collectData': data}).then(res => {
+                this.formState = true
+            })
         }
     }
 }
diff --git a/src/views/form/editor.vue b/src/views/form/editor.vue
new file mode 100644
index 0000000..849aa80
--- /dev/null
+++ b/src/views/form/editor.vue
@@ -0,0 +1,388 @@
+<template>
+    <div class="container">
+        <div class="left-board">
+            <el-scrollbar class="left-scrollbar">
+                <div class="components-list">
+                    <div v-for="(item, listIndex) in leftComponents" :key="listIndex">
+                        <div class="components-title">
+                            <svg-icon name="component"/>
+                            {{ item.title }}
+                        </div>
+                        <draggable
+                            class="components-draggable"
+                            :list="item.list"
+                            :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
+                            :clone="cloneComponent"
+                            draggable=".components-item"
+                            :sort="false"
+                            @end="onEnd"
+                        >
+                            <div
+                                v-for="(element, index) in item.list"
+                                :key="index"
+                                class="components-item"
+                                @click="addComponent(element)"
+                            >
+                                <div class="components-body">
+                                    <svg-icon :name="element.__config__.tagIcon"/>
+                                    {{ element.__config__.label }}
+                                </div>
+                            </div>
+                        </draggable>
+                    </div>
+                </div>
+            </el-scrollbar>
+        </div>
+        <div class="center-board">
+
+            <el-scrollbar class="center-scrollbar">
+                <el-row class="center-board-row" :gutter="formConf.gutter">
+                    <el-row type="flex" justify="center" align="middle">
+                        <el-col :span="20" style="text-align: center">
+                            <h4 class="form-name-text" contenteditable="true"
+                                @blur="(event)=>{
+                                    formConf.title=event.target.innerText;
+                                    this.saveProjectInfo()}">
+                                {{formConf.title}}</h4>
+                        </el-col>
+                    </el-row>
+                    <el-row type="flex" justify="center" align="middle">
+                        <el-col :span="20" style="text-align: center">
+                            <p class="form-name-text" contenteditable="true"
+                               @blur="(event)=>{
+                                   formConf.description=event.target.innerText;
+                                   this.saveProjectInfo()}">
+                                {{formConf.description}}
+                            </p>
+                        </el-col>
+                    </el-row>
+                    <el-divider></el-divider>
+                    <el-form
+                        :size="formConf.size"
+                        :label-position="formConf.labelPosition"
+                        :disabled="formConf.disabled"
+                        :label-width="formConf.labelWidth + 'px'"
+                    >
+                        <draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup"  @end="onItemEnd">
+                            <draggable-item
+                                v-for="(item, index) in drawingList"
+                                :key="item.renderKey"
+                                :drawing-list="drawingList"
+                                :current-item="item"
+                                :index="index"
+                                :active-id="activeId"
+                                :form-conf="formConf"
+                                @activeItem="activeFormItem"
+                                @changeLabel="changeLabel"
+                                @copyItem="drawingItemCopy"
+                                @deleteItem="drawingItemDelete"
+                            />
+                        </draggable>
+                        <div v-show="!drawingList.length" class="empty-info">
+                            从左侧拖入或点选组件进行表单设计
+                        </div>
+                    </el-form>
+                </el-row>
+            </el-scrollbar>
+        </div>
+        <right-panel
+            v-if="activeData"
+            :active-data="activeData"
+            :form-conf="formConf"
+            :show-field="!!drawingList.length"
+            @tag-change="tagChange"
+            @data-change="updateProjectItemInfo"
+        />
+    </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+import {debounce} from 'throttle-debounce'
+import render from '@/components/render/render'
+import RightPanel from './RightPanel'
+
+import {
+    inputComponents, selectComponents, formConf
+} from '@/components/generator/config'
+import {
+    exportDefault, beautifierConf, isNumberStr, titleCase, deepClone
+} from '@/utils/index'
+import {formItemConvertData} from '@/utils/convert'
+import drawingDefalut from '@/components/generator/drawingDefalut'
+import DraggableItem from './DraggableItem'
+import {
+    getDrawingList, saveDrawingList, getIdGlobal, saveIdGlobal, getFormConf
+} from '@/utils/db'
+
+let oldActiveId
+let tempActiveData
+let drawingListInDB
+let formConfInDB
+let idGlobal
+
+export default {
+    components: {
+        draggable,
+        render,
+        RightPanel,
+        DraggableItem
+    },
+    props:{
+        projectKey:''
+    },
+    data() {
+        return {
+            idGlobal,
+            formConf,
+            inputComponents,
+            selectComponents,
+            labelWidth: 100,
+            drawingList: drawingDefalut,
+            drawingData: {},
+            activeId: drawingDefalut.length != 0 ? drawingDefalut[0].formId : 0,
+            formData: {},
+            dialogVisible: false,
+            generateConf: null,
+            showFileName: false,
+            activeData: drawingDefalut ? drawingDefalut[0] : null,
+            saveDrawingListDebounce: debounce(340, saveDrawingList),
+            saveIdGlobalDebounce: debounce(340, saveIdGlobal),
+            leftComponents: [
+                {
+                    title: '输入型组件',
+                    list: inputComponents
+                },
+                {
+                    title: '选择型组件',
+                    list: selectComponents
+                }
+            ]
+        }
+    },
+    computed: {},
+    watch: {
+        // eslint-disable-next-line func-names
+        'activeData.__config__.label': function(val, oldVal) {
+            if (
+                this.activeData.placeholder === undefined
+                || !this.activeData.__config__.tag
+                || oldActiveId !== this.activeId
+            ) {
+                return
+            }
+            this.activeData.placeholder = this.activeData.placeholder.replace(oldVal, '') + val
+        },
+        activeId: {
+            handler(val) {
+                oldActiveId = val
+            },
+            immediate: true
+        },
+        drawingList: {
+            handler(val) {
+                this.saveDrawingListDebounce(val, this.projectKey)
+                if (val.length === 0) this.idGlobal = 100
+            },
+            deep: true
+        },
+        idGlobal: {
+            handler(val) {
+                if (val) {
+                    this.saveIdGlobalDebounce(val, this.projectKey)
+                }
+            },
+            immediate: true
+        }
+    },
+    mounted() {
+        //项目key
+        let projectKey = this.projectKey
+        //表单内容 如果表单为空 使用默认表单
+        drawingListInDB = getDrawingList(projectKey)
+        if (Array.isArray(drawingListInDB) && drawingListInDB.length > 0) {
+            this.drawingList = drawingListInDB
+        } else {
+            this.drawingList = drawingDefalut
+        }
+        if (this.drawingList.length) {
+            this.activeFormItem(this.drawingList[0])
+        }
+        //获取表单配置
+        // formConfInDB = getFormConf(projectKey)
+        // if (formConfInDB) {
+        //     this.formConf = formConfInDB
+        // }
+        //获取后台数据
+        this.$api.get(`/user/project/query/${projectKey}`).then(res => {
+            this.formConf.title = res.data.name
+            this.formConf.description = res.data.describe
+        })
+        //全局组件Id
+        if (getIdGlobal(projectKey)) {
+            this.idGlobal = getIdGlobal(projectKey)
+        }
+        this.projectKey = projectKey
+
+    },
+    methods: {
+        saveProjectInfo: debounce(430, true, function() {
+            this.$api.post('/user/project/update', {
+                'key': this.projectKey,
+                'name': this.formConf.title,
+                'describe': this.formConf.description
+            }).then((res) => {
+
+            })
+        }),
+        updateProjectItemInfo(val) {
+            let data = formItemConvertData(val, this.projectKey)
+            this.$api.post('/user/project/item/update', data).then((res) => {
+
+            })
+        },
+        deleteProjectItemInfo(val) {
+            console.log(val)
+            let data = formItemConvertData(val, this.projectKey)
+            this.$api.post('/user/project/item/delete', data).then((res) => {
+
+            })
+        },
+        saveProjectItemInfo(item) {
+            let params = formItemConvertData(item, this.projectKey)
+            this.$api.post('/user/project/item/create', params).then(res => {
+                item.sort = res.data.sort
+            })
+        },
+        activeFormItem(currentItem) {
+            this.activeData = currentItem
+            this.activeId = currentItem.__config__.formId
+        },
+        changeLabel(currentItem, value) {
+            console.log(currentItem)
+            console.log(value)
+        },
+        onEnd(obj) {
+            if (obj.from !== obj.to) {
+                this.activeData = tempActiveData
+                this.activeId = this.idGlobal
+            }
+        },
+        onItemEnd(obj){
+            console.log(obj)
+            let params={'projectKey':this.projectKey}
+            if(this.drawingList[obj.newIndex-1]){
+                let sort1=this.drawingList[obj.newIndex-1].sort
+                params.beforePosition=sort1
+            }
+            if(this.drawingList[obj.newIndex+1]){
+                let sort2=  this.drawingList[obj.newIndex+1].sort
+                params.afterPosition=sort2
+            }
+            params.formItemId=this.drawingList[obj.newIndex].__config__.formId
+            this.$api.post('/user/project/item/sort', params).then(res => {
+                this.drawingList[obj.newIndex].sort = res.data.sort
+            })
+        },
+        addComponent(item) {
+            const clone = this.cloneComponent(item)
+            this.drawingList.push(clone)
+            this.activeFormItem(clone)
+        },
+        cloneComponent(origin,save=true) {
+            const clone = deepClone(origin)
+            const config = clone.__config__
+            config.span = this.formConf.span // 生成代码时，会根据span做精简判断
+            this.createIdAndKey(clone)
+            clone.placeholder !== undefined && (clone.placeholder += config.label)
+            tempActiveData = clone
+            if(save){
+                this.saveProjectItemInfo(clone)
+            }
+            return tempActiveData
+        },
+        createIdAndKey(item) {
+            const config = item.__config__
+            config.formId = ++this.idGlobal
+            config.renderKey = `${config.formId}${+new Date()}` // 改变renderKey后可以实现强制更新组件
+            if (config.layout === 'colFormItem') {
+                item.__vModel__ = `field${this.idGlobal}`
+            } else if (config.layout === 'rowFormItem') {
+                config.componentName = `row${this.idGlobal}`
+                !Array.isArray(config.children) && (config.children = [])
+                delete config.label // rowFormItem无需配置label属性
+            }
+            if (Array.isArray(config.children)) {
+                config.children = config.children.map(childItem => this.createIdAndKey(childItem))
+            }
+            return item
+        },
+        empty() {
+            this.$confirm('确定要清空所有组件吗？', '提示', {type: 'warning'})
+                .then(
+                    () => {
+                        this.drawingList = []
+                        this.idGlobal = 100
+                    }
+                )
+        },
+        drawingItemCopy(item, list) {
+            let clone = deepClone(item)
+            clone = this.createIdAndKey(clone)
+            list.push(clone)
+            this.activeFormItem(clone)
+            this.saveProjectItemInfo(clone)
+        },
+        drawingItemDelete(index, list) {
+            let item = list[index]
+            list.splice(index, 1)
+            this.$nextTick(() => {
+                const len = this.drawingList.length
+                if (len) {
+                    this.activeFormItem(this.drawingList[len - 1])
+                }
+            })
+            this.deleteProjectItemInfo(item)
+        },
+        tagChange(newTag) {
+            newTag = this.cloneComponent(newTag,false)
+            const config = newTag.__config__
+            newTag.__vModel__ = this.activeData.__vModel__
+            newTag.sort=this.activeData.sort
+            config.formId = this.activeId
+            config.span = this.activeData.__config__.span
+            this.activeData.__config__.tag = config.tag
+            this.activeData.__config__.tagIcon = config.tagIcon
+            this.activeData.__config__.document = config.document
+            this.activeData.typeId=newTag.typeId
+            if (typeof this.activeData.__config__.defaultValue === typeof config.defaultValue) {
+                config.defaultValue = this.activeData.__config__.defaultValue
+            }
+            Object.keys(newTag)
+                .forEach(key => {
+                    if (this.activeData[key] !== undefined) {
+                        newTag[key] = this.activeData[key]
+                    }
+                })
+            this.activeData = newTag
+            this.updateProjectItemInfo(newTag)
+            this.updateDrawingList(newTag, this.drawingList)
+        },
+        updateDrawingList(newTag, list) {
+            const index = list.findIndex(item => item.__config__.formId === this.activeId)
+            if (index > -1) {
+                list.splice(index, 1, newTag)
+            } else {
+                list.forEach(item => {
+                    if (Array.isArray(item.__config__.children)) this.updateDrawingList(newTag, item.__config__.children)
+                })
+            }
+        }
+    }
+}
+</script>
+
+<style lang='scss'>
+@import '@/assets/styles/home';
+@import '@/assets/styles/index';
+</style>
diff --git a/src/views/form/index.vue b/src/views/form/index.vue
index 5adb9b3..66069a0 100644
--- a/src/views/form/index.vue
+++ b/src/views/form/index.vue
@@ -1,410 +1,57 @@
 <template>
     <div class="container">
-        <div class="left-board">
-            <el-row>
-                <el-col :offset="1" :span="2">
-                    <el-button size="mini" round @click="$router.back(-1)">
-                        <i class="el-icon-arrow-left"/>
-                        返回
-                    </el-button>
-
-                </el-col>
-                <el-col :span="2" :offset="5">
-                    <el-button size="mini" round @click="$router.back(-1)">
-                        <i class="el-icon-arrow-left"/>
-                        发布
-                    </el-button>
-                </el-col>
-            </el-row>
-            <el-scrollbar class="left-scrollbar">
-                <div class="components-list">
-                    <div v-for="(item, listIndex) in leftComponents" :key="listIndex">
-                        <div class="components-title">
-                            <svg-icon name="component"/>
-                            {{ item.title }}
-                        </div>
-                        <draggable
-                            class="components-draggable"
-                            :list="item.list"
-                            :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
-                            :clone="cloneComponent"
-                            draggable=".components-item"
-                            :sort="false"
-                            @end="onEnd"
-                        >
-                            <div
-                                v-for="(element, index) in item.list"
-                                :key="index"
-                                class="components-item"
-                                @click="addComponent(element)"
-                            >
-                                <div class="components-body">
-                                    <svg-icon :name="element.__config__.tagIcon"/>
-                                    {{ element.__config__.label }}
-                                </div>
-                            </div>
-                        </draggable>
-                    </div>
-                </div>
-            </el-scrollbar>
-        </div>
-
-        <div class="center-board">
-            <el-row type="flex" align="middle" justify="justify">
-                <el-col :span="18" :offset="6">
-                    <el-menu default-active="1" style="background-color: transparent" mode="horizontal">
-                        <el-menu-item index="1">编辑</el-menu-item>
-                        <el-menu-item index="2">外观</el-menu-item>
-                        <el-menu-item index="3">设置</el-menu-item>
-                        <el-menu-item index="4">发布</el-menu-item>
-                        <el-menu-item index="5">统计</el-menu-item>
-                    </el-menu>
-                </el-col>
-            </el-row>
-            <el-scrollbar class="center-scrollbar">
-                <el-row class="center-board-row" :gutter="formConf.gutter">
-                    <el-row type="flex" justify="center" align="middle">
-                        <el-col :span="20" style="text-align: center">
-                            <h4 class="form-name-text" contenteditable="true"
-                                @blur="(event)=>{
-                                    formConf.title=event.target.innerText;
-                                    this.saveProjectInfo()}">
-                                {{formConf.title}}</h4>
-                        </el-col>
-                    </el-row>
-                    <el-row type="flex" justify="center" align="middle">
-                        <el-col :span="20" style="text-align: center">
-                            <p class="form-name-text" contenteditable="true"
-                               @blur="(event)=>{
-                                   formConf.description=event.target.innerText;
-                                   this.saveProjectInfo()}">
-                                {{formConf.description}}
-                            </p>
-                        </el-col>
-                    </el-row>
-                    <el-divider></el-divider>
-                    <el-form
-                        :size="formConf.size"
-                        :label-position="formConf.labelPosition"
-                        :disabled="formConf.disabled"
-                        :label-width="formConf.labelWidth + 'px'"
-                    >
-                        <draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup"  @end="onItemEnd">
-                            <draggable-item
-                                v-for="(item, index) in drawingList"
-                                :key="item.renderKey"
-                                :drawing-list="drawingList"
-                                :current-item="item"
-                                :index="index"
-                                :active-id="activeId"
-                                :form-conf="formConf"
-                                @activeItem="activeFormItem"
-                                @changeLabel="changeLabel"
-                                @copyItem="drawingItemCopy"
-                                @deleteItem="drawingItemDelete"
-                            />
-                        </draggable>
-                        <div v-show="!drawingList.length" class="empty-info">
-                            从左侧拖入或点选组件进行表单设计
-                        </div>
-                    </el-form>
-                </el-row>
-            </el-scrollbar>
-        </div>
-        <right-panel
-            v-if="activeData"
-            :active-data="activeData"
-            :form-conf="formConf"
-            :show-field="!!drawingList.length"
-            @tag-change="tagChange"
-            @data-change="updateProjectItemInfo"
-        />
+        <el-row type="flex" align="middle" justify="justify">
+            <el-col :offset="1" :span="4">
+                <el-button size="mini" round @click="$router.back(-1)">
+                    <i class="el-icon-arrow-left"/>
+                    返回
+                </el-button>
+                <el-button size="mini" round>
+                    <router-link target="_blank" :to="{path:'/project/preview',query:{key:this.projectKey}}">发布预览
+                    </router-link>
+                </el-button>
+            </el-col>
+            <el-col :span="10" :offset="3">
+                <el-menu :default-active="activeIndex" @select="handleSelect" style="background-color: transparent"
+                         mode="horizontal">
+                    <el-menu-item index="1">编辑</el-menu-item>
+                    <el-menu-item index="2">外观</el-menu-item>
+                    <el-menu-item index="3">设置</el-menu-item>
+                    <el-menu-item index="4">发布</el-menu-item>
+                    <el-menu-item index="5">统计</el-menu-item>
+                </el-menu>
+            </el-col>
+        </el-row>
+        <editor :projectKey="projectKey" v-if="activeIndex==1&&projectKey"/>
+        <theme :projectKey="projectKey" v-if="activeIndex==2"/>
     </div>
 </template>
 
 <script>
-import draggable from 'vuedraggable'
-import {debounce} from 'throttle-debounce'
-import render from '@/components/render/render'
-import RightPanel from './RightPanel'
-
-import {
-    inputComponents, selectComponents, formConf
-} from '@/components/generator/config'
-import {
-    exportDefault, beautifierConf, isNumberStr, titleCase, deepClone
-} from '@/utils/index'
-import {formItemConvertData} from '@/utils/convert'
-import drawingDefalut from '@/components/generator/drawingDefalut'
-import DraggableItem from './DraggableItem'
-import {
-    getDrawingList, saveDrawingList, getIdGlobal, saveIdGlobal, getFormConf
-} from '@/utils/db'
-
-let beautifier
-const emptyActiveData = {
-    style: {},
-    autosize: {}
-}
-let oldActiveId
-let tempActiveData
-let drawingListInDB
-let formConfInDB
-let idGlobal
+import editor from './editor'
+import theme from './theme'
 
 export default {
     components: {
-        draggable,
-        render,
-        RightPanel,
-        DraggableItem
+        editor,
+        theme
     },
     data() {
         return {
-            idGlobal,
-            formConf,
-            inputComponents,
-            selectComponents,
-            labelWidth: 100,
-            drawingList: drawingDefalut,
-            drawingData: {},
-            activeId: drawingDefalut.length != 0 ? drawingDefalut[0].formId : 0,
-            formData: {},
-            dialogVisible: false,
-            generateConf: null,
-            showFileName: false,
-            activeData: drawingDefalut ? drawingDefalut[0] : null,
-            saveDrawingListDebounce: debounce(340, saveDrawingList),
-            saveIdGlobalDebounce: debounce(340, saveIdGlobal),
-            projectKey: '',
-            leftComponents: [
-                {
-                    title: '输入型组件',
-                    list: inputComponents
-                },
-                {
-                    title: '选择型组件',
-                    list: selectComponents
-                }
-            ]
+            activeIndex: '2',
+            projectKey: ''
         }
     },
     computed: {},
-    watch: {
-        // eslint-disable-next-line func-names
-        'activeData.__config__.label': function(val, oldVal) {
-            if (
-                this.activeData.placeholder === undefined
-                || !this.activeData.__config__.tag
-                || oldActiveId !== this.activeId
-            ) {
-                return
-            }
-            this.activeData.placeholder = this.activeData.placeholder.replace(oldVal, '') + val
-        },
-        activeId: {
-            handler(val) {
-                oldActiveId = val
-            },
-            immediate: true
-        },
-        drawingList: {
-            handler(val) {
-                this.saveDrawingListDebounce(val, this.projectKey)
-                if (val.length === 0) this.idGlobal = 100
-            },
-            deep: true
-        },
-        idGlobal: {
-            handler(val) {
-                if (val) {
-                    this.saveIdGlobalDebounce(val, this.projectKey)
-                }
-            },
-            immediate: true
-        }
-    },
+    watch: {},
     mounted() {
-        //项目key
-        let projectKey = this.$route.query.key
-        //表单内容 如果表单为空 使用默认表单
-        drawingListInDB = getDrawingList(projectKey)
-        if (Array.isArray(drawingListInDB) && drawingListInDB.length > 0) {
-            this.drawingList = drawingListInDB
-        } else {
-            this.drawingList = drawingDefalut
-        }
-        if (this.drawingList.length) {
-            this.activeFormItem(this.drawingList[0])
-        }
-        //获取表单配置
-        // formConfInDB = getFormConf(projectKey)
-        // if (formConfInDB) {
-        //     this.formConf = formConfInDB
-        // }
-        //获取后台数据
-        this.$api.get(`/project/query/${projectKey}`).then(res => {
-            this.formConf.title = res.data.name
-            this.formConf.description = res.data.describe
-        })
-        //全局组件Id
-        if (getIdGlobal(projectKey)) {
-            this.idGlobal = getIdGlobal(projectKey)
-        }
-        this.projectKey = projectKey
-
+        this.projectKey = this.$route.query.key
+        console.log(this.projectKey)
     },
     methods: {
-        saveProjectInfo: debounce(430, true, function() {
-            this.$api.post('/project/update', {
-                'key': this.projectKey,
-                'name': this.formConf.title,
-                'describe': this.formConf.description
-            }).then((res) => {
-
-            })
-        }),
-        updateProjectItemInfo(val) {
-            let data = formItemConvertData(val, this.projectKey)
-            this.$api.post('/project/item/update', data).then((res) => {
-
-            })
-        },
-        deleteProjectItemInfo(val) {
-            console.log(val)
-            let data = formItemConvertData(val, this.projectKey)
-            this.$api.post('/project/item/delete', data).then((res) => {
-
-            })
-        },
-        saveProjectItemInfo(item) {
-            let params = formItemConvertData(item, this.projectKey)
-            this.$api.post('/project/item/create', params).then(res => {
-                item.sort = res.data.sort
-            })
-        },
-        activeFormItem(currentItem) {
-            this.activeData = currentItem
-            this.activeId = currentItem.__config__.formId
-        },
-        changeLabel(currentItem, value) {
-            console.log(currentItem)
-            console.log(value)
-        },
-        onEnd(obj) {
-            if (obj.from !== obj.to) {
-                this.activeData = tempActiveData
-                this.activeId = this.idGlobal
-            }
-        },
-        onItemEnd(obj){
-            console.log(obj)
-            let params={'projectKey':this.projectKey}
-            if(this.drawingList[obj.newIndex-1]){
-                let sort1=this.drawingList[obj.newIndex-1].sort
-                params.beforePosition=sort1
-            }
-            if(this.drawingList[obj.newIndex+1]){
-                let sort2=  this.drawingList[obj.newIndex+1].sort
-                params.afterPosition=sort2
-            }
-            params.formItemId=this.drawingList[obj.newIndex].__config__.formId
-            this.$api.post('/project/item/sort', params).then(res => {
-                this.drawingList[obj.newIndex].sort = res.data.sort
-            })
-        },
-        addComponent(item) {
-            const clone = this.cloneComponent(item)
-            this.drawingList.push(clone)
-            this.activeFormItem(clone)
-        },
-        cloneComponent(origin,save=true) {
-            const clone = deepClone(origin)
-            const config = clone.__config__
-            config.span = this.formConf.span // 生成代码时，会根据span做精简判断
-            this.createIdAndKey(clone)
-            clone.placeholder !== undefined && (clone.placeholder += config.label)
-            tempActiveData = clone
-            if(save){
-                this.saveProjectItemInfo(clone)
-            }
-            return tempActiveData
-        },
-        createIdAndKey(item) {
-            const config = item.__config__
-            config.formId = ++this.idGlobal
-            config.renderKey = `${config.formId}${+new Date()}` // 改变renderKey后可以实现强制更新组件
-            if (config.layout === 'colFormItem') {
-                item.__vModel__ = `field${this.idGlobal}`
-            } else if (config.layout === 'rowFormItem') {
-                config.componentName = `row${this.idGlobal}`
-                !Array.isArray(config.children) && (config.children = [])
-                delete config.label // rowFormItem无需配置label属性
-            }
-            if (Array.isArray(config.children)) {
-                config.children = config.children.map(childItem => this.createIdAndKey(childItem))
-            }
-            return item
-        },
-        empty() {
-            this.$confirm('确定要清空所有组件吗？', '提示', {type: 'warning'})
-                .then(
-                    () => {
-                        this.drawingList = []
-                        this.idGlobal = 100
-                    }
-                )
-        },
-        drawingItemCopy(item, list) {
-            let clone = deepClone(item)
-            clone = this.createIdAndKey(clone)
-            list.push(clone)
-            this.activeFormItem(clone)
-            this.saveProjectItemInfo(clone)
-        },
-        drawingItemDelete(index, list) {
-            let item = list[index]
-            list.splice(index, 1)
-            this.$nextTick(() => {
-                const len = this.drawingList.length
-                if (len) {
-                    this.activeFormItem(this.drawingList[len - 1])
-                }
-            })
-            this.deleteProjectItemInfo(item)
-        },
-        tagChange(newTag) {
-            newTag = this.cloneComponent(newTag,false)
-            const config = newTag.__config__
-            newTag.__vModel__ = this.activeData.__vModel__
-            newTag.sort=this.activeData.sort
-            config.formId = this.activeId
-            config.span = this.activeData.__config__.span
-            this.activeData.__config__.tag = config.tag
-            this.activeData.__config__.tagIcon = config.tagIcon
-            this.activeData.__config__.document = config.document
-            this.activeData.typeId=newTag.typeId
-            if (typeof this.activeData.__config__.defaultValue === typeof config.defaultValue) {
-                config.defaultValue = this.activeData.__config__.defaultValue
-            }
-            Object.keys(newTag)
-                .forEach(key => {
-                    if (this.activeData[key] !== undefined) {
-                        newTag[key] = this.activeData[key]
-                    }
-                })
-            this.activeData = newTag
-            this.updateProjectItemInfo(newTag)
-            this.updateDrawingList(newTag, this.drawingList)
-        },
-        updateDrawingList(newTag, list) {
-            const index = list.findIndex(item => item.__config__.formId === this.activeId)
-            if (index > -1) {
-                list.splice(index, 1, newTag)
-            } else {
-                list.forEach(item => {
-                    if (Array.isArray(item.__config__.children)) this.updateDrawingList(newTag, item.__config__.children)
-                })
+        handleSelect(key, keyPath) {
+            if (key) {
+                this.activeIndex = key
             }
         }
     }
@@ -412,6 +59,4 @@ export default {
 </script>
 
 <style lang='scss'>
-@import '@/assets/styles/home';
-@import '@/assets/styles/index';
 </style>
diff --git a/src/views/form/theme.vue b/src/views/form/theme.vue
new file mode 100644
index 0000000..db2feeb
--- /dev/null
+++ b/src/views/form/theme.vue
@@ -0,0 +1,133 @@
+<template xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+    <div class="theme-container">
+        <el-row>
+            <el-col :span="8" :offset="1">
+                <div class="left-container">
+                    <p class="theme-title">外观主题</p>
+                    <el-row>
+                        <el-col :span="3">
+                            <span class="theme-prompt-text">风格</span>
+                        </el-col>
+                        <el-col :span="3" v-for="item in styleList">
+                            <span class="style-btn">{{item.label}}</span>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="3">
+                            <span class="theme-prompt-text">颜色</span>
+                        </el-col>
+                        <el-col v-bind:style="{backgroundColor: c}" class="color-btn" :span="3" v-for="c in colorList">
+                        </el-col>
+                    </el-row>
+                </div>
+            </el-col>
+            <el-col :span="8">
+
+            </el-col>
+            <el-col :span="8">
+                外观设置
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'theme',
+    data() {
+        return {
+            styleList: [
+                {'label': '节日', 'key': 'festival'},
+                {'label': '亲子', 'key': 'parent_child'},
+                {'label': '风景', 'key': 'scenery'},
+                {'label': '职业', 'key': 'occupation'},
+                {'label': '校园', 'key': 'school'},
+                {'label': '商务', 'key': 'commerce'},
+                {'label': '其他', 'key': 'others'},
+                {'label': '餐饮', 'key': 'catering'},
+                {'label': '防疫', 'key': 'fangyi'}
+            ],
+            colorList: [
+                '#FF6D56',
+                '#F8E71C',
+                '#00BF6F',
+                '#2672FF ',
+                '#7464FF',
+                '#484848',
+                '#EAEAEA',
+                '#804000'
+            ]
+        }
+    }, methods: {
+        tet() {
+        }
+    }
+}
+</script>
+
+<style scoped>
+.theme-container {
+    width: 100%;
+    height: 100%;
+    overflow-y: hidden;
+    background-color: #f7f7f7;
+    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+}
+
+.left-container {
+    width: 341px;
+    height: 845px;
+    line-height: 20px;
+    border-radius: 7px;
+    text-align: center;
+    padding: 30px;
+    border: 1px solid rgba(255, 255, 255, 100);
+    background-color: white;
+}
+
+.style-btn {
+    line-height: 25px;
+    border-radius: 4px;
+    padding: 2px;
+    color: rgba(16, 16, 16, 100);
+    font-size: 14px;
+    margin: 3px;
+    text-align: center;
+    font-family: Arial;
+    border: 1px solid rgba(187, 187, 187, 100);
+}
+
+.theme-title {
+    color: rgba(16, 16, 16, 100);
+    font-size: 24px;
+    text-align: left;
+    font-family: SourceHanSansSC-regular;
+}
+
+.theme-prompt-text {
+    color: rgba(16, 16, 16, 100);
+    font-size: 14px;
+    line-height: 20px;
+    text-align: left;
+    font-family: SourceHanSansSC-regular;
+}
+
+.color-btn {
+    width: 40px;
+    height: 22px;
+    line-height: 20px;
+    border-radius: 4px;
+    background-color: rgba(11, 141, 213, 100);
+    color: rgba(16, 16, 16, 100);
+    font-size: 14px;
+    text-align: center;
+    font-family: Arial;
+    margin: 3px;
+    border: 1px solid rgba(255, 255, 255, 100);
+}
+
+.color-btn:hover,
+.style-btn:hover {
+    cursor: pointer;
+}
+</style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 2cef8e3..e2eb0bc 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-container style="background-color: rgba(247, 247, 247, 100);">
+    <el-container>
         <el-header height="80px" class="homeHeaderView">
             <el-row type="flex" align="middle">
                 <el-col :span="4" :offset="1">
diff --git a/src/views/common/enterprise/index.vue b/src/views/official/enterprise.vue
similarity index 64%
rename from src/views/common/enterprise/index.vue
rename to src/views/official/enterprise.vue
index 28e5f58..bc829ee 100644
--- a/src/views/common/enterprise/index.vue
+++ b/src/views/official/enterprise.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="enterprise" style="height: 690px; /* 开发时请将此样式移除 */">
+    <div id="enterprise">
         企业部署
     </div>
 </template>
diff --git a/src/views/official/index.vue b/src/views/official/index.vue
new file mode 100644
index 0000000..a79398e
--- /dev/null
+++ b/src/views/official/index.vue
@@ -0,0 +1,121 @@
+<template>
+    <div id="welcome">
+        <div class="header-container">
+            <el-row type="flex" align="middle">
+                <el-col class="header-col" :span="3" :offset="3">
+                    <div>
+                        <img src="@/assets/images/indexLogo.png" class="header-logo"
+                             @click="$router.push({path:'/home'})"
+                        >
+                    </div>
+                </el-col>
+                <el-col class="header-col" :span="10" :offset="3">
+                    <el-menu :default-active="menuIndex" mode="horizontal" :router="true" text-color="#205BB5"
+                             active-text-color="#205BB5"
+                    >
+                        <el-menu-item v-for="(item, index) in menuRouters" :key="index" :index="item.routerPath"
+                                      :route="item.routerPath" class="menu-item"
+                        >
+                            {{ item.title }}
+                        </el-menu-item>
+                    </el-menu>
+                </el-col>
+                <el-col class="header-col" :span="3">
+                    <el-button v-if="isLogin" class="header-btn" @click="$router.push({path:'/home'})">控 制 台</el-button>
+                    <el-button v-if="!isLogin&&this.$route.path!='/login' " class="header-btn" @click="$router.push({path:'/login'})">登 录</el-button>
+                </el-col>
+            </el-row>
+        </div>
+        <el-row>
+            <router-view />
+        </el-row>
+    </div>
+</template>
+<script>
+import store from '@/store/index.js'
+
+export default {
+    name: 'Official',
+    data() {
+        return {
+            menuIndex: null,
+            menuRouters: [
+                {
+                    routerPath: '/proposal',
+                    title: '提出建议'
+                },
+                {
+                    routerPath: '/sources',
+                    title: '开源版本'
+                },
+                {
+                    routerPath: '/enterprise',
+                    title: '企业部署'
+                },
+                {
+                    routerPath: '/',
+                    title: '首页'
+                }
+            ]
+        }
+    },
+    computed: {
+        getStore() {
+            return store
+        },
+        isLogin() {
+            return this.getStore.getters['token/isLogin']
+        }
+    },
+    watch: {
+        $route(to) {
+            this.menuIndex = to.path
+        }
+    },
+    mounted() {
+        this.menuIndex = this.$route.path
+    }
+}
+</script>
+<style scoped>
+.header-col,
+.body-col {
+    border: solid thin white;
+}
+.header-container {
+    background-color: white;
+    width: 100%;
+    top: 0;
+    z-index: 100;
+}
+.header-container .header-col .el-menu--horizontal {
+    border: none;
+}
+.header-logo {
+    float: left;
+    cursor: pointer;
+    height: 60px;
+    padding: 25px 0 20px 0;
+}
+.menu-item {
+    line-height: 110px;
+    height: 110px;
+    font-size: 18px;
+    font-weight: 900;
+    float: right;
+}
+.header-btn {
+    margin: 35px 0 35px 20px;
+    float: right;
+    color: #205bb5;
+    border-color: #205bb5;
+}
+.header-btn:focus,
+.header-btn:hover {
+    border-color: #205bb5;
+    color: #205bb5;
+}
+.view_container_content p {
+    color: #205bb5;
+}
+</style>
diff --git a/src/views/welcome.vue b/src/views/official/introduction.vue
similarity index 74%
rename from src/views/welcome.vue
rename to src/views/official/introduction.vue
index ea169ef..c6e38db 100644
--- a/src/views/welcome.vue
+++ b/src/views/official/introduction.vue
@@ -1,39 +1,11 @@
 <template>
-    <div id="welcome">
-        <div class="header-container">
-            <el-row type="flex" align="middle">
-                <el-col class="header-col" :span="3" :offset="2">
-                    <div>
-                        <img src="../assets/images/indexLogo.png" class="header-logo"
-                             @click="$router.push({path:'/home'})"
-                        >
-                    </div>
-                </el-col>
-                <el-col class="header-col" :span="10" :offset="3">
-                    <el-menu :default-active="menuIndex" mode="horizontal" :router="true" text-color="#205BB5"
-                             active-text-color="#205BB5"
-                    >
-                        <el-menu-item v-for="(item, index) in menuRouters" :key="index" :index="item.routerPath"
-                                      :route="item.routerPath" class="menu-item"
-                        >
-                            {{ item.title }}
-                        </el-menu-item>
-                    </el-menu>
-                </el-col>
-                <el-col class="header-col" :span="3">
-                    <el-button v-if="isLogin" class="header-btn" @click="$router.push({path:'/home'})">控 制 台</el-button>
-                    <el-button v-if="!isLogin" class="header-btn" @click="$router.push({path:'/login'})">登 录</el-button>
-                </el-col>
-            </el-row>
-        </div>
-        <div class="welcome-body">
-            <div class="view_container"
-                 :style="menuIndex!=='/'?'border:solid thin #205BB5;border-left:none;border-right:none;':'border:none;'"
-            >
+    <div id="introduction">
+        <div class="introduction-body">
+            <div class="view_container">
                 <el-row>
                     <el-col class="body-col" :span="3" />
                     <el-col class="body-col" :span="18">
-                        <div v-if="menuIndex==='/'">
+                        <div>
                             <el-row>
                                 <el-col :span="14">
                                     <div class="view_container_content">
@@ -66,12 +38,10 @@
                 </el-row>
             </div>
             <el-divider />
-            <div class="view_container"
-                 :style="menuIndex!=='/'?'border:solid thin #205BB5;border-left:none;border-right:none;':'border:none;'"
-            >
+            <div class="view_container">
                 <el-row>
                     <el-col class="body-col" :span="24">
-                        <div v-if="menuIndex==='/'">
+                        <div>
                             <el-row>
                                 <el-col :span="5" :offset="1">
                                     <div class="bodyRight">
@@ -102,7 +72,7 @@
             <div class="view_container">
                 <div class="view_container_content" style="padding: 100px 0;">
                     <el-row type="flex" align="middle">
-                        <el-col :span="10" offset="5">
+                        <el-col :span="10" :offset="5">
                             <p style="font-size: 28px;">TDuck - 填鸭表单</p>
                             <p class="body-title">社区版 / 开源版 / 企业部署 </p>
                             <p class="body-detail">Technology changes the world ——用技术改变世界</p>
@@ -125,7 +95,7 @@
                     </el-row>
                 </div>
             </div>
-            <div class="welcome-footer">
+            <div class="introduction-footer">
                 <el-row>
                     <el-col :span="3" :offset="2">
                         <p class="title">关于我们</p>
@@ -139,83 +109,59 @@
                     <el-col :span="3">
                         <p class="title"> 项目地址</p>
                         <p class="subtitle">
+                            <svg-icon name="gitee" style="width: 14px; height: 14px;" />
                             码云
                         </p>
                         <p class="subtitle">
+                            <svg-icon name="github" style="width: 12px; height: 12px;" />
                             Gitee
                         </p>
                     </el-col>
-                    <el-col :span="3">
-                        <p class="title">  联系方式</p>
+                    <el-col :span="4">
+                        <p class="title"> 联系方式</p>
                         <p class="subtitle">
+                            <i class="el-icon-message" />
                             TDuckServer@tduckcloud.com
                         </p>
                         <p class="subtitle">
-                            +86  15080929435
+                            <i class="el-icon-phone" /> +86 15080929435
                         </p>
                     </el-col>
                     <el-col :span="3">
-                        <p class="title">  友情地址</p>
+                        <p class="title"> 友情地址</p>
                         <p class="subtitle">
                             Element UI
                         </p>
                     </el-col>
-                    <el-col span="3" :offset="3">
-                        <img style="width: 130px; height: 130px;" src="https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2x0aj.png">
+                    <el-col :span="3" :offset="3">
+                        <img style="width: 130px; height: 130px;"
+                             src="https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2x0aj.png"
+                        >
                         <p class="title">微信公众号/关注我们</p>
                     </el-col>
                 </el-row>
                 <el-divider />
                 <p class="subtitle" style="text-align: center;">
-                    Copyright © 2020 TDuckCloud. All Rights Reserved.   湘ICP备19005498号-1    湖南省众达数蔚信息技术有限公司 版权所有
+                    Copyright © 2020 TDuckCloud. All Rights Reserved. 湘ICP备19005498号-1 湖南省众达数蔚信息技术有限公司 版权所有
                 </p>
             </div>
-            <router-view />
         </div>
     </div>
 </template>
 <script>
-import store from '@/store/index.js'
 
 export default {
     data() {
         return {
-            menuIndex: null,
-            menuRouters: [
-                {
-                    routerPath: '/proposal',
-                    title: '提出建议'
-                },
-                {
-                    routerPath: '/sources',
-                    title: '开源版本'
-                },
-                {
-                    routerPath: '/enterprise',
-                    title: '企业部署'
-                },
-                {
-                    routerPath: '/',
-                    title: '首页'
-                }
-            ]
+
         }
     },
     computed: {
-        getStore() {
-            return store
-        },
-        isLogin() {
-            return this.getStore.getters['token/isLogin']
-        }
     },
     watch: {
-        $route(to) {
-            this.menuIndex = to.path
-        }
+
     },
     mounted() {
-        this.menuIndex = this.$route.path
     }
 }
 </script>
@@ -278,7 +224,7 @@ export default {
     border-color: #205bb5;
     color: #fff;
 }
-.welcome-body {
+.introduction-body {
     padding-top: 112px;
 }
 .view_container {
@@ -325,7 +271,7 @@ export default {
     text-align: center;
     border: 1px solid rgba(255, 255, 255, 100);
 }
-.welcome-footer {
+.introduction-footer {
     height: 300px;
     line-height: 20px;
     background-color: rgba(32, 91, 181, 100);
@@ -333,12 +279,12 @@ export default {
     border: 1px solid rgba(187, 187, 187, 100);
     padding: 69px 0 0 0;
 }
-.welcome-footer .title {
+.introduction-footer .title {
     color: rgba(255, 255, 255, 100);
     font-size: 20px;
     text-align: left;
 }
-.welcome-footer .subtitle {
+.introduction-footer .subtitle {
     color: rgba(255, 255, 255, 100);
     font-size: 14px;
     text-align: left;
diff --git a/src/views/common/proposal/index.vue b/src/views/official/proposal.vue
similarity index 64%
rename from src/views/common/proposal/index.vue
rename to src/views/official/proposal.vue
index 511baea..c1d986a 100644
--- a/src/views/common/proposal/index.vue
+++ b/src/views/official/proposal.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="proposal" style="height: 690px; /* 开发时请将此样式移除 */">
+    <div id="proposal">
         提出建议
     </div>
 </template>
diff --git a/src/views/common/sources/index.vue b/src/views/official/sources.vue
similarity index 64%
rename from src/views/common/sources/index.vue
rename to src/views/official/sources.vue
index 7483af7..3303bdb 100644
--- a/src/views/common/sources/index.vue
+++ b/src/views/official/sources.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="sources" style="height: 690px; /* 开发时请将此样式移除 */">
+    <div id="sources">
         开源版本
     </div>
 </template>
diff --git a/src/views/project/create.vue b/src/views/project/create.vue
index c540087..211db0c 100644
--- a/src/views/project/create.vue
+++ b/src/views/project/create.vue
@@ -188,7 +188,7 @@ export default {
             return 0
         },
         createBlankTemplate() {
-            this.$api.post('/project/create', {'describe': formConf.description, 'name': formConf.title}).then(res => {
+            this.$api.post('/user/project/create', {'describe': formConf.description, 'name': formConf.title}).then(res => {
                 console.log(res)
                 this.$router.push({path: '/project/form', query: {key: res.data}})
             })