From 327ffcc23592ddaa0e32f30c30cda393977901b6 Mon Sep 17 00:00:00 2001
From: Kane Wang <wangkane@qq.com>
Date: Mon, 9 Jan 2023 18:33:31 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=9D=E5=AD=98=E8=BF=9B=E5=BA=A6=EF=BC=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web/admin_system/src/layout/Index.vue     | 16 ++++++++++++----
 .../src/layout/components/Aside.vue           |  9 +++++++--
 .../src/layout/components/Header.vue          | 19 +++++++++++++++++--
 .../web/admin_system/src/store/modules/app.js |  9 +++++++--
 4 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/企业级管理系统/web/admin_system/src/layout/Index.vue b/企业级管理系统/web/admin_system/src/layout/Index.vue
index d8d0db4..c463080 100644
--- a/企业级管理系统/web/admin_system/src/layout/Index.vue
+++ b/企业级管理系统/web/admin_system/src/layout/Index.vue
@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2023-01-04 11:05:44
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-08 21:18:30
+ * @LastEditTime: 2023-01-09 15:50:52
  * @FilePath: \admin_system\src\layout\Index.vue
  * @Description: 
  * 
@@ -14,7 +14,7 @@
             <LayoutHeader />
         </el-header>
         <el-container id="layout-container-down">
-            <el-aside id="layout-aside">
+            <el-aside :width="asideWidth" id="layout-aside">
                 <LayoutAside />
             </el-aside>
             <el-main id="layout-main">
@@ -33,6 +33,14 @@ export default {
     name: "layoutPage",
     components: {
         LayoutAside, LayoutHeader, LayoutMain,
+    },
+    computed: {
+        asideWidth()
+        {
+            const collapse = this.$store.state.app.asideBarCollapse;
+
+            return collapse === true ? "65px" : "175px";
+        }
     }
 };
 </script>
@@ -45,9 +53,9 @@ export default {
 }
 
 #layout-aside {
-    width: 175px;
+    /* width: 175px; */
     background-color: #223142;
-    overflow: auto;
+    overflow-x: hidden;
 }
 
 #layout-header {
diff --git a/企业级管理系统/web/admin_system/src/layout/components/Aside.vue b/企业级管理系统/web/admin_system/src/layout/components/Aside.vue
index 290ca50..32eccb4 100644
--- a/企业级管理系统/web/admin_system/src/layout/components/Aside.vue
+++ b/企业级管理系统/web/admin_system/src/layout/components/Aside.vue
@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2023-01-04 11:30:33
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-08 23:11:00
+ * @LastEditTime: 2023-01-09 15:24:55
  * @FilePath: \admin_system\src\layout\components\Aside.vue
  * @Description: 
  * 
@@ -10,7 +10,7 @@
 -->
 <template>
     <el-menu id="side-bar" router :default-active="currentPath" background-color="#223142" text-color="#fff"
-        active-text-color="#ffd04b">
+        active-text-color="#ffd04b" :collapse="asideCollapse">
         <template v-for="route in this.routers" :key="route.path">
             <template v-if="!route.hidden">
                 <template v-if="hasOnlyChild(route.children)">
@@ -83,6 +83,11 @@ export default {
         currentPath()
         {
             return useRoute().path;
+        },
+        //获取导航栏是否折叠的标志
+        asideCollapse()
+        {
+            return this.$store.state.app.asideBarCollapse;
         }
     },
     created()
diff --git a/企业级管理系统/web/admin_system/src/layout/components/Header.vue b/企业级管理系统/web/admin_system/src/layout/components/Header.vue
index 05fd61f..2e23d63 100644
--- a/企业级管理系统/web/admin_system/src/layout/components/Header.vue
+++ b/企业级管理系统/web/admin_system/src/layout/components/Header.vue
@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2023-01-04 11:39:04
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-08 23:11:47
+ * @LastEditTime: 2023-01-09 15:33:54
  * @FilePath: \admin_system\src\layout\components\Header.vue
  * @Description: 
  * 
@@ -17,12 +17,14 @@
         </div>
         <div class="buttons_div">
             <User style="width: 25px; height; 25px; margin-right: 8px" />
-            <SwitchButton style="width: 25px; height; 25px; margin-right: 8px" />
+            <SwitchButton style="width: 25px; height; 25px; margin-right: 8px; cursor:pointer;" @click="logout" />
         </div>
     </div>
 </template>
 
 <script>
+import { ElMessage } from "element-plus";
+
 export default {
     name: "AppBanner",
     data()
@@ -36,6 +38,18 @@ export default {
     {
         //console.log("banner请求数据！");
     },
+    methods: {
+        logout()
+        {
+            ElMessage({
+                message: "退出系统",
+                type: "error",
+                center: true,
+            });
+
+            this.$store.commit("app/SET_ASIDE_COLLAPSE");
+        },
+    },
 };
 </script>
 <style scoped>
@@ -47,6 +61,7 @@ export default {
     align-items: center;
     padding: 0px 15px 0px 15px;
     height: 100%;
+    position: relative;
 }
 
 .no_select {
diff --git a/企业级管理系统/web/admin_system/src/store/modules/app.js b/企业级管理系统/web/admin_system/src/store/modules/app.js
index 7a8b086..382d822 100644
--- a/企业级管理系统/web/admin_system/src/store/modules/app.js
+++ b/企业级管理系统/web/admin_system/src/store/modules/app.js
@@ -2,14 +2,15 @@
  * @Author: Kane
  * @Date: 2023-01-07 22:25:43
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-08 16:44:32
+ * @LastEditTime: 2023-01-09 15:21:21
  * @FilePath: \admin_system\src\store\modules\app.js
- * @Description: app模块
+ * @Description: vuex中存放全局数据的模块
  * 
  * Copyright (c) ${2022} by Kane, All Rights Reserved. 
  */
 const state = {
     count: 1001,
+    asideBarCollapse: false, //侧边栏折叠标志位
 };
 const getters = {};
 const mutations = {
@@ -17,6 +18,10 @@ const mutations = {
     {
         state.count = newCount;
     },
+    SET_ASIDE_COLLAPSE(state)
+    {
+        state.asideBarCollapse = !state.asideBarCollapse;
+    },
 };
 const actions = {};