feat: add layout toggle

src/components/layout/GlobalHeader.vue

@@ -1,10 +1,13 @@
 <template>
-  <a-layout-header class="global-header">
+  <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 class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggleCollapse"/>
+    <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" >
@@ -27,12 +30,14 @@ import HeaderNotice from './HeaderNotice'
 import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
 import HeaderAvatar from './HeaderlAvatar'
 import ADivider from 'ant-design-vue/es/divider/index'
+import IMenu from '../menu/menu'
 
 const ALayoutSider = ALayout.Sider
 const ALayoutHeader = ALayout.Header
 export default {
   name: 'GlobalHeader',
   components: {
+    IMenu,
     ADivider,
     HeaderAvatar,
     ATooltip,
@@ -43,15 +48,24 @@ export default {
     ALayout,
     ALayoutSider,
     ALayoutHeader},
-  props: ['collapsed'],
+  props: ['collapsed', 'menuData', 'theme'],
   computed: {
     isMobile () {
       return this.$store.state.setting.isMobile
+    },
+    layout () {
+      return this.$store.state.setting.layout
+    },
+    backgroundColor () {
+      return this.layout === 'side' ? 'light' : this.theme
     }
   },
   methods: {
     toggleCollapse () {
       this.$emit('toggleCollapse')
+    },
+    onSelect (obj) {
+      this.$emit('menuSelect', obj)
     }
   }
 }
@@ -82,11 +96,16 @@ export default {
     }
   }
   .global-header{
-    background: #fff;
     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);
     position: relative;
+    &.light{
+      background: #fff;
+    }
+    &.dark{
+      background-color: #001529;
+    }
     .logo {
       height: 64px;
       line-height: 58px;
@@ -100,5 +119,8 @@ export default {
         vertical-align: middle;
       }
     }
+    .global-header-menu{
+      display: inline-block;
+    }
   }
 </style>

src/components/layout/GlobalLayout.vue

@@ -3,7 +3,7 @@
     <drawer v-if="isMobile" :openDrawer="collapsed" @change="onDrawerChange">
       <sider-menu :theme="theme" :menuData="menuData" :collapsed="false" :collapsible="false" @menuSelect="onMenuSelect"/>
     </drawer>
-    <sider-menu :theme="theme" v-else :menuData="menuData" :collapsed="collapsed" :collapsible="true" />
+    <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'" />
@@ -11,7 +11,7 @@
       <setting />
     </drawer>
     <a-layout>
-      <global-header :collapsed="collapsed" @toggleCollapse="toggleCollapse"/>
+      <global-header :menuData="menuData" :theme="theme" :collapsed="collapsed" @toggleCollapse="toggleCollapse"/>
       <a-layout-content :style="{minHeight: minHeight, margin: '24px 24px 0'}">
         <slot></slot>
       </a-layout-content>
@@ -69,6 +69,9 @@ export default {
     },
     theme () {
       return this.$store.state.setting.theme
+    },
+    layout () {
+      return this.$store.state.setting.layout
     }
   },
   methods: {

src/components/menu/SiderMenu.vue

@@ -51,12 +51,6 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .dark{
-    background-color: #002140;
-  }
-  .light{
-    background-color: #fff;
-  }
   .shadow{
     box-shadow: 2px 0 6px rgba(0,21,41,.35);
   }

src/components/menu/menu.js

@@ -166,7 +166,6 @@ export default {
         props: {
           theme: this.$props.theme,
           mode: this.$props.mode,
-          inlineCollapsed: false,
           openKeys: this.openKeys,
           selectedKeys: this.selectedKeys
         },

src/components/setting/Setting.vue

@@ -1,9 +1,9 @@
 <template>
   <a-layout-sider class="sider" width="273">
     <setting-item title="整体风格设置">
-      <img-check-box-group @change="onStyleChange">
+      <img-check-box-group @change="setTheme">
-        <img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" :checked="true" :value="{value: 1, name: 'dark'}"/>
+        <img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" :checked="true" value="dark"/>
-        <img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" :value="{value: 2, name: 'light'}"/>
+        <img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" value="light"/>
       </img-check-box-group>
     </setting-item>
     <setting-item title="主题色">
@@ -20,9 +20,9 @@
     </setting-item>
     <a-divider/>
     <setting-item title="导航设置">
-      <img-check-box-group @change="onNaviChange">
+      <img-check-box-group @change="setLayout">
-        <img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg" :checked="true" :value="{value: 1, name: 'Side Navigation'}"/>
+        <img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg" :checked="true" value="side"/>
-        <img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" :value="{value: 2, name: 'Top Navigation'}"/>
+        <img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" value="head"/>
       </img-check-box-group>
     </setting-item>
     <setting-item>
@@ -105,13 +105,11 @@ export default {
         this.$message.info(`您选择了主题色 ${colors}`)
       }
     },
-    onStyleChange (values) {
+    setTheme (values) {
-      this.$store.commit('setting/setTheme', values[0].name)
+      this.$store.commit('setting/setTheme', values[0])
     },
-    onNaviChange (values) {
+    setLayout (values) {
-      if (values.length > 0) {
+      this.$store.commit('setting/setLayout', values[0])
-        this.$message.info(`您选择了 ${values[0].name} `)
-      }
     },
     copyCode () {
       let clipboard = new Clipboard('#copyBtn')

src/store/modules/setting.js

@@ -2,7 +2,8 @@ export default {
   namespaced: true,
   state: {
     isMobile: false,
-    theme: 'dark'
+    theme: 'dark',
+    layout: 'side'
   },
   mutations: {
     setDevice (state, isMobile) {
@@ -10,6 +11,9 @@ export default {
     },
     setTheme (state, theme) {
       state.theme = theme
+    },
+    setLayout (state, layout) {
+      state.layout = layout
     }
   }
 }