feat: 首页UI调整

src/views/Home/HomePage.js

@@ -13,7 +13,8 @@ import {
   VStack,
   HStack,
   SimpleGrid,
-  Link
+  Link,
+  useBreakpointValue
 } from '@chakra-ui/react';
 import { useAuth } from '../../contexts/AuthContext';
 import { useNavigate } from 'react-router-dom';
@@ -26,6 +27,15 @@ export default function HomePage() {
   const navigate = useNavigate();
   const [imageLoaded, setImageLoaded] = React.useState(false);
 
+  // 响应式配置
+  const heroHeight = useBreakpointValue({ base: '60vh', md: '80vh', lg: '100vh' });
+  const headingSize = useBreakpointValue({ base: 'xl', md: '3xl', lg: '4xl' });
+  const headingLetterSpacing = useBreakpointValue({ base: '-1px', md: '-1.5px', lg: '-2px' });
+  const heroTextSize = useBreakpointValue({ base: 'md', md: 'lg', lg: 'xl' });
+  const containerPx = useBreakpointValue({ base: 10, md: 10, lg: 10 });
+  const showDecorations = useBreakpointValue({ base: false, md: true });
+  const isMobile = useBreakpointValue({ base: true, md: false });
+
   // 保留原有的调试信息
   useEffect(() => {
     logger.debug('HomePage', 'AuthContext状态', {
@@ -128,7 +138,7 @@ export default function HomePage() {
       {/* Hero Section - 深色科技风格 */}
       <Box
         position="relative"
-        minH="100vh"
+        minH={heroHeight}
         bg="linear-gradient(135deg, #0E0C15 0%, #15131D 50%, #252134 100%)"
         overflow="hidden"
       >
@@ -164,59 +174,63 @@ export default function HomePage() {
           />
         </Box>
         
-        {/* 装饰性几何图形 */}
-        <Box
-          position="absolute"
-          top="20%"
-          left="10%"
-          w="200px"
-          h="200px"
-          borderRadius="50%"
-          bg="rgba(255, 215, 0, 0.1)"
-          filter="blur(80px)"
-          className="float-animation"
-        />
-        <Box
-          position="absolute"
-          bottom="30%"
-          right="20%"
-          w="150px"
-          h="150px"
-          borderRadius="50%"
-          bg="rgba(138, 43, 226, 0.1)"
-          filter="blur(60px)"
-          className="float-animation-reverse"
-        />
+        {/* 装饰性几何图形 - 移动端隐藏 */}
+        {showDecorations && (
+          <>
+            <Box
+              position="absolute"
+              top="20%"
+              left="10%"
+              w={{ base: '100px', md: '150px', lg: '200px' }}
+              h={{ base: '100px', md: '150px', lg: '200px' }}
+              borderRadius="50%"
+              bg="rgba(255, 215, 0, 0.1)"
+              filter="blur(80px)"
+              className="float-animation"
+            />
+            <Box
+              position="absolute"
+              bottom="30%"
+              right="20%"
+              w={{ base: '80px', md: '120px', lg: '150px' }}
+              h={{ base: '80px', md: '120px', lg: '150px' }}
+              borderRadius="50%"
+              bg="rgba(138, 43, 226, 0.1)"
+              filter="blur(60px)"
+              className="float-animation-reverse"
+            />
+          </>
+        )}
 
-        <Container maxW="7xl" position="relative" zIndex={2}>
-          <VStack spacing={16} align="stretch" minH="100vh" justify="center">
+        <Container maxW="7xl" position="relative" zIndex={2} px={containerPx}>
+          <VStack spacing={{ base: 8, md: 12, lg: 16 }} align="stretch" minH={heroHeight} justify="center">
             {/* 主标题区域 */}
-            <VStack spacing={6} textAlign="center" pt={8}>
+            <VStack spacing={{ base: 4, md: 5, lg: 6 }} textAlign="center" pt={{ base: 4, md: 6, lg: 8 }}>
               <Heading
-                size="4xl" 
+                size={headingSize}
                 color="white"
                 fontWeight="900"
-                letterSpacing="-2px"
+                letterSpacing={headingLetterSpacing}
                 lineHeight="shorter"
               >
                 智能投资分析平台
               </Heading>
-              <Text fontSize="xl" color="whiteAlpha.800" maxW="3xl" lineHeight="tall">
+              <Text fontSize={heroTextSize} color="whiteAlpha.800" maxW={{ base: '100%', md: '2xl', lg: '3xl' }} lineHeight="tall" px={{ base: 4, md: 0 }}>
                 专业投资研究工具，助您把握市场机遇
               </Text>
             </VStack>
 
            
             {/* 核心功能面板 */}
-            <Box>
-              <VStack spacing={8}>
+            <Box pb={{ base: 8, md: 12 }}>
+              <VStack spacing={{ base: 6, md: 8 }}>
                 
                 {/* 新闻催化分析 - 突出显示 */}
                 <Card
                   bg="transparent"
                   border="2px solid"
                   borderColor="yellow.400"
-                  borderRadius="3xl"
+                  borderRadius={{ base: '2xl', md: '3xl' }}
                   overflow="hidden"
                   position="relative"
                   shadow="2xl"
@@ -232,46 +246,85 @@ export default function HomePage() {
                     zIndex: 0
                   }}
                 >
-                  <CardBody p={8} position="relative" zIndex={1}>
-                    <Flex align="center" justify="space-between">
-                      <HStack spacing={6}>
-                        <Box
-                          p={4}
-                          borderRadius="xl"
-                          bg="yellow.400"
-                          color="black"
-                        >
-                          <Text fontSize="3xl">{coreFeatures[0].icon}</Text>
-                        </Box>
-                        <VStack align="start" spacing={2}>
-                          <HStack>
-                            <Heading size="xl" color="white">
+                  <CardBody p={{ base: 6, md: 8 }} position="relative" zIndex={1}>
+                    {isMobile ? (
+                      /* 移动端：垂直布局 */
+                      <VStack spacing={4} align="stretch">
+                        <HStack spacing={4}>
+                          <Box
+                            p={3}
+                            borderRadius="lg"
+                            bg="yellow.400"
+                            color="black"
+                          >
+                            <Text fontSize="2xl">{coreFeatures[0].icon}</Text>
+                          </Box>
+                          <VStack align="start" spacing={1} flex={1}>
+                            <Heading size="lg" color="white">
                               {coreFeatures[0].title}
                             </Heading>
-                            <Badge colorScheme="yellow" variant="solid" fontSize="sm">
+                            <Badge colorScheme="yellow" variant="solid" fontSize="xs">
                               {coreFeatures[0].badge}
                             </Badge>
-                          </HStack>
-                          <Text color="whiteAlpha.800" fontSize="lg" maxW="md">
-                            {coreFeatures[0].description}
-                          </Text>
-                        </VStack>
-                      </HStack>
-                      <Button
-                        colorScheme="yellow"
-                        size="lg"
-                        borderRadius="full"
-                        fontWeight="bold"
-                        onClick={() => handleProductClick(coreFeatures[0].url)}
-                      >
-                        进入功能 →
-                      </Button>
-                    </Flex>
+                          </VStack>
+                        </HStack>
+                        <Text color="whiteAlpha.800" fontSize="md" lineHeight="tall">
+                          {coreFeatures[0].description}
+                        </Text>
+                        <Button
+                          colorScheme="yellow"
+                          size="md"
+                          borderRadius="full"
+                          fontWeight="bold"
+                          w="100%"
+                          onClick={() => handleProductClick(coreFeatures[0].url)}
+                          minH="44px"
+                        >
+                          进入功能 →
+                        </Button>
+                      </VStack>
+                    ) : (
+                      /* 桌面端：横向布局 */
+                      <Flex align="center" justify="space-between">
+                        <HStack spacing={6}>
+                          <Box
+                            p={4}
+                            borderRadius="xl"
+                            bg="yellow.400"
+                            color="black"
+                          >
+                            <Text fontSize="3xl">{coreFeatures[0].icon}</Text>
+                          </Box>
+                          <VStack align="start" spacing={2}>
+                            <HStack>
+                              <Heading size="xl" color="white">
+                                {coreFeatures[0].title}
+                              </Heading>
+                              <Badge colorScheme="yellow" variant="solid" fontSize="sm">
+                                {coreFeatures[0].badge}
+                              </Badge>
+                            </HStack>
+                            <Text color="whiteAlpha.800" fontSize="lg" maxW="md">
+                              {coreFeatures[0].description}
+                            </Text>
+                          </VStack>
+                        </HStack>
+                        <Button
+                          colorScheme="yellow"
+                          size="lg"
+                          borderRadius="full"
+                          fontWeight="bold"
+                          onClick={() => handleProductClick(coreFeatures[0].url)}
+                        >
+                          进入功能 →
+                        </Button>
+                      </Flex>
+                    )}
                   </CardBody>
                 </Card>
 
                 {/* 其他5个功能 */}
-                <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={6} w="100%">
+                <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={{ base: 4, md: 5, lg: 6 }} w="100%">
                   {coreFeatures.slice(1).map((feature) => (
                     <Card
                       key={feature.id}
@@ -279,7 +332,7 @@ export default function HomePage() {
                       backdropFilter="blur(10px)"
                       border="1px solid"
                       borderColor="whiteAlpha.200"
-                      borderRadius="2xl"
+                      borderRadius={{ base: 'xl', md: '2xl' }}
                       cursor="pointer"
                       transition="all 0.3s ease"
                       _hover={{
@@ -288,41 +341,51 @@ export default function HomePage() {
                         transform: 'translateY(-4px)',
                         shadow: '2xl'
                       }}
+                      _active={{
+                        bg: 'whiteAlpha.200',
+                        borderColor: `${feature.color}.400`,
+                        transform: 'translateY(-2px)'
+                      }}
                       onClick={() => handleProductClick(feature.url)}
-                      minH="180px"
+                      minH={{ base: 'auto', md: '180px' }}
                     >
-                      <CardBody p={6}>
-                        <VStack spacing={4} align="start" h="100%">
+                      <CardBody p={{ base: 5, md: 6 }}>
+                        <VStack spacing={{ base: 3, md: 4 }} align="start" h="100%">
                           <HStack>
                             <Box
-                              p={3}
+                              p={{ base: 2, md: 3 }}
                               borderRadius="lg"
                               bg={`${feature.color}.50`}
                               border="1px solid"
                               borderColor={`${feature.color}.200`}
                             >
-                              <Text fontSize="2xl">{feature.icon}</Text>
+                              <Text fontSize={{ base: 'xl', md: '2xl' }}>{feature.icon}</Text>
                             </Box>
-                            <Badge colorScheme={feature.color} variant="solid">
+                            <Badge colorScheme={feature.color} variant="solid" fontSize={{ base: 'xs', md: 'sm' }}>
                               {feature.badge}
                             </Badge>
                           </HStack>
 
-                          <VStack align="start" spacing={2} flex={1}>
-                            <Heading size="lg" color="white">
+                          <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="sm" lineHeight="tall">
+                            <Text color="whiteAlpha.800" fontSize={{ base: 'xs', md: 'sm' }} lineHeight="tall">
                               {feature.description}
                             </Text>
                           </VStack>
 
                           <Button
                             colorScheme={feature.color}
-                            size="sm"
+                            size={{ base: 'md', md: 'sm' }}
                             variant="outline"
                             alignSelf="flex-end"
-                            onClick={() => handleProductClick(feature.url)}
+                            w={{ base: '100%', md: 'auto' }}
+                            minH="44px"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handleProductClick(feature.url);
+                            }}
                           >
                             使用
                           </Button>
@@ -340,15 +403,15 @@ export default function HomePage() {
       {/* 底部区域 */}
       <Box
         bg="linear-gradient(135deg, #0E0C15 0%, #15131D 100%)"
-        py={12}
+        py={{ base: 8, md: 12 }}
         position="relative"
       >
-        <Container maxW="7xl" position="relative" zIndex={1}>
-          <VStack spacing={6} textAlign="center">
-            <Text color="whiteAlpha.600" fontSize="sm">
+        <Container maxW="7xl" position="relative" zIndex={1} px={containerPx}>
+          <VStack spacing={{ base: 4, md: 6 }} textAlign="center">
+            <Text color="whiteAlpha.600" fontSize={{ base: 'xs', md: 'sm' }}>
               © 2024 价值前沿. 保留所有权利.
             </Text>
-            <HStack spacing={4} fontSize="xs" color="whiteAlpha.500">
+            <HStack spacing={{ base: 2, md: 4 }} fontSize="xs" color="whiteAlpha.500" flexWrap="wrap" justify="center">
               <Link
                 href="https://beian.mps.gov.cn/#/query/webSearch?code=11010802046286"
                 isExternal