Feat: Adjust the style of the home page #3221 (#7405)

### What problem does this PR solve?

Feat: Adjust the style of the home page #3321

### Type of change


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

web/src/pages/home/applications.tsx

@@ -5,6 +5,7 @@ import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Agents } from './agent-list';
 import { ApplicationCard } from './application-card';
+import { ChatList } from './chat-list';
 
 const applications = [
   {
@@ -70,12 +71,13 @@ export function Applications() {
         ></Segmented>
       </div>
       <div className="flex flex-wrap gap-4">
-        {val === Routes.Agents ||
+        {(val === 'all' || val === Routes.Searches) &&
           [...Array(12)].map((_, i) => {
             const app = applications[i % 4];
             return <ApplicationCard key={i} app={app}></ApplicationCard>;
           })}
         {val === Routes.Agents && <Agents></Agents>}
+        {val === Routes.Chats && <ChatList></ChatList>}
       </div>
     </section>
   );

web/src/pages/home/banner.tsx

@@ -37,3 +37,14 @@ export function Banner() {
     </section>
   );
 }
+
+export function NextBanner() {
+  return (
+    <section className="text-5xl pt-10 pb-14 font-bold">
+      <span className="text-text-title">Welcome to</span>
+      <span className="pl-3 text-transparent bg-clip-text  bg-gradient-to-b from-[#40EBE3] to-[#4A51FF]">
+        RAGFlow
+      </span>
+    </section>
+  );
+}

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

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

web/src/pages/home/datasets.tsx

@@ -1,9 +1,8 @@
 import { RenameDialog } from '@/components/rename-dialog';
-import { Button } from '@/components/ui/button';
 import { CardSkeleton } from '@/components/ui/skeleton';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { useFetchNextKnowledgeListByPage } from '@/hooks/use-knowledge-request';
-import { DatasetCard } from '../datasets/dataset-card';
+import { DatasetCard, SeeAllCard } from '../datasets/dataset-card';
 import { useRenameDataset } from '../datasets/use-rename-dataset';
 
 export function Datasets() {
@@ -37,13 +36,7 @@ export function Datasets() {
             ))}
           </div>
         )}
-        <Button
-          className="h-auto "
-          variant={'tertiary'}
-          onClick={navigateToDatasetList}
-        >
-          See all
-        </Button>
+        <SeeAllCard></SeeAllCard>
       </div>
       {datasetRenameVisible && (
         <RenameDialog

web/src/pages/home/index.tsx

@@ -1,12 +1,12 @@
 import { Applications } from './applications';
-import { Banner } from './banner';
+import { NextBanner } from './banner';
 import { Datasets } from './datasets';
 
 const Home = () => {
   return (
     <div className="mx-8">
       <section>
-        <Banner></Banner>
+        <NextBanner></NextBanner>
         <Datasets></Datasets>
         <Applications></Applications>
       </section>