# 编辑器快捷键与微交互样式规范

## 快捷键矩阵

`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 同时使用绿色/青色圆环、十字中心和高度位置表达真实接触面。