From 9ab8f233a23aa127d009138e0c55474887e9e079 Mon Sep 17 00:00:00 2001 From: jialin Date: Wed, 21 Jan 2026 23:32:37 +0800 Subject: [PATCH] feat: benchmark detail page --- config/routes.ts | 1 + src/components/page-tools/index.tsx | 90 +++++++++---------- src/locales/en-US/benchmark.ts | 6 +- src/locales/ja-JP/benchmark.ts | 6 +- src/locales/ru-RU/benchmark.ts | 6 +- src/locales/zh-CN/benchmark.ts | 6 +- .../components/compare-conditions.tsx | 49 ++++++++++ .../benchmark/components/configure/index.tsx | 9 ++ .../components/environment/index.tsx | 9 ++ .../benchmark/components/left-actions.tsx | 44 +++++++++ src/pages/benchmark/components/logs/index.tsx | 9 ++ .../benchmark/components/right-actions.tsx | 5 -- .../benchmark/components/summary/index.tsx | 9 ++ src/pages/benchmark/config/detail-context.ts | 21 +++++ src/pages/benchmark/details.tsx | 56 ++++++++++++ .../benchmark/hooks/use-compare-conditions.ts | 3 + src/pages/benchmark/index.tsx | 7 ++ 17 files changed, 281 insertions(+), 55 deletions(-) create mode 100644 src/pages/benchmark/components/compare-conditions.tsx create mode 100644 src/pages/benchmark/components/configure/index.tsx create mode 100644 src/pages/benchmark/components/environment/index.tsx create mode 100644 src/pages/benchmark/components/left-actions.tsx create mode 100644 src/pages/benchmark/components/logs/index.tsx create mode 100644 src/pages/benchmark/components/summary/index.tsx create mode 100644 src/pages/benchmark/config/detail-context.ts create mode 100644 src/pages/benchmark/details.tsx create mode 100644 src/pages/benchmark/hooks/use-compare-conditions.ts diff --git a/config/routes.ts b/config/routes.ts index 4407b61c..6d3f7937 100644 --- a/config/routes.ts +++ b/config/routes.ts @@ -122,6 +122,7 @@ export default [ icon: 'icon-speed', selectedIcon: 'icon-speed-filled', defaultIcon: 'icon-speed', + access: 'canSeeAdmin', component: './benchmark/index' } ] diff --git a/src/components/page-tools/index.tsx b/src/components/page-tools/index.tsx index c7477838..0bfb300c 100644 --- a/src/components/page-tools/index.tsx +++ b/src/components/page-tools/index.tsx @@ -107,7 +107,47 @@ export const FilterBar: React.FC = (props) => { } = props; const intl = useIntl(); - const renderRight = useMemo(() => { + const renderLeft = () => { + return ( + + + } + placeholder={ + inputHolder || + intl.formatMessage({ + id: 'common.filter.name' + }) + } + style={{ width: widths?.input || 230 }} + allowClear + onChange={handleInputChange} + > + {showSelect && ( + + )} + + + ); + }; + + const renderRight = () => { if (!handleClickPrimary && !handleDeleteByBatch) { return null; } @@ -156,56 +196,14 @@ export const FilterBar: React.FC = (props) => { )} ); - }, [ - actionItems, - actionType, - rowSelection?.selectedRowKeys, - handleClickPrimary, - intl - ]); + }; return ( - - } - placeholder={ - inputHolder || - intl.formatMessage({ - id: 'common.filter.name' - }) - } - style={{ width: widths?.input || 230 }} - allowClear - onChange={handleInputChange} - > - {showSelect && ( - - )} - - - } - right={right || renderRight} + left={left || renderLeft()} + right={right || renderRight()} > ); }; diff --git a/src/locales/en-US/benchmark.ts b/src/locales/en-US/benchmark.ts index 7df21552..efe225c1 100644 --- a/src/locales/en-US/benchmark.ts +++ b/src/locales/en-US/benchmark.ts @@ -22,5 +22,9 @@ export default { 'benchmark.form.profile.heavy': 'Generation Heavy', 'benchmark.form.profile.custom': 'Custom', 'benchmark.table.inputTokenLength': 'Input Token Length', - 'benchmark.table.outputTokenLength': 'Output Token Length' + 'benchmark.table.outputTokenLength': 'Output Token Length', + 'benchmark.detail.summary.title': 'Summary', + 'benchmark.detail.configure.title': 'Configure', + 'benchmark.detail.environment.title': 'Environment', + 'benchmark.detail.logs.title': 'Logs' }; diff --git a/src/locales/ja-JP/benchmark.ts b/src/locales/ja-JP/benchmark.ts index 7df21552..efe225c1 100644 --- a/src/locales/ja-JP/benchmark.ts +++ b/src/locales/ja-JP/benchmark.ts @@ -22,5 +22,9 @@ export default { 'benchmark.form.profile.heavy': 'Generation Heavy', 'benchmark.form.profile.custom': 'Custom', 'benchmark.table.inputTokenLength': 'Input Token Length', - 'benchmark.table.outputTokenLength': 'Output Token Length' + 'benchmark.table.outputTokenLength': 'Output Token Length', + 'benchmark.detail.summary.title': 'Summary', + 'benchmark.detail.configure.title': 'Configure', + 'benchmark.detail.environment.title': 'Environment', + 'benchmark.detail.logs.title': 'Logs' }; diff --git a/src/locales/ru-RU/benchmark.ts b/src/locales/ru-RU/benchmark.ts index 7df21552..efe225c1 100644 --- a/src/locales/ru-RU/benchmark.ts +++ b/src/locales/ru-RU/benchmark.ts @@ -22,5 +22,9 @@ export default { 'benchmark.form.profile.heavy': 'Generation Heavy', 'benchmark.form.profile.custom': 'Custom', 'benchmark.table.inputTokenLength': 'Input Token Length', - 'benchmark.table.outputTokenLength': 'Output Token Length' + 'benchmark.table.outputTokenLength': 'Output Token Length', + 'benchmark.detail.summary.title': 'Summary', + 'benchmark.detail.configure.title': 'Configure', + 'benchmark.detail.environment.title': 'Environment', + 'benchmark.detail.logs.title': 'Logs' }; diff --git a/src/locales/zh-CN/benchmark.ts b/src/locales/zh-CN/benchmark.ts index 90f56ba9..d2b6a375 100644 --- a/src/locales/zh-CN/benchmark.ts +++ b/src/locales/zh-CN/benchmark.ts @@ -22,5 +22,9 @@ export default { 'benchmark.form.profile.heavy': '高生成量', 'benchmark.form.profile.custom': '自定义', 'benchmark.table.inputTokenLength': '输入 Token 长度', - 'benchmark.table.outputTokenLength': '输出 Token 长度' + 'benchmark.table.outputTokenLength': '输出 Token 长度', + 'benchmark.detail.summary.title': '摘要', + 'benchmark.detail.configure.title': '配置', + 'benchmark.detail.environment.title': '环境', + 'benchmark.detail.logs.title': '日志' }; diff --git a/src/pages/benchmark/components/compare-conditions.tsx b/src/pages/benchmark/components/compare-conditions.tsx new file mode 100644 index 00000000..62e74794 --- /dev/null +++ b/src/pages/benchmark/components/compare-conditions.tsx @@ -0,0 +1,49 @@ +import { useHover } from 'ahooks'; +import { Popover } from 'antd'; +import { useRef, useState } from 'react'; +import styled from 'styled-components'; + +const Container = styled.div` + display: flex; + align-items: center; + border: 1px solid var(--ant-color-border); + border-radius: 4px; + padding: 8.5px 11px; + height: 40px; + width: 240px; + cursor: pointer; + &:hover { + border-color: var(--ant-color-primary-hover); + } + &:active { + box-shadow: var(--ant-input-active-shadow); + } + .holder { + color: var(--ant-color-text-placeholder); + } +`; +const CompareConditions: React.FC = () => { + const [open, setOpen] = useState(false); + const containerRef = useRef(null); + const isHovering = useHover(containerRef); + + return ( + + + Compare Filter + + + ); +}; + +export default CompareConditions; diff --git a/src/pages/benchmark/components/configure/index.tsx b/src/pages/benchmark/components/configure/index.tsx new file mode 100644 index 00000000..44136e49 --- /dev/null +++ b/src/pages/benchmark/components/configure/index.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import { useDetailContext } from '../../config/detail-context'; + +const Configure: React.FC = () => { + const { detailData } = useDetailContext(); + return
Configure Content
; +}; + +export default Configure; diff --git a/src/pages/benchmark/components/environment/index.tsx b/src/pages/benchmark/components/environment/index.tsx new file mode 100644 index 00000000..2f41b7f7 --- /dev/null +++ b/src/pages/benchmark/components/environment/index.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import { useDetailContext } from '../../config/detail-context'; + +const Environment: React.FC = () => { + const { detailData } = useDetailContext(); + return
Environment Content
; +}; + +export default Environment; diff --git a/src/pages/benchmark/components/left-actions.tsx b/src/pages/benchmark/components/left-actions.tsx new file mode 100644 index 00000000..de388a44 --- /dev/null +++ b/src/pages/benchmark/components/left-actions.tsx @@ -0,0 +1,44 @@ +import { SearchOutlined, SyncOutlined } from '@ant-design/icons'; +import { useIntl } from '@umijs/max'; +import { Button, Input, Space } from 'antd'; +import React from 'react'; +import CompareConditions from './compare-conditions'; + +export interface RightActionsProps { + handleInputChange: (e: React.ChangeEvent) => void; + handleSearch: () => void; +} + +const RightActions: React.FC = ({ + handleInputChange, + handleSearch +}) => { + const intl = useIntl(); + + return ( + + + } + placeholder={intl.formatMessage({ + id: 'common.filter.name' + })} + style={{ width: 230 }} + allowClear + onChange={handleInputChange} + > + + + + ); +}; + +export default RightActions; diff --git a/src/pages/benchmark/components/logs/index.tsx b/src/pages/benchmark/components/logs/index.tsx new file mode 100644 index 00000000..c1f13089 --- /dev/null +++ b/src/pages/benchmark/components/logs/index.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import { useDetailContext } from '../../config/detail-context'; + +const Logs: React.FC = () => { + const { id } = useDetailContext(); + return
Logs Content
; +}; + +export default Logs; diff --git a/src/pages/benchmark/components/right-actions.tsx b/src/pages/benchmark/components/right-actions.tsx index 2c91dbd8..15e801a6 100644 --- a/src/pages/benchmark/components/right-actions.tsx +++ b/src/pages/benchmark/components/right-actions.tsx @@ -11,7 +11,6 @@ export interface RightActionsProps { handleDeleteByBatch: () => void; handleClickPrimary?: () => void; handleSettingFields?: () => void; - handleCompare?: () => void; buttonText?: string; rowSelection: { selectedRowKeys: React.Key[]; @@ -21,7 +20,6 @@ export interface RightActionsProps { const RightActions: React.FC = ({ handleDeleteByBatch, handleClickPrimary, - handleCompare, handleSettingFields, buttonText, rowSelection @@ -31,9 +29,6 @@ const RightActions: React.FC = ({ return ( -