2720946ccf
- echarts.ts: 将 EChartsOption 改为 EChartsCoreOption 的类型别名 - FuiCorners: 移除 extends BoxProps，position 重命名为 corner - KLineChartModal/TimelineChartModal/ConcentrationCard: 使用导入的 EChartsOption - LoadingState: 新增骨架屏 variant 支持 - FinancialPanorama: 使用骨架屏加载状态 - useFinancialData/financialService: 优化数据获取逻辑 - Company/index: 简化组件结构 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
127 lines
2.5 KiB
TypeScript
127 lines
2.5 KiB
TypeScript
/**
|
|
* 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 {
|
|
corner: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
|
|
size: number;
|
|
borderWidth: number;
|
|
borderColor: string;
|
|
opacity: number;
|
|
offset: number;
|
|
}
|
|
|
|
const CornerBox = memo<CornerBoxProps>(({
|
|
corner,
|
|
size,
|
|
borderWidth,
|
|
borderColor,
|
|
opacity,
|
|
offset,
|
|
}) => {
|
|
const cornerStyles: 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"
|
|
{...cornerStyles[corner]}
|
|
/>
|
|
);
|
|
});
|
|
|
|
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 corners: CornerBoxProps['corner'][] = [
|
|
'top-left',
|
|
'top-right',
|
|
'bottom-left',
|
|
'bottom-right',
|
|
];
|
|
|
|
return (
|
|
<>
|
|
{corners.map((corner) => (
|
|
<CornerBox
|
|
key={corner}
|
|
corner={corner}
|
|
size={size}
|
|
borderWidth={borderWidth}
|
|
borderColor={borderColor}
|
|
opacity={opacity}
|
|
offset={offset}
|
|
/>
|
|
))}
|
|
</>
|
|
);
|
|
});
|
|
|
|
FuiCorners.displayName = 'FuiCorners';
|
|
|
|
export default FuiCorners;
|