chore: 删除未使用的 StockDetailPanel 组件
- 删除 StockDetailPanel 主组件及样式（未被任何地方引用） - 删除仅被主组件使用的 hooks: useWatchlist, useStockMonitoring - 删除仅被主组件使用的子组件: RelatedStocksTab, LockedContent, StockSearchBar, StockTable - 保留被其他模块使用的: klineDataCache, useEventStocks, MiniTimelineChart - 更新 components/index.js 导出 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
@@ -1,235 +0,0 @@
|
|||||||
/* Drawer root */
|
|
||||||
.stock-detail-panel .ant-drawer-body {
|
|
||||||
padding: 24px 16px;
|
|
||||||
background: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Card common style */
|
|
||||||
.stock-detail-panel .ant-card {
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stock-detail-panel .ant-card-head-title {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Stock list items */
|
|
||||||
.stock-item {
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background-color 0.2s ease, border-left 0.2s ease;
|
|
||||||
border-left: 3px solid transparent;
|
|
||||||
padding-left: 4px; /* compensate for border shift */
|
|
||||||
}
|
|
||||||
|
|
||||||
.stock-item:hover {
|
|
||||||
background-color: #fafafa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stock-item.selected {
|
|
||||||
background-color: #e6f7ff;
|
|
||||||
border-left-color: #1890ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stock-item .ant-list-item-meta-title {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stock-item .ant-list-item-meta-description {
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stock-item .ant-tag {
|
|
||||||
margin-left: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ReactECharts */
|
|
||||||
.stock-detail-panel .echarts-for-react {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Card spacing */
|
|
||||||
.stock-detail-panel .ant-card:not(:last-child) {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Close icon */
|
|
||||||
.stock-detail-panel .anticon-close:hover {
|
|
||||||
color: #ff4d4f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row-hover {
|
|
||||||
background: #f5faff !important;
|
|
||||||
box-shadow: 0 2px 8px rgba(24,144,255,0.10);
|
|
||||||
transition: background 0.2s, box-shadow 0.2s;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 新增样式 - 相关标的Tab */
|
|
||||||
.stock-header {
|
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 16px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stock-header-icon {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
border-radius: 8px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stock-search-bar {
|
|
||||||
background: #f8f9fa;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 12px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
border: 1px solid #e9ecef;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stock-search-input {
|
|
||||||
border-radius: 6px;
|
|
||||||
border: 1px solid #d9d9d9;
|
|
||||||
transition: all 0.3s;
|
|
||||||
max-width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stock-search-input:focus {
|
|
||||||
border-color: #1890ff;
|
|
||||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.monitoring-button {
|
|
||||||
background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
|
|
||||||
border: none;
|
|
||||||
border-radius: 6px;
|
|
||||||
color: white;
|
|
||||||
font-weight: 500;
|
|
||||||
transition: all 0.3s;
|
|
||||||
padding: 4px 12px;
|
|
||||||
height: auto;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.monitoring-button:hover {
|
|
||||||
background: linear-gradient(135deg, #45a049 0%, #3d8b40 100%);
|
|
||||||
transform: translateY(-1px);
|
|
||||||
box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.monitoring-button.monitoring {
|
|
||||||
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.monitoring-button.monitoring:hover {
|
|
||||||
background: linear-gradient(135deg, #ee5a52 0%, #d63031 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.add-stock-button {
|
|
||||||
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
|
|
||||||
border: none;
|
|
||||||
border-radius: 6px;
|
|
||||||
color: white;
|
|
||||||
font-weight: 500;
|
|
||||||
transition: all 0.3s;
|
|
||||||
padding: 4px 12px;
|
|
||||||
height: auto;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.add-stock-button:hover {
|
|
||||||
background: linear-gradient(135deg, #096dd9 0%, #0050b3 100%);
|
|
||||||
transform: translateY(-1px);
|
|
||||||
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.refresh-button {
|
|
||||||
border-radius: 6px;
|
|
||||||
transition: all 0.3s;
|
|
||||||
padding: 4px 8px;
|
|
||||||
height: auto;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.refresh-button:hover {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
transition: transform 0.5s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.monitoring-status {
|
|
||||||
background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
|
|
||||||
border: 1px solid #4caf50;
|
|
||||||
border-radius: 6px;
|
|
||||||
padding: 8px 12px;
|
|
||||||
margin-top: 12px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
animation: pulse 2s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes pulse {
|
|
||||||
0% { opacity: 1; }
|
|
||||||
50% { opacity: 0.8; }
|
|
||||||
100% { opacity: 1; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.stock-count {
|
|
||||||
font-size: 14px;
|
|
||||||
color: rgba(255, 255, 255, 0.8);
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stock-title {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 表格hover效果增强 */
|
|
||||||
.ant-table-tbody > tr.row-hover > td {
|
|
||||||
background: #f5faff !important;
|
|
||||||
border-color: #91d5ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-table-tbody > tr.row-hover:hover > td {
|
|
||||||
background: #e6f7ff !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 搜索图标样式 */
|
|
||||||
.search-icon {
|
|
||||||
color: #666;
|
|
||||||
font-size: 16px;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 按钮组样式 */
|
|
||||||
.action-buttons {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 响应式设计 */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.stock-search-bar {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-buttons {
|
|
||||||
width: 100%;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,346 +0,0 @@
|
|||||||
// src/views/Community/components/StockDetailPanel.js
|
|
||||||
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
|
|
||||||
import { Drawer, Spin, Button, Alert } from 'antd';
|
|
||||||
import { CloseOutlined, LockOutlined, CrownOutlined } from '@ant-design/icons';
|
|
||||||
import { Tabs as AntdTabs } from 'antd';
|
|
||||||
import dayjs from 'dayjs';
|
|
||||||
|
|
||||||
// Services and Utils
|
|
||||||
import { eventService } from '../../../services/eventService';
|
|
||||||
import { logger } from '../../../utils/logger';
|
|
||||||
import { getApiBase } from '../../../utils/apiConfig';
|
|
||||||
|
|
||||||
// Custom Hooks
|
|
||||||
import { useSubscription } from '../../../hooks/useSubscription';
|
|
||||||
import { useEventStocks } from './StockDetailPanel/hooks/useEventStocks';
|
|
||||||
import { useWatchlist } from './StockDetailPanel/hooks/useWatchlist';
|
|
||||||
import { useStockMonitoring } from './StockDetailPanel/hooks/useStockMonitoring';
|
|
||||||
|
|
||||||
// Components
|
|
||||||
import { RelatedStocksTab, LockedContent } from './StockDetailPanel/components';
|
|
||||||
import RelatedConcepts from '../../EventDetail/components/RelatedConcepts';
|
|
||||||
import HistoricalEvents from '../../EventDetail/components/HistoricalEvents';
|
|
||||||
import TransmissionChainAnalysis from '../../EventDetail/components/TransmissionChainAnalysis';
|
|
||||||
import EventDiscussionModal from './EventDiscussionModal';
|
|
||||||
import SubscriptionUpgradeModal from '../../../components/SubscriptionUpgradeModal';
|
|
||||||
import StockChartAntdModal from '../../../components/StockChart/StockChartAntdModal';
|
|
||||||
import RiskDisclaimer from '../../../components/RiskDisclaimer';
|
|
||||||
|
|
||||||
// Styles
|
|
||||||
import './StockDetailPanel.css';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 股票详情 Drawer 组件
|
|
||||||
* 显示事件相关的股票、概念、历史事件、传导链等信息
|
|
||||||
*
|
|
||||||
* @param {boolean} visible - 是否显示
|
|
||||||
* @param {Object} event - 事件对象
|
|
||||||
* @param {Function} onClose - 关闭回调
|
|
||||||
*/
|
|
||||||
function StockDetailPanel({ visible, event, onClose }) {
|
|
||||||
logger.debug('StockDetailPanel', '组件加载', {
|
|
||||||
visible,
|
|
||||||
eventId: event?.id,
|
|
||||||
eventTitle: event?.title
|
|
||||||
});
|
|
||||||
|
|
||||||
// ==================== Hooks ====================
|
|
||||||
|
|
||||||
// 权限控制
|
|
||||||
const { hasFeatureAccess, getUpgradeRecommendation } = useSubscription();
|
|
||||||
|
|
||||||
// 事件数据管理 (Redux + Hooks)
|
|
||||||
const {
|
|
||||||
stocks,
|
|
||||||
stocksWithQuotes,
|
|
||||||
quotes,
|
|
||||||
eventDetail,
|
|
||||||
historicalEvents,
|
|
||||||
chainAnalysis,
|
|
||||||
expectationScore,
|
|
||||||
loading,
|
|
||||||
refreshAllData,
|
|
||||||
refreshQuotes
|
|
||||||
} = useEventStocks(event?.id, event?.start_time);
|
|
||||||
|
|
||||||
// 自选股管理（只在 Drawer 可见时加载）
|
|
||||||
const {
|
|
||||||
watchlistSet,
|
|
||||||
toggleWatchlist
|
|
||||||
} = useWatchlist(visible);
|
|
||||||
|
|
||||||
// 实时监控管理
|
|
||||||
const {
|
|
||||||
isMonitoring,
|
|
||||||
toggleMonitoring,
|
|
||||||
manualRefresh: refreshMonitoring
|
|
||||||
} = useStockMonitoring(stocks, event?.start_time);
|
|
||||||
|
|
||||||
// ==================== Local State ====================
|
|
||||||
|
|
||||||
const [activeTab, setActiveTab] = useState('stocks');
|
|
||||||
const [searchText, setSearchText] = useState('');
|
|
||||||
const [filteredStocks, setFilteredStocks] = useState([]);
|
|
||||||
const [fixedCharts, setFixedCharts] = useState([]);
|
|
||||||
const [discussionModalVisible, setDiscussionModalVisible] = useState(false);
|
|
||||||
const [discussionType, setDiscussionType] = useState('事件讨论');
|
|
||||||
const [upgradeModalOpen, setUpgradeModalOpen] = useState(false);
|
|
||||||
const [upgradeFeature, setUpgradeFeature] = useState('');
|
|
||||||
|
|
||||||
// ==================== Effects ====================
|
|
||||||
|
|
||||||
// 过滤股票列表
|
|
||||||
useEffect(() => {
|
|
||||||
if (!searchText.trim()) {
|
|
||||||
setFilteredStocks(stocks);
|
|
||||||
} else {
|
|
||||||
const filtered = stocks.filter(stock =>
|
|
||||||
stock.stock_code.toLowerCase().includes(searchText.toLowerCase()) ||
|
|
||||||
stock.stock_name.toLowerCase().includes(searchText.toLowerCase())
|
|
||||||
);
|
|
||||||
setFilteredStocks(filtered);
|
|
||||||
}
|
|
||||||
}, [searchText, stocks]);
|
|
||||||
|
|
||||||
// ==================== Event Handlers ====================
|
|
||||||
|
|
||||||
// 搜索处理
|
|
||||||
const handleSearch = useCallback((value) => {
|
|
||||||
setSearchText(value);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// 刷新数据
|
|
||||||
const handleRefresh = useCallback(() => {
|
|
||||||
logger.debug('StockDetailPanel', '手动刷新数据');
|
|
||||||
refreshAllData();
|
|
||||||
refreshQuotes();
|
|
||||||
}, [refreshAllData, refreshQuotes]);
|
|
||||||
|
|
||||||
// 切换监控
|
|
||||||
const handleMonitoringToggle = useCallback(() => {
|
|
||||||
toggleMonitoring();
|
|
||||||
}, [toggleMonitoring]);
|
|
||||||
|
|
||||||
// 自选股切换
|
|
||||||
const handleWatchlistToggle = useCallback(async (stockCode, isInWatchlist) => {
|
|
||||||
const stockName = stocks.find(s => s.stock_code === stockCode)?.stock_name || '';
|
|
||||||
await toggleWatchlist(stockCode, stockName);
|
|
||||||
}, [stocks, toggleWatchlist]);
|
|
||||||
|
|
||||||
// 行点击 - 显示固定图表
|
|
||||||
const handleRowClick = useCallback((stock) => {
|
|
||||||
setFixedCharts((prev) => {
|
|
||||||
if (prev.find(item => item.stock.stock_code === stock.stock_code)) return prev;
|
|
||||||
return [...prev, { stock, chartType: 'timeline' }];
|
|
||||||
});
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// 移除固定图表
|
|
||||||
const handleUnfixChart = useCallback((stock) => {
|
|
||||||
setFixedCharts((prev) => prev.filter(item => item.stock.stock_code !== stock.stock_code));
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// 权限检查和升级提示
|
|
||||||
const handleUpgradeClick = useCallback((featureName) => {
|
|
||||||
const recommendation = getUpgradeRecommendation(featureName);
|
|
||||||
setUpgradeFeature(recommendation?.required || 'pro');
|
|
||||||
setUpgradeModalOpen(true);
|
|
||||||
}, [getUpgradeRecommendation]);
|
|
||||||
|
|
||||||
// 渲染锁定内容
|
|
||||||
const renderLockedContent = useCallback((featureName, description) => {
|
|
||||||
const recommendation = getUpgradeRecommendation(featureName);
|
|
||||||
const isProRequired = recommendation?.required === 'pro';
|
|
||||||
|
|
||||||
return (
|
|
||||||
<LockedContent
|
|
||||||
description={description}
|
|
||||||
isProRequired={isProRequired}
|
|
||||||
message={recommendation?.message}
|
|
||||||
onUpgradeClick={() => handleUpgradeClick(featureName)}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}, [getUpgradeRecommendation, handleUpgradeClick]);
|
|
||||||
|
|
||||||
// 渲染固定图表
|
|
||||||
const renderFixedCharts = useMemo(() => {
|
|
||||||
if (fixedCharts.length === 0) return null;
|
|
||||||
|
|
||||||
const formattedEventTime = event?.start_time
|
|
||||||
? dayjs(event.start_time).format('YYYY-MM-DD HH:mm')
|
|
||||||
: undefined;
|
|
||||||
|
|
||||||
return fixedCharts.map(({ stock }, index) => (
|
|
||||||
<div key={`fixed-chart-${stock.stock_code}-${index}`}>
|
|
||||||
<StockChartAntdModal
|
|
||||||
open={true}
|
|
||||||
onCancel={() => handleUnfixChart(stock)}
|
|
||||||
stock={stock}
|
|
||||||
eventTime={formattedEventTime}
|
|
||||||
fixed={true}
|
|
||||||
width={800}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
));
|
|
||||||
}, [fixedCharts, event, handleUnfixChart]);
|
|
||||||
|
|
||||||
// ==================== Tab Items ====================
|
|
||||||
|
|
||||||
const tabItems = useMemo(() => [
|
|
||||||
{
|
|
||||||
key: 'stocks',
|
|
||||||
label: (
|
|
||||||
<span>
|
|
||||||
相关标的
|
|
||||||
{!hasFeatureAccess('related_stocks') && (
|
|
||||||
<LockOutlined style={{ marginLeft: '4px', fontSize: '12px', opacity: 0.6 }} />
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
),
|
|
||||||
children: hasFeatureAccess('related_stocks') ? (
|
|
||||||
<RelatedStocksTab
|
|
||||||
stocks={filteredStocks}
|
|
||||||
quotes={quotes}
|
|
||||||
eventTime={event?.start_time}
|
|
||||||
watchlistSet={watchlistSet}
|
|
||||||
searchText={searchText}
|
|
||||||
loading={loading.stocks || loading.quotes}
|
|
||||||
isMonitoring={isMonitoring}
|
|
||||||
onSearch={handleSearch}
|
|
||||||
onRefresh={handleRefresh}
|
|
||||||
onMonitoringToggle={handleMonitoringToggle}
|
|
||||||
onWatchlistToggle={handleWatchlistToggle}
|
|
||||||
onRowClick={handleRowClick}
|
|
||||||
onDiscussionClick={() => {
|
|
||||||
setDiscussionType('事件讨论');
|
|
||||||
setDiscussionModalVisible(true);
|
|
||||||
}}
|
|
||||||
fixedChartsContent={renderFixedCharts}
|
|
||||||
/>
|
|
||||||
) : 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={loading.eventDetail}>
|
|
||||||
<RelatedConcepts
|
|
||||||
eventTitle={event?.title}
|
|
||||||
eventDetail={eventDetail}
|
|
||||||
eventService={eventService}
|
|
||||||
/>
|
|
||||||
</Spin>
|
|
||||||
) : renderLockedContent('related_concepts', '相关概念')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'historical',
|
|
||||||
label: (
|
|
||||||
<span>
|
|
||||||
历史事件对比
|
|
||||||
{!hasFeatureAccess('historical_events_full') && (
|
|
||||||
<LockOutlined style={{ marginLeft: '4px', fontSize: '12px', opacity: 0.6 }} />
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
),
|
|
||||||
children: hasFeatureAccess('historical_events_full') ? (
|
|
||||||
<Spin spinning={loading.historicalEvents}>
|
|
||||||
<HistoricalEvents
|
|
||||||
eventId={event?.id}
|
|
||||||
eventTitle={event?.title}
|
|
||||||
historicalEvents={historicalEvents}
|
|
||||||
eventService={eventService}
|
|
||||||
/>
|
|
||||||
</Spin>
|
|
||||||
) : renderLockedContent('historical_events_full', '历史事件对比')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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', '传导链分析')
|
|
||||||
}
|
|
||||||
], [
|
|
||||||
hasFeatureAccess,
|
|
||||||
filteredStocks,
|
|
||||||
quotes,
|
|
||||||
event,
|
|
||||||
watchlistSet,
|
|
||||||
searchText,
|
|
||||||
loading,
|
|
||||||
isMonitoring,
|
|
||||||
eventDetail,
|
|
||||||
historicalEvents,
|
|
||||||
handleSearch,
|
|
||||||
handleRefresh,
|
|
||||||
handleMonitoringToggle,
|
|
||||||
handleWatchlistToggle,
|
|
||||||
handleRowClick,
|
|
||||||
renderFixedCharts,
|
|
||||||
renderLockedContent
|
|
||||||
]);
|
|
||||||
|
|
||||||
// ==================== Render ====================
|
|
||||||
|
|
||||||
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} />
|
|
||||||
|
|
||||||
{/* 风险提示 */}
|
|
||||||
<div style={{ marginTop: '24px', paddingBottom: '20px' }}>
|
|
||||||
<RiskDisclaimer variant="default" />
|
|
||||||
</div>
|
|
||||||
</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;
|
|
||||||
@@ -1,48 +0,0 @@
|
|||||||
// src/views/Community/components/StockDetailPanel/components/LockedContent.js
|
|
||||||
import React from 'react';
|
|
||||||
import { Alert, Button } from 'antd';
|
|
||||||
import { LockOutlined, CrownOutlined } from '@ant-design/icons';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 权限锁定内容组件
|
|
||||||
* 显示功能被锁定的提示，引导用户升级订阅
|
|
||||||
*
|
|
||||||
* @param {string} description - 功能描述
|
|
||||||
* @param {boolean} isProRequired - 是否需要 Pro 版本（true: Pro, false: Max）
|
|
||||||
* @param {string} message - 自定义提示消息（可选）
|
|
||||||
* @param {Function} onUpgradeClick - 升级按钮点击回调
|
|
||||||
* @returns {JSX.Element}
|
|
||||||
*/
|
|
||||||
const LockedContent = ({
|
|
||||||
description = '此功能',
|
|
||||||
isProRequired = true,
|
|
||||||
message = null,
|
|
||||||
onUpgradeClick
|
|
||||||
}) => {
|
|
||||||
const versionName = isProRequired ? 'Pro版' : 'Max版';
|
|
||||||
const defaultMessage = `此功能需要${versionName}订阅`;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={{ padding: '40px', textAlign: 'center' }}>
|
|
||||||
<div style={{ fontSize: '48px', marginBottom: '16px', opacity: 0.3 }}>
|
|
||||||
{isProRequired ? <LockOutlined /> : <CrownOutlined />}
|
|
||||||
</div>
|
|
||||||
<Alert
|
|
||||||
message={`${description}功能已锁定`}
|
|
||||||
description={message || defaultMessage}
|
|
||||||
type="warning"
|
|
||||||
showIcon
|
|
||||||
style={{ maxWidth: '400px', margin: '0 auto', marginBottom: '24px' }}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
type="primary"
|
|
||||||
size="large"
|
|
||||||
onClick={onUpgradeClick}
|
|
||||||
>
|
|
||||||
升级到 {versionName}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default LockedContent;
|
|
||||||
@@ -1,109 +0,0 @@
|
|||||||
// src/views/Community/components/StockDetailPanel/components/RelatedStocksTab.js
|
|
||||||
import React from 'react';
|
|
||||||
import { Spin, Button } from 'antd';
|
|
||||||
import StockSearchBar from './StockSearchBar';
|
|
||||||
import StockTable from './StockTable';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 相关标的 Tab 组件
|
|
||||||
* 显示事件相关的股票列表、搜索、监控等功能
|
|
||||||
*
|
|
||||||
* @param {Array} stocks - 股票列表
|
|
||||||
* @param {Object} quotes - 股票行情字典
|
|
||||||
* @param {string} eventTime - 事件时间
|
|
||||||
* @param {Set} watchlistSet - 自选股代码集合
|
|
||||||
* @param {string} searchText - 搜索文本
|
|
||||||
* @param {boolean} loading - 加载状态
|
|
||||||
* @param {boolean} isMonitoring - 监控状态
|
|
||||||
* @param {Function} onSearch - 搜索回调
|
|
||||||
* @param {Function} onRefresh - 刷新回调
|
|
||||||
* @param {Function} onMonitoringToggle - 切换监控回调
|
|
||||||
* @param {Function} onWatchlistToggle - 切换自选股回调
|
|
||||||
* @param {Function} onRowClick - 行点击回调
|
|
||||||
* @param {Function} onDiscussionClick - 查看讨论回调
|
|
||||||
* @param {React.ReactNode} fixedChartsContent - 固定图表内容（可选）
|
|
||||||
* @returns {JSX.Element}
|
|
||||||
*/
|
|
||||||
const RelatedStocksTab = ({
|
|
||||||
stocks = [],
|
|
||||||
quotes = {},
|
|
||||||
eventTime = null,
|
|
||||||
watchlistSet = new Set(),
|
|
||||||
searchText = '',
|
|
||||||
loading = false,
|
|
||||||
isMonitoring = false,
|
|
||||||
onSearch,
|
|
||||||
onRefresh,
|
|
||||||
onMonitoringToggle,
|
|
||||||
onWatchlistToggle,
|
|
||||||
onRowClick,
|
|
||||||
onDiscussionClick,
|
|
||||||
fixedChartsContent = null
|
|
||||||
}) => {
|
|
||||||
return (
|
|
||||||
<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">
|
|
||||||
共 {stocks.length} 只股票
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 8 }}>
|
|
||||||
<Button
|
|
||||||
className={`monitoring-button ${isMonitoring ? 'monitoring' : ''}`}
|
|
||||||
onClick={onMonitoringToggle}
|
|
||||||
>
|
|
||||||
{isMonitoring ? '停止监控' : '实时监控'}
|
|
||||||
</Button>
|
|
||||||
<div style={{ fontSize: '12px', color: 'rgba(255, 255, 255, 0.8)' }}>
|
|
||||||
每5秒自动更新行情数据
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 搜索和操作栏 */}
|
|
||||||
<StockSearchBar
|
|
||||||
searchText={searchText}
|
|
||||||
onSearch={onSearch}
|
|
||||||
stockCount={stocks.length}
|
|
||||||
onRefresh={onRefresh}
|
|
||||||
loading={loading}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* 股票列表 */}
|
|
||||||
<StockTable
|
|
||||||
stocks={stocks}
|
|
||||||
quotes={quotes}
|
|
||||||
eventTime={eventTime}
|
|
||||||
watchlistSet={watchlistSet}
|
|
||||||
onWatchlistToggle={onWatchlistToggle}
|
|
||||||
onRowClick={onRowClick}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* 固定图表 (由父组件传入) */}
|
|
||||||
{fixedChartsContent}
|
|
||||||
|
|
||||||
{/* 讨论按钮 */}
|
|
||||||
<div style={{ marginTop: '20px', textAlign: 'center' }}>
|
|
||||||
<Button
|
|
||||||
type="primary"
|
|
||||||
icon={<Button.Group />}
|
|
||||||
onClick={onDiscussionClick}
|
|
||||||
>
|
|
||||||
查看事件讨论
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</Spin>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default RelatedStocksTab;
|
|
||||||
@@ -1,50 +0,0 @@
|
|||||||
// src/views/Community/components/StockDetailPanel/components/StockSearchBar.js
|
|
||||||
import React from 'react';
|
|
||||||
import { Input, Button } from 'antd';
|
|
||||||
import { ReloadOutlined } from '@ant-design/icons';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 股票搜索栏组件
|
|
||||||
* 提供股票搜索和刷新功能
|
|
||||||
*
|
|
||||||
* @param {string} searchText - 搜索文本
|
|
||||||
* @param {Function} onSearch - 搜索回调函数
|
|
||||||
* @param {number} stockCount - 股票总数
|
|
||||||
* @param {Function} onRefresh - 刷新回调函数
|
|
||||||
* @param {boolean} loading - 加载状态
|
|
||||||
* @returns {JSX.Element}
|
|
||||||
*/
|
|
||||||
const StockSearchBar = ({
|
|
||||||
searchText = '',
|
|
||||||
onSearch,
|
|
||||||
stockCount = 0,
|
|
||||||
onRefresh,
|
|
||||||
loading = false
|
|
||||||
}) => {
|
|
||||||
return (
|
|
||||||
<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) => onSearch?.(e.target.value)}
|
|
||||||
className="stock-search-input"
|
|
||||||
style={{ flex: 1, maxWidth: '300px' }}
|
|
||||||
allowClear
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="action-buttons">
|
|
||||||
<Button
|
|
||||||
icon={<ReloadOutlined />}
|
|
||||||
onClick={onRefresh}
|
|
||||||
loading={loading}
|
|
||||||
className="refresh-button"
|
|
||||||
title="刷新股票数据"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default StockSearchBar;
|
|
||||||
@@ -1,325 +0,0 @@
|
|||||||
// src/views/Community/components/StockDetailPanel/components/StockTable.js
|
|
||||||
import React, { useState, useCallback, useMemo, useEffect } from 'react';
|
|
||||||
import { Table, Button } from 'antd';
|
|
||||||
import { StarFilled, StarOutlined } from '@ant-design/icons';
|
|
||||||
import dayjs from 'dayjs';
|
|
||||||
import MiniTimelineChart from './MiniTimelineChart';
|
|
||||||
import { fetchBatchKlineData, klineDataCache, getCacheKey } from '../utils/klineDataCache';
|
|
||||||
import { logger } from '../../../../../utils/logger';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 标准化股票代码为6位格式
|
|
||||||
* @param {string} code - 股票代码
|
|
||||||
* @returns {string} 6位标准化代码
|
|
||||||
*/
|
|
||||||
const normalizeStockCode = (code) => {
|
|
||||||
if (!code) return '';
|
|
||||||
const s = String(code).trim();
|
|
||||||
const m = s.match(/(\d{6})/);
|
|
||||||
return m ? m[1] : s;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 股票列表表格组件
|
|
||||||
* 显示事件相关股票列表，包括分时图、涨跌幅、自选股操作等
|
|
||||||
*
|
|
||||||
* @param {Array} stocks - 股票列表
|
|
||||||
* @param {Object} quotes - 股票行情字典 { [stockCode]: quote }
|
|
||||||
* @param {string} eventTime - 事件时间
|
|
||||||
* @param {Set} watchlistSet - 自选股代码集合
|
|
||||||
* @param {Function} onWatchlistToggle - 切换自选股回调 (stockCode, isInWatchlist) => void
|
|
||||||
* @param {Function} onRowClick - 行点击回调 (stock) => void
|
|
||||||
* @returns {JSX.Element}
|
|
||||||
*/
|
|
||||||
const StockTable = ({
|
|
||||||
stocks = [],
|
|
||||||
quotes = {},
|
|
||||||
eventTime = null,
|
|
||||||
watchlistSet = new Set(),
|
|
||||||
onWatchlistToggle,
|
|
||||||
onRowClick
|
|
||||||
}) => {
|
|
||||||
// 展开/收缩的行
|
|
||||||
const [expandedRows, setExpandedRows] = useState(new Set());
|
|
||||||
// K线数据状态：{ [stockCode]: data[] }
|
|
||||||
const [klineDataMap, setKlineDataMap] = useState({});
|
|
||||||
const [klineLoading, setKlineLoading] = useState(false);
|
|
||||||
// 用于追踪当前正在加载的 stocksKey，解决时序问题
|
|
||||||
const [loadingStocksKey, setLoadingStocksKey] = useState('');
|
|
||||||
|
|
||||||
// 稳定的事件时间，避免重复渲染
|
|
||||||
const stableEventTime = useMemo(() => {
|
|
||||||
return eventTime ? dayjs(eventTime).format('YYYY-MM-DD HH:mm') : '';
|
|
||||||
}, [eventTime]);
|
|
||||||
|
|
||||||
// 批量加载K线数据
|
|
||||||
// 使用 stocks 的 JSON 字符串作为依赖项的 key，避免引用变化导致重复加载
|
|
||||||
const stocksKey = useMemo(() => {
|
|
||||||
return stocks.map(s => s.stock_code).sort().join(',');
|
|
||||||
}, [stocks]);
|
|
||||||
|
|
||||||
// 计算是否应该显示 loading：当前 stocksKey 和 loadingStocksKey 不匹配，或者正在加载
|
|
||||||
// 这样可以在 stocks 变化时立即显示 loading，不需要等 useEffect
|
|
||||||
const shouldShowLoading = useMemo(() => {
|
|
||||||
if (stocks.length === 0) return false;
|
|
||||||
// 如果 stocksKey 变化了但 klineDataMap 还没更新，说明需要加载
|
|
||||||
const currentDataKeys = Object.keys(klineDataMap).sort().join(',');
|
|
||||||
if (stocksKey !== currentDataKeys && stocksKey !== loadingStocksKey) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
return klineLoading;
|
|
||||||
}, [stocks.length, stocksKey, klineDataMap, loadingStocksKey, klineLoading]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (stocks.length === 0) {
|
|
||||||
setKlineDataMap({});
|
|
||||||
setKlineLoading(false);
|
|
||||||
setLoadingStocksKey('');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 立即设置 loading 状态和正在加载的 key
|
|
||||||
setKlineLoading(true);
|
|
||||||
setLoadingStocksKey(stocksKey);
|
|
||||||
|
|
||||||
const stockCodes = stocks.map(s => s.stock_code);
|
|
||||||
|
|
||||||
// 先检查缓存，只请求未缓存的
|
|
||||||
const cachedData = {};
|
|
||||||
const uncachedCodes = [];
|
|
||||||
stockCodes.forEach(code => {
|
|
||||||
const cacheKey = getCacheKey(code, stableEventTime, 'timeline');
|
|
||||||
const cached = klineDataCache.get(cacheKey);
|
|
||||||
if (cached !== undefined) {
|
|
||||||
cachedData[code] = cached;
|
|
||||||
} else {
|
|
||||||
uncachedCodes.push(code);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// 如果全部缓存命中，直接使用
|
|
||||||
if (uncachedCodes.length === 0) {
|
|
||||||
setKlineDataMap(cachedData);
|
|
||||||
setKlineLoading(false);
|
|
||||||
logger.debug('StockTable', 'K线数据全部来自缓存', { stockCount: stockCodes.length });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
logger.debug('StockTable', '批量加载K线数据', {
|
|
||||||
totalCount: stockCodes.length,
|
|
||||||
cachedCount: Object.keys(cachedData).length,
|
|
||||||
uncachedCount: uncachedCodes.length,
|
|
||||||
eventTime: stableEventTime
|
|
||||||
});
|
|
||||||
|
|
||||||
// 批量请求未缓存的数据
|
|
||||||
fetchBatchKlineData(stockCodes, stableEventTime, 'timeline')
|
|
||||||
.then((batchData) => {
|
|
||||||
// 合并缓存数据和新数据
|
|
||||||
setKlineDataMap({ ...cachedData, ...batchData });
|
|
||||||
setKlineLoading(false);
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
logger.error('StockTable', '批量加载K线数据失败', error);
|
|
||||||
// 失败时使用已有的缓存数据
|
|
||||||
setKlineDataMap(cachedData);
|
|
||||||
setKlineLoading(false);
|
|
||||||
});
|
|
||||||
}, [stocksKey, stableEventTime]); // 使用 stocksKey 而非 stocks 对象引用
|
|
||||||
|
|
||||||
// 切换行展开状态
|
|
||||||
const toggleRowExpand = useCallback((stockCode) => {
|
|
||||||
setExpandedRows(prev => {
|
|
||||||
const newSet = new Set(prev);
|
|
||||||
if (newSet.has(stockCode)) {
|
|
||||||
newSet.delete(stockCode);
|
|
||||||
} else {
|
|
||||||
newSet.add(stockCode);
|
|
||||||
}
|
|
||||||
return newSet;
|
|
||||||
});
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// 行点击事件处理
|
|
||||||
const handleRowEvents = useCallback((record) => ({
|
|
||||||
onClick: () => {
|
|
||||||
onRowClick?.(record);
|
|
||||||
},
|
|
||||||
style: { cursor: 'pointer' }
|
|
||||||
}), [onRowClick]);
|
|
||||||
|
|
||||||
// 股票列表列定义
|
|
||||||
const stockColumns = useMemo(() => [
|
|
||||||
{
|
|
||||||
title: '股票代码',
|
|
||||||
dataIndex: 'stock_code',
|
|
||||||
key: 'stock_code',
|
|
||||||
width: 100,
|
|
||||||
render: (code) => (
|
|
||||||
<Button type="link">{code}</Button>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '股票名称',
|
|
||||||
dataIndex: 'stock_name',
|
|
||||||
key: 'stock_name',
|
|
||||||
width: 120,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '关联描述',
|
|
||||||
dataIndex: 'relation_desc',
|
|
||||||
key: 'relation_desc',
|
|
||||||
width: 300,
|
|
||||||
render: (relationDesc, record) => {
|
|
||||||
logger.debug('StockTable', '表格渲染 - 股票关联描述', {
|
|
||||||
stockCode: record.stock_code,
|
|
||||||
hasRelationDesc: !!relationDesc
|
|
||||||
});
|
|
||||||
|
|
||||||
// 处理 relation_desc 的两种格式
|
|
||||||
let text = '';
|
|
||||||
|
|
||||||
if (!relationDesc) {
|
|
||||||
return '--';
|
|
||||||
} else if (typeof relationDesc === 'string') {
|
|
||||||
// 旧格式：直接是字符串
|
|
||||||
text = relationDesc;
|
|
||||||
} else if (typeof relationDesc === 'object' && relationDesc.data && Array.isArray(relationDesc.data)) {
|
|
||||||
// 新格式：{data: [{query_part: "...", sentences: "..."}]}
|
|
||||||
// 提取所有 query_part，用逗号连接
|
|
||||||
text = relationDesc.data
|
|
||||||
.map(item => item.query_part || item.sentences || '')
|
|
||||||
.filter(s => s)
|
|
||||||
.join('；') || '--';
|
|
||||||
} else {
|
|
||||||
logger.warn('StockTable', '未知的 relation_desc 格式', {
|
|
||||||
stockCode: record.stock_code,
|
|
||||||
relationDescType: typeof relationDesc
|
|
||||||
});
|
|
||||||
return '--';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!text || 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}
|
|
||||||
preloadedData={klineDataMap[record.stock_code]}
|
|
||||||
loading={shouldShowLoading && !klineDataMap[record.stock_code]}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '涨跌幅',
|
|
||||||
key: 'change',
|
|
||||||
width: 100,
|
|
||||||
render: (_, record) => {
|
|
||||||
const quote = quotes[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) => {
|
|
||||||
// 标准化代码后再比较，确保 600000.SH 和 600000 能匹配
|
|
||||||
const normalizedCode = normalizeStockCode(record.stock_code);
|
|
||||||
const isInWatchlist = watchlistSet.has(normalizedCode);
|
|
||||||
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();
|
|
||||||
onWatchlistToggle?.(record.stock_code, isInWatchlist);
|
|
||||||
}}
|
|
||||||
style={{ minWidth: '70px' }}
|
|
||||||
>
|
|
||||||
{isInWatchlist ? '已关注' : '加自选'}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
], [quotes, stableEventTime, expandedRows, toggleRowExpand, watchlistSet, onWatchlistToggle, klineDataMap, shouldShowLoading]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={{ position: 'relative' }}>
|
|
||||||
<Table
|
|
||||||
columns={stockColumns}
|
|
||||||
dataSource={stocks}
|
|
||||||
rowKey="stock_code"
|
|
||||||
onRow={handleRowEvents}
|
|
||||||
pagination={false}
|
|
||||||
size="middle"
|
|
||||||
bordered
|
|
||||||
scroll={{ x: 920 }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default StockTable;
|
|
||||||
@@ -1,6 +1,2 @@
|
|||||||
// src/views/Community/components/StockDetailPanel/components/index.js
|
// src/views/Community/components/StockDetailPanel/components/index.js
|
||||||
export { default as MiniTimelineChart } from './MiniTimelineChart';
|
export { default as MiniTimelineChart } from './MiniTimelineChart';
|
||||||
export { default as StockSearchBar } from './StockSearchBar';
|
|
||||||
export { default as StockTable } from './StockTable';
|
|
||||||
export { default as LockedContent } from './LockedContent';
|
|
||||||
export { default as RelatedStocksTab } from './RelatedStocksTab';
|
|
||||||
|
|||||||
@@ -1,159 +0,0 @@
|
|||||||
// src/views/Community/components/StockDetailPanel/hooks/useStockMonitoring.js
|
|
||||||
import { useSelector, useDispatch, shallowEqual } from 'react-redux';
|
|
||||||
import { useState, useEffect, useRef, useCallback } from 'react';
|
|
||||||
import { fetchStockQuotes } from '../../../../../store/slices/stockSlice';
|
|
||||||
import { message } from 'antd';
|
|
||||||
import { logger } from '../../../../../utils/logger';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 股票实时监控 Hook
|
|
||||||
* 提供定时刷新股票行情的功能
|
|
||||||
*
|
|
||||||
* @param {Array} stocks - 股票列表
|
|
||||||
* @param {string} eventTime - 事件时间
|
|
||||||
* @param {number} interval - 刷新间隔（毫秒），默认 5000ms
|
|
||||||
* @returns {Object} 监控状态和控制方法
|
|
||||||
*/
|
|
||||||
export const useStockMonitoring = (stocks = [], eventTime = null, interval = 5000) => {
|
|
||||||
const dispatch = useDispatch();
|
|
||||||
const [isMonitoring, setIsMonitoring] = useState(false);
|
|
||||||
const monitoringIntervalRef = useRef(null);
|
|
||||||
|
|
||||||
// 从 Redux 获取行情数据和加载状态
|
|
||||||
const quotes = useSelector(state => state.stock.quotes, shallowEqual);
|
|
||||||
const quotesLoading = useSelector(state => state.stock.loading.quotes);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 执行一次行情更新
|
|
||||||
*/
|
|
||||||
const updateQuotes = useCallback(() => {
|
|
||||||
if (stocks.length === 0) {
|
|
||||||
logger.warn('useStockMonitoring', '股票列表为空，跳过更新');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const codes = stocks.map(s => s.stock_code);
|
|
||||||
logger.debug('useStockMonitoring', '更新行情数据', {
|
|
||||||
stockCount: codes.length,
|
|
||||||
eventTime,
|
|
||||||
timestamp: new Date().toISOString()
|
|
||||||
});
|
|
||||||
|
|
||||||
dispatch(fetchStockQuotes({ codes, eventTime }));
|
|
||||||
}, [dispatch, stocks, eventTime]);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 开启实时监控
|
|
||||||
*/
|
|
||||||
const startMonitoring = useCallback(() => {
|
|
||||||
if (isMonitoring) {
|
|
||||||
logger.warn('useStockMonitoring', '监控已经在运行中');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (stocks.length === 0) {
|
|
||||||
message.warning('暂无股票数据，无法开启监控');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
logger.info('useStockMonitoring', '开启实时监控', {
|
|
||||||
interval,
|
|
||||||
stockCount: stocks.length
|
|
||||||
});
|
|
||||||
|
|
||||||
setIsMonitoring(true);
|
|
||||||
message.success(`已开启实时监控，每${interval / 1000}秒自动更新`);
|
|
||||||
|
|
||||||
// 立即执行一次
|
|
||||||
updateQuotes();
|
|
||||||
}, [isMonitoring, stocks, interval, updateQuotes]);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 停止实时监控
|
|
||||||
*/
|
|
||||||
const stopMonitoring = useCallback(() => {
|
|
||||||
if (!isMonitoring) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
logger.info('useStockMonitoring', '停止实时监控');
|
|
||||||
|
|
||||||
setIsMonitoring(false);
|
|
||||||
message.info('已停止实时监控');
|
|
||||||
}, [isMonitoring]);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 切换监控状态
|
|
||||||
*/
|
|
||||||
const toggleMonitoring = useCallback(() => {
|
|
||||||
if (isMonitoring) {
|
|
||||||
stopMonitoring();
|
|
||||||
} else {
|
|
||||||
startMonitoring();
|
|
||||||
}
|
|
||||||
}, [isMonitoring, startMonitoring, stopMonitoring]);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 手动刷新一次
|
|
||||||
*/
|
|
||||||
const manualRefresh = useCallback(() => {
|
|
||||||
logger.debug('useStockMonitoring', '手动刷新行情');
|
|
||||||
updateQuotes();
|
|
||||||
}, [updateQuotes]);
|
|
||||||
|
|
||||||
// 监控定时器效果
|
|
||||||
useEffect(() => {
|
|
||||||
// 清理旧的定时器
|
|
||||||
if (monitoringIntervalRef.current) {
|
|
||||||
clearInterval(monitoringIntervalRef.current);
|
|
||||||
monitoringIntervalRef.current = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isMonitoring && stocks.length > 0) {
|
|
||||||
// 设置定时器
|
|
||||||
monitoringIntervalRef.current = setInterval(() => {
|
|
||||||
updateQuotes();
|
|
||||||
}, interval);
|
|
||||||
|
|
||||||
logger.debug('useStockMonitoring', '定时器已设置', {
|
|
||||||
interval,
|
|
||||||
stockCount: stocks.length
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 清理函数
|
|
||||||
return () => {
|
|
||||||
if (monitoringIntervalRef.current) {
|
|
||||||
clearInterval(monitoringIntervalRef.current);
|
|
||||||
monitoringIntervalRef.current = null;
|
|
||||||
logger.debug('useStockMonitoring', '定时器已清理');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}, [isMonitoring, stocks.length, interval]); // 注意：不依赖 updateQuotes，避免重复创建定时器
|
|
||||||
|
|
||||||
// 组件卸载时自动停止监控
|
|
||||||
useEffect(() => {
|
|
||||||
return () => {
|
|
||||||
if (isMonitoring) {
|
|
||||||
logger.debug('useStockMonitoring', '组件卸载，自动停止监控');
|
|
||||||
setIsMonitoring(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}, []); // 只在卸载时执行
|
|
||||||
|
|
||||||
return {
|
|
||||||
// 状态
|
|
||||||
isMonitoring,
|
|
||||||
quotes,
|
|
||||||
quotesLoading,
|
|
||||||
|
|
||||||
// 控制方法
|
|
||||||
startMonitoring,
|
|
||||||
stopMonitoring,
|
|
||||||
toggleMonitoring,
|
|
||||||
manualRefresh,
|
|
||||||
|
|
||||||
// 工具方法
|
|
||||||
setIsMonitoring
|
|
||||||
};
|
|
||||||
};
|
|
||||||
@@ -1,163 +0,0 @@
|
|||||||
// src/views/Community/components/StockDetailPanel/hooks/useWatchlist.js
|
|
||||||
import { useSelector, useDispatch, shallowEqual } from 'react-redux';
|
|
||||||
import { useEffect, useCallback, useMemo } from 'react';
|
|
||||||
import { loadWatchlist, toggleWatchlist as toggleWatchlistAction } from '@store/slices/stockSlice';
|
|
||||||
import { message } from 'antd';
|
|
||||||
import { logger } from '@utils/logger';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 标准化股票代码为6位格式
|
|
||||||
* 支持: 600000, 600000.SH, 600000.SZ, SH600000 等格式
|
|
||||||
* @param {string} code - 股票代码
|
|
||||||
* @returns {string} 6位标准化代码
|
|
||||||
*/
|
|
||||||
const normalizeStockCode = (code) => {
|
|
||||||
if (!code) return '';
|
|
||||||
const s = String(code).trim().toUpperCase();
|
|
||||||
// 匹配6位数字（可能带 .SH/.SZ 后缀）
|
|
||||||
const m1 = s.match(/^(\d{6})(?:\.(?:SH|SZ))?$/i);
|
|
||||||
if (m1) return m1[1];
|
|
||||||
// 匹配 SH/SZ 前缀格式
|
|
||||||
const m2 = s.match(/^(?:SH|SZ)(\d{6})$/i);
|
|
||||||
if (m2) return m2[1];
|
|
||||||
// 尝试提取任意6位数字
|
|
||||||
const m3 = s.match(/(\d{6})/);
|
|
||||||
if (m3) return m3[1];
|
|
||||||
return s;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 自选股管理 Hook
|
|
||||||
* 封装自选股的加载、添加、移除逻辑
|
|
||||||
*
|
|
||||||
* @param {boolean} shouldLoad - 是否立即加载自选股列表（默认 true）
|
|
||||||
* @returns {Object} 自选股数据和操作方法
|
|
||||||
*/
|
|
||||||
export const useWatchlist = (shouldLoad = true) => {
|
|
||||||
const dispatch = useDispatch();
|
|
||||||
|
|
||||||
// 从 Redux 获取自选股列表
|
|
||||||
const watchlistArray = useSelector(state => state.stock.watchlist, shallowEqual);
|
|
||||||
const loading = useSelector(state => state.stock.loading.watchlist);
|
|
||||||
|
|
||||||
// 转换为 Set 方便快速查询（标准化为6位代码）
|
|
||||||
// 注意: watchlistArray 现在是 { stock_code, stock_name }[] 格式
|
|
||||||
const watchlistSet = useMemo(() => {
|
|
||||||
return new Set(watchlistArray.map(item => normalizeStockCode(item.stock_code)));
|
|
||||||
}, [watchlistArray]);
|
|
||||||
|
|
||||||
// 初始化时加载自选股列表（只在 shouldLoad 为 true 时）
|
|
||||||
useEffect(() => {
|
|
||||||
if (shouldLoad) {
|
|
||||||
logger.debug('useWatchlist', '条件加载自选股列表', { shouldLoad });
|
|
||||||
dispatch(loadWatchlist());
|
|
||||||
}
|
|
||||||
}, [dispatch, shouldLoad]);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 检查股票是否在自选股中（支持带后缀的代码格式）
|
|
||||||
* @param {string} stockCode - 股票代码（支持 600000, 600000.SH 等格式）
|
|
||||||
* @returns {boolean}
|
|
||||||
*/
|
|
||||||
const isInWatchlist = useCallback((stockCode) => {
|
|
||||||
const normalized = normalizeStockCode(stockCode);
|
|
||||||
return watchlistSet.has(normalized);
|
|
||||||
}, [watchlistSet]);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 切换自选股状态
|
|
||||||
* @param {string} stockCode - 股票代码（支持带后缀格式，会自动标准化）
|
|
||||||
* @param {string} stockName - 股票名称
|
|
||||||
* @returns {Promise<boolean>} 操作是否成功
|
|
||||||
*/
|
|
||||||
const toggleWatchlist = useCallback(async (stockCode, stockName) => {
|
|
||||||
const normalized = normalizeStockCode(stockCode);
|
|
||||||
const wasInWatchlist = watchlistSet.has(normalized);
|
|
||||||
|
|
||||||
logger.debug('useWatchlist', '切换自选股状态', {
|
|
||||||
stockCode,
|
|
||||||
normalized,
|
|
||||||
stockName,
|
|
||||||
wasInWatchlist
|
|
||||||
});
|
|
||||||
|
|
||||||
try {
|
|
||||||
// 传递标准化后的6位代码给 Redux action
|
|
||||||
await dispatch(toggleWatchlistAction({
|
|
||||||
stockCode: normalized,
|
|
||||||
stockName,
|
|
||||||
isInWatchlist: wasInWatchlist
|
|
||||||
})).unwrap();
|
|
||||||
|
|
||||||
message.success(wasInWatchlist ? '已从自选股移除' : '已加入自选股');
|
|
||||||
return true;
|
|
||||||
} catch (error) {
|
|
||||||
logger.error('useWatchlist', '切换自选股失败', error, {
|
|
||||||
stockCode,
|
|
||||||
normalized,
|
|
||||||
stockName
|
|
||||||
});
|
|
||||||
message.error(error.message || '操作失败，请稍后重试');
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}, [dispatch, watchlistSet]);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 批量添加到自选股
|
|
||||||
* @param {Array<{code: string, name: string}>} stocks - 股票列表
|
|
||||||
* @returns {Promise<number>} 成功添加的数量
|
|
||||||
*/
|
|
||||||
const batchAddToWatchlist = useCallback(async (stocks) => {
|
|
||||||
logger.debug('useWatchlist', '批量添加自选股', {
|
|
||||||
count: stocks.length
|
|
||||||
});
|
|
||||||
|
|
||||||
let successCount = 0;
|
|
||||||
const promises = stocks.map(async ({ code, name }) => {
|
|
||||||
const normalized = normalizeStockCode(code);
|
|
||||||
if (!watchlistSet.has(normalized)) {
|
|
||||||
try {
|
|
||||||
await dispatch(toggleWatchlistAction({
|
|
||||||
stockCode: normalized,
|
|
||||||
stockName: name,
|
|
||||||
isInWatchlist: false
|
|
||||||
})).unwrap();
|
|
||||||
successCount++;
|
|
||||||
} catch (error) {
|
|
||||||
logger.error('useWatchlist', '添加失败', error, { code, normalized, name });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
await Promise.all(promises);
|
|
||||||
|
|
||||||
if (successCount > 0) {
|
|
||||||
message.success(`成功添加 ${successCount} 只股票到自选股`);
|
|
||||||
}
|
|
||||||
|
|
||||||
return successCount;
|
|
||||||
}, [dispatch, watchlistSet]);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 刷新自选股列表
|
|
||||||
*/
|
|
||||||
const refresh = useCallback(() => {
|
|
||||||
logger.debug('useWatchlist', '刷新自选股列表');
|
|
||||||
dispatch(loadWatchlist());
|
|
||||||
}, [dispatch]);
|
|
||||||
|
|
||||||
return {
|
|
||||||
// 数据
|
|
||||||
watchlist: watchlistArray,
|
|
||||||
watchlistSet,
|
|
||||||
loading,
|
|
||||||
|
|
||||||
// 查询方法
|
|
||||||
isInWatchlist,
|
|
||||||
|
|
||||||
// 操作方法
|
|
||||||
toggleWatchlist,
|
|
||||||
batchAddToWatchlist,
|
|
||||||
refresh
|
|
||||||
};
|
|
||||||
};
|
|
||||||
Reference in New Issue
Block a user