update pay function

src/views/Community/components/InvestmentCalendar.js

@@ -11,7 +11,8 @@ import {
 import dayjs from 'dayjs';
 import ReactMarkdown from 'react-markdown';
 import { eventService, stockService } from '../../../services/eventService';
-import StockChartAntdModal from '../../../components/StockChart/StockChartAntdModal';
+import TimelineChartModal from '../../../components/StockChart/TimelineChartModal';
+import KLineChartModal from '../../../components/StockChart/KLineChartModal';
 import { useSubscription } from '../../../hooks/useSubscription';
 import SubscriptionUpgradeModal from '../../../components/SubscriptionUpgradeModal';
 import CitationMark from '../../../components/Citation/CitationMark';
@@ -41,8 +42,10 @@ const InvestmentCalendar = () => {
     const [stockModalVisible, setStockModalVisible] = useState(false);
     const [selectedStocks, setSelectedStocks] = useState([]);
     const [stockQuotes, setStockQuotes] = useState({});
+    const [timelineModalVisible, setTimelineModalVisible] = useState(false);
     const [klineModalVisible, setKlineModalVisible] = useState(false);
     const [selectedStock, setSelectedStock] = useState(null);
+    const [selectedEventTime, setSelectedEventTime] = useState(null); // 记录事件时间
     const [followingIds, setFollowingIds] = useState([]); // 正在处理关注的事件ID列表
     const [addingToWatchlist, setAddingToWatchlist] = useState({}); // 正在添加到自选的股票代码
     const [expandedReasons, setExpandedReasons] = useState({}); // 跟踪每个股票关联理由的展开状态
@@ -263,12 +266,40 @@ const InvestmentCalendar = () => {
         loadStockQuotes(sortedStocks, eventTime);
     };
 
-    // 显示K线图
-    const showKline = (stock) => {
+    // 添加交易所后缀
+    const addExchangeSuffix = (code) => {
+        const sixDigitCode = getSixDigitCode(code);
+        // 如果已有后缀，直接返回
+        if (code.includes('.')) return code;
+
+        // 根据股票代码规则添加后缀
+        if (sixDigitCode.startsWith('6')) {
+            return `${sixDigitCode}.SH`; // 上海
+        } else if (sixDigitCode.startsWith('0') || sixDigitCode.startsWith('3')) {
+            return `${sixDigitCode}.SZ`; // 深圳
+        } else if (sixDigitCode.startsWith('688')) {
+            return `${sixDigitCode}.SH`; // 科创板
+        }
+        return sixDigitCode;
+    };
+
+    // 显示分时图
+    const showTimeline = (stock, eventTime) => {
         setSelectedStock({
-            code: getSixDigitCode(stock[0]), // 确保使用六位代码
-            name: stock[1]
+            stock_code: addExchangeSuffix(stock[0]), // 添加交易所后缀
+            stock_name: stock[1]
         });
+        setSelectedEventTime(eventTime);
+        setTimelineModalVisible(true);
+    };
+
+    // 显示K线图
+    const showKline = (stock, eventTime) => {
+        setSelectedStock({
+            stock_code: addExchangeSuffix(stock[0]), // 添加交易所后缀
+            stock_name: stock[1]
+        });
+        setSelectedEventTime(eventTime);
         setKlineModalVisible(true);
     };
 
@@ -635,17 +666,26 @@ const InvestmentCalendar = () => {
         },
 
         {
-            title: 'K线图',
-            key: 'kline',
-            width: 80,
+            title: '图表',
+            key: 'charts',
+            width: 150,
             render: (_, record) => (
-                <Button
-                    type="primary"
-                    size="small"
-                    onClick={() => showKline(record)}
-                >
-                    查看
-                </Button>
+                <Space size="small">
+                    <Button
+                        type="default"
+                        size="small"
+                        onClick={() => showTimeline(record, selectedDate?.toISOString())}
+                    >
+                        分时图
+                    </Button>
+                    <Button
+                        type="primary"
+                        size="small"
+                        onClick={() => showKline(record, selectedDate?.toISOString())}
+                    >
+                        日K线
+                    </Button>
+                </Space>
             )
         },
         {
@@ -808,12 +848,31 @@ const InvestmentCalendar = () => {
                 )}
             </Modal>
 
-            {/* K线图模态框 */}
-            {klineModalVisible && selectedStock && (
-                <StockChartAntdModal
-                    open={klineModalVisible}
+            {/* 分时图弹窗 */}
+            {selectedStock && (
+                <TimelineChartModal
+                    isOpen={timelineModalVisible}
+                    onClose={() => {
+                        setTimelineModalVisible(false);
+                        setSelectedStock(null);
+                        setSelectedEventTime(null);
+                    }}
                     stock={selectedStock}
-                    onCancel={() => setKlineModalVisible(false)}
+                    eventTime={selectedEventTime}
+                />
+            )}
+
+            {/* K线图弹窗 */}
+            {selectedStock && (
+                <KLineChartModal
+                    isOpen={klineModalVisible}
+                    onClose={() => {
+                        setKlineModalVisible(false);
+                        setSelectedStock(null);
+                        setSelectedEventTime(null);
+                    }}
+                    stock={selectedStock}
+                    eventTime={selectedEventTime}
                 />
             )}