From 02d53110055d2dad9b675089da7dfe1459a6e29a Mon Sep 17 00:00:00 2001
From: zzlgreat <zzlgreat@gmail.com>
Date: Mon, 1 Dec 2025 14:28:46 +0800
Subject: [PATCH] update pay function

---
 src/views/Community/components/HeroPanel.js | 273 ++++++++++----------
 1 file changed, 142 insertions(+), 131 deletions(-)

diff --git a/src/views/Community/components/HeroPanel.js b/src/views/Community/components/HeroPanel.js
index ce151016..98803ca1 100644
--- a/src/views/Community/components/HeroPanel.js
+++ b/src/views/Community/components/HeroPanel.js
@@ -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>
 
           {/* 右侧：交易状态 */}