From ed4c55d3d60e1e19daceee4dd30d40da3d4102a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jack=E9=AD=8F?= <weihaohao2@huawei.com>
Date: Thu, 14 Aug 2025 14:52:29 +0800
Subject: [PATCH] =?UTF-8?q?MCP=E6=9C=8D=E5=8A=A1=E6=9F=A5=E8=AF=A2?=
 =?UTF-8?q?=EF=BC=8C=E7=8A=B6=E6=80=81=E5=B1=95=E7=A4=BA=EF=BC=8C=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/paths/mcp.ts                   |  13 +-
 src/assets/svgs/warning.svg             |   8 ++
 src/views/api/components/McpDrawer.vue  |   2 +-
 src/views/api/components/PluginCard.vue |   3 +-
 src/views/api/index.vue                 | 171 +++++++++++++++++++-----
 5 files changed, 157 insertions(+), 40 deletions(-)
 create mode 100644 src/assets/svgs/warning.svg

diff --git a/src/apis/paths/mcp.ts b/src/apis/paths/mcp.ts
index 31ec1eb5..c85d8390 100644
--- a/src/apis/paths/mcp.ts
+++ b/src/apis/paths/mcp.ts
@@ -10,6 +10,8 @@ const getMcpList = (params: {
   keyword?: string;
   page?: number;
   pageSize?: number;
+  isInstall?: boolean | null;
+  isActive?: boolean | null;
 }) => {
   return get<{
     currentPage: number;
@@ -69,13 +71,13 @@ const createOrUpdateMcpService = (params: {
   name: string;
   overview: string;
   description: string;
-  config: string;
+  config: object;
   mcpType: 'stdio' | 'sse' | 'stream';
 }) => {
   return post<{
     service_id: string;
     name: string;
-  }>(`${MCP_BASE_URL}`, params);
+  }>(`${MCP_BASE_URL}`, params, { 'Content-Type': 'application/json' });
 };
 
 const deleteMcpService = (id: string) => {
@@ -86,6 +88,10 @@ const activeMcpService = (id: string, active: boolean) => {
   return post<{ serviceId: string }>(`${MCP_BASE_URL}/${id}`, { active });
 };
 
+const installMcpService = (id: string) => {
+  return post<{ serviceId: string }>(`${MCP_BASE_URL}/${id}/install`);
+};
+
 // 定义一个名为uploadMcpIcon的函数，接收两个参数serviceId和icon
 const uploadMcpIcon = (params: {
   serviceId: string;
@@ -96,7 +102,7 @@ const uploadMcpIcon = (params: {
   formData.append('icon', params.icon);
   // 使用post方法向MCP_BASE_URL/${id}发送请求，请求体为{ icon: params.icon }
   return post<{ icon: string }>(
-    `${MCP_BASE_URL}`,
+    `${MCP_BASE_URL}/icon/${params.serviceId}`,
     formData,
     {
       serviceId: params.serviceId,
@@ -111,5 +117,6 @@ export const mcpApi = {
   createOrUpdateMcpService,
   deleteMcpService,
   activeMcpService,
+  installMcpService,
   uploadMcpIcon
 };
diff --git a/src/assets/svgs/warning.svg b/src/assets/svgs/warning.svg
new file mode 100644
index 00000000..71554801
--- /dev/null
+++ b/src/assets/svgs/warning.svg
@@ -0,0 +1,8 @@
+<svg width="16.000000" height="16.000000" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs/>
+	<path id="路径" d="M8 1C4.13 1 1 4.13 1 8C1 11.86 4.13 15 8 15C11.86 15 15 11.86 15 8C15 4.13 11.86 1 8 1Z" fill="#8d98aa" fill-opacity="1.000000" fill-rule="evenodd"/>
+	<path id="形状" d="M8 4C7.72388 4 7.5 4.22388 7.5 4.5L7.5 8.5C7.5 8.77612 7.72388 9 8 9C8.27612 9 8.5 8.77612 8.5 8.5L8.5 4.5C8.5 4.22388 8.27612 4 8 4ZM7.25 10.75C7.25 11.1641 7.58594 11.5 8 11.5C8.41406 11.5 8.75 11.1641 8.75 10.75C8.75 10.3359 8.41406 10 8 10C7.58594 10 7.25 10.3359 7.25 10.75Z" clip-rule="evenodd" fill="#FFFFFF" fill-opacity="1.000000" fill-rule="evenodd"/>
+</svg>
diff --git a/src/views/api/components/McpDrawer.vue b/src/views/api/components/McpDrawer.vue
index a44eff4a..ccf2060d 100644
--- a/src/views/api/components/McpDrawer.vue
+++ b/src/views/api/components/McpDrawer.vue
@@ -149,7 +149,7 @@ async function onConfirm(formEl: FormInstance | undefined) {
       icon: form.icon,
       name: form.name,
       description: form.description,
-      config: form.mcpConfig,
+      config: JSON.parse(form.mcpConfig),
       mcpType: form.type,
     });
 
diff --git a/src/views/api/components/PluginCard.vue b/src/views/api/components/PluginCard.vue
index 1ae57c95..a39ac291 100644
--- a/src/views/api/components/PluginCard.vue
+++ b/src/views/api/components/PluginCard.vue
@@ -54,6 +54,7 @@ const props = defineProps<CardInfo>();
     display: flex;
     flex-direction: column;
     gap: 4px;
+    width: 70%;
 
     &__top {
       min-height: 24px;
@@ -66,7 +67,7 @@ const props = defineProps<CardInfo>();
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
-        width: 80%;
+        width: 70%;
         font-weight: 700;
       }
     }
diff --git a/src/views/api/index.vue b/src/views/api/index.vue
index a566f503..00c3a330 100644
--- a/src/views/api/index.vue
+++ b/src/views/api/index.vue
@@ -103,6 +103,30 @@
               :lazy="true"
             ></el-tab-pane>
           </el-tabs>
+          <el-tabs
+            v-if="pluginType === 'mcp'"
+            v-model="mcpType"
+            class="plugin-tabs"
+            @tab-click="(tab) => handleSearchMcpList(tab.props.name)"
+          >
+            <el-tab-pane
+              :label="$t('plugin_center.mcp.all_select')"
+              name="all_select"
+              :lazy="true"
+            ></el-tab-pane>
+            <el-tab-pane
+              :label="$t('plugin_center.mcp.installed')"
+              name="installed"
+              :lazy="true"
+              v-if="userinfo.is_admin"
+            ></el-tab-pane>
+            <el-tab-pane
+              :label="$t('plugin_center.mcp.not_installed')"
+              name="not_installed"
+              :lazy="true"
+              v-if="userinfo.is_admin"
+            ></el-tab-pane>
+          </el-tabs>
           <div class="apiCenterCardBox" v-if="pluginLists.length">
             <div
               v-for="item in pluginLists"
@@ -130,6 +154,7 @@
                       <IconUnfavorite v-else />
                     </div>
                     <div v-else-if="pluginType === 'mcp'">
+                      <!-- 安装中 -->
                       <div v-if="item.status === 'installing'" class="loading">
                         <img
                           src="@/assets/images/loading.png"
@@ -140,12 +165,36 @@
                           {{ t('plugin_center.mcp.installing') }}
                         </div>
                       </div>
-                      <div v-else-if="item.status === 'failed'" class="failed">
+                      <!-- 安装失败 -->
+                      <div
+                        v-else-if="item.status === 'failed'"
+                        class="statusDiv"
+                      >
                         <img src="@/assets/svgs/error.svg" alt="" />
                         <div class="failed-text">
                           {{ t('plugin_center.mcp.install_failed') }}
                         </div>
                       </div>
+                      <!-- 安装成功 -->
+                      <div
+                        v-else-if="['ready'].includes(item.status)"
+                        class="statusDiv"
+                      >
+                        <img src="@/assets/svgs/success.svg" alt="" />
+                        <div class="failed-text">
+                          {{ t('plugin_center.mcp.install_success') }}
+                        </div>
+                      </div>
+                      <!-- 未安装 -->
+                      <div
+                        v-else-if="['init', 'cancelled'].includes(item.status)"
+                        class="statusDiv"
+                      >
+                        <img src="@/assets/svgs/warning.svg" alt="" />
+                        <div class="failed-text">
+                          {{ t('plugin_center.mcp.not_installed') }}
+                        </div>
+                      </div>
                     </div>
                   </template>
                   <template #footer>
@@ -156,7 +205,7 @@
                           class="apiCenterCardId"
                           v-if="pluginType === 'mcp'"
                         >
-                          <span style="font-weight: 700 !important;">ID: </span>
+                          <span style="font-weight: 700 !important">ID:</span>
                           <span>{{ item.serviceId }}</span>
                           <el-tooltip
                             effect="dark"
@@ -171,11 +220,32 @@
                           </el-tooltip>
                         </div>
                         <div
-                          class="apiCenterCardOps"
-                          v-if="item.status !== 'installing'"
+                          v-if="
+                            (userinfo.user_sub === item.author &&
+                              pluginType === 'semantic_interface') ||
+                            (userinfo.is_admin && pluginType === 'mcp')
+                          "
+                          class="deleteAndEdit"
                         >
+                          <!-- 未安装、安装失败：安装 -->
                           <el-button
-                            v-if="pluginType === 'mcp'"
+                            v-if="
+                              pluginType === 'mcp' &&
+                              ['init', 'cancelled', 'failed'].includes(item.status)
+                            "
+                            text
+                            @click.stop="
+                              onInstallService(item.serviceId, item.isActive)
+                            "
+                          >
+                            {{ t('plugin_center.mcp.install') }}
+                          </el-button>
+                          <!-- 安装成功：激活 -->
+                          <el-button
+                            v-if="
+                              pluginType === 'mcp' &&
+                              ['ready'].includes(item.status)
+                            "
                             text
                             @click.stop="
                               onActiveService(item.serviceId, item.isActive)
@@ -187,29 +257,31 @@
                                 : t('plugin_center.mcp.activate')
                             }}
                           </el-button>
-                          <div
-                            v-if="
-                              (userinfo.user_sub === item.author &&
-                                pluginType === 'semantic_interface') ||
-                              (userinfo.is_admin && pluginType === 'mcp')
+                          <!-- 未安装、安装成功、安装失败：编辑 -->
+                          <el-button
+                            text
+                            v-if="!['installing'].includes(item.status)"
+                            @click.stop="
+                              openSidebar('edit', item.serviceId, pluginType)
                             "
-                            class="deleteAndEdit"
                           >
-                            <el-button
-                              text
-                              @click.stop="
-                                openSidebar('edit', item.serviceId, pluginType)
-                              "
-                            >
-                              {{ $t('semantic.interface_edit') }}
-                            </el-button>
-                            <el-button
-                              text
-                              @click.stop="handleDelPlugin(item.serviceId)"
-                            >
-                              {{ $t('semantic.interface_delete') }}
-                            </el-button>
-                          </div>
+                            {{ $t('semantic.interface_edit') }}
+                          </el-button>
+                          <!-- 安装中：取消 -->
+                          <el-button
+                            text
+                            v-if="['installing'].includes(item.status)"
+                            @click.stop="onActiveService(item.serviceId, false)"
+                          >
+                            {{ $t('semantic.cancel') }}
+                          </el-button>
+                          <!-- 删除 -->
+                          <el-button
+                            text
+                            @click.stop="handleDelPlugin(item.serviceId)"
+                          >
+                            {{ $t('semantic.interface_delete') }}
+                          </el-button>
                         </div>
                       </div>
                     </div>
@@ -285,12 +357,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import {
-  IconCaretDown,
-  IconSearch,
-  IconFavorite,
-  IconUnfavorite,
-} from '@computing/opendesign-icons';
+import { IconError } from '@computing/opendesign-icons';
 import './style.scss';
 import PluginCard from './components/PluginCard.vue';
 import { ref, onMounted, watch, markRaw, onBeforeUnmount } from 'vue';
@@ -348,7 +415,7 @@ const pluginLists = ref<
     name: string;
     published?: boolean;
     isActive?: boolean;
-    status?: 'installing' | 'ready' | 'failed';
+    status?: 'init' | 'installing' | 'cancelled' | 'ready' | 'failed';
   }[]
 >([]);
 
@@ -374,6 +441,10 @@ const totalCount = ref(0);
 const currentPageSize = ref(pagination.value.pageSizes[0]);
 const loading = ref(false);
 
+const mcpType = ref('all_select');
+const mcpIsActive = ref(<boolean | null> null);
+const mcpIsInstall = ref(<boolean | null> (userinfo.value.is_admin ? null : true));
+
 const handleChangePage = (pageNum: number, pageSize: number) => {
   currentPage.value = pageNum;
   currentPageSize.value = pageSize;
@@ -493,7 +564,8 @@ async function queryMcpServices() {
     pageSize: currentPageSize.value,
     searchType: apiSearchType.value,
     keyword: apiSearchValue.value || undefined,
-    [apiType.value]: true,
+    isInstall: mcpIsInstall.value,
+    isActive: mcpIsActive.value,
   });
   if (res) {
     let installingCount = 0;
@@ -547,6 +619,27 @@ const handleSearchApiList = (type: 'my' | 'createdByMe' | 'favorited') => {
   }
 };
 
+const handleSearchMcpList = (
+  type: 'all_select' | 'installed' | 'not_installed',
+) => {
+  mcpType.value = type;
+  if (type === 'all_select') {
+    mcpIsActive.value = null;
+    mcpIsInstall.value = null;
+    queryList(pluginType.value);
+  } else {
+    if (type === 'installed') {
+      mcpIsInstall.value = true;
+    } else {
+      mcpIsInstall.value = false;
+    }
+
+    currentPage.value = 1;
+    currentPageSize.value = 16;
+    queryList(pluginType.value);
+  }
+};
+
 function onCopyServiceId(id: string) {
   writeText(id);
   successMsg(t('feedback.copied_successfully'));
@@ -583,6 +676,14 @@ async function onActiveService(serviceId: string, active: boolean = true) {
   }
 }
 
+async function onInstallService(serviceId: string) {
+  const [, res] = await api.installMcpService(serviceId);
+  if (res) {
+    successMsg(t('plugin_center.mcp.install_success'));
+    queryList(pluginType.value);
+  }
+}
+
 function onPluginTypeClick(type: 'semantic_interface' | 'mcp') {
   if (pluginType.value === type) {
     return;
@@ -664,7 +765,7 @@ onBeforeUnmount(() => {
     cursor: not-allowed;
   }
   .loading,
-  .failed {
+  .statusDiv {
     display: flex;
     height: auto;
     width: 100%;
-- 
Gitee