fix: 面板 tag 与网页 tab 样式区分 + 下拉文案与暂停期占位

apps/desktop/src/renderer/src/components/SidePanel.tsx

@@ -118,27 +118,27 @@ export function SidePanel({
       />
 
       {tabs.length > 0 && (
-        <div className="relative flex h-9 shrink-0 items-center gap-1 border-b border-zinc-200 bg-white px-1.5">
+        <div className="relative flex h-8 shrink-0 items-center gap-1 border-b border-zinc-200 bg-white px-1.5">
           {/* ˅ 标签列表下拉 */}
           <div className="relative shrink-0">
             <button
               type="button"
-              aria-label="标签页列表"
+              aria-label="标签列表"
               aria-expanded={listOpen}
-              title="标签页列表"
+              title="标签列表"
               onClick={() => setListOpen((v) => !v)}
-              className={`flex size-7 items-center justify-center rounded transition-colors ${
+              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'
               }`}
             >
-              <LuChevronDown size={13} />
+              <LuChevronDown size={12} />
             </button>
 
             {listOpen && (
               <>
                 <div className="fixed inset-0 z-20" onClick={() => setListOpen(false)} />
-                <div className="absolute left-0 top-9 z-30 w-56 rounded-lg border border-zinc-200 bg-white py-1.5 shadow-xl shadow-zinc-300/40">
-                  <div className="px-3 pb-1 pt-1 text-[11px] text-zinc-400">打开的标签页</div>
+                <div className="absolute left-0 top-8 z-30 w-56 rounded-lg border border-zinc-200 bg-white py-1.5 shadow-xl shadow-zinc-300/40">
+                  <div className="px-3 pb-1 pt-1 text-[11px] text-zinc-400">打开的tab</div>
                   {tabs.map((tab) => (
                     <div
                       key={tab.id}
@@ -179,8 +179,8 @@ export function SidePanel({
             )}
           </div>
 
-          {/* 标签（右键菜单：关闭/关闭其他） */}
-          <div className="flex h-full min-w-0 flex-1 items-center gap-1 overflow-x-auto">
+          {/* 标签（右键菜单：关闭/关闭其他）。文字形 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 (
@@ -196,13 +196,11 @@ export function SidePanel({
                       tabId: tab.id
                     })
                   }}
-                  className={`group flex h-7 shrink-0 items-center gap-1.5 rounded px-2 text-left text-[11.5px] transition-colors ${
-                    isActive
-                      ? 'bg-accent-tint text-accent-ink'
-                      : 'text-zinc-500 hover:bg-zinc-100 hover:text-zinc-700'
+                  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={11} className="shrink-0" />
+                  <tab.icon size={12} className="shrink-0" />
                   <span className="min-w-0 max-w-32 truncate">{tab.title}</span>
                   <span
                     role="button"
@@ -212,7 +210,7 @@ export function SidePanel({
                       e.stopPropagation()
                       onCloseTab(tab.id)
                     }}
-                    className="hidden shrink-0 rounded p-0.5 hover:bg-zinc-200 group-hover:block"
+                    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>

apps/desktop/src/renderer/src/components/browser/BrowserPanel.tsx

@@ -322,10 +322,13 @@ export function BrowserPanel(props: BrowserPanelProps): JSX.Element {
         </div>
       )}
 
-      {/* 页面区域：原生 WebContentsView 对齐到这里的矩形 */}
+      {/* 页面区域：原生 WebContentsView 对齐到这里的矩形。
+        * 暂停期（面板/页签菜单打开）保持纯白，不闪空态图标 */}
       <div className="relative min-h-0 flex-1 bg-white">
         {showSlot && activeTab ? (
           <BrowserSlot key={activeTab.tabId} tabId={activeTab.tabId} />
+        ) : activeTab ? (
+          <div className="h-full bg-white" />
         ) : (
           <div className="flex h-full flex-col items-center justify-center gap-3 px-8 text-center">
             <LuGlobe size={28} className="text-zinc-300" />