diff --git a/src/component/Canvas/OverallCanvas/index.vue b/src/component/Canvas/OverallCanvas/index.vue
index b6461491..2d7b0363 100644
--- a/src/component/Canvas/OverallCanvas/index.vue
+++ b/src/component/Canvas/OverallCanvas/index.vue
@@ -3,8 +3,11 @@
 </template>
 
 <script setup>
+	import TaskQueue from "../utils/TaskQueue.js";
 	import { fabric } from "fabric-with-all";
-	import { ref, watch, onMounted } from "vue";
+	import { ref, watch, onMounted, nextTick } from "vue";
+	// 任务队列
+	const taskQueue = new TaskQueue();
 	const KEYS = {
 		FILL_X: "location[0]",
 		FILL_Y: "location[1]",
@@ -42,35 +45,25 @@
 	var canvas = null;
 	onMounted(async () => {
 		initCanvas();
-		await setCanvasData();
-		let throttleTimeout = null;
-		let lastRunTime = 0;
+		// taskQueue.addTask(async () => await setCanvasData());
+		emit("init-canvas", props.list);
+		let throttleDelay = 100;
 		let trailingTimeout = null;
 		observer.value = new ResizeObserver((entries) => {
-			const now = Date.now();
-			const throttleDelay = 100;
-			if (!throttleTimeout) {
-				updateCanvasSize();
-				lastRunTime = now;
-				throttleTimeout = setTimeout(() => {
-					throttleTimeout = null;
-				}, throttleDelay);
-			} else {
-				clearTimeout(trailingTimeout);
-				trailingTimeout = setTimeout(() => {
-					updateCanvasSize();
-					lastRunTime = Date.now();
-				}, throttleDelay);
-			}
+			clearTimeout(trailingTimeout);
+			trailingTimeout = setTimeout(() => {
+				console.log("OverallCanvas: resize");
+				taskQueue.addTask(async () => await updateCanvasSize());
+			}, throttleDelay);
 		});
 		observer.value.observe(el.value);
-		emit("init-canvas", props.list);
 	});
 	onBeforeUnmount(() => {
 		observer.value.disconnect();
 		unbindEvent();
 	});
 	const initCanvas = () => {
+		console.log("OverallCanvas: initCanvas");
 		canvas = new fabric.Canvas(canvasRef.value, {
 			selection: false,
 			preserveObjectStacking: true,
@@ -80,6 +73,7 @@
 		bindEvent();
 	};
 	const updateCanvasSize = async () => {
+		console.log("OverallCanvas: updateCanvasSize");
 		canvas.setWidth(el.value.offsetWidth);
 		canvas.setHeight(el.value.offsetHeight);
 		await setCanvasData();
@@ -98,7 +92,7 @@
 	};
 	// 处理对象修改事件
 	const onObjectModified = (e) => {
-		console.log(e);
+		console.log("OverallCanvas: onObjectModified", e);
 		const object = e.target;
 		const action = e.action;
 		const list = [];
@@ -174,6 +168,7 @@
 	};
 	const setCanvasData = async () => {
 		canvas.clear();
+		console.log("OverallCanvas: setCanvasData", props.list);
 		for (let i = 0; i < props.list.length; i++) {
 			let item = props.list[i];
 			await addObject(item);
@@ -194,7 +189,6 @@
 			left: item.object.left / (props.width / canvas.width),
 			onDelete: (v) => onDeleteItem(v),
 		});
-		console.log("==========", props)
 		canvas.add(rect);
 	};
 	const setFill = async (item) => {
@@ -232,72 +226,81 @@
 		return pattern;
 	};
 	const updataList = async (list) => {
-		console.log(list);
-		const objects = canvas.getObjects();
-		for (let i = 0; i < list.length; i++) {
-			let item = list[i];
-			let object = objects.find((o) => o.token === item.token);
-			if (item.action === ACTIONS.UPDATE) {
-				if (!object) continue;
-				let value = item.value;
-				switch (item.key) {
-					case KEYS.O_TOP:
-						object.set("top", value / (props.height / canvas.height));
-						break;
-					case KEYS.O_LEFT:
-						object.set("left", value / (props.width / canvas.width));
-						break;
-					case KEYS.O_OPACITY:
-						object.set("opacity", value);
-						break;
-					case KEYS.O_SCALE_X:
-						object.set("scaleX", value);
-						break;
-					case KEYS.O_SCALE_Y:
-						object.set("scaleY", value);
-						break;
-					case KEYS.O_ANGLE:
-						object.set("angle", value);
-						break;
-					case KEYS.O_FLIPX:
-						object.set("flipX", value);
-						break;
-					case KEYS.O_FLIPY:
-						object.set("flipY", value);
-						break;
-					case KEYS.O_BLENDMODE:
-						object.set("blendMode", value);
-						break;
-					case KEYS.FILL_X:
-					case KEYS.FILL_Y:
-					case KEYS.FILL_ANGLE:
-					case KEYS.FILL_SCALEX:
-					case KEYS.FILL_SCALEY:
-					case KEYS.FILL_GAPX:
-					case KEYS.FILL_GAPY:
-						let pattern = await setFill(
-							props.list.find((v) => v.token === item.token)
-						);
-						object.set("fill", pattern);
-						break;
+		const cd = async (list) => {
+			console.log("OverallCanvas: updataList", list);
+			const objects = canvas.getObjects();
+			for (let i = 0; i < list.length; i++) {
+				let item = list[i];
+				let object = objects.find((o) => o.token === item.token);
+				if (item.action === ACTIONS.UPDATE) {
+					if (!object) continue;
+					let value = item.value;
+					switch (item.key) {
+						case KEYS.O_TOP:
+							object.set(
+								"top",
+								value / (props.height / canvas.height)
+							);
+							break;
+						case KEYS.O_LEFT:
+							object.set(
+								"left",
+								value / (props.width / canvas.width)
+							);
+							break;
+						case KEYS.O_OPACITY:
+							object.set("opacity", value);
+							break;
+						case KEYS.O_SCALE_X:
+							object.set("scaleX", value);
+							break;
+						case KEYS.O_SCALE_Y:
+							object.set("scaleY", value);
+							break;
+						case KEYS.O_ANGLE:
+							object.set("angle", value);
+							break;
+						case KEYS.O_FLIPX:
+							object.set("flipX", value);
+							break;
+						case KEYS.O_FLIPY:
+							object.set("flipY", value);
+							break;
+						case KEYS.O_BLENDMODE:
+							object.set("blendMode", value);
+							break;
+						case KEYS.FILL_X:
+						case KEYS.FILL_Y:
+						case KEYS.FILL_ANGLE:
+						case KEYS.FILL_SCALEX:
+						case KEYS.FILL_SCALEY:
+						case KEYS.FILL_GAPX:
+						case KEYS.FILL_GAPY:
+							let pattern = await setFill(
+								props.list.find((v) => v.token === item.token)
+							);
+							object.set("fill", pattern);
+							break;
+					}
+				} else if (item.action === ACTIONS.SELECT) {
+					if (object) canvas.setActiveObject(object);
+				} else if (item.action === ACTIONS.SORT) {
+					let tokens = item.tokens;
+					canvas.clear();
+					for (let j = 0; j < tokens.length; j++) {
+						let object = objects.find((o) => o.token === tokens[j]);
+						if (object) canvas.add(object);
+					}
+					canvas.renderAll();
+				} else if (item.action === ACTIONS.DELETE) {
+					if (object) canvas.remove(object);
+				} else if (item.action === ACTIONS.ADD) {
+					await addObject(item.data);
 				}
-			} else if (item.action === ACTIONS.SELECT) {
-				if (object) canvas.setActiveObject(object);
-			} else if (item.action === ACTIONS.SORT) {
-				let tokens = item.tokens;
-				canvas.clear();
-				for (let j = 0; j < tokens.length; j++) {
-					let object = objects.find((o) => o.token === tokens[j]);
-					if (object) canvas.add(object);
-				}
-				canvas.renderAll();
-			} else if (item.action === ACTIONS.DELETE) {
-				if (object) canvas.remove(object);
-			} else if (item.action === ACTIONS.ADD) {
-				await addObject(item.data);
 			}
-		}
-		canvas.renderAll();
+			canvas.renderAll();
+		};
+		taskQueue.addTask(async () => await cd(list));
 	};
 	defineExpose({
 		updataList,
diff --git a/src/component/Canvas/utils/TaskQueue.js b/src/component/Canvas/utils/TaskQueue.js
new file mode 100644
index 00000000..f7c83a5a
--- /dev/null
+++ b/src/component/Canvas/utils/TaskQueue.js
@@ -0,0 +1,28 @@
+export default class TaskQueue {
+	constructor() {
+		this.tasks = [];
+		this.running = false;
+	}
+	// 添加任务
+	addTask(task) {
+		this.tasks.push(task);
+		// 执行任务
+		this.executeTasks();
+	}
+	// 执行任务
+	async executeTasks() {
+		if (this.running) {
+			return;
+		}
+		this.running = true;
+		for (const task of this.tasks) {
+			await task();
+		}
+		this.running = false;
+		this.clearTasks();
+	}
+	// 清空任务队列
+	clearTasks() {
+		this.tasks = [];
+	}
+}
\ No newline at end of file