update pay function
This commit is contained in:
@@ -12,9 +12,16 @@ import {
|
||||
Text,
|
||||
Heading,
|
||||
useColorModeValue,
|
||||
useDisclosure,
|
||||
Icon,
|
||||
Spinner,
|
||||
Center,
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
} from '@chakra-ui/react';
|
||||
import { AlertCircle, Clock, TrendingUp, Info } from 'lucide-react';
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
@@ -532,14 +539,14 @@ const FlowingConcepts = () => {
|
||||
};
|
||||
|
||||
/**
|
||||
* 详细使用说明提示框
|
||||
* 使用说明弹窗组件
|
||||
*/
|
||||
const InfoTooltip = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const InfoModal = () => {
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
|
||||
return (
|
||||
<Box position="relative" display="inline-block">
|
||||
{/* 触发器：小标签 */}
|
||||
<>
|
||||
{/* 触发按钮 */}
|
||||
<HStack
|
||||
spacing={1.5}
|
||||
px={2.5}
|
||||
@@ -552,10 +559,9 @@ const InfoTooltip = () => {
|
||||
_hover={{
|
||||
bg: 'rgba(255,215,0,0.15)',
|
||||
borderColor: 'rgba(255,215,0,0.4)',
|
||||
transform: 'scale(1.02)',
|
||||
}}
|
||||
onMouseEnter={() => setIsOpen(true)}
|
||||
onMouseLeave={() => setIsOpen(false)}
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
onClick={onOpen}
|
||||
>
|
||||
<Icon as={Info} color="gold" boxSize={3} />
|
||||
<Text fontSize="xs" color="gold" fontWeight="medium">
|
||||
@@ -563,132 +569,137 @@ const InfoTooltip = () => {
|
||||
</Text>
|
||||
</HStack>
|
||||
|
||||
{/* 悬浮提示框 */}
|
||||
<Box
|
||||
position="absolute"
|
||||
top="calc(100% + 8px)"
|
||||
left="0"
|
||||
zIndex={1000}
|
||||
w="420px"
|
||||
p={5}
|
||||
bg="rgba(10,10,20,0.98)"
|
||||
borderRadius="xl"
|
||||
border="1px solid rgba(255,215,0,0.3)"
|
||||
boxShadow="0 15px 50px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,215,0,0.1), inset 0 1px 0 rgba(255,255,255,0.05)"
|
||||
opacity={isOpen ? 1 : 0}
|
||||
visibility={isOpen ? 'visible' : 'hidden'}
|
||||
transform={isOpen ? 'translateY(0)' : 'translateY(-10px)'}
|
||||
transition="all 0.25s ease"
|
||||
onMouseEnter={() => setIsOpen(true)}
|
||||
onMouseLeave={() => setIsOpen(false)}
|
||||
>
|
||||
{/* 小箭头 */}
|
||||
<Box
|
||||
position="absolute"
|
||||
top="-6px"
|
||||
left="20px"
|
||||
w="12px"
|
||||
h="12px"
|
||||
bg="rgba(10,10,20,0.98)"
|
||||
borderTop="1px solid rgba(255,215,0,0.3)"
|
||||
borderLeft="1px solid rgba(255,215,0,0.3)"
|
||||
transform="rotate(45deg)"
|
||||
/>
|
||||
|
||||
<VStack align="stretch" spacing={4}>
|
||||
{/* 标题 */}
|
||||
<Text fontSize="sm" fontWeight="bold" color="gold" borderBottom="1px solid rgba(255,215,0,0.2)" pb={2}>
|
||||
📖 事件中心使用指南
|
||||
</Text>
|
||||
|
||||
{/* 1. SABC重要度说明 */}
|
||||
<Box>
|
||||
<HStack mb={2}>
|
||||
<Text fontSize="xs" fontWeight="bold" color="whiteAlpha.900">
|
||||
1️⃣ 重要度等级 (SABC)
|
||||
</Text>
|
||||
</HStack>
|
||||
<Box pl={3} borderLeft="2px solid rgba(255,215,0,0.3)" py={1}>
|
||||
<Text fontSize="11px" color="whiteAlpha.800" lineHeight="1.6">
|
||||
重要度由<Text as="span" color="cyan.300" fontWeight="bold"> AI大模型 </Text>
|
||||
基于<Text as="span" color="gold" fontWeight="bold">事件本身的影响范围和重大程度</Text>来判定，
|
||||
<Text as="span" color="orange.300" fontWeight="bold">并非收益率预测策略</Text>。
|
||||
S级表示影响范围广、关注度高的重大事件，C级表示影响较小的普通事件。
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* 2. 利好利空并存说明 */}
|
||||
<Box>
|
||||
<HStack mb={2}>
|
||||
<Text fontSize="xs" fontWeight="bold" color="whiteAlpha.900">
|
||||
2️⃣ 事件筛选机制
|
||||
</Text>
|
||||
</HStack>
|
||||
<Box pl={3} borderLeft="2px solid rgba(255,215,0,0.3)" py={1}>
|
||||
<Text fontSize="11px" color="whiteAlpha.800" lineHeight="1.6">
|
||||
事件列表中<Text as="span" color="#ef5350" fontWeight="bold">利好</Text>和
|
||||
<Text as="span" color="#26a69a" fontWeight="bold">利空</Text>并存，需自行判断。
|
||||
建议在<Text as="span" color="purple.300" fontWeight="bold">「历史相关事件」</Text>中查看：
|
||||
</Text>
|
||||
<VStack align="stretch" spacing={0.5} mt={1.5} pl={2}>
|
||||
<Text fontSize="10px" color="whiteAlpha.600">• 历史上类似事件的市场反应</Text>
|
||||
<Text fontSize="10px" color="whiteAlpha.600">• 事件的超预期程度</Text>
|
||||
<Text fontSize="10px" color="whiteAlpha.600">• 综合判断事件的投资价值</Text>
|
||||
</VStack>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* 3. 数据延迟提醒 */}
|
||||
<Box
|
||||
p={3}
|
||||
bg="rgba(255,100,0,0.1)"
|
||||
border="1px solid rgba(255,100,0,0.25)"
|
||||
borderRadius="lg"
|
||||
{/* 弹窗 */}
|
||||
<Modal isOpen={isOpen} onClose={onClose} size="lg" isCentered motionPreset="slideInBottom">
|
||||
<ModalOverlay bg="blackAlpha.700" backdropFilter="blur(8px)" />
|
||||
<ModalContent
|
||||
bg="linear-gradient(135deg, rgba(15,15,30,0.98) 0%, rgba(25,25,50,0.98) 100%)"
|
||||
border="1px solid rgba(255,215,0,0.3)"
|
||||
borderRadius="2xl"
|
||||
boxShadow="0 25px 80px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,215,0,0.15), inset 0 1px 0 rgba(255,255,255,0.1)"
|
||||
maxW="500px"
|
||||
mx={4}
|
||||
>
|
||||
<ModalHeader
|
||||
borderBottom="1px solid rgba(255,215,0,0.2)"
|
||||
pb={4}
|
||||
>
|
||||
<HStack mb={2}>
|
||||
<Icon as={Clock} color="orange.400" boxSize={4} />
|
||||
<Text fontSize="xs" fontWeight="bold" color="orange.300">
|
||||
3️⃣ 数据延迟提醒
|
||||
<HStack spacing={3}>
|
||||
<Box
|
||||
p={2}
|
||||
bg="rgba(255,215,0,0.15)"
|
||||
borderRadius="lg"
|
||||
border="1px solid rgba(255,215,0,0.3)"
|
||||
>
|
||||
<Icon as={Info} color="gold" boxSize={5} />
|
||||
</Box>
|
||||
<Text
|
||||
fontSize="lg"
|
||||
fontWeight="bold"
|
||||
bgGradient="linear(to-r, #FFD700, #FFA500)"
|
||||
bgClip="text"
|
||||
>
|
||||
事件中心使用指南
|
||||
</Text>
|
||||
</HStack>
|
||||
<Text fontSize="11px" color="whiteAlpha.800" lineHeight="1.6">
|
||||
由于模型需要通过算法检索和分析历史数据，事件结果和发生时间会有
|
||||
<Text as="span" color="orange.300" fontWeight="bold"> 2-3分钟 </Text>左右的延迟。
|
||||
<Text as="span" color="#ef5350" fontWeight="bold">切勿追高！</Text>
|
||||
</Text>
|
||||
</Box>
|
||||
</ModalHeader>
|
||||
<ModalCloseButton color="whiteAlpha.600" _hover={{ color: 'white' }} />
|
||||
|
||||
{/* 4. 盘前新闻经验 */}
|
||||
<Box
|
||||
p={3}
|
||||
bg="rgba(59,130,246,0.1)"
|
||||
border="1px solid rgba(59,130,246,0.25)"
|
||||
borderRadius="lg"
|
||||
>
|
||||
<HStack mb={2}>
|
||||
<Icon as={AlertCircle} color="blue.400" boxSize={4} />
|
||||
<Text fontSize="xs" fontWeight="bold" color="blue.300">
|
||||
4️⃣ 实用经验分享
|
||||
</Text>
|
||||
</HStack>
|
||||
<Text fontSize="11px" color="whiteAlpha.800" lineHeight="1.6">
|
||||
一个比较有效的经验是在
|
||||
<Text as="span" color="blue.300" fontWeight="bold"> 9:20左右 </Text>
|
||||
研究<Text as="span" color="gold" fontWeight="bold">上一交易日收盘后至盘前</Text>的新闻事件，
|
||||
往往能发现一些<Text as="span" color="cyan.300" fontWeight="bold">当日主线题材</Text>。
|
||||
</Text>
|
||||
</Box>
|
||||
<ModalBody py={5} px={6}>
|
||||
<VStack align="stretch" spacing={5}>
|
||||
{/* 1. SABC重要度说明 */}
|
||||
<Box>
|
||||
<HStack mb={2}>
|
||||
<Text fontSize="sm" fontWeight="bold" color="whiteAlpha.900">
|
||||
1️⃣ 重要度等级 (SABC)
|
||||
</Text>
|
||||
</HStack>
|
||||
<Box pl={4} borderLeft="3px solid rgba(255,215,0,0.4)" py={2}>
|
||||
<Text fontSize="13px" color="whiteAlpha.800" lineHeight="1.7">
|
||||
重要度由<Text as="span" color="cyan.300" fontWeight="bold"> AI大模型 </Text>
|
||||
基于<Text as="span" color="gold" fontWeight="bold">事件本身的影响范围和重大程度</Text>来判定，
|
||||
<Text as="span" color="orange.300" fontWeight="bold">并非收益率预测策略</Text>。
|
||||
S级表示影响范围广、关注度高的重大事件，C级表示影响较小的普通事件。
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* 操作提示 */}
|
||||
<Box pt={1}>
|
||||
<Text fontSize="10px" color="whiteAlpha.400" textAlign="center">
|
||||
💡 点击事件卡片查看详情 · K线图支持滚轮缩放
|
||||
</Text>
|
||||
</Box>
|
||||
</VStack>
|
||||
</Box>
|
||||
</Box>
|
||||
{/* 2. 利好利空并存说明 */}
|
||||
<Box>
|
||||
<HStack mb={2}>
|
||||
<Text fontSize="sm" fontWeight="bold" color="whiteAlpha.900">
|
||||
2️⃣ 事件筛选机制
|
||||
</Text>
|
||||
</HStack>
|
||||
<Box pl={4} borderLeft="3px solid rgba(255,215,0,0.4)" py={2}>
|
||||
<Text fontSize="13px" color="whiteAlpha.800" lineHeight="1.7">
|
||||
事件列表中<Text as="span" color="#ef5350" fontWeight="bold">利好</Text>和
|
||||
<Text as="span" color="#26a69a" fontWeight="bold">利空</Text>并存，需自行判断。
|
||||
建议在<Text as="span" color="purple.300" fontWeight="bold">「历史相关事件」</Text>中查看：
|
||||
</Text>
|
||||
<VStack align="stretch" spacing={1} mt={2} pl={3}>
|
||||
<Text fontSize="12px" color="whiteAlpha.600">• 历史上类似事件的市场反应</Text>
|
||||
<Text fontSize="12px" color="whiteAlpha.600">• 事件的超预期程度</Text>
|
||||
<Text fontSize="12px" color="whiteAlpha.600">• 综合判断事件的投资价值</Text>
|
||||
</VStack>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* 3. 数据延迟提醒 */}
|
||||
<Box
|
||||
p={4}
|
||||
bg="rgba(255,100,0,0.1)"
|
||||
border="1px solid rgba(255,100,0,0.3)"
|
||||
borderRadius="xl"
|
||||
>
|
||||
<HStack mb={2}>
|
||||
<Icon as={Clock} color="orange.400" boxSize={5} />
|
||||
<Text fontSize="sm" fontWeight="bold" color="orange.300">
|
||||
3️⃣ 数据延迟提醒
|
||||
</Text>
|
||||
</HStack>
|
||||
<Text fontSize="13px" color="whiteAlpha.800" lineHeight="1.7">
|
||||
由于模型需要通过算法检索和分析历史数据，事件结果和发生时间会有
|
||||
<Text as="span" color="orange.300" fontWeight="bold"> 2-3分钟 </Text>左右的延迟。
|
||||
<Text as="span" color="#ef5350" fontWeight="bold"> 切勿追高！</Text>
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* 4. 盘前新闻经验 */}
|
||||
<Box
|
||||
p={4}
|
||||
bg="rgba(59,130,246,0.1)"
|
||||
border="1px solid rgba(59,130,246,0.3)"
|
||||
borderRadius="xl"
|
||||
>
|
||||
<HStack mb={2}>
|
||||
<Icon as={AlertCircle} color="blue.400" boxSize={5} />
|
||||
<Text fontSize="sm" fontWeight="bold" color="blue.300">
|
||||
4️⃣ 实用经验分享
|
||||
</Text>
|
||||
</HStack>
|
||||
<Text fontSize="13px" color="whiteAlpha.800" lineHeight="1.7">
|
||||
一个比较有效的经验是在
|
||||
<Text as="span" color="blue.300" fontWeight="bold"> 9:20左右 </Text>
|
||||
研究<Text as="span" color="gold" fontWeight="bold">上一交易日收盘后至盘前</Text>的新闻事件，
|
||||
往往能发现一些<Text as="span" color="cyan.300" fontWeight="bold">当日主线题材</Text>。
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* 操作提示 */}
|
||||
<Box
|
||||
pt={2}
|
||||
borderTop="1px solid rgba(255,255,255,0.1)"
|
||||
>
|
||||
<Text fontSize="11px" color="whiteAlpha.400" textAlign="center">
|
||||
💡 点击事件卡片查看详情 · K线图支持滚轮缩放和拖动
|
||||
</Text>
|
||||
</Box>
|
||||
</VStack>
|
||||
</ModalBody>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -748,8 +759,8 @@ const HeroPanel = () => {
|
||||
事件中心
|
||||
</Text>
|
||||
</Heading>
|
||||
{/* 使用说明 - 悬浮提示 */}
|
||||
<InfoTooltip />
|
||||
{/* 使用说明 - 弹窗 */}
|
||||
<InfoModal />
|
||||
</HStack>
|
||||
|
||||
{/* 右侧：交易状态 */}
|
||||
|
||||
Reference in New Issue
Block a user