web-权限、文章

schoolNewsWeb/src/views/user-center/UserCenterView.vue

@@ -17,62 +17,35 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
-import { useStore } from 'vuex';
 import { FloatingSidebar } from '@/components/base';
-import UserCard from './components/UserCard.vue';
-import { MenuType } from '@/types/enums';
+import { UserCard } from '@/views/user-center/components';
+import { getParentChildrenRoutes } from '@/utils/routeUtils';
 import type { SysMenu } from '@/types/menu';
 
 const route = useRoute();
-const store = useStore();
 
-// 从 store 中获取当前用户的菜单列表
-const allMenus = computed(() => store.state.auth.menus as SysMenu[]);
-
-// 递归筛选出类型为 SIDEBAR 的菜单项（包含子菜单）
-const filterSidebarMenus = (menuList: SysMenu[]): SysMenu[] => {
-  if (!menuList || menuList.length === 0) return [];
-  
-  return menuList
-    .filter(menu => menu.type === MenuType.SIDEBAR)
-    .map(menu => {
-      // 如果有子菜单，递归处理
-      if (menu.children && menu.children.length > 0) {
-        return {
-          ...menu,
-          children: filterSidebarMenus(menu.children)
-        };
-      }
-      return menu;
-    });
-};
-
-// 查找当前路由对应的菜单项
-const findCurrentMenu = (menus: SysMenu[], path: string): SysMenu | null => {
-  for (const menu of menus) {
-    if (menu.url === path) {
-      return menu;
-    }
-    if (menu.children && menu.children.length > 0) {
-      const found = findCurrentMenu(menu.children, path);
-      if (found) return found;
-    }
-  }
-  return null;
-};
-
-// 获取当前路由对应的菜单及其子菜单（只显示 SIDEBAR 类型）
+// 从当前路由配置中获取子路由，转换为菜单格式
 const menus = computed(() => {
-  const currentPath = route.path;
-  const currentMenu = findCurrentMenu(allMenus.value, currentPath);
+  // 使用工具函数获取父路由的子路由
+  const childRoutes = getParentChildrenRoutes(route);
   
-  if (currentMenu && currentMenu.children) {
-    // 递归筛选出 type === MenuType.SIDEBAR 的子菜单
-    return filterSidebarMenus(currentMenu.children);
+  if (childRoutes.length === 0) {
+    return [];
   }
   
-  // 如果没有找到当前菜单，返回所有 SIDEBAR 类型的菜单
-  return filterSidebarMenus(allMenus.value);
+  // 获取父路由路径（用于拼接相对路径）
+  const parentRoute = route.matched[route.matched.length - 2];
+  
+  // 将子路由转换为菜单格式
+  return childRoutes
+    .map((child: any) => ({
+      menuID: child.name as string || child.path,
+      name: child.meta?.title as string,
+      url: child.path.startsWith('/') ? child.path : `${parentRoute.path}/${child.path}`,
+      icon: child.meta?.icon as string,
+      orderNum: child.meta?.orderNum as number || 0,
+    } as SysMenu))
+    .sort((a: any, b: any) => (a.orderNum || 0) - (b.orderNum || 0));
 });
 </script>
 

schoolNewsWeb/src/views/user-center/components/UserCard.vue

@@ -13,8 +13,8 @@
       <!-- 头像 -->
       <div class="avatar-wrapper">
         <img 
-          :src="userInfo?.avatar || defaultAvatar" 
-          :alt="userInfo?.nickname || userInfo?.username"
+          :src="userInfo?.avatar && userInfo.avatar!='default' ? userInfo.avatar : defaultAvatar" 
+          :alt="userInfo?.username"
           class="avatar"
         />
       </div>
@@ -23,21 +23,21 @@
       <div class="user-details">
         <!-- 用户名和性别 -->
         <div class="user-name-row">
-          <span class="username">{{ userInfo?.nickname || userInfo?.username || '未设置昵称' }}</span>
-          <div class="gender-tag" v-if="userInfo?.gender && genderIcon">
-            <img :src="genderIcon" :alt="genderText" class="gender-icon" />
-            <span class="gender-text">{{ genderText }}</span>
+          <span class="username">{{ userInfo?.username || '未设置昵称' }}</span>
+          <div class="gender-tag" v-if="userInfo?.gender">
+            <img :src="userInfo?.gender === 1 ? maleIcon : femaleIcon" :alt="userInfo?.gender === 1 ? '男' : '女'" class="gender-icon" />
+            <span class="gender-text">{{ userInfo?.gender === 1 ? '男' : '女' }}</span>
           </div>
         </div>
 
         <!-- 详细信息 -->
         <div class="info-row">
-          <span class="info-item">所属部门：{{ departmentName || '未分配部门' }}</span>
-          <span class="info-item">联系方式：{{ userInfo?.phone || '未设置' }}</span>
+          <span class="info-item">所属部门：{{ userInfo?.deptName || '未分配部门' }}</span>
+          <span class="info-item" v-if="userInfo?.phone">手机号：{{ userInfo?.phone || '未设置' }}</span>
+          <span class="info-item" v-if="userInfo?.email">邮箱：{{ userInfo?.email || '未设置' }}</span>
           <div class="level-item">
             <span class="info-label">学习等级：</span>
-            <img :src="arrowDownIcon" alt="等级" class="level-icon" />
-            <span class="level-text">等级</span>
+            <img :src="levelIcon" alt="等级" class="level-icon" />
           </div>
         </div>
       </div>
@@ -49,58 +49,45 @@
 
 <script setup lang="ts" name="UserCard">
 import { computed, ref, onMounted } from 'vue';
-import { useStore } from 'vuex';
-import { useRouter } from 'vue-router';
 import { UserVO } from '@/types';
-import {userApi} from '@/apis/system/user'
+import {userProfileApi} from '@/apis/usercenter/profile'
 import defaultAvatarImg from '@/assets/imgs/default-avatar.png';
 import maleIcon from '@/assets/imgs/male.svg';
 import femaleIcon from '@/assets/imgs/female.svg';
-import arrowDownIcon from '@/assets/imgs/arrow-down.svg';
+import V1Icon from '@/assets/imgs/v1.svg';
+import V2Icon from '@/assets/imgs/v2.svg';
+import V3Icon from '@/assets/imgs/v3.svg';
+import V4Icon from '@/assets/imgs/v4.svg';
+import { ElMessage } from 'element-plus';
+import { useRouter } from 'vue-router';
 
-const store = useStore();
 const router = useRouter();
+const userInfo = ref<UserVO>();
 
 // 默认头像
 const defaultAvatar = defaultAvatarImg;
 
-// 从 store 获取用户信息
-const loginDomain = computed(() => store.state.auth.loginDomain);
-const userInfo = ref<UserVO>();
-
-// 获取部门名称
-const departmentName = computed(() => {
-  const roles = loginDomain.value?.roles || [];
-  if (roles.length > 0 && roles[0].dept) {
-    return roles[0].dept.name;
+const levelIcon = computed(() => {
+  switch(userInfo.value?.level){
+    case 1: return V1Icon;
+    case 2: return V2Icon;
+    case 3: return V3Icon;
+    case 4: return V4Icon;
   }
-  return '';
+  return V1Icon;
 });
 
-// 性别文本
-const genderText = computed(() => {
-  const gender = userInfo.value?.gender;
-  if (gender === 1) return '男';
-  if (gender === 2) return '女';
-  return '';
-});
-
-// 性别图标
-const genderIcon = computed(() => {
-  const gender = userInfo.value?.gender;
-  if (gender === 1) return maleIcon;
-  if (gender === 2) return femaleIcon;
-  return '';
-});
-
-// 编辑资料
-const handleEdit = () => {
-  router.push('/profile/personal-info');
-};
+function handleEdit() {
+  router.push('/profile');
+}
 
 onMounted(async () => {
-  const res = await userApi.getCurrentUser();
-  userInfo.value = res.data;
+  const res = await userProfileApi.getUserProfile();
+  if(res.success){
+    userInfo.value = res.data;
+  }else{
+    ElMessage.error(res.message || '获取用户信息失败'); 
+  }
 });
 </script>
 

schoolNewsWeb/src/views/user-center/components/index.ts

@@ -0,0 +1 @@
+export { default as UserCard } from './UserCard.vue';