cfc/cfc-web/src/utils/colorTokens.js

/**
 * 后台五维色彩映射 —— 品牌色单一出口（U5 批次收敛）
 *
 * 品牌色：身 #FF8C42 / 智 #1677FF / 富 #F59E0B / 行 #10B981 / 心 #FF6B9D
 *
 * 约定：
 * 1. 页面不再各自重复定义五维色值，一律从本模块引用；
 * 2. `--adm-primary` 等令牌的取值在 admin-tokens.css 中定义，本模块只读取不改动；
 * 3. canvas / echarts 的 itemStyle.color、color 数组不解析 CSS 变量，
 *    必须经 adminColor() 用 getComputedStyle 读取运行时令牌值；
 * 4. 普通 DOM 样式仍优先写 `var(--adm-primary)`，不要为了统一样式而多绕一层 JS；
 * 5. 后台主色令牌与五维品牌色已解耦、互不影响：主色加深后不再与五维「智」同源，
 *    adminColor('primary') 的兜底值由 ADMIN_PRIMARY_FALLBACK 独立提供，五维色值恒定不动。
 */

/** 五维色彩映射（单一出口） */
export const DIMENSION_COLORS = {
  body: '#FF8C42', // 身
  wisdom: '#1677FF', // 智
  wealth: '#F59E0B', // 富
  action: '#10B981', // 行
  mind: '#FF6B9D' // 心
}

/** 后台主色兜底值：与五维品牌色解耦，独立维护，勿复用 DIMENSION_COLORS.wisdom */
const ADMIN_PRIMARY_FALLBACK = '#0B5FCC'

/** 后台语义令牌 → CSS 变量名 */
const TOKEN_VAR_MAP = {
  primary: '--adm-primary',
  success: '--adm-success',
  warning: '--adm-warning',
  danger: '--adm-error',
  error: '--adm-error',
  info: '--adm-info'
}

/**
 * 读取 :root 上的令牌值（canvas/echarts 不解析 CSS var，只能取实际色值）
 * @param {String} varName CSS 变量名，如 '--adm-primary'
 * @param {String} fallback 读取失败时的兜底色值
 * @return {String} 去掉首尾空格后的色值
 */
function readCssVar(varName, fallback) {
  if (typeof window === 'undefined' || typeof document === 'undefined' || !window.getComputedStyle) {
    return fallback
  }
  const value = (window.getComputedStyle(document.documentElement).getPropertyValue(varName) || '').trim()
  return value || fallback
}

/**
 * 取后台令牌色值（品牌主色 / 语义色 / 五维色）
 * @param {String} key 'primary'|'success'|'warning'|'danger'|'info'，或五维 code（body/wisdom/wealth/action/mind）
 * @return {String} 实际色值，未识别的 key 返回空串
 */
export function adminColor(key) {
  if (!key) return ''
  if (Object.prototype.hasOwnProperty.call(DIMENSION_COLORS, key)) return DIMENSION_COLORS[key]
  const varName = TOKEN_VAR_MAP[key]
  if (!varName) return ''
  // 兜底值独立于五维品牌色：后台主色加深后与「智」解耦，两者互不影响
  const fallback = key === 'primary' ? ADMIN_PRIMARY_FALLBACK : ''
  return readCssVar(varName, fallback)
}

/**
 * 取五维色值，未命中时用调用方兜底值
 * @param {String} code 五维 code
 * @param {String} [fallback] 兜底色值（可传 CSS 变量）
 * @return {String}
 */
export function dimensionColor(code, fallback) {
  if (code && Object.prototype.hasOwnProperty.call(DIMENSION_COLORS, code)) return DIMENSION_COLORS[code]
  return fallback || ''
}

export default {
  DIMENSION_COLORS: DIMENSION_COLORS,
  adminColor: adminColor,
  dimensionColor: dimensionColor
}