尧图建网站 尧图建网站 YAOTU WEB BUILD 免费咨询
ARTICLE DETAIL

资讯详情

深耕网站建设与建站编程的一线实战洞察。

AI多Agent协作系统实战(二十七):一个CSS属性引发的连环崩坏——loading-shimmer透明文字到script标签全面错乱

AI多Agent协作系统实战(二十七):一个CSS属性引发的连环崩坏——loading-shimmer透明文字到script标签全面错乱 系列第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.textContentroleCN||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代码vartokenlocalStorage.getItem(token);varuserIdlocalStorage.getItem(userId);if(!token||!userId)return;// 没有token直接放弃fetch(/api/users/userId,...)原因很简单小白测试时没有先登录。没有tokenJS直接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-003check_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个层面。教训CSS副作用color: transparent让文字不可见但占位不是隐藏元素的最佳方式class移除loading态完成后必须清理否则动画永不停script标签完整性批量修改HTML文件时必须校验script和/script数量是否匹配测试环境角色加载依赖登录状态测试前必须先登录文件名解析用下划线做分隔符时要注意task_id本身也包含短横线
返回列表