feat(web): improve MCP details page

packages/web/src/components/key-value-editor/index.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { Button, Input } from '@memoh/ui'
+
+export interface KeyValuePair {
+  key: string
+  value: string
+}
+
+const props = withDefaults(defineProps<{
+  modelValue: KeyValuePair[]
+  keyPlaceholder?: string
+  valuePlaceholder?: string
+  readonly?: boolean
+}>(), {
+  keyPlaceholder: 'Key',
+  valuePlaceholder: 'Value',
+  readonly: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: KeyValuePair[]]
+}>()
+
+function updateRow(index: number, field: 'key' | 'value', val: string) {
+  const list = [...props.modelValue]
+  list[index] = { ...list[index], [field]: val }
+  emit('update:modelValue', list)
+}
+
+function addRow() {
+  emit('update:modelValue', [...props.modelValue, { key: '', value: '' }])
+}
+
+function removeRow(index: number) {
+  const list = [...props.modelValue]
+  list.splice(index, 1)
+  emit('update:modelValue', list)
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <div
+      v-for="(pair, index) in modelValue"
+      :key="index"
+      class="flex items-center gap-2"
+    >
+      <Input
+        :model-value="pair.key"
+        :placeholder="keyPlaceholder"
+        :readonly="readonly"
+        class="flex-1 font-mono text-xs"
+        @update:model-value="(val) => updateRow(index, 'key', String(val))"
+      />
+      <Input
+        :model-value="pair.value"
+        :placeholder="valuePlaceholder"
+        :readonly="readonly"
+        class="flex-1 font-mono text-xs"
+        @update:model-value="(val) => updateRow(index, 'value', String(val))"
+      />
+      <Button
+        v-if="!readonly"
+        type="button"
+        variant="ghost"
+        size="icon"
+        class="shrink-0 size-8 text-muted-foreground hover:text-destructive"
+        @click="removeRow(index)"
+      >
+        <FontAwesomeIcon :icon="['fas', 'xmark']" />
+      </Button>
+    </div>
+    <Button
+      v-if="!readonly"
+      type="button"
+      variant="outline"
+      size="sm"
+      class="w-fit"
+      @click="addRow"
+    >
+      <FontAwesomeIcon
+        :icon="['fas', 'plus']"
+        class="mr-1.5"
+      />
+      {{ $t('common.add') }}
+    </Button>
+  </div>
+</template>

packages/web/src/i18n/locales/en.json

@@ -241,10 +241,13 @@
   "mcp": {
     "addTitle": "Add MCP",
     "addDescription": "Configure MCP server connection",
+    "searchPlaceholder": "Search MCP servers...",
+    "emptyTitle": "No MCP Servers",
+    "emptyDescription": "Add an MCP server to extend your bot's capabilities",
     "command": "Command",
     "commandPlaceholder": "Enter start command",
     "arguments": "Arguments",
-    "argumentsPlaceholder": "Enter arguments",
+    "argumentsPlaceholder": "Type and press Enter to add",
     "cwd": "Working Directory",
     "cwdPlaceholder": "Enter working directory path",
     "env": "Environment",
@@ -260,6 +263,7 @@
       "arguments": "Arguments",
       "env": "Environment"
     },
+    "draft": "Draft",
     "empty": "No MCP servers configured yet.",
     "deleteConfirm": "Are you sure you want to delete this MCP server?",
     "loadFailed": "Failed to load MCP servers",

packages/web/src/i18n/locales/zh.json

@@ -237,10 +237,13 @@
   "mcp": {
     "addTitle": "添加 MCP",
     "addDescription": "配置 MCP 服务器连接",
+    "searchPlaceholder": "搜索 MCP 服务器...",
+    "emptyTitle": "暂无 MCP 服务器",
+    "emptyDescription": "添加 MCP 服务器以扩展 Bot 的能力",
     "command": "命令",
     "commandPlaceholder": "输入启动命令",
     "arguments": "参数",
-    "argumentsPlaceholder": "输入启动参数",
+    "argumentsPlaceholder": "输入后按 Enter 添加",
     "cwd": "工作目录",
     "cwdPlaceholder": "输入工作目录路径",
     "env": "环境变量",
@@ -256,6 +259,7 @@
       "arguments": "参数",
       "env": "环境变量"
     },
+    "draft": "草稿",
     "empty": "暂未配置 MCP 服务器。",
     "deleteConfirm": "确定要删除这个 MCP 服务器吗？",
     "loadFailed": "加载 MCP 服务器列表失败",

packages/web/src/pages/bots/detail.vue

@@ -137,6 +137,16 @@
               </KeepAlive>
             </div>
           </template>
+          <template v-else-if="activeTab === 'mcp'">
+            <div class="h-full relative">
+              <KeepAlive>
+                <BotMcp
+                  :bot-id="botId"
+                  :bot-type="bot?.type"
+                />
+              </KeepAlive>
+            </div>
+          </template>
           <ScrollArea
             v-else
             class="max-h-full h-full"