fix: 修复多个已知问题

src/component/Canvas/CanvasEditor/commands/BackgroundCommands.js

@@ -1,3 +1,4 @@
+import { findObjectById } from "../utils/helper";
 import { Command } from "./Command";
 import { fabric } from "fabric-with-all";
 
@@ -129,14 +130,13 @@ export class UpdateBackgroundCommand extends Command {
     });
     this.canvas = options.canvas;
     this.layers = options.layers;
-    this.backgroundColor = options.backgroundColor;
+    this.backgroundColorValue = options.backgroundColorValue; // 使用.value获取实际值
+    this.backgroundColor = options.backgroundColor; //
     this.historyManager = options.historyManager;
 
     // 查找背景图层
     this.bgLayer = this.layers.value.find((layer) => layer.isBackground);
-    this.oldBackgroundColor = this.bgLayer
-      ? this.bgLayer.backgroundColor
-      : "#ffffff";
+    this.oldBackgroundColor = this.bgLayer.backgroundColor;
   }
 
   execute() {
@@ -150,10 +150,14 @@ export class UpdateBackgroundCommand extends Command {
 
     // 更新背景对象属性
     if (this.bgLayer.fabricObject) {
-      this.bgLayer.fabricObject.set("fill", this.backgroundColor);
+      const { object } = findObjectById(
+        this.canvas,
+        this.bgLayer.fabricObject.id
+      );
+      object.set("fill", this.backgroundColor);
       this.canvas.renderAll();
     }
-
+    this.backgroundColorValue.value = this.backgroundColor; // 设置背景颜色
     return true;
   }
 
@@ -167,10 +171,14 @@ export class UpdateBackgroundCommand extends Command {
 
     // 恢复背景对象属性
     if (this.bgLayer.fabricObject) {
-      this.bgLayer.fabricObject.set("fill", this.oldBackgroundColor);
+      const { object } = findObjectById(
+        this.canvas,
+        this.bgLayer.fabricObject.id
+      );
+      object.set("fill", this.oldBackgroundColor);
       this.canvas.renderAll();
     }
-
+    this.backgroundColorValue.value = this.oldBackgroundColor; // 恢复背景颜色
     return true;
   }