feat(companion): 全面确立以陪吃·陪喝·陪唱为主的核心架构,重构首屏推荐阵容与歌声试听
这个提交包含在:
@@ -0,0 +1,113 @@
|
||||
/**
|
||||
* 陪玩系统双主题色彩管理系统
|
||||
* 严格遵照 UI/UX 规范:无 Emoji、全矢量的色彩 Token 体系
|
||||
*/
|
||||
|
||||
export const THEME_KEYS = {
|
||||
COOL: 'cool',
|
||||
WARM: 'warm'
|
||||
} as const;
|
||||
|
||||
export type ThemeKey = (typeof THEME_KEYS)[keyof typeof THEME_KEYS];
|
||||
|
||||
export interface ThemeTokens {
|
||||
bgPrimary: string;
|
||||
bgSurface: string;
|
||||
bgSurfaceElevated: string;
|
||||
bgSurfaceGlass: string;
|
||||
colorBrand: string;
|
||||
colorBrandLight: string;
|
||||
colorBrandGold: string;
|
||||
colorBrandGlow: string;
|
||||
colorBrandGradient: string;
|
||||
borderSubtle: string;
|
||||
borderFocus: string;
|
||||
textPrimary: string;
|
||||
textSecondary: string;
|
||||
textMuted: string;
|
||||
shadowBrand: string;
|
||||
}
|
||||
|
||||
export interface ThemeItem {
|
||||
key: ThemeKey;
|
||||
name: string;
|
||||
description: string;
|
||||
tokens: ThemeTokens;
|
||||
}
|
||||
|
||||
export const THEMES: Record<ThemeKey, ThemeItem> = {
|
||||
[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: '#140E0A',
|
||||
bgSurface: '#221711',
|
||||
bgSurfaceElevated: '#2E1F17',
|
||||
bgSurfaceGlass: 'rgba(34, 23, 17, 0.85)',
|
||||
colorBrand: '#F97316',
|
||||
colorBrandLight: '#FB923C',
|
||||
colorBrandGold: '#F59E0B',
|
||||
colorBrandGlow: 'rgba(249, 115, 22, 0.35)',
|
||||
colorBrandGradient: 'linear-gradient(135deg, #F97316, #F59E0B)',
|
||||
borderSubtle: '#342217',
|
||||
borderFocus: '#EA580C',
|
||||
textPrimary: '#FFF7ED',
|
||||
textSecondary: '#C7B5A7',
|
||||
textMuted: '#8C7565',
|
||||
shadowBrand: '0 8rpx 24rpx rgba(249, 115, 22, 0.35)'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export class ThemeManager {
|
||||
private currentKey: ThemeKey = THEME_KEYS.COOL;
|
||||
|
||||
getCurrentThemeKey(): ThemeKey {
|
||||
return this.currentKey;
|
||||
}
|
||||
|
||||
getCurrentTheme(): ThemeItem {
|
||||
return THEMES[this.currentKey];
|
||||
}
|
||||
|
||||
getCurrentTokens(): ThemeTokens {
|
||||
return this.getCurrentTheme().tokens;
|
||||
}
|
||||
|
||||
switchTheme(key: ThemeKey): ThemeItem {
|
||||
if (key in THEMES) {
|
||||
this.currentKey = key;
|
||||
} else {
|
||||
// 非法或未知主题容错平滑降级至默认冷光暗夜
|
||||
this.currentKey = THEME_KEYS.COOL;
|
||||
}
|
||||
return this.getCurrentTheme();
|
||||
}
|
||||
|
||||
getAvailableThemes(): ThemeItem[] {
|
||||
return Object.values(THEMES);
|
||||
}
|
||||
}
|
||||
在新工单中引用
屏蔽一个用户