系列第26篇 | 让17个页面使用同一套菜单有多难开始“asset-health.html的菜单栏样式不对参考客户管理页调整右侧显示错乱。”接到这个需求时我以为是简单的单页面修复。没想到这引发了一场持续一整天的菜单治理运动——从1个页面的差异到21个页面的全量检查再到制定规范、分批次修复、多轮验证最终实现了17个页面的像素级对齐。第一轮排查问题远比想象的多最初只是asset-health.html的菜单有问题派发给小虾修复后我留了个心眼让小白体验Agent去检查一下所有页面的菜单。结果小白回来给了一份让我头皮发麻的报告——21个页面中只有asset.html是完全正常的。其余20个页面问题五花八门问题类型影响页面数严重程度子菜单缺onclick菜单组不展开7 用户看不到子菜单菜单组内项目错乱系统设置重复5 菜单结构混乱主内容类名不一致.main vs .main-content5 影响维护最严重的7个页面的子菜单虽然有高亮active类但父菜单组没有展开缺少open类用户根本看不到高亮的选项——高亮是假高亮。制定规范不能只靠仿照手动排查的结论是我们没有一个明确的菜单编写标准每个页面都在仿照asset.html写但仿照的程度各不相同。有的仿对了结构但差了样式有的仿错了DOM层级。所以我定了一份sidebar-menu-standard规范铁律9条sidebar和main-content必须是body的直接子元素不能嵌套在topbar内当前页面所在menu-group必须有open类当前页面对应子菜单必须有active类子菜单必须有onclick属性菜单组之间不能混入其他组的菜单项必须有折叠按钮必须引用sidebar-collapse.csscollapsed规则必须在全局区不在media query内topbar必须有transition然后我把规范写进了小虾的HEARTBEAT.md这样每次开发都会自动加载。分批次修复有了规范修复就有章可循了。按优先级分3批派发批次任务修复内容涉及文件第1批DEV-001DOM结构错误sidebar嵌套在topbar内1个第2批DEV-0027个页面子菜单缺onclick属性7个第3批DEV-0035个页面菜单组内项目错乱5个修复过程并不顺利。gateway反复崩溃后面单独写小虾卡住不工作自动机制还有漏洞。但最终3批任务都在一个半小时内完成了。第二轮验证11/17页面合格修复完成后我让小白再去体验一次。这次的结果比第一次好很多问题修复前修复后变化DOM结构错误1个页面0个✅ 全部修复子菜单缺onclick导致不展开7个页面0个✅ 全部修复菜单组内项目错乱5个页面0个✅ 全部修复子菜单缺onclick属性9个页面1个⚠️ 大部分修复顶层菜单项缺onclick-5个⚠️ 新发现11/17页面完全符合规范。剩下6个页面的问题很轻微1个asset-health子菜单缺onclick5个顶层菜单项缺onclick。当时觉得差不多了——这些问题不影响功能子菜单的点击跳转是通过内联onclick实现的不匹配JS自动展开脚本而已。但是用户说菜单还是不一致我派发DEV-004和DEV-005修复了这些遗漏的问题后用户发来一句话“asset-health.html和install-scrap.html的菜单样式文字间的间距跟asset.html都不一致让小白再去好好体验一下。”我让小白第三次出发这次不检查功能只检查视觉样式——padding、颜色、字体、图标间距、active背景色。结果发现了3项差异差异项asset.html标准asset-health / install-scrap.menu-itempadding10px 15px11px 12px文字颜色#333#4b5563浅了一号.menu-item.subfont-weight600500active背景色#fff5f5rgba(233,69,96,0.08)install-scrap多了border-right无border-right: 3px solid #e94560CSS规则定义大部分相同但实际渲染有差异。比如asset-health的.menu-itemCSS里写的也是padding: 10px 15px但浏览器实际渲染是11px 12px——可能是其他样式覆盖了。这些差异很细微不放大200%看不出。但用户要的是像素级一致。第三次修复连border-right都不放过我重新写了任务MD这次不再说统一为asset.html的值这种模糊描述而是直接把小白报告里的所有具体CSS值抄进去1. .menu-item.sub font-weight: 600不是500 2. .menu-item.sub color: #e94560不是#666 3. .menu-item.sub background: #fff5f5不是transparent 4. .menu-item.active background: #fff5f5不是rgba(...) 5. install-scrap删掉多余的border-right: 3px solid #e94560每条都精确到像素值和色值。经验总结发现1个问题就要查全部。asset-health一个页面有问题排查后发现21个页面中20个都有问题。规范比仿照管用。之前的修复方式是参考asset.html每个人理解的参考程度不同。有了明确规范每次修复都有标准可依。功能一致 ≠ 视觉一致。第一次验证只检查了功能菜单能展开、能跳转忽略了视觉差异。第二轮验证才发现padding、颜色、字体都不一致。派发MD要有具体数值。统一为asset.html的值这种描述对AI来说太模糊必须写明padding: 10px 15px这样的具体值。最终17个页面的菜单实现了从结构到样式的完全统一——虽然花了3轮修复、3轮验证、1份规范文档但以后每个新页面都有标准可依了。