diff --git a/client-configs.json b/client-configs.json index b2cb202..45429f5 100644 --- a/client-configs.json +++ b/client-configs.json @@ -1,6 +1,6 @@ { "zhinian": { - "clientId": "6", + "clientId": "8", "appId": "wx5e79df5996572539", "name": "智念", "placeholder": "快告诉智念您在想什么~", diff --git a/src/manager/ThemeManager.js b/src/manager/ThemeManager.js new file mode 100644 index 0000000..9eff5dc --- /dev/null +++ b/src/manager/ThemeManager.js @@ -0,0 +1,91 @@ +/** + * 主题颜色管理类 + * + * 根据不同客户端切换主题颜色 + * 支持5个颜色: color800, color700, color500, color100, color50 + */ + +import rawThemeConfigs from '../../theme-configs.json' with { type: 'json' }; +import { currentClientType } from '@/constant/base.js'; + +// 主题颜色key定义 +export const ThemeColorKey = { + COLOR_800: 'color800', + COLOR_700: 'color700', + COLOR_500: 'color500', + COLOR_100: 'color100', + COLOR_50: 'color50', +}; + +// 所有颜色key数组 +const THEME_COLOR_KEYS = Object.values(ThemeColorKey); + +class ThemeManager { + constructor() { + this.currentClient = currentClientType().toLowerCase(); + this.themeConfigs = rawThemeConfigs; + this.currentTheme = this.themeConfigs[this.currentClient] || this.themeConfigs.zhinian; + } + + /** 获取当前客户端 */ + getClient() { + return this.currentClient; + } + + /** 获取指定颜色 */ + getColor(key) { + return this.currentTheme[key] || ''; + } + + /** 获取所有颜色对象 */ + getAllColors() { + return { ...this.currentTheme }; + } + + /** 切换主题 */ + switchTheme(clientType) { + if (this.themeConfigs[clientType]) { + this.currentClient = clientType; + this.currentTheme = this.themeConfigs[clientType]; + } + } + + /** 生成CSS变量 */ + generateCssVariables() { + const colors = this.currentTheme; + return THEME_COLOR_KEYS.map(key => `--theme-${key}: ${colors[key]};`).join('\n'); + } + + /** 应用主题到页面 */ + applyTheme() { + const cssVars = this.generateCssVariables(); + + // #ifdef H5 + const style = document.createElement('style'); + style.id = 'theme-variables'; + style.innerHTML = `:root { ${cssVars} }`; + document.head.appendChild(style); + // #endif + + // #ifdef MP-WEIXIN + const pages = getCurrentPages(); + const currentPage = pages[pages.length - 1]; + currentPage?.setData({ themeCssVars: cssVars }); + // #endif + + return cssVars; + } +} + +// 导出单例 +export const themeManager = new ThemeManager(); + +// 便捷函数 +export const getThemeColor = (key) => themeManager.getColor(key); +export const getAllThemeColors = () => themeManager.getAllColors(); +export const applyTheme = () => themeManager.applyTheme(); + +// 便捷属性直接获取(推荐) +export const themeColors = themeManager.currentTheme; + +export default ThemeManager; \ No newline at end of file diff --git a/theme-configs.json b/theme-configs.json new file mode 100644 index 0000000..4f85974 --- /dev/null +++ b/theme-configs.json @@ -0,0 +1,23 @@ +{ + "zhinian": { + "color800": "#0B7034", + "color700": "#0B5C2D", + "color500": "#0CCD58", + "color100": "#E8FFF1", + "color50": "#F0F8F3" + }, + "duohua": { + "color800": "#174BB6", + "color700": "#19428F", + "color500": "#2D91FF", + "color100": "#D9EEFF", + "color50": "#EEF8FF" + }, + "tianmu": { + "color800": "#174BB6", + "color700": "#19428F", + "color500": "#2D91FF", + "color100": "#D9EEFF", + "color50": "#EEF8FF" + } +} \ No newline at end of file