diff --git a/deliverables/design/design-tokens.css b/deliverables/design/design-tokens.css new file mode 100644 index 0000000..5bd3ff2 --- /dev/null +++ b/deliverables/design/design-tokens.css @@ -0,0 +1,192 @@ +/** + * 备考中枢 · Design Tokens (CSS 变量) + * ===================================================================== + * 版本:v1.0.0 · 2026-08-26 + * 来源:设计规范-备考中枢-20260826.md(Ardot 文件 718570750880145 真实变量校准) + * 说明:本文件与 design-tokens.json 数值完全一致,是前端唯一颜色/排印/ + * 圆角/阴影/间距来源。前端必须引用这些变量,禁止硬编码颜色值。 + * + * 使用方式:前端在 `styles/tokens.css` 中 import 本文件或复制 :root 节, + * 组件内一律 `var(--token-name)` 引用。 + * ===================================================================== + */ + +:root { + /* ------------------------------------------------------------------ + * 1. 颜色 Color + * ------------------------------------------------------------------ */ + + /* 中性底色 Neutral */ + --bg-canvas: #F7F6F2; /* 画布/页面背景(浅米白) */ + --bg-card: #FFFFFF; /* 卡片/面板背景 */ + --bg-soft: #EFEFF5; /* 图标底、次级填充、标签底、进度条轨道 */ + --border-subtle: #E8E6E0; /* 卡片描边、分隔线(中性浅暖) */ + + /* 品牌主色 Brand(深蓝系) */ + --primary: #2B4C8F; /* 主按钮、主色、选中态高亮底、进度填充 */ + --primary-deep: #1B2D5B; /* 渐变深端、页面主标题强调、深蓝 hero 底 */ + --primary-bright: #3A6BD8; /* 渐变亮端、hero 卡片、active 图标 */ + + /* 文字色 Text */ + --text-primary: #1A1F2E; /* 主标题、正文主色 */ + --text-secondary: #6B7280; /* 副标题、描述文字、图标默认色 */ + --text-muted: #9CA2AD; /* 弱提示、占位、次要标记 */ + + /* 语义色 Semantic(状态反馈) */ + --success: #1B9266; /* 正向趋势、正确率、达标 */ + --success-soft: #E0F5EB; /* 正向标签底、打卡徽章底 */ + --warning: #DC9A1E; /* 提醒、中等状态 */ + --warning-soft: #FEF0D1; /* 提醒标签底 */ + --danger: #D14C55; /* 负向、错误、待复习错题数 */ + --danger-soft: #FCE5E7; /* 危险标签底、错误提示底 */ + + /* 前景/辅助 Foreground */ + --on-accent: #FFFFFF; /* 主色/深蓝底上的前景色(按钮文字、深蓝 hero 文字) */ + --white: #FFFFFF; /* 纯白(唯一允许的裸色值) */ + + /* 渐变 Gradients(仅 hero 大卡 / 置顶卡使用) */ + --gradient-hero-deep: linear-gradient(135deg, #1B2D5B 0%, #3A6BD8 100%); /* 首页 hero 卡 / 要闻置顶卡 */ + --gradient-hero-primary: linear-gradient(180deg, #2B4C8F 0%, #1B2D5B 100%); /* 移动首页深蓝 hero */ + + + /* ------------------------------------------------------------------ + * 2. 字体 Font + * ------------------------------------------------------------------ */ + --font-sans: 'Sarasa Gothic SC', 'PingFang SC', sans-serif; /* 中文正文/标题/标签 */ + --font-num: 'Inter', 'SF Pro', sans-serif; /* 统计数字/时间/单价/代码标识 */ + + + /* ------------------------------------------------------------------ + * 3. 排印 Typography + * role = 用途界定;部分 token 的可变字段(如趋势色)由语义色覆盖 + * ------------------------------------------------------------------ */ + --fs-h1: 24px; --fw-h1: 700; --lh-h1: 1.2; --ff-h1: var(--font-sans); /* H1 页面标题 */ + --fs-data-num: 22px; --fw-data-num: 700; --lh-data-num: 1.2; --ff-data-num: var(--font-num); /* 数据大字(Inter Bold) */ + --fs-card-title:15px; --fw-card-title: 600; --lh-card-title: 1.4; --ff-card-title: var(--font-sans); /* 卡标题 */ + --fs-label: 12px; --fw-label: 400; --lh-label: 1.4; --ff-label: var(--font-sans); /* 标签 */ + --fs-label-bold:12px; --fw-label-bold: 600; --lh-label-bold: 1.4; --ff-label-bold: var(--font-sans); /* 强标签/徽章 */ + --fs-subtitle: 13px; --fw-subtitle: 400; --lh-subtitle: 1.5; --ff-subtitle: var(--font-sans); /* 副标题 */ + --fs-button: 13px; --fw-button: 600; --lh-button: 1.4; --ff-button: var(--font-sans); /* 按钮文字 */ + --fs-trend: 11px; --fw-trend: 500; --lh-trend: 1.4; --ff-trend: var(--font-sans); /* 趋势指数 */ + --fs-body: 14px; --fw-body: 400; --lh-body: 1.5; --ff-body: var(--font-sans); /* 正文/题干 */ + + + /* ------------------------------------------------------------------ + * 4. 圆角 Radius + * ------------------------------------------------------------------ */ + --radius-sm: 8px; + --radius-md: 12px; + --radius-lg: 16px; /* 标准卡片(默认) */ + --radius-xl: 24px; /* Hero 渐变大卡 */ + --radius-pill: 999px; /* 头像、胶囊按钮、天数徽章 */ + --radius-btn: 10px; /* 主/次按钮圆角 */ + + + /* ------------------------------------------------------------------ + * 5. 阴影 Shadow + * 默认以「白底 + 细描边(border-subtle)」表达卡片,不用重阴影。 + * ------------------------------------------------------------------ */ + --shadow-level-0: none; + --shadow-level-1: 0 1px 2px rgba(0, 0, 0, 0.04); /* 悬浮态轻投影 */ + --shadow-level-2: 0 4px 12px rgba(27, 45, 91, 0.08); /* 弹层、浮起卡片、TabBar */ + --shadow-level-3: 0 8px 24px rgba(27, 45, 91, 0.14); /* 模态、下拉菜单 */ + + + /* ------------------------------------------------------------------ + * 6. 间距 Spacing(4px 网格) + * ------------------------------------------------------------------ */ + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + + + /* ------------------------------------------------------------------ + * 7. 布局 Layout + * ------------------------------------------------------------------ */ + --sidebar-width-desktop: 220px; + --content-max-width: 1220px; + --padding-desktop: 32px; /* 桌面左右 padding */ + --padding-mobile: 24px; /* 移动左右 padding */ + --card-padding-desktop: 24px; + --card-padding-mobile: 16px; + --card-gap-desktop: 20px; + --card-gap-mobile: 12px; + --tabbar-height-mobile: 120px; /* 移动 TabBar 高度 */ + --btn-height: 40px; + --btn-height-pill: 44px; + + + /* ------------------------------------------------------------------ + * 8. 断点 Breakpoint + * ------------------------------------------------------------------ */ + --bp-mobile: 390px; + --bp-desktop: 1440px; + + + /* ------------------------------------------------------------------ + * 9. 动效 Motion + * ------------------------------------------------------------------ */ + --motion-hover-fast: 120ms; /* 按钮 hover 背景过渡 */ + --motion-card-hover: 160ms; /* 卡片 hover 投影过渡 */ + --motion-switch: 250ms; /* 切换/展开 */ + --motion-tab-fade: 200ms; /* 移动 Tab 切换淡入 */ + --ease-default: ease; +} + + +/* ===================================================================== + * 10. 组件级预设预设(Typographic & Component recipe) + * —— 前端不直接硬编码上述,按此处 recipe 组装组件。 + * ===================================================================== */ + +/* Hero 数据卡(首页 5 要素卡 / 深蓝大卡) */ +.hub-card-hero { + color: var(--on-accent); + background: var(--gradient-hero-deep); + border-radius: var(--radius-lg); + padding: var(--card-padding-desktop); +} + +/* 标准白卡(默认卡片) */ +.hub-card { + background: var(--bg-card); + border: 1px solid var(--border-subtle); + border-radius: var(--radius-lg); + padding: var(--card-padding-desktop); +} + +/* 主按钮 */ +.hub-btn-primary { + background: var(--primary); + color: var(--on-accent); + border-radius: var(--radius-btn); + height: var(--btn-height); + font: var(--fw-button) var(--fs-button) / var(--lh-button) var(--ff-button); + transition: background var(--motion-hover-fast) var(--ease-default); +} +.hub-btn-primary:hover { background: color-mix(in srgb, var(--primary) 92%, #000); } + +/* 次按钮(透明 + primary 描边) */ +.hub-btn-secondary { + background: transparent; + color: var(--primary); + border: 1px solid var(--primary); + border-radius: var(--radius-btn); + height: var(--btn-height); + font: var(--fw-button) var(--fs-button) / var(--lh-button) var(--ff-button); +} + +/* 语义标签 / 徽章(主色 + 浅底成对) */ +.hub-badge { + font: var(--fw-label-bold) var(--fs-label) / var(--lh-label) var(--ff-label); + border-radius: var(--radius-sm); + padding: 2px var(--space-2); +} +.hub-badge--success { color: var(--success); background: var(--success-soft); } +.hub-badge--warning { color: var(--warning); background: var(--warning-soft); } +.hub-badge--danger { color: var(--danger); background: var(--danger-soft); } +.hub-badge--soft { color: var(--text-secondary); background: var(--bg-soft); } diff --git a/deliverables/design/design-tokens.json b/deliverables/design/design-tokens.json new file mode 100644 index 0000000..535eba3 --- /dev/null +++ b/deliverables/design/design-tokens.json @@ -0,0 +1,110 @@ +{ + "$schema": "../spec/token-schema-v1.schema.json", + "meta": { + "name": "备考中枢 Design Tokens", + "version": "1.0.0", + "date": "2026-08-26", + "source": "设计规范-备考中枢-20260826.md (Ardot 文件 718570750880145 真实变量校准)", + "scope": "响应式 Web(移动优先),桌面 1440×900 / 移动 390×844", + "note": "前端唯一颜色/排印/圆角/阴影来源。前端必须引用变量,禁止硬编码。" + }, + "color": { + "bgCanvas": { "value": "#F7F6F2", "type": "color", "role": "画布/页面背景(浅米白)" }, + "bgCard": { "value": "#FFFFFF", "type": "color", "role": "卡片/面板背景" }, + "bgSoft": { "value": "#EFEFF5", "type": "color", "role": "图标底、次级填充、标签底、进度条轨道" }, + "borderSubtle":{ "value": "#E8E6E0", "type": "color", "role": "卡片描边、分隔线(中性浅暖)" }, + + "primary": { "value": "#2B4C8F", "type": "color", "role": "主按钮、主色、选中态高亮底、进度填充" }, + "primaryDeep": { "value": "#1B2D5B", "type": "color", "role": "渐变深端、页面主标题强调、深蓝 hero 底" }, + "primaryBright": { "value": "#3A6BD8", "type": "color", "role": "渐变亮端、hero 卡片、active 图标" }, + + "textPrimary": { "value": "#1A1F2E", "type": "color", "role": "主标题、正文主色" }, + "textSecondary": { "value": "#6B7280", "type": "color", "role": "副标题、描述文字、图标默认色" }, + "textMuted": { "value": "#9CA2AD", "type": "color", "role": "弱提示、占位、次要标记" }, + + "success": { "value": "#1B9266", "type": "color", "role": "正向趋势、正确率、达标" }, + "successSoft": { "value": "#E0F5EB", "type": "color", "role": "正向标签底、打卡徽章底" }, + "warning": { "value": "#DC9A1E", "type": "color", "role": "提醒、中等状态" }, + "warningSoft": { "value": "#FEF0D1", "type": "color", "role": "提醒标签底" }, + "danger": { "value": "#D14C55", "type": "color", "role": "负向、错误、待复习错题数" }, + "dangerSoft": { "value": "#FCE5E7", "type": "color", "role": "危险标签底、错误提示底" }, + + "onAccent": { "value": "#FFFFFF", "type": "color", "role": "主色/深蓝底上的前景色(按钮文字、深蓝 hero 文字)" }, + "white": { "value": "#FFFFFF", "type": "color", "role": "纯白(唯一允许的裸色值,卡片/描边场景)" }, + + "gradients": { + "heroDeep": { "value": "linear-gradient(135deg, #1B2D5B 0%, #3A6BD8 100%)", "type": "gradient", "role": "首页 hero 卡 / 要闻置顶卡(primaryDeep→primaryBright)" }, + "heroPrimary":{ "value": "linear-gradient(180deg, #2B4C8F 0%, #1B2D5B 100%)", "type": "gradient", "role": "移动首页深蓝 hero(primary→primaryDeep)" } + } + }, + + "font": { + "fontSans": { "value": "'Sarasa Gothic SC', 'PingFang SC', sans-serif", "type": "fontFamily", "role": "中文正文/标题/标签" }, + "fontNum": { "value": "'Inter', 'SF Pro', sans-serif", "type": "fontFamily", "role": "统计数字/时间/单价/代码标识" } + }, + + "typography": { + "h1": { "fontSize": "24px", "fontWeight": "700", "lineHeight": "1.2", "fontFamily": "fontSans", "color": "textPrimary", "role": "页面主标题(数据中枢/刷题中心/模考分析/备考计划/设置/要闻)" }, + "dataNum": { "fontSize": "22px", "fontWeight": "700", "lineHeight": "1.2", "fontFamily": "fontNum", "color": "textPrimary", "role": "统计数字核心值(数据大字,数值字体 Inter Bold 必需)" }, + "cardTitle": { "fontSize": "15px", "fontWeight": "600", "lineHeight": "1.4", "fontFamily": "fontSans", "color": "textPrimary", "role": "区块/卡片标题" }, + "label": { "fontSize": "12px", "fontWeight": "400", "lineHeight": "1.4", "fontFamily": "fontSans", "color": "textSecondary", "role": "字段名、标签、表头" }, + "labelBold": { "fontSize": "12px", "fontWeight": "600", "lineHeight": "1.4", "fontFamily": "fontSans", "color": "textSecondary", "role": "强标签、徽章文字" }, + "subtitle": { "fontSize": "13px", "fontWeight": "400", "lineHeight": "1.5", "fontFamily": "fontSans", "color": "textSecondary", "role": "页面副文案、表头摘要" }, + "button": { "fontSize": "13px", "fontWeight": "600", "lineHeight": "1.4", "fontFamily": "fontSans", "color": "onAccent", "role": "按钮文字" }, + "trend": { "fontSize": "11px", "fontWeight": "500", "lineHeight": "1.4", "fontFamily": "fontSans", "color": "success", "role": "涨跌、占比标注、趋势指数(color 按语义覆盖 success/danger)" }, + "body": { "fontSize": "14px", "fontWeight": "400", "lineHeight": "1.5", "fontFamily": "fontSans", "color": "textPrimary", "role": "正文描述、题干" } + }, + + "radius": { + "sm": { "value": "8px", "type": "dimension", "role": "图标底、小徽章、输入框内元素" }, + "md": { "value": "12px", "type": "dimension", "role": "次级卡、分段切换、标签、表单输入框" }, + "lg": { "value": "16px", "type": "dimension", "role": "标准卡片(默认)" }, + "xl": { "value": "24px", "type": "dimension", "role": "Hero 渐变大卡" }, + "pill": { "value": "999px", "type": "dimension", "role": "头像、胶囊按钮、天数徽章" }, + "btn": { "value": "10px", "type": "dimension", "role": "主/次按钮圆角" } + }, + + "shadow": { + "level0": { "value": "none", "type": "boxShadow", "role": "平面卡片(默认)" }, + "level1": { "value": "0 1px 2px rgba(0,0,0,0.04)", "type": "boxShadow", "role": "悬浮态轻投影" }, + "level2": { "value": "0 4px 12px rgba(27,45,91,0.08)", "type": "boxShadow", "role": "弹层、浮起卡片、TabBar" }, + "level3": { "value": "0 8px 24px rgba(27,45,91,0.14)", "type": "boxShadow", "role": "模态、下拉菜单" } + }, + + "spacing": { + "space1": { "value": "4px", "type": "dimension" }, + "space2": { "value": "8px", "type": "dimension" }, + "space3": { "value": "12px", "type": "dimension" }, + "space4": { "value": "16px", "type": "dimension" }, + "space5": { "value": "20px", "type": "dimension" }, + "space6": { "value": "24px", "type": "dimension" }, + "space8": { "value": "32px", "type": "dimension" } + }, + + "layout": { + "sidebarWidthDesktop": { "value": "220px", "type": "dimension", "role": "桌面侧边栏宽度" }, + "contentMaxWidth": { "value": "1220px", "type": "dimension", "role": "桌面内容主区宽" }, + "desktopPadding": { "value": "32px", "type": "dimension", "role": "桌面左右 padding" }, + "mobilePadding": { "value": "24px", "type": "dimension", "role": "移动左右 padding" }, + "cardPaddingDesktop": { "value": "24px", "type": "dimension", "role": "卡片内边距(桌面)" }, + "cardPaddingMobile": { "value": "16px", "type": "dimension", "role": "卡片内边距(移动)" }, + "cardGapDesktop": { "value": "20px", "type": "dimension", "role": "卡片间距(桌面)" }, + "cardGapMobile": { "value": "12px", "type": "dimension", "role": "卡片间距(移动)" }, + "tabBarHeightMobile": { "value": "120px", "type": "dimension", "role": "移动 TabBar 高度" }, + "btnHeight": { "value": "40px", "type": "dimension", "role": "标准按钮高度" }, + "btnHeightPill": { "value": "44px", "type": "dimension", "role": "胶囊按钮高度" } + }, + + "breakpoint": { + "mobile": { "value": "390px", "type": "dimension", "role": "移动优先基准" }, + "desktop":{ "value": "1440px", "type": "dimension", "role": "桌面基准" } + }, + + "motion": { + "hoverFast": { "value": "120ms", "type": "duration", "role": "按钮 hover 背景过渡" }, + "cardHover": { "value": "160ms", "type": "duration", "role": "卡片 hover 投影过渡" }, + "switch": { "value": "250ms", "type": "duration", "role": "切换/展开" }, + "tabFade": { "value": "200ms", "type": "duration", "role": "移动 Tab 切换淡入" }, + "ease": { "value": "ease", "type": "cubicBezier", "role": "默认缓动" } + } +} diff --git a/deliverables/design/page-prompts.md b/deliverables/design/page-prompts.md new file mode 100644 index 0000000..748cc9d --- /dev/null +++ b/deliverables/design/page-prompts.md @@ -0,0 +1,375 @@ +# 备考中枢 · 页面设计提示词(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 保持一致。