From 3ac07ff1fa563c1e6e7793502e7ddcfaba7de27e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BF=97=E4=BC=9F?= <wangzhiwei1@bosssoft.com.cn>
Date: Wed, 9 Sep 2026 00:03:51 +0800
Subject: [PATCH] =?UTF-8?q?fix(canvas):=20Agent=20=E5=B1=95=E5=BC=80?=
 =?UTF-8?q?=E6=97=B6=E8=B0=83=E6=95=B4=E9=A1=B6=E9=83=A8=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=E6=A0=8F=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/canvas/canvas-assistant-panel-column.tsx |  4 ++--
 web/src/pages/canvas/canvas-project-top-bar.tsx    | 14 ++++++++------
 web/src/pages/canvas/project.tsx                   |  3 ++-
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/web/src/pages/canvas/canvas-assistant-panel-column.tsx b/web/src/pages/canvas/canvas-assistant-panel-column.tsx
index bf5e82930..753911809 100644
--- a/web/src/pages/canvas/canvas-assistant-panel-column.tsx
+++ b/web/src/pages/canvas/canvas-assistant-panel-column.tsx
@@ -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,
diff --git a/web/src/pages/canvas/canvas-project-top-bar.tsx b/web/src/pages/canvas/canvas-project-top-bar.tsx
index 960581321..c10c1c553 100644
--- a/web/src/pages/canvas/canvas-project-top-bar.tsx
+++ b/web/src/pages/canvas/canvas-project-top-bar.tsx
@@ -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>
diff --git a/web/src/pages/canvas/project.tsx b/web/src/pages/canvas/project.tsx
index 64ba6295f..ce1a3b1e9 100644
--- a/web/src/pages/canvas/project.tsx
+++ b/web/src/pages/canvas/project.tsx
@@ -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}