vf_react/src/views/Home/components/HomePageSkeleton.tsx

/**
 * 首页骨架屏组件
 * 模拟首页的 6 个功能卡片布局，减少白屏感知时间
 *
 * 使用 Chakra UI 的 Skeleton 组件
 *
 * @module views/Home/components/HomePageSkeleton
 */

import React from 'react';
import {
  Box,
  Container,
  SimpleGrid,
  Skeleton,
  SkeletonText,
  VStack,
  HStack,
  useColorModeValue,
} from '@chakra-ui/react';

// ============================================================
// 类型定义
// ============================================================

interface HomePageSkeletonProps {
  /** 是否显示动画效果 */
  isAnimated?: boolean;
  /** 骨架屏速度（秒） */
  speed?: number;
}

// ============================================================
// 单个卡片骨架
// ============================================================

const FeatureCardSkeleton: React.FC<{ isFeatured?: boolean }> = ({ isFeatured = false }) => {
  const bg = useColorModeValue('white', 'gray.800');
  const borderColor = useColorModeValue('gray.200', 'gray.700');

  return (
    <Box
      bg={bg}
      borderRadius="xl"
      borderWidth="1px"
      borderColor={borderColor}
      p={isFeatured ? 8 : 6}
      h={isFeatured ? '350px' : '280px'}
      boxShadow={isFeatured ? 'xl' : 'md'}
      position="relative"
    >
      <VStack align="start" spacing={4} h="full">
        {/* 图标骨架 */}
        <Skeleton
          height={isFeatured ? '60px' : '48px'}
          width={isFeatured ? '60px' : '48px'}
          borderRadius="lg"
          startColor={isFeatured ? 'blue.100' : 'gray.100'}
          endColor={isFeatured ? 'blue.200' : 'gray.200'}
        />

        {/* 标题骨架 */}
        <Skeleton height="28px" width="70%" borderRadius="md" />

        {/* 描述骨架 */}
        <SkeletonText
          mt="2"
          noOfLines={isFeatured ? 4 : 3}
          spacing="3"
          skeletonHeight="2"
          width="100%"
        />

        {/* 按钮骨架 */}
        <Skeleton
          height="40px"
          width={isFeatured ? '140px' : '100px'}
          borderRadius="md"
          mt="auto"
        />
      </VStack>

      {/* Featured 徽章骨架 */}
      {isFeatured && (
        <Skeleton
          position="absolute"
          top="4"
          right="4"
          height="24px"
          width="80px"
          borderRadius="full"
        />
      )}
    </Box>
  );
};

// ============================================================
// 主骨架组件
// ============================================================

export const HomePageSkeleton: React.FC<HomePageSkeletonProps> = ({
  isAnimated = true,
  speed = 0.8,
}) => {
  const containerBg = useColorModeValue('gray.50', 'gray.900');

  return (
    <Box
      w="full"
      minH="100vh"
      bg={containerBg}
      pt={{ base: '120px', md: '140px' }}
      pb={{ base: '60px', md: '80px' }}
    >
      <Container maxW="container.xl">
        <VStack spacing={{ base: 8, md: 12 }} align="stretch">
          {/* 顶部标题区域骨架 */}
          <VStack spacing={4} textAlign="center">
            {/* 主标题 */}
            <Skeleton
              height={{ base: '40px', md: '56px' }}
              width={{ base: '80%', md: '500px' }}
              borderRadius="md"
              speed={speed}
            />

            {/* 副标题 */}
            <Skeleton
              height={{ base: '20px', md: '24px' }}
              width={{ base: '90%', md: '600px' }}
              borderRadius="md"
              speed={speed}
            />

            {/* CTA 按钮 */}
            <HStack spacing={4} mt={4}>
              <Skeleton
                height="48px"
                width="140px"
                borderRadius="lg"
                speed={speed}
              />
              <Skeleton
                height="48px"
                width="140px"
                borderRadius="lg"
                speed={speed}
              />
            </HStack>
          </VStack>

          {/* 功能卡片网格骨架 */}
          <SimpleGrid
            columns={{ base: 1, md: 2, lg: 3 }}
            spacing={{ base: 6, md: 8 }}
            mt={8}
          >
            {/* 第一张卡片 - Featured (新闻中心) */}
            <Box gridColumn={{ base: 'span 1', lg: 'span 2' }}>
              <FeatureCardSkeleton isFeatured />
            </Box>

            {/* 其余 5 张卡片 */}
            {[1, 2, 3, 4, 5].map((index) => (
              <FeatureCardSkeleton key={index} />
            ))}
          </SimpleGrid>

          {/* 底部装饰元素骨架 */}
          <HStack justify="center" spacing={8} mt={12}>
            {[1, 2, 3].map((index) => (
              <VStack key={index} spacing={2} align="center">
                <Skeleton
                  height="40px"
                  width="40px"
                  borderRadius="full"
                  speed={speed}
                />
                <Skeleton height="16px" width="60px" borderRadius="md" speed={speed} />
              </VStack>
            ))}
          </HStack>
        </VStack>
      </Container>
    </Box>
  );
};

// ============================================================
// 默认导出
// ============================================================

export default HomePageSkeleton;