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 React, { useMemo } from 'react';
|
||||||
import ReactECharts from 'echarts-for-react';
|
import ReactECharts from 'echarts-for-react';
|
||||||
import ChartCard from './ChartCard';
|
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';
|
import type { IncomeProfitTrend, GrowthBars } from '../types';
|
||||||
|
|
||||||
interface IncomeProfitGrowthChartProps {
|
interface IncomeProfitGrowthChartProps {
|
||||||
@@ -135,8 +135,8 @@ const IncomeProfitGrowthChart: React.FC<IncomeProfitGrowthChartProps> = ({
|
|||||||
}), [incomeProfitData, growthData]);
|
}), [incomeProfitData, growthData]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ChartCard title="营业收入与净利润趋势 · 增长率分析" height={320}>
|
<ChartCard title="营收与利润趋势 · 增长率">
|
||||||
<ReactECharts option={option} style={{ height: 320 }} />
|
<ReactECharts option={option} style={{ height: CHART_HEIGHT }} />
|
||||||
</ChartCard>
|
</ChartCard>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -3,8 +3,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { useState, useEffect, useCallback } from 'react';
|
import React, { useState, useEffect, useCallback } from 'react';
|
||||||
import { Box, SimpleGrid, HStack, Heading, Skeleton, IconButton } from '@chakra-ui/react';
|
import { Box, SimpleGrid, Skeleton } from '@chakra-ui/react';
|
||||||
import { RefreshCw } from 'lucide-react';
|
|
||||||
import { stockService } from '@services/eventService';
|
import { stockService } from '@services/eventService';
|
||||||
import {
|
import {
|
||||||
IncomeProfitGrowthChart,
|
IncomeProfitGrowthChart,
|
||||||
@@ -13,7 +12,7 @@ import {
|
|||||||
DetailTable,
|
DetailTable,
|
||||||
ChartCard,
|
ChartCard,
|
||||||
} from './components';
|
} from './components';
|
||||||
import { THEME, CHART_HEIGHT } from './constants';
|
import { CHART_HEIGHT } from './constants';
|
||||||
import type { ForecastReportProps, ForecastData } from './types';
|
import type { ForecastReportProps, ForecastData } from './types';
|
||||||
|
|
||||||
const ForecastReport: React.FC<ForecastReportProps> = ({ stockCode: propStockCode }) => {
|
const ForecastReport: React.FC<ForecastReportProps> = ({ stockCode: propStockCode }) => {
|
||||||
@@ -50,40 +49,10 @@ const ForecastReport: React.FC<ForecastReportProps> = ({ stockCode: propStockCod
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Box>
|
<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 && (
|
{loading && !data && (
|
||||||
<SimpleGrid columns={{ base: 1, md: 2 }} spacing={4}>
|
<SimpleGrid columns={{ base: 1, md: 3 }} spacing={4}>
|
||||||
{[1, 2, 3, 4].map((i) => (
|
{[1, 2, 3].map((i) => (
|
||||||
<ChartCard key={i} title="加载中...">
|
<ChartCard key={i} title="加载中...">
|
||||||
<Skeleton height={`${CHART_HEIGHT}px`} />
|
<Skeleton height={`${CHART_HEIGHT}px`} />
|
||||||
</ChartCard>
|
</ChartCard>
|
||||||
@@ -91,22 +60,16 @@ const ForecastReport: React.FC<ForecastReportProps> = ({ stockCode: propStockCod
|
|||||||
</SimpleGrid>
|
</SimpleGrid>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* 图表区域 */}
|
{/* 图表区域 - 3列布局 */}
|
||||||
{data && (
|
{data && (
|
||||||
<>
|
<SimpleGrid columns={{ base: 1, md: 3 }} spacing={4}>
|
||||||
{/* 合并图表:营收/利润/增长率 */}
|
<IncomeProfitGrowthChart
|
||||||
<Box mb={4}>
|
incomeProfitData={data.income_profit_trend}
|
||||||
<IncomeProfitGrowthChart
|
growthData={data.growth_bars}
|
||||||
incomeProfitData={data.income_profit_trend}
|
/>
|
||||||
growthData={data.growth_bars}
|
<EpsChart data={data.eps_trend} />
|
||||||
/>
|
<PePegChart data={data.pe_peg_axes} />
|
||||||
</Box>
|
</SimpleGrid>
|
||||||
{/* 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