From b196a5d32a182d2d8fe8398ffa93bdfaf8ac755c Mon Sep 17 00:00:00 2001 From: Boomkaa <173308582@qq.com> Date: Fri, 31 Oct 2025 17:32:21 +0800 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=9F=AD=E6=97=B6?= =?UTF-8?q?=E9=97=B4=E5=86=85=E8=A7=A6=E5=8F=91=E5=A4=9A=E4=B8=AAmessage?= =?UTF-8?q?=E4=BD=8D=E7=BD=AE=E5=B1=95=E7=A4=BA=E5=BC=82=E5=B8=B8=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/message-item/message-item.ts | 51 +++++---- packages/components/message/message.ts | 108 ++++++++++-------- 2 files changed, 90 insertions(+), 69 deletions(-) diff --git a/packages/components/message-item/message-item.ts b/packages/components/message-item/message-item.ts index 6b8741844..4e9e40d60 100644 --- a/packages/components/message-item/message-item.ts +++ b/packages/components/message-item/message-item.ts @@ -166,29 +166,36 @@ export default class Message extends SuperComponent { this.nextAnimationContext = 0; } - show(offsetHeight: number = 0) { - const { duration, marquee, offset, id } = this.properties; - this.setData({ - visible: true, - loop: marquee.loop || this.data.loop, - fadeClass: `${name}__fade`, - wrapTop: unitConvert(offset[0]) + offsetHeight, - }); - this.reset(); - this.checkAnimation(); - if (duration && duration > 0) { - this.closeTimeoutContext = setTimeout(() => { - this.hide(); - this.triggerEvent('duration-end', { self: this }); - }, duration) as unknown as number; - } - const wrapID = id ? `#${id}` : `#${name}`; - getRect(this, wrapID).then((wrapRect) => { - this.setData({ height: wrapRect.height }, () => { - this.setData({ - fadeClass: ``, - }); + show(offsetHeight: number = 0): Promise { + return new Promise((resolve) => { + const { duration, marquee, offset, id } = this.properties; + this.setData({ + visible: true, + loop: marquee.loop || this.data.loop, + fadeClass: `${name}__fade`, + wrapTop: unitConvert(offset[0]) + offsetHeight, }); + this.reset(); + this.checkAnimation(); + if (duration && duration > 0) { + this.closeTimeoutContext = setTimeout(() => { + this.hide(); + this.triggerEvent('duration-end', { self: this }); + }, duration) as unknown as number; + } + const wrapID = id ? `#${id}` : `#${name}`; + getRect(this, wrapID) + .then((wrapRect) => { + this.setData({ height: wrapRect.height }, () => { + this.setData({ + fadeClass: ``, + }); + resolve(); + }); + }) + .catch(() => { + resolve(); + }); }); } diff --git a/packages/components/message/message.ts b/packages/components/message/message.ts index 061453aa3..bce21072d 100644 --- a/packages/components/message/message.ts +++ b/packages/components/message/message.ts @@ -32,6 +32,9 @@ export default class Message extends SuperComponent { // 两条message之间的间距，单位px gap = 12; + // Promise 队列，用于串行化 message 添加 + addMessageQueue: Promise = Promise.resolve(); + observers = { visible(value) { if (value) { @@ -70,9 +73,9 @@ export default class Message extends SuperComponent { * @param theme */ setMessage(msg: MessageProps, theme: MessageType = MessageType.info) { - let id = `${name}_${this.index}`; - if (msg.single) { - id = name; + const id = msg.single ? name : `${name}_${this.index}`; + if (!msg.single) { + this.index += 1; } this.gap = unitConvert(msg.gap || this.gap); const msgObj = { @@ -86,14 +89,8 @@ export default class Message extends SuperComponent { this.addMessage(msgObj); } else { // 更新消息 - const instance = this.instances[instanceIndex]; - const offsetHeight = this.getOffsetHeight(instanceIndex); - instance.resetData(() => { - instance.setData(msgObj, instance.show.bind(instance, offsetHeight)); - instance.onHide = () => { - this.close(id); - }; - }); + const offsetHeight = msg.single ? 0 : this.getOffsetHeight(instanceIndex); + this.showMessageItem(msgObj, id, offsetHeight); } } @@ -102,20 +99,25 @@ export default class Message extends SuperComponent { * @param msgObj */ addMessage(msgObj: MessageProps) { - const list = [...this.data.messageList, { id: msgObj.id }]; - this.setData( - { - messageList: list, - }, - () => { - const offsetHeight = this.getOffsetHeight(); - const instance = this.showMessageItem(msgObj, msgObj.id, offsetHeight); - if (this.instances) { - this.instances.push(instance); - this.index += 1; - } - }, - ); + this.addMessageQueue = this.addMessageQueue + .then( + () => + new Promise((resolve) => { + this.setData({ messageList: [...this.data.messageList, { id: msgObj.id }] }, () => { + const offsetHeight = msgObj.single ? 0 : this.getOffsetHeight(); + this.showMessageItem(msgObj, msgObj.id, offsetHeight) + .then((instance) => { + if (instance) this.instances.push(instance); + resolve(); + }) + .catch(() => resolve()); + }); + }), + ) + .catch((error) => { + console.error('addMessage error:', error); + return Promise.resolve(); + }); } /** @@ -124,16 +126,14 @@ export default class Message extends SuperComponent { * @returns */ getOffsetHeight(index: number = -1) { - let offsetHeight = 0; let len = index; if (len === -1 || len > this.instances.length) { len = this.instances.length; } - for (let i = 0; i < len; i += 1) { - const instance = this.instances[i]; - offsetHeight += instance.data.height + instance.data.gap; - } - return offsetHeight; + return this.instances.slice(0, len).reduce((offset, instance) => { + // 跳过 single 消息（id 为 `${prefix}-message`） + return instance.id === name ? offset : offset + instance.data.height + instance.data.gap; + }, 0); } /** @@ -144,18 +144,23 @@ export default class Message extends SuperComponent { * @returns */ showMessageItem(options: MessageProps, id: string, offsetHeight: number) { - const instance = this.selectComponent(`#${id}`); - if (instance) { + return new Promise((resolve) => { + const instance = this.selectComponent(`#${id}`); + if (!instance) { + console.error('未找到组件,请确认 selector && context 是否正确'); + return resolve(null); + } + instance.resetData(() => { - instance.setData(options, instance.show.bind(instance, offsetHeight)); - instance.onHide = () => { - this.close(id); - }; + instance.setData(options, () => { + instance + .show(offsetHeight) + .then(() => resolve(instance)) + .catch(() => resolve(instance)); + }); + instance.onHide = () => this.close(id); }); - - return instance; - } - console.error('未找到组件,请确认 selector && context 是否正确'); + }); } close(id) { @@ -197,13 +202,22 @@ export default class Message extends SuperComponent { const index = this.instances.findIndex((x) => x.id === id); if (index < 0) return; const instance = this.instances[index]; - const removedHeight = instance.data.height; + const isSingleMessage = instance.id === name; + const removedHeight = isSingleMessage ? 0 : instance.data.height + instance.data.gap; + this.instances.splice(index, 1); - for (let i = index; i < this.instances.length; i += 1) { - const instance = this.instances[i]; - instance.setData({ - wrapTop: instance.data.wrapTop - removedHeight - instance.data.gap, - }); + + // 只有非 single 消息被移除时，才需要更新后续消息的位置 + if (removedHeight > 0) { + for (let i = index; i < this.instances.length; i += 1) { + const instance = this.instances[i]; + // 跳过 single 消息，single 消息始终在顶部 + if (instance.id !== name) { + instance.setData({ + wrapTop: instance.data.wrapTop - removedHeight, + }); + } + } } } From b933643ba6332c22dbb14dfd8a10f8320b023362 Mon Sep 17 00:00:00 2001 From: Boomkaa <173308582@qq.com> Date: Mon, 3 Nov 2025 10:10:52 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E6=B5=8B=E8=AF=95=E7=94=A8=E4=BE=8B?= =?UTF-8?q?=E6=8A=A5=E9=94=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/components/message/message.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/components/message/message.ts b/packages/components/message/message.ts index bce21072d..eef324436 100644 --- a/packages/components/message/message.ts +++ b/packages/components/message/message.ts @@ -89,8 +89,16 @@ export default class Message extends SuperComponent { this.addMessage(msgObj); } else { // 更新消息 + const instance = this.instances[instanceIndex]; const offsetHeight = msg.single ? 0 : this.getOffsetHeight(instanceIndex); - this.showMessageItem(msgObj, id, offsetHeight); + instance.resetData(() => { + instance.setData(msgObj, () => { + instance.show(offsetHeight); + }); + instance.onHide = () => { + this.close(id); + }; + }); } }