1、实验室菜单栏动态显示

2、加入菜单栏权限缓存配置
3、查询用户数据刷新菜单权限

src/components/LeftPanel.vue

@@ -34,9 +34,10 @@
 </template>
 
 <script setup>
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted, watch, computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { teacherList } from '@/api/teachers.js'
+import { CONFIG } from '@/utils/roleUtils.js'
 
 // 导入图片
 // 白色图标
@@ -72,8 +73,8 @@ const drawerVisible = ref(true)
 // 当前选中索引状态
 const currentActiveIndex = ref('2')
 
-// 渲染侧边栏
-const groupList = ref([
+// 原始菜单数据
+const originalGroupList = ref([
   {
     icon: question, // 默认图片
     hoverIcon: question02, // 交互图片
@@ -146,6 +147,24 @@ const groupList = ref([
   }
 ])
 
+// 获取角色路由菜单集合
+const roleRouteMenuSet = computed(() => {
+  try {
+    const roleRouteMenuStr = localStorage.getItem(CONFIG.USER_ROLE_ROUTE_MENU_KEY)
+    return roleRouteMenuStr ? JSON.parse(roleRouteMenuStr) : []
+  } catch (error) {
+    console.error('Error parsing roleRouteMenuSet:', error)
+    return []
+  }
+})
+
+// 根据角色路由菜单权限过滤后的菜单数据
+const groupList = computed(() => {
+  return originalGroupList.value.filter(item => {
+    return item && item.path && roleRouteMenuSet.value.includes(item.path)
+  })
+})
+
 // 更新选中状态的方法
 const updateActiveIndex = () => {
   const path = route.path
@@ -154,10 +173,10 @@ const updateActiveIndex = () => {
   let menuItem = null
   // 从其他问答页面进入智能问答页面
   if (path.includes('ai-questions') && from){
-    menuItem = groupList.value.find(item => from === item.path.replace('/', ''))
+    menuItem = groupList.value.find(item => item && item.path && from === item.path.replace('/', ''))
   }else{
     // 查找路径对应的索引
-    menuItem = groupList.value.find(item => path.includes(item.path.replace('/', '')))
+    menuItem = groupList.value.find(item => item && item.path && path.includes(item.path.replace('/', '')))
   }
 
   //保持选中当前页面

src/components/user/UserInfoPopover.vue

@@ -82,6 +82,7 @@ const userInfo = ref({
   nickname: import.meta.env.VITE_APP_DEFAULT_LOGIN_USERNAME,
   isRegister: true,
   roleRouteSet: [],
+  roleRouteCourseMenuList: [],
   courseExpireTime: null,
   blocklyExpireTime: null,
   aiCourseExpireTime: null,
@@ -125,6 +126,7 @@ const fetchUserInfo = async () => {
 
       //缓存用户角色路由
       setCacheWithExpiry(CONFIG.USER_ROLE_ROUTE_KEY, user.roleRouteSet);
+      setCacheWithExpiry(CONFIG.USER_ROLE_ROUTE_MENU_KEY, user.roleRouteCourseMenuList);
     }
   } catch (error) {
     console.error('获取用户信息失败:', error);

src/utils/loginUtils.js

@@ -28,6 +28,8 @@ const CACHE_KEYS_TO_DELETE = [
   'isLoggedIn',
   CONFIG.USER_ROLE_ROUTE_KEY,
   CONFIG.USER_ROLE_ROUTE_KEY + CONFIG.EXPIRY_SUFFIX,
+  CONFIG.USER_ROLE_ROUTE_MENU_KEY,
+  CONFIG.USER_ROLE_ROUTE_MENU_KEY + CONFIG.EXPIRY_SUFFIX,
 ];
 
 // 密码加密函数（使用AES加密）

src/utils/roleUtils.js

@@ -5,6 +5,7 @@ import {getRoleRoute} from "@/api/system/role.js";
  */
 const CONFIG = {
     USER_ROLE_ROUTE_KEY: 'user_role_route',
+    USER_ROLE_ROUTE_MENU_KEY: 'user_role_route_menu',
     EXPIRY_SUFFIX: '_expiry',
     EXPIRY_TIME: 24 * 60 * 60 * 1000 // 24小时
 }
@@ -26,9 +27,11 @@ export const refreshRoleRoute = async () => {
         if (res.code === 0) {
 
             // 存储到localStorage并设置过期时间
-            setCacheWithExpiry(CONFIG.USER_ROLE_ROUTE_KEY, res.data);
+            setCacheWithExpiry(CONFIG.USER_ROLE_ROUTE_KEY, res.data.routeList);
+            debugger
+            setCacheWithExpiry(CONFIG.USER_ROLE_ROUTE_MENU_KEY, res.data.courseRouteMenuList);
 
-            return res.data;
+            return res.data.routeList;
         } else {
             console.error(`获取角色路由数据失败:`, res.msg);
             return [];