useStyleComputed

动态样式计算 Hook

痛点来源

在开发 UI 组件的过程中，另一个高频重复工作是根据 props 动态生成内联样式（inline style）。常见场景包括：

• size="large" → 需要设置更大的 font-size、padding 等
• width={200} 或 width="200px" → 需要正确转换为像素值
• 组件需要统一注入 CSS 变量（如 --primary-color）
• 某些样式需要复杂的组合逻辑（如根据多个 props 计算 border-radius）

如果每个组件都手动在模板或 setup 中拼接 style 对象，不仅代码冗余，还容易出现：

• 单位处理不一致（数字未加 px）
• 类型判断遗漏
• CSS 变量管理散乱
• 自定义样式逻辑难以扩展

设计目标

useStyleComputed 的目标是：提供一套统一、类型安全、可配置的内联样式计算机制，将所有样式相关的逻辑从组件中彻底剥离，让组件只需关注结构与行为。

核心特性

特性	说明
响应式输出	返回 ComputedRef<CSSProperties>，随 props 变化自动更新样式对象
属性到样式的映射	通过 propToStyleMap 将 props 直接映射为 CSS 属性，支持常见尺寸自动加 px
智能单位处理	对 fontSize、width、height 等属性，自动将数字转换为 px 字符串
CSS 变量支持	通过 cssVariables 统一注入自定义 CSS 变量，便于主题系统使用
自定义扩展	customStyleLogic 回调允许注入复杂样式计算逻辑（如多 props 组合）
类型安全	泛型 <T> 与组件 props 强绑定，提供完整的 TypeScript 类型提示
明确边界	只负责计算 style 对象，不涉及类名、不操作 DOM、不处理媒体查询

设计价值

useStyleComputed 与 useClassComputed 形成类名与内联样式的双剑合璧：

useClassComputed 负责结构化、可主题覆盖的 BEM 类名（表现层主力） useStyleComputed 负责动态、精确、难以通过类名实现的内联样式（逻辑层补充）

通过这一 Hook，整个组件库实现了：

样式逻辑高度集中，避免散落各组件导致的不一致 单位与类型处理统一，杜绝低级错误 CSS 变量规范注入，便于主题系统与动态样式深度融合 复杂样式组合轻松扩展，而不污染组件主逻辑 组件模板极致简洁，仅需一行 :style 绑定