系列第28篇 | 一个顶栏，修了5轮，过了3轮体验，最终7/31完全对齐

第0轮：一个页面异常

用户说：“asset-health.html的菜单栏样式不对，参考客户管理页调整。”

最初只是asset-health一个页面的菜单有问题。派发修复后，我顺手让小白去"顺便看看其他页面"。

小白回来后说了一句话让我头皮发麻：

“21个页面中，只有asset.html是完全正常的。”

剩下的20个页面，问题五花八门——有的子菜单不展开，有的菜单组混入了其他组的菜单项，有的DOM结构把sidebar嵌套在topbar里。

这是菜单栏（侧边栏）的问题，写成了第26篇文章。

第1轮：头像不显示

菜单栏修完后，用户问：“右上角的头像怎么不显示？”

排查发现avatar img标签存在，但显示的是"系"字。开始以为是后端API的问题，去掉了JWT认证。但还是不行。

最后发现是JS脚本最后执行了一行代码：

avatarEl.textContent=name.charAt(0);

这行代码在页面加载后找到avatar元素，把它的innerHTML替换成了用户名的第一个字。所以不管img标签怎么设，JS加载完成后都会被覆盖成文字。

修复加了判断：如果avatar已经有img标签，就不覆盖。涉及11个页面。

第2轮：loading不显示

头像修好了，但顶栏右上角一直显示一个空白的黑色区域。

我说"那是’加载中…'，只是文字颜色是透明的"。用户说"你怎么知道那是加载中"。

检查DEV-002的修复——小虾给topbarUserName加了loading-shimmer样式：

.loading-shimmer{color:transparent!important;/* 文字看不见 */}

color: transparent让文字透明了。改成半透明白色后，用户终于看到了"加载中…"——然后动画一直从左到右闪个不停。

因为JS填充"管理员"后没有移除loading-shimmer类。加了classList.remove后动画停了。

第3轮：页面显示JS代码

修完loading后，用户打开system.html，看到的不是页面而是一段JS函数源码。

检查发现多了一个</script>标签（8开9闭），导致一个JS函数跑到了<script>标签外面，被浏览器当成了HTML文本渲染。

更严重的是——用脚本扫描所有HTML文件后发现，半数以上页面都有script标签不匹配的问题。这是DEV-002/004/005三批批量修复中累积的bug——小虾复制粘贴时搞乱了标签结构，而review.py从不检查script标签完整性。

第4轮：角色全部不加载

script标签修好了，但所有页面的右上角都显示"加载中…“——31个页面，没有一个变成"管理员”。

排查JS代码：

vartoken=localStorage.getItem('token');if(!token)return;// 没token就不请求

原来小白测试时没有先登录。没有token，JS直接return了。

我让小白重新登录后再测试，角色名称就正常了。但在用户看来，这个问题就是"一直加载不出来"。

第5轮：状态不更新

小白反馈完成后，任务状态一直是pending。

追踪check_and_retry发现：done文件名中的task_id解析出错。

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

代码用下划线split后join，把短横线也替换成了下划线。拿着错误的task_id去查DB，当然找不到记录。

全量体检

5轮修复后，让小白登录后逐页检查所有31个页面。

结果：

7/31完全对齐，4个管理系统页面本身不需要顶栏，14个标题不一致和15个shimmer问题需要第6轮修复。

教训

1. 发现1个问题，查全部：asset-health一个顶栏异常，排查后发现31个页面中24个有问题
2. JS后执行会覆盖HTML：不管HTML怎么写，JS最后执行的一行代码决定了最终结果
3. 批量修复要校验完整性：script标签不匹配是批量复制粘贴中最容易犯的错误
4. 测试要先登录：角色加载依赖token，不登录就看不到效果
5. 文件名解析用分隔符要小心：task_id本身可能包含用于分隔的字符

6轮修复、3轮体验、31个页面、7个完全对齐——一个顶栏的统一之路。