From 67340e9b82fbafc7329ed7deef5799fa9ea8d5b9 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Tue, 16 Dec 2025 16:12:39 +0800
Subject: [PATCH] =?UTF-8?q?feat(MarketDataView):=20K=E7=BA=BF=E5=9B=BE?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=20-=20=E6=8C=89=E9=9C=80=E5=88=B7=E6=96=B0?=
 =?UTF-8?q?=20+=20=E9=BB=91=E9=87=91=E4=B8=BB=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

 - useMarketData: 新增 refreshTradeData，切换时间范围只刷新K线数据
 - chartOptions: 新增黑金主题配置函数
 - 优化 useEffect，避免切换周期时全量刷新
---
 .../MarketDataView/hooks/useMarketData.ts     | 10 ++++--
 .../components/MarketDataView/index.tsx       | 23 ++++++++++---
 .../MarketDataView/utils/chartOptions.ts      | 32 +++++++++++--------
 3 files changed, 44 insertions(+), 21 deletions(-)

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<MarketDataViewProps> = ({ 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<MarketDataViewProps> = ({ stockCode: propStockCod
   return (
     <Box bg={'#1A202C'} minH="100vh" color={theme.textPrimary}>
       <Container maxW="container.xl" py={6}>
-        <VStack align="stretch">
+        <VStack align="stretch" spacing={6}>
           {/* 股票概览 */}
           {summary && <StockSummaryCard summary={summary} theme={theme} />}
 
-          {/* 主要内容区域 */}
+          {/* 交易数据 - 日K/分钟K线（独立显示在 Tab 上方） */}
+          {!loading && (
+            <TradeDataPanel
+              theme={theme}
+              tradeData={tradeData}
+              minuteData={minuteData}
+              minuteLoading={minuteLoading}
+              analysisMap={analysisMap}
+              onLoadMinuteData={loadMinuteData}
+              onChartClick={handleChartClick}
+              selectedPeriod={selectedPeriod}
+              onPeriodChange={setSelectedPeriod}
+            />
+          )}
+
+          {/* 主要内容区域 - Tab */}
           {loading ? (
             <ThemedCard theme={theme}>
               <CardBody>
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,