Acme Harmony UI Design System
Governance / Quality Gate

页面发布前质量验收门禁

所有新开发页面、UI 改造或功能迭代在交付 Git 合并前,开发人员与 AI 助手必须逐项对照此门禁完成自检。通过自检保障系统视觉与交互的高一致性与工程健壮度。

治理等级: 强力拦截门禁 最后更新: 2026-05-28
01 / Quality Gate

十维质量自检矩阵

本门禁按模块分类,每个检查点包含校验标准典型缺陷(红线拦截)修复整改建议。请点击左侧勾选框辅助审查:


1. 页面范式与骨架规范 (Page Archetypes)

校验标准 页面必须声明标准数据属性 data-ui-archetype="ListPage"(或 ModalPage/DrawerPage),并符合统一 DOM 结构顺序。
典型缺陷 在页面主体中使用无约束的裸卡片、随意设定页面 padding、操作按钮无序堆叠。
修复建议 参考 Templates 模板 直接复制标准 DOM 骨架,统一使用 .page-archetype-list 外包。

2. 视觉 Token 一致性自检 (Visual Tokens)

校验标准 禁止在子页面中手写 inline style 色值,边框圆角必须统一引用 CSS 变量,如 var(--acme-radius-md)
典型缺陷 手写 style="border-radius: 10px;" 或手写硬编码颜色(如 color: red;#333)。
修复建议 将 inline styles 全量收敛为公共 CSS 类,在元素上仅套用标准语义类(如 .ds-card.ds-status-tag)。

3. 表单控件与数据绑定 (Form Controls)

校验标准 所有 Select、Select2、Checkbox 和 Radio 必须通过 DataBinder.bind() 统一异步绑定,且必填项加上 .required
典型缺陷 在页面中手写 $.ajax 获取字典数组并循环拼接 <option> 追加到 DOM,导致前后端代码耦合严重。
修复建议 阅读 Forms 规范,改用 DataBinder.bind({ target: '#mySelect', api: '...' }) 进行声明式绑定。

4. 数据网格与操作区联动 (Tables & Operations)

校验标准 列表表格强制采用 acmeAgGrid 并调用 AcmeGridOperations。表格数据行必须定义唯一 primaryKey。
典型缺陷 表格高度写死为 px,导致页面整体在低分辨率下爆出垂直双滚动条;导入导出按钮与列表杂乱无章排布。
修复建议 在表格初始化 JS 底部主动挂载自适应高度监听:acmeAgGrid.enableResizeListener('#MyGridContainer'),将导入导出动作收拢至 AcmeGridOperations 容器。

5. 弹窗与侧边抽屉防超高溢出 (Modals & Drawers)

校验标准 弹窗或抽屉的 Header 与 Footer 固底不滚,仅 Body 区域可垂直溢出滚动。严禁多重 Modal 覆盖嵌套。
典型缺陷 弹窗中间表单项过多将整个弹窗向下撑长几千像素,导致弹窗底部的“确定/取消”按钮直接滑出视口,完全无法点击。
修复建议 Modal DOM 必须严格遵循 .modal-content > .modal-header + .modal-body + .modal-footer 的标准三层树结构,以触发全局 Flex 围堵限高。

6. 附件上传与真源存储 (Uploads & OSS)

校验标准 文件一律前端切片直传阿里云 OSS。数据库字段必须仅存储相对短路径 saveUrl,严禁存储包含域名的完整 fileUrl。
典型缺陷 直接在数据库保存 https://bucket.oss.../x.pdf,后续因阿里云授权、安全隔离或域名迁移导致海量单据的附件全部失效。
修复建议 在直传成功的回调函数中,显式抓取 saveUrl 赋值给表单隐藏域 $('#attachmentPathInput').val(saveUrl)。每次重载上传节点前执行 AcmeUpload.reset(...) 清理句柄。

7. 状态反馈与异步任务 (Feedback & TaskCenter)

校验标准 耗时超过 5 秒的大型导出、清算任务必须在后端启动异步长任务排队并返回 taskNo,前端联动触发飞入动画。
典型缺陷 采用同步下载,用户被迫面对一片惨白或一直转菊花的 Block 遮罩,网络超时或误点导致浏览器直接报网络连接重置。
修复建议 AJAX 获取任务编号后,执行 TaskCenter.flyToTaskCenter(clickPosition),将进度托管给右上角的异步长任务中心。

8. 权限拦截与高危阻断 (Security & Confirmation)

校验标准 敏感操作(删除、退回审批、清空配置)必须通过 Msg.Confirm() 阻断二次弹窗。前端异步提交按钮一律增加 Loading 状态禁用拦截。
典型缺陷 用户点击“删除”后在没有二次提示的情况下直接将数据物理抹除;或没有做 Loading 状态遮罩,导致用户因网慢连续多次疯狂点击,后台爆出数据并发写入报错。
修复建议 在 AJAX 发起前第一行追加 $('#btnSubmit').prop('disabled', true).html('...');删除等按钮全部包入 Msg.Confirm()

9. 响应式布局与无溢出自检 (Responsive & Layout)

校验标准 在标准桌面视口 1440px 下不得出现横向滚动条,内容必须保持完美左右边界对齐。在窄屏下自动堆叠不重合。
典型缺陷 表格列宽设置过大或没有配置自适应监听,导致在笔记本屏幕(如 1366px)下右侧操作按钮完全被挤出视窗,页面爆出巨大的水平滚动条。
修复建议 将列宽合理分配,对长文本描述列使用自适应,并用 css 媒体查询 @media 对侧边栏及卡片间距进行流式百分比控制。

10. AI 开发人员代理自检 (AI Agent Self-Check)

校验标准 AI 开发代理在交付代码给开发人员合并前,必须独立在后台运行 .NET CLI 对整个解决方案进行编译测试,确保 0 语法错误。
典型缺陷 直接在 Razor 页面写 @media 没做 Razor 转义报错,或者漏写了 },导致服务端后台编译报错挂载失败。
修复建议 每次完成改动后,在终端主动运行 dotnet build Acme.IBP.sln;并检查 git status 和 git diff 对照规范。
代码复制成功!已写入剪贴板