From ff8642a3060b698333bc1908cc44af7601cc36cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Tue, 21 Jun 2022 05:19:38 +0800
Subject: [PATCH] fix(components): [message]: offset

closes #7217, #8368
---
 .../components/message/src/message-method.ts  | 50 +++++++++++--------
 packages/components/message/src/message.ts    |  3 ++
 2 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/packages/components/message/src/message-method.ts b/packages/components/message/src/message-method.ts
index f9f83f82d3299b..6dd9fbc8c5f84c 100644
--- a/packages/components/message/src/message-method.ts
+++ b/packages/components/message/src/message-method.ts
@@ -60,26 +60,29 @@ const normalizeOptions = (params?: MessageParams) => {
   return normalized as MessageParamsNormalized
 }
 
+const getNextOffset = (offset: number) => offset + 48 + 16
+
+const computeOffset = () => {
+  if (instances.length === 0) return
+
+  instances.reduce((prev, next, index) => {
+    if (index === 0) {
+      prev = next.options.offset
+    }
+    next.props.offset = prev
+    return getNextOffset(prev)
+  }, 0)
+}
+
 const closeMessage = (instance: MessageQueueItem) => {
   const idx = instances.indexOf(instance)
   if (idx === -1) return
 
   instances.splice(idx, 1)
-  const { vnode, handler } = instance
+  const { handler } = instance
   handler.close()
 
-  const removedHeight = vnode.el!.offsetHeight
-  // adjust other instances vertical offset
-  const len = instances.length
-  if (len < 1) return
-  for (let i = idx; i < len; i++) {
-    const pos =
-      Number.parseInt(instances[i].vnode.el!.style['top'], 10) -
-      removedHeight -
-      16
-
-    instances[i].vnode.component!.props.offset = pos
-  }
+  computeOffset()
 }
 
 const createMessage = (
@@ -91,18 +94,20 @@ const createMessage = (
   const id = `message_${seed++}`
   const userOnClose = options.onClose
 
-  let verticalOffset = options.offset
-  instances.forEach(({ vnode: vm }) => {
-    verticalOffset += (vm.el?.offsetHeight || 0) + 16
-  })
-  verticalOffset += 16
+  let offset: number
+  const lastInstance = instances[instances.length - 1]
+  if (lastInstance) {
+    offset = getNextOffset(lastInstance.vm.offset)
+  } else {
+    offset = options.offset
+  }
 
   const container = document.createElement('div')
 
   const props = {
     ...options,
     zIndex: options.zIndex ?? nextZIndex(),
-    offset: verticalOffset,
+    offset,
     id,
     onClose: () => {
       userOnClose?.()
@@ -142,9 +147,12 @@ const createMessage = (
   }
 
   const instance = {
+    id,
     vnode,
     vm,
     handler,
+    options: { appendTo, ...options },
+    props: (vnode.component as any).props,
   }
 
   return instance
@@ -168,8 +176,8 @@ const message: MessageFn &
       ({ vnode: vm }) => vm.props?.message === normalized.message
     )
     if (instance) {
-      ;(instance.vnode.component as any).props.repeatNum += 1
-      ;(instance.vnode.component as any).props.type = normalized.type
+      instance.props.repeatNum += 1
+      instance.props.type = normalized.type
       return instance.handler
     }
   }
diff --git a/packages/components/message/src/message.ts b/packages/components/message/src/message.ts
index 21546531212b99..89490a2844dd5b 100644
--- a/packages/components/message/src/message.ts
+++ b/packages/components/message/src/message.ts
@@ -142,9 +142,12 @@ export interface Message extends MessageFn {
 }
 
 export type MessageQueueItem = {
+  id: string
   vnode: VNode
   handler: MessageHandler
   vm: MessageInstance
+  options: MessageParamsNormalized
+  props: Mutable<MessageProps>
 }
 
 export type MessageQueue = MessageQueueItem[]