Feat: Adjust agent mcp style #3221 (#8841)

### What problem does this PR solve?

Feat: Adjust agent mcp style #3221

### Type of change


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

web/src/pages/agent/form/tool-form/index.tsx

@@ -1,10 +1,11 @@
+import { memo } from 'react';
 import useGraphStore from '../../store';
 import { ToolFormConfigMap } from './constant';
 import MCPForm from './mcp-form';
 
 const EmptyContent = () => <div></div>;
 
-const ToolForm = () => {
+function ToolForm() {
   const clickedToolId = useGraphStore((state) => state.clickedToolId);
 
   const ToolForm =
@@ -17,6 +18,6 @@ const ToolForm = () => {
       <ToolForm key={clickedToolId}></ToolForm>
     </section>
   );
-};
+}
 
-export default ToolForm;
+export default memo(ToolForm);

web/src/pages/agent/form/tool-form/mcp-form/index.tsx

@@ -1,4 +1,4 @@
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Checkbox } from '@/components/ui/checkbox';
 import {
   Form,
@@ -42,9 +42,9 @@ function MCPForm() {
       >
         <Card className="bg-background-highlight p-5">
           <CardHeader className="p-0 pb-3">
-            <CardTitle>{data.name}</CardTitle>
+            <div>{data.name}</div>
           </CardHeader>
-          <CardContent className="p-0">
+          <CardContent className="p-0 text-sm">
             <span className="pr-2"> URL:</span>
             <a href={data.url} className="text-background-checked">
               {data.url}
@@ -71,7 +71,7 @@ function MCPForm() {
                           <FormControl>
                             <MCPCard key={name} data={{ ...mcp, name }}>
                               <Checkbox
-                                className="translate-y-1"
+                                className="translate-y-0.5"
                                 checked={field.value?.includes(name)}
                                 onCheckedChange={(checked) => {
                                   return checked

web/src/pages/agent/form/tool-form/mcp-form/mcp-card.tsx

@@ -1,4 +1,4 @@
-import { Card, CardContent, CardTitle } from '@/components/ui/card';
+import { Card, CardContent } from '@/components/ui/card';
 import { IMCPTool } from '@/interfaces/database/mcp';
 import { PropsWithChildren } from 'react';
 
@@ -11,8 +11,8 @@ export function MCPCard({
       <CardContent className="p-0 flex gap-3">
         {children}
         <section>
-          <CardTitle className="pb-3">{data.name}</CardTitle>
-          <p>{data.description}</p>
+          <div className="pb-3 text-sm">{data.name}</div>
+          <p className="text-text-sub-title text-xs">{data.description}</p>
         </section>
       </CardContent>
     </Card>