131 lines
4.3 KiB
TypeScript
131 lines
4.3 KiB
TypeScript
export function promptForAuthorIds(document: Document): Promise<string | null> {
|
||
return new Promise((resolve) => {
|
||
const overlay = document.createElement("div");
|
||
overlay.dataset.authorIdDialog = "overlay";
|
||
applyOverlayStyles(overlay);
|
||
|
||
const dialog = document.createElement("section");
|
||
applyDialogStyles(dialog);
|
||
|
||
const title = document.createElement("h2");
|
||
title.textContent = "按星图ID导出";
|
||
applyTitleStyles(title);
|
||
|
||
const textarea = document.createElement("textarea");
|
||
textarea.dataset.authorIdDialogInput = "textarea";
|
||
textarea.placeholder = "每行一个星图ID，也支持逗号、空格分隔";
|
||
applyTextareaStyles(textarea);
|
||
|
||
const hint = document.createElement("p");
|
||
hint.textContent = "粘贴客户提供的达人星图ID，确认后将批量导出达人数据。";
|
||
applyHintStyles(hint);
|
||
|
||
const actions = document.createElement("div");
|
||
applyActionsStyles(actions);
|
||
|
||
const cancelButton = document.createElement("button");
|
||
cancelButton.type = "button";
|
||
cancelButton.textContent = "取消";
|
||
applySecondaryButtonStyles(cancelButton);
|
||
|
||
const confirmButton = document.createElement("button");
|
||
confirmButton.type = "button";
|
||
confirmButton.textContent = "开始导出";
|
||
applyPrimaryButtonStyles(confirmButton);
|
||
|
||
actions.append(cancelButton, confirmButton);
|
||
dialog.append(title, hint, textarea, actions);
|
||
overlay.append(dialog);
|
||
document.body.appendChild(overlay);
|
||
|
||
const close = (value: string | null) => {
|
||
overlay.remove();
|
||
resolve(value);
|
||
};
|
||
|
||
cancelButton.addEventListener("click", () => close(null));
|
||
confirmButton.addEventListener("click", () => close(textarea.value));
|
||
overlay.addEventListener("click", (event) => {
|
||
if (event.target === overlay) {
|
||
close(null);
|
||
}
|
||
});
|
||
textarea.focus();
|
||
});
|
||
}
|
||
|
||
function applyOverlayStyles(overlay: HTMLElement): void {
|
||
overlay.style.position = "fixed";
|
||
overlay.style.inset = "0";
|
||
overlay.style.zIndex = "2147483647";
|
||
overlay.style.display = "flex";
|
||
overlay.style.alignItems = "center";
|
||
overlay.style.justifyContent = "center";
|
||
overlay.style.background = "rgba(15, 23, 42, 0.38)";
|
||
}
|
||
|
||
function applyDialogStyles(dialog: HTMLElement): void {
|
||
dialog.style.width = "520px";
|
||
dialog.style.maxWidth = "calc(100vw - 32px)";
|
||
dialog.style.background = "#ffffff";
|
||
dialog.style.borderRadius = "8px";
|
||
dialog.style.boxShadow = "0 18px 45px rgba(15, 23, 42, 0.22)";
|
||
dialog.style.padding = "20px";
|
||
dialog.style.boxSizing = "border-box";
|
||
}
|
||
|
||
function applyTitleStyles(title: HTMLElement): void {
|
||
title.style.margin = "0 0 8px";
|
||
title.style.fontSize = "18px";
|
||
title.style.fontWeight = "700";
|
||
title.style.color = "#1f2329";
|
||
}
|
||
|
||
function applyHintStyles(hint: HTMLElement): void {
|
||
hint.style.margin = "0 0 12px";
|
||
hint.style.fontSize = "13px";
|
||
hint.style.lineHeight = "20px";
|
||
hint.style.color = "#64748b";
|
||
}
|
||
|
||
function applyTextareaStyles(textarea: HTMLTextAreaElement): void {
|
||
textarea.style.width = "100%";
|
||
textarea.style.height = "220px";
|
||
textarea.style.resize = "vertical";
|
||
textarea.style.border = "1px solid #d0d7de";
|
||
textarea.style.borderRadius = "6px";
|
||
textarea.style.padding = "10px";
|
||
textarea.style.boxSizing = "border-box";
|
||
textarea.style.fontSize = "13px";
|
||
textarea.style.lineHeight = "20px";
|
||
textarea.style.fontFamily = "ui-monospace, SFMono-Regular, Menlo, monospace";
|
||
textarea.style.color = "#1f2329";
|
||
}
|
||
|
||
function applyActionsStyles(actions: HTMLElement): void {
|
||
actions.style.display = "flex";
|
||
actions.style.justifyContent = "flex-end";
|
||
actions.style.columnGap = "8px";
|
||
actions.style.marginTop = "14px";
|
||
}
|
||
|
||
function applyPrimaryButtonStyles(button: HTMLButtonElement): void {
|
||
button.style.height = "32px";
|
||
button.style.padding = "0 15px";
|
||
button.style.border = "1px solid #7f1d2d";
|
||
button.style.borderRadius = "8px";
|
||
button.style.background = "#7f1d2d";
|
||
button.style.color = "#ffffff";
|
||
button.style.fontWeight = "600";
|
||
}
|
||
|
||
function applySecondaryButtonStyles(button: HTMLButtonElement): void {
|
||
button.style.height = "32px";
|
||
button.style.padding = "0 15px";
|
||
button.style.border = "1px solid #d0d7de";
|
||
button.style.borderRadius = "8px";
|
||
button.style.background = "#ffffff";
|
||
button.style.color = "#1f2329";
|
||
button.style.fontWeight = "600";
|
||
}
|