useColorUtils
useColorUtils：颜色工具函数集合
痛点来源
在现代 UI 组件库中，颜色处理是视觉一致性的核心，却常常散落着重复且易出错的逻辑：
- 需要将十六进制或 rgb 颜色转换为带透明度的
rgba - 主题色或动态颜色需全局注入到
:root的 CSS 变量中（如--primary-color） - 朴素（plain）模式下常需对主题变量添加透明度（如
rgba(var(--el-color-primary), 0.2)） - 服务端渲染（SSR）环境下不能访问
document，全局样式注入必须安全处理 - 动态注入的全局变量若不清理，会导致内存泄漏或多实例污染
这些看似简单的需求，若分散在各个组件中实现，会导致转换规则不一致、SSR 报错、样式泄漏等问题。
设计目标
useColorUtils 并非传统意义上的响应式 Hook，而是一个纯工具函数集合，专为颜色相关操作提供统一、安全、可复用的实现。它是 useColorComputed 等颜色 Hook 的底层支撑，旨在：
- 集中所有颜色转换与全局注入逻辑
- 确保 SSR 兼容与客户端安全执行
- 提供自动清理机制，避免样式污染
核心工具函数
| 函数 | 职责 | 关键特性 |
|---|---|---|
| toRGBA | 将 #xxx、#xxxxxx 或 rgb() 颜色转换为 rgba(..., opacity) | 纯字符串处理，无 DOM 依赖，SSR 完全安全 支持 3 位与 6 位 hex 异常输入返回 transparent |
| applyGlobalColor | 将颜色值动态注入到 :root 的 CSS 自定义变量中 | 客户端专属（SSR 下自动跳过） 使用 onUnmounted 自动清理变量防止多实例或切换时残留旧值 |
设计亮点
- SSR 友好：所有涉及 DOM 的操作都严格判断
typeof document !== 'undefined'，避免服务端渲染崩溃。 - 自动资源管理：
applyGlobalColor在注入全局变量的同时注册onUnmounted清理函数，确保组件销毁时变量被移除，完美适配动态主题切换或多实例场景。 - 轻量纯函数：
toRGBA不依赖 Vue 响应式或生命周期，纯字符串解析，可在任何环境（setup、utils、甚至非 Vue 上下文）安全调用。 - 与主题系统深度协同：专为 CSS 变量（如
var(--btn-color-primary)）设计，配合toRGBA可轻松实现透明度叠加效果。
设计价值
useColorUtils 虽小，却解决了组件库中颜色处理的所有“隐痛”：
统一转换规则，避免各组件实现差异 安全处理 SSR 与客户端边界 自动清理全局样式，杜绝泄漏 为更高层次的颜色 Hook（如 useColorComputed）提供坚实基础