feat(marketingEdit): 添加画布加载状态显示

- 添加 loading 状态变量控制画布加载显示
- 在画布初始化过程中显示加载遮罩
- 实现加载完成时自动隐藏遮罩功能
- 添加 canvas 容器样式和加载动画样式
- 集成 Element Plus Loading 图标组件
- 优化用户体验，避免画布加载时的空白状态

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

@@ -62,6 +62,7 @@ export default {
   data() {
     return {
       disabled:false,
+      loading: false, // 画布加载状态
 
       fcanvas: null,
       fcanvasId: '',
@@ -211,11 +212,13 @@ export default {
     },
     // 初始化
     async init() {
-
+      // 设置加载状态
+      this.loading = true
 
       //不存在数据（新建场景）
       if(this.isEmpty ){
         this.addCanvas()
+        this.loading = false
         return;
       }
 
@@ -227,6 +230,7 @@ export default {
           this.$emit('update:index', redirectIndex)
         }
         // 模特/场景图不需要 fabric，保持占位
+        this.loading = false
         return
       }
 
@@ -254,6 +258,7 @@ export default {
         // this.minimapInit()
         this.actionInit()
         this.layerInit();
+        this.loading = false // 加载完成
         this.$nextTick(() => {
           this.$emit('init')
         })
@@ -1270,6 +1275,44 @@ export default {
 
 }
 
+/* Canvas loading 遮罩 */
+.canvas-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.canvas-loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.canvas-loading-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  color: #666;
+}
+
+.canvas-loading-content .el-icon {
+  font-size: 24px;
+  color: #409eff;
+}
+
+.loading-text {
+  font-size: 14px;
+  font-weight: 500;
+}
+
 
 </style>
 

frontend/src/views/components/marketingEdit/tpl/view.js

@@ -1,6 +1,7 @@
 
 import xpc from '@/views/components/PictureEditor/images/xpc.svg'
 import shanyibu from '@/views/components/PictureEditor/images/shanyibu.png'
+import { Loading } from '@element-plus/icons-vue'
 
 export default function() {
   return `
@@ -61,14 +62,25 @@ export default function() {
                 <img v-if="item.preview" :src="item.preview" alt="">
                 <img v-else-if="item.image_path" :src="item.image_path" alt="">
                 <img v-else-if="item.tpl_url" :src="item.tpl_url" alt="">
-                <span v-else>点击“切换到此画布”开始编辑</span>
+                <span v-else>点击"切换到此画布"开始编辑</span>
               </div>
               <template  v-else >
-                <canvas
-                  :id="'marketing-canvas-' + idx"
-                  :width="item.width"
-                  :height="item.height"
-                />
+                <div class="canvas-container" :style="{ position: 'relative' }">
+                  <canvas
+                    :id="'marketing-canvas-' + idx"
+                    :width="item.width"
+                    :height="item.height"
+                  />
+                  <!-- Loading遮罩 -->
+                  <div v-if="loading" class="canvas-loading-overlay">
+                    <div class="canvas-loading-content">
+                      <el-icon class="is-loading">
+                        <Loading />
+                      </el-icon>
+                      <div class="loading-text">正在加载画布...</div>
+                    </div>
+                  </div>
+                </div>
               </template>
             </template>
           </div>