6.4 KiB
6.4 KiB
全局 CSS 模块化实施结果
结果
2026-09-05 完成 src/styles/global.css 的全量迁移。原文件已删除，业务样式由 src/styles/domains/index.css 按固定顺序加载14个所有权模块；设计变量、重置、Shell、既有运营端/客户端共享层和公共组件层继续按 main.tsx 的原层级加载。
模块与所有者
| 顺序 | 文件 | 所有权 |
|---|---|---|
| 1 | 01-operations-dashboard.css |
Gateway异常辅助界面与运营/客户端概览 |
| 2 | 02-client-sending.css |
客户端短信/彩信发送和批次任务列表 |
| 3 | 03-client-records.css |
客户端任务详情、发送记录和上行 |
| 4 | 04-signatures.css |
签名和引流资料体验 |
| 5 | 05-templates.css |
短信模板和彩信模板 |
| 6 | 06-auth-enterprise.css |
登录、风险确认、用户表单和企业认证 |
| 7 | 07-admin-operations.css |
运营详情、应用路由、企业档案和短信审核 |
| 8 | 08-reporting.css |
报备资料、导入映射、批次和字段选择 |
| 9 | 09-channels.css |
通道指标、通道组和路由 |
| 10 | 10-signature-quality.css |
签名退订与发送质量矩阵 |
| 11 | 11-deliveries-reporting.css |
下游投递、报表任务和彩信运营页 |
| 12 | 12-admin-configuration.css |
上行、账务、用户、号段和报备字段库 |
| 13 | 13-client-signatures.css |
客户端签名和引流资料 |
| 14 | 14-responsive-requeue.css |
原共享响应式尾段和下游恢复工作台 |
模块顺序是原 global.css 顶层节点顺序的连续分区，不得按名称重新排序。媒体查询、伪类、子选择器和动画均随原节点迁移。
等价证据
- 原始基线：213062字节、9846行、1749条规则、2017个选择器、5321条声明、30个
!important。 - 模块化后的AST总量和完整选择器顺序与原基线一致。
- 迁移前后Vite主CSS产物均为
index-CkSy6WDi.css，SHA-256均为d7043ee2229a402c6b9284c9153536dd6393446a3b0fe7c47ee7dd05290539c3，字节比较无差异。 - 机器可读证据位于
tools/quality/css-governance-baseline.json，自动核验入口为npm run css:verify。
自动门禁
npm run format:check：增量Prettier现同时覆盖CSS。npm run style:check：对全部CSS执行Stylelint；迁移前已存在的文件使用显式兼容范围，新CSS默认严格执行标准规则。npm run css:verify：验证global.css不得重建、固定导入顺序、AST基线、选择器顺序、!important增长、宽泛业务标签规则和import所有权，并执行允许/拒绝样例测试。.github/workflows/css-quality.yml：PR使用目标提交与HEAD的merge-base，main推送使用事件before提交；首次推送使用空树，覆盖一次推送中的全部提交。- Git归档或部署候选目录没有
.git时，门禁仍执行当前树的所有权、AST、选择器顺序和例外检查，仅跳过无法取得基线的增量文件比较。
维护边界
- 新页面、弹窗和业务组件继续使用同目录CSS并由所有者直接import。
- 14个迁移模块只用于承接已登记的历史规则；新增规则应先判断页面、业务域或公共组件所有权，不得因类名前缀相似直接追加。
- 不得重新创建
global.css、扩大Stylelint兼容文件范围或增加无登记例外。 - 迁移模块后续按真实页面证据继续细化时，必须同步更新机器基线，并保持主CSS产物或关键计算样式等价。
2026-09-05 门禁复核与修复
首次迁移完成的是原序分文件，14个模块仍由全局入口加载，响应式尾段仍跨业务域。页面根节点隔离和按所有者进一步收拢是后续工作，不能把文件删除或既有门禁通过等同于完整架构治理完成。本次只修复门禁，不移动、删除或改写应用CSS，不改变业务API、数据库和短信链路。
复核发现原Stylelint配置使用目录通配符，原所有权检查只搜索文件名，AST计数未覆盖声明值和媒体条件，main推送只比较最后一个提交。现改为：
tools/quality/css-ownership.json逐文件登记真实import所有者，Stylelint兼容范围必须与清单中的精确路径一致。新文件不会因进入styles/或domains/自动继承兼容配置。- TypeScript AST解析静态import/export和字面量动态import，PostCSS解析CSS import；解析实际路径并从
src/main.tsx检查可达性。注释、文件名字符串、同名异目录文件、孤立循环或未被入口引用的所有者不能代替真实引用。当前仅支持仓库使用的相对路径和@/别名；新加载机制须同步扩展解析器和拒绝样例。 - 新CSS必须登记
roots，根类必须出现在直接TSX所有者的className中；每个选择器首个复合选择器须含正向根类，禁止用:not、:has或根节点同级选择器冒充作用域。根类后的后代和直接子节点可用；仅通过:is/:where提供根类的写法暂不接受。该检查证明静态约束，无法代替实际DOM层级、Portal、动态类名和三尺寸浏览器验收。 - 历史文件登记包含声明值、声明顺序、
!important和媒体/其他at-rule条件的AST摘要，并明确兼容原因、清理条件。注释和节点外格式不影响摘要，CRLF/LF统一；值内部换行等变化可能要求人工确认。新文件不允许通过随手补历史摘要绕过作用域；历史摘要变更必须附设计或等价证据，由代码审查确认。 - 已有、具备页面根类的
ReportMaterialImportModal.css直接执行新规则；其他已登记历史文件保持现状，不在本次门禁修复中扩张视觉改造范围。 - 无
.git的部署归档也执行完整清单、真实引用、根类、声明摘要、固定入口顺序及例外范围检查；仅跳过Git增量比较。 - 拒绝样例覆盖新目录文件的实际Stylelint结果、假import、不可达与缺失路径、错误所有者、未落入className的根类、无根标签/状态/同级逃逸、声明和断点篡改、未登记文件、归档模式以及CRLF/LF兼容。
后续修改已有CSS时先确认所有者：页面私有规则迁至页面目录，公共规则按消费者确定组件归属；保持原效果的迁移提供产物或计算样式等价证据，有意视觉调整提供设计依据及真实页面验收后再更新摘要。不得为了门禁变绿批量重算全部摘要。330次重复选择器出现包含有效响应式覆盖，不按重复次数直接删除。