feat: added new plugin adding status and optimized added styles (#208)

Author: SonyLeo

docs/demos/mcp-server-picker/basic-usage.vue

@@ -112,15 +112,15 @@ const installedPlugins = ref<PluginInfo[]>([
   },
 ])
 
-// 市场插件数据
+// 市场插件数据 - 演示三种不同的添加状态
 const marketPlugins = ref<PluginInfo[]>([
   {
     id: 'plugin-1',
     name: 'Jira 集成',
     icon: 'https://ts3.tc.mm.bing.net/th/id/ODLS.2a97aa8b-50c6-4e00-af97-3b563dfa07f4',
     description: 'Jira 任务管理',
     enabled: true,
-    added: false,
+    addState: 'idle', // 未添加状态，显示"添加"按钮
     tools: [
       { id: 'tool-5', name: '创建任务', description: '创建 Jira 任务', enabled: false },
       { id: 'tool-6', name: '查询任务', description: '查询 Jira 任务', enabled: false },
@@ -132,7 +132,7 @@ const marketPlugins = ref<PluginInfo[]>([
     icon: 'https://www.notion.so/front-static/favicon.ico',
     description: 'Notion 文档管理和协作',
     enabled: false,
-    added: false,
+    addState: 'loading', // 添加中状态，显示"添加中"按钮
     tools: [
       { id: 'tool-7', name: '创建页面', description: '创建 Notion 页面', enabled: false },
       { id: 'tool-8', name: '查询数据库', description: '查询 Notion 数据库', enabled: false },
@@ -144,7 +144,7 @@ const marketPlugins = ref<PluginInfo[]>([
     icon: 'https://telegram.org/favicon.ico',
     description: 'Telegram 消息推送和自动化',
     enabled: false,
-    added: false,
+    addState: 'added', // 已添加状态，显示"已添加"按钮
     tools: [{ id: 'tool-9', name: '发送消息', description: '发送 Telegram 消息', enabled: false }],
     category: 'ai',
   },
@@ -170,33 +170,37 @@ const handlePluginToggle = (plugin: PluginInfo, enabled: boolean) => {
   plugin.enabled = enabled
 }
 
-const handlePluginAdd = (plugin: PluginInfo, added: boolean) => {
+const handlePluginAdd = (plugin: PluginInfo) => {
   const targetPlugin = marketPlugins.value.find((p) => p.id === plugin.id)!
-  targetPlugin.added = added
 
-  if (added) {
-    // 如果是添加操作，创建新的插件副本并添加到已安装列表
+  // 设置为加载状态
+  targetPlugin.addState = 'loading'
+
+  // 模拟异步添加过程
+  setTimeout(() => {
+    // 添加成功后设置为已添加状态
+    targetPlugin.addState = 'added'
+
     const newPlugin: PluginInfo = {
       ...plugin,
       id: `${plugin.id}-installed-${Date.now()}`, // 生成新的ID避免冲突
       enabled: false, // 新添加的插件默认不启用
-      added: true,
+      addState: 'added',
     }
     installedPlugins.value.push(newPlugin)
-  } else {
-    // 如果是取消添加操作，从已安装列表中移除
-    const index = installedPlugins.value.findIndex((p) => p.name === plugin.name)
-    if (index > -1) {
-      installedPlugins.value.splice(index, 1)
-    }
-  }
+  }, 2000) // 模拟2秒的网络延迟
 }
 
 const handlePluginDelete = (plugin: PluginInfo) => {
   const index = installedPlugins.value.findIndex((p) => p.id === plugin.id)
   if (index > -1) {
     installedPlugins.value.splice(index, 1)
   }
+
+  const marketPlugin = marketPlugins.value.find((p) => p.name === plugin.name)
+  if (marketPlugin) {
+    marketPlugin.addState = 'idle'
+  }
 }
 
 const handleToolToggle = (plugin: PluginInfo, toolId: string, enabled: boolean) => {

docs/src/components/mcp-server-picker.md

@@ -10,6 +10,40 @@ MCP Server Picker 组件是一个用于展示和管理插件的组件，支持
 
 <demo vue="../../demos/mcp-server-picker/basic-usage.vue" />
 
+### 插件添加状态
+
+市场插件支持三种添加状态，提供更好的用户体验：
+
+- **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` 配置对象统一管理
@@ -91,7 +125,7 @@ MCP Server Picker 组件是一个用于展示和管理插件的组件，支持
 |--------|------|------|
 | `plugin-toggle` | `(plugin: PluginInfo, enabled: boolean)` | 插件启用/禁用 |
 | `plugin-delete` | `(plugin: PluginInfo)` | 删除插件 |
-| `plugin-add` | `(plugin: PluginInfo, added: boolean)` | 市场插件添加/取消添加 |
+| `plugin-add` | `(plugin: PluginInfo)` | 市场插件添加 |
 | `plugin-create` | `(type: 'form' \| 'code', data: PluginCreationData)` | 插件创建 |
 
 #### 工具操作
@@ -111,6 +145,8 @@ MCP Server Picker 组件是一个用于展示和管理插件的组件，支持
 插件信息类型：
 
 ```typescript
+type PluginAddState = 'idle' | 'loading' | 'added'
+
 interface PluginInfo {
   id: string              // 插件唯一标识
   name: string            // 插件名称
@@ -119,7 +155,7 @@ interface PluginInfo {
   enabled: boolean       // 是否启用
   expanded?: boolean      // 是否展开
   tools: PluginTool[]    // 工具列表
-  added?: boolean         // 市场插件添加状态(可选)
+  addState?: PluginAddState // 市场插件添加状态(可选): 'idle' - 未添加, 'loading' - 添加中, 'added' - 已添加
   category?: string       // 插件分类(可选，用于市场分类筛选)
 }
 ```

packages/components/src/mcp-server-picker/components/PluginCard.vue

@@ -2,7 +2,7 @@
 import { TinySwitch, TinyPopconfirm } from '@opentiny/vue'
 import { computed, ref } from 'vue'
 import { IconDelete, IconArrowRight, IconArrowDown } from '@opentiny/tiny-robot-svgs'
-import type { PluginCardEmits, PluginCardProps } from '../index.type'
+import type { PluginCardEmits, PluginCardProps, PluginInfo } from '../index.type'
 
 const props = withDefaults(defineProps<PluginCardProps>(), {
   mode: 'installed',
@@ -69,11 +69,11 @@ const handleDelete = () => {
 }
 
 // 市场插件添加状态
-const isAdded = computed(() => props.plugin.added || false)
+const addState = computed(() => props.plugin.addState || 'idle')
 
-const handleAdd = () => {
-  const newAddedState = !isAdded.value
-  emit('add-plugin', newAddedState)
+const handleAdd = (plugin: PluginInfo) => {
+  if (addState.value !== 'idle') return
+  emit('add-plugin', plugin)
 }
 
 const getHoverTitle = (isEnabled: boolean) => {
@@ -132,10 +132,15 @@ const getHoverTitle = (isEnabled: boolean) => {
               <slot name="add-button">
                 <div
                   class="plugin-card__add-button"
-                  :class="{ 'plugin-card__add-button--added': isAdded }"
-                  @click="handleAdd"
+                  :class="{
+                    'plugin-card__add-button--loading': addState === 'loading',
+                    'plugin-card__add-button--added': addState === 'added',
+                  }"
+                  @click="handleAdd(plugin)"
                 >
-                  <span>{{ isAdded ? '已添加' : '添加' }}</span>
+                  <span v-if="addState === 'idle'">添加</span>
+                  <span v-else-if="addState === 'loading'">添加中</span>
+                  <span v-else>已添加</span>
                 </div>
               </slot>
             </div>
@@ -314,8 +319,21 @@ const getHoverTitle = (isEnabled: boolean) => {
       cursor: pointer;
       box-sizing: border-box;
 
+      &--loading {
+        width: 78px;
+        background: #e6f4ff;
+        border-color: #1476ff;
+        color: #1476ff;
+        cursor: not-allowed;
+      }
+
       &--added {
         width: 78px;
+        color: #c2c2c2;
+        background-color: #f0f0f0;
+        border-color: #dbdbdb;
+        fill: #c2c2c2;
+        cursor: not-allowed;
       }
     }
   }

packages/components/src/mcp-server-picker/index.type.ts

@@ -5,6 +5,8 @@ export interface PluginTool {
   enabled: boolean
 }
 
+export type PluginAddState = 'idle' | 'loading' | 'added'
+
 export interface PluginInfo {
   id: string
   name: string
@@ -13,7 +15,7 @@ export interface PluginInfo {
   enabled: boolean
   expanded?: boolean
   tools: PluginTool[]
-  added?: boolean
+  addState?: PluginAddState
   category?: string
 }
 
@@ -28,7 +30,7 @@ export interface PluginCardProps {
 export interface PluginCardEmits {
   (e: 'toggle-plugin', enabled: boolean): void
   (e: 'toggle-tool', toolId: string, enabled: boolean): void
-  (e: 'add-plugin', added: boolean): void
+  (e: 'add-plugin', plugin: PluginInfo): void
   (e: 'delete-plugin'): void
 }
 
@@ -133,7 +135,7 @@ export interface McpServerPickerEmits {
   // 插件操作事件
   (e: 'plugin-toggle', plugin: PluginInfo, enabled: boolean): void
   (e: 'plugin-delete', plugin: PluginInfo): void
-  (e: 'plugin-add', plugin: PluginInfo, added: boolean): void
+  (e: 'plugin-add', plugin: PluginInfo): void
   (e: 'plugin-create', type: 'form' | 'code', data: PluginCreationData): void
 
   // 工具操作事件

packages/components/src/mcp-server-picker/index.vue

@@ -173,9 +173,9 @@ const handleDeletePlugin = (plugin: PluginInfo) => {
   emit('plugin-delete', plugin)
 }
 
-const handleAddPlugin = (plugin: PluginInfo, added: boolean) => {
+const handleAddPlugin = (plugin: PluginInfo) => {
   if (!props.allowPluginAdd) return
-  emit('plugin-add', plugin, added)
+  emit('plugin-add', plugin)
 }
 
 const showModal = ref(false)
@@ -373,7 +373,7 @@ const transitionName = computed(() => {
                   mode="market"
                   :expandable="false"
                   :show-tool-count="false"
-                  @add-plugin="(added: boolean) => handleAddPlugin(plugin, added)"
+                  @add-plugin="handleAddPlugin"
                 />
               </template>
             </div>