系列第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.textContentname.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代码vartokenlocalStorage.getItem(token);if(!token)return;// 没token就不请求原来小白测试时没有先登录。没有tokenJS直接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个dashboard, asset, project, report, system, alert-center, department-board, menu-manage 无顶栏4个analytics, permission, role, user管理系统页面不需要顶栏 标题不一致14个显示硬编码标题而非JS动态设置 shimmer颜色15个仍是transparentDEV-002/004/005漏修了 页面错乱3个alert-center, billing, costscript标签问题7/31完全对齐4个管理系统页面本身不需要顶栏14个标题不一致和15个shimmer问题需要第6轮修复。教训发现1个问题查全部asset-health一个顶栏异常排查后发现31个页面中24个有问题JS后执行会覆盖HTML不管HTML怎么写JS最后执行的一行代码决定了最终结果批量修复要校验完整性script标签不匹配是批量复制粘贴中最容易犯的错误测试要先登录角色加载依赖token不登录就看不到效果文件名解析用分隔符要小心task_id本身可能包含用于分隔的字符6轮修复、3轮体验、31个页面、7个完全对齐——一个顶栏的统一之路。
