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:
@@ -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>
|
||||||
|
|||||||
@@ -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 */}
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
@@ -12,6 +12,7 @@
|
|||||||
"cancel": "取消",
|
"cancel": "取消",
|
||||||
"confirm": "确定",
|
"confirm": "确定",
|
||||||
"close": "关闭",
|
"close": "关闭",
|
||||||
|
"done": "完成",
|
||||||
"settings": "设置",
|
"settings": "设置",
|
||||||
"about": "关于",
|
"about": "关于",
|
||||||
"version": "版本",
|
"version": "版本",
|
||||||
|
|||||||
Reference in New Issue
Block a user