From b78cf5c6e11699fbe5202e35b3ce4a1dc1b8c3fb Mon Sep 17 00:00:00 2001
From: chenghongxing <1126263215@qq.com>
Date: Thu, 23 Jul 2020 12:40:36 +0800
Subject: [PATCH] chore: optimize the code of system layout; :star2:

---
 src/layouts/PageLayout.vue    |   6 +-
 src/layouts/tabs/TabsView.vue |   2 +-
 src/pages/exception/403.vue   |   5 +-
 src/pages/exception/404.vue   |   8 +-
 src/pages/exception/500.vue   |   5 +-
 src/router/config.js          | 215 ++++++++++++++++++++++++++++++++++
 src/router/index.js           | 202 +-------------------------------
 src/store/index.js            |  10 +-
 src/store/modules/index.js    |   4 +
 9 files changed, 233 insertions(+), 224 deletions(-)
 create mode 100644 src/router/config.js
 create mode 100644 src/store/modules/index.js

diff --git a/src/layouts/PageLayout.vue b/src/layouts/PageLayout.vue
index fd5780e..61dc9b4 100644
--- a/src/layouts/PageLayout.vue
+++ b/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 @@ export default {
     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 @@ export default {
 
 <style lang="less">
   .page-header{
-    margin: -24px -24px 0;
+    margin: 0 -24px 0;
   }
   .link{
     /*margin-top: 16px;*/
diff --git a/src/layouts/tabs/TabsView.vue b/src/layouts/tabs/TabsView.vue
index 209e641..4a6c11d 100644
--- a/src/layouts/tabs/TabsView.vue
+++ b/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 />
diff --git a/src/pages/exception/403.vue b/src/pages/exception/403.vue
index 11de88c..92b8f7a 100644
--- a/src/pages/exception/403.vue
+++ b/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 @@ export default {
   inject: ['layoutMinHeight'],
   computed: {
     ...mapState('setting', ['multiPage']),
-    marginTop() {
-      return this.multiPage ? -24 : 0
-    },
     minHeight() {
       return this.multiPage ? this.layoutMinHeight - 32 : this.layoutMinHeight
     }
diff --git a/src/pages/exception/404.vue b/src/pages/exception/404.vue
index d0ef4d7..fa0dcb4 100644
--- a/src/pages/exception/404.vue
+++ b/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 @@ export default {
   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
     }
   }
 }
diff --git a/src/pages/exception/500.vue b/src/pages/exception/500.vue
index 11431b1..30e2593 100644
--- a/src/pages/exception/500.vue
+++ b/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 @@ export default {
   inject: ['layoutMinHeight'],
   computed: {
     ...mapState('setting', ['multiPage']),
-    marginTop() {
-      return this.multiPage ? -24 : 0
-    },
     minHeight() {
       return this.multiPage ? this.layoutMinHeight - 24 : this.layoutMinHeight
     }
diff --git a/src/router/config.js b/src/router/config.js
new file mode 100644
index 0000000..d5a88bf
--- /dev/null
+++ b/src/router/config.js
@@ -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}
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 8938b5c..3a37687 100644
--- a/src/router/index.js
+++ b/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()
diff --git a/src/store/index.js b/src/store/index.js
index 5d7521e..5c89750 100644
--- a/src/store/index.js
+++ b/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))
diff --git a/src/store/modules/index.js b/src/store/modules/index.js
new file mode 100644
index 0000000..abaef76
--- /dev/null
+++ b/src/store/modules/index.js
@@ -0,0 +1,4 @@
+import account from './account'
+import setting from './setting'
+
+export default {account, setting}
\ No newline at end of file