03f1331202
创建常量配置文件 创建自定义 Hook 创建组件目录 创建 HeroHeader 组件 创建 FeaturedFeatureCard 组件 创建 FeatureCard 组件 创建新的 HomePage.tsx
107 lines
2.7 KiB
TypeScript
107 lines
2.7 KiB
TypeScript
// src/views/Home/components/FeatureCard.tsx
|
|
// 普通功能卡片组件
|
|
|
|
import React from 'react';
|
|
import {
|
|
Card,
|
|
CardBody,
|
|
VStack,
|
|
HStack,
|
|
Box,
|
|
Heading,
|
|
Text,
|
|
Badge,
|
|
Button
|
|
} from '@chakra-ui/react';
|
|
import type { Feature, FeatureClickHandler } from '@/types/home';
|
|
|
|
interface FeatureCardProps {
|
|
feature: Feature;
|
|
onClick: FeatureClickHandler;
|
|
}
|
|
|
|
/**
|
|
* 普通功能卡片组件
|
|
* 用于展示除特色功能外的其他功能
|
|
*/
|
|
export const FeatureCard: React.FC<FeatureCardProps> = ({
|
|
feature,
|
|
onClick
|
|
}) => {
|
|
return (
|
|
<Card
|
|
bg="whiteAlpha.100"
|
|
backdropFilter="blur(10px)"
|
|
border="1px solid"
|
|
borderColor="whiteAlpha.200"
|
|
borderRadius={{ base: 'xl', md: '2xl' }}
|
|
transition="all 0.3s ease"
|
|
_hover={{
|
|
bg: 'whiteAlpha.200',
|
|
borderColor: `${feature.color}.400`,
|
|
transform: 'translateY(-4px)',
|
|
shadow: '2xl'
|
|
}}
|
|
_active={{
|
|
bg: 'whiteAlpha.200',
|
|
borderColor: `${feature.color}.400`,
|
|
transform: 'translateY(-2px)'
|
|
}}
|
|
onClick={() => onClick(feature)}
|
|
minH={{ base: 'auto', md: '180px' }}
|
|
cursor="pointer"
|
|
>
|
|
<CardBody p={{ base: 5, md: 6 }}>
|
|
<VStack spacing={{ base: 3, md: 4 }} align="start" h="100%">
|
|
<HStack>
|
|
<Box
|
|
p={{ base: 2, md: 3 }}
|
|
borderRadius="lg"
|
|
bg={`${feature.color}.50`}
|
|
border="1px solid"
|
|
borderColor={`${feature.color}.200`}
|
|
>
|
|
<Text fontSize={{ base: 'xl', md: '2xl' }}>{feature.icon}</Text>
|
|
</Box>
|
|
<Badge
|
|
colorScheme={feature.color}
|
|
variant="solid"
|
|
fontSize={{ base: 'xs', md: 'sm' }}
|
|
>
|
|
{feature.badge}
|
|
</Badge>
|
|
</HStack>
|
|
|
|
<VStack align="start" spacing={{ base: 1, md: 2 }} flex={1}>
|
|
<Heading size={{ base: 'md', md: 'lg' }} color="white">
|
|
{feature.title}
|
|
</Heading>
|
|
<Text
|
|
color="whiteAlpha.800"
|
|
fontSize={{ base: 'xs', md: 'sm' }}
|
|
lineHeight="tall"
|
|
>
|
|
{feature.description}
|
|
</Text>
|
|
</VStack>
|
|
|
|
<Button
|
|
colorScheme={feature.color}
|
|
size={{ base: 'md', md: 'sm' }}
|
|
variant="outline"
|
|
alignSelf="flex-end"
|
|
w={{ base: '100%', md: 'auto' }}
|
|
minH="44px"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onClick(feature);
|
|
}}
|
|
>
|
|
使用
|
|
</Button>
|
|
</VStack>
|
|
</CardBody>
|
|
</Card>
|
|
);
|
|
};
|