From 2129b1b6ce65cccaabc0b1db9952c48e5e5616c7 Mon Sep 17 00:00:00 2001
From: Hu Gang <18768366022@163.com>
Date: Mon, 26 May 2025 16:47:04 +0800
Subject: [PATCH] feat: mcp status, mcp internationalization

---
 src/apis/paths/mcp.ts                         |   1 +
 src/i18n/lang/en.ts                           |  25 +++
 src/i18n/lang/zh-cn.ts                        |  25 +++
 src/views/api/components/McpDrawer.vue        |  62 ++++--
 src/views/api/components/McpServiceDetail.vue |  30 ++-
 src/views/api/index.vue                       | 177 +++++++++++++-----
 src/views/createapp/components/McpDrawer.vue  |  14 +-
 7 files changed, 268 insertions(+), 66 deletions(-)

diff --git a/src/apis/paths/mcp.ts b/src/apis/paths/mcp.ts
index 8906fe9b..53d51537 100644
--- a/src/apis/paths/mcp.ts
+++ b/src/apis/paths/mcp.ts
@@ -22,6 +22,7 @@ const getMcpList = (params: {
         icon: string;
         author: string;
         isActive: boolean;
+        status: 'installing' | 'ready' | 'failed';
       },
     ];
     totalModels: number;
diff --git a/src/i18n/lang/en.ts b/src/i18n/lang/en.ts
index 5ad57468..55dff385 100644
--- a/src/i18n/lang/en.ts
+++ b/src/i18n/lang/en.ts
@@ -11,6 +11,7 @@ export default {
     createTime: 'Create Time',
     operate: 'Operate',
     copy: 'Copy',
+    icon: 'Icon',
   },
   settings: {
     model: 'Model',
@@ -71,6 +72,30 @@ export default {
     edit: 'Edit',
     analyze: 'Analyze',
   },
+  plugin_center: {
+    plugin_name: 'Plugin Name',
+    author: 'Author',
+    mcp: {
+      installing: 'Installing',
+      install_failed: 'Install Failed',
+      create_mcp: 'Create MCP',
+      edit_mcp: 'Edit MCP',
+      mcp_name: 'MCP Name',
+      mcp_description: 'MCP Description',
+      mcp_type: 'MCP Type',
+      activate: 'Activate',
+      deactivate: 'Deactivate',
+    },
+    upload_icon: 'Upload Icon',
+    please_upload_icon: 'Please upload icon',
+    please_input_mcp_name: 'Please input MCP name',
+    please_select_mcp_description: 'Please select MCP description',
+    server_detail: 'Server Details',
+    server_tool: 'Server Tools',
+    server_description: 'Server Description',
+    tool_input_schema: 'Tool Input Schema',
+    tool_output_schema: 'Tool Output Schema',
+  },
   app: {
     app_center: 'App Center',
     all_select: 'All',
diff --git a/src/i18n/lang/zh-cn.ts b/src/i18n/lang/zh-cn.ts
index 7222b873..c2429683 100644
--- a/src/i18n/lang/zh-cn.ts
+++ b/src/i18n/lang/zh-cn.ts
@@ -11,6 +11,7 @@ export default {
     createTime: '创建时间',
     operate: '操作',
     copy: '复制',
+    icon: '图标',
   },
   settings: {
     model: '模型',
@@ -76,6 +77,30 @@ export default {
     edit: '编辑',
     analyze: '解析',
   },
+  plugin_center: {
+    plugin_name: '插件名称',
+    author: '创建人',
+    mcp: {
+      installing: '安装中',
+      installFailed: '安装失败',
+      create_mcp: '创建MCP服务',
+      edit_mcp: '编辑MCP服务',
+      mcp_name: 'MCP名称',
+      mcp_description: 'MCP描述',
+      mcp_type: 'MCP类型',
+      activate: '激活',
+      deactivate: '取消激活',
+    },
+    upload_icon: '上传图标',
+    please_upload_icon: '请上传图标',
+    please_input_mcp_name: '请输入MCP名称',
+    please_select_mcp_description: '请选择MCP描述',
+    server_detail: '服务详情',
+    server_tool: '工具',
+    server_description: '描述',
+    tool_input_schema: '工具入参',
+    tool_output_schema: '工具出参',
+  },
   app: {
     app_center: '应用中心',
     all_select: '全部',
diff --git a/src/views/api/components/McpDrawer.vue b/src/views/api/components/McpDrawer.vue
index 6009ad28..9e51747b 100644
--- a/src/views/api/components/McpDrawer.vue
+++ b/src/views/api/components/McpDrawer.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
 import { ElMessage, FormInstance, FormRules, UploadProps } from 'element-plus';
-import { nextTick, reactive, ref, watch } from 'vue';
+import { reactive, ref, watch } from 'vue';
 import MonacoEditor from './MonacoEditor.vue';
 import defaultIcon from '@/assets/svgs/app_upload.svg';
 import { api } from '@/apis';
+import i18n from 'src/i18n';
 
 interface McpDetail {
   icon: string;
@@ -23,6 +24,8 @@ const emits = defineEmits<{
   (e: 'success'): void;
 }>();
 
+const { t } = i18n.global;
+
 const form = reactive<McpDetail>({
   icon: '',
   name: '',
@@ -35,9 +38,27 @@ const formRef = ref<FormInstance>();
 const jsonEditorRef = ref();
 
 const rules = reactive<FormRules<typeof form>>({
-  icon: [{ required: true, message: '请上传MCP图标', trigger: 'blur' }],
-  name: [{ required: true, message: '请输入MCP名称', trigger: 'blur' }],
-  description: [{ required: true, message: '请输入MCP描述', trigger: 'blur' }],
+  icon: [
+    {
+      required: true,
+      message: t('plugin_center.please_upload_icon'),
+      trigger: 'blur',
+    },
+  ],
+  name: [
+    {
+      required: true,
+      message: t('plugin_center.please_input_mcp_name'),
+      trigger: 'blur',
+    },
+  ],
+  description: [
+    {
+      required: true,
+      message: t('plugin_center.please_select_mcp_description'),
+      trigger: 'blur',
+    },
+  ],
   type: [{ required: true }],
 });
 
@@ -114,6 +135,9 @@ watch(
     if (props.visible) {
       if (!props.serviceId) return;
       getMcpServiceDetail(props.serviceId);
+    } else {
+      formRef.value && formRef.value.resetFields();
+      jsonEditorRef.value.setJsonValue('{\n  \n}');
     }
   },
 );
@@ -122,7 +146,11 @@ watch(
   <div class="mcp-drawer">
     <el-drawer
       size="700"
-      :title="serviceId ? '编辑MCP服务' : '创建MCP服务'"
+      :title="
+        serviceId
+          ? t('plugin_center.mcp.create_mcp')
+          : t('plugin_center.mcp.edit_mcp')
+      "
       :model-value="visible"
       @close="emits('update:visible', false)"
     >
@@ -136,7 +164,7 @@ watch(
             :model="form"
             :rules="rules"
           >
-            <el-form-item label="图标" prop="icon">
+            <el-form-item :label="t('common.icon')" prop="icon">
               <div class="upload-area">
                 <el-upload
                   class="uploader"
@@ -149,23 +177,33 @@ watch(
                     <img v-else :src="defaultIcon" />
                   </div>
                 </el-upload>
-                <span class="text">上传图标</span>
+                <span class="text">{{ t('plugin_center.upload_icon') }}</span>
               </div>
             </el-form-item>
-            <el-form-item label="MCP名称" prop="name">
-              <el-input v-model="form.name" placeholder="请输入MCP名称" />
+            <el-form-item :label="t('plugin_center.mcp.mcp_name')" prop="name">
+              <el-input
+                v-model="form.name"
+                :placeholder="t('plugin_center.please_input_mcp_name')"
+              />
             </el-form-item>
-            <el-form-item label="MCP描述" prop="description">
+            <el-form-item
+              :label="t('plugin_center.mcp.mcp_description')"
+              prop="description"
+            >
               <el-input
                 type="textarea"
                 :maxlength="1000"
                 show-word-limit
                 v-model="form.description"
                 :rows="8"
-                placeholder="请输入MCP描述"
+                :placeholder="t('plugin_center.please_select_mcp_description')"
               />
             </el-form-item>
-            <el-form-item label="MCP类型" prop="type" class="form-item">
+            <el-form-item
+              :label="t('plugin_center.mcp.mcp_type')"
+              prop="type"
+              class="form-item"
+            >
               <el-radio-group v-model="form.type">
                 <el-radio v-for="{ label, value } in mcpTypes" :value="value">
                   {{ label }}
diff --git a/src/views/api/components/McpServiceDetail.vue b/src/views/api/components/McpServiceDetail.vue
index 5f8abef6..3426b3df 100644
--- a/src/views/api/components/McpServiceDetail.vue
+++ b/src/views/api/components/McpServiceDetail.vue
@@ -5,6 +5,7 @@ import { api } from '@/apis';
 import defaultIcon from '@/assets/svgs/app_upload.svg';
 import lightNull from '@/assets/svgs/light_null.svg';
 import { ElEmpty } from 'element-plus';
+import i18n from 'src/i18n';
 
 interface McpDetail {
   serviceId: string;
@@ -46,6 +47,8 @@ const emits = defineEmits<{
   (e: 'update:visible', visible: boolean): void;
 }>();
 
+const { t } = i18n.global;
+
 const activeTab = ref<'description' | 'tools'>('description');
 
 const mcpServiceDetail = ref<McpDetail>();
@@ -78,7 +81,7 @@ watch(
       size="700"
       :model-value="visible"
       destroy-on-close
-      title="服务详情"
+      :title="t('plugin_center.server_detail')"
       @close="emits('update:visible', false)"
     >
       <div class="content" v-if="mcpServiceDetail">
@@ -92,12 +95,20 @@ watch(
 
         <div class="detail">
           <el-tabs v-model="activeTab" class="settings-tabs">
-            <el-tab-pane label="描述" name="description" :lazy="true">
+            <el-tab-pane
+              :label="t('plugin_center.server_description')"
+              name="description"
+              :lazy="true"
+            >
               <div class="description">
                 {{ mcpServiceDetail.description }}
               </div>
             </el-tab-pane>
-            <el-tab-pane label="工具" name="tools" :lazy="true">
+            <el-tab-pane
+              :label="t('plugin_center.server_tool')"
+              name="tools"
+              :lazy="true"
+            >
               <div
                 class="tool"
                 v-if="mcpServiceDetail.tools.length"
@@ -110,7 +121,9 @@ watch(
                 <el-collapse v-model="activeNames">
                   <el-collapse-item :name="`${tool.name}-regeocode`">
                     <template #title>
-                      <span class="collapse-title">工具入参</span>
+                      <span class="collapse-title">
+                        {{ t('plugin_center.tool_input_schema') }}
+                      </span>
                       <el-icon
                         class="collapse-icon"
                         :class="{
@@ -141,7 +154,9 @@ watch(
                     v-if="tool.output_schema"
                   >
                     <template #title>
-                      <span class="collapse-title">工具出参</span>
+                      <span class="collapse-title">
+                        {{ t('plugin_center.tool_output_schema') }}
+                      </span>
                       <el-icon
                         class="collapse-icon"
                         :class="{
@@ -180,7 +195,9 @@ watch(
         </div>
       </div>
       <template #footer>
-        <el-button @click="emits('update:visible', false)">关闭</el-button>
+        <el-button @click="emits('update:visible', false)">
+          {{ t('common.close') }}
+        </el-button>
       </template>
     </el-drawer>
   </div>
@@ -230,6 +247,7 @@ watch(
       --o-tabs-line-height: 32px;
       --o-tabs-color_active: rgb(99, 149, 253);
       --o-text-color-secondary: #000;
+      --o-tabs-item-max-width: none;
 
       .description {
         height: 100%;
diff --git a/src/views/api/index.vue b/src/views/api/index.vue
index 3416bcd1..7a70cec3 100644
--- a/src/views/api/index.vue
+++ b/src/views/api/index.vue
@@ -20,21 +20,22 @@
                 :suffix-icon="IconCaretDown"
               >
                 <el-option :label="$t('semantic.all_select')" value="all" />
-                <el-option label="插件名称" value="name" />
-                <el-option label="创建人" value="author" />
+                <el-option
+                  :label="$t('plugin_center.plugin_name')"
+                  value="name"
+                />
+                <el-option :label="$t('plugin_center.author')" value="author" />
               </el-select>
             </template>
           </el-input>
 
           <el-popover
-            placement="bottom"
-            width="102"
             :popper-style="{
-              minWidth: '100px',
               transform: 'translateY(-10px)',
               padding: '4px 0px',
             }"
             trigger="click"
+            placement="bottom-start"
             :show-arrow="false"
           >
             <template #reference>
@@ -109,11 +110,9 @@
                   :description="item.description"
                   :icon="item.icon"
                 >
-                  <template
-                    #topRight
-                    v-if="pluginType === 'semantic_interface'"
-                  >
+                  <template #topRight>
                     <div
+                      v-if="pluginType === 'semantic_interface'"
                       class="apiCenterCardContentCollect"
                       :class="
                         !item.published && apiType === 'createdByMe'
@@ -125,6 +124,24 @@
                       <IconFavorite v-if="item.favorited" class="apiFavorite" />
                       <IconUnfavorite v-else />
                     </div>
+                    <div v-else-if="pluginType === 'mcp'">
+                      <div v-if="item.status === 'installing'" class="loading">
+                        <img
+                          src="@/assets/images/loading.png"
+                          alt=""
+                          class="loading-anime-icon"
+                        />
+                        <div class="loading-text">
+                          {{ t('plugin_center.mcp.installing') }}
+                        </div>
+                      </div>
+                      <div v-else-if="item.status === 'failed'" class="failed">
+                        <img src="@/assets/svgs/error.svg" alt="" />
+                        <div class="failed-text">
+                          {{ t('plugin_center.mcp.install_failed') }}
+                        </div>
+                      </div>
+                    </div>
                   </template>
                   <template #footer>
                     <div class="apiCenterCardBottom">
@@ -151,30 +168,36 @@
                             pluginType === 'mcp'
                           "
                         >
-                          <div v-if="userinfo.is_admin">
-                            <el-button
-                              text
-                              @click.stop="onOpenMcpDrawer(item.serviceId)"
-                            >
-                              {{ $t('semantic.interface_edit') }}
-                            </el-button>
+                          <div v-if="item.status !== 'installing'">
+                            <div v-if="userinfo.is_admin">
+                              <el-button
+                                text
+                                @click.stop="onOpenMcpDrawer(item.serviceId)"
+                              >
+                                {{ $t('semantic.interface_edit') }}
+                              </el-button>
+                              <el-button
+                                text
+                                @click.stop="handleDelApi(item.serviceId)"
+                              >
+                                {{ $t('semantic.interface_delete') }}
+                              </el-button>
+                            </div>
+
                             <el-button
+                              v-else
                               text
-                              @click.stop="handleDelApi(item.serviceId)"
+                              @click.stop="
+                                onActiveService(item.serviceId, item.isActive)
+                              "
                             >
-                              {{ $t('semantic.interface_delete') }}
+                              {{
+                                item.isActive
+                                  ? t('plugin_center.mcp.activate')
+                                  : t('plugin_center.mcp.deactivate')
+                              }}
                             </el-button>
                           </div>
-
-                          <el-button
-                            v-else
-                            text
-                            @click.stop="
-                              onActiveService(item.serviceId, item.isActive)
-                            "
-                          >
-                            {{ item.isActive ? '取消激活' : '激活' }}
-                          </el-button>
                         </div>
                       </div>
                     </div>
@@ -259,8 +282,7 @@ import {
 } from '@computing/opendesign-icons';
 import './style.scss';
 import PluginCard from './components/PluginCard.vue';
-import { ref, onMounted, watch, markRaw } from 'vue';
-import { useRouter } from 'vue-router';
+import { ref, onMounted, watch, markRaw, onBeforeUnmount } from 'vue';
 import { api } from 'src/apis';
 import { ElMessageBox } from 'element-plus';
 import { IconAlarm } from '@computing/opendesign-icons';
@@ -312,14 +334,13 @@ const pluginLists = ref<
     name: string;
     published?: boolean;
     isActive?: boolean;
+    status?: 'installing' | 'ready' | 'failed';
   }[]
 >([]);
 
-const apiList = ref();
 const drawer = ref(false);
 const direction = ref('rtl');
 const actionName = ref('');
-const router = useRouter();
 const actions = ref();
 const pluginType = ref<'semantic_interface' | 'mcp'>('semantic_interface');
 const apiType = ref('my');
@@ -403,6 +424,7 @@ const handleClose = () => {
   queryList(pluginType.value);
 };
 
+let timer: NodeJS.Timeout | null = null;
 const queryList = async (type: 'semantic_interface' | 'mcp') => {
   loading.value = true;
   const payload = {
@@ -424,24 +446,44 @@ const queryList = async (type: 'semantic_interface' | 'mcp') => {
       loading.value = false;
     }
   } else if (type === 'mcp') {
-    const [_, res] = await api.getMcpList({
-      page: currentPage.value,
-      pageSize: currentPageSize.value,
-      ...(payload as any),
-    });
-    if (res) {
-      pluginLists.value = res.result.services.map((item) => ({
+    queryMcpServices();
+    timer = setInterval(() => {
+      queryMcpServices();
+    }, 3000);
+  }
+};
+
+async function queryMcpServices() {
+  const [_, res] = await api.getMcpList({
+    page: currentPage.value,
+    pageSize: currentPageSize.value,
+    searchType: apiSearchType.value,
+    keyword: apiSearchValue.value || undefined,
+    [apiType.value]: true,
+  });
+  if (res) {
+    let installingCount = 0;
+    pluginLists.value = res.result.services.map((item) => {
+      if (item.status === 'installing') {
+        installingCount++;
+      }
+      return {
         serviceId: item.mcpserviceId,
         description: item.description,
         icon: item.icon,
         author: item.author,
         name: item.name,
         isActive: item.isActive,
-      }));
+        status: item.status,
+      };
+    });
+    if (installingCount === 0 && timer) {
+      clearInterval(timer);
+      timer = null;
     }
+    loading.value = false;
   }
-  loading.value = false;
-};
+}
 
 const handleFavorite = (e, item) => {
   // 未发布的不可收藏
@@ -534,6 +576,13 @@ watch(
 onMounted(() => {
   queryList(pluginType.value);
 });
+
+onBeforeUnmount(() => {
+  if (timer) {
+    clearInterval(timer);
+    timer = null;
+  }
+});
 </script>
 <style lang="scss" scoped>
 .create-button__icon {
@@ -592,6 +641,50 @@ onMounted(() => {
   .noClick {
     cursor: not-allowed;
   }
+  .loading,
+  .failed {
+    display: flex;
+    height: auto;
+    width: 100%;
+    background-color: linear-gradient(
+      127.95deg,
+      rgba(109, 227, 250, 0.2) -1.967%,
+      rgba(90, 179, 255, 0.2) 98.202%
+    );
+    border-radius: 8px;
+    border-top-left-radius: 0px;
+    margin-left: 8px;
+    flex-wrap: nowrap;
+    gap: 2px;
+    @keyframes rotate-img {
+      from {
+        transform: rotate(0);
+      }
+
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    img {
+      width: 16px;
+      height: 16px;
+    }
+
+    &-anime-icon {
+      width: 16px;
+      height: 16px;
+      align-items: center;
+      align-self: center;
+      animation: rotate-img 1s infinite linear;
+    }
+
+    &-text {
+      font-size: 12px;
+      color: var(--o-text-color-primary);
+      white-space: nowrap;
+    }
+  }
 }
 
 img {
diff --git a/src/views/createapp/components/McpDrawer.vue b/src/views/createapp/components/McpDrawer.vue
index a2820edb..ebe42ac0 100644
--- a/src/views/createapp/components/McpDrawer.vue
+++ b/src/views/createapp/components/McpDrawer.vue
@@ -45,12 +45,14 @@ async function queryMcpList() {
     keyword: searchKeyword.value,
   });
   if (res) {
-    mcpList.value = res.result.services.map((item) => {
-      return {
-        ...item,
-        isChecked: false,
-      };
-    });
+    mcpList.value = res.result.services
+      .filter((mcp) => mcp.isActive)
+      .map((item) => {
+        return {
+          ...item,
+          isChecked: false,
+        };
+      });
   }
 }
 
-- 
Gitee