From 52fdf0bcab20d19504ac2893bead7075a0c9744f Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 1 May 2026 23:04:56 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(im):=20=E6=B6=88=E6=81=AF?=
 =?UTF-8?q?=E5=8F=B3=E9=94=AE=E8=8F=9C=E5=8D=95=E4=BC=98=E5=8C=96=20+=20?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=9B=BE=E7=89=87=E5=9C=BA=E6=99=AF=E6=BB=9A?=
 =?UTF-8?q?=E4=B8=8D=E5=88=B0=E5=BA=95=20-=20MessageItem=EF=BC=9A=E3=80=8C?=
 =?UTF-8?q?=E5=9B=9E=E5=A4=8D=E3=80=8D=E2=86=92=E3=80=8C=E5=BC=95=E7=94=A8?=
 =?UTF-8?q?=E3=80=8D=E5=B9=B6=E5=8A=A0=E5=9B=BE=E6=A0=87=EF=BC=9B=E6=92=A4?=
 =?UTF-8?q?=E5=9B=9E=20/=20=E5=88=A0=E9=99=A4=E4=BA=92=E6=96=A5=EF=BC=88?=
 =?UTF-8?q?=E8=87=AA=E5=B7=B1=E6=B6=88=E6=81=AF=202=20=E5=88=86=E9=92=9F?=
 =?UTF-8?q?=E5=86=85=E6=98=BE=E7=A4=BA=E6=92=A4=E5=9B=9E=EF=BC=8C=E8=B6=85?=
 =?UTF-8?q?=E5=87=BA=20/=20=E5=AF=B9=E6=96=B9=E6=B6=88=E6=81=AF=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E5=88=A0=E9=99=A4=EF=BC=89=EF=BC=8C=E5=9D=87=E5=8A=A0?=
 =?UTF-8?q?=E5=88=86=E5=89=B2=E7=BA=BF=20+=20=E7=BA=A2=E8=89=B2=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E5=AF=B9=E9=BD=90=E5=BE=AE=E4=BF=A1=EF=BC=9BMENU=5FKE?=
 =?UTF-8?q?YS=20=E6=8A=BD=20const=20=E9=98=B2=20typo=EF=BC=9B=E5=BC=95?=
 =?UTF-8?q?=E7=94=A8=E5=9D=97=E4=BB=8E=E6=B0=94=E6=B3=A1=E4=B8=8A=E6=96=B9?=
 =?UTF-8?q?=E7=A7=BB=E5=88=B0=E4=B8=8B=E6=96=B9=EF=BC=8CselfSend=20?=
 =?UTF-8?q?=E6=97=B6=E7=AB=96=E7=BA=BF=E9=95=9C=E5=83=8F=E5=88=B0=E5=8F=B3?=
 =?UTF-8?q?=E4=BE=A7=20-=20MessagePanel=EF=BC=9AscrollToBottom=20=E6=94=B9?=
 =?UTF-8?q?=20async=20+=20waitMediaSettled=20=E7=AD=89=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=20/=20=E8=A7=86=E9=A2=91=E5=85=83=E6=95=B0=E6=8D=AE=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=EF=BC=9B=E7=94=A8=20expectedScrollTop=20drift=20?=
 =?UTF-8?q?=E6=9B=BF=E4=BB=A3=20distanceFromBottom=EF=BC=8C=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E3=80=8C=E5=9B=BE=E7=89=87=E5=8A=A0=E8=BD=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=BA=95=E9=83=A8=E4=B8=8A=E7=A7=BB=E3=80=81=E8=AF=AF=E5=88=A4?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E5=B7=B2=E6=BB=9A=E8=B5=B0=E3=80=8D=E5=AF=BC?=
 =?UTF-8?q?=E8=87=B4=E5=88=B0=E4=B8=8D=E4=BA=86=E5=BA=95=20-=20ReplyPrevie?=
 =?UTF-8?q?w=EF=BC=9A=E5=88=A0=E7=AD=89=E4=BB=B7=E7=9A=84=20filePayload=20?=
 =?UTF-8?q?/=20voicePayload=20alias=EF=BC=8C=E7=9B=B4=E6=8E=A5=E5=A4=8D?=
 =?UTF-8?q?=E7=94=A8=20parsedPayload=20-=20uiStore=EF=BC=9AContextMenuItem?=
 =?UTF-8?q?=20=E5=8A=A0=20icon=3F=20=E5=AD=97=E6=AE=B5=EF=BC=8C=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E8=8F=9C=E5=8D=95=E9=A1=B9=E5=89=8D=E7=BD=AE=E5=9B=BE?=
 =?UTF-8?q?=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/im/home/components/ContextMenu.vue  |  6 +-
 .../components/message/MessageItem.vue        |  2 +-
 .../components/message/MessagePanel.vue       | 82 +++++++++++++++----
 .../components/message/ReplyPreview.vue       | 18 ++--
 src/views/im/home/store/uiStore.ts            |  1 +
 5 files changed, 80 insertions(+), 29 deletions(-)

diff --git a/src/views/im/home/components/ContextMenu.vue b/src/views/im/home/components/ContextMenu.vue
index f6d639041..4cf412c64 100644
--- a/src/views/im/home/components/ContextMenu.vue
+++ b/src/views/im/home/components/ContextMenu.vue
@@ -22,7 +22,7 @@
             class="my-1 mx-2 h-[1px] bg-[var(--el-border-color-lighter)]"
           ></div>
           <div
-            class="px-4 py-2 text-13px text-left cursor-pointer transition-colors hover:bg-[var(--el-fill-color)]"
+            class="flex gap-2 items-center px-4 py-2 text-13px text-left cursor-pointer transition-colors hover:bg-[var(--el-fill-color)]"
             :class="[
               item.disabled
                 ? '!text-[var(--el-text-color-disabled)] cursor-not-allowed hover:!bg-transparent'
@@ -32,7 +32,8 @@
             ]"
             @click.stop="handleSelect(item)"
           >
-            {{ item.name }}
+            <Icon v-if="item.icon" :icon="item.icon" :size="14" />
+            <span>{{ item.name }}</span>
           </div>
         </template>
       </div>
@@ -42,6 +43,7 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue'
+import Icon from '@/components/Icon/src/Icon.vue'
 
 import { useImUiStore } from '../store/uiStore'
 
diff --git a/src/views/im/home/pages/conversation/components/message/MessageItem.vue b/src/views/im/home/pages/conversation/components/message/MessageItem.vue
index a753eb780..8a7627144 100644
--- a/src/views/im/home/pages/conversation/components/message/MessageItem.vue
+++ b/src/views/im/home/pages/conversation/components/message/MessageItem.vue
@@ -537,7 +537,7 @@ async function handleContextMenu(e: MouseEvent) {
   })
 }
 
-/** 进入回复模式:把当前消息构造成 QuoteMessage 写入 draftStore,MessageInput 顶部引用条响应式出现 */
+/** 进入引用模式：把当前消息构造成 QuoteMessage 写入 draftStore，MessageInput 顶部引用条响应式出现 */
 function handleReply() {
   const conversation = conversationStore.activeConversation
   if (!conversation) {
diff --git a/src/views/im/home/pages/conversation/components/message/MessagePanel.vue b/src/views/im/home/pages/conversation/components/message/MessagePanel.vue
index 818a12841..8bf2aca69 100644
--- a/src/views/im/home/pages/conversation/components/message/MessagePanel.vue
+++ b/src/views/im/home/pages/conversation/components/message/MessagePanel.vue
@@ -304,24 +304,76 @@ function handleScroll() {
 }
 
 /**
- * 滚到底部：切会话 / 收到新消息（且当前在底部）/ 用户主动点"回到底部" 都走这里
+ * 滚到底部：切会话 / 收到新消息（且当前在底部）/ 用户主动点「回到底部」 都走这里
  *
- * 包 nextTick 是为了等 v-for 把新消息真正渲染进 DOM 后再算 scrollHeight，
- * 否则可能滚到的还是旧高度（差最后一条的位置）。smooth=true 走平滑动画，
- * 适合用户主动点击；初始 / 自动滚动用 auto，避免用户感知到动画拖拽
+ * smooth=true 走平滑动画，适合用户主动点击；初始 / 自动滚动用 auto，避免用户感知到动画拖拽
  */
-function scrollToBottom(smooth = false) {
-  nextTick(() => {
-    if (!listRef.value) {
-      return
-    }
-    listRef.value.scrollTo({
-      top: listRef.value.scrollHeight,
-      behavior: smooth ? 'smooth' : 'auto'
-    })
-    newMessageCount.value = 0
-    showJumpToBottom.value = false
+async function scrollToBottom(smooth = false) {
+  // 1. 滚到当前 scrollHeight 的底部（图片 / 视频还在加载时只是大致到底）
+  // 1.1 等 v-for 把新消息真正渲染进 DOM 后再算 scrollHeight，否则差最后一条的位置
+  await nextTick()
+  if (!listRef.value) {
+    return
+  }
+  // 1.2 触发滚动；smooth 仅 user 主动点「回到底部」用，初始 / 自动滚走 auto 避免动画拖拽感
+  listRef.value.scrollTo({
+    top: listRef.value.scrollHeight,
+    behavior: smooth ? 'smooth' : 'auto'
   })
+  newMessageCount.value = 0
+  showJumpToBottom.value = false
+  // 1.3 记下「期望停下的 scrollTop」；图片 / 视频加载完底部会上移，scrollTop 没动就说明用户没手动滚走
+  //     不能用 distanceFromBottom 判断：底部上移会让 distance 变大，被误判为「用户滚走了」直接放弃补滚
+  const expectedScrollTop = listRef.value.scrollHeight - listRef.value.clientHeight
+
+  // 2. 等媒体加载完后补滚到真实底部
+  // 2.1 等容器内未加载完的图片 / 视频元数据；加载完后 scrollHeight 会增长到真实底部
+  await waitMediaSettled()
+  if (!listRef.value) {
+    return
+  }
+  // 2.2 仅在用户没手动滚走时（scrollTop 仍贴近 expectedScrollTop）才补滚，避免等待期间用户上翻被打断
+  if (Math.abs(listRef.value.scrollTop - expectedScrollTop) > BOTTOM_THRESHOLD) {
+    return
+  }
+  // 2.3 补滚到新底部
+  listRef.value.scrollTo({ top: listRef.value.scrollHeight, behavior: 'auto' })
+}
+
+/**
+ * 等待容器内未加载完的图片 / 视频；最多等 2s 防止超大资源把整个滚动跟进卡住
+ *
+ * 仅关心元数据（loadedmetadata / img.complete），不等真正解码，因为尺寸够算 scrollHeight 就行
+ */
+function waitMediaSettled(): Promise<void> {
+  // 1. 收集容器内未加载完的图片 / 视频
+  if (!listRef.value) {
+    return Promise.resolve()
+  }
+  // 1.1 一次扫 img + video，按 element 类型分别看「complete / readyState」过滤 pending
+  const pendingMedia = Array.from(
+    listRef.value.querySelectorAll<HTMLImageElement | HTMLVideoElement>('img, video')
+  ).filter((el) => (el instanceof HTMLImageElement ? !el.complete : el.readyState < 1))
+  // 1.2 没有 pending 直接返回，省掉 Promise.race / setTimeout 闭包构造
+  if (pendingMedia.length === 0) {
+    return Promise.resolve()
+  }
+
+  // 2. 等所有 pending 资源 load / error，最长 2s 兜底
+  // 2.1 每个 element 都监听对应 loadedEvent + error，任一触发即 resolve（不让单条失败卡 race）
+  const loadAll = Promise.all(
+    pendingMedia.map(
+      (el) =>
+        new Promise<void>((resolve) => {
+          const loadedEvent = el instanceof HTMLImageElement ? 'load' : 'loadedmetadata'
+          el.addEventListener(loadedEvent, () => resolve(), { once: true })
+          el.addEventListener('error', () => resolve(), { once: true })
+        })
+    )
+  ).then(() => undefined)
+  // 2.2 2s 超时兜底，防止超大资源 / 网络挂起把整个滚动跟进永久卡住
+  const timeout = new Promise<void>((resolve) => setTimeout(resolve, 2000))
+  return Promise.race([loadAll, timeout])
 }
 
 /**
diff --git a/src/views/im/home/pages/conversation/components/message/ReplyPreview.vue b/src/views/im/home/pages/conversation/components/message/ReplyPreview.vue
index c21c2fca8..bbdfd484f 100644
--- a/src/views/im/home/pages/conversation/components/message/ReplyPreview.vue
+++ b/src/views/im/home/pages/conversation/components/message/ReplyPreview.vue
@@ -38,22 +38,22 @@
         :size="14"
         class="flex-shrink-0"
       />
-      <span v-if="filePayload?.name" class="im-reply-preview__text min-w-0">
-        {{ filePayload.name }}
+      <span v-if="parsedPayload?.name" class="im-reply-preview__text min-w-0">
+        {{ parsedPayload.name }}
       </span>
       <span
-        v-if="filePayload?.size"
+        v-if="parsedPayload?.size"
         class="flex-shrink-0 text-[var(--el-text-color-placeholder)]"
       >
-        {{ formatFileSize(filePayload.size) }}
+        {{ formatFileSize(parsedPayload.size) }}
       </span>
     </template>
 
     <!-- 语音：audio icon + 时长 -->
     <template v-else-if="isVoice">
       <Icon icon="ant-design:audio-outlined" :size="14" class="flex-shrink-0" />
-      <span v-if="voicePayload?.duration" class="flex-shrink-0">
-        {{ formatSeconds(voicePayload.duration) }}
+      <span v-if="parsedPayload?.duration" class="flex-shrink-0">
+        {{ formatSeconds(parsedPayload.duration) }}
       </span>
     </template>
 
@@ -165,12 +165,8 @@ const textPreview = computed(() => {
     : `${text.substring(0, MAX_TEXT_PREVIEW_LEN)}…`
 })
 
-/** 文件 / 语音 payload 直接复用 parsedPayload，省一次解析 */
-const filePayload = computed(() => parsedPayload.value)
-const voicePayload = computed(() => parsedPayload.value)
-
 /** 文件 icon：按扩展名挑色，跟主气泡渲染同源 */
-const fileIcon = computed(() => getFileIconInfo(filePayload.value?.name))
+const fileIcon = computed(() => getFileIconInfo(parsedPayload.value?.name))
 
 /** 缩略图 URL：仅图片 / 视频从 quote.content 直接取，不依赖本地缓存 */
 const thumbnailUrl = computed<string | undefined>(() => {
diff --git a/src/views/im/home/store/uiStore.ts b/src/views/im/home/store/uiStore.ts
index a45f27a78..321b8c33f 100644
--- a/src/views/im/home/store/uiStore.ts
+++ b/src/views/im/home/store/uiStore.ts
@@ -42,6 +42,7 @@ export const useImUiStore = defineStore('imUiStore', () => {
     disabled?: boolean
     divided?: boolean // 是否在该项上方显示分割线（用于把"删除"等危险操作与上面的常规项隔开）
     danger?: boolean // 是否走危险操作样式（红色文字）
+    icon?: string // 可选 iconify 图标名（如 ant-design:delete-outlined）；不传则不渲染前置图标
   }
 
   const contextMenu = reactive({