Feat: Modify background color of Card #3221 (#7421)

### What problem does this PR solve?

Feat: Modify background color of Card #3221

### Type of change


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

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

@@ -1,6 +1,7 @@
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Card, CardContent } from '@/components/ui/card';
 import { formatDate } from '@/utils/date';
+import { ChevronRight } from 'lucide-react';
 
 type ApplicationCardProps = {
   app: {
@@ -12,19 +13,33 @@ type ApplicationCardProps = {
 
 export function ApplicationCard({ app }: ApplicationCardProps) {
   return (
-    <Card className="bg-colors-background-inverse-weak border-colors-outline-neutral-standard w-64">
-      <CardContent className="p-4 flex items-center gap-6">
+    <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-lg font-semibold line-clamp-1 mb-1">
-            {app.title}
-          </h3>
-          <p className="text-sm opacity-80">{formatDate(app.update_time)}</p>
+          <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>
       </CardContent>
     </Card>
   );
 }
+
+export type SeeAllAppCardProps = {
+  click(): void;
+};
+
+export function SeeAllAppCard({ click }: SeeAllAppCardProps) {
+  return (
+    <Card className="w-64 min-h-[76px]" onClick={click}>
+      <CardContent className="p-2.5 pt-1 w-full h-full flex items-center justify-center gap-1.5 text-text-sub-title">
+        See All <ChevronRight className="size-4" />
+      </CardContent>
+    </Card>
+  );
+}

web/src/pages/home/applications.tsx

@@ -1,10 +1,11 @@
 import { Segmented, SegmentedValue } from '@/components/ui/segmented';
 import { Routes } from '@/routes';
 import { Cpu, MessageSquare, Search } from 'lucide-react';
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'umi';
 import { Agents } from './agent-list';
-import { ApplicationCard } from './application-card';
+import { ApplicationCard, SeeAllAppCard } from './application-card';
 import { ChatList } from './chat-list';
 
 const applications = [
@@ -38,15 +39,22 @@ const applications = [
   },
 ];
 
+const All = 'all';
+
 export function Applications() {
   const [val, setVal] = useState('all');
   const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const handleNavigate = useCallback(() => {
+    navigate(val);
+  }, [navigate, val]);
 
   const options = useMemo(
     () => [
       {
         label: 'All',
-        value: 'all',
+        value: All,
       },
       { value: Routes.Chats, label: t('header.chat') },
       { value: Routes.Searches, label: t('header.search') },
@@ -61,7 +69,7 @@ export function Applications() {
 
   return (
     <section className="mt-12">
-      <div className="flex justify-between items-center mb-6">
+      <div className="flex justify-between items-center mb-5">
         <h2 className="text-2xl font-bold ">Applications</h2>
         <Segmented
           options={options}
@@ -71,13 +79,14 @@ export function Applications() {
         ></Segmented>
       </div>
       <div className="flex flex-wrap gap-4">
-        {(val === 'all' || val === Routes.Searches) &&
+        {(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>}
       </div>
     </section>
   );