fix(canvas): 智能体面板 - 修复交互失效与布局异常 (#152)
- 为 motion.aside 补充 pointer-events-auto,恢复面板内输入框、按钮等交互 - section 启用 flex 垂直布局并修正 paddingRight 条件,避免面板跑到下方 - PANEL_SLOT_TOP_OFFSET 从 288 调整为 80,移除活动任务面板不必要的预留空间 Closes #151 Co-authored-by: sikongyue <3155157671@qq.com>
This commit is contained in:
@@ -834,8 +834,8 @@ export function CanvasAssistantPanel({ nodes, selectedNodeIds, snapshot, project
|
|||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
||||||
// 垂直分槽:顶部 72px(顶栏)+ 200px(活动任务最大预估高)+ 16px(间距)= 288px,留给活动任务面板
|
// 面板顶部偏移:顶部栏高度 + 间距,活动任务面板为 absolute 定位无需额外预留
|
||||||
const PANEL_SLOT_TOP_OFFSET = 288;
|
const PANEL_SLOT_TOP_OFFSET = 80;
|
||||||
const panelOffsetRight = focusMode ? 0 : 12;
|
const panelOffsetRight = focusMode ? 0 : 12;
|
||||||
const panelOffsetBottom = focusMode ? 0 : 16;
|
const panelOffsetBottom = focusMode ? 0 : 16;
|
||||||
|
|
||||||
@@ -856,7 +856,7 @@ export function CanvasAssistantPanel({ nodes, selectedNodeIds, snapshot, project
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<motion.aside
|
<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 }}
|
initial={{ x: 48, opacity: 0 }}
|
||||||
animate={{ x: closing ? 28 : 0, opacity: closing ? 0 : 1 }}
|
animate={{ x: closing ? 28 : 0, opacity: closing ? 0 : 1 }}
|
||||||
transition={{ duration: resizing ? 0 : PANEL_MOTION_SECONDS, ease: [0.22, 1, 0.36, 1] }}
|
transition={{ duration: resizing ? 0 : PANEL_MOTION_SECONDS, ease: [0.22, 1, 0.36, 1] }}
|
||||||
|
|||||||
@@ -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 }}>
|
<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}
|
{shortDramaEnabled && currentProject?.projectId ? <CanvasProjectSidebar projectId={currentProject.projectId} detail={linkedProjectQuery.data} onAddChapter={handleProjectChapterInsert} onLocateStyle={locateProjectStyleNode} onOpenAssets={() => openProjectAssets()} /> : null}
|
||||||
<section
|
<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={{
|
style={{
|
||||||
paddingRight: focusMode && anyPanelOpen ? panelColumnWidth : undefined,
|
paddingRight: anyPanelOpen ? panelColumnWidth : undefined,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<CanvasTopBar
|
<CanvasTopBar
|
||||||
@@ -1449,6 +1449,7 @@ function InfiniteCanvasPage() {
|
|||||||
|
|
||||||
<CanvasStylePickerModal open={stylePickerOpen} value={activeStylePresetId} onClose={() => setStylePickerOpen(false)} onSelect={selectCanvasStyle} />
|
<CanvasStylePickerModal open={stylePickerOpen} value={activeStylePresetId} onClose={() => setStylePickerOpen(false)} onSelect={selectCanvasStyle} />
|
||||||
|
|
||||||
|
<div className="relative flex-1 min-h-0">
|
||||||
<InfiniteCanvas
|
<InfiniteCanvas
|
||||||
containerRef={containerRef}
|
containerRef={containerRef}
|
||||||
viewport={viewport}
|
viewport={viewport}
|
||||||
@@ -1541,6 +1542,7 @@ function InfiniteCanvasPage() {
|
|||||||
onOpenDrawing={openDrawingNode}
|
onOpenDrawing={openDrawingNode}
|
||||||
/>
|
/>
|
||||||
</InfiniteCanvas>
|
</InfiniteCanvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
{angleNode?.metadata?.content ? (
|
{angleNode?.metadata?.content ? (
|
||||||
<CanvasNodePanelOverlay node={angleNode} viewport={viewport} containerRef={containerRef} panelWidth={580} panelHeight={350}>
|
<CanvasNodePanelOverlay node={angleNode} viewport={viewport} containerRef={containerRef} panelWidth={580} panelHeight={350}>
|
||||||
|
|||||||
Reference in New Issue
Block a user