河北网站开发：同一组件在不同页面表现不同时怎样构造验收样例
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /282b75ae18bc.html
📄
河北网站开发：同一组件在不同页面表现不同时怎样构造验收样例
先给结论：不要要求组件在所有页面“长得完全一样”，而要把验收样例拆成“组件基准样例”和“页面差异样例”两层。基准样例锁住组件自身的结构与状态，差异样例记录每个页面允许覆盖哪些外观变量。这样既能保住旧系统里仍然有价值的组件，又能让新页面安全地复用或改写它。
为什么“表现不同”不一定是缺陷
同一组件在不同页面出现差异，通常有四种来源：容器宽度不同、父级样式继承不同、页面传入的参数不同、组件内部存在按路由或设备分支的逻辑。前两种属于环境差异，后两种属于组件自身行为。验收样例必须先区分这两类，否则会把合理的响应式适配当成 bug，也会把真正的逻辑分叉放过。
判断依据可以看一个信号：把组件单独放进一个中立容器，差异是否消失。消失说明问题在页面环境；仍然存在，说明问题在组件参数或内部分支。这个判断会直接决定下一步是改页面样式，还是改组件契约。
基准样例：只锁组件自身，不锁页面
基准样例的目标是让组件脱离具体页面也能被验证。它应当覆盖：默认状态、悬停或聚焦状态、禁用状态、空数据状态、超长文本状态、窄容器状态。每个样例只改变一个变量，其余保持固定。
实际动作：为每个状态写一条可复现的检查记录，注明容器宽度、传入参数和期望结果。结果如何影响下一步——如果基准样例内部就出现不一致，说明组件本身有隐藏分支，此时不应继续在页面层做适配，而应先收敛组件逻辑；如果基准样例稳定，差异就来自页面，验收重点转向页面覆盖规则。
页面差异样例：把“允许改什么”写清楚
差异样例不是复制基准样例，而是记录该页面相对基准做了哪些覆盖。建议只允许覆盖三类变量：外边距、容器最大宽度、主题色变量。其余如字号阶梯、圆角、交互反馈，原则上不应由页面单独改写。
可以这样组织一条差异样例：页面标识、覆盖的变量、覆盖原因、覆盖后的期望结果、不被允许改动的部分。假设某列表页把组件外边距从 16px 改为 24px，理由是它嵌在带内边距的卡片里；这条样例就应写明只改外边距，字号和圆角仍与基准一致。假设成立的前提是页面容器确实提供了额外内边距，而不是靠改组件来掩盖布局问题。
保留、改写还是退出：三种取舍的适用前提
- 保留：组件在基准样例中稳定，页面差异只涉及外边距或宽度，且没有页面修改内部逻辑。此时保留原组件，把差异收敛为页面级变量覆盖。
- 改写：多个页面反复覆盖同一批变量，或差异需要靠传入不同参数才能实现。这说明组件契约太窄，应把差异点提升为组件的正式参数，而不是继续在页面层打补丁。
- 退出：组件在基准样例中就无法稳定，或它的差异来自已经无人维护的旧分支，且没有页面真正依赖这些分支。此时保留只会让验收样例越来越长，应替换或移除，但先确认没有页面通过隐藏参数依赖它。
三种取舍不必同时成立。多数情况下，一个旧系统里会同时存在可保留的组件和该退出的组件，关键是按组件逐个判断，而不是按整站统一决定。
验收样例如何随取舍更新
决定保留后，基准样例保持不变，只新增或修改页面差异样例。决定改写后，基准样例需要增加新的参数状态，原页面差异样例则相应删除已提升为参数的覆盖项。决定退出后，基准样例和对应差异样例一起移除，并检查是否有页面仍在引用。
一个可操作的收尾动作：每次取舍完成后，重新跑一遍基准样例。如果基准样例通过而页面仍异常，问题就落在页面覆盖或容器环境；如果基准样例本身失败，说明改写或退出没有完成，下一步应回到组件层处理，而不是继续调整页面。
