From 81356cacee0b6af0636fd7af2788110b99185d71 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Fri, 10 Oct 2025 23:57:38 +0800
Subject: [PATCH] feat(mcp): unify modal styles and add footer with done button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Unify McpFormModal width to max-w-3xl (consistent with provider form)
- Add scrollable container with max-h-[90vh] to McpFormModal
- Add footer section to both McpFormModal and McpPanel
- Add "Done" button with emerald theme and check icon to McpPanel footer
- Add i18n keys for "common.done" (zh: "完成", en: "Done")
- Apply consistent footer styling across all modals
---
 src/components/mcp/McpFormModal.tsx | 10 +++++-----
 src/components/mcp/McpPanel.tsx     | 15 +++++++++++++--
 src/i18n/locales/en.json            |  1 +
 src/i18n/locales/zh.json            |  1 +
 4 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/components/mcp/McpFormModal.tsx b/src/components/mcp/McpFormModal.tsx
index 2bb0ff2..f1dec70 100644
--- a/src/components/mcp/McpFormModal.tsx
+++ b/src/components/mcp/McpFormModal.tsx
@@ -241,9 +241,9 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
       />
 
       {/* Modal */}
-      <div className="relative bg-white dark:bg-gray-900 rounded-xl shadow-lg max-w-2xl w-full mx-4 overflow-hidden">
+      <div className="relative bg-white dark:bg-gray-900 rounded-xl shadow-lg max-w-3xl w-full mx-4 max-h-[90vh] overflow-hidden flex flex-col">
         {/* Header */}
-        <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-800">
+        <div className="flex-shrink-0 flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-800">
           <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
             {getFormTitle()}
           </h3>
@@ -255,8 +255,8 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
           </button>
         </div>
 
-        {/* Content */}
-        <div className="p-6 space-y-4">
+        {/* Content - Scrollable */}
+        <div className="flex-1 overflow-y-auto p-6 space-y-4">
           {/* 预设选择（仅新增时展示） */}
           {!isEditing && (
             <div className="space-y-2">
@@ -356,7 +356,7 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
         </div>
 
         {/* Footer */}
-        <div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200 dark:border-gray-800">
+        <div className="flex-shrink-0 flex items-center justify-end gap-3 p-6 border-t border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-800">
           <button onClick={onClose} className={buttonStyles.secondary}>
             {t("common.cancel")}
           </button>
diff --git a/src/components/mcp/McpPanel.tsx b/src/components/mcp/McpPanel.tsx
index ff19b71..ec0ab44 100644
--- a/src/components/mcp/McpPanel.tsx
+++ b/src/components/mcp/McpPanel.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { X, Plus, Server } from "lucide-react";
+import { X, Plus, Server, Check } from "lucide-react";
 import { McpServer } from "../../types";
 import McpListItem from "./McpListItem";
 import McpFormModal from "./McpFormModal";
@@ -241,12 +241,23 @@ const McpPanel: React.FC<McpPanelProps> = ({ onClose, onNotify, appType }) => {
                     />
                   ))}
 
-                  {/* 预设已移至“新增 MCP”面板中展示与套用 */}
+                  {/* 预设已移至"新增 MCP"面板中展示与套用 */}
                 </div>
               );
             })()
           )}
         </div>
+
+        {/* Footer */}
+        <div className="flex-shrink-0 flex items-center justify-end p-6 border-t border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-800">
+          <button
+            onClick={onClose}
+            className={`inline-flex items-center gap-2 ${buttonStyles.mcp}`}
+          >
+            <Check size={16} />
+            {t("common.done")}
+          </button>
+        </div>
       </div>
 
       {/* Form Modal */}
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 3b099b3..e36c4b0 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -12,6 +12,7 @@
     "cancel": "Cancel",
     "confirm": "Confirm",
     "close": "Close",
+    "done": "Done",
     "settings": "Settings",
     "about": "About",
     "version": "Version",
diff --git a/src/i18n/locales/zh.json b/src/i18n/locales/zh.json
index c676a97..5a45aa5 100644
--- a/src/i18n/locales/zh.json
+++ b/src/i18n/locales/zh.json
@@ -12,6 +12,7 @@
     "cancel": "取消",
     "confirm": "确定",
     "close": "关闭",
+    "done": "完成",
     "settings": "设置",
     "about": "关于",
     "version": "版本",