SpineParticlesWeb/src/App.vue

<template>
  <div
    class="layout"
    :class="{ 'panel-right': store.settings.parameterPanelOnRight }"
    :inert="transferProgress.visible ? true : undefined"
    :aria-hidden="transferProgress.visible ? 'true' : undefined"
  >
    <!-- 参数面板：可在系统设置中切换左右位置，宽度可拖。 -->
    <div v-show="showParameterPanel" class="parameter-panel" :style="{ width: panelW + 'px' }">
      <ParticlePanel />
    </div>
    <div v-show="showParameterPanel" class="resizer-col" @pointerdown="onPanelDrag"></div>

    <!-- 右列:上=画布区,下=时间轴区(高度可拖) -->
    <div class="right">
      <div class="stage-area">
        <Stage />
        <nav
          v-if="store.settings.floatingMenuEnabled"
          class="floating-section-nav"
          role="tablist"
          :aria-label="$t('settings.floatingMenu')"
        >
          <button
            v-for="(section, index) in PARTICLE_SECTIONS"
            :key="section.key"
            type="button"
            role="tab"
            class="floating-section-tab"
            :class="{ selected: activeSection === section.key && canUseSection(section.key) }"
            :disabled="!canUseSection(section.key)"
            :aria-selected="activeSection === section.key && canUseSection(section.key)"
            :title="canUseSection(section.key) ? $t(section.titleKey) : $t('settings.floatingMenuParticleOnly')"
            @click="activateSection(section.key)"
          >
            <span class="floating-section-index">{{ index + 1 }}</span>
            <span class="floating-section-label">{{ $t(section.titleKey) }}</span>
          </button>
        </nav>
      </div>
      <div class="resizer-row" @pointerdown="onTimelineDrag" :title="$t('app.resizeTimeline')"></div>
      <div class="timeline-area" :style="{ height: timelineH + 'px' }">
        <Timeline />
      </div>
    </div>
  </div>
  <TransferProgressOverlay />
</template>

<script setup lang="ts">
import { computed, 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'
import TransferProgressOverlay from './views/TransferProgressOverlay.vue'
import { transferProgress } from './editor/transferProgress'
import { provideParticlePanel } from './views/particle-panel/particlePanelContext'
import { PARTICLE_SECTIONS } from './views/particle-panel/particleSections'

const store = useParticleStore()
installSystemSettingsCache(store)
const { activeSection, activateSection, canUseSection } = provideParticlePanel()
const showParameterPanel = computed(() => !store.settings.floatingMenuEnabled || activeSection.value !== null)
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 { position: relative; flex: 1; min-height: 0; overflow: clip; }
.floating-section-nav {
  position: absolute; right: 12px; top: 72px; z-index: 6; display: flex;
  width: clamp(184px, 15vw, 236px); max-height: calc(100% - 92px);
  flex-direction: column; gap: 5px; overflow-y: auto; box-sizing: border-box; padding: 8px;
  border: 1px solid rgba(79, 91, 121, .72); border-radius: 10px;
  background: rgba(15, 18, 29, .9); box-shadow: 0 12px 30px rgba(0, 0, 0, .36);
  scrollbar-width: thin; scrollbar-color: #3a455e transparent;
}
.floating-section-tab {
  display: flex; width: 100%; min-height: 40px; flex: 0 0 auto; align-items: center; gap: 9px;
  padding: 0 10px; border: 1px solid #2d3548; border-radius: 8px;
  background: #191e2c; color: #aeb9cf; font: inherit; font-size: 12px; text-align: left; cursor: pointer;
}
.floating-section-tab:hover:not(:disabled) { border-color: rgba(112, 121, 167, .45); background: #242b40; color: #f0f3fb; }
.floating-section-tab.selected {
  border-color: #6f69db; background: #37365e; color: #f5f4ff;
  box-shadow: inset 3px 0 #8580ff;
}
.floating-section-tab:focus-visible { outline: 2px solid #8b86ff; outline-offset: 1px; }
.floating-section-tab:disabled { color: #596476; cursor: not-allowed; opacity: .58; }
.floating-section-index {
  display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center;
  border-radius: 5px; background: #252d40; color: #8390ad; font-size: 10px; font-variant-numeric: tabular-nums;
}
.floating-section-tab.selected .floating-section-index { background: #7771e8; color: #fff; }
.floating-section-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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>