初始化

缺陷：主题配色需要优化整体的同风格
2026-08-14 23:17:19 +08:00
parent 6da262b134
commit 516f077568
26 changed files with 2280 additions and 1370 deletions
--- a/utils/theme.js
+++ b/utils/theme.js
@@ -0,0 +1,87 @@
+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('; ')
+}