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/dataset/index.tsx

@@ -1,17 +1,40 @@
 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">