aida_front/src/component/Canvas/CanvasEditor/index.vue

<script setup>
	import {
		ref,
		onMounted,
		onBeforeUnmount,
		defineAsyncComponent,
		shallowRef,
		provide,
		defineExpose,
		nextTick,
		watchEffect
	} from "vue"
	import { CanvasManager } from "./managers/CanvasManager"
	import { LayerManager } from "./managers/LayerManager"
	import { CommandManager } from "./managers/command/CommandManager"
	import { KeyboardManager } from "./managers/events/KeyboardManager.js"
	import CanvasConfig from "./config/canvasConfig.js"
	import { LiquifyManager } from "./managers/liquify/LiquifyManager"
	import { SelectionManager } from "./managers/selection/SelectionManager"
	import { PartManager } from "./managers/PartManager"
	import { RedGreenModeManager } from "./managers/RedGreenModeManager"
	import texturePresetManager from "./managers/brushes/TexturePresetManager"
	import { BrushStore } from "./store/BrushStore"
	import cuowuImg from "@/assets/images/homePage/cuowu.svg"
	import { Https } from "@/tool/https"
	import SelectImages from "@/component/common/SelectImages.vue"
	import CropImage from "./components/CropImage.vue"
	import { UrlToFile } from "@/tool/util"

	// import { MinimapManager } from "./managers/minimap/MinimapManager";

	// 导入封装的组件
	import ToolsSidebar from "./components/ToolsSidebar.vue"
	import HeaderMenu from "./components/HeaderMenu.vue"
	import LayersPanel from "./components/LayersPanel/LayersPanel.vue"
	import BrushControlPanel from "./components/BrushControlPanel.vue"
	import TextEditorPanel from "./components/TextEditorPanel.vue" // 引入文本编辑面板
	import LiquifyPanel from "./components/LiquifyPanel.vue" // 引入液化编辑面板
	import PalletPanel from "./components/PalletPanel/index.vue"
	import SelectMenuPanel from "./components/SelectMenuPanel/index.vue" // 引入选择工具菜单组件
	import SelectionPanel from "./components/SelectionPanel.vue" // 引入选区面板
	import PartSelectorPanel from "./components/PartSelectorPanel.vue" // 引入部件选取面板
	import { LayerType, OperationType } from "./utils/layerHelper.js"
	import { ToolManager } from "./managers/ToolManager.js"
	import { fabric } from "fabric-with-all"
	import {
		uploadImageAndCreateLayer,
		loadImageUrlToLayer,
		loadImage,
		resizeImage
	} from "./utils/imageHelper.js"
	import { optimizeCanvasRendering } from "./utils/helper"
	// import MinimapPanel from "./components/MinimapPanel.vue";
	import { useI18n } from "vue-i18n"
	const { t } = useI18n()
	const KeyboardShortcutHelp = defineAsyncComponent(() =>
		import("./components/KeyboardShortcutHelp.vue")
	)

	const emit = defineEmits([
		"trigger-red-green-mouseup", // 红绿图模式鼠标抬起事件
		"changeCanvas", // 画布变更事件
		"canvasInit", // 画布初始化事件
		"canvas-load-json-success", // 画布加载JSON成功事件
		"trigger-library", // 触发打开Library选择图片事件
		"before-unmount-export-extra-info" // 组件卸载前导出额外信息事件
	])

	const props = defineProps({
		title: {
			type: String,
			default: "" // 默认空
		},
		canvasJSON: {
			type: [Object, String],
			default: "" // 默认空
		},
		config: {
			type: Object,
			default: () => CanvasConfig // 默认配置
		},
		isChangeCanvasSize: {
			type: Boolean,
			default: true // 是否允许修改画布大小
		},
		showLayersPanel: {
			type: Boolean,
			default: true // 是否显示图层面板
		},
		enabledRedGreenMode: {
			type: Boolean,
			default: false // 是否启用红绿图模式
		},
		clothingMinIOPath: {
			type: String,
			default: "" // 衣服底图URL-线稿miniIo地址（传入后启动部件选取功能）
		},
		clothingImageUrl: {
			type: String,
			default: "" // 衣服底图URL-线稿
		},
		clothingImageUrl2: {
			type: String,
			default: "" // 衣服底图URL-上色
		},
		redGreenImageUrl: {
			type: String,
			default: "" // 红绿图URL
		},
		clothingImageOpts: {
			type: Object,
			default: () => {
				return {
					scaleX: 1,
					scaleY: 1
				}
			}
		},
		isFixedErasable: {
			type: Boolean,
			default: false // 是否允许擦除固定图层
		},
		isBackgroundErasable: {
			type: Boolean,
			default: false // 是否允许擦除背景图层
		},
		isBackgroundChangeable: {
			type: Boolean,
			default: true // 是否允许修改背景图层
		},
		showFixedLayer: {
			type: Boolean,
			default: false // 是否显示固定图层
		},
		isGeneral: {
			// 从generalMiniCanvas来的
			type: Boolean,
			default: false
		},
		isEdit: {
			// 从design点击喜欢过的图片,再点击顶部的编辑图标
			type: Boolean,
			default: false
		},
		hideCanvas: {
			type: Boolean,
			default: false // 是否隐藏画布-隐藏关闭部分功能
		}
	})
	console.log("config", props.config)
	const loading = ref(true)
	const loading_ = ref(true)
	const loadingTimeout = ref(null)
	watch(
		() => loading.value,
		(newVal) => {
			clearTimeout(loadingTimeout.value)
			if (!newVal) {
				loadingTimeout.value = setTimeout(() => {
					loading_.value = false
				}, 300)
			} else {
				loading_.value = true
			}
		}
	)
	// 引用和状态
	const canvasRef = ref(null)
	const canvasContainerRef = shallowRef(null)
	const imageUploadRef = ref(null)
	const currentZoom = ref(100)
	const appContainerRef = ref(null)

	// 画布设置
	const canvasWidth = ref(props.config.width)
	const canvasHeight = ref(props.config.height)
	const canvasColor = ref(props.config.backgroundColor)
	// const layerWidth = ref(CanvasConfig.layerWidth);
	const brushSize = ref(CanvasConfig.brushSize) // 画笔大小
	const canvasManagerLoaded = ref(false) //  画布是否加载完成

	// 红绿图模式状态
	const isRedGreenMode = ref(false)

	const isShowLayerPanel = ref(false) // 是否显示图层面板

	provide("isShowLayerPanel", isShowLayerPanel) // 提供红绿图模式状态给子组件

	// 小地图设置
	// const minimapEnabled = ref(true);
	// const minimapManager = ref(null);

	// 图层和元素管理
	const layers = ref([])
	const activeLayerId = ref(null)
	const activeElementId = ref(null)
	const lastSelectLayerId = ref(null) // 最后选择的图层ID

	// 当前选择的工具
	const activeTool = ref(CanvasConfig.defaultTool) // 默认工具

	//监听画布元素宽度是否发生变化
	let observer = null
	let observerTime = null //加入防抖

	// 管理器实例
	let canvasManager = null
	let layerManager = null
	let commandManager = null
	let keyboardManager = null
	let toolManager = null
	let liquifyManager = null
	let selectionManager = null
	let partManager = null
	let redGreenModeManager = null

	// 快捷键帮助模态框状态
	const showShortcutHelp = ref(false)

	function toggleShortcutHelp() {
		showShortcutHelp.value = !showShortcutHelp.value
	}

	watch(
		() => props.hideCanvas,
		(newVal) => {
			console.log("==========是否隐藏画布", newVal)
			if (newVal) {
				keyboardManager?.removeEvents()
			} else {
				keyboardManager?.init()
			}
		}
	)

	// 工具选择处理
	function handleToolSelect(tool) {
		activeTool.value = tool
		// toolManager.setActiveTool(tool); // 更新工具管理器中的当前工具  普通模式，不可撤回操作
		toolManager.setToolWithCommand(tool, {
			undoable: props.enabledRedGreenMode ? false : true // 普通模式下工具选择不可撤销
		}) // 命令模式 可撤回操作
	}

	// 触发组件初始化事件
	function handleCanvasInit(isLoadJson = false) {
		loading.value = false
		emit("canvasInit", {
			isLoadJson: isLoadJson ?? !!props.canvasJSON, // 是否加载了JSON数据
			isRedGreenMode: isRedGreenMode.value,
			layers,
			activeLayerId,
			canvasManager,
			layerManager,
			commandManager,
			toolManager,
			keyboardManager,
			liquifyManager,
			selectionManager,
			partManager,
			redGreenModeManager
		})
	}

	function toggleMinimap(enabled) {
		// minimapEnabled.value = enabled;
		// if (minimapManager.value) {
		//   minimapManager.value.setVisibility(enabled);
		// }
	}

	// 初始化画布
	onMounted(async () => {
		// 设置BrushStore的全局引用，供BaseBrush使用
		if (typeof window !== "undefined") {
			window.BrushStore = BrushStore
		}

		// 如果启用了红绿图模式，设置画布大小为默认值
		if (props.enabledRedGreenMode) {
			canvasHeight.value = canvasContainerRef.value.clientWidth
			canvasWidth.value = canvasContainerRef.value.clientHeight
		}

		// 创建管理器实例
		canvasManager = new CanvasManager(canvasRef.value, {
			width: canvasContainerRef.value.clientWidth,
			height: canvasContainerRef.value.clientHeight,
			// backgroundColor: canvasColor.value,
			currentZoom,
			layers,
			lastSelectLayerId,
			canvasWidth,
			canvasHeight,
			canvasColor,
			enabledRedGreenMode: props.enabledRedGreenMode,
			isFixedErasable: props.isFixedErasable,
			props,
			emit
		})
		canvasManager.canvas.activeLayerId = activeLayerId
		canvasManager.activeLayerId = activeLayerId
		canvasManager.canvas.activeElementId = activeElementId
		canvasManager.canvas.loading = loading

		// 创建命令管理器
		commandManager = new CommandManager({
			canvas: canvasManager.canvas,
			autoSaveState: true
		})

		// 创建图层管理器
		layerManager = new LayerManager({
			canvas: canvasManager.canvas,
			canvasWidth: canvasWidth.value,
			canvasHeight: canvasHeight.value,
			backgroundColor: canvasColor,
			isRedGreenMode: props.enabledRedGreenMode,
			lastSelectLayerId,
			layers,
			activeLayerId,
			canvasManager, // 添加对 canvasManager 的引用
			commandManager, // 添加对命令管理器的引用
			t // 国际化函数
		})

		// commandManager.setLayerManager(layerManager); // 设置命令管理器需要访问的图层数据

		// 设置缩略图管理器需要访问的图层数据
		// canvasManager.layers = layers;

		// 创建工具管理器实例
		toolManager = new ToolManager({
			canvas: canvasManager.canvas, // fabric.js 画布实例
			commandManager, // 命令管理器实例，用于撤销/重做
			canvasManager, // 画布管理器实例
			layerManager,
			activeTool, // 响应式引用，存储当前选中的工具
			brushSize: brushSize.value, // 可选，初始画笔大小
			t // 国际化函数
		})

		// 初始化文本编辑功能
		toolManager.setupTextEditingEvents()

		toolManager.setFileUploadHandler(triggerImageUpload) // 设置快捷图片上传处理函数

		layerManager.setToolManager(toolManager) // 将工具管理器传递给图层管理器
		canvasManager.setToolManager(toolManager) // 将工具管理器传递给画布管理器
		canvasManager.setLayerManager(layerManager)
		canvasManager.setCommandManager(commandManager) // 将命令管理器传递给画布管理器

		// 初始化快捷键管理器
		keyboardManager = new KeyboardManager({
			canvas: canvasManager.canvas,
			commandManager,
			layerManager,
			canvasManager,
			toolManager,
			isRedGreenMode,
			pasteText: (text) => {
				//   console.log("粘贴的文本:", text);
				handleAddText(text)
			},
			pasteImage: (file) => {
				//   console.log("粘贴的图片:", file);
				uploadImageAndCreateLayer({
					file,
					layerManager,
					toolManager,
					canvas: canvasManager.canvas
				})
			}
		})

		// 绑定快捷键事件
		if (!props.hideCanvas) keyboardManager.init()
		// 绑定画布操作事件
		canvasManager.setupCanvasEvents(activeElementId, layerManager)
		canvasManager.setupCanvasInitEvent(handleCanvasInit) // 绑定画布初始化事件

		provide("canvasManager", canvasManager) // 提供给子组件使用
		provide("layerManager", layerManager) // 提供给子组件使用
		provide("commandManager", commandManager) // 提供给子组件使用
		provide("toolManager", toolManager) // 提供给子组件使用
		provide("keyboardManager", keyboardManager) // 提供给子组件使用
		provide("activeTool", activeTool) // 提供给子组件使用
		provide("liquifyManager", () => liquifyManager) // 提供液化管理器
		provide("texturePresetManager", texturePresetManager) // 提供纹理预设管理器
		provide("layers", layers) // 提供图层数据
		provide("lastSelectLayerId", lastSelectLayerId) // 提供最后选择的图层ID

		// 初始化网格设置
		// toggleGridVisibility(gridEnabled.value);

		// 初始化小地图
		// minimapManager.value = new MinimapManager(canvasManager.canvas);

		// 初始化液化管理器
		liquifyManager = new LiquifyManager({
			canvas: canvasManager.canvas,
			layerManager
		})
		// 将liquifyManager设置到canvasManager中，确保ToolManager能访问到它
		canvasManager.setLiquifyManager(liquifyManager)

		// 初始化选区管理器
		selectionManager = new SelectionManager({
			canvas: canvasManager.canvas,
			layerManager,
			props
		})
		canvasManager.setSelectionManager(selectionManager)

		// 初始化部件选择管理器
		partManager = new PartManager({
			canvas: canvasManager.canvas,
			layerManager,
			canvasManager,
			selectionManager,
			toolManager,
			commandManager,
			props
		})
		canvasManager.setPartManager(partManager)

		if (props.canvasJSON) {
			// 如果传入了初始JSON数据，加载到画布上
			if (typeof props.canvasJSON === "string") {
				try {
					await canvasManager.loadJSON(props.canvasJSON)
				} catch (error) {
					console.error("加载画布JSON失败:", error)
					// 初始化图层 - 确保创建背景层
					await layerManager.initializeLayers()
				}
			} else if (typeof props.canvasJSON === "object") {
				await canvasManager.loadJSON(JSON.stringify(props.canvasJSON))
			}
		} else {
			// 初始化图层 - 确保创建背景层
			await layerManager.initializeLayers()
		}

		if (props.enabledRedGreenMode && props.clothingImageUrl && props.redGreenImageUrl) {
			canvasManager.canvas.fill = "#fff" // 设置画布背景色为白色    // 初始化红绿图模式管理器
			redGreenModeManager = new RedGreenModeManager({
				canvas: canvasManager.canvas,
				canvasManager,
				layerManager,
				toolManager,
				commandManager,
				clothingImageOpts: props.clothingImageOpts
			})

			canvasManager.setRedGreenModeManager(redGreenModeManager)

			// 如果提供了图片URL，立即初始化红绿图模式
			if (props.clothingImageUrl && props.redGreenImageUrl) {
				try {
					await redGreenModeManager.initialize({
						clothingImageUrl: props.clothingImageUrl,
						redGreenImageUrl: props.redGreenImageUrl,
						onImageGenerated: (imageData) => {
							console.log("红绿图生成:", imageData)
							// 这里可以添加图片生成后的回调处理
							emit("trigger-red-green-mouseup", imageData)
						}
					})

					// 设置红绿图模式状态
					isRedGreenMode.value = true

					console.log("红绿图模式已自动启用")
				} catch (error) {
					console.error("红绿图模式初始化失败:", error)
				}
			}

			// 初始设置
			handleWindowResize() // 设置画布大小
		} else if (!isRedGreenMode.value && props.clothingImageUrl) {
			try {
				await canvasManager?.changeFixedImage?.(props.clothingImageUrl, {
					undoable: false, // 不可撤销操作
					...(props?.clothingImageOpts || {})
				})
			} catch (error) {
				console.error("更换底图失败:", error)
			}

			canvasManager?.centerBackgroundLayer?.(
				canvasManager.canvas.width,
				canvasManager.canvas.height
			)
		}

		// // 设置固定图层是否可擦除
		// canvasManager.setFixedLayerErasable({
		//   type: "isFixed",
		//   flag: !props.isFixedErasable, // 设置操作类型为可擦除
		// });
		// // 设置背景图层是否可擦除
		// canvasManager.setFixedLayerErasable({
		//   type: "isBackground",
		//   flag: !props.isBackgroundErasable, // 设置操作类型为可擦除
		// });

		canvasManagerLoaded.value = true

		// 添加删除按钮
		// if(!fabric.Object.prototype.controls.deleteControl)addRemoveBtn(removeLayer)
		addRemoveBtn(removeLayer)

		// 触发组件初始化事件
		nextTick(() => {
			// 确保所有依赖都已加载完成
			handleCanvasInit()
			emit("canvas-load-json-success")
			setTimeout(() => {
				// 初始状态下生成所有预览图
				canvasManager?.updateAllThumbnails?.()
			}, 500)
		})

		let trailingTimeout = null
		observer = new ResizeObserver((entries) => {
			clearTimeout(trailingTimeout)
			trailingTimeout = setTimeout(async () => {
				if (canvasManager.awaitCanvasRun) await canvasManager.awaitCanvasRun()
				handleWindowResize()
			}, 100)
		})
		observer.observe(canvasContainerRef.value)
		// 使用window的resize事件代替ResizeObserver
		// 只有当窗口大小变化时才更新画布尺寸
		//   window.addEventListener("resize", handleWindowResize);
		setInitZoom()
	})

	watchEffect(() => {
		// 设置固定图层是否可擦除
		if (canvasManagerLoaded.value) {
			canvasManager?.setFixedLayerErasable({
				type: "isFixed",
				flag: !props.isFixedErasable // 设置操作类型为可擦除
			})
			// 设置背景图层是否可擦除
			canvasManager?.setFixedLayerErasable({
				type: "isBackground",
				flag: !props.isBackgroundErasable // 设置操作类型为可擦除
			})
		}
	})

	onBeforeUnmount(async () => {
		observer.unobserve(canvasContainerRef.value)
		//   const extraInfo = await canvasManager.exportExtraInfo();
		//   emit("before-unmount-export-extra-info", extraInfo);

		console.log("onBeforeUnmount  组件卸载，清理资源...")
		canvasManager?.dispose?.()
		commandManager?.dispose?.()
		layerManager?.dispose?.()
		keyboardManager?.dispose?.()
		toolManager?.dispose?.()
		liquifyManager?.dispose?.()
		selectionManager?.dispose?.()
		partManager?.dispose?.()
		redGreenModeManager?.dispose?.()
		//   minimapManager?.dispose?.();
		canvasManager = null
		commandManager = null
		layerManager = null
		keyboardManager = null
		toolManager = null
		liquifyManager = null
		selectionManager = null
		partManager = null
		redGreenModeManager = null
		//   fabric.Object.prototype.controls.deleteControl = undefined;

		// 移除window resize事件监听
		//   window.removeEventListener("resize", handleWindowResize);
	})

	// 窗口大小变化处理函数
	async function handleWindowResize() {
		console.log("==========画布窗口大小变化==========")
		loading.value = true
		// 使用requestAnimationFrame来防止频繁更新
		await new Promise(requestAnimationFrame)
		if (!canvasManager) return
		await updateCanvasSize()
		// 确保显示的缩放信息是最新的
		await setInitZoom()
		await new Promise(requestAnimationFrame)
		await layerManager?.updateLayersObjectsInteractivity?.()
		loading.value = false
	}

	async function setInitZoom() {
		if (props.config.initZoom && !props.enabledRedGreenMode) {
			const width = canvasManager.width
			const height = canvasManager.height
			const cwidth = canvasWidth.value
			const cheight = canvasHeight.value
			let zoom = Math.min(1, width / cwidth, height / cheight)
			if (zoom < 1) zoom -= 0.05
			await setZoom(zoom) // 设置画布缩放
		} else {
			currentZoom.value = Math.round(canvasManager.canvas.getZoom() * 100)
		}
	}

	function resetZoom() {
		canvasManager.resetZoom()
	}
	async function setZoom(zoom) {
		await new Promise(requestAnimationFrame)
		if (!canvasManager) return
		const newZoom = Math.max(zoom, 0.1)
		// 使用画布中心作为缩放点
		const centerPoint = {
			x: canvasManager.canvas.width / 2,
			y: canvasManager.canvas.height / 2
		}
		canvasManager.animateZoom(centerPoint, newZoom)
	}

	function zoomIn() {
		if (!canvasManager) return

		const currentZoom = canvasManager.canvas.getZoom()
		const newZoom = Math.min(currentZoom * 1.2, 20) // 增加20%，最大20倍

		// 使用画布中心作为缩放点
		const centerPoint = {
			x: canvasManager.canvas.width / 2,
			y: canvasManager.canvas.height / 2
		}

		canvasManager.animateZoom(centerPoint, newZoom)
	}

	function zoomOut() {
		if (!canvasManager) return

		const currentZoom = canvasManager.canvas.getZoom()
		const newZoom = Math.max(currentZoom / 1.2, 0.1) // 减少20%，最小0.1倍

		// 使用画布中心作为缩放点
		const centerPoint = {
			x: canvasManager.canvas.width / 2,
			y: canvasManager.canvas.height / 2
		}
		canvasManager.animateZoom(centerPoint, newZoom)
	}

	async function updateCanvasSize() {
		if (canvasManager && canvasContainerRef.value) {
			const containerWidth = canvasContainerRef.value.clientWidth
			const containerHeight = canvasContainerRef.value.clientHeight

			// 普通模式下，更新画布大小，这会同时重置视图和居中所有元素
			await canvasManager.setCanvasSize(containerWidth, containerHeight)

			// // 如果启用了红绿图模式，使用 layerManager 的缩放方法
			// if (props.enabledRedGreenMode && layerManager) {
			//   layerManager.resizeCanvasWithScale(containerWidth, containerHeight, {
			//     undoable: false, // 可撤销操作
			//   });
			// } else {
			//   // 普通模式下，更新画布大小，这会同时重置视图和居中所有元素
			//   canvasManager.setCanvasSize(containerWidth, containerHeight);
			// }
		}
	}

	function updateCanvasColor() {
		canvasManager.setCanvasColor(canvasColor.value)
	}
	function createLayerName() {
		const layer = t("Canvas.layer")
		// 检查图层名称是否已存在
		let layerIndex = 1
		let layerName = `${layer + " " + layerIndex}`
		while (layerManager.getLayerByName(layerName)) {
			layerIndex++
			layerName = `${layer} ${layerIndex}`
		}
		return layerName
	}
	async function addLayer() {
		await layerManager.createLayer(createLayerName())
	}
	async function addTopLayer() {
		await layerManager.createLayer(createLayerName(), LayerType.EMPTY, {
			insertTop: true
		})
	}

	function setActiveLayer(layerId) {
		if (layerId !== activeLayerId.value) {
			layerManager.setActiveLayer(layerId, {
				undoable: true // 可撤销
			})

			const activeObject = canvasManager.canvas.getActiveObject()
			if (activeObject) {
				canvasManager.canvas.discardActiveObject()
				canvasManager.canvas.renderAll()
			}
		}
	}

	function toggleLayerVisibility(layerId) {
		layerManager.toggleLayerVisibility(layerId, activeElementId.value)
	}

	function moveLayerUp(layerId) {
		// 使用命令管理器执行移动图层命令，传递正确的方向参数
		layerManager.moveLayer(layerId, "up")
	}

	function moveLayerDown(layerId) {
		// 使用命令管理器执行移动图层命令，传递正确的方向参数
		layerManager.moveLayer(layerId, "down")
	}

	function addRemoveBtn(fun) {
		//添加删除按钮
		const deleteIcon = cuowuImg
		// 创建删除图片元素
		let deleteImg = document.createElement("img")
		deleteImg.src = deleteIcon
		function renderIcon(icon) {
			return function (ctx, left, top, styleOverride, fabricObject) {
				var size = this.cornerSize
				ctx.save()
				ctx.translate(left, top)
				ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle))
				ctx.drawImage(icon, -size / 3, -size / 3, size / 1.5, size / 1.5)
				ctx.restore()
			}
		}
		fabric.Object.prototype.controls.deleteControl = new fabric.Control({
			x: 0.5,
			y: -0.5,
			offsetY: -16,
			offsetX: 16,
			cursorStyle: "pointer",
			mouseUpHandler: deleteFun,
			render: renderIcon(deleteImg),
			cornerSize: 24
		})
	}

	function deleteFun(e, control) {
		const target = control.target
		if (target.onDelete) {
			target.onDelete(target)
		} else if (target.id) {
			removeLayer(layerManager?.activeLayerId?.value)
		}
	}

	function removeLayer(layerId) {
		if (layerId) layerManager.removeLayer(layerId)
	}

	function triggerImageUpload() {
		imageUploadRef.value.click()
	}

	function handleImageUpload(event) {
		const file = event.target.files[0]
		if (!file) return

		// 导入新的图片处理辅助函数
		// 显示加载中状态
		const loadingMessage = "正在处理图片..."
		console.log(loadingMessage)

		uploadImageAndCreateLayer({
			file,
			layerManager,
			toolManager,
			canvas: canvasManager.canvas
		})
			.then((layerId) => {
				console.log(`图片上传成功，已创建图层: ${layerId}`)

				// 清空文件输入，允许再次选择相同的文件
				if (imageUploadRef.value) {
					imageUploadRef.value.value = ""
				}
			})
			.catch((error) => {
				console.error("图片上传失败:", error)
			})
	}

	const selectImages = ref(null)
	const handleImageSelect = (data) => {
		UrlToFile(data.url, data.name).then((file) => {
			handleImageUpload({ target: { files: [file] } })
		})
	}
	function triggerLibrary() {
		// console.log('CanvasEditor', '打开收藏')
		if (props.isGeneral || props.isEdit) {
			selectImages.value.init()
		} else {
			emit("trigger-library")
		}
	}

	function handleAddText(text) {
		if (toolManager && canvasManager && canvasManager.canvas) {
			// 在画布中央创建文本
			const canvasCenter = canvasManager.canvas.getCenter()
			toolManager.createText(canvasCenter.left, canvasCenter.top, text)
		}
	}

	// 红绿图模式切换处理
	function toggleRedGreenMode() {
		if (!redGreenModeManager) return

		isRedGreenMode.value = !isRedGreenMode.value

		if (isRedGreenMode.value) {
			redGreenModeManager.enterRedGreenMode()
			// 切换到红色画笔工具
			handleToolSelect("redBrush")
		} else {
			redGreenModeManager.exitRedGreenMode()
			// 恢复到默认工具
			handleToolSelect(CanvasConfig.defaultTool)
		}
	}

	// 红绿图模式工具切换处理
	function handleRedGreenToolSelect(tool) {
		if (!isRedGreenMode.value) return

		switch (tool) {
			case "redBrush":
			case "greenBrush":
			case "eraser":
				handleToolSelect(tool)
				break
			default:
				// 在红绿图模式下，只允许特定工具
				break
		}
	}

	// 处理图层拖拽排序
	function handleLayersReorder(reorderData) {
		const { oldIndex, newIndex, layerId } = reorderData

		if (layerManager && layerManager.reorderLayers) {
			const success = layerManager.reorderLayers(oldIndex, newIndex, layerId)

			if (success) {
				console.log(`图层 ${layerId} 已从位置 ${oldIndex} 移动到位置 ${newIndex}`)

				// 更新画布渲染顺序
				if (canvasManager) {
					canvasManager.canvas.renderAll()
				}
			} else {
				console.warn("图层排序失败")
			}
		}
	}

	// 处理子图层拖拽排序
	function handleChildLayersReorder(reorderData) {
		const { parentId, oldIndex, newIndex, layerId } = reorderData

		if (layerManager && layerManager.reorderChildLayers) {
			const success = layerManager.reorderChildLayers(parentId, oldIndex, newIndex, layerId)

			if (success) {
				console.log(
					`子图层 ${layerId} 在父图层 ${parentId} 中已从位置 ${oldIndex} 移动到位置 ${newIndex}`
				)

				// 更新画布渲染顺序
				if (canvasManager) {
					canvasManager.canvas.renderAll()
				}
			} else {
				console.warn("子图层排序失败")
			}
		}
	}

	// 处理画布变更事件
	const changeCanvas = async (command) => {
		const commandData = {
			isChange: command.canUndo || command.canRedo, // 是否有可撤销或可重做的操作
			...command // 传递完整的命令数据
		}
		emit("changeCanvas", commandData)
		canvasManager.changeCanvas()
		if ((command.canUndo || command.canRedo) && props.enabledRedGreenMode) {
			setTimeout(async () => {
				try {
					const imageData = await canvasManager.exportImage({
						restoreOpacityInRedGreen: true, // 恢复红绿图模式下的透明度
						isCropByBg: true
					})
					emit("trigger-red-green-mouseup", imageData)
				} catch (error) {}
			}, 100)
		}
	}

	const cropImageRef = ref(null)
	const cropImage = (url) => {
		return cropImageRef.value.open(url)
	}
	provide("cropImage", cropImage) // 提供给子组件使用
	// 颜色选择器组件
	const palletPanelRef = ref(null)
	const palletPanel = (url) => {
		return palletPanelRef.value.open(url)
	}
	provide("palletPanel", palletPanel) // 提供给子组件使用

	// 处理画布容器的拖放事件
	const isDragOver = ref(false)
	const canvasDragover = (e) => {
		e.preventDefault()
		if (isRedGreenMode.value) return
		const types = e.dataTransfer.types
		isDragOver.value = types.includes("Files")
	}

	// 处理画布容器的拖离事件
	const canvasDragleave = (e) => {
		e.preventDefault()
		if (isRedGreenMode.value) return
		isDragOver.value = false
	}

	// 处理画布容器的拖放事件
	const canvasDragdrop = (e) => {
		e.preventDefault()
		if (isRedGreenMode.value) return
		isDragOver.value = false
		const files = e.dataTransfer.files
		for (const file of files) {
			if (file.type.startsWith("image/")) {
				handleImageUpload({ target: { files: [file] } })
			}
		}
	}

	// 提供外部ref实例方法
	defineExpose({
		layers, // 图层数据
		activeTool, // 当前选中的工具
		getCanvasManager: () => canvasManager, // 获取画布管理器实例
		// type : isBackground   isFixed    flag:  是否可擦除图层
		setFixedLayerErasable: ({ type = "isFixed", flag = false }) => {
			canvasManager?.setFixedLayerErasable({
				type,
				flag // 设置操作类型为可擦除
			})
		}, // 获取fabric画布实例
		canvasManagerLoaded,
		// 加载新数据到画布
		loadJSON: (json, calllBack) => {
			try {
				if (json) canvasManager?.loadJSON?.(json, calllBack)
				return true
			} catch (error) {
				console.error("加载画布JSON失败:", error)
				return false
			}
		},
		// 获取当前画布的JSON数据
		getJSON: () => {
			return canvasManager?.getJSON?.()
		},
		setLoading: (v) => (loading.value = v),
		// (更换底图，不可撤销，不可操作)
		changeFixedImage: (url, opts) => {
			return canvasManager?.changeFixedImage?.(url, {
				...(props?.clothingImageOpts || {}),
				...opts
			})
		},
		updateOtherLayers: async (otherData) => {
			loading.value = true
			await new Promise((resolve) => optimizeCanvasRendering(canvasManager.canvas, resolve))
			await canvasManager?.createOtherLayers?.(otherData)
			layerManager.activeLayerId.value = ""
			await layerManager?.sortLayers()
			await layerManager?.updateLayersObjectsInteractivity?.(true)
			canvasManager?.canvas?.renderAll()
			setTimeout(() => {
				canvasManager?.updateAllThumbnails()
			}, 500)
			loading.value = false
			return true
		},
		//图片url或者base64
		addImageToLayer: async (
			url,
			{ layerId, undoable, ...optios } = { layerId: null, undoable: true } // 可选参数 layerId  指定图层  将内容添加到指定图层   undoable 是否可撤销  false不可撤销  默认可撤销
		) => {
			if (!url) return Promise.reject(new Error("图片URL不能为空"))
			if (layerId) {
				const fabricImage = await loadImage(url)
				// 如果指定了图层ID，确保图层存在
				return await canvasManager?.addImageToLayer?.({
					targetLayerId: layerId,
					fabricImage,
					undoable, // 是否可撤销操作
					...optios
				})
			}

			// 未指定图层ID，默认添加到新的图层
			return await loadImageUrlToLayer(
				{
					imageUrl: url,
					layerManager,
					canvas: canvasManager.canvas,
					toolManager
				},
				{ undoable, ...optios }
			)
		},
		// 导出图片
		exportImage: async ({
			isContainBg = false, // 是否包含背景图层
			isContainFixed = false, // 是否包含固定图层
			isContainFixedOther = true, // 是否包含其他固定图层--颜色图层
			isPrintTrimsNoRepeat = true, // 是否包含印花图层的不平铺
			isPrintTrimsRepeat = true, // 是否包含印花图层的平铺
			isContainNormalLayer = true, // 是否包含普通图层
			isCropByBg = false, // 是否使用背景大小裁剪 // 如果为true，则导出时裁剪到背景图层大小
			layerId = "", // 导出具体图层ID
			layerIdArray = [], // 导出多个图层ID数组
			expPicType = "png", // 导出图片类型  JPG 或 PNG ,SVG
			isEnhanceImg, // 是否是增强图片
			width = 0, // 导出的图片宽度
			height = 0 // 导出的图片高度
		} = {}) => {
			loading.value = true
			canvasManager?.canvas?.discardActiveObject()
			var base64 = await canvasManager.exportImage({
				isContainBg,
				isContainFixed,
				isContainFixedOther,
				isPrintTrimsNoRepeat,
				isPrintTrimsRepeat,
				isContainNormalLayer,
				isCropByBg,
				layerId,
				layerIdArray,
				expPicType,
				isEnhanceImg
			})
			console.log("导出图片完成")
			if (width > 0 && height > 0) {
				base64 = await resizeImage(base64, width, height)
			}
			loading.value = false
			return base64
		},
		// 导出颜色图层
		exportColorLayer: () => {
			return canvasManager.exportColorLayer()
		},
		/**
		 * 移动图层位置
		 * @param {string} layerId 图层ID
		 * @param {string} direction 移动方向，'up'或'down'
		 * @returns {boolean} 是否移动成功
		 */
		moveLayer(layerId, direction) {
			if (!layerManager) return false
			const result = layerManager.moveLayer(layerId, direction)

			// 使用高级排序重建画布顺序
			if (result) {
				layerManager.forceRebuildCanvasOrder()
			}

			return result
		},

		/**
		 * 导出所有信息
		 * @returns {Object} 包含所有图层信息的对象
		 */
		exportExtraInfo: () => {
			return canvasManager.exportExtraInfo()
		},

		/**
		 * 拖拽排序图层
		 * @param {number} oldIndex 原索引
		 * @param {number} newIndex 新索引
		 * @param {string} layerId 图层ID
		 * @returns {boolean} 是否排序成功
		 */
		reorderLayers(oldIndex, newIndex, layerId) {
			if (!layerManager) return false

			// 优先使用高级排序功能
			if (layerManager.layerSort) {
				return layerManager.advancedReorderLayers(oldIndex, newIndex, layerId)
			} else {
				// 降级到基础排序
				return layerManager.reorderLayers(oldIndex, newIndex, layerId)
			}
		},

		/**
		 * 智能排序图层
		 * 根据对象类型和位置自动调整图层顺序
		 * @param {Array<string>} targetLayerIds 要排序的图层ID数组，null表示排序所有普通图层
		 * @returns {boolean} 是否排序成功
		 */
		smartSortLayers(targetLayerIds = null) {
			if (!layerManager) return false
			return layerManager.smartSortLayers(targetLayerIds)
		},

		/**
		 * 优化图层结构
		 * 清理空图层、重新排序等
		 * @returns {Object} 优化结果统计
		 */
		optimizeLayerStructure() {
			if (!layerManager) return { removedEmptyLayers: 0, mergedLayers: 0, reorderedLayers: 0 }
			return layerManager.optimizeLayerStructure()
		},

		/**
		 * 强制重建画布对象顺序
		 * 当图层顺序发生变化后调用此方法确保画布对象顺序正确
		 */
		forceRebuildCanvasOrder() {
			if (!layerManager) return
			layerManager.forceRebuildCanvasOrder()
		},

		/**
		 * 验证画布对象顺序是否正确
		 * @returns {boolean} 顺序是否正确
		 */
		validateObjectOrder() {
			if (!layerManager) return true
			return layerManager.validateObjectOrder()
		},

		/**
		 * 批量重新排序多个图层
		 * @param {Array} reorderOperations 排序操作数组 [{layerId, oldIndex, newIndex}]
		 * @returns {boolean} 是否全部操作成功
		 */
		batchReorderLayers(reorderOperations) {
			if (!layerManager) return false
			return layerManager.batchReorderLayers(reorderOperations)
		},
		/**
		 * 切换图层可见性
		 * @param {string} layerId 图层ID
		 * @returns {boolean} 更新后的可见性状态
		 */
		toggleLayerVisibility(layerId) {
			if (!layerManager) return false
			return layerManager.toggleLayerVisibility(layerId)
		},
		/**
		 * 获取图层可见性状态
		 * @param {string} layerId 图层ID
		 * @returns {boolean} 图层是否可见
		 */
		getLayerVisibility(layerId) {
			if (!layerManager) return false
			return layerManager.getLayerVisibility(layerId)
		}
	})
</script>

<template>
	<div
		ref="appContainerRef"
		class="app-container"
		@dragover.stop="canvasDragover"
		@dragleave.stop="canvasDragleave"
		@drop.stop="canvasDragdrop"
	>
		<!-- 头部菜单组件 -->
		<div class="header-menu">
			<HeaderMenu
				:title="props.title"
				v-if="canvasManagerLoaded"
				:activeTool="activeTool"
				:canvasWidth="canvasWidth"
				:canvasHeight="canvasHeight"
				:canvasColor="canvasColor"
				:brushSize="brushSize"
				:enabledRedGreenMode="enabledRedGreenMode"
				:showLayersPanel="showLayersPanel"
				:isChangeCanvasSize="props.isChangeCanvasSize"
				@update:canvasWidth="canvasWidth = $event"
				@update:canvasHeight="canvasHeight = $event"
				@update:canvasColor="canvasColor = $event"
				@update:brushSize="brushSize = $event"
				@canvas-size-change="updateCanvasSize"
				@canvas-color-change="updateCanvasColor"
			>
				<!-- 菜单扩展插槽 -->
				<template #existsImageList>
					<slot name="existsImageList" />
				</template>
			</HeaderMenu>
		</div>

		<div class="main-content">
			<!-- :minimapEnabled="minimapEnabled" -->
			<!-- 工具栏组件 -->
			<div style="min-width: 5.8rem">
				<ToolsSidebar
					v-if="canvasManagerLoaded"
					:activeTool="activeTool"
					:isRedGreenMode="isRedGreenMode"
					:clothingMinIOPath="props.clothingMinIOPath"
					@tool-selected="handleToolSelect"
					@red-green-tool-selected="handleRedGreenToolSelect"
					@toggle-red-green-mode="toggleRedGreenMode"
					@trigger-image-upload="triggerImageUpload"
					@add-text="handleAddText"
					@zoom-in="zoomIn"
					@zoom-out="zoomOut"
					@undo-redo-status-changed="changeCanvas"
					@trigger-library="triggerLibrary"
				>
					<template #customToolsTop="{ toolTopProps }">
						<slot name="customToolsTop" :tool-button-props="toolTopProps" />
					</template>
					<!-- 扩展插槽 -->
					<template #customToolsBottom="{ toolButtonProps }">
						<slot name="customToolsBottom" :tool-button-props="toolButtonProps" />
					</template>
				</ToolsSidebar>
			</div>

			<div
				class="canvas-container"
				:class="{ 'background-grid': !enabledRedGreenMode }"
				ref="canvasContainerRef"
			>
				<canvas ref="canvasRef"></canvas>
				<!-- 小地图组件 -->
				<!-- <MinimapPanel v-if="minimapEnabled" :minimapManager="minimapManager" /> -->

				<!-- 笔刷控制面板 -->
				<BrushControlPanel v-if="canvasManagerLoaded" :activeTool="activeTool" />

				<!-- 液化编辑面板 -->
				<LiquifyPanel
					v-if="canvasManagerLoaded && !enabledRedGreenMode"
					:canvas="canvasManager && canvasManager.canvas"
					:commandManager="commandManager"
					:liquifyManager="liquifyManager"
					:layerManager="layerManager"
					:activeTool="activeTool"
				/>

				<!-- 选区面板 -->
				<SelectionPanel
					v-if="canvasManagerLoaded && !enabledRedGreenMode"
					:canvas="canvasManager && canvasManager.canvas"
					:commandManager="commandManager"
					:selectionManager="selectionManager"
					:layerManager="layerManager"
					:toolManager="toolManager"
					:activeTool="activeTool"
				/>

				<!-- 选择工具菜单组件 -->
				<SelectMenuPanel
					v-if="canvasManagerLoaded && !enabledRedGreenMode"
					:canvas="canvasManager && canvasManager.canvas"
					:commandManager="commandManager"
					:selectionManager="selectionManager"
					:layerManager="layerManager"
					:canvasManager="canvasManager"
					:toolManager="toolManager"
					:activeTool="activeTool"
				/>

				<!-- 部件选取面板 -->
				<PartSelectorPanel
					v-if="canvasManagerLoaded && !enabledRedGreenMode"
					:canvas="canvasManager && canvasManager.canvas"
					:commandManager="commandManager"
					:selectionManager="selectionManager"
					:partManager="partManager"
					:layerManager="layerManager"
					:canvasManager="canvasManager"
					:toolManager="toolManager"
					:activeTool="activeTool"
				/>

				<!-- 文本编辑面板 -->
				<TextEditorPanel
					v-if="canvasManagerLoaded && !enabledRedGreenMode"
					:canvas="canvasManager && canvasManager.canvas"
					:commandManager="commandManager"
				/>

				<div class="zoom-info">
					{{ t("Canvas.Scale") }}: {{ currentZoom }}%
					<button class="reset-zoom" @click="resetZoom">
						{{ $t("Canvas.ResetLayer") }}
					</button>
					<button class="help-btn" @click="toggleShortcutHelp" :title="$t('Canvas.Help')">
						?
					</button>
				</div>
			</div>

			<!-- 图层面板组件 -->
			<!-- v-if="canvasManagerLoaded && !enabledRedGreenMode" -->

			<transition name="fade">
				<div
					class="layers-panel"
					v-if="isShowLayerPanel && !enabledRedGreenMode && showLayersPanel"
				>
					<LayersPanel
						v-if="canvasManagerLoaded"
						:activeLayerId="activeLayerId"
						:activeElementId="activeElementId"
						:thumbnailManager="canvasManager.thumbnailManager"
						:showFixedLayer="showFixedLayer"
						@add-layer="addLayer"
						@add-top-layer="addTopLayer"
						@set-active-layer="setActiveLayer"
						@toggle-layer-visibility="toggleLayerVisibility"
						@move-layer-up="moveLayerUp"
						@move-layer-down="moveLayerDown"
						@remove-layer="removeLayer"
						@layers-reorder="handleLayersReorder"
						@child-layers-reorder="handleChildLayersReorder"
					/>
				</div>
			</transition>
		</div>
		<!-- 裁剪图片组件 -->
		<CropImage ref="cropImageRef" />
		<!-- 颜色选择器组件 -->
		<PalletPanel ref="palletPanelRef" />

		<!-- <div class="footer-actions">
      <button class="share-btn">Share</button>
      <button class="export-btn">Export</button>
    </div> -->

		<!-- 快捷键帮助模态框 -->
		<div v-if="showShortcutHelp" class="modal-overlay" @click="showShortcutHelp = false">
			<div class="modal-content" @click.stop>
				<button class="close-modal" @click="showShortcutHelp = false">×</button>
				<KeyboardShortcutHelp />
			</div>
		</div>

		<input
			type="file"
			ref="imageUploadRef"
			accept="image/*"
			style="display: none"
			@change="handleImageUpload"
		/>
		<SelectImages
			ref="selectImages"
			full-data
			radio
			@select="handleImageSelect"
			:api="Https.httpUrls.queryLibraryPage"
			isLibrary
		/>
		<!-- 上传图片遮罩 -->
		<div v-show="isDragOver" class="dragover-tip"></div>
		<div class="loading" v-show="loading_"><a-spin :delay="0.5" /></div>
	</div>
</template>

<style scoped lang="less">
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	.app-container {
		display: flex;
		flex-direction: column;
		/* height: 100vh; */
		background-color: #ffffff;
		font-family: pingfang_medium, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 100;
		& > .header-menu {
			height: 5.2rem;
			overflow: hidden;
			display: flex;
			align-items: center;
			padding: 0 2rem;
			border-bottom: 1px solid #e0e0e0;
			background-color: #ffffff;
		}
		> .dragover-tip {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.5);
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 1.6rem;
			z-index: 9999;
			pointer-events: none;
		}
	}

	.main-content {
		display: flex;
		flex: 1;
		overflow: hidden;
		position: relative;
	}

	.canvas-container {
		flex: 1;
		position: relative;
		/* overflow: auto; */
		/* background-color: #f8f8f8; */
		:deep(.canvas-container) {
			position: absolute !important;
			filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
		}
	}

	.canvas-container canvas {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}
	.app-container > .loading {
		position: absolute;
		background-color: #fff;
	}

	.canvas-container {
		--offsetX: 50%;
		--offsetY: 50%;
		--size: 10px;
		--color: rgba(229, 229, 229, 0.5);
		background-image: -webkit-linear-gradient(90deg, var(--color) 1px, transparent 0),
			-webkit-linear-gradient(0, var(--color) 1px, transparent 0);
		background-image: linear-gradient(90deg, var(--color) 1px, transparent 0),
			linear-gradient(0, var(--color) 1px, transparent 0);
		background-color: #fafafa;
		background-position: var(--offsetX) var(--offsetY),
			calc(var(--size) + var(--offsetX)) calc(var(--size) + var(--offsetY));
		background-size: calc(var(--size) * 2) calc(var(--size) * 2);
	}

	.zoom-info {
		position: absolute;
		bottom: 1rem;
		right: 1rem;
		background: rgba(255, 255, 255, 0.7);
		padding: 0.5rem 1rem;
		border-radius: 0.4rem;
		font-size: 1.4rem;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		color: #666;
		display: flex;
	}

	.zoom-hint {
		position: absolute;
		top: 1rem;
		left: 1rem;
		background: rgba(255, 255, 255, 0.8);
		padding: 0.5rem 1rem;
		border-radius: 0.4rem;
		font-size: 1.2rem;
		color: #666;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.reset-zoom {
		margin-left: 1rem;
		cursor: pointer;
		padding: 0.2rem 0.5rem;
		font-size: 1.2rem;
		border: 1px solid #ddd;
		background: #f8f8f8;
		border-radius: 0.3rem;
	}

	.footer-actions {
		display: flex;
		justify-content: center;
		gap: 1rem;
		padding: 1.5rem;
		border-top: 1px solid #e0e0e0;
	}

	.share-btn,
	.export-btn {
		padding: 0.8rem 2rem;
		border: none;
		border-radius: 2rem;
		background-color: #000;
		color: #fff;
		font-size: 1.4rem;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.share-btn:hover,
	.export-btn:hover {
		opacity: 0.9;
	}

	button {
		font-size: 1.3rem;
		transition: all 0.2s;
	}

	button:hover {
		background: #e6e6e6;
	}

	.help-btn {
		margin-left: 1rem;
		cursor: pointer;
		width: 2.4rem;
		height: 2.4rem;
		border-radius: 50%;
		background-color: #f0f0f0;
		border: 1px solid #ddd;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.help-btn:hover {
		background-color: #e0e0e0;
	}

	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.modal-content {
		position: relative;
		width: 80%;
		max-width: 60rem;
		max-height: 90vh;
		overflow-y: auto;
		background-color: #fff;
		border-radius: 0.8rem;
		padding: 2rem;
	}

	.close-modal {
		position: absolute;
		top: 1rem;
		right: 1rem;
		width: 3rem;
		height: 3rem;
		border-radius: 50%;
		border: none;
		background-color: #f0f0f0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 2rem;
		cursor: pointer;
	}

	/* 网格控制面板样式 */
	.grid-controls {
		position: absolute;
		bottom: 11.5rem;
		right: 1rem;
		background: rgba(255, 255, 255, 0.9);
		padding: 1rem;
		border-radius: 0.4rem;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
		display: flex;
		flex-direction: column;
		gap: 0.8rem;
		z-index: 5;
	}

	.layers-panel {
		position: absolute;
		right: 2rem;
		top: 1rem;
		transition: width 0.3s ease;
		background: #fff;
		width: 35rem;
		max-height: 90%;
		display: flex;
		overflow: hidden;
		box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
		backdrop-filter: blur(2px); /* 添加模糊效果 */
		-webkit-backdrop-filter: blur(2px);
		background-color: rgba(255, 255, 255, 0.95); /* 改为白色背景 */
		z-index: 1000; /* 确保面板在最上层 */
		border: 1px solid #e0e0e0;
		/* 添加指向整个面板的倒三角 */
		&::before {
			content: "";
			position: absolute;
			top: -0.9rem;
			right: 0.6rem;
			width: 0;
			height: 0;
			border-left: 1rem solid transparent;
			border-right: 1rem solid transparent;
			border-bottom: 1rem solid rgba(255, 255, 255, 0.95); /* 与面板背景色一致 */
			filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.05));
			z-index: 1;
		}
	}
	/* 添加触控设备的样式调整 */
	@media (pointer: coarse) {
		.tool-btn {
			width: 4.4rem;
			height: 4.4rem;
			font-size: 1.8rem;
		}

		.layers-panel {
			width: 28rem;
		}

		.layer-item,
		.element-item {
			padding: 1.2rem 0.8rem;
		}

		.element-action-btn,
		.element-delete-btn {
			width: 2.4rem;
			height: 2.4rem;
		}

		.help-btn {
			width: 3.2rem;
			height: 3.2rem;
		}

		.modal-content {
			width: 90%;
			padding: 1.6rem;
		}

		.close-modal {
			width: 4rem;
			height: 4rem;
			font-size: 2.4rem;
		}
	}

	// 淡入淡出动画
	.fade-enter-active,
	.fade-leave-active {
		transition: opacity 0.3s, transform 0.3s;
	}
	.fade-enter-from,
	.fade-leave-to {
		opacity: 0;
		transform: translateY(1rem);
	}
</style>