fix(canvas): Agent 展开时调整顶部工具栏布局

This commit is contained in:
王志伟
2026-09-09 00:03:51 +08:00
parent b33de36976
commit 3ac07ff1fa
3 changed files with 12 additions and 9 deletions

View File

@@ -10,7 +10,7 @@ export function getPanelWidthBounds(): { min: number; max: number } {
}
// 智能体面板列包裹器:承载面板宽度管理、resize 拖拽和顶部停靠偏移。
// 面板始终作为 flex 子元素避让画布;topInset 用于避让绝对定位的顶部栏(沉浸专注时顶部栏隐藏,传 0)。
// 面板停靠在画布工具栏下方,避免悬浮工具栏遮挡 Agent 标题和消息;沉浸模式传 0。
// closing 期间保持宽度和渲染,让面板播放滑出动画;动画结束后由父组件卸载列。
export function AssistantPanelColumn({
width,
@@ -53,7 +53,7 @@ export function AssistantPanelColumn({
return (
<div
ref={columnRef}
className="relative flex shrink-0 overflow-hidden"
className="relative z-[var(--z-toolbar)] flex shrink-0 overflow-hidden"
style={{
width,
paddingTop: topInset,

View File

@@ -34,6 +34,7 @@ type CanvasTopBarProps = {
onRedo: () => void;
onShare: () => void;
agentOpen: boolean;
agentPanelWidth?: number;
compactAgentStatus?: { connected: boolean; enabled: boolean; activity: string };
onToggleAgent: () => void;
shortcutRequestNonce: number;
@@ -64,6 +65,7 @@ export function CanvasTopBar({
onRedo,
onShare,
agentOpen,
agentPanelWidth,
compactAgentStatus,
onToggleAgent,
shortcutRequestNonce,
@@ -101,7 +103,7 @@ export function CanvasTopBar({
return (
<>
<div className="canvas-topbar pointer-events-none absolute left-0 right-0 top-0 z-[var(--z-toolbar)] flex h-[var(--canvas-topbar-h)] items-center justify-between px-4 sm:px-5">
<div className="canvas-topbar pointer-events-none absolute left-0 top-0 z-[var(--z-toolbar)] flex h-[var(--canvas-topbar-h)] items-center justify-between px-4 sm:px-5" style={{ right: agentOpen && agentPanelWidth ? `calc(${agentPanelWidth}px + var(--space-3))` : 0, transition: "right var(--motion-dur-base-calc) var(--motion-ease-out)" }}>
<div className="canvas-topbar-cluster canvas-topbar-project-cluster pointer-events-auto flex min-w-0 items-center gap-2" style={dockStyle}>
<CanvasTopBarTooltip label="打开画布菜单">
<Dropdown
@@ -187,7 +189,7 @@ export function CanvasTopBar({
<CanvasTopBarTooltip label="搜索画布节点">
<Button type="text" className="canvas-topbar-action !hidden !h-10 !w-10 !min-w-10 !rounded-xl !p-0 lg:!inline-flex" style={{ color: theme.node.text }} icon={<Search className="size-4" />} onClick={onOpenSearch} aria-label="搜索画布节点" />
</CanvasTopBarTooltip>
<CanvasTopBarTooltip label="导入第三方画布">
{!agentOpen ? <CanvasTopBarTooltip label="导入第三方画布">
<Dropdown
trigger={["click"]}
placement="bottomRight"
@@ -202,8 +204,8 @@ export function CanvasTopBar({
<span className="hidden lg:inline">导入第三方画布</span>
</Button>
</Dropdown>
</CanvasTopBarTooltip>
<CanvasTopBarTooltip label="媒体性能模式">
</CanvasTopBarTooltip> : null}
{!agentOpen ? <CanvasTopBarTooltip label="媒体性能模式">
<Dropdown
trigger={["click"]}
menu={{
@@ -219,7 +221,7 @@ export function CanvasTopBar({
>
<Button type="text" className="canvas-topbar-action !hidden !h-10 !w-10 !min-w-10 !rounded-xl !p-0 lg:!inline-flex" style={{ color: theme.node.text }} icon={<Gauge className="size-4" />} aria-label="媒体性能模式" />
</Dropdown>
</CanvasTopBarTooltip>
</CanvasTopBarTooltip> : null}
{compactAgentStatus ? <CompactAgentStatus status={compactAgentStatus} onClick={onToggleAgent} /> : null}
{user && creditsEnabled ? (
<CanvasTopBarTooltip label="查看积分明细">
@@ -229,7 +231,7 @@ export function CanvasTopBar({
style={{ color: theme.node.text }}
aria-label="查看积分明细"
>
{refreshing && availableMicrocredits === null ? <LoaderCircle className="size-3.5 animate-spin opacity-60" /> : <Coins className="size-3.5" />}
{refreshing && availableMicrocredits === null ? <LoaderCircle className="size-3.5 animate-spin opacity-60" style={{ color: theme.accent.primary }} /> : <Coins className="size-3.5" style={{ color: theme.accent.primary }} />}
<span>{availableMicrocredits === null ? "--" : (availableMicrocredits / 1_000_000).toLocaleString("zh-CN", { maximumFractionDigits: 3 })}</span>
</Link>
</CanvasTopBarTooltip>

View File

@@ -2227,6 +2227,7 @@ function InfiniteCanvasPage() {
onRedo={redoCanvas}
onShare={() => setShareModalOpen(true)}
agentOpen={assistantOpen}
agentPanelWidth={assistantMounted ? assistantWidth : undefined}
compactAgentStatus={codexCompactAgent ? { connected: localAgentConnected, enabled: localAgentEnabled, activity: localAgentActivity } : undefined}
onToggleAgent={() => (assistantOpen ? closeAgent() : openAgent())}
shortcutRequestNonce={shortcutRequestNonce}
@@ -2475,7 +2476,7 @@ function InfiniteCanvasPage() {
</div>
{assistantMounted ? (
<AssistantPanelColumn width={assistantWidth} closing={assistantClosing} topInset={focusMode ? "0px" : "var(--canvas-topbar-offset)"} onWidthChange={setAssistantWidth}>
<AssistantPanelColumn width={assistantWidth} closing={assistantClosing} topInset="0px" onWidthChange={setAssistantWidth}>
{(resizing) => (
<CanvasAssistantPanel
nodes={nodes}