update ui

src/views/Community/components/HeroPanel.js

@@ -63,7 +63,7 @@ const fetchIndexKline = async (indexCode) => {
 };
 
 /**
- * 获取热门概念数据（用于词云图）
+ * 获取热门概念数据（用于流动动画）
  */
 const fetchPopularConcepts = async () => {
   try {
@@ -74,7 +74,7 @@ const fetchPopularConcepts = async () => {
       },
       body: JSON.stringify({
         query: '',
-        size: 18,  // 只获取前18个概念
+        size: 80,  // 获取前80个概念
         page: 1,
         sort_by: 'change_pct'
       })
@@ -455,25 +455,29 @@ const ConceptFlowAnimation = () => {
     );
   }
 
-  // 将概念分成3行
+  // 将 80 个概念均匀分成 5 行（每行 16 个）
-  const rows = [
+  const rowCount = 5;
-    concepts.slice(0, 6),
+  const conceptsPerRow = Math.ceil(concepts.length / rowCount);
-    concepts.slice(6, 12),
+  const rows = [];
-    concepts.slice(12, 18)
+
-  ];
+  for (let i = 0; i < rowCount; i++) {
+    const start = i * conceptsPerRow;
+    const end = Math.min(start + conceptsPerRow, concepts.length);
+    rows.push(concepts.slice(start, end));
+  }
 
   return (
-    <VStack spacing={2} h="200px" justify="center" overflow="hidden" position="relative" w="100%">
+    <VStack spacing={1} h="200px" justify="center" overflow="hidden" position="relative" w="100%">
       {rows.map((row, rowIndex) => {
-        // 每行不同的速度：第一行20秒，第二行25秒，第三行30秒
+        // 每行不同的速度：第一行30秒，第二行35秒，依次递增
-        const duration = 25 + rowIndex * 5;
+        const duration = 30 + rowIndex * 5;
 
         return (
           <Box
             key={rowIndex}
             position="relative"
             width="100%"
-            height="50px"
+            height="38px"
             overflow="hidden"
           >
             <HStack
@@ -502,15 +506,15 @@ const ConceptFlowAnimation = () => {
             return (
               <Box
                 key={`${rowIndex}-${idx}`}
-                px={4}
+                px={3}
-                py={2}
+                py={1}
                 borderRadius="full"
                 bg="whiteAlpha.200"
                 borderWidth="2px"
                 borderColor={color}
                 color="white"
                 fontWeight="bold"
-                fontSize="sm"
+                fontSize="xs"
                 whiteSpace="nowrap"
                 cursor="pointer"
                 position="relative"
@@ -526,7 +530,7 @@ const ConceptFlowAnimation = () => {
                 }}
                 onClick={() => handleConceptClick(concept.name)}
                 _hover={{
-                  transform: 'scale(1.15)',
+                  transform: 'scale(1.1)',
                   bg: 'whiteAlpha.300',
                   boxShadow: `0 0 20px ${color}80`,
                   zIndex: 100