community增加事件详情

src/views/Community/components/EventDailyStats.js

@@ -24,6 +24,17 @@ import {
 } from '@ant-design/icons';
 import { getApiBase } from '@utils/apiConfig';
 
+/**
+ * 生成事件详情页 URL
+ * @param {number} eventId - 事件ID
+ * @returns {string} 事件详情页 URL
+ */
+const getEventDetailUrl = (eventId) => {
+  // 使用 base64 编码 ID，格式：ev-{id} -> base64
+  const encodedId = btoa(`ev-${eventId}`);
+  return `/event-detail?id=${encodedId}`;
+};
+
 /**
  * 格式化涨跌幅
  */
@@ -99,48 +110,61 @@ const CompactStatCard = ({ label, value, icon, color = '#FFD700', subText, progr
 );
 
 /**
- * TOP事件列表项
+ * TOP事件列表项 - 支持点击跳转
  */
-const TopEventItem = ({ event, rank }) => (
-  <HStack
-    spacing={2}
-    py={1.5}
-    px={2}
-    bg="rgba(0,0,0,0.2)"
-    borderRadius="md"
-    _hover={{ bg: 'rgba(255,215,0,0.08)' }}
-    transition="all 0.15s"
-  >
-    <Badge
-      colorScheme={rank === 1 ? 'yellow' : rank === 2 ? 'gray' : 'orange'}
-      fontSize="2xs"
-      px={1.5}
-      borderRadius="full"
-      minW="18px"
-      textAlign="center"
+const TopEventItem = ({ event, rank }) => {
+  const handleClick = () => {
+    if (event.id) {
+      // 在新标签页打开事件详情
+      window.open(getEventDetailUrl(event.id), '_blank');
+    }
+  };
+
+  return (
+    <HStack
+      spacing={2}
+      py={1.5}
+      px={2}
+      bg="rgba(0,0,0,0.2)"
+      borderRadius="md"
+      _hover={{ bg: 'rgba(255,215,0,0.12)', cursor: 'pointer' }}
+      transition="all 0.15s"
+      onClick={handleClick}
+      role="button"
+      tabIndex={0}
+      onKeyPress={(e) => e.key === 'Enter' && handleClick()}
     >
-      {rank}
-    </Badge>
-    <Tooltip label={event.title} placement="top" hasArrow>
+      <Badge
+        colorScheme={rank === 1 ? 'yellow' : rank === 2 ? 'gray' : 'orange'}
+        fontSize="2xs"
+        px={1.5}
+        borderRadius="full"
+        minW="18px"
+        textAlign="center"
+      >
+        {rank}
+      </Badge>
+      <Tooltip label={event.title} placement="top" hasArrow>
+        <Text
+          fontSize="xs"
+          color="gray.300"
+          flex="1"
+          noOfLines={1}
+          _hover={{ color: '#FFD700' }}
+        >
+          {event.title}
+        </Text>
+      </Tooltip>
       <Text
         fontSize="xs"
-        color="gray.300"
-        flex="1"
-        noOfLines={1}
-        cursor="default"
+        fontWeight="bold"
+        color={getChgColor(event.maxChg)}
       >
-        {event.title}
+        {formatChg(event.maxChg)}
       </Text>
-    </Tooltip>
-    <Text
-      fontSize="xs"
-      fontWeight="bold"
-      color={getChgColor(event.maxChg)}
-    >
-      {formatChg(event.maxChg)}
-    </Text>
-  </HStack>
-);
+    </HStack>
+  );
+};
 
 const EventDailyStats = () => {
   const [loading, setLoading] = useState(true);
@@ -215,9 +239,7 @@ const EventDailyStats = () => {
     );
   }
 
-  const { summary, topPerformers = [], dailyStats = [] } = stats;
-  // 获取当日TOP事件
-  const todayTopEvents = dailyStats[0]?.topEvents || topPerformers.slice(0, 3);
+  const { summary, topPerformers = [] } = stats;
 
   return (
     <Box
@@ -329,19 +351,44 @@ const EventDailyStats = () => {
         {/* 分割线 */}
         <Box h="1px" bg="rgba(255,215,0,0.1)" />
 
-        {/* TOP表现事件 */}
-        <Box>
+        {/* TOP表现事件 - 显示 TOP10 */}
+        <Box flex="1" overflow="hidden">
           <HStack spacing={1.5} mb={2}>
             <TrophyOutlined style={{ color: '#FFD700', fontSize: '12px' }} />
             <Text fontSize="xs" fontWeight="bold" color="gray.400">
               今日 TOP 表现
             </Text>
+            <Text fontSize="2xs" color="gray.600">
+              (点击查看详情)
+            </Text>
           </HStack>
-          <VStack spacing={1.5} align="stretch">
-            {todayTopEvents.slice(0, 3).map((event, idx) => (
+          <VStack
+            spacing={1}
+            align="stretch"
+            maxH="220px"
+            overflowY="auto"
+            pr={1}
+            css={{
+              '&::-webkit-scrollbar': {
+                width: '4px',
+              },
+              '&::-webkit-scrollbar-track': {
+                background: 'rgba(255,255,255,0.05)',
+                borderRadius: '2px',
+              },
+              '&::-webkit-scrollbar-thumb': {
+                background: 'rgba(255,215,0,0.3)',
+                borderRadius: '2px',
+              },
+              '&::-webkit-scrollbar-thumb:hover': {
+                background: 'rgba(255,215,0,0.5)',
+              },
+            }}
+          >
+            {topPerformers.slice(0, 10).map((event, idx) => (
               <TopEventItem key={event.id || idx} event={event} rank={idx + 1} />
             ))}
-            {todayTopEvents.length === 0 && (
+            {topPerformers.length === 0 && (
               <Text fontSize="xs" color="gray.600" textAlign="center" py={2}>
                 暂无数据
               </Text>