上手路径

从装好环境到导出第一个文件，按这个顺序走一遍就够了。

1. 准备环境

项	要求
Node.js	20 或更高
pnpm	10.x，由根 package.json 的 packageManager 锁定
ffmpeg	导出视频时需要；随包 LGPL 版不含 libx264，MP4 需自备

在仓库根目录安装依赖，一次装完四个包共用：

pnpm install

需要视频导出时，再拉取随包的 ffmpeg：

pnpm ffmpeg:fetch

2. 启动编辑器

pnpm dev

这条命令会同时拉起三个进程：编辑器 9000、渲染服务 9001、BFF 9002。浏览器打开 http://127.0.0.1:9000 就是编辑器。任一进程退出，编排脚本会停掉其余进程。

也可以只起编辑器（导出等接口需要 BFF）：

pnpm --filter @dwp/editor start

3. 认识界面

• 顶栏：工程名、画布信息、工程设置、AI+、导出与菜单。
• 左侧材料面板：媒体、元素、文字、字体、字幕、特效、IK 角色等分类。
• 画布：中间是舞台，下方是播放、进度、全屏、缩放与撤销重做。
• 时间轴：底部，行头固定，右侧排图层、镜头、字幕与音频。
• 右侧 dock：选中对象后出现，按类型给属性、关键帧、效果等分页。

当前版本没有「空白新建」入口：从工程库打开一个工程，或导入别人给的工程 JSON。内置示例工程可以直接改。

4. 做第一个动画

1. 在左侧「媒体」「元素」或「文字」里选一个素材，拖到画布；图层从播放头所在帧开始。
2. 选中图层，把播放头放在起点帧，在 dock「属性」里改位置、缩放或透明度，点行右侧的菱形落关键帧。
3. 把播放头移到结束帧，再改一次属性。打开工程设置里的「自动打帧」后，改数值就会自动落键。
4. 在时间轴上拖动菱形调整节奏，用 Ctrl+K 在播放头分割片段。
5. 按空格播放预览；节奏不对就继续调关键帧与缓动。

5. 配音与字幕

1. 顶栏「AI+」→「AI 配音 (TTS)」，输入台词生成配音，音频会落到当前场景的默认音轨。
2. 选中这段音频，点 dock 底部的「生成字幕」，按台词切分并对齐。
3. 在左侧「字幕」里统一调整字号、位置、描边与安全区；单条差异在右侧 dock 里覆盖。
4. 角色需要口型时，选中角色图层，在「口型」面板选同一段音频并填台词，点「生成口型」。

6. 导出

1. 点顶栏「导出」，选格式：MP4、WebM、GIF 或 PNG 序列。
2. 确认分辨率与帧率，按格式补齐参数。
3. 点导出，等进度条跑完，在面板里预览并下载。
4. 需要字幕文件时，在面板下方单独下载 SRT 或 WebVTT。

常用快捷键

功能	快捷键
撤销 / 重做	Ctrl+Z / Ctrl+Shift+Z
在播放头处分割	Ctrl+K
复制 / 粘贴片段	Ctrl+C / Ctrl+V
删除 / 波纹删除	Delete / Shift+Delete
时间轴缩放	Ctrl+滚轮、Ctrl+= / Ctrl+-
适配窗口 / 适配选中	Shift+Z / Z
画布适配视图	Shift+F
打开快捷键说明	Shift+/

遇到问题

页面报 /api/... 502。 BFF 没起来或端口不一致。看 pnpm dev 日志里的 [bff] 启动行，或访问 http://127.0.0.1:9002/api/health 确认。

导出提示找不到可用的 ffmpeg。 先运行 pnpm ffmpeg:fetch；或按配置文档指定 FFMPEG_PATH / FFMPEG_DIR。

MP4 选项是灰的。 随包 LGPL 版不含 libx264，改用 WebM 即可；确需 MP4 时自备带 libx264 的 ffmpeg。

快捷键没反应。 输入框、文本域、已打开的下拉或弹窗里不接管快捷键；点一下画布空白处再按。

---

下一步：按你的场景看 典型使用场景，或逐个了解 核心能力。