diff --git a/apps/desktop/src/main/browser/browser-controller.ts b/apps/desktop/src/main/browser/browser-controller.ts index 780068b..56e85a0 100644 --- a/apps/desktop/src/main/browser/browser-controller.ts +++ b/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() diff --git a/apps/desktop/src/renderer/src/App.tsx b/apps/desktop/src/renderer/src/App.tsx index 9e96f57..0a88661 100644 --- a/apps/desktop/src/renderer/src/App.tsx +++ b/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 = { + 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 + 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(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' ? ( + + ) : null + } + }) + const panelAvailable = Object.entries(PANEL_TAB_META).map(([id, m]) => ({ id, title: m.title, icon: m.icon })) + return (
{sideOpen && ( - - - + )} diff --git a/apps/desktop/src/renderer/src/components/SidePanel.tsx b/apps/desktop/src/renderer/src/components/SidePanel.tsx index 19d6b3f..3a30c9f 100644 --- a/apps/desktop/src/renderer/src/components/SidePanel.tsx +++ b/apps/desktop/src/renderer/src/components/SidePanel.tsx @@ -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 ( ) } + +/** 空态：无任何标签时的「打开标签页」宫格（随可用类型展示） */ +function EmptyState({ + available, + onOpen +}: { + available: PanelTabOption[] + onOpen: (id: string) => void +}): JSX.Element { + return ( +
+
+

打开标签页

+

选择要在侧边面板中打开的标签。

+
+
+ {available.map(({ id, title, icon: Icon }) => ( + + ))} +
+
+ ) +} diff --git a/apps/desktop/src/renderer/src/components/browser/BrowserPanel.tsx b/apps/desktop/src/renderer/src/components/browser/BrowserPanel.tsx index 36c9a63..d179150 100644 --- a/apps/desktop/src/renderer/src/components/browser/BrowserPanel.tsx +++ b/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,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 (
- {/* 页签栏 */} -
- {(state?.tabs ?? []).map((tab) => ( + {/* 页签栏：˅ 列表（打开/最近关闭）+ 页签（右键菜单）+ 新建 */} +
+
- ))} - + + {tabListOpen && ( + <> +
setTabListOpen(false)} /> +
+
打开的标签页
+ {(state?.tabs ?? []).length === 0 && ( +
无打开的标签页
+ )} + {(state?.tabs ?? []).map((tab) => ( +
props.onSelectTab(tab.tabId)} + className="group flex cursor-default items-center gap-2 px-2 py-1.5 hover:bg-zinc-100" + > + {tab.loading ? ( + + ) : ( + + )} + + {tab.title || tab.url || '新标签页'} + + +
+ ))} + + {(state?.recentClosed?.length ?? 0) > 0 && ( + <> +
+
最近关闭的标签页
+ {state?.recentClosed.map((item, i) => ( + + ))} + + )} +
+ + )} +
+ +
+ {(state?.tabs ?? []).map((tab) => ( + + ))} + +
+ + {/* 页签右键菜单 */} + {tabMenu && ( + <> +
setTabMenu(null)} + onContextMenu={(e) => { + e.preventDefault() + setTabMenu(null) + }} + /> +
+ + +
+ + )}
{/* 工具条 */} @@ -182,22 +329,7 @@ export function BrowserPanel(props: BrowserPanelProps): JSX.Element { ) : (
- {riskBanner ? ( -

确认上方风险告知后即可打开网页

- ) : ( - <> - -

- 也可以直接让 Agent 帮你操作网页（browser_navigate / browser_observe 等工具） -

- - )} + {riskBanner &&

确认上方风险告知后即可打开网页

}
)}
diff --git a/apps/desktop/src/shared/types.ts b/apps/desktop/src/shared/types.ts index 835c23a..ca8e2bd 100644 --- a/apps/desktop/src/shared/types.ts +++ b/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