diff --git a/web-react/MIGRATION_MATRIX.md b/web-react/MIGRATION_MATRIX.md
index 0511a11..4b9f2a5 100644
--- a/web-react/MIGRATION_MATRIX.md
+++ b/web-react/MIGRATION_MATRIX.md
@@ -10,5 +10,8 @@
 | `/users` | 用户与权限 | SuperAdmin | 列表、筛选、分页、创建、启停、重置密码、角色范围、Excel | verification |
 | `/notifications` | 通知中心 | 已登录用户 | 收件箱筛选、游标分页、已读回执、权限范围/筛选/指定收件人群发、已发送 | verification |
 | `/my-timetable` | 我的课表 | Student、Teacher | 当前学期周视图、考试/实验融合、Excel/PDF/ICS、订阅启停与密钥轮换 | verification |
+| `/exams` | 考试/监考安排 | Student、Teacher | 已发布个人安排、考场、座位、监考教师、历史区分 | verification |
+| `/grades` | 我的成绩 | Student | 学期筛选、成绩构成、学分绩点、学业指标和排名 | verification |
+| `/warnings` | 我的学业预警 | Student | 预警确认、确认备注、帮扶与复核进度 | verification |
 
 后续从 `web/src/router/index.ts` 逐条补全。只有关键合同和各状态验收完整后，状态才能更新为 `complete`。
diff --git a/web-react/README.md b/web-react/README.md
index e5cb3f1..65c15a9 100644
--- a/web-react/README.md
+++ b/web-react/README.md
@@ -31,6 +31,8 @@ npm.cmd run build
 - 完整迁移 `/users` 的分页筛选、Excel、账号、角色、状态和密码管理流程。
 - 迁移 `/notifications` 的收件箱、已读回执、权限范围/筛选/指定收件人群发和已发送记录；
 - 迁移 `/my-timetable` 的周视图、考试与实验融合、Excel/PDF/ICS 导出和日历订阅管理。
+- 迁移 `/exams` 的学生考试与教师监考安排；
+- 迁移学生 `/grades` 成绩单、绩点排名，以及 `/warnings` 预警确认和帮扶进度。
 
 ## 迁移纪律
 
@@ -45,7 +47,7 @@ npm.cmd run build
 | 批次 | 内容 | 状态 |
 | --- | --- | --- |
 | 0 | 工程、主题、会话、登录、应用外壳 | 进行中 |
-| 1 | Dashboard、Users、Account、Notifications、个人课表、移动端代表页 | 已实现，进入联调验收 |
+| 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 bfe1fc7..8e80d62 100644
--- a/web-react/src/app/App.tsx
+++ b/web-react/src/app/App.tsx
@@ -11,6 +11,9 @@ 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 ExamsPage = lazy(() => import('../pages/ExamsPage'))
+const StudentGradesPage = lazy(() => import('../pages/StudentGradesPage'))
+const StudentWarningsPage = lazy(() => import('../pages/StudentWarningsPage'))
 const SsoCallbackPage = lazy(() => import('../pages/SsoCallbackPage'))
 const SsoBindPage = lazy(() => import('../pages/SsoBindPage'))
 const AppShell = lazy(() => import('../layout/AppShell'))
@@ -56,6 +59,9 @@ function AppRoutes() {
           <Route path="/users" element={<UsersPage />} />
           <Route path="/notifications" element={<NotificationsPage />} />
           <Route path="/my-timetable" element={<MyTimetablePage />} />
+          <Route path="/exams" element={<ExamsPage />} />
+          <Route path="/grades" element={<StudentGradesPage />} />
+          <Route path="/warnings" element={<StudentWarningsPage />} />
           <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 a9cb165..fe71a99 100644
--- a/web-react/src/layout/AppShell.tsx
+++ b/web-react/src/layout/AppShell.tsx
@@ -8,6 +8,9 @@ import {
   MenuUnfoldOutlined,
   SafetyCertificateOutlined,
   CalendarOutlined,
+  FileDoneOutlined,
+  ReadOutlined,
+  WarningOutlined,
 } from '@ant-design/icons'
 import { Avatar, Badge, Button, Layout, Menu, Tag } from 'antd'
 import { useQuery } from '@tanstack/react-query'
@@ -44,6 +47,13 @@ export default function AppShell() {
     ...((roles.includes('Student') || roles.includes('Teacher'))
       ? [{ key: '/my-timetable', icon: <CalendarOutlined />, label: '我的课表' }]
       : []),
+    ...((roles.includes('Student') || roles.includes('Teacher'))
+      ? [{ key: '/exams', icon: <FileDoneOutlined />, label: roles.includes('Teacher') ? '监考安排' : '考试安排' }]
+      : []),
+    ...(isStudentHome ? [
+      { key: '/grades', icon: <ReadOutlined />, label: '我的成绩' },
+      { key: '/warnings', icon: <WarningOutlined />, label: '学业预警' },
+    ] : []),
     ...(user?.roles.includes('SuperAdmin')
       ? [{ key: '/users', icon: <SafetyCertificateOutlined />, label: '用户与权限' }]
       : []),
diff --git a/web-react/src/pages/ExamsPage.tsx b/web-react/src/pages/ExamsPage.tsx
new file mode 100644
index 0000000..5e6402e
--- /dev/null
+++ b/web-react/src/pages/ExamsPage.tsx
@@ -0,0 +1,30 @@
+import { ClockCircleOutlined, EnvironmentOutlined, ReloadOutlined, TeamOutlined } from '@ant-design/icons'
+import { Alert, Button, Empty, Skeleton, Tag } from 'antd'
+import { useQuery } from '@tanstack/react-query'
+import http, { apiErrorMessage } from '../api/http'
+import PageHeader from '../components/PageHeader'
+import { useAuthStore } from '../stores/auth'
+import './student-learning.css'
+
+interface Exam { id: string; planName: string; examDate: string; startsAt: string; endsAt: string; taskNumber: string; courseCode: string; courseName: string; classroomName?: string; buildingName?: string; invigilatorNames: string[]; seatNumber?: string; studentCount?: number; isExam: boolean }
+function date(value: string) { return new Date(`${value.slice(0, 10)}T00:00:00`) }
+function formatDate(value: string) { return new Intl.DateTimeFormat('zh-CN', { month: 'long', day: 'numeric', weekday: 'long' }).format(date(value)) }
+function formatTime(value: string) { return new Intl.DateTimeFormat('zh-CN', { hour: '2-digit', minute: '2-digit', hour12: false }).format(new Date(value)) }
+
+export default function ExamsPage() {
+  const roles = useAuthStore((state) => state.user?.roles ?? [])
+  const teacher = roles.includes('Teacher') && !roles.includes('Student')
+  const query = useQuery({ queryKey: ['my-exams'], queryFn: async () => (await http.get<Exam[]>('/exams/my-schedule')).data })
+  if (query.isLoading) return <main className="page-container"><Skeleton active paragraph={{ rows: 12 }} /></main>
+  if (query.isError) return <main className="page-container"><Alert type="error" showIcon message="考试安排暂时无法加载" description={apiErrorMessage(query.error)} action={<Button icon={<ReloadOutlined />} onClick={() => void query.refetch()}>重新加载</Button>} /></main>
+  const now = Date.now()
+  const items = query.data ?? []
+  const upcoming = items.filter((item) => new Date(item.endsAt).getTime() >= now)
+  const history = items.filter((item) => new Date(item.endsAt).getTime() < now).reverse()
+  return <main className="page-container learning-page">
+    <PageHeader kicker={teacher ? 'INVIGILATION' : 'EXAM SCHEDULE'} title={teacher ? '我的监考安排' : '我的考试安排'} description={teacher ? '查看已发布考试中的监考时间、考场和考生规模。' : '查看已发布考试的时间、考场、座位和监考信息。'} aside={<div className="learning-ledger"><span>UPCOMING</span><strong>{upcoming.length}</strong><small>场待进行</small></div>} />
+    <section className="exam-timeline">{upcoming.map((item, index) => <article key={item.id}><div className="exam-date-block"><span>{formatDate(item.examDate)}</span><strong>{Math.max(0, Math.ceil((date(item.examDate).getTime() - new Date().setHours(0,0,0,0)) / 86400000))}</strong><small>{index === 0 ? '距离最近安排 / 天' : '天后'}</small></div><div className="exam-card"><header><div><Tag color={item.isExam ? 'blue' : 'default'}>{item.planName}</Tag><span>{item.taskNumber}</span></div><time><ClockCircleOutlined /> {formatTime(item.startsAt)}—{formatTime(item.endsAt)}</time></header><h2>{item.courseName}</h2><p>{item.courseCode}</p><footer><span><EnvironmentOutlined /> {[item.buildingName, item.classroomName].filter(Boolean).join(' · ') || '考场待定'}</span>{teacher ? <span><TeamOutlined /> {item.studentCount ?? 0} 名考生</span> : <span>座位号 <b>{item.seatNumber ?? '待分配'}</b></span>}<span>监考：{item.invigilatorNames.join('、') || '待安排'}</span></footer></div></article>)}</section>
+    {!upcoming.length && <section className="learning-empty"><Empty description="当前没有待进行的考试安排" /></section>}
+    {!!history.length && <section className="history-panel"><header><span>HISTORY</span><h2>已结束安排</h2></header><div>{history.map((item) => <article key={item.id}><time>{formatDate(item.examDate)} · {formatTime(item.startsAt)}</time><strong>{item.courseName}</strong><span>{[item.buildingName, item.classroomName].filter(Boolean).join(' · ') || '未记录考场'}</span></article>)}</div></section>}
+  </main>
+}
diff --git a/web-react/src/pages/StudentGradesPage.tsx b/web-react/src/pages/StudentGradesPage.tsx
new file mode 100644
index 0000000..5dd0a0a
--- /dev/null
+++ b/web-react/src/pages/StudentGradesPage.tsx
@@ -0,0 +1,35 @@
+import { useMemo, useState } from 'react'
+import { BarChartOutlined, ReloadOutlined } from '@ant-design/icons'
+import { Alert, Button, Empty, Select, Skeleton, Tag } from 'antd'
+import { useQuery } from '@tanstack/react-query'
+import http, { apiErrorMessage } from '../api/http'
+import PageHeader from '../components/PageHeader'
+import './student-learning.css'
+
+interface Term { id: string; name: string; academicYear: string; isCurrent: boolean }
+interface GradeRecord { id: string; termName: string; taskNumber: string; courseCode: string; courseName: string; credits: number; regularScore?: number; regularWeight: number; itemScores: Array<{ name: string; weight: number; score?: number }>; finalScore?: number; finalWeight: number; totalScore?: number; gradePoint?: number; examStatus: string }
+interface Transcript { student: { studentNumber: string; name: string; className: string; majorName: string }; records: GradeRecord[] }
+interface Rank { rank?: number; peerCount: number }
+interface Metric { value?: number; classRank: Rank; majorRank: Rank; collegeRank: Rank }
+interface Overview { isRefreshing: boolean; courseCount: number; calculatedAt?: string; termTrend: Array<{ academicTermId: string; termName: string; courseCount: number; gpa?: number; weightedAverageScore?: number }>; metrics: { gpa: Metric; weightedAverageScore: Metric; averageScore: Metric } }
+const status: Record<string, string> = { Normal: '正常', Absent: '缺考', Deferred: '缓考', Exempt: '免修', Makeup: '补考' }
+function rank(metric: Metric) { return metric.classRank.rank ? `班级 ${metric.classRank.rank}/${metric.classRank.peerCount}` : '暂无排名' }
+
+export default function StudentGradesPage() {
+  const [termId, setTermId] = useState<string>()
+  const terms = useQuery({ queryKey: ['terms'], queryFn: async () => (await http.get<Term[]>('/base-data/terms')).data })
+  const transcript = useQuery({ queryKey: ['student-transcript', termId], queryFn: async () => (await http.get<Transcript>('/grades/student/transcript', { params: { academicTermId: termId } })).data })
+  const overview = useQuery({ queryKey: ['student-academic-overview'], queryFn: async () => (await http.get<Overview>('/grades/student/academic-overview')).data })
+  const records = transcript.data?.records ?? []
+  const earnedCredits = useMemo(() => records.filter((item) => item.totalScore != null && item.totalScore >= 60).reduce((sum, item) => sum + Number(item.credits), 0), [records])
+  const gpa = useMemo(() => { const numeric = records.filter((item) => item.gradePoint != null); const credits = numeric.reduce((sum, item) => sum + Number(item.credits), 0); return credits ? (numeric.reduce((sum, item) => sum + Number(item.gradePoint) * Number(item.credits), 0) / credits).toFixed(2) : '—' }, [records])
+  const loading = terms.isLoading || transcript.isLoading || overview.isLoading
+  if (loading) return <main className="page-container"><Skeleton active paragraph={{ rows: 14 }} /></main>
+  if (transcript.isError) return <main className="page-container"><Alert type="error" showIcon message="成绩单暂时无法加载" description={apiErrorMessage(transcript.error)} action={<Button icon={<ReloadOutlined />} onClick={() => void transcript.refetch()}>重新加载</Button>} /></main>
+  return <main className="page-container learning-page">
+    <PageHeader kicker="STUDENT TRANSCRIPT" title={transcript.data?.student.name ?? '我的成绩'} description={`${transcript.data?.student.studentNumber ?? ''} · ${transcript.data?.student.majorName ?? ''} · ${transcript.data?.student.className ?? ''}`} aside={<Select allowClear value={termId} placeholder="全部学期" style={{ minWidth: 230 }} onChange={setTermId} options={(terms.data ?? []).map((term) => ({ value: term.id, label: `${term.name}${term.isCurrent ? ' · 当前' : ''}` }))} />} />
+    {overview.data && <section className="academic-metrics"><article><span>累计 GPA</span><strong>{overview.data.metrics.gpa.value ?? '—'}</strong><small>{rank(overview.data.metrics.gpa)}</small></article><article><span>加权平均分</span><strong>{overview.data.metrics.weightedAverageScore.value ?? '—'}</strong><small>{rank(overview.data.metrics.weightedAverageScore)}</small></article><article><span>已发布课程</span><strong>{overview.data.courseCount}</strong><small>{overview.data.isRefreshing ? '统计更新中' : '累计统计'}</small></article></section>}
+    <section className="term-summary"><div><span>筛选范围</span><strong>{termId ? terms.data?.find((item) => item.id === termId)?.name : '全部学期'}</strong></div><div><span>课程</span><strong>{records.length}</strong><small>门</small></div><div><span>获得学分</span><strong>{earnedCredits}</strong><small>分</small></div><div><span>加权 GPA</span><strong>{gpa}</strong></div></section>
+    <section className="grade-list">{records.map((record) => { const components = [{ name: '平时', weight: record.regularWeight, score: record.regularScore }, ...record.itemScores, { name: '期末', weight: record.finalWeight, score: record.finalScore }].filter((item) => item.weight > 0); return <article key={record.id}><div className="grade-course"><span>{record.termName}</span><h2>{record.courseName}</h2><p>{record.courseCode} · {record.taskNumber} · {record.credits} 学分</p></div><div className="score-scale"><i /><span style={{ left: `${Math.min(100, Math.max(0, record.totalScore ?? 0))}%` }}>{record.totalScore ?? '—'}</span></div><div className={`grade-result${(record.totalScore ?? 100) < 60 ? ' is-failed' : ''}`}><Tag color={record.examStatus === 'Normal' ? 'green' : 'orange'}>{status[record.examStatus] ?? record.examStatus}</Tag><strong>{record.totalScore ?? '—'}</strong><small>绩点 {record.gradePoint ?? '—'}</small></div><div className="grade-formula"><BarChartOutlined />{components.map((item) => <span key={item.name}><b>{item.name}</b>{item.score ?? '—'} × {item.weight}%</span>)}</div></article>})}{!records.length && <Empty description="当前筛选范围内暂无已发布成绩" />}</section>
+  </main>
+}
diff --git a/web-react/src/pages/StudentWarningsPage.tsx b/web-react/src/pages/StudentWarningsPage.tsx
new file mode 100644
index 0000000..22e4d01
--- /dev/null
+++ b/web-react/src/pages/StudentWarningsPage.tsx
@@ -0,0 +1,36 @@
+import { useState } from 'react'
+import { CheckOutlined, ReloadOutlined, WarningOutlined } from '@ant-design/icons'
+import { Alert, App, Button, Empty, Input, Modal, Skeleton, Tag, Timeline } from 'antd'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import http, { apiErrorMessage } from '../api/http'
+import PageHeader from '../components/PageHeader'
+import './student-learning.css'
+
+interface Warning { id: string; type: number; status: number; triggerValue: number; detail: string; acknowledgedAt?: string; acknowledgeComment?: string; createdAt: string }
+interface Entry { id: string; type: number; content: string; occurredAt: string; recordedByName: string }
+interface RiskCase { id: string; status: number; followUpDueDate: string; reviewDate?: string; entries: Entry[] }
+const typeLabels: Record<number, string> = { 1: '不及格学分', 2: '低绩点', 3: '缺勤', 4: '延毕风险' }
+const statusLabels: Record<number, string> = { 1: '生效中', 2: '已确认', 3: '已处理', 4: '已忽略' }
+const caseLabels: Record<number, string> = { 1: '待跟进', 2: '跟进中', 3: '待复核', 4: '已结案' }
+const entryLabels: Record<number, string> = { 1: '谈话记录', 2: '帮扶措施', 3: '复核记录' }
+
+export default function StudentWarningsPage() {
+  const { message } = App.useApp()
+  const client = useQueryClient()
+  const [selected, setSelected] = useState<Warning | null>(null)
+  const [comment, setComment] = useState('')
+  const warnings = useQuery({ queryKey: ['student-warnings'], queryFn: async () => (await http.get<Warning[]>('/warnings/my-warnings')).data })
+  const cases = useQuery({ queryKey: ['student-risk-cases'], queryFn: async () => (await http.get<RiskCase[]>('/warnings/my-risk-cases')).data })
+  const acknowledge = useMutation({ mutationFn: () => http.post(`/warnings/${selected!.id}/acknowledge`, { comment: comment.trim() || null }), onSuccess: () => { message.success('预警已确认'); setSelected(null); setComment(''); void client.invalidateQueries({ queryKey: ['student-warnings'] }) }, onError: (error) => message.error(apiErrorMessage(error)) })
+  const loading = warnings.isLoading || cases.isLoading
+  if (loading) return <main className="page-container"><Skeleton active paragraph={{ rows: 12 }} /></main>
+  if (warnings.isError || cases.isError) return <main className="page-container"><Alert type="error" showIcon message="学业预警暂时无法加载" description={apiErrorMessage(warnings.error ?? cases.error)} action={<Button icon={<ReloadOutlined />} onClick={() => { void warnings.refetch(); void cases.refetch() }}>重新加载</Button>} /></main>
+  const active = (warnings.data ?? []).filter((item) => item.status === 1)
+  return <main className="page-container learning-page">
+    <PageHeader kicker="ACADEMIC WARNING" title="我的学业预警" description="查看学校生成的学业风险提示，确认知悉，并跟踪辅导员的帮扶与复核进度。" aside={<div className={`learning-ledger${active.length ? ' is-attention' : ''}`}><span>ACTIVE</span><strong>{active.length}</strong><small>项待确认</small></div>} />
+    <section className={`warning-radar${active.length ? ' is-attention' : ''}`}><WarningOutlined /><div><span>当前状态</span><strong>{active.length ? `有 ${active.length} 项预警需要确认` : '没有待确认的学业预警'}</strong><p>{active[0]?.detail ?? '继续保持学习节奏，定期查看成绩与考勤。'}</p></div></section>
+    <section className="warning-list">{(warnings.data ?? []).map((item) => <article key={item.id} className={item.status === 1 ? 'is-active' : ''}><div><Tag color={item.type === 1 ? 'red' : item.type === 2 ? 'orange' : 'blue'}>{typeLabels[item.type] ?? '学业提醒'}</Tag><Tag>{statusLabels[item.status] ?? '未知状态'}</Tag></div><h2>{item.detail}</h2><p>触发值：{item.triggerValue} · {new Date(item.createdAt).toLocaleString('zh-CN')}</p>{item.acknowledgeComment && <blockquote>确认备注：{item.acknowledgeComment}</blockquote>}{item.status === 1 && <Button type="primary" icon={<CheckOutlined />} onClick={() => { setSelected(item); setComment('') }}>确认知悉</Button>}</article>)}{!warnings.data?.length && <Empty description="暂无学业预警" />}</section>
+    {!!cases.data?.length && <section className="risk-progress"><header><span>SUPPORT & REVIEW</span><h2>帮扶与复核进度</h2><p>这里只展示与你本人相关的谈话、帮扶和复核记录。</p></header>{cases.data.map((item) => <article key={item.id}><div className="risk-case-summary"><Tag color={item.status === 4 ? 'green' : 'orange'}>{caseLabels[item.status]}</Tag><span>跟进截止：{item.followUpDueDate}</span><span>复核日期：{item.reviewDate ?? '待安排'}</span></div>{item.entries.length ? <Timeline items={item.entries.map((entry) => ({ color: entry.type === 3 ? 'green' : 'blue', children: <div><strong>{entryLabels[entry.type]}</strong><p>{entry.content}</p><small>{new Date(entry.occurredAt).toLocaleString('zh-CN')} · {entry.recordedByName}</small></div> }))} /> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="辅导员暂未填写处置记录" />}</article>)}</section>}
+    <Modal open={!!selected} title="确认已知晓此预警" okText="确认知悉" cancelText="暂不处理" confirmLoading={acknowledge.isPending} onOk={() => acknowledge.mutate()} onCancel={() => setSelected(null)}><Alert type="warning" showIcon message={selected?.detail} /><label className="ack-comment">确认备注（选填）<Input.TextArea maxLength={500} showCount rows={4} value={comment} onChange={(event) => setComment(event.target.value)} placeholder="可填写你的情况说明或下一步计划" /></label></Modal>
+  </main>
+}
diff --git a/web-react/src/pages/dashboard/StudentDashboardPage.tsx b/web-react/src/pages/dashboard/StudentDashboardPage.tsx
index 55f8235..1ee0a7b 100644
--- a/web-react/src/pages/dashboard/StudentDashboardPage.tsx
+++ b/web-react/src/pages/dashboard/StudentDashboardPage.tsx
@@ -11,7 +11,6 @@ import { Alert, Button, Skeleton } from 'antd'
 import { useQuery } from '@tanstack/react-query'
 import http from '../../api/http'
 import { useAuthStore } from '../../stores/auth'
-import { openLegacy } from './legacy'
 
 interface Slot { periodNumber: number; startsAt: string; endsAt: string }
 interface Course {
@@ -106,7 +105,7 @@ export default function StudentDashboardPage() {
       </section>
       {data.failed.length > 0 && <Alert type="warning" showIcon message={`${data.failed.join('、')}暂时无法加载，其余内容不受影响。`} />}
       <section className={`risk-strip${warnings.length ? ' risk-strip--attention' : ''}`}>
-        <ExclamationCircleOutlined /><div><span>学业风险雷达</span><strong>{warnings.length ? `有 ${warnings.length} 项学习风险需要关注` : '当前没有需要处理的学业风险'}</strong><small>{warnings[0]?.detail ?? '继续保持当前学习节奏。'}</small></div><Button type="link" onClick={() => openLegacy('/warnings')}>查看全部 <RightOutlined /></Button>
+        <ExclamationCircleOutlined /><div><span>学业风险雷达</span><strong>{warnings.length ? `有 ${warnings.length} 项学习风险需要关注` : '当前没有需要处理的学业风险'}</strong><small>{warnings[0]?.detail ?? '继续保持当前学习节奏。'}</small></div><Button type="link" onClick={() => window.location.assign('/next/warnings')}>查看全部 <RightOutlined /></Button>
       </section>
       <section className="role-dashboard__grid">
         <article className="role-panel role-panel--wide">
@@ -118,8 +117,8 @@ export default function StudentDashboardPage() {
           {data.notices.length ? <div className="compact-list">{data.notices.slice(0, 4).map((item) => <button className={!item.isRead ? 'is-unread' : ''} key={item.id} onClick={() => window.location.assign('/next/notifications')}><div><span>{noticeLabels[item.category] ?? '系统消息'} · {item.senderName}</span><strong>{item.title}</strong><small>{item.content}</small></div></button>)}</div> : <Empty icon={<BellOutlined />} title="暂无消息" detail="新的教务通知会显示在这里。" />}
         </article>
         <article className="role-panel">
-          <header><div><span><CalendarOutlined /> UPCOMING</span><h2>近期考试</h2></div><Button type="link" onClick={() => openLegacy('/exams')}>全部 <RightOutlined /></Button></header>
-          {exams.length ? <div className="compact-list exam-list">{exams.map((item) => <button key={item.id} onClick={() => openLegacy('/exams')}><time>{new Intl.DateTimeFormat('zh-CN', { month: 'numeric', day: 'numeric' }).format(dateOnly(item.examDate)!)}</time><div><span>{item.courseCode} · {time(item.startsAt)}—{time(item.endsAt)}</span><strong>{item.courseName}</strong><small>{[item.buildingName, item.classroomName].filter(Boolean).join(' · ') || '考场待定'}</small></div></button>)}</div> : <Empty icon={<CalendarOutlined />} title="近期没有考试" detail="已发布的考试安排会显示在这里。" />}
+          <header><div><span><CalendarOutlined /> UPCOMING</span><h2>近期考试</h2></div><Button type="link" onClick={() => window.location.assign('/next/exams')}>全部 <RightOutlined /></Button></header>
+          {exams.length ? <div className="compact-list exam-list">{exams.map((item) => <button key={item.id} onClick={() => window.location.assign('/next/exams')}><time>{new Intl.DateTimeFormat('zh-CN', { month: 'numeric', day: 'numeric' }).format(dateOnly(item.examDate)!)}</time><div><span>{item.courseCode} · {time(item.startsAt)}—{time(item.endsAt)}</span><strong>{item.courseName}</strong><small>{[item.buildingName, item.classroomName].filter(Boolean).join(' · ') || '考场待定'}</small></div></button>)}</div> : <Empty icon={<CalendarOutlined />} title="近期没有考试" detail="已发布的考试安排会显示在这里。" />}
         </article>
       </section>
     </main>
diff --git a/web-react/src/pages/student-learning.css b/web-react/src/pages/student-learning.css
new file mode 100644
index 0000000..0419442
--- /dev/null
+++ b/web-react/src/pages/student-learning.css
@@ -0,0 +1,91 @@
+.learning-page { gap: 16px; }
+.learning-ledger { min-width: 168px; padding: 13px 16px; display: grid; grid-template-columns: 1fr auto; gap: 3px 16px; border-left: 3px solid var(--teal); background: var(--teal-soft); }
+.learning-ledger span { color: var(--teal); font: 700 9px var(--font-data); letter-spacing: .14em; }
+.learning-ledger strong { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--teal); font: 700 31px/1 var(--font-data); }
+.learning-ledger small { color: #657872; font-size: 9px; }
+.learning-ledger.is-attention { border-color: var(--amber); background: var(--amber-soft); }
+.learning-ledger.is-attention span, .learning-ledger.is-attention strong { color: #9a6419; }
+.exam-timeline { display: grid; gap: 14px; }
+.exam-timeline > article { display: grid; grid-template-columns: 185px minmax(0, 1fr); border: 1px solid var(--line); background: var(--paper); box-shadow: 0 8px 22px rgba(22,40,88,.045); }
+.exam-date-block { padding: 20px; display: grid; grid-template-columns: 1fr auto; align-content: center; color: white; background: linear-gradient(145deg, var(--brand-deep), var(--brand)); }
+.exam-date-block span { grid-column: 1 / -1; color: #c8d3e9; font-size: 11px; }
+.exam-date-block strong { margin-top: 13px; color: var(--teal-bright); font: 700 36px/1 var(--font-data); }
+.exam-date-block small { align-self: end; color: #aebcda; font-size: 8px; }
+.exam-card { padding: 20px 23px; }
+.exam-card header, .exam-card footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
+.exam-card header > div { display: flex; gap: 7px; align-items: center; color: var(--ink-muted); font-size: 10px; }
+.exam-card time { color: var(--teal); font: 700 11px var(--font-data); }
+.exam-card h2 { margin: 12px 0 4px; color: var(--brand-deep); font: 600 19px var(--font-display); }
+.exam-card > p { margin: 0 0 16px; color: var(--ink-muted); font: 10px var(--font-data); }
+.exam-card footer { justify-content: flex-start; color: #637085; font-size: 10px; }
+.exam-card footer span { padding-right: 14px; border-right: 1px solid var(--line); }
+.exam-card footer span:last-child { border-right: 0; }
+.exam-card footer b { color: var(--amber); font: 700 15px var(--font-data); }
+.learning-empty { min-height: 300px; display: grid; place-items: center; border: 1px solid var(--line); background: white; }
+.history-panel, .grade-list, .warning-list, .risk-progress { border: 1px solid var(--line); background: white; }
+.history-panel > header, .risk-progress > header { padding: 18px 21px; border-bottom: 1px solid var(--line); }
+.history-panel header span, .risk-progress header span { color: var(--teal); font: 700 9px var(--font-data); letter-spacing: .13em; }
+.history-panel h2, .risk-progress h2 { margin: 6px 0 0; color: var(--brand-deep); font: 600 17px var(--font-display); }
+.history-panel > div { display: grid; grid-template-columns: repeat(3, 1fr); }
+.history-panel article { padding: 16px 20px; display: grid; gap: 5px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
+.history-panel time, .history-panel span { color: var(--ink-muted); font-size: 9px; }
+.history-panel strong { color: var(--ink-strong); font-size: 12px; }
+.academic-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
+.academic-metrics article { padding: 18px; border-left: 3px solid var(--teal); background: #f7faf9; }
+.academic-metrics span, .academic-metrics small { color: #69778a; font-size: 10px; }
+.academic-metrics strong { display: block; margin: 9px 0 5px; color: var(--brand-deep); font: 700 25px var(--font-data); }
+.term-summary { display: grid; grid-template-columns: 1.4fr repeat(3, .6fr); color: white; background: linear-gradient(108deg, var(--brand-deep), var(--brand) 76%, #176b6c); }
+.term-summary > div { min-height: 82px; padding: 16px 20px; display: grid; align-content: center; border-right: 1px solid rgba(255,255,255,.13); }
+.term-summary span, .term-summary small { color: #b9c6df; font-size: 9px; }
+.term-summary strong { margin-top: 6px; color: var(--teal-bright); font: 700 22px var(--font-data); }
+.grade-list { padding: 0 22px; }
+.grade-list > article { min-height: 142px; padding: 20px 0; display: grid; grid-template-columns: minmax(210px, 1fr) minmax(180px, 1.1fr) 95px; gap: 22px; align-items: center; border-bottom: 1px solid var(--line); }
+.grade-course span { color: var(--teal); font: 9px var(--font-data); }
+.grade-course h2 { margin: 7px 0 5px; color: var(--brand-deep); font-size: 15px; }
+.grade-course p { margin: 0; color: var(--ink-muted); font-size: 9px; }
+.score-scale { height: 2px; background: linear-gradient(90deg, #d05b4d 0 60%, var(--amber) 60% 85%, var(--teal) 85%); position: relative; }
+.score-scale i { position: absolute; inset: -5px 40% -5px auto; border-left: 1px solid rgba(255,255,255,.8); }
+.score-scale span { padding: 3px 5px; color: white; background: var(--brand-deep); font: 700 9px var(--font-data); transform: translate(-50%, -50%); position: absolute; top: 50%; }
+.grade-result { display: grid; justify-items: end; gap: 4px; }
+.grade-result strong { color: var(--teal); font: 700 27px var(--font-data); }
+.grade-result.is-failed strong { color: var(--danger); }
+.grade-result small { color: var(--ink-muted); font-size: 9px; }
+.grade-formula { grid-column: 1 / -1; padding: 9px 12px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; color: #657286; background: #f7f8fa; font-size: 9px; }
+.grade-formula > .anticon { color: var(--teal); }
+.grade-formula span { padding-right: 12px; border-right: 1px solid var(--line); }
+.grade-formula b { margin-right: 5px; color: #34445a; }
+.warning-radar { min-height: 88px; padding: 17px 20px; display: flex; gap: 16px; align-items: center; border-left: 3px solid var(--teal); background: var(--teal-soft); }
+.warning-radar > .anticon { color: var(--teal); font-size: 24px; }
+.warning-radar span { color: var(--teal); font: 700 9px var(--font-data); letter-spacing: .12em; }
+.warning-radar strong { display: block; margin: 5px 0; color: #284843; font-size: 13px; }
+.warning-radar p { margin: 0; color: #687b77; font-size: 10px; }
+.warning-radar.is-attention { border-color: var(--amber); background: var(--amber-soft); }
+.warning-radar.is-attention > .anticon, .warning-radar.is-attention span { color: #9a6419; }
+.warning-list { padding: 0 20px; }
+.warning-list > article { padding: 18px 2px; display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; border-bottom: 1px solid var(--line); }
+.warning-list > article.is-active { border-left: 3px solid var(--amber); padding-left: 15px; }
+.warning-list article > div { display: flex; gap: 5px; }
+.warning-list h2 { grid-column: 1; margin: 4px 0 0; color: var(--ink-strong); font-size: 13px; }
+.warning-list p, .warning-list blockquote { grid-column: 1; margin: 0; color: var(--ink-muted); font-size: 10px; }
+.warning-list blockquote { padding: 8px 10px; border-left: 2px solid var(--line-strong); background: #f8f9fa; }
+.warning-list .ant-btn { grid-column: 2; grid-row: 1 / 4; align-self: center; }
+.risk-progress > header p { margin: 5px 0 0; color: var(--ink-muted); font-size: 10px; }
+.risk-progress > article { padding: 20px 22px; border-bottom: 1px solid var(--line); }
+.risk-case-summary { margin-bottom: 17px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; color: var(--ink-muted); font-size: 10px; }
+.risk-progress .ant-timeline { margin: 12px 8px 0; }
+.risk-progress .ant-timeline p { margin: 5px 0; white-space: pre-wrap; color: var(--ink); font-size: 11px; }
+.risk-progress .ant-timeline small { color: var(--ink-muted); font-size: 9px; }
+.ack-comment { margin-top: 18px; display: grid; gap: 8px; color: var(--ink); font-size: 11px; }
+@media (max-width: 760px) {
+  .exam-timeline > article { grid-template-columns: 1fr; }
+  .exam-date-block { grid-template-columns: 1fr auto; }
+  .history-panel > div, .academic-metrics { grid-template-columns: 1fr; }
+  .term-summary { grid-template-columns: 1fr 1fr; }
+  .grade-list { padding-inline: 15px; }
+  .grade-list > article { grid-template-columns: 1fr 76px; gap: 14px; }
+  .score-scale { grid-column: 1 / -1; grid-row: 2; }
+  .grade-result { grid-column: 2; grid-row: 1; }
+  .grade-formula { grid-column: 1 / -1; }
+  .warning-list > article { grid-template-columns: 1fr; }
+  .warning-list .ant-btn { grid-column: 1; grid-row: auto; justify-self: start; }
+}