diff --git a/reading-platform-frontend/src/api/auth.ts b/reading-platform-frontend/src/api/auth.ts
index 9f2c983..9fb37c6 100644
--- a/reading-platform-frontend/src/api/auth.ts
+++ b/reading-platform-frontend/src/api/auth.ts
@@ -11,7 +11,7 @@ export interface LoginResponse {
   user: {
     id: number;
     name: string;
-    role: 'admin' | 'school' | 'teacher';
+    role: 'admin' | 'school' | 'teacher' | 'parent';
     tenantId?: number;
     tenantName?: string;
     email?: string;
@@ -22,7 +22,7 @@ export interface LoginResponse {
 export interface UserProfile {
   id: number;
   name: string;
-  role: 'admin' | 'school' | 'teacher';
+  role: 'admin' | 'school' | 'teacher' | 'parent';
   tenantId?: number;
   tenantName?: string;
   email?: string;
diff --git a/reading-platform-frontend/src/api/notification.ts b/reading-platform-frontend/src/api/notification.ts
new file mode 100644
index 0000000..f1d0f7c
--- /dev/null
+++ b/reading-platform-frontend/src/api/notification.ts
@@ -0,0 +1,52 @@
+import { http } from './index';
+
+export interface NotificationItem {
+  id: number;
+  title: string;
+  content: string;
+  notificationType: string;
+  isRead: boolean;
+  readAt?: string;
+  createdAt: string;
+}
+
+export interface NotificationsResponse {
+  items: NotificationItem[];
+  total: number;
+  unreadCount: number;
+  page: number;
+  pageSize: number;
+}
+
+export interface NotificationQueryParams {
+  page?: number;
+  pageSize?: number;
+  isRead?: boolean;
+  notificationType?: string;
+}
+
+/** 根据角色获取通知列表（teacher | school | parent） */
+export function getNotifications(
+  role: 'teacher' | 'school' | 'parent',
+  params?: NotificationQueryParams
+): Promise<NotificationsResponse> {
+  return http.get(`/${role}/notifications`, { params });
+}
+
+/** 根据角色获取未读数量 */
+export function getUnreadCount(role: 'teacher' | 'school' | 'parent'): Promise<number> {
+  return http.get(`/${role}/notifications/unread-count`);
+}
+
+/** 标记单条已读 */
+export function markNotificationAsRead(
+  role: 'teacher' | 'school' | 'parent',
+  id: number
+): Promise<any> {
+  return http.put(`/${role}/notifications/${id}/read`);
+}
+
+/** 全部标记已读 */
+export function markAllNotificationsAsRead(role: 'teacher' | 'school' | 'parent'): Promise<any> {
+  return http.put(`/${role}/notifications/read-all`);
+}
diff --git a/reading-platform-frontend/src/components/NotificationBell.vue b/reading-platform-frontend/src/components/NotificationBell.vue
index 36ec186..d178464 100644
--- a/reading-platform-frontend/src/components/NotificationBell.vue
+++ b/reading-platform-frontend/src/components/NotificationBell.vue
@@ -65,7 +65,12 @@ import {
   SoundOutlined,
 } from '@ant-design/icons-vue';
 import { useUserStore } from '@/stores/user';
-import { getNotifications, markNotificationAsRead, markAllNotificationsAsRead } from '@/api/parent';
+import {
+  getNotifications,
+  getUnreadCount,
+  markNotificationAsRead,
+  markAllNotificationsAsRead,
+} from '@/api/notification';
 import type { Component } from 'vue';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
@@ -108,17 +113,16 @@ const handleBellClick = () => {
 };
 
 const loadNotifications = async () => {
+  const role = userStore.user?.role as 'teacher' | 'school' | 'parent' | undefined;
+  if (role !== 'teacher' && role !== 'school' && role !== 'parent') {
+    return;
+  }
   loading.value = true;
   try {
-    const role = userStore.user?.role;
-    // 根据角色调用不同的API
-    if (role === 'parent') {
-      const data = await getNotifications({ pageSize: 5 });
-      notifications.value = data.items;
-      total.value = data.total;
-      unreadCount.value = data.unreadCount;
-    }
-    // 其他角色的通知可以在这里扩展
+    const data = await getNotifications(role, { pageSize: 5 });
+    notifications.value = data.items;
+    total.value = data.total;
+    unreadCount.value = data.unreadCount;
   } catch (error: any) {
     console.error('Failed to load notifications:', error);
   } finally {
@@ -127,12 +131,10 @@ const loadNotifications = async () => {
 };
 
 const handleNotificationClick = async (notification: any) => {
-  if (!notification.isRead) {
+  const role = userStore.user?.role as 'teacher' | 'school' | 'parent' | undefined;
+  if (!notification.isRead && (role === 'teacher' || role === 'school' || role === 'parent')) {
     try {
-      const role = userStore.user?.role;
-      if (role === 'parent') {
-        await markNotificationAsRead(notification.id);
-      }
+      await markNotificationAsRead(role, notification.id);
       notification.isRead = true;
       unreadCount.value = Math.max(0, unreadCount.value - 1);
     } catch (error) {
@@ -143,11 +145,10 @@ const handleNotificationClick = async (notification: any) => {
 };
 
 const markAllRead = async () => {
+  const role = userStore.user?.role as 'teacher' | 'school' | 'parent' | undefined;
+  if (role !== 'teacher' && role !== 'school' && role !== 'parent') return;
   try {
-    const role = userStore.user?.role;
-    if (role === 'parent') {
-      await markAllNotificationsAsRead();
-    }
+    await markAllNotificationsAsRead(role);
     notifications.value.forEach((n) => (n.isRead = true));
     unreadCount.value = 0;
     message.success('已全部标记为已读');
@@ -162,7 +163,10 @@ const viewAll = () => {
 };
 
 onMounted(() => {
-  // 可以定期检查未读数量
+  const role = userStore.user?.role as 'teacher' | 'school' | 'parent' | undefined;
+  if (role === 'teacher' || role === 'school' || role === 'parent') {
+    getUnreadCount(role).then((n) => (unreadCount.value = n)).catch(() => {});
+  }
 });
 </script>
 
diff --git a/reading-platform-frontend/src/router/index.ts b/reading-platform-frontend/src/router/index.ts
index a5abb4d..2d9c9b2 100644
--- a/reading-platform-frontend/src/router/index.ts
+++ b/reading-platform-frontend/src/router/index.ts
@@ -112,6 +112,12 @@ const routes: RouteRecordRaw[] = [
         component: () => import('@/views/admin/SettingsView.vue'),
         meta: { title: '系统设置' },
       },
+      {
+        path: 'profile',
+        name: 'AdminProfile',
+        component: () => import('@/views/profile/ProfileView.vue'),
+        meta: { title: '个人信息' },
+      },
     ],
   },
   {
@@ -256,6 +262,12 @@ const routes: RouteRecordRaw[] = [
         component: () => import('@/views/school/settings/SettingsView.vue'),
         meta: { title: '系统设置' },
       },
+      {
+        path: 'profile',
+        name: 'SchoolProfile',
+        component: () => import('@/views/profile/ProfileView.vue'),
+        meta: { title: '个人信息' },
+      },
     ],
   },
   {
@@ -376,6 +388,12 @@ const routes: RouteRecordRaw[] = [
         component: () => import('@/views/teacher/growth/GrowthRecordView.vue'),
         meta: { title: '成长档案' },
       },
+      {
+        path: 'profile',
+        name: 'TeacherProfile',
+        component: () => import('@/views/profile/ProfileView.vue'),
+        meta: { title: '个人信息' },
+      },
     ],
   },
   {
@@ -423,6 +441,12 @@ const routes: RouteRecordRaw[] = [
         component: () => import('@/views/parent/growth/GrowthRecordView.vue'),
         meta: { title: '成长档案' },
       },
+      {
+        path: 'profile',
+        name: 'ParentProfile',
+        component: () => import('@/views/profile/ProfileView.vue'),
+        meta: { title: '个人信息' },
+      },
     ],
   },
   {
diff --git a/reading-platform-frontend/src/views/admin/LayoutView.vue b/reading-platform-frontend/src/views/admin/LayoutView.vue
index c801f79..cf63f7f 100644
--- a/reading-platform-frontend/src/views/admin/LayoutView.vue
+++ b/reading-platform-frontend/src/views/admin/LayoutView.vue
@@ -149,9 +149,7 @@
 
         <div class="header-right">
           <a-space>
-            <a-badge count="5">
-              <BellOutlined style="font-size: 18px; cursor: pointer; color: #666;" />
-            </a-badge>
+            <NotificationBell />
 
             <a-dropdown>
               <a-space class="user-info" style="cursor: pointer;">
@@ -227,6 +225,7 @@ import {
   Settings,
 } from 'lucide-vue-next';
 import { DatabaseOutlined, FormatPainterOutlined } from '@ant-design/icons-vue';
+import NotificationBell from '@/components/NotificationBell.vue';
 import { useUserStore } from '@/stores/user';
 import { useBreakpoints } from '@/composables/useBreakpoints';
 
@@ -293,7 +292,7 @@ const handleUserMenuClick = ({ key }: { key: string | number }) => {
   if (keyStr === 'logout') {
     userStore.logout();
   } else if (keyStr === 'profile') {
-    // 跳转到个人信息页面
+    router.push('/admin/profile');
   }
 };
 </script>
diff --git a/reading-platform-frontend/src/views/parent/LayoutView.vue b/reading-platform-frontend/src/views/parent/LayoutView.vue
index 22190c1..1b8defc 100644
--- a/reading-platform-frontend/src/views/parent/LayoutView.vue
+++ b/reading-platform-frontend/src/views/parent/LayoutView.vue
@@ -122,9 +122,7 @@
 
         <div class="header-right">
           <a-space>
-            <a-badge :count="notifications">
-              <BellOutlined style="font-size: 18px; cursor: pointer; color: #666;" />
-            </a-badge>
+            <NotificationBell />
 
             <a-dropdown>
               <a-space class="user-info" style="cursor: pointer;">
@@ -136,6 +134,11 @@
               </a-space>
               <template #overlay>
                 <a-menu @click="handleUserMenuClick">
+                  <a-menu-item key="profile">
+                    <UserOutlined />
+                    个人信息
+                  </a-menu-item>
+                  <a-menu-divider />
                   <a-menu-item key="logout">
                     <LogoutOutlined />
                     退出登录
@@ -152,9 +155,7 @@
         <div class="mobile-header-content">
           <MenuOutlined class="menu-icon" @click="drawerVisible = true" />
           <span class="page-title">{{ pageTitle }}</span>
-          <a-badge :count="notifications" class="notification-badge">
-            <BellOutlined style="font-size: 20px; color: #333;" />
-          </a-badge>
+          <NotificationBell icon-color="#333" />
         </div>
       </a-layout-header>
 
@@ -191,11 +192,11 @@ import {
   CheckSquareOutlined,
   MenuUnfoldOutlined,
   MenuFoldOutlined,
-  BellOutlined,
   LogoutOutlined,
   DownOutlined,
   MenuOutlined,
 } from '@ant-design/icons-vue';
+import NotificationBell from '@/components/NotificationBell.vue';
 import { useUserStore } from '@/stores/user';
 import { useBreakpoints } from '@/composables/useBreakpoints';
 
@@ -206,7 +207,6 @@ const { isMobile } = useBreakpoints();
 
 const collapsed = ref(false);
 const selectedKeys = ref(['dashboard']);
-const notifications = ref(0);
 const drawerVisible = ref(false);
 
 const userName = computed(() => userStore.user?.name || '家长');
@@ -275,6 +275,8 @@ const handleUserMenuClick = ({ key }: { key: string | number }) => {
   const keyStr = String(key);
   if (keyStr === 'logout') {
     handleLogout();
+  } else if (keyStr === 'profile') {
+    router.push('/parent/profile');
   }
 };
 
diff --git a/reading-platform-frontend/src/views/profile/ProfileView.vue b/reading-platform-frontend/src/views/profile/ProfileView.vue
new file mode 100644
index 0000000..13881c3
--- /dev/null
+++ b/reading-platform-frontend/src/views/profile/ProfileView.vue
@@ -0,0 +1,160 @@
+<template>
+  <div class="profile-view">
+    <div class="profile-card">
+      <div class="card-header">
+        <h2 class="card-title">个人信息</h2>
+        <a-button type="primary" ghost size="small" :loading="loading" @click="refresh">
+          刷新
+        </a-button>
+      </div>
+      <a-spin :spinning="loading">
+        <div v-if="user" class="profile-body">
+          <div class="avatar-section">
+            <a-avatar :size="80" class="profile-avatar">
+              <template #icon><UserOutlined /></template>
+            </a-avatar>
+            <div class="name-role">
+              <span class="display-name">{{ user.name }}</span>
+              <a-tag :color="roleTagColor">{{ roleLabel }}</a-tag>
+            </div>
+          </div>
+          <a-descriptions bordered size="small" :column="1" class="profile-desc">
+            <a-descriptions-item label="姓名">{{ user.name }}</a-descriptions-item>
+            <a-descriptions-item label="角色">{{ roleLabel }}</a-descriptions-item>
+            <a-descriptions-item v-if="user.tenantName" label="所属机构">
+              {{ user.tenantName }}
+            </a-descriptions-item>
+            <a-descriptions-item v-if="user.email" label="邮箱">
+              {{ user.email || '—' }}
+            </a-descriptions-item>
+            <a-descriptions-item v-if="user.phone" label="手机号">
+              {{ user.phone || '—' }}
+            </a-descriptions-item>
+          </a-descriptions>
+        </div>
+        <div v-else class="empty-tip">
+          <UserOutlined />
+          <p>暂无个人信息，请刷新重试</p>
+        </div>
+      </a-spin>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { UserOutlined } from '@ant-design/icons-vue';
+import { useUserStore } from '@/stores/user';
+
+const userStore = useUserStore();
+const loading = ref(false);
+
+const user = computed(() => userStore.user);
+
+const roleLabel = computed(() => {
+  const map: Record<string, string> = {
+    admin: '超级管理员',
+    school: '园校管理员',
+    teacher: '教师',
+    parent: '家长',
+  };
+  return user.value?.role ? map[user.value.role] || user.value.role : '—';
+});
+
+const roleTagColor = computed(() => {
+  const map: Record<string, string> = {
+    admin: 'red',
+    school: 'blue',
+    teacher: 'green',
+    parent: 'orange',
+  };
+  return user.value?.role ? map[user.value.role] || 'default' : 'default';
+});
+
+async function refresh() {
+  loading.value = true;
+  try {
+    await userStore.fetchUserInfo();
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(() => {
+  if (!user.value) refresh();
+});
+</script>
+
+<style scoped>
+.profile-view {
+  padding: 0;
+}
+
+.profile-card {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  overflow: hidden;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.card-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+.profile-body {
+  padding: 24px;
+}
+
+.avatar-section {
+  display: flex;
+  align-items: center;
+  margin-bottom: 24px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.profile-avatar {
+  background: linear-gradient(135deg, #e67635 0%, #c45a1e 100%);
+  margin-right: 20px;
+}
+
+.name-role {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.display-name {
+  font-size: 20px;
+  font-weight: 600;
+  color: #333;
+}
+
+.profile-desc :deep(.ant-descriptions-item-label) {
+  width: 100px;
+  color: #666;
+}
+
+.empty-tip {
+  padding: 48px 24px;
+  text-align: center;
+  color: #999;
+}
+
+.empty-tip .anticon {
+  font-size: 48px;
+  margin-bottom: 12px;
+  display: block;
+}
+</style>
diff --git a/reading-platform-frontend/src/views/school/LayoutView.vue b/reading-platform-frontend/src/views/school/LayoutView.vue
index 720be89..eee2dec 100644
--- a/reading-platform-frontend/src/views/school/LayoutView.vue
+++ b/reading-platform-frontend/src/views/school/LayoutView.vue
@@ -186,9 +186,7 @@
 
         <div class="header-right">
           <a-space>
-            <a-badge :count="notifications">
-              <BellOutlined style="font-size: 18px; cursor: pointer; color: #666;" />
-            </a-badge>
+            <NotificationBell />
 
             <a-dropdown>
               <a-space class="user-info" style="cursor: pointer;">
@@ -274,6 +272,7 @@ import {
   IdcardOutlined,
   FolderAddOutlined,
 } from '@ant-design/icons-vue';
+import NotificationBell from '@/components/NotificationBell.vue';
 import { useUserStore } from '@/stores/user';
 import { useBreakpoints } from '@/composables/useBreakpoints';
 
@@ -285,7 +284,6 @@ const { isMobile } = useBreakpoints();
 const collapsed = ref(false);
 const selectedKeys = ref(['dashboard']);
 const openKeys = ref<string[]>(['staff', 'teaching', 'data', 'system']);
-const notifications = ref(0);
 const drawerVisible = ref(false);
 
 const userName = computed(() => userStore.user?.name || '管理员');
@@ -362,7 +360,7 @@ const handleUserMenuClick = ({ key }: { key: string | number }) => {
     message.success('退出成功');
     router.push('/login');
   } else if (keyStr === 'profile') {
-    // 跳转到个人信息页面
+    router.push('/school/profile');
   }
 };
 </script>
diff --git a/reading-platform-frontend/src/views/teacher/LayoutView.vue b/reading-platform-frontend/src/views/teacher/LayoutView.vue
index 24acf91..47627e6 100644
--- a/reading-platform-frontend/src/views/teacher/LayoutView.vue
+++ b/reading-platform-frontend/src/views/teacher/LayoutView.vue
@@ -116,9 +116,7 @@
 
         <div class="header-right">
           <a-space>
-            <a-badge :count="notifications">
-              <BellOutlined style="font-size: 18px; cursor: pointer; color: #666;" />
-            </a-badge>
+            <NotificationBell />
 
             <a-dropdown>
               <a-space class="user-info" style="cursor: pointer;">
@@ -194,6 +192,7 @@ import {
   CameraOutlined,
   FolderAddOutlined,
 } from '@ant-design/icons-vue';
+import NotificationBell from '@/components/NotificationBell.vue';
 import { useUserStore } from '@/stores/user';
 import { useBreakpoints } from '@/composables/useBreakpoints';
 
@@ -204,7 +203,6 @@ const { isMobile } = useBreakpoints();
 
 const collapsed = ref(false);
 const selectedKeys = ref(['dashboard']);
-const notifications = ref(0);
 const drawerVisible = ref(false);
 
 const userName = computed(() => userStore.user?.name || '教师');
@@ -259,7 +257,7 @@ const handleUserMenuClick = ({ key }: { key: string | number }) => {
     message.success('退出成功');
     router.push('/login');
   } else if (keyStr === 'profile') {
-    // 跳转到个人信息页面
+    router.push('/teacher/profile');
   }
 };
 </script>