chore: rename some layout components; 🐶

2025-04-06 03:49:22 +08:00 · 2020-06-29 19:17:51 +08:00 · 2020-06-29 19:17:51 +08:00 · fc0101f4e3
commit fc0101f4e3
parent 2eafdef2f9
16 changed files with 286 additions and 509 deletions
--- a/src/components/menu/SiderMenu.vue
+++ b/src/components/menu/SiderMenu.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;
--- 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;
--- 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;
--- a/src/layouts/GlobalLayout.vue
+++ b/src/layouts/GlobalLayout.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;
    }
--- a/src/layouts/BlankView.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'])
--- a/src/layouts/CommonLayout.vue
+++ 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>
--- a/src/layouts/TabsView.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>
--- a/src/layouts/footer/PageFooter.vue
+++ b/src/layouts/footer/PageFooter.vue
@ -13,7 +13,7 @@

 <script>
 export default {
-  name: 'GlobalFooter',
+  name: 'PageFooter',
  props: ['copyright', 'linkList']
 }
 </script>
--- a/src/layouts/header/AdminHeader.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{
--- a/src/layouts/header/HeaderNotice.vue
+++ b/src/layouts/header/HeaderNotice.vue
--- a/src/layouts/header/HeaderSearch.vue
+++ b/src/layouts/header/HeaderSearch.vue
--- a/src/layouts/header/HeaderlAvatar.vue
+++ b/src/layouts/header/HeaderlAvatar.vue
--- 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'
--- 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%;
+      .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;
        }
-        @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;
        }
      }
    }
--- 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')
            }
          ]
        }
--- a/src/router/lazy.js
+++ b/src/router/lazy.js
@ -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')
-            }
-          ]
-        }
-      ]
-    }
-  ]
-})