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 使用验证 |
