Files
kra-new/web/src/theme/adapters/element-plus.js
T
2026-08-13 22:35:13 +08:00

48 lines
1.9 KiB
JavaScript

import { setElementPlusColor, setElementPlusPrimaryColor } from '../color'
export const BASE_ELCONF = {
zIndex: 2000,
button: { autoInsertSpace: false },
message: {
grouping: false,
plain: true,
}
}
/**
* 解析注入 `<el-config-provider>` 的配置。
*
* 注意:Provider 只能下发组件「行为」配置(size / zIndex / button / message 等),
* 无法覆盖颜色、圆角这类 CSS 变量——后者由 applyElementPlusTheme 直接写 --el-* 变量。
* 因此这里不再保留独立的 elConf 覆盖通道,size 直接取自 settings,其余为应用级常量。
*/
export const resolveElementPlusConfig = (settings) => ({
size: settings.size,
zIndex: BASE_ELCONF.zIndex,
button: { ...BASE_ELCONF.button },
message: { ...BASE_ELCONF.message }
})
/**
* 把主题色与圆角写入 Element Plus 的 CSS 变量(--el-color-* / 圆角)。
* @param {{ themeColors: object, settings: object, isDark: boolean }} context
*/
export const applyElementPlusTheme = ({ themeColors: colors, settings, isDark }) => {
const mode = isDark ? 'dark' : 'light'
const root = document.documentElement.style
const radius = `${settings.themeRadius}rem`
// Prism 把品牌色钉在 500(明暗两态一致),故传入的原始种子色即各语义色的 500 步,
// 与 UnoCSS 的 bg-primary / bg-success 同源,直接写入 --el-* 即可保持一致;mode 仅用于生成明暗变体。
setElementPlusPrimaryColor(colors.primary, mode)
setElementPlusColor('success', colors.success, mode)
setElementPlusColor('warning', colors.warning, mode)
setElementPlusColor('danger', colors.error, mode)
setElementPlusColor('error', colors.error, mode)
setElementPlusColor('info', colors.info, mode)
root.setProperty('--kra-radius', radius)
root.setProperty('--el-border-radius-base', radius)
root.setProperty('--el-card-border-radius', radius)
}