一、项目级 UI 约定
来源:prototype/*.html 实测 + docs/01 REQ 卡片 UI 描述 + docs/06 已有布局。经用户确认。
| 约定项 |
锁定值 |
依据 |
| 整体布局骨架 |
{{LAYOUT_SKELETON}} |
{{LAYOUT_SOURCE}} |
| 最小支持视口 / 响应式策略 |
{{VIEWPORT_POLICY}} |
{{VIEWPORT_SOURCE}} |
| 列表页交互范式 |
{{LIST_PATTERN}} |
{{LIST_SOURCE}} |
| 表单展现规则(Modal / Drawer / 独立页阈值) |
{{FORM_PATTERN}} |
{{FORM_SOURCE}} |
| 操作反馈范式(成功 / 失败 / 二次确认) |
{{FEEDBACK_PATTERN}} |
{{FEEDBACK_SOURCE}} |
| 数据展示约定(状态 / 日期 / 金额 / 空值 / 操作列) |
{{DISPLAY_PATTERN}} |
{{DISPLAY_SOURCE}} |
| 前端权限控制方式 |
{{AUTH_PATTERN}} |
{{AUTH_SOURCE}} |
二、Design Tokens
单元格写 token 名(--color-xxx),不写裸 hex;色值默认值落地于 src/styles/tokens.css。命名规范见 docs/04 § 2.5。
2.1 全局调色板
| 语义 |
变量名 |
默认值 |
用途 |
| {{TOKEN_SEMANTIC}} |
{{TOKEN_VAR}} |
{{TOKEN_VALUE}} |
{{TOKEN_USAGE}} |
2.2 组件级状态色
| 序号 |
组件 |
编辑 bg |
只读 bg |
悬浮 bg |
编辑 fg |
只读 fg |
悬浮 fg |
备注 |
| {{COMP_NO}} |
{{COMP_NAME}} |
{{COMP_BG_EDIT}} |
{{COMP_BG_READONLY}} |
{{COMP_BG_HOVER}} |
{{COMP_FG_EDIT}} |
{{COMP_FG_READONLY}} |
{{COMP_FG_HOVER}} |
{{COMP_NOTE}} |
三、组件库选型
| 项 |
锁定值 |
依据 / 备注 |
| 前端 UI 组件库 |
{{UI_LIB}} |
{{UI_LIB_SOURCE}} |
| 版本 |
{{UI_LIB_VERSION}} |
与 docs/04 § 零 一致 |
| 主题接入方式 |
{{UI_LIB_THEME}} |
如 ConfigProvider.theme.token 引用 § 二全局调色板 |
| 图标库 |
{{ICON_LIB}} |
{{ICON_LIB_SOURCE}} |
| 表格 / 表单封装策略 |
{{WRAP_STRATEGY}} |
是否二次封装、统一 props 约定 |
四、前端栈摘要(同步 docs/04 § 二)
| 分层 |
技术 |
版本 |
说明 |
| {{FE_LAYER}} |
{{FE_TECH}} |
{{FE_VERSION}} |
{{FE_NOTE}} |
五、各 FE 设计决策表
一 FE 一行,FE 清单来自 docs/08 § 三。每行锁定该 FE 的页面骨架来源、页面类型、组件库选型与状态机要点,供 Coding 阶段前端循环直接消费(不再二次问人)。
| FE-NN |
功能名 |
关联 REQ |
关联原型 |
页面类型 |
核心组件树要点 |
关键状态机(loading/empty/error/正常/提交中) |
引用 Design Tokens |
| {{FE_ID}} |
{{FE_NAME}} |
{{FE_REQS}} |
{{FE_PROTOTYPES}} |
{{FE_PAGE_TYPE}} |
{{FE_COMPONENT_TREE}} |
{{FE_STATE_MACHINE}} |
{{FE_TOKENS}} |