MCP Server Picker 插件选择器

MCP Server Picker 组件是一个用于展示和管理插件的组件，支持已安装插件和插件市场两个标签页，可以进行插件的添加、删除和启用/禁用操作。

基础用法

插件添加状态

市场插件支持三种添加状态，提供更好的用户体验：

idle: 未添加状态，显示"添加"按钮，用户可以点击添加
loading: 添加中状态，显示"添加中"按钮，按钮不可点击，适用于网络请求等异步操作
added: 已添加状态，显示"已添加"按钮，按钮不可点击

通过 addState 属性控制插件的添加状态，开发者可以在添加插件的异步过程中动态更新状态，提升用户体验。

状态控制示例

typescript

const handlePluginAdd = (plugin: PluginInfo) => {
  const targetPlugin = marketPlugins.value.find((p) => p.id === plugin.id)!
  
  // 设置为加载状态
  targetPlugin.addState = 'loading'
  
  // 异步添加插件
  addPluginToServer(plugin)
    .then(() => {
      // 添加成功
      targetPlugin.addState = 'added'
      // 添加到已安装列表
      installedPlugins.value.push(newPlugin)
    })
    .catch(() => {
      // 添加失败，重置为idle状态，用户可以重新尝试
      targetPlugin.addState = 'idle'
    })
}

弹出方式

MCP Server Picker 组件支持两种弹出方式，即 Fixed 模式和 Drawer 模式，通过 popupConfig 配置对象统一管理

API

Props

数据源配置

属性	类型	默认值	说明
`installedPlugins`	`PluginInfo[]`	`[]`	已安装插件列表
`marketPlugins`	`PluginInfo[]`	`[]`	市场插件列表

搜索与筛选

属性	类型	默认值	说明
`enableSearch`	`boolean`	`true`	是否启用搜索功能
`searchPlaceholder`	`string`	`'搜索插件'`	搜索框占位符
`enableMarketCategoryFilter`	`boolean`	`true`	是否启用市场分类筛选功能
`marketCategoryOptions`	`MarketCategoryOption[]`	`[]`	市场分类选项列表
`marketCategoryPlaceholder`	`string`	`'按照分类筛选'`	分类筛选下拉框占位符

面板控制

属性	类型	默认值	说明
`visible`	`boolean`	`false`	是否显示整个组件面板（支持 v-model:visible）
`activeCount`	`number`	-	激活插件数量（支持 v-model:activeCount）
`defaultActiveTab`	`'installed' \| 'market'`	`'installed'`	默认激活的标签页
`showInstalledTab`	`boolean`	`true`	是否显示已安装标签页
`showMarketTab`	`boolean`	`true`	是否显示市场标签页
`installedTabTitle`	`string`	`'已安装插件'`	已安装标签页标题
`marketTabTitle`	`string`	`'市场'`	市场标签页标题
`popupConfig`	`PopupConfig`	`{ type: 'fixed', position: {}, drawer: { direction: 'right' } }`	弹出配置对象

头部配置

属性	类型	默认值	说明
`title`	`string`	`'插件'`	组件标题
`showCustomAddButton`	`boolean`	`true`	是否显示自定义添加按钮
`customAddButtonText`	`string`	`'自定义添加'`	自定义添加按钮文本

行为控制

属性	类型	默认值	说明
`allowPluginToggle`	`boolean`	`true`	是否允许切换插件状态
`allowToolToggle`	`boolean`	`true`	是否允许切换工具状态
`allowPluginDelete`	`boolean`	`true`	是否允许删除插件
`allowPluginAdd`	`boolean`	`true`	是否允许添加插件

状态控制

属性	类型	默认值	说明
`loading`	`boolean`	`false`	已安装插件加载状态
`marketLoading`	`boolean`	`false`	市场插件加载状态

Events

搜索与筛选

事件名	参数	默认	说明
`market-category-change`	`(category: string)`	无	市场分类筛选变化
`installedSearchFn`	`(query: string, item: PluginInfo) => boolean`	`默认按 name 包含匹配`	已添加插件搜索函数
`marketSearchFn`	`(query: string, item: PluginInfo) => boolean`	`默认按 name 包含匹配`	市场插件搜索函数

面板控制

事件名	参数	说明
`update:visible`	`(visible: boolean)`	面板显示状态变化
`update:activeCount`	`(count: number)`	激活插件数量变化
`tab-change`	`(activeTab: 'installed' \| 'market')`	标签页切换

插件操作

事件名	参数	说明
`plugin-toggle`	`(plugin: PluginInfo, enabled: boolean)`	插件启用/禁用
`plugin-delete`	`(plugin: PluginInfo)`	删除插件
`plugin-add`	`(plugin: PluginInfo)`	市场插件添加
`plugin-create`	`(type: 'form' \| 'code', data: PluginCreationData)`	插件创建

工具操作

事件名	参数	说明
`tool-toggle`	`(plugin: PluginInfo, toolId: string, enabled: boolean)`	工具启用/禁用

其他

事件名	参数	说明
`refresh`	`(tab: 'installed' \| 'market')`	刷新请求

Types

PluginInfo

插件信息类型：

typescript

type PluginAddState = 'idle' | 'loading' | 'added'

interface PluginInfo {
  id: string              // 插件唯一标识
  name: string            // 插件名称
  icon: string            // 插件图标URL
  description: string     // 插件描述
  enabled: boolean       // 是否启用
  expanded?: boolean      // 是否展开
  tools: PluginTool[]    // 工具列表
  addState?: PluginAddState // 市场插件添加状态(可选): 'idle' - 未添加, 'loading' - 添加中, 'added' - 已添加
  category?: string       // 插件分类(可选，用于市场分类筛选)
}

PluginTool

插件工具类型：

typescript

interface PluginTool {
  id: string              // 工具唯一标识
  name: string            // 工具名称
  description: string     // 工具描述
  enabled: boolean        // 是否启用
}

MarketCategoryOption

市场分类选项类型：

typescript

interface MarketCategoryOption {
  value: string           // 分类值
  label: string           // 分类显示名称
}

PluginFormData

表单方式添加插件数据类型：

typescript

interface PluginFormData {
  name: string            // 插件名称
  description: string     // 插件描述
  type: 'sse' | 'streamableHttp'  // 插件类型, sse 或 streamableHttp
  url: string             // 插件 URL
  headers: string         // 请求头（JSON 格式字符串）
  thumbnail?: File | null // 缩略图文件（可选）
}

PluginCreationData

PluginCreationData 类型是 PluginFormData 或 string 的联合类型，用于表示插件创建的数据。

typescript

type PluginCreationData = PluginFormData | string

PopupConfig

弹窗配置类型：

typescript

interface PopupConfig {
  type: 'fixed' | 'drawer'
  // fixed模式配置
  position?: {
    top?: string | number
    left?: string | number
    right?: string | number
    bottom?: string | number
  }
  // drawer模式配置
  drawer?: {
    direction: 'left' | 'right'
  }
}

McpAddForm 插件添加表单

McpAddForm 是一个用于添加插件的表单组件，支持表单添加和代码添加两种方式。

代码示例

基础用法

API

Props

Prop Name	Description	Type	Required	Default
`addType`	当前添加方式	`AddType`	❌	`form`
`formData`	表单数据	`McpAddFormData`	❌	—
`codeData`	代码数据	`string`	❌	—

Emits

Event Name	Description	Parameters
`update:addType`	添加方式变化时触发	`(value: AddType)`
`confirm`	确认添加时触发	`(type: AddType, data: McpAddFormData \| string)`
`cancel`	取消添加时触发	—

类型定义

AddType

typescript

type AddType = 'form' | 'code'

McpAddFormData

typescript

interface McpAddFormData {
  name: string
  description: string
  type: 'sse' | 'streamableHttp'
  url: string
  headers: string
  thumbnail?: File | null
}

CSS 变量

McpAddForm 组件支持以下 CSS 变量来自定义样式：

全局变量 (`:root`)

变量名	描述
`--tr-mcp-add-form-box-shadow`	容器阴影
`--tr-mcp-add-form-content-padding`	内容区域内边距
`--tr-mcp-add-form-add-type-gap`	添加类型区域间距
`--tr-mcp-add-form-add-type-margin-bottom`	添加类型区域下边距
`--tr-mcp-add-form-add-type-label-font-size`	标签字体大小
`--tr-mcp-add-form-add-type-label-font-weight`	标签字体粗细
`--tr-mcp-add-form-add-type-label-line-height`	标签行高
`--tr-mcp-add-form-add-type-label-color`	标签文字颜色
`--tr-mcp-add-form-footer-padding`	底部区域内边距
`--tr-mcp-add-form-footer-gap`	底部按钮间距
`--tr-mcp-add-form-button-border-radius`	按钮圆角
`--tr-mcp-add-form-button-padding`	按钮内边距
`--tr-mcp-add-form-button-font-size`	按钮字体大小
`--tr-mcp-add-form-button-height`	按钮高度
`--tr-mcp-add-form-button-line-height`	按钮行高
`--tr-mcp-add-form-button-min-width`	按钮最小宽度
`--tr-mcp-add-form-button-transition`	按钮过渡效果
`--tr-mcp-add-form-cancel-bg-color`	取消按钮背景色
`--tr-mcp-add-form-cancel-border-color`	取消按钮边框色
`--tr-mcp-add-form-cancel-text-color`	取消按钮文字颜色
`--tr-mcp-add-form-cancel-hover-border-color`	取消按钮悬停边框色
`--tr-mcp-add-form-confirm-bg-color`	确认按钮背景色
`--tr-mcp-add-form-confirm-border-color`	确认按钮边框色
`--tr-mcp-add-form-confirm-text-color`	确认按钮文字颜色
`--tr-mcp-add-form-confirm-hover-bg-color`	确认按钮悬停背景色
`--tr-mcp-add-form-confirm-hover-border-color`	确认按钮悬停边框色

响应式变量：

变量名	描述
`--tr-mcp-add-form-add-type-gap-mobile`	移动端添加类型区域间距

变量覆盖

默认模式

css

:root {
  --tr-mcp-add-form-max-width: 600px;
}

自定义按钮颜色

css

:root {
  --tr-mcp-add-form-confirm-bg-color: #1890ff;
  --tr-mcp-add-form-confirm-border-color: #1890ff;
  --tr-mcp-add-form-confirm-hover-bg-color: #40a9ff;
}

MCP Server Picker 插件选择器 ​

基础用法 ​

插件添加状态 ​

状态控制示例 ​

弹出方式 ​

API ​

Props ​

数据源配置 ​

搜索与筛选 ​

面板控制 ​

头部配置 ​

行为控制 ​

状态控制 ​

Events ​

搜索与筛选 ​

面板控制 ​

插件操作 ​

工具操作 ​

其他 ​

Types ​

PluginInfo ​

PluginTool ​

MarketCategoryOption ​

PluginFormData ​

PluginCreationData ​

PopupConfig ​

McpAddForm 插件添加表单 ​

代码示例 ​

基础用法 ​

API ​

Props ​

Emits ​

类型定义 ​

AddType ​

McpAddFormData ​

CSS 变量 ​

全局变量 (:root) ​

变量覆盖 ​

MCP Server Picker 插件选择器

基础用法

插件添加状态

状态控制示例

弹出方式

API

Props

数据源配置

搜索与筛选

面板控制

头部配置

行为控制

状态控制

Events

搜索与筛选

面板控制

插件操作

工具操作

其他

Types

PluginInfo

PluginTool

MarketCategoryOption

PluginFormData

PluginCreationData

PopupConfig

McpAddForm 插件添加表单

代码示例

基础用法

API

Props

Emits

类型定义

AddType

McpAddFormData

CSS 变量

全局变量 (`:root`)

变量覆盖