Feat: Switch the root route to the new page #3221 (#9560)

### What problem does this PR solve?

Feat: Switch the root route to the new page #3221

### Type of change


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

web/src/pages/agent/index.tsx

@@ -63,7 +63,7 @@ function AgentDropdownMenuItem({
 
 export default function Agent() {
   const { id } = useParams();
-  const { navigateToAgentList } = useNavigatePage();
+  const { navigateToAgents } = useNavigatePage();
   const {
     visible: chatDrawerVisible,
     hideModal: hideChatDrawer,
@@ -113,7 +113,7 @@ export default function Agent() {
           <Breadcrumb>
             <BreadcrumbList>
               <BreadcrumbItem>
-                <BreadcrumbLink onClick={navigateToAgentList}>
+                <BreadcrumbLink onClick={navigateToAgents}>
                   Agent
                 </BreadcrumbLink>
               </BreadcrumbItem>

web/src/pages/agents/agent-log-page.tsx

@@ -44,7 +44,7 @@ const getEndOfToday = (): Date => {
   return today;
 };
 const AgentLogPage: React.FC = () => {
-  const { navigateToAgentList, navigateToAgent } = useNavigatePage();
+  const { navigateToAgents, navigateToAgent } = useNavigatePage();
   const { flowDetail: agentDetail } = useFetchDataOnMount();
   const { id: canvasId } = useParams();
   const queryClient = useQueryClient();
@@ -210,9 +210,7 @@ const AgentLogPage: React.FC = () => {
         <Breadcrumb>
           <BreadcrumbList>
             <BreadcrumbItem>
-              <BreadcrumbLink onClick={navigateToAgentList}>
-                Agent
-              </BreadcrumbLink>
+              <BreadcrumbLink onClick={navigateToAgents}>Agent</BreadcrumbLink>
             </BreadcrumbItem>
             <BreadcrumbSeparator />
             <BreadcrumbItem>

web/src/pages/agents/agent-templates.tsx

@@ -18,7 +18,7 @@ import { TemplateCard } from './template-card';
 import { MenuItemKey, SideBar } from './template-sidebar';
 
 export default function AgentTemplates() {
-  const { navigateToAgentList } = useNavigatePage();
+  const { navigateToAgents } = useNavigatePage();
   const { t } = useTranslation();
   const list = useFetchAgentTemplates();
   const { loading, setAgent } = useSetAgent();
@@ -89,9 +89,7 @@ export default function AgentTemplates() {
         <Breadcrumb>
           <BreadcrumbList>
             <BreadcrumbItem>
-              <BreadcrumbLink onClick={navigateToAgentList}>
-                Agent
-              </BreadcrumbLink>
+              <BreadcrumbLink onClick={navigateToAgents}>Agent</BreadcrumbLink>
             </BreadcrumbItem>
             <BreadcrumbSeparator />
             <BreadcrumbItem>

web/src/pages/home/agent-list.tsx

@@ -1,10 +1,18 @@
+import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { useFetchAgentListByPage } from '@/hooks/use-agent-request';
 import { ApplicationCard } from './application-card';
 
 export function Agents() {
   const { data } = useFetchAgentListByPage();
+  const { navigateToAgent } = useNavigatePage();
 
   return data
     .slice(0, 10)
-    .map((x) => <ApplicationCard key={x.id} app={x}></ApplicationCard>);
+    .map((x) => (
+      <ApplicationCard
+        key={x.id}
+        app={x}
+        onClick={navigateToAgent(x.id)}
+      ></ApplicationCard>
+    ));
 }

web/src/pages/home/application-card.tsx

@@ -10,11 +10,12 @@ type ApplicationCardProps = {
     title: string;
     update_time: number;
   };
+  onClick?(): void;
 };
 
-export function ApplicationCard({ app }: ApplicationCardProps) {
+export function ApplicationCard({ app, onClick }: ApplicationCardProps) {
   return (
-    <Card className="w-[264px]">
+    <Card className="w-[264px]" onClick={onClick}>
       <CardContent className="p-2.5  group flex justify-between">
         <div className="flex items-center gap-2.5">
           <RAGFlowAvatar

web/src/pages/home/chat-list.tsx

@@ -1,15 +1,20 @@
+import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { useFetchDialogList } from '@/hooks/use-chat-request';
 import { ApplicationCard } from './application-card';
 
 export function ChatList() {
   const { data } = useFetchDialogList();
+  const { navigateToChat } = useNavigatePage();
 
-  return data.dialogs
-    .slice(0, 10)
-    .map((x) => (
-      <ApplicationCard
-        key={x.id}
-        app={{ avatar: x.icon, title: x.name, update_time: x.update_time }}
-      ></ApplicationCard>
-    ));
+  return data.dialogs.slice(0, 10).map((x) => (
+    <ApplicationCard
+      key={x.id}
+      app={{
+        avatar: x.icon,
+        title: x.name,
+        update_time: x.update_time,
+      }}
+      onClick={navigateToChat(x.id)}
+    ></ApplicationCard>
+  ));
 }

web/src/pages/home/search-list.tsx

@@ -1,15 +1,20 @@
+import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { useFetchSearchList } from '../next-searches/hooks';
 import { ApplicationCard } from './application-card';
 
 export function SearchList() {
   const { data } = useFetchSearchList();
+  const { navigateToSearch } = useNavigatePage();
 
-  return data?.data.search_apps
-    .slice(0, 10)
-    .map((x) => (
-      <ApplicationCard
-        key={x.id}
-        app={{ avatar: x.avatar, title: x.name, update_time: x.update_time }}
-      ></ApplicationCard>
-    ));
+  return data?.data.search_apps.slice(0, 10).map((x) => (
+    <ApplicationCard
+      key={x.id}
+      app={{
+        avatar: x.avatar,
+        title: x.name,
+        update_time: x.update_time,
+      }}
+      onClick={() => navigateToSearch(x.id)}
+    ></ApplicationCard>
+  ));
 }

web/src/pages/login/index.tsx

@@ -36,7 +36,7 @@ const Login = () => {
   const { isLogin } = useAuth();
   useEffect(() => {
     if (isLogin) {
-      navigate('/knowledge');
+      navigate('/');
     }
   }, [isLogin, navigate]);
 
@@ -68,7 +68,7 @@ const Login = () => {
           password: rsaPassWord,
         });
         if (code === 0) {
-          navigate('/knowledge');
+          navigate('/');
         }
       } else {
         const code = await register({

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

@@ -2,16 +2,49 @@ import { Flex } from 'antd';
 import { Outlet } from 'umi';
 import SideBar from './sidebar';
 
+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 { cn } from '@/lib/utils';
+import { House } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import styles from './index.less';
 
 const UserSetting = () => {
+  const { t } = useTranslation();
+  const { navigateToHome } = useNavigatePage();
+
   return (
-    <Flex className={styles.settingWrapper}>
-      <SideBar></SideBar>
-      <Flex flex={1} className={styles.outletWrapper}>
-        <Outlet></Outlet>
+    <section>
+      <PageHeader>
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink onClick={navigateToHome}>
+                <House className="size-4" />
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>{t('setting.profile')}</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </PageHeader>
+      <Flex className={cn(styles.settingWrapper, '-translate-y-6')}>
+        <SideBar></SideBar>
+        <Flex flex={1} className={styles.outletWrapper}>
+          <Outlet></Outlet>
+        </Flex>
       </Flex>
-    </Flex>
+    </section>
   );
 };