feat(ui): Improve document list refresh mechanism in ClearDocumentsDialog

- Replace direct API call with callback pattern for document list refresh
- Ensure document list updates regardless of operation success/failure
- Improve component decoupling between ClearDocumentsDialog and DocumentManager
This commit is contained in:
yangdx
2025-04-01 14:46:52 +08:00
parent b0f0f1ff84
commit 0d93ed2f2c
2 changed files with 23 additions and 16 deletions

View File

@@ -13,7 +13,7 @@ import Input from '@/components/ui/Input'
import Checkbox from '@/components/ui/Checkbox' import Checkbox from '@/components/ui/Checkbox'
import { toast } from 'sonner' import { toast } from 'sonner'
import { errorMessage } from '@/lib/utils' import { errorMessage } from '@/lib/utils'
import { clearDocuments, clearCache, getDocuments } from '@/api/lightrag' import { clearDocuments, clearCache } from '@/api/lightrag'
import { useBackendState } from '@/stores/state' import { useBackendState } from '@/stores/state'
import { EraserIcon, AlertTriangleIcon } from 'lucide-react' import { EraserIcon, AlertTriangleIcon } from 'lucide-react'
@@ -35,7 +35,11 @@ const Label = ({
</label> </label>
) )
export default function ClearDocumentsDialog() { interface ClearDocumentsDialogProps {
onDocumentsCleared?: () => Promise<void>
}
export default function ClearDocumentsDialog({ onDocumentsCleared }: ClearDocumentsDialogProps) {
const { t } = useTranslation() const { t } = useTranslation()
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
const [confirmText, setConfirmText] = useState('') const [confirmText, setConfirmText] = useState('')
@@ -55,10 +59,8 @@ export default function ClearDocumentsDialog() {
if (!isConfirmEnabled) return if (!isConfirmEnabled) return
try { try {
// 清空文档
const result = await clearDocuments() const result = await clearDocuments()
// 如果选择了清空缓存,则清空缓存
if (clearCacheOption) { if (clearCacheOption) {
try { try {
await clearCache() await clearCache()
@@ -70,23 +72,28 @@ export default function ClearDocumentsDialog() {
if (result.status === 'success') { if (result.status === 'success') {
toast.success(t('documentPanel.clearDocuments.success')) toast.success(t('documentPanel.clearDocuments.success'))
// 刷新文档列表和后端状态
try {
await getDocuments()
check()
} catch (refreshErr) {
console.error('Error refreshing documents:', refreshErr)
}
setOpen(false)
} else { } else {
toast.error(t('documentPanel.clearDocuments.failed', { message: result.message })) toast.error(t('documentPanel.clearDocuments.failed', { message: result.message }))
} }
} catch (err) { } catch (err) {
toast.error(t('documentPanel.clearDocuments.error', { error: errorMessage(err) })) toast.error(t('documentPanel.clearDocuments.error', { error: errorMessage(err) }))
} finally {
// Execute these operations regardless of success or failure
try {
// Update backend state
await check()
// Refresh document list
if (onDocumentsCleared) {
await onDocumentsCleared()
} }
}, [isConfirmEnabled, clearCacheOption, setOpen, t, check]) } catch (refreshErr) {
console.error('Error refreshing state:', refreshErr)
}
setOpen(false)
}
}, [isConfirmEnabled, clearCacheOption, setOpen, t, check, onDocumentsCleared])
return ( return (
<Dialog open={open} onOpenChange={setOpen}> <Dialog open={open} onOpenChange={setOpen}>

View File

@@ -386,7 +386,7 @@ export default function DocumentManager() {
</Button> </Button>
</div> </div>
<div className="flex-1" /> <div className="flex-1" />
<ClearDocumentsDialog /> <ClearDocumentsDialog onDocumentsCleared={fetchDocuments} />
<UploadDocumentsDialog /> <UploadDocumentsDialog />
<PipelineStatusDialog <PipelineStatusDialog
open={showPipelineStatus} open={showPipelineStatus}