docs/Admin-Client前端原型还原验收规则.md

Admin / Client 前端原型还原验收规则

目标

Admin 与 Client 已向客户讲解或确认过的页面，必须以对应原型为直接事实来源逐页还原。不得先统一套用现有设计系统、抽屉、弹框、详情页或图标规范，再局部调整。

修改门禁

每个页面修改前必须先形成以下矩阵，并给出原型文件及行号、元素 ID、函数名或截图证据：

页面	操作	原型承载方式	原型尺寸/布局	当前实现	结论
示例	详情	独立页面	页面级头部、返回列表	右侧抽屉	改为正式路由页面

操作至少分别核对：详情、新增、编辑、审核/确认、文件预览、删除/停用确认。不得以其中一个操作的结论推断其他操作。

承载方式

• 原型使用独立页面：必须使用正式路由、页面级布局和明确返回入口；不得改成抽屉或弹框。
• 原型使用居中弹框：必须使用居中模态框，并按原型宽度、标题、正文、底部按钮和关闭方式还原；不得改成右侧抽屉。
• 原型使用侧滑面板：仅该操作允许使用抽屉，并按原型方向、宽度和内部布局还原。
• 原型未定义：先停在矩阵中标记待确认，不得因为公共组件方便而自行选择。
• 同一列表的详情、新增、编辑、审核可以采用不同承载方式，必须逐操作判断。

视觉与排版

• 字段顺序、分组、摆放、列宽、控件宽高、换行、对齐、外边距、内边距、间隙和留白按原型逐项核对。
• 顶部背景色、页面背景、区块背景、边框、圆角、阴影、字号、字重和文字颜色直接取原型值。
• 按钮位置、顺序、尺寸、颜色、危险语义、悬停态、禁用态按原型还原；不得自行增加“更多”菜单或纯文字替代。
• 原型已提供图标、字符图标、图片或 SVG 时直接复用原型资源；不得自行绘制或替换。
• 表格按原型核对外边框、单元格边框、表头背景、斑马纹、行悬停背景、行高和横向滚动。
• 原型没有的公司名称图标、下划线、卡片装饰、悬停上浮、缩放和渐变效果不得添加。

响应式与可访问性

• 桌面布局以原型为准；同时检查 720px 与 320px，窄屏只做保证可用所需的最小退化，不改变桌面信息结构。
• 弹框正文超过视口时只滚动正文，标题和操作区保持可见；独立详情页按正常页面滚动。
• 保留键盘操作、焦点、表单标签、图标按钮名称和足够对比度。可访问性调整不得改变原型的主要布局与视觉语义。

执行与验收

1. 先提交逐页矩阵，不直接批量替换公共组件。
2. 总控冻结该页结论后，任务只修改职责内模块，不触碰其他任务在途文件。
3. 修改后提供桌面与 320px 截图或等价浏览器证据，并标注与原型仍存在的差异。
4. 运行直接测试与类型检查；共享组件变更必须检查全部消费者。
5. 不触发 Jenkins、不部署、不提交，除非当前对话另有明确授权。

已确认示例

Admin 客户管理原型：

• 客户详情：独立页面（page-tenant-detail）。
• 新增客户：居中弹框（modal-tenant-add，最大宽度约 680px）。
• 编辑客户：居中弹框（modal-tenant-edit，宽度约 640px）。
• 重置密码：居中弹框（modal-tenant-reset-password，宽度约 520px）。
• 入驻审核：居中弹框（modal-tenant-audit，宽度约 900px）。

这些结论只适用于上述操作，不自动推广到其他页面。