feat: 添加笔刷指示器功能，支持动态显示当前笔刷大小和颜色；更新图层可擦除状态逻辑

src/component/Canvas/CanvasEditor/index.vue

@@ -8,6 +8,7 @@ import {
   provide,
   defineExpose,
   nextTick,
+  watchEffect,
 } from "vue";
 import { CanvasManager } from "./managers/CanvasManager";
 import { LayerManager } from "./managers/LayerManager";
@@ -76,6 +77,14 @@ const props = defineProps({
       };
     },
   },
+  isFixedErasable: {
+    type: Boolean,
+    default: false, // 是否允许擦除固定图层
+  },
+  isBackgroundErasable: {
+    type: Boolean,
+    default: false, // 是否允许擦除背景图层
+  },
 });
 
 // 引用和状态
@@ -344,6 +353,32 @@ onMounted(async () => {
       canvasManager.canvas.height
     );
   }
+
+  // // 设置固定图层是否可擦除
+  // canvasManager.setFixedLayerErasable({
+  //   type: "isFixed",
+  //   flag: !props.isFixedErasable, // 设置操作类型为可擦除
+  // });
+  // // 设置背景图层是否可擦除
+  // canvasManager.setFixedLayerErasable({
+  //   type: "isBackground",
+  //   flag: !props.isBackgroundErasable, // 设置操作类型为可擦除
+  // });
+});
+
+watchEffect(() => {
+  // 设置固定图层是否可擦除
+  if (canvasManagerLoaded.value) {
+    canvasManager?.setFixedLayerErasable({
+      type: "isFixed",
+      flag: !props.isFixedErasable, // 设置操作类型为可擦除
+    });
+    // 设置背景图层是否可擦除
+    canvasManager?.setFixedLayerErasable({
+      type: "isBackground",
+      flag: !props.isBackgroundErasable, // 设置操作类型为可擦除
+    });
+  }
 });
 
 onBeforeUnmount(() => {
@@ -640,7 +675,15 @@ const changeCanvas = (command) => {
 
 // 提供外部ref实例方法
 defineExpose({
+  layers, // 图层数据
   getCanvasManager: () => canvasManager, // 获取画布管理器实例
+  // type : isBackground   isFixed    flag:  是否可擦除图层
+  setFixedLayerErasable: ({ type = "isFixed", flag = false }) => {
+    canvasManager?.setFixedLayerErasable({
+      type,
+      flag, // 设置操作类型为可擦除
+    });
+  }, // 获取fabric画布实例
   canvasManagerLoaded,
   // 加载新数据到画布
   loadJSON: (json, calllBack) => {