perf(DeepAnalysis): 优化初始加载,只请求 comprehensive 接口
- 移除初始加载时的 industryRank 请求 - 只加载默认 Tab(战略分析)需要的核心数据 - 其他数据按需懒加载 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
81
src/components/FUI/AmbientGlow.tsx
Normal file
81
src/components/FUI/AmbientGlow.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
/**
|
||||
* 环境光效果组件
|
||||
* 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;
|
||||
Reference in New Issue
Block a user