AI多Agent协作系统实战（八）：UI一致性与自动化流水线的连环坑

系列第8篇 | 从Banner高度到review.py的正则，一个下午修了8个bug

前言

今天下午本来只想改一个请假页面的标题位置，结果一改就是一下午。从Banner高度到搜索栏对齐，从review.py的正则到ws_server的ping任务，一个接一个的坑。

这就是多Agent协作系统的真实日常——你以为改的是UI，其实改的是整个流水线。

一、请假页面的Banner三连修

1.1 标题居中→靠左

用户截图说：“请假单的banner条文字位置还是不对呀，首页是在左边的。”

查了代码，.header-title的CSS是justify-content: center，而首页是flex-start。

/* 修改前 */.header-title{display:flex;align-items:center;flex:1;justify-content:center;/* 居中 */}/* 修改后 */.header-title{display:flex;align-items:center;flex:1;justify-content:flex-start;/* 靠左 */}

改完构建部署，用户说：“还是在报这个错误。”

1.2 Banner高度太高

用户又发了张截图：“请假单的页面banner条高度还是很高。”

对比了leave.vue和index.vue的header CSS：

• leave.vue:height: 80rpx,padding: 16rpx
• index.vue:height: 56rpx,padding: 8rpx

/* 修改前 */.header-content{padding:16rpx $space-md-r 4rpx;height:80rpx;}/* 修改后 */.header-content{padding:8rpx $space-md-r 4rpx;height:56rpx;}

1.3 箭头+文字对齐工单详情页

用户第三次发截图：“请假申请的banner条，箭头和文字调成和工单的详细页一致。”

对比了leave.vue和service/detail.vue的结构：

• leave.vue: 箭头和标题是两个独立容器
• service/detail.vue: 箭头和标题在同一个.header-left容器里

<!-- 修改前 --><viewclass="nav-back"@tap="goBack"><textclass="back-icon">‹</text></view><viewclass="header-title"><textclass="header-greeting">请假申请</text></view><!-- 修改后 --><viewclass="header-left"@tap="goBack"><textclass="back-icon">‹</text><viewclass="header-info"><textclass="header-title">请假申请</text></view></view>

CSS也要跟着改，加上letter-spacing: 1rpx。

二、review.py的正则连环坑

2.1 文件不存在的误报

每次复核报告都有一行：

❌ 文件不存在: /vol1/1000/workspace/file/8080/mobile/src/pages/ - 移动端页面

查了review.py的代码，它在检查"涉及文件"时，把整个字符串当文件路径：

# 第45行line=line.strip().lstrip('- ')# 第51行 - 只处理了破折号line=re.sub(r'\s*[—–]\s*.*$','',line)

问题是测试MD里的路径是：

- /vol1/1000/workspace/file/8080/mobile/src/pages/ - 移动端页面

普通连字符-不在正则的匹配范围内。修复：

# 修改前line=re.sub(r'\s*[—–]\s*.*$','',line)# 修改后line=re.sub(r'\s+[—–-]\s+.*$','',line)

2.2 目录路径当文件检查

review.py还把目录路径当文件检查，直接报❌。修复：加了目录判断：

# 目录路径跳过文件内容检查ifos.path.isdir(full_path):results.append(f"✅ 目录存在:{full_path}")continue

三、心跳重复消息

用户说：“这两条提示重复了。”

【小密统筹报告 07-07 08:25】 ✅ 所有任务已完成，服务运行正常 ⏸️ 系统空闲，已自动暂停检测（全部任务已完成）

查了代码，format_report已经输出了"所有任务已完成"，heartbeat脚本又打印了"系统空闲"。两个不同的地方输出了重复的信息。

修复：删掉了heartbeat里的重复打印。

四、ws_server的ping任务bug

飞书突然出现了一条奇怪的消息：

✅ ping 完成通知：小牛完成任务，请复核 ❌ 复核不通过: ping - 任务MD不存在

查了ws_server日志：

[WS] 📨 收到回复: 小牛 → 小密 | ping [WS] ✅ 飞书通知已推送: ping

根因：xiaomi_heartbeat_check.py用openclaw agent -m ping唤醒Agent，Agent回复的task_id是"ping"，ws_server把它当成任务完成处理了。

修复：ws_server加了系统消息过滤：

# 忽略ping/pong等系统消息iftask_idin('ping','pong','ack','heartbeat'):log.debug(f"⏭️ 忽略系统消息:{task_id}")continue

五、auto_pipeline的测试MD模板

auto_pipeline.py自动生成测试MD时，"涉及文件"写的是：

- /vol1/1000/workspace/file/8080/mobile/src/pages/ - 移动端页面

这是个目录路径，不是文件路径。review.py检查时当然找不到。

修复：模板改为：

- /vol1/1000/workspace/file/8080/mobile/src/pages/ (目录，验证目录存在即可)

六、经验总结

1. UI修改要对比多个页面：改请假页之前，先看首页、工单详情页的CSS，保持一致
2. 正则要覆盖所有变体：-、—、–都要处理，不能只处理破折号
3. 目录≠文件：检查文件存在性时，先判断是目录还是文件
4. 系统消息要过滤：ping/pong/heartbeat这类消息不能当任务处理
5. 自动模板要验证：自动生成的MD文件，路径格式要符合review.py的解析规则