feat: API Tester 支持 MCP 模式 + 修复多个 bug

MCP 模式:
- 新增浏览器端 MCP 客户端 (SSE + JSON-RPC + initialize 握手)
- API Tester 页面双模式: REST API tab + MCP Tools tab
- 连接后自动发现 13 个 tools，支持参数编辑和调用
- 与 AI 客户端走完全相同的协议路径

后端修复:
- 每个 SSE 连接创建独立 McpServer 实例，支持多客户端并发
- express.json() 移到 SSE 路由之后，避免消费 MCP 请求体
- 新增 GET /api/xhs/login/cookie-check 轻量接口（不打开浏览器）

前端修复:
- QR 轮询改用 cookie-check 接口，不再重复打开浏览器窗口
- useLoginStatus 默认不自动请求，避免页面加载触发浏览器
- Header 添加 Token 未配置警告横幅
- tsup clean:false 保护 dist/web 不被清除

web/src/pages/ApiTesterPage.tsx

@@ -1,16 +1,32 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import { Card } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 import { Select } from '@/components/ui/Select';
 import { Badge } from '@/components/ui/Badge';
+import { Tabs } from '@/components/ui/Tabs';
 import { JsonViewer } from '@/components/ui/JsonViewer';
+import { Spinner } from '@/components/ui/Spinner';
 import { API_ENDPOINTS } from '@/lib/constants';
 import { apiFetch, generateCurl } from '@/api/client';
+import {
+  connect,
+  disconnect,
+  listTools,
+  callTool,
+  getMcpConnectionState,
+  onConnectionStateChange,
+  type McpToolInfo,
+  type McpConnectionState,
+} from '@/api/mcp-client';
+
+// ---------------------------------------------------------------------------
+// Shared types
+// ---------------------------------------------------------------------------
 
 interface HistoryEntry {
   id: number;
-  method: string;
-  path: string;
+  mode: 'REST' | 'MCP';
+  label: string;
   status: 'success' | 'error';
   time: string;
   duration: number;
@@ -19,142 +35,53 @@ interface HistoryEntry {
 
 let historyId = 0;
 
+// ---------------------------------------------------------------------------
+// Page
+// ---------------------------------------------------------------------------
+
 export function ApiTesterPage() {
-  const [selectedKey, setSelectedKey] = useState<string>(API_ENDPOINTS[0]!.key);
-  const [bodyText, setBodyText] = useState('');
-  const [loading, setLoading] = useState(false);
+  const [mode, setMode] = useState<'rest' | 'mcp'>('rest');
   const [response, setResponse] = useState<unknown>(null);
-  const [responseStatus, setResponseStatus] = useState<number | null>(null);
+  const [responseStatus, setResponseStatus] = useState<'success' | 'error' | null>(null);
   const [duration, setDuration] = useState<number | null>(null);
   const [history, setHistory] = useState<HistoryEntry[]>([]);
 
-  const endpoint = API_ENDPOINTS.find((e) => e.key === selectedKey)!;
-
-  const handleEndpointChange = useCallback((key: string) => {
-    setSelectedKey(key);
-    setResponse(null);
-    setResponseStatus(null);
-    setDuration(null);
-    const ep = API_ENDPOINTS.find((e) => e.key === key);
-    if (ep && 'body' in ep && ep.body) {
-      setBodyText(JSON.stringify(ep.body, null, 2));
-    } else {
-      setBodyText('');
-    }
+  const addHistory = useCallback((entry: Omit<HistoryEntry, 'id'>) => {
+    setHistory((prev) => [{ ...entry, id: historyId++ }, ...prev].slice(0, 30));
   }, []);
 
-  const handleSend = useCallback(async () => {
-    setLoading(true);
-    setResponse(null);
-    const start = Date.now();
-    try {
-      let body: unknown = undefined;
-      if (bodyText.trim() && endpoint.method !== 'GET') {
-        body = JSON.parse(bodyText);
-      }
-      const res = await apiFetch<unknown>(endpoint.path, {
-        method: endpoint.method,
-        ...(body ? { body: JSON.stringify(body) } : {}),
-      });
-      const dur = Date.now() - start;
-      setResponse(res);
-      setResponseStatus(200);
-      setDuration(dur);
-      const entry: HistoryEntry = { id: historyId++, method: endpoint.method, path: endpoint.path, status: 'success', time: new Date().toLocaleTimeString(), duration: dur, response: res };
-      setHistory((prev) => [entry, ...prev].slice(0, 20));
-    } catch (err) {
-      const dur = Date.now() - start;
-      const errData = err instanceof Error ? { error: err.message } : { error: String(err) };
-      setResponse(errData);
-      setResponseStatus((err as { status?: number }).status || 500);
-      setDuration(dur);
-      const entry: HistoryEntry = { id: historyId++, method: endpoint.method, path: endpoint.path, status: 'error', time: new Date().toLocaleTimeString(), duration: dur, response: errData };
-      setHistory((prev) => [entry, ...prev].slice(0, 20));
-    } finally {
-      setLoading(false);
-    }
-  }, [endpoint, bodyText]);
-
-  const curl = generateCurl(
-    endpoint.method,
-    endpoint.path,
-    bodyText.trim() && endpoint.method !== 'GET' ? (() => { try { return JSON.parse(bodyText); } catch { return undefined; } })() : undefined,
-  );
-
-  // Group endpoints by category
-  const categories = [...new Set(API_ENDPOINTS.map((e) => e.category))];
-
   return (
     <div className="space-y-4">
       <h1 className="text-2xl font-bold">API Tester</h1>
 
+      <Tabs
+        tabs={[
+          { key: 'rest', label: 'REST API' },
+          { key: 'mcp', label: 'MCP Tools' },
+        ]}
+        active={mode}
+        onChange={(k) => setMode(k as 'rest' | 'mcp')}
+      />
+
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
-        {/* Left: Request */}
         <div className="lg:col-span-2 space-y-4">
-          <Card>
-            <h2 className="text-sm font-semibold text-dark-muted uppercase tracking-wider mb-3">Request</h2>
-
-            {/* Endpoint selector */}
-            <div className="space-y-3">
-              <Select
-                label="Endpoint"
-                options={categories.flatMap((cat) => [
-                  { value: `__cat_${cat}`, label: `── ${cat} ──` },
-                  ...API_ENDPOINTS.filter((e) => e.category === cat).map((e) => ({
-                    value: e.key,
-                    label: `${e.method} ${e.path}`,
-                  })),
-                ])}
-                value={selectedKey}
-                onChange={(e) => {
-                  if (!e.target.value.startsWith('__cat_')) {
-                    handleEndpointChange(e.target.value);
-                  }
-                }}
-              />
-
-              <div className="flex items-center gap-2">
-                <Badge variant={endpoint.method === 'GET' ? 'success' : endpoint.method === 'DELETE' ? 'danger' : 'info'}>
-                  {endpoint.method}
-                </Badge>
-                <code className="text-sm text-dark-text font-mono">{endpoint.path}</code>
-              </div>
-
-              {/* Body editor */}
-              {endpoint.method !== 'GET' && (
-                <div className="flex flex-col gap-1.5">
-                  <label className="text-sm text-dark-muted">Request Body (JSON)</label>
-                  <textarea
-                    value={bodyText}
-                    onChange={(e) => setBodyText(e.target.value)}
-                    className="bg-dark-bg border border-dark-border rounded-lg px-3 py-2 text-sm text-dark-text font-mono focus:outline-none focus:border-dark-accent transition-colors resize-y min-h-[120px]"
-                    spellCheck={false}
-                  />
-                </div>
-              )}
-
-              <div className="flex gap-2">
-                <Button onClick={() => void handleSend()} loading={loading}>
-                  Send Request
-                </Button>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => void navigator.clipboard.writeText(curl)}
-                >
-                  Copy cURL
-                </Button>
-              </div>
-            </div>
-          </Card>
-
-          {/* cURL preview */}
-          <Card>
-            <h2 className="text-sm font-semibold text-dark-muted uppercase tracking-wider mb-2">cURL</h2>
-            <pre className="bg-dark-bg border border-dark-border rounded-lg p-3 text-xs font-mono text-dark-text overflow-x-auto whitespace-pre-wrap">
-              {curl}
-            </pre>
-          </Card>
+          {mode === 'rest' ? (
+            <RestPanel
+              response={response}
+              setResponse={setResponse}
+              setResponseStatus={setResponseStatus}
+              setDuration={setDuration}
+              addHistory={addHistory}
+            />
+          ) : (
+            <McpPanel
+              response={response}
+              setResponse={setResponse}
+              setResponseStatus={setResponseStatus}
+              setDuration={setDuration}
+              addHistory={addHistory}
+            />
+          )}
 
           {/* Response */}
           {response !== null && (
@@ -163,7 +90,7 @@ export function ApiTesterPage() {
                 <h2 className="text-sm font-semibold text-dark-muted uppercase tracking-wider">Response</h2>
                 <div className="flex items-center gap-2">
                   {responseStatus && (
-                    <Badge variant={responseStatus < 300 ? 'success' : 'danger'}>
+                    <Badge variant={responseStatus === 'success' ? 'success' : 'danger'}>
                       {responseStatus}
                     </Badge>
                   )}
@@ -177,7 +104,7 @@ export function ApiTesterPage() {
           )}
         </div>
 
-        {/* Right: History */}
+        {/* History */}
         <div>
           <Card>
             <div className="flex items-center justify-between mb-3">
@@ -194,17 +121,23 @@ export function ApiTesterPage() {
                     className="p-2 rounded-lg border border-dark-border/50 hover:bg-dark-hover cursor-pointer text-xs"
                     onClick={() => {
                       setResponse(entry.response);
-                      setResponseStatus(entry.status === 'success' ? 200 : 500);
+                      setResponseStatus(entry.status);
                       setDuration(entry.duration);
                     }}
                   >
                     <div className="flex items-center gap-2">
-                      <Badge variant={entry.status === 'success' ? 'success' : 'danger'} className="text-[10px]">
-                        {entry.method}
+                      <Badge
+                        variant={entry.mode === 'MCP' ? 'info' : 'success'}
+                        className="text-[10px]"
+                      >
+                        {entry.mode}
                       </Badge>
-                      <span className="font-mono truncate">{entry.path}</span>
+                      <span className="font-mono truncate">{entry.label}</span>
                     </div>
                     <div className="flex items-center gap-2 mt-1 text-dark-muted">
+                      <Badge variant={entry.status === 'success' ? 'success' : 'danger'} className="text-[10px]">
+                        {entry.status}
+                      </Badge>
                       <span>{entry.time}</span>
                       <span>{entry.duration}ms</span>
                     </div>
@@ -218,3 +151,339 @@ export function ApiTesterPage() {
     </div>
   );
 }
+
+// ---------------------------------------------------------------------------
+// REST Panel
+// ---------------------------------------------------------------------------
+
+function RestPanel({
+  setResponse,
+  setResponseStatus,
+  setDuration,
+  addHistory,
+}: {
+  response: unknown;
+  setResponse: (v: unknown) => void;
+  setResponseStatus: (v: 'success' | 'error' | null) => void;
+  setDuration: (v: number | null) => void;
+  addHistory: (e: Omit<HistoryEntry, 'id'>) => void;
+}) {
+  const [selectedKey, setSelectedKey] = useState<string>(API_ENDPOINTS[0]!.key);
+  const [bodyText, setBodyText] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const endpoint = API_ENDPOINTS.find((e) => e.key === selectedKey)!;
+  const categories = [...new Set(API_ENDPOINTS.map((e) => e.category))];
+
+  const handleEndpointChange = useCallback((key: string) => {
+    setSelectedKey(key);
+    setResponse(null);
+    setResponseStatus(null);
+    setDuration(null);
+    const ep = API_ENDPOINTS.find((e) => e.key === key);
+    if (ep && 'body' in ep && ep.body) {
+      setBodyText(JSON.stringify(ep.body, null, 2));
+    } else {
+      setBodyText('');
+    }
+  }, [setResponse, setResponseStatus, setDuration]);
+
+  const handleSend = useCallback(async () => {
+    setLoading(true);
+    setResponse(null);
+    const start = Date.now();
+    try {
+      let body: unknown = undefined;
+      if (bodyText.trim() && endpoint.method !== 'GET') {
+        body = JSON.parse(bodyText);
+      }
+      const res = await apiFetch<unknown>(endpoint.path, {
+        method: endpoint.method,
+        ...(body ? { body: JSON.stringify(body) } : {}),
+      });
+      const dur = Date.now() - start;
+      setResponse(res);
+      setResponseStatus('success');
+      setDuration(dur);
+      addHistory({ mode: 'REST', label: `${endpoint.method} ${endpoint.path}`, status: 'success', time: new Date().toLocaleTimeString(), duration: dur, response: res });
+    } catch (err) {
+      const dur = Date.now() - start;
+      const errData = err instanceof Error ? { error: err.message } : { error: String(err) };
+      setResponse(errData);
+      setResponseStatus('error');
+      setDuration(dur);
+      addHistory({ mode: 'REST', label: `${endpoint.method} ${endpoint.path}`, status: 'error', time: new Date().toLocaleTimeString(), duration: dur, response: errData });
+    } finally {
+      setLoading(false);
+    }
+  }, [endpoint, bodyText, setResponse, setResponseStatus, setDuration, addHistory]);
+
+  const curl = generateCurl(
+    endpoint.method,
+    endpoint.path,
+    bodyText.trim() && endpoint.method !== 'GET' ? (() => { try { return JSON.parse(bodyText) as unknown; } catch { return undefined; } })() : undefined,
+  );
+
+  return (
+    <>
+      <Card>
+        <h2 className="text-sm font-semibold text-dark-muted uppercase tracking-wider mb-3">REST Request</h2>
+        <div className="space-y-3">
+          <Select
+            label="Endpoint"
+            options={categories.flatMap((cat) => [
+              { value: `__cat_${cat}`, label: `── ${cat} ──` },
+              ...API_ENDPOINTS.filter((e) => e.category === cat).map((e) => ({
+                value: e.key,
+                label: `${e.method} ${e.path}`,
+              })),
+            ])}
+            value={selectedKey}
+            onChange={(e) => {
+              if (!e.target.value.startsWith('__cat_')) {
+                handleEndpointChange(e.target.value);
+              }
+            }}
+          />
+          <div className="flex items-center gap-2">
+            <Badge variant={endpoint.method === 'GET' ? 'success' : endpoint.method === 'DELETE' ? 'danger' : 'info'}>
+              {endpoint.method}
+            </Badge>
+            <code className="text-sm text-dark-text font-mono">{endpoint.path}</code>
+          </div>
+          {endpoint.method !== 'GET' && (
+            <div className="flex flex-col gap-1.5">
+              <label className="text-sm text-dark-muted">Request Body (JSON)</label>
+              <textarea
+                value={bodyText}
+                onChange={(e) => setBodyText(e.target.value)}
+                className="bg-dark-bg border border-dark-border rounded-lg px-3 py-2 text-sm text-dark-text font-mono focus:outline-none focus:border-dark-accent transition-colors resize-y min-h-[120px]"
+                spellCheck={false}
+              />
+            </div>
+          )}
+          <div className="flex gap-2">
+            <Button onClick={() => void handleSend()} loading={loading}>Send Request</Button>
+            <Button variant="ghost" size="sm" onClick={() => void navigator.clipboard.writeText(curl)}>Copy cURL</Button>
+          </div>
+        </div>
+      </Card>
+      <Card>
+        <h2 className="text-sm font-semibold text-dark-muted uppercase tracking-wider mb-2">cURL</h2>
+        <pre className="bg-dark-bg border border-dark-border rounded-lg p-3 text-xs font-mono text-dark-text overflow-x-auto whitespace-pre-wrap">{curl}</pre>
+      </Card>
+    </>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// MCP Panel
+// ---------------------------------------------------------------------------
+
+function McpPanel({
+  setResponse,
+  setResponseStatus,
+  setDuration,
+  addHistory,
+}: {
+  response: unknown;
+  setResponse: (v: unknown) => void;
+  setResponseStatus: (v: 'success' | 'error' | null) => void;
+  setDuration: (v: number | null) => void;
+  addHistory: (e: Omit<HistoryEntry, 'id'>) => void;
+}) {
+  const [connState, setConnState] = useState<McpConnectionState>(getMcpConnectionState());
+  const [connecting, setConnecting] = useState(false);
+  const [tools, setTools] = useState<McpToolInfo[]>([]);
+  const [selectedTool, setSelectedTool] = useState('');
+  const [argsText, setArgsText] = useState('{}');
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    onConnectionStateChange(setConnState);
+    return () => onConnectionStateChange(() => {});
+  }, []);
+
+  const handleConnect = useCallback(async () => {
+    setConnecting(true);
+    try {
+      await connect();
+      const result = await listTools();
+      setTools(result.tools);
+      if (result.tools.length > 0 && !selectedTool) {
+        setSelectedTool(result.tools[0]!.name);
+        // Generate default args from schema
+        const schema = result.tools[0]!.inputSchema;
+        setArgsText(generateDefaultArgs(schema));
+      }
+    } catch (err) {
+      setResponse({ error: err instanceof Error ? err.message : String(err) });
+      setResponseStatus('error');
+    } finally {
+      setConnecting(false);
+    }
+  }, [selectedTool, setResponse, setResponseStatus]);
+
+  const handleDisconnect = useCallback(() => {
+    disconnect();
+    setTools([]);
+    setSelectedTool('');
+  }, []);
+
+  const handleToolChange = useCallback((name: string) => {
+    setSelectedTool(name);
+    setResponse(null);
+    setResponseStatus(null);
+    setDuration(null);
+    const tool = tools.find((t) => t.name === name);
+    if (tool) {
+      setArgsText(generateDefaultArgs(tool.inputSchema));
+    }
+  }, [tools, setResponse, setResponseStatus, setDuration]);
+
+  const handleCall = useCallback(async () => {
+    if (!selectedTool) return;
+    setLoading(true);
+    setResponse(null);
+    const start = Date.now();
+    try {
+      let args: Record<string, unknown> = {};
+      if (argsText.trim()) {
+        args = JSON.parse(argsText) as Record<string, unknown>;
+      }
+      const res = await callTool(selectedTool, args);
+      const dur = Date.now() - start;
+      setResponse(res);
+      setResponseStatus('success');
+      setDuration(dur);
+      addHistory({ mode: 'MCP', label: selectedTool, status: 'success', time: new Date().toLocaleTimeString(), duration: dur, response: res });
+    } catch (err) {
+      const dur = Date.now() - start;
+      const errData = err instanceof Error ? { error: err.message } : { error: String(err) };
+      setResponse(errData);
+      setResponseStatus('error');
+      setDuration(dur);
+      addHistory({ mode: 'MCP', label: selectedTool, status: 'error', time: new Date().toLocaleTimeString(), duration: dur, response: errData });
+    } finally {
+      setLoading(false);
+    }
+  }, [selectedTool, argsText, setResponse, setResponseStatus, setDuration, addHistory]);
+
+  const currentTool = tools.find((t) => t.name === selectedTool);
+
+  return (
+    <>
+      {/* Connection */}
+      <Card>
+        <h2 className="text-sm font-semibold text-dark-muted uppercase tracking-wider mb-3">MCP Connection</h2>
+        <div className="flex items-center gap-3">
+          <Badge variant={connState === 'connected' ? 'success' : connState === 'connecting' ? 'warning' : 'default'}>
+            {connState}
+          </Badge>
+          {connState === 'disconnected' && (
+            <Button size="sm" onClick={() => void handleConnect()} loading={connecting}>
+              Connect
+            </Button>
+          )}
+          {connState === 'connected' && (
+            <>
+              <span className="text-xs text-dark-muted">{tools.length} tools available</span>
+              <Button size="sm" variant="ghost" onClick={handleDisconnect}>Disconnect</Button>
+            </>
+          )}
+          {connState === 'connecting' && <Spinner size="sm" />}
+        </div>
+      </Card>
+
+      {/* Tool Call */}
+      {connState === 'connected' && tools.length > 0 && (
+        <Card>
+          <h2 className="text-sm font-semibold text-dark-muted uppercase tracking-wider mb-3">MCP Tool Call</h2>
+          <div className="space-y-3">
+            <Select
+              label="Tool"
+              options={tools.map((t) => ({ value: t.name, label: t.name }))}
+              value={selectedTool}
+              onChange={(e) => handleToolChange(e.target.value)}
+            />
+
+            {/* Tool info */}
+            {currentTool && (
+              <div className="bg-dark-bg rounded-lg p-3 text-xs space-y-2">
+                {currentTool.description && (
+                  <p className="text-dark-muted">{currentTool.description}</p>
+                )}
+                {currentTool.inputSchema?.properties && (
+                  <div>
+                    <p className="text-dark-muted font-semibold mb-1">Parameters:</p>
+                    {Object.entries(currentTool.inputSchema.properties).map(([key, prop]) => (
+                      <div key={key} className="flex gap-2 ml-2">
+                        <code className="text-dark-accent">{key}</code>
+                        <span className="text-dark-muted">
+                          {prop.type || ''}
+                          {currentTool.inputSchema?.required?.includes(key) ? ' (required)' : ' (optional)'}
+                          {prop.description ? ` — ${prop.description}` : ''}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Arguments editor */}
+            <div className="flex flex-col gap-1.5">
+              <label className="text-sm text-dark-muted">Arguments (JSON)</label>
+              <textarea
+                value={argsText}
+                onChange={(e) => setArgsText(e.target.value)}
+                className="bg-dark-bg border border-dark-border rounded-lg px-3 py-2 text-sm text-dark-text font-mono focus:outline-none focus:border-dark-accent transition-colors resize-y min-h-[120px]"
+                spellCheck={false}
+              />
+            </div>
+
+            <Button onClick={() => void handleCall()} loading={loading}>
+              Call Tool
+            </Button>
+          </div>
+        </Card>
+      )}
+
+      {connState === 'disconnected' && (
+        <Card>
+          <div className="text-center py-8 text-dark-muted">
+            <p>Connect to the MCP server to discover and test tools.</p>
+            <p className="text-xs mt-2">This uses the same SSE + JSON-RPC protocol that AI clients use.</p>
+          </div>
+        </Card>
+      )}
+    </>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function generateDefaultArgs(schema?: McpToolInfo['inputSchema']): string {
+  if (!schema?.properties) return '{}';
+  const obj: Record<string, unknown> = {};
+  for (const [key, prop] of Object.entries(schema.properties)) {
+    if (prop.default !== undefined) {
+      obj[key] = prop.default;
+    } else if (prop.enum && prop.enum.length > 0) {
+      obj[key] = prop.enum[0];
+    } else if (prop.type === 'string') {
+      obj[key] = '';
+    } else if (prop.type === 'boolean') {
+      obj[key] = false;
+    } else if (prop.type === 'number' || prop.type === 'integer') {
+      obj[key] = 0;
+    } else if (prop.type === 'array') {
+      obj[key] = [];
+    } else {
+      obj[key] = null;
+    }
+  }
+  return JSON.stringify(obj, null, 2);
+}