MOD.10 控件DOC-10-015AUTHOR · 陈拾一2025-07-21READ · 4 MIN

悬浮卡片的防抖显示

超数频控件懒加载受控模式

从日期选择器聊起：这个看似平凡的控件藏着键盘操作、时区、边界值三座大山。本组把它做完后，受控模式的经验被推广到了整个控件库。

SEC.01团队协作

有一条经验值得单独记录：组合控件的解耦铁律：一个控件只做一件事，复杂表单靠组合而非继承。搜索框不带下拉逻辑，下拉不带过滤逻辑，懒加载的每个零件都可单独测试和替换。

另一个常被忽视的细节是：每个控件要有一页「何时不该用我」：日期范围用两个选择器还是面板、懒加载的选型边界写清楚，误用率下降后，定制需求也少了一半。

// CASE FILE · 实测档案

复盘：受控改造：半受控开关全部收编，状态错乱类缺陷归零。

复盘中还藏着一条：触控冗余全局统一：桌面最小 28px 高，触控最小 44px，同一控件用媒体查询切换尺寸档。受控模式的双档章法让一套代码同时过桌面评审和移动评审。

复盘文化比做法本身更重要：每次受控模式的线上问题都要求 48 小时内出复盘，聚焦流程漏洞而非个人责任。三年下来，同类问题的复发率降到个位数。

受控与非受控的铁律是「始终不要半受控」：要么值完全由外部驱动，要么完全自治，混合模式是无数诡异 bug 的病根。库里每个控件在文档首页声明自己的模式。

此外还有一条底线：文档用例化指的是：每个控件的文档页就是可交互的 demo 加参数表，示例代码可直接复制。受控模式的文档站日均访问量比内网任何工具都高，这是好用的证明。

另一个常被忽视的细节是：控件的可配置项要克制：每个 prop 都是长期负债，懒加载的配置面超过 20 个之后，测试矩阵爆炸，文档没人能读完。少即是多在这里成立。

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

顺带记录一个细节：任何做法都要先问约束：人力、工期、存量兼容，三者决定了可行解的形状。项目组在懒加载上的取舍全部围绕这三条展开，脱离约束谈最佳实践是纸面文章。

实施的第一步一贯是摸清现状：把受控模式的存量清点成一张表，标注归属、状态和风险等级。这张表在后续三周里被项目组翻旧了，比任何文档都常用。