diff --git a/react-ui/src/components/TableColTitle/index.less b/react-ui/src/components/TableColTitle/index.less new file mode 100644 index 00000000..51207953 --- /dev/null +++ b/react-ui/src/components/TableColTitle/index.less @@ -0,0 +1,3 @@ +.ant-table .ant-table-cell .kf-table-col-title { + margin-bottom: 0; +} diff --git a/react-ui/src/components/TableColTitle/index.tsx b/react-ui/src/components/TableColTitle/index.tsx new file mode 100644 index 00000000..0583f3ed --- /dev/null +++ b/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 ( + + {title} + + ); +} + +export default TableColTitle; diff --git a/react-ui/src/pages/Dataset/components/ResourceVersion/index.tsx b/react-ui/src/pages/Dataset/components/ResourceVersion/index.tsx index 5e04ee17..3dbb3c40 100644 --- a/react-ui/src/pages/Dataset/components/ResourceVersion/index.tsx +++ b/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) { - +
); } diff --git a/react-ui/src/pages/Experiment/Comparison/index.less b/react-ui/src/pages/Experiment/Comparison/index.less index b0984b91..e34f03ad 100644 --- a/react-ui/src/pages/Experiment/Comparison/index.less +++ b/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; + } } } } diff --git a/react-ui/src/pages/Experiment/Comparison/index.tsx b/react-ui/src/pages/Experiment/Comparison/index.tsx index 095cdd15..3ed44cd1 100644 --- a/react-ui/src/pages/Experiment/Comparison/index.tsx +++ b/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: ( - - {name} - - ), + title: , 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: ( - - {name} - - ), + title: , dataIndex: ['metrics', name], key: name, - width: 120, + width: 150, align: 'center', render: tableCellRender(true), sorter: (a, b) => tableSorter(a.metrics?.[name], b.metrics?.[name]), diff --git a/react-ui/src/pages/HyperParameter/components/ExperimentHistory/index.tsx b/react-ui/src/pages/HyperParameter/components/ExperimentHistory/index.tsx index 42b2e644..c4698464 100644 --- a/react-ui/src/pages/HyperParameter/components/ExperimentHistory/index.tsx +++ b/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 (
@@ -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: ( - - {name} - - ), + title: , dataIndex: ['config', name], key: name, width: 120, @@ -108,11 +115,7 @@ function ExperimentHistory({ trialList = [] }: ExperimentHistoryProps) { key: 'metrics', align: 'center', children: metricNames.map((name) => ({ - title: ( - - {name} - - ), + title: , dataIndex: ['metric_analysis', name], key: name, width: 120, diff --git a/react-ui/src/pages/HyperParameter/components/ParameterInfo/index.tsx b/react-ui/src/pages/HyperParameter/components/ParameterInfo/index.tsx index b223988a..d946a080 100644 --- a/react-ui/src/pages/HyperParameter/components/ParameterInfo/index.tsx +++ b/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: ( - - {name} - - ), + title: , dataIndex: name, key: name, width: 150, @@ -85,7 +82,14 @@ function ParameterInfo({ info }: ParameterInfoProps) { return (
超参数
-
+
手动运行超参数
); diff --git a/react-ui/src/pages/Model/components/ModelMetrics/index.less b/react-ui/src/pages/Model/components/ModelMetrics/index.less index 03123746..bca3516c 100644 --- a/react-ui/src/pages/Model/components/ModelMetrics/index.less +++ b/react-ui/src/pages/Model/components/ModelMetrics/index.less @@ -21,6 +21,9 @@ border-left: none !important; } } + .ant-table-column-title { + min-width: 0; + } } } diff --git a/react-ui/src/pages/Model/components/ModelMetrics/index.tsx b/react-ui/src/pages/Model/components/ModelMetrics/index.tsx index 11ef999c..110d28ce 100644 --- a/react-ui/src/pages/Model/components/ModelMetrics/index.tsx +++ b/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: ( - - {name} - - ), + title: , 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} - >{' '} - 训练指标 + > + 训练指标 ), align: 'center', children: metricsNames.map((name) => ({ title: ( -
+ { @@ -211,15 +208,13 @@ function ModelMetrics({ resourceId, identifier, owner, version }: ModelMetricsPr checkSingleMetrics(name); }} onClick={(e) => e.stopPropagation()} - >{' '} - - {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]), @@ -251,6 +246,8 @@ function ModelMetrics({ resourceId, identifier, owner, version }: ModelMetricsPr }} onChange={handleTableChange} rowKey="name" + tableLayout="fixed" + scroll={{ x: '100%' }} />
diff --git a/react-ui/src/stories/BasicTableInfo.stories.tsx b/react-ui/src/stories/BasicTableInfo.stories.tsx index 3d261d03..7f9e9e84 100644 --- a/react-ui/src/stories/BasicTableInfo.stories.tsx +++ b/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 diff --git a/react-ui/src/stories/docs/Configure.mdx b/react-ui/src/stories/docs/Configure.mdx index 6a537304..7651e269 100644 --- a/react-ui/src/stories/docs/Configure.mdx +++ b/react-ui/src/stories/docs/Configure.mdx @@ -31,7 +31,7 @@ export const RightArrow = () => - +