feat: 1.固定图层缩略图（完成）

2.工具栏新增插槽（完成）
3.loadJSON的元素顺序回发生错误

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

@@ -18,6 +18,10 @@ const props = defineProps({
   activeLayerId: String,
   activeElementId: String,
   thumbnailManager: Object, // 添加缩略图管理器属性
+  showFixedLayer: {
+    type: Boolean,
+    default: false, // 默认不显示固定层
+  },
 });
 
 const emit = defineEmits([
@@ -74,10 +78,11 @@ const sortableRootLayers = computed(() => {
 // 计算属性：不可排序的固定图层（背景层和固定层）
 const fixedLayers = computed(() => {
   if (!layers) return [];
-  return layers.value.filter(
-    // (layer) => !layer.parentId && (layer.isFixed || layer.isBackground)
-    (layer) => !layer.parentId && layer.isBackground // 只显示背景层，不显示固定层 - 固定层用来做红绿图模式  和  放模特
-  );
+  return layers.value.filter((layer) => {
+    if (props.showFixedLayer)
+      return !layer.parentId && (layer.isFixed || layer.isBackground);
+    return !layer.parentId && layer.isBackground; // 只显示背景层，不显示固定层 - 固定层用来做红绿图模式  和  放模特
+  });
 });
 
 // 计算属性：获取当前选中的图层

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

@@ -1,6 +1,7 @@
 <script setup>
 import { ref, inject, computed, onMounted, onUnmounted } from "vue";
 import { OperationType } from "../utils/layerHelper";
+import ToolButton from "../../ExistsImageList/ToolButton.vue";
 
 const emit = defineEmits([
   "tool-selected",
@@ -291,32 +292,30 @@ onUnmounted(() => {
   // 移除键盘事件监听
   window.removeEventListener("keydown", handleKeyDown);
 });
+
+// 处理工具按钮点击
+const handleToolClick = (tool) => {
+  tool.action();
+};
 </script>
 
 <template>
   <div class="tools-sidebar">
-    <div
+    <ToolButton
       v-for="tool in toolsList"
       :key="tool.id"
-      :class="[
-        'tool-btn',
-        tool.class,
-        {
-          active:
-            tool.id === activeTool ||
-            tool.id === activeTool.toLowerCase() ||
-            tool?.activeList?.includes(activeTool),
-          disabled:
-            (tool.id === 'undo' && !canUndo) ||
-            (tool.id === 'redo' && !canRedo),
-        },
-      ]"
-      :style="tool.style"
-      @click="tool.action"
-    >
-      <SvgIcon :name="tool.icon.name" :size="tool.icon.size"></SvgIcon>
-      <div class="tool-tooltip">{{ tool.title }}</div>
-    </div>
+      :tool="tool"
+      :active-tool="activeTool"
+      :can-undo="canUndo"
+      :can-redo="canRedo"
+      @click="handleToolClick"
+    />
+
+    <!-- 自定义工具栏按钮插槽 -->
+    <slot
+      name="customTools"
+      :tool-button-props="{ activeTool, canUndo, canRedo }"
+    />
   </div>
 </template>
 
@@ -333,67 +332,6 @@ onUnmounted(() => {
   height: 100%;
 }
 
-.tool-btn {
-  position: relative;
-  width: 36px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 16px;
-  color: #333;
-  transition: all 0.2s ease;
-}
-
-.tool-btn:hover {
-  background-color: #f0f0f0;
-}
-
-.tool-btn:hover .tool-tooltip {
-  display: block;
-}
-
-.tool-btn.active {
-  background-color: #e6f7ff;
-  color: #1890ff;
-}
-
-.tool-btn.disabled {
-  cursor: not-allowed;
-  color: #e0e0e0;
-}
-
-.tool-tooltip {
-  display: none;
-  position: absolute;
-  left: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-  background-color: rgba(0, 0, 0, 0.7);
-  color: white;
-  padding: 4px 8px;
-  border-radius: 4px;
-  margin-left: 8px;
-  white-space: nowrap;
-  font-size: 12px;
-  z-index: 10;
-}
-
-.tool-tooltip:before {
-  content: "";
-  position: absolute;
-  top: 50%;
-  right: 100%;
-  margin-top: -5px;
-  border-width: 5px;
-  border-style: solid;
-  border-color: transparent rgba(0, 0, 0, 0.7) transparent transparent;
-}
-
 .red-green-mode {
   background-color: #fff4f4;
 }