From 0c55231788b4412d12436b2d5c6293ed2a9a8453 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jack=E9=AD=8F?= <weihaohao2@huawei.com>
Date: Sat, 23 Aug 2025 14:55:18 +0800
Subject: [PATCH] =?UTF-8?q?=E6=BF=80=E6=B4=BB=E5=AF=86=E9=92=A5=E8=BE=93?=
 =?UTF-8?q?=E5=85=A5=E7=AA=97=E5=8F=A3=EF=BC=8C=E5=85=BC=E5=AE=B9=E8=80=81?=
 =?UTF-8?q?=E7=9A=84=E5=9B=BD=E9=99=85=E5=8C=96=EF=BC=8C=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E5=8B=BE=E9=80=89=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/paths/mcp.ts                         |   5 +-
 src/components/commonFooter/CommonFooter.vue  |  28 +++-
 src/i18n/index.ts                             |  14 +-
 src/i18n/lang/en.ts                           |   1 +
 src/i18n/lang/zh-cn.ts                        |   1 +
 src/views/api/components/ActiveModel.vue      | 146 ++++++++++++++++++
 src/views/api/index.vue                       |  68 ++++++--
 .../createapp/components/AgentAppConfig.vue   |   2 +-
 src/views/createapp/components/McpDrawer.vue  |  80 ++++++++--
 9 files changed, 315 insertions(+), 30 deletions(-)
 create mode 100644 src/views/api/components/ActiveModel.vue

diff --git a/src/apis/paths/mcp.ts b/src/apis/paths/mcp.ts
index c85d8390..19313797 100644
--- a/src/apis/paths/mcp.ts
+++ b/src/apis/paths/mcp.ts
@@ -84,8 +84,9 @@ const deleteMcpService = (id: string) => {
   return del<{ serviceId: string }>(`${MCP_BASE_URL}/${id}`);
 };
 
-const activeMcpService = (id: string, active: boolean) => {
-  return post<{ serviceId: string }>(`${MCP_BASE_URL}/${id}`, { active });
+const activeMcpService = (id: string, active: boolean, mcpEnv?: any) => {
+  return post<{ serviceId: string }>(`${MCP_BASE_URL}/${id}`, { active, mcpEnv },
+    { 'Content-Type': 'multipart/form-data' },);
 };
 
 const installMcpService = (id: string) => {
diff --git a/src/components/commonFooter/CommonFooter.vue b/src/components/commonFooter/CommonFooter.vue
index b88448ba..48979905 100644
--- a/src/components/commonFooter/CommonFooter.vue
+++ b/src/components/commonFooter/CommonFooter.vue
@@ -8,12 +8,33 @@ const agreeDialogVisiable = ref(false);
 // 协议内容
 const agreement = ref<string>('');
 const policy = ref<string>('');
+
+/**
+ * 获取当前语言
+ */
+const getLocale = () => {
+  const localLang = localStorage.getItem('copilot_language');
+  let locale = 'zh'; // 默认值
+
+  if (localLang) {
+    try {
+      const parsed = JSON.parse(localLang);
+      // 处理可能的 language 值：zh, zh_cn, zh-tw 等
+      if (parsed.language) {
+        locale = parsed.language.startsWith('zh') ? 'zh' : parsed.language;
+      }
+    } catch (e) {
+      console.error('解析语言设置失败:', e);
+    }
+  }
+  return locale;
+};
+
 /**
  * 读取协议
  */
 const readAgreement = async () => {
-  const localLang = localStorage.getItem('copilot_language');
-  const locale = (localLang && JSON.parse(localLang).language) || 'zh';
+  const locale = getLocale();
   const response =
     locale === 'en'
       ? await import('src/conf/agreement-en.md?raw')
@@ -23,8 +44,7 @@ const readAgreement = async () => {
 };
 
 const readPolicy = async () => {
-  const localLang = localStorage.getItem('copilot_language');
-  const locale = (localLang && JSON.parse(localLang).language) || 'zh';
+  const locale = getLocale();
   const response =
     locale === 'en'
       ? await import('src/conf/policy-en.md?raw')
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
index 7fe3eb0f..e830bea8 100644
--- a/src/i18n/index.ts
+++ b/src/i18n/index.ts
@@ -4,7 +4,19 @@ import zh from './lang/zh-cn';
 import en from './lang/en';
 
 const localLang = localStorage.getItem('copilot_language');
-const locale = (localLang && JSON.parse(localLang).language) || 'zh';
+let locale = 'zh'; // 默认值
+
+if (localLang) {
+  try {
+    const parsed = JSON.parse(localLang);
+    // 处理可能的 language 值：zh, zh_cn, zh-tw 等
+    if (parsed.language) {
+      locale = parsed.language.startsWith('zh') ? 'zh' : parsed.language;
+    }
+  } catch (e) {
+    console.error('解析语言设置失败:', e);
+  }
+}
 
 const i18n = createI18n({
   legacy: false, // 设置为 false，启用 composition API 模式
diff --git a/src/i18n/lang/en.ts b/src/i18n/lang/en.ts
index dad069f3..5adcf021 100644
--- a/src/i18n/lang/en.ts
+++ b/src/i18n/lang/en.ts
@@ -113,6 +113,7 @@ export default {
       installed: 'Installed',
       not_active: 'Not Active', 
       active: 'Active',
+      active_mcp_service: 'Active MCP Service',
     },
     upload_icon: 'Upload Icon',
     please_upload_icon: 'Upload an icon.',
diff --git a/src/i18n/lang/zh-cn.ts b/src/i18n/lang/zh-cn.ts
index 1e4eb871..c729f327 100644
--- a/src/i18n/lang/zh-cn.ts
+++ b/src/i18n/lang/zh-cn.ts
@@ -113,6 +113,7 @@ export default {
       installed: '已安装',
       not_active: '未激活', 
       active: '已激活',
+      active_mcp_service: '激活MCP服务',
     },
     upload_icon: '上传图标',
     please_upload_icon: '请上传图标',
diff --git a/src/views/api/components/ActiveModel.vue b/src/views/api/components/ActiveModel.vue
new file mode 100644
index 00000000..e71f9b18
--- /dev/null
+++ b/src/views/api/components/ActiveModel.vue
@@ -0,0 +1,146 @@
+<script lang="ts" setup>
+import { ElMessage } from 'element-plus';
+import { computed, nextTick, onMounted, ref, watch, reactive } from 'vue';
+import i18n from '@/i18n';
+import { api } from '@/apis';
+
+import type { FormInstance, FormRules } from 'element-plus';
+
+const { t } = i18n.global;
+
+export interface ModelProvider {
+  accessKey: string;
+  icon: string;
+  url: string;
+  description: string;
+}
+
+const props = defineProps<{
+  visible: boolean;
+  item: {
+    id?: string;
+    name: string;
+    description: string;
+    accessKey: string;
+  };
+  type: 'add' | 'edit';
+  title?: string;
+  provider?: ModelProvider;
+}>();
+
+const emits = defineEmits<{
+  (e: 'update:visible', status: boolean): void;
+  (e: 'doActive', form?: any): void;
+}>();
+
+const form = reactive({});
+
+const formRef = ref<FormInstance>();
+const rules = computed<FormRules<typeof form>>(() => {
+  const rulesObj = {};
+  Object.keys(props.item.data.env).forEach((key) => {
+    rulesObj[key] = [
+      {
+        required: true,
+        message: t('semantic.pleaseEnter'), // 使用统一的提示信息
+        trigger: 'blur',
+      },
+    ];
+  });
+
+  return rulesObj;
+});
+
+async function onConfirm(formEl: FormInstance | undefined) {
+  if (!formEl) return;
+  await formEl.validate(async (valid) => {
+    if (!valid) return;
+    emits('doActive', form);
+    emits('update:visible', false);
+  });
+}
+</script>
+<template>
+  <div class="add-model-dialog">
+    <el-dialog
+      :model-value="visible"
+      :title="title"
+      @close="emits('update:visible', false)"
+      destroy-on-close
+    >
+      <el-form
+        ref="formRef"
+        label-position="left"
+        label-width="auto"
+        :model="form"
+        :rules="rules"
+      >
+        <div class="text">
+          {{ props.item.description }}
+        </div>
+        <template v-for="(value, key) in item.data.env" :key="key">
+          <el-form-item :label="key" :prop="key">
+            <el-input
+              v-model="form[key]"
+              clearable
+              :placeholder="t('semantic.pleaseEnter')"
+            />
+          </el-form-item>
+        </template>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" class="button" @click="onConfirm(formRef)">
+            {{ t('common.confirm') }}
+          </el-button>
+          <el-button class="button" @click="emits('update:visible', false)">
+            {{ t('common.cancel') }}
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<style lang="scss" scoped>
+.dialog-footer {
+  .button {
+    width: 64px;
+    height: 24px;
+    border-radius: 4px;
+  }
+}
+.add-model-dialog {
+  :deep(.el-dialog) {
+    --o-dialog-width: 544px;
+  }
+}
+.text {
+  color: rgb(78, 88, 101);
+  font-family: HarmonyOS Sans SC;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0px;
+  text-align: center;
+  margin-bottom: 8px;
+}
+</style>
+<style>
+.add-model-dialog > .el-dialog__body {
+  padding: 24px 24px 0px 24px;
+  .el-input > .el-input__wrapper {
+    --o-input-border-radius: 4px;
+  }
+  .el-select > .el-select__wrapper {
+    --o-select-border-radius: 4px;
+  }
+}
+.el-form {
+  .el-form-item:last-child {
+    margin-bottom: 0;
+  }
+}
+.el-dialog__footer {
+  padding-top: 16px !important;
+}
+</style>
diff --git a/src/views/api/index.vue b/src/views/api/index.vue
index 00c3a330..c313e5ba 100644
--- a/src/views/api/index.vue
+++ b/src/views/api/index.vue
@@ -223,15 +223,18 @@
                           v-if="
                             (userinfo.user_sub === item.author &&
                               pluginType === 'semantic_interface') ||
-                            (userinfo.is_admin && pluginType === 'mcp')
+                            pluginType === 'mcp'
                           "
                           class="deleteAndEdit"
                         >
                           <!-- 未安装、安装失败：安装 -->
                           <el-button
                             v-if="
+                              userinfo.is_admin &&
                               pluginType === 'mcp' &&
-                              ['init', 'cancelled', 'failed'].includes(item.status)
+                              ['init', 'cancelled', 'failed'].includes(
+                                item.status,
+                              )
                             "
                             text
                             @click.stop="
@@ -247,9 +250,7 @@
                               ['ready'].includes(item.status)
                             "
                             text
-                            @click.stop="
-                              onActiveService(item.serviceId, item.isActive)
-                            "
+                            @click.stop="showActive(item)"
                           >
                             {{
                               item.isActive
@@ -260,7 +261,10 @@
                           <!-- 未安装、安装成功、安装失败：编辑 -->
                           <el-button
                             text
-                            v-if="!['installing'].includes(item.status)"
+                            v-if="
+                              userinfo.is_admin &&
+                              !['installing'].includes(item.status)
+                            "
                             @click.stop="
                               openSidebar('edit', item.serviceId, pluginType)
                             "
@@ -270,13 +274,17 @@
                           <!-- 安装中：取消 -->
                           <el-button
                             text
-                            v-if="['installing'].includes(item.status)"
-                            @click.stop="onActiveService(item.serviceId, false)"
+                            v-if="
+                              userinfo.is_admin &&
+                              ['installing'].includes(item.status)
+                            "
+                            @click.stop="onActiveService(item.serviceId, true)"
                           >
                             {{ $t('semantic.cancel') }}
                           </el-button>
                           <!-- 删除 -->
                           <el-button
+                            v-if="userinfo.is_admin"
                             text
                             @click.stop="handleDelPlugin(item.serviceId)"
                           >
@@ -355,6 +363,12 @@
       @change="handleChangePage"
     />
   </div>
+  <ActiveModel
+    v-model:visible="activeModelVisible"
+    :item="activeModelItem"
+    :title="$t('plugin_center.mcp.active_mcp_service')"
+    @do-active="doActive"
+  />
 </template>
 <script setup lang="ts">
 import { IconError } from '@computing/opendesign-icons';
@@ -375,6 +389,8 @@ import CustomLoading from '../customLoading/index.vue';
 import McpDrawer from './components/McpDrawer.vue';
 import McpServiceDetailDrawer from './components/McpServiceDetail.vue';
 import { writeText } from '@/utils';
+import ActiveModel from './components/ActiveModel.vue';
+import { ElMessage } from 'element-plus';
 
 const { t } = i18n.global;
 
@@ -383,6 +399,9 @@ const createPopover = ref();
 const mcpDrawerVisible = ref(false);
 const mcpDetailDrawerVisible = ref(false);
 
+const activeModelVisible = ref(false);
+const activeModelItem = ref({});
+
 function onOpenMcpDrawer(id?: string) {
   if (id) {
     selectedServiceId.value = id;
@@ -442,8 +461,10 @@ 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 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;
@@ -669,10 +690,33 @@ const handleDelPlugin = async (id: string) => {
   });
 };
 
-async function onActiveService(serviceId: string, active: boolean = true) {
-  const [, res] = await api.activeMcpService(serviceId, !active);
+async function showActive(item: any) {
+  if (item.isActive) {
+    onActiveService(item.serviceId, item.isActive);
+  } else {
+    const [, res] = await api.getMcpServiceDetail(item.serviceId, true);
+    if (res) {
+      activeModelVisible.value = true;
+      activeModelItem.value = res.result;
+    }
+  }
+}
+
+function doActive(form: any) {
+  onActiveService(activeModelItem.value.serviceId, false, form);
+}
+
+async function onActiveService(
+  serviceId: string,
+  active: boolean = true,
+  mcpEnv?: any,
+) {
+  loading.value = true;
+  const [, res] = await api.activeMcpService(serviceId, !active, mcpEnv);
   if (res) {
     queryList(pluginType.value);
+    ElMessage.success('Success');
+    loading.value = false;
   }
 }
 
diff --git a/src/views/createapp/components/AgentAppConfig.vue b/src/views/createapp/components/AgentAppConfig.vue
index 743158e7..ae87ec80 100644
--- a/src/views/createapp/components/AgentAppConfig.vue
+++ b/src/views/createapp/components/AgentAppConfig.vue
@@ -103,7 +103,7 @@ async function queryAgentConfig() {
     createAppForm.icon = icon || '';
     createAppForm.name = name;
     createAppForm.description = description;
-    createAppForm.mcps = mcpService || [];
+    createAppForm.mcps = mcpService?.map((item) => item.id) || [];
     createAppForm.dialogRounds = dialogRounds || 3;
     createAppForm.permission = permission || createAppForm.permission;
   }
diff --git a/src/views/createapp/components/McpDrawer.vue b/src/views/createapp/components/McpDrawer.vue
index 3739587e..36694e8f 100644
--- a/src/views/createapp/components/McpDrawer.vue
+++ b/src/views/createapp/components/McpDrawer.vue
@@ -9,8 +9,12 @@ import lightNull from '@/assets/svgs/light_null.svg';
 import DarkNull from '@/assets/svgs/dark_null.svg';
 import { storeToRefs } from 'pinia';
 import { useChangeThemeStore } from '@/store';
+import ActiveModel from '@/views/api/components/ActiveModel.vue';
 
 const { t } = i18n.global;
+const activeModelVisible = ref(false);
+const activeModelItem = ref({});
+const loading = ref(false);
 
 export interface Mcp {
   mcpserviceId: string;
@@ -51,7 +55,7 @@ const mcpList = ref<McpWithChecked[]>([]);
 const searchKeyword = ref();
 
 const mcpType = ref('all_select');
-const mcpIsActive = ref(<boolean | null> null);
+const mcpIsActive = ref(<boolean | null>null);
 /**
  * 查询MCP服务
  */
@@ -59,13 +63,13 @@ async function queryMcpList() {
   const [, res] = await api.getMcpList({
     keyword: searchKeyword.value,
     isActive: mcpIsActive.value,
-    isInstall: true
+    isInstall: true,
   });
   if (res) {
     mcpList.value = res.result.services.map((item) => {
       return {
         ...item,
-        isChecked: false,
+        isChecked: props.checkedList.includes(item.mcpserviceId),
       };
     });
   }
@@ -100,21 +104,50 @@ onMounted(() => {
   queryMcpList();
 });
 
-const handleSearchMcpList = (
-  type: 'all_select' | 'active' | 'not_active',
-) => {
+const handleSearchMcpList = (type: 'all_select' | 'active' | 'not_active') => {
   mcpType.value = type;
   if (type === 'all_select') {
     mcpIsActive.value = null;
   } else {
-    if (type === 'active'){
+    if (type === 'active') {
       mcpIsActive.value = true;
-    }else{
+    } else {
       mcpIsActive.value = false;
     }
   }
   queryMcpList();
 };
+
+async function showActive(item: any) {
+  if (item.isActive) {
+    loading.value = true;
+    onActiveService(item.mcpserviceId, item.isActive);
+  } else {
+    const [, res] = await api.getMcpServiceDetail(item.mcpserviceId, true);
+    if (res) {
+      activeModelVisible.value = true;
+      activeModelItem.value = res.result;
+    }
+  }
+}
+
+function doActive(form: any) {
+  loading.value = true;
+  onActiveService(activeModelItem.value.serviceId, false, form);
+}
+
+async function onActiveService(
+  serviceId: string,
+  active: boolean = true,
+  mcpEnv?: any,
+) {
+  const [, res] = await api.activeMcpService(serviceId, !active, mcpEnv);
+  if (res) {
+    queryMcpList();
+    ElMessage.success('Success');
+    loading.value = false;
+  }
+}
 </script>
 <template>
   <div class="prompt-drawer">
@@ -124,7 +157,7 @@ const handleSearchMcpList = (
       :model-value="visible"
       @close="emits('update:visible', false)"
     >
-      <div class="wrapper">
+      <div class="wrapper" v-loading="loading">
         <div class="search">
           <el-input
             class="search-input"
@@ -159,12 +192,27 @@ const handleSearchMcpList = (
         <div class="mcp-list" v-if="mcpList.length">
           <template v-for="item in mcpList" :key="item.id">
             <div class="mcp-item" @click="onMcpItemClick(item)">
-              <el-checkbox v-model="item.isChecked" :disabled="!item.isActive" @click.stop />
+              <el-checkbox
+                v-model="item.isChecked"
+                :disabled="!item.isActive"
+                @click.stop
+              />
               <img :src="item.icon" alt="" />
               <div>
                 <p>{{ item.name }}</p>
                 <p>{{ item.description }}</p>
               </div>
+              <el-button
+                text
+                @click.stop="showActive(item)"
+                class="mcp-item-status"
+              >
+                {{
+                  item.isActive
+                    ? t('plugin_center.mcp.deactivate')
+                    : t('plugin_center.mcp.activate')
+                }}
+              </el-button>
             </div>
           </template>
         </div>
@@ -186,6 +234,12 @@ const handleSearchMcpList = (
       </template>
     </el-drawer>
   </div>
+  <ActiveModel
+    v-model:visible="activeModelVisible"
+    :item="activeModelItem"
+    :title="$t('plugin_center.mcp.active_mcp_service')"
+    @do-active="doActive"
+  />
 </template>
 <style lang="scss" scoped>
 .prompt-drawer {
@@ -235,6 +289,12 @@ const handleSearchMcpList = (
       flex-direction: column;
       margin: 16px 0;
       gap: 8px;
+
+      .mcp-item-status {
+        margin-left: auto;
+        padding-left: 16px;
+      }
+
       .mcp-item {
         display: flex;
         align-items: center;
-- 
Gitee