Feat: Using IconFont as an additional icon library #3221 (#7427)

### What problem does this PR solve?
Feat: Using IconFont as an additional icon library #3221

### Type of change


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

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

@@ -1,11 +1,11 @@
+import { MoreButton } from '@/components/more-button';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
 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 { ChevronRight, Ellipsis } from 'lucide-react';
+import { ChevronRight } from 'lucide-react';
 import { DatasetDropdown } from './dataset-dropdown';
 import { useDisplayOwnerName } from './use-display-owner';
 import { useRenameDataset } from './use-rename-dataset';
@@ -29,7 +29,7 @@ export function DatasetCard({
       className="w-40"
       onClick={navigateToDataset(dataset.id)}
     >
-      <CardContent className="p-2.5 pt-1 group">
+      <CardContent className="p-2.5 pt-2 group">
         <section className="flex justify-between mb-2">
           <div className="flex gap-2 items-center">
             <Avatar className="size-6 rounded-lg">
@@ -46,13 +46,7 @@ export function DatasetCard({
             showDatasetRenameModal={showDatasetRenameModal}
             dataset={dataset}
           >
-            <Button
-              variant="ghost"
-              size="icon"
-              className="invisible group-hover:visible"
-            >
-              <Ellipsis />
-            </Button>
+            <MoreButton></MoreButton>
           </DatasetDropdown>
         </section>
         <div className="flex justify-between items-end">

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

@@ -1,3 +1,4 @@
+import { MoreButton } from '@/components/more-button';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Card, CardContent } from '@/components/ui/card';
 import { formatDate } from '@/utils/date';
@@ -14,17 +15,23 @@ type ApplicationCardProps = {
 export function ApplicationCard({ app }: ApplicationCardProps) {
   return (
     <Card className="w-[264px]">
-      <CardContent className="p-2.5 flex items-center gap-2.5">
-        <Avatar className="size-14 rounded-lg">
-          <AvatarImage src={app.avatar === null ? '' : app.avatar} />
-          <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-        </Avatar>
-        <div className="flex-1">
-          <h3 className="text-sm font-normal line-clamp-1 mb-1">{app.title}</h3>
-          <p className="text-xs font-normal text-text-sub-title">
-            {formatDate(app.update_time)}
-          </p>
+      <CardContent className="p-2.5  group flex justify-between">
+        <div className="flex items-center gap-2.5">
+          <Avatar className="size-14 rounded-lg">
+            <AvatarImage src={app.avatar === null ? '' : app.avatar} />
+            <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+          </Avatar>
+          <div className="flex-1">
+            <h3 className="text-sm font-normal line-clamp-1 mb-1">
+              {app.title}
+            </h3>
+            <p className="text-xs font-normal text-text-sub-title">
+              {formatDate(app.update_time)}
+            </p>
+          </div>
         </div>
+
+        <MoreButton className=""></MoreButton>
       </CardContent>
     </Card>
   );

web/src/pages/home/applications.tsx

@@ -1,48 +1,21 @@
+import { IconFont } from '@/components/icon-font';
 import { Segmented, SegmentedValue } from '@/components/ui/segmented';
 import { Routes } from '@/routes';
-import { Cpu, MessageSquare, Search } from 'lucide-react';
 import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'umi';
 import { Agents } from './agent-list';
-import { ApplicationCard, SeeAllAppCard } from './application-card';
+import { SeeAllAppCard } from './application-card';
 import { ChatList } from './chat-list';
 
-const applications = [
-  {
-    id: 1,
-    title: 'Jarvis chatbot',
-    type: 'Chat app',
-    update_time: '11/24/2024',
-    avatar: <MessageSquare className="h-6 w-6" />,
-  },
-  {
-    id: 2,
-    title: 'Search app 01',
-    type: 'Search app',
-    update_time: '11/24/2024',
-    avatar: <Search className="h-6 w-6" />,
-  },
-  {
-    id: 3,
-    title: 'Chatbot 01',
-    type: 'Chat app',
-    update_time: '11/24/2024',
-    avatar: <MessageSquare className="h-6 w-6" />,
-  },
-  {
-    id: 4,
-    title: 'Workflow 01',
-    type: 'Agent',
-    update_time: '11/24/2024',
-    avatar: <Cpu className="h-6 w-6" />,
-  },
-];
-
-const All = 'all';
+const IconMap = {
+  [Routes.Chats]: 'chat',
+  [Routes.Searches]: 'search',
+  [Routes.Agents]: 'agent',
+};
 
 export function Applications() {
-  const [val, setVal] = useState('all');
+  const [val, setVal] = useState(Routes.Chats);
   const { t } = useTranslation();
   const navigate = useNavigate();
 
@@ -52,10 +25,6 @@ export function Applications() {
 
   const options = useMemo(
     () => [
-      {
-        label: 'All',
-        value: All,
-      },
       { value: Routes.Chats, label: t('header.chat') },
       { value: Routes.Searches, label: t('header.search') },
       { value: Routes.Agents, label: t('header.flow') },
@@ -70,7 +39,13 @@ export function Applications() {
   return (
     <section className="mt-12">
       <div className="flex justify-between items-center mb-5">
-        <h2 className="text-2xl font-bold ">Applications</h2>
+        <h2 className="text-2xl font-bold flex gap-2.5">
+          <IconFont
+            name={IconMap[val as keyof typeof IconMap]}
+            className="size-8"
+          ></IconFont>
+          {options.find((x) => x.value === val)?.label}
+        </h2>
         <Segmented
           options={options}
           value={val}
@@ -79,14 +54,9 @@ export function Applications() {
         ></Segmented>
       </div>
       <div className="flex flex-wrap gap-4">
-        {(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>}
-        {val === All || <SeeAllAppCard click={handleNavigate}></SeeAllAppCard>}
+        {<SeeAllAppCard click={handleNavigate}></SeeAllAppCard>}
       </div>
     </section>
   );

web/src/pages/home/banner.tsx

@@ -1,5 +1,6 @@
 import { Card, CardContent } from '@/components/ui/card';
 import { ArrowRight, X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 
 function BannerCard() {
   return (
@@ -39,9 +40,10 @@ export function Banner() {
 }
 
 export function NextBanner() {
+  const { t } = useTranslation();
   return (
     <section className="text-5xl pt-10 pb-14 font-bold">
-      <span className="text-text-title">Welcome to</span>
+      <span className="text-text-title">{t('header.welcome')}</span>
       <span className="pl-3 text-transparent bg-clip-text  bg-gradient-to-l from-[#40EBE3] to-[#4A51FF]">
         RAGFlow
       </span>

web/src/pages/home/datasets.tsx

@@ -1,10 +1,13 @@
+import { IconFont } from '@/components/icon-font';
 import { RenameDialog } from '@/components/rename-dialog';
 import { CardSkeleton } from '@/components/ui/skeleton';
 import { useFetchNextKnowledgeListByPage } from '@/hooks/use-knowledge-request';
+import { useTranslation } from 'react-i18next';
 import { DatasetCard, SeeAllCard } from '../datasets/dataset-card';
 import { useRenameDataset } from '../datasets/use-rename-dataset';
 
 export function Datasets() {
+  const { t } = useTranslation();
   const { kbs, loading } = useFetchNextKnowledgeListByPage();
   const {
     datasetRenameLoading,
@@ -17,7 +20,10 @@ export function Datasets() {
 
   return (
     <section>
-      <h2 className="text-2xl font-bold mb-6">Datasets</h2>
+      <h2 className="text-2xl font-bold mb-6 flex gap-2.5 items-center">
+        <IconFont name="data" className="size-8"></IconFont>
+        {t('header.knowledgeBase')}
+      </h2>
       <div className="flex gap-6">
         {loading ? (
           <div className="flex-1">