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'])
   }
 }
 /**