Merge branch 'perf/3d-model' into 'main_dev'

fix: 优化3d模型保存逻辑

See merge request yunteng/thingskit-view!310

@@ -11,6 +11,7 @@ import camera from '../examples/camera.app.json?url'
 import particles from '../examples/particles.app.json?url'
 import pong from '../examples/pong.app.json?url'
 import shaders from '../examples/shaders.app.json?url'
+import { useSave } from './libs/hook/useSave.js'
 
 function MenubarFile(editor) {
   const strings = editor.strings
@@ -148,45 +149,12 @@ function MenubarFile(editor) {
    * THINGS_KIT 修改
    */
 
+  const { save } = useSave(editor)
   option = new UIRow()
     .addClass('option')
     .setTextContent(strings.getKey('menubar/file/save'))
     .onClick(async function () {
-      // 获取缩略图片
-      const range = document.querySelector('#viewport').children[3]
-      const { spin, stop } = useSpin()
-      const { success, error } = useMessage()
-      try {
-        spin()
-        // 生成图片
-        const canvasImage = await html2canvas(range, {
-          backgroundColor: null,
-          allowTaint: true,
-          useCORS: true,
-          logging: false
-        })
-        // 上传预览图
-        const uploadParams = new FormData()
-        uploadParams.append(
-          'file',
-          base64toFile(canvasImage.toDataURL(), `${fetchRouteParamsLocation()}_index_preview.png`)
-        )
-        const uploadRes = await uploadFile(uploadParams)
-        const file_json = editor.toJSON()
-        const paramsStr = window.location.search
-        const params = new URLSearchParams(paramsStr)
-        const file_uuid = params.get('three_file_uuid')
-        await saveOrUpdateThreeJsModel({
-          id: file_uuid,
-          imageUrl: uploadRes?.fileDownloadUri,
-          data: file_json
-        })
-        success('保存成功')
-      } catch (e) {
-        error(e?.message || e?.msg || '网络错误')
-      } finally {
-        stop()
-      }
+      save()
     })
   options.add(option)
 

 import { UIPanel, UIButton } from './libs/ui.js';
-import html2canvas from 'html2canvas'
-import useMessage from './MessageDialog.js'
-import { saveOrUpdateThreeJsModel } from './libs/http/api.js'
-import { fetchRouteParamsLocation } from '@/utils'
-import { uploadFile } from '@/api/external/contentSave/content'
-import { base64toFile } from '../utils/Base64ToFile.js'
-import { useSpin } from '../js/libs/spin/useSpin.js' 
+import { useSave } from './libs/hook/useSave.js';
 
 function MenubarSave(editor) {
   const strings = editor.strings
@@ -18,44 +12,9 @@ function MenubarSave(editor) {
   const saveButton = new UIButton(strings.getKey('menubar/file/save'))
   container.add(saveButton)
 
+  const { save } = useSave(editor)
   saveButton.onClick(async function () {
-
-    // 获取缩略图片
-    const range = document.querySelector('#viewport').children[3]
-    const { spin, stop } = useSpin()
-    const { success, error } = useMessage()
-    try {
-      spin()
-      // 生成图片
-      const canvasImage = await html2canvas(range, {
-        backgroundColor: null,
-        allowTaint: true,
-        useCORS: true,
-        logging: false
-      })
-      // 上传预览图
-      const uploadParams = new FormData()
-      uploadParams.append(
-        'file',
-        base64toFile(canvasImage.toDataURL(), `${fetchRouteParamsLocation()}_index_preview.png`)
-      )
-      const uploadRes = await uploadFile(uploadParams)
-      const file_json = editor.toJSON()
-      const paramsStr = window.location.search
-      const params = new URLSearchParams(paramsStr)
-      const file_uuid = params.get('three_file_uuid')
-      await saveOrUpdateThreeJsModel({
-        id: file_uuid,
-        imageUrl: uploadRes?.fileDownloadUri,
-        data: file_json
-      })
-      success('保存成功')
-    } catch (e) {
-      error(e?.message || e?.msg || '网络错误')
-    } finally {
-      stop()
-    }
-
+    save()
   })
 
   return container;

+import html2canvas from 'html2canvas'
+import useMessage from '../../MessageDialog.js'
+import { saveOrUpdateThreeJsModel } from '../http/api.js'
+import { fetchRouteParamsLocation } from '@/utils'
+import { uploadFile } from '@/api/external/contentSave/content'
+import { base64toFile } from '../../../utils/Base64ToFile.js'
+import { useSpin } from '../spin/useSpin'
+
+export function useSave(editor) {
+
+  async function save() {
+    // 获取缩略图片
+    const range = document.querySelector('#viewport').children[3]
+    const { spin, stop } = useSpin()
+    const { success, error } = useMessage()
+    try {
+      spin()
+      // 生成图片
+      const canvasImage = await html2canvas(range, {
+        backgroundColor: null,
+        allowTaint: true,
+        useCORS: true,
+        logging: false
+      })
+      // 上传预览图
+      const uploadParams = new FormData()
+      uploadParams.append(
+        'file',
+        base64toFile(canvasImage.toDataURL(), `${fetchRouteParamsLocation()}_index_preview.png`)
+      )
+      const uploadRes = await uploadFile(uploadParams)
+      const file_json = editor.toJSON()
+      const paramsStr = window.location.search
+      const params = new URLSearchParams(paramsStr)
+      const file_uuid = params.get('three_file_uuid')
+      await saveOrUpdateThreeJsModel({
+        id: file_uuid,
+        imageUrl: uploadRes?.fileStaticUri,
+        data: file_json
+      })
+      success('保存成功')
+    } catch (e) {
+      error(e?.message || e?.msg || '网络错误')
+    } finally {
+      stop()
+    }
+  }
+
+  return {
+    save
+  }
+}