update ui

src/views/Community/components/HeroPanel.js

@@ -74,7 +74,7 @@ const fetchPopularConcepts = async () => {
       },
       body: JSON.stringify({
         query: '',
-        size: 80,  // 获取前80个概念
+        size: 60,  // 获取前60个概念
         page: 1,
         sort_by: 'change_pct'
       })
@@ -455,8 +455,8 @@ const ConceptFlowAnimation = () => {
     );
   }
 
-  // 将 80 个概念均匀分成 5 行（每行 16 个）
-  const rowCount = 5;
+  // 将 60 个概念均匀分成 3 行（每行 20 个）
+  const rowCount = 3;
   const conceptsPerRow = Math.ceil(concepts.length / rowCount);
   const rows = [];
 
@@ -466,18 +466,28 @@ const ConceptFlowAnimation = () => {
     rows.push(concepts.slice(start, end));
   }
 
+  // 根据涨跌幅计算字体大小（涨跌幅越大，字体越大）
+  const getFontSize = (changePct) => {
+    const absChange = Math.abs(changePct);
+    if (absChange >= 10) return 'md';      // 超大涨跌
+    if (absChange >= 7) return 'sm';       // 大涨跌
+    if (absChange >= 5) return 'sm';       // 中涨跌
+    if (absChange >= 3) return 'xs';       // 小涨跌
+    return 'xs';                            // 微涨跌
+  };
+
   return (
-    <VStack spacing={1} h="200px" justify="center" overflow="hidden" position="relative" w="100%">
+    <VStack spacing={3} h="200px" justify="center" overflow="hidden" position="relative" w="100%">
       {rows.map((row, rowIndex) => {
-        // 每行不同的速度：第一行30秒，第二行35秒，依次递增
-        const duration = 30 + rowIndex * 5;
+        // 每行不同的速度：第一行25秒，第二行30秒，第三行35秒
+        const duration = 25 + rowIndex * 5;
 
         return (
           <Box
             key={rowIndex}
             position="relative"
             width="100%"
-            height="38px"
+            height="58px"
             overflow="hidden"
           >
             <HStack
@@ -503,23 +513,26 @@ const ConceptFlowAnimation = () => {
             const icon = changePct > 0 ? '📈' : '📉';
             const isHovered = hoveredConcept === `${rowIndex}-${idx}`;
 
+            const fontSize = getFontSize(changePct);
+            const borderWidth = fontSize === 'md' ? '3px' : '2px';
+
             return (
               <Box
                 key={`${rowIndex}-${idx}`}
-                px={3}
-                py={1}
+                px={4}
+                py={2}
                 borderRadius="full"
                 bg="whiteAlpha.200"
-                borderWidth="2px"
+                borderWidth={borderWidth}
                 borderColor={color}
                 color="white"
-                fontWeight="bold"
-                fontSize="xs"
+                fontWeight={fontSize === 'md' ? 'extrabold' : 'bold'}
+                fontSize={fontSize}
                 whiteSpace="nowrap"
                 cursor="pointer"
                 position="relative"
                 transition="all 0.3s ease"
-                boxShadow={`0 0 10px ${color}40`}
+                boxShadow={`0 0 ${fontSize === 'md' ? '15px' : '10px'} ${color}${fontSize === 'md' ? '60' : '40'}`}
                 onMouseEnter={() => {
                   setIsPaused(true);
                   setHoveredConcept(`${rowIndex}-${idx}`);
@@ -530,9 +543,9 @@ const ConceptFlowAnimation = () => {
                 }}
                 onClick={() => handleConceptClick(concept.name)}
                 _hover={{
-                  transform: 'scale(1.1)',
+                  transform: 'scale(1.15)',
                   bg: 'whiteAlpha.300',
-                  boxShadow: `0 0 20px ${color}80`,
+                  boxShadow: `0 0 25px ${color}80`,
                   zIndex: 100
                 }}
               >