77 lines
3.2 KiB
Vue
77 lines
3.2 KiB
Vue
<template>
|
||
<div class="layout" :class="{ 'panel-right': store.settings.parameterPanelOnRight }">
|
||
<!-- 参数面板：可在系统设置中切换左右位置，宽度可拖。 -->
|
||
<div class="parameter-panel" :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 { useParticleStore } from './store/particleStore'
|
||
import { installSystemSettingsCache } from './editor/systemSettings'
|
||
import Stage from './views/Stage.vue'
|
||
import ParticlePanel from './views/ParticlePanel.vue'
|
||
import Timeline from './views/Timeline.vue'
|
||
|
||
const store = useParticleStore()
|
||
installSystemSettingsCache(store)
|
||
const panelW = ref(360)
|
||
const timelineH = ref(180)
|
||
|
||
// 参数面板宽度拖拽：面板在右侧时，从视口右边缘反向计算宽度。
|
||
function onPanelDrag(e: PointerEvent) {
|
||
e.preventDefault()
|
||
const move = (ev: PointerEvent) => {
|
||
const pointerWidth = store.settings.parameterPanelOnRight
|
||
? window.innerWidth - ev.clientX
|
||
: ev.clientX
|
||
const w = Math.max(240, Math.min(pointerWidth, 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; width: 100%; height: 100%; min-height: 0; overflow: clip; }
|
||
.parameter-panel { flex-shrink: 0; height: 100%; min-height: 0; overflow: clip; }
|
||
.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; height: 100%; min-height: 0; overflow: clip; display: flex; flex-direction: column; }
|
||
.panel-right .right { order: 1; }
|
||
.panel-right .resizer-col { order: 2; }
|
||
.panel-right .parameter-panel { order: 3; }
|
||
.stage-area { flex: 1; min-height: 0; overflow: clip; }
|
||
.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 { position: relative; z-index: 10; flex-shrink: 0; overflow: visible; }
|
||
</style>
|