refactor(MarketDataView): 优化图表配置和K线模块

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

Co-Authored-By: Claude <noreply@anthropic.com>

src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/KLineModule.tsx

@@ -86,19 +86,11 @@ const KLineModule: React.FC<KLineModuleProps> = ({
 
   return (
     <Box
-      bg={darkGoldTheme.bgCard}
+      bg="transparent"
-      borderRadius="xl"
-      border="1px solid"
-      borderColor={darkGoldTheme.border}
       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 ? (

src/views/Company/components/MarketDataView/utils/chartOptions.ts

@@ -131,15 +131,17 @@ export const getKLineOption = (
     ],
     grid: [
       {
-        left: '10%',
+        left: '3%',
-        right: '10%',
+        right: '3%',
         height: '50%',
+        containLabel: true,
       },
       {
-        left: '10%',
+        left: '3%',
-        right: '10%',
+        right: '3%',
         top: '65%',
         height: '20%',
+        containLabel: true,
       },
     ],
     series: [
@@ -312,16 +314,18 @@ export const getMinuteKLineOption = (theme: Theme, minuteData: MinuteData | null
     },
     grid: [
       {
-        left: '8%',
+        left: '3%',
-        right: '8%',
+        right: '3%',
         top: '20%',
         height: '60%',
+        containLabel: true,
       },
       {
-        left: '8%',
+        left: '3%',
-        right: '8%',
+        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%',
+        left: '3%',
-        right: '10%',
+        right: '3%',
         height: '50%',
+        containLabel: true,
       },
       {
-        left: '10%',
+        left: '3%',
-        right: '10%',
+        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%',
+        left: '3%',
-        right: '8%',
+        right: '3%',
-        top: '20%',
+        top: '10%',
-        height: '60%',
+        height: '65%',
+        containLabel: true,
       },
       {
-        left: '8%',
+        left: '3%',
-        right: '8%',
+        right: '3%',
-        top: '83%',
+        top: '78%',
-        height: '12%',
+        height: '15%',
+        containLabel: true,
       },
     ],
     xAxis: [