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:
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;
|
||||
Reference in New Issue
Block a user