83 lines
3.0 KiB
JavaScript
83 lines
3.0 KiB
JavaScript
|
/* =====================================================================
|
|||
|
|
* 通用工具（utils.js）
|
|||
|
|
* DOM 查询 / HTML 转义 / URL 白名单 / 日期格式化 / Toast / 自定义弹窗
|
|||
|
|
* ===================================================================== */
|
|||
|
|
|
|||
|
|
export function $(selector, root = document) {
|
|||
|
|
return root.querySelector(selector);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function escapeHtml(value) {
|
|||
|
|
return String(value ?? "").replace(/[&<>"']/g, (c) => ({
|
|||
|
|
"&": "&", "<": "<", ">": ">", '"': """, "'": "'",
|
|||
|
|
}[c]));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// URL 协议白名单：仅允许 http/https、站内相对路径与锚点，
|
|||
|
|
// 禁止 javascript: / data: / vbscript: 等危险协议，防止 XSS。
|
|||
|
|
export function safeUrl(url, type = "link") {
|
|||
|
|
const value = String(url ?? "").trim();
|
|||
|
|
if (!value) return "";
|
|||
|
|
if (/^(https?:)?\/\//i.test(value)) return value;
|
|||
|
|
if (value.startsWith("/") || value.startsWith("#")) return value;
|
|||
|
|
if (type === "link" && value.startsWith("mailto:")) return value;
|
|||
|
|
return "";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function parseDate(value) {
|
|||
|
|
if (!value) return null;
|
|||
|
|
let text = String(value).replace(" ", "T");
|
|||
|
|
// 后端时间为无时区 UTC，补 Z 后按 UTC 解析并转为本地时区显示
|
|||
|
|
if (!/[zZ]|[+-]\d{2}:\d{2}$/.test(text)) text += "Z";
|
|||
|
|
const d = new Date(text);
|
|||
|
|
return Number.isNaN(d.getTime()) ? null : d;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function formatDate(value) {
|
|||
|
|
const d = parseDate(value);
|
|||
|
|
if (!d) return "";
|
|||
|
|
const p = (n) => String(n).padStart(2, "0");
|
|||
|
|
return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ---------------- 通知（自定义 Snackbar，不使用 alert） ---------------- */
|
|||
|
|
export function showToast(message, type = "info") {
|
|||
|
|
const el = document.createElement("div");
|
|||
|
|
el.className = `toast toast-${type}`;
|
|||
|
|
el.textContent = message;
|
|||
|
|
$("#toast-root").appendChild(el);
|
|||
|
|
requestAnimationFrame(() => el.classList.add("show"));
|
|||
|
|
setTimeout(() => {
|
|||
|
|
el.classList.remove("show");
|
|||
|
|
setTimeout(() => el.remove(), 300);
|
|||
|
|
}, 3200);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ---------------- 自定义弹窗 ---------------- */
|
|||
|
|
export function openModal({ title, content }) {
|
|||
|
|
const overlay = document.createElement("div");
|
|||
|
|
overlay.className = "modal-overlay";
|
|||
|
|
overlay.innerHTML = `
|
|||
|
|
<div class="modal" role="dialog" aria-modal="true">
|
|||
|
|
<div class="modal-header">
|
|||
|
|
<h3></h3>
|
|||
|
|
<button class="modal-close" aria-label="关闭">✕</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-body"></div>
|
|||
|
|
</div>`;
|
|||
|
|
$(".modal h3", overlay).textContent = title;
|
|||
|
|
const bodyEl = $(".modal-body", overlay);
|
|||
|
|
if (typeof content === "string") bodyEl.innerHTML = content;
|
|||
|
|
else bodyEl.appendChild(content);
|
|||
|
|
|
|||
|
|
const close = () => {
|
|||
|
|
overlay.remove();
|
|||
|
|
document.removeEventListener("keydown", onKey);
|
|||
|
|
};
|
|||
|
|
const onKey = (e) => { if (e.key === "Escape") close(); };
|
|||
|
|
document.addEventListener("keydown", onKey);
|
|||
|
|
$(".modal-close", overlay).addEventListener("click", close);
|
|||
|
|
overlay.addEventListener("click", (e) => { if (e.target === overlay) close(); });
|
|||
|
|
$("#modal-root").appendChild(overlay);
|
|||
|
|
return { overlay, close };
|
|||
|
|
}
|