feat: 创建TableColTitle组件，解决内容可变的表格超出的问题

react-ui/src/components/TableColTitle/index.less

@@ -0,0 +1,3 @@
+.ant-table .ant-table-cell .kf-table-col-title {
+  margin-bottom: 0;
+}

react-ui/src/components/TableColTitle/index.tsx

@@ -0,0 +1,32 @@
+/*
+ * @Author: 赵伟
+ * @Date: 2025-03-11 10:52:23
+ * @Description: 用于内容可变的表格类标题
+ */
+
+import { Typography } from 'antd';
+import classNames from 'classnames';
+import './index.less';
+
+type TableColTitleProps = {
+  /** 标题 */
+  title: string;
+  /** 自定义类名 */
+  className?: string;
+  /** 自定义样式 */
+  style?: React.CSSProperties;
+};
+
+function TableColTitle({ title, className, style }: TableColTitleProps) {
+  return (
+    <Typography.Paragraph
+      ellipsis={{ tooltip: title }}
+      className={classNames('kf-table-col-title', className)}
+      style={style}
+    >
+      {title}
+    </Typography.Paragraph>
+  );
+}
+
+export default TableColTitle;

react-ui/src/pages/Dataset/components/ResourceVersion/index.tsx

@@ -58,7 +58,7 @@ function ResourceVersion({ resourceType, info }: ResourceVersionProps) {
       title: '文件大小',
       dataIndex: 'file_size',
       key: 'file_size',
-      render: tableCellRender(),
+      render: tableCellRender(false),
     },
     {
       title: '更新时间',
@@ -99,7 +99,13 @@ function ResourceVersion({ resourceType, info }: ResourceVersionProps) {
           </Button>
         </Flex>
       </Flex>
-      <Table columns={columns} dataSource={fileList} pagination={false} rowKey="url" />
+      <Table
+        columns={columns}
+        dataSource={fileList}
+        pagination={false}
+        rowKey="url"
+        tableLayout="fixed"
+      />
     </div>
   );
 }

react-ui/src/pages/Experiment/Comparison/index.less

@@ -34,13 +34,13 @@
           border-left: none !important;
         }
       }
-      .ant-table-tbody-virtual::after {
-        border-bottom: none !important;
-      }
       .ant-table-footer {
         padding: 0;
         border: none !important;
       }
+      .ant-table-column-title {
+        min-width: 0;
+      }
     }
   }
 }

react-ui/src/pages/Experiment/Comparison/index.tsx

@@ -4,6 +4,7 @@
  * @Description: 实验对比
  */
 
+import TableColTitle from '@/components/TableColTitle';
 import {
   getExpEvaluateInfosReq,
   getExpMetricsReq,
@@ -13,7 +14,7 @@ import { tableSorter } from '@/utils';
 import { to } from '@/utils/promise';
 import tableCellRender, { TableCellValueType } from '@/utils/table';
 import { useSearchParams } from '@umijs/max';
-import { App, Button, Table, TablePaginationConfig, TableProps, Tooltip } from 'antd';
+import { App, Button, Table, TablePaginationConfig, TableProps } from 'antd';
 import classNames from 'classnames';
 import { useEffect, useMemo, useState } from 'react';
 import ExperimentStatusCell from '../components/ExperimentStatusCell';
@@ -161,14 +162,10 @@ function ExperimentComparison() {
         title: `${config.title}参数`,
         align: 'center',
         children: paramsNames.map((name) => ({
-          title: (
-            <Tooltip title={name}>
-              <span>{name}</span>
-            </Tooltip>
-          ),
+          title: <TableColTitle title={name} />,
           dataIndex: ['params', name],
           key: name,
-          width: 120,
+          width: 150,
           align: 'center',
           render: tableCellRender(true),
           sorter: (a, b) => tableSorter(a.params?.[name], b.params?.[name]),
@@ -179,14 +176,10 @@ function ExperimentComparison() {
         title: `${config.title}指标`,
         align: 'center',
         children: metricsNames.map((name) => ({
-          title: (
-            <Tooltip title={name}>
-              <span>{name}</span>
-            </Tooltip>
-          ),
+          title: <TableColTitle title={name} />,
           dataIndex: ['metrics', name],
           key: name,
-          width: 120,
+          width: 150,
           align: 'center',
           render: tableCellRender(true),
           sorter: (a, b) => tableSorter(a.metrics?.[name], b.metrics?.[name]),

react-ui/src/pages/HyperParameter/components/ExperimentHistory/index.tsx

@@ -1,12 +1,13 @@
 import InfoGroup from '@/components/InfoGroup';
 import KFIcon from '@/components/KFIcon';
+import TableColTitle from '@/components/TableColTitle';
 import TrialStatusCell from '@/pages/HyperParameter/components/TrialStatusCell';
 import { HyperParameterFile, HyperParameterTrial } from '@/pages/HyperParameter/types';
 import { getExpMetricsReq } from '@/services/hyperParameter';
 import { downLoadZip } from '@/utils/downloadfile';
 import { to } from '@/utils/promise';
 import tableCellRender, { TableCellValueType } from '@/utils/table';
-import { App, Button, Table, Tooltip, Tree, type TableProps, type TreeDataNode } from 'antd';
+import { App, Button, Table, Tree, type TableProps, type TreeDataNode } from 'antd';
 import classNames from 'classnames';
 import { useEffect, useState } from 'react';
 import styles from './index.less';
@@ -46,6 +47,7 @@ function ExperimentHistory({ trialList = [] }: ExperimentHistoryProps) {
       dataIndex: 'index',
       key: 'index',
       width: 100,
+      fixed: 'left',
       render: (_text, record, index: number) => {
         return (
           <div className={styles['cell-index']}>
@@ -56,27 +58,36 @@ function ExperimentHistory({ trialList = [] }: ExperimentHistoryProps) {
       },
     },
     {
-      title: '运行次数',
-      dataIndex: 'training_iteration',
-      key: 'training_iteration',
-      width: 120,
-      render: tableCellRender(false),
-    },
-    {
-      title: '平均时长（秒）',
-      dataIndex: 'time_avg',
-      key: 'time_avg',
-      width: 150,
-      render: tableCellRender(false, TableCellValueType.Custom, {
-        format: (value = 0) => Number(value).toFixed(2),
-      }),
-    },
-    {
-      title: '状态',
-      dataIndex: 'status',
-      key: 'status',
-      width: 120,
-      render: TrialStatusCell,
+      title: '基本信息',
+      align: 'center',
+      children: [
+        {
+          title: '运行次数',
+          dataIndex: 'training_iteration',
+          key: 'training_iteration',
+          width: 120,
+          fixed: 'left',
+          render: tableCellRender(false),
+        },
+        {
+          title: '平均时长（秒）',
+          dataIndex: 'time_avg',
+          key: 'time_avg',
+          width: 150,
+          fixed: 'left',
+          render: tableCellRender(false, TableCellValueType.Custom, {
+            format: (value = 0) => Number(value).toFixed(2),
+          }),
+        },
+        {
+          title: '状态',
+          dataIndex: 'status',
+          key: 'status',
+          width: 120,
+          fixed: 'left',
+          render: TrialStatusCell,
+        },
+      ],
     },
   ];
 
@@ -87,11 +98,7 @@ function ExperimentHistory({ trialList = [] }: ExperimentHistoryProps) {
       key: 'config',
       align: 'center',
       children: paramsNames.map((name) => ({
-        title: (
-          <Tooltip title={name}>
-            <span>{name}</span>
-          </Tooltip>
-        ),
+        title: <TableColTitle title={name} />,
         dataIndex: ['config', name],
         key: name,
         width: 120,
@@ -108,11 +115,7 @@ function ExperimentHistory({ trialList = [] }: ExperimentHistoryProps) {
       key: 'metrics',
       align: 'center',
       children: metricNames.map((name) => ({
-        title: (
-          <Tooltip title={name}>
-            <span>{name}</span>
-          </Tooltip>
-        ),
+        title: <TableColTitle title={name} />,
         dataIndex: ['metric_analysis', name],
         key: name,
         width: 120,

react-ui/src/pages/HyperParameter/components/ParameterInfo/index.tsx

@@ -1,10 +1,11 @@
+import TableColTitle from '@/components/TableColTitle';
 import {
   getReqParamName,
   type FormParameter,
 } from '@/pages/HyperParameter/components/CreateForm/utils';
 import { HyperParameterData } from '@/pages/HyperParameter/types';
 import tableCellRender, { TableCellValueType } from '@/utils/table';
-import { Table, Tooltip, type TableProps } from 'antd';
+import { Table, type TableProps } from 'antd';
 import { useMemo } from 'react';
 import styles from './index.less';
 
@@ -69,11 +70,7 @@ function ParameterInfo({ info }: ParameterInfoProps) {
     runParameters.length > 0
       ? parameters.map(({ name }) => {
           return {
-            title: (
-              <Tooltip title={name}>
-                <span>{name}</span>
-              </Tooltip>
-            ),
+            title: <TableColTitle title={name} />,
             dataIndex: name,
             key: name,
             width: 150,
@@ -85,7 +82,14 @@ function ParameterInfo({ info }: ParameterInfoProps) {
   return (
     <div className={styles['parameter-info']}>
       <div className={styles['parameter-info__title']}>超参数</div>
-      <Table dataSource={parameters} columns={columns} rowKey="name" bordered pagination={false} />
+      <Table
+        dataSource={parameters}
+        columns={columns}
+        rowKey="name"
+        bordered
+        pagination={false}
+        tableLayout="fixed"
+      />
       <div className={styles['parameter-info__title']}>手动运行超参数</div>
       <Table
         dataSource={runParameters}
@@ -94,6 +98,7 @@ function ParameterInfo({ info }: ParameterInfoProps) {
         bordered
         pagination={false}
         scroll={{ x: '100%' }}
+        tableLayout="fixed"
       />
     </div>
   );

react-ui/src/pages/Model/components/ModelMetrics/index.less

@@ -21,6 +21,9 @@
           border-left: none !important;
         }
       }
+      .ant-table-column-title {
+        min-width: 0;
+      }
     }
   }
 

react-ui/src/pages/Model/components/ModelMetrics/index.tsx

@@ -1,10 +1,11 @@
 import SubAreaTitle from '@/components/SubAreaTitle';
+import TableColTitle from '@/components/TableColTitle';
 import { useCheck } from '@/hooks';
 import { getModelPageVersionsReq, getModelVersionsMetricsReq } from '@/services/dataset';
 import { tableSorter } from '@/utils';
 import { to } from '@/utils/promise';
 import tableCellRender from '@/utils/table';
-import { Checkbox, Table, Tooltip, type TablePaginationConfig, type TableProps } from 'antd';
+import { Checkbox, Flex, Table, type TablePaginationConfig, type TableProps } from 'antd';
 import { useEffect, useMemo, useState } from 'react';
 import MetricsChart, { MetricsChatData } from '../MetricsChart';
 import styles from './index.less';
@@ -174,14 +175,10 @@ function ModelMetrics({ resourceId, identifier, owner, version }: ModelMetricsPr
         title: `训练参数`,
         align: 'center',
         children: paramsNames.map((name) => ({
-          title: (
-            <Tooltip title={name}>
-              <span>{name}</span>
-            </Tooltip>
-          ),
+          title: <TableColTitle title={name} />,
           dataIndex: ['params', name],
           key: name,
-          width: 120,
+          width: 150,
           align: 'center',
           render: tableCellRender(true),
           sorter: (a, b) => tableSorter(a.params?.[name], b.params?.[name]),
@@ -196,14 +193,14 @@ function ModelMetrics({ resourceId, identifier, owner, version }: ModelMetricsPr
               indeterminate={metricsIndeterminate}
               onChange={checkAllMetrics}
               disabled={metricsNames.length === 0}
-            ></Checkbox>{' '}
-            <span>训练指标</span>
+            ></Checkbox>
+            <span style={{ marginLeft: 4 }}>训练指标</span>
           </div>
         ),
         align: 'center',
         children: metricsNames.map((name) => ({
           title: (
-            <div>
+            <Flex align="center">
               <Checkbox
                 checked={isSingleMetricsChecked(name)}
                 onChange={(e) => {
@@ -211,15 +208,13 @@ function ModelMetrics({ resourceId, identifier, owner, version }: ModelMetricsPr
                   checkSingleMetrics(name);
                 }}
                 onClick={(e) => e.stopPropagation()}
-              ></Checkbox>{' '}
-              <Tooltip title={name}>
-                <span>{name}</span>
-              </Tooltip>
-            </div>
+              ></Checkbox>
+              <TableColTitle style={{ marginLeft: 4 }} title={name} />
+            </Flex>
           ),
           dataIndex: ['metrics', name],
           key: name,
-          width: 120,
+          width: 150,
           align: 'center',
           render: tableCellRender(true),
           sorter: (a, b) => tableSorter(a.metrics?.[name], b.metrics?.[name]),
@@ -251,6 +246,8 @@ function ModelMetrics({ resourceId, identifier, owner, version }: ModelMetricsPr
           }}
           onChange={handleTableChange}
           rowKey="name"
+          tableLayout="fixed"
+          scroll={{ x: '100%' }}
         />
       </div>
       <div className={styles['model-metrics__chart']}>

react-ui/src/stories/BasicTableInfo.stories.tsx

@@ -4,7 +4,7 @@ import * as BasicInfoStories from './BasicInfo.stories';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
-  title: 'Components/BasicTableInfo 表格基本信息',
+  title: 'Components/BasicTableInfo 基本信息表格版',
   component: BasicTableInfo,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout

react-ui/src/stories/docs/Configure.mdx

@@ -31,7 +31,7 @@ export const RightArrow = () => <svg
   <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
 </svg>
 
-<Meta title="Configure your project" />
+<Meta title="Documentation/Storybook" />
 
 <div className="sb-container">
   <div className='sb-section-title'>