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

@@ -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 */}