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)[]; historicalData: (ProductClassification | IndustryClassification)[];
businessItems: BusinessItem[]; businessItems: BusinessItem[];
hasProductData: boolean; hasProductData: boolean;
latestReportType: string; latestReportType: string;
/** 是否隐藏标题(用于弹窗中避免重复) */
hideTitle?: boolean;
} }
const HistoricalComparisonTable: React.FC<HistoricalComparisonTableProps> = ({ export const HistoricalComparisonTable: React.FC<HistoricalComparisonTableProps> = ({
historicalData, historicalData,
businessItems, businessItems,
hasProductData, hasProductData,
latestReportType, 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 columns: ColumnsType<HistoricalRowData> = useMemo(() => {
const cols: ColumnsType<HistoricalRowData> = [ const cols: ColumnsType<HistoricalRowData> = [
@@ -109,23 +125,24 @@ const HistoricalComparisonTable: React.FC<HistoricalComparisonTableProps> = ({
dataIndex: 'business', dataIndex: 'business',
key: 'business', key: 'business',
fixed: 'left', fixed: 'left',
width: 150, width: 120,
ellipsis: true,
}, },
{ {
title: `毛利率(${latestReportType})`, title: `毛利率`,
dataIndex: 'grossMargin', dataIndex: 'grossMargin',
key: 'grossMargin', key: 'grossMargin',
align: 'right', align: 'right',
width: 120, width: 80,
render: (value: number | undefined) => render: (value: number | undefined) =>
value !== undefined ? formatUtils.formatPercent(value) : '-', value !== undefined ? formatUtils.formatPercent(value) : '-',
}, },
{ {
title: `利润(${latestReportType})`, title: `利润`,
dataIndex: 'profit', dataIndex: 'profit',
key: 'profit', key: 'profit',
align: 'right', align: 'right',
width: 100, width: 90,
render: (value: number | undefined) => render: (value: number | undefined) =>
value !== undefined ? formatUtils.formatLargeNumber(value) : '-', value !== undefined ? formatUtils.formatLargeNumber(value) : '-',
}, },
@@ -133,12 +150,13 @@ const HistoricalComparisonTable: React.FC<HistoricalComparisonTableProps> = ({
// 添加各期间营收列 // 添加各期间营收列
historicalData.slice(0, 4).forEach((period) => { historicalData.slice(0, 4).forEach((period) => {
const shortPeriod = formatReportType(period.report_type);
cols.push({ cols.push({
title: `营收(${period.report_type})`, title: shortPeriod,
dataIndex: period.period, dataIndex: period.period,
key: period.period, key: period.period,
align: 'right', align: 'right',
width: 120, width: 90,
render: (value: number | string | undefined) => render: (value: number | string | undefined) =>
value !== undefined && value !== '-' value !== undefined && value !== '-'
? formatUtils.formatLargeNumber(value as number) ? formatUtils.formatLargeNumber(value as number)
@@ -179,20 +197,19 @@ const HistoricalComparisonTable: React.FC<HistoricalComparisonTableProps> = ({
return ( return (
<Box <Box
bg={THEME.cardBg} bg={THEME.cardBg}
border="1px solid"
borderColor={THEME.border}
borderRadius="md"
overflow="hidden" overflow="hidden"
h="100%" h="100%"
className="main-business-table" className="main-business-table"
> >
<style>{fixedColumnStyles}</style> <style>{fixedColumnStyles}</style>
<Box px={4} py={3} borderBottom="1px solid" borderColor={THEME.border}> {!hideTitle && (
<Heading size="sm" color={THEME.headingColor}> <Box px={4} py={3} borderBottom="1px solid" borderColor={THEME.border}>
<Heading size="sm" color={THEME.headingColor}>
</Heading>
</Box> </Heading>
<Box p={4} overflowX="auto"> </Box>
)}
<Box p={2} overflowX="auto">
<ConfigProvider theme={BLACK_GOLD_THEME}> <ConfigProvider theme={BLACK_GOLD_THEME}>
<AntTable<HistoricalRowData> <AntTable<HistoricalRowData>
columns={columns} columns={columns}