108 lines
4.9 KiB
Markdown
108 lines
4.9 KiB
Markdown
|
# 页面设计说明（桌面端优先）
|
|||
|
|
|
|||
|
|
## 全局样式（适用于全站与内部页面）
|
|||
|
|
- Layout：桌面端以 12 栅格 + 8px spacing scale；内容最大宽度（例如 1200–1440）并居中；二级页面可用左侧栏 + 右侧内容区。
|
|||
|
|
- Responsive：
|
|||
|
|
- Desktop（≥1200）：完整导航与并列布局
|
|||
|
|
- Tablet（768–1199）：侧栏可折叠；表格降级为分组卡片
|
|||
|
|
- Mobile（<768）：纵向堆叠；主操作按钮置底吸附（仅必要场景）
|
|||
|
|
- Global Design Tokens（以 CSS Variables 注入）：
|
|||
|
|
- Color：brand/neutral/semantic（success/warning/danger/info）
|
|||
|
|
- Typography：font family、字号阶梯、行高、字重
|
|||
|
|
- Spacing/Radii/Shadows/Z-index
|
|||
|
|
- Motion：duration/easing；遵循 prefers-reduced-motion
|
|||
|
|
- 通用交互状态：hover / active / focus-visible / disabled / loading / invalid；focus ring 颜色与对比度满足可见性。
|
|||
|
|
- 无障碍通用规则：
|
|||
|
|
- 键盘：所有可操作元素可达；焦点顺序与视觉顺序一致
|
|||
|
|
- 读屏：图标按钮必须有可读名称；表单必须有 label 与错误关联
|
|||
|
|
- 对比度：正文/控件/边框按 AA 标准设计（在令牌层保障）
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 页面 1：全站现有业务页面（整体改造规范）
|
|||
|
|
### Layout
|
|||
|
|
- 使用「页面壳（App Shell）」统一：顶栏（品牌/导航/用户区）+ 内容区（栅格）+ 可选页脚。
|
|||
|
|
- 页面间距、卡片、表单、表格、弹窗等均由组件库提供，页面不再自定义样式细节。
|
|||
|
|
|
|||
|
|
### Meta Information
|
|||
|
|
- Title：沿用现有页面标题规则（不更改信息架构）。
|
|||
|
|
- Description/OG：沿用现有策略；若无则保持空以避免误配。
|
|||
|
|
|
|||
|
|
### Page Structure（通用结构）
|
|||
|
|
1. 顶栏：主导航、面包屑（如原有）、全局搜索（如原有）、用户菜单（如原有）
|
|||
|
|
2. 内容区：
|
|||
|
|
- 标题区（H1 + 次要说明）
|
|||
|
|
- 主内容（表单/表格/卡片/图表等现有模块）
|
|||
|
|
3. 全局反馈：Toast/Inline Alert；全屏 Loading 避免阻塞键盘焦点
|
|||
|
|
|
|||
|
|
### Sections & Components（交互要点）
|
|||
|
|
- 表单：
|
|||
|
|
- 必填标识、错误提示（文本 + aria-describedby）、提交后聚焦到首个错误
|
|||
|
|
- 输入控件状态一致（hover/focus/invalid/disabled）
|
|||
|
|
- 表格：
|
|||
|
|
- 可点击行/排序/分页等交互保持一致反馈；空态提供下一步指引
|
|||
|
|
- 弹窗/抽屉：
|
|||
|
|
- focus trap；Esc 关闭；关闭按钮可读名称；关闭后焦点回到触发点
|
|||
|
|
- 动效：仅用于状态过渡与层级变化；支持 reduced motion
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 页面 2：设计体系与组件库（内部）
|
|||
|
|
### Layout
|
|||
|
|
- 左侧栏（固定宽度）：分类导航（Tokens / Components / Patterns / A11y）
|
|||
|
|
- 右侧内容：文档内容区 + 组件预览区（可上下分栏）
|
|||
|
|
- 顶部工具条：主题切换（浅色/深色）、缩放预览（100%/125%）、搜索
|
|||
|
|
|
|||
|
|
### Meta Information
|
|||
|
|
- Title：设计体系与组件库
|
|||
|
|
- Description：设计令牌、组件状态与无障碍规范的单一入口
|
|||
|
|
|
|||
|
|
### Page Structure
|
|||
|
|
1. Tokens 区：令牌分组列表 + 详情面板
|
|||
|
|
2. Components 区：组件目录 + 交互状态矩阵 + 代码用法
|
|||
|
|
3. Patterns 区：表单/表格/弹窗等复合模式（推荐组合）
|
|||
|
|
4. A11y 区：组件级检查清单与示例
|
|||
|
|
|
|||
|
|
### Sections & Components（关键元素）
|
|||
|
|
- Token 浏览器：
|
|||
|
|
- 支持按名称/别名搜索；展示值（HEX/px/ms 等）与使用建议
|
|||
|
|
- 展示“映射关系”：token → CSS variable → Tailwind theme → 组件 props
|
|||
|
|
- 组件预览：
|
|||
|
|
- 每个组件提供状态面板：default/hover/focus/disabled/loading/invalid
|
|||
|
|
- 提供键盘操作说明（Tab/Enter/Space/Arrow）与读屏提示
|
|||
|
|
- 规范说明：
|
|||
|
|
- 明确“禁止事项”（例如页面层硬编码颜色）与迁移策略（旧组件替换路径）
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 页面 3：灰度发布与验收面板（内部）
|
|||
|
|
### Layout
|
|||
|
|
- 顶部：版本信息条（当前版本、上个稳定版本、灰度开关状态）
|
|||
|
|
- 主体：左右分栏
|
|||
|
|
- 左：灰度策略配置
|
|||
|
|
- 右：验收与监控摘要
|
|||
|
|
- 底部：操作审计表（仅追加写入展示）
|
|||
|
|
|
|||
|
|
### Meta Information
|
|||
|
|
- Title：灰度发布与验收
|
|||
|
|
- Description：灰度配置、验收汇总与回滚操作入口
|
|||
|
|
|
|||
|
|
### Page Structure
|
|||
|
|
1. 灰度配置卡片
|
|||
|
|
2. 验收结果汇总
|
|||
|
|
3. 回滚操作区（高风险操作）
|
|||
|
|
4. 审计与记录
|
|||
|
|
|
|||
|
|
### Sections & Components（关键交互）
|
|||
|
|
- 灰度配置：
|
|||
|
|
- 环境选择（预发/生产）
|
|||
|
|
- 百分比滑杆（0–100）+ 白名单输入
|
|||
|
|
- 变更预览：显示预计影响范围（如可估算）与生效时间
|
|||
|
|
- 验收汇总：
|
|||
|
|
- A11y：阻断项（AA 不通过）必须红色拦截并禁止扩大灰度
|
|||
|
|
- 视觉回归：按页面/组件维度展示 diff；可查看基线截图与当前截图
|
|||
|
|
- 冒烟：关键路径用例通过率
|
|||
|
|
- 回滚：
|
|||
|
|
- 两步确认（输入“ROLLBACK”）+ 原因必填
|
|||
|
|
- 支持“关闭灰度开关（热回滚）”与“回退构建产物（部署回滚）”两种动作
|
|||
|
|
- 审计：记录操作人、时间、版本、策略变更、回滚原因（只读）
|