mirror of
https://github.com/CherryHQ/cherry-studio.git
synced 2026-01-08 06:19:05 +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 { NavbarRight } from '@renderer/components/app/Navbar'
|
||||||
import { HStack } from '@renderer/components/Layout'
|
import { HStack } from '@renderer/components/Layout'
|
||||||
import { isWindows } from '@renderer/config/constant'
|
import { isWindows } from '@renderer/config/constant'
|
||||||
import { Button } from 'antd'
|
import { Button, Dropdown, Menu, type MenuProps } from 'antd'
|
||||||
import { Search, SquareArrowOutUpRight } from 'lucide-react'
|
import { ChevronDown, Search } from 'lucide-react'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
import { useNavigate } from 'react-router'
|
import { useNavigate } from 'react-router'
|
||||||
|
|
||||||
import InstallNpxUv from './InstallNpxUv'
|
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 = () => {
|
export const McpSettingsNavbar = () => {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
const navigate = useNavigate()
|
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 (
|
return (
|
||||||
<NavbarRight style={{ paddingRight: isWindows ? 150 : 12 }}>
|
<NavbarRight style={{ paddingRight: isWindows ? 150 : 12 }}>
|
||||||
@ -25,15 +85,19 @@ export const McpSettingsNavbar = () => {
|
|||||||
style={{ fontSize: 13, height: 28, borderRadius: 20 }}>
|
style={{ fontSize: 13, height: 28, borderRadius: 20 }}>
|
||||||
{t('settings.mcp.searchNpx')}
|
{t('settings.mcp.searchNpx')}
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Dropdown
|
||||||
size="small"
|
menu={{ items: resourceMenuItems }}
|
||||||
type="text"
|
trigger={['click']}
|
||||||
onClick={onClick}
|
overlayStyle={{ maxHeight: '400px', overflow: 'auto' }}>
|
||||||
icon={<SquareArrowOutUpRight size={14} />}
|
<Button
|
||||||
className="nodrag"
|
size="small"
|
||||||
style={{ fontSize: 13, height: 28, borderRadius: 20 }}>
|
type="text"
|
||||||
{t('settings.mcp.findMore')}
|
className="nodrag"
|
||||||
</Button>
|
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 />
|
<InstallNpxUv mini />
|
||||||
</HStack>
|
</HStack>
|
||||||
</NavbarRight>
|
</NavbarRight>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user