From 2adbdc8830512f264519f96ca04c4d2cb7c6bfef Mon Sep 17 00:00:00 2001
From: iczer <1126263215@qq.com>
Date: Thu, 30 Aug 2018 11:57:21 +0800
Subject: [PATCH] feat: complete layout toggle function

---
 src/components/layout/GlobalHeader.vue | 108 ++++++++++++-------
 src/components/layout/GlobalLayout.vue |   2 +-
 src/components/layout/HeaderNotice.vue |  21 +++-
 src/components/layout/PageLayout.vue   |  17 ++-
 src/components/page/PageHeader.vue     | 144 ++++++++++++++-----------
 5 files changed, 180 insertions(+), 112 deletions(-)

diff --git a/src/components/layout/GlobalHeader.vue b/src/components/layout/GlobalHeader.vue
index 3e86616..7f97daf 100644
--- a/src/components/layout/GlobalHeader.vue
+++ b/src/components/layout/GlobalHeader.vue
@@ -1,22 +1,25 @@
 <template>
-  <a-layout-header :class="[backgroundColor, 'global-header']">
-    <router-link v-if="isMobile" to="/" class="logo">
-      <img width="32" src="static/img/vue-antd-logo.png" />
-    </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>
-    <div style="float: right">
-        <header-search class="header-item" />
-        <a-tooltip class="header-item" title="帮助文档" placement="bottom" >
-          <a>
-            <a-icon type="question-circle-o" />
-          </a>
-        </a-tooltip>
-        <header-notice class="header-item"/>
-        <header-avatar class="header-item"/>
+  <a-layout-header :class="[theme, 'global-header']">
+    <div :class="['global-header-wide', layout]">
+      <router-link v-if="isMobile || layout === 'head'" to="/" :class="['logo', isMobile ? null : 'pc', theme]">
+        <img width="32" src="static/img/vue-antd-logo.png" />
+        <h1 v-if="!isMobile">Vue Antd Admin</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>
+      <div :class="['global-header-right', theme]">
+          <header-search class="header-item" />
+          <a-tooltip class="header-item" title="帮助文档" placement="bottom" >
+            <a>
+              <a-icon type="question-circle-o" />
+            </a>
+          </a-tooltip>
+          <header-notice class="header-item"/>
+          <header-avatar class="header-item"/>
+      </div>
     </div>
   </a-layout-header>
 </template>
@@ -48,7 +51,7 @@ export default {
     ALayout,
     ALayoutSider,
     ALayoutHeader},
-  props: ['collapsed', 'menuData', 'theme'],
+  props: ['collapsed', 'menuData'],
   computed: {
     isMobile () {
       return this.$store.state.setting.isMobile
@@ -56,8 +59,8 @@ export default {
     layout () {
       return this.$store.state.setting.layout
     },
-    backgroundColor () {
-      return this.layout === 'side' ? 'light' : this.theme
+    theme () {
+      return this.layout === 'side' ? 'light' : this.$store.state.setting.theme
     }
   },
   methods: {
@@ -78,12 +81,10 @@ export default {
     padding: 0 24px;
     cursor: pointer;
     transition: color .3s;
+    &:hover{
+      color: #1890ff;
+    }
   }
-
-  .trigger:hover {
-    color: #1890ff;
-  }
-
   .header-item{
     padding: 0 12px;
     display: inline-block;
@@ -104,23 +105,50 @@ export default {
       background: #fff;
     }
     &.dark{
-      background-color: #001529;
+      background: #001529;
     }
-    .logo {
-      height: 64px;
-      line-height: 58px;
-      vertical-align: top;
-      display: inline-block;
-      padding: 0 12px 0 24px;
-      cursor: pointer;
-      font-size: 20px;
-      img {
+    .global-header-wide{
+      &.head{
+        max-width: 1200px;
+        margin: auto;
+      }
+      &.side{
+      }
+      .logo {
+        height: 64px;
+        line-height: 58px;
+        vertical-align: top;
         display: inline-block;
-        vertical-align: middle;
+        padding: 0 12px 0 24px;
+        cursor: pointer;
+        font-size: 20px;
+        &.pc{
+          padding: 0 12px 0 0;
+        }
+        img {
+          display: inline-block;
+          vertical-align: middle;
+        }
+        h1{
+          display: inline-block;
+          font-size: 16px;
+        }
+        &.dark h1{
+          color: #fff;
+        }
+      }
+      .global-header-menu{
+        display: inline-block;
+      }
+      .global-header-right{
+        float: right;
+        &.dark{
+          color: #fff;
+          i{
+            color: #fff;
+          }
+        }
       }
-    }
-    .global-header-menu{
-      display: inline-block;
     }
   }
 </style>
diff --git a/src/components/layout/GlobalLayout.vue b/src/components/layout/GlobalLayout.vue
index 6b6371b..9be287c 100644
--- a/src/components/layout/GlobalLayout.vue
+++ b/src/components/layout/GlobalLayout.vue
@@ -11,7 +11,7 @@
       <setting />
     </drawer>
     <a-layout>
-      <global-header :menuData="menuData" :theme="theme" :collapsed="collapsed" @toggleCollapse="toggleCollapse"/>
+      <global-header :menuData="menuData" :collapsed="collapsed" @toggleCollapse="toggleCollapse"/>
       <a-layout-content :style="{minHeight: minHeight, margin: '24px 24px 0'}">
         <slot></slot>
       </a-layout-content>
diff --git a/src/components/layout/HeaderNotice.vue b/src/components/layout/HeaderNotice.vue
index b209c83..320f0f7 100644
--- a/src/components/layout/HeaderNotice.vue
+++ b/src/components/layout/HeaderNotice.vue
@@ -33,7 +33,7 @@
     </template>
     <span @click="fetchNotice" class="header-notice">
       <a-badge count="12">
-        <a-icon style="font-size: 16px; padding: 4px" type="bell" />
+        <a-icon :class="['header-notice-icon', theme]" type="bell" />
       </a-badge>
     </span>
   </a-popover>
@@ -60,6 +60,11 @@ export default {
       loadding: false
     }
   },
+  computed: {
+    theme () {
+      return this.$store.state.setting.layout === 'side' ? 'light' : this.$store.state.setting.theme
+    }
+  },
   methods: {
     fetchNotice () {
       if (this.loadding) {
@@ -79,9 +84,17 @@ export default {
   .header-notice{
     display: inline-block;
     transition: all 0.3s;
-    & :global{
-      span {
-        vertical-align: initial;
+    span {
+      vertical-align: initial;
+    }
+    .header-notice-icon{
+      font-size: 16px;
+      padding: 4px;
+      &.dark{
+        color: #fff;
+      }
+      &.light{
+        color: rgba(0,0,0,.65);
       }
     }
   }
diff --git a/src/components/layout/PageLayout.vue b/src/components/layout/PageLayout.vue
index f91f7cd..c39809f 100644
--- a/src/components/layout/PageLayout.vue
+++ b/src/components/layout/PageLayout.vue
@@ -13,7 +13,7 @@
       </div>
       <slot slot="extra" name="extra"></slot>
     </page-header>
-    <div ref="page" style="margin: 24px 24px 0px">
+    <div ref="page" :class="['page-content', layout]" >
       <slot ></slot>
     </div>
   </div>
@@ -31,6 +31,11 @@ export default {
       breadcrumb: []
     }
   },
+  computed: {
+    layout () {
+      return this.$store.state.setting.layout
+    }
+  },
   mounted () {
     this.getBreadcrumb()
   },
@@ -58,5 +63,13 @@ export default {
       }
     }
   }
-
+  .page-content{
+    &.side{
+      margin: 24px 24px 0px;
+    }
+    &.head{
+      margin: 24px auto 0;
+      max-width: 1200px;
+    }
+  }
 </style>
diff --git a/src/components/page/PageHeader.vue b/src/components/page/PageHeader.vue
index 5f447d2..fa54d8e 100644
--- a/src/components/page/PageHeader.vue
+++ b/src/components/page/PageHeader.vue
@@ -1,27 +1,28 @@
 <template>
   <div class="page-header">
-    <div class="breadcrumb">
-      <a-breadcrumb>
-        <a-breadcrumb-item :key="item.path" v-for="(item, index) in breadcrumb">
-          <span v-if="index === 0"><a href="#/dashboard/workplace">{{item.name}}</a></span>
-          <span v-else>{{item.name}}</span>
-        </a-breadcrumb-item>
-      </a-breadcrumb>
-    </div>
-    <div class="detail">
-      <div v-if="avatar" class="avatar"><a-avatar :src="avatar" /></div>
-      <div class="main">
-        <div class="row">
-          <img v-if="logo" :src="logo" class="logo" />
-          <h1 v-if="title" class="title">{{title}}</h1>
-          <div class="action"><slot name="action"></slot></div>
-        </div>
-        <div class="row">
-          <div v-if="this.$slots.content" class="content"><slot name="content"></slot></div>
-          <div v-if="this.$slots.extra" class="extra"><slot name="extra"></slot></div>
+    <div :class="['page-header-wide', layout]">
+      <div class="breadcrumb">
+        <a-breadcrumb>
+          <a-breadcrumb-item :key="item.path" v-for="(item, index) in breadcrumb">
+            <span v-if="index === 0"><a href="#/dashboard/workplace">{{item.name}}</a></span>
+            <span v-else>{{item.name}}</span>
+          </a-breadcrumb-item>
+        </a-breadcrumb>
+      </div>
+      <div class="detail">
+        <div v-if="avatar" class="avatar"><a-avatar :src="avatar" /></div>
+        <div class="main">
+          <div class="row">
+            <img v-if="logo" :src="logo" class="logo" />
+            <h1 v-if="title" class="title">{{title}}</h1>
+            <div class="action"><slot name="action"></slot></div>
+          </div>
+          <div class="row">
+            <div v-if="this.$slots.content" class="content"><slot name="content"></slot></div>
+            <div v-if="this.$slots.extra" class="extra"><slot name="extra"></slot></div>
+          </div>
         </div>
       </div>
-
     </div>
   </div>
 </template>
@@ -51,6 +52,11 @@ export default {
       type: String,
       required: false
     }
+  },
+  computed: {
+    layout () {
+      return this.$store.state.setting.layout
+    }
   }
 }
 </script>
@@ -60,56 +66,64 @@ export default {
     background: #fff;
     padding: 16px 32px 0;
     border-bottom: 1px solid #e8e8e8;
-    .breadcrumb{
-      margin-bottom: 16px;
-    }
-    .detail{
-      display: flex;
-      .row {
-        display: flex;
-        width: 100%;
+    .page-header-wide{
+      &.head{
+        margin: auto;
+        max-width: 1200px;
       }
-      .avatar {
-        flex: 0 1 72px;
-        margin:0 24px 8px 0;
-        & > span {
-          border-radius: 72px;
-          display: block;
-          width: 72px;
-          height: 72px;
-        }
+      &.side{
       }
-      .main{
-        width: 100%;
-        flex: 0 1 auto;
-        .title{
-          flex: auto;
-          font-size: 20px;
-          font-weight: 500;
-          color: rgba(0,0,0,.85);
-          margin-bottom: 16px;
-        }
-        .logo{
-          width: 28px;
-          height: 28px;
-          border-radius: 4px;
-          margin-right: 16px;
-        }
-        .content{
-          margin-bottom: 16px;
-          flex: auto;
+      .breadcrumb{
+        margin-bottom: 16px;
+      }
+      .detail{
+        display: flex;
+        .row {
+          display: flex;
+          width: 100%;
         }
-        .extra{
-          flex: 0 1 auto;
-          margin-left: 88px;
-          min-width: 242px;
-          text-align: right;
+        .avatar {
+          flex: 0 1 72px;
+          margin:0 24px 8px 0;
+          & > span {
+            border-radius: 72px;
+            display: block;
+            width: 72px;
+            height: 72px;
+          }
         }
-        .action{
-          margin-left: 56px;
-          min-width: 266px;
+        .main{
+          width: 100%;
           flex: 0 1 auto;
-          text-align: right;
+          .title{
+            flex: auto;
+            font-size: 20px;
+            font-weight: 500;
+            color: rgba(0,0,0,.85);
+            margin-bottom: 16px;
+          }
+          .logo{
+            width: 28px;
+            height: 28px;
+            border-radius: 4px;
+            margin-right: 16px;
+          }
+          .content{
+            margin-bottom: 16px;
+            flex: auto;
+          }
+          .extra{
+            flex: 0 1 auto;
+            margin-left: 88px;
+            min-width: 242px;
+            text-align: right;
+          }
+          .action{
+            margin-left: 56px;
+            min-width: 266px;
+            flex: 0 1 auto;
+            text-align: right;
+          }
         }
       }
     }