feat(frontend): add MCP import dialog for v3.7.0

Implement import functionality to migrate MCP servers from existing configs: **New Component:** - src/components/mcp/McpImportDialog.tsx: Import dialog with card-based source selection **Features:** - Import from Claude (~/.claude/claude.json or settings.json) - Import from Codex (~/.codex/config.toml) - Import from Gemini (config file) - Card-based UI with icons and descriptions - Loading states with spinner animation - Auto-refresh after successful import **Integration:** - Add import button to UnifiedMcpPanel header - Handle import completion with refetch - Toast notifications for success/info/error cases **I18n:** - Add mcp.unifiedPanel.import namespace (zh/en) - Import button, dialog title, descriptions - Success/error messages with count interpolation **UX:** - Smart disable: other sources disabled during import - Clear feedback: count of imported servers - Friendly messages: "No servers found" when empty TypeScript type check passes ✅
2025-11-14 15:29:16 +08:00
parent 9e8abf5f26
commit 9663b4251e
4 changed files with 223 additions and 2 deletions
--- a/src/components/mcp/McpImportDialog.tsx
+++ b/src/components/mcp/McpImportDialog.tsx
@@ -0,0 +1,178 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { Download, FileJson, FileCode, Sparkles } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { mcpApi } from "@/lib/api";
+import type { AppId } from "@/lib/api/types";
+
+interface McpImportDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onImportComplete?: () => void;
+}
+
+/**
+ * MCP 导入对话框
+ * 支持从 Claude/Codex/Gemini 的 live 配置导入 MCP 服务器
+ */
+const McpImportDialog: React.FC<McpImportDialogProps> = ({
+  open,
+  onOpenChange,
+  onImportComplete,
+}) => {
+  const { t } = useTranslation();
+  const [importing, setImporting] = useState(false);
+  const [selectedSource, setSelectedSource] = useState<AppId | null>(null);
+
+  const handleImport = async (source: AppId) => {
+    setImporting(true);
+    setSelectedSource(source);
+
+    try {
+      let count = 0;
+
+      switch (source) {
+        case "claude":
+          count = await mcpApi.importFromClaude();
+          break;
+        case "codex":
+          count = await mcpApi.importFromCodex();
+          break;
+        case "gemini":
+          count = await mcpApi.importFromGemini();
+          break;
+      }
+
+      if (count > 0) {
+        toast.success(t("mcp.unifiedPanel.import.success", { count }));
+        onImportComplete?.();
+        onOpenChange(false);
+      } else {
+        toast.info(t("mcp.unifiedPanel.import.noServersFound"));
+      }
+    } catch (error) {
+      toast.error(t("common.error"), {
+        description: String(error),
+      });
+    } finally {
+      setImporting(false);
+      setSelectedSource(null);
+    }
+  };
+
+  const importSources = [
+    {
+      id: "claude" as AppId,
+      name: t("mcp.unifiedPanel.apps.claude"),
+      description: t("mcp.unifiedPanel.import.fromClaudeDesc"),
+      icon: FileJson,
+      color: "text-blue-600 dark:text-blue-400",
+      bgColor: "bg-blue-100 dark:bg-blue-900/30",
+    },
+    {
+      id: "codex" as AppId,
+      name: t("mcp.unifiedPanel.apps.codex"),
+      description: t("mcp.unifiedPanel.import.fromCodexDesc"),
+      icon: FileCode,
+      color: "text-green-600 dark:text-green-400",
+      bgColor: "bg-green-100 dark:bg-green-900/30",
+    },
+    {
+      id: "gemini" as AppId,
+      name: t("mcp.unifiedPanel.apps.gemini"),
+      description: t("mcp.unifiedPanel.import.fromGeminiDesc"),
+      icon: Sparkles,
+      color: "text-purple-600 dark:text-purple-400",
+      bgColor: "bg-purple-100 dark:bg-purple-900/30",
+    },
+  ];
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>{t("mcp.unifiedPanel.import.title")}</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          <p className="text-sm text-gray-600 dark:text-gray-400">
+            {t("mcp.unifiedPanel.import.description")}
+          </p>
+
+          <div className="space-y-3">
+            {importSources.map((source) => {
+              const Icon = source.icon;
+              const isImporting = importing && selectedSource === source.id;
+
+              return (
+                <button
+                  key={source.id}
+                  type="button"
+                  onClick={() => handleImport(source.id)}
+                  disabled={importing}
+                  className={`w-full p-4 rounded-lg border-2 transition-all duration-200 text-left ${
+                    importing && selectedSource !== source.id
+                      ? "opacity-50 cursor-not-allowed"
+                      : "hover:border-gray-400 dark:hover:border-gray-500 cursor-pointer"
+                  } ${
+                    isImporting
+                      ? "border-blue-500 dark:border-blue-400"
+                      : "border-gray-200 dark:border-gray-700"
+                  }`}
+                >
+                  <div className="flex items-start gap-4">
+                    <div
+                      className={`flex-shrink-0 w-12 h-12 rounded-lg ${source.bgColor} flex items-center justify-center`}
+                    >
+                      <Icon className={`w-6 h-6 ${source.color}`} />
+                    </div>
+
+                    <div className="flex-1 min-w-0">
+                      <h3 className="font-medium text-gray-900 dark:text-gray-100 mb-1">
+                        {source.name}
+                      </h3>
+                      <p className="text-sm text-gray-600 dark:text-gray-400">
+                        {source.description}
+                      </p>
+                    </div>
+
+                    {isImporting ? (
+                      <div className="flex-shrink-0">
+                        <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500" />
+                      </div>
+                    ) : (
+                      <div className="flex-shrink-0">
+                        <Download className="w-5 h-5 text-gray-400" />
+                      </div>
+                    )}
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button
+            type="button"
+            variant="ghost"
+            onClick={() => onOpenChange(false)}
+            disabled={importing}
+          >
+            {t("common.cancel")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default McpImportDialog;
--- a/src/components/mcp/UnifiedMcpPanel.tsx
+++ b/src/components/mcp/UnifiedMcpPanel.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Plus, Server, Check, RefreshCw } from "lucide-react";
+import { Plus, Server, Check, RefreshCw, Download } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
  Dialog,
@@ -14,6 +14,7 @@ import { useAllMcpServers, useToggleMcpApp, useSyncAllMcpServers } from "@/hooks
 import type { McpServer } from "@/types";
 import type { AppId } from "@/lib/api/types";
 import McpFormModal from "./McpFormModal";
+import McpImportDialog from "./McpImportDialog";
 import { ConfirmDialog } from "../ConfirmDialog";
 import { useDeleteMcpServer } from "@/hooks/useMcp";
 import { Edit3, Trash2 } from "lucide-react";
@@ -36,6 +37,7 @@ const UnifiedMcpPanel: React.FC<UnifiedMcpPanelProps> = ({
 }) => {
  const { t } = useTranslation();
  const [isFormOpen, setIsFormOpen] = useState(false);
+  const [isImportOpen, setIsImportOpen] = useState(false);
  const [editingId, setEditingId] = useState<string | null>(null);
  const [confirmDialog, setConfirmDialog] = useState<{
    isOpen: boolean;
@@ -45,7 +47,7 @@ const UnifiedMcpPanel: React.FC<UnifiedMcpPanelProps> = ({
  } | null>(null);

  // Queries and Mutations
-  const { data: serversMap, isLoading } = useAllMcpServers();
+  const { data: serversMap, isLoading, refetch } = useAllMcpServers();
  const toggleAppMutation = useToggleMcpApp();
  const deleteServerMutation = useDeleteMcpServer();
  const syncAllMutation = useSyncAllMcpServers();
@@ -126,6 +128,11 @@ const UnifiedMcpPanel: React.FC<UnifiedMcpPanelProps> = ({
    setEditingId(null);
  };

+  const handleImportComplete = () => {
+    // Refresh the servers list after import
+    refetch();
+  };
+
  return (
    <>
      <Dialog open={open} onOpenChange={onOpenChange}>
@@ -134,6 +141,15 @@ const UnifiedMcpPanel: React.FC<UnifiedMcpPanelProps> = ({
            <div className="flex items-center justify-between pr-8">
              <DialogTitle>{t("mcp.unifiedPanel.title")}</DialogTitle>
              <div className="flex gap-2">
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setIsImportOpen(true)}
+                >
+                  <Download size={16} />
+                  {t("mcp.unifiedPanel.import.button")}
+                </Button>
                <Button
                  type="button"
                  variant="outline"
@@ -231,6 +247,13 @@ const UnifiedMcpPanel: React.FC<UnifiedMcpPanelProps> = ({
        />
      )}

+      {/* Import Dialog */}
+      <McpImportDialog
+        open={isImportOpen}
+        onOpenChange={setIsImportOpen}
+        onImportComplete={handleImportComplete}
+      />
+
      {/* Confirm Dialog */}
      {confirmDialog && (
        <ConfirmDialog
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -455,6 +455,16 @@
        "claude": "Claude",
        "codex": "Codex",
        "gemini": "Gemini"
+      },
+      "import": {
+        "title": "Import MCP Servers",
+        "button": "Import",
+        "description": "Import MCP servers from existing application configuration files. Imported servers will automatically enable the corresponding application.",
+        "fromClaudeDesc": "Import MCP servers from ~/.claude/claude.json or ~/.claude/settings.json",
+        "fromCodexDesc": "Import MCP servers from ~/.codex/config.toml",
+        "fromGeminiDesc": "Import MCP servers from Gemini configuration file",
+        "success": "Successfully imported {{count}} server(s)",
+        "noServersFound": "No servers found to import"
      }
    },
    "userLevelPath": "User-level MCP path",
--- a/src/i18n/locales/zh.json
+++ b/src/i18n/locales/zh.json
@@ -455,6 +455,16 @@
        "claude": "Claude",
        "codex": "Codex",
        "gemini": "Gemini"
+      },
+      "import": {
+        "title": "导入 MCP 服务器",
+        "button": "导入",
+        "description": "从已有的应用配置文件中导入 MCP 服务器。导入的服务器将自动启用对应的应用。",
+        "fromClaudeDesc": "从 ~/.claude/claude.json 或 ~/.claude/settings.json 导入 MCP 服务器",
+        "fromCodexDesc": "从 ~/.codex/config.toml 导入 MCP 服务器",
+        "fromGeminiDesc": "从 Gemini 配置文件导入 MCP 服务器",
+        "success": "成功导入 {{count}} 个服务器",
+        "noServersFound": "未找到可导入的服务器"
      }
    },
    "userLevelPath": "用户级 MCP 配置路径",