界面

schoolNewsWeb/src/apis/index.ts

@@ -86,7 +86,7 @@ request.interceptors.request.use(
     const customConfig = config as CustomAxiosRequestConfig;
     
     // 默认不显示加载动画，只有显式开启时才展示
-    if (customConfig.showLoading) {
+    if (customConfig.showLoading !== false) {
       loadingInstance = ElLoading.service({
         lock: true,
         text: "加载中...",

schoolNewsWeb/src/apis/message/message.ts

@@ -142,7 +142,7 @@ export const messageApi = {
     const response = await api.post<MessageUserVO>('/message/my/page', {
       pageParam,
       filter
-    });
+    },{showLoading: false});
     return response.data;
   },
 
@@ -181,7 +181,7 @@ export const messageApi = {
    * @returns Promise<ResultDomain<number>>
    */
   async getUnreadCount(): Promise<ResultDomain<number>> {
-    const response = await api.get<number>('/message/my/unreadCount');
+    const response = await api.get<number>('/message/my/unreadCount',{},{showLoading: false});
     return response.data;
   },
 

schoolNewsWeb/src/assets/imgs/notice.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M20 17H22V19H2V17H4V10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10V17ZM9 21H15V23H9V21Z" fill="black"/>
+</svg>

schoolNewsWeb/src/components/base/ChangeHome.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="change-home" v-if="isAdmin">
+        <el-button type="primary" @click="changeHome">
+            <span v-if="home">前往用户页</span>
+            <span v-else>前往管理页</span>
+        </el-button>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+
+const isAdmin = ref<boolean>(false);
+const home = ref<boolean>(false);
+const router = useRouter();
+const routes = router.getRoutes();
+
+function hasAdmin(){
+    return routes.some((route: any) => route.path.startsWith('/admin'));
+}
+
+function changeHome(){
+    if(home.value){
+        router.push('/home');
+    }else{
+        router.push('/admin/overview');
+    }
+    home.value = !home.value;
+}
+onMounted(() => {
+    isAdmin.value = hasAdmin();
+    home.value = router.currentRoute.value.path.startsWith('/admin');
+});
+</script>
+<style scoped lang="scss"></style>

schoolNewsWeb/src/components/base/Notice.vue

@@ -0,0 +1,394 @@
+<template>
+    <div ref="noticeRef" class="notice" @click="toggleDropdown" @mouseenter="openDropdown" @mouseleave="closeDropdown"
+        v-click-outside="forceCloseDropdown">
+        <div class="notice-trigger">
+            <img src="@/assets/imgs/notice.svg" alt="notice" />
+            <span v-if="unreadCount > 0" class="notice-badge">{{ unreadCount > 99 ? '99+' : unreadCount }}</span>
+        </div>
+
+        <!-- 下拉通知列表 -->
+        <Teleport to="body">
+            <div class="notice-dropdown" :class="{ 'show': dropdownVisible }" :style="dropdownStyle"
+                v-if="dropdownVisible" @mouseenter="openDropdown" @mouseleave="closeDropdown">
+                <div class="notice-header">
+                    <h3>通知</h3>
+                    <span class="notice-count" v-if="unreadCount > 0">{{ unreadCount }}条未读</span>
+                </div>
+                <div class="notice-list" v-loading="loading">
+                    <div v-if="noticeList.length === 0 && !loading" class="notice-empty">
+                        暂无通知
+                    </div>
+                    <div v-for="item in noticeList" :key="item.messageID" class="notice-item" :class="{ 'unread': !item.isRead }"
+                        @click="handleNoticeClick(item)">
+                        <div class="notice-content">
+                            <div class="notice-title">{{ item.title }}</div>
+                            <div class="notice-time">{{ formatTime(item.actualSendTime || item.createTime) }}</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="notice-footer" v-if="noticeList.length > 0">
+                    <span class="view-all" @click="viewAll">查看全部</span>
+                </div>
+            </div>
+        </Teleport>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { ElMessage } from 'element-plus';
+import { messageApi } from '@/apis/message';
+import type { MessageUserVO, PageParam } from '@/types';
+
+// 状态
+const dropdownVisible = ref(false);
+const noticeRef = ref<HTMLElement | null>(null);
+const dropdownPosition = ref({ top: 0, left: 0 });
+const closeTimer = ref<number | null>(null);
+const loading = ref(false);
+const lastLoadTime = ref(0); // 上次加载时间戳
+const hasLoadedOnce = ref(false); // 是否已经加载过一次
+
+const router = useRouter();
+
+// 通知列表
+const noticeList = ref<MessageUserVO[]>([]);
+
+// 未读数量
+const unreadCount = ref(0);
+
+// 下拉菜单样式
+const dropdownStyle = computed(() => {
+    return {
+        position: 'fixed' as const,
+        top: `${dropdownPosition.value.top}px`,
+        left: `${dropdownPosition.value.left}px`,
+        width: '320px',
+    };
+});
+
+// 加载消息列表
+async function loadMessages(force = false) {
+    // 如果正在加载，直接返回
+    if (loading.value) return;
+    
+    // 如果不是强制刷新，且已经加载过，且距离上次加载时间少于2秒，则不重复加载
+    const now = Date.now();
+    if (!force && hasLoadedOnce.value && (now - lastLoadTime.value) < 2000) {
+        return;
+    }
+    
+    loading.value = true;
+    lastLoadTime.value = now;
+    try {
+        const pageParam: PageParam = {
+            pageNumber: 1,
+            pageSize: 10,
+            orderBy: 'actualSendTime',
+            orderDirection: 'desc'
+        };
+        
+        const result = await messageApi.getMyMessages(pageParam);
+        if (result.success) {
+            noticeList.value = result.dataList || [];
+            hasLoadedOnce.value = true;
+        } else {
+            ElMessage.error(result.message || '加载失败');
+        }
+    } catch (error) {
+        console.error('加载消息列表失败:', error);
+        ElMessage.error('加载失败');
+    } finally {
+        loading.value = false;
+    }
+}
+
+// 加载未读数量
+async function loadUnreadCount() {
+    try {
+        const result = await messageApi.getUnreadCount();
+        if (result.success) {
+            unreadCount.value = result.data || 0;
+        }
+    } catch (error) {
+        console.error('加载未读数量失败:', error);
+    }
+}
+
+// 方法
+function openDropdown() {
+    if (closeTimer.value) {
+        clearTimeout(closeTimer.value);
+        closeTimer.value = null;
+    }
+
+    // 如果已经打开，不重复处理（避免鼠标移动时重复触发）
+    if (dropdownVisible.value) {
+        return;
+    }
+
+    dropdownVisible.value = true;
+    
+    // 计算下拉菜单位置（居中显示）
+    if (noticeRef.value) {
+        const rect = noticeRef.value.getBoundingClientRect();
+        const dropdownWidth = 320;
+        dropdownPosition.value = {
+            top: rect.bottom + 4,
+            left: rect.left + rect.width / 2 - dropdownWidth / 2, // 居中
+        };
+    }
+    
+    // 每次打开下拉菜单时都加载数据（因为 hasLoadedOnce 在关闭时会被重置）
+    loadMessages();
+    loadUnreadCount();
+}
+
+function toggleDropdown() {
+    if (dropdownVisible.value) {
+        forceCloseDropdown();
+    } else {
+        openDropdown();
+    }
+}
+
+function closeDropdown() {
+    closeTimer.value = setTimeout(() => {
+        dropdownVisible.value = false;
+        closeTimer.value = null;
+        // 关闭时重置加载标志，下次打开时会重新加载
+        hasLoadedOnce.value = false;
+    }, 200);
+}
+
+function forceCloseDropdown() {
+    if (closeTimer.value) {
+        clearTimeout(closeTimer.value);
+        closeTimer.value = null;
+    }
+    dropdownVisible.value = false;
+    // 关闭时重置加载标志，下次打开时会重新加载
+    hasLoadedOnce.value = false;
+}
+
+async function handleNoticeClick(item: MessageUserVO) {
+    // 如果未读，标记为已读
+    if (!item.isRead && item.messageID) {
+        try {
+            await messageApi.markAsRead(item.messageID);
+            item.isRead = true;
+            // 更新未读数量
+            if (unreadCount.value > 0) {
+                unreadCount.value--;
+            }
+        } catch (error) {
+            console.error('标记已读失败:', error);
+        }
+    }
+    
+    // 跳转到消息详情页
+    if (item.messageID) {
+        router.push(`/user/message/detail/${item.messageID}`);
+    }
+    forceCloseDropdown();
+}
+
+function viewAll() {
+    router.push('/user/message');
+    forceCloseDropdown();
+}
+
+function formatTime(time?: string | number): string {
+    if (!time) return '';
+    const date = new Date(time);
+    const now = new Date();
+    const diff = now.getTime() - date.getTime();
+    const minutes = Math.floor(diff / 60000);
+    const hours = Math.floor(diff / 3600000);
+    const days = Math.floor(diff / 86400000);
+
+    if (minutes < 1) return '刚刚';
+    if (minutes < 60) return `${minutes}分钟前`;
+    if (hours < 24) return `${hours}小时前`;
+    if (days < 7) return `${days}天前`;
+
+    return date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' });
+}
+
+// 点击外部关闭指令
+const vClickOutside = {
+    mounted(el: any, binding: any) {
+        el._clickOutside = (event: Event) => {
+            if (!(el === event.target || el.contains(event.target as Node))) {
+                binding.value();
+            }
+        };
+        document.addEventListener('click', el._clickOutside);
+    },
+    unmounted(el: any) {
+        document.removeEventListener('click', el._clickOutside);
+        delete el._clickOutside;
+    }
+};
+
+onMounted(() => {
+    loadUnreadCount();
+});
+</script>
+
+<style scoped lang="scss">
+.notice {
+    position: relative;
+    cursor: pointer;
+    user-select: none;
+}
+
+.notice-trigger {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px;
+    border-radius: 4px;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+        background-color: #f5f5f5;
+    }
+
+    img {
+        width: 20px;
+        height: 20px;
+    }
+
+    .notice-badge {
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        min-width: 16px;
+        height: 16px;
+        padding: 0 4px;
+        background: #ff4d4f;
+        color: white;
+        border-radius: 8px;
+        font-size: 11px;
+        line-height: 16px;
+        text-align: center;
+        font-weight: 500;
+    }
+}
+
+.notice-dropdown {
+    background: white;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    border: 1px solid #e8e8e8;
+    z-index: 10000;
+    overflow: hidden;
+    opacity: 0;
+    transform: scaleY(0);
+    transform-origin: top center;
+    transition: opacity 0.2s ease, transform 0.2s ease;
+    max-height: 400px;
+    display: flex;
+    flex-direction: column;
+
+    &.show {
+        opacity: 1;
+        transform: scaleY(1);
+    }
+}
+
+.notice-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 16px;
+    border-bottom: 1px solid #e8e8e8;
+
+    h3 {
+        margin: 0;
+        font-size: 16px;
+        font-weight: 600;
+        color: #333;
+    }
+
+    .notice-count {
+        font-size: 12px;
+        color: #ff4d4f;
+    }
+}
+
+.notice-list {
+    flex: 1;
+    overflow-y: auto;
+    max-height: 300px;
+}
+
+.notice-empty {
+    padding: 40px 20px;
+    text-align: center;
+    color: #999;
+    font-size: 14px;
+}
+
+.notice-item {
+    padding: 12px 16px;
+    border-bottom: 1px solid #f0f0f0;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+        background-color: #f5f5f5;
+    }
+
+    &.unread {
+        background-color: #f0f7ff;
+
+        .notice-title {
+            font-weight: 600;
+        }
+    }
+
+    &:last-child {
+        border-bottom: none;
+    }
+}
+
+.notice-content {
+    .notice-title {
+        font-size: 14px;
+        color: #333;
+        line-height: 1.5;
+        margin-bottom: 4px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        -webkit-box-orient: vertical;
+    }
+
+    .notice-time {
+        font-size: 12px;
+        color: #999;
+    }
+}
+
+.notice-footer {
+    padding: 8px 16px;
+    border-top: 1px solid #e8e8e8;
+    text-align: center;
+
+    .view-all {
+        font-size: 14px;
+        color: #C62828;
+        cursor: pointer;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+}
+</style>

schoolNewsWeb/src/components/base/TopNavigation.vue

@@ -48,6 +48,8 @@
       <div class="nav-right">
               <!-- 搜索框 -->
         <Search @search="handleSearch" />
+        <ChangeHome />
+        <Notice />
         <UserDropdown :user="userInfo" @logout="handleLogout" />
       </div>
     </div>
@@ -61,8 +63,7 @@ import { useStore } from 'vuex';
 import type { SysMenu } from '@/types';
 import { MenuType } from '@/types/enums';
 // @ts-ignore - Vue 3.5 组件导入兼容性
-import {UserDropdown, Search} from '@/components/base';
+import {UserDropdown, Search, Notice, ChangeHome} from '@/components/base';
-
 const router = useRouter();
 const route = useRoute();
 const store = useStore();
@@ -462,7 +463,7 @@ function handleLogout() {
   margin-left: auto;
   display: flex;
   flex-shrink: 0; /* 防止右侧区域被压缩 */
-  gap: 20px;
+  // gap: 20px;
   align-items: center;
   
   // 添加搜索框样式

schoolNewsWeb/src/components/base/index.ts

@@ -10,3 +10,5 @@ export { default as Search } from './Search.vue';
 export { default as CenterHead } from './CenterHead.vue';
 export { default as GenericSelector } from './GenericSelector.vue';
 export { default as TreeNode } from './TreeNode.vue';
+export { default as Notice } from './Notice.vue';
+export { default as ChangeHome } from './ChangeHome.vue';

schoolNewsWeb/src/layouts/RoutePlaceholder.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="route-placeholder">
+    <router-view />
+  </div>
+</template>
+
+<script setup lang="ts">
+// 路由占位组件，用于没有实际组件的路由节点
+// 仅作为 router-view 的容器，不影响布局样式
+</script>
+
+<style lang="scss" scoped>
+.route-placeholder {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+</style>
+

schoolNewsWeb/src/layouts/SidebarLayout.vue

@@ -19,6 +19,7 @@
 
         <!-- 导航菜单 -->
         <nav class="sidebar-nav">
+          <ChangeHome />
           <MenuSidebar
             :menus="sidebarMenus"
             :collapsed="false"
@@ -49,7 +50,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { useStore } from 'vuex';
 import type { SysMenu } from '@/types';
 import { MenuType } from '@/types/enums';
-import { MenuSidebar } from '@/components';
+import { MenuSidebar, ChangeHome } from '@/components';
 
 const route = useRoute();
 const router = useRouter();
@@ -214,7 +215,7 @@ function handleMenuClick(menu: SysMenu) {
   overflow-y: auto;
   padding: 20px;
   box-sizing: border-box;
-  
+  widows: 100vw;
   // 美化滚动条
   &::-webkit-scrollbar {
     width: 8px;

schoolNewsWeb/src/utils/route-generator.ts

@@ -23,6 +23,10 @@ const LAYOUT_MAP: Record<string, () => Promise<any>> = {
   'BlankLayout': () => import('@/layouts/BlankLayout.vue'),
   // 页面布局
   'PageLayout': () => import('@/layouts/PageLayout.vue'),
+  // 路由占位组件（用于没有组件的子路由）
+  'RoutePlaceholder': () => import('@/layouts/RoutePlaceholder.vue'),
+  // 用户中心布局（有共用区域，避免重复查询）
+  'UserCenterLayout': () => import('@/views/user/user-center/UserCenterLayout.vue'),
 };
 
 /**
@@ -122,10 +126,20 @@ function generateRouteFromMenu(menu: SysMenu, isTopLevel = true): RouteRecordRaw
   const layout = isTopLevel ? (menu as any).layout : null;
   const hasChildren = menu.children && menu.children.length > 0;
   
+  // 检查 component 是否是布局组件（优先检查 LAYOUT_MAP，再检查名称）
+  const isComponentLayout = menu.component && (
+    LAYOUT_MAP[menu.component] || 
+    (typeof menu.component === 'string' && menu.component.includes('Layout'))
+  );
+  
   // 确定路由组件
   if (layout && LAYOUT_MAP[layout]) {
     // 如果指定了布局，使用指定的布局
     route.component = getComponent(layout);
+  } else if (isComponentLayout && hasChildren && isTopLevel && menu.component) {
+    // 如果 component 是布局组件且有子菜单，使用该布局组件作为父路由组件
+    // 这样可以确保布局只渲染一次，共用区域的数据也只查询一次
+    route.component = getComponent(menu.component);
   } else if (hasChildren && isTopLevel) {
     // 如果有子菜单但没有指定布局，根据菜单类型选择默认布局
     if (menu.type === MenuType.NAVIGATION) {
@@ -141,8 +155,8 @@ function generateRouteFromMenu(menu: SysMenu, isTopLevel = true): RouteRecordRaw
     if (menu.component) {
       route.component = getComponent(menu.component);
     } else {
-      // 非顶层菜单没有组件时，使用简单的占位组件
+      // 非顶层菜单没有组件时，使用路由占位组件（不影响布局样式）
-      route.component = getComponent('BlankLayout');
+      route.component = getComponent('RoutePlaceholder');
     }
   }
   
@@ -173,7 +187,8 @@ function generateRouteFromMenu(menu: SysMenu, isTopLevel = true): RouteRecordRaw
     });
 
     // 当前菜单指定了页面组件时，即使存在子菜单也应当渲染该页面
-    if (menu.component) {
+    // 但如果 component 是布局组件，则不应该创建 path: '' 的子路由（因为布局组件已经是父路由的组件了）
+    if (menu.component && !isComponentLayout) {
       route.children!.push({
         path: '',
         name: `${menu.menuID}_page`,

schoolNewsWeb/src/utils/routeUtils.ts

@@ -14,6 +14,20 @@ export function getParentChildrenRoutes(route: RouteLocationNormalized): RouteRe
     return [];
   }
   
-  // 返回有 title 的子路由
+  // 返回有 title 的子路由，但排除父路由本身（path 为空字符串或 name 以 _page 结尾的子路由）
-  return parentRoute.children.filter((child: RouteRecordRaw) => child.meta?.title);
+  return parentRoute.children.filter((child: RouteRecordRaw) => {
+    // 必须有 title
+    if (!child.meta?.title) {
+      return false;
+    }
+    // 排除 path 为空字符串的子路由（代表父路由本身）
+    if (child.path === '' || child.path === undefined) {
+      return false;
+    }
+    // 排除 name 以 _page 结尾的子路由（父路由的默认子路由）
+    if (typeof child.name === 'string' && child.name.endsWith('_page')) {
+      return false;
+    }
+    return true;
+  });
 }

schoolNewsWeb/src/views/user/message/MyMessageDetailView.vue

@@ -3,7 +3,7 @@
     <div class="header">
       <el-button @click="handleBack" text>
         <el-icon><ArrowLeft /></el-icon>
-        返回消息列表
+        返回
       </el-button>
     </div>
 

schoolNewsWeb/src/views/user/profile/PersonalInfoView.vue

@@ -1,130 +0,0 @@
-<template>
-  <div class="personal-info">
-    <el-form :model="userForm" label-width="120px" class="info-form">
-      <el-form-item label="头像">
-        <div class="avatar-upload">
-          <img :src="userForm.avatar || defaultAvatar" alt="头像" class="avatar-preview" />
-          <el-button size="small" @click="handleAvatarUpload">更换头像</el-button>
-        </div>
-      </el-form-item>
-      
-      <el-form-item label="用户名">
-        <el-input v-model="userForm.username" disabled />
-      </el-form-item>
-      
-      <el-form-item label="姓名">
-        <el-input v-model="userForm.realName" />
-      </el-form-item>
-      
-      <el-form-item label="性别">
-        <el-radio-group v-model="userForm.gender">
-          <el-radio :label="1">男</el-radio>
-          <el-radio :label="2">女</el-radio>
-        </el-radio-group>
-      </el-form-item>
-      
-      <el-form-item label="手机号">
-        <el-input v-model="userForm.phone" />
-      </el-form-item>
-      
-      <el-form-item label="邮箱">
-        <el-input v-model="userForm.email" />
-      </el-form-item>
-      
-      <el-form-item label="部门">
-        <el-input v-model="userForm.deptName" disabled />
-      </el-form-item>
-      
-      <el-form-item label="个人简介">
-        <el-input 
-          v-model="userForm.bio" 
-          type="textarea" 
-          :rows="4"
-          placeholder="介绍一下自己吧..."
-        />
-      </el-form-item>
-      
-      <el-form-item>
-        <el-button type="primary" @click="handleSave">保存</el-button>
-        <el-button @click="handleCancel">取消</el-button>
-      </el-form-item>
-    </el-form>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import { ElForm, ElFormItem, ElInput, ElButton, ElRadio, ElRadioGroup, ElMessage } from 'element-plus';
-
-// 默认头像
-const defaultAvatar = new URL('@/assets/imgs/default-avatar.png', import.meta.url).href;
-
-const userForm = ref({
-  avatar: '',
-  username: '',
-  realName: '',
-  gender: 1,
-  phone: '',
-  email: '',
-  deptName: '',
-  bio: ''
-});
-
-onMounted(() => {
-  // TODO: 加载用户信息
-  loadUserInfo();
-});
-
-function loadUserInfo() {
-  // 模拟数据
-  userForm.value = {
-    avatar: '',
-    username: '平台用户bc7a1b',
-    realName: '张三',
-    gender: 1,
-    phone: '15268425987',
-    email: 'zhangsan@example.com',
-    deptName: '机械学院',
-    bio: ''
-  };
-}
-
-function handleAvatarUpload() {
-  // TODO: 上传头像
-  ElMessage.info('上传头像功能开发中');
-}
-
-function handleSave() {
-  // TODO: 保存用户信息
-  ElMessage.success('保存成功');
-}
-
-function handleCancel() {
-  // 重置表单
-  loadUserInfo();
-}
-</script>
-
-<style lang="scss" scoped>
-.personal-info {
-  max-width: 600px;
-}
-
-.info-form {
-  padding: 20px 0;
-}
-
-.avatar-upload {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-}
-
-.avatar-preview {
-  width: 80px;
-  height: 80px;
-  border-radius: 50%;
-  object-fit: cover;
-  border: 2px solid #e0e0e0;
-}
-</style>

schoolNewsWeb/src/views/user/profile/ProfileView.vue

@@ -1,87 +0,0 @@
-<template>
-  <div class="user-center-page">
-    <div class="user-card-wrapper">
-      <UserCard/>
-    </div>
-    <div class="content-wrapper">
-      <div class="sidebar-wrapper">
-        <FloatingSidebar :menus="menus" />
-      </div>
-      <div class="main-content">
-        <router-view/>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { useRoute } from 'vue-router';
-import { FloatingSidebar } from '@/components/base';
-import { UserCard } from '@/views/user/user-center/components';
-import { getParentChildrenRoutes } from '@/utils/routeUtils';
-import type { SysMenu } from '@/types/menu';
-
-const route = useRoute();
-
-// 从当前路由配置中获取子路由，转换为菜单格式
-const menus = computed(() => {
-  // 使用工具函数获取父路由的子路由
-  const childRoutes = getParentChildrenRoutes(route);
-  
-  if (childRoutes.length === 0) {
-    return [];
-  }
-  
-  // 获取父路由路径（用于拼接相对路径）
-  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>
-
-<style lang="scss" scoped>
-.user-center-page {
-  min-height: 100vh;
-  background: #f5f5f5;
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 20px;
-}
-
-.user-card-wrapper {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-}
-
-.content-wrapper {
-  width: 100%;
-  max-width: 1200px;
-  display: flex;
-  gap: 20px;
-}
-
-.sidebar-wrapper {
-  flex-shrink: 0;
-}
-
-.main-content {
-  flex: 1;
-  background: white;
-  border-radius: 8px;
-  padding: 20px;
-}
-</style>
-

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

@@ -1,15 +1,10 @@
 <template>
+
       <div class="learning-records">
         <div class="records-header">
           <h2>学习记录</h2>
-      <el-date-picker
+          <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
-        v-model="dateRange"
+            end-placeholder="结束日期" @change="handleDateChange" />
-        type="daterange"
-        range-separator="至"
-        start-placeholder="开始日期"
-        end-placeholder="结束日期"
-        @change="handleDateChange"
-      />
         </div>
 
         <div class="records-list">
@@ -34,12 +29,14 @@
           </div>
         </div>
       </div>
+
+
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
 import { ElDatePicker } from 'element-plus';
-
+import { UserCenterLayout } from '@/views/user/user-center';
 const dateRange = ref<[Date, Date] | null>(null);
 const records = ref<any[]>([]);
 
@@ -174,4 +171,3 @@ function getRecordIcon(type: string) {
   }
 }
 </style>
-

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

@@ -1,4 +1,5 @@
 <template>
+
       <div class="my-achievements">
         <div class="achievements-header">
           <h2>我的成就</h2>
@@ -19,11 +20,7 @@
         <div class="filter-tabs">
           <el-radio-group v-model="selectedType" @change="filterAchievements">
             <el-radio-button :label="undefined">全部</el-radio-button>
-        <el-radio-button 
+            <el-radio-button v-for="option in achievementTypeOptions" :key="option.value" :label="option.value">
-          v-for="option in achievementTypeOptions" 
-          :key="option.value" 
-          :label="option.value"
-        >
               {{ option.label }}
             </el-radio-button>
           </el-radio-group>
@@ -40,26 +37,22 @@
 
         <!-- 成就网格 -->
         <div v-else class="achievements-grid">
-      <div 
+          <div class="achievement-item" v-for="achievement in filteredAchievements" :key="achievement.achievementID"
-        class="achievement-item" 
+            :class="{ earned: achievement.obtained, locked: !achievement.obtained }">
-        v-for="achievement in filteredAchievements" 
-        :key="achievement.achievementID"
-        :class="{ earned: achievement.obtained, locked: !achievement.obtained }"
-      >
             <div class="achievement-icon">
-          <el-image 
+              <el-image :src="getIconUrl(achievement.icon)" :alt="achievement.name" fit="contain">
-            :src="getIconUrl(achievement.icon)" 
-            :alt="achievement.name"
-            fit="contain"
-          >
                 <template #error>
                   <div class="image-placeholder">
-                <el-icon><Trophy /></el-icon>
+                    <el-icon>
+                      <Trophy />
+                    </el-icon>
                   </div>
                 </template>
               </el-image>
               <div class="achievement-badge" v-if="achievement.obtained">
-            <el-icon><Check /></el-icon>
+                <el-icon>
+                  <Check />
+                </el-icon>
               </div>
               <div class="achievement-level" v-if="achievement.level">
                 Lv.{{ achievement.level }}
@@ -68,10 +61,7 @@
             <div class="achievement-info">
               <div class="achievement-header">
                 <h3>{{ achievement.name }}</h3>
-            <el-tag 
+                <el-tag :type="achievement.type === 1 ? 'success' : 'primary'" size="small">
-              :type="achievement.type === 1 ? 'success' : 'primary'" 
-              size="small"
-            >
                   {{ getAchievementTypeLabel(achievement.type) }}
                 </el-tag>
               </div>
@@ -79,7 +69,9 @@
 
               <!-- 条件说明 -->
               <div class="achievement-condition">
-            <el-icon><InfoFilled /></el-icon>
+                <el-icon>
+                  <InfoFilled />
+                </el-icon>
                 <span>{{ formatConditionValue(achievement.conditionType, achievement.conditionValue) }}</span>
               </div>
 
@@ -91,28 +83,31 @@
                     {{ achievement.currentValue || 0 }} / {{ achievement.targetValue || achievement.conditionValue }}
                   </span>
                 </div>
-            <el-progress 
+                <el-progress :percentage="achievement.progressPercentage || 0" :color="progressColor"
-              :percentage="achievement.progressPercentage || 0" 
+                  :show-text="false" />
-              :color="progressColor"
-              :show-text="false"
-            />
               </div>
 
               <!-- 获得信息 -->
               <div class="achievement-footer" v-if="achievement.obtained">
                 <div class="achievement-date">
-              <el-icon><Calendar /></el-icon>
+                  <el-icon>
+                    <Calendar />
+                  </el-icon>
                   <span>{{ formatDate(achievement.obtainTime) }}</span>
                 </div>
                 <div class="achievement-points" v-if="achievement.points">
-              <el-icon><Star /></el-icon>
+                  <el-icon>
+                    <Star />
+                  </el-icon>
                   <span>+{{ achievement.points }} 积分</span>
                 </div>
               </div>
 
               <!-- 未获得时显示积分奖励 -->
               <div class="achievement-reward" v-else-if="achievement.points">
-            <el-icon><Present /></el-icon>
+                <el-icon>
+                  <Present />
+                </el-icon>
                 <span>奖励 {{ achievement.points }} 积分</span>
               </div>
             </div>
@@ -120,11 +115,10 @@
         </div>
 
         <!-- 空状态 -->
-    <el-empty 
+        <el-empty v-if="!loading && filteredAchievements.length === 0" description="暂无成就数据" />
-      v-if="!loading && filteredAchievements.length === 0" 
-      description="暂无成就数据"
-    />
       </div>
+
+
 </template>
 
 <script setup lang="ts">
@@ -135,7 +129,7 @@ import { achievementApi } from '@/apis/achievement';
 import type { AchievementVO } from '@/types';
 import { AchievementEnumHelper } from '@/types/enums/achievement-enums';
 import { getAchievementIconUrl } from '@/utils/iconUtils';
-
+import { UserCenterLayout } from '@/views/user/user-center';
 // 响应式数据
 const loading = ref(false);
 const achievements = ref<AchievementVO[]>([]);
@@ -546,4 +540,3 @@ onMounted(() => {
   }
 }
 </style>
-

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

@@ -1,15 +1,11 @@
 <template>
+
   <div class="my-favorites">
     <div class="favorites-header">
       <h2>我的收藏</h2>
       <div class="filter-tabs">
-        <div 
+        <div class="filter-tab" v-for="filter in filters" :key="String(filter.key)"
-          class="filter-tab" 
+          :class="{ active: activeFilter === filter.key }" @click="activeFilter = filter.key">
-          v-for="filter in filters" 
-          :key="String(filter.key)"
-          :class="{ active: activeFilter === filter.key }"
-          @click="activeFilter = filter.key"
-        >
           {{ filter.label }}
         </div>
       </div>
@@ -20,7 +16,9 @@
         <div class="item-thumbnail">
           <img v-if="getThumbnail(item)" :src="getThumbnail(item)" :alt="getTitle(item)" />
           <div v-else class="thumbnail-placeholder">
-            <el-icon :size="48"><Document /></el-icon>
+            <el-icon :size="48">
+              <Document />
+            </el-icon>
           </div>
           <div class="item-type">{{ getTypeName(item) }}</div>
         </div>
@@ -39,11 +37,15 @@
 
       <!-- 空状态 -->
       <div v-if="!loading && filteredFavorites.length === 0" class="empty-state">
-        <el-icon :size="64" class="empty-icon"><Star /></el-icon>
+        <el-icon :size="64" class="empty-icon">
+          <Star />
+        </el-icon>
         <p>暂无收藏内容</p>
       </div>
     </div>
   </div>
+
+
 </template>
 
 <script setup lang="ts">
@@ -360,4 +362,3 @@ function formatDate(dateStr?: string): string {
   }
 }
 </style>
-

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

@@ -1,7 +1,7 @@
 <template>
   <div class="user-center-page">
     <div class="user-card-wrapper">
-      <UserCard/>
+      <UserCard />
     </div>
     <div class="content-wrapper">
       <div class="sidebar-wrapper">
@@ -28,7 +28,8 @@ const route = useRoute();
 const menus = computed(() => {
   // 使用工具函数获取父路由的子路由
   const childRoutes = getParentChildrenRoutes(route);
-  
+  console.log(childRoutes);
+  console.log(route)
   if (childRoutes.length === 0) {
     return [];
   }
@@ -57,7 +58,7 @@ const menus = computed(() => {
   flex-direction: column;
   align-items: center;
   gap: 20px;
-  height: 100%;
+  height: calc(100vh - 76px);
   // overflow-y: auto;
 }
 
@@ -87,4 +88,3 @@ const menus = computed(() => {
   padding: 20px;
 }
 </style>
-

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

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

schoolNewsWeb/src/views/user/user-center/profile/AccountSettingsView.vue

@@ -1,4 +1,5 @@
 <template>
+
       <div class="account-settings">
         <div class="settings-section">
           <h3>修改密码</h3>
@@ -48,12 +49,14 @@
           </div>
         </div>
       </div>
+
+
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
 import { ElForm, ElFormItem, ElInput, ElButton, ElMessage, type FormInstance, type FormRules } from 'element-plus';
-
+import { UserCenterLayout } from '@/views/user/user-center';
 const passwordFormRef = ref<FormInstance>();
 
 const passwordForm = ref({
@@ -157,4 +160,3 @@ async function handleChangePassword() {
   }
 }
 </style>
-

schoolNewsWeb/src/views/user/user-center/profile/PersonalInfoView.vue

@@ -0,0 +1,128 @@
+<template>
+
+      <div class="personal-info">
+        <el-form :model="userForm" label-width="120px" class="info-form">
+          <el-form-item label="头像">
+            <div class="avatar-upload">
+              <img :src="userForm.avatar || defaultAvatar" alt="头像" class="avatar-preview" />
+              <el-button size="small" @click="handleAvatarUpload">更换头像</el-button>
+            </div>
+          </el-form-item>
+
+          <el-form-item label="用户名">
+            <el-input v-model="userForm.username" disabled />
+          </el-form-item>
+
+          <el-form-item label="姓名">
+            <el-input v-model="userForm.realName" />
+          </el-form-item>
+
+          <el-form-item label="性别">
+            <el-radio-group v-model="userForm.gender">
+              <el-radio :label="1">男</el-radio>
+              <el-radio :label="2">女</el-radio>
+            </el-radio-group>
+          </el-form-item>
+
+          <el-form-item label="手机号">
+            <el-input v-model="userForm.phone" />
+          </el-form-item>
+
+          <el-form-item label="邮箱">
+            <el-input v-model="userForm.email" />
+          </el-form-item>
+
+          <el-form-item label="部门">
+            <el-input v-model="userForm.deptName" disabled />
+          </el-form-item>
+
+          <el-form-item label="个人简介">
+            <el-input v-model="userForm.bio" type="textarea" :rows="4" placeholder="介绍一下自己吧..." />
+          </el-form-item>
+
+          <el-form-item>
+            <el-button type="primary" @click="handleSave">保存</el-button>
+            <el-button @click="handleCancel">取消</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { ElForm, ElFormItem, ElInput, ElButton, ElRadio, ElRadioGroup, ElMessage } from 'element-plus';
+import { UserCenterLayout } from '@/views/user/user-center';
+// 默认头像
+const defaultAvatar = new URL('@/assets/imgs/default-avatar.png', import.meta.url).href;
+
+const userForm = ref({
+  avatar: '',
+  username: '',
+  realName: '',
+  gender: 1,
+  phone: '',
+  email: '',
+  deptName: '',
+  bio: ''
+});
+
+onMounted(() => {
+  // TODO: 加载用户信息
+  loadUserInfo();
+});
+
+function loadUserInfo() {
+  // 模拟数据
+  userForm.value = {
+    avatar: '',
+    username: '平台用户bc7a1b',
+    realName: '张三',
+    gender: 1,
+    phone: '15268425987',
+    email: 'zhangsan@example.com',
+    deptName: '机械学院',
+    bio: ''
+  };
+}
+
+function handleAvatarUpload() {
+  // TODO: 上传头像
+  ElMessage.info('上传头像功能开发中');
+}
+
+function handleSave() {
+  // TODO: 保存用户信息
+  ElMessage.success('保存成功');
+}
+
+function handleCancel() {
+  // 重置表单
+  loadUserInfo();
+}
+</script>
+
+<style lang="scss" scoped>
+.personal-info {
+  max-width: 600px;
+}
+
+.info-form {
+  padding: 20px 0;
+}
+
+.avatar-upload {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.avatar-preview {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid #e0e0e0;
+}
+</style>