| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677 |
- /**
- * 后台五维色彩映射 —— 品牌色单一出口(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。
- */
- /** 五维色彩映射(单一出口) */
- export const DIMENSION_COLORS = {
- body: '#FF8C42', // 身
- wisdom: '#1677FF', // 智
- wealth: '#F59E0B', // 富
- action: '#10B981', // 行
- mind: '#FF6B9D' // 心
- }
- /** 后台语义令牌 → 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 ''
- // primary 的兜底值与五维「智」同源(--adm-primary 即 #1677FF)
- const fallback = key === 'primary' ? DIMENSION_COLORS.wisdom : ''
- 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
- }
|