adai/MemoryBear
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
zhaoying
2026-03-23 11:37:04 +08:00
parent 0775fad5f0
commit 4dbb2bf2e2
47 changed files with 1094 additions and 1123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
web/src/views/ToolManagement/Custom.tsx
View File

@@ -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;

151
web/src/views/ToolManagement/Inner.tsx
View File

@@ -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>
)}

381
web/src/views/ToolManagement/Market.tsx
View File

@@ -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>
);
};

142
web/src/views/ToolManagement/Mcp.tsx
View File

@@ -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;

2
web/src/views/ToolManagement/components/InnerToolModal.tsx
View File

@@ -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>

61
web/src/views/ToolManagement/index.tsx
View File

@@ -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>
</>
);
};

7
web/src/views/ToolManagement/types.ts
View File

@@ -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;
}