chore: 修改 table cell tooltip

react-ui/src/pages/AutoML/components/ExperimentInstance/index.tsx

@@ -8,7 +8,7 @@ import { elapsedTime, formatDate } from '@/utils/date';
 import { to } from '@/utils/promise';
 import { modalConfirm } from '@/utils/ui';
 import { DoubleRightOutlined } from '@ant-design/icons';
-import { App, Button, Checkbox, ConfigProvider, Tooltip } from 'antd';
+import { App, Button, Checkbox, ConfigProvider, Typography } from 'antd';
 import classNames from 'classnames';
 import { useEffect, useMemo } from 'react';
 import { ExperimentListType, experimentListConfig } from '../ExperimentList/config';
@@ -159,9 +159,9 @@ function ExperimentInstanceComponent({
             {elapsedTime(item.create_time, item.finish_time)}
           </div>
           <div className={styles.startTime}>
-            <Tooltip title={formatDate(item.create_time)}>
-              <span>{formatDate(item.create_time)}</span>
-            </Tooltip>
+            <Typography.Text ellipsis={{ tooltip: formatDate(item.create_time) }}>
+              {formatDate(item.create_time)}
+            </Typography.Text>
           </div>
           <div className={styles.statusBox}>
             <img

react-ui/src/pages/Experiment/components/ExperimentInstance/index.tsx

@@ -13,7 +13,7 @@ import { elapsedTime, formatDate } from '@/utils/date';
 import { to } from '@/utils/promise';
 import { modalConfirm } from '@/utils/ui';
 import { DoubleRightOutlined } from '@ant-design/icons';
-import { App, Button, Checkbox, ConfigProvider, Tooltip } from 'antd';
+import { App, Button, Checkbox, ConfigProvider, Typography } from 'antd';
 import classNames from 'classnames';
 import { useEffect, useMemo } from 'react';
 import TensorBoardStatusCell from '../TensorBoardStatus';
@@ -186,9 +186,9 @@ function ExperimentInstanceComponent({
           <div className={styles.description}>
             <div style={{ width: '50%' }}>{elapsedTime(item.create_time, item.finish_time)}</div>
             <div style={{ width: '50%' }} className={styles.startTime}>
-              <Tooltip title={formatDate(item.create_time)}>
-                <span>{formatDate(item.create_time)}</span>
-              </Tooltip>
+              <Typography.Text ellipsis={{ tooltip: formatDate(item.create_time) }}>
+                {formatDate(item.create_time)}
+              </Typography.Text>
             </div>
           </div>
           <div className={styles.statusBox}>

react-ui/src/utils/table.tsx

@@ -6,7 +6,7 @@
 
 import { isEmpty } from '@/utils';
 import { formatDate } from '@/utils/date';
-import { Tooltip } from 'antd';
+import { Typography } from 'antd';
 import dayjs from 'dayjs';
 
 export enum TableCellValueType {
@@ -92,39 +92,52 @@ function tableCellRender<T>(
         break;
     }
 
-    if (ellipsis && text) {
-      return (
-        <Tooltip title={text} placement="topLeft" overlayStyle={{ maxWidth: '400px' }}>
-          {renderCell(text, type === TableCellValueType.Link, record, options?.onClick)}
-        </Tooltip>
-      );
-    } else {
-      return renderCell(text, type === TableCellValueType.Link, record, options?.onClick);
-    }
+    return renderCell(text, ellipsis, type, record, options?.onClick);
   };
 }
 
 function renderCell<T>(
   text: any | undefined | null,
-  isLink: boolean,
+  ellipsis: boolean,
+  type: TableCellValueType = TableCellValueType.Text,
   record: T,
   onClick?: (record: T, e: React.MouseEvent) => void,
 ) {
-  return isLink ? renderLink(text, record, onClick) : renderText(text);
+  return type === TableCellValueType.Link
+    ? renderLink(text, ellipsis, record, onClick)
+    : renderText(text, ellipsis);
 }
 
-function renderText(text: any | undefined | null) {
-  return <span>{!isEmpty(text) ? text : '--'}</span>;
+function renderText(text: any | undefined | null, ellipsis: boolean) {
+  return (
+    <Typography.Paragraph
+      style={{ marginBottom: 0 }}
+      ellipsis={
+        ellipsis && !isEmpty(text)
+          ? {
+              tooltip: {
+                title: text,
+                destroyTooltipOnHide: true,
+                overlayStyle: { maxWidth: 400 },
+              },
+            }
+          : false
+      }
+    >
+      {!isEmpty(text) ? text : '--'}
+    </Typography.Paragraph>
+  );
 }
 
 function renderLink<T>(
   text: any | undefined | null,
+  ellipsis: boolean,
   record: T,
   onClick?: (record: T, e: React.MouseEvent) => void,
 ) {
   return (
     <a className="kf-table-row-link" onClick={(e) => onClick?.(record, e)}>
-      {text}
+      {renderText(text, ellipsis)}
     </a>
   );
 }