refactor(ForecastReport): 3列布局 + 移除标题
- 移除盈利预测报表标题和刷新按钮 - 3个图表改为3列等宽布局 - 统一图表高度使用 CHART_HEIGHT - 简化标题文字 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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}>
|
||||
<SimpleGrid columns={{ base: 1, md: 3 }} spacing={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>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 详细数据表格 */}
|
||||
|
||||
Reference in New Issue
Block a user