From 0aae85e94d2dee9c70a68853625d53e0d41c5397 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com>
Date: Mon, 19 Jan 2026 14:25:44 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=BB=BB=E5=8A=A1?=
 =?UTF-8?q?=E9=98=9F=E5=88=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/component/Canvas/OverallCanvas/index.vue | 175 ++++++++++---------
 src/component/Canvas/utils/TaskQueue.js      |  28 +++
 2 files changed, 117 insertions(+), 86 deletions(-)
 create mode 100644 src/component/Canvas/utils/TaskQueue.js

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

From 31c2ca4e8b4231b3db568a00f1bf2fb1a81e05a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com>
Date: Mon, 19 Jan 2026 14:44:18 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E5=B9=B3=E9=93=BA=E7=94=BB=E5=B8=83?=
 =?UTF-8?q?=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/component/Canvas/OverallCanvas/demo.vue  | 54 +-------------------
 src/component/Canvas/OverallCanvas/index.vue | 31 ++++++-----
 2 files changed, 20 insertions(+), 65 deletions(-)

diff --git a/src/component/Canvas/OverallCanvas/demo.vue b/src/component/Canvas/OverallCanvas/demo.vue
index 9e5fd8e7..ac5429ae 100644
--- a/src/component/Canvas/OverallCanvas/demo.vue
+++ b/src/component/Canvas/OverallCanvas/demo.vue
@@ -137,7 +137,6 @@
 		<button @click="onAdd">添加</button>
 		<div class="box">
 			<pingpu
-				:list="list"
 				ref="pingpuRef"
 				:width="600"
 				:height="900"
@@ -161,58 +160,7 @@
 	const convertDotNotationToBracket = (str) =>
 		str.replace(/(?:^|\.)(\d+)(?=\.|$)/g, "[#$1]").replace(/\[#/g, "[");
 	const activeToken = ref("1");
-	const list = ref([
-		{
-			token: "1",
-			ifSingle: false,
-			level2Type: "Pattern",
-			designType: "Library",
-			path: "/src/assets/images/canvas/yinhua1.jpg",
-			location: [0, 0],
-			scale: [1, 1],
-			angle: 0,
-			name: "Print1",
-			priority: 1,
-			object: {
-				top: 0,
-				left: 0,
-				scaleX: 1,
-				scaleY: 1,
-				opacity: 1,
-				angle: 0,
-				flipX: false,
-				flipY: false,
-				blendMode: "multiply",
-				gapX: 10,
-				gapY: 20,
-			},
-		},
-		{
-			token: "2",
-			ifSingle: false,
-			level2Type: "Pattern",
-			designType: "Library",
-			path: "/src/assets/images/canvas/yinhua1.jpg",
-			location: [0, 0],
-			scale: [2, 2],
-			angle: -45,
-			name: "Print2",
-			priority: 1,
-			object: {
-				top: 450,
-				left: 300,
-				scaleX: 0.5,
-				scaleY: 0.5,
-				opacity: 1,
-				angle: 0,
-				flipX: false,
-				flipY: false,
-				blendMode: "multiply",
-				gapX: 0,
-				gapY: 0,
-			},
-		},
-	]);
+	const list = ref([]);
 	// 深拷贝
 	const deepCopy = (obj) => JSON.parse(JSON.stringify(obj));
 	const oldList = ref(deepCopy(list.value));
diff --git a/src/component/Canvas/OverallCanvas/index.vue b/src/component/Canvas/OverallCanvas/index.vue
index 2d7b0363..0a6fad00 100644
--- a/src/component/Canvas/OverallCanvas/index.vue
+++ b/src/component/Canvas/OverallCanvas/index.vue
@@ -35,10 +35,11 @@
 	};
 	const emit = defineEmits(["change-canvas", "init-canvas"]);
 	const props = defineProps({
-		list: { type: Array, default: () => [] },
+		// list: { type: Array, default: () => [] },
 		width: { type: Number, required: true },
 		height: { type: Number, required: true },
 	});
+	const list = ref([]);
 	const el = ref(null);
 	const canvasRef = ref(null);
 	const observer = ref(null);
@@ -46,7 +47,7 @@
 	onMounted(async () => {
 		initCanvas();
 		// taskQueue.addTask(async () => await setCanvasData());
-		emit("init-canvas", props.list);
+		emit("init-canvas", list.value);
 		let throttleDelay = 100;
 		let trailingTimeout = null;
 		observer.value = new ResizeObserver((entries) => {
@@ -168,9 +169,9 @@
 	};
 	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];
+		console.log("OverallCanvas: setCanvasData", list.value);
+		for (let i = 0; i < list.value.length; i++) {
+			let item = list.value[i];
 			await addObject(item);
 		}
 		canvas.renderAll();
@@ -225,12 +226,12 @@
 		});
 		return pattern;
 	};
-	const updataList = async (list) => {
-		const cd = async (list) => {
-			console.log("OverallCanvas: updataList", list);
+	const updataList = async (list_) => {
+		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];
+			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;
@@ -277,7 +278,7 @@
 						case KEYS.FILL_GAPX:
 						case KEYS.FILL_GAPY:
 							let pattern = await setFill(
-								props.list.find((v) => v.token === item.token)
+								list.value.find((v) => v.token === item.token)
 							);
 							object.set("fill", pattern);
 							break;
@@ -287,20 +288,26 @@
 				} else if (item.action === ACTIONS.SORT) {
 					let tokens = item.tokens;
 					canvas.clear();
+					const list_ = [];
 					for (let j = 0; j < tokens.length; j++) {
+						let item_ = list.value.find((v) => v.token === tokens[j]);
+						if (item_) list_.push(item_);
 						let object = objects.find((o) => o.token === tokens[j]);
 						if (object) canvas.add(object);
 					}
+					list.value = list_;
 					canvas.renderAll();
 				} else if (item.action === ACTIONS.DELETE) {
+					list.value = list.value.filter((v) => v.token !== item.token);
 					if (object) canvas.remove(object);
 				} else if (item.action === ACTIONS.ADD) {
+					list.value.push(item.data);
 					await addObject(item.data);
 				}
 			}
 			canvas.renderAll();
 		};
-		taskQueue.addTask(async () => await cd(list));
+		taskQueue.addTask(async () => await cd(list_));
 	};
 	defineExpose({
 		updataList,