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/layouts/next-header.tsx

@@ -72,7 +72,7 @@ export function Header() {
   }, [navigate]);
 
   return (
-    <section className="py-6 px-10 flex justify-between items-center border-b">
+    <section className="py-6 px-10 flex justify-between items-center ">
       <div className="flex items-center gap-4">
         <img
           src={'/logo.svg'}

web/src/pages/datasets/dataset-card.tsx

@@ -5,7 +5,7 @@ import { Card, CardContent } from '@/components/ui/card';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { IKnowledge } from '@/interfaces/database/knowledge';
 import { formatDate } from '@/utils/date';
-import { Ellipsis } from 'lucide-react';
+import { ChevronRight, Ellipsis } from 'lucide-react';
 import { DatasetDropdown } from './dataset-dropdown';
 import { useDisplayOwnerName } from './use-display-owner';
 import { useRenameDataset } from './use-rename-dataset';
@@ -66,3 +66,18 @@ export function DatasetCard({
     </Card>
   );
 }
+
+export function SeeAllCard() {
+  const { navigateToDatasetList } = useNavigatePage();
+
+  return (
+    <Card
+      className="bg-colors-background-inverse-weak w-40"
+      onClick={navigateToDatasetList}
+    >
+      <CardContent className="p-2.5 pt-1 w-full h-full flex items-center justify-center gap-1.5">
+        See All <ChevronRight className="size-4" />
+      </CardContent>
+    </Card>
+  );
+}

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>

web/tailwind.config.js

@@ -44,6 +44,7 @@ module.exports = {
 
         'background-badge': 'var(--background-badge)',
         'text-badge': 'var(--text-badge)',
+        'text-title': 'var(--text-title)',
 
         primary: {
           DEFAULT: 'hsl(var(--primary))',

web/tailwind.css

@@ -76,6 +76,8 @@
 
     --background-badge: rgba(22, 22, 24, 0.5);
     --text-badge: rgba(151, 154, 171, 1);
+
+    --text-title: rgba(22, 22, 24, 1);
   }
 
   .dark {
@@ -172,6 +174,8 @@
     --sidebar-accent-foreground: 240 4.8% 95.9%;
     --sidebar-border: 240 3.7% 15.9%;
     --sidebar-ring: 217.2 91.2% 59.8%;
+
+    --text-title: rgba(255, 255, 255, 1);
   }
 }