feat: 完成画布拖拽交互开发

2026-08-15 18:00:49 +08:00
commit a043fd9d8e
38 changed files with 5206 additions and 0 deletions
@@ -0,0 +1,56 @@
+<!-- 编辑器主入口 -->
+<script setup lang="ts">
+import ToolbarLeft from '@/editor/toolbar/ToolbarLeft.vue'
+import ToolbarRight from '@/editor/toolbar/ToolbarRight.vue'
+import MaterialPanel from '@/editor/panels/material/index.vue'
+import LayerPanel from '@/editor/panels/layer/index.vue'
+import CanvasRoot from '@/editor/canvas/index.vue'
+import { useEditorStore } from '@/stores/editor'
+import { storeToRefs } from 'pinia'
+
+defineOptions({
+  name: 'ScreenEditor',
+})
+const editorStore = useEditorStore()
+const { panelVisible } = storeToRefs(editorStore)
+
+const materialWidth = computed(() => (panelVisible.value.material ? '260px' : '0'))
+const propertyWidth = computed(() => (panelVisible.value.property ? '160px' : '0'))
+const layerWidth = computed(() => (panelVisible.value.layer ? '260px' : '0'))
+</script>
+
+<template>
+  <div class="h-screen select-none">
+    <header class="flex items-center justify-between h-14 border-b border-white/20 px-5">
+      <div class="w-75"><ToolbarLeft /></div>
+      <div class="">2</div>
+      <div class="w-75"><ToolbarRight /></div>
+    </header>
+    <main class="h-[calc(100%-56px)] flex">
+      <!-- 物料 -->
+      <MaterialPanel
+        class="w-[256px] overflow-hidden transition-all"
+        :style="{ width: materialWidth }"
+      >
+      </MaterialPanel>
+      <!-- 图层 -->
+      <LayerPanel
+        class="w-38 border-l border-r border-white/20 overflow-hidden transition-all"
+        :style="{ width: propertyWidth }"
+      >
+        图层
+      </LayerPanel>
+      <!-- 画布 -->
+      <CanvasRoot class="canvas flex-1">画布</CanvasRoot>
+      <!-- 属性 -->
+      <aside
+        class="w-[256px] border-l border-white/20 overflow-hidden transition-all"
+        :style="{ width: layerWidth }"
+      >
+        属性
+      </aside>
+    </main>
+  </div>
+</template>
+
+<style scoped></style>