28 KiB
备考中枢 · 页面设计提示词（Phase 2 设计细化）
版本：v1.0 · 2026-08-26 供前端开发直接引用。前端以
design-tokens.json/design-tokens.css为唯一 token 来源，禁止硬编码颜色/圆角/阴影。 双端：桌面 1440×900（左侧 Sidebar + 主内容）/ 移动 390×844（底部 TabBar + 卡片流）。移动优先。
0. 全局约定（跨页面通用）
0.1 图标系统（锁定 lucide-vue-next，SVG 线性图标）
全项目统一使用 lucide-vue-next 一套 SVG 图标库，禁用 emoji 作功能图标。图标语义映射如下，前端按此引用。
| 操作/语义 | 图标（lucide） | 尺寸 | 颜色 |
|---|---|---|---|
| 新增 / 录入 / 发布（主操作） | Plus |
20px | on-accent 或 primary |
| 导入真题 / 订阅推送 | Upload |
20px | primary |
| 导出报告 / 下载 | Download |
20px | primary |
| 开始刷题 / 播放 | Play |
20px | on-accent / primary |
| 完成 / 打卡 / 已掌握 | Check / CheckCircle2 |
20px | success |
| 学习时长 / 计时 | Clock |
16px | text-secondary |
| 目标分 / 目标 | Target |
20px | primary |
| 趋势上升 / 周报复盘 | TrendingUp |
20px | success |
| 折线趋势图 / 统计 | LineChart |
20px | primary |
| AI 讲解 / 智能 | Sparkles |
16px | primary |
| 编辑 / 修改 | Pencil |
16px | text-secondary |
| 删除 / 清除 | Trash2 |
16px | danger |
| 筛选 / 全部 | Filter |
16px | text-secondary |
| 更多 / 进入 | ChevronRight |
16px | text-muted |
| 展开子菜单 | ChevronDown |
16px | text-secondary |
| 返回 | ArrowLeft |
24px | text-primary |
| 顺序箭头 / 下一步 | ArrowRight |
16px | text-secondary |
| 数据中枢 / 首页 | LayoutGrid |
20px | sidebar: text-secondary / active: white |
| 刷题中心 | BookOpen |
20px | 同上 |
| 错题本 / 申论 | BookMarked |
20px | 同上 |
| 模考分析 / 分析 | BarChart3 |
20px | 同上 |
| 备考计划 / 今日任务 | CalendarCheck |
20px | 同上 |
| 要闻 | Newspaper |
20px | 同上 |
| 我的 / 设置 | User / Settings |
20px | 同上 |
| 题库管理 | Library |
20px | sidebar 归属 |
| 学习提醒 | Bell |
20px | text-secondary |
| 隐私 / 数据安全 | ShieldCheck |
20px | text-secondary |
| 外观主题 | Palette |
20px | text-secondary |
| 发布公告 | Megaphone |
20px | on-accent |
| 更多操作（…） | MoreHorizontal |
20px | text-secondary |
| 重做错题 | RefreshCw |
16px | text-secondary |
| 变式练习 | Copy |
16px | text-secondary |
| 排序 | List / ListChecks |
16px | text-secondary |
| 正确答案（对） | Check |
16px | success |
| 回答错误（错） | XCircle |
20px | danger |
| 题干考点标记 | Flag |
14px | text-muted |
图标规则：线性、stroke 1.5–2px、默认
text-secondary(#6B7280)，选中/高亮态换primary或白。图标不替代关键文字，文字标签始终保留。
0.2 常用组件 recipe（引用 design-tokens.css 的 hub-* 类）
- 标准白卡
.hub-card：bg-card + 1px border-subtle + radius-lg + 内边距桌面 24/移动 16。 - Hero 数据卡
.hub-card-hero：--gradient-hero-deep+ radius-lg + 白字。 - 主按钮
.hub-btn-primary：primary 底 + on-accent 字 + radius-btn + 40px 高；hover 背景混合黑 8%。 - 次按钮
.hub-btn-secondary：透明 + primary 描边 + primary 字 + radius-btn + 40px。 - 语义徽章
.hub-badge--{success|warning|danger|soft}：主色字 + 浅底成对出现。
0.3 通用状态（每页必须具备）
- 空态：说明文字 + 引导 CTA（如「去刷第一组题」），图标用
BookMarked等语义图标 +bg-soft圆形底。 - 加载态：卡片用骨架屏（bg-soft 占位块 + 微光动画），数字用
--fs-data-num空占位。 - 错误态：字段级错误
danger文字 + 近字段提示；整页错误用dangerSoft底 +danger图标 + 重试按钮。
1. 数据中枢（/）· 首页
1.1 布局描述
- 桌面：左侧 Sidebar（220px）高亮「数据中枢」；主区顶部页面标题
H1 数据中枢+ 副标题（备考天数/距国考/连续打卡）；右上「今日已打卡」胶囊 +「开始刷题」主按钮。下方 4 张统计卡并列 + 中部「模考成绩趋势」折线卡（左）+「今日任务」卡（右）+「模块掌握度」进度条卡（左）+「本周薄弱考点」卡（右）。 - 移动：无 Sidebar，顶部问候语「早上好，备考人」+ 深蓝 hero 大卡（备考天数/距离国考/今日学习圆环/今日刷题/今日任务）；下方 4 个快捷入口方块（开始刷题/错题复盘/申论练习/今日计划）；再下方「待复习错题」「最近模考」卡片流；底部 TabBar 高亮「首页」。
1.2 核心组件清单
| 组件 | 职责 |
|---|---|
StatsOverviewGrid |
聚合五要素统计卡（今日学习时长/今日刷题/今日正确率/待复习错题/今日任务）——桌面 4 卡 + 移动 hero 圆环 |
StudyTimeHero（移动） |
今日学习时长大字（--fs-data-num）+ 正确率圆环（success 填充）+ 任务进度 |
ExamCountdownHero |
备考天数/已完xx% + 距国考天数（深蓝渐变底 + 白字） |
MockTrendCard |
近 N 次模考总分折线趋势图（LineChart 语义）+「稳定上升」徽章 |
TodayTaskCard |
今日任务清单（完成/待办）+「查看全部」→链接任务页 |
ModuleMasteryCard |
各模块掌握度横向进度条（primary 填充 + 百分比） |
WeakPointCard |
本周薄弱考点（错因×考点归因，语义色进度条 + 次数） |
QuickEntryGrid（移动） |
4 个快捷入口方块 |
RecenMockCard（移动） |
最近模考卡（总分 + 较上次涨跌 + 距目标） |
1.3 关键状态
- 空态：全部数据为 0 时，hero 显示「开始录入真题」引导 + 主按钮「去题库录入」。
- 加载态：五要素卡骨架屏。
- 常态：题目数据来自
GET /api/v1/stats/overview，mock 数据来自GET /api/v1/mock-exams，任务来自GET /api/v1/tasks。 - 无数据子态：模考 <2 次时趋势图显示「录入 2 次模考后可查看趋势」占位；薄弱考点无数据时显示空态卡片。
1.4 数据来源
GET /api/v1/stats/overview（五要素聚合）｜GET /api/v1/mock-exams（最近模考）｜GET /api/v1/tasks（今日任务）｜GET /api/v1/stats/module（模块掌握度）｜GET /api/v1/stats/overview.wrongCount（待复习错题）
1.5 引用的设计 Token
--gradient-hero-deep、--primary、--primary-deep、--text-primary、--text-secondary、--success、--success-soft、--danger、--danger-soft、--warning-soft、--radius-lg、--radius-xl、--card-padding-desktop/mobile、--shadow-level-2（TabBar）、--fs-data-num、--fs-h1、--fs-card-title
2. 题库录入（/question-entry）· 题库管理
2.1 布局描述
- 桌面：左区「表单卡」——题型分段切换（单选/多选/判断）→ 模块/考点两级下拉 → 题干 textarea → 选项列表（可增删）→ 正确答案标记 → 「保存题目并继续录入」主按钮；右区「题目预览」卡——实时渲染录入效果（题干 + 选项 + 正确答案高亮 + 答案解析）。右上「导入真题」「新增题目」按钮。
- 移动：单列表单卡，自上而下：题型切换 → 模块/考点 → 题干 → 选项 → 答案 → 解析 → 底部粘性「保存」主按钮；点击保存后返回列表。
2.2 核心组件清单
| 组件 | 职责 |
|---|---|
QuestionForm |
题干/选项/答案/解析/模块/考点/来源完整表单（zod 校验） |
SegmentSwitch |
题型分段切换（单选/多选/判断），--bg-soft 底 + 选中 primary 圆角胶囊 |
ModulePointSelect |
模块/考点两级下拉（考点可新增自定义） |
OptionListEditor |
选项增删、正确项标记（Check），正确项高亮 primary 描边 |
BulkPasteModal |
批量粘贴录入（剪贴板解析快捷填充） |
QuestionPreview（桌面） |
右侧实时预览渲染（录入即所见） |
SourceField |
题目来源（如「2025 国考」+ 年份） |
2.3 关键状态
- 空态：列表为空显示「还没有题目，点击新增录入」。
- 表单校验态：字段缺失/不合规时近字段
danger错误提示（对应 AC-02 返回 42200）。 - 保存态：提交时按钮 loading；成功后 toast「已保存」并清空/继续录入（
--success反馈）。 - 常态：
GET /api/v1/questions（筛选/分页）｜POST /api/v1/questions（新建）｜PATCH /api/v1/questions/{id}（更新）。
2.4 数据来源
POST /api/v1/questions（创建）｜GET /api/v1/questions（列表）｜GET /api/v1/questions/{id}（详情）｜PATCH /api/v1/questions/{id}｜POST /api/v1/questions/import（导入真题）｜GET /api/v1/questions/export（导出）
2.5 引用的设计 Token
--bg-card、--bg-soft、--border-subtle、--primary、--primary-deep、--text-primary、--text-secondary、--success、--success-soft、--danger、--radius-md、--radius-sm、--radius-btn、--card-padding-desktop/mobile、--fs-label、--fs-body、--fs-button
3. 刷题中心（/practice）· 刷题态/结果态/错因弹窗
3.1 布局描述
- 刷题选择态（桌面/移动一致）：顶部
H1 刷题中心+ 副标题「选择模块，碎片时间刷题」；右上「自定义组卷」「开始刷题」。主区「选择模块」横向卡片（言语理解/数量关系/判断推理/资料分析/常识判断，含题量+掌握度，选中 primary 描边 + 勾）；「碎片组卷时长」胶囊（5 分钟约 5 题/10 分钟约 10 题/15 分钟约 15 题，选中 primary 底白字）；「开始刷题 · 15分钟 · 言语理解」长主按钮；下方「错因分布（近 30 天）」「待复习错题」「推荐动作」。 - 刷题作答态（移动）：顶栏「第 3 题 / 共 15 题」+ 进度条 + 计时（
01:24warning 色）+ 更多；题干卡（含模块/考点标签）；选项列表（点击选中 primary 描边）；底部「提交答案」主按钮。 - 结果态（移动，答错）：红色反馈横幅
danger底「回答错误 · 正确答案是 D · 自动收录错题本」；对比卡（你的答案 C（danger）/ 正确答案 D（success）/ 用时 52 秒）；解析卡；「没看懂？让 AI 讲一讲」次按钮；「标记错因（可多选）」胶囊；「下一题（第 4 题）」主按钮。 - 错因弹窗：答错后弹出/内联展开，错因多选胶囊（审题失误/计算失误/公式遗忘/思路偏差/知识点遗忘），选中 primary 底白字，提交后写入错题本。
3.2 核心组件清单
| 组件 | 职责 |
|---|---|
ModuleSelectCard |
模块选择卡（题量 + 掌握度，选中态 primary 描边 + CheckCircle2 勾） |
DurationPill |
碎片时长胶囊（5/10/15 分钟，选中 primary 底白字） |
StartPracticeButton |
「开始刷题 · N分钟 · 模块」长主按钮（汇总当前选择） |
QuestionCarousel |
题干 + 模块/考点标签 + 选项渲染（单选/多选/判断） |
AnswerSheet |
答题卡（题号网格，已答/未答状态） |
TimerDisplay |
计时器（临近超时换 warning 色） |
ResultFeedbackBanner |
对/错反馈横幅（对 success 底 / 错 danger 底 + XCircle） |
AnswerCompareCard |
你的答案/正确答案/用时对比 |
AnalysisCard |
解析展示 + 「没看懂？让 AI 讲一讲」（Sparkles） |
WrongReasonSelector |
错因多选胶囊（审题/计算/公式/思路/知识点） |
NextQuestionButton |
下一题主按钮 |
PracticeSummary |
本次组卷整体正确率/用时汇总 |
3.3 关键状态
- 抽题态：
POST /api/v1/practice/draw（按模块/错题优先/随机，返回不重复题集，对应 AC-03）。 - 判定态：
POST /api/v1/practice/submit—— 判对错、返回解析；答错自动写错题本（对应 AC-04/AC-05）。 - 错题收录态：答错后自动入错题本，弹出错因标记（对应 AC-05/AC-06）。
- 空态：所选范围无题 → 提示「该模块暂无题目，去题库录入」。
- 加载态：抽题时骨架屏。
3.4 数据来源
POST /api/v1/practice/draw（抽题）｜POST /api/v1/practice/submit（提交作答+判定）｜GET /api/v1/wrong-questions（待复习错题）｜GET /api/v1/stats/overview（错因分布聚合）
3.5 引用的设计 Token
--primary、--primary-bright、--primary-deep、--bg-card、--bg-soft、--border-subtle、--text-primary、--text-secondary、--success、--success-soft、--danger、--danger-soft、--warning、--warning-soft、--radius-md、--radius-pill、--fs-toggle、--fs-body、--fs-data-num、--fs-button
4. 错题本（/wrong-questions）· 含错因筛选 + 考点归因
4.1 布局描述
- 桌面：
H1 刷题中心+ 副标题「错题归因，逐个击破」；顶部 Tab「刷题 / 错题本 / 申论」选中错题本；右上「错题重做」「开始消除」。主区「错因分布」卡（各错因计数+占比，语义色）；「最近错题」双列卡片流——每张卡含：模块/考点标签 + 错因标签 + 题干摘要 + 日期 + 「AI 讲解」胶囊 + 「重做 / 变式」次操作。 - 移动：
H1 行测刷题+ Tab「刷题/错题本/申论」；「错题本」标题 + 「全部→」筛选入口；「错因分布」卡（24 知识点遗忘 38% / 18 审题失误 28% / 14 思路不清 22%）；「最近错题」单列卡片流（含模块标签 + 错因标签 + 日期 + AI 讲解 + 重做/变式）。
4.2 核心组件清单
| 组件 | 职责 |
|---|---|
PracticeTab |
「刷题 / 错题本 / 申论」三段切换 |
WrongReasonDistributionCard |
错因分布（计数 + 占比，语义色进度条） |
WrongReasonFilter |
错因筛选（知识点遗忘/审题失误/思路不清/公式遗忘/… 多选胶囊） |
WrongQuestionCard |
错题卡（模块/考点 + 错因标签 + 题干摘要 + 日期 + AI讲解 + 重做/变式） |
WrongDetailDrawer（移动） |
错题详情（题干/正确答案/解析/作答历史） |
ResolveButton |
标记已掌握/移除（CheckCircle2 → 移出错题本） |
WrongPointAttribution |
考点归因（按考点 × 错因交叉统计） |
TopWrongPointCard |
本周薄弱考点（语义色进度条 + 次数） |
RePracticeButton |
「错题重做」主按钮（触发按错题优先抽题） |
4.3 关键状态
- 空态：无错题时（原型移动-空状态-错题本.png）——图标
BookMarked+ 圆形bg-soft底 +「还没有错题 / 答错的题目会自动收集到这里 / 并帮你标注错因」+ 主按钮「去刷第一组题」。 - 筛选态：按错因多选筛选后列表实时更新；无匹配显示空态。
- 打标签态：
PATCH /api/v1/wrong-questions/{id}支持多选且可事后修改（对应 AC-06）。 - 掌握态：
POST /api/v1/wrong-questions/{id}/resolve标记已掌握/移除。
4.4 数据来源
GET /api/v1/wrong-questions（错题列表）｜PATCH /api/v1/wrong-questions/{id}（打错因/更新）｜POST /api/v1/wrong-questions/{id}/resolve（移除/标记已掌握）｜GET /api/v1/stats/overview（错因分布聚合）
4.5 引用的设计 Token
--bg-card、--bg-soft、--border-subtle、--primary、--text-primary、--text-secondary、--text-muted、--success、--success-soft、--warning、--warning-soft、--danger、--danger-soft、--radius-lg、--radius-md、--radius-pill、--fs-card-title、--fs-label、--fs-data-num、--fs-trend
5. 模考分析（/mock-exam）· 录入 + 趋势图
5.1 布局描述
- 桌面：
H1 模考分析+ 副标题「跟踪每次模考成绩，定位薄弱项」；右上「导出报告」「录入成绩」。3 张汇总卡（最近模考 71 分 ↑ / 行测总分 76.4/100 正确率 78% / 距目标 80 分 3.6 分红字）；「模考成绩趋势」大折线卡；右侧「最近模考」列表卡。 - 移动：
H1 模考分析+ 副标题「录入 8 场模考 · 最新 68.5 分」；「＋录入成绩」主按钮；「成绩趋势」卡（近 8 场总分折线 + 「稳定上升TrendingUp」success 徽章 + 日期刻度）；「模块表现」卡（正确率×用时进度条，success/warning/danger 语义色）；下方「目标差距」卡。 - 录入页（移动-模考成绩录入.png）：
H1 录入模考成绩表单——考试名称（如「粉笔模考 第 45 季」）、考试日期（calendar图标）、行测总分、分模块得分（言语理解/判断推理/资料分析/数量关系/常识判断，--bg-soft填充输入框）；底部「保存成绩」主按钮。
5.2 核心组件清单
| 组件 | 职责 |
|---|---|
MockTrendChart |
总分/分模块纵向趋势折线（可切换模块） |
ModulePerformanceBar |
分模块正确率×用时横向进度条（语义色） |
MockSummaryCard |
最近模考/行测总分/距目标 3 张汇总卡 |
MockEntryForm |
录入表单（名称/日期/总分/分模块得分/排名可选） |
ScoreCompare |
较上次涨跌（↑ success / ↓ danger + --fs-trend） |
GoalGapCard |
距目标分差距（未达标红字） |
ExportReportButton |
导出报告（Download） |
5.3 关键状态
- 空态（原型移动-空状态-模考分析.png）：无模考记录 → 图标 +「录入 2 次模考后可查看趋势」+ 主按钮「＋ 录入成绩」。
- 录入态：
POST /api/v1/mock-exams保存完整记录；字段缺失返回 42200。 - 趋势态：有效记录 ≥2 次时展示总分与分模块趋势图（对应 AC-08）。
- 常态：
GET /api/v1/mock-exams列表 +GET /api/v1/stats/module（模块表现聚合）。
5.4 数据来源
POST /api/v1/mock-exams（录入）｜GET /api/v1/mock-exams（列表）｜GET /api/v1/mock-exams/{id}｜PATCH /api/v1/mock-exams/{id}｜DELETE /api/v1/mock-exams/{id}｜GET /api/v1/stats/module（模块表现）｜GET /api/v1/stats/monthly-report（月度报告）
5.5 引用的设计 Token
--bg-card、--bg-soft、--border-subtle、--primary、--primary-bright、--primary-deep、--success、--success-soft、--warning、--warning-soft、--danger、--danger-soft、--text-primary、--text-secondary、--radius-lg、--radius-md、--radius-btn、--fs-data-num、--fs-h1、--fs-label、--fs-trend
6. 备考计划（/task）
6.1 布局描述
- 桌面：
H1 备考计划+ 副标题「安排阶段任务，稳步推进备考进度」；右上「周报复盘」「新建任务」。4 张汇总卡（本周任务 12 项已完成 7 / 本周学习时长 8 小时 35 分 / 本周完成率 58% / 连续打卡 12 天）；「今日任务」大卡（任务列表 + 时段标签 + 完成勾选）；右侧「本周安排」卡（言语专项·周一/数量专项·周三/大作文·周五）。 - 移动：
H1 今日计划+ 副标题「8月25日 周二 · 完成 3/5 项」；任务列表卡（每项含模块任务 + 时段胶囊早 7-9/午间/晚 19:30/晚 + 完成勾选CheckCircle2）；「本周计划」卡（第 12 周 · 刷题 180 题/目标 250 题 + 72% 进度条）；「明日预告」卡（上午·预计 45 分钟 / 晚上·预计 60 分钟）。 - 空态（原型移动-空状态-计划.png）：无任务 → 图标 +「暂无计划」+ 主按钮「新建任务」。
6.2 核心组件清单
| 组件 | 职责 |
|---|---|
TaskSummaryGrid |
本周任务/时长/完成率/连续打卡 4 卡 |
TodayTaskList |
今日任务清单（任务 + 时段标签 + 完成勾选） |
TimeSlotPill |
早/午/晚时段胶囊（--bg-soft 底 + 选中 primary） |
TaskItem |
单任务项（模块任务 title + 时段 + 完成态 success 勾） |
WeeklyPlanCard |
本周计划进度（刷题 180/250 · 72% 进度条） |
TomorrowPreviewCard |
明日预告任务列表 |
TaskCreateModal |
新建任务（场景化：刷题/模考/申论/复习 + 时段） |
TaskEditor |
编辑/完成任务（PATCH /api/v1/tasks/{id}） |
6.3 关键状态
- 空态：无任务显示「暂无计划」+ 引导创建。
- 完成态：勾选任务 →
PATCH /api/v1/tasks/{id}标记完成 → 进度条/完成率实时更新（对应 AC-11）。 - 常态：
GET /api/v1/tasks（今日/全部列表）+ 时段分组。 - 创建态：
POST /api/v1/tasks保存任务（含时段标签）。
6.4 数据来源
GET /api/v1/tasks（今日/全部）｜POST /api/v1/tasks（创建）｜PATCH /api/v1/tasks/{id}（更新/完成）｜DELETE /api/v1/tasks/{id}（删除）｜GET /api/v1/stats/daily（学习时长）
6.5 引用的设计 Token
--bg-card、--bg-soft、--border-subtle、--primary、--primary-deep、--success、--success-soft、--warning-soft、--text-primary、--text-secondary、--radius-lg、--radius-md、--radius-pill、--fs-h1、--fs-card-title、--fs-data-num、--fs-label
7. 设置（/settings）
7.1 布局描述
- 桌面：
H1 设置+ 副标题「调整偏好、通知与数据策略」；右上「保存设置」。设置卡分组：「偏好设置」卡（每日提醒时间 09:00 / 题库难度偏好 中等 / 默认答题时长 15 分钟）；「通知」卡（学习提醒 已开启 / 模考成绩推送 关闭）；「关于与版本」卡（备考中枢 v1.0.0 / 个人备考数据中枢·数据归你所有 / 更新日志）。 - 移动（原型移动-我的.png）：
H1 我的；顶部用户卡（头像「备」+ 备考人 + 国考+省考 + 备考 86 天徽章）；「设置」列表（目标分数设置 当前目标 72 分 / 外观主题 跟随系统·浅色·深色Palette/ 学习提醒Bell/ 隐私设置ShieldCheck）。
7.2 核心组件清单
| 组件 | 职责 |
|---|---|
PreferenceForm |
每日提醒时间/题库难度/默认答题时长 |
NotificationToggle |
学习提醒/模考推送开关（Switch） |
ThemeSelector |
外观主题（跟随系统/浅色/深色，Palette 图标） |
GoalScoreSetting |
目标分数设置（Target） |
ReminderSetting |
学习提醒设置（Bell） |
PrivacyCard |
隐私/数据说明（ShieldCheck） |
VersionCard |
关于与版本 + 更新日志 |
7.3 关键状态
- 常态：
GET /api/v1/settings读取偏好。 - 保存态：
PATCH /api/v1/settings保存设置 → toast 成功反馈。 - 切换态：主题切换即时生效（浅色/深色仅替换 token，参考设计规范 §10）。
7.4 数据来源
GET /api/v1/settings｜PATCH /api/v1/settings｜POST /api/v1/data/export（导出 JSON 备份）｜GET /api/v1/data/export?format=csv（导出 CSV）｜POST /api/v1/data/backup｜POST /api/v1/data/restore
7.5 引用的设计 Token
--bg-card、--bg-soft、--border-subtle、--primary、--text-primary、--text-secondary、--radius-lg、--radius-md、--fs-h1、--fs-card-title、--fs-label、--fs-subtitle
8. 要闻（/news）
8.1 布局描述
- 桌面：
H1 要闻+ 副标题「最新招考资讯与政策动态」；右上「订阅推送」「发布公告」。置顶深蓝渐变公告卡（置顶 + 官方公告徽章 +「2026 年国家公务员考试公告已发布，11月30日笔试」+ 发布日期 + 发布单位）；分类筛选胶囊（全部/公告/政策/时政/申论）；下方资讯列表卡（标题 + 摘要 + 来源 + 日期 + 分类徽章）。 - 移动（原型移动-要闻.png）：
H1 要闻公告+ 副标题「最新招考资讯与政策动态」；分类胶囊（全部选中 primary / 公告 / 政策 / 时政）；置顶深蓝卡；资讯列表卡（标题 + 摘要 + 来源 + 日期 + 分类徽章）。底部 TabBar 高亮「要闻」。
8.2 核心组件清单
| 组件 | 职责 |
|---|---|
NewsCategoryFilter |
分类筛选（全部/公告/政策/时政/申论，选中 primary 胶囊） |
PinnedAnnouncementCard |
置顶官方公告（深蓝渐变 --gradient-hero-deep + 置顶徽章） |
NewsListItem |
资讯条目（标题 + 摘要 + 来源 + 日期 + 分类徽章） |
NewsDetailDrawer |
要闻详情/外链跳转 |
SubscribePushButton |
订阅推送（Bell） |
publishAnnouncementButton |
发布公告（Megaphone） |
8.3 关键状态
- 空态：无资讯显示「暂无考情资讯」。
- 加载态：列表骨架屏。
- 常态：本地数据或外链留存的考情信息（MVP 为本地留存数据，无 backend API，前端内置 mock/JSON）。
8.4 数据来源
要闻属信息留存功能，MVP 无独立 backend API（本地 JSON / 外链）。若后续接入，可在
GET /api/v1/news提供。当前以前端内置数据结构呈现。
8.5 引用的设计 Token
--gradient-hero-deep、--bg-card、--bg-soft、--border-subtle、--primary、--primary-deep、--text-primary、--text-secondary、--warning-soft、--success-soft、--radius-lg、--radius-md、--radius-pill、--fs-h1、--fs-card-title、--fs-label、--fs-subtitle
9. 桌面侧边栏 / 移动 TabBar（全局导航）
9.1 桌面侧边栏
- 宽 220px，白底
bg-card+ 右侧border-subtle；顶部品牌 logo「备考中枢」；导航项高 40px、圆角 10px（--radius-btn）。 - 导航顺序：数据中枢 / 刷题中心（子：刷题、错题本、申论）/ 模考分析 / 备考计划 / 要闻 / 我的 / 题库管理 / 设置。
- 高亮态：选中项
primary底 + 图标/文字白；展开子菜单缩进 36px。 - 图标映射见 §0.1（
LayoutGrid数据中枢 /BookOpen刷题 /BarChart3模考 /CalendarCheck计划 /Newspaper要闻 /User我的 /Library题库 /Settings设置）。
9.2 移动底部 TabBar
- 高 120px（含上下 padding 21px），胶囊底
bg-card描边，--shadow-level-2。 - 5 项：首页（
LayoutGrid）/ 刷题（BookOpen）/ 要闻（Newspaper）/ 分析（BarChart3）/ 我的（User）。 - 选中项
primary圆形胶囊底 + 白图标 + primary 字；未选中灰（text-secondary）。Tab 切换淡入--motion-tab-fade200ms。
9.3 数据来源
导航为前端配置，无 API。
9.4 引用的设计 Token
--bg-card、--border-subtle、--bg-soft、--primary、--text-primary、--text-secondary、--radius-btn、--radius-pill、--sidebar-width-desktop、--tabbar-height-mobile、--shadow-level-2、--motion-tab-fade
10. 排版精规（全页通用，落地必查）
| 场景 | 字号 | 字重 | 字距 | 行高 | 字体 |
|---|---|---|---|---|---|
| 页面 H1 | 24px | 700 | -0.01em | 1.2 | --font-sans |
| 数据大字（数字） | 22px | 700 | 0 | 1.2 | --font-num（Inter Bold 必需） |
| 卡标题 | 15px | 600 | 0 | 1.4 | --font-sans |
| 标签/字段 | 12px | 400 | 0.02em | 1.4 | --font-sans |
| 副标题/摘要 | 13px | 400 | 0 | 1.5 | --font-sans |
| 按钮 | 13px | 600 | 0.02em | 1.4 | --font-sans |
| 趋势指数 | 11px | 500 | 0.02em | 1.4 | --font-sans（色随语义） |
| 正文/题干 | 14px | 400 | 0 | 1.5 | --font-sans |
数字必须用 Inter Bold（
--font-num+ 700），与中文正文区隔，保证统计数字层级清晰。
11. 一致性验收检查（前端开发前置检查）
- 所有颜色通过
var(--xxx)引用 token，无硬编码 hex（--white为唯一白）。 - 图标全部来自 lucide-vue-next，无 emoji 作功能图标。
- 卡片默认「白底 + 1px
--border-subtle描边 +--radius-lg」，不用重阴影（--shadow-level-0）。 - 语义色成对出现（主色 + 浅底），状态反馈不依赖单一颜色。
- H1 24px / 数据大字 22px Inter Bold 严格按 §10 层级。
- 间距为 4px 网格（4/8/12/16/20/24/32）。
- 双端复用同一套 token，桌面 Sidebar / 移动 TabBar 保持一致。