新增：固定Header功能；

Signed-off-by: iczer <1126263215@qq.com>

src/components/setting/Setting.vue

@@ -29,7 +29,7 @@
         </a-list-item>
         <a-list-item>
           固定Header
-          <a-switch slot="actions" size="small" />
+          <a-switch :checked="fixedHeader" slot="actions" size="small" @change="setFixedHeader" />
         </a-list-item>
         <a-list-item>
           固定Siderbar
@@ -114,7 +114,7 @@ export default {
     directions() {
       return this.animates.find(item => item.name == this.animate).directions
     },
-    ...mapState('setting', ['animates', 'multiPage', 'weekMode'])
+    ...mapState('setting', ['animates', 'multiPage', 'weekMode', 'fixedHeader'])
   },
   methods: {
     onColorChange (values, colors) {
@@ -153,6 +153,9 @@ export default {
         direction: this.direction
       }
       this.$store.commit('setting/setAnimate', animate)
+    },
+    setFixedHeader(checked) {
+      this.$store.commit('setting/setFixedHeader', checked)
     }
   }
 }

src/config/index.js

@@ -3,6 +3,7 @@ module.exports = {
   themeColor: '#1890ff',
   theme: 'dark',
   layout: 'side',
+  fixedHeader: false,
   weekMode: false,
   multiPage: false,
   systemName: 'Vue Antd Admin',

src/layouts/GlobalHeader.vue

@@ -1,16 +1,16 @@
 <template>
-  <a-layout-header :class="[theme, 'global-header']">
+  <a-layout-header :class="[headerTheme, 'global-header']">
     <div :class="['global-header-wide', layout]">
-      <router-link v-if="isMobile || layout === 'head'" to="/" :class="['logo', isMobile ? null : 'pc', theme]">
+      <router-link v-if="isMobile || layout === 'head'" to="/" :class="['logo', isMobile ? null : 'pc', headerTheme]">
         <img width="32" src="@/assets/img/vue-antd-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'" class="global-header-menu">
-        <i-menu style="height: 64px; line-height: 64px;" :theme="theme" mode="horizontal" :menuData="menuData" @select="onSelect"/>
+      <div v-if="layout == 'head' && !isMobile" class="global-header-menu">
+        <i-menu style="height: 64px; line-height: 64px;" :theme="headerTheme" mode="horizontal" :menuData="menuData" @select="onSelect"/>
       </div>
-      <div :class="['global-header-right', theme]">
+      <div :class="['global-header-right', headerTheme]">
           <header-search class="header-item" />
           <a-tooltip class="header-item" title="帮助文档" placement="bottom" >
             <a>
@@ -29,23 +29,21 @@ import HeaderSearch from './HeaderSearch'
 import HeaderNotice from './HeaderNotice'
 import HeaderAvatar from './HeaderlAvatar'
 import IMenu from '../components/menu/menu'
+import {mapState} from 'vuex'
 
 export default {
   name: 'GlobalHeader',
   components: {IMenu, HeaderAvatar, HeaderNotice, HeaderSearch},
   props: ['collapsed', 'menuData'],
+  provide() {
+    return {
+      headerTheme: this.theme
+    }
+  },
   computed: {
-    isMobile () {
-      return this.$store.state.setting.isMobile
-    },
-    layout () {
-      return this.$store.state.setting.layout
-    },
-    theme () {
-      return this.layout === 'side' ? 'light' : this.$store.state.setting.theme
-    },
-    systemName () {
-      return this.$store.state.setting.systemName
+    ...mapState('setting', ['theme', 'isMobile', 'layout', 'systemName']),
+    headerTheme () {
+      return (this.layout == 'side' && !this.isMobile) ? 'light' : this.theme
     }
   },
   methods: {
@@ -85,13 +83,16 @@ export default {
     padding: 0 12px 0 0;
     -webkit-box-shadow: 0 1px 4px rgba(0,21,41,.08);
     box-shadow: 0 1px 4px rgba(0,21,41,.08);
-    z-index: 99;
+    z-index: 1;
     position: relative;
     &.light{
       background: #fff;
     }
     &.dark{
       background: #001529;
+      .trigger{
+        color: white;
+      }
     }
     .global-header-wide{
       &.head{

src/layouts/GlobalLayout.vue

@@ -6,12 +6,13 @@
     <sider-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'" />
+        <a-icon :type="showSetting ? 'close' : 'setting'"/>
       </div>
       <setting />
     </drawer>
     <a-layout class="global-layout-main">
-      <global-header :menuData="menuData" :collapsed="collapsed" @toggleCollapse="toggleCollapse"/>
+      <global-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">
         <div :style="`min-height: ${minHeight}px; position: relative`">
           <slot></slot>
@@ -53,7 +54,16 @@ export default {
     }
   },
   computed: {
-    ...mapState('setting', ['isMobile', 'theme', 'layout', 'footerLinks', 'copyright']),
+    ...mapState('setting', ['isMobile', 'theme', 'layout', 'footerLinks', 'copyright', 'fixedHeader']),
+    sideMenuWidth() {
+      return this.collapsed ? '80px' : '256px'
+    },
+    headerStyle() {
+      let width = (this.fixedHeader && this.layout == 'side' && !this.isMobile) ? `calc(100% - ${this.sideMenuWidth})` : '100%'
+      let position = this.fixedHeader ? 'fixed' : 'static'
+      let transition = this.fixedHeader ? 'transition: width 0.2s' : ''
+      return `width: ${width}; position: ${position}; ${transition}`
+    }
   },
   methods: {
     toggleCollapse () {
@@ -67,7 +77,7 @@ export default {
     },
     onSettingDrawerChange (val) {
       this.showSetting = val
-    }
+    },
   },
   beforeCreate () {
     menuData = this.$router.options.routes.find((item) => item.path === '/').children
@@ -83,6 +93,7 @@ export default {
       scrollbar-color: @primary-color @primary-2;
       scrollbar-width: thin;
       -ms-overflow-style:none;
+      position: relative;
       &::-webkit-scrollbar{
         width: 3px;
         height: 1px;
@@ -96,6 +107,10 @@ export default {
         border-radius: 3px;
         background: @primary-3;
       }
+      .global-header{
+        top: 0;
+        right: 0;
+      }
     }
     .global-layout-content{
       padding: 24px 24px 0;

src/layouts/HeaderNotice.vue

@@ -48,11 +48,9 @@ export default {
       loading: false
     }
   },
+  inject: 'headerTheme',
   computed: {
-    ...mapState('setting', ['layout', 'theme']),
-    headerTheme() {
-      return this.layout == 'side' ? 'light' : this.theme
-    },
+    ...mapState('setting', ['layout', 'theme'])
   },
   methods: {
     fetchNotice () {

src/store/modules/setting.js

@@ -27,6 +27,9 @@ export default {
     },
     setWeekMode(state, weekMode) {
       state.weekMode = weekMode
+    },
+    setFixedHeader(state, fixedHeader) {
+      state.fixedHeader = fixedHeader
     }
   }
 }