MOD.10 控件DOC-10-008AUTHOR · 陆知寒2025-08-18READ · 4 MIN

标签输入的去重策略

超数频控件虚拟滚动边界处理

补充一条实战观察：控件设计的第一课是「受控与非受控」的边界。本文用一个开关控件的三次重构，讲透虚拟滚动在 props、事件和内部状态之间的分寸。

SEC.01实施步骤

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

顺带记录一个细节：控件的主题化靠 CSS 变量注入而非样式覆盖：边界处理的换肤做法如果依赖选择器优先级，就会在下一个版本被实现细节反噬。

// CASE FILE · 实测档案

一线记录：文档站改版：用例化文档发布，控件误用类咨询 -52%。

控件 API 的稳定性比功能丰富度重要：一次破坏性升级会击穿 30 个下游项目，所以一线团队的主版本承诺三年不动，新能力全部走增量。

顺带记录一个细节：争议的办法是把口味问题翻译成数据问题：边界处理的两个方案各自上线一周，看指标说话。一线团队用这个办法终结了持续两个月的争论，双方都体面地认了输。

最后再记一笔：控件的可配置项要克制：每个 prop 都是长期负债，虚拟滚动的配置面超过 20 个之后，测试矩阵爆炸，文档没人能读完。少即是多在这里成立。

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

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

视觉回归测试用像素快照：每个控件八态截图，PR 里自动比对。发布后虚拟滚动的样式类回归缺陷拦截率 23%，设计师终于不用肉眼验收每一版了。

另一个常被忽视的细节是：任何做法都要先问约束：人力、工期、存量兼容，三者决定了可行解的形状。本组在虚拟滚动上的取舍全部围绕这三条展开，脱离约束谈最佳实践是纸面文章。

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