feat(marketingEdit): 新增模板加载功能并优化画布显示逻辑

- 添加 hasLoadedTpl 状态避免重复加载模板
- 在 mounted 钩子中根据路由参数自动加载模板
- 实现 loadTemplate 方法用于初始化模板数据
- 模板数据包含预览图、画布配置及尺寸信息
- 更新样式控制非激活状态下隐藏 canvas 元素
- 优化 isEmpty 判断逻辑注释提升可读性

frontend/src/views/components/marketingEdit/index.vue

@@ -53,6 +53,7 @@ export default {
       scale: 1,
       sceneTplImg:"",//生成的时候记录下来，用户重做
 
+      hasLoadedTpl:false,
 
       canvasForm:{
         type:'add',
@@ -85,6 +86,10 @@ export default {
     }
   },
   mounted() {
+    console.log(this.$route?.params?.id);
+    if(this.$route?.params?.id){
+      this.loadTemplate()
+    }
     this.init()
   },
   activated(){
@@ -92,17 +97,47 @@ export default {
   deactivated() {
   },
   methods: {
+    loadTemplate(){
+      if(this.hasLoadedTpl) return
+      if(!this.$route?.params?.id) return
+      const tpl  = [
+        {
+          index: 0,
+          preview: "https://ossimg.valimart.net/uploads/20251202/176466246730872.png",
+          canvas_json: "{\"version\":\"5.2.1\",\"objects\":[{\"type\":\"image\",\"version\":\"5.2.1\",\"originX\":\"left\",\"originY\":\"top\",\"left\":125.14,\"top\":128.86,\"width\":960,\"height\":1280,\"fill\":\"rgb(0,0,0)\",\"stroke\":null,\"strokeWidth\":0,\"strokeDashArray\":null,\"strokeLineCap\":\"butt\",\"strokeDashOffset\":0,\"strokeLineJoin\":\"miter\",\"strokeUniform\":false,\"strokeMiterLimit\":4,\"scaleX\":0.17,\"scaleY\":0.17,\"angle\":0,\"flipX\":false,\"flipY\":false,\"opacity\":1,\"shadow\":null,\"visible\":true,\"backgroundColor\":\"\",\"fillRule\":\"nonzero\",\"paintFirst\":\"fill\",\"globalCompositeOperation\":\"source-over\",\"skewX\":0,\"skewY\":0,\"erasable\":false,\"cropX\":0,\"cropY\":0,\"name\":\"image\",\"sort\":10,\"id\":\"1764662402644_1793_1\",\"selectable\":true,\"data-key\":\"俯视\",\"data-value\":\"https://ossimg.valimart.net/uploads/vali_ai/20250613/174979820315694.png\",\"src\":\"https://ossimg.valimart.net/uploads/vali_ai/20250613/174979820315694.png\",\"crossOrigin\":\"anonymous\",\"filters\":[]}],\"background\":\"#fff\"}",
+          width: 800,
+          height: 500,
+          bg_color: "#fff",
+          name: "画布_95086100",
+          tpl_url: "",
+          image_path: ""
+        },
+        {
+          index: 1,
+          preview: "https://ossimg.valimart.net/uploads/20251202/176466246756126.png",
+          canvas_json: "{\"version\":\"5.2.1\",\"objects\":[{\"type\":\"image\",\"version\":\"5.2.1\",\"originX\":\"left\",\"originY\":\"top\",\"left\":476,\"top\":16,\"width\":960,\"height\":1280,\"fill\":\"rgb(0,0,0)\",\"stroke\":null,\"strokeWidth\":0,\"strokeDashArray\":null,\"strokeLineCap\":\"butt\",\"strokeDashOffset\":0,\"strokeLineJoin\":\"miter\",\"strokeUniform\":false,\"strokeMiterLimit\":4,\"scaleX\":0.13,\"scaleY\":0.13,\"angle\":0,\"flipX\":false,\"flipY\":false,\"opacity\":1,\"shadow\":null,\"visible\":true,\"backgroundColor\":\"\",\"fillRule\":\"nonzero\",\"paintFirst\":\"fill\",\"globalCompositeOperation\":\"source-over\",\"skewX\":0,\"skewY\":0,\"erasable\":false,\"cropX\":0,\"cropY\":0,\"name\":\"image\",\"sort\":10,\"id\":\"1764662460778_4314_2\",\"selectable\":true,\"data-key\":\"侧视\",\"data-value\":\"https://ossimg.valimart.net/uploads/vali_ai/20250613/174979823853439.png\",\"src\":\"https://ossimg.valimart.net/uploads/vali_ai/20250613/174979823853439.png\",\"crossOrigin\":\"anonymous\",\"filters\":[]}],\"background\":\"#fff\"}",
+          width: 800,
+          height: 200,
+          bg_color: "#fff",
+          name: "画布_07492100",
+          tpl_url: "",
+          image_path: ""
+        }
+      ]
+      this.data.splice(0, this.data.length, ...tpl)
+      this.$emit('update:index', 0)
+      this.hasLoadedTpl = true
+    },
     // 初始化
     async init() {
 
 
-      //不存在数据
+      //不存在数据（新建场景）
       if(this.isEmpty ){
         this.addCanvas()
         return;
       }
 
-
 /*
       //画布下不存在模板OSS地址
       if(!this.this_canvas){
@@ -440,6 +475,14 @@ export default {
   position: relative;
   overflow: hidden;
   transition: background 0.2s, box-shadow 0.2s, border 0.2s;
+  &.inactive {
+    ::v-deep {
+
+      canvas {
+        display: none;
+      }
+    }
+  }
 }
 
 .canvas-stack_body.active {