fix: 选中图片右键时，增加红蓝通道对调功能、复制到粘贴板的功能

Author: 阿岳

app/src/components/context-menu-content.tsx

@@ -84,6 +84,8 @@ import {
   Equal,
   Save,
 } from "lucide-react";
+import { Image as TauriImage } from "@tauri-apps/api/image";
+import { writeImage } from "@tauri-apps/plugin-clipboard-manager";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import tailwindColors from "tailwindcss/colors";
@@ -1025,67 +1027,137 @@ export default function MyContextMenuContent() {
 
       {/* 存在选中 ImageNode */}
       {p.stageManager.getSelectedEntities().filter((it) => it instanceof ImageNode).length > 0 && (
-        <Item
-          onClick={async () => {
-            // 检查是否是草稿模式
-            if (p.isDraft) {
-              toast.error("请先保存项目后再导出图片");
-              return;
-            }
+        <>
+          <Item
+            onClick={async () => {
+              // 获取所有选中的 ImageNode
+              const selectedImageNodes = p.stageManager
+                .getSelectedEntities()
+                .filter((it) => it instanceof ImageNode) as ImageNode[];
 
-            // 获取所有选中的 ImageNode
-            const selectedImageNodes = p.stageManager
-              .getSelectedEntities()
-              .filter((it) => it instanceof ImageNode) as ImageNode[];
+              if (selectedImageNodes.length === 0) {
+                toast.error("请选中图片节点");
+                return;
+              }
 
-            if (selectedImageNodes.length === 0) {
-              toast.error("请选中图片节点");
-              return;
-            }
+              // 复制第一张图片到剪贴板（如果有多张图片，只复制第一张）
+              const imageNode = selectedImageNodes[0];
+              const blob = p.attachments.get(imageNode.attachmentId);
+              if (blob) {
+                try {
+                  const arrayBuffer = await blob.arrayBuffer();
+                  const tauriImage = await TauriImage.fromBytes(new Uint8Array(arrayBuffer));
+                  await writeImage(tauriImage);
+                  if (selectedImageNodes.length === 1) {
+                    toast.success("已将选中的图片复制到系统剪贴板");
+                  } else {
+                    toast.success(`已将第1张图片复制到系统剪贴板（共${selectedImageNodes.length}张）`);
+                  }
+                } catch (error) {
+                  console.error("复制图片到剪贴板失败:", error);
+                  toast.error("复制图片到剪贴板失败");
+                }
+              } else {
+                toast.error("无法获取图片数据");
+              }
+            }}
+          >
+            <Clipboard />
+            复制图片到系统剪贴板
+          </Item>
+          <Item
+            onClick={() => {
+              // 获取所有选中的 ImageNode
+              const selectedImageNodes = p.stageManager
+                .getSelectedEntities()
+                .filter((it) => it instanceof ImageNode) as ImageNode[];
 
-            // 根据图片数量决定提示信息
-            const isBatch = selectedImageNodes.length > 1;
-            const promptMessage = isBatch
-              ? `请输入文件名（不含扩展名，将为 ${selectedImageNodes.length} 张图片添加数字后缀）`
-              : `请输入文件名（不含扩展名，将自动添加扩展名）`;
+              if (selectedImageNodes.length === 0) {
+                toast.error("请选中图片节点");
+                return;
+              }
 
-            // 弹出输入框 - 只弹出一次
-            const fileName = await Dialog.input("另存图片", promptMessage, {
-              placeholder: "image",
-            });
+              // 对每张图片进行红蓝通道对调
+              for (const imageNode of selectedImageNodes) {
+                imageNode.swapRedBlueChannels();
+              }
 
-            if (!fileName) {
-              return; // 用户取消
-            }
+              // 记录历史步骤
+              p.historyManager.recordStep();
 
-            // 验证文件名是否合法
-            const invalidChars = /[/\\:*?"<>|]/;
-            if (invalidChars.test(fileName)) {
-              toast.error('文件名包含非法字符：/ \\ : * ? " < > |');
-              return;
-            }
+              // 显示提示信息
+              if (selectedImageNodes.length === 1) {
+                toast.success("已对调图片的红蓝通道");
+              } else {
+                toast.success(`已对调 ${selectedImageNodes.length} 张图片的红蓝通道`);
+              }
+            }}
+          >
+            <ArrowLeftRight />
+            对调图片红蓝通道
+          </Item>
+          <Item
+            onClick={async () => {
+              // 检查是否是草稿模式
+              if (p.isDraft) {
+                toast.error("请先保存项目后再导出图片");
+                return;
+              }
+
+              // 获取所有选中的 ImageNode
+              const selectedImageNodes = p.stageManager
+                .getSelectedEntities()
+                .filter((it) => it instanceof ImageNode) as ImageNode[];
+
+              if (selectedImageNodes.length === 0) {
+                toast.error("请选中图片节点");
+                return;
+              }
 
-            // 调用工具函数导出图片
-            const { successCount, failedCount } = await exportImagesToProjectDirectory(
-              selectedImageNodes,
-              p.uri.fsPath,
-              p.attachments,
-              fileName,
-            );
+              // 根据图片数量决定提示信息
+              const isBatch = selectedImageNodes.length > 1;
+              const promptMessage = isBatch
+                ? `请输入文件名（不含扩展名，将为 ${selectedImageNodes.length} 张图片添加数字后缀）`
+                : `请输入文件名（不含扩展名，将自动添加扩展名）`;
 
-            // 显示结果提示
-            if (successCount > 0 && failedCount === 0) {
-              toast.success(`成功保存 ${successCount} 张图片`);
-            } else if (successCount > 0 && failedCount > 0) {
-              toast.warning(`成功保存 ${successCount} 张图片，${failedCount} 张失败`);
-            } else {
-              toast.error(`保存失败，请检查文件名或文件权限`);
-            }
-          }}
-        >
-          <Save />
-          另存图片到当前prg所在目录下
-        </Item>
+              // 弹出输入框 - 只弹出一次
+              const fileName = await Dialog.input("另存图片", promptMessage, {
+                placeholder: "image",
+              });
+
+              if (!fileName) {
+                return; // 用户取消
+              }
+
+              // 验证文件名是否合法
+              const invalidChars = /[/\\:*?"<>|]/;
+              if (invalidChars.test(fileName)) {
+                toast.error('文件名包含非法字符：/ \\ : * ? " < > |');
+                return;
+              }
+
+              // 调用工具函数导出图片
+              const { successCount, failedCount } = await exportImagesToProjectDirectory(
+                selectedImageNodes,
+                p.uri.fsPath,
+                p.attachments,
+                fileName,
+              );
+
+              // 显示结果提示
+              if (successCount > 0 && failedCount === 0) {
+                toast.success(`成功保存 ${successCount} 张图片`);
+              } else if (successCount > 0 && failedCount > 0) {
+                toast.warning(`成功保存 ${successCount} 张图片，${failedCount} 张失败`);
+              } else {
+                toast.error(`保存失败，请检查文件名或文件权限`);
+              }
+            }}
+          >
+            <Save />
+            另存图片到当前prg所在目录下
+          </Item>
+        </>
       )}
     </Content>
   );

app/src/core/stage/stageObject/entity/ImageNode.tsx

@@ -173,6 +173,59 @@ export class ImageNode extends ConnectableEntity implements ResizeAble {
     });
   }
 
+  /**
+   * 交换图片的红蓝通道
+   * 将图片的红色和蓝色通道对调，绿色和alpha通道保持不变
+   * 并将处理后的图片数据保存到project.attachments中，实现持久化存储
+   */
+  swapRedBlueChannels() {
+    if (!this.bitmap) return;
+
+    // 创建临时canvas
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    // 设置canvas尺寸
+    canvas.width = this.bitmap.width;
+    canvas.height = this.bitmap.height;
+
+    // 绘制原图
+    ctx.drawImage(this.bitmap, 0, 0);
+
+    // 获取图像数据
+    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    const data = imageData.data;
+
+    // 交换红色和蓝色通道
+    for (let i = 0; i < data.length; i += 4) {
+      const r = data[i]; // R
+      const b = data[i + 2]; // B
+      data[i] = b; // R = B
+      data[i + 2] = r; // B = R
+      // data[i + 1] 保持不变（绿色通道）
+      // data[i + 3] 保持不变（alpha通道）
+    }
+
+    // 将修改后的图像数据绘制回canvas
+    ctx.putImageData(imageData, 0, 0);
+
+    // 创建新的ImageBitmap并保存到attachments中
+    createImageBitmap(imageData).then((newBitmap) => {
+      this.bitmap = newBitmap;
+
+      // 将canvas转换为Blob并保存到project.attachments中
+      canvas.toBlob((blob) => {
+        if (blob) {
+          // 创建新的attachmentId并替换原有数据
+          const newAttachmentId = this.project.addAttachment(blob);
+          // 更新当前节点的attachmentId
+          this.attachmentId = newAttachmentId;
+        }
+      }, "image/png");
+    });
+  }
+
   /**
    * 处理拖拽缩放逻辑
    * @param delta 拖拽距离向量