小四的条件类名

问题背景

列表行和按钮这类组件里，条件类名几乎无处不在：逾期行要高亮、选中行要有标记、按钮在 loading 或 disabled 时呈现不同样式。直接在模板里写 :class="row.overdue ? 'is-overdue' : ''"，再叠加选中、高亮几个条件，三元表达式很快膨胀到难以阅读。更麻烦的是，同样的业务状态散落在几十处模板里，改一次状态样式就要全项目搜索替换；字符串相加 a + (b ? ' x' : '') 散落各处且不统一，是这类代码最常见的失控方式。

技能如何工作

核心做法是把长三元表达式收拢成命名清晰的辅助函数，比如 customerRowClass、actionBtnClass：统一接收状态参数，返回一个类名结果。

• 用 clsx 拼接条件类名：falsy 值（false、null、undefined、0、空字符串）不会输出任何类名
• 对象写法 { 'is-active': on }：键为类名、值为条件，一目了然
• Vue 直接调用：:class="customerRowClass({ tone, className: $attrs.class })"，把组件外部传入的类名一并合并
• 轻量替代：只有字符串拼接的简单场景可换 clsx/lite，体积更小

自测时重点验证两件事：所有条件都为 false 时只剩基础类；字符串与对象混用时顺序符合预期。

适用边界与注意点

• clsx 会忽略 falsy 值，但不要把会渲染成 "0" 的意外值传进去
• 类名字符串要保持可扫读，不要一次拼接几十个无语义工具类而不分组
• 它只解决条件类名拼接，不要在本技能内引入完整的 CSS-in-JS 框架
• 用 Tailwind 且需要处理类名冲突合并时，可以再叠 tailwind-merge，这不是本技能的强制要求
• 实现要点注释中会标注「小四原创」，便于识别来源