From fc0101f4e3ee69408ff0957ea924af9b226b8233 Mon Sep 17 00:00:00 2001
From: iczer <1126263215@qq.com>
Date: Mon, 29 Jun 2020 19:17:51 +0800
Subject: [PATCH] chore: rename some layout components; :dog:

---
 .../menu/{SiderMenu.vue => SideMenu.vue}      |   6 +-
 src/components/setting/Setting.vue            |   4 +-
 src/components/tool/Drawer.vue                |   3 -
 .../{GlobalLayout.vue => AdminLayout.vue}     |  34 +--
 src/layouts/{RouteView.vue => BlankView.vue}  |   2 +-
 src/layouts/CommonLayout.vue                  |  37 +++
 src/layouts/{MenuView.vue => TabsView.vue}    |  56 ++--
 .../PageFooter.vue}                           |   2 +-
 .../AdminHeader.vue}                          |  20 +-
 src/layouts/{ => header}/HeaderNotice.vue     |   0
 src/layouts/{ => header}/HeaderSearch.vue     |   0
 src/layouts/{ => header}/HeaderlAvatar.vue    |   0
 src/main.js                                   |   2 +-
 src/pages/login/Login.vue                     | 242 ++++++++----------
 src/router/index.js                           | 183 ++++++-------
 src/router/lazy.js                            | 204 ---------------
 16 files changed, 286 insertions(+), 509 deletions(-)
 rename src/components/menu/{SiderMenu.vue => SideMenu.vue} (92%)
 rename src/layouts/{GlobalLayout.vue => AdminLayout.vue} (72%)
 rename src/layouts/{RouteView.vue => BlankView.vue} (96%)
 create mode 100644 src/layouts/CommonLayout.vue
 rename src/layouts/{MenuView.vue => TabsView.vue} (80%)
 rename src/layouts/{GlobalFooter.vue => footer/PageFooter.vue} (97%)
 rename src/layouts/{GlobalHeader.vue => header/AdminHeader.vue} (91%)
 rename src/layouts/{ => header}/HeaderNotice.vue (100%)
 rename src/layouts/{ => header}/HeaderSearch.vue (100%)
 rename src/layouts/{ => header}/HeaderlAvatar.vue (100%)
 delete mode 100644 src/router/lazy.js

diff --git a/src/components/menu/SiderMenu.vue b/src/components/menu/SideMenu.vue
similarity index 92%
rename from src/components/menu/SiderMenu.vue
rename to src/components/menu/SideMenu.vue
index dabebd8..07b66e9 100644
--- a/src/components/menu/SiderMenu.vue
+++ b/src/components/menu/SideMenu.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-layout-sider :class="[theme, 'sider', isMobile ? null : 'shadow']" width="256px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
+  <a-layout-sider :class="[theme, 'side', isMobile ? null : 'shadow']" width="256px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
     <div :class="['logo', theme]">
       <router-link to="/dashboard/workplace">
         <img src="@/assets/img/logo.png">
@@ -14,7 +14,7 @@
 import IMenu from './menu'
 import {mapState, mapMutations} from 'vuex'
 export default {
-  name: 'SiderMenu',
+  name: 'SideMenu',
   components: {IMenu},
   inject: ['menuI18n'],
   props: {
@@ -54,7 +54,7 @@ export default {
   .shadow{
     box-shadow: 2px 0 6px rgba(0,21,41,.35);
   }
-  .sider{
+  .side{
     z-index: 10;
     &.light{
       background-color: #fff;
diff --git a/src/components/setting/Setting.vue b/src/components/setting/Setting.vue
index d3f317d..060a946 100644
--- a/src/components/setting/Setting.vue
+++ b/src/components/setting/Setting.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-layout-sider class="sider" width="300">
+  <a-layout-sider class="side" width="300">
     <setting-item :title="$t('theme.title')">
       <img-checkbox-group @change="values => setTheme(values[0])">
         <img-checkbox :title="$t('theme.dark')" img="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" :checked="true" value="dark"/>
@@ -139,7 +139,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .sider{
+  .side{
     background-color: #fff;
     height: 100%;
     padding: 24px;
diff --git a/src/components/tool/Drawer.vue b/src/components/tool/Drawer.vue
index 053caf2..a8e34cf 100644
--- a/src/components/tool/Drawer.vue
+++ b/src/components/tool/Drawer.vue
@@ -116,9 +116,6 @@ export default {
         transform: translateX(100%);
       }
     }
-    .sider{
-      height: 100%;
-    }
   }
   .content{
     display: inline-block;
diff --git a/src/layouts/GlobalLayout.vue b/src/layouts/AdminLayout.vue
similarity index 72%
rename from src/layouts/GlobalLayout.vue
rename to src/layouts/AdminLayout.vue
index ca5d0e7..41c04ee 100644
--- a/src/layouts/GlobalLayout.vue
+++ b/src/layouts/AdminLayout.vue
@@ -1,35 +1,35 @@
 <template>
-  <a-layout :class="['global-layout', fixedSideBar ? 'fixed-side-bar' : '']">
+  <a-layout :class="['admin-layout', fixedSideBar ? 'fixed-side-bar' : '']">
     <drawer v-if="isMobile" :openDrawer="collapsed" @change="onDrawerChange">
-      <sider-menu :theme="theme" :menuData="menuData" :collapsed="false" :collapsible="false" @menuSelect="onMenuSelect"/>
+      <side-menu :theme="theme" :menuData="menuData" :collapsed="false" :collapsible="false" @menuSelect="onMenuSelect"/>
     </drawer>
-    <sider-menu :theme="theme" v-else-if="layout === 'side'" :menuData="menuData" :collapsed="collapsed" :collapsible="true" />
+    <side-menu :theme="theme" v-else-if="layout === 'side'" :menuData="menuData" :collapsed="collapsed" :collapsible="true" />
     <drawer :open-drawer="showSetting" placement="right"  @change="onSettingDrawerChange">
       <div class="setting" slot="handler">
         <a-icon :type="showSetting ? 'close' : 'setting'"/>
       </div>
       <setting />
     </drawer>
-    <a-layout class="global-layout-main beauty-scroll">
-      <global-header :style="headerStyle" :menuData="menuData" :collapsed="collapsed" @toggleCollapse="toggleCollapse"/>
+    <a-layout class="admin-layout-main beauty-scroll">
+      <admin-header :style="headerStyle" :menuData="menuData" :collapsed="collapsed" @toggleCollapse="toggleCollapse"/>
       <a-layout-header v-if="fixedHeader"></a-layout-header>
-      <a-layout-content class="global-layout-content">
+      <a-layout-content class="admin-layout-content">
         <div :style="`min-height: ${minHeight}px; position: relative`">
           <slot></slot>
         </div>
       </a-layout-content>
       <a-layout-footer style="padding: 0px">
-        <global-footer :link-list="footerLinks" :copyright="copyright" />
+        <page-footer :link-list="footerLinks" :copyright="copyright" />
       </a-layout-footer>
     </a-layout>
   </a-layout>
 </template>
 
 <script>
-import GlobalHeader from './GlobalHeader'
-import GlobalFooter from './GlobalFooter'
+import AdminHeader from './header/AdminHeader'
+import PageFooter from './footer/PageFooter'
 import Drawer from '../components/tool/Drawer'
-import SiderMenu from '../components/menu/SiderMenu'
+import SideMenu from '../components/menu/SideMenu'
 import Setting from '../components/setting/Setting'
 import {mapState} from 'vuex'
 
@@ -38,8 +38,8 @@ const minHeight = window.innerHeight - 64 - 24 - 122
 let menuData = []
 
 export default {
-  name: 'GlobalLayout',
-  components: {Setting, SiderMenu, Drawer, GlobalFooter, GlobalHeader},
+  name: 'AdminLayout',
+  components: {Setting, SideMenu, Drawer, PageFooter, AdminHeader},
   data () {
     return {
       minHeight: minHeight,
@@ -87,20 +87,20 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .global-layout{
+  .admin-layout{
     &.fixed-side-bar{
       height: 100vh;
-      .global-layout-main{
+      .admin-layout-main{
         overflow: scroll;
       }
     }
-    .global-layout-main{
-      .global-header{
+    .admin-layout-main{
+      .admin-header{
         top: 0;
         right: 0;
       }
     }
-    .global-layout-content{
+    .admin-layout-content{
       padding: 24px 24px 0;
       min-height: auto;
     }
diff --git a/src/layouts/RouteView.vue b/src/layouts/BlankView.vue
similarity index 96%
rename from src/layouts/RouteView.vue
rename to src/layouts/BlankView.vue
index ad4ea3c..2ddd4ed 100644
--- a/src/layouts/RouteView.vue
+++ b/src/layouts/BlankView.vue
@@ -12,7 +12,7 @@ import PageToggleTransition from '../components/transition/PageToggleTransition'
 import {mapState} from 'vuex'
 
 export default {
-  name: 'RouteView',
+  name: 'BlankView',
   components: {PageToggleTransition},
   computed: {
     ...mapState('setting', ['multiPage', 'animate'])
diff --git a/src/layouts/CommonLayout.vue b/src/layouts/CommonLayout.vue
new file mode 100644
index 0000000..df32482
--- /dev/null
+++ b/src/layouts/CommonLayout.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="common-layout">
+    <div class="content"><slot></slot></div>
+    <page-footer :link-list="footerLinks" :copyright="copyright"></page-footer>
+  </div>
+</template>
+
+<script>
+import PageFooter from '@/layouts/footer/PageFooter'
+import {mapState} from 'vuex'
+
+export default {
+  name: 'CommonLayout',
+  components: {PageFooter},
+  computed: {
+    ...mapState('setting', ['footerLinks', 'copyright'])
+  }
+}
+</script>
+
+<style scoped lang="less">
+.common-layout{
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: auto;
+  background: #f0f2f5 url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg') no-repeat center 110px;
+  background-size: 100%;
+  .content{
+    padding: 32px 0;
+    flex: 1;
+    @media (min-width: 768px){
+      padding: 112px 0 24px;
+    }
+  }
+}
+</style>
diff --git a/src/layouts/MenuView.vue b/src/layouts/TabsView.vue
similarity index 80%
rename from src/layouts/MenuView.vue
rename to src/layouts/TabsView.vue
index 9fa5f73..abe08d4 100644
--- a/src/layouts/MenuView.vue
+++ b/src/layouts/TabsView.vue
@@ -1,39 +1,39 @@
 <template>
-  <global-layout>
-      <contextmenu :itemList="menuItemList" :visible.sync="menuVisible" @select="onMenuSelect" />
-      <a-tabs
-        @contextmenu.native="e => onContextmenu(e)"
-        v-if="multiPage"
-        :active-key="activePage"
-        :style="`margin: -16px auto 8px; ${layout == 'head' ? 'max-width: 1400px;' : ''}`"
-        :hide-add="true"
-        type="editable-card"
-        @change="changePage"
-        @edit="editPage">
-        <a-tab-pane :key="page.fullPath" v-for="page in pageList">
-          <span slot="tab" :pagekey="page.fullPath">{{page.name}}</span>
-        </a-tab-pane>
-      </a-tabs>
-      <div class="menu-view-content">
-        <page-toggle-transition :animate="animate.name" :direction="animate.direction">
-          <keep-alive v-if="multiPage">
-            <router-view />
-          </keep-alive>
-          <router-view v-else />
-        </page-toggle-transition>
-      </div>
-  </global-layout>
+  <admin-layout>
+    <contextmenu :itemList="menuItemList" :visible.sync="menuVisible" @select="onMenuSelect" />
+    <a-tabs
+      @contextmenu.native="e => onContextmenu(e)"
+      v-if="multiPage"
+      :active-key="activePage"
+      :style="`margin: -16px auto 8px; ${layout == 'head' ? 'max-width: 1400px;' : ''}`"
+      :hide-add="true"
+      type="editable-card"
+      @change="changePage"
+      @edit="editPage">
+      <a-tab-pane :key="page.fullPath" v-for="page in pageList">
+        <span slot="tab" :pagekey="page.fullPath">{{page.name}}</span>
+      </a-tab-pane>
+    </a-tabs>
+    <div class="tabs-view-content">
+      <page-toggle-transition :animate="animate.name" :direction="animate.direction">
+        <keep-alive v-if="multiPage">
+          <router-view />
+        </keep-alive>
+        <router-view v-else />
+      </page-toggle-transition>
+    </div>
+  </admin-layout>
 </template>
 
 <script>
-import GlobalLayout from './GlobalLayout'
+import AdminLayout from './AdminLayout'
 import Contextmenu from '../components/menu/Contextmenu'
 import PageToggleTransition from '../components/transition/PageToggleTransition'
 import {mapState} from 'vuex'
 
 export default {
-  name: 'MenuView',
-  components: {PageToggleTransition, Contextmenu, GlobalLayout},
+  name: 'TabsView',
+  components: {PageToggleTransition, Contextmenu, AdminLayout},
   data () {
     return {
       pageList: [],
@@ -165,7 +165,7 @@ export default {
 </script>
 
 <style scoped lang="less">
-  .menu-view-content{
+  .tabs-view-content{
     position: relative;
   }
 </style>
diff --git a/src/layouts/GlobalFooter.vue b/src/layouts/footer/PageFooter.vue
similarity index 97%
rename from src/layouts/GlobalFooter.vue
rename to src/layouts/footer/PageFooter.vue
index 2f72636..2b155cf 100644
--- a/src/layouts/GlobalFooter.vue
+++ b/src/layouts/footer/PageFooter.vue
@@ -13,7 +13,7 @@
 
 <script>
 export default {
-  name: 'GlobalFooter',
+  name: 'PageFooter',
   props: ['copyright', 'linkList']
 }
 </script>
diff --git a/src/layouts/GlobalHeader.vue b/src/layouts/header/AdminHeader.vue
similarity index 91%
rename from src/layouts/GlobalHeader.vue
rename to src/layouts/header/AdminHeader.vue
index 1e46b9b..b435edb 100644
--- a/src/layouts/GlobalHeader.vue
+++ b/src/layouts/header/AdminHeader.vue
@@ -1,16 +1,16 @@
 <template>
-  <a-layout-header :class="[headerTheme, 'global-header']">
-    <div :class="['global-header-wide', layout]">
+  <a-layout-header :class="[headerTheme, 'admin-header']">
+    <div :class="['admin-header-wide', layout]">
       <router-link v-if="isMobile || layout === 'head'" to="/" :class="['logo', isMobile ? null : 'pc', headerTheme]">
         <img width="32" src="@/assets/img/logo.png" />
         <h1 v-if="!isMobile">{{systemName}}</h1>
       </router-link>
       <a-divider v-if="isMobile" type="vertical" />
       <a-icon v-if="layout === 'side'" class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggleCollapse"/>
-      <div v-if="layout == 'head' && !isMobile" class="global-header-menu">
+      <div v-if="layout == 'head' && !isMobile" class="admin-header-menu">
         <i-menu style="height: 64px; line-height: 64px;" @i18nComplete="setRoutesI18n" :i18n="menuI18n" :theme="headerTheme" mode="horizontal" :options="menuData" @select="onSelect"/>
       </div>
-      <div :class="['global-header-right', headerTheme]">
+      <div :class="['admin-header-right', headerTheme]">
           <header-search class="header-item" />
           <a-tooltip class="header-item" title="帮助文档" placement="bottom" >
             <a>
@@ -36,11 +36,11 @@
 import HeaderSearch from './HeaderSearch'
 import HeaderNotice from './HeaderNotice'
 import HeaderAvatar from './HeaderlAvatar'
-import IMenu from '../components/menu/menu'
+import IMenu from '@/components/menu/menu'
 import {mapState, mapMutations} from 'vuex'
 
 export default {
-  name: 'GlobalHeader',
+  name: 'AdminHeader',
   components: {IMenu, HeaderAvatar, HeaderNotice, HeaderSearch},
   props: ['collapsed', 'menuData'],
   inject: ['menuI18n'],
@@ -86,7 +86,7 @@ export default {
       color: #1890ff;
     }
   }
-  .global-header{
+  .admin-header{
     padding: 0;
     -webkit-box-shadow: 0 1px 4px rgba(0,21,41,.08);
     box-shadow: 0 1px 4px rgba(0,21,41,.08);
@@ -101,7 +101,7 @@ export default {
         color: white;
       }
     }
-    .global-header-wide{
+    .admin-header-wide{
       &.head{
         max-width: 1400px;
         margin: auto;
@@ -132,10 +132,10 @@ export default {
           color: #fff;
         }
       }
-      .global-header-menu{
+      .admin-header-menu{
         display: inline-block;
       }
-      .global-header-right{
+      .admin-header-right{
         float: right;
         display: flex;
         &.dark{
diff --git a/src/layouts/HeaderNotice.vue b/src/layouts/header/HeaderNotice.vue
similarity index 100%
rename from src/layouts/HeaderNotice.vue
rename to src/layouts/header/HeaderNotice.vue
diff --git a/src/layouts/HeaderSearch.vue b/src/layouts/header/HeaderSearch.vue
similarity index 100%
rename from src/layouts/HeaderSearch.vue
rename to src/layouts/header/HeaderSearch.vue
diff --git a/src/layouts/HeaderlAvatar.vue b/src/layouts/header/HeaderlAvatar.vue
similarity index 100%
rename from src/layouts/HeaderlAvatar.vue
rename to src/layouts/header/HeaderlAvatar.vue
diff --git a/src/main.js b/src/main.js
index ef308e6..0510447 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import App from './App.vue'
-import router from './router/lazy'
+import router from './router'
 import './theme/index.less'
 import Antd from 'ant-design-vue'
 import Viser from 'viser-vue'
diff --git a/src/pages/login/Login.vue b/src/pages/login/Login.vue
index 8ccffae..b6ce7fa 100644
--- a/src/pages/login/Login.vue
+++ b/src/pages/login/Login.vue
@@ -1,82 +1,79 @@
 <template>
-  <div class="container">
-    <div class="content">
-      <div class="top">
-        <div class="header">
-          <img alt="logo" class="logo" src="@/assets/img/logo.png" />
-          <span class="title">{{systemName}}</span>
-        </div>
-        <div class="desc">Ant Design 是西湖区最具影响力的 Web 设计规范</div>
+  <common-layout>
+    <div class="top">
+      <div class="header">
+        <img alt="logo" class="logo" src="@/assets/img/logo.png" />
+        <span class="title">{{systemName}}</span>
       </div>
-      <div class="login">
-        <a-form @submit="onSubmit" :autoFormCreate="(form) => this.form = form">
-          <a-tabs size="large" :tabBarStyle="{textAlign: 'center'}" style="padding: 0 2px;">
-            <a-tab-pane tab="账户密码登录" key="1">
-              <a-alert type="error" :closable="true" v-show="error" :message="error" showIcon style="margin-bottom: 24px;" />
-              <a-form-item
-                fieldDecoratorId="name"
-                :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入账户名', whitespace: true}]}"
-              >
-                <a-input size="large" placeholder="admin" >
-                  <a-icon slot="prefix" type="user" />
-                </a-input>
-              </a-form-item>
-              <a-form-item
-                fieldDecoratorId="password"
-                :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入密码', whitespace: true}]}"
-              >
-                <a-input size="large" placeholder="888888" type="password">
-                  <a-icon slot="prefix" type="lock" />
-                </a-input>
-              </a-form-item>
-            </a-tab-pane>
-            <a-tab-pane tab="手机号登录" key="2">
-              <a-form-item>
-                <a-input size="large" placeholder="mobile number" >
-                  <a-icon slot="prefix" type="mobile" />
-                </a-input>
-              </a-form-item>
-              <a-form-item>
-                <a-row :gutter="8" style="margin: 0 -4px">
-                  <a-col :span="16">
-                    <a-input size="large" placeholder="captcha">
+      <div class="desc">Ant Design 是西湖区最具影响力的 Web 设计规范</div>
+    </div>
+    <div class="login">
+      <a-form @submit="onSubmit" :autoFormCreate="(form) => this.form = form">
+        <a-tabs size="large" :tabBarStyle="{textAlign: 'center'}" style="padding: 0 2px;">
+          <a-tab-pane tab="账户密码登录" key="1">
+            <a-alert type="error" :closable="true" v-show="error" :message="error" showIcon style="margin-bottom: 24px;" />
+            <a-form-item
+              fieldDecoratorId="name"
+              :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入账户名', whitespace: true}]}"
+            >
+              <a-input size="large" placeholder="admin" >
+                <a-icon slot="prefix" type="user" />
+              </a-input>
+            </a-form-item>
+            <a-form-item
+              fieldDecoratorId="password"
+              :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入密码', whitespace: true}]}"
+            >
+              <a-input size="large" placeholder="888888" type="password">
+                <a-icon slot="prefix" type="lock" />
+              </a-input>
+            </a-form-item>
+          </a-tab-pane>
+          <a-tab-pane tab="手机号登录" key="2">
+            <a-form-item>
+              <a-input size="large" placeholder="mobile number" >
+                <a-icon slot="prefix" type="mobile" />
+              </a-input>
+            </a-form-item>
+            <a-form-item>
+              <a-row :gutter="8" style="margin: 0 -4px">
+                <a-col :span="16">
+                  <a-input size="large" placeholder="captcha">
                     <a-icon slot="prefix" type="mail" />
                   </a-input>
-                  </a-col>
-                  <a-col :span="8" style="padding-left: 4px">
-                    <a-button style="width: 100%" class="captcha-button" size="large">获取验证码</a-button>
-                  </a-col>
-                </a-row>
-              </a-form-item>
-            </a-tab-pane>
-          </a-tabs>
-          <div>
-            <a-checkbox :checked="true" >自动登录</a-checkbox>
-            <a style="float: right">忘记密码</a>
-          </div>
-          <a-form-item>
-            <a-button :loading="logging" style="width: 100%;margin-top: 24px" size="large" htmlType="submit" type="primary">登录</a-button>
-          </a-form-item>
-          <div>
-            其他登录方式
-            <a-icon class="icon" type="alipay-circle" />
-            <a-icon class="icon" type="taobao-circle" />
-            <a-icon class="icon" type="weibo-circle" />
-            <router-link style="float: right" to="/dashboard/workplace" >注册账户</router-link>
-          </div>
-        </a-form>
-      </div>
+                </a-col>
+                <a-col :span="8" style="padding-left: 4px">
+                  <a-button style="width: 100%" class="captcha-button" size="large">获取验证码</a-button>
+                </a-col>
+              </a-row>
+            </a-form-item>
+          </a-tab-pane>
+        </a-tabs>
+        <div>
+          <a-checkbox :checked="true" >自动登录</a-checkbox>
+          <a style="float: right">忘记密码</a>
+        </div>
+        <a-form-item>
+          <a-button :loading="logging" style="width: 100%;margin-top: 24px" size="large" htmlType="submit" type="primary">登录</a-button>
+        </a-form-item>
+        <div>
+          其他登录方式
+          <a-icon class="icon" type="alipay-circle" />
+          <a-icon class="icon" type="taobao-circle" />
+          <a-icon class="icon" type="weibo-circle" />
+          <router-link style="float: right" to="/dashboard/workplace" >注册账户</router-link>
+        </div>
+      </a-form>
     </div>
-    <global-footer :link-list="linkList" :copyright="copyright" />
-  </div>
+  </common-layout>
 </template>
 
 <script>
-import GlobalFooter from '../../layouts/GlobalFooter'
+import CommonLayout from '@/layouts/CommonLayout'
 
 export default {
   name: 'Login',
-  components: {GlobalFooter},
+  components: {CommonLayout},
   data () {
     return {
       logging: false,
@@ -86,12 +83,6 @@ export default {
   computed: {
     systemName () {
       return this.$store.state.setting.systemName
-    },
-    linkList () {
-      return this.$store.state.setting.footerLinks
-    },
-    copyright () {
-      return this.$store.state.setting.copyright
     }
   },
   methods: {
@@ -123,70 +114,57 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .container {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    overflow: auto;
-    background: #f0f2f5 url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg') no-repeat center 110px;
-    background-size: 100%;
-    .content {
-      padding: 32px 0;
-      flex: 1;
-      @media (min-width: 768px){
-        padding: 112px 0 24px;
-      }
-      .top {
-        text-align: center;
-        .header {
+  .common-layout{
+    .top {
+      text-align: center;
+      .header {
+        height: 44px;
+        line-height: 44px;
+        a {
+          text-decoration: none;
+        }
+        .logo {
           height: 44px;
-          line-height: 44px;
-          a {
-            text-decoration: none;
-          }
-          .logo {
-            height: 44px;
-            vertical-align: top;
-            margin-right: 16px;
-          }
-          .title {
-            font-size: 33px;
-            color: rgba(0,0,0,.85);
-            font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
-            font-weight: 600;
-            position: relative;
-            top: 2px;
-          }
+          vertical-align: top;
+          margin-right: 16px;
         }
-        .desc {
-          font-size: 14px;
-          color: rgba(0,0,0,.45);
-          margin-top: 12px;
-          margin-bottom: 40px;
+        .title {
+          font-size: 33px;
+          color: rgba(0,0,0,.85);
+          font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+          font-weight: 600;
+          position: relative;
+          top: 2px;
         }
       }
-      .login{
-        width: 368px;
-        margin: 0 auto;
-        @media screen and (max-width: 576px) {
-          width: 95%;
-        }
-        @media screen and (max-width: 320px) {
-          .captcha-button{
-            font-size: 14px;
-          }
+      .desc {
+        font-size: 14px;
+        color: rgba(0,0,0,.45);
+        margin-top: 12px;
+        margin-bottom: 40px;
+      }
+    }
+    .login{
+      width: 368px;
+      margin: 0 auto;
+      @media screen and (max-width: 576px) {
+        width: 95%;
+      }
+      @media screen and (max-width: 320px) {
+        .captcha-button{
+          font-size: 14px;
         }
-        .icon {
-          font-size: 24px;
-          color: rgba(0, 0, 0, 0.2);
-          margin-left: 16px;
-          vertical-align: middle;
-          cursor: pointer;
-          transition: color 0.3s;
+      }
+      .icon {
+        font-size: 24px;
+        color: rgba(0, 0, 0, 0.2);
+        margin-left: 16px;
+        vertical-align: middle;
+        cursor: pointer;
+        transition: color 0.3s;
 
-          &:hover {
-            color: #1890ff;
-          }
+        &:hover {
+          color: #1890ff;
         }
       }
     }
diff --git a/src/router/index.js b/src/router/index.js
index 25eead8..48638fe 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,30 +1,9 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import Dashboard from '@/pages/dashboard/analysis/Analysis'
-import NotFound from '@/pages/exception/404'
-import NotPermit from '@/pages/exception/403'
-import ServerError from '@/pages/exception/500'
 import PageView from '@/layouts/PageView'
-import RouteView from '@/layouts/RouteView'
-import MenuView from '@/layouts/MenuView'
-import BasicForm from '@/pages/form/basic/BasicForm'
-import StepForm from '@/pages/form/step/StepForm'
-import AdvancedForm from '@/pages/form/advance/AdvancedForm'
-import Success from '@/pages/result/Success'
-import Error from '@/pages/result/Error'
-import QueryList from '@/pages/list/QueryList'
-import StandardList from '@/pages/list/StandardList'
-import CardList from '@/pages/list/CardList'
-import SearchLayout from '@/pages/list/search/SearchLayout'
-import ArticleList from '@/pages/list/search/ArticleList'
-import ApplicationList from '@/pages/list/search/ApplicationList'
-import ProjectList from '@/pages/list/search/ProjectList'
-import WorkPlace from '@/pages/dashboard/workplace/WorkPlace'
+import BlankView from '@/layouts/BlankView'
+import TabsView from '@/layouts/TabsView'
 import Login from '@/pages/login/Login'
-import BasicDetail from '@/pages/detail/BasicDetail'
-import AdvancedDetail from '@/pages/detail/AdvancedDetail'
-import TaskCard from '@/pages/components/TaskCard'
-import ColorBox from '@/pages/components/Palette'
 
 Vue.use(Router)
 
@@ -39,193 +18,183 @@ export default new Router({
     {
       path: '/',
       name: '首页',
-      component: MenuView,
+      component: TabsView,
       redirect: '/login',
-      icon: 'none',
-      invisible: true,
       children: [
         {
-          path: '/dashboard',
+          path: 'dashboard',
           name: 'Dashboard',
-          component: RouteView,
-          icon: 'dashboard',
+          meta: {
+            icon: 'dashboard'
+          },
+          component: BlankView,
           children: [
             {
-              path: '/dashboard/workplace',
+              path: 'workplace',
               name: '工作台',
-              component: WorkPlace,
-              icon: 'none'
+              component: () => import('@/pages/dashboard/workplace/WorkPlace'),
             },
             {
-              path: '/dashboard/analysis',
+              path: 'analysis',
               name: '分析页',
-              component: Dashboard,
-              icon: 'none'
+              component: () => import('@/pages/dashboard/analysis/Analysis'),
             }
           ]
         },
         {
-          path: '/form',
+          path: 'form',
           name: '表单页',
+          meta: {
+            icon: 'form',
+          },
           component: PageView,
-          icon: 'form',
           children: [
             {
-              path: '/form/basic',
+              path: 'basic',
               name: '基础表单',
-              component: BasicForm,
-              icon: 'none'
+              component: () => import('@/pages/form/basic/BasicForm'),
             },
             {
-              path: '/form/step',
+              path: 'step',
               name: '分步表单',
-              component: StepForm,
-              icon: 'none'
+              component: () => import('@/pages/form/step/StepForm'),
             },
             {
-              path: '/form/advanced',
+              path: 'advance',
               name: '高级表单',
-              component: AdvancedForm,
-              icon: 'none'
+              component: () => import('@/pages/form/advance/AdvancedForm'),
             }
           ]
         },
         {
-          path: '/list',
+          path: 'list',
           name: '列表页',
+          meta: {
+            icon: 'table'
+          },
           component: PageView,
-          icon: 'table',
           children: [
             {
-              path: '/list/query',
+              path: 'query',
               name: '查询表格',
-              component: QueryList,
-              icon: 'none'
+              component: () => import('@/pages/list/QueryList'),
             },
             {
-              path: '/list/primary',
+              path: 'primary',
               name: '标准列表',
-              component: StandardList,
-              icon: 'none'
+              component: () => import('@/pages/list/StandardList'),
             },
             {
-              path: '/list/card',
+              path: 'card',
               name: '卡片列表',
-              component: CardList,
-              icon: 'none'
+              component: () => import('@/pages/list/CardList'),
             },
             {
-              path: '/list/search',
+              path: 'search',
               name: '搜索列表',
-              component: SearchLayout,
-              icon: 'none',
+              component: () => import('@/pages/list/search/SearchLayout'),
               children: [
                 {
-                  path: '/list/search/article',
+                  path: 'article',
                   name: '文章',
-                  component: ArticleList,
-                  icon: 'none'
+                  component: () => import('@/pages/list/search/ArticleList'),
                 },
                 {
-                  path: '/list/search/application',
+                  path: 'application',
                   name: '应用',
-                  component: ApplicationList,
-                  icon: 'none'
+                  component: () => import('@/pages/list/search/ApplicationList'),
                 },
                 {
-                  path: '/list/search/project',
+                  path: 'project',
                   name: '项目',
-                  component: ProjectList,
-                  icon: 'none'
+                  component: () => import('@/pages/list/search/ProjectList'),
                 }
               ]
             }
           ]
         },
         {
-          path: '/detail',
+          path: 'details',
           name: '详情页',
-          icon: 'profile',
-          component: RouteView,
+          meta: {
+            icon: 'profile'
+          },
+          component: BlankView,
           children: [
             {
-              path: '/detail/basic',
+              path: 'basic',
               name: '基础详情页',
-              icon: 'none',
-              component: BasicDetail
+              component: () => import('@/pages/detail/BasicDetail')
             },
             {
-              path: '/detail/advanced',
+              path: 'advance',
               name: '高级详情页',
-              icon: 'none',
-              component: AdvancedDetail
+              component: () => import('@/pages/detail/AdvancedDetail')
             }
           ]
         },
         {
-          path: '/result',
+          path: 'result',
           name: '结果页',
-          icon: 'check-circle-o',
+          meta: {
+            icon: 'check-circle-o',
+          },
           component: PageView,
           children: [
             {
-              path: '/result/success',
+              path: 'success',
               name: '成功',
-              icon: 'none',
-              component: Success
+              component: () => import('@/pages/result/Success')
             },
             {
-              path: '/result/error',
+              path: 'error',
               name: '失败',
-              icon: 'none',
-              component: Error
+              component: () => import('@/pages/result/Error')
             }
           ]
         },
         {
-          path: '/exception',
+          path: 'exception',
           name: '异常页',
-          icon: 'warning',
-          component: RouteView,
+          meta: {
+            icon: 'warning',
+          },
+          component: BlankView,
           children: [
             {
-              path: '/exception/404',
+              path: '404',
               name: '404',
-              icon: 'none',
-              component: NotFound
+              component: () => import('@/pages/exception/404')
             },
             {
-              path: '/exception/403',
+              path: '403',
               name: '403',
-              icon: 'none',
-              component: NotPermit
+              component: () => import('@/pages/exception/403')
             },
             {
-              path: '/exception/500',
+              path: '500',
               name: '500',
-              icon: 'none',
-              component: ServerError
+              component: () => import('@/pages/exception/500')
             }
           ]
         },
         {
-          path: '/pages',
-          redirect: '/pages/taskcard',
+          path: 'components',
           name: '小组件',
-          icon: 'appstore-o',
+          meta: {
+            icon: 'appstore-o'
+          },
           component: PageView,
           children: [
             {
-              path: '/pages/taskcard',
+              path: 'taskCard',
               name: '任务卡片',
-              icon: 'none',
-              component: TaskCard
+              component: () => import('@/pages/components/TaskCard')
             },
             {
-              path: '/pages/palette',
+              path: 'palette',
               name: '颜色复选框',
-              icon: 'none',
-              component: ColorBox
+              component: () => import('@/pages/components/Palette')
             }
           ]
         }
diff --git a/src/router/lazy.js b/src/router/lazy.js
deleted file mode 100644
index a1fedb5..0000000
--- a/src/router/lazy.js
+++ /dev/null
@@ -1,204 +0,0 @@
-import Vue from 'vue'
-import Router from 'vue-router'
-import PageView from '@/layouts/PageView'
-import RouteView from '@/layouts/RouteView'
-import MenuView from '@/layouts/MenuView'
-import Login from '@/pages/login/Login'
-
-Vue.use(Router)
-
-export default new Router({
-  routes: [
-    {
-      path: '/login',
-      name: '登录页',
-      component: Login,
-      invisible: true
-    },
-    {
-      path: '/',
-      name: '首页',
-      component: MenuView,
-      redirect: '/login',
-      children: [
-        {
-          path: 'dashboard',
-          name: 'Dashboard',
-          meta: {
-            icon: 'dashboard'
-          },
-          component: RouteView,
-          children: [
-            {
-              path: 'workplace',
-              name: '工作台',
-              component: () => import('@/pages/dashboard/workplace/WorkPlace'),
-            },
-            {
-              path: 'analysis',
-              name: '分析页',
-              component: () => import('@/pages/dashboard/analysis/Analysis'),
-            }
-          ]
-        },
-        {
-          path: 'form',
-          name: '表单页',
-          meta: {
-            icon: 'form',
-          },
-          component: PageView,
-          children: [
-            {
-              path: 'basic',
-              name: '基础表单',
-              component: () => import('@/pages/form/basic/BasicForm'),
-            },
-            {
-              path: 'step',
-              name: '分步表单',
-              component: () => import('@/pages/form/step/StepForm'),
-            },
-            {
-              path: 'advance',
-              name: '高级表单',
-              component: () => import('@/pages/form/advance/AdvancedForm'),
-            }
-          ]
-        },
-        {
-          path: 'list',
-          name: '列表页',
-          meta: {
-            icon: 'table'
-          },
-          component: PageView,
-          children: [
-            {
-              path: 'query',
-              name: '查询表格',
-              component: () => import('@/pages/list/QueryList'),
-            },
-            {
-              path: 'primary',
-              name: '标准列表',
-              component: () => import('@/pages/list/StandardList'),
-            },
-            {
-              path: 'card',
-              name: '卡片列表',
-              component: () => import('@/pages/list/CardList'),
-            },
-            {
-              path: 'search',
-              name: '搜索列表',
-              component: () => import('@/pages/list/search/SearchLayout'),
-              children: [
-                {
-                  path: 'article',
-                  name: '文章',
-                  component: () => import('@/pages/list/search/ArticleList'),
-                },
-                {
-                  path: 'application',
-                  name: '应用',
-                  component: () => import('@/pages/list/search/ApplicationList'),
-                },
-                {
-                  path: 'project',
-                  name: '项目',
-                  component: () => import('@/pages/list/search/ProjectList'),
-                }
-              ]
-            }
-          ]
-        },
-        {
-          path: 'details',
-          name: '详情页',
-          meta: {
-            icon: 'profile'
-          },
-          component: RouteView,
-          children: [
-            {
-              path: 'basic',
-              name: '基础详情页',
-              component: () => import('@/pages/detail/BasicDetail')
-            },
-            {
-              path: 'advance',
-              name: '高级详情页',
-              component: () => import('@/pages/detail/AdvancedDetail')
-            }
-          ]
-        },
-        {
-          path: 'result',
-          name: '结果页',
-          meta: {
-            icon: 'check-circle-o',
-          },
-          component: PageView,
-          children: [
-            {
-              path: 'success',
-              name: '成功',
-              component: () => import('@/pages/result/Success')
-            },
-            {
-              path: 'error',
-              name: '失败',
-              component: () => import('@/pages/result/Error')
-            }
-          ]
-        },
-        {
-          path: 'exception',
-          name: '异常页',
-          meta: {
-            icon: 'warning',
-          },
-          component: RouteView,
-          children: [
-            {
-              path: '404',
-              name: '404',
-              component: () => import('@/pages/exception/404')
-            },
-            {
-              path: '403',
-              name: '403',
-              component: () => import('@/pages/exception/403')
-            },
-            {
-              path: '500',
-              name: '500',
-              component: () => import('@/pages/exception/500')
-            }
-          ]
-        },
-        {
-          path: 'components',
-          name: '小组件',
-          meta: {
-            icon: 'appstore-o'
-          },
-          component: PageView,
-          children: [
-            {
-              path: 'taskCard',
-              name: '任务卡片',
-              component: () => import('@/pages/components/TaskCard')
-            },
-            {
-              path: 'palette',
-              name: '颜色复选框',
-              component: () => import('@/pages/components/Palette')
-            }
-          ]
-        }
-      ]
-    }
-  ]
-})