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

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

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;
 }