fix: 侧边面板暂只开放浏览器标签,其余类型不显示
This commit is contained in:
@@ -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 => {
|
||||
|
||||
@@ -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<SideTabType, { title: string; icon: TabIcon }
|
||||
browser: { title: '浏览器', icon: LuGlobe }
|
||||
}
|
||||
|
||||
const PLACEHOLDER_DESCRIPTION: Record<Exclude<SideTabType, 'browser'>, 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({
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
|
||||
<div className="relative">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="打开新的标签"
|
||||
title="打开新的标签"
|
||||
onClick={() => setMenuOpen((v) => !v)}
|
||||
className="flex size-7 shrink-0 items-center justify-center rounded text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-600"
|
||||
>
|
||||
<LuPlus size={13} />
|
||||
</button>
|
||||
{menuOpen && (
|
||||
<>
|
||||
<div className="fixed inset-0 z-10" onClick={() => setMenuOpen(false)} />
|
||||
<div className="absolute right-0 top-8 z-20 w-40 rounded-lg border border-zinc-200 bg-white py-1 shadow-xl shadow-zinc-300/40">
|
||||
{SIDE_TAB_ORDER.map((type) => {
|
||||
const { title, icon: Icon } = SIDE_TAB_META[type]
|
||||
const opened = tabs.includes(type)
|
||||
return (
|
||||
<button
|
||||
key={type}
|
||||
type="button"
|
||||
disabled={opened}
|
||||
onClick={() => {
|
||||
setMenuOpen(false)
|
||||
onOpenTab(type)
|
||||
}}
|
||||
className="flex w-full items-center gap-2 px-2.5 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"
|
||||
>
|
||||
<Icon size={12} className="shrink-0" />
|
||||
{title}
|
||||
{opened && <span className="ml-auto text-[10px] text-zinc-300">已打开</span>}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{/* “+”新增标签菜单随更多标签类型一起回归(当前仅浏览器,无需新增入口) */}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tabs.length === 0 ? (
|
||||
<EmptyState onOpen={onOpenTab} />
|
||||
) : (
|
||||
<div className="relative min-h-0 flex-1">
|
||||
{current === 'browser' ? (
|
||||
browser
|
||||
) : current ? (
|
||||
<PlaceholderPanel
|
||||
icon={SIDE_TAB_META[current].icon}
|
||||
title={SIDE_TAB_META[current].title}
|
||||
description={PLACEHOLDER_DESCRIPTION[current as Exclude<SideTabType, 'browser'>]}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="relative min-h-0 flex-1">{current === 'browser' ? browser : null}</div>
|
||||
)}
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
|
||||
/** 空态:无任何标签时的「打开标签页」宫格 */
|
||||
/** 空态:无任何标签时的「打开标签页」宫格(随 SIDE_TAB_ORDER 展示可用标签) */
|
||||
function EmptyState({ onOpen }: { onOpen: (type: SideTabType) => void }): JSX.Element {
|
||||
return (
|
||||
<div className="flex h-full min-w-0 flex-1 flex-col items-center justify-center gap-6 px-8">
|
||||
@@ -235,22 +180,3 @@ function EmptyState({ onOpen }: { onOpen: (type: SideTabType) => void }): JSX.El
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/** 尚未落地的标签占位页 */
|
||||
function PlaceholderPanel({
|
||||
icon: Icon,
|
||||
title,
|
||||
description
|
||||
}: {
|
||||
icon: TabIcon
|
||||
title: string
|
||||
description: string
|
||||
}): JSX.Element {
|
||||
return (
|
||||
<div className="flex h-full flex-col items-center justify-center gap-3 px-8 text-center">
|
||||
<Icon size={28} className="text-zinc-300" />
|
||||
<div className="text-[13px] font-medium text-zinc-600">{title}</div>
|
||||
<p className="max-w-60 text-[11.5px] leading-relaxed text-zinc-400">{description}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user