事件中心的涨停原因里面和事件相关

src/views/ValueForum/components/PredictionTopicCard.js

@@ -3,7 +3,7 @@
  * 展示预测市场的话题概览
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   Box,
   Text,
@@ -14,7 +14,6 @@ import {
   Flex,
   Avatar,
   Icon,
-  useColorModeValue,
 } from '@chakra-ui/react';
 import { motion } from 'framer-motion';
 import {
@@ -22,18 +21,23 @@ import {
   TrendingDown,
   Crown,
   Users,
-  Clock,
   Coins,
   Zap,
+  Lock,
+  CheckCircle2,
 } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 import { forumColors } from '@theme/forumTheme';
+import CountdownTimer, { useCountdown } from './CountdownTimer';
 
 const MotionBox = motion(Box);
 
 const PredictionTopicCard = ({ topic }) => {
   const navigate = useNavigate();
 
+  // 使用倒计时 Hook 获取实时状态
+  const timeLeft = useCountdown(topic.deadline);
+
   // 处理卡片点击
   const handleCardClick = () => {
     navigate(`/value-forum/prediction/${topic.id}`);
@@ -46,19 +50,14 @@ const PredictionTopicCard = ({ topic }) => {
     return num;
   };
 
-  // 格式化时间
-  const formatTime = (dateString) => {
-    const date = new Date(dateString);
-    const now = new Date();
-    const diff = date - now;
-
-    const days = Math.floor(diff / 86400000);
-    const hours = Math.floor(diff / 3600000);
-
-    if (days > 0) return `${days}天后`;
-    if (hours > 0) return `${hours}小时后`;
-    return '即将截止';
-  };
+  // 计算实际状态（基于截止时间自动判断）
+  const effectiveStatus = useMemo(() => {
+    // 如果已经是结算状态，保持不变
+    if (topic.status === 'settled') return 'settled';
+    // 如果已过截止时间，自动变为已截止
+    if (timeLeft.expired && topic.status === 'active') return 'trading_closed';
+    return topic.status;
+  }, [topic.status, timeLeft.expired]);
 
   // 获取选项数据
   const yesData = topic.positions?.yes || { total_shares: 0, current_price: 500, lord_id: null };
@@ -71,7 +70,7 @@ const PredictionTopicCard = ({ topic }) => {
   const yesPercent = totalShares > 0 ? (yesData.total_shares / totalShares) * 100 : 50;
   const noPercent = totalShares > 0 ? (noData.total_shares / totalShares) * 100 : 50;
 
-  // 状态颜色
+  // 状态颜色（使用 effectiveStatus）
   const statusColorMap = {
     active: forumColors.success[500],
     trading_closed: forumColors.warning[500],
@@ -80,10 +79,16 @@ const PredictionTopicCard = ({ topic }) => {
 
   const statusLabelMap = {
     active: '交易中',
-    trading_closed: '已截止',
+    trading_closed: '等待结算',
     settled: '已结算',
   };
 
+  const statusIconMap = {
+    active: Zap,
+    trading_closed: Lock,
+    settled: CheckCircle2,
+  };
+
   return (
     <MotionBox
       bg={forumColors.background.card}
@@ -110,14 +115,14 @@ const PredictionTopicCard = ({ topic }) => {
       >
         <Flex justify="space-between" align="center">
           <HStack spacing="2">
-            <Icon as={Zap} boxSize="16px" color={forumColors.primary[500]} />
-            <Text fontSize="xs" fontWeight="bold" color={forumColors.primary[500]}>
-              预测市场
+            <Icon as={statusIconMap[effectiveStatus]} boxSize="16px" color={statusColorMap[effectiveStatus]} />
+            <Text fontSize="xs" fontWeight="bold" color={statusColorMap[effectiveStatus]}>
+              {statusLabelMap[effectiveStatus]}
             </Text>
           </HStack>
 
           <Badge
-            bg={statusColorMap[topic.status]}
+            bg={statusColorMap[effectiveStatus]}
             color="white"
             px="3"
             py="1"
@@ -125,7 +130,7 @@ const PredictionTopicCard = ({ topic }) => {
             fontSize="xs"
             fontWeight="bold"
           >
-            {statusLabelMap[topic.status]}
+            {effectiveStatus === 'active' ? '可交易' : effectiveStatus === 'trading_closed' ? '待结算' : '已完成'}
           </Badge>
         </Flex>
       </Box>
@@ -270,7 +275,7 @@ const PredictionTopicCard = ({ topic }) => {
         </Box>
 
         {/* 奖池和数据 */}
-        <HStack spacing="4" fontSize="sm" color={forumColors.text.secondary}>
+        <HStack spacing="4" fontSize="sm" color={forumColors.text.secondary} flexWrap="wrap">
           <HStack spacing="1">
             <Icon as={Coins} boxSize="16px" color={forumColors.primary[500]} />
             <Text fontWeight="600" color={forumColors.primary[500]}>
@@ -281,13 +286,16 @@ const PredictionTopicCard = ({ topic }) => {
 
           <HStack spacing="1">
             <Icon as={Users} boxSize="16px" />
-            <Text>{topic.stats?.unique_traders?.size || 0}人</Text>
+            <Text>{topic.participants_count || topic.stats?.unique_traders?.size || 0}人</Text>
           </HStack>
 
-          <HStack spacing="1">
-            <Icon as={Clock} boxSize="16px" />
-            <Text>{formatTime(topic.deadline)}</Text>
-          </HStack>
+          {/* 使用新的倒计时组件 */}
+          <CountdownTimer
+            deadline={topic.deadline}
+            status={effectiveStatus}
+            size="sm"
+            showIcon={true}
+          />
         </HStack>
 
         {/* 底部：作者信息 */}