样式修改

src/layout/header/components/avatar.vue

@@ -2,10 +2,10 @@
   <el-dropdown placement="bottom">
     <div class="flx-center">
       <div class="avatar">
-        <img :src="userInfo.avatar || ''" alt="avatar" />
+        <img :src="userInfo && userInfo.avatar || ''" alt="avatar" />
       </div>
       <span class="username" :style="{ color: themeConfig.footColor }">{{
-        userInfo.name || ''
+        userInfo && userInfo.name || ''
       }}</span>
     </div>
     <template #dropdown>
@@ -27,9 +27,11 @@ const handleClick = () => {
   // eslint-disable-next-line no-alert
   alert("button click");
 };
-const userInfo = ref({});
+const userInfo = ref(null);
-userInfo.value = JSON.parse(sessionStorage.getItem("userInfo")) || {}
 
+onMounted(() => {
+  userInfo.value = JSON.parse(sessionStorage.getItem("userInfo")) || {}
+})
 const gotoLogin = () => {
   sessionStorage.removeItem("token");
   router.push("/login");
@@ -38,12 +40,14 @@ const gotoLogin = () => {
 <style lang="scss" scoped>
 .el-dropdown {
   cursor: pointer;
+
   .el-tooltip__trigger {
     display: flex;
     flex-flow: row;
     align-items: center;
   }
 }
+
 .username {
   font-size: 15px;
 

src/router/generateMenu.js

@@ -17,7 +17,8 @@ export const generateMenu = (routes, userRole) => {
                 path: route.path,
                 name: route.name,
                 meta: route.meta,
-                url: route.url || route.path
+                url: route.url || route.path,
+                icon: route.meta.icon
             };
 
             // 如果有子路由，递归处理
@@ -35,7 +36,8 @@ export const generateMenu = (routes, userRole) => {
                             path: child.path,
                             name: child.name,
                             meta: child.meta,
-                            url: child.url || child.path
+                            url: child.url || child.path,
+                            icon: route.meta.icon
                         };
                     }
                     menuItem.children = children;
@@ -59,7 +61,9 @@ export const generateMenu = (routes, userRole) => {
 };
 // 权限检查
 const userInfo = JSON.parse(sessionStorage.getItem("userInfo") || "{}");
+console.log(generateMenu(routerList, userInfo.role), "menuTable")
 export const menuTable = generateMenu(routerList, userInfo.role)
+
 // 使用示例
 /*
 const userRole = 2; // 用户角色

src/router/originalRoutingTable.js

@@ -14,6 +14,7 @@ const routerList = [
     meta: {
       requiresAuth: true, //有一些页面是否登录才能进去
       name: "首页",
+      icon: "HomeFilled",
     },
     children: [
       {
@@ -23,6 +24,7 @@ const routerList = [
         meta: {
           requiresAuth: true, //有一些页面是否登录才能进去
           name: "首页",
+          icon: "HomeFilled",
         },
       },
     ],
@@ -34,6 +36,7 @@ const routerList = [
     meta: {
       requiresAuth: true, //有一些页面是否登录才能进去
       name: "组别管理",
+      icon: "Notebook",
     },
     children: [
       {
@@ -43,6 +46,7 @@ const routerList = [
         meta: {
           requiresAuth: true,
           name: "组别管理",
+          icon: "Notebook",
         },
       },
     ],
@@ -57,6 +61,7 @@ const routerList = [
       icon: 'el-icon-s-data',
       name: "绩效考勤",
       requiresAuth: true,
+      icon: "el-icon-s-data",
       roles: [1, 2, 3] // 所有角色都可以访问
     },
     children: [
@@ -68,6 +73,7 @@ const routerList = [
           title: '综合部初审列表',
           name: "综合部初审列表",
           requiresAuth: true,
+          icon: "el-icon-s-data",
           roles: [2] // 只有role=2的用户可以查看
         }
       },
@@ -79,6 +85,7 @@ const routerList = [
           title: '综合部复审列表',
           name: "综合部复审列表",
           requiresAuth: true,
+          icon: "el-icon-s-data",
           roles: [2] // 只有role=2的用户可以查看
         }
       },
@@ -89,6 +96,7 @@ const routerList = [
         meta: {
           title: '主管审批列表',
           name: "主管审批列表",
+          icon: "el-icon-s-data",
           requiresAuth: true,
           roles: [1] // 只有role=1的用户可以查看
         }
@@ -100,6 +108,7 @@ const routerList = [
         meta: {
           title: '财务查看考勤列表',
           name: "财务查看考勤列表",
+          icon: "el-icon-s-data",
           requiresAuth: true,
           roles: [3] // 只有role=3的用户可以查看
         }
@@ -127,6 +136,7 @@ const routerList = [
           title: '工资条列表',
           name: "工资条列表",
           requiresAuth: true,
+          icon: "el-icon-money",
           roles: [3] // 只有财务角色可以访问
         }
       }