From 45cd2b8af8a4b6eb7a555c7ba46feea4b98c6524 Mon Sep 17 00:00:00 2001
From: Rick Ye <rick.ye@gz.questwork.com>
Date: Tue, 8 Sep 2026 10:42:57 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=9D=A2=E6=9D=BF=20tag=20=E4=B8=8E?=
 =?UTF-8?q?=E7=BD=91=E9=A1=B5=20tab=20=E6=94=B9=E7=94=A8=E4=B8=8D=E5=90=8C?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E5=BD=A2=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/renderer/src/components/SidePanel.tsx | 69 +++++++------------
 1 file changed, 23 insertions(+), 46 deletions(-)

diff --git a/apps/desktop/src/renderer/src/components/SidePanel.tsx b/apps/desktop/src/renderer/src/components/SidePanel.tsx
index fbd9cc9..4fe3e93 100644
--- a/apps/desktop/src/renderer/src/components/SidePanel.tsx
+++ b/apps/desktop/src/renderer/src/components/SidePanel.tsx
@@ -119,19 +119,36 @@ export function SidePanel({
 
       {tabs.length > 0 && (
         <div className="relative flex h-8 shrink-0 items-center gap-1 border-b border-zinc-200 bg-white px-1.5">
-          {/* ˅ 标签列表下拉 */}
+          {/* 面板 tag 本身即下拉按钮（与网页 tab 条的 ˅ 列表按钮形态区分） */}
           <div className="relative shrink-0">
             <button
               type="button"
-              aria-label="标签列表"
               aria-expanded={listOpen}
-              title="标签列表"
               onClick={() => setListOpen((v) => !v)}
-              className={`flex size-6 items-center justify-center rounded transition-colors ${
-                listOpen ? 'bg-zinc-100 text-zinc-600' : 'text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600'
+              onContextMenu={(e) => {
+                e.preventDefault()
+                setCtxMenu({
+                  x: Math.min(e.clientX, window.innerWidth - 170),
+                  y: Math.min(e.clientY, window.innerHeight - 110),
+                  tabId: current?.id ?? ''
+                })
+              }}
+              className={`flex h-7 items-center gap-1.5 rounded-md border px-2 text-[12px] transition-colors ${
+                listOpen
+                  ? 'border-accent/50 bg-accent-tint/40 text-accent-ink'
+                  : 'border-zinc-200 bg-white text-zinc-600 hover:border-accent/40 hover:text-zinc-800'
               }`}
             >
-              <LuChevronDown size={12} />
+              {current && (
+                <>
+                  <current.icon size={12} className="shrink-0" />
+                  <span className="min-w-0 max-w-32 truncate">{current.title}</span>
+                </>
+              )}
+              <LuChevronDown
+                size={11}
+                className={`shrink-0 text-zinc-400 transition-transform ${listOpen ? 'rotate-180' : ''}`}
+              />
             </button>
 
             {listOpen && (
@@ -179,46 +196,6 @@ export function SidePanel({
             )}
           </div>
 
-          {/* 标签（右键菜单：关闭/关闭其他）。文字形 tag，与下方网页 tab 的片状样式区分 */}
-          <div className="flex h-full min-w-0 flex-1 items-center gap-0.5 overflow-x-auto">
-            {tabs.map((tab) => {
-              const isActive = tab.id === current?.id
-              return (
-                <button
-                  key={tab.id}
-                  type="button"
-                  onClick={() => onSelectTab(tab.id)}
-                  onContextMenu={(e) => {
-                    e.preventDefault()
-                    setCtxMenu({
-                      x: Math.min(e.clientX, window.innerWidth - 170),
-                      y: Math.min(e.clientY, window.innerHeight - 110),
-                      tabId: tab.id
-                    })
-                  }}
-                  className={`group flex h-6 shrink-0 items-center gap-1.5 rounded px-1.5 text-[12px] transition-colors ${
-                    isActive ? 'font-medium text-zinc-700' : 'text-zinc-500 hover:text-zinc-700'
-                  }`}
-                >
-                  <tab.icon size={12} className="shrink-0" />
-                  <span className="min-w-0 max-w-32 truncate">{tab.title}</span>
-                  <span
-                    role="button"
-                    tabIndex={-1}
-                    aria-label={`关闭${tab.title}标签`}
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      onCloseTab(tab.id)
-                    }}
-                    className="hidden shrink-0 rounded p-0.5 text-zinc-400 hover:bg-zinc-200 hover:text-zinc-600 group-hover:block"
-                  >
-                    <LuX size={10} />
-                  </span>
-                </button>
-              )
-            })}
-          </div>
-
           {ctxMenu && (
             <>
               <div