From 5ad9ac277c32b3113c22ae45b823269ba50377d2 Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Tue, 3 Feb 2026 20:49:52 +0800
Subject: [PATCH] style: benchmark progress

---
 src/components/status-tag/index.tsx           |  10 +-
 .../benchmark/hooks/use-benchmark-columns.tsx | 100 ------------------
 .../benchmark/hooks/use-column-settings.tsx   |  53 ++++++----
 3 files changed, 43 insertions(+), 120 deletions(-)

diff --git a/src/components/status-tag/index.tsx b/src/components/status-tag/index.tsx
index 997dc979..6728666d 100644
--- a/src/components/status-tag/index.tsx
+++ b/src/components/status-tag/index.tsx
@@ -3,6 +3,7 @@ import { StatusType } from '@/config/types';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { Button, Divider, Tooltip } from 'antd';
 import classNames from 'classnames';
+import _ from 'lodash';
 import React, { useMemo } from 'react';
 import 'simplebar-react/dist/simplebar.min.css';
 import styled from 'styled-components';
@@ -91,8 +92,13 @@ const StatusTag: React.FC<StatusTagProps> = ({
     if (download && percent > 0 && percent <= 100) {
       return (
         <>
-          <span className="progress">{download?.percent || 0}%</span>
-          <span className="download" style={{ width: `${percent}%` }}></span>
+          <span className="progress">
+            {_.round(download?.percent, 0) || 0}%
+          </span>
+          <span
+            className="download"
+            style={{ width: `${_.round(percent, 0)}%` }}
+          ></span>
         </>
       );
     }
diff --git a/src/pages/benchmark/hooks/use-benchmark-columns.tsx b/src/pages/benchmark/hooks/use-benchmark-columns.tsx
index 2ea1ab32..3a7d8e68 100644
--- a/src/pages/benchmark/hooks/use-benchmark-columns.tsx
+++ b/src/pages/benchmark/hooks/use-benchmark-columns.tsx
@@ -32,106 +32,6 @@ const useBenchmarkColumns = (params: {
         )
       },
       ...columns,
-      // {
-      //   title: intl.formatMessage({ id: 'benchmark.table.model' }),
-      //   dataIndex: 'model_name',
-      //   sorter: tableSorter(1),
-      //   render: (text: string) => (
-      //     <AutoTooltip ghost minWidth={20}>
-      //       {text}
-      //     </AutoTooltip>
-      //   )
-      // },
-      // {
-      //   title: intl.formatMessage({ id: 'benchmark.table.dataset' }),
-      //   dataIndex: 'dataset_name',
-      //   sorter: tableSorter(1),
-      //   render: (text: string) => (
-      //     <AutoTooltip ghost minWidth={20}>
-      //       {text}
-      //     </AutoTooltip>
-      //   )
-      // },
-      // {
-      //   title: intl.formatMessage({ id: 'common.table.status' }),
-      //   dataIndex: 'state',
-      //   ellipsis: {
-      //     showTitle: false
-      //   },
-      //   width: 120,
-      //   render: (value: number, record: ListItem) => (
-      //     <span className="flex-center gap-8">
-      //       <StatusTag
-      //         statusValue={{
-      //           status: BenchmarkStatus[value],
-      //           text: BenchmarkStatusLabelMap[value],
-      //           message: record.state_message || undefined
-      //         }}
-      //       />
-      //       {record.progress !== undefined && record.progress < 100 && (
-      //         <Progress
-      //           type="circle"
-      //           percent={_.round(record.progress, 0)}
-      //           size={20}
-      //         />
-      //       )}
-      //     </span>
-      //   )
-      // },
-      // {
-      //   title: intl.formatMessage({ id: 'benchmark.table.gpu' }),
-      //   dataIndex: 'gpu_summary',
-      //   sorter: tableSorter(1),
-      //   render: (text: string) => (
-      //     <AutoTooltip ghost minWidth={20}>
-      //       {text}
-      //     </AutoTooltip>
-      //   )
-      // },
-      // {
-      //   title: 'TPS',
-      //   dataIndex: 'tokens_per_second_mean',
-      //   sorter: tableSorter(1),
-      //   render: (text: string) => (
-      //     <AutoTooltip ghost minWidth={20}>
-      //       {_.round(text, 2)}
-      //     </AutoTooltip>
-      //   )
-      // },
-      // {
-      //   title: (
-      //     <span className="flex-column">
-      //       <span>{intl.formatMessage({ id: 'benchmark.table.ttft' })}</span>
-      //       <span>
-      //         {intl.formatMessage({ id: 'benchmark.table.avg' })} (ms)
-      //       </span>
-      //     </span>
-      //   ),
-      //   dataIndex: 'time_to_first_token_mean',
-      //   sorter: tableSorter(1),
-      //   render: (text: string) => (
-      //     <AutoTooltip ghost minWidth={20}>
-      //       {_.round(text, 2)}
-      //     </AutoTooltip>
-      //   )
-      // },
-      // {
-      //   title: (
-      //     <span className="flex-column">
-      //       <span>{intl.formatMessage({ id: 'benchmark.table.tpot' })}</span>
-      //       <span>
-      //         {intl.formatMessage({ id: 'benchmark.table.avg' })} (ms)
-      //       </span>
-      //     </span>
-      //   ),
-      //   dataIndex: 'time_per_output_token_mean',
-      //   sorter: tableSorter(1),
-      //   render: (text: string) => (
-      //     <AutoTooltip ghost minWidth={20}>
-      //       {_.round(text, 2)}
-      //     </AutoTooltip>
-      //   )
-      // },
       {
         title: intl.formatMessage({ id: 'common.table.operation' }),
         dataIndex: 'operations',
diff --git a/src/pages/benchmark/hooks/use-column-settings.tsx b/src/pages/benchmark/hooks/use-column-settings.tsx
index 94b35515..a96fe227 100644
--- a/src/pages/benchmark/hooks/use-column-settings.tsx
+++ b/src/pages/benchmark/hooks/use-column-settings.tsx
@@ -3,12 +3,15 @@ import StatusTag from '@/components/status-tag';
 import { tableSorter } from '@/config/settings';
 import ColumnSettings from '@/pages/_components/column-settings';
 import { useIntl } from '@umijs/max';
-import { Progress } from 'antd';
 import dayjs from 'dayjs';
 import _, { round } from 'lodash';
 import React from 'react';
 import styled from 'styled-components';
-import { BenchmarkStatus, BenchmarkStatusLabelMap } from '../config';
+import {
+  BenchmarkStatus,
+  BenchmarkStatusLabelMap,
+  BenchmarkStatusValueMap
+} from '../config';
 import { BenchmarkListItem as ListItem } from '../config/types';
 
 const allFields = [
@@ -58,6 +61,35 @@ const defaultColumns: string[] = [
 ];
 const fixedColumns: string[] = [];
 
+const BenchmarkStateTag = (props: { data: ListItem }) => {
+  const { data } = props;
+  if (!data.state) {
+    return null;
+  }
+  return (
+    <StatusTag
+      download={
+        data.state === BenchmarkStatusValueMap.Running
+          ? { percent: data.progress || 0 }
+          : undefined
+      }
+      statusValue={{
+        status:
+          data.state === BenchmarkStatusValueMap.Running &&
+          data.progress === 100
+            ? BenchmarkStatus[BenchmarkStatusValueMap.Completed]
+            : BenchmarkStatus[data.state],
+        text: BenchmarkStatusLabelMap[data.state],
+        message:
+          data.state === BenchmarkStatusValueMap.Running &&
+          data.progress === 100
+            ? ''
+            : data.state_message
+      }}
+    />
+  );
+};
+
 const useColumnSettings = (options: {
   contentHeight: number;
   clusterList: Global.BaseOption<number>[];
@@ -312,22 +344,7 @@ const useColumnSettings = (options: {
       width: 120,
       dataIndex: 'state',
       render: (value: number, record: ListItem) => (
-        <span className="flex-center gap-8">
-          <StatusTag
-            statusValue={{
-              status: BenchmarkStatus[value],
-              text: BenchmarkStatusLabelMap[value],
-              message: record.state_message || undefined
-            }}
-          />
-          {record.progress !== undefined && record.progress < 100 && (
-            <Progress
-              type="circle"
-              percent={_.round(record.progress, 0)}
-              size={20}
-            />
-          )}
-        </span>
+        <BenchmarkStateTag data={record} />
       )
     },
     {