style: 首页整体尺寸缩小约 67%

- 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>
2025-12-04 17:35:43 +08:00
parent ae42024ec0
commit 6cf92b6851
5 changed files with 47 additions and 47 deletions
--- 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({
--- 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) => (
--- 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);
--- 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}
          >
            进入功能 →
--- 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>