feat: 新增glTF/GLB文件预览

public/index.html

@@ -36,6 +36,8 @@
     <title><%= webpackConfig.name %></title>
     <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.path %>/resource/font-awesome/free-6.4.2/css/all.min.css">
     <script src="/config.js"></script>
+
+<!--    <script type="module" src="<%= htmlWebpackPlugin.options.path %>/resource/model-viewer.min.js"></script>-->
   </head>
   <body>
     <noscript>

src/components/Icon/Icon.vue

@@ -5,7 +5,7 @@
 
 import { Icon } from 'ant-design-vue'
 const IconFont = Icon.createFromIconfontCN({
-  scriptUrl: document.location.protocol + '/resource/font_2024484_fr1a8jalngg.js'
+  scriptUrl: document.location.protocol + '/resource/font_2024484_fwthqwcsomd.js'
 })
 
 // 把此段代码贴到iconfont项目页面的控制台中, 以获取图标列表

src/components/ShowFile/ShowFile.vue

@@ -4313,7 +4313,7 @@ export default {
         }
         if (
           row.contentType.indexOf('office') > -1 ||
-          ['pdf', 'csv', 'drawio', 'mind'].includes(row.suffix)
+          ['pdf', 'csv', 'drawio', 'mind', 'glb', 'gltf', 'glTF'].includes(row.suffix)
         ) {
           // office文件
           this.officePreviewVisible = true

src/components/office/ModelPreview.vue

@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <div v-if="show">
+      <model-viewer ref="modelViewer" class="model-viewer" alt="" :src="fileUrl" autoplay animation-name="Running" shadow-intensity="1" camera-controls touch-action="pan-y"></model-viewer>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "ModelPreview",
+  components: {},
+  props: {
+    file: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    },
+    fileUrl: {
+      type: String,
+      default: ''
+    },
+    shareId: {
+      type: String,
+      default: ''
+    },
+    readOnly: {
+      type: Boolean,
+      default: false
+    },
+  },
+  data() {
+    return {
+      show: false,
+      width: window.innerWidth,
+      height: window.innerHeight
+    }
+  },
+  computed: {
+  },
+  created() {
+  },
+  mounted() {
+    const modelViewerJsUrl = window.location.origin + '/resource/model-viewer.min.js';
+
+    // 检查是否已经加载了相同的脚本
+    const existingScript = Array.from(document.head.getElementsByTagName('script')).find(
+      script => script.src === modelViewerJsUrl
+    )
+
+    if (existingScript) {
+      this.onRead()
+    } else {
+      const script = document.createElement('script');
+      script.src = modelViewerJsUrl;
+      script.type = 'module';
+      script.onload = () => {
+        this.onRead()
+      };
+      document.head.appendChild(script);
+    }
+  },
+  beforeDestroy() {
+  },
+  destroyed() {
+  },
+  watch: {
+  },
+  methods: {
+    onRead() {
+      this.$emit('onReady')
+      this.show = true
+      this.$nextTick(() => {
+        this.$refs.modelViewer.style.width = this.width + "px"
+        this.$refs.modelViewer.style.height = this.height + "px"
+      })
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.model-viewer {
+  position: absolute;
+}
+</style>

src/components/preview/OfficePreview.vue

@@ -19,6 +19,7 @@
             <pdf-preview v-if="fileType === 'pdf'" :file="file" :shareId="shareId" :file-url="fileUrl" @onReady="onReady"></pdf-preview>
             <drawio v-else-if="fileType === 'drawio'" v-show="fileReday" :file="file" :shareId="shareId" :read-only="readOnly" @onEdit="onEdit" @onReady="onReady" @onClose="close"></drawio>
             <my-mind-editor v-else-if="fileType === 'mind'" :file="file" :shareId="shareId" :read-only="readOnly" @onEdit="onEdit" @onReady="onReady" @onClose="close"></my-mind-editor>
+            <model-preview v-else-if="fileType === 'glTF/GLB'" :file="file" :file-url="fileUrl" :shareId="shareId" @onReady="onReady"></model-preview>
             <only-office-editor ref="officeEditor" v-else :file="file" :file-url="fileUrl" :shareId="shareId" :sharer="sharer" :read-only="readOnly" @onEdit="onEdit" @manualSave="manualSave" @onClose="close" @onReady="onReady"></only-office-editor>
           </div>
         </div>
@@ -28,6 +29,7 @@
 
 <script>
 
+import ModelPreview from '@/components/office/ModelPreview.vue'
 import OnlyOfficeEditor from "@/components/office/OnlyOfficeEditor";
 import MessageDialog from "@/components/message/MessageDialog";
 import fileConfig from "@/utils/file-config";
@@ -37,7 +39,7 @@ import MyMindEditor from "@/components/Minder/minder"
 
 export default {
   name: 'OfficePreview',
-  components: {Drawio, PdfPreview, MessageDialog, OnlyOfficeEditor, MyMindEditor},
+  components: { ModelPreview, Drawio, PdfPreview, MessageDialog, OnlyOfficeEditor, MyMindEditor},
   props: {
     id: {
       type: String,
@@ -125,6 +127,9 @@ export default {
           return 'pdf'
         case 'mind':
           return 'mind'
+        case 'gltf':
+        case 'glb':
+          return 'glTF/GLB'
         default:
           return 'office'
       }

src/utils/file-type.js

@@ -88,3 +88,5 @@ iconClass.set('yml','file-yml')
 iconClass.set('yaml','file-yml')
 iconClass.set('plist','file-plist')
 iconClass.set('iso','file-iso')
+iconClass.set('glb','glb')
+iconClass.set('gltf','glb')