diff --git a/src/views/Company/components/MarketDataView/hooks/useMarketData.ts b/src/views/Company/components/MarketDataView/hooks/useMarketData.ts index db27106f..497502e9 100644 --- a/src/views/Company/components/MarketDataView/hooks/useMarketData.ts +++ b/src/views/Company/components/MarketDataView/hooks/useMarketData.ts @@ -45,6 +45,8 @@ export const useMarketData = ( const isInitializedRef = useRef(false); // 记录上一次的 stockCode,用于判断是否需要重新加载所有数据 const prevStockCodeRef = useRef(stockCode); + // 记录上一次的 period,用于判断是否需要刷新交易数据 + const prevPeriodRef = useRef(period); /** * 加载所有市场数据 @@ -224,16 +226,18 @@ export const useMarketData = ( loadMarketData(); loadMinuteData(); prevStockCodeRef.current = stockCode; + prevPeriodRef.current = period; // 同步重置 period ref,避免切换股票后误触发 refreshTradeData isInitializedRef.current = true; } } - }, [stockCode, loadMarketData, loadMinuteData]); + }, [stockCode, period, loadMarketData, loadMinuteData]); // 监听时间周期变化,只刷新日K线数据 useEffect(() => { - // 只有在已初始化后,period 变化时才单独刷新交易数据 - if (stockCode && isInitializedRef.current) { + // 只有在已初始化后,且 period 真正变化时才单独刷新交易数据 + if (stockCode && isInitializedRef.current && period !== prevPeriodRef.current) { refreshTradeData(); + prevPeriodRef.current = period; } }, [period, refreshTradeData, stockCode]); diff --git a/src/views/Company/components/MarketDataView/index.tsx b/src/views/Company/components/MarketDataView/index.tsx index 573642d7..445cc4c1 100644 --- a/src/views/Company/components/MarketDataView/index.tsx +++ b/src/views/Company/components/MarketDataView/index.tsx @@ -13,7 +13,6 @@ import { useDisclosure, } from '@chakra-ui/react'; import { - ChevronUp, Unlock, ArrowUp, Star, @@ -97,9 +96,8 @@ const MarketDataView: React.FC = ({ stockCode: propStockCod [analysisMap, theme, onOpen] ); - // Tab 配置 - 使用通用 SubTabContainer + // Tab 配置 - 使用通用 SubTabContainer(不含交易数据,交易数据单独显示在上方) const tabConfigs: SubTabConfig[] = [ - { key: 'trade', name: '交易数据', icon: ChevronUp, component: TradeDataPanel }, { key: 'funding', name: '融资融券', icon: Unlock, component: FundingPanel }, { key: 'bigDeal', name: '大宗交易', icon: ArrowUp, component: BigDealPanel }, { key: 'unusual', name: '龙虎榜', icon: Star, component: UnusualPanel }, @@ -142,11 +140,26 @@ const MarketDataView: React.FC = ({ stockCode: propStockCod return ( - + {/* 股票概览 */} {summary && } - {/* 主要内容区域 */} + {/* 交易数据 - 日K/分钟K线(独立显示在 Tab 上方) */} + {!loading && ( + + )} + + {/* 主要内容区域 - Tab */} {loading ? ( diff --git a/src/views/Company/components/MarketDataView/utils/chartOptions.ts b/src/views/Company/components/MarketDataView/utils/chartOptions.ts index 74af9334..5c20b2a4 100644 --- a/src/views/Company/components/MarketDataView/utils/chartOptions.ts +++ b/src/views/Company/components/MarketDataView/utils/chartOptions.ts @@ -557,14 +557,15 @@ export const getKLineDarkGoldOption = ( { left: '3%', right: '3%', - height: '50%', + top: '8%', + height: '55%', containLabel: true, }, { left: '3%', right: '3%', - top: '65%', - height: '20%', + top: '68%', + height: '28%', containLabel: true, }, ], @@ -623,24 +624,29 @@ export const getKLineDarkGoldOption = ( name: '涨幅分析', type: 'scatter', data: scatterData, - symbolSize: 30, - symbol: 'pin', + symbolSize: [80, 36], + symbol: 'roundRect', itemStyle: { - color: goldLight, - shadowBlur: 10, - shadowColor: 'rgba(244, 208, 63, 0.5)', + color: 'rgba(26, 26, 46, 0.9)', + borderColor: gold, + borderWidth: 1, + shadowBlur: 8, + shadowColor: 'rgba(212, 175, 55, 0.4)', }, label: { show: true, - formatter: '★', - fontSize: 20, + formatter: '涨幅分析\n(点击查看)', + fontSize: 10, + lineHeight: 12, position: 'inside', - color: '#FF6B6B', + color: gold, + fontWeight: 'bold', }, emphasis: { - scale: 1.5, + scale: false, itemStyle: { - color: orange, + borderColor: goldLight, + borderWidth: 2, }, }, z: 100,