feat(mcp): enhance form UX with default apps and JSON formatter

- Enable all apps (Claude, Codex, Gemini) by default when adding MCP servers - Improve config label with clearer wording: "Full JSON configuration or use [Config Wizard]" - Add JSON format button to beautify configuration with 2-space indentation - Update tests to reflect new default behavior - Clean up redundant explicit prop passing This provides a more streamlined experience by enabling all apps out of the box and making it easier to format JSON configurations.
2025-11-16 16:50:07 +08:00
parent bfc27349b3
commit ed59420a83
5 changed files with 63 additions and 11 deletions
--- a/src/components/mcp/McpFormModal.tsx
+++ b/src/components/mcp/McpFormModal.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
-import { Save, Plus, AlertCircle, ChevronDown, ChevronUp } from "lucide-react";
+import { Save, Plus, AlertCircle, ChevronDown, ChevronUp, Wand2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
@@ -27,6 +27,7 @@ import {
  mcpServerToToml,
 } from "@/utils/tomlUtils";
 import { normalizeTomlText } from "@/utils/textNormalization";
+import { formatJSON } from "@/utils/formatters";
 import { useMcpValidation } from "./useMcpValidation";
 import { useUpsertMcpServer } from "@/hooks/useMcp";

@@ -37,7 +38,7 @@ interface McpFormModalProps {
  onClose: () => void;
  existingIds?: string[];
  defaultFormat?: "json" | "toml"; // 默认配置格式（可选，默认为 JSON）
-  defaultEnabledApps?: AppId[]; // 默认启用到哪些应用（可选，默认为 Claude）
+  defaultEnabledApps?: AppId[]; // 默认启用到哪些应用（可选，默认为全部应用）
 }

 /**
@@ -52,7 +53,7 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
  onClose,
  existingIds = [],
  defaultFormat = "json",
-  defaultEnabledApps = ["claude"],
+  defaultEnabledApps = ["claude", "codex", "gemini"],
 }) => {
  const { t } = useTranslation();
  const { formatTomlError, validateTomlConfig, validateJsonConfig } =
@@ -251,6 +252,24 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
    setConfigError("");
  };

+  const handleFormatJson = () => {
+    if (!formConfig.trim()) return;
+
+    try {
+      const formatted = formatJSON(formConfig);
+      setFormConfig(formatted);
+      toast.success(t("common.formatSuccess"));
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : String(error);
+      toast.error(
+        t("common.formatError", {
+          error: errorMessage,
+        }),
+      );
+    }
+  };
+
  const handleWizardApply = (title: string, json: string) => {
    setFormId(title);
    if (!formName.trim()) {
@@ -632,11 +651,11 @@ const McpFormModal: React.FC<McpFormModalProps> = ({

            {/* 配置输入框（根据格式显示 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">
+              <div className="flex items-baseline gap-1 mb-2">
+                <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
                  {useToml
-                    ? t("mcp.form.tomlConfig")
-                    : t("mcp.form.jsonConfig")}
+                    ? t("mcp.form.tomlConfigOrPrefix")
+                    : t("mcp.form.jsonConfigOrPrefix")}
                </label>
                {(isEditing || selectedPreset === -1) && (
                  <button
@@ -658,6 +677,19 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
                value={formConfig}
                onChange={(e) => handleConfigChange(e.target.value)}
              />
+              {/* 格式化按钮（仅 JSON 模式） */}
+              {!useToml && (
+                <div className="flex items-center justify-between mt-2">
+                  <button
+                    type="button"
+                    onClick={handleFormatJson}
+                    className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+                  >
+                    <Wand2 className="w-3.5 h-3.5" />
+                    {t("common.format")}
+                  </button>
+                </div>
+              )}
              {configError && (
                <div className="flex items-center gap-2 mt-2 text-red-500 dark:text-red-400 text-sm">
                  <AlertCircle size={16} />
--- a/src/components/mcp/UnifiedMcpPanel.tsx
+++ b/src/components/mcp/UnifiedMcpPanel.tsx
@@ -197,7 +197,6 @@ const UnifiedMcpPanel: React.FC<UnifiedMcpPanelProps> = ({
          }
          existingIds={serversMap ? Object.keys(serversMap) : []}
          defaultFormat="json"
-          defaultEnabledApps={["claude"]} // 默认启用 Claude
          onSave={async () => {
            setIsFormOpen(false);
            setEditingId(null);
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -469,6 +469,8 @@
      "docsPlaceholder": "https://example.com/docs",
      "additionalInfo": "Additional Info",
      "jsonConfig": "JSON Configuration",
+      "jsonConfigOrPrefix": "Full JSON configuration or use",
+      "tomlConfigOrPrefix": "Full TOML configuration or use",
      "jsonPlaceholder": "{\n  \"type\": \"stdio\",\n  \"command\": \"uvx\",\n  \"args\": [\"mcp-server-fetch\"]\n}",
      "tomlConfig": "TOML Configuration",
      "tomlPlaceholder": "type = \"stdio\"\ncommand = \"uvx\"\nargs = [\"mcp-server-fetch\"]",
--- a/src/i18n/locales/zh.json
+++ b/src/i18n/locales/zh.json
@@ -469,6 +469,8 @@
      "docsPlaceholder": "https://example.com/docs",
      "additionalInfo": "附加信息",
      "jsonConfig": "JSON 配置",
+      "jsonConfigOrPrefix": "完整的 JSON 配置或者使用",
+      "tomlConfigOrPrefix": "完整的 TOML 配置或者使用",
      "jsonPlaceholder": "{\n  \"type\": \"stdio\",\n  \"command\": \"uvx\",\n  \"args\": [\"mcp-server-fetch\"]\n}",
      "tomlConfig": "TOML 配置",
      "tomlPlaceholder": "type = \"stdio\"\ncommand = \"uvx\"\nargs = [\"mcp-server-fetch\"]",
--- a/tests/components/McpFormModal.test.tsx
+++ b/tests/components/McpFormModal.test.tsx
@@ -139,7 +139,6 @@ describe("McpFormModal", () => {
        onClose={onClose}
        existingIds={[]}
        defaultFormat="json"
-        defaultEnabledApps={["claude"]}
        {...rest}
      />,
    );
@@ -211,8 +210,8 @@ describe("McpFormModal", () => {
      },
      apps: {
        claude: true,
-        codex: false,
-        gemini: false,
+        codex: true,
+        gemini: true,
      },
    });
    expect(onSave).toHaveBeenCalledTimes(1);
@@ -291,6 +290,11 @@ command = "run"
  it("TOML 模式下缺少命令时展示错误提示并阻止提交", async () => {
    const { onSave } = renderForm({ defaultFormat: "toml" });

+    // 填写 ID 字段
+    fireEvent.change(screen.getByPlaceholderText("mcp.form.titlePlaceholder"), {
+      target: { value: "test-toml" },
+    });
+
    const configTextarea = screen.getByPlaceholderText(
      "mcp.form.tomlPlaceholder",
    ) as HTMLTextAreaElement;
@@ -317,6 +321,7 @@ type = "stdio"
      enabled: true,
      description: "Old desc",
      server: { type: "stdio", command: "old" },
+      apps: { claude: true, codex: false, gemini: false },
    } as McpServer;

    const { onSave } = renderForm({
@@ -371,6 +376,18 @@ type = "stdio"
    expect(claudeCheckbox.checked).toBe(true);
    fireEvent.click(claudeCheckbox);

+    const codexCheckbox = screen.getByLabelText(
+      "mcp.unifiedPanel.apps.codex",
+    ) as HTMLInputElement;
+    expect(codexCheckbox.checked).toBe(true);
+    fireEvent.click(codexCheckbox);
+
+    const geminiCheckbox = screen.getByLabelText(
+      "mcp.unifiedPanel.apps.gemini",
+    ) as HTMLInputElement;
+    expect(geminiCheckbox.checked).toBe(true);
+    fireEvent.click(geminiCheckbox);
+
    fireEvent.click(screen.getByText("common.add"));

    await waitFor(() => expect(upsertMock).toHaveBeenCalledTimes(1));