🐛 Improve showMessage() (#15305)

This commit is contained in:
Jeffrey Chen 2025-07-17 00:08:27 +08:00 committed by GitHub
parent 4179c8f245
commit 110223f468
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 35 additions and 12 deletions

View file

@ -3,6 +3,7 @@
position: relative;
transition: transform 256ms cubic-bezier(.45, .05, .55, .95) 0ms;
text-align: right;
justify-self: end;
font-size: var(--b3-font-size);
&--hide {

View file

@ -32,10 +32,21 @@ export const initMessage = () => {
target = target.parentElement;
}
});
const tempMessageElement = document.getElementById("tempMessage");
if (tempMessageElement) {
showMessage(tempMessageElement.innerHTML);
tempMessageElement.remove();
const tempMessages = document.getElementById("tempMessages");
if (tempMessages) {
const items = tempMessages.querySelectorAll("[temp-message]");
items.forEach((item) => {
const timeoutString = item.getAttribute("data-timeout");
let timeout;
if (timeoutString) {
timeout = parseInt(timeoutString);
}
const type = item.getAttribute("data-type");
const messageId = item.getAttribute("data-message-id");
showMessage(item.innerHTML, timeout, type, messageId);
});
tempMessages.remove();
}
};
@ -43,14 +54,25 @@ export const initMessage = () => {
export const showMessage = (message: string, timeout = 6000, type = "info", messageId?: string) => {
const messagesElement = document.getElementById("message").firstElementChild;
if (!messagesElement) {
document.body.insertAdjacentHTML("beforeend", `<div style="top: 10px;
position: fixed;
z-index: 100;
background: white;
padding: 10px;
border-radius: 5px;
right: 10px;
border: 1px solid #e0e0e0;" id='tempMessage'>${message}</div>`);
let tempMessages = document.getElementById("tempMessages");
if (!tempMessages) {
document.body.insertAdjacentHTML("beforeend", "<div id='tempMessages'></div>");
tempMessages = document.getElementById("tempMessages");
}
tempMessages.insertAdjacentHTML("beforeend", `<div style="
top: 10px;
position: fixed;
z-index: 100;
background: white;
padding: 10px;
border-radius: 5px;
right: 10px;
border: 1px solid #e0e0e0;"
data-timeout='${timeout}'
data-type="${type}"
data-message-id='${messageId || ""}'
temp-message>${message}</div>`);
return;
}
const id = messageId || genUUID();