Initial commit

src/views/Community/components/StockDetailPanel.js

@@ -0,0 +1,997 @@
+// src/views/Community/components/StockDetailPanel.js
+import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
+import { Drawer, List, Card, Tag, Spin, Empty, Typography, Row, Col, Statistic, Tabs, Descriptions, Badge, message, Table, Modal, Button, Input, Alert } from 'antd';
+import { CloseOutlined, RiseOutlined, FallOutlined, CloseCircleOutlined, PushpinOutlined, ReloadOutlined, StarOutlined, StarFilled, LockOutlined, CrownOutlined } from '@ant-design/icons';
+import { eventService, stockService } from '../../../services/eventService';
+import ReactECharts from 'echarts-for-react';
+import * as echarts from 'echarts';
+import './StockDetailPanel.css';
+import { Tabs as AntdTabs } from 'antd';
+import ReactDOM from 'react-dom';
+import RelatedConcepts from '../../EventDetail/components/RelatedConcepts';
+import HistoricalEvents from '../../EventDetail/components/HistoricalEvents';
+import TransmissionChainAnalysis from '../../EventDetail/components/TransmissionChainAnalysis';
+import EventDiscussionModal from './EventDiscussionModal';
+import { useSubscription } from '../../../hooks/useSubscription';
+import SubscriptionUpgradeModal from '../../../components/SubscriptionUpgradeModal';
+import moment from 'moment';
+
+const { Title, Text } = Typography;
+const { TabPane } = Tabs;
+
+// ================= 全局缓存和请求管理 =================
+const klineDataCache = new Map(); // 缓存K线数据: key = `${code}|${date}` -> data
+const pendingRequests = new Map(); // 正在进行的请求: key = `${code}|${date}` -> Promise
+const lastRequestTime = new Map(); // 最后请求时间: key = `${code}|${date}` -> timestamp
+
+// 请求间隔限制（毫秒）
+const REQUEST_INTERVAL = 30000; // 30秒内不重复请求同一只股票的数据
+
+// 获取缓存key
+const getCacheKey = (stockCode, eventTime) => {
+    const date = eventTime ? moment(eventTime).format('YYYY-MM-DD') : moment().format('YYYY-MM-DD');
+    return `${stockCode}|${date}`;
+};
+
+// 检查是否需要刷新数据
+const shouldRefreshData = (cacheKey) => {
+    const lastTime = lastRequestTime.get(cacheKey);
+    if (!lastTime) return true;
+    
+    const now = Date.now();
+    const elapsed = now - lastTime;
+    
+    // 如果是今天的数据且交易时间内，允许更频繁的更新
+    const today = moment().format('YYYY-MM-DD');
+    const isToday = cacheKey.includes(today);
+    const currentHour = new Date().getHours();
+    const isTradingHours = currentHour >= 9 && currentHour < 16;
+    
+    if (isToday && isTradingHours) {
+        return elapsed > REQUEST_INTERVAL;
+    }
+    
+    // 历史数据不需要频繁更新
+    return elapsed > 3600000; // 1小时
+};
+
+// 获取K线数据（带缓存和防重复请求）
+const fetchKlineData = async (stockCode, eventTime) => {
+    const cacheKey = getCacheKey(stockCode, eventTime);
+    
+    // 1. 检查缓存
+    if (klineDataCache.has(cacheKey)) {
+        // 检查是否需要刷新
+        if (!shouldRefreshData(cacheKey)) {
+            console.log(`使用缓存数据: ${cacheKey}`);
+            return klineDataCache.get(cacheKey);
+        }
+    }
+    
+    // 2. 检查是否有正在进行的请求
+    if (pendingRequests.has(cacheKey)) {
+        console.log(`等待进行中的请求: ${cacheKey}`);
+        return pendingRequests.get(cacheKey);
+    }
+    
+    // 3. 发起新请求
+    console.log(`发起新请求: ${cacheKey}`);
+    const normalizedEventTime = eventTime ? moment(eventTime).format('YYYY-MM-DD HH:mm') : undefined;
+    const requestPromise = stockService
+        .getKlineData(stockCode, 'minute', normalizedEventTime)
+        .then((res) => {
+            const data = Array.isArray(res?.data) ? res.data : [];
+            // 更新缓存
+            klineDataCache.set(cacheKey, data);
+            lastRequestTime.set(cacheKey, Date.now());
+            // 清除pending状态
+            pendingRequests.delete(cacheKey);
+            console.log(`请求完成并缓存: ${cacheKey}`);
+            return data;
+        })
+        .catch((error) => {
+            console.error(`获取${stockCode}的K线数据失败:`, error);
+            // 清除pending状态
+            pendingRequests.delete(cacheKey);
+            // 如果有旧缓存，返回旧数据
+            if (klineDataCache.has(cacheKey)) {
+                return klineDataCache.get(cacheKey);
+            }
+            return [];
+        });
+    
+    // 保存pending请求
+    pendingRequests.set(cacheKey, requestPromise);
+    
+    return requestPromise;
+};
+
+// ================= 优化后的迷你分时图组件 =================
+const MiniTimelineChart = React.memo(function MiniTimelineChart({ stockCode, eventTime }) {
+    const [data, setData] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const mountedRef = useRef(true);
+    const loadedRef = useRef(false); // 标记是否已加载过数据
+    const dataFetchedRef = useRef(false); // 防止重复请求的标记
+    
+    // 稳定的事件时间，避免因为格式化导致的重复请求
+    const stableEventTime = useMemo(() => {
+        return eventTime ? moment(eventTime).format('YYYY-MM-DD HH:mm') : '';
+    }, [eventTime]);
+    
+    useEffect(() => {
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
+    
+    useEffect(() => {
+        if (!stockCode) {
+            setData([]);
+            loadedRef.current = false;
+            dataFetchedRef.current = false;
+            return;
+        }
+        
+        // 如果已经请求过数据，不再重复请求
+        if (dataFetchedRef.current) {
+            return;
+        }
+        
+        // 检查缓存
+        const cacheKey = getCacheKey(stockCode, stableEventTime);
+        const cachedData = klineDataCache.get(cacheKey);
+        
+        // 如果有缓存数据，直接使用
+        if (cachedData && cachedData.length > 0) {
+            setData(cachedData);
+            loadedRef.current = true;
+            dataFetchedRef.current = true;
+            return;
+        }
+        
+        // 标记正在请求
+        dataFetchedRef.current = true;
+        setLoading(true);
+        
+        // 使用全局的fetchKlineData函数
+        fetchKlineData(stockCode, stableEventTime)
+            .then((result) => {
+                if (mountedRef.current) {
+                    setData(result);
+                    setLoading(false);
+                    loadedRef.current = true;
+                }
+            })
+            .catch(() => {
+                if (mountedRef.current) {
+                    setData([]);
+                    setLoading(false);
+                    loadedRef.current = true;
+                }
+            });
+    }, [stockCode, stableEventTime]); // 注意这里使用 stableEventTime
+    
+    const chartOption = useMemo(() => {
+        const prices = data.map(item => item.close ?? item.price).filter(v => typeof v === 'number');
+        const times = data.map(item => item.time);
+        const hasData = prices.length > 0;
+
+        if (!hasData) {
+            return {
+                title: {
+                    text: loading ? '加载中...' : '无数据',
+                    left: 'center',
+                    top: 'middle',
+                    textStyle: { color: '#999', fontSize: 10 }
+                }
+            };
+        }
+
+        const minPrice = Math.min(...prices);
+        const maxPrice = Math.max(...prices);
+        const isUp = prices[prices.length - 1] >= prices[0];
+        const lineColor = isUp ? '#ef5350' : '#26a69a';
+
+        // 计算事件时间对应的分时索引
+        let eventMarkLineData = [];
+        if (stableEventTime && Array.isArray(times) && times.length > 0) {
+            try {
+                const eventMinute = moment(stableEventTime, 'YYYY-MM-DD HH:mm').format('HH:mm');
+                const parseMinuteTime = (timeStr) => {
+                    const [h, m] = String(timeStr).split(':').map(Number);
+                    return h * 60 + m;
+                };
+                const eventMin = parseMinuteTime(eventMinute);
+                let nearestIdx = 0;
+                for (let i = 1; i < times.length; i++) {
+                    if (Math.abs(parseMinuteTime(times[i]) - eventMin) < Math.abs(parseMinuteTime(times[nearestIdx]) - eventMin)) {
+                        nearestIdx = i;
+                    }
+                }
+                eventMarkLineData.push({
+                    xAxis: nearestIdx,
+                    lineStyle: { color: '#FFD700', type: 'solid', width: 1.5 },
+                    label: { show: false }
+                });
+            } catch (e) {
+                // 忽略事件时间解析异常
+            }
+        }
+
+        return {
+            grid: { left: 2, right: 2, top: 2, bottom: 2, containLabel: false },
+            xAxis: { type: 'category', data: times, show: false, boundaryGap: false },
+            yAxis: { type: 'value', show: false, min: minPrice * 0.995, max: maxPrice * 1.005, scale: true },
+            series: [{
+                data: prices,
+                type: 'line',
+                smooth: true,
+                symbol: 'none',
+                lineStyle: { color: lineColor, width: 2 },
+                areaStyle: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        { offset: 0, color: isUp ? 'rgba(239, 83, 80, 0.3)' : 'rgba(38, 166, 154, 0.3)' },
+                        { offset: 1, color: isUp ? 'rgba(239, 83, 80, 0.05)' : 'rgba(38, 166, 154, 0.05)' }
+                    ])
+                },
+                markLine: {
+                    silent: true,
+                    symbol: 'none',
+                    label: { show: false },
+                    data: [
+                        ...(prices.length ? [{ yAxis: prices[0], lineStyle: { color: '#aaa', type: 'dashed', width: 1 } }] : []),
+                        ...eventMarkLineData
+                    ]
+                }
+            }],
+            tooltip: { show: false },
+            animation: false
+        };
+    }, [data, loading, stableEventTime]);
+    
+    return (
+        <div style={{ width: 140, height: 40 }}>
+            <ReactECharts 
+                option={chartOption} 
+                style={{ width: '100%', height: '100%' }} 
+                notMerge={true} 
+                lazyUpdate={true} 
+            />
+        </div>
+    );
+}, (prevProps, nextProps) => {
+    // 自定义比较函数，只有当stockCode或eventTime变化时才重新渲染
+    return prevProps.stockCode === nextProps.stockCode && 
+           prevProps.eventTime === nextProps.eventTime;
+});
+
+import StockChartAntdModal from '../../../components/StockChart/StockChartAntdModal';
+
+// 使用统一的股票详情组件
+const StockDetailModal = ({ stock, onClose, fixed, eventTime }) => {
+    return (
+        <StockChartAntdModal
+            open={true}
+            onCancel={onClose}
+            stock={stock}
+            eventTime={eventTime}
+            fixed={fixed}
+            width={800}
+        />
+    );
+};
+
+function StockDetailPanel({ visible, event, onClose }) {
+    console.log('StockDetailPanel 组件已加载，visible:', visible, 'event:', event?.id);
+
+    // 权限控制
+    const { hasFeatureAccess, getRequiredLevel, getUpgradeRecommendation } = useSubscription();
+    const [upgradeModalOpen, setUpgradeModalOpen] = useState(false);
+    const [upgradeFeature, setUpgradeFeature] = useState('');
+
+    // 1. hooks
+    const [activeTab, setActiveTab] = useState('stocks');
+    const [loading, setLoading] = useState(false);
+    const [detailLoading, setDetailLoading] = useState(false);
+    const [relatedStocks, setRelatedStocks] = useState([]);
+    const [stockQuotes, setStockQuotes] = useState({});
+    const [selectedStock, setSelectedStock] = useState(null);
+    const [chartData, setChartData] = useState(null);
+    const [eventDetail, setEventDetail] = useState(null);
+    const [historicalEvents, setHistoricalEvents] = useState([]);
+    const [chainAnalysis, setChainAnalysis] = useState(null);
+    const [posts, setPosts] = useState([]);
+    // 移除悬浮相关的state
+    // const [hoveredStock, setHoveredStock] = useState(null);
+    const [fixedCharts, setFixedCharts] = useState([]); // [{stock, chartType}]
+    // const [hoveredRowIndex, setHoveredRowIndex] = useState(null);
+    // const [tableRect, setTableRect] = useState(null);
+    const tableRef = React.useRef();
+    
+    // 讨论模态框相关状态
+    const [discussionModalVisible, setDiscussionModalVisible] = useState(false);
+    const [discussionType, setDiscussionType] = useState('事件讨论');
+    // 移除滚动相关的ref
+    // const isScrollingRef = React.useRef(false);
+    // const scrollStopTimerRef = React.useRef(null);
+    // const hoverTimerRef = React.useRef(null);
+    // const [hoverTab, setHoverTab] = useState('stock');
+    const [searchText, setSearchText] = useState(''); // 搜索文本
+    const [isMonitoring, setIsMonitoring] = useState(false); // 实时监控状态
+    const [filteredStocks, setFilteredStocks] = useState([]); // 过滤后的股票列表
+    const [expectationScore, setExpectationScore] = useState(null); // 超预期得分
+    const monitoringIntervalRef = useRef(null); // 监控定时器引用
+    const [watchlistStocks, setWatchlistStocks] = useState(new Set()); // 自选股列表
+
+    // 清理函数
+    useEffect(() => {
+        return () => {
+            // 组件卸载时清理定时器
+            if (monitoringIntervalRef.current) {
+                clearInterval(monitoringIntervalRef.current);
+            }
+        };
+    }, []);
+
+    // 过滤股票列表
+    useEffect(() => {
+        if (!searchText.trim()) {
+            setFilteredStocks(relatedStocks);
+        } else {
+            const filtered = relatedStocks.filter(stock =>
+                stock.stock_code.toLowerCase().includes(searchText.toLowerCase()) ||
+                stock.stock_name.toLowerCase().includes(searchText.toLowerCase())
+            );
+            setFilteredStocks(filtered);
+        }
+    }, [searchText, relatedStocks]);
+
+    // 实时监控定时器 - 优化版本
+    useEffect(() => {
+        // 清理旧的定时器
+        if (monitoringIntervalRef.current) {
+            clearInterval(monitoringIntervalRef.current);
+            monitoringIntervalRef.current = null;
+        }
+        
+        if (isMonitoring && relatedStocks.length > 0) {
+            // 立即执行一次
+            const updateQuotes = () => {
+                const codes = relatedStocks.map(s => s.stock_code);
+                stockService.getQuotes(codes, event?.created_at)
+                    .then(quotes => setStockQuotes(quotes))
+                    .catch(error => console.error('更新行情失败:', error));
+            };
+            
+            updateQuotes();
+            
+            // 设置定时器
+            monitoringIntervalRef.current = setInterval(updateQuotes, 5000);
+        }
+        
+        return () => {
+            if (monitoringIntervalRef.current) {
+                clearInterval(monitoringIntervalRef.current);
+                monitoringIntervalRef.current = null;
+            }
+        };
+    }, [isMonitoring, relatedStocks, event]);
+
+    // 加载用户自选股列表
+    const loadWatchlist = useCallback(async () => {
+        try {
+            const isProduction = process.env.NODE_ENV === 'production';
+            const apiBase = isProduction ? '' : process.env.REACT_APP_API_URL || '';
+            const response = await fetch(`${apiBase}/api/account/watchlist`, {
+                credentials: 'include'  // 确保发送cookies
+            });
+            const data = await response.json();
+            if (data.success && data.data) {
+                const watchlistSet = new Set(data.data.map(item => item.stock_code));
+                setWatchlistStocks(watchlistSet);
+            }
+        } catch (error) {
+            console.error('加载自选股列表失败:', error);
+        }
+    }, []);
+
+    // 加入/移除自选股
+    const handleWatchlistToggle = async (stockCode, isInWatchlist) => {
+        try {
+            const isProduction = process.env.NODE_ENV === 'production';
+            const apiBase = isProduction ? '' : process.env.REACT_APP_API_URL || '';
+            
+            let response;
+            if (isInWatchlist) {
+                // 移除自选股
+                response = await fetch(`${apiBase}/api/account/watchlist/${stockCode}`, {
+                    method: 'DELETE',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    credentials: 'include'  // 确保发送cookies
+                });
+            } else {
+                // 添加自选股
+                const stockInfo = relatedStocks.find(s => s.stock_code === stockCode);
+                response = await fetch(`${apiBase}/api/account/watchlist`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    credentials: 'include',  // 确保发送cookies
+                    body: JSON.stringify({
+                        stock_code: stockCode,
+                        stock_name: stockInfo?.stock_name || stockCode
+                    }),
+                });
+            }
+            
+            const data = await response.json();
+            if (data.success) {
+                message.success(isInWatchlist ? '已从自选股移除' : '已加入自选股');
+                // 更新本地状态
+                setWatchlistStocks(prev => {
+                    const newSet = new Set(prev);
+                    if (isInWatchlist) {
+                        newSet.delete(stockCode);
+                    } else {
+                        newSet.add(stockCode);
+                    }
+                    return newSet;
+                });
+            } else {
+                message.error(data.error || '操作失败');
+            }
+        } catch (error) {
+            message.error('操作失败，请稍后重试');
+        }
+    };
+
+    // 初始化数据加载
+    useEffect(() => {
+        if (visible && event) {
+            setActiveTab('stocks');
+            loadAllData();
+        }
+    }, [visible, event]);
+
+    // 加载所有数据的函数
+    const loadAllData = useCallback(() => {
+        if (!event) return;
+        
+        // 加载自选股列表
+        loadWatchlist();
+        
+        // 加载相关标的
+        setLoading(true);
+        eventService.getRelatedStocks(event.id)
+            .then(res => {
+                if (res.success) {
+                    setRelatedStocks(res.data);
+                    if (res.data.length > 0) {
+                        const codes = res.data.map(s => s.stock_code);
+                        stockService.getQuotes(codes, event.created_at)
+                            .then(quotes => setStockQuotes(quotes))
+                            .catch(error => console.error('加载行情失败:', error));
+                    }
+                }
+            })
+            .finally(() => setLoading(false));
+            
+        // 加载详细信息
+        setDetailLoading(true);
+        eventService.getEventDetail(event.id)
+            .then(res => {
+                if (res.success) setEventDetail(res.data);
+            })
+            .finally(() => setDetailLoading(false));
+            
+        // 加载历史事件
+        eventService.getHistoricalEvents(event.id)
+            .then(res => {
+                if (res.success) setHistoricalEvents(res.data);
+            });
+            
+        // 加载传导链分析
+        eventService.getTransmissionChainAnalysis(event.id)
+            .then(res => {
+                if (res.success) setChainAnalysis(res.data);
+            });
+            
+        // 加载社区讨论
+        if (eventService.getPosts) {
+            eventService.getPosts(event.id)
+                .then(res => {
+                    if (res.success) setPosts(res.data);
+                });
+        }
+        
+        // 加载超预期得分
+        if (eventService.getExpectationScore) {
+            eventService.getExpectationScore(event.id)
+                .then(res => {
+                    if (res.success) setExpectationScore(res.data.score);
+                })
+                .catch(() => setExpectationScore(null));
+        }
+    }, [event, loadWatchlist]);
+
+    // 2. renderCharts函数
+    const renderCharts = useCallback((stock, chartType, onClose, fixed) => {
+        // 保证事件时间格式为 'YYYY-MM-DD HH:mm'
+        const formattedEventTime = event?.start_time ? moment(event.start_time).format('YYYY-MM-DD HH:mm') : undefined;
+        return <StockDetailModal
+            stock={stock}
+            onClose={onClose}
+            fixed={fixed}
+            eventTime={formattedEventTime}
+        />;
+    }, [event]);
+
+    // 3. 简化handleRowEvents函数 - 只处理点击事件
+    const handleRowEvents = useCallback((record) => ({
+        onClick: () => {
+            // 点击行时显示详情弹窗
+            setFixedCharts((prev) => {
+                if (prev.find(item => item.stock.stock_code === record.stock_code)) return prev;
+                return [...prev, { stock: record, chartType: 'timeline' }];
+            });
+        },
+        style: { cursor: 'pointer' } // 添加手型光标提示可点击
+    }), []);
+
+    // 展开/收缩的行
+    const [expandedRows, setExpandedRows] = useState(new Set());
+
+    // 稳定的事件时间，避免重复渲染
+    const stableEventTime = useMemo(() => {
+        return event?.start_time ? moment(event.start_time).format('YYYY-MM-DD HH:mm') : '';
+    }, [event?.start_time]);
+
+    // 切换行展开状态
+    const toggleRowExpand = useCallback((stockCode) => {
+        setExpandedRows(prev => {
+            const newSet = new Set(prev);
+            if (newSet.has(stockCode)) {
+                newSet.delete(stockCode);
+            } else {
+                newSet.add(stockCode);
+            }
+            return newSet;
+        });
+    }, []);
+
+    // 4. stockColumns数组 - 使用优化后的 MiniTimelineChart
+    const stockColumns = useMemo(() => [
+        {
+            title: '股票代码',
+            dataIndex: 'stock_code',
+            key: 'stock_code',
+            width: 100,
+            render: (code, record) => (
+                <Button type="link">{code}</Button>
+            ),
+        },
+        {
+            title: '股票名称',
+            dataIndex: 'stock_name',
+            key: 'stock_name',
+            width: 120,
+        },
+        {
+            title: '关联描述',
+            dataIndex: 'relation_desc',
+            key: 'relation_desc',
+            width: 200,
+            render: (text, record) => {
+                if (!text) return '--';
+                
+                const isExpanded = expandedRows.has(record.stock_code);
+                const maxLength = 30; // 收缩时显示的最大字符数
+                const needTruncate = text.length > maxLength;
+                
+                return (
+                    <div style={{ position: 'relative' }}>
+                        <div style={{ 
+                            whiteSpace: isExpanded ? 'normal' : 'nowrap',
+                            overflow: isExpanded ? 'visible' : 'hidden',
+                            textOverflow: isExpanded ? 'clip' : 'ellipsis',
+                            paddingRight: needTruncate ? '20px' : '0',
+                            fontSize: '12px',
+                            lineHeight: '1.5',
+                            color: '#666'
+                        }}>
+                            {isExpanded ? text : (needTruncate ? text.substring(0, maxLength) + '...' : text)}
+                        </div>
+                        {needTruncate && (
+                            <Button
+                                type="link"
+                                size="small"
+                                onClick={(e) => {
+                                    e.stopPropagation(); // 防止触发行点击事件
+                                    toggleRowExpand(record.stock_code);
+                                }}
+                                style={{ 
+                                    position: isExpanded ? 'static' : 'absolute',
+                                    right: 0,
+                                    top: 0,
+                                    padding: '0 4px',
+                                    fontSize: '12px',
+                                    marginTop: isExpanded ? '4px' : '0'
+                                }}
+                            >
+                                {isExpanded ? '收起' : '展开'}
+                            </Button>
+                        )}
+                    </div>
+                );
+            },
+        },
+        {
+            title: '分时图',
+            key: 'timeline',
+            width: 150,
+            render: (_, record) => (
+                <MiniTimelineChart 
+                    stockCode={record.stock_code} 
+                    eventTime={stableEventTime} 
+                />
+            ),
+        },
+        {
+            title: '涨跌幅',
+            key: 'change',
+            width: 100,
+            render: (_, record) => {
+                const quote = stockQuotes[record.stock_code];
+                if (!quote) return '--';
+                const color = quote.change > 0 ? 'red' : quote.change < 0 ? 'green' : 'inherit';
+                return <span style={{ color }}>{quote.change > 0 ? '+' : ''}{quote.change?.toFixed(2)}%</span>;
+            },
+        },
+        {
+            title: '操作',
+            key: 'action',
+            width: 150,
+            fixed: 'right',
+            render: (_, record) => {
+                const isInWatchlist = watchlistStocks.has(record.stock_code);
+                return (
+                    <div style={{ display: 'flex', gap: '4px' }}>
+                        <Button
+                            type="primary"
+                            size="small"
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                const stockCode = record.stock_code.split('.')[0];
+                                window.open(`https://valuefrontier.cn/company?scode=${stockCode}`, '_blank');
+                            }}
+                        >
+                            股票详情
+                        </Button>
+                        <Button
+                            type={isInWatchlist ? 'default' : 'primary'}
+                            size="small"
+                            icon={isInWatchlist ? <StarFilled /> : <StarOutlined />}
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                handleWatchlistToggle(record.stock_code, isInWatchlist);
+                            }}
+                            style={{ minWidth: '70px' }}
+                        >
+                            {isInWatchlist ? '已关注' : '加自选'}
+                        </Button>
+                    </div>
+                );
+            },
+        },
+    ], [stockQuotes, stableEventTime, expandedRows, toggleRowExpand, watchlistStocks, handleWatchlistToggle, relatedStocks]); // 注意这里依赖改为 stableEventTime
+
+    // 处理搜索
+    const handleSearch = (value) => {
+        setSearchText(value);
+    };
+
+    // 处理实时监控切换
+    const handleMonitoringToggle = () => {
+        setIsMonitoring(!isMonitoring);
+        if (!isMonitoring) {
+            message.info('已开启实时监控，每5秒自动更新');
+        } else {
+            message.info('已停止实时监控');
+        }
+    };
+
+    // 处理刷新 - 只清理当天数据的缓存
+    const handleRefresh = useCallback(() => {
+        // 手动刷新分时图缓存
+        const today = moment().format('YYYY-MM-DD');
+        relatedStocks.forEach(stock => {
+            const cacheKey = getCacheKey(stock.stock_code, stableEventTime);
+            // 如果是今天的数据，强制刷新
+            if (cacheKey.includes(today)) {
+                lastRequestTime.delete(cacheKey);
+                klineDataCache.delete(cacheKey); // 清除缓存数据
+            }
+        });
+        
+        // 重新加载数据
+        loadAllData();
+    }, [relatedStocks, stableEventTime, loadAllData]);
+
+
+
+    // 固定图表关闭
+    const handleUnfixChart = useCallback((stock) => {
+        setFixedCharts((prev) => prev.filter(item => item.stock.stock_code !== stock.stock_code));
+    }, []);
+
+    // 权限检查函数
+    const handleTabAccess = (featureName, tabKey) => {
+        if (!hasFeatureAccess(featureName)) {
+            const recommendation = getUpgradeRecommendation(featureName);
+            setUpgradeFeature(recommendation?.required || 'pro');
+            setUpgradeModalOpen(true);
+            return false;
+        }
+        setActiveTab(tabKey);
+        return true;
+    };
+
+    // 渲染锁定内容
+    const renderLockedContent = (featureName, description) => {
+        const recommendation = getUpgradeRecommendation(featureName);
+        const isProRequired = recommendation?.required === 'pro';
+
+        return (
+            <div style={{ padding: '40px', textAlign: 'center' }}>
+                <div style={{ fontSize: '48px', marginBottom: '16px', opacity: 0.3 }}>
+                    {isProRequired ? <LockOutlined /> : <CrownOutlined />}
+                </div>
+                <Alert
+                    message={`${description}功能已锁定`}
+                    description={recommendation?.message || `此功能需要${isProRequired ? 'Pro版' : 'Max版'}订阅`}
+                    type="warning"
+                    showIcon
+                    style={{ maxWidth: '400px', margin: '0 auto', marginBottom: '24px' }}
+                />
+                <Button
+                    type="primary"
+                    size="large"
+                    onClick={() => {
+                        setUpgradeFeature(recommendation?.required || 'pro');
+                        setUpgradeModalOpen(true);
+                    }}
+                >
+                    升级到 {isProRequired ? 'Pro版' : 'Max版'}
+                </Button>
+            </div>
+        );
+    };
+
+    // 5. tabItems数组
+    const tabItems = [
+        {
+            key: 'stocks',
+            label: (
+                <span>
+                    相关标的
+                    {!hasFeatureAccess('related_stocks') && (
+                        <LockOutlined style={{ marginLeft: '4px', fontSize: '12px', opacity: 0.6 }} />
+                    )}
+                </span>
+            ),
+            children: hasFeatureAccess('related_stocks') ? (
+                <Spin spinning={loading}>
+                    {/* 头部信息 */}
+                    <div className="stock-header">
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+                            <div className="stock-header-icon">
+                                <span>📊</span>
+                            </div>
+                            <div>
+                                <div className="stock-title">
+                                    相关标的
+                                </div>
+                                <div className="stock-count">
+                                    共 {filteredStocks.length} 只股票
+                                </div>
+                            </div>
+                        </div>
+                        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 8 }}>
+                            <Button
+                                className={`monitoring-button ${isMonitoring ? 'monitoring' : ''}`}
+                                onClick={handleMonitoringToggle}
+                            >
+                                {isMonitoring ? '停止监控' : '实时监控'}
+                            </Button>
+                            <div style={{ fontSize: '12px', color: 'rgba(255, 255, 255, 0.8)' }}>
+                                每5秒自动更新行情数据
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* 搜索和操作栏 */}
+                    <div className="stock-search-bar">
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flex: 1 }}>
+                            <span className="search-icon">🔍</span>
+                            <Input
+                                placeholder="搜索股票代码或名称..."
+                                value={searchText}
+                                onChange={(e) => handleSearch(e.target.value)}
+                                className="stock-search-input"
+                                style={{ flex: 1, maxWidth: '300px' }}
+                                allowClear
+                            />
+                        </div>
+                        <div className="action-buttons">
+                            <Button
+                                icon={<ReloadOutlined />}
+                                onClick={handleRefresh}
+                                loading={loading}
+                                className="refresh-button"
+                            />
+                        </div>
+                    </div>
+
+                    {/* 股票列表 */}
+                    <div ref={tableRef} style={{ position: 'relative' }}>
+                        <Table
+                            columns={stockColumns}
+                            dataSource={filteredStocks}
+                            rowKey="stock_code"
+                            onRow={handleRowEvents}
+                            pagination={false}
+                            size="middle"
+                            bordered
+                            scroll={{ x: 920 }} // 设置横向滚动，因为操作列变宽了
+                        />
+                    </div>
+
+                    {/* 固定图表 */}
+                    {fixedCharts.map(({ stock }, index) =>
+                        <div key={`fixed-chart-${stock.stock_code}-${index}`}>
+                            {renderCharts(stock, 'timeline', () => handleUnfixChart(stock), true)}
+                        </div>
+                    )}
+                    
+                    {/* 讨论按钮 */}
+                    <div style={{ marginTop: '20px', textAlign: 'center' }}>
+                        <Button
+                            type="primary"
+                            icon={<Button.Group />}
+                            onClick={() => {
+                                setDiscussionType('事件讨论');
+                                setDiscussionModalVisible(true);
+                            }}
+                        >
+                            查看事件讨论
+                        </Button>
+                    </div>
+                </Spin>
+            ) : renderLockedContent('related_stocks', '相关标的')
+        },
+        {
+            key: 'concepts',
+            label: (
+                <span>
+                    相关概念
+                    {!hasFeatureAccess('related_concepts') && (
+                        <LockOutlined style={{ marginLeft: '4px', fontSize: '12px', opacity: 0.6 }} />
+                    )}
+                </span>
+            ),
+            children: hasFeatureAccess('related_concepts') ? (
+                <Spin spinning={detailLoading}>
+                    <RelatedConcepts
+                        eventTitle={event?.title}
+                        eventTime={event?.created_at || event?.start_time}
+                        eventId={event?.id}
+                        loading={detailLoading}
+                        error={null}
+                    />
+                    <div style={{ marginTop: '20px', textAlign: 'center' }}>
+                        <Button
+                            type="primary"
+                            onClick={() => {
+                                setDiscussionType('事件讨论');
+                                setDiscussionModalVisible(true);
+                            }}
+                        >
+                            查看事件讨论
+                        </Button>
+                    </div>
+                </Spin>
+            ) : renderLockedContent('related_concepts', '相关概念')
+        },
+        {
+            key: 'history',
+            label: (
+                <span>
+                    历史事件对比
+                    {!hasFeatureAccess('historical_events_full') && (
+                        <LockOutlined style={{ marginLeft: '4px', fontSize: '12px', opacity: 0.6 }} />
+                    )}
+                </span>
+            ),
+            children: (
+              <Spin spinning={detailLoading}>
+                <HistoricalEvents
+                  events={historicalEvents}
+                  loading={detailLoading}
+                  error={null}
+                  expectationScore={expectationScore}
+                />
+                <div style={{ marginTop: '20px', textAlign: 'center' }}>
+                    <Button
+                        type="primary"
+                        onClick={() => {
+                            setDiscussionType('事件讨论');
+                            setDiscussionModalVisible(true);
+                        }}
+                    >
+                        查看事件讨论
+                    </Button>
+                </div>
+              </Spin>
+            )
+        },
+        {
+            key: 'chain',
+            label: (
+                <span>
+                    传导链分析
+                    {!hasFeatureAccess('transmission_chain') && (
+                        <CrownOutlined style={{ marginLeft: '4px', fontSize: '12px', opacity: 0.6 }} />
+                    )}
+                </span>
+            ),
+            children: hasFeatureAccess('transmission_chain') ? (
+                <TransmissionChainAnalysis eventId={event?.id} eventService={eventService} />
+            ) : renderLockedContent('transmission_chain', '传导链分析')
+        }
+    ];
+
+    return (
+        <>
+            <Drawer
+                title={
+                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                        <span>{event?.title}</span>
+                        <CloseOutlined onClick={onClose} style={{ cursor: 'pointer' }} />
+                    </div>
+                }
+                placement="right"
+                width={900}
+                open={visible}
+                onClose={onClose}
+                closable={false}
+                className="stock-detail-panel"
+            >
+                <AntdTabs activeKey={activeTab} onChange={setActiveTab} items={tabItems} />
+            </Drawer>
+            
+            {/* 事件讨论模态框 */}
+            <EventDiscussionModal
+                isOpen={discussionModalVisible}
+                onClose={() => setDiscussionModalVisible(false)}
+                eventId={event?.id}
+                eventTitle={event?.title}
+                discussionType={discussionType}
+            />
+
+            {/* 订阅升级模态框 */}
+            <SubscriptionUpgradeModal
+                isOpen={upgradeModalOpen}
+                onClose={() => setUpgradeModalOpen(false)}
+                requiredLevel={upgradeFeature}
+                featureName={upgradeFeature === 'pro' ? '相关分析功能' : '传导链分析'}
+            />
+        </>
+    );
+}
+
+export default StockDetailPanel;