refactor(workflow): Improve layout structure in VersionHistoryPanel (#19450)

This commit is contained in:
GuanMu 2025-05-09 16:37:32 +08:00 committed by GitHub
parent c7a8885d9d
commit 3a85f218ed
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -191,7 +191,7 @@ const VersionHistoryPanel = () => {
}, [t, updateWorkflow, resetWorkflowVersionHistory]) }, [t, updateWorkflow, resetWorkflowVersionHistory])
return ( return (
<div className='flex w-[268px] flex-col rounded-l-2xl border-y-[0.5px] border-l-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl shadow-shadow-shadow-5'> <div className='flex h-full w-[268px] flex-col rounded-l-2xl border-y-[0.5px] border-l-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl shadow-shadow-shadow-5'>
<div className='flex items-center gap-x-2 px-4 pt-3'> <div className='flex items-center gap-x-2 px-4 pt-3'>
<div className='system-xl-semibold flex-1 py-1 text-text-primary'>{t('workflow.versionHistory.title')}</div> <div className='system-xl-semibold flex-1 py-1 text-text-primary'>{t('workflow.versionHistory.title')}</div>
<Filter <Filter
@ -208,7 +208,8 @@ const VersionHistoryPanel = () => {
<RiCloseLine className='h-4 w-4 text-text-tertiary' /> <RiCloseLine className='h-4 w-4 text-text-tertiary' />
</div> </div>
</div> </div>
<div className="relative flex-1 overflow-y-auto px-3 py-2"> <div className="flex h-0 flex-1 flex-col">
<div className="flex-1 overflow-y-auto px-3 py-2">
{(isFetching && !versionHistory?.pages?.length) {(isFetching && !versionHistory?.pages?.length)
? ( ? (
<Loading /> <Loading />
@ -229,15 +230,20 @@ const VersionHistoryPanel = () => {
/> />
}) })
))} ))}
{!isFetching && (!versionHistory?.pages?.length || !versionHistory.pages[0].items.length) && (
<Empty onResetFilter={handleResetFilter} />
)}
</>
)}
</div>
{hasNextPage && ( {hasNextPage && (
<div className='absolute bottom-2 left-2 flex p-2'> <div className='p-2'>
<div <div
className='flex cursor-pointer items-center gap-x-1' className='flex cursor-pointer items-center gap-x-1'
onClick={handleNextPage} onClick={handleNextPage}
> >
<div className='item-center flex justify-center p-0.5'> <div className='item-center flex justify-center p-0.5'>
{ {isFetching
isFetching
? <RiLoader2Line className='h-3.5 w-3.5 animate-spin text-text-accent' /> ? <RiLoader2Line className='h-3.5 w-3.5 animate-spin text-text-accent' />
: <RiArrowDownDoubleLine className='h-3.5 w-3.5 text-text-accent' />} : <RiArrowDownDoubleLine className='h-3.5 w-3.5 text-text-accent' />}
</div> </div>
@ -247,11 +253,6 @@ const VersionHistoryPanel = () => {
</div> </div>
</div> </div>
)} )}
{!isFetching && (!versionHistory?.pages?.length || !versionHistory.pages[0].items.length) && (
<Empty onResetFilter={handleResetFilter} />
)}
</>
)}
</div> </div>
{restoreConfirmOpen && (<RestoreConfirmModal {restoreConfirmOpen && (<RestoreConfirmModal
isOpen={restoreConfirmOpen} isOpen={restoreConfirmOpen}