722582e83a
- 移除初始加载时的 industryRank 请求 - 只加载默认 Tab（战略分析）需要的核心数据 - 其他数据按需懒加载 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
82 lines
2.5 KiB
TypeScript
82 lines
2.5 KiB
TypeScript
/**
|
||
* 环境光效果组件
|
||
* James Turrell 风格的背景光晕效果
|
||
*/
|
||
|
||
import React, { memo } from 'react';
|
||
import { Box, BoxProps } from '@chakra-ui/react';
|
||
|
||
export interface AmbientGlowProps extends Omit<BoxProps, 'bg'> {
|
||
/** 预设主题 */
|
||
variant?: 'default' | 'gold' | 'blue' | 'purple' | 'warm';
|
||
/** 自定义渐变（覆盖 variant） */
|
||
customGradient?: string;
|
||
}
|
||
|
||
// 预设光效配置
|
||
const GLOW_VARIANTS = {
|
||
default: `
|
||
radial-gradient(ellipse 100% 80% at 50% -20%, rgba(212, 175, 55, 0.08), transparent 50%),
|
||
radial-gradient(ellipse 60% 50% at 0% 50%, rgba(100, 200, 255, 0.04), transparent 40%),
|
||
radial-gradient(ellipse 60% 50% at 100% 50%, rgba(255, 200, 100, 0.04), transparent 40%)
|
||
`,
|
||
gold: `
|
||
radial-gradient(ellipse 100% 80% at 50% -20%, rgba(212, 175, 55, 0.12), transparent 50%),
|
||
radial-gradient(ellipse 80% 60% at 20% 80%, rgba(212, 175, 55, 0.06), transparent 40%),
|
||
radial-gradient(ellipse 80% 60% at 80% 80%, rgba(255, 200, 100, 0.05), transparent 40%)
|
||
`,
|
||
blue: `
|
||
radial-gradient(ellipse 100% 80% at 50% -20%, rgba(100, 200, 255, 0.1), transparent 50%),
|
||
radial-gradient(ellipse 60% 50% at 0% 50%, rgba(60, 160, 255, 0.06), transparent 40%),
|
||
radial-gradient(ellipse 60% 50% at 100% 50%, rgba(140, 220, 255, 0.05), transparent 40%)
|
||
`,
|
||
purple: `
|
||
radial-gradient(ellipse 100% 80% at 50% -20%, rgba(160, 100, 255, 0.1), transparent 50%),
|
||
radial-gradient(ellipse 60% 50% at 0% 50%, rgba(200, 150, 255, 0.05), transparent 40%),
|
||
radial-gradient(ellipse 60% 50% at 100% 50%, rgba(120, 80, 255, 0.05), transparent 40%)
|
||
`,
|
||
warm: `
|
||
radial-gradient(ellipse 100% 80% at 50% -20%, rgba(255, 150, 100, 0.1), transparent 50%),
|
||
radial-gradient(ellipse 60% 50% at 0% 50%, rgba(255, 200, 150, 0.05), transparent 40%),
|
||
radial-gradient(ellipse 60% 50% at 100% 50%, rgba(255, 180, 120, 0.05), transparent 40%)
|
||
`,
|
||
};
|
||
|
||
/**
|
||
* 环境光效果组件
|
||
* 创建 James Turrell 风格的微妙背景光晕
|
||
*
|
||
* @example
|
||
* ```tsx
|
||
* <Box position="relative">
|
||
* <AmbientGlow variant="gold" />
|
||
* {children}
|
||
* </Box>
|
||
* ```
|
||
*/
|
||
const AmbientGlow = memo<AmbientGlowProps>(({
|
||
variant = 'default',
|
||
customGradient,
|
||
...boxProps
|
||
}) => {
|
||
const gradient = customGradient || GLOW_VARIANTS[variant];
|
||
|
||
return (
|
||
<Box
|
||
position="fixed"
|
||
top={0}
|
||
left={0}
|
||
right={0}
|
||
bottom={0}
|
||
pointerEvents="none"
|
||
zIndex={0}
|
||
bg={gradient}
|
||
{...boxProps}
|
||
/>
|
||
);
|
||
});
|
||
|
||
AmbientGlow.displayName = 'AmbientGlow';
|
||
|
||
export default AmbientGlow;
|