From 8d333f35905ca30ad15791df077abe5c4dce4116 Mon Sep 17 00:00:00 2001 From: balibabu Date: Tue, 21 Oct 2025 20:08:55 +0800 Subject: [PATCH] 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 | 17 +++++++++++++++++ web/src/components/home-card.tsx | 1 - web/src/components/ui/card.tsx | 5 ++++- web/src/interfaces/database/agent.ts | 11 +++++++++-- web/src/pages/agents/agent-templates.tsx | 8 ++++---- web/src/pages/agents/index.tsx | 5 +++-- web/src/pages/agents/template-card.tsx | 2 +- web/src/pages/datasets/index.tsx | 5 +++-- web/src/pages/next-chats/index.tsx | 5 +++-- web/src/pages/next-searches/index.tsx | 5 +++-- web/src/pages/profile-setting/mcp/index.tsx | 7 ++++--- web/src/pages/profile-setting/mcp/mcp-card.tsx | 2 +- web/tailwind.config.js | 4 ++-- 13 files changed, 54 insertions(+), 23 deletions(-) create mode 100644 web/src/components/card-container.tsx diff --git a/web/src/components/card-container.tsx b/web/src/components/card-container.tsx new file mode 100644 index 000000000..34930bc9a --- /dev/null +++ b/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 ( +
+ {children} +
+ ); +} diff --git a/web/src/components/home-card.tsx b/web/src/components/home-card.tsx index 91eecf178..67562d60f 100644 --- a/web/src/components/home-card.tsx +++ b/web/src/components/home-card.tsx @@ -24,7 +24,6 @@ export function HomeCard({ }: IProps) { return ( { // navigateToSearch(data?.id); onClick?.(); diff --git a/web/src/components/ui/card.tsx b/web/src/components/ui/card.tsx index 7c2c813ee..66cfe6504 100644 --- a/web/src/components/ui/card.tsx +++ b/web/src/components/ui/card.tsx @@ -8,7 +8,10 @@ const Card = React.forwardRef< >(({ className, ...props }, ref) => (
)); diff --git a/web/src/interfaces/database/agent.ts b/web/src/interfaces/database/agent.ts index 8bd33e89b..a1dbcfa20 100644 --- a/web/src/interfaces/database/agent.ts +++ b/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 { diff --git a/web/src/pages/agents/agent-templates.tsx b/web/src/pages/agents/agent-templates.tsx index b84e71449..75c7fe388 100644 --- a/web/src/pages/agents/agent-templates.tsx +++ b/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() { >
-
+ {tempListFilter?.map((x) => { return ( ); })} -
+ {creatingVisible && ( )}
diff --git a/web/src/pages/agents/index.tsx b/web/src/pages/agents/index.tsx index ab2db3e3b..a374f0a0d 100644 --- a/web/src/pages/agents/index.tsx +++ b/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() {
-
+ {data.map((x) => { return ( ); })} -
+
-
+ {kbs.map((dataset) => { return ( ); })} -
+
-
+ {data.dialogs.map((x) => { return ( ); })} -
+
-
+ {list?.data.search_apps.map((x) => { return ( ); })} -
+
{list?.data.total && list?.data.total > 0 && (
diff --git a/web/src/pages/profile-setting/mcp/index.tsx b/web/src/pages/profile-setting/mcp/index.tsx index 440d3579a..c921d2601 100644 --- a/web/src/pages/profile-setting/mcp/index.tsx +++ b/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" > )} -
+ {data.mcp_servers.map((item) => ( ))} -
-
+ +
+

{data.name}

diff --git a/web/tailwind.config.js b/web/tailwind.config.js index 91531b691..af454ce2d 100644 --- a/web/tailwind.config.js +++ b/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', },