feat: Table cell render 添加自定义转换

react-ui/src/pages/ModelDeployment/List/index.tsx

@@ -189,7 +189,7 @@ function ModelDeployment() {
       dataIndex: 'index',
       key: 'index',
       width: '20%',
-      render: tableCellRender(false, TableCellValueType.PageIndex, {
+      render: tableCellRender(false, TableCellValueType.Index, {
         page: pagination.current! - 1,
         pageSize: pagination.pageSize!,
       }),

react-ui/src/pages/ModelDeployment/ServiceInfo/index.tsx

@@ -30,7 +30,6 @@ import {
   Input,
   Select,
   Table,
-  Tooltip,
   type TablePaginationConfig,
   type TableProps,
 } from 'antd';
@@ -222,7 +221,7 @@ function ServiceInfo() {
       dataIndex: 'index',
       key: 'index',
       width: '20%',
-      render: tableCellRender(false, TableCellValueType.PageIndex, {
+      render: tableCellRender(false, TableCellValueType.Index, {
         page: pagination.current! - 1,
         pageSize: pagination.pageSize!,
       }),
@@ -269,15 +268,9 @@ function ServiceInfo() {
       dataIndex: 'resource',
       key: 'resource',
       width: '20%',
-      render: (resource: string) => (
-        <Tooltip
-          title={getResourceDescription(resource)}
-          placement="topLeft"
-          overlayStyle={{ maxWidth: '400px' }}
-        >
-          <span>{resource ? getResourceDescription(resource) : '--'}</span>
-        </Tooltip>
-      ),
+      render: tableCellRender(true, TableCellValueType.Custom, {
+        format: getResourceDescription,
+      }),
       ellipsis: { showTitle: false },
     },
     {

react-ui/src/pages/Pipeline/index.jsx

@@ -112,9 +112,9 @@ const Pipeline = () => {
       key: 'index',
       width: 120,
       align: 'center',
-      render: tableCellRender(false, TableCellValueType.PageIndex, {
+      render: tableCellRender(false, TableCellValueType.Index, {
         page: pageOption.current.page - 1,
-        size: pageOption.current.size,
+        pageSize: pageOption.current.size,
       }),
     },
     {

react-ui/src/utils/date.ts

@@ -79,7 +79,7 @@ export const canBeConvertToDate = (date?: Date | string | number | null): boolea
  * @return {string} The formatted date string.
  */
 export const formatDate = (
-  date?: Date | string | number | null,
+  date: Date | string | number | null | undefined,
   format: string = 'YYYY-MM-DD HH:mm:ss',
 ): string => {
   if (date === undefined || date === null || date === '') {

react-ui/src/utils/table.tsx

@@ -10,32 +10,36 @@ import dayjs from 'dayjs';
 
 export enum TableCellValueType {
   Index = 'Index',
-  PageIndex = 'PageIndex',
   Text = 'Text',
   Date = 'Date',
   Array = 'Array',
   Link = 'Link',
+  Custom = 'Custom',
 }
 
 export type TableCellValueOptions<T> = {
-  page?: number;
-  pageSize?: number;
-  property?: string;
-  onClick?: (record: T, e: React.MouseEvent) => void;
+  page?: number; // 类型为 Index 时有效
+  pageSize?: number; // 类型为 Index 时有效
+  property?: string; // 类型为 Array 时有效
+  dateFormat?: string; // 类型为 Date 时有效
+  onClick?: (record: T, e: React.MouseEvent) => void; // 类型为 Link 时有效
+  format?: (value: any | undefined | null, record: T, index: number) => string | undefined | null; // 类型为 Custom 时有效
 };
 
 type TableCellFormatter = (value: any | undefined | null) => string | undefined | null;
 
 // 日期转换函数
-const formatDateText: TableCellFormatter = (value?: any | null) => {
-  if (value === undefined || value === null || value === '') {
-    return null;
-  }
-  if (!dayjs(value).isValid()) {
-    return null;
-  }
-  return formatDate(value);
-};
+function formatDateText(dateFormat?: string): TableCellFormatter {
+  return (value: any | undefined | null): ReturnType<TableCellFormatter> => {
+    if (value === undefined || value === null || value === '') {
+      return null;
+    }
+    if (!dayjs(value).isValid()) {
+      return null;
+    }
+    return formatDate(value, dateFormat);
+  };
+}
 
 /**
  * 数组转换函数，将数组元素转换为字符串，用逗号分隔
@@ -43,7 +47,7 @@ const formatDateText: TableCellFormatter = (value?: any | null) => {
  * @returns {TableCellFormatter} Table cell 渲染函数
  */
 function formatArray(property?: string): TableCellFormatter {
-  return (value?: any | null): ReturnType<TableCellFormatter> => {
+  return (value: any | undefined | null): ReturnType<TableCellFormatter> => {
     if (
       value === undefined ||
       value === null ||
@@ -68,21 +72,21 @@ function tableCellRender<T>(
     let text = value;
     switch (type) {
       case TableCellValueType.Index:
-        text = index + 1;
-        break;
-      case TableCellValueType.PageIndex:
-        text = (options?.page ?? 1) * (options?.pageSize ?? 10) + index + 1;
+        text = (options?.page ?? 0) * (options?.pageSize ?? 0) + index + 1;
         break;
       case TableCellValueType.Text:
       case TableCellValueType.Link:
         text = value;
         break;
       case TableCellValueType.Date:
-        text = formatDateText(value);
+        text = formatDateText(options?.dateFormat)(value);
         break;
       case TableCellValueType.Array:
         text = formatArray(options?.property)(value);
         break;
+      case TableCellValueType.Custom:
+        text = options?.format?.(value, record, index);
+        break;
       default:
         break;
     }