fix: 侧边面板暂只开放浏览器标签,其余类型不显示
This commit is contained in:
@@ -101,7 +101,12 @@ export default function App(): JSX.Element {
|
|||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
const toggleSide = useCallback((): void => {
|
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 => {
|
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 {
|
import {
|
||||||
LuChevronDown,
|
LuChevronDown,
|
||||||
LuFileDiff,
|
LuFileDiff,
|
||||||
LuGlobe,
|
LuGlobe,
|
||||||
LuMessagesSquare,
|
LuMessagesSquare,
|
||||||
LuPlus,
|
|
||||||
LuSquareTerminal,
|
LuSquareTerminal,
|
||||||
LuX
|
LuX
|
||||||
} from 'react-icons/lu'
|
} from 'react-icons/lu'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 右侧通用侧边面板(ZCode 式标签页容器)。
|
* 右侧通用侧边面板(ZCode 式标签页容器)。
|
||||||
* 面板本身只负责:标签栏(收起 / 标签 / “+”菜单)、空态「打开标签页」宫格、
|
* 面板负责:标签栏(收起 / 标签)、空态「打开标签页」宫格、左缘宽度拖拽;
|
||||||
* 左缘宽度拖拽;各标签的内容由外部传入(浏览器)或使用占位面板。
|
* 各标签的内容由外部传入。标签架构按多类型设计,当前仅开放浏览器,
|
||||||
* 每种标签同时至多一个实例;浏览器标签承载原生 WebContentsView 的对齐容器。
|
* 后续新标签在 SIDE_TAB_ORDER 与内容分支里扩展即可。
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export type SideTabType = 'assistant' | 'review' | 'terminal' | 'browser'
|
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 }>
|
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 }
|
browser: { title: '浏览器', icon: LuGlobe }
|
||||||
}
|
}
|
||||||
|
|
||||||
const PLACEHOLDER_DESCRIPTION: Record<Exclude<SideTabType, 'browser'>, string> = {
|
|
||||||
assistant: '在侧边面板中与 Agent 展开一路并行的小对话,不打断主会话(即将支持)。',
|
|
||||||
review: '查看本会话中 Agent 产生的文件改动与差异,并逐项确认(即将支持)。',
|
|
||||||
terminal: '在侧边面板中打开与当前工作区绑定的终端(即将支持)。'
|
|
||||||
}
|
|
||||||
|
|
||||||
const PANEL_MIN_WIDTH = 380
|
const PANEL_MIN_WIDTH = 380
|
||||||
const PANEL_MAX_WIDTH = 760
|
const PANEL_MAX_WIDTH = 760
|
||||||
|
|
||||||
@@ -63,7 +57,6 @@ export function SidePanel({
|
|||||||
onCollapse,
|
onCollapse,
|
||||||
browser
|
browser
|
||||||
}: SidePanelProps): JSX.Element {
|
}: SidePanelProps): JSX.Element {
|
||||||
const [menuOpen, setMenuOpen] = useState(false)
|
|
||||||
const dragRef = useRef<{ startX: number; startWidth: number } | null>(null)
|
const dragRef = useRef<{ startX: number; startWidth: number } | null>(null)
|
||||||
|
|
||||||
// 面板宽度拖拽(左边缘把手)
|
// 面板宽度拖拽(左边缘把手)
|
||||||
@@ -147,68 +140,20 @@ export function SidePanel({
|
|||||||
</button>
|
</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>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{tabs.length === 0 ? (
|
{tabs.length === 0 ? (
|
||||||
<EmptyState onOpen={onOpenTab} />
|
<EmptyState onOpen={onOpenTab} />
|
||||||
) : (
|
) : (
|
||||||
<div className="relative min-h-0 flex-1">
|
<div className="relative min-h-0 flex-1">{current === 'browser' ? browser : null}</div>
|
||||||
{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>
|
|
||||||
)}
|
)}
|
||||||
</aside>
|
</aside>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 空态:无任何标签时的「打开标签页」宫格 */
|
/** 空态:无任何标签时的「打开标签页」宫格(随 SIDE_TAB_ORDER 展示可用标签) */
|
||||||
function EmptyState({ onOpen }: { onOpen: (type: SideTabType) => void }): JSX.Element {
|
function EmptyState({ onOpen }: { onOpen: (type: SideTabType) => void }): JSX.Element {
|
||||||
return (
|
return (
|
||||||
<div className="flex h-full min-w-0 flex-1 flex-col items-center justify-center gap-6 px-8">
|
<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>
|
</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