feat(web): enable MCP market configuration and service management

- Add market configuration API endpoints for creating, updating, and retrieving market configs
- Add market MCP listing and detail endpoints with support for activated services
- Implement MarketConfigModal component for configuring market connections with URL and API key
- Implement McpServiceModal component for viewing and managing MCP services from markets
- Add infinite scroll pagination for market sources and MCP services
- Add market connection status indicators (connected/disconnected/connecting states)
- Add i18n translations for market configuration UI (en and zh)
- Update Market component to display market sources with connection management
- Add MarketQuery type for market-specific API queries
- Refactor market data structure to match backend API response format

web/src/views/ToolManagement/Market.tsx

@@ -1,122 +1,259 @@
-import React, { useState, useRef, type ReactNode } from 'react';
-import { Input, Button, Spin, App } from 'antd';
+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 { useTranslation } from 'react-i18next';
+import InfiniteScroll from 'react-infinite-scroll-component';
 import MarketConfigModal, { type MarketConfigModalRef } from './components/MarketConfigModal';
-
+import McpServiceModal from './components/McpServiceModal';
+import type { McpServiceModalRef } from './types';
+import { getMarketTools, getMarketConfig, getMarketMCPs, getMarketMCPDetail, getMarketMCPsActivated } from '@/api/tools';
 interface MarketSource {
   id: string;
   name: string;
   category: string;
-  icon: string;
+  logo_url: string;
   url: string;
-  desc: string;
-  apiKey: string;
+  description: string;
+  api_key?: string;
   connected: boolean;
-  mcpCount: number;
+  mcp_count: number;
+  created_at?: number;
+  created_by?: string;
 }
 
 interface MarketMcp {
   id: string;
   name: string;
-  provider: string;
-  type: string;
-  desc: string;
-  downloads?: string;
-  stars?: string;
-  icon: string;
-  configTemplate: any;
+  chinese_name?: string;
+  description: string;
+  logo_url: string;
+  publisher: string;
+  categories?: string[];
+  tags?: string[];
+  view_count?: number;
+  activated?: boolean;
+  locales?: {
+    [lang: string]: {
+      name: string;
+      description: string;
+    };
+  };
 }
 
 interface MarketCategory {
   id: string;
   name: string;
-  icon: string;
+}
+
+interface MarketApiResponse {
+  items: MarketSource[];
 }
 
 const Market: React.FC<{ getStatusTag?: (status: string) => ReactNode }> = () => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const { message } = App.useApp();
+
+  const getLocaleField = (mcp: MarketMcp, field: 'name' | 'description') => {
+    const lang = i18n.language?.startsWith('zh') ? 'zh' : 'en';
+    return mcp.locales?.[lang]?.[field] || mcp[field] || '';
+  };
   const [loading, setLoading] = useState(false);
   const [selectedSource, setSelectedSource] = useState<string | null>(null);
   const marketConfigModalRef = useRef<MarketConfigModalRef>(null);
-  const [marketSources, setMarketSources] = useState<MarketSource[]>([
-    { id: 'smithery', name: 'Smithery', category: 'official', icon: '🔧', url: 'https://mcp.smithery.ai', desc: '官方 MCP 服务市场，提供丰富的 MCP 服务', apiKey: '', connected: false, mcpCount: 2847 },
-    { id: 'mcpmarket', name: 'MCP Market', category: 'official', icon: '🏪', url: 'https://mcpmarket.com', desc: '综合性 MCP 市场平台', apiKey: '', connected: false, mcpCount: 1523 },
-    { id: 'glama', name: 'Glama.ai MCP', category: 'official', icon: '✨', url: 'https://glama.ai/mcp', desc: 'Glama AI 提供的 MCP 服务集合', apiKey: '', connected: false, mcpCount: 892 },
-    { id: 'github-mcp', name: 'modelcontextprotocol/servers', category: 'official', icon: '🐙', url: 'https://github.com/modelcontextprotocol/servers', desc: 'GitHub 官方 MCP 服务器仓库', apiKey: '', connected: true, mcpCount: 156 },
-    { id: 'aliyun-bailian', name: '阿里云百炼 MCP', category: 'china-cloud', icon: '☁️', url: 'https://bailian.console.aliyun.com/mcp', desc: '阿里云百炼平台 MCP 市场', apiKey: '', connected: false, mcpCount: 423 },
-    { id: 'modelscope', name: '魔搭社区 MCP', category: 'china-cloud', icon: '🎭', url: 'https://modelscope.cn/mcp', desc: '阿里达摩院魔搭社区 MCP 市场', apiKey: '', connected: false, mcpCount: 312 },
-  ]);
-
-  const [categories] = useState<MarketCategory[]>([
-    { id: 'official', name: '官方/综合', icon: '🌐' },
-    { id: 'china-cloud', name: '国内云', icon: '☁️' },
-    { id: 'community', name: '社区/垂直', icon: '👥' }
-  ]);
-
-  const [mcpCache, setMcpCache] = useState<Record<string, MarketMcp[]>>({
-    'github-mcp': [
-      { id: 'gh-1', name: 'Fetch', provider: 'modelcontextprotocol', type: 'Hosted', desc: '使用浏览器模拟大型语言模型检索和处理网页内容', downloads: '203.7m', stars: '308.2k', icon: '🌐', configTemplate: {} },
-      { id: 'gh-2', name: 'Filesystem', provider: 'modelcontextprotocol', type: 'Local', desc: '安全的文件系统操作，支持读写文件和目录管理', downloads: '156.2m', stars: '245.1k', icon: '📁', configTemplate: {} },
-      { id: 'gh-3', name: 'GitHub', provider: 'modelcontextprotocol', type: 'Hosted', desc: 'GitHub API 集成，支持仓库、Issue、PR 等操作', downloads: '89.4m', stars: '178.3k', icon: '🐙', configTemplate: {} },
-    ]
-  });
-
+  const mcpServiceModalRef = useRef<McpServiceModalRef>(null);
+  const [marketSources, setMarketSources] = useState<MarketSource[]>([]);
+  const [categories, setCategories] = useState<MarketCategory[]>([]);
+  const [mcpCache, setMcpCache] = useState<Record<string, MarketMcp[]>>({});
+  const [mcpTotal, setMcpTotal] = useState(0);
   const [searchKeyword, setSearchKeyword] = useState('');
+  const [configIdMap, setConfigIdMap] = useState<Record<string, string>>({});
+  const [hasMore, setHasMore] = useState(false);
+  const [activatedMcps, setActivatedMcps] = useState<string[]>([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const pageSize = 20;
 
-  const handleSelectSource = (sourceId: string) => {
-    setSelectedSource(sourceId);
-  };
-
-  const handleRefresh = (sourceId: string) => {
-    setLoading(true);
-    setTimeout(() => {
-      // 模拟刷新数据
-      const source = marketSources.find(s => s.id === sourceId);
-      if (source) {
-        message.success(`${source.name} 列表已刷新`);
+  // 获取市场数据
+  useEffect(() => {
+    const fetchMarketData = async () => {
+      setLoading(true);
+      try {
+        const response = await getMarketTools({}) as MarketApiResponse;
+        if (response?.items && Array.isArray(response.items)) {
+          setMarketSources(response.items);
+          
+          // 根据 category 字段分组
+          const categoryMap = new Map<string, MarketCategory>();
+          response.items.forEach(item => {
+            if (item.category && !categoryMap.has(item.category)) {
+              categoryMap.set(item.category, {
+                id: item.category,
+                name: item.category
+              });
+            }
+          });
+          
+          setCategories(Array.from(categoryMap.values()));
+        }
+      } catch (error) {
+        console.error('获取市场数据失败:', error);
+        message.error('获取市场数据失败');
+      } finally {
+        setLoading(false);
       }
+    };
+
+    fetchMarketData();
+  }, [message]);
+
+  const fetchMcpList = async (sourceId: string, page = 1, append = false) => {
+    setLoading(true);
+    try {
+      let configId = configIdMap[sourceId];
+
+      // 如果没有缓存 configId，先获取配置
+      if (!configId) {
+        const config: any = await getMarketConfig(sourceId);
+        if (config?.id) {
+          configId = config.id;
+          setConfigIdMap(prev => ({ ...prev, [sourceId]: configId }));
+        } else {
+          return;
+        }
+      }
+
+      // 第一次加载时获取已激活列表
+      let activatedIds: string[] = activatedMcps;
+      if (page === 1 && !append) {
+        const activatedRes: any = await getMarketMCPsActivated({ mcp_market_config_id: configId });
+        if (activatedRes && Array.isArray(activatedRes)) {
+          activatedIds = activatedRes.map((item: any) => item.id);
+          setActivatedMcps(activatedIds);
+        }
+      }
+
+      const res: any = await getMarketMCPs({ mcp_market_config_id: configId, page, pagesize: pageSize });
+      if (res?.items && Array.isArray(res.items)) {
+        // 标记已激活的 MCP
+        const mcpsWithActivated = res.items.map((item: MarketMcp) => ({
+          ...item,
+          activated: activatedIds.includes(item.id)
+        }));
+        
+        setMcpCache(prev => ({
+          ...prev,
+          [sourceId]: append ? [...(prev[sourceId] || []), ...mcpsWithActivated] : mcpsWithActivated
+        }));
+      }
+      if (res?.page) {
+        setMcpTotal(res.page.total || 0);
+        setHasMore(!!res.page.has_next);
+        setCurrentPage(res.page.page || page);
+      }
+    } catch (error) {
+      console.error('获取 MCP 列表失败:', error);
+    } finally {
       setLoading(false);
-    }, 600);
+    }
   };
 
-  const handleOpenConfig = (sourceId: string) => {
+  const loadMore = useCallback(() => {
+    if (!selectedSource || loading) return;
+    fetchMcpList(selectedSource, currentPage + 1, true);
+  }, [selectedSource, currentPage, loading]);
+
+  const handleSelectSource = async (sourceId: string) => {
+    setSelectedSource(sourceId);
+    setSearchKeyword('');
+    setCurrentPage(1);
+    setHasMore(false);
+    setMcpTotal(0);
+
+    // 如果缓存中已有数据，直接使用
+    if (mcpCache[sourceId]) return;
+
+    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} 列表已刷新`);
+    }
+  };
+
+  const handleOpenConfig = async (sourceId: string) => {
+    const source = marketSources.find(s => s.id === sourceId);
+    if (!source) return;
+    try {
+      const config: any = await getMarketConfig(sourceId);
+      marketConfigModalRef.current?.handleOpen({
+        ...source,
+        connected: config?.status === 1,
+        token: config?.token || '',
+        configId: config?.id || '',
+      });
+    } catch {
       marketConfigModalRef.current?.handleOpen(source);
     }
   };
 
-  const handleConnect = (sourceId: string, apiKey: string) => {
-    // 更新市场源状态
+  const handleOpenMcpServiceModal = async (mcp: MarketMcp) => {
+    if (!selectedSource || !configIdMap[selectedSource]) return;
+    try {
+      const detail: any = await getMarketMCPDetail({
+        mcp_market_config_id: configIdMap[selectedSource],
+        server_id: mcp.id,
+      });
+      const toolItem = {
+        name: detail.name,
+        description: detail.description,
+        config_data: {
+          server_url: detail.servers?.[0]?.url || '',
+          connection_config: {
+            auth_type: 'none',
+            timeout: 30,
+            headers: {},
+          },
+        },
+      };
+      mcpServiceModalRef.current?.handleOpen(toolItem as any);
+    } catch (error) {
+      console.error('获取 MCP 服务详情失败:', error);
+    }
+  };
+
+  const handleConnect = async (sourceId: string, configId: string) => {
+    // 更新市场源状态，缓存 configId
     setMarketSources(prev => prev.map(source => {
       if (source.id === sourceId) {
-        return {
-          ...source,
-          apiKey,
-          connected: true
-        };
+        return { ...source, connected: true };
       }
       return source;
     }));
+    setConfigIdMap(prev => ({ ...prev, [sourceId]: configId }));
 
-    // 模拟获取MCP列表
-    setTimeout(() => {
-      const source = marketSources.find(s => s.id === sourceId);
-      if (source && !mcpCache[sourceId]) {
-        // 生成模拟数据
-        const mockData: MarketMcp[] = [
-          { id: `${sourceId}-1`, name: `${source.name} 服务 1`, provider: source.name, type: 'Hosted', desc: `来自 ${source.name} 的 MCP 服务`, downloads: '10.2m', stars: '23.4k', icon: '🔧', configTemplate: {} },
-          { id: `${sourceId}-2`, name: `${source.name} 服务 2`, provider: source.name, type: 'Local', desc: `来自 ${source.name} 的本地 MCP 服务`, downloads: '8.5m', stars: '18.7k', icon: '⚙️', configTemplate: {} }
-        ];
-        setMcpCache(prev => ({
-          ...prev,
-          [sourceId]: mockData
-        }));
+    // 用 configId 获取第一页 MCP 列表
+    try {
+      const res: any = await getMarketMCPs({ mcp_market_config_id: configId, page: 1, pagesize: pageSize });
+      if (res?.items && Array.isArray(res.items)) {
+        setMcpCache(prev => ({ ...prev, [sourceId]: res.items }));
       }
-      message.success(`已连接 ${source?.name}`);
-    }, 800);
+      if (res?.page) {
+        setMcpTotal(res.page.total || 0);
+        setHasMore(!!res.page.has_next);
+        setCurrentPage(1);
+      }
+    } catch (error) {
+      console.error('获取 MCP 列表失败:', error);
+    }
   };
 
   const renderSourceDetail = () => {
@@ -134,38 +271,45 @@ const Market: React.FC<{ getStatusTag?: (status: string) => ReactNode }> = () =>
     if (!source) return null;
 
     const mcpList = mcpCache[selectedSource] || [];
-    const filteredList = mcpList.filter(mcp => 
-      mcp.name.toLowerCase().includes(searchKeyword.toLowerCase()) ||
-      mcp.desc.toLowerCase().includes(searchKeyword.toLowerCase())
-    );
+    const filteredList = mcpList.filter(mcp => {
+      const name = getLocaleField(mcp, 'name');
+      const desc = getLocaleField(mcp, 'description');
+      return name.toLowerCase().includes(searchKeyword.toLowerCase()) ||
+        desc.toLowerCase().includes(searchKeyword.toLowerCase());
+    });
 
     return (
       <>
-        <div className="rb:flex rb:justify-between rb:items-start rb:pb-6 rb:border-b rb:border-gray-200 rb:mb-6">
-          <div className="rb:flex rb:gap-4">
-            <div className="rb:text-5xl rb:w-16 rb:h-16 rb:flex rb:items-center rb:justify-center rb:bg-gray-50 rb:rounded-xl rb:flex-shrink-0">
-              {source.icon}
+        <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">
+              {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 = '48px';
+                    }
+                  }}
+                />
+              ) : (
+                <span className="rb:text-5xl">🏪</span>
+              )}
             </div>
-            <div className="rb:flex-1">
-              <h2 className="rb:text-xl rb:font-semibold rb:text-gray-900 rb:mb-2">{source.name}</h2>
-              <p className="rb:text-sm rb:text-gray-600 rb:leading-relaxed">{source.desc}</p>
+            <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>
-          <div className="rb:flex rb:gap-3">
-            <Button icon={<SettingOutlined />} onClick={() => handleOpenConfig(selectedSource)}>
-              配置
-            </Button>
-            <Button type="primary" icon={<GlobalOutlined />} onClick={() => window.open(source.url, '_blank')}>
-              前往市场
-            </Button>
-          </div>
-        </div>
 
-        <div className="rb:mt-6">
-          <div className="rb:flex rb:justify-between rb:items-center rb:mb-5">
-            <h3 className="rb:text-base rb:font-semibold rb:text-gray-900 rb:m-0">
-              可用 MCP 服务 <span className="rb:text-gray-600 rb:font-normal">({mcpList.length})</span>
-            </h3>
+          <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)}>
@@ -182,56 +326,83 @@ const Market: React.FC<{ getStatusTag?: (status: string) => ReactNode }> = () =>
                 />
               )}
             </div>
+            <Button icon={<SettingOutlined />} onClick={() => handleOpenConfig(selectedSource)}>
+              配置
+            </Button>
+            <Button type="primary" icon={<GlobalOutlined />} onClick={() => window.open(source.url, '_blank')}>
+              前往市场
+            </Button>
           </div>
+        </div>
 
+        <div className="rb:mt-6">
           {mcpList.length > 0 ? (
-            <Spin spinning={loading}>
-              <div className="rb:grid rb:grid-cols-1 md:rb:grid-cols-2 lg:rb:grid-cols-3 rb:gap-4">
-                {filteredList.map(mcp => (
+            <div id="mcpScrollableDiv" className="rb:overflow-y-auto rb:h-[calc(100vh-260px)]">
+              <InfiniteScroll
+                dataLength={filteredList.length}
+                next={loadMore}
+                hasMore={hasMore}
+                loader={<Skeleton active paragraph={{ rows: 2 }} className="rb:mt-4" />}
+                scrollableTarget="mcpScrollableDiv"
+              >
+                <div className="rb:grid rb:grid-cols-3 rb:gap-4">
+                  {filteredList.map(mcp => (
                   <div 
                     key={mcp.id} 
-                    className="rb:bg-white rb:border rb:border-gray-200 rb:rounded-lg rb:p-4 rb:transition-all rb:duration-200 hover:rb:shadow-lg hover:rb:border-gray-300"
+                    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:flex rb:justify-between rb:items-center rb:mb-3">
-                      <div className="rb:text-3xl rb:w-12 rb:h-12 rb:flex rb:items-center rb:justify-center rb:bg-gray-50 rb:rounded-lg">
-                        {mcp.icon}
+                      <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>
-                      <span className={`rb:px-2 rb:py-1 rb:rounded rb:text-xs rb:font-medium ${
-                        mcp.type === 'Hosted' 
-                          ? 'rb:bg-blue-50 rb:text-blue-700' 
-                          : 'rb:bg-gray-100 rb:text-gray-600'
-                      }`}>
-                        {mcp.type}
-                      </span>
+                      {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">{mcp.name}</h3>
-                    {mcp.provider && (
+                    <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.provider}</span>
+                        <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:leading-relaxed rb:mb-3 rb:min-h-[42px]">{mcp.desc}</p>
+                    <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.downloads && (
+                      {mcp.view_count != null && (
                         <span className="rb:flex rb:items-center rb:gap-1 rb:text-xs rb:text-gray-500">
-                          <GlobalOutlined /> {mcp.downloads}
-                        </span>
-                      )}
-                      {mcp.stars && (
-                        <span className="rb:flex rb:items-center rb:gap-1 rb:text-xs rb:text-gray-500">
-                          ⭐ {mcp.stars}
+                          <GlobalOutlined /> {mcp.view_count.toLocaleString()}
                         </span>
                       )}
                     </div>
-                    <div className="rb:flex rb:justify-end">
-                      <Button type="primary" size="small">
+                    <div className={`rb:flex rb:items-center ${mcp.activated ? 'rb:justify-between' : 'rb:justify-end'}`}>
+                      {mcp.activated && <Tag color="success">已激活</Tag>}
+                      <Button type="primary" size="small" onClick={() => handleOpenMcpServiceModal(mcp)}>
                         + 添加
                       </Button>
                     </div>
                   </div>
                 ))}
-              </div>
-            </Spin>
+                </div>
+              </InfiniteScroll>
+            </div>
           ) : (
             <div className="rb:flex rb:flex-col rb:items-center rb:justify-center rb:py-16 rb:text-center">
               <div className="rb:text-6xl rb:mb-4">{source.connected ? '📭' : '🔌'}</div>
@@ -254,50 +425,76 @@ const Market: React.FC<{ getStatusTag?: (status: string) => ReactNode }> = () =>
   };
 
   return (
-    <div className="rb:flex rb:gap-4 rb:h-[calc(100vh-178px)]">
+    <div className="rb:flex rb:gap-4 rb:h-[calc(100vh-138px)]">
       {/* 左侧市场源列表 */}
-      <div className="rb:w-70 rb:bg-white rb:rounded-lg rb:border rb:border-gray-200 rb:overflow-y-auto rb:flex-shrink-0">
-        <div className="rb:p-4 rb:border-b rb:border-gray-200">
-          <span className="rb:text-base rb:font-semibold rb:text-gray-900">MCP 市场</span>
-        </div>
-        {categories.map(cat => (
-          <div key={cat.id} className="rb:py-3 rb:border-b rb:border-gray-100 last:rb:border-b-0">
-            <div className="rb:flex rb:items-center rb:gap-2 rb:px-4 rb:py-2 rb:text-xs rb:font-medium rb:text-gray-500 rb:uppercase">
-              <span className="rb:text-sm">{cat.icon}</span>
-              <span>{cat.name}</span>
-            </div>
-            <div className="rb:px-2 rb:py-1">
-              {marketSources
-                .filter(s => s.category === cat.id)
-                .map(source => (
-                  <div
-                    key={source.id}
-                    className={`rb:flex rb:items-center rb:gap-2 rb:px-3 rb:py-2.5 rb:rounded-md rb:cursor-pointer rb:transition-all rb:relative ${
-                      selectedSource === source.id 
-                        ? 'rb:bg-blue-50 rb:text-blue-600' 
-                        : 'hover:rb:bg-gray-50'
-                    }`}
-                    onClick={() => handleSelectSource(source.id)}
-                  >
-                    <span className="rb:text-lg rb:flex-shrink-0">{source.icon}</span>
-                    <span className="rb:flex-1 rb:text-sm rb:font-medium 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">
-                      {source.mcpCount}
-                    </span>
-                    {source.connected && (
-                      <span className="rb:text-green-500 rb:text-[8px] rb:ml-1">●</span>
-                    )}
-                  </div>
-                ))}
-            </div>
-          </div>
-        ))}
+      <div className="rb:w-80 rb:h-full rb:overflow-y-auto">
+        <Space size={12} direction="vertical" className="rb:w-full">
+          {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>
+                      )}
+                    </div>
+                  ))}
+              </Space>
+            </Card>
+          ))}
+        </Space>
       </div>
 
       {/* 右侧内容区 */}
-      <div className="rb:flex-1 rb:bg-white rb:rounded-lg rb:border rb:border-gray-200 rb:overflow-hidden">
+      <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>
@@ -308,6 +505,10 @@ const Market: React.FC<{ getStatusTag?: (status: string) => ReactNode }> = () =>
         ref={marketConfigModalRef}
         onConnect={handleConnect}
       />
+      <McpServiceModal
+        ref={mcpServiceModalRef}
+        refresh={() => {}}
+      />
     </div>
   );
 };