feat: homets 化 创建类型定义文件

创建常量配置文件
 创建自定义 Hook

 创建组件目录
创建 HeroHeader 组件
创建 FeaturedFeatureCard 组件
创建 FeatureCard 组件
创建新的 HomePage.tsx

src/views/Home/components/FeatureCard.tsx

@@ -0,0 +1,106 @@
+// 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>
+  );
+};