1242 lines
52 KiB
JavaScript
1242 lines
52 KiB
JavaScript
/**
|
||
* 预测市场玩法说明模态框
|
||
* 帮助用户理解游戏规则和操作流程
|
||
*/
|
||
|
||
import React, { useState } from 'react';
|
||
import {
|
||
Modal,
|
||
ModalOverlay,
|
||
ModalContent,
|
||
ModalHeader,
|
||
ModalBody,
|
||
ModalFooter,
|
||
ModalCloseButton,
|
||
Button,
|
||
VStack,
|
||
HStack,
|
||
Text,
|
||
Box,
|
||
Icon,
|
||
Badge,
|
||
Tabs,
|
||
TabList,
|
||
TabPanels,
|
||
Tab,
|
||
TabPanel,
|
||
Divider,
|
||
List,
|
||
ListItem,
|
||
ListIcon,
|
||
Accordion,
|
||
AccordionItem,
|
||
AccordionButton,
|
||
AccordionPanel,
|
||
AccordionIcon,
|
||
Image,
|
||
SimpleGrid,
|
||
Flex,
|
||
useColorModeValue,
|
||
} from '@chakra-ui/react';
|
||
import {
|
||
Zap,
|
||
TrendingUp,
|
||
TrendingDown,
|
||
Crown,
|
||
DollarSign,
|
||
Users,
|
||
Clock,
|
||
Trophy,
|
||
CheckCircle2,
|
||
AlertCircle,
|
||
ArrowRight,
|
||
Target,
|
||
Wallet,
|
||
RefreshCw,
|
||
Gift,
|
||
MessageCircle,
|
||
Lock,
|
||
Lightbulb,
|
||
Calendar,
|
||
} from 'lucide-react';
|
||
import { motion } from 'framer-motion';
|
||
import { forumColors } from '@theme/forumTheme';
|
||
|
||
const MotionBox = motion(Box);
|
||
|
||
const PredictionGuideModal = ({ isOpen, onClose }) => {
|
||
const [activeTab, setActiveTab] = useState(0);
|
||
|
||
// 特性列表
|
||
const features = [
|
||
{
|
||
icon: Zap,
|
||
title: '预测市场',
|
||
desc: '对未来事件进行预测，购买看涨/看跌席位',
|
||
color: 'yellow.400',
|
||
},
|
||
{
|
||
icon: DollarSign,
|
||
title: '虚拟积分',
|
||
desc: '使用论坛积分参与，初始10,000积分',
|
||
color: 'green.400',
|
||
},
|
||
{
|
||
icon: Crown,
|
||
title: '领主系统',
|
||
desc: '持有最多份额者成为领主，拥有特权',
|
||
color: 'orange.400',
|
||
},
|
||
{
|
||
icon: Trophy,
|
||
title: '赢取奖池',
|
||
desc: '预测正确者分享奖池，最高收益无上限',
|
||
color: 'purple.400',
|
||
},
|
||
];
|
||
|
||
// 操作步骤
|
||
const steps = [
|
||
{
|
||
step: 1,
|
||
title: '发起预测话题',
|
||
desc: '创建一个可预测的话题，设置截止时间',
|
||
icon: Zap,
|
||
details: [
|
||
'点击"发起预测"按钮',
|
||
'填写话题标题和描述',
|
||
'选择分类和截止时间',
|
||
'支付100积分创建费用（进入奖池）',
|
||
],
|
||
},
|
||
{
|
||
step: 2,
|
||
title: '购买席位表达观点',
|
||
desc: '选择看涨或看跌方向，购买席位',
|
||
icon: TrendingUp,
|
||
details: [
|
||
'浏览预测话题，选择感兴趣的',
|
||
'点击"购买席位"',
|
||
'选择方向：看涨(Yes) 或 看跌(No)',
|
||
'调整购买份额（1-10份）',
|
||
'支付积分（含2%交易税）',
|
||
],
|
||
},
|
||
{
|
||
step: 3,
|
||
title: '成为领主获得特权',
|
||
desc: '持有最多份额自动成为领主',
|
||
icon: Crown,
|
||
details: [
|
||
'持有某方向最多份额即成为领主',
|
||
'领主评论自动置顶（计划中）',
|
||
'专属👑领主徽章显示',
|
||
'领主身份随交易实时变更',
|
||
],
|
||
},
|
||
{
|
||
step: 4,
|
||
title: '等待结果揭晓',
|
||
desc: '话题到期后，作者提交结果',
|
||
icon: Clock,
|
||
details: [
|
||
'话题到达截止时间，停止交易',
|
||
'作者提交结果和证据',
|
||
'系统自动计算奖池分配',
|
||
'获胜方按份额比例分享奖池',
|
||
],
|
||
},
|
||
];
|
||
|
||
// 常见问题
|
||
const faqs = [
|
||
{
|
||
q: '💰 初始积分是多少？会破产吗？',
|
||
a: '每个用户初始获得10,000积分。系统有破产保护机制，最低保留100积分，不会完全归零。每日签到可获得100积分奖励。',
|
||
},
|
||
{
|
||
q: '📊 价格是如何变动的？',
|
||
a: '价格根据供需关系动态调整。购买某方向会导致该方向价格上涨，对方价格下跌。采用简化版AMM（自动做市商）算法。',
|
||
},
|
||
{
|
||
q: '👑 领主有什么特权？',
|
||
a: '领主是持有某方向最多份额的用户。特权包括：评论自动置顶（计划中）、专属徽章显示、更高的话语权。领主身份随交易实时变更。',
|
||
},
|
||
{
|
||
q: '🎯 如何计算收益？',
|
||
a: '获胜方按持有份额比例分享奖池。例如：奖池1000积分，你持有获胜方30%份额，则获得300积分 + 返还本金。',
|
||
},
|
||
{
|
||
q: '💸 交易税去哪了？',
|
||
a: '每笔交易收取2%交易税，全部进入话题奖池。这确保了即使无人参与对立面，奖池也有资金可分配。',
|
||
},
|
||
{
|
||
q: '🔄 可以卖出席位吗？',
|
||
a: '可以！在话题截止前，随时可以卖出席位。卖出价格同样根据市场供需动态计算，可能高于或低于买入价。',
|
||
},
|
||
{
|
||
q: '⚖️ 如何确保公平？',
|
||
a: '作者不能参与自己发起的话题。结果需要提交证据。未来将引入社区投票仲裁机制处理争议。',
|
||
},
|
||
{
|
||
q: '📈 单次最多能买多少？',
|
||
a: '单次购买上限1000积分，避免大户操纵市场。每个方向最多5个席位持有者，确保市场活跃度。',
|
||
},
|
||
];
|
||
|
||
// 示例场景
|
||
const exampleScenario = {
|
||
title: '📖 完整示例：贵州茅台预测',
|
||
steps: [
|
||
{
|
||
title: '1. 创建话题',
|
||
content: '小明创建话题："贵州茅台下周会涨吗？"，支付100积分。奖池：100积分。',
|
||
},
|
||
{
|
||
title: '2. 用户参与',
|
||
content: [
|
||
'小红购买3份"看涨"，花费1,530积分（含税）',
|
||
'小李购买2份"看跌"，花费1,020积分（含税）',
|
||
'交易税进入奖池：51积分',
|
||
'当前奖池：151积分',
|
||
],
|
||
},
|
||
{
|
||
title: '3. 价格变动',
|
||
content: '看涨份额增加 → 看涨价格上涨至680积分/份，看跌价格下跌至320积分/份',
|
||
},
|
||
{
|
||
title: '4. 领主诞生',
|
||
content: '小红持有看涨方最多份额，成为看涨方👑领主',
|
||
},
|
||
{
|
||
title: '5. 结果揭晓',
|
||
content: [
|
||
'一周后，茅台上涨5%，小明提交结果："看涨"获胜',
|
||
'小红获得：本金1500积分 + 奖池151积分 = 1651积分',
|
||
'小红净收益：1651 - 1530 = +121积分 (收益率7.9%)',
|
||
'小李损失本金1000积分',
|
||
],
|
||
},
|
||
],
|
||
};
|
||
|
||
return (
|
||
<Modal isOpen={isOpen} onClose={onClose} size="6xl" isCentered scrollBehavior="inside">
|
||
<ModalOverlay backdropFilter="blur(4px)" bg="blackAlpha.800" />
|
||
<ModalContent
|
||
bg={forumColors.background.card}
|
||
borderRadius="2xl"
|
||
border="2px solid"
|
||
borderColor={forumColors.border.gold}
|
||
maxH="90vh"
|
||
>
|
||
<ModalHeader
|
||
bg={forumColors.gradients.goldPrimary}
|
||
borderTopRadius="2xl"
|
||
py="6"
|
||
>
|
||
<HStack spacing="3">
|
||
<Icon as={Zap} boxSize="28px" color={forumColors.background.main} />
|
||
<VStack align="start" spacing="0">
|
||
<Text fontSize="2xl" fontWeight="bold" color={forumColors.background.main}>
|
||
预测市场玩法说明
|
||
</Text>
|
||
<Text fontSize="sm" color={forumColors.background.main} opacity={0.9}>
|
||
5分钟快速上手，开启预测之旅
|
||
</Text>
|
||
</VStack>
|
||
</HStack>
|
||
</ModalHeader>
|
||
<ModalCloseButton color={forumColors.background.main} top="6" right="6" />
|
||
|
||
<ModalBody py="6">
|
||
<Tabs
|
||
index={activeTab}
|
||
onChange={setActiveTab}
|
||
variant="soft-rounded"
|
||
colorScheme="yellow"
|
||
>
|
||
<TabList mb="6" flexWrap="wrap">
|
||
<Tab
|
||
_selected={{
|
||
bg: forumColors.gradients.goldPrimary,
|
||
color: forumColors.background.main,
|
||
}}
|
||
>
|
||
<Icon as={Target} boxSize="16px" mr="2" />
|
||
核心玩法
|
||
</Tab>
|
||
<Tab
|
||
_selected={{
|
||
bg: forumColors.gradients.goldPrimary,
|
||
color: forumColors.background.main,
|
||
}}
|
||
>
|
||
<Icon as={CheckCircle2} boxSize="16px" mr="2" />
|
||
操作步骤
|
||
</Tab>
|
||
<Tab
|
||
_selected={{
|
||
bg: forumColors.gradients.goldPrimary,
|
||
color: forumColors.background.main,
|
||
}}
|
||
>
|
||
<Icon as={AlertCircle} boxSize="16px" mr="2" />
|
||
常见问题
|
||
</Tab>
|
||
<Tab
|
||
_selected={{
|
||
bg: forumColors.gradients.goldPrimary,
|
||
color: forumColors.background.main,
|
||
}}
|
||
>
|
||
<Icon as={Trophy} boxSize="16px" mr="2" />
|
||
示例演示
|
||
</Tab>
|
||
<Tab
|
||
_selected={{
|
||
bg: forumColors.gradients.goldPrimary,
|
||
color: forumColors.background.main,
|
||
}}
|
||
>
|
||
<Icon as={MessageCircle} boxSize="16px" mr="2" />
|
||
观点IPO
|
||
</Tab>
|
||
<Tab
|
||
_selected={{
|
||
bg: forumColors.gradients.goldPrimary,
|
||
color: forumColors.background.main,
|
||
}}
|
||
>
|
||
<Icon as={Lock} boxSize="16px" mr="2" />
|
||
时间胶囊
|
||
</Tab>
|
||
</TabList>
|
||
|
||
<TabPanels>
|
||
{/* 核心玩法 */}
|
||
<TabPanel p="0">
|
||
<VStack spacing="6" align="stretch">
|
||
{/* 核心特性 */}
|
||
<SimpleGrid columns={{ base: 1, md: 2 }} spacing="4">
|
||
{features.map((feature, index) => (
|
||
<MotionBox
|
||
key={index}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: index * 0.1 }}
|
||
bg={forumColors.background.hover}
|
||
p="5"
|
||
borderRadius="xl"
|
||
border="1px solid"
|
||
borderColor={forumColors.border.default}
|
||
_hover={{
|
||
borderColor: forumColors.border.gold,
|
||
transform: 'translateY(-4px)',
|
||
boxShadow: forumColors.shadows.gold,
|
||
}}
|
||
>
|
||
<HStack spacing="4" align="start">
|
||
<Box
|
||
bg={forumColors.gradients.goldSubtle}
|
||
p="3"
|
||
borderRadius="lg"
|
||
>
|
||
<Icon as={feature.icon} boxSize="24px" color={feature.color} />
|
||
</Box>
|
||
<VStack align="start" spacing="1" flex="1">
|
||
<Text fontWeight="700" fontSize="lg" color={forumColors.text.primary}>
|
||
{feature.title}
|
||
</Text>
|
||
<Text fontSize="sm" color={forumColors.text.secondary}>
|
||
{feature.desc}
|
||
</Text>
|
||
</VStack>
|
||
</HStack>
|
||
</MotionBox>
|
||
))}
|
||
</SimpleGrid>
|
||
|
||
<Divider borderColor={forumColors.border.default} />
|
||
|
||
{/* 游戏规则 */}
|
||
<Box>
|
||
<Text fontSize="xl" fontWeight="700" color={forumColors.text.primary} mb="4">
|
||
📜 游戏规则
|
||
</Text>
|
||
<VStack spacing="3" align="stretch">
|
||
<Box
|
||
bg={forumColors.gradients.goldSubtle}
|
||
p="4"
|
||
borderRadius="lg"
|
||
border="1px solid"
|
||
borderColor={forumColors.border.gold}
|
||
>
|
||
<HStack spacing="2" mb="2">
|
||
<Icon as={Wallet} boxSize="18px" color={forumColors.primary[500]} />
|
||
<Text fontWeight="600" color={forumColors.text.primary}>
|
||
积分系统
|
||
</Text>
|
||
</HStack>
|
||
<List spacing="2" fontSize="sm" color={forumColors.text.secondary}>
|
||
<ListItem>
|
||
<ListIcon as={CheckCircle2} color="green.400" />
|
||
初始积分：10,000积分（免费领取）
|
||
</ListItem>
|
||
<ListItem>
|
||
<ListIcon as={CheckCircle2} color="green.400" />
|
||
最低保留：100积分（破产保护）
|
||
</ListItem>
|
||
<ListItem>
|
||
<ListIcon as={CheckCircle2} color="green.400" />
|
||
单次上限：1,000积分（防止操纵）
|
||
</ListItem>
|
||
<ListItem>
|
||
<ListIcon as={CheckCircle2} color="green.400" />
|
||
每日签到：+100积分（每天领取）
|
||
</ListItem>
|
||
</List>
|
||
</Box>
|
||
|
||
<Box
|
||
bg={forumColors.background.hover}
|
||
p="4"
|
||
borderRadius="lg"
|
||
border="1px solid"
|
||
borderColor={forumColors.border.default}
|
||
>
|
||
<HStack spacing="2" mb="2">
|
||
<Icon as={TrendingUp} boxSize="18px" color="green.400" />
|
||
<Text fontWeight="600" color={forumColors.text.primary}>
|
||
双向市场
|
||
</Text>
|
||
</HStack>
|
||
<List spacing="2" fontSize="sm" color={forumColors.text.secondary}>
|
||
<ListItem>
|
||
<ListIcon as={CheckCircle2} color="green.400" />
|
||
看涨 (Yes)：预测会上涨/发生
|
||
</ListItem>
|
||
<ListItem>
|
||
<ListIcon as={CheckCircle2} color="green.400" />
|
||
看跌 (No)：预测会下跌/不发生
|
||
</ListItem>
|
||
<ListItem>
|
||
<ListIcon as={CheckCircle2} color="green.400" />
|
||
价格动态变化，根据供需关系调整
|
||
</ListItem>
|
||
<ListItem>
|
||
<ListIcon as={CheckCircle2} color="green.400" />
|
||
可以随时买入和卖出（截止前）
|
||
</ListItem>
|
||
</List>
|
||
</Box>
|
||
|
||
<Box
|
||
bg={forumColors.background.hover}
|
||
p="4"
|
||
borderRadius="lg"
|
||
border="1px solid"
|
||
borderColor={forumColors.border.default}
|
||
>
|
||
<HStack spacing="2" mb="2">
|
||
<Icon as={Crown} boxSize="18px" color="yellow.400" />
|
||
<Text fontWeight="600" color={forumColors.text.primary}>
|
||
领主系统
|
||
</Text>
|
||
</HStack>
|
||
<List spacing="2" fontSize="sm" color={forumColors.text.secondary}>
|
||
<ListItem>
|
||
<ListIcon as={CheckCircle2} color="green.400" />
|
||
持有最多份额者自动成为领主
|
||
</ListItem>
|
||
<ListItem>
|
||
<ListIcon as={CheckCircle2} color="green.400" />
|
||
领主评论自动置顶（计划中）
|
||
</ListItem>
|
||
<ListItem>
|
||
<ListIcon as={CheckCircle2} color="green.400" />
|
||
专属👑徽章和金色边框
|
||
</ListItem>
|
||
<ListItem>
|
||
<ListIcon as={CheckCircle2} color="green.400" />
|
||
领主身份随交易实时变更
|
||
</ListItem>
|
||
</List>
|
||
</Box>
|
||
|
||
<Box
|
||
bg={forumColors.background.hover}
|
||
p="4"
|
||
borderRadius="lg"
|
||
border="1px solid"
|
||
borderColor={forumColors.border.default}
|
||
>
|
||
<HStack spacing="2" mb="2">
|
||
<Icon as={Trophy} boxSize="18px" color="purple.400" />
|
||
<Text fontWeight="600" color={forumColors.text.primary}>
|
||
奖池分配
|
||
</Text>
|
||
</HStack>
|
||
<List spacing="2" fontSize="sm" color={forumColors.text.secondary}>
|
||
<ListItem>
|
||
<ListIcon as={CheckCircle2} color="green.400" />
|
||
交易税：每笔交易2%进入奖池
|
||
</ListItem>
|
||
<ListItem>
|
||
<ListIcon as={CheckCircle2} color="green.400" />
|
||
获胜方按份额比例分享奖池
|
||
</ListItem>
|
||
<ListItem>
|
||
<ListIcon as={CheckCircle2} color="green.400" />
|
||
返还本金 + 奖池分成
|
||
</ListItem>
|
||
<ListItem>
|
||
<ListIcon as={CheckCircle2} color="green.400" />
|
||
失败方损失本金
|
||
</ListItem>
|
||
</List>
|
||
</Box>
|
||
</VStack>
|
||
</Box>
|
||
</VStack>
|
||
</TabPanel>
|
||
|
||
{/* 操作步骤 */}
|
||
<TabPanel p="0">
|
||
<VStack spacing="6" align="stretch">
|
||
{steps.map((step, index) => (
|
||
<MotionBox
|
||
key={index}
|
||
initial={{ opacity: 0, x: -20 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ delay: index * 0.1 }}
|
||
bg={forumColors.background.hover}
|
||
p="6"
|
||
borderRadius="xl"
|
||
border="2px solid"
|
||
borderColor={forumColors.border.default}
|
||
position="relative"
|
||
overflow="hidden"
|
||
_hover={{
|
||
borderColor: forumColors.border.gold,
|
||
boxShadow: forumColors.shadows.gold,
|
||
}}
|
||
>
|
||
{/* 步骤编号 */}
|
||
<Box
|
||
position="absolute"
|
||
top="-10px"
|
||
right="-10px"
|
||
fontSize="120px"
|
||
fontWeight="900"
|
||
color={forumColors.border.default}
|
||
opacity={0.1}
|
||
lineHeight="1"
|
||
>
|
||
{step.step}
|
||
</Box>
|
||
|
||
<HStack spacing="4" align="start" mb="4" position="relative" zIndex={1}>
|
||
<Box
|
||
bg={forumColors.gradients.goldPrimary}
|
||
p="3"
|
||
borderRadius="lg"
|
||
>
|
||
<Icon as={step.icon} boxSize="24px" color={forumColors.background.main} />
|
||
</Box>
|
||
|
||
<VStack align="start" spacing="1" flex="1">
|
||
<HStack>
|
||
<Badge
|
||
bg={forumColors.primary[500]}
|
||
color={forumColors.background.main}
|
||
px="3"
|
||
py="1"
|
||
borderRadius="full"
|
||
fontSize="xs"
|
||
>
|
||
步骤 {step.step}
|
||
</Badge>
|
||
</HStack>
|
||
<Text fontSize="xl" fontWeight="700" color={forumColors.text.primary}>
|
||
{step.title}
|
||
</Text>
|
||
<Text fontSize="sm" color={forumColors.text.secondary}>
|
||
{step.desc}
|
||
</Text>
|
||
</VStack>
|
||
</HStack>
|
||
|
||
<Divider borderColor={forumColors.border.default} mb="4" />
|
||
|
||
<List spacing="2" pl="4">
|
||
{step.details.map((detail, i) => (
|
||
<ListItem
|
||
key={i}
|
||
fontSize="sm"
|
||
color={forumColors.text.secondary}
|
||
>
|
||
<HStack spacing="2">
|
||
<Icon as={ArrowRight} boxSize="14px" color={forumColors.primary[500]} />
|
||
<Text>{detail}</Text>
|
||
</HStack>
|
||
</ListItem>
|
||
))}
|
||
</List>
|
||
</MotionBox>
|
||
))}
|
||
</VStack>
|
||
</TabPanel>
|
||
|
||
{/* 常见问题 */}
|
||
<TabPanel p="0">
|
||
<Accordion allowMultiple>
|
||
{faqs.map((faq, index) => (
|
||
<AccordionItem
|
||
key={index}
|
||
border="1px solid"
|
||
borderColor={forumColors.border.default}
|
||
borderRadius="lg"
|
||
mb="3"
|
||
bg={forumColors.background.hover}
|
||
>
|
||
<AccordionButton
|
||
py="4"
|
||
_hover={{ bg: forumColors.background.card }}
|
||
borderRadius="lg"
|
||
>
|
||
<Box flex="1" textAlign="left">
|
||
<Text fontWeight="600" color={forumColors.text.primary}>
|
||
{faq.q}
|
||
</Text>
|
||
</Box>
|
||
<AccordionIcon color={forumColors.primary[500]} />
|
||
</AccordionButton>
|
||
<AccordionPanel pb="4">
|
||
<Text fontSize="sm" color={forumColors.text.secondary} lineHeight="1.8">
|
||
{faq.a}
|
||
</Text>
|
||
</AccordionPanel>
|
||
</AccordionItem>
|
||
))}
|
||
</Accordion>
|
||
</TabPanel>
|
||
|
||
{/* 示例演示 */}
|
||
<TabPanel p="0">
|
||
<VStack spacing="6" align="stretch">
|
||
<Box
|
||
bg={forumColors.gradients.goldSubtle}
|
||
p="6"
|
||
borderRadius="xl"
|
||
border="2px solid"
|
||
borderColor={forumColors.border.gold}
|
||
>
|
||
<Text fontSize="2xl" fontWeight="700" color={forumColors.text.primary} mb="2">
|
||
{exampleScenario.title}
|
||
</Text>
|
||
<Text fontSize="sm" color={forumColors.text.secondary}>
|
||
通过完整案例理解预测市场的运作流程
|
||
</Text>
|
||
</Box>
|
||
|
||
{exampleScenario.steps.map((item, index) => (
|
||
<Box
|
||
key={index}
|
||
bg={forumColors.background.hover}
|
||
p="5"
|
||
borderRadius="lg"
|
||
border="1px solid"
|
||
borderColor={forumColors.border.default}
|
||
>
|
||
<Text fontWeight="700" color={forumColors.primary[500]} mb="3">
|
||
{item.title}
|
||
</Text>
|
||
{Array.isArray(item.content) ? (
|
||
<VStack spacing="2" align="stretch">
|
||
{item.content.map((line, i) => (
|
||
<HStack key={i} spacing="2">
|
||
<Icon as={ArrowRight} boxSize="14px" color={forumColors.primary[500]} />
|
||
<Text fontSize="sm" color={forumColors.text.secondary}>
|
||
{line}
|
||
</Text>
|
||
</HStack>
|
||
))}
|
||
</VStack>
|
||
) : (
|
||
<Text fontSize="sm" color={forumColors.text.secondary}>
|
||
{item.content}
|
||
</Text>
|
||
)}
|
||
</Box>
|
||
))}
|
||
|
||
{/* 关键提示 */}
|
||
<Box
|
||
bg="green.50"
|
||
border="2px solid"
|
||
borderColor="green.400"
|
||
p="5"
|
||
borderRadius="lg"
|
||
>
|
||
<HStack spacing="3" mb="3">
|
||
<Icon as={Gift} boxSize="24px" color="green.600" />
|
||
<Text fontWeight="700" color="green.700" fontSize="lg">
|
||
💡 关键提示
|
||
</Text>
|
||
</HStack>
|
||
<VStack spacing="2" align="stretch">
|
||
<Text fontSize="sm" color="green.700">
|
||
✅ 早期参与价格低，后期参与价格高
|
||
</Text>
|
||
<Text fontSize="sm" color="green.700">
|
||
✅ 可以通过"低买高卖"赚取差价（Flipper玩法）
|
||
</Text>
|
||
<Text fontSize="sm" color="green.700">
|
||
✅ 即使预测失败，也可能通过卖出获利
|
||
</Text>
|
||
<Text fontSize="sm" color="green.700">
|
||
✅ 成为领主可获得社区影响力
|
||
</Text>
|
||
</VStack>
|
||
</Box>
|
||
</VStack>
|
||
</TabPanel>
|
||
|
||
{/* 观点IPO */}
|
||
<TabPanel p="0">
|
||
<VStack spacing="6" align="stretch">
|
||
<Box
|
||
bg={forumColors.gradients.goldSubtle}
|
||
p="6"
|
||
borderRadius="xl"
|
||
border="2px solid"
|
||
borderColor={forumColors.border.gold}
|
||
>
|
||
<HStack spacing="3" mb="3">
|
||
<Icon as={MessageCircle} boxSize="32px" color={forumColors.primary[500]} />
|
||
<VStack align="start" spacing="0">
|
||
<Text fontSize="2xl" fontWeight="700" color={forumColors.text.primary}>
|
||
观点IPO - 评论即资产
|
||
</Text>
|
||
<Text fontSize="sm" color={forumColors.text.secondary}>
|
||
让有价值的观点直接变现，让小白通过投资"懂王"获利
|
||
</Text>
|
||
</VStack>
|
||
</HStack>
|
||
</Box>
|
||
|
||
{/* 核心玩法 */}
|
||
<Box
|
||
bg={forumColors.background.hover}
|
||
p="5"
|
||
borderRadius="lg"
|
||
border="1px solid"
|
||
borderColor={forumColors.border.default}
|
||
>
|
||
<HStack spacing="2" mb="4">
|
||
<Icon as={Lightbulb} boxSize="20px" color="yellow.400" />
|
||
<Text fontWeight="700" color={forumColors.text.primary} fontSize="lg">
|
||
💡 核心机制
|
||
</Text>
|
||
</HStack>
|
||
<VStack spacing="3" align="stretch">
|
||
<Box
|
||
bg={forumColors.gradients.goldSubtle}
|
||
p="4"
|
||
borderRadius="lg"
|
||
border="1px solid"
|
||
borderColor={forumColors.border.gold}
|
||
>
|
||
<Text fontWeight="600" color={forumColors.text.primary} mb="2">
|
||
1. 发表分析 → 他人投资
|
||
</Text>
|
||
<Text fontSize="sm" color={forumColors.text.secondary}>
|
||
在预测话题下发表长篇分析（如"为什么贵州茅台会涨"），其他用户如果认同你的观点，可以对你的评论进行投资（注资）。
|
||
</Text>
|
||
</Box>
|
||
|
||
<Box
|
||
bg={forumColors.background.hover}
|
||
p="4"
|
||
borderRadius="lg"
|
||
border="1px solid"
|
||
borderColor={forumColors.border.default}
|
||
>
|
||
<Text fontWeight="600" color={forumColors.text.primary} mb="2">
|
||
2. 预测正确 → 股东分红
|
||
</Text>
|
||
<Text fontSize="sm" color={forumColors.text.secondary}>
|
||
如果你的预测正确（由管理员验证），该评论获得的所有投资将按比例分给"股东"（投资者）。投资者获得1.5倍收益，评论作者获得20%奖励。
|
||
</Text>
|
||
</Box>
|
||
|
||
<Box
|
||
bg={forumColors.background.hover}
|
||
p="4"
|
||
borderRadius="lg"
|
||
border="1px solid"
|
||
borderColor={forumColors.border.default}
|
||
>
|
||
<Text fontWeight="600" color={forumColors.text.primary} mb="2">
|
||
3. 首发权拍卖 → 流量变现
|
||
</Text>
|
||
<Text fontSize="sm" color={forumColors.text.secondary}>
|
||
在重大事件（如美联储议息）前，可以竞拍"前三楼"评论位置。前排位置流量最大，大V可以通过竞价获得曝光，吸引追随者投资。
|
||
</Text>
|
||
</Box>
|
||
</VStack>
|
||
</Box>
|
||
|
||
{/* 投资定价 */}
|
||
<Box
|
||
bg={forumColors.background.hover}
|
||
p="5"
|
||
borderRadius="lg"
|
||
border="1px solid"
|
||
borderColor={forumColors.border.default}
|
||
>
|
||
<HStack spacing="2" mb="4">
|
||
<Icon as={DollarSign} boxSize="20px" color="green.400" />
|
||
<Text fontWeight="700" color={forumColors.text.primary} fontSize="lg">
|
||
💰 投资定价规则
|
||
</Text>
|
||
</HStack>
|
||
<List spacing="2" fontSize="sm" color={forumColors.text.secondary}>
|
||
<ListItem>
|
||
<ListIcon as={CheckCircle2} color="green.400" />
|
||
基础价格：100积分/份
|
||
</ListItem>
|
||
<ListItem>
|
||
<ListIcon as={CheckCircle2} color="green.400" />
|
||
动态涨价：每获得投资，价格按已有投资额的10%上涨
|
||
</ListItem>
|
||
<ListItem>
|
||
<ListIcon as={CheckCircle2} color="green.400" />
|
||
早期投资者成本低，后期投资者成本高
|
||
</ListItem>
|
||
<ListItem>
|
||
<ListIcon as={CheckCircle2} color="green.400" />
|
||
不能投资自己的评论
|
||
</ListItem>
|
||
</List>
|
||
</Box>
|
||
|
||
{/* 收益分配 */}
|
||
<Box
|
||
bg={forumColors.background.hover}
|
||
p="5"
|
||
borderRadius="lg"
|
||
border="1px solid"
|
||
borderColor={forumColors.border.default}
|
||
>
|
||
<HStack spacing="2" mb="4">
|
||
<Icon as={Trophy} boxSize="20px" color="purple.400" />
|
||
<Text fontWeight="700" color={forumColors.text.primary} fontSize="lg">
|
||
🎯 收益分配机制
|
||
</Text>
|
||
</HStack>
|
||
<VStack spacing="3" align="stretch">
|
||
<HStack spacing="2">
|
||
<Icon as={ArrowRight} boxSize="14px" color={forumColors.primary[500]} />
|
||
<Text fontSize="sm" color={forumColors.text.secondary}>
|
||
<Text as="span" fontWeight="600" color={forumColors.text.primary}>预测正确：</Text>
|
||
投资者获得总投资额的1.5倍收益，按份额比例分配
|
||
</Text>
|
||
</HStack>
|
||
<HStack spacing="2">
|
||
<Icon as={ArrowRight} boxSize="14px" color={forumColors.primary[500]} />
|
||
<Text fontSize="sm" color={forumColors.text.secondary}>
|
||
<Text as="span" fontWeight="600" color={forumColors.text.primary}>作者奖励：</Text>
|
||
评论作者获得总投资额的20%作为奖励
|
||
</Text>
|
||
</HStack>
|
||
<HStack spacing="2">
|
||
<Icon as={ArrowRight} boxSize="14px" color={forumColors.primary[500]} />
|
||
<Text fontSize="sm" color={forumColors.text.secondary}>
|
||
<Text as="span" fontWeight="600" color={forumColors.text.primary}>预测错误：</Text>
|
||
投资者损失全部投资，作者无奖励
|
||
</Text>
|
||
</HStack>
|
||
</VStack>
|
||
</Box>
|
||
|
||
{/* 首发权拍卖 */}
|
||
<Box
|
||
bg="orange.50"
|
||
border="2px solid"
|
||
borderColor="orange.400"
|
||
p="5"
|
||
borderRadius="lg"
|
||
>
|
||
<HStack spacing="3" mb="3">
|
||
<Icon as={Crown} boxSize="24px" color="orange.600" />
|
||
<Text fontWeight="700" color="orange.700" fontSize="lg">
|
||
👑 首发权拍卖
|
||
</Text>
|
||
</HStack>
|
||
<VStack spacing="2" align="stretch">
|
||
<Text fontSize="sm" color="orange.700">
|
||
<Text as="span" fontWeight="600">玩法：</Text>
|
||
重大事件发布前，竞拍评论区前三名位置
|
||
</Text>
|
||
<Text fontSize="sm" color="orange.700">
|
||
<Text as="span" fontWeight="600">价值：</Text>
|
||
前排评论获得最大曝光，吸引更多投资者
|
||
</Text>
|
||
<Text fontSize="sm" color="orange.700">
|
||
<Text as="span" fontWeight="600">规则：</Text>
|
||
最低出价500积分，出价最高者获得位置
|
||
</Text>
|
||
<Text fontSize="sm" color="orange.700">
|
||
<Text as="span" fontWeight="600">结算：</Text>
|
||
竞拍截止后，获胜者积分扣除，其他人退款
|
||
</Text>
|
||
</VStack>
|
||
</Box>
|
||
|
||
{/* 示例 */}
|
||
<Box
|
||
bg="blue.50"
|
||
border="2px solid"
|
||
borderColor="blue.400"
|
||
p="5"
|
||
borderRadius="lg"
|
||
>
|
||
<HStack spacing="3" mb="3">
|
||
<Icon as={Gift} boxSize="24px" color="blue.600" />
|
||
<Text fontWeight="700" color="blue.700" fontSize="lg">
|
||
📖 完整示例
|
||
</Text>
|
||
</HStack>
|
||
<VStack spacing="2" align="stretch">
|
||
<Text fontSize="sm" color="blue.700">
|
||
1. 大V"股神小王"在话题"贵州茅台会涨吗？"下发表3000字深度分析
|
||
</Text>
|
||
<Text fontSize="sm" color="blue.700">
|
||
2. 小明看好这个分析，投资500积分（5份）
|
||
</Text>
|
||
<Text fontSize="sm" color="blue.700">
|
||
3. 小红也跟投300积分（3份），此时价格已上涨到150积分/份
|
||
</Text>
|
||
<Text fontSize="sm" color="blue.700">
|
||
4. 最终茅台真的上涨，管理员验证"预测正确"
|
||
</Text>
|
||
<Text fontSize="sm" color="blue.700" fontWeight="600">
|
||
5. 收益分配：
|
||
</Text>
|
||
<Text fontSize="sm" color="blue.700" ml="4">
|
||
• 小明获得：(5/8) × 1200积分 = 750积分，净收益+250积分
|
||
</Text>
|
||
<Text fontSize="sm" color="blue.700" ml="4">
|
||
• 小红获得：(3/8) × 1200积分 = 450积分，净收益+150积分
|
||
</Text>
|
||
<Text fontSize="sm" color="blue.700" ml="4">
|
||
• 股神小王获得：800积分 × 20% = 160积分作者奖励
|
||
</Text>
|
||
</VStack>
|
||
</Box>
|
||
</VStack>
|
||
</TabPanel>
|
||
|
||
{/* 时间胶囊 */}
|
||
<TabPanel p="0">
|
||
<VStack spacing="6" align="stretch">
|
||
<Box
|
||
bg={forumColors.gradients.goldSubtle}
|
||
p="6"
|
||
borderRadius="xl"
|
||
border="2px solid"
|
||
borderColor={forumColors.border.gold}
|
||
>
|
||
<HStack spacing="3" mb="3">
|
||
<Icon as={Lock} boxSize="32px" color={forumColors.primary[500]} />
|
||
<VStack align="start" spacing="0">
|
||
<Text fontSize="2xl" fontWeight="700" color={forumColors.text.primary}>
|
||
时间胶囊 - 长线预测的博弈
|
||
</Text>
|
||
<Text fontSize="sm" color={forumColors.text.secondary}>
|
||
针对长期事件（如"人类何时登陆火星"），竞拍时间段，赌事件发生的年份
|
||
</Text>
|
||
</VStack>
|
||
</HStack>
|
||
</Box>
|
||
|
||
{/* 核心机制 */}
|
||
<Box
|
||
bg={forumColors.background.hover}
|
||
p="5"
|
||
borderRadius="lg"
|
||
border="1px solid"
|
||
borderColor={forumColors.border.default}
|
||
>
|
||
<HStack spacing="2" mb="4">
|
||
<Icon as={Lightbulb} boxSize="20px" color="yellow.400" />
|
||
<Text fontWeight="700" color={forumColors.text.primary} fontSize="lg">
|
||
💡 核心机制
|
||
</Text>
|
||
</HStack>
|
||
<VStack spacing="3" align="stretch">
|
||
<Box
|
||
bg={forumColors.gradients.goldSubtle}
|
||
p="4"
|
||
borderRadius="lg"
|
||
border="1px solid"
|
||
borderColor={forumColors.border.gold}
|
||
>
|
||
<Text fontWeight="600" color={forumColors.text.primary} mb="2">
|
||
1. 创建话题 + 加密预测
|
||
</Text>
|
||
<Text fontSize="sm" color={forumColors.text.secondary}>
|
||
发起一个长期预测话题（如"人类何时登陆火星：2025-2050年"），并提交加密的预测内容。需支付100积分创建费用，内容在解密前完全保密。
|
||
</Text>
|
||
</Box>
|
||
|
||
<Box
|
||
bg={forumColors.background.hover}
|
||
p="4"
|
||
borderRadius="lg"
|
||
border="1px solid"
|
||
borderColor={forumColors.border.default}
|
||
>
|
||
<Text fontWeight="600" color={forumColors.text.primary} mb="2">
|
||
2. 时间段切分 + 竞拍
|
||
</Text>
|
||
<Text fontSize="sm" color={forumColors.text.secondary}>
|
||
系统自动将时间范围切分为多个年份时间段（如2025年、2026年...2050年）。用户可以竞拍任意时间段，最高出价者成为该时间段的持有者。
|
||
</Text>
|
||
</Box>
|
||
|
||
<Box
|
||
bg={forumColors.background.hover}
|
||
p="4"
|
||
borderRadius="lg"
|
||
border="1px solid"
|
||
borderColor={forumColors.border.default}
|
||
>
|
||
<Text fontWeight="600" color={forumColors.text.primary} mb="2">
|
||
3. 价格动态变化
|
||
</Text>
|
||
<Text fontSize="sm" color={forumColors.text.secondary}>
|
||
随着时间推移，如果事件没有发生：临近过期的时间段价格会暴跌（如2025年快到了还没发生），而未来的时间段价格会通过竞拍飙升（概率提升）。
|
||
</Text>
|
||
</Box>
|
||
|
||
<Box
|
||
bg={forumColors.background.hover}
|
||
p="4"
|
||
borderRadius="lg"
|
||
border="1px solid"
|
||
borderColor={forumColors.border.default}
|
||
>
|
||
<Text fontWeight="600" color={forumColors.text.primary} mb="2">
|
||
4. 事件发生 + 结算
|
||
</Text>
|
||
<Text fontSize="sm" color={forumColors.text.secondary}>
|
||
当事件真的发生时（如2035年人类登陆火星），管理员解密并结算。持有"2035年"时间段的用户获得全部奖池，其他时间段持有者失去投资。
|
||
</Text>
|
||
</Box>
|
||
</VStack>
|
||
</Box>
|
||
|
||
{/* 加密机制 */}
|
||
<Box
|
||
bg={forumColors.background.hover}
|
||
p="5"
|
||
borderRadius="lg"
|
||
border="1px solid"
|
||
borderColor={forumColors.border.default}
|
||
>
|
||
<HStack spacing="2" mb="4">
|
||
<Icon as={Lock} boxSize="20px" color="purple.400" />
|
||
<Text fontWeight="700" color={forumColors.text.primary} fontSize="lg">
|
||
🔐 加密机制
|
||
</Text>
|
||
</HStack>
|
||
<VStack spacing="3" align="stretch">
|
||
<HStack spacing="2">
|
||
<Icon as={ArrowRight} boxSize="14px" color={forumColors.primary[500]} />
|
||
<Text fontSize="sm" color={forumColors.text.secondary}>
|
||
<Text as="span" fontWeight="600" color={forumColors.text.primary}>前端AES加密：</Text>
|
||
提交时在浏览器端加密预测内容
|
||
</Text>
|
||
</HStack>
|
||
<HStack spacing="2">
|
||
<Icon as={ArrowRight} boxSize="14px" color={forumColors.primary[500]} />
|
||
<Text fontSize="sm" color={forumColors.text.secondary}>
|
||
<Text as="span" fontWeight="600" color={forumColors.text.primary}>后端存储密钥：</Text>
|
||
加密密钥存储在数据库中，解密前不公开
|
||
</Text>
|
||
</HStack>
|
||
<HStack spacing="2">
|
||
<Icon as={ArrowRight} boxSize="14px" color={forumColors.primary[500]} />
|
||
<Text fontSize="sm" color={forumColors.text.secondary}>
|
||
<Text as="span" fontWeight="600" color={forumColors.text.primary}>防止马后炮：</Text>
|
||
证明"我早就说过"，无法事后修改预测
|
||
</Text>
|
||
</HStack>
|
||
<HStack spacing="2">
|
||
<Icon as={ArrowRight} boxSize="14px" color={forumColors.primary[500]} />
|
||
<Text fontSize="sm" color={forumColors.text.secondary}>
|
||
<Text as="span" fontWeight="600" color={forumColors.text.primary}>管理员解密：</Text>
|
||
事件发生后，管理员或作者解密查看内容
|
||
</Text>
|
||
</HStack>
|
||
</VStack>
|
||
</Box>
|
||
|
||
{/* 竞拍规则 */}
|
||
<Box
|
||
bg={forumColors.background.hover}
|
||
p="5"
|
||
borderRadius="lg"
|
||
border="1px solid"
|
||
borderColor={forumColors.border.default}
|
||
>
|
||
<HStack spacing="2" mb="4">
|
||
<Icon as={TrendingUp} boxSize="20px" color="green.400" />
|
||
<Text fontWeight="700" color={forumColors.text.primary} fontSize="lg">
|
||
💰 竞拍规则
|
||
</Text>
|
||
</HStack>
|
||
<List spacing="2" fontSize="sm" color={forumColors.text.secondary}>
|
||
<ListItem>
|
||
<ListIcon as={CheckCircle2} color="green.400" />
|
||
初始价格：每个时间段初始价格100积分
|
||
</ListItem>
|
||
<ListItem>
|
||
<ListIcon as={CheckCircle2} color="green.400" />
|
||
最低加价：每次出价至少比当前价格高50积分
|
||
</ListItem>
|
||
<ListItem>
|
||
<ListIcon as={CheckCircle2} color="green.400" />
|
||
自动退款：被超越的出价者自动退还积分
|
||
</ListItem>
|
||
<ListItem>
|
||
<ListIcon as={CheckCircle2} color="green.400" />
|
||
奖池累积：每次竞拍的价格增量进入话题奖池
|
||
</ListItem>
|
||
<ListItem>
|
||
<ListIcon as={CheckCircle2} color="green.400" />
|
||
创建费用：100积分进入奖池
|
||
</ListItem>
|
||
</List>
|
||
</Box>
|
||
|
||
{/* 示例 */}
|
||
<Box
|
||
bg="purple.50"
|
||
border="2px solid"
|
||
borderColor="purple.400"
|
||
p="5"
|
||
borderRadius="lg"
|
||
>
|
||
<HStack spacing="3" mb="3">
|
||
<Icon as={Calendar} boxSize="24px" color="purple.600" />
|
||
<Text fontWeight="700" color="purple.700" fontSize="lg">
|
||
📖 完整示例：人类登陆火星
|
||
</Text>
|
||
</HStack>
|
||
<VStack spacing="2" align="stretch">
|
||
<Text fontSize="sm" color="purple.700">
|
||
<Text as="span" fontWeight="600">2025年1月：</Text>
|
||
小明创建话题"人类何时登陆火星：2025-2050年"，支付100积分，提交加密预测
|
||
</Text>
|
||
<Text fontSize="sm" color="purple.700">
|
||
<Text as="span" fontWeight="600">初始状态：</Text>
|
||
系统创建26个时间段（2025-2050年），每个初始价格100积分
|
||
</Text>
|
||
<Text fontSize="sm" color="purple.700">
|
||
<Text as="span" fontWeight="600">2025年2月：</Text>
|
||
小红出价150积分竞拍"2030年"时间段，成为持有者
|
||
</Text>
|
||
<Text fontSize="sm" color="purple.700">
|
||
<Text as="span" fontWeight="600">2025年3月：</Text>
|
||
小李出价200积分超越小红，成为"2030年"新持有者（小红退还150积分）
|
||
</Text>
|
||
<Text fontSize="sm" color="purple.700">
|
||
<Text as="span" fontWeight="600">2026年：</Text>
|
||
"2025年"时间段过期无人竞拍（事件未发生），价值归零
|
||
</Text>
|
||
<Text fontSize="sm" color="purple.700">
|
||
<Text as="span" fontWeight="600">2030年：</Text>
|
||
SpaceX宣布人类成功登陆火星！
|
||
</Text>
|
||
<Text fontSize="sm" color="purple.700" fontWeight="600">
|
||
<Text as="span" fontWeight="600">结算：</Text>
|
||
</Text>
|
||
<Text fontSize="sm" color="purple.700" ml="4">
|
||
• 小李（持有"2030年"）获得全部奖池（假设1500积分）
|
||
</Text>
|
||
<Text fontSize="sm" color="purple.700" ml="4">
|
||
• 其他时间段持有者损失投资
|
||
</Text>
|
||
<Text fontSize="sm" color="purple.700" ml="4">
|
||
• 话题解密，小明的预测内容公开
|
||
</Text>
|
||
</VStack>
|
||
</Box>
|
||
|
||
{/* 策略提示 */}
|
||
<Box
|
||
bg="green.50"
|
||
border="2px solid"
|
||
borderColor="green.400"
|
||
p="5"
|
||
borderRadius="lg"
|
||
>
|
||
<HStack spacing="3" mb="3">
|
||
<Icon as={Target} boxSize="24px" color="green.600" />
|
||
<Text fontWeight="700" color="green.700" fontSize="lg">
|
||
🎯 策略提示
|
||
</Text>
|
||
</HStack>
|
||
<VStack spacing="2" align="stretch">
|
||
<Text fontSize="sm" color="green.700">
|
||
✅ 早期竞拍成本低，但等待时间长
|
||
</Text>
|
||
<Text fontSize="sm" color="green.700">
|
||
✅ 可以根据科技进展动态调整持有时间段
|
||
</Text>
|
||
<Text fontSize="sm" color="green.700">
|
||
✅ 适合极其长线的宏大叙事预测
|
||
</Text>
|
||
<Text fontSize="sm" color="green.700">
|
||
✅ 加密机制保证预测的真实性和不可篡改性
|
||
</Text>
|
||
</VStack>
|
||
</Box>
|
||
</VStack>
|
||
</TabPanel>
|
||
</TabPanels>
|
||
</Tabs>
|
||
</ModalBody>
|
||
|
||
<ModalFooter
|
||
borderTop="1px solid"
|
||
borderColor={forumColors.border.default}
|
||
py="4"
|
||
>
|
||
<HStack spacing="3" w="full" justify="space-between">
|
||
<Text fontSize="xs" color={forumColors.text.tertiary}>
|
||
💡 提示：每日签到可获得100积分
|
||
</Text>
|
||
<Button
|
||
bg={forumColors.gradients.goldPrimary}
|
||
color={forumColors.background.main}
|
||
fontWeight="bold"
|
||
onClick={onClose}
|
||
_hover={{ opacity: 0.9 }}
|
||
>
|
||
开始预测
|
||
</Button>
|
||
</HStack>
|
||
</ModalFooter>
|
||
</ModalContent>
|
||
</Modal>
|
||
);
|
||
};
|
||
|
||
export default PredictionGuideModal;
|