yujunjun/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2025-09-26 09:36:13 +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

88
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,46 +32,57 @@ 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')}>
<Effect className='-left-5 top-[-22px] opacity-15' /> {expand && (
<div className='flex flex-col gap-y-2 p-2'> <>
<div className='relative w-fit'> <Effect className='-left-5 top-[-22px] opacity-15' />
<AppIcon <div className='flex flex-col gap-y-2 p-2'>
size='large' <div className='relative w-fit'>
iconType={iconInfo.icon_type} <AppIcon
icon={iconInfo.icon} size='medium'
background={iconInfo.icon_background} iconType={iconInfo.icon_type}
imageUrl={iconInfo.icon_url} icon={iconInfo.icon}
/> background={iconInfo.icon_background}
<div className='absolute -bottom-1 -right-1 z-10'> imageUrl={iconInfo.icon_url}
<Icon className='size-4' /> />
</div> <div className='absolute -bottom-1 -right-1 z-10'>
</div> <Icon className='size-4' />
{expand && dataset && (
<>
<div className='flex flex-col gap-y-1'>
<div
className='system-md-semibold truncate text-text-secondary'
title={dataset.name}
>
{dataset.name}
</div>
<div className='system-2xs-medium-uppercase text-text-tertiary'>
{isExternal && t('dataset.externalTag')}
{!isExternal && (
<div className='flex items-center gap-x-1'>
<Badge>{t(`dataset.chunkingMode.${DOC_FORM_TEXT[dataset.doc_form]}`)}</Badge>
<Badge>{formatIndexingTechniqueAndMethod(dataset.indexing_technique, dataset.retrieval_model_dict?.search_method)}</Badge>
</div>
)}
</div> </div>
</div> </div>
<p className='system-xs-regular line-clamp-3 text-text-tertiary first-letter:capitalize'> <>
{dataset.description} <div className='flex flex-col gap-y-1'>
</p> <div
</> className='system-md-semibold truncate text-text-secondary'
)} title={dataset!.name}
</div> >
{dataset!.name}
</div>
<div className='system-2xs-medium-uppercase text-text-tertiary'>
{isExternal && t('dataset.externalTag')}
{!isExternal && (
<div className='flex items-center gap-x-1'>
<Badge>{t(`dataset.chunkingMode.${DOC_FORM_TEXT[dataset!.doc_form]}`)}</Badge>
<Badge>{formatIndexingTechniqueAndMethod(dataset!.indexing_technique, dataset!.retrieval_model_dict?.search_method)}</Badge>
</div>
)}
</div>
</div>
<p className='system-xs-regular line-clamp-3 text-text-tertiary first-letter:capitalize'>
{dataset!.description}
</p>
</>
</div>
</>
)}
{!expand && (
<AppIcon
size='medium'
iconType={iconInfo.icon_type}
icon={iconInfo.icon}
background={iconInfo.icon_background}
imageUrl={iconInfo.icon_url}
/>
)}
{extraInfo} {extraInfo}
</div> </div>
) )