diff --git a/web/src/interfaces/database/knowledge.ts b/web/src/interfaces/database/knowledge.ts index 68b88da6d..415c29808 100644 --- a/web/src/interfaces/database/knowledge.ts +++ b/web/src/interfaces/database/knowledge.ts @@ -74,6 +74,7 @@ export interface IChunk { docnm_kwd: string; img_id: string; important_kwd: any[]; + positions: number[][]; } export interface ITestingChunk { diff --git a/web/src/less/variable.less b/web/src/less/variable.less index 310829883..bed5e6fcf 100644 --- a/web/src/less/variable.less +++ b/web/src/less/variable.less @@ -8,6 +8,8 @@ @gray11: rgba(232, 232, 234, 1); @purple: rgba(127, 86, 217, 1); @selectedBackgroundColor: rgba(239, 248, 255, 1); +@blurBackground: rgba(22, 119, 255, 0.5); +@blurBackgroundHover: rgba(22, 119, 255, 0.2); @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 dcd13cf49..308d28619 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 @@ -13,6 +13,28 @@ color: red; font-style: normal; } + + caption { + color: @blurBackground; + font-size: 20px; + height: 50px; + line-height: 50px; + font-weight: 600; + margin-bottom: 10px; + } + + th { + color: #fff; + background-color: @blurBackground; + } + + td:hover { + background: @blurBackgroundHover; + } + + tr:nth-child(even) { + background-color: #f2f2f2; + } } .cardSelected { 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 221eaa0c4..d021e4768 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 @@ -64,9 +64,7 @@ const ChunkCard = ({ onClick={handleContentClick} className={styles.content} dangerouslySetInnerHTML={{ __html: item.content_with_weight }} - > - {/* {item.content_with_weight} */} - + >
diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/hightlights.ts b/web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/hightlights.ts index f2c81d89e..b32b4723f 100644 --- a/web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/hightlights.ts +++ b/web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/hightlights.ts @@ -6,21 +6,27 @@ export const testHighlights = [ position: { boundingRect: { x1: 219.7, + // x1: 419.7, y1: 204.3, + // y1: 304.3, x2: 547.0, + // x2: 747.0, y2: 264.0, - width: 849, - height: 1200, + // y2: 364.0, }, rects: [ - { - x1: 219.7, - y1: 204.3, - x2: 547.0, - y2: 264.0, - width: 849, - height: 1200, - }, + // { + // x1: 219.7, + // // x1: 419.7, + // y1: 204.3, + // // y1: 304.3, + // x2: 547.0, + // // x2: 747.0, + // y2: 264.0, + // // y2: 364.0, + // width: 849, + // height: 1200, + // }, ], pageNumber: 9, }, @@ -28,6 +34,56 @@ export const testHighlights = [ text: 'Flow or TypeScript?', emoji: '🔥', }, - id: '8245652131754351', + id: 'jsdlihdkghergjl', }, -]; + { + content: { + text: '图2：乘联会预计6 月新能源乘用车厂商批发销量74 万辆，环比增长10%，同比增长30%。', + }, + position: { + boundingRect: { + x1: 219.0, + x2: 546.0, + y1: 616.0, + y2: 674.7, + }, + rects: [], + pageNumber: 6, + }, + comment: { + text: 'Flow or TypeScript?', + emoji: '🔥', + }, + id: 'bfdbtymkhjildbfghserrgrt', + }, + { + content: { + text: '图2：乘联会预计6 月新能源乘用车厂商批发销量74 万辆，环比增长10%，同比增长30%。', + }, + position: { + boundingRect: { + x1: 73.7, + x2: 391.7, + y1: 570.3, + y2: 676.3, + }, + rects: [], + pageNumber: 1, + }, + comment: { + text: '', + emoji: '', + }, + id: 'fgnhxdvsesgmghyu', + }, +].map((x) => { + const boundingRect = x.position.boundingRect; + const ret: any = { + width: 849, + height: 1200, + }; + Object.entries(boundingRect).forEach(([key, value]) => { + ret[key] = value / 0.7; + }); + return { ...x, position: { ...x.position, boundingRect: ret, rects: [ret] } }; +}); diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/index.less b/web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/index.less index c9b34ff05..a6e0646e2 100644 --- a/web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/index.less +++ b/web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/index.less @@ -6,6 +6,9 @@ position: relative; :global(.PdfHighlighter) { overflow-x: hidden; - // left: 0; + } + :global(.Highlight--scrolledTo .Highlight__part) { + overflow-x: hidden; + background-color: rgba(255, 226, 143, 1); } } diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/preview.tsx b/web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/preview.tsx index 0c735438d..df008d330 100644 --- a/web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/preview.tsx +++ b/web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/preview.tsx @@ -1,16 +1,15 @@ import { Spin } from 'antd'; -import { useRef, useState } from 'react'; -import type { NewHighlight } from 'react-pdf-highlighter'; +import { useEffect, useRef } from 'react'; import { AreaHighlight, Highlight, + NewHighlight, PdfHighlighter, PdfLoader, Popup, Tip, } from 'react-pdf-highlighter'; -import { useGetSelectedChunk } from '../../hooks'; -import { testHighlights } from './hightlights'; +import { useGetChunkHighlights, useGetSelectedChunk } from '../../hooks'; import { useGetDocumentUrl } from './hooks'; import styles from './index.less'; @@ -36,7 +35,9 @@ const Preview = ({ selectedChunkId }: IProps) => { const url = useGetDocumentUrl(); const selectedChunk = useGetSelectedChunk(selectedChunkId); - const [state, setState] = useState(testHighlights); + // const [state, setState] = useState(testHighlights); + const state = useGetChunkHighlights(selectedChunkId); + const ref = useRef((highlight: any) => {}); const parseIdFromHash = () => @@ -67,7 +68,7 @@ const Preview = ({ selectedChunkId }: IProps) => { console.log('Saving highlight', highlight); - setState([{ ...highlight, id: getNextId() }, ...highlights]); + // setState([{ ...highlight, id: getNextId() }, ...highlights]); }; const updateHighlight = ( @@ -77,29 +78,31 @@ const Preview = ({ selectedChunkId }: IProps) => { ) => { console.log('Updating highlight', highlightId, position, content); - setState( - state.map((h: any) => { - const { - id, - position: originalPosition, - content: originalContent, - ...rest - } = h; - return id === highlightId - ? { - id, - position: { ...originalPosition, ...position }, - content: { ...originalContent, ...content }, - ...rest, - } - : h; - }), - ); + // setState( + // state.map((h: any) => { + // const { + // id, + // position: originalPosition, + // content: originalContent, + // ...rest + // } = h; + // return id === highlightId + // ? { + // id, + // position: { ...originalPosition, ...position }, + // content: { ...originalContent, ...content }, + // ...rest, + // } + // : h; + // }), + // ); }; - // useEffect(() => { - // ref.current(testHighlights[0]); - // }, [selectedChunk]); + useEffect(() => { + if (state.length > 0) { + ref.current(state[0]); + } + }, [state]); return (
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 134f8db21..64a130cc8 100644 --- a/web/src/pages/add-knowledge/components/knowledge-chunk/hooks.ts +++ b/web/src/pages/add-knowledge/components/knowledge-chunk/hooks.ts @@ -1,6 +1,8 @@ import { IChunk, IKnowledgeFile } from '@/interfaces/database/knowledge'; -import { useCallback, useState } from 'react'; +import { useCallback, useMemo, useState } from 'react'; +import { IHighlight } from 'react-pdf-highlighter'; import { useSelector } from 'umi'; +import { v4 as uuid } from 'uuid'; export const useSelectDocumentInfo = () => { const documentInfo: IKnowledgeFile = useSelector( @@ -28,5 +30,46 @@ export const useHandleChunkCardClick = () => { export const useGetSelectedChunk = (selectedChunkId: string) => { const chunkList: IChunk[] = useSelectChunkList(); - return chunkList.find((x) => x.chunk_id === selectedChunkId); + return ( + chunkList.find((x) => x.chunk_id === selectedChunkId) ?? ({} as IChunk) + ); +}; + +export const useGetChunkHighlights = ( + selectedChunkId: string, +): IHighlight[] => { + const selectedChunk: IChunk = useGetSelectedChunk(selectedChunkId); + + const highlights: IHighlight[] = useMemo(() => { + return Array.isArray(selectedChunk?.positions) + ? selectedChunk?.positions?.map((x) => { + const actualPositions = x.map((y, index) => + index !== 0 ? y / 0.7 : y, + ); + const boundingRect = { + width: 849, + height: 1200, + x1: actualPositions[1], + x2: actualPositions[2], + y1: actualPositions[3], + y2: actualPositions[4], + }; + return { + id: uuid(), + comment: { + text: '', + emoji: '', + }, + content: { text: selectedChunk.content_with_weight }, + position: { + boundingRect: boundingRect, + rects: [boundingRect], + pageNumber: x[0], + }, + }; + }) + : []; + }, [selectedChunk]); + + return highlights; };