376 lines
28 KiB
Markdown
376 lines
28 KiB
Markdown
# 备考中枢 · 页面设计提示词（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:24` warning 色）+ 更多；题干卡（含模块/考点标签）；选项列表（点击选中 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-fade` 200ms。
|
||
|
||
### 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 保持一致。
|