From 024126025dd679cc68889947660230bcc32e4009 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Tue, 16 Dec 2025 20:43:05 +0800
Subject: [PATCH] =?UTF-8?q?style(DetailTable):=20=E7=AE=80=E5=8C=96?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=EF=BC=8C=E6=A0=87=E9=A2=98+=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E6=97=A0=E5=B5=8C=E5=A5=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../ForecastReport/components/DetailTable.tsx | 63 ++++++-------------
 1 file changed, 18 insertions(+), 45 deletions(-)

diff --git a/src/views/Company/components/ForecastReport/components/DetailTable.tsx b/src/views/Company/components/ForecastReport/components/DetailTable.tsx
index 85c1c8f2..975a8144 100644
--- a/src/views/Company/components/ForecastReport/components/DetailTable.tsx
+++ b/src/views/Company/components/ForecastReport/components/DetailTable.tsx
@@ -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>
   );
 };