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

code/web/task_schedule/src/assets/css/public/color.scss

@@ -1,4 +1,14 @@
+/*
+ * @Author: Kane
+ * @Date: 2023-02-28 19:25:30
+ * @LastEditors: Kane
+ * @FilePath: /task_schedule/src/assets/css/public/global.scss
+ * @Description: 
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+ */
 
+// color
 $color-bg-01: #fecb96;
 $color-bg-02: #f7954e;
 $color-bg-03: #f27620;

code/web/task_schedule/src/assets/css/public/mixin.scss

@@ -0,0 +1,21 @@
+/*
+ * @Author: Kane
+ * @Date: 2023-02-28 19:25:30
+ * @LastEditors: Kane
+ * @FilePath: /task_schedule/src/assets/css/public/global.scss
+ * @Description: 
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+ */
+@mixin no-select {
+    -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;
+}

code/web/task_schedule/src/assets/css/public/normalize.scss

@@ -18,8 +18,10 @@
  */
 
 html {
-    line-height: 1.15; /* 1 */
+  line-height: 1.15;
-    -webkit-text-size-adjust: 100%; /* 2 */
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
   text-size-adjust: 100%;
 }
 
@@ -61,9 +63,12 @@
    */
 
 hr {
-    box-sizing: content-box; /* 1 */
+  box-sizing: content-box;
-    height: 0; /* 1 */
+  /* 1 */
-    overflow: visible; /* 2 */
+  height: 0;
+  /* 1 */
+  overflow: visible;
+  /* 2 */
 }
 
 /**
@@ -72,8 +77,10 @@
    */
 
 pre {
-    font-family: monospace, monospace; /* 1 */
+  font-family: monospace, monospace;
-    font-size: 1em; /* 2 */
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
 }
 
 /* Text-level semantics
@@ -93,9 +100,12 @@
    */
 
 abbr[title] {
-    border-bottom: none; /* 1 */
+  border-bottom: none;
-    text-decoration: underline; /* 2 */
+  /* 1 */
-    text-decoration: underline dotted; /* 2 */
+  text-decoration: underline;
+  /* 2 */
+  text-decoration: underline dotted;
+  /* 2 */
 }
 
 /**
@@ -115,8 +125,10 @@
 code,
 kbd,
 samp {
-    font-family: monospace, monospace; /* 1 */
+  font-family: monospace, monospace;
-    font-size: 1em; /* 2 */
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
 }
 
 /**
@@ -172,10 +184,14 @@
 optgroup,
 select,
 textarea {
-    font-family: inherit; /* 1 */
+  font-family: inherit;
-    font-size: 100%; /* 1 */
+  /* 1 */
-    line-height: 1.15; /* 1 */
+  font-size: 100%;
-    margin: 0; /* 2 */
+  /* 1 */
+  line-height: 1.15;
+  /* 1 */
+  margin: 0;
+  /* 2 */
 }
 
 /**
@@ -184,7 +200,8 @@
    */
 
 button,
-  input { /* 1 */
+input {
+  /* 1 */
   overflow: visible;
 }
 
@@ -194,7 +211,8 @@
    */
 
 button,
-  select { /* 1 */
+select {
+  /* 1 */
   text-transform: none;
 }
 
@@ -248,12 +266,18 @@
    */
 
 legend {
-    box-sizing: border-box; /* 1 */
+  box-sizing: border-box;
-    color: inherit; /* 2 */
+  /* 1 */
-    display: table; /* 1 */
+  color: inherit;
-    max-width: 100%; /* 1 */
+  /* 2 */
-    padding: 0; /* 3 */
+  display: table;
-    white-space: normal; /* 1 */
+  /* 1 */
+  max-width: 100%;
+  /* 1 */
+  padding: 0;
+  /* 3 */
+  white-space: normal;
+  /* 1 */
 }
 
 /**
@@ -279,8 +303,10 @@
 
 [type="checkbox"],
 [type="radio"] {
-    box-sizing: border-box; /* 1 */
+  box-sizing: border-box;
-    padding: 0; /* 2 */
+  /* 1 */
+  padding: 0;
+  /* 2 */
 }
 
 /**
@@ -298,8 +324,10 @@
    */
 
 [type="search"] {
-    -webkit-appearance: textfield; /* 1 */
+  -webkit-appearance: textfield;
-    outline-offset: -2px; /* 2 */
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
 }
 
 /**
@@ -316,8 +344,10 @@
    */
 
 ::-webkit-file-upload-button {
-    -webkit-appearance: button; /* 1 */
+  -webkit-appearance: button;
-    font: inherit; /* 2 */
+  /* 1 */
+  font: inherit;
+  /* 2 */
 }
 
 /* Interactive

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>
+<style lang="scss" scoped>
-.view-wrapper {
+.sidebar-wrapper {
+    @include no-select;
+
     height: 100%;
     width: 100%;
 }
@@ -108,18 +110,6 @@ 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;
     }
@@ -128,6 +118,14 @@ export default {
         font-weight: normal;
     }
 
+    .el-menu-item.is-active {
+        // background-color: #ffffff1f !important;
+        font-weight: 1000;
+        font-size: 15px;
+        color: #ffd04b;
+    }
+}
+
 .sidebar-submenu {
     background-color: #2f4156 !important;
 }
@@ -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;
@@ -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>

code/web/task_schedule/src/views/Login.vue

@@ -67,7 +67,7 @@
 <script lang="ts">
 import { reactive, onBeforeMount } from "vue";
 import { useRouter } from "vue-router";
-import { loadStaffInfo, saveStaffInfo, getUserType, saveUserType, getCallerInfo, saveCallerInfo } from "@/utils/api/localStorage";
+import { saveStaffInfo, getUserType, saveUserType, getCallerInfo, saveCallerInfo } from "@/utils/api/localStorage";
 import { login } from "@/utils/account";
 import { ElMessage } from "element-plus";
 import { StaffInfo } from "@/data/cpicxim/StaffInfo";
@@ -161,7 +161,7 @@ export default {
             }
             else if ( ui.currentMenu === "tele_saler" )
             {
-                // 坐席
+                // 是坐席，将坐席工号保存到本地，然后跳转
                 saveCallerInfo( ui.account );
 
                 // 跳转路由
@@ -171,14 +171,17 @@ export default {
 
         onBeforeMount(() =>
         {
+            // 判断已登录的信息是坐席还是内勤
+            // 坐席就直接跳转桌面霸屏
+            // 员工就暂且什么都不做
             const staffType = getUserType();
 
-            // 判断已登录的信息是坐席还是内勤
             if ( staffType === "tele_saler" )
             {
+                // 是坐席，尝试获取存储的坐席工号
                 const callInfo = getCallerInfo();
 
-                // 判断是否已经记录了P13账号，有则提示已登录，然后跳转路由
+                // 判断是否已经记录了坐席工号，有则提示已登录，然后跳转路由
                 if ( callInfo !== "" )
                 {
                     ElMessage({
@@ -191,6 +194,10 @@ export default {
                     router.push( "/desktop_archievement" );
                 }
             }
+            else if ( staffType === "cpicxim_staff" )
+            {
+                // 是员工，暂且不管；
+            }
         });
 
         const onToggleMenu = ( type: string ) =>

code/web/task_schedule/vite.config.js

@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2023-02-15 09:25:52
  * @LastEditors: Kane
- * @LastEditTime: 2023-03-03 15:52:58
+ * @LastEditTime: 2023-03-24 15:47:31
  * @FilePath: /task_schedule/vite.config.js
  * @Description: 
  * 
@@ -39,7 +39,7 @@ export default defineConfig((command, mode) =>
         css: {
             preprocessorOptions: {
                 scss: {
-                    additionalData: "@import \"./src/assets/css/public/color.scss\";",
+                    additionalData: "@import \"./src/assets/css/public/color.scss\",\"./src/assets/css/public/mixin.scss\";",
                 },
             },
         },