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/components/page-header.tsx

-import { ArrowLeft } from 'lucide-react';
-import { PropsWithChildren, ReactNode } from 'react';
-import { Button } from './ui/button';
+import { PropsWithChildren } from 'react';
 
-interface IPageHeaderProps extends PropsWithChildren {
-  back(): void;
-  title: ReactNode;
-}
-
-export function PageHeader({ back, title, children }: IPageHeaderProps) {
+export function PageHeader({ children }: PropsWithChildren) {
   return (
-    <header className="flex justify-between items-center border-b pr-9">
-      <div className="flex items-center ">
-        <div className="flex items-center border-r p-1.5">
-          <Button variant="ghost" size="icon" onClick={back}>
-            <ArrowLeft className="w-5 h-5" />
-          </Button>
-        </div>
-        <div className="p-4">
-          <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
-        </div>
-      </div>
+    <header className="flex justify-between items-center border-b bg-background-header-bar p-5">
       {children}
     </header>
   );

web/src/components/ui/breadcrumb.tsx

 >(({ className, ...props }, ref) => (
   <li
     ref={ref}
-    className={cn('inline-flex items-center gap-1.5', className)}
+    className={cn(
+      'inline-flex items-center gap-1.5 text-text-sub-title',
+      className,
+    )}
     {...props}
   />
 ));

web/src/locales/en.ts

       tavilySearchDescription: 'Search results via Tavily service.',
       tavilyExtract: 'Tavily Extract',
       tavilyExtractDescription: 'Tavily Extract',
+      log: 'Log',
+      management: 'Management',
+      import: 'Import',
+      export: 'Export',
     },
     llmTools: {
       bad_calculator: {

web/src/locales/zh.ts

       tavilySearchDescription: '通过 Tavily 服务搜索结果',
       tavilyExtract: 'Tavily Extract',
       tavilyExtractDescription: 'Tavily Extract',
+      log: '日志',
+      management: '管理',
+      import: '导入',
+      export: '导出',
     },
     footer: {
       profile: 'All rights reserved @ React',

web/src/pages/agent/index.tsx

 import { PageHeader } from '@/components/page-header';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
 import { Button, ButtonLoading } from '@/components/ui/button';
 import {
   DropdownMenu,
 
   return (
     <section className="h-full">
-      <PageHeader back={navigateToAgentList} title={flowDetail.title}>
-        <div className="flex items-center gap-2">
+      <PageHeader>
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink onClick={navigateToAgentList}>
+                Agent
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>{flowDetail.title}</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+        <div className="flex items-center gap-5">
           <ButtonLoading
             variant={'secondary'}
             onClick={() => saveGraph()}
             loading={loading}
           >
-            <LaptopMinimalCheck /> Save
+            <LaptopMinimalCheck /> {t('flow.save')}
           </ButtonLoading>
           <Button variant={'secondary'} onClick={handleRunAgent}>
             <CirclePlay />
-            Run app
+            {t('flow.run')}
           </Button>
           <Button variant={'secondary'} onClick={showVersionDialog}>
             <History />
-            History version
+            {t('flow.historyversion')}
           </Button>
           <Button variant={'secondary'}>
             <Logs />
-            Log
+            {t('flow.log')}
           </Button>
 
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button variant={'secondary'}>
-                <ChevronDown /> Management
+                <ChevronDown /> {t('flow.management')}
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent>
               <DropdownMenuSeparator />
               <AgentDropdownMenuItem onClick={handleImportJson}>
                 <Download />
-                Import
+                {t('flow.import')}
               </AgentDropdownMenuItem>
               <DropdownMenuSeparator />
               <AgentDropdownMenuItem onClick={handleExportJson}>
                 <Upload />
-                Export
+                {t('flow.export')}
               </AgentDropdownMenuItem>
               <DropdownMenuSeparator />
               <AgentDropdownMenuItem onClick={showEmbedModal}>

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

-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

 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 {
 
   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

 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,
   QueryStringMap,
   useNavigatePage,
 } from '@/hooks/logic-hooks/navigate-hooks';
+import { useFetchKnowledgeBaseConfiguration } from '@/hooks/use-knowledge-request';
 import styles from './index.less';
 
 const Chunk = () => {
   } = useFetchNextChunkList();
   const { handleChunkCardClick, selectedChunkId } = useHandleChunkCardClick();
   const isPdf = documentInfo?.type === 'pdf';
+  const { data: dataset } = useFetchKnowledgeBaseConfiguration();
 
   const { t } = useTranslation();
   const { changeChunkTextMode, textMode } = useChangeChunkTextMode();
     chunkUpdatingVisible,
     documentId,
   } = useUpdateChunk();
-  const { navigateToDataset, getQueryString } = useNavigatePage();
+  const { navigateToDataset, getQueryString, navigateToDatasetList } =
+    useNavigatePage();
   useEffect(() => {
     setChunkList(data);
   }, [data]);
 
   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

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

web/src/pages/dataset/index.tsx

 import { PageHeader } from '@/components/page-header';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
+import { useFetchKnowledgeBaseConfiguration } from '@/hooks/use-knowledge-request';
+import { useTranslation } from 'react-i18next';
 import { Outlet } from 'umi';
 import { SideBar } from './sidebar';
 
 export default function DatasetWrapper() {
   const { navigateToDatasetList } = useNavigatePage();
+  const { t } = useTranslation();
+  const { data } = useFetchKnowledgeBaseConfiguration();
 
   return (
     <section>
-      <PageHeader
-        title="Dataset details"
-        back={navigateToDatasetList}
-      ></PageHeader>
+      <PageHeader>
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink onClick={navigateToDatasetList}>
+                {t('knowledgeDetails.dataset')}
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>{data.name}</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </PageHeader>
       <div className="flex flex-1">
         <SideBar></SideBar>
         <div className="flex-1">

web/src/pages/profile-setting/index.tsx

 import { PageHeader } from '@/components/page-header';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
+import { House } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import { Outlet } from 'umi';
 import { SideBar } from './sidebar';
 
 export default function ProfileSetting() {
   const { navigateToHome } = useNavigatePage();
+  const { t } = useTranslation();
 
   return (
     <div className="flex flex-col w-full h-screen bg-background text-foreground">
-      {/* <header className="flex items-center border-b">
-        <div className="flex items-center border-r p-1.5">
-          <Button variant="ghost" size="icon" onClick={navigateToHome}>
-            <ArrowLeft className="w-5 h-5" />
-          </Button>
-        </div>
-        <div className="p-4">
-          <h1 className="text-2xl font-semibold tracking-tight">
-            Profile & settings
-          </h1>
-        </div>
-      </header> */}
-
-      <PageHeader title="Profile & settings" back={navigateToHome}></PageHeader>
+      <PageHeader>
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink onClick={navigateToHome}>
+                <House className="size-4" />
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>{t('setting.profile')}</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </PageHeader>
 
       <div className="flex flex-1 bg-muted/50">
         <SideBar></SideBar>
 
         <main className="flex-1 ">
           <Outlet></Outlet>
-          {/* <h1 className="text-3xl font-bold mb-6"> {title}</h1> */}
         </main>
       </div>
     </div>