From 92528e6a9fd4d96ba866959ffea651adb4cf7ad8 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Thu, 16 Oct 2025 16:20:45 +0800
Subject: [PATCH] refactor: migrate all MCP dialogs to shadcn/ui Dialog
 component

Convert all MCP-related modal windows to use the unified shadcn/ui Dialog
component for consistency with the rest of the application.

Changes:
- McpPanel: Replace custom modal with Dialog component
  - Update props from onClose to open/onOpenChange pattern
  - Use DialogContent, DialogHeader, DialogTitle components
  - Remove custom backdrop and close button (handled by Dialog)

- McpFormModal: Migrate form modal to Dialog
  - Wrap entire form in Dialog component structure
  - Use DialogFooter for action buttons
  - Apply variant="mcp" to maintain green button styling
  - Remove unused X icon import

- McpWizardModal: Convert wizard to Dialog
  - Replace custom modal structure with Dialog components
  - Use Button component with variant="mcp" for consistency
  - Remove unused isLinux and X icon imports

- App.tsx: Update McpPanel usage
  - Remove conditional rendering wrapper
  - Pass open and onOpenChange props directly

- dialog.tsx: Fix dialog overlay and content styling
  - Change overlay from bg-background/80 to bg-black/50 for consistency
  - Change content from bg-background to explicit bg-white dark:bg-gray-900
  - Ensures opaque backgrounds matching MCP panel style

Benefits:
- Unified dialog behavior across the application
- Consistent styling and animations
- Better accessibility with Radix UI primitives
- Reduced code duplication
- Maintains MCP-specific green color scheme

All dialogs now share the same base styling while preserving their unique
content and functionality.
---
 src/App.tsx                           |  13 +-
 src/components/mcp/McpFormModal.tsx   | 498 +++++++++++++-------------
 src/components/mcp/McpPanel.tsx       | 185 +++++-----
 src/components/mcp/McpWizardModal.tsx |  75 ++--
 src/components/ui/dialog.tsx          |   4 +-
 5 files changed, 372 insertions(+), 403 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index cec3f12..90e4e5b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -333,13 +333,12 @@ function App() {
         onImportSuccess={handleImportSuccess}
       />
 
-      {isMcpOpen && (
-        <McpPanel
-          appType={activeApp}
-          onClose={() => setIsMcpOpen(false)}
-          onNotify={handleNotify}
-        />
-      )}
+      <McpPanel
+        open={isMcpOpen}
+        onOpenChange={setIsMcpOpen}
+        appType={activeApp}
+        onNotify={handleNotify}
+      />
     </div>
   );
 }
diff --git a/src/components/mcp/McpFormModal.tsx b/src/components/mcp/McpFormModal.tsx
index 36d6c76..a5bcd30 100644
--- a/src/components/mcp/McpFormModal.tsx
+++ b/src/components/mcp/McpFormModal.tsx
@@ -1,7 +1,6 @@
 import React, { useMemo, useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import {
-  X,
   Save,
   AlertCircle,
   ChevronDown,
@@ -9,6 +8,13 @@ import {
   AlertTriangle,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { mcpApi, type AppType } from "@/lib/api";
@@ -495,267 +501,255 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
   };
 
   return (
-    <div className="fixed inset-0 z-[60] flex items-center justify-center">
-      {/* Backdrop */}
-      <div
-        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
-        onClick={onClose}
-      />
+    <>
+      <Dialog open={true} onOpenChange={(open) => !open && onClose()}>
+        <DialogContent className="max-w-3xl max-h-[90vh] flex flex-col">
+          <DialogHeader>
+            <DialogTitle>{getFormTitle()}</DialogTitle>
+          </DialogHeader>
 
-      {/* Modal */}
-      <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-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>
-          <button
-            onClick={onClose}
-            className="p-1 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-md transition-colors"
-          >
-            <X size={18} />
-          </button>
-        </div>
-
-        {/* Content - Scrollable */}
-        <div className="flex-1 overflow-y-auto p-6 space-y-4">
-          {/* 预设选择（仅新增时展示） */}
-          {!isEditing && (
-            <div>
-              <label className="block text-sm font-medium text-gray-900 dark:text-gray-100 mb-3">
-                {t("mcp.presets.title")}
-              </label>
-              <div className="flex flex-wrap gap-2">
-                <button
-                  type="button"
-                  onClick={applyCustom}
-                  className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
-                    selectedPreset === -1
-                      ? "bg-emerald-500 text-white dark:bg-emerald-600"
-                      : "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
-                  }`}
-                >
-                  {t("presetSelector.custom")}
-                </button>
-                {mcpPresets.map((preset, idx) => {
-                  const descriptionKey = `mcp.presets.${preset.id}.description`;
-                  return (
-                    <button
-                      key={preset.id}
-                      type="button"
-                      onClick={() => applyPreset(idx)}
-                      className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
-                        selectedPreset === idx
-                          ? "bg-emerald-500 text-white dark:bg-emerald-600"
-                          : "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
-                      }`}
-                      title={t(descriptionKey)}
-                    >
-                      {preset.id}
-                    </button>
-                  );
-                })}
-              </div>
-            </div>
-          )}
-          {/* ID (标题) */}
-          <div>
-            <div className="flex items-center justify-between mb-2">
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
-                {t("mcp.form.title")} <span className="text-red-500">*</span>
-              </label>
-              {!isEditing && idError && (
-                <span className="text-xs text-red-500 dark:text-red-400">
-                  {idError}
-                </span>
-              )}
-            </div>
-            <Input
-              type="text"
-              placeholder={t("mcp.form.titlePlaceholder")}
-              value={formId}
-              onChange={(e) => handleIdChange(e.target.value)}
-              disabled={isEditing}
-            />
-          </div>
-
-          {/* Name */}
-          <div>
-            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-              {t("mcp.form.name")}
-            </label>
-            <Input
-              type="text"
-              placeholder={t("mcp.form.namePlaceholder")}
-              value={formName}
-              onChange={(e) => setFormName(e.target.value)}
-            />
-          </div>
-
-          {/* 可折叠的附加信息按钮 */}
-          <div>
-            <button
-              type="button"
-              onClick={() => setShowMetadata(!showMetadata)}
-              className="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
-            >
-              {showMetadata ? (
-                <ChevronUp size={16} />
-              ) : (
-                <ChevronDown size={16} />
-              )}
-              {t("mcp.form.additionalInfo")}
-            </button>
-          </div>
-
-          {/* 附加信息区域（可折叠） */}
-          {showMetadata && (
-            <>
-              {/* Description (描述) */}
+          {/* Content - Scrollable */}
+          <div className="flex-1 overflow-y-auto -mx-6 px-6 space-y-4">
+            {/* 预设选择（仅新增时展示） */}
+            {!isEditing && (
               <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                  {t("mcp.form.description")}
+                <label className="block text-sm font-medium text-gray-900 dark:text-gray-100 mb-3">
+                  {t("mcp.presets.title")}
                 </label>
-                <Input
-                  type="text"
-                  placeholder={t("mcp.form.descriptionPlaceholder")}
-                  value={formDescription}
-                  onChange={(e) => setFormDescription(e.target.value)}
-                />
-              </div>
-
-              {/* Tags */}
-              <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                  {t("mcp.form.tags")}
-                </label>
-                <Input
-                  type="text"
-                  placeholder={t("mcp.form.tagsPlaceholder")}
-                  value={formTags}
-                  onChange={(e) => setFormTags(e.target.value)}
-                />
-              </div>
-
-              {/* Homepage */}
-              <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                  {t("mcp.form.homepage")}
-                </label>
-                <Input
-                  type="text"
-                  placeholder={t("mcp.form.homepagePlaceholder")}
-                  value={formHomepage}
-                  onChange={(e) => setFormHomepage(e.target.value)}
-                />
-              </div>
-
-              {/* Docs */}
-              <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                  {t("mcp.form.docs")}
-                </label>
-                <Input
-                  type="text"
-                  placeholder={t("mcp.form.docsPlaceholder")}
-                  value={formDocs}
-                  onChange={(e) => setFormDocs(e.target.value)}
-                />
-              </div>
-            </>
-          )}
-
-          {/* 配置输入框（根据格式显示 JSON 或 TOML） */}
-          <div>
-            <div className="flex items-center justify-between mb-2">
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
-                {useToml ? t("mcp.form.tomlConfig") : t("mcp.form.jsonConfig")}
-              </label>
-              {(isEditing || selectedPreset === -1) && (
-                <button
-                  type="button"
-                  onClick={() => setIsWizardOpen(true)}
-                  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="h-48 resize-none font-mono text-xs"
-              placeholder={
-                useToml
-                  ? t("mcp.form.tomlPlaceholder")
-                  : t("mcp.form.jsonPlaceholder")
-              }
-              value={formConfig}
-              onChange={(e) => handleConfigChange(e.target.value)}
-            />
-            {configError && (
-              <div className="flex items-center gap-2 mt-2 text-red-500 dark:text-red-400 text-sm">
-                <AlertCircle size={16} />
-                <span>{configError}</span>
+                <div className="flex flex-wrap gap-2">
+                  <button
+                    type="button"
+                    onClick={applyCustom}
+                    className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                      selectedPreset === -1
+                        ? "bg-emerald-500 text-white dark:bg-emerald-600"
+                        : "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
+                    }`}
+                  >
+                    {t("presetSelector.custom")}
+                  </button>
+                  {mcpPresets.map((preset, idx) => {
+                    const descriptionKey = `mcp.presets.${preset.id}.description`;
+                    return (
+                      <button
+                        key={preset.id}
+                        type="button"
+                        onClick={() => applyPreset(idx)}
+                        className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                          selectedPreset === idx
+                            ? "bg-emerald-500 text-white dark:bg-emerald-600"
+                            : "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
+                        }`}
+                        title={t(descriptionKey)}
+                      >
+                        {preset.id}
+                      </button>
+                    );
+                  })}
+                </div>
               </div>
             )}
-          </div>
-        </div>
-
-        {/* Footer */}
-        <div className="flex-shrink-0 flex items-center justify-between p-6 border-t border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-800">
-          {/* 双端同步选项 */}
-          <div className="flex items-center gap-3">
-            <div className="flex items-center gap-2">
-              <input
-                id={syncCheckboxId}
-                type="checkbox"
-                className="h-4 w-4 rounded border-gray-300 text-emerald-600 focus:ring-emerald-500 dark:border-gray-600 dark:bg-gray-800"
-                checked={syncOtherSide}
-                onChange={(event) => setSyncOtherSide(event.target.checked)}
+            {/* ID (标题) */}
+            <div>
+              <div className="flex items-center justify-between mb-2">
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                  {t("mcp.form.title")} <span className="text-red-500">*</span>
+                </label>
+                {!isEditing && idError && (
+                  <span className="text-xs text-red-500 dark:text-red-400">
+                    {idError}
+                  </span>
+                )}
+              </div>
+              <Input
+                type="text"
+                placeholder={t("mcp.form.titlePlaceholder")}
+                value={formId}
+                onChange={(e) => handleIdChange(e.target.value)}
+                disabled={isEditing}
               />
-              <label
-                htmlFor={syncCheckboxId}
-                className="text-sm text-gray-700 dark:text-gray-300 cursor-pointer select-none"
-                title={t("mcp.form.syncOtherSideHint", {
-                  target: syncTargetLabel,
-                })}
-              >
-                {t("mcp.form.syncOtherSide", { target: syncTargetLabel })}
-              </label>
             </div>
-            {syncOtherSide && otherSideHasConflict && (
-              <div className="flex items-center gap-1.5 text-amber-600 dark:text-amber-400">
-                <AlertTriangle size={14} />
-                <span className="text-xs font-medium">
-                  {t("mcp.form.willOverwriteWarning", {
+
+            {/* Name */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                {t("mcp.form.name")}
+              </label>
+              <Input
+                type="text"
+                placeholder={t("mcp.form.namePlaceholder")}
+                value={formName}
+                onChange={(e) => setFormName(e.target.value)}
+              />
+            </div>
+
+            {/* 可折叠的附加信息按钮 */}
+            <div>
+              <button
+                type="button"
+                onClick={() => setShowMetadata(!showMetadata)}
+                className="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
+              >
+                {showMetadata ? (
+                  <ChevronUp size={16} />
+                ) : (
+                  <ChevronDown size={16} />
+                )}
+                {t("mcp.form.additionalInfo")}
+              </button>
+            </div>
+
+            {/* 附加信息区域（可折叠） */}
+            {showMetadata && (
+              <>
+                {/* Description (描述) */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                    {t("mcp.form.description")}
+                  </label>
+                  <Input
+                    type="text"
+                    placeholder={t("mcp.form.descriptionPlaceholder")}
+                    value={formDescription}
+                    onChange={(e) => setFormDescription(e.target.value)}
+                  />
+                </div>
+
+                {/* Tags */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                    {t("mcp.form.tags")}
+                  </label>
+                  <Input
+                    type="text"
+                    placeholder={t("mcp.form.tagsPlaceholder")}
+                    value={formTags}
+                    onChange={(e) => setFormTags(e.target.value)}
+                  />
+                </div>
+
+                {/* Homepage */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                    {t("mcp.form.homepage")}
+                  </label>
+                  <Input
+                    type="text"
+                    placeholder={t("mcp.form.homepagePlaceholder")}
+                    value={formHomepage}
+                    onChange={(e) => setFormHomepage(e.target.value)}
+                  />
+                </div>
+
+                {/* Docs */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                    {t("mcp.form.docs")}
+                  </label>
+                  <Input
+                    type="text"
+                    placeholder={t("mcp.form.docsPlaceholder")}
+                    value={formDocs}
+                    onChange={(e) => setFormDocs(e.target.value)}
+                  />
+                </div>
+              </>
+            )}
+
+            {/* 配置输入框（根据格式显示 JSON 或 TOML） */}
+            <div>
+              <div className="flex items-center justify-between mb-2">
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                  {useToml
+                    ? t("mcp.form.tomlConfig")
+                    : t("mcp.form.jsonConfig")}
+                </label>
+                {(isEditing || selectedPreset === -1) && (
+                  <button
+                    type="button"
+                    onClick={() => setIsWizardOpen(true)}
+                    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="h-48 resize-none font-mono text-xs"
+                placeholder={
+                  useToml
+                    ? t("mcp.form.tomlPlaceholder")
+                    : t("mcp.form.jsonPlaceholder")
+                }
+                value={formConfig}
+                onChange={(e) => handleConfigChange(e.target.value)}
+              />
+              {configError && (
+                <div className="flex items-center gap-2 mt-2 text-red-500 dark:text-red-400 text-sm">
+                  <AlertCircle size={16} />
+                  <span>{configError}</span>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Footer */}
+          <DialogFooter className="flex-col sm:flex-row sm:justify-between gap-3 pt-4">
+            {/* 双端同步选项 */}
+            <div className="flex items-center gap-3">
+              <div className="flex items-center gap-2">
+                <input
+                  id={syncCheckboxId}
+                  type="checkbox"
+                  className="h-4 w-4 rounded border-gray-300 text-emerald-600 focus:ring-emerald-500 dark:border-gray-600 dark:bg-gray-800"
+                  checked={syncOtherSide}
+                  onChange={(event) => setSyncOtherSide(event.target.checked)}
+                />
+                <label
+                  htmlFor={syncCheckboxId}
+                  className="text-sm text-gray-700 dark:text-gray-300 cursor-pointer select-none"
+                  title={t("mcp.form.syncOtherSideHint", {
                     target: syncTargetLabel,
                   })}
-                </span>
+                >
+                  {t("mcp.form.syncOtherSide", { target: syncTargetLabel })}
+                </label>
               </div>
-            )}
-          </div>
+              {syncOtherSide && otherSideHasConflict && (
+                <div className="flex items-center gap-1.5 text-amber-600 dark:text-amber-400">
+                  <AlertTriangle size={14} />
+                  <span className="text-xs font-medium">
+                    {t("mcp.form.willOverwriteWarning", {
+                      target: syncTargetLabel,
+                    })}
+                  </span>
+                </div>
+              )}
+            </div>
 
-          {/* 操作按钮 */}
-          <div className="flex items-center gap-3">
-            <Button type="button" variant="ghost" size="sm" onClick={onClose}>
-              {t("common.cancel")}
-            </Button>
-            <Button
-              type="button"
-              size="sm"
-              onClick={handleSubmit}
-              disabled={saving || (!isEditing && !!idError)}
-              className="bg-emerald-500 text-white hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-700"
-            >
-              <Save size={16} />
-              {saving
-                ? t("common.saving")
-                : isEditing
-                  ? t("common.save")
-                  : t("common.add")}
-            </Button>
-          </div>
-        </div>
-      </div>
+            {/* 操作按钮 */}
+            <div className="flex items-center gap-3">
+              <Button type="button" variant="ghost" size="sm" onClick={onClose}>
+                {t("common.cancel")}
+              </Button>
+              <Button
+                type="button"
+                size="sm"
+                onClick={handleSubmit}
+                disabled={saving || (!isEditing && !!idError)}
+                variant="mcp"
+              >
+                <Save size={16} />
+                {saving
+                  ? t("common.saving")
+                  : isEditing
+                    ? t("common.save")
+                    : t("common.add")}
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
       {/* Wizard Modal */}
       <McpWizardModal
@@ -766,7 +760,7 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
         initialTitle={formId}
         initialServer={wizardInitialSpec}
       />
-    </div>
+    </>
   );
 };
 
diff --git a/src/components/mcp/McpPanel.tsx b/src/components/mcp/McpPanel.tsx
index c024c78..35bf329 100644
--- a/src/components/mcp/McpPanel.tsx
+++ b/src/components/mcp/McpPanel.tsx
@@ -1,7 +1,13 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { X, Plus, Server, Check } from "lucide-react";
+import { Plus, Server, Check } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import { mcpApi, type AppType } from "@/lib/api";
 import { McpServer } from "../../types";
 import McpListItem from "./McpListItem";
@@ -13,7 +19,8 @@ import {
 } from "../../utils/errorUtils";
 
 interface McpPanelProps {
-  onClose: () => void;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
   onNotify?: (
     message: string,
     type: "success" | "error",
@@ -26,7 +33,12 @@ interface McpPanelProps {
  * MCP 管理面板
  * 采用与主界面一致的设计风格，右上角添加按钮，每个 MCP 占一行
  */
-const McpPanel: React.FC<McpPanelProps> = ({ onClose, onNotify, appType }) => {
+const McpPanel: React.FC<McpPanelProps> = ({
+  open,
+  onOpenChange,
+  onNotify,
+  appType,
+}) => {
   const { t } = useTranslation();
   const [servers, setServers] = useState<Record<string, McpServer>>({});
   const [loading, setLoading] = useState(true);
@@ -180,97 +192,90 @@ const McpPanel: React.FC<McpPanelProps> = ({ onClose, onNotify, appType }) => {
     appType === "claude" ? t("mcp.claudeTitle") : t("mcp.codexTitle");
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
-      {/* Backdrop */}
-      <div
-        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
-        onClick={onClose}
-      />
-
-      {/* Panel */}
-      <div className="relative bg-white dark:bg-gray-900 rounded-xl shadow-lg max-w-3xl w-full mx-4 overflow-hidden flex flex-col max-h-[85vh] min-h-[600px]">
-        {/* Header */}
-        <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">
-            {panelTitle}
-          </h3>
-
-          <div className="flex items-center gap-3">
-            <Button type="button" variant="mcp" size="sm" onClick={handleAdd}>
-              <Plus size={16} />
-              {t("mcp.add")}
-            </Button>
-            <Button type="button" variant="ghost" size="icon" onClick={onClose}>
-              <X size={18} />
-            </Button>
-          </div>
-        </div>
-
-        {/* Info Section */}
-        <div className="flex-shrink-0 px-6 pt-4 pb-2">
-          <div className="text-sm text-gray-500 dark:text-gray-400">
-            {t("mcp.serverCount", { count: Object.keys(servers).length })} ·{" "}
-            {t("mcp.enabledCount", { count: enabledCount })}
-          </div>
-        </div>
-
-        {/* Content - Scrollable */}
-        <div className="flex-1 overflow-y-auto px-6 py-4">
-          {loading ? (
-            <div className="text-center py-12 text-gray-500 dark:text-gray-400">
-              {t("mcp.loading")}
+    <>
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="max-w-3xl max-h-[85vh] min-h-[600px] flex flex-col">
+          <DialogHeader>
+            <div className="flex items-center justify-between pr-8">
+              <DialogTitle>{panelTitle}</DialogTitle>
+              <Button type="button" variant="mcp" size="sm" onClick={handleAdd}>
+                <Plus size={16} />
+                {t("mcp.add")}
+              </Button>
             </div>
-          ) : (
-            (() => {
-              const hasAny = serverEntries.length > 0;
-              if (!hasAny) {
-                return (
-                  <div className="text-center py-12">
-                    <div className="w-16 h-16 mx-auto mb-4 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center">
-                      <Server
-                        size={24}
-                        className="text-gray-400 dark:text-gray-500"
-                      />
+          </DialogHeader>
+
+          {/* Info Section */}
+          <div className="flex-shrink-0 -mt-2">
+            <div className="text-sm text-gray-500 dark:text-gray-400">
+              {t("mcp.serverCount", { count: Object.keys(servers).length })} ·{" "}
+              {t("mcp.enabledCount", { count: enabledCount })}
+            </div>
+          </div>
+
+          {/* Content - Scrollable */}
+          <div className="flex-1 overflow-y-auto -mx-6 px-6">
+            {loading ? (
+              <div className="text-center py-12 text-gray-500 dark:text-gray-400">
+                {t("mcp.loading")}
+              </div>
+            ) : (
+              (() => {
+                const hasAny = serverEntries.length > 0;
+                if (!hasAny) {
+                  return (
+                    <div className="text-center py-12">
+                      <div className="w-16 h-16 mx-auto mb-4 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center">
+                        <Server
+                          size={24}
+                          className="text-gray-400 dark:text-gray-500"
+                        />
+                      </div>
+                      <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">
+                        {t("mcp.empty")}
+                      </h3>
+                      <p className="text-gray-500 dark:text-gray-400 text-sm">
+                        {t("mcp.emptyDescription")}
+                      </p>
                     </div>
-                    <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">
-                      {t("mcp.empty")}
-                    </h3>
-                    <p className="text-gray-500 dark:text-gray-400 text-sm">
-                      {t("mcp.emptyDescription")}
-                    </p>
+                  );
+                }
+
+                return (
+                  <div className="space-y-3">
+                    {/* 已安装 */}
+                    {serverEntries.map(([id, server]) => (
+                      <McpListItem
+                        key={`installed-${id}`}
+                        id={id}
+                        server={server}
+                        onToggle={handleToggle}
+                        onEdit={handleEdit}
+                        onDelete={handleDelete}
+                      />
+                    ))}
+
+                    {/* 预设已移至"新增 MCP"面板中展示与套用 */}
                   </div>
                 );
-              }
+              })()
+            )}
+          </div>
 
-              return (
-                <div className="space-y-3">
-                  {/* 已安装 */}
-                  {serverEntries.map(([id, server]) => (
-                    <McpListItem
-                      key={`installed-${id}`}
-                      id={id}
-                      server={server}
-                      onToggle={handleToggle}
-                      onEdit={handleEdit}
-                      onDelete={handleDelete}
-                    />
-                  ))}
-
-                  {/* 预设已移至"新增 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 type="button" variant="mcp" size="sm" onClick={onClose}>
-            <Check size={16} />
-            {t("common.done")}
-          </Button>
-        </div>
-      </div>
+          {/* Footer */}
+          <div className="flex-shrink-0 flex items-center justify-end pt-4 border-t border-gray-200 dark:border-gray-800">
+            <Button
+              type="button"
+              variant="mcp"
+              size="sm"
+              onClick={() => onOpenChange(false)}
+            >
+              <Check size={16} />
+              {t("common.done")}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
 
       {/* Form Modal */}
       {isFormOpen && (
@@ -295,7 +300,7 @@ const McpPanel: React.FC<McpPanelProps> = ({ onClose, onNotify, appType }) => {
           onCancel={() => setConfirmDialog(null)}
         />
       )}
-    </div>
+    </>
   );
 };
 
diff --git a/src/components/mcp/McpWizardModal.tsx b/src/components/mcp/McpWizardModal.tsx
index f8c2e78..41aa7af 100644
--- a/src/components/mcp/McpWizardModal.tsx
+++ b/src/components/mcp/McpWizardModal.tsx
@@ -1,8 +1,15 @@
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { X, Save } from "lucide-react";
+import { Save } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
 import { McpServerSpec } from "../../types";
-import { isLinux } from "../../lib/platform";
 
 interface McpWizardModalProps {
   isOpen: boolean;
@@ -216,45 +223,17 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
     setWizardHeaders("");
   }, [isOpen]);
 
-  if (!isOpen) return null;
-
   const preview = generatePreview();
 
   return (
-    <div
-      className="fixed inset-0 z-[70] flex items-center justify-center"
-      onMouseDown={(e) => {
-        if (e.target === e.currentTarget) {
-          handleClose();
-        }
-      }}
-    >
-      {/* Backdrop */}
-      <div
-        className={`absolute inset-0 bg-black/50 dark:bg-black/70${
-          isLinux() ? "" : " backdrop-blur-sm"
-        }`}
-      />
-
-      {/* Modal */}
-      <div className="relative mx-4 flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl bg-white shadow-lg dark:bg-gray-900">
-        {/* Header */}
-        <div className="flex items-center justify-between border-b border-gray-200 p-6 dark:border-gray-800">
-          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
-            {t("mcp.wizard.title")}
-          </h2>
-          <button
-            type="button"
-            onClick={handleClose}
-            className="rounded-md p-1 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100"
-            aria-label={t("common.close")}
-          >
-            <X size={18} />
-          </button>
-        </div>
+    <Dialog open={isOpen} onOpenChange={(open) => !open && handleClose()}>
+      <DialogContent className="max-w-2xl max-h-[90vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>{t("mcp.wizard.title")}</DialogTitle>
+        </DialogHeader>
 
         {/* Content */}
-        <div className="flex-1 min-h-0 space-y-4 overflow-auto p-6">
+        <div className="flex-1 overflow-y-auto -mx-6 px-6 space-y-4">
           {/* Hint */}
           <div className="rounded-lg border border-blue-200 bg-blue-50 p-3 dark:border-blue-800 dark:bg-blue-900/20">
             <p className="text-sm text-blue-800 dark:text-blue-200">
@@ -419,25 +398,17 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
         </div>
 
         {/* Footer */}
-        <div className="flex items-center justify-end gap-3 border-t border-gray-200 bg-gray-100 p-6 dark:border-gray-800 dark:bg-gray-800">
-          <button
-            type="button"
-            onClick={handleClose}
-            className="rounded-lg px-4 py-2 text-sm font-medium text-gray-500 transition-colors hover:bg-white hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-100"
-          >
+        <DialogFooter className="gap-3 pt-4">
+          <Button type="button" variant="ghost" onClick={handleClose}>
             {t("common.cancel")}
-          </button>
-          <button
-            type="button"
-            onClick={handleApply}
-            className="flex items-center gap-2 rounded-lg bg-emerald-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-700"
-          >
+          </Button>
+          <Button type="button" variant="mcp" onClick={handleApply}>
             <Save className="h-4 w-4" />
             {t("mcp.wizard.apply")}
-          </button>
-        </div>
-      </div>
-    </div>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 };
 
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index fcb1c94..14effa3 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -18,7 +18,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className,
     )}
     {...props}
@@ -35,7 +35,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white dark:bg-gray-900 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className,
       )}
       {...props}