保存进度！

企业级管理系统/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 {

企业级管理系统/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()

企业级管理系统/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 {

企业级管理系统/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 = {};