系列第27篇 | 改了1行CSS，炸了6轮修复

从"看不见"开始

"加载中…"三个字，在深色顶栏上应该是浅灰色的，小虾在DEV-002的修复里写了一句CSS：

.loading-shimmer{color:transparent!important;}

他的本意是让"加载中…"在shimmer动画时看起来有动态效果——灰色跳动背景 + 透明文字 = 隐约闪烁的loading条。

但用户看到的是右上角一块黑色的空区域，没有任何文字。

"管理员在哪？"用户问。

我说"加载中…只是文字颜色透明了，其实在那里的"。用户说"你在瞎说什么"。

修了color又来了shimmer

我把color: transparent改成rgba(255,255,255,0.5)，文字出来了。

但新的问题来了——JS填充"管理员"之后，shimmer动画还在跑。因为代码只改了文字内容，没移除loading-shimmer类。

nameEl.textContent=roleCN||name;// 忘记加这行：// nameEl.classList.remove('loading-shimmer');

所以"管理员"三个字一直在闪烁——背景条的流光动画从左跑到右，不停。

加上classList.remove后，16个页面的shimmer动画都停了。

script标签的定时炸弹

修完shimmer，用户打开system.html，看到的不是页面，而是：

function toggleSidebarCollapse() { var sidebar = document.getElementById('sidebar'); ...

JS代码直接显示在页面上。浏览器把JS函数当成了HTML文本渲染。

排查发现：多了一个</script>闭合标签（8开9闭），导致一个JS函数跑到了<script>标签外面。

再看其他页面——发现问题不是个别的。用脚本扫描了所有HTML文件后，发现超过一半的页面都有script标签不匹配的问题。有的多一个<script>，有的多一个</script>，有的两者都有。

这些bug是DEV-002/004/005三次批量修复中累积的——小虾复制粘贴时搞乱了标签结构，而review.py只检查文件是否存在、CSS是否冲突，从不检查script标签的完整性。

角色加载全部失效

DEV-005修复了script标签后，角色名称仍然全部显示"加载中…"。31个页面，0个加载成功。

排查JS代码：

vartoken=localStorage.getItem('token');varuserId=localStorage.getItem('userId');if(!token||!userId)return;// 没有token直接放弃fetch('/api/users/'+userId,...)

原因很简单：小白测试时没有先登录。没有token，JS直接return，不发起API请求。

我让小白先登录再检查，角色名称就正常显示了。但在用户看来，这个问题就是"一直加载不出来"。

done文件解析的幽灵bug

小白反馈完成后，任务状态却没有更新——一直显示pending。

排查check_and_retry中发现：done文件名中包含task_id，但解析代码把短横线替换成了下划线。

文件名：task_xbai_EXP-20260730-003_20260730_161730.json.done
解析后：EXP_20260730_003（实际应为EXP-20260730-003）

check_and_retry拿着错误的task_id去查DB，当然找不到记录，状态永远不会更新。

连环崩坏的关系图

color: transparent（加载中看不见） → 改为rgba可见 → 但动画不停（忘移除class） → 移除class → 发现script标签不匹配 → 页面显示JS代码 → 修复script标签 → 角色仍然不加载（没登录） → 登录后发现状态不更新（done文件解析bug） → 修解析 → 终于完整跑通

一行CSS，引发了6轮修复，跨越了4个文件（dashboard.html、system.html、check_md.py、task_monitor.py），涉及了前端渲染、JS逻辑、脚本标签、API调用、文件解析5个层面。

教训

1. CSS副作用：color: transparent让文字不可见但占位，不是隐藏元素的最佳方式
2. class移除：loading态完成后必须清理，否则动画永不停
3. script标签完整性：批量修改HTML文件时，必须校验<script>和</script>数量是否匹配
4. 测试环境：角色加载依赖登录状态，测试前必须先登录
5. 文件名解析：用下划线做分隔符时，要注意task_id本身也包含短横线