feat: complete layout toggle function

src/components/layout/GlobalHeader.vue

@@ -1,14 +1,16 @@
 <template>
-  <a-layout-header :class="[backgroundColor, 'global-header']">
+  <a-layout-header :class="[theme, 'global-header']">
-    <router-link v-if="isMobile" to="/" class="logo">
+    <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 style="float: right">
+      <div :class="['global-header-right', theme]">
           <header-search class="header-item" />
           <a-tooltip class="header-item" title="帮助文档" placement="bottom" >
             <a>
@@ -18,6 +20,7 @@
           <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 () {
+    theme () {
-      return this.layout === 'side' ? 'light' : this.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{
-
-  .trigger:hover {
       color: #1890ff;
     }
-
+  }
   .header-item{
     padding: 0 12px;
     display: inline-block;
@@ -104,7 +105,14 @@ export default {
       background: #fff;
     }
     &.dark{
-      background-color: #001529;
+      background: #001529;
+    }
+    .global-header-wide{
+      &.head{
+        max-width: 1200px;
+        margin: auto;
+      }
+      &.side{
       }
       .logo {
         height: 64px;
@@ -114,13 +122,33 @@ export default {
         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;
+          }
+        }
+      }
+    }
   }
 </style>

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>

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,10 +84,18 @@ export default {
   .header-notice{
     display: inline-block;
     transition: all 0.3s;
-    & :global{
     span {
       vertical-align: initial;
     }
+    .header-notice-icon{
+      font-size: 16px;
+      padding: 4px;
+      &.dark{
+        color: #fff;
+      }
+      &.light{
+        color: rgba(0,0,0,.65);
+      }
     }
   }
 </style>

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>

src/components/page/PageHeader.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="page-header">
+    <div :class="['page-header-wide', layout]">
       <div class="breadcrumb">
         <a-breadcrumb>
           <a-breadcrumb-item :key="item.path" v-for="(item, index) in breadcrumb">
@@ -21,7 +22,7 @@
             <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,6 +66,13 @@ export default {
     background: #fff;
     padding: 16px 32px 0;
     border-bottom: 1px solid #e8e8e8;
+    .page-header-wide{
+      &.head{
+        margin: auto;
+        max-width: 1200px;
+      }
+      &.side{
+      }
       .breadcrumb{
         margin-bottom: 16px;
       }
@@ -114,4 +127,5 @@ export default {
         }
       }
     }
+  }
 </style>