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

@@ -333,13 +333,12 @@ function App() {
         onImportSuccess={handleImportSuccess}
       />
 
-      {isMcpOpen && (
       <McpPanel
+        open={isMcpOpen}
+        onOpenChange={setIsMcpOpen}
         appType={activeApp}
-          onClose={() => setIsMcpOpen(false)}
         onNotify={handleNotify}
       />
-      )}
     </div>
   );
 }

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,30 +501,15 @@ 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}
-      />
-
-      {/* 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>
+    <>
+      <Dialog open={true} onOpenChange={(open) => !open && onClose()}>
+        <DialogContent className="max-w-3xl max-h-[90vh] flex flex-col">
+          <DialogHeader>
+            <DialogTitle>{getFormTitle()}</DialogTitle>
+          </DialogHeader>
 
           {/* Content - Scrollable */}
-        <div className="flex-1 overflow-y-auto p-6 space-y-4">
+          <div className="flex-1 overflow-y-auto -mx-6 px-6 space-y-4">
             {/* 预设选择（仅新增时展示） */}
             {!isEditing && (
               <div>
@@ -669,7 +660,9 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
             <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")}
+                  {useToml
+                    ? t("mcp.form.tomlConfig")
+                    : t("mcp.form.jsonConfig")}
                 </label>
                 {(isEditing || selectedPreset === -1) && (
                   <button
@@ -701,7 +694,7 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
           </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">
+          <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">
@@ -744,7 +737,7 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
                 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"
+                variant="mcp"
               >
                 <Save size={16} />
                 {saving
@@ -754,8 +747,9 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
                     : t("common.add")}
               </Button>
             </div>
-        </div>
-      </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
       {/* Wizard Modal */}
       <McpWizardModal
@@ -766,7 +760,7 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
         initialTitle={formId}
         initialServer={wizardInitialSpec}
       />
-    </div>
+    </>
   );
 };
 

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,34 +192,21 @@ 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">
+    <>
+      <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>
-            <Button type="button" variant="ghost" size="icon" onClick={onClose}>
-              <X size={18} />
-            </Button>
-          </div>
             </div>
+          </DialogHeader>
 
           {/* Info Section */}
-        <div className="flex-shrink-0 px-6 pt-4 pb-2">
+          <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 })}
@@ -215,7 +214,7 @@ const McpPanel: React.FC<McpPanelProps> = ({ onClose, onNotify, appType }) => {
           </div>
 
           {/* Content - Scrollable */}
-        <div className="flex-1 overflow-y-auto px-6 py-4">
+          <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")}
@@ -264,13 +263,19 @@ const McpPanel: React.FC<McpPanelProps> = ({ onClose, onNotify, appType }) => {
           </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}>
+          <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>
-      </div>
+        </DialogContent>
+      </Dialog>
 
       {/* Form Modal */}
       {isFormOpen && (
@@ -295,7 +300,7 @@ const McpPanel: React.FC<McpPanelProps> = ({ onClose, onNotify, appType }) => {
           onCancel={() => setConfirmDialog(null)}
         />
       )}
-    </div>
+    </>
   );
 };
 

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>
   );
 };
 

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}