fix(canvas): Agent 展开时调整顶部工具栏布局
This commit is contained in:
@@ -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,
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user