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