+ {/* 1. Canvas Layer (Full Screen) - 使用 key 强制在 id 变化时重新挂载 */}
+
+
+
+
+ {isVideoMode && videoCanvasInsertMenu
+ ? (() => {
+ const menuWidth = 312;
+ const menuLeft =
+ viewportWidth > 0
+ ? Math.max(
+ 12,
+ Math.min(
+ videoCanvasInsertMenu.screenPosition.x,
+ Math.max(12, viewportWidth - menuWidth - 12)
+ )
+ )
+ : videoCanvasInsertMenu.screenPosition.x;
+ const menuTop = Math.max(
+ 12,
+ videoCanvasInsertMenu.screenPosition.y + 14
+ );
+ const renderChildButton = (child: VideoCanvasInsertMenuChild) => (
+
+ );
+ const renderInsertItem = (
+ item: VideoCanvasInsertMenuItem,
+ highlighted = false
+ ) => {
+ const Icon = item.icon;
+ const textClassName = highlighted
+ ? "text-orange-600 dark:text-orange-300"
+ : "text-slate-700 dark:text-slate-100";
+ const iconClassName = highlighted
+ ? "text-orange-500"
+ : "text-slate-400 dark:text-zinc-500";
+
+ if (item.children?.length) {
+ return (
+
+
+
+ {item.label}
+
+
+
+ {item.children.map(renderChildButton)}
+
+
+ );
+ }
+
+ return (
+
+ );
+ };
+ const highlightedItem = VIDEO_CANVAS_INSERT_MENU_ITEMS.at(-1);
+
+ return (
+
event.stopPropagation()}
+ onPointerDown={(event) => event.stopPropagation()}
+ ref={videoCanvasInsertMenuRef}
+ style={{
+ left: `${menuLeft}px`,
+ top: `${menuTop}px`,
+ width: `${menuWidth}px`,
+ }}
+ >
+
+ @{siteSettingsData?.siteName || "视频画布"}
+
+
+
+ {VIDEO_CANVAS_INSERT_MENU_ITEMS.slice(0, -1).map((item) =>
+ renderInsertItem(item)
+ )}
+
+
+ {highlightedItem ? (
+ <>
+
+ {renderInsertItem(highlightedItem, true)}
+
+ ) : null}
+
+ );
+ })()
+ : null}
+
+ {isVideoMode && isVideoModuleSidebarEnabled ? (
+
+
+
+ {isVideoModuleSidebarCollapsed ? (
+
+
+
+
+
+ ) : (
+
+ )}
+
+
+
+ {isVideoModuleSidebarCollapsed ? (
+
+ {VIDEO_CANVAS_SIDEBAR_GROUPS.map((group) => {
+ const GroupIcon = group.icon;
+ const groupStyle =
+ VIDEO_CANVAS_SIDEBAR_GROUP_STYLES[group.id];
+ return (
+
+ );
+ })}
+
+ ) : (
+
+
+ {VIDEO_CANVAS_SIDEBAR_GROUPS.map((group) => {
+ const GroupIcon = group.icon;
+ const groupStyle =
+ VIDEO_CANVAS_SIDEBAR_GROUP_STYLES[group.id];
+ return (
+
+ setVideoModuleSectionOpen((prev) => ({
+ ...prev,
+ [group.id]: open,
+ }))
+ }
+ open={videoModuleSectionOpen[group.id] !== false}
+ >
+
+
+
+
+
+
+
+
+ {group.label}
+
+
+ {group.description}
+
+
+
+
+ {group.nodeTypes.length}
+
+
+
+
+
+
+
+ {group.nodeTypes.map((type) => {
+ const definition =
+ getVideoWorkflowNodeDefinition(type);
+ if (!definition) return null;
+ const Icon =
+ getVideoWorkflowQuickConnectIcon(type);
+ return (
+
+ );
+ })}
+
+
+
+ );
+ })}
+
+ )}
+
+
+ ) : null}
+
+ {isVideoMode &&
+ selectedWorkflowQuickConnectAnchor &&
+ selectedWorkflowQuickConnectSourceNode &&
+ selectedVideoWorkflowQuickConnects.length > 0 &&
+ !videoCanvasInsertMenu ? (
+
+
+
+
+
+ {selectedVideoWorkflowQuickConnects.map((item, index, items) => {
+ const total = items.length;
+ const y = (index - (total - 1) / 2) * 72;
+ const x = 96 + Math.abs(y) * 0.28;
+ const direction = selectedWorkflowQuickConnectAnchor.openLeft
+ ? -1
+ : 1;
+ const Icon = getVideoWorkflowQuickConnectIcon(item.type);
+ const definition = getVideoWorkflowNodeDefinition(item.type);
+ return (
+
+ );
+ })}
+
+ ) : null}
+
+ {isVideoMode &&
+ selectedVideoWorkflowDefinition &&
+ selectedWorkflowIsActionable ? (
+
+ {selectedWorkflowIsActionable ? (
+
+
+
+
+
+ {selectedVideoWorkflowDefinition.label}
+
+
+ {selectedWorkflowActionHint}
+
+
+
+ 执行
+
+
+
+ 提示词 {selectedWorkflowInputs.promptCount}
+
+
+ 图片 {selectedWorkflowInputs.imageCount}
+
+
+ 视频 {selectedWorkflowInputs.videoCount}
+
+ {selectedVideoWorkflowType === "storyboard-node" ? (
+
+ 分镜 {selectedWorkflowStoryboardShots.length}
+
+ ) : null}
+ {selectedVideoWorkflowType === "storyboard-node" ? (
+
+ 下游 {selectedStoryboardBatchTargets.length}
+
+ ) : null}
+ {selectedWorkflowStructuredData.characters.length > 0 ? (
+
+ 角色 {selectedWorkflowStructuredData.characters.length}
+
+ ) : null}
+ {selectedWorkflowStructuredData.scenes.length > 0 ? (
+
+ 场景 {selectedWorkflowStructuredData.scenes.length}
+
+ ) : null}
+ {selectedWorkflowStructuredData.characterAssets.length >
+ 0 ? (
+
+ 角色资产{" "}
+ {selectedWorkflowStructuredData.characterAssets.length}
+
+ ) : null}
+ {selectedWorkflowStructuredData.sceneAssets.length > 0 ? (
+
+ 场景资产{" "}
+ {selectedWorkflowStructuredData.sceneAssets.length}
+
+ ) : null}
+ {selectedVideoWorkflowType === "custom-agent" &&
+ selectedWorkflowLinkedAgentProject.id ? (
+
+ Agent 已连接
+
+ ) : null}
+ {selectedVideoWorkflowType === "custom-agent" &&
+ selectedWorkflowAgentResultCount > 0 ? (
+
+ Agent 结果 {selectedWorkflowAgentResultCount}
+
+ ) : null}
+ {selectedVideoWorkflowType === "custom-agent" &&
+ selectedWorkflowPendingAgentResultCount > 0 ? (
+
+ 待回流 {selectedWorkflowPendingAgentResultCount}
+
+ ) : null}
+
+
+
+
+ {selectedWorkflowPrompt.trim()
+ ? selectedWorkflowPrompt
+ : "当前还没有抽取到可执行提示词，先在上游接入脚本、分镜或参考素材。"}
+
+
+
+ 已关联 Agent 项目
+
+
+ {selectedWorkflowLinkedAgentProject.title ||
+ selectedWorkflowLinkedAgentProject.id}
+
+
+
+
+ {selectedVideoWorkflowType === "custom-agent" ? (
+
+ ) : null}
+
+ {selectedVideoWorkflowType === "custom-agent" &&
+ selectedWorkflowAgentResultAssets.length > 0 ? (
+
+ ) : null}
+
+ {selectedStoryboardCanBatchExecute ? (
+
+ ) : null}
+
+
+
+
+
+ ) : null}
+
+ ) : null}
+
+ {brandEntry}
+ {agentDisabledNotice}
+
+ {/* 2. Floating Actions (Top Right) */}
+ {!isVideoMode && !isPanelOpen && (
+
+
+
+ )}
+
+ {/* 4. Floating Sidebar (Right) */}
+ {isVideoMode ? null : (
+
+
+ {panelMode === "chat" ? (
+ // AI 对话内容 - 使用 key 强制在 id 变化时重新挂载
+
+ setIsPanelOpen(false)}
+ onOpenFileList={() => setPanelMode("fileList")}
+ selectedAgentPresetId={
+ isCanvasAgentModeEnabled ? selectedAgentPresetId : null
+ }
+ workspaceVariant="canvas"
+ />
+
+ ) : (
+ // 文件列表
+
setPanelMode("chat")}
+ workspaceLabel={workspaceLabel}
+ workspaceType={activeCanvasWorkspaceType}
+ />
+ )}
+
+
+ )}
+
+ {isVideoMode && isVideoCanvasFileListOpen ? (
+
+ setIsVideoCanvasFileListOpen(false)}
+ workspaceLabel={workspaceLabel}
+ workspaceType={activeCanvasWorkspaceType}
+ />
+
+ ) : null}
+
+ {isVideoMode && isVideoCanvasMarkerPanelOpen ? (
+
+ setIsVideoCanvasMarkerPanelOpen(false)}
+ selectedLabel={selectedVideoCanvasMarkerLabel}
+ />
+
+ ) : null}
+
+ {/* 5. Floating Toolbar (Bottom) */}
+
+
+
+
+
+
+ 选择 (V)
+
+
+
+
+
+
+ 平移 (H)
+
+
+ {isVideoMode ? (
+
+
+
+
+ 保存到云端
+
+ ) : null}
+
+ {isVideoMode ? (
+
+
+
+
+ 云文件列表
+
+ ) : null}
+
+ {isVideoMode ? (
+
+
+
+
+ 标记
+
+ ) : null}
+
+ {isVideoMode ? (
+
+
+
+
+ 工作流连线 (L)
+
+ ) : null}
+
+ {isAgentWorkspaceEnabled && !isVideoMode ? (
+
+
+
+
+ 风格化模式
+
+ ) : null}
+
+
+
+
+
+ 批量处理
+
+
+
+
+
+
+
+ {isVideoMode ? "添加图片输入" : "添加图片"}
+
+
+
+
+
+
+
+
+ {isVideoMode ? "添加脚本节点" : "添加文本"}
+
+
+
+ {isVideoMode ? (
+
+
+
+
+ 添加视频输入
+
+ ) : null}
+
+ {isVideoMode ? (
+
+
+
+
+
+
+
+ 视频工作流节点库
+
+
+ 这里按参考 APP
+ 的节点目录整理，先把结构补齐，再逐步接入具体能力。
+
+
+ {VIDEO_WORKFLOW_LIBRARY_SECTIONS.map((section) => {
+ const sectionNodes = getVideoWorkflowSectionNodes(
+ section.id
+ );
+ return (
+
+
+
+ {section.label}
+
+
+ {section.description}
+
+
+
+ {sectionNodes.map((nodeDefinition) => (
+
+ handleAddWorkflowNode(nodeDefinition.type)
+ }
+ >
+
+
+
+
+ {nodeDefinition.label}
+
+
+ {nodeDefinition.type}
+
+
+
+ {nodeDefinition.description}
+
+
+ ))}
+
+
+ );
+ })}
+
+ ) : null}
+
+ {siteSettingsData?.realtimeCanvasEnabled === true &&
+ siteSettingsData?.realtimeCanvasServiceEnabled !== false ? (
+
+
+
+
+ 实时画布
+
+ ) : null}
+
+ {siteSettingsData?.realtimeCanvasEnabled === true &&
+ siteSettingsData?.realtimeCanvasServiceEnabled !== false ? (
+
+
+
+
+
+ {selectedImageNode
+ ? "图像增强 Pro"
+ : "进入图像增强 Pro 后上传图片"}
+
+
+ ) : null}
+
+
+
+
+
+ 3D生成
+
+
+ {isVideoMode ? (
+
+
+
+
+ 导出视频画布
+
+ ) : null}
+
+ {isVideoMode ? (
+
+
+
+
+ 导入视频画布
+
+ ) : null}
+
+
+
+
+
+ 新建{workspaceLabel}
+
+
+
+
+
+
+ {/* 6. Bottom Left Compact Controls */}
+
+
+
+
+
+
+ 撤销
+
+
+
+
+
+
+ 重做
+
+
+
+
+
+
+ {Math.round(viewport.zoom * 100)}%
+
+
+
+
+
+ {/* 7. 物品拾取模式覆盖层 */}
+
+
+ {loginDialogElement}
+