From 9d7f2ea08c8e32c0e92158dea7fa9d601cdbe077 Mon Sep 17 00:00:00 2001
From: Kiwi2333 <1329634286@qq.com>
Date: Mon, 17 Feb 2025 19:55:49 +0800
Subject: [PATCH] =?UTF-8?q?Update:=20=E7=B2=98=E8=B4=B4=E4=B8=8A=E4=BC=A0?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Chat/MsgForm.vue        | 62 +++++++++++++++++-------------
 components/Input/OssFileUpload.vue |  1 +
 components/menu/HeaderMenuBar.vue  |  1 +
 composables/hooks/useMsgForm.ts    | 43 ++++++++++++++-------
 4 files changed, 67 insertions(+), 40 deletions(-)

diff --git a/components/Chat/MsgForm.vue b/components/Chat/MsgForm.vue
index 8138a14..826909d 100644
--- a/components/Chat/MsgForm.vue
+++ b/components/Chat/MsgForm.vue
@@ -342,35 +342,11 @@ function onContextMenu(e: MouseEvent, key?: string, index: number = 0, type: Oss
       {
         customClass: "group",
         icon: "i-solar:trash-bin-minimalistic-outline group-btn-danger",
-        label: `删除${textMap[type]}`,
+        label: `撤销${textMap[type]}`,
         onClick: async () => {
           if (!key)
             return;
-          const filesMap: Record<OssFileType, (Ref<OssFile[]> | undefined)> = {
-            [OssFileType.IMAGE]: imgList,
-            [OssFileType.FILE]: fileList,
-            [OssFileType.VIDEO]: videoList,
-            [OssFileType.SOUND]: undefined,
-            [OssFileType.FONT]: undefined,
-          };
-          const item = filesMap?.[type]?.value.find(f => f.key === key);
-          if (item)
-            item.subscribe.unsubscribe();
-          const keys = [key, ...(item?.children || []).map(f => f.key)];
-          keys.forEach(k => k && deleteOssFile(k, user.getToken));
-          ElMessage.closeAll("error");
-          if (type === OssFileType.IMAGE) {
-            imgList.value.splice(
-              index,
-              1,
-            );
-            inputOssImgUploadRef?.value?.resetInput?.();
-          }
-          filesMap?.[type]?.value.splice(
-            index,
-            1,
-          );
-          inputOssFileUploadRef?.value?.resetInput?.();
+          removeOssFile(type, key, index);
         },
       },
     ],
@@ -378,6 +354,35 @@ function onContextMenu(e: MouseEvent, key?: string, index: number = 0, type: Oss
   ContextMenu.showContextMenu(opt);
 }
 
+function removeOssFile(type: OssFileType = OssFileType.IMAGE, key?: string, index: number = 0) {
+  console.log("removeOssFile", type, key, index);
+
+  const filesMap: Record<OssFileType, (Ref<OssFile[]> | undefined)> = {
+    [OssFileType.IMAGE]: imgList,
+    [OssFileType.FILE]: fileList,
+    [OssFileType.VIDEO]: videoList,
+    [OssFileType.SOUND]: undefined,
+    [OssFileType.FONT]: undefined,
+  };
+  const item = filesMap?.[type]?.value.find(f => f.key === key);
+  if (item && key)
+    item.subscribe.unsubscribe();
+  const keys = [key, ...(item?.children || []).map(f => f.key)];
+  keys.forEach(k => k && deleteOssFile(k, user.getToken));
+  ElMessage.closeAll("error");
+  inputOssFileUploadRef?.value?.resetInput?.();
+  inputOssImgUploadRef?.value?.resetInput?.();
+  inputOssVideoUploadRef?.value?.resetInput?.();
+  filesMap?.[type]?.value.splice(
+    index,
+    1,
+  );
+  if (filesMap?.[type]?.value?.length === 0) {
+    chat.msgForm.msgType = MessageType.TEXT; // 默认
+    chat.msgForm.body.url = undefined;
+  }
+}
+
 // 到底部并消费消息
 function setReadAndScrollBottom() {
   if (chat.theContactId) {
@@ -556,11 +561,14 @@ onUnmounted(() => {
       >
         <div
           v-for="(img, i) in imgList" :key="i" v-loading="img.status !== 'success'"
-          class="relative flex-row-c-c shadow-sm transition-shadow border-default card-default hover:shadow"
+          class="group relative flex-row-c-c shadow-sm transition-shadow border-default card-default hover:shadow"
           :element-loading-spinner="defaultLoadingIcon"
           element-loading-background="transparent"
           @contextmenu="onContextMenu($event, img.key, i, OssFileType.IMAGE)"
         >
+          <div title="撤销图片" class="absolute right-2 top-2 z-5 h-6 w-6 transition-opacity !rounded-full card-default-br group-hover-op-80 hover-op-100 sm:op-0" @click.stop="removeOssFile(OssFileType.IMAGE, img.key, i)">
+            <i i-solar:minus-circle-linear block h-full w-full />
+          </div>
           <CardElImage
             preview-teleported
             loading="lazy"
diff --git a/components/Input/OssFileUpload.vue b/components/Input/OssFileUpload.vue
index 9b8a083..a74dc0a 100644
--- a/components/Input/OssFileUpload.vue
+++ b/components/Input/OssFileUpload.vue
@@ -324,6 +324,7 @@ async function removeItem(t: OssFile) {
         flag = true;
       }
       else if (res.code === StatusCode.DELETE_NOEXIST_ERR) {
+        // ElMessage.closeAll("error");
         fileList.value.splice(
           fileList.value.findIndex(item => item.key === t.key),
           1,
diff --git a/components/menu/HeaderMenuBar.vue b/components/menu/HeaderMenuBar.vue
index 4c787c4..f74783e 100644
--- a/components/menu/HeaderMenuBar.vue
+++ b/components/menu/HeaderMenuBar.vue
@@ -86,6 +86,7 @@ async function toggleContactOpen() {
                   text
                   size="small"
                   :style="data.btnStyle"
+                  @click="data.handleWindow('alwaysOnTop')"
                 >
                   <i
                     :title="isTop ? '取消置顶' : '置顶'"
diff --git a/composables/hooks/useMsgForm.ts b/composables/hooks/useMsgForm.ts
index df96dc4..60a8e88 100644
--- a/composables/hooks/useMsgForm.ts
+++ b/composables/hooks/useMsgForm.ts
@@ -414,22 +414,39 @@ export function useFileUpload(refsDom: RefDoms = { img: "inputOssImgUploadRef",
     if (disabled?.value === true)
       return;
     // 判断粘贴上传
-    if (!e.clipboardData?.items?.length)
+    if (!e.clipboardData?.items?.length) {
       return;
+    }
     // 拿到粘贴板上的 image file 对象
-    const fileArr = Array.from(e.clipboardData.items);
-    if (fileArr.length > 1 || fileArr.length < 0) {
-      fileArr.length > 1 && ElMessage.warning("只支持单个文件上传！");
+    const fileArr = Array.from(e.clipboardData.items).filter(v => v.kind === "file");
+    if (!fileArr.length)
       return;
-    }
-    const img = fileArr.find(v => v.type.includes("image"))?.getAsFile();
-    img && uploadFile("image", img);
-    const file = fileArr.find(v => FILE_TYPE_ICON_MAP[v.type])?.getAsFile();
-    file && uploadFile("file", file);
-    const video = fileArr.find(v => v.type.includes("video"))?.getAsFile();
-    video && uploadFile("video", video);
-    if (!file && !img && !video) { // 非文件
-      ElMessage.warning("暂不支持该文件类型粘贴上传！");
+
+    // if (fileArr.length > 1 || fileArr.length < 0) {
+    //   fileArr.length > 1 && ElMessage.warning("不支持批量上传！");
+    //   return;
+    // }
+    for (let i = 0; i < fileArr.length; i++) {
+      const item = fileArr[i];
+      if (!item || item.kind !== "file") {
+        continue;
+      }
+      if (item.type.includes("image")) {
+        const file = item.getAsFile();
+        file && uploadFile("image", file);
+      }
+      else if (item.type.includes("video")) {
+        const file = item.getAsFile();
+        file && uploadFile("video", file);
+        // 单文件
+        return;
+      }
+      else if (FILE_TYPE_ICON_MAP[item.type]) {
+        const file = item.getAsFile();
+        file && uploadFile("file", file);
+        // 单文件
+        return;
+      }
     }
   }