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

@@ -1,34 +1,45 @@
 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>