模型查看全屏页面

src/router/index.ts

@@ -100,6 +100,11 @@ const router = createRouter({
       component: () => import('../views/ArtifactSubPartModelDetailView.vue'),
     },
     {
+      path: '/artifactModelFullDetail',
+      name: 'ArtifactModelFullDetail',
+      component: () => import('../views/ArtifactModelFullDetailView.vue'),
+    },
+    {
       path: '/volunteer',
       name: 'Volunteer',
       component: () => import('../views/VolunteerView.vue'),

src/views/ArtifactModelDetailView.vue

@@ -68,16 +68,21 @@ const previewShow = ref(false);
             </Box1>
           </div>
           <!-- 中 3D模型 显示 -->
-          <div class="d-flex flex-col w-40 flex-shrink-0">
+          <div class="d-flex flex-col w-40 flex-shrink-0 position-relative">
             <div v-if="!newsData.content.value?.model?.model" class="h-100 d-flex flex-column justify-center align-center">
               暂无可用3D模型数据
             </div>
-            <Viewer 
-              v-else 
-              ref="modelRef"
-              class="h-100" 
-              :path="newsData.content.value.model.model"
-            />
+            <template v-else>
+              <button class="full-button" @click="router.push({name: 'ArtifactModelFullDetail', query: {
+                ...route.query,
+                model: newsData.content.value.model.model,
+              } })">全屏</button>
+              <Viewer 
+                ref="modelRef"
+                class="h-100" 
+                :path="newsData.content.value.model.model"
+              />
+            </template>
           </div>
 
           <!-- 右 信息和构建 -->
@@ -139,4 +144,9 @@ const previewShow = ref(false);
     object-fit: cover;
   }
 }
+.full-button {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+}
 </style>

src/views/ArtifactModelFullDetailView.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { useRoute, useRouter } from 'vue-router';
+import { computed, onBeforeUnmount, onMounted } from 'vue';
+import Viewer from '@/components/3d/Viewer.vue';
+
+const route = useRoute();
+const router = useRouter();
+const modelPath = computed(() => (route.query.model as string));
+
+function onFullscreenChange() {
+  if (!document.fullscreenElement)
+    router.back();
+}
+
+onMounted(() => {
+  document.body.requestFullscreen();
+  window.addEventListener('fullscreenchange', onFullscreenChange);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener('fullscreenchange', onFullscreenChange);
+  if (document.fullscreenElement)
+    document.exitFullscreen();
+});
+
+</script>
+
+<template>
+  <!-- 中 3D模型 显示 -->
+  <div class="d-flex flex-col w-100 h-100vh flex-shrink-0 bg-pure">
+    <div v-if="!modelPath" class="h-100 d-flex flex-column justify-center align-center">
+      暂无可用3D模型数据
+    </div>
+    <Viewer 
+      v-else 
+      ref="modelRef"
+      class="h-100" 
+      :path="modelPath"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+</style>