From 2259bb258672e67cf2f20691454d076e5ecc143f Mon Sep 17 00:00:00 2001 From: chanx <1243304602@qq.com> Date: Mon, 7 Jul 2025 14:13:13 +0800 Subject: [PATCH] fix:Use use-chunk-request.ts to replace chunk-hooks.ts; implement chunk selectAll, enable, disable and other functions (#8695) ### What problem does this PR solve? Use use-chunk-request.ts to replace chunk-hooks.ts; implement chunk selectAll, enable, disable and other functions [#3221](https://github.com/infiniflow/ragflow/issues/3221) ### Type of change - [x] Bug Fix (non-breaking change which fixes an issue) --- web/src/hooks/use-chunk-request.ts | 28 +++++++++- .../chunk-result-bar/checkbox-sets.tsx | 39 ++++++++++++-- .../components/knowledge-chunk/index.less | 3 +- .../components/knowledge-chunk/index.tsx | 53 +++++++++++++------ 4 files changed, 100 insertions(+), 23 deletions(-) diff --git a/web/src/hooks/use-chunk-request.ts b/web/src/hooks/use-chunk-request.ts index 1cb802423..320f57979 100644 --- a/web/src/hooks/use-chunk-request.ts +++ b/web/src/hooks/use-chunk-request.ts @@ -1,9 +1,11 @@ +import message from '@/components/ui/message'; import { ResponseGetType } from '@/interfaces/database/base'; import { IChunk, IKnowledgeFile } from '@/interfaces/database/knowledge'; import kbService from '@/services/knowledge-service'; -import { useQuery } from '@tanstack/react-query'; +import { useMutation, useQuery } from '@tanstack/react-query'; import { useDebounce } from 'ahooks'; import { useCallback, useState } from 'react'; +import { useTranslation } from 'react-i18next'; import { IChunkListResult } from './chunk-hooks'; import { useGetPaginationWithRouter, @@ -89,3 +91,27 @@ export const useFetchNextChunkList = (): ResponseGetType<{ handleSetAvailable, }; }; + +export const useSwitchChunk = () => { + const { t } = useTranslation(); + const { + data, + isPending: loading, + mutateAsync, + } = useMutation({ + mutationKey: ['switchChunk'], + mutationFn: async (params: { + chunk_ids?: string[]; + available_int?: number; + doc_id: string; + }) => { + const { data } = await kbService.switch_chunk(params); + if (data.code === 0) { + message.success(t('message.modified')); + } + return data?.code; + }, + }); + + return { data, loading, switchChunk: mutateAsync }; +}; diff --git a/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-result-bar/checkbox-sets.tsx b/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-result-bar/checkbox-sets.tsx index 8c03f1776..131d99619 100644 --- a/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-result-bar/checkbox-sets.tsx +++ b/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-result-bar/checkbox-sets.tsx @@ -3,7 +3,14 @@ import { Label } from '@/components/ui/label'; import { Ban, CircleCheck, Trash2 } from 'lucide-react'; import { useCallback } from 'react'; -export default ({ selectAllChunk, checked }) => { +type ICheckboxSetProps = { + selectAllChunk: (e: any) => void; + removeChunk: (e?: any) => void; + switchChunk: (available: number) => void; + checked: boolean; +}; +export default (props: ICheckboxSetProps) => { + const { selectAllChunk, removeChunk, switchChunk, checked } = props; const handleSelectAllCheck = useCallback( (e: any) => { console.log('eee=', e); @@ -12,25 +19,47 @@ export default ({ selectAllChunk, checked }) => { [selectAllChunk], ); + const handleDeleteClick = useCallback(() => { + removeChunk(); + }, [removeChunk]); + + const handleEnabledClick = useCallback(() => { + switchChunk(1); + }, [switchChunk]); + + const handleDisabledClick = useCallback(() => { + switchChunk(0); + }, [switchChunk]); + return ( -
+
-
+
Enable
-
+
Disable
-
+
Delete
diff --git a/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/index.less b/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/index.less index 10e3b358b..6d1370305 100644 --- a/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/index.less +++ b/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/index.less @@ -41,7 +41,7 @@ .chunkContainer { display: flex; // height: calc(100vh - 332px); - height: calc(100vh - 270px); + height: calc(100vh - 300px); } .chunkOtherContainer { @@ -50,6 +50,7 @@ .pageFooter { padding-top: 10px; + padding-right: 10px; height: 32px; } } diff --git a/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/index.tsx b/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/index.tsx index f1b05a3a8..692d430a1 100644 --- a/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/index.tsx +++ b/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/index.tsx @@ -1,6 +1,9 @@ -import { useFetchNextChunkList, useSwitchChunk } from '@/hooks/chunk-hooks'; +import { + useFetchNextChunkList, + useSwitchChunk, +} from '@/hooks/use-chunk-request'; import classNames from 'classnames'; -import { useCallback, useState } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import ChunkCard from './components/chunk-card'; import CreatingModal from './components/chunk-creating-modal'; @@ -43,6 +46,7 @@ const Chunk = () => { const { t } = useTranslation(); const { changeChunkTextMode, textMode } = useChangeChunkTextMode(); const { switchChunk } = useSwitchChunk(); + const [chunkList, setChunkList] = useState(data); const { chunkUpdatingLoading, onChunkUpdatingOk, @@ -53,6 +57,9 @@ const Chunk = () => { documentId, } = useUpdateChunk(); + useEffect(() => { + setChunkList(data); + }, [data]); const onPaginationChange: RAGFlowPaginationType['onChange'] = ( page, size, @@ -115,10 +122,22 @@ const Chunk = () => { available_int: available, doc_id: documentId, }); - if (!chunkIds && resCode === 0) { + if (ids?.length && resCode === 0) { + chunkList.forEach((x: any) => { + if (ids.indexOf(x['chunk_id']) > -1) { + x['available_int'] = available; + } + }); + setChunkList(chunkList); } }, - [switchChunk, documentId, selectedChunkIds, showSelectedChunkWarning], + [ + switchChunk, + documentId, + selectedChunkIds, + showSelectedChunkWarning, + chunkList, + ], ); const { highlights, setWidthAndHeight } = @@ -156,7 +175,7 @@ const Chunk = () => {
-
+
{
@@ -182,7 +203,7 @@ const Chunk = () => { 'flex flex-col gap-4', )} > - {data.map((item) => ( + {chunkList.map((item) => ( { ))}
+
+ { + onPaginationChange(page, pageSize); + }} + > +
-
- { - onPaginationChange(page, pageSize); - }} - > -