community增加事件详情

src/views/Community/components/HeroPanel.js

@@ -2325,6 +2325,9 @@ const CombinedCalendar = () => {
   const [eventCounts, setEventCounts] = useState([]);
   const [selectedEvents, setSelectedEvents] = useState([]);
 
+  // 上证指数涨跌幅数据
+  const [indexChangeMap, setIndexChangeMap] = useState({});
+
   const [detailLoading, setDetailLoading] = useState(false);
   const [modalOpen, setModalOpen] = useState(false);
 
@@ -2361,6 +2364,35 @@ const CombinedCalendar = () => {
     loadEventCounts();
   }, [currentMonth]);
 
+  // 加载上证指数历史涨跌幅数据
+  useEffect(() => {
+    const loadIndexData = async () => {
+      try {
+        const response = await fetch(`${getApiBase()}/api/index/000001.SH/kline?type=daily`);
+        if (response.ok) {
+          const result = await response.json();
+          if (result.success && result.data) {
+            // 构建日期到涨跌幅的映射
+            const changeMap = {};
+            result.data.forEach(item => {
+              // date 格式是 YYYY-MM-DD，转为 YYYYMMDD
+              const yyyymmdd = item.date.replace(/-/g, '');
+              // 计算涨跌幅 = (close - prev_close) / prev_close * 100
+              if (item.close && item.prev_close) {
+                const change = ((item.close - item.prev_close) / item.prev_close) * 100;
+                changeMap[yyyymmdd] = change;
+              }
+            });
+            setIndexChangeMap(changeMap);
+          }
+        }
+      } catch (error) {
+        console.error('Failed to load index data:', error);
+      }
+    };
+    loadIndexData();
+  }, []);
+
   // 获取涨停板块详情（加载所有数据，不限于当月）
   useEffect(() => {
     const loadZtDetails = async () => {
@@ -2409,19 +2441,45 @@ const CombinedCalendar = () => {
   }, [ztDatesData]);
 
   // 构建 FullCalendarPro 所需的数据格式
+  // 需要合并涨停数据、未来事件数据和上证指数涨跌幅
   const calendarData = useMemo(() => {
-    return ztDatesData.map(d => {
+    // 创建日期到数据的映射
+    const dataMap = new Map();
+
+    // 先添加涨停数据
+    ztDatesData.forEach(d => {
       const detail = ztDailyDetails[d.date] || {};
-      const eventDateStr = `${d.date.slice(0,4)}-${d.date.slice(4,6)}-${d.date.slice(6,8)}`;
-      const eventCount = eventCounts.find(e => e.date === eventDateStr)?.count || 0;
-      return {
+      dataMap.set(d.date, {
         date: d.date,
         count: d.count,
         topSector: detail.top_sector || '',
-        eventCount,
-      };
+        eventCount: 0,
+        indexChange: indexChangeMap[d.date] ?? null,
+      });
     });
-  }, [ztDatesData, ztDailyDetails, eventCounts]);
+
+    // 再添加/合并未来事件数据
+    eventCounts.forEach(e => {
+      // e.date 格式是 YYYY-MM-DD，需要转为 YYYYMMDD
+      const yyyymmdd = e.date.replace(/-/g, '');
+      if (dataMap.has(yyyymmdd)) {
+        // 已有涨停数据，只更新事件数
+        const existing = dataMap.get(yyyymmdd);
+        existing.eventCount = e.count;
+      } else {
+        // 纯未来事件日期，没有涨停数据
+        dataMap.set(yyyymmdd, {
+          date: yyyymmdd,
+          count: 0,
+          topSector: '',
+          eventCount: e.count,
+          indexChange: indexChangeMap[yyyymmdd] ?? null,
+        });
+      }
+    });
+
+    return Array.from(dataMap.values());
+  }, [ztDatesData, ztDailyDetails, eventCounts, indexChangeMap]);
 
   // 处理日期点击 - 打开弹窗
   const handleDateClick = useCallback(async (date) => {
@@ -2521,8 +2579,24 @@ const CombinedCalendar = () => {
             <Text fontSize="xs" color={textColors.muted}>涨停&lt;60</Text>
           </HStack>
           <HStack spacing={2}>
-            <Box w="6px" h="6px" borderRadius="full" bg="#22C55E" />
-            <Text fontSize="xs" color={textColors.muted}>有未来事件</Text>
+            <Box
+              w="14px"
+              h="14px"
+              borderRadius="full"
+              bg="linear-gradient(135deg, #22C55E 0%, #16A34A 100%)"
+              display="flex"
+              alignItems="center"
+              justifyContent="center"
+            >
+              <Text fontSize="8px" fontWeight="bold" color="white">N</Text>
+            </Box>
+            <Text fontSize="xs" color={textColors.muted}>未来事件数</Text>
+          </HStack>
+          <HStack spacing={2}>
+            <Text fontSize="xs" fontWeight="600" color="#EF4444">+0.5%</Text>
+            <Text fontSize="xs" color={textColors.muted}>/</Text>
+            <Text fontSize="xs" fontWeight="600" color="#22C55E">-0.5%</Text>
+            <Text fontSize="xs" color={textColors.muted}>上证涨跌</Text>
           </HStack>
         </HStack>
       </Box>