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:
zdl
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;
|
||||
93
src/components/FUI/FuiContainer.tsx
Normal file
93
src/components/FUI/FuiContainer.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
/**
|
||||
* FUI 毛玻璃容器组件
|
||||
* 科幻风格的 Glassmorphism 容器，带角落装饰
|
||||
*/
|
||||
|
||||
import React, { memo, ReactNode } from 'react';
|
||||
import { Box, BoxProps } from '@chakra-ui/react';
|
||||
import FuiCorners, { FuiCornersProps } from './FuiCorners';
|
||||
|
||||
export interface FuiContainerProps extends Omit<BoxProps, 'children'> {
|
||||
children: ReactNode;
|
||||
/** 是否显示角落装饰 */
|
||||
showCorners?: boolean;
|
||||
/** 角落装饰配置 */
|
||||
cornersProps?: FuiCornersProps;
|
||||
/** 预设主题 */
|
||||
variant?: 'default' | 'gold' | 'blue' | 'dark';
|
||||
}
|
||||
|
||||
// 预设主题配置
|
||||
const VARIANTS = {
|
||||
default: {
|
||||
bg: 'linear-gradient(145deg, rgba(26, 26, 46, 0.95) 0%, rgba(15, 15, 26, 0.98) 100%)',
|
||||
borderColor: 'rgba(212, 175, 55, 0.15)',
|
||||
boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05)',
|
||||
cornerColor: 'rgba(212, 175, 55, 0.4)',
|
||||
},
|
||||
gold: {
|
||||
bg: 'linear-gradient(145deg, rgba(26, 26, 46, 0.95) 0%, rgba(15, 15, 26, 0.98) 100%)',
|
||||
borderColor: 'rgba(212, 175, 55, 0.2)',
|
||||
boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(212, 175, 55, 0.1)',
|
||||
cornerColor: 'rgba(212, 175, 55, 0.5)',
|
||||
},
|
||||
blue: {
|
||||
bg: 'linear-gradient(145deg, rgba(20, 30, 48, 0.95) 0%, rgba(10, 15, 26, 0.98) 100%)',
|
||||
borderColor: 'rgba(100, 200, 255, 0.15)',
|
||||
boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(100, 200, 255, 0.05)',
|
||||
cornerColor: 'rgba(100, 200, 255, 0.4)',
|
||||
},
|
||||
dark: {
|
||||
bg: 'linear-gradient(145deg, rgba(18, 18, 28, 0.98) 0%, rgba(8, 8, 16, 0.99) 100%)',
|
||||
borderColor: 'rgba(255, 255, 255, 0.08)',
|
||||
boxShadow: '0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.03)',
|
||||
cornerColor: 'rgba(255, 255, 255, 0.2)',
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* FUI 毛玻璃容器组件
|
||||
* 带有科幻风格角落装饰的 Glassmorphism 容器
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* <FuiContainer variant="gold">
|
||||
* <YourContent />
|
||||
* </FuiContainer>
|
||||
* ```
|
||||
*/
|
||||
const FuiContainer = memo<FuiContainerProps>(({
|
||||
children,
|
||||
showCorners = true,
|
||||
cornersProps,
|
||||
variant = 'default',
|
||||
...boxProps
|
||||
}) => {
|
||||
const theme = VARIANTS[variant];
|
||||
|
||||
return (
|
||||
<Box
|
||||
position="relative"
|
||||
bg={theme.bg}
|
||||
borderRadius="xl"
|
||||
border="1px solid"
|
||||
borderColor={theme.borderColor}
|
||||
overflow="hidden"
|
||||
backdropFilter="blur(16px)"
|
||||
boxShadow={theme.boxShadow}
|
||||
{...boxProps}
|
||||
>
|
||||
{showCorners && (
|
||||
<FuiCorners
|
||||
borderColor={theme.cornerColor}
|
||||
{...cornersProps}
|
||||
/>
|
||||
)}
|
||||
{children}
|
||||
</Box>
|
||||
);
|
||||
});
|
||||
|
||||
FuiContainer.displayName = 'FuiContainer';
|
||||
|
||||
export default FuiContainer;
|
||||
126
src/components/FUI/FuiCorners.tsx
Normal file
126
src/components/FUI/FuiCorners.tsx
Normal file
@@ -0,0 +1,126 @@
|
||||
/**
|
||||
* FUI 角落装饰组件
|
||||
* Ash Thorp 风格的科幻 UI 角落装饰
|
||||
*/
|
||||
|
||||
import React, { memo } from 'react';
|
||||
import { Box, BoxProps } from '@chakra-ui/react';
|
||||
|
||||
export interface FuiCornersProps {
|
||||
/** 装饰框大小 */
|
||||
size?: number;
|
||||
/** 边框宽度 */
|
||||
borderWidth?: number;
|
||||
/** 边框颜色 */
|
||||
borderColor?: string;
|
||||
/** 透明度 */
|
||||
opacity?: number;
|
||||
/** 距离容器边缘的距离 */
|
||||
offset?: number;
|
||||
}
|
||||
|
||||
interface CornerBoxProps extends BoxProps {
|
||||
position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
|
||||
size: number;
|
||||
borderWidth: number;
|
||||
borderColor: string;
|
||||
opacity: number;
|
||||
offset: number;
|
||||
}
|
||||
|
||||
const CornerBox = memo<CornerBoxProps>(({
|
||||
position,
|
||||
size,
|
||||
borderWidth,
|
||||
borderColor,
|
||||
opacity,
|
||||
offset,
|
||||
}) => {
|
||||
const positionStyles: Record<string, BoxProps> = {
|
||||
'top-left': {
|
||||
top: `${offset}px`,
|
||||
left: `${offset}px`,
|
||||
borderTop: `${borderWidth}px solid`,
|
||||
borderLeft: `${borderWidth}px solid`,
|
||||
},
|
||||
'top-right': {
|
||||
top: `${offset}px`,
|
||||
right: `${offset}px`,
|
||||
borderTop: `${borderWidth}px solid`,
|
||||
borderRight: `${borderWidth}px solid`,
|
||||
},
|
||||
'bottom-left': {
|
||||
bottom: `${offset}px`,
|
||||
left: `${offset}px`,
|
||||
borderBottom: `${borderWidth}px solid`,
|
||||
borderLeft: `${borderWidth}px solid`,
|
||||
},
|
||||
'bottom-right': {
|
||||
bottom: `${offset}px`,
|
||||
right: `${offset}px`,
|
||||
borderBottom: `${borderWidth}px solid`,
|
||||
borderRight: `${borderWidth}px solid`,
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
position="absolute"
|
||||
w={`${size}px`}
|
||||
h={`${size}px`}
|
||||
borderColor={borderColor}
|
||||
opacity={opacity}
|
||||
pointerEvents="none"
|
||||
{...positionStyles[position]}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
CornerBox.displayName = 'CornerBox';
|
||||
|
||||
/**
|
||||
* FUI 角落装饰组件
|
||||
* 在容器四角添加科幻风格的装饰边框
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* <Box position="relative">
|
||||
* <FuiCorners />
|
||||
* {children}
|
||||
* </Box>
|
||||
* ```
|
||||
*/
|
||||
const FuiCorners = memo<FuiCornersProps>(({
|
||||
size = 16,
|
||||
borderWidth = 2,
|
||||
borderColor = 'rgba(212, 175, 55, 0.4)',
|
||||
opacity = 0.6,
|
||||
offset = 12,
|
||||
}) => {
|
||||
const positions: CornerBoxProps['position'][] = [
|
||||
'top-left',
|
||||
'top-right',
|
||||
'bottom-left',
|
||||
'bottom-right',
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
{positions.map((position) => (
|
||||
<CornerBox
|
||||
key={position}
|
||||
position={position}
|
||||
size={size}
|
||||
borderWidth={borderWidth}
|
||||
borderColor={borderColor}
|
||||
opacity={opacity}
|
||||
offset={offset}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
FuiCorners.displayName = 'FuiCorners';
|
||||
|
||||
export default FuiCorners;
|
||||
12
src/components/FUI/index.ts
Normal file
12
src/components/FUI/index.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
/**
|
||||
* FUI (Futuristic UI) 组件集合
|
||||
* Ash Thorp 风格的科幻 UI 组件
|
||||
*/
|
||||
|
||||
export { default as FuiCorners } from './FuiCorners';
|
||||
export { default as FuiContainer } from './FuiContainer';
|
||||
export { default as AmbientGlow } from './AmbientGlow';
|
||||
|
||||
export type { FuiCornersProps } from './FuiCorners';
|
||||
export type { FuiContainerProps } from './FuiContainer';
|
||||
export type { AmbientGlowProps } from './AmbientGlow';
|
||||
Reference in New Issue
Block a user