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/LayersPanel.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+/**
+ * 【T6 待实现 — 左侧图层面板】
+ *
+ * 数据来自 `@/editor/useLayers` 的 `layers`（从上到下 = 从前到后，和 Figma 一致）。
+ * 那个模块已经把所有操作都写好了：selectLayer / renameLayer / toggleVisible /
+ * toggleLocked / deleteLayer / moveLayerToRow。**面板只管界面，不要另写一套状态。**
+ *
+ * 要有：每行图标（按 kind）+ 名字 + 显隐眼睛 + 锁；点击选中，Ctrl/Shift 点多选；
+ * 双击重命名；拖拽排序（放到第 N 行调 moveLayerToRow）；行内或右键删除。
+ */
+</script>
+
+<template>
+  <aside class="layers">
+    <h2>图层</h2>
+    <p class="todo">T6 待实现</p>
+  </aside>
+</template>
+
+<style scoped>
+.layers {
+  border-right: 1px solid var(--line);
+  background: var(--bg2);
+  overflow-y: auto;
+  padding: 10px 0;
+}
+.layers h2 {
+  margin: 0 12px 8px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  color: var(--fg-dim);
+  text-transform: uppercase;
+}
+.todo {
+  color: var(--fg-dim);
+  margin: 0 12px;
+}
+</style>