Ver Fonte

feat(ar): 添加返回按钮并优化预览功能

- 在预览页面添加返回按钮,游客模式下不显示编辑按钮
- 新增 toHotspot 函数用于跳转到指定热点
- 调整场景切换逻辑,优化用户体验- 引入 docx-preview包,支持 DOCX 文件预览
nahida há 10 meses atrás
pai
commit
d396690dd6
3 ficheiros alterados com 133 adições e 10 exclusões
  1. 103 1
      package-lock.json
  2. 1 0
      package.json
  3. 29 9
      src/views/ar/preview.vue

+ 103 - 1
package-lock.json

@@ -11,6 +11,7 @@
         "@element-plus/icons-vue": "^2.3.1",
         "@vueuse/core": "^13.4.0",
         "axios": "^1.10.0",
+        "docx-preview": "^0.3.5",
         "element-plus": "^2.10.2",
         "lucide-vue-next": "^0.525.0",
         "pinia": "^3.0.1",
@@ -3354,6 +3355,12 @@
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "license": "MIT"
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3506,6 +3513,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/docx-preview": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmmirror.com/docx-preview/-/docx-preview-0.3.5.tgz",
+      "integrity": "sha512-nod1jG5PkvzDIiZAcgAY4gSFQzgmAAChcuZH4Hj9dj7oCzscY3Hn8NfbUv7X7Jk4xL1lfKO113JLDhWKOt6fYw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "jszip": ">=3.0.0"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -4562,6 +4578,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmmirror.com/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -4589,6 +4611,12 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmmirror.com/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -4737,6 +4765,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/isexe/-/isexe-2.0.0.tgz",
@@ -4844,6 +4878,18 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmmirror.com/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "license": "(MIT OR GPL-3.0-or-later)",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmmirror.com/keyv/-/keyv-4.5.4.tgz",
@@ -4875,6 +4921,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmmirror.com/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/local-pkg": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/local-pkg/-/local-pkg-1.1.1.tgz",
@@ -5390,6 +5445,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmmirror.com/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/parent-module/-/parent-module-1.0.1.tgz",
@@ -5618,6 +5679,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT"
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -5686,6 +5753,21 @@
         "node": "^18.17.0 || >=20.5.0"
       }
     },
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmmirror.com/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz",
@@ -5803,6 +5885,12 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
     "node_modules/scule": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/scule/-/scule-1.3.0.tgz",
@@ -5820,6 +5908,12 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -5902,6 +5996,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/strip-final-newline": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/strip-final-newline/-/strip-final-newline-4.0.0.tgz",
@@ -6479,7 +6582,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/vite": {

+ 1 - 0
package.json

@@ -16,6 +16,7 @@
     "@element-plus/icons-vue": "^2.3.1",
     "@vueuse/core": "^13.4.0",
     "axios": "^1.10.0",
+    "docx-preview": "^0.3.5",
     "element-plus": "^2.10.2",
     "lucide-vue-next": "^0.525.0",
     "pinia": "^3.0.1",

+ 29 - 9
src/views/ar/preview.vue

@@ -90,9 +90,13 @@ const isLoading = ref(true)
 const loadingText = ref('正在初始化...')
 const loadingProgress = ref(0)
 
+const route = useRoute()
+const router = useRouter()
+
 // 编辑模式状态
 const isEditMode = ref(false)
 const selectedHotspotIndex = ref(-1)
+const isTourist = ref(route.query.isTourist === '1')
 
 // 新增:预览模式状态
 const isPreviewMode = ref(false)
@@ -104,9 +108,7 @@ const isAddingHotspotMode = ref(false)
 const currentSceneIndex = ref(0)
 const currentSceneId = ref('')
 
-const route = useRoute()
-const router = useRouter()
-
+console.log(isTourist.value)
 // 选中的指引配置
 const selectedHotspotConfig = ref<Hotspot>({
   position: { x: 0, y: 0, z: 3 },
@@ -1183,10 +1185,15 @@ onUnmounted(() => {
     renderer.dispose()
   }
 })
+
+function toHotspot(index: number, hotspot: Hotspot) {
+  selectedHotspotIndex.value = index
+  selectedHotspotConfig.value = { ...hotspot }
+}
 </script>
 
 <template>
-  <div class="relative w-89vw h-90vh overflow-hidden bg-black flex">
+  <div class="relative w-87vw h-90vh overflow-hidden bg-black flex">
     <!-- 全屏Loading -->
     <div
       v-if="isLoading"
@@ -1296,6 +1303,22 @@ onUnmounted(() => {
     <div
       class="absolute top-5 left-5 bg-white/90 text-black p-5 rounded-lg backdrop-blur-md max-w-75 z-10 border border-gray-200"
     >
+      <el-button
+        @click="goBack"
+        class="flex items-center gap-2 px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition-colors duration-200"
+      >
+        <el-icon class="w-5 h-5">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M10 19l-7-7m0 0l7-7m-7 7h18"
+            ></path>
+          </svg>
+        </el-icon>
+        返回
+      </el-button>
       <div class="mb-4">
         <h3 class="m-0 mb-2.5 text-lg text-black font-semibold">
           {{ scenes[currentSceneIndex]?.name || '加载中...' }}
@@ -1346,7 +1369,7 @@ onUnmounted(() => {
         </button>
       </div>
 
-      <div class="flex gap-2 flex-wrap">
+      <div v-if="!isTourist" class="flex gap-2 flex-wrap">
         <button
           @click="toggleEditMode"
           :disabled="isAnimating"
@@ -1682,10 +1705,7 @@ onUnmounted(() => {
                 ? 'bg-blue-600/20 border-blue-600/50'
                 : 'bg-gray-700/50 border-gray-600/50 hover:bg-gray-600/50 hover:border-gray-500/50',
             ]"
-            @click="
-              selectedHotspotIndex = index
-              selectedHotspotConfig = { ...hotspot }
-            "
+            @click="toHotspot(index, hotspot)"
           >
             <p class="text-sm font-medium text-white">{{ hotspot.label }}</p>
             <p class="text-xs text-gray-400">