From 1963108a29002c874610d982be7cf52abd596e7b Mon Sep 17 00:00:00 2001
From: hh <2397241381@qq.com>
Date: Fri, 12 Apr 2024 15:34:25 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/SideMenu.vue     | 311 ++++++++++++++-------------
 src/components/page/GlobalLayout.vue |  43 +---
 2 files changed, 167 insertions(+), 187 deletions(-)

diff --git a/src/components/menu/SideMenu.vue b/src/components/menu/SideMenu.vue
index 7e80677..0b7e68b 100644
--- a/src/components/menu/SideMenu.vue
+++ b/src/components/menu/SideMenu.vue
@@ -1,181 +1,202 @@
 <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>
 
 <script>
-  import ALayoutSider from 'ant-design-vue/es/layout/Sider'
-  import Logo from '../tools/Logo'
-  import SMenu from './index'
-  import { mixin, mixinDevice } from '@/utils/mixin.js'
+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 {
-    name: "SideMenu",
-    components: { ALayoutSider, Logo, SMenu },
-    mixins: [mixin, mixinDevice],
-    props: {
-      mode: {
-        type: String,
-        required: false,
-        default: 'inline'
-      },
-      theme: {
-        type: String,
-        required: false,
-        default: 'dark'
-      },
-      collapsible: {
-        type: Boolean,
-        required: false,
-        default: false
-      },
-      collapsed: {
-        type: Boolean,
-        required: false,
-        default: false
-      },
-      menus: {
-        type: Array,
-        required: true
-      }
+export default {
+  name: "SideMenu",
+  components: { ALayoutSider, Logo, SMenu },
+  mixins: [mixin, mixinDevice],
+  props: {
+    mode: {
+      type: String,
+      required: false,
+      default: 'inline'
     },
-    computed:{
-      smenuStyle() {
-        let style = { 'padding': '0' }
-        if (this.fixSiderbar) {
-          style['height'] = 'calc(100% - 59px)'
-          style['overflow'] = 'auto'
-          style['overflow-x'] = 'hidden'
-        }
-        return style
-      }
+    theme: {
+      type: String,
+      required: false,
+      default: 'dark'
     },
-    methods: {
-      onSelect (obj) {
-        this.$emit('menuSelect', obj)
-      },
-      onUpdateMenuTitle (obj) {
-        this.$emit('updateMenuTitle', obj)
-      }
+    collapsible: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    collapsed: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    menus: {
+      type: Array,
+      required: true
     }
+  },
+  computed: {
+    smenuStyle() {
+      let style = { 'padding': '0' }
+      if (this.fixSiderbar) {
+        style['height'] = 'calc(100% - 59px)'
+        style['overflow'] = 'auto'
+        style['overflow-x'] = 'hidden'
+      }
+      return style
+    }
+  },
+  methods: {
+    onSelect(obj) {
+      this.$emit('menuSelect', obj)
+    },
+    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;
 
-  /* update_begin author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
-  .sider {
-    @scrollBarSize: 10px;
+  ul.ant-menu {
 
-    ul.ant-menu {
-
-      /* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
-      &::-webkit-scrollbar {
-        width: @scrollBarSize;
-        height: @scrollBarSize;
-        background-color: transparent;
-        display: none;
-      }
-
-      & .-o-scrollbar {
-        display: none;
-      }
-
-      /* 兼容IE */
-      -ms-overflow-style: none;
-      -ms-scroll-chaining: chained;
-      -ms-content-zooming: zoom;
-      -ms-scroll-rails: none;
-      -ms-content-zoom-limit-min: 100%;
-      -ms-content-zoom-limit-max: 500%;
-      -ms-scroll-snap-type: proximity;
-      -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
-
-      /* 定义滚动条轨道 */
-      &::-webkit-scrollbar-track {
-        background-color: transparent;
-      }
-
-      /* 定义滑块 */
-      &::-webkit-scrollbar-thumb {
-        border-radius: @scrollBarSize;
-        background-color: #eee;
-        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
-
-        &:hover {
-          background-color: #dddddd;
-        }
-
-        &:active {
-          background-color: #bbbbbb;
-        }
-      }
+    /* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
+    &::-webkit-scrollbar {
+      width: @scrollBarSize;
+      height: @scrollBarSize;
+      background-color: transparent;
+      display: none;
     }
 
-    /** 暗色系滚动条样式 */
-    &.dark ul.ant-menu {
-      &::-webkit-scrollbar-thumb {
-        background-color: #666666;
-
-        &:hover {
-          background-color: #808080;
-        }
-
-        &:active {
-          background-color: #999999;
-        }
-      }
+    & .-o-scrollbar {
+      display: none;
     }
 
+    /* 兼容IE */
+    -ms-overflow-style: none;
+    -ms-scroll-chaining: chained;
+    -ms-content-zooming: zoom;
+    -ms-scroll-rails: none;
+    -ms-content-zoom-limit-min: 100%;
+    -ms-content-zoom-limit-max: 500%;
+    -ms-scroll-snap-type: proximity;
+    -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
+
+    /* 定义滚动条轨道 */
+    &::-webkit-scrollbar-track {
+      background-color: transparent;
+    }
+
+    /* 定义滑块 */
+    &::-webkit-scrollbar-thumb {
+      border-radius: @scrollBarSize;
+      background-color: #eee;
+      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+
+      &:hover {
+        background-color: #dddddd;
+      }
+
+      &:active {
+        background-color: #bbbbbb;
+      }
+    }
   }
 
-  /* update_end author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
+  /** 暗色系滚动条样式 */
+  &.dark ul.ant-menu {
+    &::-webkit-scrollbar-thumb {
+      background-color: #666666;
+
+      &:hover {
+        background-color: #808080;
+      }
+
+      &:active {
+        background-color: #999999;
+      }
+    }
+  }
+
+}
+
+/* update_end author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
 </style>
 
 <!-- update_begin author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 -->
 <style lang="less">
-   // 选中首页的时候不显示背景颜色，只应用于左侧菜单
-  .sider .ant-menu.ant-menu-root {
-    & > .ant-menu-item:first-child {
-      background-color: transparent;
+// 选中首页的时候不显示背景颜色，只应用于左侧菜单
+.sider .ant-menu.ant-menu-root {
+  &>.ant-menu-item:first-child {
+    background-color: transparent;
 
-      & > a, & > a:hover {
-        color: rgba(0, 0, 0, 0.65);
-      }
-
-      &.ant-menu-item-selected {
-        & > a, & > a:hover {
-          color: @primary-color;
-        }
-      }
+    &>a,
+    &>a:hover {
+      color: rgba(0, 0, 0, 0.65);
     }
 
-    &.ant-menu-dark > .ant-menu-item:first-child {
-      & > a, & > a:hover {
-        color: rgba(255, 255, 255, 0.65);
-      }
+    &.ant-menu-item-selected {
 
-      &.ant-menu-item-selected {
-        & > a, & > a:hover {
-          color: rgba(255, 255, 255, 1);
-        }
+      &>a,
+      &>a:hover {
+        color: @primary-color;
       }
     }
   }
+
+  &.ant-menu-dark>.ant-menu-item:first-child {
+
+    &>a,
+    &>a:hover {
+      color: rgba(255, 255, 255, 0.65);
+    }
+
+    &.ant-menu-item-selected {
+
+      &>a,
+      &>a:hover {
+        color: rgba(255, 255, 255, 1);
+      }
+    }
+  }
+}
 </style>
 <!-- update_end author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 -->
diff --git a/src/components/page/GlobalLayout.vue b/src/components/page/GlobalLayout.vue
index 7b0aa51..49b6faf 100644
--- a/src/components/page/GlobalLayout.vue
+++ b/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}`]"