From c33181a689d8425216dcd0d2df3d3a7cd5bc5a00 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Tue, 28 Oct 2025 13:06:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E5=A4=8D=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E6=96=B0=E9=97=BB=E4=B8=AD=E5=BF=83=E5=8D=A1=E7=89=87=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E8=B7=B3=E5=8F=98=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

     问题根源：
     使用 useBreakpointValue 的 isMobile 变量在初始渲染时返回 undefined，导致：
     1. 服务端渲染/首次加载时显示一种布局
     2. 客户端水合后切换到另一种布局
     3. 用户看到明显的布局跳变（先横向后纵向，或反之）

     解决方案：
     不使用条件渲染两套完全不同的 JSX，而是使用响应式样式让同一套 JSX 自动适应不同屏幕。

     修改策略：
     将移动端（VStack）和桌面端（Flex横向）合并为一套响应式布局：
     - 使用 Flex + 响应式 flexDirection
     - flexDirection={{ base: column, md: row }}（移动端纵向，桌面端横向）
     - 统一使用响应式属性而不是条件渲染
---
 src/views/Home/HomePage.js | 107 +++++++++++++------------------------
 1 file changed, 38 insertions(+), 69 deletions(-)

diff --git a/src/views/Home/HomePage.js b/src/views/Home/HomePage.js
index 9c83f1af..1fd38f6f 100755
--- a/src/views/Home/HomePage.js
+++ b/src/views/Home/HomePage.js
@@ -34,7 +34,6 @@ export default function HomePage() {
   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(() => {
@@ -238,79 +237,49 @@ export default function HomePage() {
                   }}
                 >
                   <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">
+                    {/* 响应式布局：移动端纵向，桌面端横向 */}
+                    <Flex
+                      direction={{ base: 'column', md: 'row' }}
+                      align={{ base: 'stretch', md: 'center' }}
+                      justify={{ base: 'flex-start', md: 'space-between' }}
+                      gap={{ base: 4, md: 6 }}
+                    >
+                      <Flex align="center" gap={{ base: 4, md: 6 }} flex={1}>
+                        <Box
+                          p={{ base: 3, md: 4 }}
+                          borderRadius={{ base: 'lg', md: 'xl' }}
+                          bg="yellow.400"
+                          color="black"
+                        >
+                          <Text fontSize={{ base: '2xl', md: '3xl' }}>{coreFeatures[0].icon}</Text>
+                        </Box>
+                        <VStack align="start" spacing={{ base: 1, md: 2 }} flex={1}>
+                          <HStack>
+                            <Heading size={{ base: 'lg', md: 'xl' }} color="white">
                               {coreFeatures[0].title}
                             </Heading>
-                            <Badge colorScheme="yellow" variant="solid" fontSize="xs">
+                            <Badge colorScheme="yellow" variant="solid" fontSize={{ base: 'xs', md: 'sm' }}>
                               {coreFeatures[0].badge}
                             </Badge>
-                          </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>
+                          </HStack>
+                          <Text color="whiteAlpha.800" fontSize={{ base: 'md', md: 'lg' }} maxW={{ md: 'md' }} lineHeight="tall">
+                            {coreFeatures[0].description}
+                          </Text>
+                        </VStack>
                       </Flex>
-                    )}
+                      <Button
+                        colorScheme="yellow"
+                        size={{ base: 'md', md: 'lg' }}
+                        borderRadius="full"
+                        fontWeight="bold"
+                        w={{ base: '100%', md: 'auto' }}
+                        onClick={() => handleProductClick(coreFeatures[0].url)}
+                        minH="44px"
+                        flexShrink={0}
+                      >
+                        进入功能 →
+                      </Button>
+                    </Flex>
                   </CardBody>
                 </Card>