fix(editor): 解决fabric.Canvas实例响应式问题

- 在marketingEdit组件中引入markRaw防止Canvas实例被代理
- 在PictureEditor组件中引入markRaw防止Canvas实例被代理
- 使用markRaw包裹new fabric.Canvas调用以避免Vue响应式警告
- 确保Canvas实例在组件销毁时能正确清理资源

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

@@ -6,6 +6,7 @@ import actionsMixins from '@/views/components/PictureEditor/mixin/actions/index'
 import layerMixins from '@/views/components/PictureEditor/mixin/layer/index'
 import colorMixins from '@/views/components/PictureEditor/mixin/color/index'
 import { uploadBaseImg } from '@/apis/other'
+import {markRaw} from "vue";
 export default {
   name: 'PictureEditor',
   mixins: [ viewMixins,actionsMixins,layerMixins,colorMixins],
@@ -39,14 +40,14 @@ export default {
 
       await this.viewInit()
       await  this.$nextTick()
-      this.fcanvas = new fabric.Canvas('canvas', {
+      this.fcanvas = markRaw(new fabric.Canvas('canvas', {
         backgroundColor:this.canvas.color,
         containerClass:"fcanvas",
         // 元素对象被选中时保持在当前z轴，不会跳到最顶层
         preserveObjectStacking:true,
         width: this.canvas.width,
         height: this.canvas.height
-      })
+      }))
       //保留最初的状态
       this.updateCanvasState()
       this.minimapInit()

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

@@ -9,6 +9,7 @@ import layerMixins from '@/views/components/PictureEditor/mixin/layer/index'
 import colorMixins from '@/views/components/PictureEditor/mixin/color/index'
 import editMixins from '@/views/components/PictureEditor/mixin/edit/index'
 import { uploadBaseImg } from '@/apis/other'
+import {markRaw} from "vue";
 
 const FIXED_CANVAS_WIDTH = 800
 export default {
@@ -204,14 +205,14 @@ export default {
       const canvasEl = document.getElementById(canvasId)
       if (!canvasEl) return
       this.destroyCanvasInstance()
-      this.fcanvas = new fabric.Canvas(canvasId, {
+      this.fcanvas = markRaw(new fabric.Canvas(canvasId, {
         backgroundColor: this.this_canvas.bg_color,
         containerClass:"fcanvas",
         // 元素对象被选中时保持在当前z轴，不会跳到最顶层
         preserveObjectStacking:true,
         width: this.this_canvas.width,
         height: this.this_canvas.height
-      })
+      }))
       this.fcanvasId = canvasId
       const hydrateCanvas = () => {
         this.updateCanvasState()