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/agent/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, ButtonLoading } from '@/components/ui/button';
 import {
   DropdownMenu,
@@ -89,32 +97,45 @@ export default function Agent() {
 
   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>
@@ -125,12 +146,12 @@ export default function Agent() {
               <DropdownMenuSeparator />
               <AgentDropdownMenuItem onClick={handleImportJson}>
                 <Download />
-                Import
+                {t('flow.import')}
               </AgentDropdownMenuItem>
               <DropdownMenuSeparator />
               <AgentDropdownMenuItem onClick={handleExportJson}>
                 <Upload />
-                Export
+                {t('flow.export')}
               </AgentDropdownMenuItem>
               <DropdownMenuSeparator />
               <AgentDropdownMenuItem onClick={showEmbedModal}>