src/renderer/src/layout/components/Header.vue

@@ -4,43 +4,23 @@
       <h3 class="title" @click="changeTab">AIX智慧课堂</h3>
       <div class="change-tab">
         <ul class="flex">
-          <li class="flex" @click="changePage('/resource')">
+          <li v-for="item in menus" :key="item.path" class="flex"
-            <i class="iconfont icon-resource">&#xe601;</i>
+            :class="currentRoute == item.path ? 'active-li' : ''" @click="changePage(item.path)">
-            <span class="text">资源</span>
+            <i class="iconfont" :class="item.icon"></i>
-          </li>
+            <span class="text">{{ item.name }}</span>
-          <li class="flex" @click="changePage('/prepare')">
-            <i class="iconfont icon-prepare">&#xe6c2;</i>
-            <span class="text">备课</span>
-          </li>
-          <li class="flex" @click="changePage('/teach')">
-            <i class="iconfont icon-teach">&#xe672;</i>
-            <span class="text">授课</span>
           </li>
         </ul>
-        <!-- <el-radio-group v-model="radio1">
-        <el-radio-button label="资源" value="resource" />
-        <el-radio-button label="备课" value="prepare" />
-        <el-radio-button label="授课" value="teach" />
-      </el-radio-group> -->
       </div>
     </div>
 
     <div class="right-section flex">
       <div class="header-tool flex">
         <span title="最小化" @click="minimizeWindow"><i class="iconfont">&#xe650;</i></span>
-        <span :title="isMaxSize ? '向下还原' : '最大化'" @click="maximizeWindow"
+        <span :title="isMaxSize ? '向下还原' : '最大化'" @click="maximizeWindow"><i class="iconfont">{{ isMaxSize ? '&#xe600' :
-          ><i class="iconfont">{{ isMaxSize ? '&#xe600' : '&#xe695' }}</i></span
+          '&#xe695' }}</i></span>
-        >
         <span title="关闭" @click="closeWindow"><i class="iconfont">&#xe608;</i></span>
       </div>
       <div class="user flex">
-<!--        <el-icon color="#409EFF">
-          <UserFilled />
-        </el-icon>
-        <div class="user-info flex">
-          <span>{{ userInfo.nickName }}</span>
-          <span>{{ userInfo.postnames }}</span>
-        </div>-->
         <div class="avatar-container">
           <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
             <div class="avatar-wrapper">
@@ -63,18 +43,45 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessageBox } from 'element-plus'
 import useUserStore from '@/store/modules/user'
+
 const userStore = useUserStore()
 const userInfo = userStore.user
-console.log(userInfo)
 const { ipcRenderer } = window.electron || {}
-const radio1 = ref('resource')
-
 const isMaxSize = ref(false)
 const router = useRouter()
+const currentRoute = ref('')
+
+
+const menus = ref([
+  {
+    icon: 'icon-jiaoxueziyuan icon-resource',
+    name: '资源',
+    path: '/resource'
+  },
+  {
+    icon: 'icon-beike icon-prepare',
+    name: '备课',
+    path: '/prepare'
+  },
+  {
+    icon: 'icon-jiangke1 icon-teach',
+    name: '授课',
+    path: '/teach'
+  }
+])
+
+// 监听当前路由
+watch(
+  () => router.currentRoute.value,
+  (newValue) => {
+    currentRoute.value = newValue.path
+  },
+  { immediate: true }
+)
 
 // 最小化
 const minimizeWindow = () => {
@@ -138,6 +145,7 @@ function setLayout() {
   display: flex;
   align-items: center;
   width: 50%;
+
   .change-tab {
     -webkit-app-region: no-drag;
     margin-left: 20px;
@@ -149,30 +157,42 @@ function setLayout() {
         flex-direction: column;
         border-radius: 8px;
         margin: 0 5px;
+
         .text {
           font-size: 13px;
         }
+
         .iconfont {
           font-size: 22px;
         }
+
         .icon-resource {
           color: #f99b53;
         }
+
         .icon-prepare {
           color: #b088e8;
         }
+
         .icon-teach {
           color: #367dea;
         }
+
         &:hover {
           background: #d3e3fb;
         }
       }
+
+      .active-li {
+        background: #d3e3fb;
+      }
     }
   }
+
   ul {
     -webkit-app-region: no-drag;
   }
+
   .title {
     color: #4b73df;
     font-size: 18px;
@@ -186,20 +206,25 @@ function setLayout() {
   justify-content: space-between;
   padding-bottom: 5px;
   flex-direction: column;
+
   .header-tool {
     padding-top: 5px;
     -webkit-app-region: no-drag;
+
     span {
       border-radius: 3px;
       cursor: pointer;
+
       &:hover {
         background-color: #c4c4c4;
       }
+
       .iconfont {
         margin: 0 10px;
       }
     }
   }
+
   .user {
     .user-info {
       padding-right: 5px;
@@ -209,6 +234,7 @@ function setLayout() {
     }
   }
 }
+
 .avatar-container {
   -webkit-app-region: no-drag;
 
@@ -221,6 +247,7 @@ function setLayout() {
       border-radius: 10px;
       margin-top: 8px;
     }
+
     .user-avatar:hover {
       cursor: pointer;
     }