88 lines
2.3 KiB
JavaScript
88 lines
2.3 KiB
JavaScript
|
import { getCache, setCache } from '@/utils/cache'
|
|||
|
|
import { getThemeApi } from '@/api/page/theme.js'
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 主题令牌的本地应用器
|
|||
|
|
*
|
|||
|
|
* 后端 GET wx/theme 返回 { css_vars, tokens, layout, ... }。
|
|||
|
|
* 注意：微信小程序里不要用动态 import() 拉 API——经常静默失败，看起来像「没请求主题」。
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
const STORAGE_KEY = 'theme_tokens'
|
|||
|
|
const STORAGE_VARS_KEY = 'theme_css_vars'
|
|||
|
|
|
|||
|
|
/** 内置兜底主题（与后端第一套轻奢香槟金对齐） */
|
|||
|
|
export const FALLBACK_VARS = {
|
|||
|
|
'--color-primary': '#B08D57',
|
|||
|
|
'--color-primary-soft': '#d9b97f',
|
|||
|
|
'--color-bg': '#FAF7F2',
|
|||
|
|
'--color-bg-soft': '#f5f2ec',
|
|||
|
|
'--color-surface': '#ffffff',
|
|||
|
|
'--color-text': '#1C1917',
|
|||
|
|
'--color-text-soft': '#666666',
|
|||
|
|
'--color-border': '#E7DFD3',
|
|||
|
|
'--radius-md': '16rpx',
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 拉取主题并落地；失败不抛，走缓存/兜底
|
|||
|
|
*/
|
|||
|
|
export async function loadAndApplyTheme() {
|
|||
|
|
let theme = null
|
|||
|
|
try {
|
|||
|
|
// eslint-disable-next-line no-console
|
|||
|
|
console.log('[theme] GET theme …')
|
|||
|
|
theme = await getThemeApi()
|
|||
|
|
// eslint-disable-next-line no-console
|
|||
|
|
console.log('[theme] ok', theme && theme.code, theme && theme.fallback)
|
|||
|
|
} catch (e) {
|
|||
|
|
// eslint-disable-next-line no-console
|
|||
|
|
console.warn('[theme] request failed', e)
|
|||
|
|
}
|
|||
|
|
if (!theme || !theme.css_vars) {
|
|||
|
|
theme = {
|
|||
|
|
css_vars: getCache(STORAGE_VARS_KEY) || FALLBACK_VARS,
|
|||
|
|
tokens: getCache(STORAGE_KEY) || {},
|
|||
|
|
fallback: true,
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
applyTheme(theme)
|
|||
|
|
return theme
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 写入缓存；H5 同步到 documentElement */
|
|||
|
|
export function applyTheme(theme) {
|
|||
|
|
if (!theme) return
|
|||
|
|
const vars = theme.css_vars || FALLBACK_VARS
|
|||
|
|
setCache(STORAGE_VARS_KEY, vars)
|
|||
|
|
if (theme.tokens) {
|
|||
|
|
setCache(STORAGE_KEY, theme.tokens)
|
|||
|
|
}
|
|||
|
|
applyVarsToDom(vars)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function applyVarsToDom(vars) {
|
|||
|
|
if (!vars) return
|
|||
|
|
// #ifdef H5
|
|||
|
|
try {
|
|||
|
|
const root = document.documentElement
|
|||
|
|
Object.entries(vars).forEach(([k, v]) => {
|
|||
|
|
root.style.setProperty(k, String(v))
|
|||
|
|
})
|
|||
|
|
} catch (e) {
|
|||
|
|
// ignore
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function getActiveVars() {
|
|||
|
|
return getCache(STORAGE_VARS_KEY) || FALLBACK_VARS
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function varsToStyleString(vars) {
|
|||
|
|
const obj = vars || getActiveVars()
|
|||
|
|
return Object.entries(obj)
|
|||
|
|
.map(([k, v]) => `${k}: ${v}`)
|
|||
|
|
.join('; ')
|
|||
|
|
}
|