95 lines
3.7 KiB
Markdown
95 lines
3.7 KiB
Markdown
# 编辑器快捷键与微交互样式规范
|
||
|
||
## 快捷键矩阵
|
||
|
||
`useMapEditorShortcuts` 在模型快照可用时以 capture 阶段统一处理；`F` 可聚焦机器人或地图选择，其余编辑命令受地图上下文约束，避免与浏览器保存、仿真重置以及输入框 Delete 冲突。
|
||
|
||
| 快捷键 | 行为 | 约束 |
|
||
| --- | --- | --- |
|
||
| `W` | 平移 Gizmo | 自动切回 Viewer `select` 模式 |
|
||
| `E` | 旋转 Gizmo | 仅世界 Z 轴 |
|
||
| `R` | 缩放 Gizmo | 参数地形及锁定对象会消费按键但不执行缩放 |
|
||
| `F` | 聚焦选中对象 | 320ms ease-out 相机过渡；用户拖动相机会中止过渡 |
|
||
| `Delete` | 删除选中地图对象 | 输入框和对话框内不拦截；忽略 key repeat |
|
||
| `Ctrl/Cmd + S` | 保存并编译场景草稿 | 阻止浏览器“保存网页”；编译失败保留草稿 |
|
||
| `G` | 切换网格吸附 | 移动 0.1m / 旋转 5° |
|
||
| `Ctrl/Cmd + Z` | 撤销 MapEditSession 操作 | 已有会话行为 |
|
||
| `Ctrl/Cmd + Y` | 重做 MapEditSession 操作 | 已有会话行为 |
|
||
| `Escape` | 取消对象选择 | 已有会话行为 |
|
||
|
||
典型接入：
|
||
|
||
```tsx
|
||
useMapEditorShortcuts({
|
||
enabled: Boolean(snapshot),
|
||
mapEditing: mapEditingActive,
|
||
dirty: mapSceneDirty,
|
||
loading,
|
||
hasSelection: Boolean(selection),
|
||
canDelete: selection?.kind === 'map-object',
|
||
canScale: selectedObject?.placementMode !== 'locked',
|
||
onTransformMode: changeMapTransformMode,
|
||
onFocusSelection: () => viewer.focusSelection(),
|
||
onDeleteSelection: () => sessionPort.onDelete(objectId),
|
||
onToggleSnapping: () => setSnapping((value) => !value),
|
||
onSave: commitMapScene,
|
||
});
|
||
```
|
||
|
||
## Scrubbable Number Input
|
||
|
||
`ScrubbableNumberInput` 同时保留标准 `<input type="number">` 与标签拖拽：
|
||
|
||
- 在标签上左右拖拽：`每 4px = 1 step`；
|
||
- `Shift`：0.1 倍步长；
|
||
- `Alt`：0.01 倍步长；
|
||
- `Ctrl/Cmd`：10 倍步长；
|
||
- 标签获得焦点时可用左右方向键调节；
|
||
- min/max 在组件边界统一约束；
|
||
- 拖拽过程中使用等宽数字、accent 边框和低强度辉光。
|
||
|
||
适用于地图位姿、尺寸、材质、摩擦、出生点，以及仿真 Actuator 参数。
|
||
|
||
## 视觉层级
|
||
|
||
### 色彩与材质
|
||
|
||
- 页面底色：`--ui-bg`，暗色模式保持蓝黑而非纯黑；
|
||
- 一级面板：`--ui-panel`；
|
||
- 二级表面：`--ui-surface`；
|
||
- 浮层玻璃：`--ui-glass`，透明度约 78%；
|
||
- 强调色只用于选择、有效落点与可提交状态；
|
||
- 警告色只用于未保存草稿和物理诊断。
|
||
|
||
### 公共样式类
|
||
|
||
```css
|
||
.workbench-header /* 顶栏横向工程渐变 */
|
||
.engineering-glass /* 16px blur、微渐变、内高光、细边框 */
|
||
.engineering-card /* Inspector 二级属性组 */
|
||
.engineering-badge /* 微渐变 Badge 与细阴影 */
|
||
.tool-active-glow /* 激活工具的低强度 accent 光晕 */
|
||
.map-tool-enter /* 浮动工具条入场 */
|
||
.draft-dirty-dot /* 未保存状态呼吸提示 */
|
||
.scrubbable-number-* /* 数值拖拽完整状态 */
|
||
```
|
||
|
||
优先使用这些语义类，组件内部再组合 Tailwind 布局类。例如：
|
||
|
||
```tsx
|
||
<div className="engineering-glass map-tool-enter rounded-xl border p-1.5" />
|
||
<section className="engineering-card rounded-lg border p-2.5" />
|
||
```
|
||
|
||
## 动效时长
|
||
|
||
| 场景 | 时长 | 曲线 |
|
||
| --- | ---: | --- |
|
||
| Button hover / press | 150ms | `ease-out` |
|
||
| 浮动工具条出现 | 220ms | `cubic-bezier(.22,1,.36,1)` |
|
||
| 相机聚焦 | 320ms | cubic ease-out |
|
||
| Snap to Surface 3D 指示器 | 720ms | 双脉冲衰减 |
|
||
| 草稿状态呼吸 | 1800ms | ease-in-out |
|
||
|
||
所有动画必须受 `prefers-reduced-motion: reduce` 约束，不以动画作为唯一状态表达。Snap to Surface 同时使用绿色/青色圆环、十字中心和高度位置表达真实接触面。
|