Feat: Change the style of all cards according to the design #10703 (#10704)

### What problem does this PR solve?

Feat: Change the style of all cards according to the design #10703

### Type of change


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

web/src/components/card-container.tsx

@@ -0,0 +1,17 @@
+import { cn } from '@/lib/utils';
+import { PropsWithChildren } from 'react';
+
+type CardContainerProps = { className?: string } & PropsWithChildren;
+
+export function CardContainer({ children, className }: CardContainerProps) {
+  return (
+    <section
+      className={cn(
+        'grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5',
+        className,
+      )}
+    >
+      {children}
+    </section>
+  );
+}

web/src/components/home-card.tsx

@@ -24,7 +24,6 @@ export function HomeCard({
 }: IProps) {
   return (
     <Card
-      className="bg-bg-card  border-colors-outline-neutral-standard"
       onClick={() => {
         // navigateToSearch(data?.id);
         onClick?.();

web/src/components/ui/card.tsx

@@ -8,7 +8,10 @@ const Card = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn('rounded-lg  bg-bg-card  shadow-sm', className)}
+    className={cn(
+      'rounded-lg border-border-default border shadow-sm bg-bg-input',
+      className,
+    )}
     {...props}
   />
 ));

web/src/interfaces/database/agent.ts

@@ -83,12 +83,19 @@ export interface IFlowTemplate {
   canvas_type: string;
   create_date: string;
   create_time: number;
-  description: string;
+  canvas_category?: string;
   dsl: DSL;
   id: string;
-  title: string;
   update_date: string;
   update_time: number;
+  description: {
+    en: string;
+    zh: string;
+  };
+  title: {
+    en: string;
+    zh: string;
+  };
 }
 
 export interface IGenerateForm {

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

@@ -10,9 +10,10 @@ import {
 import { useSetModalState } from '@/hooks/common-hooks';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { useFetchAgentTemplates, useSetAgent } from '@/hooks/use-agent-request';
-import { IFlowTemplate } from '@/interfaces/database/flow';
 
+import { CardContainer } from '@/components/card-container';
 import { AgentCategory } from '@/constants/agent';
+import { IFlowTemplate } from '@/interfaces/database/agent';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CreateAgentDialog } from './create-agent-dialog';
@@ -121,7 +122,7 @@ export default function AgentTemplates() {
         ></SideBar>
 
         <main className="flex-1 bg-text-title-invert/50 h-dvh">
-          <div className="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 max-h-[94vh] overflow-auto px-8 pt-8">
+          <CardContainer className="max-h-[94vh] overflow-auto px-8 pt-8">
             {tempListFilter?.map((x) => {
               return (
                 <TemplateCard
@@ -131,14 +132,13 @@ export default function AgentTemplates() {
                 ></TemplateCard>
               );
             })}
-          </div>
+          </CardContainer>
           {creatingVisible && (
             <CreateAgentDialog
               loading={loading}
               visible={creatingVisible}
               hideModal={hideCreatingModal}
               onOk={handleOk}
-              canvasCategory={template?.canvas_category}
             ></CreateAgentDialog>
           )}
         </main>

web/src/pages/agents/index.tsx

@@ -1,3 +1,4 @@
+import { CardContainer } from '@/components/card-container';
 import ListFilterBar from '@/components/list-filter-bar';
 import { RenameDialog } from '@/components/rename-dialog';
 import { Button } from '@/components/ui/button';
@@ -113,7 +114,7 @@ export default function Agents() {
         </ListFilterBar>
       </div>
       <div className="flex-1 overflow-auto">
-        <div className="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 max-h-[calc(100dvh-280px)] overflow-auto px-8">
+        <CardContainer className="max-h-[calc(100dvh-280px)] overflow-auto px-8">
           {data.map((x) => {
             return (
               <AgentCard
@@ -123,7 +124,7 @@ export default function Agents() {
               ></AgentCard>
             );
           })}
-        </div>
+        </CardContainer>
       </div>
       <div className="mt-8 px-8 pb-8">
         <RAGFlowPagination

web/src/pages/agents/template-card.tsx

@@ -1,7 +1,7 @@
 import { RAGFlowAvatar } from '@/components/ragflow-avatar';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
-import { IFlowTemplate } from '@/interfaces/database/flow';
+import { IFlowTemplate } from '@/interfaces/database/agent';
 import i18n from '@/locales/config';
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';

web/src/pages/datasets/index.tsx

@@ -1,3 +1,4 @@
+import { CardContainer } from '@/components/card-container';
 import ListFilterBar from '@/components/list-filter-bar';
 import { RenameDialog } from '@/components/rename-dialog';
 import { Button } from '@/components/ui/button';
@@ -70,7 +71,7 @@ export default function Datasets() {
         </Button>
       </ListFilterBar>
       <div className="flex-1">
-        <div className="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 max-h-[calc(100dvh-280px)] overflow-auto px-8">
+        <CardContainer className="max-h-[calc(100dvh-280px)] overflow-auto px-8">
           {kbs.map((dataset) => {
             return (
               <DatasetCard
@@ -80,7 +81,7 @@ export default function Datasets() {
               ></DatasetCard>
             );
           })}
-        </div>
+        </CardContainer>
       </div>
       <div className="mt-8 px-8">
         <RAGFlowPagination

web/src/pages/next-chats/index.tsx

@@ -1,3 +1,4 @@
+import { CardContainer } from '@/components/card-container';
 import ListFilterBar from '@/components/list-filter-bar';
 import { RenameDialog } from '@/components/rename-dialog';
 import { Button } from '@/components/ui/button';
@@ -50,7 +51,7 @@ export default function ChatList() {
         </ListFilterBar>
       </div>
       <div className="flex-1 overflow-auto">
-        <div className="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 max-h-[calc(100dvh-280px)] overflow-auto px-8">
+        <CardContainer className="max-h-[calc(100dvh-280px)] overflow-auto px-8">
           {data.dialogs.map((x) => {
             return (
               <ChatCard
@@ -60,7 +61,7 @@ export default function ChatList() {
               ></ChatCard>
             );
           })}
-        </div>
+        </CardContainer>
       </div>
       <div className="mt-8 px-8 pb-8">
         <RAGFlowPagination

web/src/pages/next-searches/index.tsx

@@ -1,3 +1,4 @@
+import { CardContainer } from '@/components/card-container';
 import { IconFont } from '@/components/icon-font';
 import ListFilterBar from '@/components/list-filter-bar';
 import { RenameDialog } from '@/components/rename-dialog';
@@ -64,7 +65,7 @@ export default function SearchList() {
         </ListFilterBar>
       </div>
       <div className="flex-1">
-        <div className="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 max-h-[calc(100dvh-280px)] overflow-auto px-8">
+        <CardContainer className="max-h-[calc(100dvh-280px)] overflow-auto px-8">
           {list?.data.search_apps.map((x) => {
             return (
               <SearchCard
@@ -76,7 +77,7 @@ export default function SearchList() {
               ></SearchCard>
             );
           })}
-        </div>
+        </CardContainer>
       </div>
       {list?.data.total && list?.data.total > 0 && (
         <div className="px-8 mb-4">

web/src/pages/profile-setting/mcp/index.tsx

@@ -1,4 +1,5 @@
 import { BulkOperateBar } from '@/components/bulk-operate-bar';
+import { CardContainer } from '@/components/card-container';
 import { Button } from '@/components/ui/button';
 import { SearchInput } from '@/components/ui/input';
 import { RAGFlowPagination } from '@/components/ui/ragflow-pagination';
@@ -60,7 +61,7 @@ export default function McpServer() {
           className="mb-2.5"
         ></BulkOperateBar>
       )}
-      <section className="flex gap-5 flex-wrap">
+      <CardContainer>
         {data.mcp_servers.map((item) => (
           <McpCard
             key={item.id}
@@ -70,8 +71,8 @@ export default function McpServer() {
             showEditModal={showEditModal}
           ></McpCard>
         ))}
-      </section>
-      <div className="mt-8 px-8">
+      </CardContainer>
+      <div className="mt-8">
         <RAGFlowPagination
           {...pick(pagination, 'current', 'pageSize')}
           total={pagination.total || 0}

web/src/pages/profile-setting/mcp/mcp-card.tsx

@@ -33,7 +33,7 @@ export function McpCard({
     }
   };
   return (
-    <Card key={data.id} className="w-64">
+    <Card key={data.id}>
       <CardContent className="p-2.5 pt-2 group">
         <section className="flex justify-between pb-2">
           <h3 className="text-lg font-semibold truncate flex-1">{data.name}</h3>

web/tailwind.config.js

@@ -14,7 +14,7 @@ module.exports = {
       center: true,
       padding: '2rem',
       screens: {
-        '2xl': '1400px',
+        '2xl': '1536px',
       },
     },
     screens: {
@@ -22,7 +22,7 @@ module.exports = {
       md: '768px',
       lg: '1024px',
       xl: '1280px',
-      '2xl': '1400px',
+      '2xl': '1536px',
       '3xl': '1780px',
       '4xl': '1980px',
     },