# 页面设计说明（桌面端优先）

## 全局样式（适用于全站与内部页面）
- 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”）+ 原因必填
  - 支持“关闭灰度开关（热回滚）”与“回退构建产物（部署回滚）”两种动作
- 审计：记录操作人、时间、版本、策略变更、回滚原因（只读）