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]) }, [isMobile, setShowTips])
return <div> return <div>
{hasRelatedApps && ( {/* Related apps for desktop */}
<> <div className={classNames(
{!isMobile && ( '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 <Tooltip
position='right' position='right'
noDecoration noDecoration
popupContent={ popupContent={
<LinkedAppsPanel <LinkedAppsPanel
relatedApps={relatedApps.data} relatedApps={relatedApps?.data || []}
isMobile={isMobile} 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> <span>{relatedAppsTotal || '--'} {t('common.datasetMenus.relatedApp')}</span>
<RiInformation2Line className='h-4 w-4' /> <RiInformation2Line className='h-4 w-4' />
</div> </div>
</Tooltip> </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 || '--'} {relatedAppsTotal || '--'}
<PaperClipIcon className='h-4 w-4 text-text-secondary' /> <PaperClipIcon className='h-4 w-4 text-text-secondary' />
</div>} </div>
</> </div>
)}
{!hasRelatedApps && !expand && ( {/* 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 <Tooltip
position='right' position='right'
noDecoration noDecoration
@@ -103,12 +120,12 @@ const ExtraInfo = ({ isMobile, relatedApps, expand }: IExtraInfoProps) => {
</div> </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> <span>{t('common.datasetMenus.noRelatedApp')}</span>
<RiInformation2Line className='h-4 w-4' /> <RiInformation2Line className='h-4 w-4' />
</div> </div>
</Tooltip> </Tooltip>
)} </div>
</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'> <div className='mr-3 shrink-0'>
<AppIcon innerIcon={DatasetSvg} className='!border-[0.5px] !border-indigo-100 !bg-indigo-25' /> <AppIcon innerIcon={DatasetSvg} className='!border-[0.5px] !border-indigo-100 !bg-indigo-25' />
</div> </div>
{expand && ( <div className={`transition-all duration-200 ease-in-out ${
<div className='mt-2'> expand
<div className='system-md-semibold text-text-secondary'> ? '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} {name}
</div> </div>
<div className='system-2xs-medium-uppercase mt-1 text-text-tertiary'>{isExternal ? t('dataset.externalTag') : t('dataset.localDocs')}</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 text-text-tertiary first-letter:capitalize'>{description}</div> <div className='system-xs-regular my-3 whitespace-nowrap text-text-tertiary first-letter:capitalize'>{description}</div>
</div> </div>
)}
{extraInfo} {extraInfo}
</div> </div>
) )