杂

src/api/template/index.ts

@@ -50,6 +50,14 @@ export function updateDesignTemplate(data: any): any {
     });
 }
 
+export function tmpSaveUserDesign(data: any): any {
+    return request({
+        url: "apis10/design/tmpSaveUserDesign",
+        method: "post",
+        data: data,
+    });
+}
+
 export function newDesignOrder(data: any, sessionId: string): any {
     return request({
         url: "apis10/invoke/newDesignOrder?outerSessionId=" + sessionId,

src/store/modules/main.ts

@@ -67,9 +67,9 @@ export const useMainStore = defineStore('main', {
         onlineFonts: [], // 在线字体
         disableHotkeys: false, // 禁用快捷键
         exportType: 'image', // 导出面板
-        lastEdit: 'editor', // 左边栏
-        lastHelp: 'editor', // 左边栏
-        poolType: 'editor', // 左边栏
+        lastEdit: 'text', // 左边栏
+        lastHelp: 'text', // 左边栏
+        poolType: 'text', // 左边栏
         poolShow: false, // 显示左边栏
         runMode: 0 //运行方式, 0客户端展示/1模板编辑
     }),

src/views/Editor/CanvasCenter/index.vue

@@ -15,12 +15,13 @@ import {onMounted, onUnmounted} from 'vue'
 import {useFabricStore, useMainStore, useTemplatesStore, useUserStore} from '@/store'
 import {useRouter} from 'vue-router'
 import {unzip} from "@/utils/crypto"
-import {getDesignTemplateEdit, getPreViewTemplate, getTemplateData} from '@/api/template'
+import {getDesignTemplateEdit, getPreViewTemplate, getTemplateData, tmpSaveUserDesign, updateDesignTemplate} from '@/api/template'
 import {contextMenus} from '@/configs/contextMenu'
 import {initEditor} from '@/views/Canvas/useCanvas'
 import {initPixi} from '@/views/Canvas/usePixi'
 import {ElMessage, ElLoading} from 'element-plus'
 import useCanvasHotkey from '@/hooks/useCanvasHotkey'
+import useCanvasExport from "@/hooks/useCanvasExport";
 
 const fabricStore = useFabricStore()
 const mainStore = useMainStore()
@@ -29,6 +30,8 @@ const templatesStore = useTemplatesStore()
 const userStore = useUserStore()
 const {uuid} = storeToRefs(userStore);
 const {wrapperRef, canvasRef} = storeToRefs(fabricStore)
+const {getJSONData} = useCanvasExport()
+let outerSessionId = ""
 
 const {drawAreaFocus} = storeToRefs(mainStore)
 const {keydownListener, keyupListener, pasteListener} = useCanvasHotkey()
@@ -138,11 +141,27 @@ const initRouter = async (templateId: number, runMode: number, outerSessionId: a
   }
 }
 
+//递归调用的目的是不会导致任务堆积,虽然也没什么可能存一下超过5秒
+const tmpSaveCurrentTemplate = () => {
+  const tmpTemplate = {
+    templateName: outerSessionId,
+    jsonContent: getJSONData()
+  }
+
+  tmpSaveUserDesign(JSON.stringify(tmpTemplate)).then((res) => {
+    if (res.httpCode == 200) {
+      // ElMessage.success('暂存成功')
+      setTimeout(tmpSaveCurrentTemplate, 5000);
+    }
+  })
+}
+
 onMounted(async () => {
   const query = router.currentRoute.value.query
   initRouter(query.template, query.runMode, query.sessionId)
   initEditor(query.template)
   initPixi()
+  outerSessionId = query.sessionId
   document.addEventListener('keydown', keydownListener)
   document.addEventListener('keyup', keyupListener)
   window.addEventListener('blur', keyupListener)
@@ -173,6 +192,9 @@ onMounted(async () => {
         getPreviewTemplateDetail(query.template, message.data, uuid.value)
       }
     })
+
+    //每隔5秒暂存一次用户的设计
+    setTimeout(tmpSaveCurrentTemplate, 5000);
   }
 })
 

src/views/Editor/CanvasLeft/Label/index.vue

@@ -70,7 +70,7 @@ interface TabItem {
 const topTabsRef = ref([])
 
 const topTabs: TabItem[] = [
-  {key: "editor", label: "message.edit", icon: `editor`, index: 0},
+  // {key: "editor", label: "message.edit", icon: `editor`, index: 0},
   // { key: "template", label: "message.template", icon: `template`, index: 1 },
   {key: "material", label: "message.material", icon: `material`, index: 2},
   {key: "text", label: "message.text", icon: "text", index: 3},
@@ -102,10 +102,12 @@ onMounted(() => {
     runMode.value = query.runMode
   }
   if (runMode.value == 0) {
-    topTabsRef.value = topTabsFront;
-    setTimeout(() => {
-      setPoolType("frontEditor")
-    }, 300)
+    //非得放右边
+    // topTabsRef.value = topTabsFront;
+    // setTimeout(() => {
+    //   setPoolType("frontEditor")
+    // }, 300)
+    setPoolType(null)
 
   } else topTabsRef.value = topTabs;
 })

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

@@ -2,7 +2,7 @@
   <div>
     <el-scrollbar>
       <!--        背景-->
-      <el-card v-if="backGroundObject.permissionsConfig.length > 0"
+      <el-card v-if="backGroundObject.permissionsConfig && (backGroundObject.permissionsConfig.length > 0)"
                :body-style="{background: '#f8f8f8'}"
                style="max-width: 100%; border-radius: 8px">
 
@@ -273,21 +273,23 @@ 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));
+// })
 const backGroundObject = computed(() => {
-  return canvas.getObjects().filter((item) => item.id === WorkSpaceDrawType)[0];
+  return /*canvas == null ? {} :*/ canvas.getObjects().filter((item) => item.id === WorkSpaceDrawType)[0];
 })
 const textObjects = computed(() => {
-  return canvas.getObjects().filter((item) => item.name === 'textbox');
+  return /*canvas == null ? [] :*/ canvas.getObjects().filter((item) => item.name === 'textbox');
 })
 const imgObjects = computed(() => {
-  return canvas.getObjects().filter((item) => item.name === 'image');
+  return /*canvas == null ? [] :*/ canvas.getObjects().filter((item) => item.name === 'image');
 })
 
 const textPermDisplay = computed(() => {
   let result = false;
   textObjects.value.forEach(x => {
-    if (x.permissionsConfig.length > 0) {
+    if (x.permissionsConfig && (x.permissionsConfig.length > 0)) {
       result = true;
       return;
     }
@@ -298,7 +300,7 @@ const textPermDisplay = computed(() => {
 const imgPermDisplay = computed(() => {
   let result = false;
   imgObjects.value.forEach(x => {
-    if (x.permissionsConfig.length > 0) {
+    if (x.permissionsConfig && (x.permissionsConfig.length > 0)) {
       result = true;
       return;
     }
@@ -540,6 +542,7 @@ const replaceImage = (objId: string, files: FileList) => {
 };
 
 onMounted(() => {
+  // objects = canvas.getObjects().filter((object) => !["WorkSpaceMaskType", "WorkSpaceClipType", "WorkSpaceSafeType", "WorkSpaceClipType"].includes(object.id));
   console.log(objects)
 })
 

src/views/Editor/CanvasRight/index.vue

@@ -175,7 +175,10 @@ const onSaveTemplate = () => {
   }
   //检查一下是否每个元素都给了itemName
   const [canvas] = useCanvas()
-  const objects = canvas.getObjects().filter((object) => !["WorkSpaceMaskType", "WorkSpaceClipType", "WorkSpaceSafeType", "WorkSpaceClipType"].includes(object.id));
+  const objects = canvas.getObjects().filter((object) => {
+    return (!["WorkSpaceMaskType", "WorkSpaceClipType", "WorkSpaceSafeType", "WorkSpaceClipType"].includes(object.id)) &&
+        (["image", "textbox"].includes(object.name))
+  });
   if (objects.findIndex((object) => !object.itemName) >= 0) {
     ElMessage.error('部分元素未设置名称,请设置元素名称后保存')
     return

src/views/Editor/computer.vue

@@ -9,7 +9,7 @@
 <template>
   <div class="h-full" v-drop-image="{ url: 'UploadUrl', highlightStyle: { backgroundColor: 'lightblue' } }">
     <div :class="[runMode == 1 ? 'layout-content-design': 'layout-content-show', 'flex']">
-      <CanvasLeft/>
+      <CanvasLeft v-show="runMode == 1"/>
       <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]"/>
@@ -19,6 +19,7 @@
         <!--        <CanvasICP />-->
       </div>
       <CanvasRight v-show="runMode == 1" class="layout-content-right h-full w-[260px] bg-[#fff] flex flex-col"/>
+      <FrontEditorPool v-if="loadFrontEditorPool" 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"/>-->
@@ -35,6 +36,7 @@ import CanvasICP from "./CanvasICP/index.vue";
 import CanvasAffix from "./CanvasAffix/index.vue";
 import CanvasDom from "./CanvasDom/index.vue";
 import CanvasTour from "./CanvasTour/index.vue";
+import FrontEditorPool from "@/views/Editor/CanvasLeft/Menu/components/FrontEditorPool.vue";
 
 import {computed, onMounted} from "vue";
 import router from "@/router";
@@ -52,7 +54,9 @@ const {uuid} = storeToRefs(userStore);
 const runMode = ref(0);
 const {getSVGDataEx, getSVGData} = useCanvasExport()
 
-onMounted(async () => {
+const loadFrontEditorPool = ref(false)
+
+onMounted(() => {
   const query = router.currentRoute.value.query
   if (query.runMode) {
     runMode.value = query.runMode
@@ -117,6 +121,11 @@ onMounted(async () => {
 
       }
     });
+    //延迟加载
+    setTimeout(() => {
+      loadFrontEditorPool.value = true;
+    }, 250)
+
   }
   mainStore.getFonts();
 })
@@ -150,7 +159,7 @@ onMounted(async () => {
 }
 
 .layout-content-center-show {
-  width: calc(100%);
+  width: calc(100% - 260px);
 
   .center-header {
     // border-left: 1px solid $borderColor;