AI多Agent协作系统实战(二十八):顶栏统一战争——从1个页面异常到31个页面全量对齐

系列第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脚本最后执行了一行代码:

javascript 复制代码
avatarEl.textContent = name.charAt(0);

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

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

第2轮:loading不显示

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

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

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

css 复制代码
.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代码:

javascript 复制代码
var token = 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个 dashboard, asset, project, report, system, alert-center, department-board, menu-manage
🔴 无顶栏 4个 analytics, permission, role, user(管理系统页面,不需要顶栏)
🟡 标题不一致 14个 显示硬编码标题而非JS动态设置
🟡 shimmer颜色 15个 仍是transparent(DEV-002/004/005漏修了)
🔴 页面错乱 3个 alert-center, billing, cost(script标签问题)

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个完全对齐------一个顶栏的统一之路。

相关推荐
每周报刊3 分钟前
智能手表健康监测实测:心率、血氧数据靠谱吗?
人工智能·智能手表
HIT_Weston5 分钟前
239、【AI】【模型部署】基座模型研究:反向传播的已知、所求与场景
人工智能·模型部署
深频率7 分钟前
15 Pro 能用、15 不能用:Siri AI 划了三档
人工智能
YOLO数据集集合10 分钟前
电力设备目标检测数据集 | 电力设备 变电站巡检 部件识别 目标检测 YOLO格式 9127期
人工智能·yolo·目标检测·计算机视觉·目标跟踪·电力设备
我是小白呀15 分钟前
24-从提交到服务开通:交付一个可恢复、可升级的企业Workflow系统
人工智能·workflow
code2cat25 分钟前
【随笔】Agent Skills如何按需加载:把技能说明放进分层目录
人工智能·ai agent·agent skills
AI 算法大模型备案~当当29 分钟前
各地备案数量怎么看:一份属地公告的认读与台账方法
java·数据库·人工智能
cu14330 分钟前
细谈GM8229的具体功能与其应用
c语言·c++·人工智能·单片机
Alson_Code32 分钟前
从0到1打造个人专属编程智能体
人工智能·langchain·ai编程
AI Data 搭子33 分钟前
阿里云发布 Agentic Storage 全矩阵产品:面向 AI 到 Agent 负载的全栈演进
人工智能·阿里云·云计算