diff --git a/src/constants/glassConfig.ts b/src/constants/glassConfig.ts new file mode 100644 index 00000000..c9096f96 --- /dev/null +++ b/src/constants/glassConfig.ts @@ -0,0 +1,119 @@ +/** + * 全局毛玻璃效果统一配置 + * 整合 FUI + GlassTheme 的设计风格 + * + * 使用方式: + * import { GLASS_BLUR, GLASS_BG, GLASS_BORDER, GLASS_PRESET } from '@/constants/glassConfig'; + * + * + * 或使用预设: + * + */ + +// blur 模糊值 +export const GLASS_BLUR = { + xs: 'blur(4px)', + sm: 'blur(8px)', + md: 'blur(16px)', // 默认 + lg: 'blur(24px)', + xl: 'blur(40px)', +} as const; + +// 玻璃背景色 +export const GLASS_BG = { + // 白色系 + light: 'rgba(255, 255, 255, 0.02)', + medium: 'rgba(255, 255, 255, 0.03)', + strong: 'rgba(255, 255, 255, 0.05)', + // 金色系 + gold: 'rgba(212, 175, 55, 0.05)', + goldLight: 'rgba(212, 175, 55, 0.03)', + goldStrong: 'rgba(212, 175, 55, 0.08)', + // 深色系 + dark: 'rgba(10, 10, 20, 0.8)', + darkLight: 'rgba(15, 15, 26, 0.6)', + overlay: 'rgba(20, 20, 30, 0.9)', +} as const; + +// 边框 +export const GLASS_BORDER = { + subtle: '1px solid rgba(255, 255, 255, 0.05)', + light: '1px solid rgba(255, 255, 255, 0.08)', + default: '1px solid rgba(212, 175, 55, 0.15)', + emphasis: '1px solid rgba(212, 175, 55, 0.3)', + gold: '1px solid rgba(212, 175, 55, 0.2)', +} as const; + +// 阴影发光 +export const GLASS_SHADOW = { + sm: '0 4px 16px rgba(0, 0, 0, 0.2)', + md: '0 8px 32px rgba(0, 0, 0, 0.3)', + lg: '0 25px 50px -12px rgba(0, 0, 0, 0.5)', + goldSm: '0 0 8px rgba(212, 175, 55, 0.3)', + goldMd: '0 0 16px rgba(212, 175, 55, 0.4)', + goldLg: '0 0 32px rgba(212, 175, 55, 0.5)', + inset: 'inset 0 1px 0 rgba(255, 255, 255, 0.05)', +} as const; + +// 预设组合 - 常用场景 +export const GLASS_PRESET = { + // 卡片 + card: { + bg: GLASS_BG.medium, + backdropFilter: GLASS_BLUR.md, + border: GLASS_BORDER.default, + borderRadius: '16px', + }, + // 卡片轻量版 + cardLight: { + bg: GLASS_BG.light, + backdropFilter: GLASS_BLUR.sm, + border: GLASS_BORDER.subtle, + borderRadius: '12px', + }, + // 导航栏 + navbar: { + bg: GLASS_BG.darkLight, + backdropFilter: GLASS_BLUR.lg, + border: GLASS_BORDER.gold, + }, + // 模态框 + modal: { + bg: GLASS_BG.overlay, + backdropFilter: GLASS_BLUR.lg, + border: GLASS_BORDER.light, + borderRadius: '20px', + }, + // 悬浮层 + floating: { + bg: GLASS_BG.dark, + backdropFilter: `${GLASS_BLUR.lg} saturate(180%)`, + border: GLASS_BORDER.light, + boxShadow: GLASS_SHADOW.lg, + }, + // 页面加载 + pageLoader: { + bg: GLASS_BG.dark, + backdropFilter: GLASS_BLUR.md, + }, + // 侧边栏 + sidebar: { + bg: GLASS_BG.dark, + backdropFilter: GLASS_BLUR.lg, + border: GLASS_BORDER.subtle, + }, + // 输入框/搜索框 + input: { + bg: GLASS_BG.light, + backdropFilter: GLASS_BLUR.sm, + border: GLASS_BORDER.subtle, + borderRadius: '8px', + }, +} as const; + +// 导出类型 +export type GlassBlurKey = keyof typeof GLASS_BLUR; +export type GlassBgKey = keyof typeof GLASS_BG; +export type GlassBorderKey = keyof typeof GLASS_BORDER; +export type GlassShadowKey = keyof typeof GLASS_SHADOW; +export type GlassPresetKey = keyof typeof GLASS_PRESET;