117 行
2.8 KiB
JavaScript
117 行
2.8 KiB
JavaScript
/**
|
|
* 前端双主题设计系统核心管理模块
|
|
* 严格遵照 UI/UX 规范：无 Emoji、纯矢量、高对比度与 WCAG AA 标准
|
|
*/
|
|
|
|
export const THEME_KEYS = {
|
|
COOL: 'cool',
|
|
WARM: 'warm'
|
|
};
|
|
|
|
export const THEMES = {
|
|
[THEME_KEYS.COOL]: {
|
|
key: THEME_KEYS.COOL,
|
|
name: '冷光暗夜',
|
|
description: '深邃暗夜黑与电竞靛蓝流光，专业沉浸质感',
|
|
tokens: {
|
|
bgPrimary: '#0A0F1D',
|
|
bgSurface: '#151D30',
|
|
bgSurfaceElevated: '#1E2942',
|
|
bgSurfaceGlass: 'rgba(21, 29, 48, 0.85)',
|
|
colorBrand: '#6366F1',
|
|
colorBrandLight: '#818CF8',
|
|
colorBrandGold: '#F59E0B',
|
|
colorBrandGlow: 'rgba(99, 102, 241, 0.35)',
|
|
colorBrandGradient: 'linear-gradient(135deg, #6366F1, #8B5CF6)',
|
|
borderSubtle: '#1E293B',
|
|
borderFocus: '#4F46E5',
|
|
textPrimary: '#F8FAFC',
|
|
textSecondary: '#94A3B8',
|
|
textMuted: '#64748B',
|
|
shadowBrand: '0 8rpx 24rpx rgba(99, 102, 241, 0.35)'
|
|
}
|
|
},
|
|
[THEME_KEYS.WARM]: {
|
|
key: THEME_KEYS.WARM,
|
|
name: '暖阳晨曦',
|
|
description: '明亮温润的奶油米白与暖阳曜橙流光，温馨治愈轻快',
|
|
tokens: {
|
|
bgPrimary: '#FDFBF7',
|
|
bgSurface: '#FFFFFF',
|
|
bgSurfaceElevated: '#F8F5F0',
|
|
bgSurfaceGlass: 'rgba(255, 255, 255, 0.90)',
|
|
colorBrand: '#EA580C',
|
|
colorBrandLight: '#F97316',
|
|
colorBrandGold: '#F59E0B',
|
|
colorBrandGlow: 'rgba(234, 88, 12, 0.18)',
|
|
colorBrandGradient: 'linear-gradient(135deg, #F97316, #FB923C)',
|
|
borderSubtle: '#F0ECE4',
|
|
borderFocus: '#EA580C',
|
|
textPrimary: '#1C1917',
|
|
textSecondary: '#57534E',
|
|
textMuted: '#78716C',
|
|
shadowBrand: '0 8rpx 24rpx rgba(234, 88, 12, 0.25)'
|
|
}
|
|
}
|
|
};
|
|
|
|
const STORAGE_KEY = 'peiwan_app_theme';
|
|
|
|
/**
|
|
* 获取当前持久化的主题标识
|
|
*/
|
|
export function getCurrentThemeKey() {
|
|
try {
|
|
const saved = uni.getStorageSync(STORAGE_KEY);
|
|
if (saved && THEMES[saved]) {
|
|
return saved;
|
|
}
|
|
} catch (e) {
|
|
// 忽略异常，降级到默认
|
|
}
|
|
return THEME_KEYS.COOL;
|
|
}
|
|
|
|
/**
|
|
* 获取当前主题配置对象
|
|
*/
|
|
export function getCurrentTheme() {
|
|
const key = getCurrentThemeKey();
|
|
return THEMES[key];
|
|
}
|
|
|
|
/**
|
|
* 获取当前主题 Tokens
|
|
*/
|
|
export function getCurrentTokens() {
|
|
return getCurrentTheme().tokens;
|
|
}
|
|
|
|
/**
|
|
* 切换全局主题并持久化，广播全局事件
|
|
*/
|
|
export function setTheme(themeKey) {
|
|
const targetKey = THEMES[themeKey] ? themeKey : THEME_KEYS.COOL;
|
|
try {
|
|
uni.setStorageSync(STORAGE_KEY, targetKey);
|
|
} catch (e) {
|
|
// 忽略持久化异常
|
|
}
|
|
|
|
// 广播主题变更事件
|
|
try {
|
|
uni.$emit('theme-change', targetKey);
|
|
} catch (e) {
|
|
// 忽略事件抛出异常
|
|
}
|
|
|
|
return THEMES[targetKey];
|
|
}
|
|
|
|
/**
|
|
* 获取所有可选主题列表
|
|
*/
|
|
export function getAvailableThemes() {
|
|
return Object.values(THEMES);
|
|
}
|