fix(MainBusinessAnalysis): 优化历史对比表格列标题和边框

- 简化报告类型显示:2024年三季报 -> 24Q3
- 缩小列宽,支持更好的横向滚动
- 移除外层边框和圆角,减少视觉干扰
- 业务列添加 ellipsis 省略过长内容

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-29 15:01:37 +08:00
parent 22981963ef
commit 59de26b118

View File

@@ -88,19 +88,35 @@ interface HistoricalRowData {
}
// 历史对比表格组件(整合业务明细)
interface HistoricalComparisonTableProps {
export interface HistoricalComparisonTableProps {
historicalData: (ProductClassification | IndustryClassification)[];
businessItems: BusinessItem[];
hasProductData: boolean;
latestReportType: string;
/** 是否隐藏标题(用于弹窗中避免重复) */
hideTitle?: boolean;
}
const HistoricalComparisonTable: React.FC<HistoricalComparisonTableProps> = ({
export const HistoricalComparisonTable: React.FC<HistoricalComparisonTableProps> = ({
historicalData,
businessItems,
hasProductData,
latestReportType,
hideTitle = false,
}) => {
// 简化报告类型显示2024年三季报 -> 24Q3
const formatReportType = (reportType: string): string => {
const match = reportType.match(/(\d{4})年(.+)/);
if (!match) return reportType;
const year = match[1].slice(2); // 2024 -> 24
const type = match[2];
if (type.includes('一季')) return `${year}Q1`;
if (type.includes('中报') || type.includes('半年')) return `${year}Q2`;
if (type.includes('三季')) return `${year}Q3`;
if (type.includes('年报')) return `${year}Y`;
return `${year}`;
};
// 动态生成列配置
const columns: ColumnsType<HistoricalRowData> = useMemo(() => {
const cols: ColumnsType<HistoricalRowData> = [
@@ -109,23 +125,24 @@ const HistoricalComparisonTable: React.FC<HistoricalComparisonTableProps> = ({
dataIndex: 'business',
key: 'business',
fixed: 'left',
width: 150,
width: 120,
ellipsis: true,
},
{
title: `毛利率(${latestReportType})`,
title: `毛利率`,
dataIndex: 'grossMargin',
key: 'grossMargin',
align: 'right',
width: 120,
width: 80,
render: (value: number | undefined) =>
value !== undefined ? formatUtils.formatPercent(value) : '-',
},
{
title: `利润(${latestReportType})`,
title: `利润`,
dataIndex: 'profit',
key: 'profit',
align: 'right',
width: 100,
width: 90,
render: (value: number | undefined) =>
value !== undefined ? formatUtils.formatLargeNumber(value) : '-',
},
@@ -133,12 +150,13 @@ const HistoricalComparisonTable: React.FC<HistoricalComparisonTableProps> = ({
// 添加各期间营收列
historicalData.slice(0, 4).forEach((period) => {
const shortPeriod = formatReportType(period.report_type);
cols.push({
title: `营收(${period.report_type})`,
title: shortPeriod,
dataIndex: period.period,
key: period.period,
align: 'right',
width: 120,
width: 90,
render: (value: number | string | undefined) =>
value !== undefined && value !== '-'
? formatUtils.formatLargeNumber(value as number)
@@ -179,20 +197,19 @@ const HistoricalComparisonTable: React.FC<HistoricalComparisonTableProps> = ({
return (
<Box
bg={THEME.cardBg}
border="1px solid"
borderColor={THEME.border}
borderRadius="md"
overflow="hidden"
h="100%"
className="main-business-table"
>
<style>{fixedColumnStyles}</style>
<Box px={4} py={3} borderBottom="1px solid" borderColor={THEME.border}>
<Heading size="sm" color={THEME.headingColor}>
</Heading>
</Box>
<Box p={4} overflowX="auto">
{!hideTitle && (
<Box px={4} py={3} borderBottom="1px solid" borderColor={THEME.border}>
<Heading size="sm" color={THEME.headingColor}>
</Heading>
</Box>
)}
<Box p={2} overflowX="auto">
<ConfigProvider theme={BLACK_GOLD_THEME}>
<AntTable<HistoricalRowData>
columns={columns}