refactor(Company): 迁移毛玻璃效果到统一配置
- theme.ts: 使用 GLASS_BLUR.lg/md 替代硬编码的 blur 值 - DarkGoldCard.tsx: 使用 GLASS_BLUR.md 替代 blur(12px) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -2,6 +2,7 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Box, BoxProps } from '@chakra-ui/react';
|
import { Box, BoxProps } from '@chakra-ui/react';
|
||||||
import { darkGoldTheme } from '../../../constants';
|
import { darkGoldTheme } from '../../../constants';
|
||||||
|
import { GLASS_BLUR } from '@/constants/glassConfig';
|
||||||
|
|
||||||
interface DarkGoldCardProps extends BoxProps {
|
interface DarkGoldCardProps extends BoxProps {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
@@ -30,7 +31,7 @@ const DarkGoldCard: React.FC<DarkGoldCardProps> = ({
|
|||||||
<Box
|
<Box
|
||||||
position="relative"
|
position="relative"
|
||||||
bg="linear-gradient(145deg, rgba(26, 26, 46, 0.9) 0%, rgba(15, 15, 26, 0.95) 100%)"
|
bg="linear-gradient(145deg, rgba(26, 26, 46, 0.9) 0%, rgba(15, 15, 26, 0.95) 100%)"
|
||||||
backdropFilter="blur(12px)"
|
backdropFilter={GLASS_BLUR.md}
|
||||||
borderRadius="12px"
|
borderRadius="12px"
|
||||||
border="1px solid"
|
border="1px solid"
|
||||||
borderColor="rgba(212, 175, 55, 0.2)"
|
borderColor="rgba(212, 175, 55, 0.2)"
|
||||||
|
|||||||
@@ -8,6 +8,8 @@
|
|||||||
* - 深空漂浮的数据终端
|
* - 深空漂浮的数据终端
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import { GLASS_BLUR } from '@/constants/glassConfig';
|
||||||
|
|
||||||
// ============================================
|
// ============================================
|
||||||
// 深空 FUI 主题系统
|
// 深空 FUI 主题系统
|
||||||
// ============================================
|
// ============================================
|
||||||
@@ -21,9 +23,9 @@ export const DEEP_SPACE_THEME = {
|
|||||||
// 内嵌区块背景
|
// 内嵌区块背景
|
||||||
bgInset: 'rgba(10, 12, 25, 0.5)',
|
bgInset: 'rgba(10, 12, 25, 0.5)',
|
||||||
|
|
||||||
// === Glassmorphism 效果 ===
|
// === Glassmorphism 效果(使用统一配置)===
|
||||||
blur: '24px',
|
blur: GLASS_BLUR.lg,
|
||||||
blurLight: '12px',
|
blurLight: GLASS_BLUR.md,
|
||||||
|
|
||||||
// === 边框系统 ===
|
// === 边框系统 ===
|
||||||
// 主边框(发光金边)
|
// 主边框(发光金边)
|
||||||
@@ -102,7 +104,7 @@ export const glassCardStyle = {
|
|||||||
// 主容器玻璃效果
|
// 主容器玻璃效果
|
||||||
container: {
|
container: {
|
||||||
bg: DEEP_SPACE_THEME.bgGlass,
|
bg: DEEP_SPACE_THEME.bgGlass,
|
||||||
backdropFilter: `blur(${DEEP_SPACE_THEME.blur})`,
|
backdropFilter: DEEP_SPACE_THEME.blur,
|
||||||
borderRadius: DEEP_SPACE_THEME.radiusXL,
|
borderRadius: DEEP_SPACE_THEME.radiusXL,
|
||||||
border: `1px solid ${DEEP_SPACE_THEME.borderGlass}`,
|
border: `1px solid ${DEEP_SPACE_THEME.borderGlass}`,
|
||||||
boxShadow: `${DEEP_SPACE_THEME.floatShadow}, ${DEEP_SPACE_THEME.innerGlow}`,
|
boxShadow: `${DEEP_SPACE_THEME.floatShadow}, ${DEEP_SPACE_THEME.innerGlow}`,
|
||||||
@@ -120,7 +122,7 @@ export const glassCardStyle = {
|
|||||||
// 金色高亮边框版本
|
// 金色高亮边框版本
|
||||||
containerGold: {
|
containerGold: {
|
||||||
bg: DEEP_SPACE_THEME.bgGlass,
|
bg: DEEP_SPACE_THEME.bgGlass,
|
||||||
backdropFilter: `blur(${DEEP_SPACE_THEME.blur})`,
|
backdropFilter: DEEP_SPACE_THEME.blur,
|
||||||
borderRadius: DEEP_SPACE_THEME.radiusXL,
|
borderRadius: DEEP_SPACE_THEME.radiusXL,
|
||||||
border: `1px solid ${DEEP_SPACE_THEME.borderGold}`,
|
border: `1px solid ${DEEP_SPACE_THEME.borderGold}`,
|
||||||
boxShadow: `${DEEP_SPACE_THEME.glowGold}, ${DEEP_SPACE_THEME.floatShadow}, ${DEEP_SPACE_THEME.innerGlow}`,
|
boxShadow: `${DEEP_SPACE_THEME.glowGold}, ${DEEP_SPACE_THEME.floatShadow}, ${DEEP_SPACE_THEME.innerGlow}`,
|
||||||
|
|||||||
Reference in New Issue
Block a user