update ui

src/views/Community/components/DynamicNewsCard.js

@@ -390,6 +390,13 @@ const [currentMode, setCurrentMode] = useState('vertical');
       mb={4}
       position="relative"
       zIndex={1}
+      animation="fadeInUp 0.8s ease-out 0.2s both"
+      sx={{
+        '@keyframes fadeInUp': {
+          '0%': { opacity: 0, transform: 'translateY(30px)' },
+          '100%': { opacity: 1, transform: 'translateY(0)' }
+        }
+      }}
     >
       {/* 标题和搜索部分 - 可滚动区域 */}
       <CardHeader

src/views/Community/components/HeroPanel.js

@@ -608,20 +608,52 @@ const ConceptFlowAnimation = () => {
  */
 const FeatureIcon = ({ icon, title, description }) => {
   return (
-    <HStack spacing={3} align="start">
+    <HStack
+      spacing={3}
+      align="start"
+      transition="all 0.3s ease"
+      cursor="pointer"
+      _hover={{
+        transform: 'translateX(8px)'
+      }}
+    >
       <Box
         p={2}
         borderRadius="lg"
         bg="whiteAlpha.200"
         color="gold"
+        position="relative"
+        overflow="hidden"
+        transition="all 0.3s ease"
+        _hover={{
+          bg: "whiteAlpha.300",
+          boxShadow: "0 0 20px rgba(255, 215, 0, 0.4)"
+        }}
+        _before={{
+          content: '""',
+          position: 'absolute',
+          top: '-50%',
+          left: '-50%',
+          width: '200%',
+          height: '200%',
+          background: 'linear-gradient(45deg, transparent, rgba(255, 215, 0, 0.3), transparent)',
+          transform: 'rotate(45deg)',
+          animation: 'iconShine 3s ease-in-out infinite'
+        }}
+        sx={{
+          '@keyframes iconShine': {
+            '0%': { transform: 'translateX(-100%) translateY(-100%) rotate(45deg)' },
+            '100%': { transform: 'translateX(100%) translateY(100%) rotate(45deg)' }
+          }
+        }}
       >
-        <Icon as={icon} boxSize={5} />
+        <Icon as={icon} boxSize={5} position="relative" zIndex={1} />
       </Box>
       <VStack align="start" spacing={0}>
-        <Text fontSize="sm" fontWeight="bold" color="white">
+        <Text fontSize="sm" fontWeight="bold" color="white" letterSpacing="wide">
           {title}
         </Text>
-        <Text fontSize="xs" color="whiteAlpha.700">
+        <Text fontSize="xs" color="whiteAlpha.800">
           {description}
         </Text>
       </VStack>
@@ -633,106 +665,301 @@ const FeatureIcon = ({ icon, title, description }) => {
  * 顶部说明面板主组件
  */
 const HeroPanel = () => {
-  const gradientBg = 'linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%)';
+  const gradientBg = 'linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 25%, #16213e 50%, #1a1a2e 75%, #0a0a0a 100%)';
   const cardBorder = '1px solid';
-  const borderColor = useColorModeValue('rgba(255, 215, 0, 0.3)', 'rgba(255, 215, 0, 0.2)');
+  const borderColor = useColorModeValue('rgba(255, 215, 0, 0.4)', 'rgba(255, 215, 0, 0.3)');
 
   return (
     <Card
       bg={gradientBg}
       borderColor={borderColor}
       borderWidth={cardBorder}
-      boxShadow="0 12px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 215, 0, 0.1) inset"
+      boxShadow="0 20px 60px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 215, 0, 0.15) inset, 0 0 80px rgba(255, 215, 0, 0.05)"
       mb={6}
       overflow="hidden"
       position="relative"
-      transition="all 0.3s ease"
+      transition="all 0.5s cubic-bezier(0.4, 0, 0.2, 1)"
       _hover={{
-        boxShadow: "0 16px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 215, 0, 0.2) inset",
+        boxShadow: "0 24px 80px rgba(0, 0, 0, 0.8), 0 0 0 2px rgba(255, 215, 0, 0.3) inset, 0 0 120px rgba(255, 215, 0, 0.1)",
-        transform: "translateY(-2px)"
+        transform: "translateY(-4px) scale(1.005)",
+        borderColor: "rgba(255, 215, 0, 0.5)"
       }}
     >
-      {/* 装饰性背景图案 - 多层叠加 */}
+      {/* 动态网格背景 */}
       <Box
         position="absolute"
-        top="-30%"
+        top={0}
-        right="-15%"
+        left={0}
+        right={0}
+        bottom={0}
+        opacity={0.03}
+        pointerEvents="none"
+        bgImage="linear-gradient(rgba(255, 215, 0, 0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 215, 0, 0.3) 1px, transparent 1px)"
+        bgSize="50px 50px"
+        animation="gridMove 20s linear infinite"
+        sx={{
+          '@keyframes gridMove': {
+            '0%': { backgroundPosition: '0 0' },
+            '100%': { backgroundPosition: '50px 50px' }
+          }
+        }}
+      />
+
+      {/* 扫描线效果 */}
+      <Box
+        position="absolute"
+        top={0}
+        left={0}
+        right={0}
+        height="2px"
+        bgGradient="linear(to-r, transparent, rgba(255, 215, 0, 0.8), transparent)"
+        pointerEvents="none"
+        animation="scanLine 3s ease-in-out infinite"
+        sx={{
+          '@keyframes scanLine': {
+            '0%': { transform: 'translateY(0)', opacity: 0 },
+            '50%': { opacity: 1 },
+            '100%': { transform: 'translateY(400px)', opacity: 0 }
+          }
+        }}
+      />
+
+      {/* 装饰性光晕 - 多层动态叠加 */}
+      <Box
+        position="absolute"
+        top="-40%"
+        right="-20%"
+        width="700px"
+        height="700px"
+        borderRadius="full"
+        bg="radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, rgba(255, 165, 0, 0.12) 30%, transparent 70%)"
+        pointerEvents="none"
+        filter="blur(50px)"
+        animation="floatGlow1 8s ease-in-out infinite"
+        sx={{
+          '@keyframes floatGlow1': {
+            '0%, 100%': { transform: 'translate(0, 0) scale(1)' },
+            '50%': { transform: 'translate(-30px, 20px) scale(1.1)' }
+          }
+        }}
+      />
+      <Box
+        position="absolute"
+        bottom="-30%"
+        left="-15%"
+        width="500px"
+        height="500px"
+        borderRadius="full"
+        bg="radial-gradient(circle, rgba(236, 0, 0, 0.15) 0%, rgba(255, 77, 79, 0.08) 40%, transparent 70%)"
+        pointerEvents="none"
+        filter="blur(60px)"
+        animation="floatGlow2 10s ease-in-out infinite"
+        sx={{
+          '@keyframes floatGlow2': {
+            '0%, 100%': { transform: 'translate(0, 0) scale(1)' },
+            '50%': { transform: 'translate(40px, -30px) scale(1.15)' }
+          }
+        }}
+      />
+      <Box
+        position="absolute"
+        top="40%"
+        left="30%"
         width="600px"
         height="600px"
         borderRadius="full"
-        bg="radial-gradient(circle, rgba(255, 215, 0, 0.15) 0%, rgba(255, 165, 0, 0.08) 40%, transparent 70%)"
+        bg="radial-gradient(circle, rgba(0, 218, 60, 0.08) 0%, transparent 60%)"
         pointerEvents="none"
-        filter="blur(40px)"
+        filter="blur(70px)"
+        animation="floatGlow3 12s ease-in-out infinite"
+        sx={{
+          '@keyframes floatGlow3': {
+            '0%, 100%': { transform: 'translate(0, 0) scale(1)' },
+            '50%': { transform: 'translate(-50px, 40px) scale(1.2)' }
+          }
+        }}
       />
+
+      {/* 四角光点装饰 */}
       <Box
         position="absolute"
-        bottom="-20%"
+        top="20px"
-        left="-10%"
+        left="20px"
-        width="400px"
+        width="4px"
-        height="400px"
+        height="4px"
         borderRadius="full"
-        bg="radial-gradient(circle, rgba(236, 0, 0, 0.08) 0%, transparent 60%)"
+        bg="#FFD700"
-        pointerEvents="none"
+        boxShadow="0 0 20px #FFD700"
-        filter="blur(50px)"
+        animation="cornerPulse 2s ease-in-out infinite"
+        sx={{
+          '@keyframes cornerPulse': {
+            '0%, 100%': { opacity: 0.3, transform: 'scale(1)' },
+            '50%': { opacity: 1, transform: 'scale(1.5)' }
+          }
+        }}
       />
       <Box
         position="absolute"
-        top="50%"
+        top="20px"
-        left="50%"
+        right="20px"
-        transform="translate(-50%, -50%)"
+        width="4px"
-        width="80%"
+        height="4px"
-        height="80%"
+        borderRadius="full"
-        bg="radial-gradient(circle, rgba(255, 215, 0, 0.02) 0%, transparent 60%)"
+        bg="#FFD700"
-        pointerEvents="none"
+        boxShadow="0 0 20px #FFD700"
-        filter="blur(60px)"
+        animation="cornerPulse 2s ease-in-out infinite 0.5s"
+        sx={{
+          '@keyframes cornerPulse': {
+            '0%, 100%': { opacity: 0.3, transform: 'scale(1)' },
+            '50%': { opacity: 1, transform: 'scale(1.5)' }
+          }
+        }}
+      />
+      <Box
+        position="absolute"
+        bottom="20px"
+        left="20px"
+        width="4px"
+        height="4px"
+        borderRadius="full"
+        bg="#FFD700"
+        boxShadow="0 0 20px #FFD700"
+        animation="cornerPulse 2s ease-in-out infinite 1s"
+        sx={{
+          '@keyframes cornerPulse': {
+            '0%, 100%': { opacity: 0.3, transform: 'scale(1)' },
+            '50%': { opacity: 1, transform: 'scale(1.5)' }
+          }
+        }}
+      />
+      <Box
+        position="absolute"
+        bottom="20px"
+        right="20px"
+        width="4px"
+        height="4px"
+        borderRadius="full"
+        bg="#FFD700"
+        boxShadow="0 0 20px #FFD700"
+        animation="cornerPulse 2s ease-in-out infinite 1.5s"
+        sx={{
+          '@keyframes cornerPulse': {
+            '0%, 100%': { opacity: 0.3, transform: 'scale(1)' },
+            '50%': { opacity: 1, transform: 'scale(1.5)' }
+          }
+        }}
       />
 
       <CardBody p={6}>
         <SimpleGrid columns={{ base: 1, lg: 3 }} spacing={6}>
           {/* 左侧：产品介绍 */}
-          <Box>
+          <Box
+            animation="fadeInLeft 0.8s ease-out"
+            sx={{
+              '@keyframes fadeInLeft': {
+                '0%': { opacity: 0, transform: 'translateX(-30px)' },
+                '100%': { opacity: 1, transform: 'translateX(0)' }
+              }
+            }}
+          >
             <VStack align="start" spacing={4}>
               <Heading size="lg" color="white" fontWeight="extrabold">
                 <Text
-                  bgGradient="linear(to-r, #FFD700, #FFA500)"
+                  bgGradient="linear(to-r, #FFD700, #FFA500, #FFD700)"
                   bgClip="text"
+                  backgroundSize="200% 100%"
+                  animation="shimmer 3s linear infinite"
+                  sx={{
+                    '@keyframes shimmer': {
+                      '0%': { backgroundPosition: '-200% 0' },
+                      '100%': { backgroundPosition: '200% 0' }
+                    }
+                  }}
                 >
                   价值前沿
                 </Text>
               </Heading>
-              <Text fontSize="sm" color="whiteAlpha.800" lineHeight="1.8">
+              <Text fontSize="sm" color="whiteAlpha.900" lineHeight="1.8" fontWeight="medium">
                 实时捕捉市场动态，智能分析投资机会。
                 <br />
                 整合多维数据源，为您提供专业的投资决策支持。
               </Text>
 
-              <VStack spacing={3} align="stretch" w="100%">
+              <VStack spacing={3} align="stretch" w="100%" mt={2}>
-                <FeatureIcon
+                <Box
-                  icon={Activity}
+                  animation="fadeInUp 0.8s ease-out 0.2s both"
-                  title="实时监控"
+                  sx={{
-                  description="7×24小时追踪市场动态"
+                    '@keyframes fadeInUp': {
-                />
+                      '0%': { opacity: 0, transform: 'translateY(20px)' },
-                <FeatureIcon
+                      '100%': { opacity: 1, transform: 'translateY(0)' }
-                  icon={TrendingUp}
+                    }
-                  title="智能分析"
+                  }}
-                  description="AI驱动的概念板块分析"
+                >
-                />
+                  <FeatureIcon
-                <FeatureIcon
+                    icon={Activity}
-                  icon={Globe}
+                    title="实时监控"
-                  title="全面覆盖"
+                    description="7×24小时追踪市场动态"
-                  description="A股全市场深度数据"
+                  />
-                />
+                </Box>
-                <FeatureIcon
+                <Box
-                  icon={Zap}
+                  animation="fadeInUp 0.8s ease-out 0.4s both"
-                  title="极速响应"
+                  sx={{
-                  description="毫秒级数据更新推送"
+                    '@keyframes fadeInUp': {
-                />
+                      '0%': { opacity: 0, transform: 'translateY(20px)' },
+                      '100%': { opacity: 1, transform: 'translateY(0)' }
+                    }
+                  }}
+                >
+                  <FeatureIcon
+                    icon={TrendingUp}
+                    title="智能分析"
+                    description="AI驱动的概念板块分析"
+                  />
+                </Box>
+                <Box
+                  animation="fadeInUp 0.8s ease-out 0.6s both"
+                  sx={{
+                    '@keyframes fadeInUp': {
+                      '0%': { opacity: 0, transform: 'translateY(20px)' },
+                      '100%': { opacity: 1, transform: 'translateY(0)' }
+                    }
+                  }}
+                >
+                  <FeatureIcon
+                    icon={Globe}
+                    title="全面覆盖"
+                    description="A股全市场深度数据"
+                  />
+                </Box>
+                <Box
+                  animation="fadeInUp 0.8s ease-out 0.8s both"
+                  sx={{
+                    '@keyframes fadeInUp': {
+                      '0%': { opacity: 0, transform: 'translateY(20px)' },
+                      '100%': { opacity: 1, transform: 'translateY(0)' }
+                    }
+                  }}
+                >
+                  <FeatureIcon
+                    icon={Zap}
+                    title="极速响应"
+                    description="毫秒级数据更新推送"
+                  />
+                </Box>
               </VStack>
             </VStack>
           </Box>
 
           {/* 中间：沪深指数K线图 */}
-          <Box>
+          <Box
+            animation="fadeInScale 0.8s ease-out 0.3s both"
+            sx={{
+              '@keyframes fadeInScale': {
+                '0%': { opacity: 0, transform: 'scale(0.95)' },
+                '100%': { opacity: 1, transform: 'scale(1)' }
+              }
+            }}
+          >
             <VStack spacing={4} h="100%">
               <Box
                 w="100%"
@@ -743,12 +970,27 @@ const HeroPanel = () => {
                 borderColor="whiteAlpha.200"
                 backdropFilter="blur(10px)"
                 boxShadow="0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05)"
-                transition="all 0.3s ease"
+                transition="all 0.4s cubic-bezier(0.4, 0, 0.2, 1)"
+                position="relative"
+                overflow="hidden"
                 _hover={{
                   bg: "whiteAlpha.150",
-                  borderColor: "whiteAlpha.300",
+                  borderColor: "rgba(236, 0, 0, 0.4)",
-                  boxShadow: "0 6px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1)",
+                  boxShadow: "0 8px 32px rgba(236, 0, 0, 0.3), 0 0 0 1px rgba(236, 0, 0, 0.2) inset, inset 0 1px 0 rgba(255, 255, 255, 0.1)",
-                  transform: "translateY(-1px)"
+                  transform: "translateY(-4px) scale(1.02)"
+                }}
+                _before={{
+                  content: '""',
+                  position: 'absolute',
+                  top: 0,
+                  left: '-100%',
+                  width: '100%',
+                  height: '100%',
+                  background: 'linear-gradient(90deg, transparent, rgba(236, 0, 0, 0.1), transparent)',
+                  transition: 'left 0.5s ease'
+                }}
+                _hover_before={{
+                  left: '100%'
                 }}
               >
                 <MiniIndexChart indexCode="000001" indexName="上证指数" />
@@ -762,12 +1004,27 @@ const HeroPanel = () => {
                 borderColor="whiteAlpha.200"
                 backdropFilter="blur(10px)"
                 boxShadow="0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05)"
-                transition="all 0.3s ease"
+                transition="all 0.4s cubic-bezier(0.4, 0, 0.2, 1)"
+                position="relative"
+                overflow="hidden"
                 _hover={{
                   bg: "whiteAlpha.150",
-                  borderColor: "whiteAlpha.300",
+                  borderColor: "rgba(0, 218, 60, 0.4)",
-                  boxShadow: "0 6px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1)",
+                  boxShadow: "0 8px 32px rgba(0, 218, 60, 0.3), 0 0 0 1px rgba(0, 218, 60, 0.2) inset, inset 0 1px 0 rgba(255, 255, 255, 0.1)",
-                  transform: "translateY(-1px)"
+                  transform: "translateY(-4px) scale(1.02)"
+                }}
+                _before={{
+                  content: '""',
+                  position: 'absolute',
+                  top: 0,
+                  left: '-100%',
+                  width: '100%',
+                  height: '100%',
+                  background: 'linear-gradient(90deg, transparent, rgba(0, 218, 60, 0.1), transparent)',
+                  transition: 'left 0.5s ease'
+                }}
+                _hover_before={{
+                  left: '100%'
                 }}
               >
                 <MiniIndexChart indexCode="399001" indexName="深证成指" />
@@ -776,7 +1033,15 @@ const HeroPanel = () => {
           </Box>
 
           {/* 右侧：热门概念词云图 */}
-          <Box>
+          <Box
+            animation="fadeInRight 0.8s ease-out 0.5s both"
+            sx={{
+              '@keyframes fadeInRight': {
+                '0%': { opacity: 0, transform: 'translateX(30px)' },
+                '100%': { opacity: 1, transform: 'translateX(0)' }
+              }
+            }}
+          >
             <VStack align="start" spacing={3} h="100%">
               <HStack
                 spacing={2}
@@ -785,6 +1050,30 @@ const HeroPanel = () => {
                 bg="whiteAlpha.50"
                 w="full"
                 justify="space-between"
+                position="relative"
+                overflow="hidden"
+                transition="all 0.3s ease"
+                _hover={{
+                  bg: "whiteAlpha.100",
+                  boxShadow: "0 0 20px rgba(255, 165, 0, 0.3)"
+                }}
+                _before={{
+                  content: '""',
+                  position: 'absolute',
+                  top: 0,
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  background: 'linear-gradient(90deg, transparent, rgba(255, 165, 0, 0.1), transparent)',
+                  animation: 'headerShimmer 3s ease-in-out infinite',
+                  pointerEvents: 'none'
+                }}
+                sx={{
+                  '@keyframes headerShimmer': {
+                    '0%': { transform: 'translateX(-100%)' },
+                    '100%': { transform: 'translateX(100%)' }
+                  }
+                }}
               >
                 <HStack spacing={2}>
                   <Text
@@ -792,6 +1081,14 @@ const HeroPanel = () => {
                     fontWeight="extrabold"
                     bgGradient="linear(to-r, #FFD700, #FFA500, #FF4500)"
                     bgClip="text"
+                    backgroundSize="200% 100%"
+                    animation="gradientFlow 3s ease infinite"
+                    sx={{
+                      '@keyframes gradientFlow': {
+                        '0%, 100%': { backgroundPosition: '0% 50%' },
+                        '50%': { backgroundPosition: '100% 50%' }
+                      }
+                    }}
                   >
                     🔥 热门概念
                   </Text>
@@ -802,8 +1099,31 @@ const HeroPanel = () => {
                     h="6px"
                     borderRadius="full"
                     bg="orange.400"
-                    animation="pulse 2s infinite"
+                    animation="liveIndicator 1.5s ease-in-out infinite"
-                    boxShadow="0 0 6px rgba(251, 146, 60, 0.8)"
+                    boxShadow="0 0 10px rgba(251, 146, 60, 0.8)"
+                    position="relative"
+                    _after={{
+                      content: '""',
+                      position: 'absolute',
+                      top: '-3px',
+                      left: '-3px',
+                      right: '-3px',
+                      bottom: '-3px',
+                      borderRadius: 'full',
+                      border: '2px solid',
+                      borderColor: 'orange.400',
+                      animation: 'ripple 1.5s ease-out infinite'
+                    }}
+                    sx={{
+                      '@keyframes liveIndicator': {
+                        '0%, 100%': { opacity: 1, transform: 'scale(1)' },
+                        '50%': { opacity: 0.6, transform: 'scale(1.2)' }
+                      },
+                      '@keyframes ripple': {
+                        '0%': { transform: 'scale(1)', opacity: 0.8 },
+                        '100%': { transform: 'scale(2.5)', opacity: 0 }
+                      }
+                    }}
                   />
                   <Text fontSize="xs" color="orange.400" fontWeight="medium">
                     实时更新
@@ -815,10 +1135,31 @@ const HeroPanel = () => {
                 flex="1"
                 position="relative"
                 overflow="hidden"
+                borderRadius="lg"
+                bg="whiteAlpha.50"
+                p={2}
+                transition="all 0.3s ease"
+                _hover={{
+                  bg: "whiteAlpha.100",
+                  boxShadow: "0 0 30px rgba(255, 215, 0, 0.2)"
+                }}
               >
                 <ConceptFlowAnimation />
               </Box>
-              <HStack spacing={2} fontSize="xs" color="whiteAlpha.600" w="100%" justify="center">
+              <HStack
+                spacing={2}
+                fontSize="xs"
+                color="whiteAlpha.600"
+                w="100%"
+                justify="center"
+                animation="fadeIn 1s ease-out 1s both"
+                sx={{
+                  '@keyframes fadeIn': {
+                    '0%': { opacity: 0 },
+                    '100%': { opacity: 1 }
+                  }
+                }}
+              >
                 <Text>🌊 概念流动展示</Text>
                 <Text>•</Text>
                 <Text>🎨 颜色表示涨跌幅</Text>

src/views/Community/components/HotEventsSection.js

@@ -44,6 +44,13 @@ const HotEventsSection = ({ events, onEventClick }) => {
       borderColor={useColorModeValue('gray.200', 'gray.700')}
       position="relative"
       zIndex={1}
+      animation="fadeInUp 0.8s ease-out 0.4s both"
+      sx={{
+        '@keyframes fadeInUp': {
+          '0%': { opacity: 0, transform: 'translateY(30px)' },
+          '100%': { opacity: 1, transform: 'translateY(0)' }
+        }
+      }}
     >
       <CardHeader pb={3} display="flex" justifyContent="space-between" alignItems="flex-start">
         <Box>