vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update pay function

Browse Source
This commit is contained in:
zzlgreat
2025-12-01 14:28:46 +08:00
parent 7fa3d26470
commit 02d5311005
1 changed files with 142 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

273
src/views/Community/components/HeroPanel.js
View File

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