feat: add state of min page height in setting module; 🌟

新增：vuex setting 模块增加页面最小高度 state；

src/layouts/AdminLayout.vue

@@ -31,7 +31,7 @@ import PageFooter from './footer/PageFooter'
 import Drawer from '../components/tool/Drawer'
 import SideMenu from '../components/menu/SideMenu'
 import Setting from '../components/setting/Setting'
-import {mapState} from 'vuex'
+import {mapState, mapMutations} from 'vuex'
 
 const minHeight = window.innerHeight - 64 - 24 - 122
 
@@ -48,13 +48,8 @@ export default {
       showSetting: false
     }
   },
-  provide() {
-    return{
-      layoutMinHeight: minHeight
-    }
-  },
   computed: {
-    ...mapState('setting', ['isMobile', 'theme', 'layout', 'footerLinks', 'copyright', 'fixedHeader', 'fixedSideBar', 'hideSetting']),
+    ...mapState('setting', ['isMobile', 'theme', 'layout', 'footerLinks', 'copyright', 'fixedHeader', 'fixedSideBar', 'hideSetting', 'pageMinHeight']),
     sideMenuWidth() {
       return this.collapsed ? '80px' : '256px'
     },
@@ -66,6 +61,7 @@ export default {
     }
   },
   methods: {
+    ...mapMutations('setting', ['correctPageMinHeight']),
     toggleCollapse () {
       this.collapsed = !this.collapsed
     },
@@ -73,6 +69,12 @@ export default {
       this.toggleCollapse()
     },
   },
+  created() {
+    this.correctPageMinHeight(minHeight - 1)
+  },
+  beforeDestroy() {
+    this.correctPageMinHeight(-minHeight + 1)
+  },
   beforeCreate () {
     menuData = this.$router.options.routes.find((item) => item.path === '/').children
   }

src/layouts/PageLayout.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page-layout">
-    <page-header :style="`margin-top: ${multiPage ? 0 : -24}px`" :breadcrumb="breadcrumb" :title="pageTitle" :logo="logo" :avatar="avatar">
+    <page-header ref="pageHeader" :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">
@@ -21,14 +21,15 @@
 
 <script>
 import PageHeader from '@/components/page/header/PageHeader'
-import {mapState} from 'vuex'
+import {mapState, mapMutations} from 'vuex'
 export default {
   name: 'PageLayout',
   components: {PageHeader},
   props: ['desc', 'logo', 'title', 'avatar', 'linkList', 'extraImage'],
   data () {
     return {
-      page: {}
+      page: {},
+      pageHeaderHeight: 0,
     }
   },
   watch: {
@@ -36,11 +37,28 @@ export default {
       this.page = this.$route.meta.page
     }
   },
+  updated() {
+    if (!this._inactive) {
+      this.updatePageHeight()
+    }
+  },
+  activated() {
+    this.updatePageHeight()
+  },
+  deactivated() {
+    this.updatePageHeight(0)
+  },
+  mounted() {
+    this.updatePageHeight()
+  },
   created() {
     this.page = this.$route.meta.page
   },
+  beforeDestroy() {
+    this.updatePageHeight(0)
+  },
   computed: {
-    ...mapState('setting', ['layout', 'multiPage']),
+    ...mapState('setting', ['layout', 'multiPage', 'pageMinHeight']),
     pageTitle() {
       let pageTitle = this.page && this.page.title
       return this.title || this.$t(pageTitle) || this.routeName
@@ -60,9 +78,13 @@ export default {
       } else {
         return this.getRouteBreadcrumb()
       }
+    },
+    marginCorrect() {
+      return this.multiPage ? 24 : 0
     }
   },
   methods: {
+    ...mapMutations('setting', ['correctPageMinHeight']),
     getRouteBreadcrumb() {
       let routes = this.$route.matched
       let breadcrumb = []
@@ -72,6 +94,14 @@ export default {
         breadcrumb.push(this.$t(key.substring(1).replace(new RegExp('/', 'g'), '.') + '.name'))
       })
       return breadcrumb
+    },
+    /**
+     * 用于计算页面内容最小高度
+     * @param newHeight
+     */
+    updatePageHeight(newHeight = this.$refs.pageHeader.$el.offsetHeight + this.marginCorrect) {
+      this.correctPageMinHeight(this.pageHeaderHeight - newHeight)
+      this.pageHeaderHeight = newHeight
     }
   }
 }

src/layouts/header/AdminHeader.vue

@@ -13,7 +13,7 @@
       <div :class="['admin-header-right', headerTheme]">
           <header-search class="header-item" />
           <a-tooltip class="header-item" title="帮助文档" placement="bottom" >
-            <a>
+            <a href="https://iczer.github.io/vue-antd-admin/" target="_blank">
               <a-icon type="question-circle-o" />
             </a>
           </a-tooltip>

src/layouts/tabs/TabsView.vue

@@ -51,6 +51,9 @@ export default {
         { key: '2', icon: 'vertical-left', text: this.$t('closeRight') },
         { key: '3', icon: 'close', text: this.$t('closeOthers') }
       ]
+    },
+    tabsOffset() {
+      return this.multiPage ? 24 : 0
     }
   },
   created () {
@@ -58,6 +61,12 @@ export default {
     this.pageList.push(route)
     this.activePage = route.fullPath
   },
+  mounted () {
+    this.correctPageMinHeight(-this.tabsOffset)
+  },
+  beforeDestroy() {
+    this.correctPageMinHeight(this.tabsOffset)
+  },
   watch: {
     '$route': function (newRoute) {
       this.activePage = newRoute.fullPath
@@ -72,6 +81,9 @@ export default {
       if (!newVal) {
         this.pageList = [this.$route]
       }
+    },
+    tabsOffset(newVal, oldVal) {
+      this.correctPageMinHeight(oldVal - newVal)
     }
   },
   methods: {
@@ -167,7 +179,7 @@ export default {
     pageName(path) {
       return this.$t(path.substring(1).replace(new RegExp('/', 'g'), '.') + '.name')
     },
-    ...mapMutations('setting', ['setDustbins'])
+    ...mapMutations('setting', ['setDustbins', 'correctPageMinHeight'])
   }
 }
 /**

src/pages/exception/403.vue

@@ -1,5 +1,5 @@
 <template>
-  <exception-page :style="`min-height: ${minHeight}px`" type="403" />
+  <exception-page :style="`min-height: ${pageMinHeight}px`" type="403" />
 </template>
 
 <script>
@@ -8,12 +8,8 @@ import {mapState} from 'vuex'
 export default {
   name: 'Exp403',
   components: {ExceptionPage},
-  inject: ['layoutMinHeight'],
   computed: {
-    ...mapState('setting', ['multiPage']),
-    minHeight() {
-      return this.multiPage ? this.layoutMinHeight - 32 : this.layoutMinHeight
-    }
+    ...mapState('setting', ['pageMinHeight'])
   }
 }
 </script>

src/pages/exception/404.vue

@@ -1,5 +1,5 @@
 <template>
-  <exception-page :style="`min-height: ${minHeight}px`" type="404" />
+  <exception-page :style="`min-height: ${minHeight}`" type="404" />
 </template>
 
 <script>
@@ -8,12 +8,10 @@ import {mapState} from 'vuex'
 export default {
   name: 'Exp404',
   components: {ExceptionPage},
-  inject: ['layoutMinHeight'],
   computed: {
-    ...mapState('setting', ['multiPage']),
+    ...mapState('setting', ['pageMinHeight']),
     minHeight() {
-      let layoutMinHeight = this.layoutMinHeight || window.innerHeight
-      return this.multiPage ? layoutMinHeight - 32 : layoutMinHeight
+      return this.pageMinHeight ? this.pageMinHeight + 'px' : '100vh'
     }
   }
 }

src/pages/exception/500.vue

@@ -1,5 +1,5 @@
 <template>
-  <exception-page :style="`min-height: ${minHeight}px`" type="500" />
+  <exception-page :style="`min-height: ${pageMinHeight}px`" type="500" />
 </template>
 
 <script>
@@ -8,12 +8,8 @@ import {mapState} from 'vuex'
 export default {
   name: 'Exp500',
   components: {ExceptionPage},
-  inject: ['layoutMinHeight'],
   computed: {
-    ...mapState('setting', ['multiPage']),
-    minHeight() {
-      return this.multiPage ? this.layoutMinHeight - 24 : this.layoutMinHeight
-    }
+    ...mapState('setting', ['pageMinHeight'])
   }
 }
 </script>

src/router/config.js

@@ -10,6 +10,11 @@ const options = {
       name: '登录页',
       component: Login
     },
+    {
+      path: '*',
+      name: '404',
+      component: () => import('@/pages/exception/404'),
+    },
     {
       path: '/',
       name: '首页',
@@ -158,17 +163,17 @@ const options = {
           children: [
             {
               path: '404',
-              name: '404',
+              name: 'Exp404',
               component: () => import('@/pages/exception/404')
             },
             {
               path: '403',
-              name: '403',
+              name: 'Exp403',
               component: () => import('@/pages/exception/403')
             },
             {
               path: '500',
-              name: '500',
+              name: 'Exp500',
               component: () => import('@/pages/exception/500')
             }
           ]

src/router/index.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
-import {checkAuthorization} from '@/utils/request'
 import Router from 'vue-router'
+import {checkAuthorization} from '@/utils/request'
 import {options, loginIgnore} from './config'
 
 Vue.use(Router)

src/store/modules/setting.js

@@ -7,6 +7,7 @@ export default {
     animates: ADMIN.animates,
     palettes: ADMIN.palettes,
     dustbins: [],
+    pageMinHeight: 0,
     ...config,
   },
   mutations: {
@@ -42,6 +43,9 @@ export default {
     },
     setDustbins(state, dustbins) {
       state.dustbins = dustbins
+    },
+    correctPageMinHeight(state, minHeight) {
+      state.pageMinHeight += minHeight
     }
   }
 }