admin/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

73
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 && (
<Tooltip
position='right'
noDecoration
popupContent={
<LinkedAppsPanel
relatedApps={relatedApps.data}
isMobile={isMobile}
/>
}
>
<div className='system-xs-medium-uppercase inline-flex cursor-pointer items-center space-x-1 text-text-secondary'>
<span>{relatedAppsTotal || '--'} {t('common.datasetMenus.relatedApp')}</span>
<RiInformation2Line className='h-4 w-4' />
</div>
</Tooltip>
)}
{/* 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 || []}
isMobile={isMobile}
/>
}
>
<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')}>
{relatedAppsTotal || '--'}
<PaperClipIcon className='h-4 w-4 text-text-secondary' />
</div>}
</>
)}
{!hasRelatedApps && !expand && (
{/* 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>
</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>
}