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

This commit is contained in:
王志伟 committed 2026-09-09 13:02:20 +08:00
1 parent b33de36976
commit 3ac07ff1fa
3 files changed
+12 -9

No files matched your search

@@ -10,7 +10,7 @@ export function getPanelWidthBounds(): { min: number; max: number } {
} }
// 智能体面板列包裹器:承载面板宽度管理、resize 拖拽和顶部停靠偏移。 // 智能体面板列包裹器:承载面板宽度管理、resize 拖拽和顶部停靠偏移。
// 面板始终作为 flex 子元素避让画布;topInset 用于避让绝对定位的顶部栏(沉浸专注时顶部栏隐藏,传 0)。 // 面板停靠在画布工具栏下方,避免悬浮工具栏遮挡 Agent 标题和消息;沉浸模式传 0。
// closing 期间保持宽度和渲染,让面板播放滑出动画;动画结束后由父组件卸载列。 // closing 期间保持宽度和渲染,让面板播放滑出动画;动画结束后由父组件卸载列。
export function AssistantPanelColumn({ export function AssistantPanelColumn({
width, width,
@@ -53,7 +53,7 @@ export function AssistantPanelColumn({
return ( return (
<div <div
ref={columnRef} ref={columnRef}
className="relative flex shrink-0 overflow-hidden" className="relative z-[var(--z-toolbar)] flex shrink-0 overflow-hidden"
style={{ style={{
width, width,
paddingTop: topInset, paddingTop: topInset,
@@ -34,6 +34,7 @@ type CanvasTopBarProps = {
onRedo: () => void; onRedo: () => void;
onShare: () => void; onShare: () => void;
agentOpen: boolean; agentOpen: boolean;
agentPanelWidth?: number;
compactAgentStatus?: { connected: boolean; enabled: boolean; activity: string }; compactAgentStatus?: { connected: boolean; enabled: boolean; activity: string };
onToggleAgent: () => void; onToggleAgent: () => void;
shortcutRequestNonce: number; shortcutRequestNonce: number;
@@ -64,6 +65,7 @@ export function CanvasTopBar({
onRedo, onRedo,
onShare, onShare,
agentOpen, agentOpen,
agentPanelWidth,
compactAgentStatus, compactAgentStatus,
onToggleAgent, onToggleAgent,
shortcutRequestNonce, shortcutRequestNonce,
@@ -101,7 +103,7 @@ export function CanvasTopBar({
return ( 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}> <div className="canvas-topbar-cluster canvas-topbar-project-cluster pointer-events-auto flex min-w-0 items-center gap-2" style={dockStyle}>
<CanvasTopBarTooltip label="打开画布菜单"> <CanvasTopBarTooltip label="打开画布菜单">
<Dropdown <Dropdown
@@ -187,7 +189,7 @@ export function CanvasTopBar({
<CanvasTopBarTooltip label="搜索画布节点"> <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="搜索画布节点" /> <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>
<CanvasTopBarTooltip label="导入第三方画布"> {!agentOpen ? <CanvasTopBarTooltip label="导入第三方画布">
<Dropdown <Dropdown
trigger={["click"]} trigger={["click"]}
placement="bottomRight" placement="bottomRight"
@@ -202,8 +204,8 @@ export function CanvasTopBar({
<span className="hidden lg:inline">导入第三方画布</span> <span className="hidden lg:inline">导入第三方画布</span>
</Button> </Button>
</Dropdown> </Dropdown>
</CanvasTopBarTooltip> </CanvasTopBarTooltip> : null}
<CanvasTopBarTooltip label="媒体性能模式"> {!agentOpen ? <CanvasTopBarTooltip label="媒体性能模式">
<Dropdown <Dropdown
trigger={["click"]} trigger={["click"]}
menu={{ 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="媒体性能模式" /> <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> </Dropdown>
</CanvasTopBarTooltip> </CanvasTopBarTooltip> : null}
{compactAgentStatus ? <CompactAgentStatus status={compactAgentStatus} onClick={onToggleAgent} /> : null} {compactAgentStatus ? <CompactAgentStatus status={compactAgentStatus} onClick={onToggleAgent} /> : null}
{user && creditsEnabled ? ( {user && creditsEnabled ? (
<CanvasTopBarTooltip label="查看积分明细"> <CanvasTopBarTooltip label="查看积分明细">
@@ -229,7 +231,7 @@ export function CanvasTopBar({
style={{ color: theme.node.text }} style={{ color: theme.node.text }}
aria-label="查看积分明细" 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> <span>{availableMicrocredits === null ? "--" : (availableMicrocredits / 1_000_000).toLocaleString("zh-CN", { maximumFractionDigits: 3 })}</span>
</Link> </Link>
</CanvasTopBarTooltip> </CanvasTopBarTooltip>
+2 -1
View File
@@ -2227,6 +2227,7 @@ function InfiniteCanvasPage() {
onRedo={redoCanvas} onRedo={redoCanvas}
onShare={() => setShareModalOpen(true)} onShare={() => setShareModalOpen(true)}
agentOpen={assistantOpen} agentOpen={assistantOpen}
agentPanelWidth={assistantMounted ? assistantWidth : undefined}
compactAgentStatus={codexCompactAgent ? { connected: localAgentConnected, enabled: localAgentEnabled, activity: localAgentActivity } : undefined} compactAgentStatus={codexCompactAgent ? { connected: localAgentConnected, enabled: localAgentEnabled, activity: localAgentActivity } : undefined}
onToggleAgent={() => (assistantOpen ? closeAgent() : openAgent())} onToggleAgent={() => (assistantOpen ? closeAgent() : openAgent())}
shortcutRequestNonce={shortcutRequestNonce} shortcutRequestNonce={shortcutRequestNonce}
@@ -2475,7 +2476,7 @@ function InfiniteCanvasPage() {
</div> </div>
{assistantMounted ? ( {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) => ( {(resizing) => (
<CanvasAssistantPanel <CanvasAssistantPanel
nodes={nodes} nodes={nodes}