refactor(FinancialPanorama): 使用 FinancialOverviewPanel 替换原头部组件

- 移除 StockInfoHeader 和 KeyMetricsOverview
- 使用新的三模块面板组件
- ROE 去重,布局统一

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-16 20:17:19 +08:00
parent faf2446203
commit e734319ec4

View File

@@ -52,7 +52,7 @@ import SubTabContainer, { type SubTabConfig } from '@components/SubTabContainer'
import { useFinancialData, type DataTypeKey } from './hooks'; import { useFinancialData, type DataTypeKey } from './hooks';
import { COLORS } from './constants'; import { COLORS } from './constants';
import { calculateYoYChange, getCellBackground, getMetricChartOption } from './utils'; import { calculateYoYChange, getCellBackground, getMetricChartOption } from './utils';
import { PeriodSelector, KeyMetricsOverview, StockInfoHeader, MainBusinessAnalysis } from './components'; import { PeriodSelector, FinancialOverviewPanel, MainBusinessAnalysis } from './components';
import { import {
BalanceSheetTab, BalanceSheetTab,
IncomeStatementTab, IncomeStatementTab,
@@ -275,32 +275,24 @@ const FinancialPanorama: React.FC<FinancialPanoramaProps> = ({ stockCode: propSt
return ( return (
<Container maxW="container.xl" py={5}> <Container maxW="container.xl" py={5}>
<VStack spacing={6} align="stretch"> <VStack spacing={6} align="stretch">
{/* 股票信息头部 */} {/* 财务全景面板(三列布局:成长能力、盈利与回报、风险与运营) */}
{loading ? ( {loading ? (
<Skeleton height="150px" /> <Skeleton height="100px" />
) : ( ) : (
<StockInfoHeader <FinancialOverviewPanel
stockInfo={stockInfo} stockInfo={stockInfo}
positiveColor={positiveColor} financialMetrics={financialMetrics}
negativeColor={negativeColor}
/> />
)} )}
{/* 关键指标速览 */}
{!loading && stockInfo && financialMetrics.length > 0 && (
<KeyMetricsOverview financialMetrics={financialMetrics} />
)}
{/* 主营业务 */} {/* 主营业务 */}
{!loading && stockInfo && ( {!loading && stockInfo && (
<Card bg="gray.900" shadow="md" border="1px solid" borderColor="rgba(212, 175, 55, 0.3)"> <Box>
<CardBody> <Text fontSize="lg" fontWeight="bold" mb={4} color="#D4AF37">
<Text fontSize="lg" fontWeight="bold" mb={4} color="#D4AF37">
</Text>
</Text> <MainBusinessAnalysis mainBusiness={mainBusiness} />
<MainBusinessAnalysis mainBusiness={mainBusiness} /> </Box>
</CardBody>
</Card>
)} )}
{/* 三大财务报表 - 使用 SubTabContainer 二级导航 */} {/* 三大财务报表 - 使用 SubTabContainer 二级导航 */}