update pay function

src/views/Dashboard/components/InvestmentCalendarChakra.js

@@ -56,6 +56,8 @@ import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
 import { logger } from '../../../utils/logger';
 import { getApiBase } from '../../../utils/apiConfig';
+import TimelineChartModal from '../../../components/StockChart/TimelineChartModal';
+import KLineChartModal from '../../../components/StockChart/KLineChartModal';
 import './InvestmentCalendar.css';
 
 dayjs.locale('zh-cn');
@@ -63,6 +65,8 @@ dayjs.locale('zh-cn');
 export default function InvestmentCalendarChakra() {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { isOpen: isAddOpen, onOpen: onAddOpen, onClose: onAddClose } = useDisclosure();
+  const { isOpen: isTimelineModalOpen, onOpen: onTimelineModalOpen, onClose: onTimelineModalClose } = useDisclosure();
+  const { isOpen: isKLineModalOpen, onOpen: onKLineModalOpen, onClose: onKLineModalClose } = useDisclosure();
   const toast = useToast();
 
   // 颜色主题
@@ -74,6 +78,7 @@ export default function InvestmentCalendarChakra() {
   const [events, setEvents] = useState([]);
   const [selectedDate, setSelectedDate] = useState(null);
   const [selectedDateEvents, setSelectedDateEvents] = useState([]);
+  const [selectedStock, setSelectedStock] = useState(null);
   const [loading, setLoading] = useState(false);
   const [newEvent, setNewEvent] = useState({
     title: '',
@@ -262,6 +267,35 @@ export default function InvestmentCalendarChakra() {
     }
   };
 
+  // 处理股票点击 - 打开图表弹窗
+  const handleStockClick = (stockCodeOrName, eventDate) => {
+    // 解析股票代码（可能是 "600000" 或 "600000 平安银行" 格式）
+    let stockCode = stockCodeOrName;
+    let stockName = '';
+
+    if (typeof stockCodeOrName === 'string') {
+      const parts = stockCodeOrName.trim().split(/\s+/);
+      stockCode = parts[0];
+      stockName = parts.slice(1).join(' ');
+    }
+
+    // 添加交易所后缀（如果没有）
+    if (!stockCode.includes('.')) {
+      if (stockCode.startsWith('6')) {
+        stockCode = `${stockCode}.SH`;
+      } else if (stockCode.startsWith('0') || stockCode.startsWith('3')) {
+        stockCode = `${stockCode}.SZ`;
+      } else if (stockCode.startsWith('688')) {
+        stockCode = `${stockCode}.SH`;
+      }
+    }
+
+    setSelectedStock({
+      stock_code: stockCode,
+      stock_name: stockName || stockCode,
+    });
+  };
+
   return (
     <Card bg={bgColor} shadow="md">
       <CardHeader pb={4}>
@@ -386,15 +420,47 @@ export default function InvestmentCalendarChakra() {
                       )}
 
                       {event.extendedProps?.stocks && event.extendedProps.stocks.length > 0 && (
-                        <HStack spacing={2} flexWrap="wrap">
+                        <VStack align="stretch" spacing={2}>
-                          <Text fontSize="sm" color={secondaryText}>相关股票:</Text>
+                          <HStack spacing={2} flexWrap="wrap">
-                          {event.extendedProps.stocks.map((stock, i) => (
+                            <Text fontSize="sm" color={secondaryText}>相关股票:</Text>
-                            <Tag key={i} size="sm" colorScheme="blue">
+                            {event.extendedProps.stocks.map((stock, i) => (
-                              <TagLeftIcon as={FiTrendingUp} />
+                              <Tag
-                              <TagLabel>{stock}</TagLabel>
+                                key={i}
-                            </Tag>
+                                size="sm"
-                          ))}
+                                colorScheme="blue"
-                        </HStack>
+                                cursor="pointer"
+                                onClick={() => handleStockClick(stock, event.start)}
+                                _hover={{ transform: 'scale(1.05)', shadow: 'md' }}
+                                transition="all 0.2s"
+                              >
+                                <TagLeftIcon as={FiTrendingUp} />
+                                <TagLabel>{stock}</TagLabel>
+                              </Tag>
+                            ))}
+                          </HStack>
+                          {selectedStock && (
+                            <HStack spacing={2}>
+                              <Button
+                                size="xs"
+                                colorScheme="blue"
+                                variant="outline"
+                                leftIcon={<FiClock />}
+                                onClick={onTimelineModalOpen}
+                              >
+                                分时图
+                              </Button>
+                              <Button
+                                size="xs"
+                                colorScheme="purple"
+                                variant="outline"
+                                leftIcon={<FiTrendingUp />}
+                                onClick={onKLineModalOpen}
+                              >
+                                日K线
+                              </Button>
+                            </HStack>
+                          )}
+                        </VStack>
                       )}
                     </Box>
                   ))}
@@ -489,6 +555,32 @@ export default function InvestmentCalendarChakra() {
           </ModalContent>
         </Modal>
       )}
+
+      {/* 分时图弹窗 */}
+      {selectedStock && (
+        <TimelineChartModal
+          isOpen={isTimelineModalOpen}
+          onClose={() => {
+            onTimelineModalClose();
+            setSelectedStock(null);
+          }}
+          stock={selectedStock}
+          eventTime={selectedDate?.toISOString()}
+        />
+      )}
+
+      {/* K线图弹窗 */}
+      {selectedStock && (
+        <KLineChartModal
+          isOpen={isKLineModalOpen}
+          onClose={() => {
+            onKLineModalClose();
+            setSelectedStock(null);
+          }}
+          stock={selectedStock}
+          eventTime={selectedDate?.toISOString()}
+        />
+      )}
     </Card>
   );
 }