k88936
4db6d28603
* 提示词:完善组件建议，增加容器背景与节点大小一致的实现 * 支持Delete删除节点 ctrl + -缩放 * 步骤结束弹窗提醒   * UI 树快捷删除  * zoom滑动条样式 before:  after:  Reviewed-on: http://192.168.35.82/git/GenarrativeAI/Genarrative/pulls/278 Co-authored-by: 王德宇 <kvtodev@outlook.com> Co-committed-by: 王德宇 <kvtodev@outlook.com>
2.3 KiB
2.3 KiB
预览画布缩放滑杆
交付目标
将 UI 编辑器预览区现有的缩放按钮替换为桌面端可拖动滑杆，同时保留快速缩小、放大和适配画布操作。
交互约定
- 滑杆选择范围为 25%–200%，步进 5%；快捷加减继续使用核心视口的现有缩放边界。
- 滑杆位于预览区右下角固定工具栏；不提供移动端或窄窗口 fallback。
- 保留
−与+按钮。点击轨道可跳转，拖动滑块实时更新画布和百分比。 - 缩放以视口中心为中心，继续支持 Ctrl/Cmd + 滚轮缩放。
- 滑杆支持方向键、Home、End；百分比文本可点击编辑并在失焦时限制到有效范围。
- 百分比文本使用数字输入框呈现；输入提交后同步视口缩放，适配画布保持独立按钮，点击百分比不会触发适配。
- 缩放滑杆获得焦点时，Delete/Backspace 不触发 UI 节点快捷删除；缩放按钮鼠标点击不改变快捷键焦点。
- Windows/Linux 使用
Ctrl，macOS 使用Cmd；+、=与NumpadAdd放大，-与NumpadSubtract缩小，允许按键重复时连续缩放。 - 快捷键直接复用现有
+/−按钮动作：以视口中心为锚点，按×1.16/×0.86改变缩放。 - 鼠标悬停在预览画布上，或预览画布已获得键盘焦点时，快捷键生效。预览画布需提供可聚焦语义与无障碍名称。
- 事件来自输入框、文本编辑区、按钮、链接、缩放工具栏或其他可操作控件时不拦截；不向 iframe 子文档注入监听。
- 仅在存在可缩放视口且确认命中快捷键时调用
preventDefault()与stopPropagation()，防止浏览器页面同时缩放。 - 保留现有
Ctrl/Cmd+0适配画布与Ctrl/Cmd+1恢复 100% 行为，不增加其他重置快捷键。缩放仍是当前预览实例的临时 UI 状态。 - 保留快捷键与缩放焦点边界的组件级回归测试，不扩展端到端测试。
验收
桌面端可通过按钮、轨道点击、拖动和键盘改变缩放；百分比与画布同步，边界不会越界。组件级测试覆盖平台修饰键、主键盘与小键盘变体、按键重复、悬停/焦点作用域、可编辑与可操作目标放行、无内容放行、浏览器默认行为拦截和现有 0/1 回归；另运行前端定向类型检查、编码检查和 git diff --check。