# 暖记 (Warm Notes) — 完整设计规格文档 > **面向 LLM 的设计还原参考** — 本文档包含暖记手账日记 App 的完整视觉系统、组件规范、布局结构、交互状态和响应式行为。前端开发者（或 AI 编码助手）应以此文档为设计还原的唯一依据。 --- ## 1. 项目概览 | 属性 | 值 | |------|------| | App 名称 | 暖记 (Warm Notes) | | 定位 | 面向学生的多终端手账日记 App | | 视觉风格 | 温暖治愈 / 手绘插画风 | | 目标平台 | iOS、Android、iPad/平板、桌面客户端 | | 设计稿页面 | 27 页面（手机 14 + 平板 6 + 桌面 6 + 启动页 1） | | 主题系统 | 双主题：暖阳（默认）+ 松风 + 各自暗色模式 | | 技术约束 | 手机视口 390×844（iPhone 15 Pro），平板 1024×768，桌面 1440×900 | --- ## 2. 设计 Token 系统 ### 2.1 颜色系统 #### 主题 1：暖阳 (Warm Sun) — 默认 ```css :root { /* Surface 表面 */ --bg: #FFF8F0; /* 页面背景：暖白 */ --surface: #FFFFFF; /* 卡片/面板背景：纯白 */ --surface-warm: #FFF3E6; /* 温暖表面：浅橙，用于 hover 态和选中态背景 */ /* Foreground 前景 */ --fg: #2D2420; /* 主文字：深棕黑 */ --fg-2: #5C4F47; /* 次要文字：中棕 */ --muted: #7A6D63; /* 辅助文字：灰棕 */ --meta: #8B7E74; /* 元数据/标签文字：浅灰棕 */ /* Border 边框 */ --border: #E8DDD4; /* 标准边框 */ --border-soft: #F0E8DF; /* 柔和边框：分隔线、卡片边框 */ /* Accent 主色调 — 柔和珊瑚/赤陶橙 */ --accent: #E07A5F; /* 主强调色：珊瑚橙 */ --accent-on: #FFF8F0; /* 主强调色上的文字色 */ --accent-hover: #D06A4F; /* 主强调色 hover 态 */ --accent-active: #C05A3F; /* 主强调色 active/按下态 */ --accent-glow: rgba(224, 122, 95, 0.25); /* 强调色光晕 */ /* Secondary 辅助色 — 鼠尾草绿 */ --secondary: #81B29A; --secondary-soft: #D4E8DC; /* 浅绿背景 */ /* Tertiary 第三色 — 暖金 */ --tertiary: #F2CC8F; --tertiary-soft: #FBE8C8; /* 浅金背景 */ /* Rose 玫瑰色 */ --rose: #D4A5A5; --rose-soft: #F0DADA; /* 浅玫瑰背景 */ /* Semantic 语义色 */ --success: #5A9E7E; /* 成功/正向 */ --warn: #D4A843; /* 警告 */ --danger: #C93D3D; /* 危险/错误 */ } ``` #### 主题 2：松风 (Pine Wind) — 男学生向 激活方式：`document.documentElement.setAttribute('data-theme', 'pine')` ```css [data-theme="pine"] { --bg: #F2F3F0; /* 冷灰白背景 */ --surface: #FFFFFF; --surface-warm: #E9EAE6; --fg: #23272F; /* 深灰黑文字 */ --fg-2: #484E58; --muted: #6E7380; --meta: #8A8F9A; --border: #D5D2CD; --border-soft: #E3E1DC; --accent: #4A7B9D; /* 钢蓝色主强调 */ --accent-on: #FFFFFF; --accent-hover: #3F6A8A; --accent-active: #345A78; --accent-glow: rgba(74, 123, 157, 0.25); --secondary: #5B9E7A; /* 森林绿 */ --secondary-soft: #D6E8DE; --tertiary: #C49A3C; /* 琥珀金 */ --tertiary-soft: #F0E4C8; --rose: #7A8B6A; /* 橄榄绿 */ --rose-soft: #E0E8D8; } ``` #### 暗色模式 通过 `@media (prefers-color-scheme: dark)` 自动切换。暖阳暗色： ```css @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #1A1614; --surface: #2A2520; --surface-warm: #332D28; --fg: #F0E8DF; --fg-2: #C4B8AA; --muted: #9B8E82; --meta: #7A6D63; --border: #3A3530; --border-soft: #302B26; --accent: #E8907A; /* 暗色下珊瑚橙偏亮 */ --accent-on: #1A1614; /* ...其余 token 自动适配 */ } } ``` **关键实现要点：** - 颜色系统全部通过 CSS 自定义属性（Custom Properties）定义，主题切换只需切换 `data-theme` 属性 - 所有组件和页面必须引用 CSS 变量，禁止硬编码颜色值 - 暗色模式跟随系统偏好自动切换，无需用户手动操作 --- ### 2.2 字体排版 ```css /* 字体家族 */ --font-display: "Quicksand", "Nunito", "SF Pro Rounded", -apple-system, system-ui, sans-serif; --font-body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: ui-monospace, "JetBrains Mono", monospace; --font-handwritten: "Caveat", "Kalam", cursive; /* 字号阶梯 */ --text-xs: 11px; /* 极小标签、元数据 */ --text-sm: 13px; /* 小号文字、辅助信息 */ --text-base: 15px; /* 正文基准 */ --text-md: 17px; /* 中号，强调正文 */ --text-lg: 20px; /* 小标题 */ --text-xl: 24px; /* 区域标题 */ --text-2xl: 30px; /* 页面标题 */ --text-3xl: 38px; /* 大标题 */ --text-4xl: 48px; /* 超大标题/展示用 */ /* 行高 */ --leading-body: 1.6; /* 正文行高 */ --leading-tight: 1.25; /* 紧凑行高，用于标题 */ ``` **字体使用规则：** - **Display (Quicksand)** — 页面标题、区域标题、Tab 标签、按钮文字。特征：圆润、几何感、友好 - **Body (Nunito)** — 正文段落、列表内容、描述文字。特征：清晰、可读性好 - **Handwritten (Caveat)** — 装饰性文字、心情区域标题、手写风标签。特征：手写感、温暖 - **Mono** — 仅用于数据展示、时间戳 **实现注意事项：** - Quicksand 和 Nunito 需从 Google Fonts 加载：`https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Nunito:wght@400;500;600;700&display=swap` - Caveat 手写字体：`https://fonts.googleapis.com/css2?family=Caveat:wght@400;600;700&display=swap` - 字重使用：Regular (400), Medium (500), SemiBold (600), Bold (700) - 全局开启字体平滑：`-webkit-font-smoothing: antialiased` --- ### 2.3 间距系统 ```css --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; ``` **间距使用规则：** - `space-1` (4px)：图标与文字间距、微调 - `space-2` (8px)：紧凑元素间距、Checkbox 与文字 - `space-3` (12px)：同行元素间距、内边距紧凑 - `space-4` (16px)：标准卡片内边距、表单项间距 - `space-5` (20px)：页面水平内边距、卡片间距 - `space-6` (24px)：区域分隔、大卡片内边距 - `space-8` (32px)：大区域分隔 - `space-10` (40px)：页面级间距 --- ### 2.4 圆角 ```css --radius-sm: 10px; /* 小元素：输入框、小卡片 */ --radius-md: 16px; /* 标准卡片 */ --radius-lg: 22px; /* 大卡片、特殊区域 */ --radius-xl: 28px; /* 全宽面板、底部弹窗 */ --radius-pill: 9999px; /* 胶囊按钮、标签、头像 */ ``` **关键规则：** - 所有卡片和交互元素都有明显的圆角（最小 10px） - 按钮统一使用 pill 圆角（全圆） - 不使用直角矩形（除特殊装饰元素外） --- ### 2.5 阴影与高度 ```css --elev-soft: 0 2px 12px rgba(45, 36, 32, 0.06); /* 轻浮起：卡片默认 */ --elev-medium: 0 4px 20px rgba(45, 36, 32, 0.08); /* 中浮起：悬浮面板 */ --elev-float: 0 8px 32px rgba(45, 36, 32, 0.12); /* 高浮起：弹窗、模态 */ --shadow-accent: 0 4px 14px rgba(224, 122, 95, 0.25); /* 强调色阴影 */ --shadow-accent-hover: 0 6px 20px rgba(224, 122, 95, 0.35); --shadow-input-focus: 0 0 0 3px rgba(224, 122, 95, 0.2); --focus-ring: 0 0 0 3px rgba(224, 122, 95, 0.45); /* 焦点环 */ ``` --- ### 2.6 运动与动画 ```css --motion-fast: 150ms; /* 快速过渡：按钮、颜色变化 */ --motion-base: 250ms; /* 基准动画 */ --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* 弹性缓动：悬停、缩放 */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* 标准缓动：位移、透明度 */ ``` **动画系统：** ```css /* 页面进入动画 */ @keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .anim-fade { animation: fadeIn 0.5s var(--ease-standard) both; } @keyframes slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } .anim-slide { animation: slideUp 0.6s var(--ease-bounce) both; } @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } .anim-scale { animation: scaleIn 0.4s var(--ease-bounce) both; } /* 装饰浮动动画 */ @keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(5deg); } } ``` **动画延迟阶梯（用于列表/卡片错落进入）：** - 第 1 项：`animation-delay: 0.1s` - 第 2 项：`animation-delay: 0.15s` - 第 3 项：`animation-delay: 0.2s` - 递增 0.05s --- ### 2.7 布局常量 ```css --container-max: 390px; /* 手机最大内容宽度 */ --safe-top: 54px; /* iOS 顶部安全区（含 Dynamic Island） */ --safe-bottom: 34px; /* iOS 底部安全区（含 Home Indicator） */ --tab-height: 56px; /* 底部 Tab 栏高度 */ --touch-min: 44px; /* 最小触控区域（WCAG 2.5.8） */ ``` --- ## 3. 组件规范 ### 3.1 iOS 设备框架 手机端页面以 iPhone 15 Pro 为基准： ``` 视口: 390 × 844 px Dynamic Island: 居中, 126×36px, 黑色圆角矩形, top:12px 状态栏: 高度 54px (--safe-top), 包含时间（左）、信号/电池图标（右） Home Indicator: 底部居中, 134×5px, 半透明, 距底部 8px ``` **实现要点：** - 每个手机屏幕页面固定 `width: 390px; height: 844px; overflow: hidden` - 内容区域上留 `--safe-top`，下留 `--tab-height + --safe-bottom` - Dynamic Island 使用绝对定位 + `z-index: 200` --- ### 3.2 状态栏 (Status Bar) ```html
9:41
``` 样式： - `display: flex; justify-content: space-between; align-items: center` - `padding: 14px 28px 0; height: var(--safe-top)` - `font-size: var(--text-sm); font-weight: 600` - 时间使用 `font-variant-numeric: tabular-nums` 保证等宽数字 --- ### 3.3 底部 Tab 栏 (Bottom Tab Bar) ```html ``` 样式规则： ``` 位置: absolute, bottom:0, width:100% 高度: calc(var(--tab-height) + var(--safe-bottom)) = 90px 背景: var(--surface) 上边框: 1px solid var(--border-soft) 布局: flex, justify-content: space-around ``` **Tab Item 样式：** - 默认态：`color: var(--muted)` - 选中态：`color: var(--accent)`，添加 `.active` 类 - 图标尺寸：24×24px - 文字：`font-size: var(--text-xs)` (11px) - 最小触控区域：44px **中间「写日记」按钮特殊处理：** - 使用独立圆形按钮，向上突出 tab 栏 - `width: 44px; height: 44px; border-radius: 50%` - `background: var(--accent)` - `margin-top: -16px`（向上突出） - 添加 `box-shadow: 0 4px 12px var(--shadow-accent)` 增强浮起感 - 图标颜色：`var(--accent-on)`（即背景色上方的文字色） --- ### 3.4 按钮 (Buttons) #### 主要按钮 (Primary) ```html ``` 样式： ``` padding: 14px 28px (标准) / 16px 48px (大型) border-radius: var(--radius-pill) = 9999px background: var(--accent) color: var(--accent-on) font-family: var(--font-display) font-size: var(--text-md) / var(--text-lg) font-weight: 600-700 min-height: 44px (满足触控要求) box-shadow: 0 4px 14px var(--shadow-accent) transition: all var(--motion-fast) ``` 交互状态： | 状态 | 样式 | |------|------| | Default | `background: var(--accent)` | | Hover | `background: var(--accent-hover); transform: translateY(-1px ~ -2px); box-shadow: 增大` | | Active | `background: var(--accent-active); transform: scale(0.97 ~ 0.98)` | | Focus | `box-shadow: var(--focus-ring)` | | Disabled | `opacity: 0.5; cursor: not-allowed` | #### 次要按钮 (Secondary) ``` background: var(--surface) color: var(--fg) border: 1.5px solid var(--border) Hover → border-color: var(--accent); color: var(--accent) ``` #### 幽灵按钮 (Ghost) ``` background: transparent color: var(--muted) Hover → color: var(--accent) ``` --- ### 3.5 卡片 (Cards) #### 标准卡片 ```html
``` ``` background: var(--surface) border-radius: var(--radius-md) = 16px padding: var(--space-5) = 20px box-shadow: var(--elev-soft) border: 1px solid var(--border-soft) ``` #### 日记条目卡片 (Entry Card) ```html
🌸
5月30日 · 周六
图书馆的午后
今天在图书馆自习...
😊
``` 布局： ``` display: flex; gap: var(--space-4) = 16px 预览缩略图: 72×72px, border-radius: 10px, flex-shrink: 0 标题: font-family: var(--font-display); font-weight: 600; 单行截断 摘要: 两行截断 (-webkit-line-clamp: 2) 交互: Hover → translateY(-1px); Active → scale(0.98) ``` #### 今日日记卡片 (Today Card) — 渐变特殊卡片 ``` background: linear-gradient(135deg, var(--accent) 0%, var(--tertiary) 100%) border-radius: var(--radius-lg) = 22px padding: var(--space-6) = 24px ``` 装饰圆形： - 右上角：120×120px, `rgba(255,255,255,0.12)`, 位置 `top: -30px; right: -30px` - 左下角：80×80px, `rgba(255,255,255,0.08)`, 位置 `bottom: -20px; left: 40px` 写按钮（浮动在右下角）： ``` position: absolute; bottom: 20px; right: 20px width: 48px; height: 48px; border-radius: 50% background: white; box-shadow: 0 4px 12px rgba(0,0,0,0.1) Hover → scale(1.1) ``` --- ### 3.6 输入框 (Input Fields) ```html
``` 样式： ``` height: 50px padding: 0 16px 0 46px (左侧留出图标空间) border: 1.5px solid var(--border) border-radius: var(--radius-pill) font-family: var(--font-body); font-size: var(--text-base) background: var(--surface) transition: border-color var(--motion-fast) ``` 交互状态： | 状态 | 样式 | |------|------| | Default | `border: 1.5px solid var(--border)` | | Focus | `border-color: var(--accent); box-shadow: var(--shadow-input-focus)` | | Placeholder | `color: var(--meta)` | **带操作按钮的输入框（验证码）：** - 输入框 `padding-right: 110px` - 操作按钮：`position: absolute; right: 6px`, `color: var(--accent)` - 倒计时态：`opacity: 0.6; disabled` **密码切换按钮：** - `position: absolute; right: 14px` - 触控区域：`min-height: 44px; min-width: 44px`（满足 WCAG） --- ### 3.7 标签/Chip ```html ``` ``` padding: 6px 14px border-radius: var(--radius-pill) font-size: var(--text-sm) = 13px; font-weight: 500 background: var(--surface); color: var(--fg-2); border: 1px solid var(--border) Active → background: var(--accent); color: var(--accent-on); border-color: var(--accent) ``` --- ### 3.8 心情选择器 (Mood Selector) ```html
``` 布局： ``` display: flex; justify-content: space-between 每个选项: display: flex; flex-direction: column; align-items: center; gap: 4px 最小触控: min-width: 44px; min-height: 44px ``` 状态： - Default: `background: none` - Hover: `background: var(--surface-warm)` - Selected: `background: var(--surface-warm); .label { color: var(--accent); font-weight: 600 }` --- ### 3.9 社交登录按钮 ```html
``` ``` 尺寸: 56×56px, border-radius: 50% 间距: gap: var(--space-5) = 20px Hover → translateY(-2px); box-shadow: var(--elev-soft) Active → scale(0.95) ``` 品牌色： - 微信：`background: #07C160; border-color: #07C160`，Hover → `#06AD56` - Apple：`background: #1D1D1F; border-color: #1D1D1F`，Hover → `#333` - Google：`background: var(--surface)`（白色背景） --- ### 3.10 顶部导航栏 (Top Nav) ``` display: flex; align-items: center; justify-content: space-between padding: var(--space-4) var(--space-5) 标题: font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700 操作按钮: width: var(--touch-min) = 44px; height: 44px; border-radius: pill 背景: var(--surface) ``` --- ### 3.11 日期/时间条 (Date Strip) — 编辑器内 ``` position: absolute; top: calc(var(--safe-top) + 44px) display: flex; justify-content: space-between; align-items: center padding: var(--space-2) var(--space-4) background: var(--surface) ``` --- ### 3.12 月历导航 (Month Navigation) ```html
2026年5月
``` 导航按钮： ``` min-width: 44px; min-height: 44px border-radius: 50%; border: 1.5px solid var(--border) background: var(--surface) Hover → border-color: var(--accent); color: var(--accent) ``` --- ### 3.13 视图切换 (View Toggle) ```html
``` ``` display: flex; background: var(--surface) border-radius: var(--radius-pill); padding: 3px border: 1px solid var(--border-soft) Active button: background: var(--accent); color: var(--accent-on); box-shadow: var(--elev-soft) ``` --- ## 4. 页面结构与布局 ### 4.1 手机端页面（390×844） 每个手机屏幕的通用结构： ```html
``` **内容区域计算：** - 可用高度：844 - 54 (safe-top) - 56 (tab-height) - 34 (safe-bottom) = 700px - 水平内边距：`var(--space-5)` = 20px --- ### 4.2 启动页 (Splash) **布局：** 全屏居中 - 背景：渐变 `linear-gradient(165deg, var(--bg) 0%, var(--tertiary-soft) 40%, accent混合50%透明 100%)` - App 图标：120×120px, `border-radius: 32px`, 渐变背景 + 白色半透明装饰圆 - 品牌名：42px, `font-weight: 700`, `letter-spacing: 2px` - 副标题：`var(--text-md)`, `var(--muted)` - 进入按钮：底部 `calc(var(--safe-bottom) + 40px)` 处 - 装饰元素：浮动星星/圆圈，`opacity: 0.08~0.25`, `animation: float 4~6s` --- ### 4.3 引导页 (Onboarding) - 3 步水平滑动 - 每步包含：插图区域 + 标题 + 描述 + 进度指示器 - 底部：跳过/下一步/开始使用按钮 --- ### 4.4 首页日记流 (Home Daily) **内容层级（从上到下）：** 1. 问候语区域（日期 + 问候 + 搜索按钮） 2. 连续记录徽章（streak badge） 3. 心情选择区域（卡片包裹） 4. 今日日记卡片（渐变特殊卡片 + 写按钮） 5. 快速统计（3 列统计卡片） 6. 最近记录标题（标题 + "查看全部"链接） 7. 日记条目卡片列表 **统计卡片布局：** ``` display: flex; gap: var(--space-3) 每个 stat-card: flex:1; text-align:center 数字: var(--text-2xl) = 30px; font-weight:700 标签: var(--text-xs) = 11px; color: var(--muted) ``` --- ### 4.5 手账编辑器 (Editor) **布局层级：** 1. 顶部工具栏：返回/日期/保存按钮 2. 日期 & 心情条 3. 画布区域（可滚动） 4. 底部工具面板（文字/贴纸/画笔/照片/模板 Tab 切换） **工具栏：** ``` height: calc(var(--safe-top) + 44px) background: var(--surface); border-bottom: 1px solid var(--border-soft) 按钮: min-width/min-height: 36px; border-radius: pill 保存按钮: background: var(--accent); color: var(--accent-on) ``` --- ### 4.6 日历视图 (Calendar) **内容层级：** 1. 月份标题 + 前后导航 2. 视图切换（月/周） 3. 星期行（日 一 二 三 四 五 六） 4. 日期网格（7 列 grid） 5. 心情色彩标记（每个有日记的日期显示对应心情颜色） 6. 时间轴/日记详情 **日历网格：** ``` display: grid; grid-template-columns: repeat(7, 1fr) 日期单元格: aspect-ratio:1; display:flex; align-items:center; justify-content:center 当前日期: background:var(--accent); color:var(--accent-on); border-radius:50% 有日记日期: 底部小圆点标记，颜色对应心情 ``` --- ### 4.7 登录/注册 (Login) **布局：** 上下分区 - 上部：品牌区域（Logo + 名称 + 标语），带装饰元素和渐变背景 - 下部：表单区域（圆角顶部覆盖），包含输入框和按钮 **表单切换逻辑：** - 默认显示登录态（手机号 + 验证码 + 登录按钮） - 点击「立即注册」切换为注册态（增加昵称、密码、协议勾选） - 通过 `.is-register` 类控制字段显隐 **社交登录区域：** - 分隔线：`display:flex; align-items:center; gap`, 两侧 `flex:1` 的 `1px` 横线 - 三个圆形社交按钮：微信、Apple、Google --- ### 4.8 发现页 (Discover) **内容层级：** 1. 搜索栏 2. 热门话题标签（横向滚动 chips） 3. 精选模板（横向滚动卡片） 4. 达人日记（瀑布流/列表） --- ### 4.9 搜索结果页 (Search) **内容层级：** 1. 搜索输入框（带返回按钮） 2. 搜索历史标签 3. 结果分类筛选 tabs 4. 搜索结果列表 --- ## 5. 多平台适配规则 ### 5.1 平板端 (iPad 1024×768) **布局差异：** - 使用侧边栏导航替代底部 Tab 栏 - 内容区域采用双列布局 - 编辑器使用分栏模式（左侧画布 + 右侧工具面板） - 日历采用月历 + 时间轴双栏并排 **关键适配代码：** ```css @media (min-width: 768px) { /* 侧边栏导航 */ .sidebar { width: 240px; position: fixed; left: 0; top: 0; bottom: 0; } .main-content { margin-left: 240px; } /* 双列网格 */ .content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } /* 编辑器分栏 */ .editor-layout { display: grid; grid-template-columns: 1fr 320px; } } ``` ### 5.2 桌面端 (1440×900) **布局差异：** - 固定侧边栏（宽 280px）+ 多列内容区 - 编辑器全宽画布 + 右侧属性面板 - 日历三栏布局（统计 + 月历 + 日记详情） - 更高的信息密度：更多内容可见区域 **关键适配代码：** ```css @media (min-width: 1024px) { .sidebar { width: 280px; } .content-grid { grid-template-columns: repeat(3, 1fr); } .editor-layout { grid-template-columns: 1fr 380px; } .calendar-layout { grid-template-columns: 280px 1fr 380px; } } ``` --- ## 6. 主题切换系统 ### 工作原理 1. **默认主题**：暖阳（Warm Sun），`:root` 直接定义 2. **松风主题**：通过 `data-theme="pine"` 属性切换 3. **暗色模式**：`@media (prefers-color-scheme: dark)` 自动响应 4. **持久化**：`localStorage.setItem('warmnotes-theme', themeId)` 5. **跨 Tab 同步**：`window.addEventListener('storage', ...)` 监听变化 ### 切换按钮 - 固定位置：`position:fixed; top:8px; right:8px; z-index:10000` - 外观：圆角胶囊，包含色点 + 主题名称 - 点击循环切换：暖阳 → 松风 → 暖阳 --- ## 7. 无障碍 (Accessibility) ### 已实现的 WCAG 要点 1. **触控区域**：所有交互元素 `min-height: 44px`（满足 WCAG 2.5.8） 2. **焦点环**：`box-shadow: var(--focus-ring)` 统一在 `:focus-visible` 显示 3. **ARIA 标签**：所有按钮带 `aria-label`，Tab 栏使用 `role="tablist"` / `role="tab"` / `aria-selected` 4. **语义 HTML**：`