网站设计风格，同一组件在不同页面表现不同时怎样构造验收样例
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /7ed28293e09f.html
📄
网站设计风格，同一组件在不同页面表现不同时怎样构造验收样例
先给结论：不要为这个组件单独写一份“万能验收单”，而要按它出现的页面语境拆成两组样例——一组验证组件在“孤立容器”里的自身规则，另一组验证它在“真实页面上下文”里被外部样式或布局影响后的表现。只有当两种页面共享同一套样式来源时，才可以把它们合并成一份验收样例；一旦来源不同，合并就会掩盖问题。
先判断两种页面是否共享同一套样式来源
同一组件表现不同，最常见的原因不是组件本身写错了，而是它进入不同页面后，继承的字体、行高、盒模型或外层宽度发生了变化。判断依据可以落到三个可观察的点上：
- 组件是否被包在同一个容器类里，比如都放在
<main class="content">下，还是其中一个直接挂在<body>下。 - 两个页面是否加载了同一份基础样式文件，还是各自引了不同的重置样式或主题样式。
- 组件内部的尺寸单位是相对单位还是固定像素，外层容器宽度变化时它会不会跟着变。
如果三个点都指向“共享同一套来源”，说明差异更可能来自内容量或数据状态，验收样例可以围绕数据边界来构造。如果其中任意一个点指向“来源不同”，就必须先隔离外部影响，再验收组件本身。
条件一：样式来源相同，按数据边界构造样例
这种情况下的差异通常不是视觉规则变了，而是同一组件承载了不同长度的内容。验收样例应该覆盖组件在真实数据下的极值，而不是只截一张好看的默认状态图。
具体动作是：从两个页面各取一条真实内容，测量组件在最短和最长内容下的高度、换行位置和溢出情况，然后把“内容长度”作为样例变量记录下来。结果会直接影响下一步——如果最长内容导致按钮被挤出容器，那么要修的是组件的布局约束，而不是某个页面的局部样式。
一个假设例子：某列表组件在首页显示三条摘要，在详情页显示一条长摘要。假设首页摘要平均 40 字、详情页摘要平均 180 字，那么验收样例至少要包含 40 字、180 字和一条超长边界值三种输入，观察组件是否在 180 字时仍保持标题与操作按钮的对齐关系。这里的数字只用于说明比较方法，不代表任何真实项目数据。
条件二：样式来源不同，先隔离再验收
如果两个页面引入了不同的基础样式，那么直接对比组件截图没有意义，因为你看到的是两套全局规则叠加后的结果。此时验收样例要分两步走。
- 把组件放进一个最小页面，只加载组件自身依赖的样式，记录它的基准表现。
- 再把它分别放回两个真实页面，记录每个页面额外施加的影响，比如外边距、字号或颜色覆盖。
这样做的结果是：你能明确说出差异来自哪一层。如果基准表现一致、只在真实页面里不同，问题属于页面级样式冲突；如果基准表现就不一致，问题属于组件自身或构建流程。下一步该改哪里，由这个结论决定，而不是靠反复调像素去试。
验收样例应该写清的三类信息
无论走哪条路径，一份能复用的验收样例至少要包含三类信息，缺一类就会让执行者靠猜。
- 输入条件：页面、容器、内容长度、数据状态，以及是否加载了额外样式。
- 观察点：不是“看起来正常”，而是具体到对齐、换行、溢出、间距是否与基准一致。
- 判定动作：一致时进入下一组样例，不一致时记录是哪一层引入的差异，并指明修改归属。
这三类信息的作用是让验收从“凭感觉对比”变成“按条件复现”。当同一组件再次在第三个页面出现异常时，你可以直接判断它属于已有样例的哪一种，而不必重新排查一遍。
例外：什么时候不该强行统一表现
有一种情况需要保留差异：组件在不同页面承担不同任务。例如同一个卡片组件，在列表页用于快速浏览，在详情页用于承载主要操作。此时两处表现不同是设计意图，不是缺陷。
判断方法是看差异是否影响任务完成。如果差异只涉及装饰性间距，可以统一；如果差异影响按钮可点击区域、信息层级或阅读顺序，就应保留，并在验收样例中把它标注为“预期差异”，而不是当作待修复项。明确写出预期差异，能避免后续维护者把它误判为回归问题。
回到最初的问题：构造验收样例的关键不在样例数量，而在于先确认两个页面是否共享样式来源。共享时按数据边界取样例，不共享时先隔离再验收，遇到任务不同的页面则把差异写成预期。这样每一步动作都会产生一个明确结论，直接决定下一步是修组件、修页面还是保留现状。
