From 25187b1ad7e70b0897166be249e8040b0a82c412 Mon Sep 17 00:00:00 2001 From: billchen Date: Fri, 1 Mar 2024 13:48:15 +0800 Subject: [PATCH] feat: add selected style to chunk item --- web/src/less/variable.less | 1 + .../components/chunk-card/index.less | 4 +++ .../components/chunk-card/index.tsx | 15 +++++++-- .../components/document-preview/index.tsx | 32 +------------------ .../components/knowledge-chunk/hooks.ts | 11 +++++++ .../components/knowledge-chunk/index.tsx | 5 ++- 6 files changed, 33 insertions(+), 35 deletions(-) diff --git a/web/src/less/variable.less b/web/src/less/variable.less index 7577f74ab..310829883 100644 --- a/web/src/less/variable.less +++ b/web/src/less/variable.less @@ -7,6 +7,7 @@ @gray8: rgba(165, 163, 169, 1); @gray11: rgba(232, 232, 234, 1); @purple: rgba(127, 86, 217, 1); +@selectedBackgroundColor: rgba(239, 248, 255, 1); @fontSize12: 12px; @fontSize14: 14px; diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.less b/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.less index 3196dfac3..dcd13cf49 100644 --- a/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.less +++ b/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.less @@ -14,3 +14,7 @@ font-style: normal; } } + +.cardSelected { + background-color: @selectedBackgroundColor; +} diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.tsx b/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.tsx index e509ec0cb..221eaa0c4 100644 --- a/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.tsx +++ b/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.tsx @@ -10,6 +10,8 @@ interface IProps { switchChunk: (available?: number, chunkIds?: string[]) => void; editChunk: (chunkId: string) => void; handleCheckboxClick: (chunkId: string, checked: boolean) => void; + selected: boolean; + clickChunkCard: (chunkId: string) => void; } const ChunkCard = ({ @@ -18,6 +20,8 @@ const ChunkCard = ({ handleCheckboxClick, editChunk, switchChunk, + selected, + clickChunkCard, }: IProps) => { const available = Number(item.available_int); const [enabled, setEnabled] = useState(available === 1); @@ -31,13 +35,17 @@ const ChunkCard = ({ handleCheckboxClick(item.chunk_id, e.target.checked); }; - const handleContentClick = () => { + const handleContentDoubleClick = () => { editChunk(item.chunk_id); }; + const handleContentClick = () => { + clickChunkCard(item.chunk_id); + }; + return (
- + {item.img_id && ( @@ -52,7 +60,8 @@ const ChunkCard = ({ )}
diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/index.tsx b/web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/index.tsx index aa5a8980e..57d3a4ac4 100644 --- a/web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/index.tsx +++ b/web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/index.tsx @@ -9,56 +9,27 @@ import { useDocumentResizeObserver } from './hooks'; import styles from './index.less'; -// type PDFFile = string | File | null; - pdfjs.GlobalWorkerOptions.workerSrc = new URL( 'pdfjs-dist/build/pdf.worker.min.js', import.meta.url, ).toString(); -// const options = { -// cMapUrl: '/cmaps/', -// standardFontDataUrl: '/standard_fonts/', -// }; - const DocumentPreview = () => { const [numPages, setNumPages] = useState(); const { documentId } = useGetKnowledgeSearchParams(); - // const [file, setFile] = useState(null); const { containerWidth, setContainerRef } = useDocumentResizeObserver(); function onDocumentLoadSuccess({ numPages }: { numPages: number }): void { setNumPages(numPages); } - // const handleChange = (e: any) => { - // console.info(e.files); - // setFile(e.target.files[0] || null); - // }; - const url = useMemo(() => { return `${api_host}/document/get/${documentId}`; }, [documentId]); - // const fetch_document_file = useCallback(async () => { - // const ret: Blob = await getDocumentFile(documentId); - // console.info(ret); - // const f = new File([ret], 'xx.pdf', { type: ret.type }); - // setFile(f); - // }, [documentId]); - - // useEffect(() => { - // // dispatch({ type: 'kFModel/fetch_document_file', payload: documentId }); - // fetch_document_file(); - // }, [fetch_document_file]); - return (
- + {Array.from(new Array(numPages), (el, index) => ( { /> ))} - {/* */}
); }; diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/hooks.ts b/web/src/pages/add-knowledge/components/knowledge-chunk/hooks.ts index c40b07dcd..e84d47650 100644 --- a/web/src/pages/add-knowledge/components/knowledge-chunk/hooks.ts +++ b/web/src/pages/add-knowledge/components/knowledge-chunk/hooks.ts @@ -1,4 +1,5 @@ import { IKnowledgeFile } from '@/interfaces/database/knowledge'; +import { useCallback, useState } from 'react'; import { useSelector } from 'umi'; export const useSelectDocumentInfo = () => { @@ -7,3 +8,13 @@ export const useSelectDocumentInfo = () => { ); return documentInfo; }; + +export const useHandleChunkCardClick = () => { + const [selectedChunkId, setSelectedChunkId] = useState(''); + + const handleChunkCardClick = useCallback((chunkId: string) => { + setSelectedChunkId(chunkId); + }, []); + + return { handleChunkCardClick, selectedChunkId }; +}; diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/index.tsx b/web/src/pages/add-knowledge/components/knowledge-chunk/index.tsx index 7a5a41638..f69f42f9b 100644 --- a/web/src/pages/add-knowledge/components/knowledge-chunk/index.tsx +++ b/web/src/pages/add-knowledge/components/knowledge-chunk/index.tsx @@ -9,7 +9,7 @@ import { useDeleteChunkByIds } from '@/hooks/knowledgeHook'; import ChunkCard from './components/chunk-card'; import ChunkToolBar from './components/chunk-toolbar'; import DocumentPreview from './components/document-preview'; -import { useSelectDocumentInfo } from './hooks'; +import { useHandleChunkCardClick, useSelectDocumentInfo } from './hooks'; import styles from './index.less'; import { ChunkModelState } from './model'; @@ -36,6 +36,7 @@ const Chunk = () => { const [chunkId, setChunkId] = useState(); const { removeChunk } = useDeleteChunkByIds(); const documentInfo = useSelectDocumentInfo(); + const { handleChunkCardClick, selectedChunkId } = useHandleChunkCardClick(); const getChunkList = useCallback(() => { const payload: PayloadType = { @@ -180,6 +181,8 @@ const Chunk = () => { )} handleCheckboxClick={handleSingleCheckboxClick} switchChunk={switchChunk} + clickChunkCard={handleChunkCardClick} + selected={item.chunk_id === selectedChunkId} > ))}