From 6cf92b685176121ad0183f81b57861c103a64065 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Thu, 4 Dec 2025 17:35:43 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E9=A6=96=E9=A1=B5=E6=95=B4=E4=BD=93?=
 =?UTF-8?q?=E5=B0=BA=E5=AF=B8=E7=BC=A9=E5=B0=8F=E7=BA=A6=2067%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- useHomeResponsive: 标题尺寸 4xl→2xl，正文 xl→md
- HomePage: VStack/SimpleGrid 间距缩小
- HeroHeader: spacing/padding 缩小，maxW 调整
- FeaturedFeatureCard: 图标、标题、按钮尺寸缩小
- FeatureCard: 卡片高度 180→120px，整体元素尺寸缩小

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/hooks/useHomeResponsive.ts                | 18 +++++------
 src/views/Home/HomePage.tsx                   |  8 ++---
 src/views/Home/components/FeatureCard.tsx     | 32 +++++++++----------
 .../Home/components/FeaturedFeatureCard.tsx   | 28 ++++++++--------
 src/views/Home/components/HeroHeader.tsx      |  8 ++---
 5 files changed, 47 insertions(+), 47 deletions(-)

diff --git a/src/hooks/useHomeResponsive.ts b/src/hooks/useHomeResponsive.ts
index 5a2f7f76..c803e7df 100644
--- a/src/hooks/useHomeResponsive.ts
+++ b/src/hooks/useHomeResponsive.ts
@@ -18,21 +18,21 @@ export const useHomeResponsive = (): ResponsiveConfig => {
   });
 
   const headingSize = useBreakpointValue({
-    base: 'xl',
-    md: '3xl',
-    lg: '4xl'
+    base: 'lg',
+    md: 'xl',
+    lg: '2xl'
   });
 
   const headingLetterSpacing = useBreakpointValue({
-    base: '-1px',
-    md: '-1.5px',
-    lg: '-2px'
+    base: '-0.5px',
+    md: '-1px',
+    lg: '-1.5px'
   });
 
   const heroTextSize = useBreakpointValue({
-    base: 'md',
-    md: 'lg',
-    lg: 'xl'
+    base: 'xs',
+    md: 'sm',
+    lg: 'md'
   });
 
   const containerPx = useBreakpointValue({
diff --git a/src/views/Home/HomePage.tsx b/src/views/Home/HomePage.tsx
index ef50e489..13695984 100644
--- a/src/views/Home/HomePage.tsx
+++ b/src/views/Home/HomePage.tsx
@@ -91,7 +91,7 @@ const HomePage: React.FC = () => {
 
         <Container maxW="7xl" position="relative" zIndex={30} px={containerPx}>
           <VStack
-            spacing={{ base: 8, md: 12, lg: 16 }}
+            spacing={{ base: 5, md: 8, lg: 10 }}
             align="stretch"
             minH={heroHeight}
             justify="center"
@@ -104,8 +104,8 @@ const HomePage: React.FC = () => {
             />
 
             {/* 核心功能面板 */}
-            <Box pb={{ base: 8, md: 12 }}>
-              <VStack spacing={{ base: 6, md: 8 }}>
+            <Box pb={{ base: 5, md: 8 }}>
+              <VStack spacing={{ base: 4, md: 5 }}>
                 {/* 特色功能卡片 - 新闻中心 */}
                 <FeaturedFeatureCard
                   feature={featuredFeature}
@@ -115,7 +115,7 @@ const HomePage: React.FC = () => {
                 {/* 其他功能卡片 */}
                 <SimpleGrid
                   columns={{ base: 1, md: 2, lg: 3 }}
-                  spacing={{ base: 4, md: 5, lg: 6 }}
+                  spacing={{ base: 2, md: 3, lg: 4 }}
                   w="100%"
                 >
                   {regularFeatures.map((feature) => (
diff --git a/src/views/Home/components/FeatureCard.tsx b/src/views/Home/components/FeatureCard.tsx
index c026f734..838901ca 100644
--- a/src/views/Home/components/FeatureCard.tsx
+++ b/src/views/Home/components/FeatureCard.tsx
@@ -34,51 +34,51 @@ export const FeatureCard: React.FC<FeatureCardProps> = ({
       backdropFilter="blur(10px)"
       border="1px solid"
       borderColor="whiteAlpha.200"
-      borderRadius={{ base: 'xl', md: '2xl' }}
+      borderRadius={{ base: 'lg', md: 'xl' }}
       transition="all 0.3s ease"
       _hover={{
         bg: 'whiteAlpha.200',
         borderColor: `${feature.color}.400`,
-        transform: 'translateY(-4px)',
-        shadow: '2xl'
+        transform: 'translateY(-3px)',
+        shadow: 'xl'
       }}
       _active={{
         bg: 'whiteAlpha.200',
         borderColor: `${feature.color}.400`,
-        transform: 'translateY(-2px)'
+        transform: 'translateY(-1px)'
       }}
       onClick={() => onClick(feature)}
-      minH={{ base: 'auto', md: '180px' }}
+      minH={{ base: 'auto', md: '120px' }}
       cursor="pointer"
     >
-      <CardBody p={{ base: 5, md: 6 }}>
-        <VStack spacing={{ base: 3, md: 4 }} align="start" h="100%">
+      <CardBody p={{ base: 3, md: 4 }}>
+        <VStack spacing={{ base: 2, md: 2.5 }} align="start" h="100%">
           <HStack>
             <Box
-              p={{ base: 2, md: 3 }}
-              borderRadius="lg"
+              p={{ base: 1.5, md: 2 }}
+              borderRadius="md"
               bg={`${feature.color}.50`}
               border="1px solid"
               borderColor={`${feature.color}.200`}
             >
-              <Text fontSize={{ base: 'xl', md: '2xl' }}>{feature.icon}</Text>
+              <Text fontSize={{ base: 'md', md: 'lg' }}>{feature.icon}</Text>
             </Box>
             <Badge
               colorScheme={feature.color}
               variant="solid"
-              fontSize={{ base: 'xs', md: 'sm' }}
+              fontSize={{ base: '2xs', md: 'xs' }}
             >
               {feature.badge}
             </Badge>
           </HStack>
 
-          <VStack align="start" spacing={{ base: 1, md: 2 }} flex={1}>
-            <Heading size={{ base: 'md', md: 'lg' }} color="white">
+          <VStack align="start" spacing={{ base: 0.5, md: 1 }} flex={1}>
+            <Heading size={{ base: 'sm', md: 'md' }} color="white">
               {feature.title}
             </Heading>
             <Text
               color="whiteAlpha.800"
-              fontSize={{ base: 'xs', md: 'sm' }}
+              fontSize={{ base: '2xs', md: 'xs' }}
               lineHeight="tall"
             >
               {feature.description}
@@ -87,11 +87,11 @@ export const FeatureCard: React.FC<FeatureCardProps> = ({
 
           <Button
             colorScheme={feature.color}
-            size={{ base: 'md', md: 'sm' }}
+            size={{ base: 'sm', md: 'xs' }}
             variant="outline"
             alignSelf="flex-end"
             w={{ base: '100%', md: 'auto' }}
-            minH="44px"
+            minH="32px"
             onClick={(e) => {
               e.stopPropagation();
               onClick(feature);
diff --git a/src/views/Home/components/FeaturedFeatureCard.tsx b/src/views/Home/components/FeaturedFeatureCard.tsx
index c4dd9731..c34d0e95 100644
--- a/src/views/Home/components/FeaturedFeatureCard.tsx
+++ b/src/views/Home/components/FeaturedFeatureCard.tsx
@@ -34,7 +34,7 @@ export const FeaturedFeatureCard: React.FC<FeaturedFeatureCardProps> = ({
       bg="transparent"
       border="2px solid"
       borderColor="yellow.400"
-      borderRadius={{ base: '2xl', md: '3xl' }}
+      borderRadius={{ base: 'xl', md: '2xl' }}
       overflow="hidden"
       position="relative"
       shadow="2xl"
@@ -50,35 +50,35 @@ export const FeaturedFeatureCard: React.FC<FeaturedFeatureCardProps> = ({
         zIndex: 0
       }}
     >
-      <CardBody p={{ base: 6, md: 8 }} position="relative" zIndex={1}>
+      <CardBody p={{ base: 4, md: 5 }} position="relative" zIndex={1}>
         <Flex
           direction={{ base: 'column', md: 'row' }}
           align={{ base: 'stretch', md: 'center' }}
           justify={{ base: 'flex-start', md: 'space-between' }}
-          gap={{ base: 4, md: 6 }}
+          gap={{ base: 3, md: 4 }}
         >
-          <Flex align="center" gap={{ base: 4, md: 6 }} flex={1}>
+          <Flex align="center" gap={{ base: 3, md: 4 }} flex={1}>
             <Box
-              p={{ base: 3, md: 4 }}
-              borderRadius={{ base: 'lg', md: 'xl' }}
+              p={{ base: 2, md: 2.5 }}
+              borderRadius={{ base: 'md', md: 'lg' }}
               bg="yellow.400"
               color="black"
             >
-              <Text fontSize={{ base: '2xl', md: '3xl' }}>{feature.icon}</Text>
+              <Text fontSize={{ base: 'xl', md: '2xl' }}>{feature.icon}</Text>
             </Box>
-            <VStack align="start" spacing={{ base: 1, md: 2 }} flex={1}>
+            <VStack align="start" spacing={{ base: 0.5, md: 1 }} flex={1}>
               <HStack>
-                <Heading size={{ base: 'lg', md: 'xl' }} color="white">
+                <Heading size={{ base: 'md', md: 'lg' }} color="white">
                   {feature.title}
                 </Heading>
-                <Badge colorScheme="yellow" variant="solid" fontSize={{ base: 'xs', md: 'sm' }}>
+                <Badge colorScheme="yellow" variant="solid" fontSize={{ base: '2xs', md: 'xs' }}>
                   {feature.badge}
                 </Badge>
               </HStack>
               <Text
                 color="whiteAlpha.800"
-                fontSize={{ base: 'md', md: 'lg' }}
-                maxW={{ md: 'md' }}
+                fontSize={{ base: 'xs', md: 'sm' }}
+                maxW={{ md: 'sm' }}
                 lineHeight="tall"
               >
                 {feature.description}
@@ -87,12 +87,12 @@ export const FeaturedFeatureCard: React.FC<FeaturedFeatureCardProps> = ({
           </Flex>
           <Button
             colorScheme="yellow"
-            size={{ base: 'md', md: 'lg' }}
+            size={{ base: 'sm', md: 'md' }}
             borderRadius="full"
             fontWeight="bold"
             w={{ base: '100%', md: 'auto' }}
             onClick={() => onClick(feature)}
-            minH="44px"
+            minH="36px"
             flexShrink={0}
           >
             进入功能 →
diff --git a/src/views/Home/components/HeroHeader.tsx b/src/views/Home/components/HeroHeader.tsx
index 502a6737..6dd293c3 100644
--- a/src/views/Home/components/HeroHeader.tsx
+++ b/src/views/Home/components/HeroHeader.tsx
@@ -21,9 +21,9 @@ export const HeroHeader: React.FC<HeroHeaderProps> = ({
 }) => {
   return (
     <VStack
-      spacing={{ base: 4, md: 5, lg: 6 }}
+      spacing={{ base: 2, md: 3, lg: 4 }}
       textAlign="center"
-      pt={{ base: 4, md: 6, lg: 8 }}
+      pt={{ base: 2, md: 4, lg: 5 }}
     >
       <Heading
         size={headingSize}
@@ -37,9 +37,9 @@ export const HeroHeader: React.FC<HeroHeaderProps> = ({
       <Text
         fontSize={heroTextSize}
         color="whiteAlpha.800"
-        maxW={{ base: '100%', md: '2xl', lg: '3xl' }}
+        maxW={{ base: '100%', md: 'xl', lg: '2xl' }}
         lineHeight="tall"
-        px={{ base: 4, md: 0 }}
+        px={{ base: 2, md: 0 }}
       >
         专业投资研究工具,助您把握市场机遇
       </Text>