feat: 热点事件UI调整成轮播图

src/views/Community/components/HotEventsSection.js

@@ -1,12 +1,14 @@
 // src/views/Community/components/HotEventsSection.js
 // 热点事件区域组件
 
-import React from 'react';
+import React, { useState } from 'react';
 import {
   Card,
   CardHeader,
   CardBody,
   Heading,
+  Badge,
+  Box,
   useColorModeValue
 } from '@chakra-ui/react';
 import HotEvents from './HotEvents';
@@ -17,6 +19,14 @@ import HotEvents from './HotEvents';
  */
 const HotEventsSection = ({ events }) => {
   const cardBg = useColorModeValue('white', 'gray.800');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+
+  // 处理页码变化
+  const handlePageChange = (page, total) => {
+    setCurrentPage(page);
+    setTotalPages(total);
+  };
 
   // 如果没有热点事件，不渲染组件
   if (!events || events.length === 0) {
@@ -25,12 +35,27 @@ const HotEventsSection = ({ events }) => {
 
   return (
     <Card mt={0} bg={cardBg}>
-      <CardHeader pb={0}>
-        <Heading size="md">🔥 热点事件</Heading>
-        <p className="section-subtitle" style={{paddingTop: '8px'}}>展示最近5天内涨幅最高的事件，助您把握市场热点</p>
+      <CardHeader pb={0} display="flex" justifyContent="space-between" alignItems="flex-start">
+        <Box>
+          <Heading size="md">🔥 热点事件</Heading>
+          <p className="section-subtitle" style={{paddingTop: '8px'}}>展示最近5天内涨幅最高的事件，助您把握市场热点</p>
+        </Box>
+        {/* 页码指示器 */}
+        {totalPages > 1 && (
+          <Badge
+            colorScheme="blue"
+            fontSize="sm"
+            px={3}
+            py={1}
+            borderRadius="full"
+            ml={4}
+          >
+            {currentPage} / {totalPages}
+          </Badge>
+        )}
       </CardHeader>
       <CardBody py={0} px={4}>
-        <HotEvents events={events} />
+        <HotEvents events={events} onPageChange={handlePageChange} />
       </CardBody>
     </Card>
   );