init: 设计定型

.gitignore

@@ -0,0 +1 @@
+.DS_store

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "js/ts.tsdk.path": "node_modules/typescript/lib"
+}

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); }

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": "默认缓动" }
+  }
+}

deliverables/design/设计规范-备考通.md

@@ -0,0 +1,235 @@
+# 备考通 · 设计规范（Design System）
+
+> 版本 v1.0 · 2026-08-26
+> 适用：公务员考试备考工具「备考通」双端高保真原型（桌面 1440×900 / 移动 390×844）
+> 依据：Ardot 文件 `718570750880145` 中的真实颜色变量与排印数值校准，非凭空编写。
+
+---
+
+## 1. 设计理念
+
+- **沉稳专业，克制清晰**。深蓝主色传达「备考、专注、可信」的调性，浅米色画布带来温和舒展的阅读体验。
+- **信息架构双端一致**：桌面端左侧导航 + 主内容；移动端底部 TabBar + 卡片流。两端遵循同一套色彩与组件规范。
+- **数据可视化友好**：所有统计/进度/趋势使用统一的数值字体（Inter Bold）与语义色，突出关键数字。
+
+---
+
+## 2. 色彩系统（Color Tokens）
+
+> 所有颜色已定义为 Ardot 颜色变量 `$3:N`，前端可直接映射为 CSS 变量。
+
+### 2.1 中性底色
+
+| 变量 | 名称 | 色值 | 用途 |
+|---|---|---|---|
+| `$3:3` | bgCanvas | `#F7F6F2` | 画布/页面背景（浅米白） |
+| `$3:4` | bgCard | `#FFFFFF` | 卡片/面板背景 |
+| `$3:5` | bgSoft | `#EFEFF5` | 图标底、次级填充、标签底色 |
+| `$3:12` | borderSubtle | `#E8E6E0` | 卡片描边、分隔线（中性浅暖） |
+
+### 2.2 品牌主色（深蓝系）
+
+| 变量 | 名称 | 色值 | 用途 |
+|---|---|---|---|
+| `$3:6` | primary | `#2B4C8F` | 主按钮、主色、选中态高亮底 |
+| `$3:7` | primaryDeep | `#1B2D5B` | 渐变深端、页面主标题强调、深色 hero |
+| `$3:8` | primaryBright | `#3A6BD8` | 渐变亮端、hero 卡片、active 图标 |
+
+> 渐变使用：`primaryDeep(#1B2D5B) → primaryBright(#3A6BD8)` 或 `primary(#2B4C8F) → primaryDeep(#1B2D5B)`。
+
+### 2.3 文字色
+
+| 变量 | 名称 | 色值 | 用途 |
+|---|---|---|---|
+| `$3:9` | textPrimary | `#1A1F2E` | 主标题、正文主色 |
+| `$3:10` | textSecondary | `#6B7280` | 副标题、描述文字 |
+| `$3:11` | textMuted | `#9CA2AD` | 弱提示、占位、次要标记 |
+
+### 2.4 语义色（状态反馈）
+
+| 变量 | 名称 | 色值 | 用途 |
+|---|---|---|---|
+| `$3:13` | success | `#1B9266` | 正向趋势、正确率、达标 |
+| `$3:14` | successSoft | `#E0F5EB` | 正向标签底、打卡徽章底 |
+| `$3:15` | warning | `#DC9A1E` | 提醒、中等状态 |
+| `$3:16` | warningSoft | `#FEF0D1` | 提醒标签底 |
+| `$3:17` | danger | `#D14C55` | 负向、错误、待复习错题数 |
+| `$3:18` | dangerSoft | `#FCE5E7` | 危险标签底、错误提示底 |
+
+> **应用原则**：语义色以「主色 + 浅底」成对出现（如 success 文字/图标 + successSoft 底），用于徽章、进度、趋势，保证状态一目了然。
+
+---
+
+## 3. 字体排印（Typography）
+
+### 3.1 字体族
+
+| 用途 | 字体 | 说明 |
+|---|---|---|
+| 中文 | `Sarasa Gothic SC` | 正文、标题、标签全中文场景 |
+| 数字/英文 | `Inter` | 统计数字、时间、单价、代码标识 |
+
+### 3.2 字重规范（数值映射）
+
+| 语义 | 字重 | 说明 |
+|---|---|---|
+| Regular | `400` | 正文、描述 |
+| Medium | `500` | 次要强调 |
+| Semi Bold | `600` | 按钮、标签、小标题 |
+| Bold | `700` | 页面标题、数据大字 |
+
+> 设计工具中字体 style 与 CSS 字重映射见下表。
+
+### 3.3 字号层级（桌面端实测校准）
+
+| 层级 | 字号 | 字重 | 字体 | 颜色 | 用途 |
+|---|---|---|---|---|---|
+| H1 页面标题 | 24px | Bold(700) | Sarasa | textPrimary | 页面主标题 |
+| 卡标题 | 15px | SemiBold(600) | Sarasa | textPrimary | 区块/卡片标题 |
+| 数据大字 | 22px | Bold(700) | **Inter** | textPrimary/语义色 | 统计数字核心值 |
+| 标签 | 12px | Regular(400)/SemiBold | Sarasa | textSecondary | 字段名、标签 |
+| 副标题 | 13px | Regular(400) | Sarasa | textSecondary | 页面副文案、表头摘要 |
+| 按钮文字 | 13px | SemiBold(600) | Sarasa | 白/主 | 主次按钮 |
+| 趋势指数 | 11px | Medium(500) | Sarasa | success/danger | 涨跌、占比标注 |
+
+### 3.4 行高
+
+- 大标题/数据：`1.2`（紧凑，突出数值）
+- 正文/描述：`1.5`（舒朗易读）
+- 标签/小字：`1.4`
+
+---
+
+## 4. 主题色板速查（前端 CSS 变量）
+
+```css
+:root {
+  /* 背景 */
+  --bg-canvas: #F7F6F2;
+  --bg-card:   #FFFFFF;
+  --bg-soft:   #EFEFF5;
+  --bg-border: #E8E6E0;
+
+  /* 品牌 */
+  --primary:        #2B4C8F;
+  --primary-deep:   #1B2D5B;
+  --primary-bright: #3A6BD8;
+
+  /* 文字 */
+  --text-primary:   #1A1F2E;
+  --text-secondary: #6B7280;
+  --text-muted:     #9CA2AD;
+
+  /* 语义 */
+  --success:      #1B9266;
+  --success-soft: #E0F5EB;
+  --warning:      #DC9A1E;
+  --warning-soft: #FEF0D1;
+  --danger:       #D14C55;
+  --danger-soft:  #FCE5E7;
+
+  /* 字体 */
+  --font-sans: "Sarasa Gothic SC", "PingFang SC", sans-serif;
+  --font-num:  "Inter", "SF Pro", sans-serif;
+
+  /* 圆角 */
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 24px;
+  --radius-pill: 999px;
+}
+```
+
+---
+
+## 5. 圆角与阴影
+
+### 5.1 圆角层级
+
+| Token | 值 | 用途 |
+|---|---|---|
+| radius-sm | 8px | 图标底、小徽章、输入框内元素 |
+| radius-md | 12px | 次级卡、分段切换、标签 |
+| radius-lg | 16px | 标准卡片（默认） |
+| radius-xl | 24px | Hero 渐变大卡 |
+| radius-pill | 999px | 头像、胶囊按钮、天数徽章 |
+
+### 5.2 阴影
+
+| 层级 | 值 | 用途 |
+|---|---|---|
+| level-0 | 无 | 平面卡片（默认） |
+| level-1 | `0 1px 2px rgba(0,0,0,0.04)` | 悬浮态轻投影 |
+| level-2 | `0 4px 12px rgba(27,45,91,0.08)` | 弹层、浮起卡片、TabBar |
+| level-3 | `0 8px 24px rgba(27,45,91,0.14)` | 模态、下拉菜单 |
+
+> 本项目默认以「白底 + 细描边(borderSubtle)」表达卡片，不用重阴影，保持干净克制的风格。
+
+---
+
+## 6. 组件规范
+
+### 6.1 卡片（Card）
+- 背景 `bgCard(#FFF)`，描边 `borderSubtle` 1px，圆角 16px（radius-lg）。
+- 内边距：桌面 `24px`，移动 `16px`。
+- 卡片间距：桌面 `20px`，移动 `12px`。
+
+### 6.2 按钮（Button）
+| 类型 | 底色 | 文字 | 圆角 | 高度 |
+|---|---|---|---|---|
+| 主按钮 | primary(#2B4C8F) | #FFF | 10px | 40px |
+| 次按钮 | 透明 + primary 描边 | primary | 10px | 40px |
+| 胶囊 | primary | #FFF | pill | 44px |
+
+### 6.3 徽章 / 标签（Badge）
+- `successSoft`/`warningSoft`/`dangerSoft` 底 + 对应语义色文字，圆角 pill 或 8px，字号 12px。
+- 例：打卡徽章（successSoft + success）、待复习红点（dangerSoft）。
+
+### 6.4 进度条 / 模块掌握度
+- 轨道 `bgSoft`，填充 `primary(#2B4C8F)` 或语义色（达标 success / 待提升 warning）。
+- 高度 6-8px，圆角 pill。
+
+### 6.5 侧边栏（桌面）
+- 宽 220px，白底 `bgCard` + 右侧 borderSubtle；导航项高 40px，圆角 10px。
+- 高亮态：容器 `primary` 底 + 图标/文字白；展开子菜单缩进 36px。
+
+### 6.6 TabBar（移动）
+- 高 120px（含上下 padding 21px），胶囊底 `bgCard` 描边；选中项 `primary` 圆角胶囊，未选中灰。
+
+---
+
+## 7. 间距与布局规范
+
+### 7.1 间距刻度
+`4 / 8 / 12 / 16 / 20 / 24 / 32`（基于 4px 网格）。
+
+### 7.2 栅格
+- 桌面：内容主区宽 1220px，左右 padding 32px，列间距 16-24px。
+- 移动：左右 padding 24px，卡片宽 342px，卡片间距 12px。
+
+### 7.3 画布节点间距（原型排布）
+- 行距 100 / 列距 60（仅用于画布排布，非页面内布局）。
+
+---
+
+## 8. 图标规范
+- **一律使用线性矢量图标**，stroke 1.5-2px，尺寸 20-28px，颜色 `textSecondary(#6B7280)`；选中/高亮态换 `primary` 或白。
+- 图标不能替代关键文字，文字标签始终保留（可识别性优先）。
+- 数据图表图标（折线/柱状）用规整闭合 SVG 图形，避免长条/旗类 path 解析出错。
+
+---
+
+## 9. 动效约定（建议）
+- 按钮 hover：背景透明度 0.08 过渡 120ms。
+- 卡片 hover：level-1 投影 160ms。
+- 切换/展开：250ms ease，位移 8-12px 渐显。
+- 移动端 Tab 切换：淡入 200ms。
+
+---
+
+## 10. 落地注意事项
+1. 所有颜色引用设计变量，禁止硬编码；换肤(浅/深)时仅需替换 token。
+2. 数据大字必须用 Inter Bold，与中文正文区分，保证数字层级清晰。
+3. 语义色成对出现（主色 + 浅底），状态反馈不依赖单一颜色。
+4. 两端组件复用同一套 token，保证一致性。