feat: 更新填充组图层背景命令，增强图层管理和颜色填充功能，优化图层选择和渲染逻辑

src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, inject, computed, onMounted, onUnmounted } from "vue";
-import { OperationType } from "../utils/layerHelper";
+import { findLayerRecursively, OperationType } from "../utils/layerHelper";
 import ToolButton from "../../ExistsImageList/ToolButton.vue";
 
 const emit = defineEmits([
@@ -29,11 +29,19 @@ const props = defineProps({
 });
 
 const commandManager = inject("commandManager");
+const layerManager = inject("layerManager"); // 图层管理器
+
+const lastSelectLayerId = inject("lastSelectLayerId"); // 上次选中的图层ID
 
 // 撤销/重做按钮状态
 const canUndo = ref(false);
 const canRedo = ref(false);
 
+// 颜色填充相关
+const currLayerId = ref(null); // 当前图层ID
+const fillColor = ref("#ffffff"); // 默认填充颜色
+const fillColorRef = ref(null);
+
 // 监听命令管理器状态变化
 commandManager.setChangeCallback((info) => {
   canUndo.value = info.canUndo;
@@ -80,6 +88,13 @@ const normalToolsList = ref([
     icon: { name: "CEraser", size: "22" },
     class: "eraser-btn",
   },
+  {
+    id: "fillColor",
+    title: "Fill Color",
+    action: () => fillColorRef.value.click(),
+    icon: { name: "CThemeColor", size: "22" },
+    class: "fill-color-btn",
+  },
   {
     id: OperationType.PAN,
     title: "Pan",
@@ -280,6 +295,11 @@ function handleKeyDown(event) {
   }
 }
 
+// 填充颜色选择器
+function fillColorChange() {
+  layerManager.fillLayerBackground(lastSelectLayerId.value, fillColor.value, true);
+}
+
 onMounted(() => {
   // 添加键盘事件监听
   window.addEventListener("keydown", handleKeyDown);
@@ -298,6 +318,15 @@ const handleToolClick = (tool) => {
 
 <template>
   <div class="tools-sidebar">
+    <input
+      class="fillColor-input"
+      v-model="fillColor"
+      ref="fillColorRef"
+      type="color"
+      @change="fillColorChange"
+      style="width: 0; height: 0; opacity: 0"
+    />
+
     <ToolButton
       v-for="tool in toolsList"
       :key="tool.id"