fix: 修复多个已知问题

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

@@ -332,6 +332,7 @@ async function prepareForLiquify(targetObj) {
         targetObject: targetObject.value,
         targetLayerId: targetLayerId.value,
         originalData: originalImageData.value,
+        liquifyManager: props.liquifyManager,
         layerManager: props.layerManager,
       });
 
@@ -483,6 +484,7 @@ function showPanel(event) {
       targetLayerId: targetLayerId.value,
       originalData: originalImageData.value,
       layerManager: props.layerManager,
+      liquifyManager: props.liquifyManager,
     });
   }
 
@@ -739,10 +741,59 @@ function removeCanvasListeners() {
   _handleMouseUp = null;
 }
 
+/**
+ * 获取当前图像的实际状态数据
+ * @param {Object} targetObject Fabric图像对象
+ * @returns {Promise<ImageData|null>} 当前图像数据或null
+ */
+async function getCurrentImageData(targetObject) {
+  if (!targetObject || !targetObject._element) {
+    return null;
+  }
+
+  try {
+    // 创建临时canvas来获取当前图像状态
+    const tempCanvas = document.createElement("canvas");
+    const element = targetObject._element;
+
+    // 设置canvas尺寸为原始图像尺寸
+    if (originalImageData.value) {
+      tempCanvas.width = originalImageData.value.width;
+      tempCanvas.height = originalImageData.value.height;
+    } else {
+      tempCanvas.width = element.naturalWidth || element.width;
+      tempCanvas.height = element.naturalHeight || element.height;
+    }
+    const tempCtx = tempCanvas.getContext("2d");
+
+    // 绘制当前图像到临时canvas
+    tempCtx.drawImage(element, 0, 0, tempCanvas.width, tempCanvas.height);
+
+    // 获取ImageData
+    const imageData = tempCtx.getImageData(
+      0,
+      0,
+      tempCanvas.width,
+      tempCanvas.height
+    );
+
+    console.log(
+      "✅ 成功获取当前图像状态，尺寸:",
+      imageData.width,
+      "x",
+      imageData.height
+    );
+    return imageData;
+  } catch (error) {
+    console.warn("获取当前图像数据失败:", error);
+    return null;
+  }
+}
+
 /**
  * 鼠标按下事件处理
  */
-function handleMouseDown(event) {
+async function handleMouseDown(event) {
   if (!isEditing.value || !visible.value || !props.liquifyManager) return;
 
   isDrawing.value = true;
@@ -760,29 +811,43 @@ function handleMouseDown(event) {
   lastX.value = pointer.x;
   lastY.value = pointer.y;
 
-  // === 修复：记录初始图像数据 ===
+  // === 修复：记录当前图像状态（而不是原始状态）===
   try {
     const currentTarget = getCurrentTargetObject();
-    if (currentTarget && originalImageData.value) {
-      console.log("🎯 记录液化操作初始状态，对象ID:", targetObjectId.value);
+    if (currentTarget) {
+      console.log("🎯 记录液化操作当前状态，对象ID:", targetObjectId.value);
 
-      // 记录初始图像数据（深拷贝）
-      const originalData = originalImageData.value;
-      initialImageData.value = new ImageData(
-        new Uint8ClampedArray(originalData.data),
-        originalData.width,
-        originalData.height
-      );
+      // 获取当前图像的实际状态（而不是原始状态）
+      const currentImageData = await getCurrentImageData(currentTarget);
+      if (currentImageData) {
+        // 记录当前图像数据（深拷贝）
+        initialImageData.value = new ImageData(
+          new Uint8ClampedArray(currentImageData.data),
+          currentImageData.width,
+          currentImageData.height
+        );
+
+        console.log(
+          "✅ 当前图像状态已记录，尺寸:",
+          initialImageData.value.width,
+          "x",
+          initialImageData.value.height
+        );
+      } else {
+        // 如果无法获取当前状态，使用原始状态作为备用
+        if (originalImageData.value) {
+          const originalData = originalImageData.value;
+          initialImageData.value = new ImageData(
+            new Uint8ClampedArray(originalData.data),
+            originalData.width,
+            originalData.height
+          );
+          console.log("⚠️ 使用原始状态作为备用初始状态");
+        }
+      }
 
       // 备用：也保存序列化状态
       initialObjectState.value = serializeFabricObject(currentTarget);
-
-      console.log(
-        "✅ 初始图像数据已记录，尺寸:",
-        initialImageData.value.width,
-        "x",
-        initialImageData.value.height
-      );
     }
   } catch (error) {
     console.error("❌ 记录初始状态失败:", error);
@@ -965,6 +1030,7 @@ async function handleMouseUp() {
           currentLiquifyCommand.value = createLiquifyStateCommand({
             canvas: props.canvas,
             layerManager: props.layerManager,
+            liquifyManager: props.liquifyManager,
             targetObject: currentTarget,
             targetLayerId: targetLayerId.value,
             targetObjectId: targetObjectId.value,
@@ -1646,7 +1712,7 @@ function stopPressTimer() {
 /* 平板适配：最多6列 */
 @media screen and (max-width: 768px) {
   .liquify-modes {
-    grid-template-columns: repeat(6, 1fr);
+    grid-template-columns: repeat(3, 1fr);
     gap: 3px;
   }
 
@@ -1663,7 +1729,7 @@ function stopPressTimer() {
 /* 手机适配：最多4列 */
 @media screen and (max-width: 480px) {
   .liquify-modes {
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(3, 1fr);
     gap: 2px;
   }