From 5a650327724d1c86b601dc022f5f1593fd9ff432 Mon Sep 17 00:00:00 2001
From: chenghongxing <1126263215@qq.com>
Date: Sun, 6 Sep 2020 12:06:20 +0800
Subject: [PATCH] chore: optimize the code of page width style;

---
 src/components/page/header/PageHeader.vue | 4 ++--
 src/components/page/header/index.less     | 8 +-------
 src/config/default/setting.config.js      | 1 +
 src/layouts/PageLayout.vue                | 4 ++--
 src/layouts/header/AdminHeader.vue        | 2 +-
 src/layouts/header/index.less             | 2 +-
 src/layouts/tabs/TabsView.vue             | 8 +++++++-
 src/store/modules/setting.js              | 1 -
 8 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/page/header/PageHeader.vue b/src/components/page/header/PageHeader.vue
index 8825c8a..60fa64b 100644
--- a/src/components/page/header/PageHeader.vue
+++ b/src/components/page/header/PageHeader.vue
@@ -1,6 +1,6 @@
 <template>
-  <div :class="['page-header', layout == 'head' && pageWidth == 'fixed' ? layout : '']">
-    <div :class="['page-header-wide']">
+  <div :class="['page-header', layout, pageWidth]">
+    <div class="page-header-wide">
       <div class="breadcrumb">
         <a-breadcrumb>
           <a-breadcrumb-item :key="index" v-for="(item, index) in breadcrumb">
diff --git a/src/components/page/header/index.less b/src/components/page/header/index.less
index 8103630..4d45d73 100644
--- a/src/components/page/header/index.less
+++ b/src/components/page/header/index.less
@@ -1,17 +1,11 @@
 .page-header{
   background: @base-bg-color;
   padding: 16px 24px;
-  &.head{
+  &.head.fixed{
     margin: auto;
     max-width: 1400px;
   }
   .page-header-wide{
-    &.head{
-      margin: auto;
-      max-width: 1400px;
-    }
-    &.side{
-    }
     .breadcrumb{
       margin-bottom: 20px;
     }
diff --git a/src/config/default/setting.config.js b/src/config/default/setting.config.js
index bcbf470..b2ef5a7 100644
--- a/src/config/default/setting.config.js
+++ b/src/config/default/setting.config.js
@@ -11,6 +11,7 @@ module.exports = {
   layout: 'side',                       //导航布局，可选 side 和 head，分别为侧边导航和顶部导航
   fixedHeader: false,                   //固定头部状态栏，true:固定，false:不固定
   fixedSideBar: true,                   //固定侧边栏，true:固定，false:不固定
+  pageWidth: 'fixed',                   //内容区域宽度，fixed:固定宽度，fluid:流式宽度
   weekMode: false,                      //色弱模式，true:开启，false:不开启
   multiPage: false,                     //多页签模式，true:开启，false:不开启
   hideSetting: false,                   //隐藏设置抽屉，true:隐藏，false:不隐藏
diff --git a/src/layouts/PageLayout.vue b/src/layouts/PageLayout.vue
index 908cba4..e936145 100644
--- a/src/layouts/PageLayout.vue
+++ b/src/layouts/PageLayout.vue
@@ -13,7 +13,7 @@
       </div>
       <slot v-if="this.$slots.extra" slot="extra" name="extra"></slot>
     </page-header>
-    <div ref="page" :class="['page-content', layout == 'head' ? (pageWidth == 'fixed' ? layout : '') : '']" >
+    <div ref="page" :class="['page-content', layout, pageWidth]" >
       <slot></slot>
     </div>
   </div>
@@ -130,7 +130,7 @@ export default {
     padding: 24px 0 0;
     &.side{
     }
-    &.head{
+    &.head.fixed{
       margin: 0 auto;
       max-width: 1400px;
     }
diff --git a/src/layouts/header/AdminHeader.vue b/src/layouts/header/AdminHeader.vue
index d13b361..8b6b343 100644
--- a/src/layouts/header/AdminHeader.vue
+++ b/src/layouts/header/AdminHeader.vue
@@ -1,6 +1,6 @@
 <template>
   <a-layout-header :class="[headerTheme, 'admin-header']">
-    <div :class="['admin-header-wide', layout == 'side' ? layout : (pageWidth == 'fixed' ? layout : '')]">
+    <div :class="['admin-header-wide', layout, pageWidth]">
       <router-link v-if="isMobile || layout === 'head'" to="/" :class="['logo', isMobile ? null : 'pc', headerTheme]">
         <img width="32" src="@/assets/img/logo.png" />
         <h1 v-if="!isMobile">{{systemName}}</h1>
diff --git a/src/layouts/header/index.less b/src/layouts/header/index.less
index 8de8a35..d54fca4 100644
--- a/src/layouts/header/index.less
+++ b/src/layouts/header/index.less
@@ -21,7 +21,7 @@
   }
   .admin-header-wide{
     padding-left: 24px;
-    &.head{
+    &.head.fixed{
       max-width: 1400px;
       margin: auto;
       padding-left: 0;
diff --git a/src/layouts/tabs/TabsView.vue b/src/layouts/tabs/TabsView.vue
index 2488e83..026f270 100644
--- a/src/layouts/tabs/TabsView.vue
+++ b/src/layouts/tabs/TabsView.vue
@@ -5,7 +5,7 @@
       v-if="multiPage"
       type="editable-card"
       :active-key="activePage"
-      :style="`margin: -16px auto 8px; ${layout == 'head' && pageWidth == 'fixed' ? 'max-width: 1400px;' : ''}`"
+      :class="['tabs-view', layout, pageWidth]"
       :hide-add="true"
       @change="changePage"
       @edit="editPage"
@@ -206,6 +206,12 @@ function getPageKey (target, depth = 0) {
 </script>
 
 <style scoped lang="less">
+  .tabs-view{
+    margin: -16px auto 8px;
+    &.head.fixed{
+      max-width: 1400px;
+    }
+  }
   .tabs-view-content{
     position: relative;
   }
diff --git a/src/store/modules/setting.js b/src/store/modules/setting.js
index 57bf429..3e15a67 100644
--- a/src/store/modules/setting.js
+++ b/src/store/modules/setting.js
@@ -7,7 +7,6 @@ export default {
   namespaced: true,
   state: {
     isMobile: false,
-    pageWidth: 'fixed',
     animates: ADMIN.animates,
     palettes: ADMIN.palettes,
     pageMinHeight: 0,