设计规范
组件与样板
每个组件的结构、尺寸、状态与特征动作；用户端「数据总览」样板结构与图表规则；可访问性检查清单。
组件规范
| 组件 | 结构与尺寸 | 状态 | 特征动作 |
|---|---|---|---|
| 按钮 Button | 主 filled（brand）/ 次 tonal（container 底 + ink 字）/ 文字 text（brand 字无底）/ 危险 danger；高 36（sm 32、lg 44）；内边距 16；r-sm；图标 16 | 悬停叠层（主按钮 → brand-hover）；按下 0.97；禁用 0.4；加载保宽 | 按压 |
| 图标按钮 | 36 方（随 --control）；r-sm 或圆形；必配提示 | 同按钮 | 按压 |
| 输入框 / 下拉 | 填充 container、无边框、r-sm、高 --control；左侧图标 16；标签在上（label）、说明在下（caption） | 悬停 container-high；聚焦 surface + 2px brand 环；有误 2px danger 环 | 聚光 |
| 分段 Segmented | container 胶囊槽、内边距 3；选中滑块 surface + 2 层；项高 --control − 6 | 悬停文字变 ink；按下 0.96；← / → 切换 | 滑块利落滑动 |
| Chip | 高 32、r-full；未选 container | 选中 brand-tint + on-brand-tint + 勾 | 折射 |
| 开关 Switch | 轨 36 × 22、拇指 16；开 = brand 轨 | 按下拇指拉宽 4px；禁用 0.4 | 拇指跃动 |
| 勾选框 / 单选 | 18 方 r-xs / 18 圆；未选 1.5px ink-3 内描边（唯一允许的控件描边） | 选中 brand 填充从中心展开、勾描绘；按下 0.88 | 折射（从中心） |
| 标签页 Tabs | 高 40；2px brand 指示条；用于内容区内的次级切换（页面级视图用分段） | 选中文字 ink | 指示条前沿利落、后沿平稳延迟 60ms |
| 卡片 Card | 平板：surface + r-lg + elev-1 + 高光；内边距 --pad；卡片头：图标块 + 标题（title）+ 右侧文字按钮 | 可点卡片：悬停抬升 + 指光，按下 0.99 | 抬升、指光 |
| 指标卡 Metric | 图标块（领域色）+ 标签（label, ink-2）+ 数字（metric）+ 环比徽标 + 迷你面积图（贴底，高 40） | 数据刷新时数字 tint 闪烁 | 数字滚动、色散入场 |
| 列表表格 List table | 无外框、无列线；表头 32（caption、ink-3、无底色）；行 --row；行间 separator 缩进分隔（从第一列内容起）；数字列右对齐等宽；首列图标块或排名序号 | 行悬停 container 底 + r-md（隐藏相邻分隔线）；选中 brand-tint | 新增行被照亮 |
| 分组列表 Grouped list | surface + r-lg 分组；行 52；左侧图标块 32、右侧值与 ›；行间缩进分隔线 | 行悬停 container | — |
| 侧栏 Sidebar | 台面底、无右边线；宽 256 / 轨 72；导航项 36、r-sm；分组名 overline；底部配额卡 surface | 当前项：surface + elev-1 + brand 图标 + 600；悬停叠层 | 收起时宽度平稳 |
| 顶栏 TopBar | 高 60（紧凑 56）；左：菜单按钮（< 1024）+ 公司 / 站点切换胶囊（container）；右：铃铛（红点计数）+ 头像 | 滚动前透明；滚动后磨砂 + elev-1 | 淡变 |
| 对话框 Dialog | 覆盖层：surface + r-lg（紧凑底部弹出 r-xl 顶角）+ elev-4；宽 480 / 640；内边距 24；遮罩 --scrim | 焦点锁定；Esc 关闭 | 自中心略下升起（舒展） |
| 抽屉 Drawer | 右侧 480（详情）/ 左侧 304（导航）；覆盖层 | 同对话框 | 自边缘滑入（平稳） |
| 菜单 Menu / 下拉面板 | 浮起层：surface + r-md + elev-3 + hairline；内边距 6；选项高 36、r-sm | 选项悬停 / 键盘高亮 container；选中 brand 字 + 勾 | 自触发点展开（利落） |
| 吐司 Toast | 反色面 inverse、r-md、elev-3、最小高 48；左侧状态图标 22 圆；右侧操作按钮；底部居中，宽 ≤ 440 | 悬停暂停计时 | 跃动到达 |
| 提示 Tooltip | 反色面、r-xs、caption、最宽 260 | 500ms 延迟 / 300ms 内相邻立即 | 淡入 + 2px |
| 横幅 Banner | 领域或状态 tint 底、r-lg、左侧图标块、右侧操作；手机操作换行到正文下方，关闭按钮固定右上 | 可关闭 | 高度展开（平稳） |
| 徽标 Badge | 高 22、r-full、tint 底 + on-tint 字 + 12 图标或 6px 圆点 | — | 计数变化跃动 |
| 空状态 Empty | 64 图标块 + 标题 + 说明 + 主操作 | — | 色散入场 |
| 骨架 Skeleton | container 底、r-xs；形状与最终内容一致 | 减弱动效时静态 | 光扫 |
| 进度条 Progress | 高 8、r-full、container 轨、brand 填充；多段时为光谱条 | 不确定进度：40% 宽块往返 | 填充平稳增长 |
| 光谱条 Spectrum bar | 见色彩与材质中的“光谱条” | 悬停段落显示数值提示 | 各段从左依次展开（色散） |
样板：数据总览
用户端 /t/{tenant} 按下列结构实现，演示页的「样板」章节可直接操作。
| 区域 | 内容 | 组件 |
|---|---|---|
| 外壳 | 侧栏（当前项「数据总览」为平板）+ 透明顶栏（公司、站点切换胶囊、铃铛、头像） | 侧栏、顶栏 |
| 页头 | 大标题「数据总览」+ 说明「站点、内容、搜索与 AI 可见度的整体表现」+ 统计区间；右侧站点下拉 + 分段「近 7 天 / 近 30 天 / 近 90 天 / 自定义」 | 下拉、分段 |
| 指标行 | 发布文章（content）、搜索点击（search）、AI 推荐率（ai）、分发触达（distribution）；各带图标块、环比徽标、迷你面积图 | 指标卡（色散入场、数字滚动） |
| 主图表 8 列 | 「搜索点击与 AI 提及」双系列面积图；AI 提及用右轴（量级差 > 10 倍） | 图表 |
| 侧卡 4 列 | 「来源占比」光谱条 + 图例（搜索引擎 / AI 引擎 / 社交媒体 / 站群 / 直接访问） | 光谱条 |
| AI 卡 | AI 生成的 GEO 建议，顶边色散边 | 卡片 + 色散边 |
| 列表卡 | Top 关键字、Top 文章、站群站点 | 列表表格 |
| 手机 | 页头操作换行；指标卡 2 列；图表与列表单列；顶栏 56 | — |
图表规则：无边框坐标区；只保留水平参考线（separator，虚线）；线宽 2.5、端点圆；面积纵向淡出（24% → 0）；图例为小圆点 + 文字；悬停提示用浮起层卡片。两个系列量级相差 10 倍以上时第二系列用右轴（刻度文字用系列色，图例注明“右轴”）；三个以上系列不用双轴，改为拆图或归一化。
可访问性检查清单
- 文字对比度 ≥ 4.5:1，≥ 24px 大字、图标、控件边界 ≥ 3:1，亮暗两套都校验（
pnpm tokens:check） - 颜色不是唯一信息载体：状态同时有文字与图标；光谱条各段有图例文字
- 所有交互可用键盘完成；Tab 顺序与视觉顺序一致；有“跳到主内容”
- 焦点环只在
:focus-visible出现，2px brand，在所有表面上可见 - 对话框 / 抽屉：焦点锁定、Esc 关闭、关闭后焦点回到触发元素
- 纯图标按钮有
aria-label与提示 - 表单错误用
aria-describedby关联字段；提交后聚焦第一个错误 - 分段控件用
radiogroup/radio语义；标签页用tablist/tab；开关用switch；勾选框用checkbox - 吐司区域
aria-live="polite"；操作类吐司停留 ≥ 6s 且悬停暂停 - 触控目标 ≥ 44 × 44，指针目标 ≥ 32 × 32，相邻间距 ≥ 8
- 尊重
prefers-reduced-motion；页面提供「减弱动效」开关 - 不依赖悬停传达信息（触控设备常显）
- 支持 200% 缩放不丢失功能；中文长文案、德语长文案不溢出
- 暗色主题下图片缩略图
brightness(0.92)