From e77b76986ebef2469c8bd136803afae0b3201d6e Mon Sep 17 00:00:00 2001 From: logan Date: Fri, 18 Sep 2026 13:01:27 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A1=B6=E6=A0=8F=E5=9B=BA=E5=AE=9A=E5=8D=95?= =?UTF-8?q?=E8=A1=8C=20+=20=E4=BE=A7=E6=A0=8F=E4=BF=A1=E6=81=AF=E6=9E=B6?= =?UTF-8?q?=E6=9E=84=E9=87=8D=E6=9E=84=EF=BC=88=E6=8E=A5=E5=8F=A3/?= =?UTF-8?q?=E5=8E=86=E5=8F=B2=E5=88=86=E6=AE=B5=E5=88=87=E6=8D=A2=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 修复窄窗口下顶栏按钮被压缩导致中文逐字竖排：按钮 whitespace-nowrap + shrink-0， header flex-nowrap + 横向滚动兜底；协议徽标 xl 以下隐藏；实测 header 恒定 48px、零换行按钮 - 侧栏重构：历史上移——搜索框下「接口 | 历史(计数)」分段切换（历史为高频最近使用）， 历史视图含清空按钮；底部只留跨视图导航（自动化测试）+ 外链（官网与价格），职责单一 - 分段控件样式（panel-3 底、active 白底浮起）；复验截图评审通过 --- apps/web/src/styles.css | 26 +++++++- packages/ui/src/components/Sidebar.tsx | 91 ++++++++++++++------------ packages/ui/src/components/TopBar.tsx | 4 +- 3 files changed, 75 insertions(+), 46 deletions(-) diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css index 276f1bc..d445bf8 100644 --- a/apps/web/src/styles.css +++ b/apps/web/src/styles.css @@ -147,7 +147,7 @@ /* ---------- 按钮 ---------- */ .ops-btn { - @apply inline-flex items-center justify-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-semibold transition; + @apply inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap rounded-lg px-3 py-1.5 text-xs font-semibold transition; border: 1px solid transparent; cursor: pointer; } @@ -172,6 +172,7 @@ .ops-btn-ghost:hover:not(:disabled) { background: var(--hover); color: var(--text); } /* ---------- chip / badge ---------- */ + header button, header a { white-space: nowrap; } .ops-chip { @apply rounded-full px-2.5 py-1 text-[11px] font-medium transition; border: 1px solid var(--border); @@ -324,7 +325,7 @@ /* ---------- 顶栏环境切换器 ---------- */ .ops-envswitch { - @apply inline-flex items-center gap-2 rounded-lg px-2.5 py-1.5 text-xs font-medium transition; + @apply inline-flex shrink-0 items-center gap-2 whitespace-nowrap rounded-lg px-2.5 py-1.5 text-xs font-medium transition; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); @@ -492,6 +493,27 @@ color: var(--accent-strong); } + /* ---------- 侧栏分段切换（接口/历史） ---------- */ + .side-seg { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2px; + padding: 2px; + border-radius: 0.5rem; + background: var(--panel-3); + } + .side-seg-item { + @apply flex items-center justify-center gap-1 rounded-md px-2 py-1 text-[11px] font-medium transition; + color: var(--text-dim); + } + .side-seg-item:hover { color: var(--text); } + .side-seg-item.active { + background: var(--panel); + color: var(--accent-strong); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); + } + .side-seg-item .ops-count { margin-left: 2px; } + /* ---------- 方法 chip 着色 ---------- */ .ops-chip.ops-method-GET { background: color-mix(in srgb, var(--m-GET) 14%, transparent); color: var(--m-GET); } .ops-chip.ops-method-POST { background: color-mix(in srgb, var(--m-POST) 16%, transparent); color: var(--m-POST); } diff --git a/packages/ui/src/components/Sidebar.tsx b/packages/ui/src/components/Sidebar.tsx index a4b420f..d76681a 100644 --- a/packages/ui/src/components/Sidebar.tsx +++ b/packages/ui/src/components/Sidebar.tsx @@ -25,23 +25,68 @@ export function Sidebar() { const history = useWorkspace((s) => s.history); const clearHistory = useWorkspace((s) => s.clearHistory); const openTab = useWorkspace((s) => s.openTab); - const [showHistory, setShowHistory] = useState(true); + const [side, setSide] = useState<"api" | "history">("api"); const [menu, setMenu] = useState<{ x: number; y: number; items: MenuItem[] } | null>(null); const hitIds = useMemo(() => searchTree(collections, search), [collections, search]); return (