首次上传

src/App.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="layout">
+    <!-- 左上:参数面板(宽度可拖) -->
+    <div class="left" :style="{ width: panelW + 'px' }">
+      <ParticlePanel />
+    </div>
+    <div class="resizer-col" @pointerdown="onPanelDrag"></div>
+
+    <!-- 右列:上=画布区,下=时间轴区(高度可拖) -->
+    <div class="right">
+      <div class="stage-area"><Stage /></div>
+      <div class="resizer-row" @pointerdown="onTimelineDrag" title="拖动调整时间轴高度"></div>
+      <div class="timeline-area" :style="{ height: timelineH + 'px' }">
+        <Timeline />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import Stage from './views/Stage.vue'
+import ParticlePanel from './views/ParticlePanel.vue'
+import Timeline from './views/Timeline.vue'
+
+const panelW = ref(360)
+const timelineH = ref(180)
+
+// 左面板宽度拖拽
+function onPanelDrag(e: PointerEvent) {
+  e.preventDefault()
+  const move = (ev: PointerEvent) => {
+    const w = Math.max(240, Math.min(ev.clientX, window.innerWidth - 200))
+    panelW.value = w
+  }
+  const up = () => { window.removeEventListener('pointermove', move); window.removeEventListener('pointerup', up) }
+  window.addEventListener('pointermove', move)
+  window.addEventListener('pointerup', up)
+}
+
+// 时间轴高度拖拽
+function onTimelineDrag(e: PointerEvent) {
+  e.preventDefault()
+  const startY = e.clientY
+  const startH = timelineH.value
+  const move = (ev: PointerEvent) => {
+    const h = Math.max(80, Math.min(startH + (startY - ev.clientY), window.innerHeight - 200))
+    timelineH.value = h
+  }
+  const up = () => { window.removeEventListener('pointermove', move); window.removeEventListener('pointerup', up) }
+  window.addEventListener('pointermove', move)
+  window.addEventListener('pointerup', up)
+}
+</script>
+
+<style scoped>
+.layout { display: flex; height: 100vh; overflow: hidden; }
+.left { flex-shrink: 0; height: 100%; overflow: hidden; }
+.resizer-col { width: 5px; cursor: col-resize; background: #1c1c2a; border-left: 1px solid #2a2a3c; border-right: 1px solid #2a2a3c; flex-shrink: 0; }
+.resizer-col:hover { background: #3a5a8c; }
+.right { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.stage-area { flex: 1; min-height: 0; }
+.resizer-row { height: 4px; cursor: row-resize; background: #1c1c2a; border-top: 1px solid #2a2a3c; border-bottom: 1px solid #2a2a3c; flex-shrink: 0; }
+.resizer-row:hover { background: #3a5a8c; }
+.timeline-area { flex-shrink: 0; overflow: hidden; }
+</style>