feat(MCP): Add MCP resources dropdown in settings navbar (#5394)

* Add MCP resources dropdown in settings navbar

* Refactor MCP settings navbar with inline styles

- Replace styled-components with inline styles
- Update resource URLs and capitalize "Servers" in title
- Add noopener,noreferrer to external links
- Simplify component structure with direct Menu.Item usage
This commit is contained in:
LiuVaayne 2025-04-27 14:32:27 +08:00 committed by GitHub
parent bb02dca7e9
commit f2929d44d8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -1,17 +1,77 @@
import { NavbarRight } from '@renderer/components/app/Navbar'
import { HStack } from '@renderer/components/Layout'
import { isWindows } from '@renderer/config/constant'
import { Button } from 'antd'
import { Search, SquareArrowOutUpRight } from 'lucide-react'
import { Button, Dropdown, Menu, type MenuProps } from 'antd'
import { ChevronDown, Search } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { useNavigate } from 'react-router'
import InstallNpxUv from './InstallNpxUv'
const mcpResources = [
{
name: 'Model Context Protocol Servers',
url: 'https://github.com/modelcontextprotocol/servers',
logo: 'https://avatars.githubusercontent.com/u/182288589'
},
{
name: 'Awesome MCP Servers',
url: 'https://github.com/punkpeye/awesome-mcp-servers',
logo: 'https://github.githubassets.com/assets/github-logo-55c5b9a1fe52.png'
},
{
name: 'mcp.so',
url: 'https://mcp.so/',
logo: 'https://mcp.so/favicon.ico'
},
{
name: 'modelscope.cn',
url: 'https://www.modelscope.cn/mcp',
logo: 'https://g.alicdn.com/sail-web/maas/2.7.35/favicon/128.ico'
},
{
name: 'mcp.higress.ai',
url: 'https://mcp.higress.ai/',
logo: 'https://framerusercontent.com/images/FD5yBobiBj4Evn0qf11X7iQ9csk.png'
},
{
name: 'smithery.ai',
url: 'https://smithery.ai/',
logo: 'https://smithery.ai/logo.svg'
},
{
name: 'glama.ai',
url: 'https://glama.ai/mcp/servers',
logo: 'https://glama.ai/favicon.ico'
},
{
name: 'pulsemcp.com',
url: 'https://www.pulsemcp.com',
logo: 'https://www.pulsemcp.com/favicon.svg'
},
{
name: 'mcp.composio.dev',
url: 'https://mcp.composio.dev/',
logo: 'https://composio.dev/wp-content/uploads/2025/02/Fevicon-composio.png'
}
]
export const McpSettingsNavbar = () => {
const { t } = useTranslation()
const navigate = useNavigate()
const onClick = () => window.open('https://mcp.so/', '_blank')
const resourceMenuItems: MenuProps['items'] = mcpResources.map(({ name, url, logo }) => ({
key: name,
label: (
<Menu.Item
key={name}
onClick={() => window.open(url, '_blank', 'noopener,noreferrer')}
style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
<img src={logo} alt={name} style={{ width: 16, height: 16, borderRadius: 3, marginRight: 8 }} />
{name}
</Menu.Item>
)
}))
return (
<NavbarRight style={{ paddingRight: isWindows ? 150 : 12 }}>
@ -25,15 +85,19 @@ export const McpSettingsNavbar = () => {
style={{ fontSize: 13, height: 28, borderRadius: 20 }}>
{t('settings.mcp.searchNpx')}
</Button>
<Button
size="small"
type="text"
onClick={onClick}
icon={<SquareArrowOutUpRight size={14} />}
className="nodrag"
style={{ fontSize: 13, height: 28, borderRadius: 20 }}>
{t('settings.mcp.findMore')}
</Button>
<Dropdown
menu={{ items: resourceMenuItems }}
trigger={['click']}
overlayStyle={{ maxHeight: '400px', overflow: 'auto' }}>
<Button
size="small"
type="text"
className="nodrag"
style={{ fontSize: 13, height: 28, borderRadius: 20, display: 'flex', alignItems: 'center' }}>
{t('settings.mcp.findMore')}
<ChevronDown size={14} style={{ marginLeft: 5 }} />
</Button>
</Dropdown>
<InstallNpxUv mini />
</HStack>
</NavbarRight>