feat: 侧边面板重构为通用 TabPanel，页签栏对齐 ZCode 交互

2026-09-08 10:14:24 +08:00
parent 8cf5f408f6
commit a18fa55d4e
5 changed files with 536 additions and 102 deletions
@@ -126,6 +126,8 @@ export class BrowserController {
  private listeners = new Set<(state: BrowserUiState) => void>()
  private traceText: string | null = null
  private settings: BrowserSettings = { riskAcknowledged: false }
+  /** 最近关闭的页签（新的在前，供「最近关闭的标签页」恢复） */
+  private closedTabs: Array<{ title: string; url: string; closedAt: number }> = []

  constructor() {
    this.browserSession = electronSession.fromPartition(PARTITION)
@@ -232,6 +234,7 @@ export class BrowserController {
      riskAcknowledged: this.settings.riskAcknowledged,
      tabs,
      activeTabId: this.activeTabId,
+      recentClosed: this.closedTabs.map(({ title, url }) => ({ title, url })),
      trace: this.traceText,
      imported: this.settings.imported ?? null
    }
@@ -439,6 +442,9 @@ export class BrowserController {
    }
    this.removeView(tab.view)
    this.tabs.delete(id)
+    // 记入「最近关闭的标签页」（新的在前，最多 10 条）
+    this.closedTabs.unshift({ title: tab.title || tab.url || '新标签页', url: tab.url, closedAt: Date.now() })
+    this.closedTabs = this.closedTabs.slice(0, 10)
    if (this.activeTabId === id) this.activeTabId = this.tabs.keys().next().value ?? null
    if (this.agentTabId === id) this.agentTabId = this.activeTabId
    this.emitState()
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import type { JSX } from 'react'
+import { LuGlobe } from 'react-icons/lu'
 import { useAgent } from './hooks/useAgent'
 import { useBrowser } from './hooks/useBrowser'
 import { SidebarNav } from './components/SidebarNav'
@@ -10,12 +11,12 @@ import { Composer } from './components/Composer'
 import { SettingsModal } from './components/SettingsModal'
 import { Search } from './components/Search'
 import { BrowserPanel } from './components/browser/BrowserPanel'
-import { SidePanel } from './components/SidePanel'
+import { SidePanel, type PanelTabIcon } from './components/SidePanel'
 import { applyThemeColor } from './lib/theme'

-// ---- 侧边面板状态（开合 / 宽度），跨启动持久化 ----
+// ---- 侧边面板（TabPanel）：开合 / 标签 / 宽度，跨启动持久化 ----

-const SIDE_STORAGE_KEY = 'aso.sidepanel.v2'
+const SIDE_STORAGE_KEY = 'aso.sidepanel.v3'
 const SIDE_DEFAULT_WIDTH = 480
 const SIDE_MIN_WIDTH = 380
 const SIDE_MAX_WIDTH = 760
@@ -23,6 +24,14 @@ const SIDE_MAX_WIDTH = 760
 interface SideState {
  open: boolean
  width: number
+  /** 打开的标签 id（新的追加在尾部） */
+  tabs: string[]
+  active: string | null
+}
+
+/** 面板标签注册表：新标签在这里登记即可进入 TabPanel 通用机制 */
+const PANEL_TAB_META: Record<string, { title: string; icon: PanelTabIcon }> = {
+  browser: { title: '浏览器', icon: LuGlobe }
 }

 function loadSideState(): SideState {
@@ -30,18 +39,21 @@ function loadSideState(): SideState {
    const raw = localStorage.getItem(SIDE_STORAGE_KEY)
    if (raw) {
      const parsed = JSON.parse(raw) as Partial<SideState>
+      const tabs = Array.isArray(parsed.tabs) ? parsed.tabs.filter((t) => t in PANEL_TAB_META) : []
      return {
        open: Boolean(parsed.open),
        width:
          typeof parsed.width === 'number'
            ? Math.min(SIDE_MAX_WIDTH, Math.max(SIDE_MIN_WIDTH, parsed.width))
-            : SIDE_DEFAULT_WIDTH
+            : SIDE_DEFAULT_WIDTH,
+        tabs,
+        active: parsed.active && tabs.includes(parsed.active) ? parsed.active : (tabs[tabs.length - 1] ?? null)
      }
    }
  } catch {
    // 损坏/不可用时按默认处理
  }
-  return { open: false, width: SIDE_DEFAULT_WIDTH }
+  return { open: false, width: SIDE_DEFAULT_WIDTH, tabs: [], active: null }
 }

 export default function App(): JSX.Element {
@@ -67,7 +79,8 @@ export default function App(): JSX.Element {
  const [searchOpen, setSearchOpen] = useState(false)
  const browser = useBrowser()
  const [side, setSide] = useState<SideState>(loadSideState)
-  const { open: sideOpen, width: sideWidth } = side
+  const [sideOverlay, setSideOverlay] = useState(false)
+  const { open: sideOpen, tabs: sideTabIds, active: sideActive, width: sideWidth } = side

  useEffect(() => {
    try {
@@ -85,6 +98,30 @@ export default function App(): JSX.Element {
    setSide((s) => ({ ...s, width }))
  }, [])

+  const handleSideOverlay = useCallback((open: boolean): void => {
+    setSideOverlay(open)
+  }, [])
+
+  const selectPanelTab = useCallback((id: string): void => {
+    setSide((s) => ({ ...s, active: id }))
+  }, [])
+
+  const closePanelTab = useCallback((id: string): void => {
+    setSide((s) => {
+      const tabs = s.tabs.filter((t) => t !== id)
+      return { ...s, tabs, active: s.active === id ? (tabs[tabs.length - 1] ?? null) : s.active }
+    })
+  }, [])
+
+  const openPanelTab = useCallback((id: string): void => {
+    setSide((s) => ({
+      ...s,
+      open: true,
+      tabs: s.tabs.includes(id) ? s.tabs : [...s.tabs, id],
+      active: id
+    }))
+  }, [])
+
  // 启动时应用持久化的主题色
  useEffect(() => {
    void window.api
@@ -133,6 +170,34 @@ export default function App(): JSX.Element {
    activeMeta?.firstMessage?.trim() ||
    ''

+  // 面板标签：注册表 → PanelTab（内容按 id 装配）
+  const panelTabs = sideTabIds.map((id) => {
+    const meta = PANEL_TAB_META[id]
+    return {
+      id,
+      title: meta.title,
+      icon: meta.icon,
+      content:
+        id === 'browser' ? (
+          <BrowserPanel
+            state={browser.state}
+            suspended={settingsOpen || searchOpen || sideOverlay}
+            onNavigate={browser.navigate}
+            onGoBack={browser.goBack}
+            onGoForward={browser.goForward}
+            onReload={browser.reload}
+            onNewTab={browser.newTab}
+            onSelectTab={browser.selectTab}
+            onCloseTab={browser.closeTab}
+            onAcknowledgeRisk={browser.acknowledgeRisk}
+            onDetectSources={browser.detectSources}
+            onImportProfile={browser.importProfile}
+          />
+        ) : null
+    }
+  })
+  const panelAvailable = Object.entries(PANEL_TAB_META).map(([id, m]) => ({ id, title: m.title, icon: m.icon }))
+
  return (
    <div className="relative flex h-full w-full bg-page text-ink antialiased">
      <SidebarNav
@@ -189,22 +254,18 @@ export default function App(): JSX.Element {
            />
          </div>
          {sideOpen && (
-            <SidePanel width={sideWidth} onWidthChange={setSideWidth} onCollapse={toggleSide}>
-              <BrowserPanel
-                state={browser.state}
-                suspended={settingsOpen || searchOpen}
-                onNavigate={browser.navigate}
-                onGoBack={browser.goBack}
-                onGoForward={browser.goForward}
-                onReload={browser.reload}
-                onNewTab={browser.newTab}
-                onSelectTab={browser.selectTab}
-                onCloseTab={browser.closeTab}
-                onAcknowledgeRisk={browser.acknowledgeRisk}
-                onDetectSources={browser.detectSources}
-                onImportProfile={browser.importProfile}
-              />
-            </SidePanel>
+            <SidePanel
+              tabs={panelTabs}
+              activeId={sideActive}
+              available={panelAvailable}
+              width={sideWidth}
+              onWidthChange={setSideWidth}
+              onSelectTab={selectPanelTab}
+              onCloseTab={closePanelTab}
+              onOpenTab={openPanelTab}
+              onCollapse={toggleSide}
+              onOverlayChange={handleSideOverlay}
+            />
          )}
        </div>
      </main>
@@ -1,25 +1,65 @@
-import { useEffect, useRef, type JSX, type ReactNode } from 'react'
-import { LuChevronDown, LuGlobe } from 'react-icons/lu'
+import { useEffect, useRef, useState, type ComponentType, type JSX, type ReactNode } from 'react'
+import { LuChevronDown, LuX } from 'react-icons/lu'

 /**
- * 右侧侧边面板（当前承载内置浏览器）。
- * 顶栏为 ZCode 式标签条形态（收起按钮 + 浏览器标签），左缘可拖拽调宽；
- * 后续新增面板类型时，再扩展为多标签结构。
+ * 右侧通用标签面板（TabPanel，ZCode 式）。
+ * 面板承载所有标签的通用机制：标签条、˅ 标签列表下拉（逐个关闭、收起面板）、
+ * 标签右键菜单（关闭/关闭其他）、空态「打开标签页」宫格、左缘宽度拖拽。
+ * 具体标签（浏览器等）通过 tabs 传入内容，与面板机制完全解耦；
+ * 新增标签类型只需在宿主的标签注册表里登记，面板零改动。
 */

 const PANEL_MIN_WIDTH = 380
 const PANEL_MAX_WIDTH = 760

-interface SidePanelProps {
-  width: number
-  onWidthChange: (width: number) => void
-  onCollapse: () => void
-  /** 面板内容（浏览器标签） */
-  children: ReactNode
+export type PanelTabIcon = ComponentType<{ size?: number; className?: string }>
+
+/** 一个已打开的面板标签 */
+export interface PanelTab {
+  id: string
+  title: string
+  icon: PanelTabIcon
+  content: ReactNode
 }

-export function SidePanel({ width, onWidthChange, onCollapse, children }: SidePanelProps): JSX.Element {
+/** 可打开的标签类型（空态宫格用） */
+export interface PanelTabOption {
+  id: string
+  title: string
+  icon: PanelTabIcon
+}
+
+interface SidePanelProps {
+  tabs: PanelTab[]
+  activeId: string | null
+  /** 无打开标签时，空态宫格展示的可选类型 */
+  available: PanelTabOption[]
+  width: number
+  onWidthChange: (width: number) => void
+  onSelectTab: (id: string) => void
+  onCloseTab: (id: string) => void
+  onOpenTab: (id: string) => void
+  /** 收起整个面板（下拉菜单项，与标题栏开关等效） */
+  onCollapse: () => void
+  /** 下拉/右键菜单开合回调（宿主需暂停原生视图等，避免菜单被原生层覆盖） */
+  onOverlayChange?: (open: boolean) => void
+}
+
+export function SidePanel({
+  tabs,
+  activeId,
+  available,
+  width,
+  onWidthChange,
+  onSelectTab,
+  onCloseTab,
+  onOpenTab,
+  onCollapse,
+  onOverlayChange
+}: SidePanelProps): JSX.Element {
  const dragRef = useRef<{ startX: number; startWidth: number } | null>(null)
+  const [listOpen, setListOpen] = useState(false)
+  const [ctxMenu, setCtxMenu] = useState<{ x: number; y: number; tabId: string } | null>(null)

  // 面板宽度拖拽（左边缘把手）
  useEffect(() => {
@@ -43,6 +83,26 @@ export function SidePanel({ width, onWidthChange, onCollapse, children }: SidePa
    dragRef.current = { startX: e.clientX, startWidth: width }
  }

+  // 菜单打开时 Esc 关闭
+  useEffect(() => {
+    if (!listOpen && !ctxMenu) return
+    const onKey = (e: KeyboardEvent): void => {
+      if (e.key === 'Escape') {
+        setListOpen(false)
+        setCtxMenu(null)
+      }
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [listOpen, ctxMenu])
+
+  // 覆盖层开合上报（宿主借此暂停原生视图）
+  useEffect(() => {
+    onOverlayChange?.(listOpen || ctxMenu !== null)
+  }, [listOpen, ctxMenu, onOverlayChange])
+
+  const current = tabs.find((t) => t.id === activeId) ?? tabs[tabs.length - 1] ?? null
+
  return (
    <aside
      className="relative flex h-full shrink-0 flex-col border-l border-zinc-200 bg-zinc-50"
@@ -57,24 +117,191 @@ export function SidePanel({ width, onWidthChange, onCollapse, children }: SidePa
        aria-orientation="vertical"
      />

-      {/* 标签条：收起 + 当前标签 */}
-      <div className="flex h-9 shrink-0 items-center gap-1 border-b border-zinc-200 bg-white px-1.5">
-        <button
-          type="button"
-          aria-label="收起侧边面板"
-          title="收起侧边面板"
-          onClick={onCollapse}
-          className="flex size-7 shrink-0 items-center justify-center rounded text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-600"
-        >
-          <LuChevronDown size={13} />
-        </button>
-        <div className="flex h-7 shrink-0 items-center gap-1.5 rounded bg-accent-tint px-2 text-[11.5px] text-accent-ink">
-          <LuGlobe size={11} />
-          <span>浏览器</span>
-        </div>
-      </div>
+      {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 shrink-0">
+            <button
+              type="button"
+              aria-label="标签页列表"
+              aria-expanded={listOpen}
+              title="标签页列表"
+              onClick={() => setListOpen((v) => !v)}
+              className={`flex size-7 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} />
+            </button>

-      <div className="relative min-h-0 flex-1">{children}</div>
+            {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>
+                  {tabs.map((tab) => (
+                    <div
+                      key={tab.id}
+                      onClick={() => {
+                        onSelectTab(tab.id)
+                        setListOpen(false)
+                      }}
+                      className="group flex cursor-default items-center gap-2 px-2 py-1.5 hover:bg-zinc-100"
+                    >
+                      <tab.icon size={12} className="shrink-0 text-zinc-400" />
+                      <span className="min-w-0 flex-1 truncate text-[12px] text-zinc-600">{tab.title}</span>
+                      <button
+                        type="button"
+                        aria-label={`关闭${tab.title}标签`}
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          onCloseTab(tab.id)
+                        }}
+                        className="shrink-0 rounded p-0.5 text-zinc-400 transition-colors hover:bg-zinc-200 hover:text-zinc-600"
+                      >
+                        <LuX size={11} />
+                      </button>
+                    </div>
+                  ))}
+                  <div className="my-1 border-t border-zinc-100" />
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setListOpen(false)
+                      onCollapse()
+                    }}
+                    className="w-full px-3 py-1.5 text-left text-[12px] text-zinc-600 transition-colors hover:bg-zinc-100"
+                  >
+                    收起面板
+                  </button>
+                </div>
+              </>
+            )}
+          </div>
+
+          {/* 标签（右键菜单：关闭/关闭其他） */}
+          <div className="flex h-full min-w-0 flex-1 items-center gap-1 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-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'
+                  }`}
+                >
+                  <tab.icon size={11} 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 hover:bg-zinc-200 group-hover:block"
+                  >
+                    <LuX size={10} />
+                  </span>
+                </button>
+              )
+            })}
+          </div>
+
+          {ctxMenu && (
+            <>
+              <div
+                className="fixed inset-0 z-30"
+                onClick={() => setCtxMenu(null)}
+                onContextMenu={(e) => {
+                  e.preventDefault()
+                  setCtxMenu(null)
+                }}
+              />
+              <div
+                className="fixed z-40 w-40 rounded-lg border border-zinc-200 bg-white py-1 shadow-xl shadow-zinc-300/40"
+                style={{ left: ctxMenu.x, top: ctxMenu.y }}
+              >
+                <button
+                  type="button"
+                  onClick={() => {
+                    onCloseTab(ctxMenu.tabId)
+                    setCtxMenu(null)
+                  }}
+                  className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-[12px] text-zinc-600 transition-colors hover:bg-zinc-100"
+                >
+                  <LuX size={11} className="shrink-0" />
+                  关闭标签页
+                </button>
+                <button
+                  type="button"
+                  disabled={tabs.length <= 1}
+                  onClick={() => {
+                    for (const t of tabs) {
+                      if (t.id !== ctxMenu.tabId) onCloseTab(t.id)
+                    }
+                    setCtxMenu(null)
+                  }}
+                  className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-[12px] text-zinc-600 transition-colors hover:bg-zinc-100 disabled:cursor-default disabled:text-zinc-300 disabled:hover:bg-transparent"
+                >
+                  <LuX size={11} className="shrink-0" />
+                  关闭其他标签页
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      )}
+
+      {tabs.length === 0 ? (
+        <EmptyState available={available} onOpen={onOpenTab} />
+      ) : (
+        <div className="relative min-h-0 flex-1">{current?.content ?? null}</div>
+      )}
    </aside>
  )
 }
+
+/** 空态：无任何标签时的「打开标签页」宫格（随可用类型展示） */
+function EmptyState({
+  available,
+  onOpen
+}: {
+  available: PanelTabOption[]
+  onOpen: (id: string) => void
+}): JSX.Element {
+  return (
+    <div className="flex h-full min-w-0 flex-1 flex-col items-center justify-center gap-6 px-8">
+      <div className="text-center">
+        <h2 className="text-[16px] font-medium text-zinc-700">打开标签页</h2>
+        <p className="mt-1.5 text-[12px] text-zinc-400">选择要在侧边面板中打开的标签。</p>
+      </div>
+      <div className="grid grid-cols-2 gap-3">
+        {available.map(({ id, title, icon: Icon }) => (
+          <button
+            key={id}
+            type="button"
+            onClick={() => onOpen(id)}
+            className="flex h-[76px] w-[112px] flex-col items-center justify-center gap-2 rounded-xl border border-zinc-200 bg-white text-zinc-500 transition-colors hover:border-accent/40 hover:bg-accent-tint/50 hover:text-accent-ink"
+          >
+            <Icon size={18} />
+            <span className="text-[12px]">{title}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
@@ -28,7 +28,8 @@ interface BrowserPanelProps {
  onGoBack: () => void
  onGoForward: () => void
  onReload: () => void
-  onNewTab: () => void
+  /** 新建页签；传 url 时直接打开该地址（「最近关闭的标签页」恢复） */
+  onNewTab: (url?: string) => void
  onSelectTab: (tabId: string) => void
  onCloseTab: (tabId: string) => void
  onAcknowledgeRisk: () => void
@@ -40,6 +41,8 @@ export function BrowserPanel(props: BrowserPanelProps): JSX.Element {
  const { state, suspended } = props
  const [address, setAddress] = useState('')
  const [importOpen, setImportOpen] = useState(false)
+  const [tabListOpen, setTabListOpen] = useState(false)
+  const [tabMenu, setTabMenu] = useState<{ x: number; y: number; tabId: string } | null>(null)

  const activeTab = useMemo(
    () => state?.tabs.find((t) => t.tabId === state.activeTabId) ?? null,
@@ -54,6 +57,19 @@ export function BrowserPanel(props: BrowserPanelProps): JSX.Element {
    }
  }, [activeTab?.url])

+  // 菜单打开时 Esc 关闭
+  useEffect(() => {
+    if (!tabListOpen && !tabMenu) return
+    const onKey = (e: KeyboardEvent): void => {
+      if (e.key === 'Escape') {
+        setTabListOpen(false)
+        setTabMenu(null)
+      }
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [tabListOpen, tabMenu])
+
  const submitAddress = (): void => {
    const value = address.trim()
    if (value) props.onNavigate(value)
@@ -61,48 +77,179 @@ export function BrowserPanel(props: BrowserPanelProps): JSX.Element {
  }

  const riskBanner = state && !state.riskAcknowledged
-  const showSlot = Boolean(activeTab) && !suspended && !importOpen
+  // 下拉/右键菜单会伸到页面区域上方，原生视图必须暂时隐藏（原生层级永远在 DOM 之上）
+  const overlayOpen = importOpen || tabListOpen || tabMenu !== null
+  const showSlot = Boolean(activeTab) && !suspended && !overlayOpen

  return (
    <div className="flex h-full min-w-0 flex-1 flex-col bg-zinc-50" aria-label="内置浏览器">
-      {/* 页签栏 */}
-      <div className="flex h-9 shrink-0 items-center gap-1 overflow-x-auto border-b border-zinc-200 bg-white px-1.5">
-        {(state?.tabs ?? []).map((tab) => (
+      {/* 页签栏：˅ 列表（打开/最近关闭）+ 页签（右键菜单）+ 新建 */}
+      <div className="flex h-9 shrink-0 items-center gap-1 border-b border-zinc-200 bg-white px-1.5">
+        <div className="relative shrink-0">
          <button
-            key={tab.tabId}
            type="button"
-            onClick={() => props.onSelectTab(tab.tabId)}
-            className={`group flex h-7 max-w-44 min-w-20 shrink-0 items-center gap-1 rounded px-2 text-left text-[11px] transition-colors ${
-              tab.tabId === state?.activeTabId
-                ? 'bg-accent-tint text-accent-ink'
-                : 'text-zinc-500 hover:bg-zinc-100 hover:text-zinc-700'
+            aria-label="标签页列表"
+            aria-expanded={tabListOpen}
+            title="标签页列表"
+            onClick={() => setTabListOpen((v) => !v)}
+            className={`flex size-7 items-center justify-center rounded transition-colors ${
+              tabListOpen ? 'bg-zinc-100 text-zinc-600' : 'text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600'
            }`}
          >
-            {tab.loading && <LuRotateCw size={10} className="shrink-0 animate-spin" />}
-            <span className="min-w-0 flex-1 truncate">{tab.title || tab.url || '新标签页'}</span>
-            <span
-              role="button"
-              tabIndex={-1}
-              aria-label="关闭标签页"
-              onClick={(e) => {
-                e.stopPropagation()
-                props.onCloseTab(tab.tabId)
-              }}
-              className="hidden shrink-0 rounded p-0.5 hover:bg-zinc-200 group-hover:block"
-            >
-              <LuX size={10} />
-            </span>
+            <LuChevronDown size={13} />
          </button>
-        ))}
-        <button
-          type="button"
-          aria-label="新建标签页"
-          onClick={props.onNewTab}
-          disabled={Boolean(riskBanner)}
-          className="flex size-7 shrink-0 items-center justify-center rounded text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-600 disabled:opacity-40"
-        >
-          <LuPlus size={13} />
-        </button>
+
+          {tabListOpen && (
+            <>
+              <div className="fixed inset-0 z-20" onClick={() => setTabListOpen(false)} />
+              <div className="absolute left-0 top-9 z-30 max-h-[320px] w-60 overflow-y-auto 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>
+                {(state?.tabs ?? []).length === 0 && (
+                  <div className="px-3 py-1 text-[11.5px] text-zinc-300">无打开的标签页</div>
+                )}
+                {(state?.tabs ?? []).map((tab) => (
+                  <div
+                    key={tab.tabId}
+                    onClick={() => props.onSelectTab(tab.tabId)}
+                    className="group flex cursor-default items-center gap-2 px-2 py-1.5 hover:bg-zinc-100"
+                  >
+                    {tab.loading ? (
+                      <LuRotateCw size={12} className="shrink-0 animate-spin text-zinc-400" />
+                    ) : (
+                      <LuGlobe size={12} className="shrink-0 text-zinc-400" />
+                    )}
+                    <span className="min-w-0 flex-1 truncate text-[12px] text-zinc-600">
+                      {tab.title || tab.url || '新标签页'}
+                    </span>
+                    <button
+                      type="button"
+                      aria-label="关闭标签页"
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        props.onCloseTab(tab.tabId)
+                      }}
+                      className="shrink-0 rounded p-0.5 text-zinc-400 transition-colors hover:bg-zinc-200 hover:text-zinc-600"
+                    >
+                      <LuX size={11} />
+                    </button>
+                  </div>
+                ))}
+
+                {(state?.recentClosed?.length ?? 0) > 0 && (
+                  <>
+                    <div className="my-1 border-t border-zinc-100" />
+                    <div className="px-3 pb-1 text-[11px] text-zinc-400">最近关闭的标签页</div>
+                    {state?.recentClosed.map((item, i) => (
+                      <button
+                        key={`${i}-${item.url}`}
+                        type="button"
+                        onClick={() => {
+                          setTabListOpen(false)
+                          void Promise.resolve(props.onNewTab(item.url)).catch(() => undefined)
+                        }}
+                        className="flex w-full items-center gap-2 px-2 py-1.5 text-left hover:bg-zinc-100"
+                      >
+                        <LuGlobe size={12} className="shrink-0 text-zinc-400" />
+                        <span className="min-w-0 flex-1 truncate text-[12px] text-zinc-600">{item.title}</span>
+                      </button>
+                    ))}
+                  </>
+                )}
+              </div>
+            </>
+          )}
+        </div>
+
+        <div className="flex h-full min-w-0 flex-1 items-center gap-1 overflow-x-auto">
+          {(state?.tabs ?? []).map((tab) => (
+            <button
+              key={tab.tabId}
+              type="button"
+              onClick={() => props.onSelectTab(tab.tabId)}
+              onContextMenu={(e) => {
+                e.preventDefault()
+                setTabMenu({
+                  x: Math.min(e.clientX, window.innerWidth - 170),
+                  y: Math.min(e.clientY, window.innerHeight - 110),
+                  tabId: tab.tabId
+                })
+              }}
+              className={`group flex h-7 max-w-44 min-w-20 shrink-0 items-center gap-1 rounded px-2 text-left text-[11px] transition-colors ${
+                tab.tabId === state?.activeTabId
+                  ? 'bg-accent-tint text-accent-ink'
+                  : 'text-zinc-500 hover:bg-zinc-100 hover:text-zinc-700'
+              }`}
+            >
+              {tab.loading && <LuRotateCw size={10} className="shrink-0 animate-spin" />}
+              <span className="min-w-0 flex-1 truncate">{tab.title || tab.url || '新标签页'}</span>
+              <span
+                role="button"
+                tabIndex={-1}
+                aria-label="关闭标签页"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  props.onCloseTab(tab.tabId)
+                }}
+                className="hidden shrink-0 rounded p-0.5 hover:bg-zinc-200 group-hover:block"
+              >
+                <LuX size={10} />
+              </span>
+            </button>
+          ))}
+          <button
+            type="button"
+            aria-label="新建标签页"
+            onClick={() => props.onNewTab()}
+            disabled={Boolean(riskBanner)}
+            className="flex size-7 shrink-0 items-center justify-center rounded text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-600 disabled:opacity-40"
+          >
+            <LuPlus size={13} />
+          </button>
+        </div>
+
+        {/* 页签右键菜单 */}
+        {tabMenu && (
+          <>
+            <div
+              className="fixed inset-0 z-30"
+              onClick={() => setTabMenu(null)}
+              onContextMenu={(e) => {
+                e.preventDefault()
+                setTabMenu(null)
+              }}
+            />
+            <div
+              className="fixed z-40 w-40 rounded-lg border border-zinc-200 bg-white py-1 shadow-xl shadow-zinc-300/40"
+              style={{ left: tabMenu.x, top: tabMenu.y }}
+            >
+              <button
+                type="button"
+                onClick={() => {
+                  props.onCloseTab(tabMenu.tabId)
+                  setTabMenu(null)
+                }}
+                className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-[12px] text-zinc-600 transition-colors hover:bg-zinc-100"
+              >
+                <LuX size={11} className="shrink-0" />
+                关闭标签页
+              </button>
+              <button
+                type="button"
+                disabled={(state?.tabs.length ?? 0) <= 1}
+                onClick={() => {
+                  for (const t of state?.tabs ?? []) {
+                    if (t.tabId !== tabMenu.tabId) props.onCloseTab(t.tabId)
+                  }
+                  setTabMenu(null)
+                }}
+                className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-[12px] text-zinc-600 transition-colors hover:bg-zinc-100 disabled:cursor-default disabled:text-zinc-300 disabled:hover:bg-transparent"
+              >
+                <LuX size={11} className="shrink-0" />
+                关闭其他标签页
+              </button>
+            </div>
+          </>
+        )}
      </div>

      {/* 工具条 */}
@@ -182,22 +329,7 @@ export function BrowserPanel(props: BrowserPanelProps): JSX.Element {
        ) : (
          <div className="flex h-full flex-col items-center justify-center gap-3 px-8 text-center">
            <LuGlobe size={28} className="text-zinc-300" />
-            {riskBanner ? (
-              <p className="text-[12px] text-zinc-400">确认上方风险告知后即可打开网页</p>
-            ) : (
-              <>
-                <button
-                  type="button"
-                  onClick={props.onNewTab}
-                  className="rounded bg-accent px-3.5 py-1.5 text-[12px] font-medium text-white transition-opacity hover:opacity-90"
-                >
-                  打开浏览器
-                </button>
-                <p className="text-[11.5px] leading-relaxed text-zinc-400">
-                  也可以直接让 Agent 帮你操作网页（browser_navigate / browser_observe 等工具）
-                </p>
-              </>
-            )}
+            {riskBanner && <p className="text-[12px] text-zinc-400">确认上方风险告知后即可打开网页</p>}
          </div>
        )}
      </div>
@@ -192,6 +192,12 @@ export interface BrowserTabInfo {
  loading: boolean
 }

+/** 最近关闭的浏览器页签（页签栏「最近关闭的标签页」用） */
+export interface BrowserClosedTab {
+  title: string
+  url: string
+}
+
 /** 已导入的本地浏览器配置摘要（面板展示用） */
 export interface BrowserImportInfo {
  browser: string
@@ -210,6 +216,8 @@ export interface BrowserUiState {
  riskAcknowledged: boolean
  tabs: BrowserTabInfo[]
  activeTabId: string | null
+  /** 最近关闭的页签（新的在前，最多 10 条） */
+  recentClosed: BrowserClosedTab[]
  /** 最近一次 Agent 浏览器操作描述（面板底部轨迹） */
  trace: string | null
  imported?: BrowserImportInfo | null