修改

src/components/menu/SideMenu.vue

@@ -1,20 +1,14 @@
 <template>
-  <a-layout-sider
-    :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
-    width="120px"
-    :collapsible="collapsible"
-    v-model="collapsed"
-    :trigger="null">
+  <a-layout-sider :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null]"
+    width="160px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
     <logo />
-    <s-menu
-      :collapsed="collapsed"
-      :menu="menus"
-      :theme="theme"
-      @select="onSelect"
-      @updateMenuTitle="onUpdateMenuTitle"
-      :mode="mode"
-      :style="smenuStyle">
+    <s-menu :collapsed="collapsed" :menu="menus" :theme="theme" @select="onSelect" @updateMenuTitle="onUpdateMenuTitle"
+      :mode="mode" :style="smenuStyle">
     </s-menu>
+    <a-button type="link" style="padding-left: 50px;padding-right: 50px;"
+      @click="handleLogout">
+      退出登录
+    </a-button>
   </a-layout-sider>
 
 </template>
@@ -23,6 +17,7 @@
 import ALayoutSider from 'ant-design-vue/es/layout/Sider'
 import Logo from '../tools/Logo'
 import SMenu from './index'
+import { mapActions, mapGetters, mapState } from 'vuex'
 import { mixin, mixinDevice } from '@/utils/mixin.js'
 
 export default {
@@ -72,12 +67,31 @@
     },
     onUpdateMenuTitle(obj) {
       this.$emit('updateMenuTitle', obj)
-      }
+    },
+    ...mapActions(["Logout"]),
+    handleLogout() {
+      const that = this
+      this.$confirm({
+        title: '提示',
+        content: '您确定要退出登录吗',
+        onOk() {
+          return that.Logout({}).then(() => {
+            window.location.reload()
+          }).catch(err => {
+            that.$message.error({
+              title: '错误',
+              description: err.message
+            })
+          })
+        },
+        onCancel() {
+        },
+      });
+    },
   }
 }
 </script>
 <style lang="less" scoped>
-
 /* update_begin author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
 .sider {
   @scrollBarSize: 10px;
@@ -154,24 +168,31 @@
   &>.ant-menu-item:first-child {
     background-color: transparent;
 
-      & > a, & > a:hover {
+    &>a,
+    &>a:hover {
       color: rgba(0, 0, 0, 0.65);
     }
 
     &.ant-menu-item-selected {
-        & > a, & > a:hover {
+
+      &>a,
+      &>a:hover {
         color: @primary-color;
       }
     }
   }
 
   &.ant-menu-dark>.ant-menu-item:first-child {
-      & > a, & > a:hover {
+
+    &>a,
+    &>a:hover {
       color: rgba(255, 255, 255, 0.65);
     }
 
     &.ant-menu-item-selected {
-        & > a, & > a:hover {
+
+      &>a,
+      &>a:hover {
         color: rgba(255, 255, 255, 1);
       }
     }

src/components/page/GlobalLayout.vue

@@ -1,27 +1,7 @@
 <template>
   <a-layout class="layout" :class="[device]">
 
-    <template v-if="layoutMode === 'sidemenu'">
-      <a-drawer
-        v-if="device === 'mobile'"
-        :wrapClassName="'drawer-sider ' + navTheme"
-        placement="left"
-        @close="() => this.collapsed = false"
-        :closable="false"
-        :visible="collapsed"
-        width="200px"
-      >
-        <side-menu
-          mode="inline"
-          v-if="device === 'mobile'"
-          :menus="menus"
-          @menuSelect="menuSelect"
-          @updateMenuTitle="handleUpdateMenuTitle"
-          :theme="navTheme"
-          :collapsed="false"
-          :collapsible="true"></side-menu>
-      </a-drawer>
-
+    <template>
       <side-menu
         v-show="device === 'desktop'"
         mode="inline"
@@ -32,27 +12,6 @@
         :collapsed="collapsed"
         :collapsible="true"></side-menu>
     </template>
-    <!-- 下次优化这些代码 -->
-    <template v-else>
-      <a-drawer
-        v-if="device === 'mobile'"
-        :wrapClassName="'drawer-sider ' + navTheme"
-        placement="left"
-        @close="() => this.collapsed = false"
-        :closable="false"
-        :visible="collapsed"
-        width="200px"
-      >
-        <side-menu
-          mode="inline"
-          :menus="menus"
-          @menuSelect="menuSelect"
-          @updateMenuTitle="handleUpdateMenuTitle"
-          :theme="navTheme"
-          :collapsed="false"
-          :collapsible="true"></side-menu>
-      </a-drawer>
-    </template>
 
     <a-layout
       :class="[layoutMode, `content-width-${contentWidth}`]"