yujunjun/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2025-09-27 01:55:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: update DatasetInfo component layout and styling for better responsiveness

Browse Source
This commit is contained in:
twwu 2025-05-08 16:26:30 +08:00
parent 1fbeb3a21a
commit 2d93bc6725
1 changed files with 50 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
web/app/components/app-sidebar/dataset-info.tsx
View File

@ -8,6 +8,7 @@ import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
import { DOC_FORM_ICON_WITH_BG, DOC_FORM_TEXT } from '@/models/datasets' import { DOC_FORM_ICON_WITH_BG, DOC_FORM_TEXT } from '@/models/datasets'
import { useKnowledge } from '@/hooks/use-knowledge' import { useKnowledge } from '@/hooks/use-knowledge'
import Badge from '../base/badge' import Badge from '../base/badge'
import cn from '@/utils/classnames'
type Props = { type Props = {
expand: boolean expand: boolean
@ -31,12 +32,14 @@ const DatasetInfo: FC<Props> = ({
const Icon = isExternal ? DOC_FORM_ICON_WITH_BG.external : DOC_FORM_ICON_WITH_BG[dataset!.doc_form] const Icon = isExternal ? DOC_FORM_ICON_WITH_BG.external : DOC_FORM_ICON_WITH_BG[dataset!.doc_form]
return ( return (
<div className='relative flex flex-col p-2'> <div className={cn('relative flex flex-col', expand ? '' : 'p-1')}>
{expand && (
<>
<Effect className='-left-5 top-[-22px] opacity-15' /> <Effect className='-left-5 top-[-22px] opacity-15' />
<div className='flex flex-col gap-y-2 p-2'> <div className='flex flex-col gap-y-2 p-2'>
<div className='relative w-fit'> <div className='relative w-fit'>
<AppIcon <AppIcon
size='large' size='medium'
iconType={iconInfo.icon_type} iconType={iconInfo.icon_type}
icon={iconInfo.icon} icon={iconInfo.icon}
background={iconInfo.icon_background} background={iconInfo.icon_background}
@ -46,31 +49,40 @@ const DatasetInfo: FC<Props> = ({
<Icon className='size-4' /> <Icon className='size-4' />
</div> </div>
</div> </div>
{expand && dataset && (
<> <>
<div className='flex flex-col gap-y-1'> <div className='flex flex-col gap-y-1'>
<div <div
className='system-md-semibold truncate text-text-secondary' className='system-md-semibold truncate text-text-secondary'
title={dataset.name} title={dataset!.name}
> >
{dataset.name} {dataset!.name}
</div> </div>
<div className='system-2xs-medium-uppercase text-text-tertiary'> <div className='system-2xs-medium-uppercase text-text-tertiary'>
{isExternal && t('dataset.externalTag')} {isExternal && t('dataset.externalTag')}
{!isExternal && ( {!isExternal && (
<div className='flex items-center gap-x-1'> <div className='flex items-center gap-x-1'>
<Badge>{t(`dataset.chunkingMode.${DOC_FORM_TEXT[dataset.doc_form]}`)}</Badge> <Badge>{t(`dataset.chunkingMode.${DOC_FORM_TEXT[dataset!.doc_form]}`)}</Badge>
<Badge>{formatIndexingTechniqueAndMethod(dataset.indexing_technique, dataset.retrieval_model_dict?.search_method)}</Badge> <Badge>{formatIndexingTechniqueAndMethod(dataset!.indexing_technique, dataset!.retrieval_model_dict?.search_method)}</Badge>
</div> </div>
)} )}
</div> </div>
</div> </div>
<p className='system-xs-regular line-clamp-3 text-text-tertiary first-letter:capitalize'> <p className='system-xs-regular line-clamp-3 text-text-tertiary first-letter:capitalize'>
{dataset.description} {dataset!.description}
</p> </p>
</> </>
)}
</div> </div>
</>
)}
{!expand && (
<AppIcon
size='medium'
iconType={iconInfo.icon_type}
icon={iconInfo.icon}
background={iconInfo.icon_background}
imageUrl={iconInfo.icon_url}
/>
)}
{extraInfo} {extraInfo}
</div> </div>
) )