344 lines
9.9 KiB
JavaScript
344 lines
9.9 KiB
JavaScript
/**
|
||
* 预测话题卡片组件
|
||
* 展示预测市场的话题概览
|
||
*/
|
||
|
||
import React, { useMemo, useState, useEffect } from 'react';
|
||
import {
|
||
Box,
|
||
Text,
|
||
HStack,
|
||
VStack,
|
||
Badge,
|
||
Progress,
|
||
Flex,
|
||
Avatar,
|
||
Icon,
|
||
} from '@chakra-ui/react';
|
||
import { motion } from 'framer-motion';
|
||
import {
|
||
TrendingUp,
|
||
TrendingDown,
|
||
Crown,
|
||
Users,
|
||
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}`);
|
||
};
|
||
|
||
// 格式化数字
|
||
const formatNumber = (num) => {
|
||
if (num >= 10000) return `${(num / 10000).toFixed(1)}万`;
|
||
if (num >= 1000) return `${(num / 1000).toFixed(1)}K`;
|
||
return num;
|
||
};
|
||
|
||
// 计算实际状态（基于截止时间自动判断）
|
||
const [effectiveStatus, setEffectiveStatus] = useState(topic.status);
|
||
|
||
useEffect(() => {
|
||
// 如果已经是结算状态，保持不变
|
||
if (topic.status === 'settled') {
|
||
setEffectiveStatus('settled');
|
||
return;
|
||
}
|
||
// 如果已过截止时间，自动变为已截止
|
||
if (timeLeft.expired && topic.status === 'active') {
|
||
setEffectiveStatus('trading_closed');
|
||
return;
|
||
}
|
||
setEffectiveStatus(topic.status);
|
||
}, [topic.status, timeLeft.expired]);
|
||
|
||
// 获取选项数据
|
||
const yesData = topic.positions?.yes || { total_shares: 0, current_price: 500, lord_id: null };
|
||
const noData = topic.positions?.no || { total_shares: 0, current_price: 500, lord_id: null };
|
||
|
||
// 计算总份额
|
||
const totalShares = yesData.total_shares + noData.total_shares;
|
||
|
||
// 计算百分比
|
||
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],
|
||
settled: forumColors.text.secondary,
|
||
};
|
||
|
||
const statusLabelMap = {
|
||
active: '交易中',
|
||
trading_closed: '等待结算',
|
||
settled: '已结算',
|
||
};
|
||
|
||
const statusIconMap = {
|
||
active: Zap,
|
||
trading_closed: Lock,
|
||
settled: CheckCircle2,
|
||
};
|
||
|
||
return (
|
||
<MotionBox
|
||
bg={forumColors.background.card}
|
||
borderRadius="xl"
|
||
overflow="hidden"
|
||
border="2px solid"
|
||
borderColor={forumColors.border.default}
|
||
cursor="pointer"
|
||
onClick={handleCardClick}
|
||
whileHover={{ y: -8, scale: 1.02 }}
|
||
transition={{ duration: 0.3 }}
|
||
_hover={{
|
||
borderColor: forumColors.border.gold,
|
||
boxShadow: forumColors.shadows.gold,
|
||
}}
|
||
>
|
||
{/* 头部：状态标识 */}
|
||
<Box
|
||
bg={forumColors.gradients.goldSubtle}
|
||
px="4"
|
||
py="2"
|
||
borderBottom="1px solid"
|
||
borderColor={forumColors.border.default}
|
||
>
|
||
<Flex justify="space-between" align="center">
|
||
<HStack spacing="2">
|
||
<Icon as={statusIconMap[effectiveStatus]} boxSize="16px" color={statusColorMap[effectiveStatus]} />
|
||
<Text fontSize="xs" fontWeight="bold" color={statusColorMap[effectiveStatus]}>
|
||
{statusLabelMap[effectiveStatus]}
|
||
</Text>
|
||
</HStack>
|
||
|
||
<Badge
|
||
bg={statusColorMap[effectiveStatus]}
|
||
color="white"
|
||
px="3"
|
||
py="1"
|
||
borderRadius="full"
|
||
fontSize="xs"
|
||
fontWeight="bold"
|
||
>
|
||
{effectiveStatus === 'active' ? '可交易' : effectiveStatus === 'trading_closed' ? '待结算' : '已完成'}
|
||
</Badge>
|
||
</Flex>
|
||
</Box>
|
||
|
||
{/* 内容区域 */}
|
||
<VStack align="stretch" p="5" spacing="4">
|
||
{/* 话题标题 */}
|
||
<Text
|
||
fontSize="lg"
|
||
fontWeight="700"
|
||
color={forumColors.text.primary}
|
||
noOfLines={2}
|
||
lineHeight="1.4"
|
||
>
|
||
{topic.title}
|
||
</Text>
|
||
|
||
{/* 描述 */}
|
||
{topic.description && (
|
||
<Text
|
||
fontSize="sm"
|
||
color={forumColors.text.secondary}
|
||
noOfLines={2}
|
||
lineHeight="1.6"
|
||
>
|
||
{topic.description}
|
||
</Text>
|
||
)}
|
||
|
||
{/* 双向价格卡片 */}
|
||
<HStack spacing="3" w="full">
|
||
{/* Yes 方 */}
|
||
<Box
|
||
flex="1"
|
||
bg="linear-gradient(135deg, rgba(72, 187, 120, 0.1) 0%, rgba(72, 187, 120, 0.05) 100%)"
|
||
border="2px solid"
|
||
borderColor="green.400"
|
||
borderRadius="lg"
|
||
p="3"
|
||
position="relative"
|
||
overflow="hidden"
|
||
>
|
||
{/* 领主徽章 */}
|
||
{yesData.lord_id && (
|
||
<Icon
|
||
as={Crown}
|
||
position="absolute"
|
||
top="2"
|
||
right="2"
|
||
boxSize="16px"
|
||
color="yellow.400"
|
||
/>
|
||
)}
|
||
|
||
<VStack spacing="1" align="start">
|
||
<HStack spacing="1">
|
||
<Icon as={TrendingUp} boxSize="14px" color="green.500" />
|
||
<Text fontSize="xs" fontWeight="600" color="green.600">
|
||
看涨 / Yes
|
||
</Text>
|
||
</HStack>
|
||
|
||
<Text fontSize="2xl" fontWeight="bold" color="green.600">
|
||
{Math.round(yesData.current_price)}
|
||
<Text as="span" fontSize="xs" ml="1">
|
||
积分
|
||
</Text>
|
||
</Text>
|
||
|
||
<Text fontSize="xs" color={forumColors.text.secondary}>
|
||
{yesData.total_shares}份 · {yesPercent.toFixed(0)}%
|
||
</Text>
|
||
</VStack>
|
||
</Box>
|
||
|
||
{/* No 方 */}
|
||
<Box
|
||
flex="1"
|
||
bg="linear-gradient(135deg, rgba(245, 101, 101, 0.1) 0%, rgba(245, 101, 101, 0.05) 100%)"
|
||
border="2px solid"
|
||
borderColor="red.400"
|
||
borderRadius="lg"
|
||
p="3"
|
||
position="relative"
|
||
overflow="hidden"
|
||
>
|
||
{/* 领主徽章 */}
|
||
{noData.lord_id && (
|
||
<Icon
|
||
as={Crown}
|
||
position="absolute"
|
||
top="2"
|
||
right="2"
|
||
boxSize="16px"
|
||
color="yellow.400"
|
||
/>
|
||
)}
|
||
|
||
<VStack spacing="1" align="start">
|
||
<HStack spacing="1">
|
||
<Icon as={TrendingDown} boxSize="14px" color="red.500" />
|
||
<Text fontSize="xs" fontWeight="600" color="red.600">
|
||
看跌 / No
|
||
</Text>
|
||
</HStack>
|
||
|
||
<Text fontSize="2xl" fontWeight="bold" color="red.600">
|
||
{Math.round(noData.current_price)}
|
||
<Text as="span" fontSize="xs" ml="1">
|
||
积分
|
||
</Text>
|
||
</Text>
|
||
|
||
<Text fontSize="xs" color={forumColors.text.secondary}>
|
||
{noData.total_shares}份 · {noPercent.toFixed(0)}%
|
||
</Text>
|
||
</VStack>
|
||
</Box>
|
||
</HStack>
|
||
|
||
{/* 市场情绪进度条 */}
|
||
<Box>
|
||
<Flex justify="space-between" mb="1">
|
||
<Text fontSize="xs" color={forumColors.text.tertiary}>
|
||
市场情绪
|
||
</Text>
|
||
<Text fontSize="xs" color={forumColors.text.tertiary}>
|
||
{yesPercent.toFixed(0)}% vs {noPercent.toFixed(0)}%
|
||
</Text>
|
||
</Flex>
|
||
<Progress
|
||
value={yesPercent}
|
||
size="sm"
|
||
borderRadius="full"
|
||
bg="red.100"
|
||
sx={{
|
||
'& > div': {
|
||
bg: 'linear-gradient(90deg, #48BB78 0%, #38A169 100%)',
|
||
},
|
||
}}
|
||
/>
|
||
</Box>
|
||
|
||
{/* 奖池和数据 */}
|
||
<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]}>
|
||
{formatNumber(topic.total_pool)}
|
||
</Text>
|
||
<Text fontSize="xs">奖池</Text>
|
||
</HStack>
|
||
|
||
<HStack spacing="1">
|
||
<Icon as={Users} boxSize="16px" />
|
||
<Text>{topic.participants_count || topic.stats?.unique_traders?.size || 0}人</Text>
|
||
</HStack>
|
||
|
||
{/* 使用新的倒计时组件 */}
|
||
<CountdownTimer
|
||
deadline={topic.deadline}
|
||
status={effectiveStatus}
|
||
size="sm"
|
||
showIcon={true}
|
||
/>
|
||
</HStack>
|
||
|
||
{/* 底部：作者信息 */}
|
||
<Flex justify="space-between" align="center" pt="2" borderTop="1px solid" borderColor={forumColors.border.default}>
|
||
<HStack spacing="2">
|
||
<Avatar
|
||
size="xs"
|
||
name={topic.author_name}
|
||
src={topic.author_avatar}
|
||
bg={forumColors.gradients.goldPrimary}
|
||
color={forumColors.background.main}
|
||
/>
|
||
<Text fontSize="xs" color={forumColors.text.tertiary}>
|
||
{topic.author_name}
|
||
</Text>
|
||
</HStack>
|
||
|
||
{/* 分类标签 */}
|
||
{topic.category && (
|
||
<Badge
|
||
bg={forumColors.background.hover}
|
||
color={forumColors.text.primary}
|
||
px="2"
|
||
py="1"
|
||
borderRadius="md"
|
||
fontSize="xs"
|
||
>
|
||
{topic.category}
|
||
</Badge>
|
||
)}
|
||
</Flex>
|
||
</VStack>
|
||
</MotionBox>
|
||
);
|
||
};
|
||
|
||
export default PredictionTopicCard;
|