+
+ {
+ clearSelection();
+ setActivePanel("add");
+ setViewport({
+ x: viewport.x,
+ y: viewport.y,
+ zoom: viewport.zoom,
+ });
+ }}
+ showEmptyState={false}
+ showZoomControls={false}
+ workspaceLabel="视频画布"
+ workspaceVariant="video"
+ />
+
+
+ {isBusy ? (
+
+ ) : null}
+
+
+
+
+
+
+
+ {isTitleEditing ? (
+
void commitTitle()}
+ onChange={(event) => setDraftTitle(event.target.value)}
+ onKeyDown={(event) => {
+ if (event.key === "Enter") void commitTitle();
+ if (event.key === "Escape") setIsTitleEditing(false);
+ }}
+ value={draftTitle}
+ />
+ ) : (
+
+ )}
+
+ openPanel("skills")}>LibTV Skills
+ void saveCanvas()} title="保存">
+ {isSaving ? : }
+
+ openPanel("share")} title="分享">
+
+
+ openPanel("notifications")} title="通知">
+
+
+ openPanel("member")}
+ >
+
+ 会员超市
+
+ openPanel("member")}>
+
+ 会员特惠
+
+ openPanel("account")} title="账号">
+
+
+
+
+
+
+
+ {activePanel === "add" ? (
+
+
+
+
+
添加功能模块
+
+ 已迁移 {capturedCounts.tools || capturedTools.length} 个工具配置
+
+
+
+
+
+
+
+ setToolSearch(event.target.value)}
+ placeholder="搜索模型、厂商、模式"
+ value={toolSearch}
+ />
+
+
+
+ {PANEL_TABS.map((tab) => (
+
+ ))}
+
+
+
+ {filteredTools.map((capturedTool) => {
+ const type = getToolType(capturedTool);
+ const meta = TOOL_TYPE_META[type] || TOOL_TYPE_META.video;
+ const Icon = meta.icon;
+ const modes = getToolModes(capturedTool);
+ return (
+
+ );
+ })}
+
+
+ ) : null}
+
+ {activePanel === "workflow" ? (
+
+
+
+
目标工作流预设
+
+ 抓取到 {capturedWorkflows.length || 25} 个预设，后端执行先留空
+
+
+
+
+
+ {capturedWorkflows.map((workflow) => {
+ const cover = String((workflow as any).cover || "").trim();
+ return (
+
+ );
+ })}
+
+
+ ) : null}
+
+ {nodes.length === 0 && activePanel !== "add" && activePanel !== "workflow" ? (
+
+
+
+ 双击画布 自由生成节点
+
+
+ {STARTER_CARDS.map((card) => (
+
+ ))}
+
+
+ ) : null}
+
+
+
+
+
+
+
+
+
+
+
+ {selectedNode ? (
+
+ ) : null}
+
+ {activePanel === "assets" ? (
+
setActivePanel(null)} title="素材库">
+
+
+ ) : null}
+
+ {activePanel === "history" ? (
+
setActivePanel(null)} title="历史记录">
+
+ {nodes.length === 0 ? (
+
+ ) : (
+ nodes.slice(-12).reverse().map((node) => (
+
+ ))
+ )}
+
+
+ ) : null}
+
+ {activePanel === "help" ? (
+
setActivePanel(null)} title="快捷键">
+
+ {[
+ ["V", "选择工具"],
+ ["H / 空格拖动", "平移画布"],
+ ["L", "工作流连线"],
+ ["⌘ / Ctrl + S", "保存"],
+ ["双击空白", "打开添加模块"],
+ ["双击连线", "删除连线"],
+ ].map(([key, label]) => (
+
+ {label}
+ {key}
+
+ ))}
+
+ ) : null}
+
+ {activePanel === "support" ? (
+
setActivePanel(null)} title="支持中心">
+
+
+ ) : null}
+
+ {activePanel === "skills" ? (
+
setActivePanel(null)} title="LibTV Skills">
+
+
+
+
能力覆盖
+
+ {Object.entries(capturedCounts.byType || {}).map(([type, count]) => {
+ const meta = TOOL_TYPE_META[type] || TOOL_TYPE_META.video;
+ return (
+
+
{String(count)}
+
{meta.label}
+
+ );
+ })}
+
+
+
+ ) : null}
+
+ {activePanel === "share" ? (
+
setActivePanel(null)} title="发布与分享">
+
+
+
+
+
分享链接
+
+ 打开后可查看当前视频画布，权限控制后续接入。
+
+
+
+
+
+
+ 启用分享
+
+
+
+
+ ) : null}
+
+ {activePanel === "publish" ? (
+
setActivePanel(null)} title="发布作品到视频画布广场" width={560}>
+
+
+
+
+
+
+
+
+ 公开画布
+
+
+
+
+ ) : null}
+
+ {activePanel === "member" ? (
+
setActivePanel(null)} title="会员中心">
+
+
+ ) : null}
+
+ {activePanel === "notifications" ? (
+
setActivePanel(null)} title="通知">
+
+
+ ) : null}
+
+ {activePanel === "account" ? (
+
setActivePanel(null)} title="账户">
+
+
+
+
+ ) : null}
+