From b4ad565df65c8b5478f9b733a43842c13991f792 Mon Sep 17 00:00:00 2001 From: balibabu Date: Fri, 14 Feb 2025 18:12:39 +0800 Subject: [PATCH] Feat: Add ParsedPageCard component #3221 (#4976) ### What problem does this PR solve? Feat: Add ParsedPageCard component #3221 ### Type of change - [x] New Feature (non-breaking change which adds functionality) --- web/src/hooks/logic-hooks/navigate-hooks.ts | 13 ++++- web/src/pages/chunk/chunk-card.tsx | 34 +++++++++++++ web/src/pages/chunk/chunk-result/index.tsx | 9 +++- web/src/pages/chunk/chunk-toolbar.tsx | 20 ++++++++ web/src/pages/chunk/chunked-result-panel.tsx | 0 web/src/pages/chunk/index.tsx | 52 ++++++++++++++++++-- web/src/pages/chunk/parsed-result-panel.tsx | 35 +++++++++++++ web/src/pages/chunk/parsed-result/index.tsx | 9 +++- 8 files changed, 166 insertions(+), 6 deletions(-) create mode 100644 web/src/pages/chunk/chunk-card.tsx create mode 100644 web/src/pages/chunk/chunk-toolbar.tsx create mode 100644 web/src/pages/chunk/chunked-result-panel.tsx create mode 100644 web/src/pages/chunk/parsed-result-panel.tsx diff --git a/web/src/hooks/logic-hooks/navigate-hooks.ts b/web/src/hooks/logic-hooks/navigate-hooks.ts index c19710911..aaa4557d2 100644 --- a/web/src/hooks/logic-hooks/navigate-hooks.ts +++ b/web/src/hooks/logic-hooks/navigate-hooks.ts @@ -1,6 +1,6 @@ import { Routes } from '@/routes'; import { useCallback } from 'react'; -import { useNavigate, useSearchParams } from 'umi'; +import { useNavigate, useParams, useSearchParams } from 'umi'; export enum QueryStringMap { KnowledgeId = 'knowledgeId', @@ -9,6 +9,7 @@ export enum QueryStringMap { export const useNavigatePage = () => { const navigate = useNavigate(); const [searchParams] = useSearchParams(); + const { id } = useParams(); const navigateToDatasetList = useCallback(() => { navigate(Routes.Datasets); @@ -61,6 +62,15 @@ export const useNavigatePage = () => { [searchParams], ); + const navigateToChunk = useCallback( + (route: Routes) => { + navigate( + `${route}/${id}?${QueryStringMap.KnowledgeId}=${getQueryString(QueryStringMap.KnowledgeId)}`, + ); + }, + [getQueryString, id, navigate], + ); + return { navigateToDatasetList, navigateToDataset, @@ -70,5 +80,6 @@ export const useNavigatePage = () => { navigateToChat, navigateToChunkParsedResult, getQueryString, + navigateToChunk, }; }; diff --git a/web/src/pages/chunk/chunk-card.tsx b/web/src/pages/chunk/chunk-card.tsx new file mode 100644 index 000000000..c76b1bd39 --- /dev/null +++ b/web/src/pages/chunk/chunk-card.tsx @@ -0,0 +1,34 @@ +import { Card, CardContent } from '@/components/ui/card'; + +interface ParsedPageCardProps { + page: string; + content: string; +} + +export function ParsedPageCard({ page, content }: ParsedPageCardProps) { + return ( + + +

{page}

+
+ {content} +
+ + + ); +} + +interface ChunkCardProps { + activated: boolean; +} + +export function ChunkCard({}: ChunkCardProps) { + return ( + + +

{}

+
{}
+ + + ); +} diff --git a/web/src/pages/chunk/chunk-result/index.tsx b/web/src/pages/chunk/chunk-result/index.tsx index e4a260220..51e2ddeff 100644 --- a/web/src/pages/chunk/chunk-result/index.tsx +++ b/web/src/pages/chunk/chunk-result/index.tsx @@ -1,3 +1,10 @@ +import ParsedResultPanel from '../parsed-result-panel'; + export default function ChunkResult() { - return
ChunkResult
; + return ( +
+ +
+
+ ); } diff --git a/web/src/pages/chunk/chunk-toolbar.tsx b/web/src/pages/chunk/chunk-toolbar.tsx new file mode 100644 index 000000000..4e63b4cf5 --- /dev/null +++ b/web/src/pages/chunk/chunk-toolbar.tsx @@ -0,0 +1,20 @@ +import { Button } from '@/components/ui/button'; +import { Copy } from 'lucide-react'; + +export function ChunkToolbar() { + return ( +
+ + Parsed results + +
+ + +
+
+ ); +} diff --git a/web/src/pages/chunk/chunked-result-panel.tsx b/web/src/pages/chunk/chunked-result-panel.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/web/src/pages/chunk/index.tsx b/web/src/pages/chunk/index.tsx index 7609c7afd..fe329b9e6 100644 --- a/web/src/pages/chunk/index.tsx +++ b/web/src/pages/chunk/index.tsx @@ -1,12 +1,41 @@ import { PageHeader } from '@/components/page-header'; +import { Button } from '@/components/ui/button'; +import { Segmented, SegmentedValue } from '@/components/ui/segmented'; import { QueryStringMap, useNavigatePage, } from '@/hooks/logic-hooks/navigate-hooks'; -import { Outlet } from 'umi'; +import { Routes } from '@/routes'; +import { EllipsisVertical } from 'lucide-react'; +import { useMemo } from 'react'; +import { Outlet, useLocation } from 'umi'; export default function ChunkPage() { - const { navigateToDataset, getQueryString } = useNavigatePage(); + const { navigateToDataset, getQueryString, navigateToChunk } = + useNavigatePage(); + const location = useLocation(); + + const options = useMemo(() => { + return [ + { + label: 'Parsed results', + value: Routes.ParsedResult, + }, + { + label: 'Chunk result', + value: Routes.ChunkResult, + }, + { + label: 'Result view', + value: Routes.ResultView, + }, + ]; + }, []); + + const path = useMemo(() => { + return location.pathname.split('/').slice(0, 3).join('/'); + }, [location.pathname]); + return (
+ > +
+ void} + className="bg-colors-background-inverse-standard text-colors-text-neutral-standard" + > +
+
+ + +
+
); diff --git a/web/src/pages/chunk/parsed-result-panel.tsx b/web/src/pages/chunk/parsed-result-panel.tsx new file mode 100644 index 000000000..c0b4432cb --- /dev/null +++ b/web/src/pages/chunk/parsed-result-panel.tsx @@ -0,0 +1,35 @@ +import { ParsedPageCard } from './chunk-card'; +import { ChunkToolbar } from './chunk-toolbar'; + +const list = new Array(10).fill({ + page: 'page 1', + content: `Word并不像 TeX／LaTeX为我们提供了合适的定理环境，因此需要我们另想办法。 + + 第1节 自定义定理环境 + 我们已经使用了“定理样式”作为定理排版的样式，如： + + 定理1.1．对顶角相等。 + + 如果大家需要其他的如引理，公理，定义等环境可以仿照定义。 + + 定理1.2．三边对应相等的三角形全等。 + + 我们将这个过程也定义成了宏，在工具栏Theorem里面。书写过程如下：先写好定理本身，然后在该段落处放置光标，打开Theorem工具栏，点SetTheorem，即可见到效果。请尝试下面一个例子：`, +}); + +export default function ParsedResultPanel() { + return ( +
+ +
+ {list.map((x, idx) => ( + + ))} +
+
+ ); +} diff --git a/web/src/pages/chunk/parsed-result/index.tsx b/web/src/pages/chunk/parsed-result/index.tsx index 5d88572aa..0fecb95a3 100644 --- a/web/src/pages/chunk/parsed-result/index.tsx +++ b/web/src/pages/chunk/parsed-result/index.tsx @@ -1,3 +1,10 @@ +import ParsedResultPanel from '../parsed-result-panel'; + export default function ParsedResult() { - return
ParsedResult
; + return ( +
+
+ +
+ ); }