From 91ed6492206ed25d3b0f60adb85b8953664dd8e7 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Tue, 16 Dec 2025 15:28:59 +0800
Subject: [PATCH] =?UTF-8?q?refactor(MarketDataView):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E9=85=8D=E7=BD=AE=E5=92=8CK=E7=BA=BF?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../panels/TradeDataPanel/KLineModule.tsx     | 14 +----
 .../MarketDataView/utils/chartOptions.ts      | 63 ++++++++++---------
 2 files changed, 35 insertions(+), 42 deletions(-)

diff --git a/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/KLineModule.tsx b/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/KLineModule.tsx
index 781236dd..2e27deeb 100644
--- a/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/KLineModule.tsx
+++ b/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/KLineModule.tsx
@@ -86,19 +86,11 @@ const KLineModule: React.FC<KLineModuleProps> = ({
 
   return (
     <Box
-      bg={darkGoldTheme.bgCard}
-      borderRadius="xl"
-      border="1px solid"
-      borderColor={darkGoldTheme.border}
+      bg="transparent"
       overflow="hidden"
-      transition="all 0.3s ease"
-      _hover={{
-        borderColor: darkGoldTheme.borderHover,
-        boxShadow: `0 4px 20px rgba(212, 175, 55, 0.15)`,
-      }}
     >
       {/* 卡片头部 */}
-      <Box px={6} py={4} borderBottom="1px solid" borderColor={darkGoldTheme.border}>
+      <Box py={4} borderBottom="1px solid" borderColor={darkGoldTheme.border}>
         <HStack justify="space-between" align="center">
           <HStack spacing={3}>
             <Box
@@ -198,7 +190,7 @@ const KLineModule: React.FC<KLineModuleProps> = ({
       </Box>
 
       {/* 卡片内容 */}
-      <Box p={6}>
+      <Box pt={4}>
         {mode === 'daily' ? (
           // 日K线图
           tradeData.length > 0 ? (
diff --git a/src/views/Company/components/MarketDataView/utils/chartOptions.ts b/src/views/Company/components/MarketDataView/utils/chartOptions.ts
index 204810e4..74af9334 100644
--- a/src/views/Company/components/MarketDataView/utils/chartOptions.ts
+++ b/src/views/Company/components/MarketDataView/utils/chartOptions.ts
@@ -131,15 +131,17 @@ export const getKLineOption = (
     ],
     grid: [
       {
-        left: '10%',
-        right: '10%',
+        left: '3%',
+        right: '3%',
         height: '50%',
+        containLabel: true,
       },
       {
-        left: '10%',
-        right: '10%',
+        left: '3%',
+        right: '3%',
         top: '65%',
         height: '20%',
+        containLabel: true,
       },
     ],
     series: [
@@ -312,16 +314,18 @@ export const getMinuteKLineOption = (theme: Theme, minuteData: MinuteData | null
     },
     grid: [
       {
-        left: '8%',
-        right: '8%',
+        left: '3%',
+        right: '3%',
         top: '20%',
         height: '60%',
+        containLabel: true,
       },
       {
-        left: '8%',
-        right: '8%',
+        left: '3%',
+        right: '3%',
         top: '83%',
         height: '12%',
+        containLabel: true,
       },
     ],
     xAxis: [
@@ -483,7 +487,8 @@ export const getKLineDarkGoldOption = (
     animation: true,
     legend: {
       data: ['K线', 'MA5', 'MA10', 'MA20'],
-      top: 10,
+      top: 5,
+      left: 'center',
       textStyle: {
         color: textColor,
       },
@@ -550,15 +555,17 @@ export const getKLineDarkGoldOption = (
     ],
     grid: [
       {
-        left: '10%',
-        right: '10%',
+        left: '3%',
+        right: '3%',
         height: '50%',
+        containLabel: true,
       },
       {
-        left: '10%',
-        right: '10%',
+        left: '3%',
+        right: '3%',
         top: '65%',
         height: '20%',
+        containLabel: true,
       },
     ],
     series: [
@@ -683,15 +690,6 @@ export const getMinuteKLineDarkGoldOption = (minuteData: MinuteData | null): ECh
 
   return {
     backgroundColor: 'transparent',
-    title: {
-      text: `${minuteData.name} 分钟K线 (${minuteData.trade_date})`,
-      left: 'center',
-      textStyle: {
-        color: gold,
-        fontSize: 16,
-        fontWeight: 'bold',
-      },
-    },
     tooltip: {
       trigger: 'axis',
       axisPointer: { type: 'cross' },
@@ -728,7 +726,8 @@ export const getMinuteKLineDarkGoldOption = (minuteData: MinuteData | null): ECh
     },
     legend: {
       data: ['分钟K线', '均价线', '成交量'],
-      top: 35,
+      top: 5,
+      left: 'center',
       textStyle: {
         color: textColor,
         fontSize: 12,
@@ -738,16 +737,18 @@ export const getMinuteKLineDarkGoldOption = (minuteData: MinuteData | null): ECh
     },
     grid: [
       {
-        left: '8%',
-        right: '8%',
-        top: '20%',
-        height: '60%',
+        left: '3%',
+        right: '3%',
+        top: '10%',
+        height: '65%',
+        containLabel: true,
       },
       {
-        left: '8%',
-        right: '8%',
-        top: '83%',
-        height: '12%',
+        left: '3%',
+        right: '3%',
+        top: '78%',
+        height: '15%',
+        containLabel: true,
       },
     ],
     xAxis: [