/**
|
* 主题色运行时计算与应用
|
* ---------------------------------------------------------------
|
* 背景：Element UI 2.x 的主题色是 SCSS 编译期常量，运行时无法改动；
|
* 原有 ThemePicker 依赖 unpkg CDN 拉取 theme-chalk 再字符串替换，
|
* 内网环境拉不到 CSS，导致"改主题没反应"。
|
* 做法：由任意主色推出一套色阶（hover / active / light-3~95），
|
* 写入 :root 的 CSS 变量；theme-runtime.scss 用 var() 消费这些变量，
|
* 从而实现"一次编译、运行时换肤、页面不刷新"。
|
*/
|
|
/** 默认主色：OPO_Logo.png 圆环青 */
|
export const DEFAULT_PRIMARY = '#0E768F'
|
|
/** localStorage 键（与布局设置分开，避免互相覆盖） */
|
const STORAGE_KEY = 'opo-theme'
|
|
/** 预设皮肤 */
|
export const PRESETS = [
|
{ name: '品牌青', color: '#0E768F' },
|
{ name: '玫红', color: '#CD1D4E' },
|
{ name: 'Element 蓝', color: '#409EFF' },
|
{ name: '叶芽绿', color: '#1B8E70' },
|
{ name: '紫', color: '#7B61FF' },
|
{ name: '橙', color: '#E6843C' }
|
]
|
|
const WHITE = [255, 255, 255]
|
const BLACK = [0, 0, 0]
|
|
function clamp(v) {
|
return Math.max(0, Math.min(255, Math.round(v)))
|
}
|
|
/** #abc / #aabbcc → [r,g,b]；非法返回 null */
|
export function hexToRgb(hex) {
|
if (typeof hex !== 'string') return null
|
let h = hex.trim().replace(/^#/, '')
|
if (h.length === 3) {
|
h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2]
|
}
|
if (!/^[0-9a-fA-F]{6}$/.test(h)) return null
|
return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)]
|
}
|
|
/** [r,g,b] → #RRGGBB */
|
export function rgbToHex(rgb) {
|
return (
|
'#' +
|
rgb
|
.map(function (v) {
|
const s = clamp(v).toString(16)
|
return s.length === 1 ? '0' + s : s
|
})
|
.join('')
|
.toUpperCase()
|
)
|
}
|
|
/**
|
* 混色：weight 为目标色占比（0~1）
|
* mix([14,118,143], WHITE, 0.3) ≈ 30% 白 + 70% 主色
|
*/
|
export function mix(rgb, target, weight) {
|
const w = Math.max(0, Math.min(1, weight))
|
return [
|
clamp(rgb[0] * (1 - w) + target[0] * w),
|
clamp(rgb[1] * (1 - w) + target[1] * w),
|
clamp(rgb[2] * (1 - w) + target[2] * w)
|
]
|
}
|
|
function channelLum(v) {
|
const c = v / 255
|
return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
|
}
|
|
/** 相对亮度（WCAG） */
|
export function luminance(rgb) {
|
return 0.2126 * channelLum(rgb[0]) + 0.7152 * channelLum(rgb[1]) + 0.0722 * channelLum(rgb[2])
|
}
|
|
/** 与白色的对比度，用于判断白字是否可读 */
|
export function contrastWithWhite(rgb) {
|
return 1.05 / (luminance(rgb) + 0.05)
|
}
|
|
/**
|
* 由主色推全套色阶
|
* 深色主色（亮度低）hover 用"加深"，浅色主色 hover 用"变浅"，
|
* 保证 hover 态的白字对比度不会掉下去。
|
*/
|
export function buildScale(primary) {
|
const base = hexToRgb(primary) || hexToRgb(DEFAULT_PRIMARY)
|
const isDark = luminance(base) < 0.4
|
|
const hover = isDark ? mix(base, BLACK, 0.1) : mix(base, WHITE, 0.2)
|
const active = isDark ? mix(base, BLACK, 0.2) : mix(base, WHITE, 0.32)
|
|
return {
|
primary: rgbToHex(base),
|
hover: rgbToHex(hover),
|
active: rgbToHex(active),
|
light3: rgbToHex(mix(base, WHITE, 0.3)),
|
light5: rgbToHex(mix(base, WHITE, 0.5)),
|
light7: rgbToHex(mix(base, WHITE, 0.7)),
|
light8: rgbToHex(mix(base, WHITE, 0.8)),
|
light9: rgbToHex(mix(base, WHITE, 0.9)),
|
light95: rgbToHex(mix(base, WHITE, 0.95)),
|
dark2: rgbToHex(mix(base, BLACK, 0.2)),
|
isDark: isDark,
|
contrastWithWhite: Number(contrastWithWhite(base).toFixed(2))
|
}
|
}
|
|
/** 把色阶写入 :root 的 CSS 变量（theme-runtime.scss 消费） */
|
export function applyTheme(primary) {
|
const scale = buildScale(primary || DEFAULT_PRIMARY)
|
if (typeof document === 'undefined') return scale
|
|
const root = document.documentElement
|
const map = {
|
'--opo-primary': scale.primary,
|
'--opo-primary-hover': scale.hover,
|
'--opo-primary-active': scale.active,
|
'--opo-primary-light-3': scale.light3,
|
'--opo-primary-light-5': scale.light5,
|
'--opo-primary-light-7': scale.light7,
|
'--opo-primary-light-8': scale.light8,
|
'--opo-primary-light-9': scale.light9,
|
'--opo-primary-light-95': scale.light95,
|
'--opo-primary-dark-2': scale.dark2
|
}
|
Object.keys(map).forEach(function (k) {
|
root.style.setProperty(k, map[k])
|
})
|
// 供个别需要知道"当前是否深色主色"的场景使用
|
root.setAttribute('data-opo-dark-primary', scale.isDark ? '1' : '0')
|
return scale
|
}
|
|
/** 读取上次选择的主色 */
|
export function getStoredTheme() {
|
try {
|
return localStorage.getItem(STORAGE_KEY)
|
} catch (e) {
|
return null
|
}
|
}
|
|
/** 记住选择 */
|
export function setStoredTheme(color) {
|
try {
|
localStorage.setItem(STORAGE_KEY, color)
|
} catch (e) {
|
/* 忽略隐私模式等异常 */
|
}
|
}
|
|
export default {
|
DEFAULT_PRIMARY: DEFAULT_PRIMARY,
|
PRESETS: PRESETS,
|
applyTheme: applyTheme,
|
buildScale: buildScale,
|
getStoredTheme: getStoredTheme,
|
setStoredTheme: setStoredTheme,
|
hexToRgb: hexToRgb,
|
rgbToHex: rgbToHex,
|
mix: mix,
|
luminance: luminance,
|
contrastWithWhite: contrastWithWhite
|
}
|
