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

151
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,53 +569,53 @@ 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}
w="420px"
p={5}
bg="rgba(10,10,20,0.98)"
borderRadius="xl"
border="1px solid rgba(255,215,0,0.3)" 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)" borderRadius="2xl"
opacity={isOpen ? 1 : 0} 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)"
visibility={isOpen ? 'visible' : 'hidden'} maxW="500px"
transform={isOpen ? 'translateY(0)' : 'translateY(-10px)'} mx={4}
transition="all 0.25s ease"
onMouseEnter={() => setIsOpen(true)}
onMouseLeave={() => setIsOpen(false)}
> >
{/* 小箭头 */} <ModalHeader
borderBottom="1px solid rgba(255,215,0,0.2)"
pb={4}
>
<HStack spacing={3}>
<Box <Box
position="absolute" p={2}
top="-6px" bg="rgba(255,215,0,0.15)"
left="20px" borderRadius="lg"
w="12px" border="1px solid rgba(255,215,0,0.3)"
h="12px" >
bg="rgba(10,10,20,0.98)" <Icon as={Info} color="gold" boxSize={5} />
borderTop="1px solid rgba(255,215,0,0.3)" </Box>
borderLeft="1px solid rgba(255,215,0,0.3)" <Text
transform="rotate(45deg)" fontSize="lg"
/> fontWeight="bold"
bgGradient="linear(to-r, #FFD700, #FFA500)"
<VStack align="stretch" spacing={4}> bgClip="text"
{/* 标题 */} >
<Text fontSize="sm" fontWeight="bold" color="gold" borderBottom="1px solid rgba(255,215,0,0.2)" pb={2}> 事件中心使用指南
📖 事件中心使用指南
</Text> </Text>
</HStack>
</ModalHeader>
<ModalCloseButton color="whiteAlpha.600" _hover={{ color: 'white' }} />
<ModalBody py={5} px={6}>
<VStack align="stretch" spacing={5}>
{/* 1. SABC重要度说明 */} {/* 1. SABC重要度说明 */}
<Box> <Box>
<HStack mb={2}> <HStack mb={2}>
<Text fontSize="xs" fontWeight="bold" color="whiteAlpha.900"> <Text fontSize="sm" fontWeight="bold" color="whiteAlpha.900">
1️⃣ 重要度等级 (SABC) 1️⃣ 重要度等级 (SABC)
</Text> </Text>
</HStack> </HStack>
<Box pl={3} borderLeft="2px solid rgba(255,215,0,0.3)" py={1}> <Box pl={4} borderLeft="3px solid rgba(255,215,0,0.4)" py={2}>
<Text fontSize="11px" color="whiteAlpha.800" lineHeight="1.6"> <Text fontSize="13px" color="whiteAlpha.800" lineHeight="1.7">
重要度由<Text as="span" color="cyan.300" fontWeight="bold"> AI大模型 </Text> 重要度由<Text as="span" color="cyan.300" fontWeight="bold"> AI大模型 </Text>
基于<Text as="span" color="gold" fontWeight="bold">事件本身的影响范围和重大程度</Text>来判定， 基于<Text as="span" color="gold" fontWeight="bold">事件本身的影响范围和重大程度</Text>来判定，
<Text as="span" color="orange.300" fontWeight="bold">并非收益率预测策略</Text>。 <Text as="span" color="orange.300" fontWeight="bold">并非收益率预测策略</Text>。
@@ -621,38 +627,38 @@ const InfoTooltip = () => {
{/* 2. 利好利空并存说明 */} {/* 2. 利好利空并存说明 */}
<Box> <Box>
<HStack mb={2}> <HStack mb={2}>
<Text fontSize="xs" fontWeight="bold" color="whiteAlpha.900"> <Text fontSize="sm" fontWeight="bold" color="whiteAlpha.900">
2️⃣ 事件筛选机制 2️⃣ 事件筛选机制
</Text> </Text>
</HStack> </HStack>
<Box pl={3} borderLeft="2px solid rgba(255,215,0,0.3)" py={1}> <Box pl={4} borderLeft="3px solid rgba(255,215,0,0.4)" py={2}>
<Text fontSize="11px" color="whiteAlpha.800" lineHeight="1.6"> <Text fontSize="13px" color="whiteAlpha.800" lineHeight="1.7">
事件列表中<Text as="span" color="#ef5350" fontWeight="bold">利好</Text>和 事件列表中<Text as="span" color="#ef5350" fontWeight="bold">利好</Text>和
<Text as="span" color="#26a69a" fontWeight="bold">利空</Text>并存，需自行判断。 <Text as="span" color="#26a69a" fontWeight="bold">利空</Text>并存，需自行判断。
建议在<Text as="span" color="purple.300" fontWeight="bold">「历史相关事件」</Text>中查看： 建议在<Text as="span" color="purple.300" fontWeight="bold">「历史相关事件」</Text>中查看：
</Text> </Text>
<VStack align="stretch" spacing={0.5} mt={1.5} pl={2}> <VStack align="stretch" spacing={1} mt={2} pl={3}>
<Text fontSize="10px" color="whiteAlpha.600">• 历史上类似事件的市场反应</Text> <Text fontSize="12px" color="whiteAlpha.600">• 历史上类似事件的市场反应</Text>
<Text fontSize="10px" color="whiteAlpha.600">• 事件的超预期程度</Text> <Text fontSize="12px" color="whiteAlpha.600">• 事件的超预期程度</Text>
<Text fontSize="10px" color="whiteAlpha.600">• 综合判断事件的投资价值</Text> <Text fontSize="12px" color="whiteAlpha.600">• 综合判断事件的投资价值</Text>
</VStack> </VStack>
</Box> </Box>
</Box> </Box>
{/* 3. 数据延迟提醒 */} {/* 3. 数据延迟提醒 */}
<Box <Box
p={3} p={4}
bg="rgba(255,100,0,0.1)" bg="rgba(255,100,0,0.1)"
border="1px solid rgba(255,100,0,0.25)" border="1px solid rgba(255,100,0,0.3)"
borderRadius="lg" borderRadius="xl"
> >
<HStack mb={2}> <HStack mb={2}>
<Icon as={Clock} color="orange.400" boxSize={4} /> <Icon as={Clock} color="orange.400" boxSize={5} />
<Text fontSize="xs" fontWeight="bold" color="orange.300"> <Text fontSize="sm" fontWeight="bold" color="orange.300">
3️⃣ 数据延迟提醒 3️⃣ 数据延迟提醒
</Text> </Text>
</HStack> </HStack>
<Text fontSize="11px" color="whiteAlpha.800" lineHeight="1.6"> <Text fontSize="13px" color="whiteAlpha.800" lineHeight="1.7">
由于模型需要通过算法检索和分析历史数据，事件结果和发生时间会有 由于模型需要通过算法检索和分析历史数据，事件结果和发生时间会有
<Text as="span" color="orange.300" fontWeight="bold"> 2-3分钟 </Text>左右的延迟。 <Text as="span" color="orange.300" fontWeight="bold"> 2-3分钟 </Text>左右的延迟。
<Text as="span" color="#ef5350" fontWeight="bold"> 切勿追高！</Text> <Text as="span" color="#ef5350" fontWeight="bold"> 切勿追高！</Text>
@@ -661,18 +667,18 @@ const InfoTooltip = () => {
{/* 4. 盘前新闻经验 */} {/* 4. 盘前新闻经验 */}
<Box <Box
p={3} p={4}
bg="rgba(59,130,246,0.1)" bg="rgba(59,130,246,0.1)"
border="1px solid rgba(59,130,246,0.25)" border="1px solid rgba(59,130,246,0.3)"
borderRadius="lg" borderRadius="xl"
> >
<HStack mb={2}> <HStack mb={2}>
<Icon as={AlertCircle} color="blue.400" boxSize={4} /> <Icon as={AlertCircle} color="blue.400" boxSize={5} />
<Text fontSize="xs" fontWeight="bold" color="blue.300"> <Text fontSize="sm" fontWeight="bold" color="blue.300">
4️⃣ 实用经验分享 4️⃣ 实用经验分享
</Text> </Text>
</HStack> </HStack>
<Text fontSize="11px" color="whiteAlpha.800" lineHeight="1.6"> <Text fontSize="13px" color="whiteAlpha.800" lineHeight="1.7">
一个比较有效的经验是在 一个比较有效的经验是在
<Text as="span" color="blue.300" fontWeight="bold"> 9:20左右 </Text> <Text as="span" color="blue.300" fontWeight="bold"> 9:20左右 </Text>
研究<Text as="span" color="gold" fontWeight="bold">上一交易日收盘后至盘前</Text>的新闻事件， 研究<Text as="span" color="gold" fontWeight="bold">上一交易日收盘后至盘前</Text>的新闻事件，
@@ -681,14 +687,19 @@ const InfoTooltip = () => {
</Box> </Box>
{/* 操作提示 */} {/* 操作提示 */}
<Box pt={1}> <Box
<Text fontSize="10px" color="whiteAlpha.400" textAlign="center"> pt={2}
💡 点击事件卡片查看详情 · K线图支持滚轮缩放 borderTop="1px solid rgba(255,255,255,0.1)"
>
<Text fontSize="11px" color="whiteAlpha.400" textAlign="center">
💡 点击事件卡片查看详情 · K线图支持滚轮缩放和拖动
</Text> </Text>
</Box> </Box>
</VStack> </VStack>
</Box> </ModalBody>
</Box> </ModalContent>
</Modal>
</>
); );
}; };
@@ -748,8 +759,8 @@ const HeroPanel = () => {
事件中心 事件中心
</Text> </Text>
</Heading> </Heading>
{/* 使用说明 - 悬浮提示 */} {/* 使用说明 - 弹窗 */}
<InfoTooltip /> <InfoModal />
</HStack> </HStack>
{/* 右侧：交易状态 */} {/* 右侧：交易状态 */}