library-picturebook-activity/frontend/src/components/ModelViewer.vue

<template>
  <!-- 这个组件作为跳转器使用，实际查看器在 /model-viewer 页面 -->
  <span></span>
</template>

<script setup lang="ts">
import { watch } from "vue"
import { useRouter } from "vue-router"

interface Props {
  open: boolean
  modelUrl: string
}

interface Emits {
  (e: "update:open", value: boolean): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()
const router = useRouter()

// 监听打开状态，跳转到全屏页面
watch(
  () => props.open,
  (newOpen) => {
    console.log("ModelViewer watch triggered:", { open: newOpen, url: props.modelUrl })
    if (newOpen && props.modelUrl) {
      console.log("正在跳转到模型查看页面:", props.modelUrl)
      // 先关闭状态
      emit("update:open", false)
      // 跳转到模型查看页面
      router.push({
        path: "/model-viewer",
        query: { url: props.modelUrl }
      })
    } else if (newOpen && !props.modelUrl) {
      console.error("模型URL为空，无法跳转")
      emit("update:open", false)
    }
  }
)
</script>