feat: Figma 式外壳与编辑器内核

布局改成 顶部工具栏 / 左图层 / 中画布 / 右属性 / 底部悬浮胶囊。

新内核：
- 图层模型：fabric 对象是唯一真源，LayerInfo 是只读投影；
  id/名字/锁定挂在 customProperties 上，随 toJSON 持久化
- 视口：zoom/pan 走 viewportTransform，只影响显示；
  导出改为按视口裁剪（artboardExportOptions），旧的「multiplier 恒为 1」
  在画布铺满工作区之后不再成立
- 历史：快照式撤销重做，30 步上限，带重入保护
- 命令表：快捷键 / 右键菜单 / 工具栏三个入口共用一份注册表
  键位取自 Penpot 快捷键表
- 画板用 backgroundImage 画（跟随视口且不进 getObjects）

两个 fabric 陷阱已在注释里记下：
- Rect 默认原点是中心，left:0/top:0 不写 originX/originY 会画错位置
- canvas.clipPath 不吃 viewportTransform，不能用来裁画板

src/components/BottomDock.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+/**
+ * 【T7 待实现 — 底部悬浮胶囊】
+ *
+ * 浮在画布下缘居中的圆角胶囊，装高频快捷操作：
+ * 缩放百分比（可点开选 50/100/200%、适应画布、缩放到选中）、减号/加号、
+ * 适应画布按钮。全部走 `runCommand("zoomFit")` 等命令，不要自己调 viewport。
+ *
+ * 缩放数值读 `useViewport().zoom`。
+ * 它是浮层，绝对定位在 .area-stage 里，不占布局空间——不要给它加 margin 去挤画布。
+ */
+</script>
+
+<template>
+  <div class="dock">
+    <span class="todo">T7 待实现：缩放胶囊</span>
+  </div>
+</template>
+
+<style scoped>
+.dock {
+  position: absolute;
+  left: 50%;
+  bottom: 16px;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: var(--bg3);
+  box-shadow: 0 6px 24px rgb(0 0 0 / 0.45);
+}
+.todo {
+  color: var(--fg-dim);
+}
+</style>