XinJiang/src/App.vue

<script setup lang="ts">
import { ref } from 'vue'
import Scene3D from './scenes/Scene3D.vue'
import DucaoScene from './scenes/DucaoScene.vue'

const currentScene = ref<'scene3d' | 'ducao'>('ducao')
</script>

<template>
  <div class="app-root">
    <div class="scene-switcher">
      <button
        class="switch-btn"
        :class="{ active: currentScene === 'scene3d' }"
        @click="currentScene = 'scene3d'"
      >
        主场景
      </button>
      <button
        class="switch-btn"
        :class="{ active: currentScene === 'ducao' }"
        @click="currentScene = 'ducao'"
      >
        渡槽场景
      </button>
    </div>
    <Scene3D v-if="currentScene === 'scene3d'" :show-debug-tools="true" />
    <DucaoScene v-else :show-debug-tools="true" />
  </div>
</template>

<style scoped>
.app-root {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.scene-switcher {
  position: fixed;
  bottom: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 9999;
}

.switch-btn {
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  backdrop-filter: blur(4px);
  font-family: 'Microsoft YaHei', sans-serif;
  white-space: nowrap;
}

.switch-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.switch-btn.active {
  background: rgba(77, 208, 225, 0.2);
  border-color: #4dd0e1;
  color: #4dd0e1;
}
</style>