MOD.10 控件DOC-10-025AUTHOR · 陈拾一2025-06-11READ · 4 MIN

单选组的横向折行

超数频控件状态全集边界处理

控件是设计系统的弹药库。本文讨论的不是怎么画控件，而是怎么让状态全集在 12 个项目里被标准地使用：版本打法、文档形态、回归保障，一条链讲完。

SEC.01团队协作

任何做法都要先问约束：人力、工期、存量兼容，三者决定了可行解的形状。团队在状态全集上的取舍全部围绕这三条展开，脱离约束谈最佳实践是纸面文章。

灰度是工程做法的安全网：先放 5% 流量观察核心指标，任何劣化超过基线 5% 当场回滚。状态全集的那次灰度让团队在凌晨两点避免了一次全量事故。

// CASE FILE · 实测档案

复盘：开关控件重构：补全中间态保护后，开关类线上缺陷从季度 9 个降到 0 个。

顺带记录一个细节：每个控件要有一页「何时不该用我」：日期范围用两个选择器还是面板、状态全集的选型边界写清楚，误用率下降后，定制需求也少了一半。

组合控件的解耦信条：一个控件只做一件事，复杂表单靠组合而非继承。搜索框不带下拉逻辑，下拉不带过滤逻辑，状态全集的每个零件都可单独测试和替换。

这里再补一笔：开关控件的瞬态保护指中间态：请求未返回前开关锁定在过渡样式，不允许二次点击把状态翻转成未知。团队在这个边界处理上栽过跟头，修复后开关类缺陷归零。

触控冗余全局统一：桌面最小 28px 高，触控最小 44px，同一控件用媒体查询切换尺寸档。边界处理的双档打法让一套代码同时过桌面评审和移动评审。

复盘中还藏着一条：下拉超过 200 项务必上虚拟滚动，渲染节点压在 30 个以内。灰度验证中千项列表的打开耗时从 800ms 降到边界处理的 60ms，滚动帧率稳定 58fps，改动只在内部实现。

八态按钮全集：默认、悬停、按压、聚焦、加载、禁用、只读、错误。每个状态务必有视觉表达和测试用例，状态全集的任何一态缺失，都会在某个边角场景变成线上 bug。

长期维护成本是选型时最轻易被轻视的变量：一个功能强大的方案可能带来每天 12 分钟的维护负担，一年下来就是足足一周的人力，值得在评审会上算这笔账。

复盘中还藏着一条：所有规则都要有复查节点：本组给状态全集的规范设了季度复审，到期清点例外和豁免，过期的清理，失效的修订。规范不呼吸，就会变成化石。

禁用态需要补工具提示说明原因，否则就是一堵无解释的墙。「该按钮在审核中不可用，预计 2 小时后解锁」比一个灰按钮友好太多，实现成本只有一个 tooltip。

最后再记一笔：受控与非受控的铁律是「一贯不要半受控」：要么值完全由外部驱动，要么完全自治，混合模式是无数诡异 bug 的起点。库里每个控件在文档首页声明自己的模式。