okooooooo/edgeever
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

简化 MCP 配置区域布局

Browse Source
This commit is contained in:
yoma committed 2026-07-14 23:07:04 +08:00
1 parent b42bf8678c
commit 85541a42e5
1 file changed
+12 -18
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/settings/McpConfigCard.tsx
+12 -18
View File
@@ -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"