From 46003a646e5e9d32caf52bcba5f5e00a37230699 Mon Sep 17 00:00:00 2001
From: wangys <3401275564@qq.com>
Date: Fri, 14 Nov 2025 12:03:02 +0800
Subject: [PATCH] =?UTF-8?q?=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 schoolNewsWeb/src/apis/index.ts               |   2 +-
 schoolNewsWeb/src/apis/message/message.ts     |   4 +-
 schoolNewsWeb/src/assets/imgs/notice.svg      |   3 +
 .../src/components/base/ChangeHome.vue        |  35 ++
 schoolNewsWeb/src/components/base/Notice.vue  | 394 ++++++++++++++++++
 .../src/components/base/TopNavigation.vue     |   7 +-
 schoolNewsWeb/src/components/base/index.ts    |   4 +-
 .../src/layouts/RoutePlaceholder.vue          |  19 +
 schoolNewsWeb/src/layouts/SidebarLayout.vue   |   5 +-
 schoolNewsWeb/src/utils/route-generator.ts    |  21 +-
 schoolNewsWeb/src/utils/routeUtils.ts         |  18 +-
 .../user/message/MyMessageDetailView.vue      |   2 +-
 .../views/user/profile/PersonalInfoView.vue   | 130 ------
 .../src/views/user/profile/ProfileView.vue    |  87 ----
 .../user/user-center/LearningRecordsView.vue  |  72 ++--
 .../user/user-center/MyAchievementsView.vue   | 299 +++++++------
 .../user/user-center/MyFavoritesView.vue      |  39 +-
 ...serCenterView.vue => UserCenterLayout.vue} |  12 +-
 .../src/views/user/user-center/index.ts       |   1 +
 .../profile/AccountSettingsView.vue           | 104 ++---
 .../user-center/profile/PersonalInfoView.vue  | 128 ++++++
 21 files changed, 887 insertions(+), 499 deletions(-)
 create mode 100644 schoolNewsWeb/src/assets/imgs/notice.svg
 create mode 100644 schoolNewsWeb/src/components/base/ChangeHome.vue
 create mode 100644 schoolNewsWeb/src/components/base/Notice.vue
 create mode 100644 schoolNewsWeb/src/layouts/RoutePlaceholder.vue
 delete mode 100644 schoolNewsWeb/src/views/user/profile/PersonalInfoView.vue
 delete mode 100644 schoolNewsWeb/src/views/user/profile/ProfileView.vue
 rename schoolNewsWeb/src/views/user/user-center/{UserCenterView.vue => UserCenterLayout.vue} (95%)
 create mode 100644 schoolNewsWeb/src/views/user/user-center/index.ts
 rename schoolNewsWeb/src/views/user/{ => user-center}/profile/AccountSettingsView.vue (55%)
 create mode 100644 schoolNewsWeb/src/views/user/user-center/profile/PersonalInfoView.vue

diff --git a/schoolNewsWeb/src/apis/index.ts b/schoolNewsWeb/src/apis/index.ts
index 1391a7f..1a8ef8e 100644
--- a/schoolNewsWeb/src/apis/index.ts
+++ b/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: "加载中...",
diff --git a/schoolNewsWeb/src/apis/message/message.ts b/schoolNewsWeb/src/apis/message/message.ts
index 067b228..a10c28c 100644
--- a/schoolNewsWeb/src/apis/message/message.ts
+++ b/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;
   },
 
diff --git a/schoolNewsWeb/src/assets/imgs/notice.svg b/schoolNewsWeb/src/assets/imgs/notice.svg
new file mode 100644
index 0000000..b77d437
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/schoolNewsWeb/src/components/base/ChangeHome.vue b/schoolNewsWeb/src/components/base/ChangeHome.vue
new file mode 100644
index 0000000..d50f979
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/schoolNewsWeb/src/components/base/Notice.vue b/schoolNewsWeb/src/components/base/Notice.vue
new file mode 100644
index 0000000..aa76af5
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/schoolNewsWeb/src/components/base/TopNavigation.vue b/schoolNewsWeb/src/components/base/TopNavigation.vue
index 7bafb11..5d7db4c 100644
--- a/schoolNewsWeb/src/components/base/TopNavigation.vue
+++ b/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;
   
   // 添加搜索框样式
diff --git a/schoolNewsWeb/src/components/base/index.ts b/schoolNewsWeb/src/components/base/index.ts
index 3e78959..c123b98 100644
--- a/schoolNewsWeb/src/components/base/index.ts
+++ b/schoolNewsWeb/src/components/base/index.ts
@@ -9,4 +9,6 @@ export { default as UserDropdown } from './UserDropdown.vue';
 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';
\ No newline at end of file
+export { default as TreeNode } from './TreeNode.vue';
+export { default as Notice } from './Notice.vue';
+export { default as ChangeHome } from './ChangeHome.vue';
diff --git a/schoolNewsWeb/src/layouts/RoutePlaceholder.vue b/schoolNewsWeb/src/layouts/RoutePlaceholder.vue
new file mode 100644
index 0000000..d64601c
--- /dev/null
+++ b/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>
+
diff --git a/schoolNewsWeb/src/layouts/SidebarLayout.vue b/schoolNewsWeb/src/layouts/SidebarLayout.vue
index 28c80bd..b6a0ff6 100644
--- a/schoolNewsWeb/src/layouts/SidebarLayout.vue
+++ b/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;
diff --git a/schoolNewsWeb/src/utils/route-generator.ts b/schoolNewsWeb/src/utils/route-generator.ts
index e1b62be..50e36a2 100644
--- a/schoolNewsWeb/src/utils/route-generator.ts
+++ b/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`,
diff --git a/schoolNewsWeb/src/utils/routeUtils.ts b/schoolNewsWeb/src/utils/routeUtils.ts
index 04b005e..2088c3d 100644
--- a/schoolNewsWeb/src/utils/routeUtils.ts
+++ b/schoolNewsWeb/src/utils/routeUtils.ts
@@ -14,6 +14,20 @@ export function getParentChildrenRoutes(route: RouteLocationNormalized): RouteRe
     return [];
   }
   
-  // 返回有 title 的子路由
-  return parentRoute.children.filter((child: RouteRecordRaw) => child.meta?.title);
+  // 返回有 title 的子路由，但排除父路由本身（path 为空字符串或 name 以 _page 结尾的子路由）
+  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;
+  });
 }
\ No newline at end of file
diff --git a/schoolNewsWeb/src/views/user/message/MyMessageDetailView.vue b/schoolNewsWeb/src/views/user/message/MyMessageDetailView.vue
index 16e05a7..5669e48 100644
--- a/schoolNewsWeb/src/views/user/message/MyMessageDetailView.vue
+++ b/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>
 
diff --git a/schoolNewsWeb/src/views/user/profile/PersonalInfoView.vue b/schoolNewsWeb/src/views/user/profile/PersonalInfoView.vue
deleted file mode 100644
index 4bade84..0000000
--- a/schoolNewsWeb/src/views/user/profile/PersonalInfoView.vue
+++ /dev/null
@@ -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>
diff --git a/schoolNewsWeb/src/views/user/profile/ProfileView.vue b/schoolNewsWeb/src/views/user/profile/ProfileView.vue
deleted file mode 100644
index 93963f0..0000000
--- a/schoolNewsWeb/src/views/user/profile/ProfileView.vue
+++ /dev/null
@@ -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>
-
diff --git a/schoolNewsWeb/src/views/user/user-center/LearningRecordsView.vue b/schoolNewsWeb/src/views/user/user-center/LearningRecordsView.vue
index 60a2a94..1d15921 100644
--- a/schoolNewsWeb/src/views/user/user-center/LearningRecordsView.vue
+++ b/schoolNewsWeb/src/views/user/user-center/LearningRecordsView.vue
@@ -1,45 +1,42 @@
 <template>
-  <div class="learning-records">
-    <div class="records-header">
-      <h2>学习记录</h2>
-      <el-date-picker
-        v-model="dateRange"
-        type="daterange"
-        range-separator="至"
-        start-placeholder="开始日期"
-        end-placeholder="结束日期"
-        @change="handleDateChange"
-      />
-    </div>
 
-    <div class="records-list">
-      <div class="record-item" v-for="record in records" :key="record.id">
-        <div class="record-icon">
-          <i :class="getRecordIcon(record.type)"></i>
+      <div class="learning-records">
+        <div class="records-header">
+          <h2>学习记录</h2>
+          <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
+            end-placeholder="结束日期" @change="handleDateChange" />
         </div>
-        <div class="record-content">
-          <h3>{{ record.title }}</h3>
-          <p class="record-description">{{ record.description }}</p>
-          <div class="record-meta">
-            <span class="record-type">{{ record.typeName }}</span>
-            <span class="record-duration">学习时长：{{ record.duration }}分钟</span>
-            <span class="record-date">{{ record.learnDate }}</span>
-          </div>
-        </div>
-        <div class="record-progress">
-          <div class="progress-circle" :class="`progress-${record.status}`">
-            <span>{{ record.progress }}%</span>
+
+        <div class="records-list">
+          <div class="record-item" v-for="record in records" :key="record.id">
+            <div class="record-icon">
+              <i :class="getRecordIcon(record.type)"></i>
+            </div>
+            <div class="record-content">
+              <h3>{{ record.title }}</h3>
+              <p class="record-description">{{ record.description }}</p>
+              <div class="record-meta">
+                <span class="record-type">{{ record.typeName }}</span>
+                <span class="record-duration">学习时长：{{ record.duration }}分钟</span>
+                <span class="record-date">{{ record.learnDate }}</span>
+              </div>
+            </div>
+            <div class="record-progress">
+              <div class="progress-circle" :class="`progress-${record.status}`">
+                <span>{{ record.progress }}%</span>
+              </div>
+            </div>
           </div>
         </div>
       </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[]>([]);
 
@@ -69,7 +66,7 @@ function getRecordIcon(type: string) {
     justify-content: space-between;
     align-items: center;
     margin-bottom: 32px;
-    
+
     h2 {
       font-size: 24px;
       font-weight: 600;
@@ -92,7 +89,7 @@ function getRecordIcon(type: string) {
   border: 1px solid #e0e0e0;
   border-radius: 8px;
   transition: all 0.3s;
-  
+
   &:hover {
     border-color: #C62828;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
@@ -113,7 +110,7 @@ function getRecordIcon(type: string) {
 
 .record-content {
   flex: 1;
-  
+
   h3 {
     font-size: 18px;
     font-weight: 600;
@@ -157,21 +154,20 @@ function getRecordIcon(type: string) {
   justify-content: center;
   font-size: 14px;
   font-weight: 600;
-  
+
   &.progress-completed {
     background: #e8f5e9;
     color: #4caf50;
   }
-  
+
   &.progress-in-progress {
     background: #fff3e0;
     color: #ff9800;
   }
-  
+
   &.progress-not-started {
     background: #f5f5f5;
     color: #999;
   }
 }
 </style>
-
diff --git a/schoolNewsWeb/src/views/user/user-center/MyAchievementsView.vue b/schoolNewsWeb/src/views/user/user-center/MyAchievementsView.vue
index 1d3b617..f3cfb9e 100644
--- a/schoolNewsWeb/src/views/user/user-center/MyAchievementsView.vue
+++ b/schoolNewsWeb/src/views/user/user-center/MyAchievementsView.vue
@@ -1,130 +1,124 @@
 <template>
-  <div class="my-achievements">
-    <div class="achievements-header">
-      <h2>我的成就</h2>
-      <div class="achievement-stats">
-        <div class="stat-item">
-          <span class="stat-label">已获得</span>
-          <span class="stat-value">{{ earnedCount }}</span>
-          <span class="stat-total"> / {{ totalCount }}</span>
+
+      <div class="my-achievements">
+        <div class="achievements-header">
+          <h2>我的成就</h2>
+          <div class="achievement-stats">
+            <div class="stat-item">
+              <span class="stat-label">已获得</span>
+              <span class="stat-value">{{ earnedCount }}</span>
+              <span class="stat-total"> / {{ totalCount }}</span>
+            </div>
+            <div class="stat-item">
+              <span class="stat-label">完成率</span>
+              <span class="stat-value">{{ completionRate }}%</span>
+            </div>
+          </div>
         </div>
-        <div class="stat-item">
-          <span class="stat-label">完成率</span>
-          <span class="stat-value">{{ completionRate }}%</span>
+
+        <!-- 成就类型筛选 -->
+        <div class="filter-tabs">
+          <el-radio-group v-model="selectedType" @change="filterAchievements">
+            <el-radio-button :label="undefined">全部</el-radio-button>
+            <el-radio-button v-for="option in achievementTypeOptions" :key="option.value" :label="option.value">
+              {{ option.label }}
+            </el-radio-button>
+          </el-radio-group>
+
+          <el-checkbox v-model="showOnlyEarned" @change="filterAchievements">
+            仅显示已获得
+          </el-checkbox>
         </div>
-      </div>
-    </div>
 
-    <!-- 成就类型筛选 -->
-    <div class="filter-tabs">
-      <el-radio-group v-model="selectedType" @change="filterAchievements">
-        <el-radio-button :label="undefined">全部</el-radio-button>
-        <el-radio-button 
-          v-for="option in achievementTypeOptions" 
-          :key="option.value" 
-          :label="option.value"
-        >
-          {{ option.label }}
-        </el-radio-button>
-      </el-radio-group>
-      
-      <el-checkbox v-model="showOnlyEarned" @change="filterAchievements">
-        仅显示已获得
-      </el-checkbox>
-    </div>
+        <!-- 加载状态 -->
+        <div v-if="loading" class="loading-container">
+          <el-skeleton :rows="3" animated />
+        </div>
 
-    <!-- 加载状态 -->
-    <div v-if="loading" class="loading-container">
-      <el-skeleton :rows="3" animated />
-    </div>
-
-    <!-- 成就网格 -->
-    <div v-else class="achievements-grid">
-      <div 
-        class="achievement-item" 
-        v-for="achievement in filteredAchievements" 
-        :key="achievement.achievementID"
-        :class="{ earned: achievement.obtained, locked: !achievement.obtained }"
-      >
-        <div class="achievement-icon">
-          <el-image 
-            :src="getIconUrl(achievement.icon)" 
-            :alt="achievement.name"
-            fit="contain"
-          >
-            <template #error>
-              <div class="image-placeholder">
-                <el-icon><Trophy /></el-icon>
+        <!-- 成就网格 -->
+        <div v-else class="achievements-grid">
+          <div class="achievement-item" v-for="achievement in filteredAchievements" :key="achievement.achievementID"
+            :class="{ earned: achievement.obtained, locked: !achievement.obtained }">
+            <div class="achievement-icon">
+              <el-image :src="getIconUrl(achievement.icon)" :alt="achievement.name" fit="contain">
+                <template #error>
+                  <div class="image-placeholder">
+                    <el-icon>
+                      <Trophy />
+                    </el-icon>
+                  </div>
+                </template>
+              </el-image>
+              <div class="achievement-badge" v-if="achievement.obtained">
+                <el-icon>
+                  <Check />
+                </el-icon>
+              </div>
+              <div class="achievement-level" v-if="achievement.level">
+                Lv.{{ achievement.level }}
               </div>
-            </template>
-          </el-image>
-          <div class="achievement-badge" v-if="achievement.obtained">
-            <el-icon><Check /></el-icon>
-          </div>
-          <div class="achievement-level" v-if="achievement.level">
-            Lv.{{ achievement.level }}
-          </div>
-        </div>
-        <div class="achievement-info">
-          <div class="achievement-header">
-            <h3>{{ achievement.name }}</h3>
-            <el-tag 
-              :type="achievement.type === 1 ? 'success' : 'primary'" 
-              size="small"
-            >
-              {{ getAchievementTypeLabel(achievement.type) }}
-            </el-tag>
-          </div>
-          <p class="achievement-description">{{ achievement.description }}</p>
-          
-          <!-- 条件说明 -->
-          <div class="achievement-condition">
-            <el-icon><InfoFilled /></el-icon>
-            <span>{{ formatConditionValue(achievement.conditionType, achievement.conditionValue) }}</span>
-          </div>
-          
-          <!-- 进度条 -->
-          <div class="achievement-progress" v-if="!achievement.obtained">
-            <div class="progress-info">
-              <span class="progress-label">进度</span>
-              <span class="progress-text">
-                {{ achievement.currentValue || 0 }} / {{ achievement.targetValue || achievement.conditionValue }}
-              </span>
             </div>
-            <el-progress 
-              :percentage="achievement.progressPercentage || 0" 
-              :color="progressColor"
-              :show-text="false"
-            />
-          </div>
-          
-          <!-- 获得信息 -->
-          <div class="achievement-footer" v-if="achievement.obtained">
-            <div class="achievement-date">
-              <el-icon><Calendar /></el-icon>
-              <span>{{ formatDate(achievement.obtainTime) }}</span>
-            </div>
-            <div class="achievement-points" v-if="achievement.points">
-              <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>
-            <span>奖励 {{ achievement.points }} 积分</span>
-          </div>
-        </div>
-      </div>
-    </div>
+            <div class="achievement-info">
+              <div class="achievement-header">
+                <h3>{{ achievement.name }}</h3>
+                <el-tag :type="achievement.type === 1 ? 'success' : 'primary'" size="small">
+                  {{ getAchievementTypeLabel(achievement.type) }}
+                </el-tag>
+              </div>
+              <p class="achievement-description">{{ achievement.description }}</p>
+
+              <!-- 条件说明 -->
+              <div class="achievement-condition">
+                <el-icon>
+                  <InfoFilled />
+                </el-icon>
+                <span>{{ formatConditionValue(achievement.conditionType, achievement.conditionValue) }}</span>
+              </div>
+
+              <!-- 进度条 -->
+              <div class="achievement-progress" v-if="!achievement.obtained">
+                <div class="progress-info">
+                  <span class="progress-label">进度</span>
+                  <span class="progress-text">
+                    {{ achievement.currentValue || 0 }} / {{ achievement.targetValue || achievement.conditionValue }}
+                  </span>
+                </div>
+                <el-progress :percentage="achievement.progressPercentage || 0" :color="progressColor"
+                  :show-text="false" />
+              </div>
+
+              <!-- 获得信息 -->
+              <div class="achievement-footer" v-if="achievement.obtained">
+                <div class="achievement-date">
+                  <el-icon>
+                    <Calendar />
+                  </el-icon>
+                  <span>{{ formatDate(achievement.obtainTime) }}</span>
+                </div>
+                <div class="achievement-points" v-if="achievement.points">
+                  <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>
+                <span>奖励 {{ achievement.points }} 积分</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 空状态 -->
+        <el-empty v-if="!loading && filteredAchievements.length === 0" description="暂无成就数据" />
+      </div>
+
 
-    <!-- 空状态 -->
-    <el-empty 
-      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[]>([]);
@@ -171,17 +165,17 @@ const completionRate = computed(() => {
 // 筛选后的成就列表
 const filteredAchievements = computed(() => {
   let result = achievements.value;
-  
+
   // 按类型筛选
   if (selectedType.value !== undefined) {
     result = result.filter(a => a.type === selectedType.value);
   }
-  
+
   // 仅显示已获得
   if (showOnlyEarned.value) {
     result = result.filter(a => a.obtained);
   }
-  
+
   // 排序：已获得的在前，按等级排序
   return result.sort((a, b) => {
     if (a.obtained !== b.obtained) {
@@ -207,10 +201,10 @@ function formatConditionValue(conditionType?: number, conditionValue?: number):
 function formatDate(dateStr?: string): string {
   if (!dateStr) return '';
   const date = new Date(dateStr);
-  return date.toLocaleDateString('zh-CN', { 
-    year: 'numeric', 
-    month: '2-digit', 
-    day: '2-digit' 
+  return date.toLocaleDateString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit'
   });
 }
 
@@ -252,7 +246,7 @@ onMounted(() => {
     justify-content: space-between;
     align-items: center;
     height: 10%;
-    
+
     h2 {
       font-size: 28px;
       font-weight: 600;
@@ -265,23 +259,23 @@ onMounted(() => {
 .achievement-stats {
   display: flex;
   gap: 20px;
-  
+
   .stat-item {
     display: flex;
     align-items: baseline;
     gap: 8px;
-    
+
     .stat-label {
       font-size: 14px;
       color: #666;
     }
-    
+
     .stat-value {
       font-size: 24px;
       font-weight: 600;
       color: #C62828;
     }
-    
+
     .stat-total {
       font-size: 16px;
       color: #999;
@@ -320,33 +314,33 @@ onMounted(() => {
   border-radius: 12px;
   transition: all 0.3s;
   background: white;
-  
+
   &.earned {
     border-color: #52c41a;
     background: linear-gradient(135deg, #f6ffed, #ffffff);
-    
+
     .achievement-icon {
       :deep(.el-image__inner) {
         filter: none;
       }
     }
   }
-  
+
   &.locked {
     opacity: 0.75;
-    
+
     .achievement-icon {
       :deep(.el-image__inner) {
         filter: grayscale(100%);
       }
     }
   }
-  
+
   &:hover.earned {
     box-shadow: 0 4px 16px rgba(82, 196, 26, 0.3);
     transform: translateY(-2px);
   }
-  
+
   &:hover.locked {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   }
@@ -357,12 +351,12 @@ onMounted(() => {
   width: 80px;
   height: 80px;
   flex-shrink: 0;
-  
+
   :deep(.el-image) {
     width: 100%;
     height: 100%;
   }
-  
+
   .image-placeholder {
     width: 100%;
     height: 100%;
@@ -414,13 +408,13 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  
+
   .achievement-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: 12px;
-    
+
     h3 {
       font-size: 18px;
       font-weight: 600;
@@ -447,7 +441,7 @@ onMounted(() => {
   padding: 6px 12px;
   background: #fafafa;
   border-radius: 6px;
-  
+
   :deep(.el-icon) {
     font-size: 14px;
   }
@@ -459,20 +453,20 @@ onMounted(() => {
     justify-content: space-between;
     align-items: center;
     margin-bottom: 8px;
-    
+
     .progress-label {
       font-size: 13px;
       color: #666;
       font-weight: 500;
     }
-    
+
     .progress-text {
       font-size: 13px;
       color: #1890ff;
       font-weight: 600;
     }
   }
-  
+
   :deep(.el-progress) {
     .el-progress-bar__outer {
       background-color: #f0f0f0;
@@ -486,7 +480,7 @@ onMounted(() => {
   align-items: center;
   padding-top: 8px;
   border-top: 1px solid #f0f0f0;
-  
+
   .achievement-date,
   .achievement-points {
     display: flex;
@@ -494,12 +488,12 @@ onMounted(() => {
     gap: 6px;
     font-size: 13px;
     color: #666;
-    
+
     :deep(.el-icon) {
       font-size: 14px;
     }
   }
-  
+
   .achievement-points {
     color: #faad14;
     font-weight: 600;
@@ -516,7 +510,7 @@ onMounted(() => {
   padding: 6px 12px;
   background: #fffbe6;
   border-radius: 6px;
-  
+
   :deep(.el-icon) {
     font-size: 14px;
   }
@@ -533,12 +527,12 @@ onMounted(() => {
   .achievements-grid {
     grid-template-columns: 1fr;
   }
-  
+
   .achievement-stats {
     flex-direction: column;
     gap: 16px;
   }
-  
+
   .filter-tabs {
     flex-direction: column;
     gap: 16px;
@@ -546,4 +540,3 @@ onMounted(() => {
   }
 }
 </style>
-
diff --git a/schoolNewsWeb/src/views/user/user-center/MyFavoritesView.vue b/schoolNewsWeb/src/views/user/user-center/MyFavoritesView.vue
index c483b59..6b6057d 100644
--- a/schoolNewsWeb/src/views/user/user-center/MyFavoritesView.vue
+++ b/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 
-          class="filter-tab" 
-          v-for="filter in filters" 
-          :key="String(filter.key)"
-          :class="{ active: activeFilter === filter.key }"
-          @click="activeFilter = filter.key"
-        >
+        <div class="filter-tab" 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">
@@ -134,7 +136,7 @@ async function loadFavorites() {
   loading.value = true;
   try {
     const result = await userCollectionApi.getUserCollections(currentUser.value.id);
-    
+
     if (result.success && result.dataList) {
       // 后端已返回扁平化的VO，包含详情，无需再次查询
       favorites.value = result.dataList;
@@ -213,7 +215,7 @@ function formatDate(dateStr?: string): string {
     justify-content: space-between;
     align-items: center;
     margin-bottom: 32px;
-    
+
     h2 {
       font-size: 24px;
       font-weight: 600;
@@ -235,12 +237,12 @@ function formatDate(dateStr?: string): string {
   color: #666;
   cursor: pointer;
   transition: all 0.3s;
-  
+
   &:hover {
     background: #ffe6e6;
     color: #C62828;
   }
-  
+
   &.active {
     background: #C62828;
     color: white;
@@ -258,7 +260,7 @@ function formatDate(dateStr?: string): string {
   border-radius: 8px;
   overflow: hidden;
   transition: all 0.3s;
-  
+
   &:hover {
     border-color: #C62828;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
@@ -270,7 +272,7 @@ function formatDate(dateStr?: string): string {
   width: 100%;
   height: 180px;
   background: #f5f5f5;
-  
+
   img {
     width: 100%;
     height: 100%;
@@ -291,7 +293,7 @@ function formatDate(dateStr?: string): string {
 
 .item-info {
   padding: 16px;
-  
+
   h3 {
     font-size: 16px;
     font-weight: 600;
@@ -348,16 +350,15 @@ function formatDate(dateStr?: string): string {
   justify-content: center;
   padding: 80px 20px;
   color: #999;
-  
+
   .empty-icon {
     margin-bottom: 16px;
     color: #ddd;
   }
-  
+
   p {
     font-size: 16px;
     margin: 0;
   }
 }
 </style>
-
diff --git a/schoolNewsWeb/src/views/user/user-center/UserCenterView.vue b/schoolNewsWeb/src/views/user/user-center/UserCenterLayout.vue
similarity index 95%
rename from schoolNewsWeb/src/views/user/user-center/UserCenterView.vue
rename to schoolNewsWeb/src/views/user/user-center/UserCenterLayout.vue
index b78f3ce..9b166af 100644
--- a/schoolNewsWeb/src/views/user/user-center/UserCenterView.vue
+++ b/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,14 +28,15 @@ const route = useRoute();
 const menus = computed(() => {
   // 使用工具函数获取父路由的子路由
   const childRoutes = getParentChildrenRoutes(route);
-  
+  console.log(childRoutes);
+  console.log(route)
   if (childRoutes.length === 0) {
     return [];
   }
-  
+
   // 获取父路由路径（用于拼接相对路径）
   const parentRoute = route.matched[route.matched.length - 2];
-  
+
   // 将子路由转换为菜单格式
   return childRoutes
     .map((child: any) => ({
@@ -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>
-
diff --git a/schoolNewsWeb/src/views/user/user-center/index.ts b/schoolNewsWeb/src/views/user/user-center/index.ts
new file mode 100644
index 0000000..8b50910
--- /dev/null
+++ b/schoolNewsWeb/src/views/user/user-center/index.ts
@@ -0,0 +1 @@
+export { default as UserCenterLayout } from './UserCenterLayout.vue';
\ No newline at end of file
diff --git a/schoolNewsWeb/src/views/user/profile/AccountSettingsView.vue b/schoolNewsWeb/src/views/user/user-center/profile/AccountSettingsView.vue
similarity index 55%
rename from schoolNewsWeb/src/views/user/profile/AccountSettingsView.vue
rename to schoolNewsWeb/src/views/user/user-center/profile/AccountSettingsView.vue
index 9742685..d29ca75 100644
--- a/schoolNewsWeb/src/views/user/profile/AccountSettingsView.vue
+++ b/schoolNewsWeb/src/views/user/user-center/profile/AccountSettingsView.vue
@@ -1,59 +1,62 @@
 <template>
-  <div class="account-settings">
-    <div class="settings-section">
-      <h3>修改密码</h3>
-      <el-form :model="passwordForm" :rules="passwordRules" ref="passwordFormRef" label-width="120px">
-        <el-form-item label="当前密码" prop="oldPassword">
-          <el-input v-model="passwordForm.oldPassword" type="password" show-password />
-        </el-form-item>
-        
-        <el-form-item label="新密码" prop="newPassword">
-          <el-input v-model="passwordForm.newPassword" type="password" show-password />
-        </el-form-item>
-        
-        <el-form-item label="确认密码" prop="confirmPassword">
-          <el-input v-model="passwordForm.confirmPassword" type="password" show-password />
-        </el-form-item>
-        
-        <el-form-item>
-          <el-button type="primary" @click="handleChangePassword">修改密码</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
 
-    <div class="settings-section">
-      <h3>账号安全</h3>
-      <div class="security-items">
-        <div class="security-item">
-          <div class="item-info">
-            <i class="icon">📱</i>
-            <div>
-              <h4>手机绑定</h4>
-              <p>已绑定手机：138****8888</p>
-            </div>
-          </div>
-          <el-button size="small">修改</el-button>
+      <div class="account-settings">
+        <div class="settings-section">
+          <h3>修改密码</h3>
+          <el-form :model="passwordForm" :rules="passwordRules" ref="passwordFormRef" label-width="120px">
+            <el-form-item label="当前密码" prop="oldPassword">
+              <el-input v-model="passwordForm.oldPassword" type="password" show-password />
+            </el-form-item>
+
+            <el-form-item label="新密码" prop="newPassword">
+              <el-input v-model="passwordForm.newPassword" type="password" show-password />
+            </el-form-item>
+
+            <el-form-item label="确认密码" prop="confirmPassword">
+              <el-input v-model="passwordForm.confirmPassword" type="password" show-password />
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" @click="handleChangePassword">修改密码</el-button>
+            </el-form-item>
+          </el-form>
         </div>
-        
-        <div class="security-item">
-          <div class="item-info">
-            <i class="icon">✉️</i>
-            <div>
-              <h4>邮箱绑定</h4>
-              <p>已绑定邮箱：user@example.com</p>
+
+        <div class="settings-section">
+          <h3>账号安全</h3>
+          <div class="security-items">
+            <div class="security-item">
+              <div class="item-info">
+                <i class="icon">📱</i>
+                <div>
+                  <h4>手机绑定</h4>
+                  <p>已绑定手机：138****8888</p>
+                </div>
+              </div>
+              <el-button size="small">修改</el-button>
+            </div>
+
+            <div class="security-item">
+              <div class="item-info">
+                <i class="icon">✉️</i>
+                <div>
+                  <h4>邮箱绑定</h4>
+                  <p>已绑定邮箱：user@example.com</p>
+                </div>
+              </div>
+              <el-button size="small">修改</el-button>
             </div>
           </div>
-          <el-button size="small">修改</el-button>
         </div>
       </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({
@@ -87,7 +90,7 @@ const passwordRules: FormRules = {
 
 async function handleChangePassword() {
   if (!passwordFormRef.value) return;
-  
+
   try {
     await passwordFormRef.value.validate();
     // TODO: 调用修改密码API
@@ -107,11 +110,11 @@ async function handleChangePassword() {
 .settings-section {
   padding: 24px 0;
   border-bottom: 1px solid #e0e0e0;
-  
+
   &:last-child {
     border-bottom: none;
   }
-  
+
   h3 {
     font-size: 20px;
     font-weight: 600;
@@ -139,22 +142,21 @@ async function handleChangePassword() {
   display: flex;
   align-items: center;
   gap: 16px;
-  
+
   .icon {
     font-size: 32px;
   }
-  
+
   h4 {
     font-size: 16px;
     font-weight: 600;
     color: #141F38;
     margin-bottom: 4px;
   }
-  
+
   p {
     font-size: 14px;
     color: #666;
   }
 }
 </style>
-
diff --git a/schoolNewsWeb/src/views/user/user-center/profile/PersonalInfoView.vue b/schoolNewsWeb/src/views/user/user-center/profile/PersonalInfoView.vue
new file mode 100644
index 0000000..f48cc67
--- /dev/null
+++ b/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>