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

apps/desktop/src/main/browser/browser-controller.ts

@@ -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()

apps/desktop/src/renderer/src/App.tsx

@@ -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}>
+            <SidePanel
-              <BrowserPanel
+              tabs={panelTabs}
-                state={browser.state}
+              activeId={sideActive}
-                suspended={settingsOpen || searchOpen}
+              available={panelAvailable}
-                onNavigate={browser.navigate}
+              width={sideWidth}
-                onGoBack={browser.goBack}
+              onWidthChange={setSideWidth}
-                onGoForward={browser.goForward}
+              onSelectTab={selectPanelTab}
-                onReload={browser.reload}
+              onCloseTab={closePanelTab}
-                onNewTab={browser.newTab}
+              onOpenTab={openPanelTab}
-                onSelectTab={browser.selectTab}
+              onCollapse={toggleSide}
-                onCloseTab={browser.closeTab}
+              onOverlayChange={handleSideOverlay}
-                onAcknowledgeRisk={browser.acknowledgeRisk}
-                onDetectSources={browser.detectSources}
-                onImportProfile={browser.importProfile}
             />
-            </SidePanel>
           )}
         </div>
       </main>

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

@@ -1,25 +1,65 @@
-import { useEffect, useRef, type JSX, type ReactNode } from 'react'
+import { useEffect, useRef, useState, type ComponentType, type JSX, type ReactNode } from 'react'
-import { LuChevronDown, LuGlobe } from 'react-icons/lu'
+import { LuChevronDown, LuX } from 'react-icons/lu'
 
 /**
- * 右侧侧边面板（当前承载内置浏览器）。
+ * 右侧通用标签面板（TabPanel，ZCode 式）。
- * 顶栏为 ZCode 式标签条形态（收起按钮 + 浏览器标签），左缘可拖拽调宽；
+ * 面板承载所有标签的通用机制：标签条、˅ 标签列表下拉（逐个关闭、收起面板）、
- * 后续新增面板类型时，再扩展为多标签结构。
+ * 标签右键菜单（关闭/关闭其他）、空态「打开标签页」宫格、左缘宽度拖拽。
+ * 具体标签（浏览器等）通过 tabs 传入内容，与面板机制完全解耦；
+ * 新增标签类型只需在宿主的标签注册表里登记，面板零改动。
  */
 
 const PANEL_MIN_WIDTH = 380
 const PANEL_MAX_WIDTH = 760
 
-interface SidePanelProps {
+export type PanelTabIcon = ComponentType<{ size?: number; className?: string }>
-  width: number
+
-  onWidthChange: (width: number) => void
+/** 一个已打开的面板标签 */
-  onCollapse: () => void
+export interface PanelTab {
-  /** 面板内容（浏览器标签） */
+  id: string
-  children: ReactNode
+  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"
       />
 
-      {/* 标签条：收起 + 当前标签 */}
+      {tabs.length > 0 && (
-      <div className="flex h-9 shrink-0 items-center gap-1 border-b border-zinc-200 bg-white px-1.5">
+        <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-label="标签页列表"
-          title="收起侧边面板"
+              aria-expanded={listOpen}
-          onClick={onCollapse}
+              title="标签页列表"
-          className="flex size-7 shrink-0 items-center justify-center rounded text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-600"
+              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="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} />
+            {listOpen && (
-          <span>浏览器</span>
+              <>
+                <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="relative min-h-0 flex-1">{children}</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>
+  )
+}

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

@@ -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,17 +77,103 @@ 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">
+      <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
+            type="button"
+            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'
+            }`}
+          >
+            <LuChevronDown 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'
@@ -97,7 +199,7 @@ export function BrowserPanel(props: BrowserPanelProps): JSX.Element {
           <button
             type="button"
             aria-label="新建标签页"
-          onClick={props.onNewTab}
+            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"
           >
@@ -105,6 +207,51 @@ export function BrowserPanel(props: BrowserPanelProps): JSX.Element {
           </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>
+
       {/* 工具条 */}
       <div className="flex h-10 shrink-0 items-center gap-1 border-b border-zinc-200 bg-white px-1.5">
         <button
@@ -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 ? (
+            {riskBanner && <p className="text-[12px] text-zinc-400">确认上方风险告知后即可打开网页</p>}
-              <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>
-              </>
-            )}
           </div>
         )}
       </div>

apps/desktop/src/shared/types.ts

@@ -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