feat(web): Index/model/space/tool ui upgrade

web/src/views/Conversation/index.tsx

@@ -299,7 +299,7 @@ const Conversation: FC = () => {
     <Flex className="rb:w-full rb:p-[-16px]!">
       <div className="rb:w-80 rb:h-screen rb:bg-[#F6F6F6] rb:overflow-hidden">
         <Flex align="center" gap={8} className="rb:p-5!">
-          <div className="rb:size-6 rb:bg-cover rb:bg-[url('src/assets/images/conversation/redbear.png')]"></div>
+          <div className="rb:size-6 rb:bg-cover rb:bg-[url('@/assets/images/conversation/redbear.png')]"></div>
           <div className="rb:text-[16px] rb:leading-5 rb:font-[Gilroy-Extrabold] rb:font-extrabold">{t('memoryConversation.chatTitle')}</div>
         </Flex>
 

web/src/views/Index/components/GuideCard.tsx

@@ -9,10 +9,8 @@
 import React, { useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import guideBgImg from '@/assets/images/index/guide_bg@2x.png'
 import { Button, Tour } from 'antd';
 import type { TourProps } from 'antd';
-import arrowRight from '@/assets/images/index/arrow_right_blue.svg'
 
 const GuideCard: React.FC = () => {
   const { t } = useTranslation();
@@ -67,22 +65,18 @@ const GuideCard: React.FC = () => {
 
   return (
     <>
-    <div className='rb:w-full rb:p-4' style={{ backgroundImage: `url(${guideBgImg})`, backgroundSize: '100% 100%' }}>
-        <div className='rb:flex rb:justify-start rb:text-white rb:text-base rb:font-semibold' >
-            { t('index.getStarted')}
+      <div className='rb:w-full rb:bg-white rb:rounded-xl rb:pb-3'>
+        <div className='rb:font-[MiSans-Bold] rb:font-bold rb:leading-5 rb:p-3 rb:bg-cover rb:rounded-tl-xl rb:rounded-tr-xl rb:bg-[url("@/assets/images/index/guide_bg@2x.png")]' >
+          { t('index.getStarted')}
         </div>
-        <div className='rb:flex rb:text-xs rb:text-white rb:leading-[18px] rb:mt-3'>
+        <div className='rb:leading-4.5 rb:text-[12px] rb:-mt-2 rb:pl-3 rb:pr-1.75'>
             { t('index.startedDesc')}
         </div>
-        <div className='rb:flex rb:w-full rb:items-center rb:justify-between rb:gap-3 rb:mt-4'>
-            <Button ref={startButtonRef} className='rb:gap-2 rb:w-full rb:flex rb:items-center rb:text-[#155EEF]'  onClick={handleStartGuide}>
-                <span className='rb:text-xs'>{ t('index.viewGuide')}</span>
-                <img src={arrowRight} className='rb:size-4' />
-            </Button>
-            {/* <Button className='rb:gap-2 rb:flex rb:items-center rb:text-[#155EEF]'>
-                <span className='rb:text-xs'>{ t('index.watchVideo')}</span>
-                <img src={arrowRight} className='rb:size-4' />
-            </Button> */}
+        <div className="rb:mt-2 rb:pl-3 rb:pr-4">
+          <Button ref={startButtonRef} block className='rb:gap-1 rb:flex rb:items-center' onClick={handleStartGuide}>
+            <span className='rb:text-xs'>{t('index.viewGuide')}</span>
+            <div className="rb:size-4 rb:bg-cover rb:bg-[url('src/assets/images/common/arrow_right_dark.svg')]"></div>
+          </Button>
         </div>
     </div>
     

web/src/views/Index/components/QuickActions.tsx

@@ -1,5 +1,6 @@
 import { type FC } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flex } from 'antd'
 
 import modelIcon from '@/assets/images/index/model_mgt.svg'
 import spaceIcon from '@/assets/images/index/space_mgt.svg'
@@ -89,25 +90,30 @@ const QuickActions: FC<QuickActionsProps> = ({ onNavigate }) => {
   ];
 
   return (
-    <div className='rb:w-full rb:p-4 rb:bg-[#FBFDFF] rb:border-1 rb:border-[#DFE4ED] rb:rounded-xl'>
-        <div className='rb:flex rb:justify-start rb:text-base rb:font-medium rb:text-[#212332]'>
-            { t('quickActions.title') }
-        </div>
-        <div className="rb:grid rb:grid-cols-3 md:rb:grid-cols-4 rb:gap-4 rb:mt-4">
-            
-            {quickActions.map((action) => (
-                <div key={action.key}
-                className="rb:flex rb:flex-col rb:items-center rb:text-center rb:cursor-pointer rb:group"
-                onClick={action.onClick}
-                >
-                <img src={action.icon} className='rb:size-10 rb:mx-auto' />
-                <div className="rb:mt-2 rb:text-xs rb:max-w-[74px] rb:text-[#5B6167] rb:text-center rb:leading-[14px]">
-                    {action.title}
-                </div>
-                </div>
-            ))}
-        </div>
-  </div>);
+    <div className='rb:w-full rb:bg-white rb:rounded-xl rb:mt-2.5 rb:py-3'>
+      <div className='rb:font-[MiSans-Bold] rb:font-bold rb:leading-5 rb:px-4 rb:pb-3.5'>
+        { t('quickActions.title') }
+      </div>
+      <div className="rb:grid rb:grid-cols-3 md:rb:grid-cols-4 rb:gap-4">
+        {quickActions.map((action) => (
+          <Flex
+            key={action.key}
+            vertical
+            gap={8}
+            align="center"
+            justify="center"
+            className="rb:cursor-pointer"
+            onClick={action.onClick}
+          >
+            <img src={action.icon} className='rb:size-10 rb:mx-auto' />
+            <div className="rb:text-[12px] rb:max-w-18.25 rb:text-[#5B6167] rb:text-center rb:leading-3.5">
+              {action.title}
+            </div>
+          </Flex>
+        ))}
+      </div>
+    </div>
+  );
 };
 
 export default QuickActions;

web/src/views/Index/components/TopCardList/index.tsx

@@ -1,20 +1,15 @@
 import { type FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import totalModels from '@/assets/images/index/models.svg';
-import totalSpaces from '@/assets/images/index/spaces.svg';
-import totalUsers from '@/assets/images/index/users.svg';
-import totalApps from '@/assets/images/index/apps.svg';
-import arrowUpDb from '@/assets/images/index/arrow_up_d.svg'
-import arrowDownDb from '@/assets/images/index/arrow_down_d.svg'
-import arrowUp from '@/assets/images/index/arrow_up.svg'
-import arrowDown from '@/assets/images/index/arrow_down.svg'
-import styles from './index.module.css'
+import { Flex } from 'antd';
+import clsx from 'clsx';
+
 import  { type DataResponse } from '@/api/common'
+import Tag from '@/components/Tag'
 
 const list = [
   {
     key: 'models',
-    icon: totalModels,
+    icon: 'rb:bg-[url("@/assets/images/index/models.svg")]',
     value: '24',
     // trendValue: '12.5%',
     trend: 'up',
@@ -25,7 +20,7 @@ const list = [
   },
   {
     key: 'spaces',
-    icon: totalSpaces,
+    icon: 'rb:bg-[url("@/assets/images/index/spaces.svg")]',
     value: '156',
     trendValue: '+8',
     trend: 'down',
@@ -36,7 +31,7 @@ const list = [
   },
   {
     key: 'users',
-    icon: totalUsers,
+    icon: 'rb:bg-[url("@/assets/images/index/users.svg")]',
     value: '1,248',
     trendValue: '+42',
     trend: 'up',
@@ -47,7 +42,7 @@ const list = [
   },
   {
     key: 'running_apps',
-    icon: totalApps,
+    icon: 'rb:bg-[url("@/assets/images/index/apps.svg")]',
     value: '12.8k',
     trendValue: '98.7%',
     trend: 'up',
@@ -60,70 +55,106 @@ const list = [
 const TopCardList: FC<{data?: DataResponse}> = ({ data }) => {
   const { t } = useTranslation()
   return (
-    <div className="rb:grid rb:grid-cols-4 rb:gap-[16px]">
+    <div className="rb:grid rb:grid-cols-4 rb:gap-3 rb:mt-3">
       {list.map((item) => {
         return (
-            <div 
-              key={item.key}
-              className={styles.card}
-              style={{
-                background: item.background,
-              }}
-            >
-            <div className={styles.header}>
-              <div className="rb:text-xs rb:font-medium rb:text-[#212332] rb:w-[96px]">{t(`dashboard.${'total_' + item.key}`)}</div>
-              <div className={styles.avatar}><img src={item.icon} /></div>
-            </div>
+          <div 
+            key={item.key}
+            className="rb:bg-white rb:rounded-xl rb:p-4"
+          >
+            <Flex justify="space-between" align="center" gap={24}>
+              <div className="rb:text-[12pxx] rb:font-medium rb:flex-1">{t(`dashboard.${'total_' + item.key}`)}</div>
+              <div className={`rb:size-8 rb:bg-cover ${item.icon}`}></div>
+            </Flex>
 
-            <div className={styles.content}>
+            <div className="rb:mt-5 rb:font-[MiSans-Bold] rb:font-bold rb:text-[24px] rb:leading-8">
               {item.key === 'spaces' && String(data?.active_workspaces)}
               {item.key === 'running_apps' &&  String(data?.[`${item.key}` as keyof DataResponse] || item.value || 0)}
               {item.key !== 'spaces' && item.key !== 'running_apps' && String(data?.[`total_${item.key}` as keyof DataResponse] || item.value || 0)}
             </div>
-            <div className='rb:flex rb:flex-col rb:items-start'>
-                {item.key === 'models' ? (
-                  <div className='rb:text-xs rb:leading-4 rb:text-[#5F6266] rb:w-[130px]'>
-                   {t(`dashboard.${'desc_' + item.key}`, { account: data?.total_llm, nums: data?.total_embedding })}
+            <div className='rb:flex rb:flex-col rb:items-start rb:mt-2'>
+              {item.key === 'models'
+                ? (
+                  <div className='rb:text-xs rb:leading-4 rb:text-[#5F6266] rb:w-32.25'>
+                    {t(`dashboard.${'desc_' + item.key}`, { account: data?.total_llm, nums: data?.total_embedding })}
                   </div>
-                ) : (<>                  
+                )
+                : (<>                  
                   <div className='rb:flex rb:items-center rb:text-xs rb:leading-4 rb:gap-1'> 
                     {item.key === 'spaces' && (<>
-                        <img src={Number(data?.new_workspaces_this_week || 0) >= 0 ? arrowUpDb : arrowDownDb} className='rb:size-3'/>
-                        <span className={Number(data?.new_workspaces_this_week || 0) >= 0 ? 'rb:text-[#369F21]' : 'rb:text-[#FF5D34]'}>{Number(data?.new_workspaces_this_week || 0) >= 0 ? '+' : '-'}{Math.abs(Number(data?.new_workspaces_this_week || 0))}</span>
+                      <div className={clsx("rb:size-3 rb:bg-cover rb:mr-0.5", {
+                        "rb:bg-[url('@/assets/images/index/arrow_up_d.svg')]": Number(data?.new_workspaces_this_week || 0) >= 0,
+                        "rb:bg-[url('@/assets/images/index/arrow_down_d.svg')]": Number(data?.new_workspaces_this_week || 0) < 0,
+                      })}></div>
+                      <span className={clsx('rb:font-medium', {
+                        "rb:text-[#369F21]": Number(data?.new_workspaces_this_week || 0) >= 0,
+                        "rb:text-[#FF5D34]": Number(data?.new_workspaces_this_week || 0) < 0,
+                      })}>{Number(data?.new_workspaces_this_week || 0) >= 0 ? '+' : '-'}{Math.abs(Number(data?.new_workspaces_this_week || 0))}</span>
                     </>)}
                     {item.key === 'users' && (<>
-                        <img src={Number(data?.new_users_this_week || 0) >= 0 ? arrowUpDb : arrowDownDb} className='rb:size-3'/>
-                        <span className={Number(data?.new_users_this_week || 0) >= 0 ? 'rb:text-[#369F21]' : 'rb:text-[#FF5D34]'}>{Number(data?.new_users_this_week || 0) >= 0 ? '+' : '-'}{Math.abs(Number(data?.new_users_this_week || 0))}</span>
+                      <div className={clsx("rb:size-3 rb:bg-cover rb:mr-0.5", {
+                        "rb:bg-[url('@/assets/images/index/arrow_up_d.svg')]": Number(data?.new_users_this_week || 0) >= 0,
+                        "rb:bg-[url('@/assets/images/index/arrow_down_d.svg')]": Number(data?.new_users_this_week || 0) < 0,
+                      })}></div>
+                      <span className={clsx('rb:font-medium', {
+                        "rb:text-[#369F21]": Number(data?.new_users_this_week || 0) >= 0,
+                        "rb:text-[#FF5D34]": Number(data?.new_users_this_week || 0) < 0,
+                      })}>{Number(data?.new_users_this_week || 0) >= 0 ? '+' : '-'}{Math.abs(Number(data?.new_users_this_week || 0))}</span>
                     </>)}
                     {item.key === 'running_apps' && (<>
-                        <img src={Number(data?.new_apps_this_week || 0) >= 0 ? arrowUpDb : arrowDownDb} className='rb:size-3'/>
-                        <span className={Number(data?.new_apps_this_week || 0) >= 0 ? 'rb:text-[#369F21]' : 'rb:text-[#FF5D34]'}>{Number(data?.new_apps_this_week || 0) >= 0 ? '+' : '-'}{Math.abs(Number(data?.new_apps_this_week || 0))}</span>
+                      <div className={clsx("rb:size-3 rb:bg-cover rb:mr-0.5", {
+                        "rb:bg-[url('@/assets/images/index/arrow_up_d.svg')]": Number(data?.new_apps_this_week || 0) >= 0,
+                        "rb:bg-[url('@/assets/images/index/arrow_down_d.svg')]": Number(data?.new_apps_this_week || 0) < 0,
+                      })}></div>
+                      <span className={clsx('rb:font-medium', {
+                        "rb:text-[#369F21]": Number(data?.new_apps_this_week || 0) >= 0,
+                        "rb:text-[#FF5D34]": Number(data?.new_apps_this_week || 0) < 0,
+                      })}>{Number(data?.new_apps_this_week || 0) >= 0 ? '+' : '-'}{Math.abs(Number(data?.new_apps_this_week || 0))}</span>
                     </>)}
-                    
                   </div>
-                  <div className='rb:text-xs rb:leading-4 rb:text-[#5F6266]'>
+                  <div className='rb:text-[12px] rb:leading-4 rb:text-[#5F6266]'>
                     {t(`dashboard.${'desc_' + item.key}`)}
                   </div>
-                </>)}
+                </>)
+              }
             </div>
             
-            {item.key === 'models' && (<div className={`rb:flex rb:max-w-40 rb:text-xs rb:mt-2 rb:items-center rb:gap-1 rb:border-1 rb:rounded rb:px-2 rb:py-0.5 ${Number(data?.model_week_growth_rate || 0) >= 0 ? 'rb:text-[#369F21] rb:border-[#369F21] rb:bg-[rgba(54, 159, 33, 0.25)]' : 'rb:text-[#FF5D34] rb:border-[#FF5D34] rb:bg-[rgba(255, 93, 52, 0.25)]'}`}>
-              <img src={Number(data?.model_week_growth_rate || 0) >= 0 ? arrowUp : arrowDown} className='rb:size-3'/>  
-              <span>{Math.abs(Number(data?.model_week_growth_rate || 0))}% {t('dashboard.thisWeek')}</span>
-            </div>)}
-            {item.key === 'spaces' && (<div className={`rb:flex rb:max-w-40 rb:text-xs rb:mt-2 rb:items-center rb:gap-1 rb:border-1 rb:rounded rb:px-2 rb:py-0.5 ${Number(data?.workspace_week_growth_rate || 0) >= 0 ? 'rb:text-[#369F21] rb:border-[#369F21] rb:bg-[rgba(54, 159, 33, 0.25)]' : 'rb:text-[#FF5D34] rb:border-[#FF5D34] rb:bg-[rgba(255, 93, 52, 0.25)]'}`}>
-              <img src={Number(data?.workspace_week_growth_rate || 0) >= 0 ? arrowUp : arrowDown} className='rb:size-3'/>  
-              <span>{Math.abs(Number(data?.workspace_week_growth_rate || 0))}% {t('dashboard.thisWeek')}</span>
-            </div>)}
-            {item.key === 'users' && (<div className={`rb:flex rb:max-w-40 rb:text-xs rb:mt-2 rb:items-center rb:gap-1 rb:border-1 rb:rounded rb:px-2 rb:py-0.5 ${Number(data?.user_week_growth_rate || 0) >= 0 ? 'rb:text-[#369F21] rb:border-[#369F21] rb:bg-[rgba(54, 159, 33, 0.25)]' : 'rb:text-[#FF5D34] rb:border-[#FF5D34] rb:bg-[rgba(255, 93, 52, 0.25)]'}`}>
-              <img src={Number(data?.user_week_growth_rate || 0) >= 0 ? arrowUp : arrowDown} className='rb:size-3'/>  
-              <span>{Math.abs(Number(data?.user_week_growth_rate || 0))}% {t('dashboard.thisWeek')}</span>
-            </div>)}
-            {item.key === 'running_apps' && (<div className={`rb:flex rb:max-w-40 rb:text-xs rb:mt-2 rb:items-center rb:gap-1 rb:border-1 rb:rounded rb:px-2 rb:py-0.5 ${Number(data?.app_week_growth_rate || 0) >= 0 ? 'rb:text-[#369F21] rb:border-[#369F21] rb:bg-[rgba(54, 159, 33, 0.25)]' : 'rb:text-[#FF5D34] rb:border-[#FF5D34] rb:bg-[rgba(255, 93, 52, 0.25)]'}`}>
-              <img src={Number(data?.app_week_growth_rate || 0) >= 0 ? arrowUp : arrowDown} className='rb:size-3'/>  
-              <span>{Math.abs(Number(data?.app_week_growth_rate || 0))}% {t('dashboard.thisWeek')}</span>
-            </div>)}
-            
+            {item.key === 'models' && (<Tag color={Number(data?.model_week_growth_rate || 0) >= 0 ? "success" : "warning"} className="rb:mt-2">
+              <Flex align="center">
+                <div className={clsx("rb:size-3.5 rb:bg-cover rb:mr-0.5", {
+                  "rb:bg-[url('@/assets/images/index/arrow_up.svg')]": Number(data?.model_week_growth_rate || 0) >= 0,
+                  "rb:bg-[url('@/assets/images/index/arrow_down.svg')]": Number(data?.model_week_growth_rate || 0) < 0,
+                })}></div>
+                <span>{Math.abs(Number(data?.model_week_growth_rate || 0))}% {t('dashboard.thisWeek')}</span>
+              </Flex>
+            </Tag>)}
+            {item.key === 'spaces' && (<Tag color={Number(data?.workspace_week_growth_rate || 0) >= 0 ? "success" : "warning"} className="rb:mt-2">
+              <Flex align="center">
+                <div className={clsx("rb:size-3.5 rb:bg-cover rb:mr-0.5", {
+                  "rb:bg-[url('@/assets/images/index/arrow_up.svg')]": Number(data?.workspace_week_growth_rate || 0) >= 0,
+                  "rb:bg-[url('@/assets/images/index/arrow_down.svg')]": Number(data?.workspace_week_growth_rate || 0) < 0,
+                })}></div>
+                <span>{Math.abs(Number(data?.workspace_week_growth_rate || 0))}% {t('dashboard.thisWeek')}</span>
+              </Flex>
+            </Tag>)}
+            {item.key === 'users' && (<Tag color={Number(data?.user_week_growth_rate || 0) >= 0 ? "success" : "warning"} className="rb:mt-2">
+              <Flex align="center">
+                <div className={clsx("rb:size-3.5 rb:bg-cover rb:mr-0.5", {
+                  "rb:bg-[url('@/assets/images/index/arrow_up.svg')]": Number(data?.user_week_growth_rate || 0) >= 0,
+                  "rb:bg-[url('@/assets/images/index/arrow_down.svg')]": Number(data?.user_week_growth_rate || 0) < 0,
+                })}></div>
+                <span>{Math.abs(Number(data?.user_week_growth_rate || 0))}% {t('dashboard.thisWeek')}</span>
+              </Flex>
+            </Tag>)}
+            {item.key === 'running_apps' && (<Tag color={Number(data?.app_week_growth_rate || 0) >= 0 ? "success" : "warning"} className="rb:mt-2">
+              <Flex align="center">
+                <div className={clsx("rb:size-3.5 rb:bg-cover rb:mr-0.5", {
+                  "rb:bg-[url('@/assets/images/index/arrow_up.svg')]": Number(data?.app_week_growth_rate || 0) >= 0,
+                  "rb:bg-[url('@/assets/images/index/arrow_down.svg')]": Number(data?.app_week_growth_rate || 0) < 0,
+                })}></div>
+                <span>{Math.abs(Number(data?.app_week_growth_rate || 0))}% {t('dashboard.thisWeek')}</span>
+              </Flex>
+            </Tag>)}
           </div>
         )
       })}

web/src/views/Index/components/VersionCard.tsx

@@ -8,11 +8,11 @@
  */
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Divider } from 'antd';
-// import arrowRight from '@/assets/images/index/arrow_right.svg'
+import { Flex } from 'antd';
+
 import { getVersion, type versionResponse } from '@/api/common'
 
-const GuideCard: React.FC = () => {
+const VersionCard: React.FC = () => {
   const { t, i18n } = useTranslation();
   const [versionInfo, setVersionInfo] = useState<versionResponse | null>(null);
 
@@ -23,13 +23,6 @@ const GuideCard: React.FC = () => {
     return currentLang === 'zh' ? versionInfo.introduction : (versionInfo.introduction_en || versionInfo.introduction);
   };
 
-  // 解析换行符和HTML的方法
-  const parseContent = (text: string) => {
-    if (!text) return '';
-    // 将 \n 转换为 <br/> 标签
-    return text.replace(/\\n/g, '<br/>');
-  };
-
   useEffect(() => {
     const fetchVersion = async () => {
       try {
@@ -44,58 +37,36 @@ const GuideCard: React.FC = () => {
   }, []);
     
   return (
-    <div className='rb:w-full rb:p-4 rb:border-1 rb:border-[#DFE4ED] rb:bg-[#FBFDFF] rb:rounded-xl'>
-        <div className='rb:flex rb:items-center rb:justify-start rb:text-[#5B6167] rb:text-base rb:font-semibold rb:gap-2'>
-            { t('index.latestUpdate')} 
-            <span className='rb:text-xs rb:text-[#1890FF]'>
-              {versionInfo?.version}
-            </span>
-        </div>
-        <div className='rb:flex rb:flex-col rb:max-h-[400px] rb:overflow-y-auto rb:text-[#5B6167]'>
-            {versionInfo && (() => {
-              const introduction = getIntroduction();
-              return introduction ? (<>  
-                <div className='rb:flex  rb:items-center rb:gap-2 rb:text-sm rb:text-[#5B6167] rb:leading-5 '>
-                   
-                    <span className='rb:text-xs rb:text-[#5B6167]'>
-                      {t('version.releaseDate')}: {introduction.releaseDate}
-                    </span>
-                    <Divider type='vertical' />
-                    <span className='rb:text-xs rb:text-[#5B6167]'>
-                      {t('version.name')}: {introduction.codeName}
-                    </span>
-                </div>
-                <p 
-                  className='rb:text-sm rb:text-[#5B6167] rb:leading-5 rb:mt-2'
-                  dangerouslySetInnerHTML={{ __html: introduction.upgradePosition }}
-                />
-                {introduction.coreUpgrades?.map((item: string, index: number) => (
-                    <p 
-                      key={index} 
-                      className='rb:text-sm rb:text-[#5B6167] rb:leading-5'
-                      dangerouslySetInnerHTML={{ __html: item }}
-                    />
-                ))}
-              </>) : null;
-            })()}
-            {/* {loading ? (
-              t('index.loading')
-            ) : (
-              versionInfo?.introduction || t('index.latestUpdateDesc')
-            )} */}
-        </div>
-        {/* <div className='rb:flex rb:w-full rb:items-center rb:justify-between rb:gap-3 rb:mt-4'>
-            <Button className='rb:gap-2 rb:flex rb:items-center rb:text-[#212332] '>
-                <span className='rb:text-xs'>{ t('index.viewDetails')}</span>
-                <img src={arrowRight} className='rb:size-4' />
-            </Button>
-            <Button className='rb:gap-2 rb:flex rb:items-center rb:text-[#212332]'>
-                <span className='rb:text-xs'>{ t('index.changeLog')}</span>
-                <img src={arrowRight} className='rb:size-4' />
-            </Button>
-        </div> */}
+    <div className='rb:w-full rb:p-3 rb:bg-white rb:rounded-xl rb:mt-3'>
+      <Flex gap={4} className="rb:mb-3">
+        <span className="rb:font-[MiSans-Bold] rb:font-bold rb:leading-5">{t('index.latestUpdate')}</span>
+        <span className='rb:text-[12px] rb:text-white rb:leading-4.25 rb:pt-px rb:pl-2 rb:pr-1.75 rb:bg-[#171719] rb:rounded-lg rb:rounded-bl-none '>
+          {versionInfo?.version}
+        </span>
+      </Flex>
+      {versionInfo && (() => {
+        const introduction = getIntroduction();
+        return introduction ? (<>  
+          <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4.5 rb:mt-1 rb:mb-2">
+            {t('version.releaseDate')}: {introduction.releaseDate} | {t('version.name')}: {introduction.codeName}
+          </div>
+          <div className="rb:max-h-76 rb:overflow-y-auto">
+            <p
+              className='rb:text-[12px] rb:leading-4.5'
+              dangerouslySetInnerHTML={{ __html: introduction.upgradePosition }}
+            />
+            {introduction.coreUpgrades?.map((item: string, index: number) => (
+              <p
+                key={index}
+                className='rb:text-[12px] rb:leading-4.5 rb:mt-2'
+                dangerouslySetInnerHTML={{ __html: item }}
+              />
+            ))}
+          </div>
+        </>) : null;
+      })()}
     </div>
   );
 };
 
-export default GuideCard;
+export default VersionCard;

web/src/views/Index/index.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { Space, Button } from 'antd';
+import { Space, Button, Row, Col, Flex } from 'antd';
+
 import TopCardList from './components/TopCardList';
 import GuideCard from './components/GuideCard';
 import VersionCard from './components/VersionCard';
 import QuickActions from './components/QuickActions';
-import bgImg from '@/assets/images/index/index_bg@2x.png'
 import Table, { type TableRef } from '@/components/Table'
 import type { ColumnsType } from 'antd/es/table';
 import { formatDateTime } from '@/utils/format';
@@ -42,16 +42,15 @@ const Index = () => {
       dataIndex: 'name',
       key: 'name',
     },
-
     {
       title: t('space.spaceIcon'),
       dataIndex: 'icon',
       key: 'icon',
       render:(value: string, record: any) => {
         return value ? (
-          <img src={value} alt="icon" className='rb:w-[24px] rb:h-[24px]' />
+          <img src={value} alt="icon" className='rb:size-6' />
         ) : (
-          <div className='rb:w-[24px] rb:h-[24px] rb:bg-blue-500 rb:text-white rb:rounded rb:flex rb:items-center rb:justify-center rb:text-xs rb:font-medium'>
+          <div className='rb:size-6 rb:bg-[#155EEF] rb:text-white rb:rounded rb:flex rb:items-center rb:justify-center rb:text-xs rb:font-medium'>
             {record.name?.charAt(0)?.toUpperCase() || '?'}
           </div>
         )
@@ -84,7 +83,7 @@ const Index = () => {
       width: 100,
       render: (_, record) => (
         <Space size="middle">
-          <Button onClick={() => handleJump(record.id)} color="primary" variant="text">{t('space.enterSpace')}</Button>
+          <Button type="link" onClick={() => handleJump(record.id)}>{t('space.enterSpace')}</Button>
         </Space>
       ),
     },
@@ -99,44 +98,40 @@ const Index = () => {
 
 
   return (
-    <div className="rb:pb-[24px]">
-      <div className="rb:mt-[16px] rb:flex rb:gap-4">
-        <div className='rb:flex-1'>
-          <div className='rb:flex-col rb:w-full rb:h-[120px] rb:mb-4 rb:p-6 rb:leading-[30px]' style={{backgroundImage: `url(${bgImg})`, backgroundSize: '100% 100%'}}>
-              <div className='rb:flex rb:text-[22px] rb:text-[#0041C3] rb:font-semibold'>
-                { t('index.spaceTitle' )}
-              </div>
-              <div className='rb:flex rb:mt-2 rb:text-xs rb:leading-[18px] rb:text-[#5F6266] rb:max-w-[560px]'>
-                { t('index.spaceSubTitle' )}
-              </div>
+    <Row gutter={12}>
+      <Col flex="1">
+        <Flex vertical>
+          <div className='rb:w-full rb:h-26 rb:p-4 rb:bg-cover rb:bg-[url("@/assets/images/index/index_bg@2x.png")]'>
+            <div className="rb:font-[MiSans-Bold] rb:font-bold rb:text-white rb:text-[18px] rb:leading-7">
+              {t('index.spaceTitle')}
+            </div>
+            <div className='rb:mt-2 rb:text-[12px] rb:leading-4.5 rb:text-white rb:max-w-139.75'>
+              {t('index.spaceSubTitle')}
+            </div>
           </div>
           {/* 统计卡片 */}
           <TopCardList data={dashboardData} />
-          <div className="rb:rounded rb:max-h-[calc(100%-100px)] rb:overflow-y-auto rb:mt-4">
+          <div className="rb:rounded-xl rb:bg-white rb:pt-3 rb:px-3 rb:overflow-y-hidden rb:my-3 rb:flex-1">
             <Table
               ref={tableRef}
               apiUrl={tableApi}
               columns={columns}
               rowKey="id"
-              
+              bordered={false}
+              scrollY="100%"
+              className="rb:-mb-3!"
+              // scroll={{ y: 'calc(100vh - 340px)' }}
             />
-        </div>
-        </div>
-        <div className='rb:flex-0 rb:min-w-80'>
-            {/* 引导 */}
-            <GuideCard />
-            <div className='rb:w-full rb:mt-4 '>
-                <VersionCard />
-            </div>
-            {/* 快捷操作 */}
-            <div className='rb:w-full rb:mt-4'>
-                <QuickActions onNavigate={navigate} />
-            </div>
-        </div>
-      </div>
-
-     
-    </div>
+          </div>
+        </Flex>
+      </Col>
+      <Col flex="328px">
+        {/* 引导 */}
+        <GuideCard />
+        <VersionCard />
+        <QuickActions onNavigate={navigate} />
+      </Col>
+    </Row>
   );
 }
 

web/src/views/ModelManagement/Group.tsx

@@ -1,8 +1,8 @@
 /*
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 16:50:00 
- * @Last Modified by:   ZhaoYing 
- * @Last Modified time: 2026-02-03 16:50:00 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-03-20 18:50:41
  */
 /**
  * Group Model View
@@ -12,14 +12,15 @@
 
 import { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
 import clsx from 'clsx'
-import { Button } from 'antd'
+import { Button, Flex, Tooltip, Space } from 'antd'
 import { useTranslation } from 'react-i18next';
 
 import type { ProviderModelItem, ModelListItem, DescriptionItem, BaseRef } from './types'
-import RbCard from '@/components/RbCard/Card'
+import RbCard from '@/components/RbCard'
 import { getModelNewList } from '@/api/models'
 import PageEmpty from '@/components/Empty/PageEmpty';
 import { formatDateTime } from '@/utils/format';
+import Tag from '@/components/Tag'
 
 /**
  * Group model list component
@@ -50,11 +51,6 @@ const Group = forwardRef <BaseRef,{ query: any; handleEdit: (data: ModelListItem
         label: t(`modelNew.type`),
         children: data.type ? t(`modelNew.${data.type}`) : '-',
       },
-      {
-        key: 'is_active',
-        label: t(`modelNew.status`),
-        children: data.is_active ? t(`common.statusEnabled`) : t(`common.statusDisabled`),
-      },
       {
         key: 'created_at',
         label: t(`modelNew.created_at`),
@@ -73,31 +69,36 @@ const Group = forwardRef <BaseRef,{ query: any; handleEdit: (data: ModelListItem
       {list.length === 0
         ? <PageEmpty />
         :(
-          <div className="rb:grid rb:grid-cols-4 rb:gap-4">
+          <div className="rb:grid rb:grid-cols-4 rb:gap-3">
             {list.map(item => (
               <RbCard
                 key={item.id}
-                title={item.name}
                 avatarUrl={item.logo}
-                avatar={
-                  <div className="rb:w-12 rb:h-12 rb:rounded-lg rb:mr-3.25 rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[28px] rb:text-[#ffffff]">
-                    {item.name[0]}
-                  </div>
-                }
+                avatarText={item.name[0]}
+                title={<Flex vertical gap={6}>
+                  <Tooltip title={item.name}>
+                    <div className="rb:wrap-break-word rb:line-clamp-1">{item.name}</div>
+                  </Tooltip>
+                  <Space>
+                    <Tag color={item.is_active ? 'success' : 'error'}>{item.is_active ? t(`common.statusEnabled`) : t(`common.statusDisabled`)}</Tag>
+                  </Space>
+                </Flex>}
+                isNeedTooltip={false}
+                footer={<Button className="rb:h-9!" type="primary" ghost block onClick={() => handleEdit(item)}>{t('modelNew.configureBtn')}</Button>}
               >
-                {formatData(item)?.map((description: DescriptionItem) => (
-                  <div
-                    key={description.key}
-                    className="rb:flex rb:justify-between rb:text-[#5B6167] rb:text-[14px] rb:leading-5 rb:mb-3"
-                  >
-                    <span className="rb:whitespace-nowrap">{(description.label as string)}</span>
-                    <span className={clsx({
-                      "rb:text-[#212332]": description.key !== 'is_active',
-                      "rb:text-[#369F21] rb:font-medium": description.key === 'is_active' && item.is_active,
-                    })}>{(description.children as string)}</span>
-                  </div>
-                ))}
-                <Button className="rb:mt-2" type="primary" ghost block onClick={() => handleEdit(item)}>{t('modelNew.configureBtn')}</Button>
+                <Flex vertical gap={8}>
+                  {formatData(item)?.map((description: DescriptionItem) => (
+                    <div
+                      key={description.key}
+                      className="rb:flex rb:justify-between rb:text-[14px] rb:leading-5"
+                    >
+                      <span className="rb:whitespace-nowrap rb:text-[#5B6167]">{(description.label as string)}</span>
+                      <span className={clsx({
+                        "rb:font-medium": description.key === 'type',
+                      })}>{(description.children as string)}</span>
+                    </div>
+                  ))}
+                </Flex>
               </RbCard>
             ))}
           </div>

web/src/views/ModelManagement/List.tsx

@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 16:50:10 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-02-27 10:20:51
+ * @Last Modified time: 2026-03-20 18:51:27
  */
 /**
  * Model List View
@@ -11,11 +11,11 @@
  */
 
 import { useRef, useState, useEffect, forwardRef, useImperativeHandle } from 'react';
-import { Button, Flex, Row, Col } from 'antd'
+import { Button, Flex, Row, Col, Tooltip, Space } from 'antd'
 import { useTranslation } from 'react-i18next';
 
 import type { ProviderModelItem, KeyConfigModalRef, ModelListDetailRef, ModelListItem, BaseRef } from './types'
-import RbCard from '@/components/RbCard/Card'
+import RbCard from '@/components/RbCard'
 import { getModelNewList } from '@/api/models'
 import PageEmpty from '@/components/Empty/PageEmpty';
 import Tag from '@/components/Tag';
@@ -69,26 +69,26 @@ const ModelList = forwardRef<BaseRef, { query: any; handleEdit: (vo?: ModelListI
             {list.map(item => (
               <RbCard
                 key={item.provider}
-                title={t(`modelNew.${item.provider}`)}
                 avatarUrl={getListLogoUrl(item.provider, item.logo)}
-                avatar={
-                  <div className="rb:w-12 rb:h-12 rb:rounded-lg rb:mr-3.25 rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[28px] rb:text-[#ffffff]">
-                    {item.provider[0].toUpperCase()}
-                  </div>
-                }
-                bodyClassName="rb:relative rb:pb-[64px]! rb:h-[calc(100%-64px)]!"
+                avatarText={item.provider[0].toUpperCase()}
+                title={<Flex vertical gap={6}>
+                  <Tooltip title={t(`modelNew.${item.provider}`)}>
+                    <div className="rb:wrap-break-word rb:line-clamp-1">{t(`modelNew.${item.provider}`)}</div>
+                  </Tooltip>
+                  <Space>
+                    <Flex gap={8} wrap>{item.tags.map(tag => <Tag key={tag}>{t(`modelNew.${tag}`)}</Tag>)}</Flex>
+                  </Space>
+                </Flex>}
+                isNeedTooltip={false}
+                footer={<Row gutter={9} className="rb:pt-2!">
+                  <Col span={12}>
+                    <Button className="rb:h-9!" block onClick={() => handleShowModel(item)}>{t('modelNew.showModel')}</Button>
+                  </Col>
+                  <Col span={12}>
+                    <Button className="rb:h-9!" type="primary" ghost block onClick={() => handleKeyConfig(item)}>{t('modelNew.keyConfig')}</Button>
+                  </Col>
+                </Row>}
               >
-                <Flex gap={8} wrap>{item.tags.map(tag => <Tag key={tag}>{t(`modelNew.${tag}`)}</Tag>)}</Flex>
-                <div className="rb:absolute rb:bottom-4 rb:left-6 rb:right-6">
-                  <Row gutter={12}>
-                    <Col span={12}>
-                      <Button block onClick={() => handleShowModel(item)}>{t('modelNew.showModel')}</Button>
-                    </Col>
-                    <Col span={12}>
-                      <Button type="primary" ghost block onClick={() => handleKeyConfig(item)}>{t('modelNew.keyConfig')}</Button>
-                    </Col>
-                  </Row>
-                </div>
               </RbCard>
             ))}
           </div>

web/src/views/ModelManagement/Square.tsx

@@ -1,8 +1,8 @@
 /*
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 16:50:14 
- * @Last Modified by:   ZhaoYing 
- * @Last Modified time: 2026-02-03 16:50:14 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-03-23 11:33:44
  */
 /**
  * Model Square View
@@ -10,17 +10,17 @@
  * Allows adding models and viewing details
  */
 
-import { useRef, useState, useEffect, forwardRef, useImperativeHandle } from 'react';
-import { Button, Space, App, Divider, Flex, Tooltip } from 'antd'
+import { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { Button, Space, App, Flex, Tooltip } from 'antd'
 import { UsergroupAddOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
+import clsx from 'clsx';
 
-import type { ModelPlaza, ModelPlazaItem, ModelSquareDetailRef, BaseRef } from './types'
-import RbCard from '@/components/RbCard/Card'
+import type { ModelPlaza, ModelPlazaItem, BaseRef } from './types'
+import RbCard from '@/components/RbCard'
 import { getModelPlaza, addModelPlaza } from '@/api/models'
 import PageEmpty from '@/components/Empty/PageEmpty';
 import Tag from '@/components/Tag';
-import ModelSquareDetail from './components/ModelSquareDetail'
 import { getLogoUrl } from './utils'
 
 /**
@@ -29,7 +29,6 @@ import { getLogoUrl } from './utils'
 const ModelSquare = forwardRef <BaseRef, { query: any; }>(({ query }, ref) => {
   const { t } = useTranslation();
   const { message } = App.useApp()
-  const modelSquareDetailRef = useRef<ModelSquareDetailRef>(null)
   const [list, setList] = useState<ModelPlaza[]>([])
   useEffect(() => {
     getList()
@@ -38,14 +37,12 @@ const ModelSquare = forwardRef <BaseRef, { query: any; }>(({ query }, ref) => {
   const getList = () => {
     getModelPlaza(query)
       .then(res => {
-        setList((res as ModelPlaza[]) || [])
+        const response = res as ModelPlaza[]
+        setList(response || [])
+        setActiveProvider(response[0]?.provider || null)
       })
   }
 
-  /** Open model detail drawer */
-  const handleMore = (vo: ModelPlaza) => {
-    modelSquareDetailRef.current?.handleOpen(vo)
-  }
   /** Add model to workspace */
   const handleAdd = (item: ModelPlazaItem) => {
     addModelPlaza(item.id)
@@ -59,61 +56,86 @@ const ModelSquare = forwardRef <BaseRef, { query: any; }>(({ query }, ref) => {
   useImperativeHandle(ref, () => ({
     getList,
   }));
+
+  const [activeProvider, setActiveProvider] = useState<string | null>(null)
   return (
     <>
       {list.length === 0
         ? <PageEmpty />
-        : list.map(vo => (
-          <div key={vo.provider}>
-            <div className="rb:flex rb:justify-between rb:items-center rb:bg-[rgba(21,94,239,0.12)] rb:px-4 rb:py-2.5 rb:leading-5 rb:mb-4 rb:mt-6 rb:rounded-md">
-              <div className="rb:font-medium">{t(`modelNew.${vo.provider}`)}</div>
-              <Button type="link" onClick={() => handleMore(vo)}>{t('modelNew.viewAll')}({t(`modelNew.modelCount`, { count: vo.models.length })})&gt;</Button>
-            </div>
-
-            <div className="rb:grid rb:grid-cols-3 rb:gap-4">
-              {vo.models.slice(0, 6).map(item => (
-                <RbCard
-                  key={item.id}
-                  title={item.name}
-                  subTitle={<Space size={8}>
-                    <Tag className="rb:mt-1">{t(`modelNew.${item.type}`)}</Tag>
-                    {item.is_official && <Tag color="success" className="rb:mt-1">{t(`modelNew.official`)}</Tag>}
-                  </Space>}
-                  avatarUrl={getLogoUrl(item.logo)}
-                  avatar={
-                    <div className="rb:w-12 rb:h-12 rb:rounded-lg rb:mr-3.25 rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[28px] rb:text-[#ffffff]">
-                      {item.name[0]}
-                    </div>
-                  }
-                  bodyClassName="rb:relative rb:pb-[80px]! rb:h-[calc(100%-64px)]!"
-                >
-                  <Tooltip title={item.description}>
-                    <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4.5 rb:font-regular rb:wrap-break-word rb:line-clamp-2 rb:mt-3">{item.description}</div>
-                  </Tooltip>
-                  <Flex gap={8} wrap className="rb:mt-3!">{item.tags.map((tag, tagIndex) => <Tag key={tagIndex}>{tag}</Tag>)}</Flex>
-                  <div className="rb:absolute rb:bottom-4 rb:left-6 rb:right-6">
-                    <Divider size="middle" />
-                    <Flex justify="space-between">
-                      <Space size={8}><UsergroupAddOutlined /> {item.add_count}</Space>
-                      <Space>
-                        {item.is_added
-                          ? <Button type="primary" disabled>{t('modelNew.added')}</Button>
-                          : <Button type="primary" ghost disabled={item.is_deprecated} onClick={() => handleAdd(item)}>{item.is_deprecated ? t('modelNew.deprecated') : `+ ${t('common.add')}`}</Button>
-                        }
-                      </Space>
+        : <>
+          <Space size={8} className="rb:mb-3!">
+            {list.map(vo => (
+              <div
+                key={vo.provider}
+                className={clsx('rb:border rb:border-[#171719] rb:rounded-full rb:px-2 rb:py-1 rb:cursor-pointer', {
+                  'rb:text-white rb:bg-[#171719]': activeProvider === vo.provider,
+                  'rb:text-[#171719]': activeProvider === vo.provider,
+                })}
+                onClick={() => setActiveProvider(vo.provider)}
+              >{t(`modelNew.${vo.provider}`)}</div>
+            ))}
+          </Space>
+          {list.filter(vo => vo.provider === activeProvider).map(vo => (
+            <div key={vo.provider} className="rb:max-h-[calc(100%-50px)] rb:overflow-y-auto">
+              <div className="rb:grid rb:grid-cols-3 rb:gap-4">
+                {vo.models.map(item => (
+                  <RbCard
+                    key={item.id}
+                    avatarUrl={getLogoUrl(item.logo)}
+                    avatarText={item.name[0]}
+                    title={
+                      <Flex justify="space-between" gap={16}>
+                        <Flex vertical gap={6}>
+                          <Tooltip title={item.name}>
+                            <div className="rb:wrap-break-word rb:line-clamp-1">{item.name}</div>
+                          </Tooltip>
+                          <Space size={8} className="rb:mt-1!">
+                            <Tag>{t(`modelNew.${item.type}`)}</Tag>
+                            {item.is_official && <Tag color="success">{t(`modelNew.official`)}</Tag>}
+                          </Space>
+                        </Flex>
+                        <Button
+                          size="small"
+                          disabled={item.is_added || item.is_deprecated}
+                          onClick={() => handleAdd(item)}
+                        >{item.is_deprecated ? t('modelNew.deprecated') : '+'}</Button>
                     </Flex>
-                  </div>
-                </RbCard>
-              ))}
-            </div>
-          </div>
-        ))
-      }
+                    }
+                    isNeedTooltip={false}
+                    footer={<Flex justify="space-between" align="center" className="rb:text-[#5B6167] rb:text-[12px]">
+                      @{t(`modelNew.${vo.provider}`)}
+                      <Space size={4}><UsergroupAddOutlined /> {item.add_count}</Space>
+                    </Flex>}
+                  >
+                    <Tooltip title={item.description}>
+                      <div className="rb:h-10 rb:leading-5 rb:wrap-break-word rb:line-clamp-2">{item.description}</div>
+                    </Tooltip>
 
-      <ModelSquareDetail
-        ref={modelSquareDetailRef}
-        refresh={getList}
-      />
+                    <Flex gap={8} wrap align="center" className="rb:mt-2!">
+                      <Flex gap={6}>
+                        {item.tags?.slice(0, 2).map((type, i) => (
+                          <div key={i} className="rb:bg-[#F6F6F6] rb:rounded-md rb:py-px rb:px-1 rb:text-[12px] rb:leading-4.5">{type}</div>
+                        ))}
+                      </Flex>
+                      {item.tags.length > 2 && (
+                        <Tooltip
+                          title={<Flex wrap gap={6}>{item.tags?.slice(2, item.tags.length).map((type, i) => (
+                            <div key={i} className="rb:bg-[#F6F6F6] rb:rounded-md rb:py-px rb:px-1 rb:text-[12px] rb:leading-4.5 rb:text-[#171719]">{type}</div>
+                          ))}</Flex>}
+                          color="white"
+                          placement="bottom"
+                        >
+                          <div className="rb:bg-[#F6F6F6] rb:rounded-md rb:py-px rb:px-1 rb:text-[12px] rb:leading-4.5">+{item.tags.length - 2}</div>
+                        </Tooltip>
+                      )}
+                    </Flex>
+                  </RbCard>
+                ))}
+              </div>
+            </div>
+          ))}
+        </>
+      }
     </>
   )
 })

web/src/views/ModelManagement/components/ModelSquareDetail.tsx

@@ -1,130 +0,0 @@
-/*
- * @Author: ZhaoYing 
- * @Date: 2026-02-03 16:49:49 
- * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-04 11:50:31
- */
-/**
- * Model Square Detail Drawer
- * Displays all models from a specific provider in the model square
- * Allows adding models and editing custom models
- */
-
-import { useState, useImperativeHandle, forwardRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Button, Space, App, Flex, Tooltip, Divider } from 'antd'
-import { UsergroupAddOutlined } from '@ant-design/icons';
-
-import type { ModelPlaza, ModelPlazaItem, ModelSquareDetailRef } from '../types';
-import RbDrawer from '@/components/RbDrawer';
-import { getModelPlaza, addModelPlaza } from '@/api/models'
-import RbCard from '@/components/RbCard/Card'
-import Tag from '@/components/Tag';
-import PageEmpty from '@/components/Empty/PageEmpty';
-import { getLogoUrl } from '../utils'
-
-/**
- * Component props
- */
-interface ModelSquareDetailProps {
-  /** Callback to refresh parent list */
-  refresh: () => void;
-}
-
-/**
- * Model square detail drawer component
- */
-const ModelSquareDetail = forwardRef<ModelSquareDetailRef, ModelSquareDetailProps>(({ refresh }, ref) => {
-  const { t } = useTranslation();
-  const { message } = App.useApp()
-  const [model, setModel] = useState<ModelPlaza>({} as ModelPlaza)
-  const [open, setOpen] = useState(false);
-
-  const [list, setList] = useState<ModelPlazaItem[]>([])
-
-  /** Open drawer with model plaza data */
-  const handleOpen = (vo: ModelPlaza) => {
-    setModel(vo)
-    setOpen(true)
-    getList(vo)
-  }
-  /** Close drawer */
-  const handleClose = () => {
-    setOpen(false)
-    refresh()
-  }
-  /** Fetch model list for provider */
-  const getList = (vo: ModelPlaza) => {
-    getModelPlaza({ provider: vo.provider })
-      .then(res => {
-        const response = res as ModelPlaza[]
-        setList(response.length > 0 ? response[0].models : [])
-      })
-  }
-  /** Add model to workspace */
-  const handleAdd = (item: ModelPlazaItem) => {
-    addModelPlaza(item.id)
-      .then(() => {
-        message.success(`${item.name}${t('modelNew.addSuccess')}`)
-        getList(model)
-      })
-  }
-
-  /** Expose methods to parent component */
-  useImperativeHandle(ref, () => ({
-      handleOpen,
-  }));
-
-  return (
-    <RbDrawer
-      title={<>{t(`modelNew.${model.provider}`)} {t('modelNew.modelList')} ({list.length}{t('modelNew.item')})</>}
-      open={open}
-      onClose={handleClose}
-    >
-      <div className="rb:h-full rb:overflow-y-auto">
-        {list.length === 0 
-          ? <PageEmpty />
-          : <div className="rb:grid rb:grid-cols-2 rb:gap-4">
-            {list.map(item => (
-              <RbCard
-                key={item.id}
-                title={item.name}
-                subTitle={<Space size={8} className="rb:mt-1!">
-                  <Tag>{t(`modelNew.${item.type}`)}</Tag>
-                  {item.is_official && <Tag color="success">{t(`modelNew.official`)}</Tag>}
-                  {item.capability?.filter(item => item !== 'video').map(vo => <Tag key={vo}>{t(`modelNew.${vo}`)}</Tag>)}
-                </Space>}
-                avatarUrl={getLogoUrl(item.logo)}
-                avatar={
-                  <div className="rb:w-12 rb:h-12 rb:rounded-lg rb:mr-3.25 rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[28px] rb:text-[#ffffff]">
-                    {item.name[0]}
-                  </div>
-                }
-                bodyClassName="rb:relative rb:pb-[80px]! rb:h-[calc(100%-64px)]!"
-              >
-                <Tooltip title={item.description}>
-                  <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4.5 rb:font-regular rb:wrap-break-word rb:line-clamp-2 rb:mt-3">{item.description}</div>
-                </Tooltip>
-                <Flex gap={8} wrap className="rb:mt-3!">{item.tags.map((tag, tagIndex) => <Tag key={tagIndex}>{tag}</Tag>)}</Flex>
-                <div className="rb:absolute rb:bottom-4 rb:left-6 rb:right-6">
-                  <Divider size="middle" />
-                  <Flex justify="space-between">
-                    <Space size={8}><UsergroupAddOutlined /> {item.add_count}</Space>
-                    <Space>
-                      {item.is_added
-                        ? <Button type="primary" disabled>{t('modelNew.added')}</Button>
-                        : <Button type="primary" ghost disabled={item.is_deprecated} onClick={() => handleAdd(item)}>{item.is_deprecated ? t('modelNew.deprecated') : `+ ${t('common.add')}`}</Button>
-                      }
-                    </Space>
-                  </Flex>
-                </div>
-              </RbCard>
-            ))}
-            </div>
-          }
-      </div>
-    </RbDrawer>
-  );
-});
-
-export default ModelSquareDetail;

web/src/views/ModelManagement/index.tsx

@@ -1,8 +1,8 @@
 /*
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 16:50:05 
- * @Last Modified by:   ZhaoYing 
- * @Last Modified time: 2026-02-03 16:50:05 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-03-20 19:02:31
  */
 /**
  * Model Management Main Page
@@ -84,7 +84,7 @@ const tabKeys = ['group', 'list', 'square']
   }
 
   return (
-    <>
+    <Flex vertical gap={16}>
       <Flex justify="space-between" align="center">
         <PageTabs
           value={activeTab}
@@ -100,19 +100,19 @@ const tabKeys = ['group', 'list', 'square']
                   url={modelTypeUrl}
                   hasAll={false}
                   format={(items) => items.map((item) => ({ label: t(`modelNew.${item}`), value: String(item) }))}
-                  className="rb:w-30"
+                  className="rb:w-40"
                   allowClear={true}
                   placeholder={t('modelNew.type')}
                 />
               </Form.Item>
             }
-            {(activeTab === 'list' || activeTab === 'square') &&
+            {activeTab === 'list' &&
               <Form.Item name="provider" noStyle>
                 <CustomSelect
                   url={modelProviderUrl}
                   hasAll={false}
                   format={(items) => items.map((item) => ({ label: t(`modelNew.${item}`), value: String(item) }))}
-                  className="rb:w-30"
+                  className="rb:w-40"
                   allowClear={true}
                   placeholder={t('modelNew.provider')}
                 />
@@ -123,7 +123,6 @@ const tabKeys = ['group', 'list', 'square']
                 <SearchInput
                   maxLength={50}
                   placeholder={t(`modelNew.${activeTab}SearchPlaceholder`)}
-                  className="rb:w-70!"
                 />
               </Form.Item>
             }
@@ -133,7 +132,7 @@ const tabKeys = ['group', 'list', 'square']
         </Form>
       </Flex>
 
-      <div className="rb:w-full rb:h-[calc(100%-48px)] rb:my-4">
+      <div className="rb:w-full rb:h-[calc(100vh-125px)] rb:overflow-y-auto">
         {activeTab === 'group' && <GroupModel ref={groupRef} query={query} handleEdit={handleEdit} />}
         {activeTab === 'list' && <ModelList ref={modelListRef} query={query} handleEdit={handleEdit} />}
         {activeTab === 'square' && <ModelSquare query={query} />}
@@ -146,7 +145,7 @@ const tabKeys = ['group', 'list', 'square']
         ref={customModelModalRef}
         refresh={handleRefresh}
       />
-    </>
+    </Flex>
   )
 }
 

web/src/views/ModelManagement/types.ts

@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 16:50:18 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-07 16:14:25
+ * @Last Modified time: 2026-03-20 20:21:45
  */
 /**
  * Type definitions for Model Management
@@ -270,14 +270,6 @@ export interface ModelPlazaItem {
   is_omni?: boolean;
 }
 
-/**
- * Model square detail ref interface
- */
-export interface ModelSquareDetailRef {
-  /** Open detail drawer with model plaza data */
-  handleOpen: (vo: ModelPlaza) => void;
-}
-
 /**
  * Custom model form data
  */

web/src/views/Ontology/index.tsx

@@ -2,23 +2,25 @@
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 14:10:15 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-06 10:56:44
+ * @Last Modified time: 2026-03-20 16:36:02
  */
-import { type FC, useState, useRef, type MouseEvent } from 'react';
+import { type FC, useState, useRef } from 'react';
+import type { MenuInfo } from 'rc-menu/lib/interface';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Row, Col, Button, Flex, Divider, Space, App, Tooltip } from 'antd'
+import { Row, Col, Flex, Space, App, Tooltip, Dropdown } from 'antd'
 
 import SearchInput from '@/components/SearchInput';
 import OntologyModal from './components/OntologyModal'
 import type { OntologyModalRef, OntologyItem, Query, OntologyImportModalRef, OntologyExportModalRef } from './types'
-import RbCard from '@/components/RbCard/Card'
+import RbCard from '@/components/RbCard'
 import Tag from '@/components/Tag'
 import PageScrollList, { type PageScrollListRef } from '@/components/PageScrollList'
 import { getOntologyScenesUrl, deleteOntologyScene } from '@/api/ontology'
 import { formatDateTime } from '@/utils/format'
 import OntologyImportModal from './components/OntologyImportModal'
 import OntologyExportModal from './components/OntologyExportModal'
+import RbButton from '@/components/RbButton'
 
 /**
  * Ontology management page component
@@ -51,20 +53,18 @@ const Ontology: FC = () => {
    * @param record - The ontology item to edit
    * @param e - Mouse event to prevent propagation
    */
-  const handleEdit = (record: OntologyItem, e: MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
+  const handleEdit = (record: OntologyItem, e: MenuInfo) => {
+    e.domEvent.stopPropagation();
     entityModalRef.current?.handleOpen(record)
   }
   
   /**
    * Delete an ontology scene with confirmation
    * @param item - The ontology item to delete
-   * @param e - Mouse event to prevent propagation
+   * @param e - Menu click info
    */
-  const handleDelete = (item: OntologyItem, e: MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
+  const handleDelete = (item: OntologyItem, e: MenuInfo) => {
+    e.domEvent.stopPropagation();
     modal.confirm({
       title: t('common.confirmDeleteDesc', { name: item.scene_name }),
       okText: t('common.delete'),
@@ -111,28 +111,23 @@ const Ontology: FC = () => {
 
   return (
     <>
-      <Row gutter={16} className="rb:mb-4">
-        <Col span={8}>
-          <SearchInput
-            placeholder={t('ontology.searchPlaceholder')}
-            onSearch={(value) => setQuery({ scene_name: value })}
-            className="rb:w-full!"
-          />
-        </Col>
-        <Col span={16} className="rb:text-right">
-          <Space size={12}>
-            <Button onClick={handleExport}>
-              {t('ontology.export')}
-            </Button>
-            <Button onClick={handleImport}>
-              {t('ontology.import')}
-            </Button>
-            <Button type="primary" onClick={handleCreate}>
-              + {t('ontology.create')}
-            </Button>
-          </Space>
-        </Col>
-      </Row>
+      <Flex align="center" justify="space-between" className="rb:mb-4!">
+        <SearchInput
+          placeholder={t('ontology.searchPlaceholder')}
+          onSearch={(value) => setQuery({ scene_name: value })}
+        />
+        <Space size={12}>
+          <RbButton ghost type="primary" onClick={handleExport}>
+            {t('ontology.export')}
+          </RbButton>
+          <RbButton ghost type="primary" onClick={handleImport}>
+            {t('ontology.import')}
+          </RbButton>
+          <RbButton type="primary" onClick={handleCreate}>
+            + {t('ontology.create')}
+          </RbButton>
+        </Space>
+      </Flex>
 
       <PageScrollList<OntologyItem, Query>
         ref={scrollListRef}
@@ -141,58 +136,70 @@ const Ontology: FC = () => {
         column={3}
         renderItem={(item) =>(
           <RbCard
-            title={item.scene_name}
-            extra={<Tag>{item.type_num} {t('ontology.typeCount')}</Tag>}
-            onClick={() => handleJump(item)}
-            className="rb:cursor-pointer rb:relative"
-          >
-            {item.is_system_default &&
-              <div className="rb:absolute rb:-right-px rb:-top-px rb:bg-[#FF5D34] rb:rounded-[0px_7px_0px_8px] rb:text-[12px] rb:text-white rb:font-regular rb:leading-4 rb:py-0.5 rb:px-1">
-                {t('common.default')}
-              </div>
+            title={
+              <Flex justify="space-between">
+                <Flex gap={4} vertical>
+                  {item.scene_name}
+                  <Space size={8}>
+                    <Tag>{item.type_num} {t('ontology.typeCount')}</Tag>
+                    {item.is_system_default  && <Tag color="warning">{t('common.default')}</Tag>}
+                  </Space>
+                </Flex>
+                <Dropdown
+                  menu={{
+                    items: [
+                      {
+                        key: 'edit',
+                        icon: <div className="rb:size-6 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/edit.svg')]" />,
+                        label: t('common.edit'),
+                        onClick: (e: MenuInfo) => handleEdit(item, e),
+                      },
+                      {
+                        key: 'delete',
+                        icon: <div className="rb:size-6 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/delete.svg')]" />,
+                        label: t('common.delete'),
+                        onClick: (e: MenuInfo) => handleDelete(item, e),
+                      },
+                    ]
+                  }}
+                  placement="bottomRight"
+                >
+                  <div className="rb:cursor-pointer rb:size-6 rb:bg-[url('@/assets/images/common/more.svg')] rb:hover:bg-[url('@/assets/images/common/more_hover.svg')]"></div>
+                </Dropdown>
+              </Flex>
             }
-            <div
-              className="rb:flex rb:gap-2 rb:justify-between rb:text-[#5B6167] rb:text-[14px] rb:leading-5 rb:mb-3"
-            >
-              <span className="rb:whitespace-nowrap">{t(`ontology.scene_description`)}</span>
-              <Tooltip title={item.scene_description} placement="topRight">
-                <span className="rb:font-medium rb:flex-1 rb:text-right rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap">{item.scene_description}</span>
-              </Tooltip>
-            </div>
-            {(['created_at', 'updated_at'] as const).map(key => (
-              <div
-                key={key}
-                className="rb:flex rb:gap-2 rb:justify-between rb:text-[#5B6167] rb:text-[14px] rb:leading-5 rb:mb-3"
-              >
-                <span className="rb:whitespace-nowrap">{t(`ontology.${key}`)}</span>
-                <span className="rb:font-medium">{formatDateTime(item[key])}</span>
-              </div>
-            ))}
-            <Divider size="middle" />
-            <Flex gap={8} wrap align="center">
-              <div className="rb:text-[#5B6167] rb:leading-4.5">{t('ontology.entityTypes')}: </div>
-              <div className="rb:flex-1 rb:overflow-hidden rb:wrap-break-word! rb:line-clamp-1!">
+            isNeedTooltip={false}
+            headerClassName="rb:pb-0!"
+            onClick={() => handleJump(item)}
+            className="rb:cursor-pointer!"
+          >
+            <Tooltip title={item.scene_description}>
+              <div className="rb:h-10 rb:wrap-break-word rb:line-clamp-2 rb:leading-5">{item.scene_description}</div>
+            </Tooltip>
+
+            <Flex gap={8} wrap align="center" className="rb:mt-2!">
+              <Flex gap={8} className="rb:flex-1 rb:overflow-hidden rb:wrap-break-word! rb:line-clamp-1!">
                 {item.entity_type?.map((type, i) => (
-                  <Tag key={i} color={i % 2 ? 'processing' : 'success'} className="rb:ml-2">{type}</Tag>
+                  <span key={i} className="rb:bg-[#F6F6F6] rb:rounded-md rb:py-px rb:px-1 rb:text-[12px] rb:leading-4.5">{type}</span>
                 ))}
-              </div>
+              </Flex>
               {item.type_num > 3 && (
-                <Tag color="default">+{item.type_num - 3}</Tag>
+                <span className="rb:bg-[#F6F6F6] rb:rounded-full rb:py-px rb:px-1 rb:text-[12px] rb:leading-4.5">+{item.type_num - 3}</span>
               )}
             </Flex>
 
-            <div className="rb:mt-4 rb:h-5 rb:text-[12px] rb:leading-4 rb:font-regular rb:text-[#5B6167] rb:flex rb:items-center rb:justify-end">
-              {!item.is_system_default && <Space size={16}>
-                <div
-                  className="rb:w-5 rb:h-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/edit.svg')] rb:hover:bg-[url('@/assets/images/edit_hover.svg')]"
-                  onClick={(e) => handleEdit(item, e)}
-                ></div>
-                <div
-                  className="rb:w-5 rb:h-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/delete.svg')] rb:hover:bg-[url('@/assets/images/delete_hover.svg')]"
-                  onClick={(e) => handleDelete(item, e)}
-                ></div>
-              </Space>}
-            </div>
+            <Row className="rb:mt-4!">
+              {(['created_at', 'updated_at'] as const).map(key => (
+                <Col
+                  key={key}
+                  span={12}
+                  className="rb:text-[#5B6167] rb:text-[12px]! rb:leading-4.5"
+                >
+                  <div>{t(`ontology.${key}`)}</div>
+                  <div>{formatDateTime(item[key])}</div>
+                </Col>
+              ))}
+            </Row>
           </RbCard>
         )}
       />

web/src/views/Ontology/pages/Detail.tsx

@@ -2,17 +2,17 @@
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 14:10:20 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-06 11:26:49
+ * @Last Modified time: 2026-03-20 16:35:14
  */
 import { type FC, useEffect, useState, useRef } from 'react'
-import { useParams } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { App, Row, Col, Tooltip, Space, Button } from 'antd'
+import { App, Row, Col, Tooltip, Space, Button, Flex } from 'antd'
 
-import PageHeader from '../components/PageHeader'
+import PageHeader from '@/components/Layout/PageHeader'
 import { getOntologyClassList, deleteOntologyClass } from '@/api/ontology'
 import type { OntologyClassData, OntologyClassModalRef, OntologyClassExtractModalRef, OntologyClassItem } from '@/views/Ontology/types'
-import RbCard from '@/components/RbCard/Card';
+import RbCard from '@/components/RbCard';
 import OntologyClassModal from '../components/OntologyClassModal'
 import SearchInput from '@/components/SearchInput';
 import OntologyClassExtractModal from '../components/OntologyClassExtractModal'
@@ -26,6 +26,7 @@ import Tag from '@/components/Tag'
 const Detail: FC = () => {
   // Hooks
   const { t } = useTranslation();
+  const navigate = useNavigate()
   const { id } = useParams()
   const { modal, message } = App.useApp()
   
@@ -100,19 +101,29 @@ const Detail: FC = () => {
   return (
     <>
       <PageHeader
-        name={<Space>
+        title={<Space>
           {data.scene_name}
           {data.is_system_default ? <Tag color="warning">{t('common.default')}</Tag> : undefined}
+          <Tooltip title={data.scene_description}>
+            <div className="rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/common/question.svg')]"></div>
+          </Tooltip>
+        </Space>}
+        extra={<Space size={12}>
+          {data.is_system_default ? undefined : (<Space>
+            <Button type="primary" ghost className="rb:h-6! rb:px-2! rb:leading-5.5!" onClick={handleAdd}>+ {t('ontology.addClass')}</Button>
+            <Button className="rb:h-6! rb:px-2! rb:leading-5.5!" type="primary" onClick={handleExtract}>+ {t('ontology.extract')}</Button>
+          </Space>)}
+          <Flex align="center" className="rb:leading-5 rb:text-[14px] rb:text-[#5B6167] rb:font-regular rb:cursor-pointer" onClick={() => navigate(-1)}>
+            <div
+              className="rb:mr-2 rb:size-4 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/logout.svg')]"
+            ></div>
+            {t('common.return')}
+          </Flex>
         </Space>}
-        subTitle={<Tooltip title={data.scene_description}><div className="rb:h-4 rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap">{data.scene_description}</div></Tooltip>}
-        extra={data.is_system_default ? undefined : (<Space>
-          <Button type="primary" ghost className="rb:h-6! rb:px-2! rb:leading-5.5!" onClick={handleAdd}>+ {t('ontology.addClass')}</Button>
-          <Button className="rb:h-6! rb:px-2! rb:leading-5.5!" type="primary" onClick={handleExtract}>+ {t('ontology.extract')}</Button>
-        </Space>)}
       />
 
-      <div className="rb:h-[calc(100vh-64px)] rb:overflow-y-auto rb:py-3 rb:px-4">
-        <Row gutter={16} className="rb:mb-4">
+      <div className="rb:h-[calc(100vh-64px)] rb:overflow-y-auto rb:pb-3 rb:px-3">
+        <Row gutter={12} className="rb:mb-4">
           <Col span={6} offset={18}>
             <SearchInput
               placeholder={t('ontology.classSearchPlaceholder')}
@@ -128,13 +139,12 @@ const Detail: FC = () => {
                 <RbCard
                   title={item.class_name}
                   extra={data.is_system_default ? undefined : (<div
-                    className="rb:w-5 rb:h-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/delete.svg')] rb:hover:bg-[url('@/assets/images/delete_hover.svg')]"
+                    className="rb:size-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/common/delete.svg')] rb:hover:bg-[url('@/assets/images/common/delete_hover.svg')]"
                     onClick={() => handleDelete(item)}
                   ></div>)}
-                  className="rb:bg-transparent!"
                 >
                   <Tooltip title={item.class_description}>
-                    <div className="rb:h-8.5 rb:text-[#5B6167] rb:text-[12px] rb:leading-4.25 rb:font-regular rb:-mt-1 rb:wrap-break-word rb:line-clamp-2">{item.class_description}</div>
+                    <div className="rb:h-10 rb:text-[#5B6167] rb:leading-5 rb:font-regular rb:wrap-break-word rb:line-clamp-2">{item.class_description}</div>
                   </Tooltip>
                 </RbCard>
               </Col>

web/src/views/Skills/index.tsx

@@ -1,8 +1,8 @@
 /*
  * @Author: ZhaoYing 
  * @Date: 2026-02-05 10:43:49 
- * @Last Modified by:   ZhaoYing 
- * @Last Modified time: 2026-02-05 10:43:49 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-03-20 20:28:44
  */
 import React, { useRef } from 'react';
 import { Button, Tooltip } from 'antd';
@@ -10,9 +10,10 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
 import type { Skill } from './types'
-import RbCard from '@/components/RbCard/Card'
+import RbCard from '@/components/RbCard'
 import { getSkillListUrl } from '@/api/skill'
 import PageScrollList, { type PageScrollListRef } from '@/components/PageScrollList'
+import { formatDateTime } from '@/utils/format'
 
 /**
  * Skills List Page Component
@@ -66,14 +67,15 @@ const Skills: React.FC = () => {
           return (
             <RbCard
               title={item.name}
-              avatar={<div className="rb:w-12 rb:h-12 rb:text-center rb:font-semibold rb:text-[28px] rb:leading-12 rb:rounded-lg rb:text-[#FBFDFF] rb:bg-[#155EEF] rb:mr-2">{item.name[0]}</div>}
               className="rb:cursor-pointer"
+              titleClassName="rb:line-clamp-1!"
               onClick={() => handleView(item)}
             >
               {/* Skill description with tooltip */}
               <Tooltip title={item.description}>
-                <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4.25 rb:font-regular rb:-mt-1 rb:wrap-break-word rb:line-clamp-1">{item.description}</div>
+                <div className="rb:h-10 rb:leading-5 rb:wrap-break-word rb:line-clamp-2">{item.description}</div>
               </Tooltip>
+              <div className="rb:text-[#5B6167] rb:leading-4.5 rb:text-[12px] rb:mt-4">{t('common.updated_at')}: {formatDateTime(item.updated_at)}</div>
             </RbCard>
           );
         }}

web/src/views/SpaceManagement/index.tsx

@@ -1,8 +1,8 @@
 /*
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 17:48:59 
- * @Last Modified by:   ZhaoYing 
- * @Last Modified time: 2026-02-03 17:48:59 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-03-20 18:49:51
  */
 /**
  * Space Management Page
@@ -11,13 +11,12 @@
 
 import React, { useEffect, useState, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
-import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
-import { List, Button } from 'antd';
+import { List, Button, Flex, Space as AntSpace, Tooltip } from 'antd';
 
 import type { Space, SpaceModalRef } from './types';
 import SpaceModal from './components/SpaceModal';
-import RbCard from '@/components/RbCard/Card'
+import RbCard from '@/components/RbCard'
 import { getWorkspaces, switchWorkspace } from '@/api/workspaces'
 import BodyWrapper from '@/components/Empty/BodyWrapper'
 import Tag from '@/components/Tag'
@@ -76,20 +75,21 @@ const SpaceManagement: React.FC = () => {
             <List.Item key={item.id}>
               <RbCard
                 avatarUrl={item.icon}
-                avatar={<div className="rb:w-12 rb:h-12 rb:rounded-lg rb:mr-3 rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[28px] rb:text-[#ffffff]">
-                  {item.name[0]}
-                </div>}
-                title={item.name}
-                subTitle={<Tag className="rb:mt-1 rb:font-regular!" color={item.storage_type === 'rag' ? 'processing' : 'warning'}>{t(`space.${item.storage_type || 'neo4j'}`)}</Tag>}
-              >
-                <div className={clsx("rb:absolute rb:-top-px rb:-right-px rb:p-[2px_9px] rb:text-[#FFFFFF] rb:leading-4 rb:text-[12px] rb:font-regular rb:rounded-[0px_12px_0px_12px]", {
-                  'rb:bg-[#369F21]': item.is_active,
-                  'rb:bg-[#A8A9AA]': !item.is_active,
-                })}>{item.is_active ? t('space.associated') : t('space.notAssociated')}</div>
-                
-                <Button type="primary" ghost block className="rb:mt-10" onClick={() => handleJump(item.id)}>
+                avatarText={item.name[0]}
+                title={<Flex vertical gap={6}>
+                  <Tooltip title={item.name}>
+                    <div className="rb:wrap-break-word rb:line-clamp-1">{item.name}</div>
+                  </Tooltip>
+                  <AntSpace>
+                    <Tag color={item.storage_type === 'rag' ? 'processing' : 'warning'}>{t(`space.${item.storage_type || 'neo4j'}`)}</Tag>
+                    <Tag color={item.is_active ? 'success' : 'error'}>{item.is_active ? t('space.associated') : t('space.notAssociated')}</Tag>
+                  </AntSpace>
+                </Flex>}
+                isNeedTooltip={false}
+                footer={<Button type="primary" ghost block className="rb:mt-2 rb:h-9!" onClick={() => handleJump(item.id)}>
                   {t('space.enterSpace')}
-                </Button>
+                </Button>}
+              >
               </RbCard>
             </List.Item>
           )}

web/src/views/ToolManagement/Custom.tsx

@@ -1,37 +1,40 @@
-import React, { useState, useRef, useEffect, type ReactNode } from 'react';
+import { useState, useRef, useEffect, forwardRef, useImperativeHandle, type ReactNode } from 'react';
 import {
-  Button,
   Row,
   Col,
   App,
   List,
-  Space
+  Space,
+  Flex,
+  Tooltip,
+  Dropdown,
 } from 'antd';
 import { useTranslation } from 'react-i18next';
-import dayjs from 'dayjs';
 
-import type { ToolItem, Query, CustomToolModalRef } from './types';
+import type { ToolItem, CustomToolModalRef, CustomRef } from './types';
 import CustomToolModal from './components/CustomToolModal';
-import SearchInput from '@/components/SearchInput'
 import BodyWrapper from '@/components/Empty/BodyWrapper'
-import RbCard from '@/components/RbCard/Card'
+import RbCard from '@/components/RbCard'
 import { getTools, deleteTool } from '@/api/tools'
+import { formatDateTime } from '@/utils/format'
 
-const Custom: React.FC<{ getStatusTag: (status: string) => ReactNode }> = ({ getStatusTag }) => {
+const Custom = forwardRef<CustomRef, { getStatusTag: (status: string) => ReactNode; keyword?: string | undefined }>(({ getStatusTag, keyword }, ref) => {
   const { t } = useTranslation();
   const { message, modal } = App.useApp()
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState<ToolItem[]>([]);
-  const [query, setQuery] = useState<Query>({ name: undefined, tool_type: 'custom' });
   const customToolModalRef = useRef<CustomToolModalRef>(null);
 
   useEffect(() => {
     getData()
-  }, [query.name])
+  }, [keyword])
 
   const getData = () => {
     setLoading(true)
-    getTools(query)
+    getTools({
+      tool_type: 'custom',
+      name: keyword
+    })
       .then((res) => {
         setData(res as ToolItem[])
       })
@@ -39,15 +42,14 @@ const Custom: React.FC<{ getStatusTag: (status: string) => ReactNode }> = ({ get
         setLoading(false)
       })
   }
-  const handleSearch = (value?: string) => {
-    setQuery(prev => ({ ...prev, name: value }))
-  }
 
   // 打开添加服务弹窗
   const handleEdit = (data?: ToolItem) => {
     customToolModalRef.current?.handleOpen(data);
   };
 
+  useImperativeHandle(ref, () => ({ handleEdit }));
+
   // 删除服务
   const handleDeleteService = (item: ToolItem) => {
     modal.confirm({
@@ -65,71 +67,80 @@ const Custom: React.FC<{ getStatusTag: (status: string) => ReactNode }> = ({ get
   };
 
   return (
-    <div>
-      <Row gutter={16} className='rb:mb-4 rb:w-full'>
-        <Col span={8}>
-          <SearchInput
-            placeholder={t('tool.customSearchPlaceholder')}
-            onSearch={handleSearch}
-            style={{width: '100%'}}
-          />
-        </Col>
-        <Col span={16} className="rb:text-right">
-          <Button type="primary" onClick={() => {handleEdit()}}>{t('tool.addCustom')}</Button>
-        </Col>
-      </Row>
+    <>
       <BodyWrapper loading={loading} empty={data.length === 0}>
         <List
-          grid={{ gutter: 16, column: 2 }}
+          grid={{ gutter: 16, column: 3 }}
           dataSource={data}
           renderItem={(item) => (
             <List.Item key={item.id}>
               <RbCard
-                // avatar={
-                //   <div className="rb:w-12 rb:h-12 rb:rounded-lg rb:mr-3.25 rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[28px] rb:text-[#ffffff]">
-                //     {item.name[0]}
-                //   </div>
-                // }
                 title={
-                  <div>
-                    {item.name}<br/>
-                    {/* <div className="rb:mt-1 rb:text-[12px] rb:leading-4 rb:font-regular rb:text-[#5B6167]">xx个工具</div> */}
-                  </div>
-                }
-                extra={getStatusTag(item.status)}
-              >
-                <div>
-                  {['auth_type', 'tags', 'created_at'].map(key => (
-                    <div 
-                      key={key}
-                      className="rb:flex rb:gap-4 rb:justify-start rb:text-[#5B6167] rb:text-[14px] rb:leading-5 rb:mb-3"
-                    >
-                      <div className="rb:whitespace-nowrap rb:w-32">{t(`tool.${key}`)}</div>
-                      <div className='rb:flex-1 rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap rb:flex-inline rb:text-left rb:py-px rb:rounded rb:font-medium'>
-                        {key === 'created_at' && item[key]
-                          ? dayjs(item[key]).format('YYYY-MM-DD HH:mm:ss')
-                          : key === 'auth_type'
-                          ? t(`tool.${(item.config_data as any)?.[key]}`)
-                          : key === 'tags'
-                          ? (item[key] as string[]).join('、')
-                          : (item.config_data as any)?.[key] || '-'
-                        }
-                      </div>
-                    </div>
-                  ))}
-                  <div className="rb:mt-4 rb:text-[12px] rb:leading-4 rb:font-regular rb:text-[#5B6167] rb:flex rb:items-center rb:justify-end">
-                    <Space size={16}>
-                      <div 
-                        className="rb:w-5 rb:h-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/edit.svg')] rb:hover:bg-[url('@/assets/images/edit_hover.svg')]" 
-                        onClick={() => handleEdit(item)}
-                      ></div>
-                      <div 
-                        className="rb:w-5 rb:h-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/delete.svg')] rb:hover:bg-[url('@/assets/images/delete_hover.svg')]" 
-                        onClick={() => handleDeleteService(item)}
-                      ></div>
+                  <Flex justify="space-between" gap={16}>
+                    <Space size={8} className="rb:flex-1!">
+                      <Tooltip title={item.name}>
+                        <div className="rb:wrap-break-word rb:line-clamp-1">{item.name}</div>
+                      </Tooltip>
+                      {getStatusTag(item.status)}
                     </Space>
-                  </div>
-                </div>
+                    <Dropdown
+                      menu={{
+                        items: [
+                          {
+                            key: 'edit',
+                            icon: <div className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/edit.svg')]" />,
+                            label: t('common.edit'),
+                            onClick: () => handleEdit(item),
+                          },
+                          {
+                            key: 'delete',
+                            className: 'rb:text-[#FF5D34]!',
+                            icon: <div className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/delete_red.svg')]" />,
+                            label: t('common.delete'),
+                            onClick: () => handleDeleteService(item),
+                          },
+                        ]
+                      }}
+                      placement="bottomRight"
+                    >
+                      <div className="rb:cursor-pointer rb:size-6 rb:bg-[url('@/assets/images/common/more.svg')] rb:hover:bg-[url('@/assets/images/common/more_hover.svg')]"></div>
+                    </Dropdown>
+                  </Flex>
+                }
+                isNeedTooltip={false}
+              >
+
+                {item.tags?.length > 0
+                  ? <Flex gap={8} wrap align="center">
+                    <Flex gap={6}>
+                      {item.tags?.slice(0, 2).map((type, i) => (
+                        <div key={i} className="rb:bg-[#F6F6F6] rb:rounded-md rb:py-px rb:px-1 rb:text-[12px] rb:leading-4.5">{type}</div>
+                      ))}
+                    </Flex>
+                    {item.tags.length > 2 && (
+                      <Tooltip
+                        title={<Flex wrap gap={6}>{item.tags?.slice(2, item.tags.length).map((type, i) => (
+                          <div key={i} className="rb:bg-[#F6F6F6] rb:rounded-md rb:py-px rb:px-1 rb:text-[12px] rb:leading-4.5 rb:text-[#171719]">{type}</div>
+                        ))}</Flex>}
+                        color="white"
+                        placement="bottom"
+                      >
+                        <div className="rb:bg-[#F6F6F6] rb:rounded-md rb:py-px rb:px-1 rb:text-[12px] rb:leading-4.5">+{item.tags.length - 2}</div>
+                      </Tooltip>
+                    )}
+                  </Flex>
+                  : <div className="rb:text-[#A8A9AA] rb:leading-5">{t('tool.noTags')}</div>
+                }
+                <Row className="rb:bg-[#F6F6F6] rb:rounded-lg rb:py-2! rb:px-3! rb:leading-5 rb:mt-4!">
+                  <Col span={12}>
+                    <div className="rb:text-[#5B6167] rb:mb-1">{t('tool.auth_type')}</div>
+                    {(item.config_data as any)?.auth_type}
+                  </Col>
+                  <Col span={12}>
+                    <div className="rb:text-[#5B6167] rb:mb-1">{t('tool.created_at')}</div>
+                    {formatDateTime(item.created_at)}
+                  </Col>
+                </Row>
               </RbCard>
             </List.Item>
           )}
@@ -142,8 +153,8 @@ const Custom: React.FC<{ getStatusTag: (status: string) => ReactNode }> = ({ get
         ref={customToolModalRef}
         refresh={getData} 
       />
-    </div>
+    </>
   );
-};
+});
 
 export default Custom;

web/src/views/ToolManagement/Inner.tsx

@@ -1,30 +1,28 @@
 import React, { useState, useRef, useEffect, type ReactNode } from 'react';
 import {
+  List,
+  Flex,
+  Space,
+  Tooltip,
   Row,
   Col,
-  Tag,
-  List,
-  Flex
 } from 'antd';
-import { EyeOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import dayjs, { type Dayjs } from 'dayjs'
 
-import type { Query, ToolItem, TimeToolModalRef, JsonToolModalRef, InnerToolModalRef } from './types';
-import SearchInput from '@/components/SearchInput'
+import type { ToolItem, TimeToolModalRef, JsonToolModalRef, InnerToolModalRef } from './types';
 import BodyWrapper from '@/components/Empty/BodyWrapper'
-import RbCard from '@/components/RbCard/Card'
+import RbCard from '@/components/RbCard'
 import TimeToolModal from './components/TimeToolModal'
 import JsonToolModal from './components/JsonToolModal'
 import InnerToolModal from './components/InnerToolModal'
 import { getTools } from '@/api/tools'
 import { InnerConfigData } from './constant'
 
-const Inner: React.FC<{ getStatusTag: (status: string) => ReactNode }> = ({ getStatusTag }) => {
+const Inner: React.FC<{ getStatusTag: (status: string) => ReactNode; keyword?: string | undefined }> = ({ getStatusTag, keyword }) => {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState<ToolItem[]>([]);
-  const [query, setQuery] = useState<Query>({ name: undefined, tool_type: 'builtin' });
   const [curTime, setCurTime] = useState<Dayjs>(dayjs())
   const timeToolModalRef = useRef<TimeToolModalRef>(null)
   const jsonToolModalRef = useRef<JsonToolModalRef>(null)
@@ -38,11 +36,14 @@ const Inner: React.FC<{ getStatusTag: (status: string) => ReactNode }> = ({ getS
     return () => {
       clearInterval(timer)
     }
-  }, [query.name])
+  }, [keyword])
 
   const getData = () => {
     setLoading(true)
-    getTools(query)
+    getTools({
+      tool_type: 'builtin',
+      name: keyword
+    })
       .then((res) => {
         setData(res as ToolItem[])
       })
@@ -50,9 +51,6 @@ const Inner: React.FC<{ getStatusTag: (status: string) => ReactNode }> = ({ getS
         setLoading(false)
       })
   }
-  const handleSearch = (value?: string) => {
-    setQuery(prev => ({ ...prev, name: value }))
-  }
 
   // 打开添加服务弹窗
   const handleEdit = (data: ToolItem) => {
@@ -71,78 +69,77 @@ const Inner: React.FC<{ getStatusTag: (status: string) => ReactNode }> = ({ getS
 
   return (
     <div>
-      <Row gutter={16} className='rb:mb-4 rb:w-full'>
-        <Col span={8}>
-          <SearchInput
-            placeholder={t('tool.innerSearchPlaceholder')}
-            onSearch={handleSearch}
-            style={{width: '100%'}}
-          />
-        </Col>
-      </Row>
       <BodyWrapper loading={loading} empty={data.length === 0}>
         <List
-          grid={{ gutter: 16, column: 2 }}
+          grid={{ gutter: 16, column: 3 }}
           dataSource={data}
           renderItem={(item) => (
             <List.Item key={item.id} className='rb:h-full!'>
               <RbCard
-                // className={clsx({
-                //   'rb:h-85.5!': item.config_data.tool_class === 'DateTimeTool' || item.config_data.tool_class === 'JsonTool'
-                // })}
-                // avatar={
-                //   <div className="rb:w-12 rb:h-12 rb:rounded-lg rb:mr-3.25 rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[28px] rb:text-[#ffffff]">
-                //     {item.name[0]}
-                //   </div>
-                // }
-                title={item.name}
-                extra={getStatusTag(item.status)}
-                bodyClassName='rb:h-[calc(100%-40px)]'
-              >
-                <div className="rb:h-full rb:flex rb:flex-col rb:justify-between">
-                  <div className="rb:text-[12px] rb:leading-4 rb:font-regular rb:text-[#5B6167]">
-                    {t(`tool.${item.config_data.tool_class}_features`)} <br />
-                    <Flex gap={4} wrap className="rb:mt-2 rb:w-full">
-                      {InnerConfigData[item.config_data.tool_class].features.map(vo => <Tag key={vo} color="default">{ t(`tool.${vo}`) }</Tag>) }
+                title={
+                  <Flex justify="space-between" gap={16}>
+                    <Space size={8}>
+                      <Tooltip title={item.name}>
+                        <div className="rb:wrap-break-word rb:line-clamp-1">{item.name}</div>
+                      </Tooltip>
+                      {getStatusTag(item.status)}
+                    </Space>
+                    <Flex align="center" justify="center" className="rb:size-5.5 rb:hover:bg-[#F6F6F6] rb:rounded-md">
+                      <div
+                        className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/edit.svg')]"
+                        onClick={() => handleEdit(item)}
+                      />
                     </Flex>
+                  </Flex>
+                }
+                isNeedTooltip={false}
+              >
+                <Tooltip title={t(`tool.${item.config_data.tool_class}_features`)}>
+                  <div className="rb:h-10 rb:wrap-break-word rb:line-clamp-2 rb:leading-5">{t(`tool.${item.config_data.tool_class}_features`)}</div>
+                </Tooltip>
 
-                    {item.config_data.tool_class === 'DateTimeTool'
-                      ? <div className="rb:mt-3 rb:bg-[#F0F3F8] rb:px-3 rb:py-2.5 rb:rounded-md">
-                        {t('tool.currentTime')}
-                        <div className="rb:font-medium rb:bg-white rb:px-3 rb:py-2.5 rb:rounded-md rb:my-2">
-                          {curTime.format('YYYY-MM-DD HH:mm:ss')}
-                        </div>
-                        {t('tool.timestamp')}
-                        <div className="rb:font-medium rb:bg-white rb:px-3 rb:py-2.5 rb:rounded-md rb:mt-2">
-                          {curTime.unix()}
-                        </div>
-                      </div>
-                      :item.config_data.tool_class === 'JsonTool'
-                      ? <div className="rb:mt-3 rb:bg-[#F0F3F8] rb:px-3 rb:py-2.5 rb:rounded-md">
-                        {t('tool.jsonEg')}
-                        <div className="rb:font-medium rb:bg-white rb:px-3 rb:py-2.5 rb:rounded-md rb:my-2">
-                          {InnerConfigData[item.config_data.tool_class].eg}
-                        </div>
-                      </div>
-                        : <div className="rb:mt-3 rb:bg-[#F0F3F8] rb:px-3 rb:py-2.5 rb:rounded-md">
-                          {t('tool.configStatus')}
-                          <div className="rb:font-medium rb:bg-white rb:px-3 rb:py-2.5 rb:rounded-md rb:my-2">
-                            {t(`tool.${item.status}_desc`)}
-                          </div>
-                        </div>
-                    }
-                  </div>
+                <Flex gap={8} wrap align="center" className="rb:mt-2! rb:mb-4!">
+                  <Flex gap={6}>
+                    {InnerConfigData[item.config_data.tool_class].features?.slice(0, 2).map((type, i) => (
+                      <div key={i} className="rb:bg-[#F6F6F6] rb:rounded-md rb:py-px rb:px-1 rb:text-[12px] rb:leading-4.5">{type}</div>
+                    ))}
+                  </Flex>
+                  {InnerConfigData[item.config_data.tool_class].features.length > 2 && (
+                    <Tooltip
+                      title={<Flex wrap gap={6}>{InnerConfigData[item.config_data.tool_class].features?.slice(2, InnerConfigData[item.config_data.tool_class].features.length).map((type, i) => (
+                        <div key={i} className="rb:bg-[#F6F6F6] rb:rounded-md rb:py-px rb:px-1 rb:text-[12px] rb:leading-4.5 rb:text-[#171719]">{type}</div>
+                      ))}</Flex>}
+                      color="white"
+                      placement="bottom"
+                    >
+                      <div className="rb:bg-[#F6F6F6] rb:rounded-md rb:py-px rb:px-1 rb:text-[12px] rb:leading-4.5">+{InnerConfigData[item.config_data.tool_class].features.length - 2}</div>
+                    </Tooltip>
+                  )}
+                </Flex>
 
-                  <div className="rb:mt-4 rb:flex rb:items-center rb:justify-end">
-                    {item.config_data.tool_class === 'DateTimeTool' || item.config_data.tool_class === 'JsonTool' ? 
-                        <EyeOutlined className="rb:text-5 rb:text-[#5B6167]! rb:hover:text-[#212332]!" onClick={() => handleEdit(item)} />
-                    : <div
-                        className="rb:w-5 rb:h-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/edit.svg')] rb:hover:bg-[url('@/assets/images/edit_hover.svg')]"
-                      onClick={() => handleEdit(item)}
-                    ></div>
-                    }
-                  </div>
-                </div>
+                <Row className="rb:bg-[#F6F6F6] rb:rounded-lg rb:py-2! rb:px-3! rb:leading-5">
+                  {item.config_data.tool_class === 'DateTimeTool'
+                    ? <>
+                      <Col span={12}>
+                        <div className="rb:text-[#5B6167] rb:mb-1">{t('tool.currentTime')}</div>
+                        {curTime.format('YYYY-MM-DD HH:mm:ss')}
+                      </Col>
+                      <Col span={12}>
+                        <div className="rb:text-[#5B6167] rb:mb-1">{t('tool.timestamp')}</div>
+                        {curTime.unix()}
+                      </Col>
+                    </>
+                    : item.config_data.tool_class === 'JsonTool'
+                    ? <Col span={24}>
+                        <div className="rb:text-[#5B6167] rb:mb-1">{t('tool.jsonEg')}</div>
+                        {InnerConfigData[item.config_data.tool_class].eg}
+                      </Col>
+                    : <Col span={24}>
+                      <div className="rb:text-[#5B6167] rb:mb-1">{t('configStatus')}</div>
+                      {t(`tool.${item.status}_desc`)}
+                    </Col>
+                  }
+                </Row>
               </RbCard>
             </List.Item>
           )}

web/src/views/ToolManagement/Market.tsx

@@ -1,14 +1,20 @@
 import React, { useState, useRef, useEffect, useCallback, type ReactNode } from 'react';
-import { Input, Button, App, Card, Space, Skeleton, Tag } from 'antd';
-import { SearchOutlined, SettingOutlined, GlobalOutlined, SyncOutlined } from '@ant-design/icons';
+import { Button, App, Space, Row, Col, Flex, Tooltip } from 'antd';
 import { useTranslation } from 'react-i18next';
 import InfiniteScroll from 'react-infinite-scroll-component';
+import clsx from 'clsx'
+
 import MarketConfigModal, { type MarketConfigModalRef } from './components/MarketConfigModal';
 import McpServiceModal from './components/McpServiceModal';
 import type { McpServiceModalRef } from './types';
 import pageEmptyIcon from '@/assets/images/empty/pageEmpty.png'
 import Empty from '@/components/Empty/index'
 import { getMarketTools, getMarketConfig, getMarketMCPs, getMarketMCPDetail, getMarketMCPsActivated, getTools } from '@/api/tools';
+import SearchInput from '@/components/SearchInput';
+import RbCard from '@/components/RbCard'
+import Tag from '@/components/Tag'
+import marketIcon from '@/assets/images/tool/market.png'
+
 interface MarketSource {
   id: string;
   name: string;
@@ -97,6 +103,9 @@ const Market: React.FC<{ getStatusTag?: (status: string) => ReactNode }> = () =>
           });
           
           setCategories(Array.from(categoryMap.values()));
+          if (response.items[0]?.id) {
+            handleSelectSource(response.items[0]?.id)
+          }
         }
       } catch (error) {
         console.error('获取市场数据失败:', error);
@@ -223,6 +232,7 @@ const Market: React.FC<{ getStatusTag?: (status: string) => ReactNode }> = () =>
   };
 
   const handleSelectSource = async (sourceId: string) => {
+    if (sourceId === selectedSource) return
     setSelectedSource(sourceId);
     setSearchKeyword('');
     setCurrentPage(1);
@@ -235,21 +245,6 @@ const Market: React.FC<{ getStatusTag?: (status: string) => ReactNode }> = () =>
     await fetchMcpList(sourceId, 1);
   };
 
-  const handleRefresh = async (sourceId: string) => {
-    // 清除缓存，重新从第一页加载
-    setMcpCache(prev => {
-      const next = { ...prev };
-      delete next[sourceId];
-      return next;
-    });
-    setCurrentPage(1);
-    await fetchMcpList(sourceId, 1);
-    const source = marketSources.find(s => s.id === sourceId);
-    if (source) {
-      message.success(`${source.name} ${t('tool.marketRefreshSuccess')}`);
-    }
-  };
-
   const handleOpenConfig = async (sourceId: string) => {
     const source = marketSources.find(s => s.id === sourceId);
     if (!source) return;
@@ -329,13 +324,13 @@ const Market: React.FC<{ getStatusTag?: (status: string) => ReactNode }> = () =>
     if (!selectedSource) {
       return (
         <div className="rb:flex rb:flex-col rb:items-center rb:justify-center rb:h-full rb:text-center">
-             <Empty
-                url={pageEmptyIcon}
-                title={t('tool.marketSelectTitle')}
-                subTitle={t('tool.marketSelectDesc')}
-                size={200}
-                className="rb:h-full"
-              />
+          <Empty
+            url={pageEmptyIcon}
+            title={t('tool.marketSelectTitle')}
+            subTitle={t('tool.marketSelectDesc')}
+            size={200}
+            className="rb:h-full"
+          />
 
         </div>
       );
@@ -348,230 +343,170 @@ const Market: React.FC<{ getStatusTag?: (status: string) => ReactNode }> = () =>
 
     return (
       <>
-        <div className="rb:flex rb:justify-between rb:items-center rb:pb-0">
-          <div className="rb:flex rb:items-center rb:gap-4">
-            <div className="rb:w-10 rb:h-10 rb:flex rb:items-center rb:justify-center rb:bg-gray-50 rb:rounded-xl rb:flex-shrink-0 rb:overflow-hidden">
+        <Flex justify="space-between" align="center">
+          <Flex gap={12} align="center" className="rb:pl-1!">
+            <Flex align="center" justify="center" className="rb:size-12">
               {source.logo_url ? (
-                <img 
-                  src={source.logo_url} 
-                  alt={source.name} 
-                  className="rb:w-full rb:h-full rb:object-cover"
+                <img
+                  src={source.logo_url}
+                  alt={source.name}
+                  className="rb:w-full rb:h-full rb:object-cover  rb:rounded-xl"
                   referrerPolicy="no-referrer"
                   onError={(e) => {
-                    e.currentTarget.style.display = 'none';
-                    const parent = e.currentTarget.parentElement;
-                    if (parent) {
-                      parent.innerHTML = '🏪';
-                      parent.style.fontSize = '48px';
-                    }
+                    e.currentTarget.src = marketIcon
                   }}
                 />
               ) : (
-                <span className="rb:text-5xl">🏪</span>
+                <div className="rb:size-12  rb:rounded-xl rb:bg-cover rb:bg-[url('@/assets/images/tool/market.png')]"></div>
               )}
+            </Flex>
+            <div>
+              <div className="rb:font-[MiSans Bold] rb:font-bold rb:text-[16px] rb:leading-5.5">{source.name}</div>
+              <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4.5">{t('tool.availableMcp')} ({mcpTotal})</div>
             </div>
-            <div className="rb:flex rb:items-center rb:flex-1">
-              <h2 className="rb:text-xl rb:font-semibold rb:text-gray-900 rb:mb-2 rb:mr-2">{source.name}</h2>
-              可用 MCP 服务 <span className="rb:text-gray-600 rb:font-normal">({mcpTotal})</span>
-              {/* <p className="rb:text-sm rb:text-gray-600 rb:leading-relaxed">{source.description}</p> */}
-            </div>
-          </div>
+          </Flex>
 
-          <div className="rb:flex rb:gap-3">
-            <div className="rb:flex rb:gap-3 rb:items-center">
-              {source.connected && (
-                <Button size="small" icon={<SyncOutlined />} onClick={() => handleRefresh(selectedSource)}>
-                  {t('tool.marketRefresh')}
-                </Button>
-              )}
-              
-                <Input
-                  prefix={<SearchOutlined />}
-                  placeholder={t('tool.marketSearchPlaceholder')}
-                  value={searchKeyword}
-                  onChange={(e) => handleSearchChange(e.target.value)}
-                  allowClear
-                  style={{ width: 200 }}
-                  
-                />
-              
-            </div>
-            <Button icon={<SettingOutlined />} onClick={() => handleOpenConfig(selectedSource)}>
+          <Space size={12}>
+            <SearchInput
+              placeholder={t('tool.marketSearchPlaceholder')}
+              value={searchKeyword}
+              onSearch={(value: string) => handleSearchChange(value)}
+              allowClear
+              style={{ width: 200 }}
+            />
+            <Button type="primary" ghost onClick={() => handleOpenConfig(selectedSource)}>
               {t('tool.marketConfigBtn')}
             </Button>
-            <Button type="primary" icon={<GlobalOutlined />} onClick={() => window.open(source.url, '_blank')}>
+            <Button type="primary" onClick={() => window.open(source.url, '_blank')}>
               {t('tool.marketVisit')}
             </Button>
-          </div>
-        </div>
+          </Space>
+        </Flex>
 
-        <div className="rb:mt-6">
-            <div id="mcpScrollableDiv" className="rb:overflow-y-auto rb:h-[calc(100vh-260px)]">
-              {!loading && mcpList.length === 0 ? (
-                <Empty
-                  url={pageEmptyIcon}
-                  title={searchKeyword ? t('tool.marketNoSearchResult') : t('tool.marketNoData')}
-                  subTitle={searchKeyword ? t('tool.marketNoSearchResultDesc') : t('tool.marketNoDataDesc')}
-                  size={200}
-                  className="rb:h-full"
-                />
-              ) : (
-              <InfiniteScroll
-                dataLength={mcpList.length}
-                next={loadMore}
-                hasMore={hasMore}
-                loader={null}
-                scrollableTarget="mcpScrollableDiv"
-              >
-                <div 
-                  className="rb:gap-4" 
-                  style={{
-                    display: 'grid',
-                    gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))'
-                  }}
-                >
-                  {mcpList.map(mcp => (
-                  <div 
-                    key={mcp.id} 
-                    className="rb:bg-white rb:border rb:border-gray-200 rb:rounded-lg rb:p-4 rb:pb-2 rb:transition-all rb:duration-200 hover:rb:shadow-lg hover:rb:border-gray-300"
+        <div className="rb:mt-4">
+          <div id="mcpScrollableDiv" className="rb:overflow-y-auto rb:h-[calc(100vh-188px)]">
+            {!loading && mcpList.length === 0 ? (
+              <Empty
+                url={pageEmptyIcon}
+                title={searchKeyword ? t('tool.marketNoSearchResult') : t('tool.marketNoData')}
+                subTitle={searchKeyword ? t('tool.marketNoSearchResultDesc') : t('tool.marketNoDataDesc')}
+                size={200}
+                className="rb:h-full"
+              />
+            ) : (
+            <InfiniteScroll
+              dataLength={mcpList.length}
+              next={loadMore}
+              hasMore={hasMore}
+              loader={null}
+              scrollableTarget="mcpScrollableDiv"
+            >
+              <Row gutter={[12,12]}>
+                {mcpList.map(mcp => (
+                  <Col
+                    key={mcp.id}
+                    span={12}
                   >
-                    <div className="rb:flex rb:justify-between rb:items-center rb:mb-3">
-                      <div className="rb:w-12 rb:h-12 rb:flex rb:items-center rb:justify-center rb:bg-gray-50 rb:rounded-lg rb:overflow-hidden">
-                        {mcp.logo_url ? (
-                          <img 
-                            src={mcp.logo_url} 
-                            alt={getLocaleField(mcp, 'name')} 
-                            className="rb:w-full rb:h-full rb:object-cover"
-                            referrerPolicy="no-referrer"
-                            onError={(e) => {
-                              e.currentTarget.style.display = 'none';
-                              const parent = e.currentTarget.parentElement;
-                              if (parent) {
-                                parent.innerHTML = '🔧';
-                                parent.style.fontSize = '24px';
-                              }
-                            }}
-                          />
-                        ) : (
-                          <span className="rb:text-3xl">🔧</span>
-                        )}
-                      </div>
-                      {mcp.categories?.[0] && (
-                        <span className="rb:px-2 rb:py-1 rb:rounded rb:text-xs rb:font-medium rb:bg-blue-50 rb:text-blue-700">
-                          {mcp.categories[0]}
-                        </span>
-                      )}
-                    </div>
-                    <h3 className="rb:text-base rb:font-semibold rb:text-gray-900 rb:mb-1">{getLocaleField(mcp, 'name')}</h3>
-                    {mcp.publisher && (
-                      <div className="rb:mb-2">
-                        <span className="rb:text-xs rb:text-gray-500">{mcp.publisher.startsWith('@') ? mcp.publisher : `@${mcp.publisher}`}</span>
-                      </div>
-                    )}
-                    <p className="rb:text-sm rb:text-gray-600 rb:line-clamp-2 rb:mb-3 rb:min-h-10">{getLocaleField(mcp, 'description')}</p>
-                    <div className="rb:flex rb:gap-4 rb:mb-3 rb:pt-3 rb:border-t rb:border-gray-100">
-                      {mcp.view_count != null && (
-                        <span className="rb:flex rb:items-center rb:gap-1 rb:text-xs rb:text-gray-500">
-                          <GlobalOutlined /> {mcp.view_count.toLocaleString()}
-                        </span>
-                      )}
-                    </div>
-                    <div className={`rb:flex rb:items-center ${mcp.activated || mcp.inDatabase ? 'rb:justify-between' : 'rb:justify-end'}`}>
-                      <div className="rb:flex rb:gap-2">
-                        {mcp.activated && <Tag color="success">{t('tool.marketActivated')}</Tag>}
-                        {mcp.inDatabase && <Tag color="blue">{t('tool.marketInDatabase')}</Tag>}
-                      </div>
-                      <Button disabled={mcp.inDatabase} type="primary" size="small" onClick={() => handleOpenMcpServiceModal(mcp)}>
-                        + {t('tool.marketAdd')}
-                      </Button>
-                    </div>
-                  </div>
+                    <RbCard
+                      avatarUrl={mcp.logo_url || marketIcon}
+                      title={
+                        <Flex justify="space-between" gap={16}>
+                          <Flex vertical gap={6}>
+                            <Tooltip title={getLocaleField(mcp, 'name')}>
+                              <div className="rb:wrap-break-word rb:line-clamp-1">{getLocaleField(mcp, 'name')}</div>
+                            </Tooltip>
+                            <Flex gap={8} wrap className='rb:wrap-break-word rb:line-clamp-1'>
+                              {mcp.categories?.[0] && (
+                                <Tag>{mcp.categories[0]}</Tag>
+                              )}
+                              {mcp.activated && <Tag color="success">{t('tool.marketActivated')}</Tag>}
+                              {mcp.inDatabase && <Tag>{t('tool.marketInDatabase')}</Tag>}
+                            </Flex>
+                          </Flex>
+                          <Button
+                            disabled={mcp.inDatabase}
+                            size="small"
+                            onClick={() => handleOpenMcpServiceModal(mcp)}
+                          >+</Button>
+                        </Flex>
+                      }
+                      isNeedTooltip={false}
+                      footer={<Flex justify="space-between" align="center" className="rb:text-[#5B6167] rb:text-[12px] rb:mb-1!">
+                        {mcp.publisher && <span>{mcp.publisher.startsWith('@') ? mcp.publisher : `@${mcp.publisher}`}</span>}
+                        {mcp.view_count && <Space size={4}>
+                          <div className="rb:size-4 rb:bg-cover rb:bg-[url('src/assets/images/common/global_outline.svg')]"></div>
+                          {mcp.view_count.toLocaleString()}
+                        </Space>}
+                      </Flex>}
+                    >
+                      {getLocaleField(mcp, 'description') ?
+                        <Tooltip title={getLocaleField(mcp, 'description')}>
+                          <div className="rb:h-10 rb:leading-5 rb:wrap-break-word rb:line-clamp-2 rb:mt-2">{getLocaleField(mcp, 'description')}</div>
+                        </Tooltip>
+                        : <div className="rb:h-10 rb:leading-5 rb:text-[#A8A9AA] rb:mt-2">{t('tool.descEmpty')}</div>  
+                      }
+                    </RbCard>
+                  </Col>
                 ))}
-                </div>
-              </InfiniteScroll>
-              )}
-            </div>
+              </Row>
+            </InfiniteScroll>
+            )}
+          </div>
         </div>
       </>
     );
   };
 
   return (
-    <div className="rb:flex rb:gap-4 rb:h-[calc(100vh-138px)]">
-      {/* 左侧市场源列表 */}
-      <div className="rb:w-80 rb:h-full rb:overflow-y-auto">
-        <Space size={12} direction="vertical" className="rb:w-full">
+    <Row gutter={16}>
+      <Col flex="380px">
+        <Flex vertical gap={16}>
+          <div className="rb:font-[MiSans-Bold] rb:font-bold rb:text-[16px] rb:leading-5.5">{t('tool.mcpMarket')}</div>
           {categories.map(cat => (
-            <Card
-              key={cat.id}
-              type="inner"
-              title={
-                <div className="rb:flex rb:items-center rb:gap-2">
-                  <span>{cat.name}</span>
-                </div>
-              }
-              classNames={{
-                body: "rb:p-[10px]!",
-                header: "rb:bg-[#F6F8FC]!"
-              }}
-            >
-              <Space size={8} direction="vertical" className="rb:w-full">
-                {marketSources
-                  .filter(s => s.category === cat.id)
-                  .map(source => (
-                    <div
-                      key={source.id}
-                      className={`rb:bg-white rb:rounded-lg rb:p-2 rb:border rb:cursor-pointer rb:flex rb:items-center rb:gap-2 rb:transition-all ${
-                        selectedSource === source.id 
-                          ? 'rb:border-[#155EEF] rb:shadow-[0px_2px_4px_0px_rgba(33,35,50,0.15)]' 
-                          : 'rb:border-[#DFE4ED] rb:hover:border-[#155EEF] rb:hover:shadow-[0px_2px_4px_0px_rgba(33,35,50,0.15)]'
-                      }`}
-                      onClick={() => handleSelectSource(source.id)}
-                    >
-                      <div className="rb:w-5 rb:h-5 rb:flex-shrink-0 rb:flex rb:items-center rb:justify-center rb:overflow-hidden rb:rounded rb:bg-gray-100">
-                        {source.logo_url ? (
-                          <img 
-                            src={source.logo_url} 
-                            alt={source.name} 
-                            className="rb:w-full rb:h-full rb:object-cover"
-                            referrerPolicy="no-referrer"
-                            onError={(e) => {
-                              e.currentTarget.style.display = 'none';
-                              const parent = e.currentTarget.parentElement;
-                              if (parent) {
-                                parent.innerHTML = '🏪';
-                                parent.style.fontSize = '16px';
-                              }
-                            }}
-                          />
-                        ) : (
-                          <span className="rb:text-base">🏪</span>
-                        )}
-                      </div>
-                      <span className="rb:flex-1 rb:font-medium rb:text-[12px] rb:overflow-hidden rb:text-ellipsis rb:whitespace-nowrap">
-                        {source.name}
-                      </span>
-                      {/* <span className="rb:text-xs rb:text-gray-500 rb:px-1.5 rb:py-0.5 rb:bg-gray-100 rb:rounded-full rb:flex-shrink-0">
-                        {source.mcp_count}
-                      </span> */}
-                      {source.connected && (
-                        <span className="rb:text-green-500 rb:text-[8px] rb:flex-shrink-0">●</span>
+            <Flex key={cat.id} vertical gap={8}>
+              <div className="rb:text-[#5B6167] rb:text-[12px] rb:font-medium rb:leading-4.5">
+                {cat.name}
+              </div>
+              {marketSources
+                .filter(s => s.category === cat.id)
+                .map(source => (
+                  <Flex
+                    key={source.id}
+                    align="center"
+                    gap={8}
+                    className={clsx('rb:bg-white rb:rounded-xl rb:py-2! rb:px-3! rb:cursor-pointer rb:transition-all', {
+                      'rb:border rb:border-[#171719]': selectedSource === source.id,
+                      'rb:shadow-[0px_2px_6px_0px_rgba(23,23,25,0.1)]': selectedSource !== source.id
+                    })}
+                    onClick={() => handleSelectSource(source.id)}
+                  >
+                    <div className="rb:size-7 rb:shrink-0 rb:flex rb:items-center rb:justify-center rb:overflow-hidden rb:rounded rb:bg-gray-100">
+                      {source.logo_url ? (
+                        <img
+                          src={source.logo_url}
+                          alt={source.name}
+                          className="rb:w-full rb:h-full rb:object-cover rb:rounded-sm"
+                          referrerPolicy="no-referrer"
+                          onError={(e) => {
+                            e.currentTarget.src = marketIcon;
+                          }}
+                        />
+                      ) : (
+                        <div className="rb:size-7 rb:rounded-sm rb:bg-cover rb:bg-[url('@/assets/images/tool/market.png')]"></div>
                       )}
                     </div>
-                  ))}
-              </Space>
-            </Card>
+                    <span className="rb:flex-1 rb:font-medium rb:overflow-hidden rb:text-ellipsis rb:whitespace-nowrap">
+                      {source.name}
+                    </span>
+                  </Flex>
+                ))}
+            </Flex>
           ))}
-        </Space>
-      </div>
-
-      {/* 右侧内容区 */}
-      <div className="rb:flex-1 rb:border-l rb:border-gray-200 rb:overflow-hidden">
-        <div className="rb:h-full rb:overflow-y-auto rb:p-6">
-          {renderSourceDetail()}
-        </div>
-      </div>
-
+        </Flex>
+      </Col>
+      <Col flex="1">
+        {renderSourceDetail()}
+      </Col>
       {/* 配置弹窗 */}
       <MarketConfigModal
         ref={marketConfigModalRef}
@@ -581,7 +516,7 @@ const Market: React.FC<{ getStatusTag?: (status: string) => ReactNode }> = () =>
         ref={mcpServiceModalRef}
         refresh={handleRefreshAfterAdd}
       />
-    </div>
+    </Row>
   );
 };
 

web/src/views/ToolManagement/Mcp.tsx

@@ -1,37 +1,38 @@
-import React, { useState, useRef, useEffect, type ReactNode } from 'react';
+import { useState, useRef, useEffect, forwardRef, useImperativeHandle, type ReactNode } from 'react';
 import {
-  Button,
-  Row,
-  Col,
   App,
   List,
   Space,
+  Tooltip,
+  Dropdown,
+  Flex,
 } from 'antd';
-import { LinkOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 
-import type { ToolItem, Query, McpServiceModalRef } from './types';
+import type { ToolItem, McpServiceModalRef, McpRef } from './types';
 import McpServiceModal from './components/McpServiceModal';
-import SearchInput from '@/components/SearchInput'
 import BodyWrapper from '@/components/Empty/BodyWrapper'
-import RbCard from '@/components/RbCard/Card'
+import RbCard from '@/components/RbCard'
 import { getTools, deleteTool, testConnection } from '@/api/tools'
+import { formatDateTime } from '@/utils/format'
 
-const Mcp: React.FC<{ getStatusTag: (status: string) => ReactNode }> = ({ getStatusTag }) => {
+const Mcp = forwardRef<McpRef, { getStatusTag: (status: string) => ReactNode; keyword?: string | undefined }>(({ getStatusTag, keyword }, ref) => {
   const { t } = useTranslation();
   const { message, modal } = App.useApp()
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState<ToolItem[]>([]);
-  const [query, setQuery] = useState<Query>({ name: undefined, tool_type: 'mcp' });
   const addServiceModalRef = useRef<McpServiceModalRef>(null);
 
   useEffect(() => {
     getData()
-  }, [query.name])
+  }, [keyword])
 
   const getData = () => {
     setLoading(true)
-    getTools(query)
+    getTools({
+      tool_type: 'mcp',
+      name: keyword
+    })
       .then((res) => {
         setData(res as ToolItem[])
       })
@@ -39,9 +40,8 @@ const Mcp: React.FC<{ getStatusTag: (status: string) => ReactNode }> = ({ getSta
         setLoading(false)
       })
   }
-  const handleSearch = (value?: string) => {
-    setQuery(prev => ({ ...prev, name: value }))
-  }
+
+  useImperativeHandle(ref, () => ({ handleEdit, getData }));
 
   // 打开添加服务弹窗
   const handleEdit = (data?: ToolItem) => {
@@ -82,19 +82,7 @@ const Mcp: React.FC<{ getStatusTag: (status: string) => ReactNode }> = ({ getSta
   };
 
   return (
-    <div>
-      <Row gutter={16} className='rb:mb-4 rb:w-full'>
-        <Col span={8}>
-          <SearchInput
-            placeholder={t('tool.mcpSearchPlaceholder')}
-            onSearch={handleSearch}
-            style={{width: '100%'}}
-          />
-        </Col>
-        <Col span={16} className="rb:text-right">
-          <Button type="primary" onClick={() => {handleEdit()}}>{t('tool.addService')}</Button>
-        </Col>
-      </Row>
+    <>
       <BodyWrapper loading={loading} empty={data?.length === 0}>
         <List
           grid={{ gutter: 16, column: 3 }}
@@ -102,58 +90,58 @@ const Mcp: React.FC<{ getStatusTag: (status: string) => ReactNode }> = ({ getSta
           renderItem={(item) => (
             <List.Item key={item.id}>
               <RbCard
-                // avatar={
-                //   <div className="rb:w-12 rb:h-12 rb:rounded-lg rb:mr-3.25 rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[28px] rb:text-[#ffffff]">
-                //     {item.name[0]}
-                //   </div>
-                // }
-                title={item.name}
-                extra={getStatusTag(item.status)}
-              >
-                <div>
-                  {[
-                    'server_url',
-                    'last_health_check',
-                  ].map(key => {
-                    const value = item.config_data?.[key as keyof typeof item.config_data];
-                    let displayValue: React.ReactNode;
-                    
-                    if (key === 'last_health_check') {
-                      displayValue = value ? new Date(value as number).toLocaleString() : '-';
-                    } else if (typeof value === 'string' || typeof value === 'number') {
-                      displayValue = value;
-                    } else {
-                      displayValue = '-';
-                    }
-                    
-                    return (
-                      <div 
-                        key={key}
-                        className="rb:flex rb:gap-4 rb:justify-start rb:text-[#5B6167] rb:text-[14px] rb:leading-5 rb:mb-3"
-                      >
-                        <div className="rb:whitespace-nowrap rb:w-27.5">{t(`tool.${key}`)}</div>
-                        <div className="rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap rb:flex-1">{displayValue}</div>
-                      </div>
-                    );
-                  })}
-                  <div className="rb:mt-4 rb:text-[12px] rb:leading-4 rb:font-regular rb:text-[#5B6167] rb:flex rb:items-center rb:justify-end">
-                    <Space size={16}>
-                      <div 
-                        className="rb:w-5 rb:h-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/edit.svg')] rb:hover:bg-[url('@/assets/images/edit_hover.svg')]" 
-                        onClick={() => handleEdit(item)}
-                      ></div>
-                      <Button type="text" icon={<LinkOutlined />} onClick={() => handleTestConnection(item)}></Button>
-                      <div 
-                        className="rb:w-5 rb:h-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/delete.svg')] rb:hover:bg-[url('@/assets/images/delete_hover.svg')]" 
-                        onClick={() => handleDeleteService(item)}
-                      ></div>
+                title={
+                  <Flex justify="space-between" gap={16}>
+                    <Space size={8} className="rb:flex-1!">
+                      <Tooltip title={item.name}>
+                        <div className="rb:wrap-break-word rb:line-clamp-1">{item.name}</div>
+                      </Tooltip>
+                      {getStatusTag(item.status)}
                     </Space>
+                    <Dropdown
+                      menu={{
+                        items: [
+                          {
+                            key: 'edit',
+                            icon: <div className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/edit.svg')]" />,
+                            label: t('common.edit'),
+                            onClick: () => handleEdit(item),
+                          },
+                          {
+                            key: 'link',
+                            icon: <div className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/conversation/link.svg')]" />,
+                            label: t('tool.testLink'),
+                            onClick: () => handleTestConnection(item),
+                          },
+                          {
+                            key: 'delete',
+                            className: 'rb:text-[#FF5D34]!',
+                            icon: <div className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/delete_red.svg')]" />,
+                            label: t('common.delete'),
+                            onClick: () => handleDeleteService(item),
+                          },
+                        ]
+                      }}
+                      placement="bottomRight"
+                    >
+                      <div className="rb:cursor-pointer rb:size-6 rb:bg-[url('@/assets/images/common/more.svg')] rb:hover:bg-[url('@/assets/images/common/more_hover.svg')]"></div>
+                    </Dropdown>
+                  </Flex>
+                }
+                isNeedTooltip={false}
+              >
+                <Flex vertical gap={4} className="rb:bg-[#F6F6F6] rb:rounded-lg rb:py-2! rb:px-3! rb:text-[#5B6167] rb:leading-5">
+                  {t(`tool.server_url`)}
+                  <div className="rb:h-10 rb:break-all rb:line-clamp-2 rb:text-[#171719]">
+                    {item.config_data?.server_url}
                   </div>
-                </div>
+                </Flex>
+                <div className="rb:text-[#5B6167] rb:leading-4.5 rb:text-[12px] rb:mt-4">{t('tool.last_health_check')}: {formatDateTime(item.config_data?.last_health_check)}</div>
+                
               </RbCard>
             </List.Item>
           )}
-          className="rb:h-[calc(100vh-178px)] rb:overflow-y-auto rb:overflow-x-hidden"
+          className="rb:h-[calc(100vh-124px)] rb:overflow-y-auto rb:overflow-x-hidden"
         />
       </BodyWrapper>
 
@@ -162,8 +150,8 @@ const Mcp: React.FC<{ getStatusTag: (status: string) => ReactNode }> = ({ getSta
         ref={addServiceModalRef}
         refresh={getData} 
       />
-    </div>
+    </>
   );
-};
+});
 
 export default Mcp;

web/src/views/ToolManagement/components/InnerToolModal.tsx

@@ -94,7 +94,7 @@ const InnerToolModal = forwardRef<InnerToolModalRef, InnerToolModalProps>(({
       confirmLoading={loading}
     >
       {editVo?.config_data?.tool_class && config && <>
-        <RbAlert className="rb:mb-3">
+        <RbAlert className="rb:mb-3!">
           <div>
             <div className="rb:text-[14px] rb:font-medium">{t('tool.configDesc')}</div>
             <div className="rb:mt-2">{t(`tool.${editVo?.config_data?.tool_class}_config_desc`)}</div>

web/src/views/ToolManagement/index.tsx

@@ -6,8 +6,8 @@
  * @LastEditors: yujiangping
  * @LastEditTime: 2026-03-06 15:11:31
  */
-import React, { useState } from 'react';
-import { Tabs } from 'antd';
+import React, { useState, useRef } from 'react';
+import { type SegmentedProps, Flex, Space, Form, Button } from 'antd';
 import { useTranslation } from 'react-i18next';
 
 import Mcp from './Mcp';
@@ -15,20 +15,28 @@ import Inner from './Inner';
 import Custom from './Custom';
 import Market from './Market';
 import Tag from '@/components/Tag'
+import PageTabs from '@/components/PageTabs'
+import SearchInput from '@/components/SearchInput'
+import type { McpRef, CustomRef } from './types'
 
 const tabKeys = ['mcp', 'inner', 'custom', 'market'] // 
 const ToolManagement: React.FC = () => {
   const { t } = useTranslation();
-  const [activeTab, setActiveTab] = useState('mcp');
+  const [activeTab, setActiveTab] = useState<SegmentedProps['value']>('mcp');
+  const mcpRef = useRef<McpRef>(null);
+  const customRef = useRef<CustomRef>(null);
+  const [form] = Form.useForm();
+  const name = Form.useWatch(['name'], form)
 
   const formatTabItems = () => {
-    return tabKeys.map(key => ({
-      key,
-      label: t(`tool.${key}`),
+    return tabKeys.map(value => ({
+      value,
+      label: t(`tool.${value}`),
     }))
   }
-  const handleChangeTab = (key: string) => {
+  const handleChangeTab = (key: SegmentedProps['value']) => {
     setActiveTab(key);
+    form.resetFields()
   }
   // 获取状态标签
   const getStatusTag = (status: string) => {
@@ -45,17 +53,36 @@ const ToolManagement: React.FC = () => {
   };
 
   return (
-    <div className="rb:-mt-4">
-      <Tabs 
-        activeKey={activeTab} 
-        items={formatTabItems()} 
-        onChange={handleChangeTab}
-      />
-      {activeTab === 'mcp' && <Mcp getStatusTag={getStatusTag} />}
-      {activeTab === 'inner' && <Inner getStatusTag={getStatusTag} />}
-      {activeTab === 'custom' && <Custom getStatusTag={getStatusTag} />}
+    <>
+      <Flex justify="space-between" className="rb:mb-4!">
+        <PageTabs
+          value={activeTab}
+          options={formatTabItems()}
+          onChange={handleChangeTab}
+        />
+
+        {activeTab !== 'market' && <Form form={form}>
+          <Space size={12}>
+            <Form.Item name="name" noStyle>
+              <SearchInput
+                placeholder={t(`tool.${activeTab === 'mcp'
+                  ? 'mcpSearchPlaceholder'
+                  : activeTab === 'custom'
+                  ? 'customSearchPlaceholder'
+                  : 'innerSearchPlaceholder'
+                }`)}
+              />
+            </Form.Item>
+            {activeTab === 'mcp' && <Button type="primary" onClick={() => mcpRef.current?.handleEdit()}>{t('tool.addService')}</Button>}
+            {activeTab === 'custom' && <Button type="primary" onClick={() => customRef.current?.handleEdit()}>{t('tool.addCustom')}</Button>}
+          </Space>
+        </Form>}
+      </Flex>
+      {activeTab === 'mcp' && <Mcp ref={mcpRef} keyword={name} getStatusTag={getStatusTag} />}
+      {activeTab === 'inner' && <Inner keyword={name} getStatusTag={getStatusTag} />}
+      {activeTab === 'custom' && <Custom ref={customRef} keyword={name} getStatusTag={getStatusTag} />}
       {activeTab === 'market' && <Market getStatusTag={getStatusTag} />}
-    </div>
+    </>
   );
 };
 

web/src/views/ToolManagement/types.ts

@@ -147,4 +147,11 @@ export interface MarketQuery {
   page?: number;
   pagesize?: number;
   keywords?: string;
+}
+export interface McpRef {
+  handleEdit: (data?: ToolItem) => void;
+  getData: () => void;
+}
+export interface CustomRef {
+  handleEdit: (data?: ToolItem) => void;
 }