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:
119
src/constants/glassConfig.ts
Normal file
119
src/constants/glassConfig.ts
Normal 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;
|
||||||
Reference in New Issue
Block a user