From 4e5f255a4ca7de2e49f565d8e42591ef30e334af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=88=B1=E7=AC=91=E7=9A=84=E6=AF=9B=E6=AF=9B=E8=99=AB?=
 <315515767@qq.com>
Date: Wed, 5 Aug 2026 23:12:57 +0800
Subject: [PATCH] =?UTF-8?q?fix(canvas):=20=E6=99=BA=E8=83=BD=E4=BD=93?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=20-=20=E4=BF=AE=E5=A4=8D=E4=BA=A4=E4=BA=92?=
 =?UTF-8?q?=E5=A4=B1=E6=95=88=E4=B8=8E=E5=B8=83=E5=B1=80=E5=BC=82=E5=B8=B8?=
 =?UTF-8?q?=20(#152)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 为 motion.aside 补充 pointer-events-auto，恢复面板内输入框、按钮等交互
- section 启用 flex 垂直布局并修正 paddingRight 条件，避免面板跑到下方
- PANEL_SLOT_TOP_OFFSET 从 288 调整为 80，移除活动任务面板不必要的预留空间

Closes #151

Co-authored-by: sikongyue <3155157671@qq.com>
---
 web/src/components/canvas/canvas-assistant-panel.tsx | 6 +++---
 web/src/pages/canvas/project.tsx                     | 6 ++++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/web/src/components/canvas/canvas-assistant-panel.tsx b/web/src/components/canvas/canvas-assistant-panel.tsx
index 7d84d062e..ed10783bc 100644
--- a/web/src/components/canvas/canvas-assistant-panel.tsx
+++ b/web/src/components/canvas/canvas-assistant-panel.tsx
@@ -834,8 +834,8 @@ export function CanvasAssistantPanel({ nodes, selectedNodeIds, snapshot, project
         </>
     );
 
-    // 垂直分槽：顶部 72px（顶栏）+ 200px（活动任务最大预估高）+ 16px（间距）= 288px，留给活动任务面板
-    const PANEL_SLOT_TOP_OFFSET = 288;
+    // 面板顶部偏移：顶部栏高度 + 间距，活动任务面板为 absolute 定位无需额外预留
+    const PANEL_SLOT_TOP_OFFSET = 80;
     const panelOffsetRight = focusMode ? 0 : 12;
     const panelOffsetBottom = focusMode ? 0 : 16;
 
@@ -856,7 +856,7 @@ export function CanvasAssistantPanel({ nodes, selectedNodeIds, snapshot, project
             }}
         >
             <motion.aside
-                className="relative flex shrink-0 flex-col overflow-hidden rounded-[var(--panel-radius)] border"
+                className="pointer-events-auto relative flex shrink-0 flex-col overflow-hidden rounded-[var(--panel-radius)] border"
                 initial={{ x: 48, opacity: 0 }}
                 animate={{ x: closing ? 28 : 0, opacity: closing ? 0 : 1 }}
                 transition={{ duration: resizing ? 0 : PANEL_MOTION_SECONDS, ease: [0.22, 1, 0.36, 1] }}
diff --git a/web/src/pages/canvas/project.tsx b/web/src/pages/canvas/project.tsx
index 33ad22d7a..83b0b6ac4 100644
--- a/web/src/pages/canvas/project.tsx
+++ b/web/src/pages/canvas/project.tsx
@@ -1383,9 +1383,9 @@ function InfiniteCanvasPage() {
         <main id="canvas-main" tabIndex={-1} className="flex h-full min-h-0 overflow-hidden outline-none" style={{ background: theme.canvas.background, color: theme.node.text }}>
             {shortDramaEnabled && currentProject?.projectId ? <CanvasProjectSidebar projectId={currentProject.projectId} detail={linkedProjectQuery.data} onAddChapter={handleProjectChapterInsert} onLocateStyle={locateProjectStyleNode} onOpenAssets={() => openProjectAssets()} /> : null}
             <section
-                className="relative min-w-0 flex-1 overflow-hidden transition-[padding]"
+                className="relative min-w-0 flex-1 flex flex-col min-h-0 overflow-hidden transition-[padding]"
                 style={{
-                    paddingRight: focusMode && anyPanelOpen ? panelColumnWidth : undefined,
+                    paddingRight: anyPanelOpen ? panelColumnWidth : undefined,
                 }}
             >
                 <CanvasTopBar
@@ -1449,6 +1449,7 @@ function InfiniteCanvasPage() {
 
                 <CanvasStylePickerModal open={stylePickerOpen} value={activeStylePresetId} onClose={() => setStylePickerOpen(false)} onSelect={selectCanvasStyle} />
 
+                <div className="relative flex-1 min-h-0">
                 <InfiniteCanvas
                     containerRef={containerRef}
                     viewport={viewport}
@@ -1541,6 +1542,7 @@ function InfiniteCanvasPage() {
                         onOpenDrawing={openDrawingNode}
                     />
                 </InfiniteCanvas>
+                </div>
 
                 {angleNode?.metadata?.content ? (
                     <CanvasNodePanelOverlay node={angleNode} viewport={viewport} containerRef={containerRef} panelWidth={580} panelHeight={350}>