estel/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: resolve sidebar animation issues and improve app detail page UX (#23407)

Browse Source
This commit is contained in:
lyzno1
2025-08-05 15:06:40 +08:00
committed by GitHub
parent 607dfc8be7
commit d080bea20b
2 changed files with 55 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
View File

@@ -56,33 +56,50 @@ const ExtraInfo = ({ isMobile, relatedApps, expand }: IExtraInfoProps) => {
}, [isMobile, setShowTips])
return <div>
{hasRelatedApps && (
<>
{!isMobile && (
{/* Related apps for desktop */}
<div className={classNames(
'transition-all duration-200 ease-in-out',
(hasRelatedApps && !isMobile)
? 'w-auto opacity-100'
: 'pointer-events-none h-0 w-0 overflow-hidden opacity-0',
)}>
<Tooltip
position='right'
noDecoration
popupContent={
<LinkedAppsPanel
relatedApps={relatedApps.data}
relatedApps={relatedApps?.data || []}
isMobile={isMobile}
/>
}
>
<div className='system-xs-medium-uppercase inline-flex cursor-pointer items-center space-x-1 text-text-secondary'>
<div className='system-xs-medium-uppercase inline-flex cursor-pointer items-center space-x-1 whitespace-nowrap text-text-secondary'>
<span>{relatedAppsTotal || '--'} {t('common.datasetMenus.relatedApp')}</span>
<RiInformation2Line className='h-4 w-4' />
</div>
</Tooltip>
)}
</div>
{isMobile && <div className={classNames('pb-2 pt-4 text-xs font-medium uppercase text-text-tertiary', 'flex items-center justify-center gap-1 !px-0')}>
{/* Related apps for mobile */}
<div className={classNames(
'transition-all duration-200 ease-in-out',
(hasRelatedApps && isMobile)
? 'w-auto opacity-100'
: 'pointer-events-none h-0 w-0 overflow-hidden opacity-0',
)}>
<div className={classNames('pb-2 pt-4 text-xs font-medium uppercase text-text-tertiary', 'flex items-center justify-center gap-1 whitespace-nowrap !px-0')}>
{relatedAppsTotal || '--'}
<PaperClipIcon className='h-4 w-4 text-text-secondary' />
</div>}
</>
)}
{!hasRelatedApps && !expand && (
</div>
</div>
{/* No related apps tooltip */}
<div className={classNames(
'transition-all duration-200 ease-in-out',
(!hasRelatedApps && !expand)
? 'w-auto opacity-100'
: 'pointer-events-none h-0 w-0 overflow-hidden opacity-0',
)}>
<Tooltip
position='right'
noDecoration
@@ -103,12 +120,12 @@ const ExtraInfo = ({ isMobile, relatedApps, expand }: IExtraInfoProps) => {
</div>
}
>
<div className='system-xs-medium-uppercase inline-flex cursor-pointer items-center space-x-1 text-text-secondary'>
<div className='system-xs-medium-uppercase inline-flex cursor-pointer items-center space-x-1 whitespace-nowrap text-text-secondary'>
<span>{t('common.datasetMenus.noRelatedApp')}</span>
<RiInformation2Line className='h-4 w-4' />
</div>
</Tooltip>
)}
</div>
</div>
}

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

@@ -29,15 +29,17 @@ const DatasetInfo: FC<Props> = ({
<div className='mr-3 shrink-0'>
<AppIcon innerIcon={DatasetSvg} className='!border-[0.5px] !border-indigo-100 !bg-indigo-25' />
</div>
{expand && (
<div className='mt-2'>
<div className='system-md-semibold text-text-secondary'>
<div className={`transition-all duration-200 ease-in-out ${
expand
? 'mt-2 w-auto opacity-100'
: 'pointer-events-none h-0 w-0 overflow-hidden opacity-0'
}`}>
<div className='system-md-semibold truncate whitespace-nowrap text-text-secondary'>
{name}
</div>
<div className='system-2xs-medium-uppercase mt-1 text-text-tertiary'>{isExternal ? t('dataset.externalTag') : t('dataset.localDocs')}</div>
<div className='system-xs-regular my-3 text-text-tertiary first-letter:capitalize'>{description}</div>
<div className='system-2xs-medium-uppercase mt-1 whitespace-nowrap text-text-tertiary'>{isExternal ? t('dataset.externalTag') : t('dataset.localDocs')}</div>
<div className='system-xs-regular my-3 whitespace-nowrap text-text-tertiary first-letter:capitalize'>{description}</div>
</div>
)}
{extraInfo}
</div>
)