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 React, { useMemo } from 'react';
|
||||||
|
import { Box, Text } from '@chakra-ui/react';
|
||||||
import { Table, ConfigProvider, Tag, theme as antTheme } from 'antd';
|
import { Table, ConfigProvider, Tag, theme as antTheme } from 'antd';
|
||||||
import type { ColumnsType } from 'antd/es/table';
|
import type { ColumnsType } from 'antd/es/table';
|
||||||
import type { DetailTableProps, DetailTableRow } from '../types';
|
import type { DetailTableProps, DetailTableRow } from '../types';
|
||||||
@@ -12,7 +13,7 @@ const BLACK_GOLD_THEME = {
|
|||||||
algorithm: antTheme.darkAlgorithm,
|
algorithm: antTheme.darkAlgorithm,
|
||||||
token: {
|
token: {
|
||||||
colorPrimary: '#D4AF37',
|
colorPrimary: '#D4AF37',
|
||||||
colorBgContainer: '#1A202C',
|
colorBgContainer: 'transparent',
|
||||||
colorBgElevated: '#1a1a2e',
|
colorBgElevated: '#1a1a2e',
|
||||||
colorBorder: 'rgba(212, 175, 55, 0.3)',
|
colorBorder: 'rgba(212, 175, 55, 0.3)',
|
||||||
colorText: '#e0e0e0',
|
colorText: '#e0e0e0',
|
||||||
@@ -34,26 +35,6 @@ const BLACK_GOLD_THEME = {
|
|||||||
|
|
||||||
// 表格样式
|
// 表格样式
|
||||||
const tableStyles = `
|
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-left,
|
||||||
.forecast-detail-table .ant-table-cell-fix-right {
|
.forecast-detail-table .ant-table-cell-fix-right {
|
||||||
background: #1A202C !important;
|
background: #1A202C !important;
|
||||||
@@ -62,15 +43,9 @@ const tableStyles = `
|
|||||||
.forecast-detail-table .ant-table-thead .ant-table-cell-fix-right {
|
.forecast-detail-table .ant-table-thead .ant-table-cell-fix-right {
|
||||||
background: rgba(26, 32, 44, 0.95) !important;
|
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 {
|
.forecast-detail-table .ant-table-tbody > tr:hover > td.ant-table-cell-fix-left {
|
||||||
background: #242d3d !important;
|
background: #242d3d !important;
|
||||||
}
|
}
|
||||||
.forecast-detail-table .ant-table-tbody > tr > td {
|
|
||||||
background: #1A202C !important;
|
|
||||||
}
|
|
||||||
.forecast-detail-table .metric-tag {
|
.forecast-detail-table .metric-tag {
|
||||||
background: rgba(212, 175, 55, 0.15);
|
background: rgba(212, 175, 55, 0.15);
|
||||||
border-color: rgba(212, 175, 55, 0.3);
|
border-color: rgba(212, 175, 55, 0.3);
|
||||||
@@ -124,24 +99,22 @@ const DetailTable: React.FC<DetailTableProps> = ({ data }) => {
|
|||||||
}, [rows]);
|
}, [rows]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="forecast-detail-table">
|
<Box className="forecast-detail-table">
|
||||||
<style>{tableStyles}</style>
|
<style>{tableStyles}</style>
|
||||||
<div className="table-header">
|
<Text fontSize="md" fontWeight="bold" color="#D4AF37" mb={3}>
|
||||||
<h4>详细数据表格</h4>
|
详细数据表格
|
||||||
</div>
|
</Text>
|
||||||
<div className="table-body">
|
<ConfigProvider theme={BLACK_GOLD_THEME}>
|
||||||
<ConfigProvider theme={BLACK_GOLD_THEME}>
|
<Table<TableRowData>
|
||||||
<Table<TableRowData>
|
columns={columns}
|
||||||
columns={columns}
|
dataSource={dataSource}
|
||||||
dataSource={dataSource}
|
pagination={false}
|
||||||
pagination={false}
|
size="small"
|
||||||
size="small"
|
scroll={{ x: 'max-content' }}
|
||||||
scroll={{ x: 'max-content' }}
|
bordered
|
||||||
bordered
|
/>
|
||||||
/>
|
</ConfigProvider>
|
||||||
</ConfigProvider>
|
</Box>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user