画布快捷键
VizChat 画布的键盘快捷键清单,覆盖选择、复制粘贴、删除、缩放、Storyboard 播放导航等操作,所有快捷键在 IME 激活和输入框聚焦时自动禁用。
VizChat 画布的快捷键实现在 DashboardView.tsx 的 handleKeyDown 和 use-storyboard-keyboard.ts 里。共同设计原则:所有快捷键在以下情况自动禁用,避免误触:
- 焦点在
<input>/<textarea>/contenteditable元素内 - 焦点在 iframe 节点内(例如
pdf-viewer、web-viewer) - IME(中日韩输入法)正在组字:
event.nativeEvent.isComposing === true
画布编辑(Dashboard / Storyboard 通用)
| 快捷键 | 动作 |
|---|---|
Delete / Backspace | 删除选中的节点和连线 |
Cmd/Ctrl + C | 复制选中节点(连同 snapshot 一起带上剪贴板) |
Cmd/Ctrl + V | 粘贴节点到画布(默认偏移 +200,+200) |
| 框选拖动 | selectionOnDrag(Dashboard 默认开) |
| 鼠标滚轮 | 缩放画布 |
| 空格 + 拖动 | 平移画布(React Flow 内置) |
代码片段(Dashboard):
if (event.key === 'Delete' || event.key === 'Backspace') {
setNodes((nds) => nds.filter((n) => !n.selected));
setEdges((eds) => eds.filter((e) => !e.selected));
scheduleSave();
}
Storyboard 播放导航
只在 Storyboard 模式生效,定义在 use-storyboard-keyboard.ts:
| 快捷键 | 动作 |
|---|---|
↑ | 上一个 Slide |
↓ | 下一个 Slide |
← | 上一句(跨 Slide 边界,narrative 粒度) |
→ | 下一句(跨 Slide 边界,narrative 粒度) |
Space | 播放 / 暂停(TTS 驱动 / 定时器驱动自适应) |
F | 切换全屏 |
AI 对话相关
| 快捷键 | 动作 |
|---|---|
/ | 在对话框中唤出斜杠命令面板 |
Cmd/Ctrl + K | 打开命令面板(计划中) |
Enter | 发送(IME 组字期间不触发) |
Shift + Enter | 换行 |
平台差异
- macOS:使用
Cmd修饰键 - Windows / Linux:使用
Ctrl修饰键 - 代码里统一写作
event.metaKey || event.ctrlKey
Next step
- 全量快捷键参考 — 包含 Workspace、Chat、Settings 各处
- 画布 ↔ 文档双模式 — 两种模式各自的专属操作