修改侧边栏样式，让选中项高亮显示

code/web/task_schedule/src/layout/components/Aside.vue

@@ -8,7 +8,7 @@
  * Copyright (c) ${2022} by Kane, All Rights Reserved.
 -->
 <template>
-    <el-scrollbar class="view-wrapper">
+    <el-scrollbar class="sidebar-wrapper">
         <el-menu
             class="side-bar"
             router
@@ -36,7 +36,7 @@
                         </el-menu-item>
                     </template>
                     <template v-else>
-                        <!-- 不止一个子路由，可能是咩有子路由，或者有多个子路由 -->
+                        <!-- 不止一个子路由，可能是咩有子s路由，或者有多个子路由 -->
                         <!-- 如果没有子路由，就不渲染 -->
                         <el-sub-menu
                             v-if="route.children && route.children.length"
@@ -97,8 +97,10 @@ export default {
 };
 </script>
 
-<style scoped>
-.view-wrapper {
+<style lang="scss" scoped>
+.sidebar-wrapper {
+    @include no-select;
+
     height: 100%;
     width: 100%;
 }
@@ -108,24 +110,20 @@ export default {
     /* border-left: 5px solid #1d74b2; */
     overflow: auto;
 
-    -webkit-touch-callout: none;
-    -moz-user-select: none;
-    /*火狐*/
-    -webkit-user-select: none;
-    /*webkit浏览器*/
-    -ms-user-select: none;
-    /*IE10*/
-    -khtml-user-select: none;
-    /*早期浏览器*/
-    user-select: none;
-}
+    .el-menu-item {
+        font-weight: normal;
+    }
 
-.el-menu-item {
-    font-weight: normal;
-}
+    .el-sub-menu {
+        font-weight: normal;
+    }
 
-.el-sub-menu {
-    font-weight: normal;
+    .el-menu-item.is-active {
+        // background-color: #ffffff1f !important;
+        font-weight: 1000;
+        font-size: 15px;
+        color: #ffd04b;
+    }
 }
 
 .sidebar-submenu {
@@ -136,14 +134,6 @@ export default {
     background-color: #223142 !important;
 }
 
-/* 顺序必须在上面两个之后*/
-.is-active {
-    /* background-color: #ffffff4f !important; */
-    /* font-weight: 1000; */
-    /* font-size: 15px; */
-    color: #ffd04b;
-}
-
 /* .is-opened {
     border-left: 5px solid #1d74b2;
 } */
@@ -153,5 +143,4 @@ export default {
     height: 1em;
     margin-right: 8px;
 }
-
 </style>

code/web/task_schedule/src/layout/components/Header.vue

@@ -14,34 +14,43 @@
             <span>测试版</span>
             <span>Build-202303251257</span>
         </div>
-        <div class="button-wrapper">
+        <div class="buttons-wrapper">
             <component
-                :is="'user'"
+                :is="'SwitchButton'"
                 class="icons"
+                @click="Logout"
             />
         </div>
     </div>
 </template>
 
 <script lang="ts">
+import { logout } from "@/utils/account.js";
+
 export default {
     name: "LayoutHeader",
     setup()
     {
-        return {};
+        const Logout = () =>
+        {
+            logout();
+        };
+
+        return { Logout, };
     },
 };
 </script>
 
 <style lang="scss" scoped>
 .header-wrapper {
-    width: 100%;
+    @include no-select;
+
     height: 50px;
     max-height: 50px;
 
     padding: 0px 15px;
 
-    position: relative;
+    // position: relative;
 
     display: flex;
     justify-content: start;
@@ -51,10 +60,10 @@ export default {
     background-color: $banner-background-color;
 
     span {
-        text-align:left;
+        text-align: left;
     }
 
-    > *+* {
+    >*+* {
         margin-left: 10px;
     }
 
@@ -73,10 +82,17 @@ export default {
         font-size: 2rem;
     }
 
-    .buttons_div {
+    .buttons-wrapper {
         margin-left: auto;
         padding-top: 5px;
-        /* border: 1px solid salmon; */
+        // border: 1px solid salmon;
+    }
+
+    .icons {
+        width: 25px;
+        height: 25px;
+        // margin-right: 8px;
+        cursor: pointer;
     }
 }
 </style>