feat(mcp): unify modal styles and add footer with done button

- 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
This commit is contained in:
Jason
2025-10-10 23:57:38 +08:00
parent 3b142155c3
commit 81356cacee
4 changed files with 20 additions and 7 deletions

View File

@@ -241,9 +241,9 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
/> />
{/* Modal */} {/* 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 */} {/* 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"> <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
{getFormTitle()} {getFormTitle()}
</h3> </h3>
@@ -255,8 +255,8 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
</button> </button>
</div> </div>
{/* Content */} {/* Content - Scrollable */}
<div className="p-6 space-y-4"> <div className="flex-1 overflow-y-auto p-6 space-y-4">
{/* 预设选择(仅新增时展示) */} {/* 预设选择(仅新增时展示) */}
{!isEditing && ( {!isEditing && (
<div className="space-y-2"> <div className="space-y-2">
@@ -356,7 +356,7 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
</div> </div>
{/* Footer */} {/* 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}> <button onClick={onClose} className={buttonStyles.secondary}>
{t("common.cancel")} {t("common.cancel")}
</button> </button>

View File

@@ -1,6 +1,6 @@
import React, { useEffect, useMemo, useState } from "react"; import React, { useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next"; 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 { McpServer } from "../../types";
import McpListItem from "./McpListItem"; import McpListItem from "./McpListItem";
import McpFormModal from "./McpFormModal"; import McpFormModal from "./McpFormModal";
@@ -241,12 +241,23 @@ const McpPanel: React.FC<McpPanelProps> = ({ onClose, onNotify, appType }) => {
/> />
))} ))}
{/* 预设已移至新增 MCP面板中展示与套用 */} {/* 预设已移至"新增 MCP"面板中展示与套用 */}
</div> </div>
); );
})() })()
)} )}
</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> </div>
{/* Form Modal */} {/* Form Modal */}

View File

@@ -12,6 +12,7 @@
"cancel": "Cancel", "cancel": "Cancel",
"confirm": "Confirm", "confirm": "Confirm",
"close": "Close", "close": "Close",
"done": "Done",
"settings": "Settings", "settings": "Settings",
"about": "About", "about": "About",
"version": "Version", "version": "Version",

View File

@@ -12,6 +12,7 @@
"cancel": "取消", "cancel": "取消",
"confirm": "确定", "confirm": "确定",
"close": "关闭", "close": "关闭",
"done": "完成",
"settings": "设置", "settings": "设置",
"about": "关于", "about": "关于",
"version": "版本", "version": "版本",