fix: #12 contentWidth: Fluid

Author: sendya

src/components/page/GlobalLayout.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-layout class="layout" :class="device">
+  <a-layout class="layout" :class="[device]">
 
     <template v-if="layoutMode === 'sidemenu'">
       <a-drawer
@@ -47,7 +47,7 @@
       </a-drawer>
     </template>
 
-    <a-layout :class="[layoutMode]" :style="{ paddingLeft: fixSiderbar && device === 'desktop' ? `${sidebarOpened ? 256 : 80}px` : '0' }">
+    <a-layout :class="[layoutMode, `content-width-${contentWidth}`]" :style="{ paddingLeft: fixSiderbar && device === 'desktop' ? `${sidebarOpened ? 256 : 80}px` : '0' }">
       <!-- layout header -->
       <global-header :mode="layoutMode" :theme="theme" :collapsed="collapsed" :device="device" @toggle="toggle"/>
 
@@ -98,6 +98,7 @@
         sidebarOpened: state => state.app.sidebar.opened,
         fixedHeader: state => state.app.fixedHeader,
         fixSiderbar: state => state.app.fixSiderbar,
+        contentWidth: state => state.app.contentWidth,
         theme: state => state.app.theme,
         device: state => state.app.device,
       })
@@ -205,6 +206,18 @@
           width: 100%;
         }
       }
+      /* 必须为 topmenu  才能启用流式布局 */
+      &.content-width-Fluid {
+        .header-index-wide {
+          max-width: unset;
+          margin-left: 24px;
+        }
+
+        .page-header-index-wide {
+          max-width: unset;
+        }
+      }
+
     }
 
     .sidemenu {

src/components/setting/SettingDrawer.vue

@@ -88,10 +88,15 @@
           <div :style="{ marginTop: '24px' }">
             <a-list :split="false">
               <a-list-item>
-                <a-select slot="actions" defaultValue="auto" size="small">
-                  <a-select-option value="fixed" v-if="layoutMode !== 'sidemenu'" disabled>固定</a-select-option>
-                  <a-select-option value="auto">流式</a-select-option>
-                </a-select>
+                <a-tooltip slot="actions">
+                  <template slot='title'>
+                    该设定仅 [顶部栏导航] 时有效
+                  </template>
+                  <a-select  size="small" style="width: 80px;" :defaultValue="contentWidth" @change="handleContentWidthChange">
+                    <a-select-option value="Fixed">固定</a-select-option>
+                    <a-select-option value="Fluid" v-if="layoutMode !== 'sidemenu'">流式</a-select-option>
+                  </a-select>
+                </a-tooltip>
                 <a-list-item-meta>
                   <div slot="title">内容区域宽度</div>
                 </a-list-item-meta>
@@ -103,9 +108,9 @@
                 </a-list-item-meta>
               </a-list-item>
               <a-list-item>
-                <a-switch slot="actions" size="small" :defaultChecked="autoHideHeader" @change="handleFixedHeaderHidden" />
+                <a-switch slot="actions" size="small" :disabled="!fixedHeader" :defaultChecked="autoHideHeader" @change="handleFixedHeaderHidden" />
                 <a-list-item-meta>
-                  <div slot="title">下滑时隐藏 Header</div>
+                  <div slot="title" :style="{ textDecoration: !fixedHeader ? 'line-through' : 'unset' }">下滑时隐藏 Header</div>
                 </a-list-item-meta>
               </a-list-item>
               <a-list-item >
@@ -177,7 +182,11 @@
         fixedHeader: state => state.app.fixedHeader,
         fixSiderbar: state => state.app.fixSiderbar,
         autoHideHeader: state => state.app.autoHideHeader,
-      })
+        contentWidth: state => state.app.contentWidth,
+      }),
+    },
+    watch: {
+
     },
     mounted () {
       const vm = this
@@ -218,6 +227,9 @@
         //
         this.handleFixSiderbar(false);
       },
+      handleContentWidthChange (type) {
+        this.$store.dispatch('ToggleContentWidth', type)
+      },
       changeColor (color) {
         if (this.primaryColor !== color) {
           this.$store.dispatch('ToggleColor', color)

src/main.js

@@ -22,7 +22,8 @@ import {
   SIDEBAR_TYPE,
   DEFAULT_FIXED_HEADER,
   DEFAULT_FIXED_HEADER_HIDDEN,
-  DEFAULT_FIXED_SIDEMENU
+  DEFAULT_FIXED_SIDEMENU,
+  DEFAULT_CONTENT_WIDTH_TYPE
 } from "@/store/mutation-types"
 import config from '@/defaultSettings'
 
@@ -42,6 +43,7 @@ new Vue({
     store.commit('TOGGLE_LAYOUT_MODE', Vue.ls.get(DEFAULT_LAYOUT_MODE, config.layout))
     store.commit('TOGGLE_FIXED_HEADER', Vue.ls.get(DEFAULT_FIXED_HEADER, config.fixedHeader))
     store.commit('TOGGLE_FIXED_SIDERBAR', Vue.ls.get(DEFAULT_FIXED_SIDEMENU, config.fixSiderbar))
+    store.commit('TOGGLE_CONTENT_WIDTH', Vue.ls.get(DEFAULT_CONTENT_WIDTH_TYPE, config.contentWidth))
     store.commit('TOGGLE_FIXED_HEADER_HIDDEN', Vue.ls.get(DEFAULT_FIXED_HEADER_HIDDEN, config.autoHideHeader))
     store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak))
     store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor))

src/store/modules/app.js

@@ -1,5 +1,15 @@
 import Vue from 'vue'
-import { SIDEBAR_TYPE, DEFAULT_THEME, DEFAULT_LAYOUT_MODE, DEFAULT_COLOR, DEFAULT_COLOR_WEAK, DEFAULT_FIXED_HEADER, DEFAULT_FIXED_SIDEMENU, DEFAULT_FIXED_HEADER_HIDDEN } from "@/store/mutation-types"
+import {
+  SIDEBAR_TYPE,
+  DEFAULT_THEME,
+  DEFAULT_LAYOUT_MODE,
+  DEFAULT_COLOR,
+  DEFAULT_COLOR_WEAK,
+  DEFAULT_FIXED_HEADER,
+  DEFAULT_FIXED_SIDEMENU,
+  DEFAULT_FIXED_HEADER_HIDDEN,
+  DEFAULT_CONTENT_WIDTH_TYPE
+} from "@/store/mutation-types"
 
 const app = {
   state: {
@@ -10,6 +20,7 @@ const app = {
     device: 'desktop',
     theme: '',
     layout: '',
+    contentWidth: '',
     fixedHeader: false,
     fixSiderbar: false,
     autoHideHeader: false,
@@ -50,7 +61,10 @@ const app = {
       Vue.ls.set(DEFAULT_FIXED_HEADER_HIDDEN, show)
       state.autoHideHeader = show
     },
-
+    TOGGLE_CONTENT_WIDTH: (state, type) => {
+      Vue.ls.set(DEFAULT_CONTENT_WIDTH_TYPE, type)
+      state.contentWidth = type
+    },
     TOGGLE_COLOR: (state, color) => {
       Vue.ls.set(DEFAULT_COLOR, color)
       state.color = color
@@ -77,6 +91,9 @@ const app = {
       commit('TOGGLE_LAYOUT_MODE', mode)
     },
     ToggleFixedHeader({ commit }, fixedHeader) {
+      if (!fixedHeader) {
+        commit('TOGGLE_FIXED_HEADER_HIDDEN', false)
+      }
       commit('TOGGLE_FIXED_HEADER', fixedHeader)
     },
     ToggleFixSiderbar({ commit }, fixSiderbar) {
@@ -85,6 +102,9 @@ const app = {
     ToggleFixedHeaderHidden({ commit }, show) {
       commit('TOGGLE_FIXED_HEADER_HIDDEN', show)
     },
+    ToggleContentWidth({ commit }, type) {
+      commit('TOGGLE_CONTENT_WIDTH', type)
+    },
     ToggleColor({ commit }, color) {
       commit('TOGGLE_COLOR', color)
     },

src/store/mutation-types.js

@@ -6,4 +6,10 @@ export const DEFAULT_COLOR = 'DEFAULT_COLOR'
 export const DEFAULT_COLOR_WEAK = 'DEFAULT_COLOR_WEAK'
 export const DEFAULT_FIXED_HEADER = 'DEFAULT_FIXED_HEADER'
 export const DEFAULT_FIXED_SIDEMENU= 'DEFAULT_FIXED_SIDEMENU'
-export const DEFAULT_FIXED_HEADER_HIDDEN = 'DEFAULT_FIXED_HEADER_HIDDEN'
+export const DEFAULT_FIXED_HEADER_HIDDEN = 'DEFAULT_FIXED_HEADER_HIDDEN'
+export const DEFAULT_CONTENT_WIDTH_TYPE = 'DEFAULT_CONTENT_WIDTH_TYPE'
+
+export const CONTENT_WIDTH_TYPE = {
+  Fluid: 'Fluid',
+  Fixed: 'Fixed'
+}