diff --git a/web-react/MIGRATION_MATRIX.md b/web-react/MIGRATION_MATRIX.md
index f003164..0511a11 100644
--- a/web-react/MIGRATION_MATRIX.md
+++ b/web-react/MIGRATION_MATRIX.md
@@ -8,6 +8,7 @@
 | `/dashboard` | 角色化首页 | 已登录用户 | 管理总览；学生课表/消息/考试/预警；教师教学班/成绩登记进度 | verification |
 | `/account` | 个人账户 | 已登录用户 | TOTP、恢复码、SSO 绑定；Passkey 浏览器仪式尚未开放 | verification |
 | `/users` | 用户与权限 | SuperAdmin | 列表、筛选、分页、创建、启停、重置密码、角色范围、Excel | verification |
-| `/notifications` | 通知中心 | 已登录用户 | 收件箱筛选、游标分页、已读回执；已发送；定向群发暂回旧系统 | building |
+| `/notifications` | 通知中心 | 已登录用户 | 收件箱筛选、游标分页、已读回执、权限范围/筛选/指定收件人群发、已发送 | verification |
+| `/my-timetable` | 我的课表 | Student、Teacher | 当前学期周视图、考试/实验融合、Excel/PDF/ICS、订阅启停与密钥轮换 | verification |
 
 后续从 `web/src/router/index.ts` 逐条补全。只有关键合同和各状态验收完整后，状态才能更新为 `complete`。
diff --git a/web-react/README.md b/web-react/README.md
index 450f714..e5cb3f1 100644
--- a/web-react/README.md
+++ b/web-react/README.md
@@ -29,6 +29,8 @@ npm.cmd run build
 - 读取真实 `/api/dashboard` 数据的首个页面；
 - 完整迁移 `/account` 的身份信息、TOTP 和统一身份绑定流程；
 - 完整迁移 `/users` 的分页筛选、Excel、账号、角色、状态和密码管理流程。
+- 迁移 `/notifications` 的收件箱、已读回执、权限范围/筛选/指定收件人群发和已发送记录；
+- 迁移 `/my-timetable` 的周视图、考试与实验融合、Excel/PDF/ICS 导出和日历订阅管理。
 
 ## 迁移纪律
 
@@ -43,7 +45,7 @@ npm.cmd run build
 | 批次 | 内容 | 状态 |
 | --- | --- | --- |
 | 0 | 工程、主题、会话、登录、应用外壳 | 进行中 |
-| 1 | Dashboard、Users、Account、移动端代表页 | 前三项进入联调验收 |
+| 1 | Dashboard、Users、Account、Notifications、个人课表、移动端代表页 | 已实现，进入联调验收 |
 | 2 | 标准 CRUD 与基础数据模块 | 未开始 |
 | 3 | 学生、教师与审批工作台 | 未开始 |
 | 4 | 选课、排课、成绩、实验等复杂模块 | 未开始 |
diff --git a/web-react/src/app/App.tsx b/web-react/src/app/App.tsx
index 7c98567..bfe1fc7 100644
--- a/web-react/src/app/App.tsx
+++ b/web-react/src/app/App.tsx
@@ -10,6 +10,7 @@ const DashboardPage = lazy(() => import('../pages/DashboardPage'))
 const AccountPage = lazy(() => import('../pages/AccountPage'))
 const UsersPage = lazy(() => import('../pages/UsersPage'))
 const NotificationsPage = lazy(() => import('../pages/NotificationsPage'))
+const MyTimetablePage = lazy(() => import('../pages/MyTimetablePage'))
 const SsoCallbackPage = lazy(() => import('../pages/SsoCallbackPage'))
 const SsoBindPage = lazy(() => import('../pages/SsoBindPage'))
 const AppShell = lazy(() => import('../layout/AppShell'))
@@ -54,6 +55,7 @@ function AppRoutes() {
           <Route path="/account" element={<AccountPage />} />
           <Route path="/users" element={<UsersPage />} />
           <Route path="/notifications" element={<NotificationsPage />} />
+          <Route path="/my-timetable" element={<MyTimetablePage />} />
           <Route path="/" element={<Navigate to="/dashboard" replace />} />
         </Route>
         <Route path="*" element={<Navigate to="/dashboard" replace />} />
diff --git a/web-react/src/layout/AppShell.tsx b/web-react/src/layout/AppShell.tsx
index 7f1d4d6..a9cb165 100644
--- a/web-react/src/layout/AppShell.tsx
+++ b/web-react/src/layout/AppShell.tsx
@@ -7,6 +7,7 @@ import {
   MenuFoldOutlined,
   MenuUnfoldOutlined,
   SafetyCertificateOutlined,
+  CalendarOutlined,
 } from '@ant-design/icons'
 import { Avatar, Badge, Button, Layout, Menu, Tag } from 'antd'
 import { useQuery } from '@tanstack/react-query'
@@ -40,6 +41,9 @@ export default function AppShell() {
     { key: '/dashboard', icon: <AppstoreOutlined />, label: isStudentHome ? '学习首页' : isTeacherHome ? '教学工作台' : '教务总览' },
     { key: '/account', icon: <IdcardOutlined />, label: '个人账户' },
     { key: '/notifications', icon: <BellOutlined />, label: '通知中心' },
+    ...((roles.includes('Student') || roles.includes('Teacher'))
+      ? [{ key: '/my-timetable', icon: <CalendarOutlined />, label: '我的课表' }]
+      : []),
     ...(user?.roles.includes('SuperAdmin')
       ? [{ key: '/users', icon: <SafetyCertificateOutlined />, label: '用户与权限' }]
       : []),
diff --git a/web-react/src/pages/MyTimetablePage.tsx b/web-react/src/pages/MyTimetablePage.tsx
new file mode 100644
index 0000000..3851b27
--- /dev/null
+++ b/web-react/src/pages/MyTimetablePage.tsx
@@ -0,0 +1,69 @@
+import { useEffect, useMemo, useState } from 'react'
+import { CalendarOutlined, CopyOutlined, DownloadOutlined, LeftOutlined, ReloadOutlined, RightOutlined, SyncOutlined } from '@ant-design/icons'
+import { Alert, App, Button, Empty, Modal, Select, Skeleton, Tag } from 'antd'
+import { useMutation, useQuery } from '@tanstack/react-query'
+import http, { apiErrorMessage } from '../api/http'
+import { downloadApiFile } from '../api/files'
+import PageHeader from '../components/PageHeader'
+import './my-timetable.css'
+
+interface Term { id: string; name: string; startDate: string; endDate: string; isCurrent: boolean }
+interface Slot { periodNumber: number; name: string; startsAt: string; endsAt: string }
+interface Entry { id: string; courseCode: string; courseName: string; teacherNames: string[]; classNames: string[]; classroomName: string; buildingName?: string; campusName?: string; dayOfWeek: number; startPeriod: number; periodCount: number; startWeek: number; endWeek: number; weekPattern: 'All' | 'Odd' | 'Even'; isExam?: boolean; examDate?: string; isExperiment?: boolean; experimentDate?: string; experimentProjectName?: string }
+interface FlexibleCourse { id: string; courseCode: string; courseName: string; credits: number; totalHours: number; weeklyHours: number; startWeek: number; endWeek: number; teacherNames: string[] }
+interface Timetable { term: Term; subject: { name: string }; student?: { studentNumber: string; name: string }; slots: Slot[]; entries: Entry[]; examEntries: Entry[]; experimentEntries: Entry[]; flexibleCourses: FlexibleCourse[] }
+interface Subscription { enabled: boolean; feedUrl?: string; feedPath?: string; webcalUrl?: string; createdAt?: string }
+
+const weekdays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+function dateOnly(value?: string) { if (!value) return null; const date = new Date(`${value.slice(0, 10)}T00:00:00`); return Number.isNaN(date.getTime()) ? null : date }
+function addDays(value: Date, days: number) { const result = new Date(value); result.setDate(result.getDate() + days); return result }
+function md(value: Date) { return `${value.getMonth() + 1}月${value.getDate()}日` }
+function occurs(entry: Entry, week: number) { return week >= entry.startWeek && week <= entry.endWeek && (entry.weekPattern === 'All' || (entry.weekPattern === 'Odd' && week % 2 === 1) || (entry.weekPattern === 'Even' && week % 2 === 0)) }
+
+export default function MyTimetablePage() {
+  const { message, modal } = App.useApp()
+  const [week, setWeek] = useState(1)
+  const [calendarOpen, setCalendarOpen] = useState(false)
+  const timetable = useQuery({ queryKey: ['my-timetable'], queryFn: async () => (await http.get<Timetable>('/timetables/mine')).data })
+  const data = timetable.data
+  const firstMonday = useMemo(() => { const start = dateOnly(data?.term.startDate); if (!start) return null; return addDays(start, -(start.getDay() === 0 ? 6 : start.getDay() - 1)) }, [data?.term.startDate])
+  const totalWeeks = useMemo(() => { const end = dateOnly(data?.term.endDate); return firstMonday && end ? Math.max(1, Math.ceil((end.getTime() - firstMonday.getTime() + 86400000) / 604800000)) : 1 }, [data?.term.endDate, firstMonday])
+  const currentWeek = useMemo(() => { if (!firstMonday) return null; const today = new Date(); today.setHours(0, 0, 0, 0); const value = Math.floor((today.getTime() - firstMonday.getTime()) / 604800000) + 1; return value >= 1 && value <= totalWeeks ? value : null }, [firstMonday, totalWeeks])
+  useEffect(() => { if (currentWeek) setWeek(currentWeek) }, [currentWeek])
+
+  const allEntries = useMemo(() => {
+    if (!data || !firstMonday) return []
+    const dated = [...(data.examEntries ?? []), ...(data.experimentEntries ?? [])].map((entry) => {
+      const date = dateOnly(entry.examDate ?? entry.experimentDate)
+      const entryWeek = date ? Math.floor((date.getTime() - firstMonday.getTime()) / 604800000) + 1 : 0
+      return { ...entry, startWeek: entryWeek, endWeek: entryWeek, weekPattern: 'All' as const }
+    })
+    return [...data.entries, ...dated].filter((entry) => occurs(entry, week)).sort((a, b) => a.dayOfWeek - b.dayOfWeek || a.startPeriod - b.startPeriod)
+  }, [data, firstMonday, week])
+  const byDay = weekdays.map((_, index) => allEntries.filter((entry) => entry.dayOfWeek === index + 1))
+  const slotMap = useMemo(() => new Map(data?.slots.map((slot) => [slot.periodNumber, slot]) ?? []), [data?.slots])
+  const weekLabel = firstMonday ? `第 ${week} 周 · ${md(addDays(firstMonday, (week - 1) * 7))}—${md(addDays(firstMonday, week * 7 - 1))}` : `第 ${week} 周`
+
+  const subscription = useQuery({ queryKey: ['calendar-subscription'], queryFn: async () => (await http.get<Subscription>('/timetables/mine/calendar-subscription')).data, enabled: calendarOpen })
+  const updateSubscription = useMutation({
+    mutationFn: async (action: 'enable' | 'rotate' | 'disable') => action === 'disable' ? http.delete('/timetables/mine/calendar-subscription') : http.post<Subscription>(action === 'rotate' ? '/timetables/mine/calendar-subscription/rotate' : '/timetables/mine/calendar-subscription'),
+    onSuccess: () => { message.success('日历订阅已更新'); void subscription.refetch() },
+    onError: (error) => message.error(apiErrorMessage(error)),
+  })
+  async function exportFile(kind: 'xlsx' | 'pdf' | 'ics') { try { await downloadApiFile(kind === 'ics' ? '/timetables/mine/calendar.ics' : `/timetables/mine/export.${kind}`, kind === 'xlsx' ? '我的课表.xlsx' : kind === 'pdf' ? '我的课表.pdf' : '个人教学日历.ics') } catch (error) { message.error(apiErrorMessage(error)) } }
+  async function copyFeed() { if (!subscription.data?.feedUrl) return; await navigator.clipboard.writeText(subscription.data.feedUrl); message.success('订阅地址已复制') }
+
+  if (timetable.isLoading) return <main className="page-container"><Skeleton active paragraph={{ rows: 14 }} /></main>
+  if (timetable.isError || !data) return <main className="page-container"><Alert type="error" showIcon message="我的课表暂时无法加载" description={apiErrorMessage(timetable.error)} action={<Button icon={<ReloadOutlined />} onClick={() => void timetable.refetch()}>重新加载</Button>} /></main>
+
+  return <main className="page-container timetable-page">
+    <PageHeader kicker="个人教学日历" title="我的课表" description={`${data.term.name} · ${data.student ? `${data.student.name}（${data.student.studentNumber}）` : data.subject.name}`} aside={<div className="term-ledger"><span>TERM RANGE</span><strong>{md(dateOnly(data.term.startDate)!)}—{md(dateOnly(data.term.endDate)!)}</strong><small>{totalWeeks} 个教学周</small></div>} />
+    <section className="timetable-toolbar"><Button icon={<LeftOutlined />} disabled={week <= 1} onClick={() => setWeek((value) => value - 1)}>上一周</Button><Select value={week} onChange={setWeek} options={Array.from({ length: totalWeeks }, (_, index) => ({ value: index + 1, label: `第 ${index + 1} 周${index + 1 === currentWeek ? ' · 本周' : ''}` }))} /><Button icon={<RightOutlined />} disabled={week >= totalWeeks} onClick={() => setWeek((value) => value + 1)}>下一周</Button>{currentWeek && week !== currentWeek && <Button onClick={() => setWeek(currentWeek)}>回到本周</Button>}<div className="timetable-actions"><Button icon={<DownloadOutlined />} onClick={() => void exportFile('xlsx')}>Excel</Button><Button icon={<DownloadOutlined />} onClick={() => void exportFile('pdf')}>PDF</Button><Button icon={<CalendarOutlined />} onClick={() => setCalendarOpen(true)}>日历订阅</Button></div></section>
+    <section className="week-heading"><div><span>WEEK VIEW</span><h2>{weekLabel}</h2></div><strong>{allEntries.length}</strong><small>项课程、考试与实验安排</small></section>
+    <section className="week-board">{weekdays.map((label, index) => { const date = firstMonday ? addDays(firstMonday, (week - 1) * 7 + index) : null; return <article key={label} className={date?.toDateString() === new Date().toDateString() ? 'is-today' : ''}><header><span>{label}</span><small>{date ? md(date) : ''}</small></header><div>{byDay[index].map((entry) => { const endPeriod = entry.startPeriod + entry.periodCount - 1; const start = slotMap.get(entry.startPeriod)?.startsAt.slice(0, 5); const end = slotMap.get(endPeriod)?.endsAt.slice(0, 5); return <section key={`${entry.isExam ? 'exam' : entry.isExperiment ? 'experiment' : 'course'}-${entry.id}`} className={entry.isExam ? 'is-exam' : entry.isExperiment ? 'is-experiment' : ''}><div><Tag>{entry.isExam ? '考试' : entry.isExperiment ? '实验' : `${entry.startPeriod}—${endPeriod} 节`}</Tag><time>{start && end ? `${start}—${end}` : `第 ${entry.startPeriod}—${endPeriod} 节`}</time></div><strong>{entry.isExperiment ? entry.experimentProjectName || entry.courseName : entry.courseName}</strong><span>{entry.courseCode}</span><p>{[entry.buildingName, entry.classroomName].filter(Boolean).join(' · ') || '地点待定'}</p><small>{entry.teacherNames?.join('、') || entry.classNames?.join('、')}</small></section>})}{!byDay[index].length && <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="无安排" />}</div></article> })}</section>
+    {!!data.flexibleCourses?.length && <section className="flexible-courses"><header><span>FLEXIBLE</span><h2>非固定时间课程</h2></header><div>{data.flexibleCourses.map((course) => <article key={course.id}><span>{course.courseCode}</span><strong>{course.courseName}</strong><p>{course.startWeek}—{course.endWeek} 周 · 每周 {course.weeklyHours} 学时 · 共 {course.totalHours} 学时</p><small>{course.teacherNames.join('、')} · {course.credits} 学分</small></article>)}</div></section>}
+    <Modal open={calendarOpen} title="个人日历订阅" width={620} footer={null} onCancel={() => setCalendarOpen(false)}>
+      {subscription.isLoading ? <Skeleton active /> : subscription.isError ? <Alert type="error" message="订阅状态无法加载" description={apiErrorMessage(subscription.error)} /> : subscription.data?.enabled ? <div className="calendar-subscription-panel"><Alert type="success" showIcon message="日历订阅已启用" description="复制地址到系统日历、Outlook 或其他支持 iCalendar 的应用。" /><div className="feed-address"><code>{subscription.data.feedUrl}</code><Button icon={<CopyOutlined />} onClick={() => void copyFeed()}>复制</Button></div><div className="calendar-actions"><Button icon={<DownloadOutlined />} onClick={() => void exportFile('ics')}>下载当前日历</Button><Button icon={<SyncOutlined />} loading={updateSubscription.isPending} onClick={() => modal.confirm({ title: '轮换订阅地址？', content: '旧地址会立即失效，已订阅设备需要更新。', onOk: () => updateSubscription.mutateAsync('rotate') })}>轮换地址</Button><Button danger loading={updateSubscription.isPending} onClick={() => modal.confirm({ title: '停用日历订阅？', content: '所有使用当前地址的设备将停止更新。', okButtonProps: { danger: true }, onOk: () => updateSubscription.mutateAsync('disable') })}>停用订阅</Button></div></div> : <div className="calendar-subscription-panel"><Alert type="info" showIcon message="尚未启用日历订阅" description="启用后会生成仅属于你的私密订阅地址，请勿公开分享。" /><Button type="primary" icon={<CalendarOutlined />} loading={updateSubscription.isPending} onClick={() => updateSubscription.mutate('enable')}>启用订阅</Button><Button icon={<DownloadOutlined />} onClick={() => void exportFile('ics')}>仅下载一次</Button></div>}
+    </Modal>
+  </main>
+}
diff --git a/web-react/src/pages/NotificationsPage.tsx b/web-react/src/pages/NotificationsPage.tsx
index e093315..9f521c6 100644
--- a/web-react/src/pages/NotificationsPage.tsx
+++ b/web-react/src/pages/NotificationsPage.tsx
@@ -15,10 +15,11 @@ import { useNavigate } from 'react-router-dom'
 import http, { apiErrorMessage } from '../api/http'
 import PageHeader from '../components/PageHeader'
 import { useAuthStore } from '../stores/auth'
+import NotificationComposer from './notifications/NotificationComposer'
 import { openLegacy } from './dashboard/legacy'
 import './notifications.css'
 
-type Tab = 'inbox' | 'sent'
+type Tab = 'inbox' | 'compose' | 'sent'
 interface NotificationItem {
   id: string; title: string; content: string; category: string; isRead: boolean; linkUrl?: string
   senderName: string; audienceName?: string; isManual: boolean; createdAt: string
@@ -117,8 +118,8 @@ export default function NotificationsPage() {
       <PageHeader kicker="通知中心" title="消息与待办" description="按时间汇总系统通知、课程变动和审核事项，未读状态与现有系统实时同步。" aside={<div className={`unread-ledger${unreadCount ? '' : ' is-quiet'}`}><span>UNREAD</span><strong>{unreadCount}</strong><small>条未读消息</small></div>} />
       <section className="notification-switcher" aria-label="通知中心视图">
         <button className={tab === 'inbox' ? 'is-active' : ''} onClick={() => setTab('inbox')}><BellOutlined /> 收件箱 {unreadCount > 0 && <b>{unreadCount}</b>}</button>
+        {canSend && <button className={tab === 'compose' ? 'is-active' : ''} onClick={() => setTab('compose')}><SendOutlined /> 发消息</button>}
         {canSend && <button className={tab === 'sent' ? 'is-active' : ''} onClick={() => setTab('sent')}><MessageOutlined /> 已发送</button>}
-        {canSend && <Button type="primary" icon={<SendOutlined />} onClick={() => openLegacy('/notifications')}>在现有系统发消息</Button>}
       </section>
 
       {tab === 'inbox' && <section className="notification-toolbar">
@@ -130,7 +131,7 @@ export default function NotificationsPage() {
         <Button icon={<ReloadOutlined />} loading={activeQuery.isFetching} onClick={() => void activeQuery.refetch()}>刷新</Button>
       </section>}
 
-      {activeQuery.isLoading ? <section className="notification-feed"><Skeleton active paragraph={{ rows: 10 }} /></section> : activeQuery.isError ? <Alert type="error" showIcon message="通知暂时无法加载" description={apiErrorMessage(activeQuery.error)} action={<Button onClick={() => void activeQuery.refetch()}>重新加载</Button>} /> : tab === 'inbox' ? (
+      {tab === 'compose' ? <NotificationComposer onSent={() => { setSentCursors([]); setTab('sent'); void queryClient.invalidateQueries({ queryKey: ['notifications', 'sent'] }) }} /> : activeQuery.isLoading ? <section className="notification-feed"><Skeleton active paragraph={{ rows: 10 }} /></section> : activeQuery.isError ? <Alert type="error" showIcon message="通知暂时无法加载" description={apiErrorMessage(activeQuery.error)} action={<Button onClick={() => void activeQuery.refetch()}>重新加载</Button>} /> : tab === 'inbox' ? (
         <section className="notification-feed" aria-live="polite">
           {groupedInbox.map((item) => <article key={item.id} className={`notification-entry notification-entry--${item.category.toLowerCase()}${item.isRead ? '' : ' is-unread'}`} tabIndex={0} role="button" onClick={() => void openNotification(item)} onKeyDown={(event) => { if (event.key === 'Enter') void openNotification(item) }}>
             <div className="notification-entry__time"><time>{displayTime(item.createdAt)}</time><i /></div>
diff --git a/web-react/src/pages/dashboard/StudentDashboardPage.tsx b/web-react/src/pages/dashboard/StudentDashboardPage.tsx
index 3c9da25..55f8235 100644
--- a/web-react/src/pages/dashboard/StudentDashboardPage.tsx
+++ b/web-react/src/pages/dashboard/StudentDashboardPage.tsx
@@ -110,8 +110,8 @@ export default function StudentDashboardPage() {
       </section>
       <section className="role-dashboard__grid">
         <article className="role-panel role-panel--wide">
-          <header><div><span><CalendarOutlined /> TODAY</span><h2>当日课表</h2></div><Button type="link" onClick={() => openLegacy('/my-timetable')}>完整课表 <RightOutlined /></Button></header>
-          {courses.length ? <div className="day-rail">{courses.map((course) => <button key={course.id} onClick={() => openLegacy('/my-timetable')}><time><b>{slot(course.startPeriod, 'startsAt') || `第 ${course.startPeriod} 节`}</b><small>{slot(course.startPeriod + course.periodCount - 1, 'endsAt')}</small></time><i /><div><span>{course.courseCode}</span><strong>{course.courseName}</strong><small><EnvironmentOutlined /> {[course.buildingName, course.classroomName].filter(Boolean).join(' · ') || '地点待定'}{course.teacherNames.length ? ` · ${course.teacherNames.join('、')}` : ''}</small></div></button>)}</div> : <Empty icon={<ReadOutlined />} title="今天没有课程" detail={week ? '可以安排自习或处理待办。' : '当前不在教学周内。'} />}
+          <header><div><span><CalendarOutlined /> TODAY</span><h2>当日课表</h2></div><Button type="link" onClick={() => window.location.assign('/next/my-timetable')}>完整课表 <RightOutlined /></Button></header>
+          {courses.length ? <div className="day-rail">{courses.map((course) => <button key={course.id} onClick={() => window.location.assign('/next/my-timetable')}><time><b>{slot(course.startPeriod, 'startsAt') || `第 ${course.startPeriod} 节`}</b><small>{slot(course.startPeriod + course.periodCount - 1, 'endsAt')}</small></time><i /><div><span>{course.courseCode}</span><strong>{course.courseName}</strong><small><EnvironmentOutlined /> {[course.buildingName, course.classroomName].filter(Boolean).join(' · ') || '地点待定'}{course.teacherNames.length ? ` · ${course.teacherNames.join('、')}` : ''}</small></div></button>)}</div> : <Empty icon={<ReadOutlined />} title="今天没有课程" detail={week ? '可以安排自习或处理待办。' : '当前不在教学周内。'} />}
         </article>
         <article className="role-panel">
           <header><div><span><BellOutlined /> INBOX</span><h2>消息中心</h2></div><Button type="link" onClick={() => window.location.assign('/next/notifications')}>{data.unreadCount ? `${data.unreadCount} 未读` : '全部'} <RightOutlined /></Button></header>
diff --git a/web-react/src/pages/my-timetable.css b/web-react/src/pages/my-timetable.css
new file mode 100644
index 0000000..623c338
--- /dev/null
+++ b/web-react/src/pages/my-timetable.css
@@ -0,0 +1,57 @@
+.timetable-page { gap: 16px; }
+.term-ledger { min-width: 250px; padding: 13px 16px; border-left: 3px solid var(--teal); background: var(--teal-soft); }
+.term-ledger span { color: var(--teal); font: 700 9px var(--font-data); letter-spacing: .14em; }
+.term-ledger strong, .term-ledger small { display: block; }
+.term-ledger strong { margin: 6px 0 3px; color: #27433f; font-size: 12px; }
+.term-ledger small { color: #697b77; font-size: 9px; }
+.timetable-toolbar { padding: 11px 13px; display: flex; gap: 8px; align-items: center; border: 1px solid var(--line); background: var(--paper); }
+.timetable-toolbar > .ant-select { min-width: 145px; }
+.timetable-actions { margin-left: auto; display: flex; gap: 8px; }
+.week-heading { min-height: 74px; padding: 15px 20px; display: grid; grid-template-columns: 1fr auto; align-items: center; color: white; background: linear-gradient(108deg, var(--brand-deep), var(--brand) 78%, #176b6c); }
+.week-heading span { color: var(--teal-bright); font: 700 9px var(--font-data); letter-spacing: .14em; }
+.week-heading h2 { margin: 6px 0 0; font: 600 18px var(--font-display); }
+.week-heading > strong { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--teal-bright); font: 700 30px var(--font-data); }
+.week-heading > small { grid-column: 2; color: #c4d0e5; font-size: 9px; }
+.week-board { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 1px; overflow-x: auto; border: 1px solid var(--line); background: var(--line); }
+.week-board > article { min-width: 150px; min-height: 410px; background: #f8f9fb; }
+.week-board > article > header { min-height: 55px; padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); background: white; }
+.week-board > article > header span { color: var(--brand-deep); font-weight: 700; font-size: 12px; }
+.week-board > article > header small { color: var(--ink-muted); font: 9px var(--font-data); }
+.week-board > article.is-today > header { box-shadow: inset 0 -3px var(--teal); background: var(--teal-soft); }
+.week-board > article > div { padding: 8px; display: grid; gap: 8px; }
+.week-board section { padding: 10px; border-left: 3px solid var(--brand); background: white; box-shadow: 0 5px 14px rgba(22,40,88,.06); }
+.week-board section.is-exam { border-color: var(--amber); background: #fffbf4; }
+.week-board section.is-experiment { border-color: var(--teal); background: #f6fbfa; }
+.week-board section > div { display: flex; justify-content: space-between; gap: 5px; align-items: center; }
+.week-board section time { color: #7d8796; font: 8px var(--font-data); }
+.week-board section strong, .week-board section span, .week-board section p, .week-board section small { display: block; }
+.week-board section strong { margin-top: 8px; color: #26364d; font-size: 12px; line-height: 1.45; }
+.week-board section > span { margin-top: 4px; color: var(--teal); font: 9px var(--font-data); }
+.week-board section p { margin: 8px 0 3px; color: #657184; font-size: 9px; line-height: 1.5; }
+.week-board section > small { color: #8a94a2; font-size: 8px; }
+.week-board .ant-empty { margin-block: 55px; }
+.flexible-courses { border: 1px solid var(--line); background: white; }
+.flexible-courses > header { padding: 17px 20px; border-bottom: 1px solid var(--line); }
+.flexible-courses > header span { color: var(--teal); font: 700 9px var(--font-data); letter-spacing: .13em; }
+.flexible-courses h2 { margin: 6px 0 0; color: var(--brand-deep); font: 600 17px var(--font-display); }
+.flexible-courses > div { display: grid; grid-template-columns: repeat(3, 1fr); }
+.flexible-courses article { padding: 17px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
+.flexible-courses article > span, .flexible-courses article small { color: var(--ink-muted); font-size: 9px; }
+.flexible-courses article strong { display: block; margin: 5px 0; color: var(--ink-strong); font-size: 12px; }
+.flexible-courses article p { margin: 0 0 6px; color: #5f6d81; font-size: 10px; }
+.calendar-subscription-panel { display: flex; flex-wrap: wrap; gap: 12px; }
+.calendar-subscription-panel .ant-alert, .feed-address { width: 100%; }
+.feed-address { padding: 10px; display: flex; gap: 8px; align-items: center; border: 1px solid var(--line); background: #f7f8fa; }
+.feed-address code { min-width: 0; flex: 1; overflow: hidden; color: #44536b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
+.calendar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
+@media (max-width: 760px) {
+  .timetable-toolbar { align-items: stretch; flex-wrap: wrap; }
+  .timetable-toolbar > .ant-select { flex: 1; }
+  .timetable-actions { width: 100%; margin-left: 0; }
+  .timetable-actions .ant-btn { flex: 1; }
+  .week-board { display: grid; grid-template-columns: 1fr; border: 0; background: transparent; }
+  .week-board > article { min-width: 0; min-height: 0; border: 1px solid var(--line); }
+  .week-board > article > div { grid-template-columns: 1fr; }
+  .week-board .ant-empty { margin-block: 18px; }
+  .flexible-courses > div { grid-template-columns: 1fr; }
+}
diff --git a/web-react/src/pages/notifications.css b/web-react/src/pages/notifications.css
index 3d963d8..a179432 100644
--- a/web-react/src/pages/notifications.css
+++ b/web-react/src/pages/notifications.css
@@ -36,9 +36,53 @@
 .notification-detail > div { display: flex; justify-content: space-between; align-items: center; color: var(--ink-muted); font-size: 11px; }
 .notification-detail p { margin: 0; white-space: pre-wrap; color: var(--ink); font-size: 13px; line-height: 1.85; }
 .notification-detail footer { padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-muted); font-size: 11px; }
+.compose-shell { border: 1px solid var(--line); background: var(--paper); }
+.compose-overview { min-height: 112px; padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: white; background: linear-gradient(112deg, var(--brand-deep), var(--brand) 70%, #146b6d); }
+.compose-overview > div:first-child > span { color: var(--teal-bright); font: 700 9px var(--font-data); letter-spacing: .14em; }
+.compose-overview h2 { margin: 8px 0 5px; font: 600 22px var(--font-display); }
+.compose-overview p { margin: 0; color: #c6d0e6; font-size: 11px; }
+.delivery-summary { min-width: 200px; display: grid; grid-template-columns: 1fr auto; gap: 3px 18px; }
+.delivery-summary span, .delivery-summary small { color: #b9c8e1; font-size: 10px; }
+.delivery-summary strong { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--teal-bright); font: 700 34px var(--font-data); }
+.compose-workspace { display: grid; grid-template-columns: minmax(360px, .85fr) minmax(440px, 1.15fr); }
+.recipient-panel, .message-editor { min-width: 0; padding: 24px; }
+.recipient-panel { border-right: 1px solid var(--line); background: #fafbfd; }
+.compose-section-title { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
+.compose-section-title > .anticon { width: 36px; height: 36px; display: grid; place-items: center; color: var(--teal); background: var(--teal-soft); }
+.compose-section-title span { color: var(--teal); font: 700 9px var(--font-data); letter-spacing: .13em; }
+.compose-section-title h3 { margin: 4px 0 0; color: var(--brand-deep); font-size: 16px; }
+.wide-control { width: 100%; }
+.recipient-mode { margin-bottom: 14px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line-strong); }
+.recipient-mode button { min-height: 38px; border: 0; border-right: 1px solid var(--line-strong); color: #647085; background: white; cursor: pointer; font-size: 11px; }
+.recipient-mode button:last-child { border-right: 0; }
+.recipient-mode button.is-active { color: white; background: var(--brand-deep); }
+.recipient-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
+.recipient-filters .ant-input-affix-wrapper { grid-column: 1 / -1; }
+.recipient-results { min-height: 220px; max-height: 380px; overflow: auto; border: 1px solid var(--line); background: white; }
+.recipient-results > button { width: 100%; min-height: 60px; padding: 10px 12px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; border: 0; border-bottom: 1px solid #edf0f3; text-align: left; background: transparent; cursor: pointer; }
+.recipient-results > button:disabled { cursor: default; }
+.recipient-results > button.is-selected { background: var(--teal-soft); }
+.recipient-avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--brand-deep); background: #dfe7f4; font-size: 11px; font-weight: 700; }
+.recipient-results strong, .recipient-results small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.recipient-results strong { color: var(--ink-strong); font-size: 12px; }
+.recipient-results small { margin-top: 3px; color: var(--ink-muted); font-size: 9px; }
+.recipient-results em { color: #788599; font-size: 9px; font-style: normal; }
+.recipient-results b { color: var(--teal); font-size: 9px; }
+.recipient-pager { padding: 10px 0; display: flex; justify-content: space-between; align-items: center; }
+.recipient-pager span { color: var(--ink-muted); font: 9px var(--font-data); }
+.selected-strip { margin-top: 12px; padding: 11px; border-left: 3px solid var(--teal); background: var(--teal-soft); }
+.selected-strip header { margin-bottom: 8px; display: flex; justify-content: space-between; }
+.selected-strip header strong { color: #31534f; font-size: 11px; }
+.selected-strip header button { border: 0; color: var(--teal); background: transparent; cursor: pointer; font-size: 10px; }
+.message-editor { display: grid; align-content: start; gap: 17px; }
+.message-editor label { display: grid; gap: 8px; color: #33445b; font-size: 11px; font-weight: 650; }
+.send-actions { padding-top: 15px; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--line); }
+.send-actions span { color: var(--ink-muted); font-size: 10px; }
 
 @media (max-width: 980px) {
   .notification-toolbar { grid-template-columns: 1fr 1fr auto; }
+  .compose-workspace { grid-template-columns: 1fr; }
+  .recipient-panel { border-right: 0; border-bottom: 1px solid var(--line); }
 }
 @media (max-width: 640px) {
   .notification-switcher { align-items: stretch; flex-wrap: wrap; }
@@ -53,4 +97,12 @@
   .notification-entry__time i, .notification-entry__time::after { display: none; }
   .notification-entry__body { padding-top: 9px; }
   .cursor-pager { justify-content: space-between; }
+  .compose-overview { align-items: stretch; flex-direction: column; }
+  .delivery-summary { min-width: 0; }
+  .recipient-panel, .message-editor { padding: 18px 15px; }
+  .recipient-mode { grid-template-columns: 1fr; }
+  .recipient-mode button { border-right: 0; border-bottom: 1px solid var(--line-strong); }
+  .recipient-filters { grid-template-columns: 1fr; }
+  .recipient-filters .ant-input-affix-wrapper { grid-column: auto; }
+  .send-actions { align-items: stretch; flex-direction: column; }
 }
diff --git a/web-react/src/pages/notifications/NotificationComposer.tsx b/web-react/src/pages/notifications/NotificationComposer.tsx
new file mode 100644
index 0000000..f38e398
--- /dev/null
+++ b/web-react/src/pages/notifications/NotificationComposer.tsx
@@ -0,0 +1,97 @@
+import { useMemo, useState } from 'react'
+import { FilterOutlined, LeftOutlined, RightOutlined, SearchOutlined, SendOutlined, UserOutlined } from '@ant-design/icons'
+import { Alert, App, Button, Input, Select, Skeleton, Tag } from 'antd'
+import { useMutation, useQuery } from '@tanstack/react-query'
+import http, { apiErrorMessage } from '../../api/http'
+
+type RecipientMode = 'Scope' | 'Filtered' | 'Selected'
+interface Option { id: string; name: string; code?: string; collegeId?: string; grade?: number }
+interface Task { id: string; taskNumber: string; courseName: string; termName: string; collegeId?: string; recipientCount?: number }
+interface RoleOption { value: string; label: string }
+interface ComposerData {
+  audienceType: string; audienceName: string; recipientCount: number; canFilterRecipients?: boolean
+  maximumSelectedRecipients?: number; colleges?: Option[]; roles?: RoleOption[]
+  administrativeClasses?: Option[]; teachingTasks?: Task[]
+}
+interface Recipient { id: string; displayName: string; userName: string; number?: string; collegeName?: string; className?: string; roles: string[] }
+interface RecipientResult { items: Recipient[]; total: number; hasMore: boolean; nextCursor?: string }
+
+export default function NotificationComposer({ onSent }: { onSent: () => void }) {
+  const { message, modal } = App.useApp()
+  const [mode, setMode] = useState<RecipientMode>('Scope')
+  const [title, setTitle] = useState('')
+  const [content, setContent] = useState('')
+  const [teachingTaskId, setTeachingTaskId] = useState<string>()
+  const [collegeId, setCollegeId] = useState<string>()
+  const [role, setRole] = useState<string>()
+  const [classId, setClassId] = useState<string>()
+  const [filterTaskId, setFilterTaskId] = useState<string>()
+  const [keywordInput, setKeywordInput] = useState('')
+  const [keyword, setKeyword] = useState('')
+  const [cursors, setCursors] = useState<string[]>([])
+  const [selected, setSelected] = useState<Recipient[]>([])
+
+  const composer = useQuery({ queryKey: ['notifications', 'composer'], queryFn: async () => (await http.get<ComposerData>('/notifications/composer')).data })
+  const data = composer.data
+  const isAdmin = data?.canFilterRecipients === true
+  const currentTask = data?.teachingTasks?.find((item) => item.id === teachingTaskId)
+  const cursor = cursors.at(-1)
+  const recipients = useQuery({
+    queryKey: ['notifications', 'recipients', cursor, collegeId, role, classId, filterTaskId, keyword],
+    queryFn: async () => (await http.get<RecipientResult>('/notifications/recipients', { params: { cursor, pageSize: 30, collegeId, role, administrativeClassId: classId, teachingTaskId: filterTaskId, keyword: keyword || undefined } })).data,
+    enabled: !!isAdmin && mode !== 'Scope',
+  })
+  const selectedIds = useMemo(() => new Set(selected.map((item) => item.id)), [selected])
+  const visibleClasses = data?.administrativeClasses?.filter((item) => !collegeId || item.collegeId === collegeId) ?? []
+  const visibleTasks = data?.teachingTasks?.filter((item) => !collegeId || item.collegeId === collegeId) ?? []
+  const recipientCount = data?.audienceType === 'TeachingTask' ? (currentTask?.recipientCount ?? 0) : mode === 'Filtered' ? (recipients.data?.total ?? 0) : mode === 'Selected' ? selected.length : (data?.recipientCount ?? 0)
+  const audienceName = data?.audienceType === 'TeachingTask' ? (currentTask ? `${currentTask.taskNumber} · ${currentTask.courseName}` : '请选择教学班') : mode === 'Filtered' ? '当前筛选结果' : mode === 'Selected' ? `指定的 ${selected.length} 名收件人` : (data?.audienceName ?? '正在读取范围')
+
+  const send = useMutation({
+    mutationFn: () => http.post<{ recipientCount: number }>('/notifications/send', {
+      title: title.trim(), content: content.trim(), teachingTaskId: teachingTaskId ?? null,
+      recipientMode: isAdmin ? mode : 'Scope',
+      recipientFilter: mode === 'Filtered' ? { collegeId: collegeId ?? null, role: role ?? null, administrativeClassId: classId ?? null, teachingTaskId: filterTaskId ?? null, keyword: keyword || null } : null,
+      recipientUserIds: mode === 'Selected' ? selected.map((item) => item.id) : [],
+    }),
+    onSuccess: ({ data: result }) => { message.success(`已发送给 ${result.recipientCount} 个账号`); onSent() },
+    onError: (error) => message.error(apiErrorMessage(error)),
+  })
+
+  function resetRecipients() { setCursors([]) }
+  function chooseMode(next: RecipientMode) { setMode(next); resetRecipients() }
+  function toggle(item: Recipient) {
+    if (selectedIds.has(item.id)) { setSelected((value) => value.filter((entry) => entry.id !== item.id)); return }
+    const maximum = data?.maximumSelectedRecipients ?? 500
+    if (selected.length >= maximum) { message.warning(`单次最多指定 ${maximum} 名收件人`); return }
+    setSelected((value) => [...value, item])
+  }
+  function confirmSend() {
+    if (!title.trim()) { message.warning('请填写消息标题'); return }
+    if (!content.trim()) { message.warning('请填写消息正文'); return }
+    if (data?.audienceType === 'TeachingTask' && !teachingTaskId) { message.warning('请选择接收消息的教学班'); return }
+    if (!recipientCount) { message.warning('当前范围内没有可接收消息的账号'); return }
+    modal.confirm({ title: '确认发送消息', content: `消息将发送给“${audienceName}”的 ${recipientCount} 个账号，发送后不可撤回。`, okText: '确认发送', cancelText: '继续编辑', onOk: () => send.mutateAsync() })
+  }
+
+  if (composer.isLoading) return <section className="compose-shell"><Skeleton active paragraph={{ rows: 10 }} /></section>
+  if (composer.isError || !data) return <Alert type="error" showIcon message="发信范围暂时无法加载" description={apiErrorMessage(composer.error)} action={<Button onClick={() => void composer.refetch()}>重新加载</Button>} />
+
+  return <section className="compose-shell">
+    <header className="compose-overview"><div><span>发送范围</span><h2>编写并发送消息</h2><p>收件范围始终受当前账号的数据权限约束，发送后不可撤回。</p></div><div className="delivery-summary"><span>{audienceName}</span><strong>{recipientCount}</strong><small>个接收账号</small></div></header>
+    <div className="compose-workspace">
+      <section className="recipient-panel"><header className="compose-section-title"><UserOutlined /><div><span>收件人</span><h3>选择发送范围</h3></div></header>
+        {data.audienceType === 'TeachingTask' ? <Select className="wide-control" showSearch optionFilterProp="label" placeholder="选择教学班" value={teachingTaskId} onChange={setTeachingTaskId} options={(data.teachingTasks ?? []).map((item) => ({ value: item.id, label: `${item.termName} · ${item.taskNumber} · ${item.courseName}（${item.recipientCount ?? 0} 人）` }))} /> : <>
+          <div className="recipient-mode">{(['Scope', 'Filtered', 'Selected'] as RecipientMode[]).map((value) => <button key={value} className={mode === value ? 'is-active' : ''} onClick={() => chooseMode(value)}>{value === 'Scope' ? '权限范围群发' : value === 'Filtered' ? '按条件群发' : '指定收件人'}</button>)}</div>
+          {mode === 'Scope' ? <Alert type="info" showIcon message={data.audienceName} description="覆盖当前权限范围内全部已启用账号。" /> : <>
+            <div className="recipient-filters"><Select allowClear placeholder="全部学院" value={collegeId} onChange={(value) => { setCollegeId(value); setClassId(undefined); setFilterTaskId(undefined); resetRecipients() }} options={(data.colleges ?? []).map((item) => ({ value: item.id, label: item.name }))} /><Select allowClear placeholder="全部身份" value={role} onChange={(value) => { setRole(value); resetRecipients() }} options={data.roles} /><Select allowClear showSearch optionFilterProp="label" placeholder="全部行政班" value={classId} onChange={(value) => { setClassId(value); resetRecipients() }} options={visibleClasses.map((item) => ({ value: item.id, label: `${item.grade}级 · ${item.name}` }))} /><Select allowClear showSearch optionFilterProp="label" placeholder="全部教学班" value={filterTaskId} onChange={(value) => { setFilterTaskId(value); resetRecipients() }} options={visibleTasks.map((item) => ({ value: item.id, label: `${item.taskNumber} · ${item.courseName}` }))} /><Input prefix={<SearchOutlined />} allowClear value={keywordInput} placeholder="姓名、学号、工号或账号" onChange={(event) => setKeywordInput(event.target.value)} onPressEnter={() => { setKeyword(keywordInput.trim()); resetRecipients() }} /><Button icon={<FilterOutlined />} onClick={() => { setKeyword(keywordInput.trim()); resetRecipients() }}>查询</Button></div>
+            <div className="recipient-results">{recipients.isLoading ? <Skeleton active paragraph={{ rows: 5 }} /> : recipients.isError ? <Alert type="error" message={apiErrorMessage(recipients.error)} /> : (recipients.data?.items ?? []).map((item) => <button key={item.id} disabled={mode === 'Filtered'} className={selectedIds.has(item.id) ? 'is-selected' : ''} onClick={() => toggle(item)}><span className="recipient-avatar">{item.displayName.slice(0, 1)}</span><span><strong>{item.displayName}</strong><small>{item.number || item.userName}{item.className ? ` · ${item.className}` : ''}</small></span><em>{item.collegeName || '校级账号'}</em>{mode === 'Selected' && <b>{selectedIds.has(item.id) ? '已选择' : '选择'}</b>}</button>)}</div>
+            {(cursors.length > 0 || recipients.data?.hasMore) && <nav className="recipient-pager"><Button size="small" icon={<LeftOutlined />} disabled={!cursors.length} onClick={() => setCursors((value) => value.slice(0, -1))}>上一批</Button><span>第 {cursors.length + 1} 批 · 共 {recipients.data?.total ?? 0} 人</span><Button size="small" icon={<RightOutlined />} disabled={!recipients.data?.hasMore} onClick={() => setCursors((value) => recipients.data?.nextCursor ? [...value, recipients.data.nextCursor] : value)}>下一批</Button></nav>}
+            {mode === 'Selected' && selected.length > 0 && <div className="selected-strip"><header><strong>已选 {selected.length} 人</strong><button onClick={() => setSelected([])}>清空</button></header><div>{selected.map((item) => <Tag closable key={item.id} onClose={() => toggle(item)}>{item.displayName}</Tag>)}</div></div>}
+          </>}
+        </>}
+      </section>
+      <section className="message-editor"><header className="compose-section-title"><SendOutlined /><div><span>消息正文</span><h3>填写发送内容</h3></div></header><label>标题<Input showCount maxLength={200} value={title} onChange={(event) => setTitle(event.target.value)} placeholder="一句话说明这条消息" /></label><label>正文<Input.TextArea showCount maxLength={20000} rows={12} value={content} onChange={(event) => setContent(event.target.value)} placeholder="填写收件人需要了解的信息和下一步操作" /></label><div className="send-actions"><span>发送后不可撤回，请核对范围与正文。</span><Button type="primary" size="large" icon={<SendOutlined />} loading={send.isPending} onClick={confirmSend}>发送给 {recipientCount} 个账号</Button></div></section>
+    </div>
+  </section>
+}