# UI 组件底座(ui-kit)使用验证清单

> 文件命名:`docs/04-quality/ui-kit-verification-checklist.md` 或作为交付自审附件。业务项目使用 ui-kit 后,在交付前逐项确认并留痕。

## 项目信息

| 字段 | 值 |
|---|---|
| 项目名称 | |
| 验证日期 | YYYY-MM-DD |
| 验证人 | AI / 开发者 |
| ui-kit 来源路径 | `ui-kit/src/app/ui/` |
| 项目目标路径 | `src/app/ui/` |

## 一、目录与文件复制检查

| 检查项 | 规范要求 | 实际情况 | 状态 |
|---|---|---|---|
| 组件目录整目录复制 | `ui-kit/src/app/ui/**` → 项目 `src/app/ui/`,含 components/mobile/theme/index.ts | | □ 通过 □ 未通过 |
| 样式入口复制 | `ui-kit/src/styles.css` → 项目 `src/styles.css` | | □ 通过 □ 未通过 |
| SCSS 动画复制 | `ui-kit/src/styles.scss` → 项目 `src/styles.scss` | | □ 通过 □ 未通过 |
| Tailwind 配置合并 | `theme.extend.colors` 与 `boxShadow` 已合并 | | □ 通过 □ 未通过 |
| FontAwesome 引入 | `angular.json` styles 加入 `node_modules/@fortawesome/fontawesome-free/css/all.min.css` | | □ 通过 □ 未通过 |

## 二、组件使用检查

| 检查项 | 规范要求 | 实际情况 | 状态 |
|---|---|---|---|
| 页面层优先使用 ui-* 组件 | 无裸露原生 button/input/select/checkbox/dialog 等直接承载交互 | | □ 通过 □ 未通过 |
| 无第三方 UI 组件库 | package.json 中无 Angular Material/NG-ZORRO/PrimeNG/Ant Design 等 | | □ 通过 □ 未通过 |
| 无重复造轮子 | 业务项目中无与 ui-kit 同功能的手写组件 | | □ 通过 □ 未通过 |
| 图标按需使用 | 新增图标已登记 icon-set.ts 白名单(如项目使用白名单机制) | | □ 通过 □ 不适用 |

## 三、令牌与样式检查

| 检查项 | 规范要求 | 实际情况 | 状态 |
|---|---|---|---|
| 无颜色/字号/时长魔法值 | 全部使用语义工具类(bg-surface/text-ink/border-edge 等) | | □ 通过 □ 未通过 |
| 暗色/主题色切换已考虑 | 使用 ui-kit ThemeService 或已规划切换方案 | | □ 通过 □ 不适用 |
| z-index 使用分层令牌 | 使用 `--z-*` CSS 变量,无随手写 z-40/z-50 等魔数 | | □ 通过 □ 未通过 |

## 四、状态与可访问性检查

| 检查项 | 规范要求 | 实际情况 | 状态 |
|---|---|---|---|
| 组件六态完整 | Default/Hover/Active/Focus/Disabled/Loading | | □ 通过 □ 部分通过 |
| 空/加载/错误三态 | 列表/表单等场景已处理 | | □ 通过 □ 部分通过 |
| 按钮最小高度 44px | 触控目标符合规范 | | □ 通过 □ 未通过 |
| 焦点环清晰 | `:focus-visible` 可见 | | □ 通过 □ 未通过 |

## 五、防遮挡覆盖实测

| 检查项 | 规范要求 | 实测结果/截图路径 | 状态 |
|---|---|---|---|
| 固定元素安全区 | 顶栏/侧栏/底栏未遮挡内容 | | □ 通过 □ 未通过 |
| 弹层层级正确 | Modal/Drawer/Toast 按分层表,无互相穿透 | | □ 通过 □ 未通过 |
| 溢出处理 | 文本/表格/图片超长时有截断或滚动 | | □ 通过 □ 未通过 |
| 移动端可读 | 375px 视口下无横向溢出 | | □ 通过 □ 不适用 |

## 六、结论

- **总体状态**: □ 通过 / □ 有条件通过 / □ 未通过
- **未通过项**: 
- **整改计划**: 
- **验证证据链接**: 

## 七、变更历史

| 版本 | 日期 | 变更内容 | 变更原因 |
|---|---|---|---|
| v1.0 | YYYY-MM-DD | 首次创建 | ui-kit 使用验证 |