大型后台管理系统如何把业务操作做可靠（10）：设计规范和组件库如何落到日常开发
同样是「批量下架」，商品页只弹一个确认框，活动页会先展示影响范围，库存页则直接开始处理。按钮颜色可以统一，但操作人员仍然要在三个页面里学习三套规则。后台的设计规范首先要统一这些会影响判断的行为。
先记录任务，再写组件规则
从常用的列表、编辑和审批中各选一个页面，跟着操作人员走一遍。记录他们在哪里对比信息，什么时候需要知道操作范围，失败后还能不能继续。把发现的问题写成场景与规则。例如批量确认需要展示候选数量和排除项，结果页区分失败与结果未知，关闭详情后焦点回到原操作入口。界面密度、筛选和按钮层级可以直接对照已有例子。《后台管理系统常见 UX 问题总结》
规范落到代码时可分三层。基础令牌定义颜色、间距、字号和焦点样式。通用组件提供表格、对话框、错误摘要等行为。任务模式组合这些组件，规定搜索、确认、提交和结果反馈。商品下架资格仍由商品模块解释，通用确认框只接收已整理的范围、影响和可执行状态。GOV.UK Design System 也分别维护组件和使用模式。GOV.UK Design System 组件
给组件定义可验收的行为
以批量确认框为例，先列清它接收和发出的东西。下面是示意契约，提交只携带确认计划的标识。
输入 planId, selectedCount, eligibleCount, exclusions, expiresAt
状态 loading | ready | submitting | expired | failed
事件 confirm(planId) | requestNewPreview() | close()加载期间显示范围正在计算，过期后给出重新预览入口。提交后可能收到任务地址，页面把操作交给任务状态区。弹窗负责焦点进入和退出、键盘操作、长文案滚动。组件层不写死某个业务角色能否下架，也不根据表格页数自己推算全部目标。
先在两个确有共同需求的页面试用，再抽出稳定部分。颜色和布局通过语义令牌集中维护。确实有业务差异时优先提供有限扩展位，并在示例中展示扩展如何影响焦点和布局。新的公共接口需要负责人、变更说明和可迁移的旧用法。
从两个页面抽出公共契约
商品页的下架会影响门店可售状态，活动页的下架会停止活动展示。拿两个页面同一次评审记录作输入，先对齐术语。两边都有「候选、可执行、已排除」，但影响文案和数据来源各不相同。组件接收已经计算好的影响说明和排除原因，页面负责把业务响应映射成这些输入。公共组件发出确认事件，由调用页处理鉴权、提交与导航。
| 规则 | 负责方 | 示例 |
|---|---|---|
| 危险操作如何突出 | 设计令牌和按钮 | 标记危险意图，并保留可辨认的文字 |
| 打开和关闭时焦点去哪 | 对话框 | 打开后进入对话框，关闭后返回触发入口 |
| 为什么这一条不能处理 | 商品业务模块 | 商品处于锁定状态 |
| 预览过期后怎么继续 | 批量任务模式 | 禁止提交旧计划，提供重新预览 |
| 实际执行了哪些记录 | 任务结果组件与业务接口 | 按结果分类查看逐条记录 |
组件接口可以用互斥状态表达。例如加载中没有计划 ID，已就绪必须有计划 ID 和可执行数量，过期状态只允许重新预览。这样调用方不需要同时传入多个可能互相打架的布尔值。提交后状态由任务承接，取消弹窗和取消任务分别处理。
让规范改动有迁移路径
如果旧业务只传一句确认文案，先把它归为简单确认。涉及批量范围的入口改用带计划数据的模式，并分批迁移影响大的页面。不要用一个可选参数同时表示简单确认、范围复核和任务结果。对已有组件调整行为时，列出受影响调用方，提供示例和可检查的迁移步骤。遇到同一个组件重复出现业务专用属性时，先看是否适合在调用方组合。
文档可以每个模式配一个最小例子和一个失败例子。对话框需要同时验证键盘进入、关闭后焦点、窄屏长文案和加载失败。适合做视觉回归的，是标题、按钮位置、滚动容器这些容易被样式升级改变的地方。行为则用可观察的事件和焦点断言，减少依赖内部 DOM 结构。
用真实状态检查组件
组件示例至少放入长商品名、空数据、过期计划和部分失败四组数据，再分别检查桌面、窄屏、键盘和放大字体。视觉回归用于发现布局和样式变化，交互断言检查焦点、禁用与事件。金额和操作资格由业务测试覆盖。抽取组件后用同一组例子对照两个调用页面，确认扩展没有重新引入不同的确认语义。
验收一次组件升级的影响
假设公共确认框要增加一条「预览将在两分钟后失效」的提示。先确认倒计时由谁计算。业务接口给出服务端时间和计划到期时间，组件可以展示剩余时间，提交是否有效仍由服务端判断。再看旧调用方是否需要新增参数。普通单条删除不使用计划，就不应因为组件升级被迫伪造一个到期时间。
可以给公共层保留两种明确的调用模式。简单确认只提供标题、后果和操作按钮。计划确认额外携带计划 ID、范围和过期状态。旧页面按原契约升级，批量页面逐步切到计划模式。迁移时记录每个页面用了哪种模式，删除旧接口前用静态搜索和真实运行验收确认调用已经清理。
测试这一改动时，从打开弹窗走到返回表格。检查倒计时结束后焦点仍可访问重新预览入口，键盘可以执行，更新后的计划有新的标识。再模拟确认恰好与过期同时发生。若服务端拒绝，界面保留原范围供参考，并要求重新预览。组件的展示结果与服务端是否接受提交应分别断言。
总结
设计规范记录操作人员应该看到什么以及如何继续，组件库把可复用的行为变成可调用的接口。把业务规则留在能解释它的模块，统一的交互才能在不同页面上长期维持。