fe-scope-template.md 3.61 KB

一、项目级 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}}