Feat: Adjust the page header to breadcrumbs #3221 (#8971)

### What problem does this PR solve?

Feat: Adjust the page header to breadcrumbs #3221
### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/chunk/index-old.tsx

@@ -1,68 +0,0 @@
-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 { Routes } from '@/routes';
-import { EllipsisVertical, Save } from 'lucide-react';
-import { useMemo } from 'react';
-import { Outlet, useLocation } from 'umi';
-
-export default function ChunkPage() {
-  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 (
-    <section>
-      <PageHeader
-        title="Editing block"
-        back={navigateToDataset(
-          getQueryString(QueryStringMap.KnowledgeId) as string,
-        )}
-      >
-        <div>
-          <Segmented
-            options={options}
-            value={path}
-            onChange={navigateToChunk as (val: SegmentedValue) => void}
-            className="bg-colors-background-inverse-standard text-colors-text-neutral-standard"
-          ></Segmented>
-        </div>
-        <div className="flex items-center gap-2">
-          <Button variant={'icon'} size={'icon'}>
-            <EllipsisVertical />
-          </Button>
-          <Button variant={'tertiary'} size={'sm'}>
-            <Save />
-            Save
-          </Button>
-        </div>
-      </PageHeader>
-      <Outlet />
-    </section>
-  );
-}

web/src/pages/chunk/index.tsx

@@ -1,4 +1,12 @@
 import { PageHeader } from '@/components/page-header';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
 import { Button } from '@/components/ui/button';
 import { Segmented, SegmentedValue } from '@/components/ui/segmented';
 import {
@@ -38,12 +46,24 @@ export default function ChunkPage() {
 
   return (
     <section>
-      <PageHeader
-        title="Editing block"
-        back={navigateToDataset(
-          getQueryString(QueryStringMap.KnowledgeId) as string,
-        )}
-      >
+      <PageHeader>
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink
+                onClick={navigateToDataset(
+                  getQueryString(QueryStringMap.KnowledgeId) as string,
+                )}
+              >
+                Agent
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>xxx</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
         <div>
           <Segmented
             options={options}

web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/index.tsx

@@ -21,6 +21,14 @@ import CheckboxSets from './components/chunk-result-bar/checkbox-sets';
 import DocumentHeader from './components/document-preview/document-header';
 
 import { PageHeader } from '@/components/page-header';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
 import message from '@/components/ui/message';
 import {
   RAGFlowPagination,
@@ -31,6 +39,7 @@ import {
   QueryStringMap,
   useNavigatePage,
 } from '@/hooks/logic-hooks/navigate-hooks';
+import { useFetchKnowledgeBaseConfiguration } from '@/hooks/use-knowledge-request';
 import styles from './index.less';
 
 const Chunk = () => {
@@ -47,6 +56,7 @@ const Chunk = () => {
   } = useFetchNextChunkList();
   const { handleChunkCardClick, selectedChunkId } = useHandleChunkCardClick();
   const isPdf = documentInfo?.type === 'pdf';
+  const { data: dataset } = useFetchKnowledgeBaseConfiguration();
 
   const { t } = useTranslation();
   const { changeChunkTextMode, textMode } = useChangeChunkTextMode();
@@ -61,7 +71,8 @@ const Chunk = () => {
     chunkUpdatingVisible,
     documentId,
   } = useUpdateChunk();
-  const { navigateToDataset, getQueryString } = useNavigatePage();
+  const { navigateToDataset, getQueryString, navigateToDatasetList } =
+    useNavigatePage();
   useEffect(() => {
     setChunkList(data);
   }, [data]);
@@ -164,10 +175,31 @@ const Chunk = () => {
 
   return (
     <>
-      <PageHeader
-        title="Back"
-        back={navigateToDataset(getQueryString(QueryStringMap.id) as string)}
-      ></PageHeader>
+      <PageHeader>
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink onClick={navigateToDatasetList}>
+                {t('knowledgeDetails.dataset')}
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink
+                onClick={navigateToDataset(
+                  getQueryString(QueryStringMap.id) as string,
+                )}
+              >
+                {dataset.name}
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>{documentInfo.name}</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </PageHeader>
       <div className={styles.chunkPage}>
         <div className="flex flex-1 gap-8">
           <div className="w-2/5">

web/src/pages/chunk/parsed-result/index-old.tsx

@@ -1,10 +0,0 @@
-import ParsedResultPanel from '../parsed-result-panel';
-
-export default function ParsedResult() {
-  return (
-    <section className="flex">
-      <div className="flex-1"></div>
-      <ParsedResultPanel></ParsedResultPanel>
-    </section>
-  );
-}