colorTokens.js 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. /**
  2. * 后台五维色彩映射 —— 品牌色单一出口(U5 批次收敛)
  3. *
  4. * 品牌色:身 #FF8C42 / 智 #1677FF / 富 #F59E0B / 行 #10B981 / 心 #FF6B9D
  5. *
  6. * 约定:
  7. * 1. 页面不再各自重复定义五维色值,一律从本模块引用;
  8. * 2. `--adm-primary` 等令牌的取值在 admin-tokens.css 中定义,本模块只读取不改动;
  9. * 3. canvas / echarts 的 itemStyle.color、color 数组不解析 CSS 变量,
  10. * 必须经 adminColor() 用 getComputedStyle 读取运行时令牌值;
  11. * 4. 普通 DOM 样式仍优先写 `var(--adm-primary)`,不要为了统一样式而多绕一层 JS。
  12. */
  13. /** 五维色彩映射(单一出口) */
  14. export const DIMENSION_COLORS = {
  15. body: '#FF8C42', // 身
  16. wisdom: '#1677FF', // 智
  17. wealth: '#F59E0B', // 富
  18. action: '#10B981', // 行
  19. mind: '#FF6B9D' // 心
  20. }
  21. /** 后台语义令牌 → CSS 变量名 */
  22. const TOKEN_VAR_MAP = {
  23. primary: '--adm-primary',
  24. success: '--adm-success',
  25. warning: '--adm-warning',
  26. danger: '--adm-error',
  27. error: '--adm-error',
  28. info: '--adm-info'
  29. }
  30. /**
  31. * 读取 :root 上的令牌值(canvas/echarts 不解析 CSS var,只能取实际色值)
  32. * @param {String} varName CSS 变量名,如 '--adm-primary'
  33. * @param {String} fallback 读取失败时的兜底色值
  34. * @return {String} 去掉首尾空格后的色值
  35. */
  36. function readCssVar(varName, fallback) {
  37. if (typeof window === 'undefined' || typeof document === 'undefined' || !window.getComputedStyle) {
  38. return fallback
  39. }
  40. const value = (window.getComputedStyle(document.documentElement).getPropertyValue(varName) || '').trim()
  41. return value || fallback
  42. }
  43. /**
  44. * 取后台令牌色值(品牌主色 / 语义色 / 五维色)
  45. * @param {String} key 'primary'|'success'|'warning'|'danger'|'info',或五维 code(body/wisdom/wealth/action/mind)
  46. * @return {String} 实际色值,未识别的 key 返回空串
  47. */
  48. export function adminColor(key) {
  49. if (!key) return ''
  50. if (Object.prototype.hasOwnProperty.call(DIMENSION_COLORS, key)) return DIMENSION_COLORS[key]
  51. const varName = TOKEN_VAR_MAP[key]
  52. if (!varName) return ''
  53. // primary 的兜底值与五维「智」同源(--adm-primary 即 #1677FF)
  54. const fallback = key === 'primary' ? DIMENSION_COLORS.wisdom : ''
  55. return readCssVar(varName, fallback)
  56. }
  57. /**
  58. * 取五维色值,未命中时用调用方兜底值
  59. * @param {String} code 五维 code
  60. * @param {String} [fallback] 兜底色值(可传 CSS 变量)
  61. * @return {String}
  62. */
  63. export function dimensionColor(code, fallback) {
  64. if (code && Object.prototype.hasOwnProperty.call(DIMENSION_COLORS, code)) return DIMENSION_COLORS[code]
  65. return fallback || ''
  66. }
  67. export default {
  68. DIMENSION_COLORS: DIMENSION_COLORS,
  69. adminColor: adminColor,
  70. dimensionColor: dimensionColor
  71. }