:pref: 首屏优化
This commit is contained in:
zdl
@@ -1,179 +0,0 @@
|
||||
/**
|
||||
* 首页骨架屏组件
|
||||
* 匹配首页深色科技风格，减少白屏感知时间
|
||||
*
|
||||
* @module views/Home/components/HomePageSkeleton
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import {
|
||||
Box,
|
||||
Container,
|
||||
SimpleGrid,
|
||||
Skeleton,
|
||||
SkeletonText,
|
||||
VStack,
|
||||
} from '@chakra-ui/react';
|
||||
|
||||
// ============================================================
|
||||
// 类型定义
|
||||
// ============================================================
|
||||
|
||||
interface HomePageSkeletonProps {
|
||||
/** 骨架屏速度（秒） */
|
||||
speed?: number;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// 单个卡片骨架 - 深色风格
|
||||
// ============================================================
|
||||
|
||||
const FeatureCardSkeleton: React.FC<{ isFeatured?: boolean; speed?: number }> = ({
|
||||
isFeatured = false,
|
||||
speed = 0.8,
|
||||
}) => {
|
||||
return (
|
||||
<Box
|
||||
bg="rgba(255, 255, 255, 0.03)"
|
||||
borderRadius="2xl"
|
||||
borderWidth="1px"
|
||||
borderColor="whiteAlpha.100"
|
||||
p={{ base: 5, md: isFeatured ? 8 : 6 }}
|
||||
h={isFeatured ? { base: '280px', md: '320px' } : { base: '200px', md: '240px' }}
|
||||
backdropFilter="blur(10px)"
|
||||
>
|
||||
<VStack align="start" spacing={4} h="full">
|
||||
{/* 图标骨架 */}
|
||||
<Skeleton
|
||||
height={isFeatured ? '56px' : '44px'}
|
||||
width={isFeatured ? '56px' : '44px'}
|
||||
borderRadius="xl"
|
||||
startColor="whiteAlpha.100"
|
||||
endColor="whiteAlpha.200"
|
||||
speed={speed}
|
||||
/>
|
||||
|
||||
{/* 标题骨架 */}
|
||||
<Skeleton
|
||||
height="24px"
|
||||
width="60%"
|
||||
borderRadius="md"
|
||||
startColor="whiteAlpha.100"
|
||||
endColor="whiteAlpha.200"
|
||||
speed={speed}
|
||||
/>
|
||||
|
||||
{/* 描述骨架 */}
|
||||
<SkeletonText
|
||||
mt="2"
|
||||
noOfLines={isFeatured ? 3 : 2}
|
||||
spacing="3"
|
||||
skeletonHeight="3"
|
||||
width="90%"
|
||||
startColor="whiteAlpha.50"
|
||||
endColor="whiteAlpha.100"
|
||||
speed={speed}
|
||||
/>
|
||||
</VStack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
// ============================================================
|
||||
// Hero 区域骨架
|
||||
// ============================================================
|
||||
|
||||
const HeroSkeleton: React.FC<{ speed?: number }> = ({ speed = 0.8 }) => {
|
||||
return (
|
||||
<VStack spacing={{ base: 4, md: 6 }} align="center" py={{ base: 8, md: 12 }}>
|
||||
{/* 主标题骨架 */}
|
||||
<Skeleton
|
||||
height={{ base: '48px', md: '72px' }}
|
||||
width={{ base: '280px', md: '400px' }}
|
||||
borderRadius="lg"
|
||||
startColor="whiteAlpha.100"
|
||||
endColor="whiteAlpha.200"
|
||||
speed={speed}
|
||||
/>
|
||||
|
||||
{/* 副标题骨架 */}
|
||||
<Skeleton
|
||||
height={{ base: '20px', md: '24px' }}
|
||||
width={{ base: '200px', md: '300px' }}
|
||||
borderRadius="md"
|
||||
startColor="whiteAlpha.50"
|
||||
endColor="whiteAlpha.100"
|
||||
speed={speed}
|
||||
/>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
// ============================================================
|
||||
// 主骨架组件
|
||||
// ============================================================
|
||||
|
||||
export const HomePageSkeleton: React.FC<HomePageSkeletonProps> = ({
|
||||
speed = 0.8,
|
||||
}) => {
|
||||
return (
|
||||
<Box
|
||||
w="full"
|
||||
minH="100vh"
|
||||
bg="linear-gradient(135deg, #0E0C15 0%, #15131D 50%, #252134 100%)"
|
||||
position="relative"
|
||||
overflow="hidden"
|
||||
>
|
||||
{/* 背景装饰 - 模拟光晕效果 */}
|
||||
<Box
|
||||
position="absolute"
|
||||
top="-20%"
|
||||
left="50%"
|
||||
transform="translateX(-50%)"
|
||||
w="800px"
|
||||
h="800px"
|
||||
bg="radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 70%)"
|
||||
pointerEvents="none"
|
||||
/>
|
||||
|
||||
<Container maxW="7xl" position="relative" zIndex={10} px={{ base: 4, md: 6 }}>
|
||||
<VStack
|
||||
spacing={{ base: 8, md: 12, lg: 16 }}
|
||||
align="stretch"
|
||||
minH="100vh"
|
||||
justify="center"
|
||||
>
|
||||
{/* Hero 区域骨架 */}
|
||||
<HeroSkeleton speed={speed} />
|
||||
|
||||
{/* 功能卡片区域骨架 */}
|
||||
<Box pb={{ base: 8, md: 12 }}>
|
||||
<VStack spacing={{ base: 6, md: 8 }}>
|
||||
{/* 特色功能卡片骨架 */}
|
||||
<Box w="100%">
|
||||
<FeatureCardSkeleton isFeatured speed={speed} />
|
||||
</Box>
|
||||
|
||||
{/* 其他功能卡片骨架 */}
|
||||
<SimpleGrid
|
||||
columns={{ base: 1, md: 2, lg: 3 }}
|
||||
spacing={{ base: 4, md: 5, lg: 6 }}
|
||||
w="100%"
|
||||
>
|
||||
{[1, 2, 3, 4, 5].map((index) => (
|
||||
<FeatureCardSkeleton key={index} speed={speed} />
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</VStack>
|
||||
</Box>
|
||||
</VStack>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
// ============================================================
|
||||
// 默认导出
|
||||
// ============================================================
|
||||
|
||||
export default HomePageSkeleton;
|
||||
@@ -1,26 +0,0 @@
|
||||
/**
|
||||
* 首页入口组件
|
||||
* 使用专用骨架屏作为 Suspense fallback，优化加载体验
|
||||
*
|
||||
* @module views/Home
|
||||
*/
|
||||
|
||||
import React, { Suspense, lazy } from 'react';
|
||||
import { HomePageSkeleton } from './components/HomePageSkeleton';
|
||||
|
||||
// 懒加载实际首页组件
|
||||
const HomePage = lazy(() => import('./HomePage'));
|
||||
|
||||
/**
|
||||
* 首页入口 - 带骨架屏的懒加载包装
|
||||
* 使用深色风格骨架屏，与首页视觉风格一致
|
||||
*/
|
||||
const HomePageEntry: React.FC = () => {
|
||||
return (
|
||||
<Suspense fallback={<HomePageSkeleton />}>
|
||||
<HomePage />
|
||||
</Suspense>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomePageEntry;
|
||||
Reference in New Issue
Block a user