vf_react/src/components/FUI/FuiCorners.tsx

/**
 * 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;