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:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user