feat: 骨架——Vite + Vue3 + Fabric v7，左工作区右侧栏

共享外壳与类型契约，四条并行开发线在此之上各自填空：
- types.ts 是唯一的跨线接口，并行期间冻结
- editor/ 画布单例、选中态、尺寸预设与比例锁
- Sidebar 按选中对象切换面板，五个面板位已接好
- fonts/ filters/ sources/ io/ 留桩，各线只改自己目录

导出定 WebP：实测 540x287 PNG 134KB vs 1200x630 WebP 23KB。
字体接口挂在 Vite 中间件上，工具只在 dev 下完整可用。

src/components/Workspace.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { useEditor } from "@/editor/useEditor";
+
+const { mount, unmount, fitTo, size } = useEditor();
+
+const canvasEl = ref<HTMLCanvasElement | null>(null);
+const stage = ref<HTMLDivElement | null>(null);
+let observer: ResizeObserver | null = null;
+
+function refit() {
+  const box = stage.value;
+  if (!box) return;
+  fitTo(box.clientWidth, box.clientHeight);
+}
+
+onMounted(() => {
+  if (!canvasEl.value) return;
+  mount(canvasEl.value);
+  refit();
+  observer = new ResizeObserver(refit);
+  if (stage.value) observer.observe(stage.value);
+});
+
+onBeforeUnmount(() => {
+  observer?.disconnect();
+  unmount();
+});
+
+// 逻辑尺寸变了要重新算显示缩放。
+watch(size, refit, { deep: true });
+</script>
+
+<template>
+  <div class="workspace">
+    <div class="stage" ref="stage">
+      <canvas ref="canvasEl"></canvas>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.workspace {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  background: var(--bg);
+}
+
+.stage {
+  flex: 1;
+  display: grid;
+  place-items: center;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* Fabric 会在 canvas 外面包一层 .canvas-container，阴影打在那上面才跟着缩放走。 */
+.stage :deep(.canvas-container) {
+  box-shadow: 0 0 0 1px var(--line), 0 8px 32px rgb(0 0 0 / 0.4);
+}
+</style>