From 85541a42e5c75bf8c07147f90664141c13a2a85e Mon Sep 17 00:00:00 2001
From: yoma <yingwaizhiying@gmail.com>
Date: Tue, 14 Jul 2026 23:07:04 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AE=80=E5=8C=96=20MCP=20=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/settings/McpConfigCard.tsx | 30 ++++++++-----------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/apps/web/src/components/settings/McpConfigCard.tsx b/apps/web/src/components/settings/McpConfigCard.tsx
index 4d3ccb25..01053a9e 100644
--- a/apps/web/src/components/settings/McpConfigCard.tsx
+++ b/apps/web/src/components/settings/McpConfigCard.tsx
@@ -161,9 +161,9 @@ const ScopePicker = ({ availableScopes, selectedScopes, onToggleScope }: ScopePi
   const [expanded, setExpanded] = useState(false);
 
   return (
-    <Collapsible className="rounded-lg border border-slate-200 bg-white" open={expanded} onOpenChange={setExpanded}>
+    <Collapsible className="border-y border-slate-100" open={expanded} onOpenChange={setExpanded}>
       <CollapsibleTrigger asChild>
-        <button className="flex min-h-11 w-full items-center justify-between gap-3 px-3 py-2 text-left" type="button">
+        <button className="flex min-h-11 w-full items-center justify-between gap-3 py-2 text-left" type="button">
           <span className="min-w-0">
             <span className="block text-xs font-semibold text-slate-700">{t("mcp.scopeTitle")}</span>
             <span className="mt-0.5 block text-[11px] font-medium text-slate-400">
@@ -178,7 +178,7 @@ const ScopePicker = ({ availableScopes, selectedScopes, onToggleScope }: ScopePi
           />
         </button>
       </CollapsibleTrigger>
-      <CollapsibleContent className="grid gap-2 border-t border-slate-100 p-3 sm:grid-cols-2">
+      <CollapsibleContent className="grid gap-1 border-t border-slate-100 py-2 sm:grid-cols-2">
         {availableScopes.map((scope) => {
           const checked = selectedScopes.has(scope);
           const checkboxId = `token-scope-${scope.replace(/[^a-z0-9]+/gi, "-")}`;
@@ -188,10 +188,10 @@ const ScopePicker = ({ availableScopes, selectedScopes, onToggleScope }: ScopePi
               key={scope}
               htmlFor={checkboxId}
               className={cn(
-                "flex min-h-10 cursor-pointer items-center gap-3 rounded-lg border px-3 py-2 transition-colors",
+                "flex min-h-10 cursor-pointer items-center gap-3 rounded-md px-3 py-2 transition-colors",
                 checked
-                  ? "border-emerald-500/30 bg-emerald-50/70 text-emerald-800"
-                  : "border-slate-200 bg-white text-slate-600 hover:bg-slate-50"
+                  ? "bg-emerald-50/70 text-emerald-800"
+                  : "text-slate-600 hover:bg-slate-50"
               )}
             >
               <Checkbox
@@ -240,28 +240,22 @@ const TokenList = ({ tokens, isLoading, isDeleting, onDelete }: TokenListProps)
 
   if (isLoading) {
     return (
-      <div className="rounded-lg border border-dashed border-slate-200 px-4 py-8 text-center text-sm text-slate-400">
-        {t("mcp.loadingTokens")}
-      </div>
+      <p className="py-4 text-sm text-slate-400">{t("mcp.loadingTokens")}</p>
     );
   }
 
   if (tokens.length === 0) {
-    return (
-      <div className="rounded-lg border border-dashed border-slate-200 px-4 py-8 text-center text-sm text-slate-400">
-        {t("mcp.emptyTokens")}
-      </div>
-    );
+    return <p className="py-4 text-sm text-slate-400">{t("mcp.emptyTokens")}</p>;
   }
 
   return (
-    <div className="space-y-3">
+    <div className="divide-y divide-slate-100 border-t border-slate-100">
       {tokens.map((token) => (
         <div
           key={token.id}
           className={cn(
-            "flex min-h-16 flex-col items-stretch gap-3 rounded-lg border p-3 transition-colors sm:p-4 lg:flex-row lg:items-center",
-            token.isRevoked ? "border-slate-100 bg-slate-50/50 opacity-60" : "border-slate-200 bg-white hover:border-slate-300"
+            "flex min-h-16 flex-col items-stretch gap-3 py-3 transition-colors sm:py-4 lg:flex-row lg:items-center",
+            token.isRevoked ? "bg-slate-50/50 opacity-60" : "hover:bg-slate-50/50"
           )}
         >
           <span className="min-w-0 flex-1">
@@ -414,7 +408,7 @@ export const McpConfigCard = () => {
         <CardContent className="space-y-4 p-4 pt-0">
           {createdToken && <CreatedTokenNotice token={createdToken.token} />}
 
-          <form className="min-w-0 space-y-4 rounded-lg border border-slate-100 bg-slate-50/70 p-3" onSubmit={handleSubmit}>
+          <form className="min-w-0 space-y-3" onSubmit={handleSubmit}>
             <div className="flex flex-col gap-3 sm:flex-row">
               <Input
                 className="h-9 min-w-0 flex-1 text-xs focus-visible:ring-4 focus-visible:ring-emerald-500/10"