chore: optimize the code of system layout; :star2:

chenghongxing

2020-07-23 b78cf5c6e11699fbe5202e35b3ce4a1dc1b8c3fb

chore: optimize the code of system layout; :star2:

 src/layouts/PageLayout.vue

@@ -1,6 +1,6 @@
<template>
  <div class="page-layout">
    <page-header :breadcrumb="breadcrumb" :title="pageTitle" :logo="logo" :avatar="avatar">
    <page-header :style="`margin-top: ${multiPage ? 0 : -24}px`" :breadcrumb="breadcrumb" :title="pageTitle" :logo="logo" :avatar="avatar">
      <slot name="action"  slot="action"></slot>
      <slot slot="content" name="headerContent"></slot>
      <div slot="content" v-if="!this.$slots.headerContent && desc">
@@ -40,7 +40,7 @@
    this.page = this.$route.meta.page
  },
  computed: {
    ...mapState('setting', ['layout']),
    ...mapState('setting', ['layout', 'multiPage']),
    pageTitle() {
      let pageTitle = this.page && this.page.title
      return this.title || this.$t(pageTitle) || this.routeName
@@ -79,7 +79,7 @@

<style lang="less">
  .page-header{
    margin: -24px -24px 0;
    margin: 0 -24px 0;
  }
  .link{
    /*margin-top: 16px;*/

 src/layouts/tabs/TabsView.vue

@@ -15,7 +15,7 @@
        <span slot="tab" :pagekey="page.fullPath">{{pageName(page.path)}}</span>
      </a-tab-pane>
    </a-tabs>
    <div class="tabs-view-content">
    <div class="tabs-view-content" :style="`margin-top: ${multiPage ? -24 : 0}px`">
      <page-toggle-transition :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction">
        <keep-alive :exclude="dustbins" v-if="multiPage">
          <router-view />

 src/pages/exception/403.vue

@@ -1,5 +1,5 @@
<template>
  <exception-page :style="`margin-top: ${marginTop}px; min-height: ${minHeight}px`" type="403" />
  <exception-page :style="`min-height: ${minHeight}px`" type="403" />
</template>

<script>
@@ -11,9 +11,6 @@
  inject: ['layoutMinHeight'],
  computed: {
    ...mapState('setting', ['multiPage']),
    marginTop() {
      return this.multiPage ? -24 : 0
    },
    minHeight() {
      return this.multiPage ? this.layoutMinHeight - 32 : this.layoutMinHeight
    }

 src/pages/exception/404.vue

@@ -1,5 +1,5 @@
<template>
  <exception-page :style="`margin-top: ${marginTop}px; min-height: ${minHeight}px`" type="404" />
  <exception-page :style="`min-height: ${minHeight}px`" type="404" />
</template>

<script>
@@ -11,11 +11,9 @@
  inject: ['layoutMinHeight'],
  computed: {
    ...mapState('setting', ['multiPage']),
    marginTop() {
      return this.multiPage ? -24 : 0
    },
    minHeight() {
      return this.multiPage ? this.layoutMinHeight - 32 : this.layoutMinHeight
      let layoutMinHeight = this.layoutMinHeight || window.innerHeight
      return this.multiPage ? layoutMinHeight - 32 : layoutMinHeight
    }
  }
}

 src/pages/exception/500.vue

@@ -1,5 +1,5 @@
<template>
  <exception-page :style="`margin-top: ${marginTop}px; min-height: ${minHeight}px`" type="500" />
  <exception-page :style="`min-height: ${minHeight}px`" type="500" />
</template>

<script>
@@ -11,9 +11,6 @@
  inject: ['layoutMinHeight'],
  computed: {
    ...mapState('setting', ['multiPage']),
    marginTop() {
      return this.multiPage ? -24 : 0
    },
    minHeight() {
      return this.multiPage ? this.layoutMinHeight - 24 : this.layoutMinHeight
    }

 src/router/config.js

New file
@@ -0,0 +1,215 @@
import Login from '@/pages/login/Login'
import TabsView from '@/layouts/tabs/TabsView'
import BlankView from '@/layouts/BlankView'
import PageView from '@/layouts/PageView'

const options = {
  routes: [
    {
      path: '/login',
      name: '登录页',
      component: Login
    },
    {
      path: '/',
      name: '首页',
      component: TabsView,
      redirect: '/login',
      children: [
        {
          path: 'dashboard',
          name: 'Dashboard',
          meta: {
            icon: 'dashboard'
          },
          component: BlankView,
          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: BlankView,
          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: BlankView,
          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')
            }
          ]
        }
      ]
    }
  ]
}

// 不需要登录拦截的路由配置
const loginIgnore = {
  names: ['404'],      //根据路由名称匹配
  paths: ['/login'],   //根据路由fullPath匹配
  /**
   * 判断路由是否包含在该配置中
   * @param route vue-router 的 route 对象
   * @returns {boolean}
   */
  includes(route) {
    return this.names.includes(route.name) || this.paths.includes(route.path)
  }
}

export {options, loginIgnore}

 src/router/index.js

@@ -1,211 +1,15 @@
import Vue from 'vue'
import {checkAuthorization} from '@/utils/request'
import Router from 'vue-router'
import PageView from '@/layouts/PageView'
import BlankView from '@/layouts/BlankView'
import TabsView from '@/layouts/tabs/TabsView'
import Login from '@/pages/login/Login'
import {options, loginIgnore} from './config'

Vue.use(Router)

const router =  new Router({
  routes: [
    {
      path: '/login',
      name: '登录页',
      component: Login
    },
    {
      path: '/',
      name: '首页',
      component: TabsView,
      redirect: '/login',
      children: [
        {
          path: 'dashboard',
          name: 'Dashboard',
          meta: {
            icon: 'dashboard'
          },
          component: BlankView,
          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: BlankView,
          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: BlankView,
          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')
            }
          ]
        }
      ]
    }
  ]
})
const router =  new Router(options)

// 登录拦截
router.beforeEach((to, from, next) => {
  if (to.path !== '/login' && !checkAuthorization()) {
  if (!loginIgnore.includes(to) && !checkAuthorization()) {
    next({path: '/login'})
  } else {
    next()

 src/store/index.js

@@ -1,19 +1,13 @@
import Vue from 'vue'
import Vuex from 'vuex'
import account from './modules/account'
import setting from './modules/setting'
import modules from './modules'
import PouchDB from 'pouchdb'

const db = new PouchDB('adminDb')

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    account,
    setting
  }
})
const store = new Vuex.Store({modules})
// 读取用户信息
db.get('currUser')
  .then(doc => store.commit('account/setUser', doc.user))

 src/store/modules/index.js

New file
@@ -0,0 +1,4 @@
import account from './account'
import setting from './setting'

export default {account, setting}