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 对照规范。 |