style(DetailTable): 简化布局,标题+表格无嵌套

- 移除外层卡片包装,直接显示标题和表格
- 使用 Chakra Text 作为标题
- 表格背景改为透明

🤖 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:43:05 +08:00
parent e2f9f3278f
commit 024126025d

View File

@@ -1,8 +1,9 @@
/**
* 详细数据表格 - 纯 Ant Design 黑金主题
* 详细数据表格 - 黑金主题
*/
import React, { useMemo } from 'react';
import { Box, Text } from '@chakra-ui/react';
import { Table, ConfigProvider, Tag, theme as antTheme } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import type { DetailTableProps, DetailTableRow } from '../types';
@@ -12,7 +13,7 @@ const BLACK_GOLD_THEME = {
algorithm: antTheme.darkAlgorithm,
token: {
colorPrimary: '#D4AF37',
colorBgContainer: '#1A202C',
colorBgContainer: 'transparent',
colorBgElevated: '#1a1a2e',
colorBorder: 'rgba(212, 175, 55, 0.3)',
colorText: '#e0e0e0',
@@ -34,26 +35,6 @@ const BLACK_GOLD_THEME = {
// 表格样式
const tableStyles = `
.forecast-detail-table {
background: #1A202C;
border: 1px solid rgba(212, 175, 55, 0.3);
border-radius: 6px;
overflow: hidden;
}
.forecast-detail-table .table-header {
padding: 12px 16px;
border-bottom: 1px solid rgba(212, 175, 55, 0.3);
background: rgba(212, 175, 55, 0.1);
}
.forecast-detail-table .table-header h4 {
margin: 0;
color: #D4AF37;
font-size: 14px;
font-weight: 600;
}
.forecast-detail-table .table-body {
padding: 16px;
}
.forecast-detail-table .ant-table-cell-fix-left,
.forecast-detail-table .ant-table-cell-fix-right {
background: #1A202C !important;
@@ -62,15 +43,9 @@ const tableStyles = `
.forecast-detail-table .ant-table-thead .ant-table-cell-fix-right {
background: rgba(26, 32, 44, 0.95) !important;
}
.forecast-detail-table .ant-table-tbody > tr:hover > td {
background: rgba(212, 175, 55, 0.08) !important;
}
.forecast-detail-table .ant-table-tbody > tr:hover > td.ant-table-cell-fix-left {
background: #242d3d !important;
}
.forecast-detail-table .ant-table-tbody > tr > td {
background: #1A202C !important;
}
.forecast-detail-table .metric-tag {
background: rgba(212, 175, 55, 0.15);
border-color: rgba(212, 175, 55, 0.3);
@@ -124,24 +99,22 @@ const DetailTable: React.FC<DetailTableProps> = ({ data }) => {
}, [rows]);
return (
<div className="forecast-detail-table">
<Box className="forecast-detail-table">
<style>{tableStyles}</style>
<div className="table-header">
<h4></h4>
</div>
<div className="table-body">
<ConfigProvider theme={BLACK_GOLD_THEME}>
<Table<TableRowData>
columns={columns}
dataSource={dataSource}
pagination={false}
size="small"
scroll={{ x: 'max-content' }}
bordered
/>
</ConfigProvider>
</div>
</div>
<Text fontSize="md" fontWeight="bold" color="#D4AF37" mb={3}>
</Text>
<ConfigProvider theme={BLACK_GOLD_THEME}>
<Table<TableRowData>
columns={columns}
dataSource={dataSource}
pagination={false}
size="small"
scroll={{ x: 'max-content' }}
bordered
/>
</ConfigProvider>
</Box>
);
};