fix: clarify log payload tabs

This commit is contained in:
jesieleo
2026-07-15 13:31:03 +08:00
parent 694437bf3f
commit 2b1720067b
2 changed files with 26 additions and 3 deletions
@@ -884,12 +884,13 @@ function LogJsonPanel({
<div className="network-pane-header flex h-10 min-w-0 shrink-0 items-center gap-3 border-b px-3">
<span className="network-pane-title shrink-0 text-[14px] font-bold">{title}</span>
{subtitle ? <span className="network-muted shrink-0 text-[12px] font-semibold">{subtitle}</span> : null}
<div className="flex min-w-0 items-center gap-3">
<div className="network-payload-tabs flex min-w-0 items-center rounded-md border p-0.5">
{(["body", "header"] as const).map((tab) => (
<button
aria-pressed={selectedTab === tab}
className={cn(
"network-tab border-0 bg-transparent p-0 text-[12px] font-semibold capitalize outline-none",
selectedTab === tab && "network-tab-active"
"network-payload-tab h-6 rounded-[5px] border border-transparent px-2.5 text-[12px] font-semibold capitalize outline-none transition-[background-color,border-color,color,box-shadow] focus-visible:ring-2 focus-visible:ring-ring/30",
selectedTab === tab && "network-payload-tab-active"
)}
key={tab}
onClick={() => setSelectedTab(tab)}
+22
View File
@@ -1221,6 +1221,28 @@
color: var(--network-text);
}
.network-payload-tabs {
background: var(--network-panel-muted);
border-color: var(--network-control-border);
}
.network-payload-tab {
color: var(--network-text-subtle);
}
.network-payload-tab:hover {
background: var(--network-control-hover);
color: var(--network-text);
}
.network-payload-tab-active,
.network-payload-tab-active:hover {
background: var(--network-control);
border-color: var(--network-border-strong);
box-shadow: 0 1px 2px color-mix(in oklab, var(--network-border-strong) 32%, transparent);
color: var(--network-accent);
}
.network-tab-divider,
.network-pane-split,
.network-kv-key-head {