mirror of
https://github.com/CherryHQ/cherry-studio.git
synced 2026-01-01 09:49:03 +08:00
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:
parent
bb02dca7e9
commit
f2929d44d8
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user