From e2f9f3278f81fda6d7ca621d16f6020e82187d3a Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Tue, 16 Dec 2025 20:40:34 +0800
Subject: [PATCH] =?UTF-8?q?refactor(ForecastReport):=203=E5=88=97=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=20+=20=E7=A7=BB=E9=99=A4=E6=A0=87=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除盈利预测报表标题和刷新按钮
- 3个图表改为3列等宽布局
- 统一图表高度使用 CHART_HEIGHT
- 简化标题文字

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/IncomeProfitGrowthChart.tsx    |  6 +-
 .../components/ForecastReport/index.tsx       | 63 ++++---------------
 2 files changed, 16 insertions(+), 53 deletions(-)

diff --git a/src/views/Company/components/ForecastReport/components/IncomeProfitGrowthChart.tsx b/src/views/Company/components/ForecastReport/components/IncomeProfitGrowthChart.tsx
index 492a724a..29750490 100644
--- a/src/views/Company/components/ForecastReport/components/IncomeProfitGrowthChart.tsx
+++ b/src/views/Company/components/ForecastReport/components/IncomeProfitGrowthChart.tsx
@@ -5,7 +5,7 @@
 import React, { useMemo } from 'react';
 import ReactECharts from 'echarts-for-react';
 import ChartCard from './ChartCard';
-import { CHART_COLORS, BASE_CHART_CONFIG, THEME } from '../constants';
+import { CHART_COLORS, BASE_CHART_CONFIG, CHART_HEIGHT, THEME } from '../constants';
 import type { IncomeProfitTrend, GrowthBars } from '../types';
 
 interface IncomeProfitGrowthChartProps {
@@ -135,8 +135,8 @@ const IncomeProfitGrowthChart: React.FC<IncomeProfitGrowthChartProps> = ({
   }), [incomeProfitData, growthData]);
 
   return (
-    <ChartCard title="营业收入与净利润趋势 · 增长率分析" height={320}>
-      <ReactECharts option={option} style={{ height: 320 }} />
+    <ChartCard title="营收与利润趋势 · 增长率">
+      <ReactECharts option={option} style={{ height: CHART_HEIGHT }} />
     </ChartCard>
   );
 };
diff --git a/src/views/Company/components/ForecastReport/index.tsx b/src/views/Company/components/ForecastReport/index.tsx
index 25c89ef7..f4eef29d 100644
--- a/src/views/Company/components/ForecastReport/index.tsx
+++ b/src/views/Company/components/ForecastReport/index.tsx
@@ -3,8 +3,7 @@
  */
 
 import React, { useState, useEffect, useCallback } from 'react';
-import { Box, SimpleGrid, HStack, Heading, Skeleton, IconButton } from '@chakra-ui/react';
-import { RefreshCw } from 'lucide-react';
+import { Box, SimpleGrid, Skeleton } from '@chakra-ui/react';
 import { stockService } from '@services/eventService';
 import {
   IncomeProfitGrowthChart,
@@ -13,7 +12,7 @@ import {
   DetailTable,
   ChartCard,
 } from './components';
-import { THEME, CHART_HEIGHT } from './constants';
+import { CHART_HEIGHT } from './constants';
 import type { ForecastReportProps, ForecastData } from './types';
 
 const ForecastReport: React.FC<ForecastReportProps> = ({ stockCode: propStockCode }) => {
@@ -50,40 +49,10 @@ const ForecastReport: React.FC<ForecastReportProps> = ({ stockCode: propStockCod
 
   return (
     <Box>
-      {/* 标题栏 */}
-      <HStack align="center" justify="space-between" mb={4}>
-        <Heading size="md" color={THEME.gold}>
-          盈利预测报表
-        </Heading>
-        <IconButton
-          icon={<RefreshCw size={14} className={loading ? 'spin' : ''} />}
-          onClick={load}
-          isLoading={loading}
-          variant="outline"
-          size="sm"
-          aria-label="刷新数据"
-          borderColor={THEME.goldBorder}
-          color={THEME.gold}
-          _hover={{
-            bg: THEME.goldLight,
-            borderColor: THEME.gold,
-          }}
-        />
-        <style>{`
-          .spin {
-            animation: spin 1s linear infinite;
-          }
-          @keyframes spin {
-            from { transform: rotate(0deg); }
-            to { transform: rotate(360deg); }
-          }
-        `}</style>
-      </HStack>
-
       {/* 加载骨架屏 */}
       {loading && !data && (
-        <SimpleGrid columns={{ base: 1, md: 2 }} spacing={4}>
-          {[1, 2, 3, 4].map((i) => (
+        <SimpleGrid columns={{ base: 1, md: 3 }} spacing={4}>
+          {[1, 2, 3].map((i) => (
             <ChartCard key={i} title="加载中...">
               <Skeleton height={`${CHART_HEIGHT}px`} />
             </ChartCard>
@@ -91,22 +60,16 @@ const ForecastReport: React.FC<ForecastReportProps> = ({ stockCode: propStockCod
         </SimpleGrid>
       )}
 
-      {/* 图表区域 */}
+      {/* 图表区域 - 3列布局 */}
       {data && (
-        <>
-          {/* 合并图表：营收/利润/增长率 */}
-          <Box mb={4}>
-            <IncomeProfitGrowthChart
-              incomeProfitData={data.income_profit_trend}
-              growthData={data.growth_bars}
-            />
-          </Box>
-          {/* EPS 和 PE/PEG */}
-          <SimpleGrid columns={{ base: 1, md: 2 }} spacing={4}>
-            <EpsChart data={data.eps_trend} />
-            <PePegChart data={data.pe_peg_axes} />
-          </SimpleGrid>
-        </>
+        <SimpleGrid columns={{ base: 1, md: 3 }} spacing={4}>
+          <IncomeProfitGrowthChart
+            incomeProfitData={data.income_profit_trend}
+            growthData={data.growth_bars}
+          />
+          <EpsChart data={data.eps_trend} />
+          <PePegChart data={data.pe_peg_axes} />
+        </SimpleGrid>
       )}
 
       {/* 详细数据表格 */}