feat(glass): 创建统一毛玻璃效果配置文件

新增 src/constants/glassConfig.ts:
- GLASS_BLUR: 5 级模糊值 (xs/sm/md/lg/xl)
- GLASS_BG: 9 种背景色 (白色系/金色系/深色系)
- GLASS_BORDER: 5 种边框样式
- GLASS_SHADOW: 7 种阴影效果
- GLASS_PRESET: 8 个预设组合 (card/navbar/modal/floating 等)

整合 GlassCard、fui.ts、glassTheme.js 三套配置的精华,
为后续 65+ 文件的毛玻璃效果统一迁移做准备。

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-25 16:14:00 +08:00
parent c5f7929c30
commit 49f71af0c5

View File

@@ -0,0 +1,119 @@
/**
* 全局毛玻璃效果统一配置
* 整合 FUI + GlassTheme 的设计风格
*
* 使用方式:
* import { GLASS_BLUR, GLASS_BG, GLASS_BORDER, GLASS_PRESET } from '@/constants/glassConfig';
*
* <Box backdropFilter={GLASS_BLUR.md} bg={GLASS_BG.medium} border={GLASS_BORDER.default} />
* 或使用预设:
* <Box {...GLASS_PRESET.card} />
*/
// 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;