opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-06 18:27:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): scroll of dataset evaluation page

Browse Source
This commit is contained in:
JzoNg 2026-04-29 20:48:39 +08:00
parent c59a80a41f
commit 55eb894d8e
3 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/app/components/evaluation/components/layout/pipeline-evaluation.tsx
View File

@ -27,8 +27,8 @@ const PipelineEvaluation = ({
}, [ensureResource, resourceId, resourceType])
return (
<div className="flex h-full min-h-0 flex-col bg-background-default xl:flex-row">
<div className="flex min-h-0 flex-col border-b border-divider-subtle bg-background-default xl:w-[450px] xl:shrink-0 xl:border-r xl:border-b-0">
<div className="flex h-full min-h-0 flex-col overflow-y-auto bg-background-default xl:flex-row xl:overflow-hidden">
<div className="flex shrink-0 flex-col border-b border-divider-subtle bg-background-default xl:min-h-0 xl:w-[450px] xl:border-r xl:border-b-0">
<div className="px-6 pt-4 pb-2">
<SectionHeader
title={t('title')}
@ -76,7 +76,7 @@ const PipelineEvaluation = ({
<div className="border-t border-divider-subtle" />
<div className="min-h-0 flex-1 px-6 py-4">
<div className="px-6 py-4 xl:min-h-0 xl:flex-1">
<HistoryTab
resourceType={resourceType}
resourceId={resourceId}
@ -84,7 +84,7 @@ const PipelineEvaluation = ({
</div>
</div>
<div className="min-h-0 flex-1 bg-background-default">
<div className="shrink-0 bg-background-default xl:min-h-0 xl:flex-1">
<PipelineResultsPanel
resourceType={resourceType}
resourceId={resourceId}

6
web/app/components/evaluation/components/pipeline/pipeline-results-panel.tsx
View File

@ -57,7 +57,7 @@ const PipelineResultsPanel = ({
if (isEmpty) {
return (
<div className="flex h-full min-h-[360px] w-full items-center justify-center xl:min-h-0">
<div className="flex min-h-[360px] w-full items-center justify-center xl:h-full xl:min-h-0">
<div className="flex flex-col items-center gap-4 px-4 text-center">
<span aria-hidden="true" className="i-ri-file-list-3-line h-12 w-12 text-text-quaternary" />
<div className="system-md-medium text-text-quaternary">{t('results.empty')}</div>
@ -67,7 +67,7 @@ const PipelineResultsPanel = ({
}
return (
<div className="flex h-full min-h-0 flex-col border-l border-divider-subtle bg-background-default">
<div className="flex min-h-[360px] flex-col border-l border-divider-subtle bg-background-default xl:h-full xl:min-h-0">
<div className="shrink-0 px-6 pt-4 pb-2">
<h2 className="system-xl-semibold text-text-primary">{t('results.title')}</h2>
</div>
@ -75,7 +75,7 @@ const PipelineResultsPanel = ({
<div className="px-6 py-4 system-sm-regular text-text-destructive">{t('results.loadFailed')}</div>
)}
{!runDetailQuery.isError && (
<div className="flex min-h-0 flex-1 flex-col px-6 py-1">
<div className="flex flex-col px-6 py-1 xl:min-h-0 xl:flex-1">
<div className="flex shrink-0 flex-wrap items-center justify-between gap-3 py-1">
<div className="flex min-w-0 flex-wrap items-center gap-2 system-xs-regular text-text-secondary">
<span>{getRunDate(runDetail?.run.started_at ?? runDetail?.run.created_at ?? null)}</span>

18
web/app/components/evaluation/components/pipeline/pipeline-results-table.tsx
View File

@ -26,7 +26,7 @@ const PipelineResultsTable = ({
const { t } = useTranslation('evaluation')
return (
<div className="min-h-0 flex-1 overflow-auto py-2">
<div className="overflow-x-auto py-2 xl:min-h-0 xl:flex-1 xl:overflow-auto">
<table className="min-w-full table-fixed border-collapse overflow-hidden rounded-lg">
<colgroup>
<col className="w-10" />
@ -38,14 +38,14 @@ const PipelineResultsTable = ({
<thead>
<tr className="bg-background-section">
<th className="h-7 rounded-l-lg" />
<th className="system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary">{t('results.columns.query')}</th>
<th className="system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary">{t('results.columns.expected')}</th>
<th className="system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary">{t('results.columns.actual')}</th>
<th className="h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary">{t('results.columns.query')}</th>
<th className="h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary">{t('results.columns.expected')}</th>
<th className="h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary">{t('results.columns.actual')}</th>
{metricColumns.map((column, index) => (
<th
key={column.id}
className={cn(
'system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary',
'h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary',
index === metricColumns.length - 1 && 'rounded-r-lg',
)}
>
@ -79,14 +79,14 @@ const PipelineResultsTable = ({
)}
/>
</td>
<td className="system-sm-regular h-10 px-3 py-3 align-top text-text-secondary">
<td className="h-10 px-3 py-3 align-top system-sm-regular text-text-secondary">
<div className="line-clamp-2 break-words">{getQueryContent(item)}</div>
</td>
<td className="system-sm-regular h-10 px-3 py-3 align-top text-text-secondary">
<td className="h-10 px-3 py-3 align-top system-sm-regular text-text-secondary">
<div className="line-clamp-2 break-words">{formatValue(item.expected_output)}</div>
</td>
<td className={cn(
'system-sm-regular h-10 px-3 py-3 align-top',
'h-10 px-3 py-3 align-top system-sm-regular',
actualOutput ? 'text-text-secondary' : 'text-text-destructive',
)}
>
@ -100,7 +100,7 @@ const PipelineResultsTable = ({
return (
<td
key={column.id}
className={cn('system-sm-regular h-10 px-3 py-3 align-top', getMetricTextClassName(metricValue, column))}
className={cn('h-10 px-3 py-3 align-top system-sm-regular', getMetricTextClassName(metricValue, column))}
>
{formatValue(metricValue)}
</td>