阶段标签色

解决阶段标签的颜色稳定性问题

在商机看板、漏斗图或Demo列表中，阶段标签若每次渲染随机生成颜色，会导致刷新后颜色跳动，影响用户对阶段状态的识别；若颜色对比度不足，又可能使文字难以阅读。阶段标签色技能针对这一问题，通过固定颜色映射规则，确保同一阶段名始终对应相同颜色，同时自动生成可读的前景色与背景色组合。

核心能力与实现步骤

该技能基于chroma-js库实现，核心流程包括：

• 阶段列表到颜色scale的转换：将业务阶段枚举输入stagePalette函数，生成稳定的颜色序列（如通过固定scale或哈希色相）；
• 背景与前景色配对：输出包含bg（背景色）和fg（前景色）的对象，自动根据背景亮度选择深色或浅色文字，确保可读性；
• 标签样式绑定：将生成的bg、fg与border（可选）绑定到标签组件，支持商机看板阶段Tag、漏斗图图例等场景；
• 可复现性保障：阶段顺序稳定时，颜色序列可通过固定scale或哈希算法复现，避免刷新后颜色变化。

适用边界与注意点

• 依赖要求：需先安装chroma-js（可通过npm i chroma-js获取，TypeScript项目可按需添加@types/chroma-js）；
• 禁止随机色：避免每次渲染生成随机颜色，否则会导致标签闪烁；
• 对比度优先：禁止使用纯红绿等无对比度组合，需确保前景色与背景色满足可读性要求；
• 范围限制：不涉及主题编辑器或全站Design Token平台，仅聚焦阶段标签颜色的稳定生成。