feat: add selected style to chunk item

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;

web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.less

@@ -14,3 +14,7 @@
     font-style: normal;
   }
 }
+
+.cardSelected {
+  background-color: @selectedBackgroundColor;
+}

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 (
     <div>
-      <Card>
+      <Card className={selected ? styles.cardSelected : ''}>
         <Flex gap={'middle'} justify={'space-between'}>
           <Checkbox onChange={handleCheck} checked={checked}></Checkbox>
           {item.img_id && (
@@ -52,7 +60,8 @@ const ChunkCard = ({
           )}
 
           <section
-            onDoubleClick={handleContentClick}
+            onDoubleClick={handleContentDoubleClick}
+            onClick={handleContentClick}
             className={styles.content}
             dangerouslySetInnerHTML={{ __html: item.content_with_weight }}
           >

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<number>();
   const { documentId } = useGetKnowledgeSearchParams();
-  //   const [file, setFile] = useState<PDFFile>(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 (
     <div ref={setContainerRef} className={styles.documentContainer}>
-      <Document
-        file={url}
-        onLoadSuccess={onDocumentLoadSuccess}
-        //   options={options}
-      >
+      <Document file={url} onLoadSuccess={onDocumentLoadSuccess}>
         {Array.from(new Array(numPages), (el, index) => (
           <Page
             key={`page_${index + 1}`}
@@ -67,7 +38,6 @@ const DocumentPreview = () => {
           />
         ))}
       </Document>
-      {/* <input type="file" onChange={handleChange} /> */}
     </div>
   );
 };

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<string>('');
+
+  const handleChunkCardClick = useCallback((chunkId: string) => {
+    setSelectedChunkId(chunkId);
+  }, []);
+
+  return { handleChunkCardClick, selectedChunkId };
+};

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<string | undefined>();
   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}
                     ></ChunkCard>
                   ))}
                 </Space>