继续尝试修复右侧消失的问题

src/views/Editor/CanvasCenter/index.vue

@@ -127,7 +127,10 @@ const getPreviewTemplateDetail = async (pk: number, templateParams: any, outerSe
       templatesStore.setProductIdentity(res.data.productIdentity ? res.data.productIdentity.split(",") : [])
       const data = res.data.jsonContent
       await templatesStore.changeTemplate(JSON.parse(data))
+
+      emit("loaded");
     } catch (e) {
+      console.log(e);
       ElMessage({
         type: 'error',
         message: '模板加载失败,请联系系统管理员',
@@ -161,7 +164,7 @@ const tmpSaveCurrentTemplate = () => {
     tmpSaveUserDesign(JSON.stringify(tmpTemplate)).then((res) => {
       if (res.httpCode == 200) {
         // ElMessage.success('暂存成功')
-        setTimeout(tmpSaveCurrentTemplate, 5000);
+        setTimeout(tmpSaveCurrentTemplate, 30000);
       }
     })
   }
@@ -229,7 +232,10 @@ function onWindowMessage(event) {
   }
 }
 
-onMounted(async () => {
+// 通过 emit 通知父组件已加载完成
+const emit = defineEmits(['loaded']);
+
+onMounted(() => {
   const query = router.currentRoute.value.query
   initRouter(query.template, query.runMode, query.sessionId)
   initEditor(query.template)
@@ -240,13 +246,14 @@ onMounted(async () => {
   window.addEventListener('blur', keyupListener)
   window.addEventListener('paste', pasteListener as any)
 
+
   if (query.runMode == 0) {
     // 使用iframe方案,本网页是内嵌页面
     // 监听来自父页面的消息
     window.addEventListener("message", onWindowMessage)
 
-    //每隔5秒暂存一次用户的设计
-    setTimeout(tmpSaveCurrentTemplate, 5000);
+    //每隔30秒暂存一次用户的设计
+    setTimeout(tmpSaveCurrentTemplate, 30000);
   }
 })
 

src/views/Editor/CanvasLeft/Menu/components/FrontEditorPool.vue

@@ -272,23 +272,34 @@ const {setBackgroudImage} = useHandleBackground();
 const {currentTemplate} = storeToRefs(templatesStore);
 const fabricStore = useFabricStore();
 const {clip, safe, zoom, opacity} = storeToRefs(fabricStore);
+
+
 const objects = canvas.getObjects().filter((object) => !["WorkSpaceMaskType", "WorkSpaceClipType", "WorkSpaceSafeType", "WorkSpaceClipType"].includes(object.id));
+
+
 // const objects = computed(() => {
-//   return canvas == null ? [] : canvas.getObjects().filter((object) => !["WorkSpaceMaskType", "WorkSpaceClipType", "WorkSpaceSafeType", "WorkSpaceClipType"].includes(object.id));
+//   return /*canvas == null ? [] :*/ canvas.getObjects().filter((object) => !["WorkSpaceMaskType", "WorkSpaceClipType", "WorkSpaceSafeType", "WorkSpaceClipType"].includes(object.id));
 // })
-const backGroundObject = computed(() => {
-  return /*canvas == null ? {} :*/ canvas.getObjects().filter((item) => item.id === WorkSpaceDrawType)[0];
-})
-const textObjects = computed(() => {
-  return /*canvas == null ? [] :*/ canvas.getObjects().filter((item) => item.name === 'textbox');
-})
-const imgObjects = computed(() => {
-  return /*canvas == null ? [] :*/ canvas.getObjects().filter((item) => item.name === 'image');
-})
+// const backGroundObject = computed(() => {
+//   const backGround = canvas.getObjects().filter((item) => item.id === WorkSpaceDrawType)[0];
+//   return /*canvas == null ? {} :*/ backGround ? backGround : {};
+// })
+// const textObjects = computed(() => {
+//   const textObjectList = canvas.getObjects().filter((item) => item.name === 'textbox')
+//   return /*canvas == null ? [] :*/ textObjectList.length > 0 ? textObjectList : [];
+// })
+// const imgObjects = computed(() => {
+//   const imgList = canvas.getObjects().filter((item) => item.name === 'image')
+//   return /*canvas == null ? [] :*/ imgList.length > 0 ? imgList : [];
+// })
+
+const backGroundObject = canvas.getObjects().filter((item) => item.id === WorkSpaceDrawType)[0];
+const textObjects = canvas.getObjects().filter((item) => item.name === 'textbox');
+const imgObjects = canvas.getObjects().filter((item) => item.name === 'image');
 
 const textPermDisplay = computed(() => {
   let result = false;
-  textObjects.value.forEach(x => {
+  textObjects.forEach(x => {
     if (x.permissionsConfig && (x.permissionsConfig.length > 0)) {
       result = true;
       return;
@@ -299,7 +310,7 @@ const textPermDisplay = computed(() => {
 
 const imgPermDisplay = computed(() => {
   let result = false;
-  imgObjects.value.forEach(x => {
+  imgObjects.forEach(x => {
     if (x.permissionsConfig && (x.permissionsConfig.length > 0)) {
       result = true;
       return;
@@ -542,8 +553,7 @@ const replaceImage = (objId: string, files: FileList) => {
 };
 
 onMounted(() => {
-  // objects = canvas.getObjects().filter((object) => !["WorkSpaceMaskType", "WorkSpaceClipType", "WorkSpaceSafeType", "WorkSpaceClipType"].includes(object.id));
-  console.log(objects)
+  // console.log('aaaaaaaaaaaaassssssssssssssss' + JSON.stringify(canvasObject))
 })
 
 </script>

src/views/Editor/computer.vue

@@ -13,13 +13,14 @@
       <div :class="runMode == 1 ? 'layout-content-center-design': 'layout-content-center-show'">
         <CanvasHeader v-show="runMode == 1"
                       class="center-header relative flex justify-between py-[10px] text-[14px] select-none h-[39px]"/>
-        <CanvasCenter ref="center" class="center-body"/>
+        <CanvasCenter ref="center" class="center-body" @loaded="loadFrontEditorPool = true"/>
         <!-- <CanvasFooter class="center-footer h-[40px] relative leading-1.5 flex justify-between" /> -->
         <CanvasAffix v-show="runMode == 1" class="center-affix"/>
         <!--        <CanvasICP />-->
       </div>
       <CanvasRight v-show="runMode == 1" class="layout-content-right h-full w-[260px] bg-[#fff] flex flex-col"/>
-      <FrontEditorPool ref="frontEditor" v-if="loadFrontEditorPool" class="layout-content-right h-full w-[260px] bg-[#fff] flex flex-col"/>
+      <FrontEditorPool ref="frontEditor" v-if="loadFrontEditorPool && runMode == 0"
+                       class="layout-content-right h-full w-[260px] bg-[#fff] flex flex-col"/>
       <CanvasDom v-show="runMode == 1" class="absolute -z-[200] -left-[300px]"/>
     </div>
     <!--    <CanvasTour v-show="runMode == 1"/>-->
@@ -47,6 +48,7 @@ import {useMainStore, useUserStore} from "@/store";
 import useCanvasExport from "@/hooks/useCanvasExport";
 import {newDesignOrder} from "@/api/template";
 import {storeToRefs} from "pinia";
+import {load} from "opentype.js";
 
 const mainStore = useMainStore();
 const userStore = useUserStore();
@@ -54,6 +56,7 @@ const {uuid} = storeToRefs(userStore);
 const runMode = ref(0);
 const {getSVGDataEx, getSVGData} = useCanvasExport()
 
+
 const loadFrontEditorPool = ref(false)
 
 const center = ref()
@@ -149,9 +152,9 @@ onUnmounted(() => {
 })
 
 const checkLoaded = () => {
-  if (center.value) {
-    loadFrontEditorPool.value = true;
-  }
+  // if (center.value) {
+  //   loadFrontEditorPool.value = true;
+  // }
 
   if (center.value && frontEditor.value) {
     //给父页面发送onLoaded消息,表示已经加载完毕了