diff --git a/apps/desktop/src/renderer/src/App.tsx b/apps/desktop/src/renderer/src/App.tsx index b858cdc..9a59d38 100644 --- a/apps/desktop/src/renderer/src/App.tsx +++ b/apps/desktop/src/renderer/src/App.tsx @@ -101,7 +101,12 @@ export default function App(): JSX.Element { }, []) const toggleSide = useCallback((): void => { - setSide((s) => ({ ...s, open: !s.open })) + setSide((s) => { + if (s.open) return { ...s, open: false } + // 当前面板仅承载浏览器标签:打开时无标签则自动补上 + const tabs: SideTabType[] = s.tabs.includes('browser') ? s.tabs : [...s.tabs, 'browser'] + return { ...s, open: true, tabs, active: s.active ?? 'browser' } + }) }, []) const setSideWidth = useCallback((width: number): void => { diff --git a/apps/desktop/src/renderer/src/components/SidePanel.tsx b/apps/desktop/src/renderer/src/components/SidePanel.tsx index 94273da..2245666 100644 --- a/apps/desktop/src/renderer/src/components/SidePanel.tsx +++ b/apps/desktop/src/renderer/src/components/SidePanel.tsx @@ -1,24 +1,24 @@ -import { useEffect, useRef, useState, type ComponentType, type JSX, type ReactNode } from 'react' +import { useEffect, useRef, type ComponentType, type JSX, type ReactNode } from 'react' import { LuChevronDown, LuFileDiff, LuGlobe, LuMessagesSquare, - LuPlus, LuSquareTerminal, LuX } from 'react-icons/lu' /** * 右侧通用侧边面板(ZCode 式标签页容器)。 - * 面板本身只负责:标签栏(收起 / 标签 / “+”菜单)、空态「打开标签页」宫格、 - * 左缘宽度拖拽;各标签的内容由外部传入(浏览器)或使用占位面板。 - * 每种标签同时至多一个实例;浏览器标签承载原生 WebContentsView 的对齐容器。 + * 面板负责:标签栏(收起 / 标签)、空态「打开标签页」宫格、左缘宽度拖拽; + * 各标签的内容由外部传入。标签架构按多类型设计,当前仅开放浏览器, + * 后续新标签在 SIDE_TAB_ORDER 与内容分支里扩展即可。 */ export type SideTabType = 'assistant' | 'review' | 'terminal' | 'browser' -export const SIDE_TAB_ORDER: SideTabType[] = ['assistant', 'review', 'terminal', 'browser'] +/** 当前对外开放的标签类型(浏览器);新标签就绪后加入即可显示 */ +export const SIDE_TAB_ORDER: SideTabType[] = ['browser'] type TabIcon = ComponentType<{ size?: number; className?: string }> @@ -29,12 +29,6 @@ export const SIDE_TAB_META: Record, string> = { - assistant: '在侧边面板中与 Agent 展开一路并行的小对话,不打断主会话(即将支持)。', - review: '查看本会话中 Agent 产生的文件改动与差异,并逐项确认(即将支持)。', - terminal: '在侧边面板中打开与当前工作区绑定的终端(即将支持)。' -} - const PANEL_MIN_WIDTH = 380 const PANEL_MAX_WIDTH = 760 @@ -63,7 +57,6 @@ export function SidePanel({ onCollapse, browser }: SidePanelProps): JSX.Element { - const [menuOpen, setMenuOpen] = useState(false) const dragRef = useRef<{ startX: number; startWidth: number } | null>(null) // 面板宽度拖拽(左边缘把手) @@ -147,68 +140,20 @@ export function SidePanel({ ) })} - -
- - {menuOpen && ( - <> -
setMenuOpen(false)} /> -
- {SIDE_TAB_ORDER.map((type) => { - const { title, icon: Icon } = SIDE_TAB_META[type] - const opened = tabs.includes(type) - return ( - - ) - })} -
- - )} -
+ {/* “+”新增标签菜单随更多标签类型一起回归(当前仅浏览器,无需新增入口) */}
)} {tabs.length === 0 ? ( ) : ( -
- {current === 'browser' ? ( - browser - ) : current ? ( - ]} - /> - ) : null} -
+
{current === 'browser' ? browser : null}
)} ) } -/** 空态:无任何标签时的「打开标签页」宫格 */ +/** 空态:无任何标签时的「打开标签页」宫格(随 SIDE_TAB_ORDER 展示可用标签) */ function EmptyState({ onOpen }: { onOpen: (type: SideTabType) => void }): JSX.Element { return (
@@ -235,22 +180,3 @@ function EmptyState({ onOpen }: { onOpen: (type: SideTabType) => void }): JSX.El
) } - -/** 尚未落地的标签占位页 */ -function PlaceholderPanel({ - icon: Icon, - title, - description -}: { - icon: TabIcon - title: string - description: string -}): JSX.Element { - return ( -
- -
{title}
-

{description}

-
- ) -}