From 7f1131dfaea916d76cee192e5079ffacf5667ec3 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Fri, 10 Oct 2025 11:58:40 +0800
Subject: [PATCH] refactor(mcp): improve UI consistency and i18n
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add MCP-specific green button style (buttonStyles.mcp)
- Unify MCP panel and form buttons with emerald theme
- Adjust MCP entry button width to match AppSwitcher (px-3)
- Reduce JSON editor height from h-64 to h-48
- Update translations: "Add/Edit Server" → "Add/Edit MCP"
- Change form label to "MCP Title (Unique)" for clarity
- Move config wizard button to right side of JSON label
- Fix McpListItem enabled state check (explicit true check)
---
 src/App.tsx                         | 10 +++++-----
 src/components/mcp/McpFormModal.tsx |  6 +++---
 src/components/mcp/McpListItem.tsx  |  4 ++--
 src/components/mcp/McpPanel.tsx     |  4 ++--
 src/i18n/locales/en.json            |  8 ++++----
 src/i18n/locales/zh.json            |  8 ++++----
 src/lib/styles.ts                   |  4 ++++
 7 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index af9e551..d71c732 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -23,7 +23,7 @@ function App() {
   const [currentProviderId, setCurrentProviderId] = useState<string>("");
   const [isAddModalOpen, setIsAddModalOpen] = useState(false);
   const [editingProviderId, setEditingProviderId] = useState<string | null>(
-    null,
+    null
   );
   const [notification, setNotification] = useState<{
     message: string;
@@ -44,7 +44,7 @@ function App() {
   const showNotification = (
     message: string,
     type: "success" | "error",
-    duration = 3000,
+    duration = 3000
   ) => {
     // 清除之前的定时器
     if (timeoutRef.current) {
@@ -196,7 +196,7 @@ function App() {
             ? t("notifications.removedFromClaudePlugin")
             : t("notifications.appliedToClaudePlugin"),
           "success",
-          2000,
+          2000
         );
       }
     } catch (error: any) {
@@ -219,7 +219,7 @@ function App() {
         showNotification(
           t("notifications.switchSuccess", { appName }),
           "success",
-          2000,
+          2000
         );
         // 更新托盘菜单
         await window.api.updateTrayMenu();
@@ -310,7 +310,7 @@ function App() {
 
             <button
               onClick={() => setIsMcpOpen(true)}
-              className="inline-flex items-center gap-2 px-6 py-2 text-sm font-medium rounded-md transition-colors bg-emerald-500 text-white hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-700"
+              className="inline-flex items-center gap-2 px-7 py-2 text-sm font-medium rounded-lg transition-colors bg-emerald-500 text-white hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-700"
             >
               MCP
             </button>
diff --git a/src/components/mcp/McpFormModal.tsx b/src/components/mcp/McpFormModal.tsx
index 6b09858..89260f2 100644
--- a/src/components/mcp/McpFormModal.tsx
+++ b/src/components/mcp/McpFormModal.tsx
@@ -244,13 +244,13 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
               <button
                 type="button"
                 onClick={() => setIsWizardOpen(true)}
-                className="text-xs text-blue-500 dark:text-blue-400 hover:text-blue-600 dark:hover:text-blue-300 transition-colors"
+                className="text-sm text-blue-500 dark:text-blue-400 hover:text-blue-600 dark:hover:text-blue-300 transition-colors"
               >
                 {t("mcp.form.useWizard")}
               </button>
             </div>
             <textarea
-              className={`${inputStyles.text} h-64 resize-none font-mono text-xs`}
+              className={`${inputStyles.text} h-48 resize-none font-mono text-xs`}
               placeholder={t("mcp.form.jsonPlaceholder")}
               value={formJson}
               onChange={(e) => handleJsonChange(e.target.value)}
@@ -272,7 +272,7 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
           <button
             onClick={handleSubmit}
             disabled={saving || (!isEditing && !!idError)}
-            className={buttonStyles.primary}
+            className={`inline-flex items-center gap-2 ${buttonStyles.mcp}`}
           >
             <Save size={16} />
             {saving
diff --git a/src/components/mcp/McpListItem.tsx b/src/components/mcp/McpListItem.tsx
index 757182a..2d1a18e 100644
--- a/src/components/mcp/McpListItem.tsx
+++ b/src/components/mcp/McpListItem.tsx
@@ -26,8 +26,8 @@ const McpListItem: React.FC<McpListItemProps> = ({
 }) => {
   const { t } = useTranslation();
 
-  // 默认启用
-  const enabled = server.enabled !== false;
+  // 仅当显式为 true 时视为启用；避免 undefined 被误判为启用
+  const enabled = server.enabled === true;
 
   // 只显示 description，没有则留空
   const description = (server as any).description || "";
diff --git a/src/components/mcp/McpPanel.tsx b/src/components/mcp/McpPanel.tsx
index 8da1867..106d2e8 100644
--- a/src/components/mcp/McpPanel.tsx
+++ b/src/components/mcp/McpPanel.tsx
@@ -8,7 +8,7 @@ import { ConfirmDialog } from "../ConfirmDialog";
 import { extractErrorMessage } from "../../utils/errorUtils";
 import { mcpPresets } from "../../config/mcpPresets";
 import McpToggle from "./McpToggle";
-import { cardStyles, cn } from "../../lib/styles";
+import { buttonStyles, cardStyles, cn } from "../../lib/styles";
 
 interface McpPanelProps {
   onClose: () => void;
@@ -178,7 +178,7 @@ const McpPanel: React.FC<McpPanelProps> = ({ onClose, onNotify }) => {
           <div className="flex items-center gap-3">
             <button
               onClick={handleAdd}
-              className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md bg-emerald-500 text-white hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-700 transition-colors"
+              className={`inline-flex items-center gap-2 ${buttonStyles.mcp}`}
             >
               <Plus size={16} />
               {t("mcp.add")}
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index b3e56d1..35da935 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -258,21 +258,21 @@
     "empty": "No MCP servers",
     "emptyDescription": "Click the button in the top right to add your first MCP server",
     "add": "Add MCP",
-    "addServer": "Add Server",
-    "editServer": "Edit Server",
+    "addServer": "Add MCP",
+    "editServer": "Edit MCP",
     "configPath": "Config Path",
     "serverCount": "{{count}} MCP server(s) configured",
     "template": {
       "fetch": "Quick Template: mcp-fetch"
     },
     "form": {
-      "title": "Server Title",
+      "title": "MCP Title (Unique)",
       "titlePlaceholder": "my-mcp-server",
       "description": "Description",
       "descriptionPlaceholder": "Optional description",
       "jsonConfig": "JSON Configuration",
       "jsonPlaceholder": "{\n  \"type\": \"stdio\",\n  \"command\": \"uvx\",\n  \"args\": [\"mcp-server-fetch\"]\n}",
-      "useWizard": "or use configuration wizard"
+      "useWizard": "Config Wizard"
     },
     "wizard": {
       "title": "MCP Configuration Wizard",
diff --git a/src/i18n/locales/zh.json b/src/i18n/locales/zh.json
index 3d979da..66f442c 100644
--- a/src/i18n/locales/zh.json
+++ b/src/i18n/locales/zh.json
@@ -258,21 +258,21 @@
     "empty": "暂无 MCP 服务器",
     "emptyDescription": "点击右上角按钮添加第一个 MCP 服务器",
     "add": "添加 MCP",
-    "addServer": "新增服务器",
-    "editServer": "编辑服务器",
+    "addServer": "新增 MCP",
+    "editServer": "编辑 MCP",
     "configPath": "配置路径",
     "serverCount": "已配置 {{count}} 个 MCP 服务器",
     "template": {
       "fetch": "快速模板：mcp-fetch"
     },
     "form": {
-      "title": "服务器标题",
+      "title": "MCP 标题（唯一）",
       "titlePlaceholder": "my-mcp-server",
       "description": "描述",
       "descriptionPlaceholder": "可选的描述信息",
       "jsonConfig": "JSON 配置",
       "jsonPlaceholder": "{\n  \"type\": \"stdio\",\n  \"command\": \"uvx\",\n  \"args\": [\"mcp-server-fetch\"]\n}",
-      "useWizard": "或者使用配置向导"
+      "useWizard": "配置向导"
     },
     "wizard": {
       "title": "MCP 配置向导",
diff --git a/src/lib/styles.ts b/src/lib/styles.ts
index 4fd257b..d85e9c6 100644
--- a/src/lib/styles.ts
+++ b/src/lib/styles.ts
@@ -16,6 +16,10 @@ export const buttonStyles = {
   danger:
     "px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700 transition-colors text-sm font-medium",
 
+  // MCP 专属按钮：绿底白字
+  mcp:
+    "px-4 py-2 bg-emerald-500 text-white rounded-lg hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-700 transition-colors text-sm font-medium",
+
   // 幽灵按钮：无背景，仅悬浮反馈
   ghost:
     "px-4 py-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors text-sm font-medium",