(function () {
|
var messageRoot = null;
|
var activeConfirm = null;
|
var menuIcons = {
|
home: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3.5 11.2 12 4l8.5 7.2"/><path d="M5.5 10.5V20h13v-9.5"/><path d="M9.5 20v-6h5v6"/></svg>',
|
screen: '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="5" width="16" height="11" rx="2"/><path d="M9 20h6"/><path d="M12 16v4"/></svg>',
|
device: '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="7" y="3" width="10" height="18" rx="2"/><path d="M10 6h4"/><path d="M11 18h2"/><path d="M10 10h4v4h-4z"/></svg>',
|
people: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9.5 11a3.2 3.2 0 1 0 0-6.4 3.2 3.2 0 0 0 0 6.4z"/><path d="M3.8 19.2c.5-3.4 2.4-5.1 5.7-5.1s5.2 1.7 5.7 5.1"/><path d="M16.2 10.8a2.6 2.6 0 1 0 0-5.2"/><path d="M16.6 14.1c2.2.4 3.4 2 3.7 4.7"/></svg>',
|
map: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5 3.8 7v12L8 17l8 2 4.2-2V5L16 7 8 5z"/><path d="M8 5v12"/><path d="M16 7v12"/></svg>',
|
log: '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="4" width="14" height="16" rx="2"/><path d="M8.5 8.5h7"/><path d="M8.5 12h7"/><path d="M8.5 15.5h4.5"/></svg>',
|
account: '<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="3.4"/><path d="M5.5 20c.6-4.1 2.8-6.2 6.5-6.2s5.9 2.1 6.5 6.2"/><path d="M18.8 6.5l1.5 1.5"/><path d="M20.3 6.5 18.8 8"/></svg>'
|
};
|
|
initSidebarMenu();
|
|
window.AppMessage = {
|
show: showMessage,
|
success: function (text, options) {
|
return showMessage("success", text || "操作成功", options);
|
},
|
error: function (text, options) {
|
return showMessage("error", text || "操作失败:失败原因说明", options);
|
}
|
};
|
|
window.AppConfirm = {
|
open: openConfirm,
|
close: closeConfirm
|
};
|
|
function showMessage(type, text, options) {
|
options = options || {};
|
var root = ensureMessageRoot();
|
var message = document.createElement("div");
|
var icon = document.createElement("span");
|
var content = document.createElement("span");
|
var duration = typeof options.duration === "number" ? options.duration : 1800;
|
|
message.className = "app-message app-message-" + type;
|
message.setAttribute("role", type === "error" ? "alert" : "status");
|
icon.className = "app-message-icon";
|
icon.innerHTML = type === "success" ? "✓" : "×";
|
content.className = "app-message-text";
|
content.textContent = text;
|
|
message.appendChild(icon);
|
message.appendChild(content);
|
root.appendChild(message);
|
|
window.setTimeout(function () {
|
if (message.parentNode) {
|
message.parentNode.removeChild(message);
|
}
|
}, duration);
|
|
return message;
|
}
|
|
function ensureMessageRoot() {
|
if (messageRoot && messageRoot.parentNode) {
|
return messageRoot;
|
}
|
messageRoot = document.createElement("div");
|
messageRoot.className = "app-message-root";
|
document.body.appendChild(messageRoot);
|
return messageRoot;
|
}
|
|
function openConfirm(options) {
|
options = options || {};
|
closeConfirm();
|
|
var layer = document.createElement("div");
|
var mask = document.createElement("div");
|
var panel = document.createElement("section");
|
var icon = document.createElement("span");
|
var title = document.createElement("h3");
|
var message = document.createElement("p");
|
var actions = document.createElement("div");
|
var cancelButton = document.createElement("button");
|
var confirmButton = document.createElement("button");
|
|
layer.className = "app-confirm-layer";
|
mask.className = "app-confirm-mask";
|
panel.className = "app-confirm-panel";
|
panel.setAttribute("role", "dialog");
|
panel.setAttribute("aria-modal", "true");
|
icon.className = "app-confirm-icon";
|
icon.innerHTML = "×";
|
title.className = "app-confirm-title";
|
title.textContent = options.title || "是否确认删除数据?";
|
message.className = "app-confirm-message";
|
message.textContent = options.message || "删除操作不可撤回,请谨慎操作";
|
actions.className = "app-confirm-actions";
|
cancelButton.className = "app-confirm-button app-confirm-cancel";
|
cancelButton.type = "button";
|
cancelButton.textContent = options.cancelText || "取消";
|
confirmButton.className = "app-confirm-button app-confirm-submit";
|
confirmButton.type = "button";
|
confirmButton.textContent = options.confirmText || "确定";
|
|
actions.appendChild(cancelButton);
|
actions.appendChild(confirmButton);
|
panel.appendChild(icon);
|
panel.appendChild(title);
|
panel.appendChild(message);
|
panel.appendChild(actions);
|
layer.appendChild(mask);
|
layer.appendChild(panel);
|
document.body.appendChild(layer);
|
|
activeConfirm = {
|
layer: layer,
|
onKeydown: function (event) {
|
if (event.key === "Escape") {
|
closeConfirm();
|
callHandler(options.onCancel);
|
}
|
}
|
};
|
|
mask.addEventListener("click", function () {
|
closeConfirm();
|
callHandler(options.onCancel);
|
});
|
|
cancelButton.addEventListener("click", function () {
|
closeConfirm();
|
callHandler(options.onCancel);
|
});
|
|
confirmButton.addEventListener("click", function () {
|
var result = callHandler(options.onConfirm);
|
if (result && typeof result.then === "function") {
|
confirmButton.disabled = true;
|
result.then(closeConfirm).catch(function (error) {
|
confirmButton.disabled = false;
|
window.AppMessage.error(error && error.message ? "操作失败:" + error.message : "操作失败:请求处理失败");
|
});
|
return;
|
}
|
if (result !== false) {
|
closeConfirm();
|
}
|
});
|
|
document.addEventListener("keydown", activeConfirm.onKeydown);
|
confirmButton.focus();
|
return layer;
|
}
|
|
function closeConfirm() {
|
if (!activeConfirm) {
|
return;
|
}
|
document.removeEventListener("keydown", activeConfirm.onKeydown);
|
if (activeConfirm.layer && activeConfirm.layer.parentNode) {
|
activeConfirm.layer.parentNode.removeChild(activeConfirm.layer);
|
}
|
activeConfirm = null;
|
}
|
|
function callHandler(handler) {
|
if (typeof handler === "function") {
|
return handler();
|
}
|
return undefined;
|
}
|
|
function initSidebarMenu() {
|
if (document.readyState === "loading") {
|
document.addEventListener("DOMContentLoaded", bindSidebarMenu);
|
return;
|
}
|
bindSidebarMenu();
|
}
|
|
function bindSidebarMenu() {
|
renderMenuIcons();
|
applyHomeMenuState();
|
|
document.querySelectorAll(".menu-group").forEach(function (group) {
|
var title = group.querySelector(".menu-title");
|
if (!title || title.getAttribute("data-menu-bound") === "true") {
|
return;
|
}
|
title.setAttribute("data-menu-bound", "true");
|
title.setAttribute("aria-expanded", String(group.classList.contains("open")));
|
title.addEventListener("click", function () {
|
var opened = group.classList.toggle("open");
|
title.setAttribute("aria-expanded", String(opened));
|
});
|
});
|
}
|
|
function applyHomeMenuState() {
|
var activeHome = document.querySelector(".menu-item.active[href$='dashboard.html']");
|
if (!activeHome) {
|
return;
|
}
|
|
document.querySelectorAll(".menu-group.open").forEach(function (group) {
|
group.classList.remove("open");
|
});
|
}
|
|
function renderMenuIcons() {
|
document.querySelectorAll(".menu-icon").forEach(function (icon) {
|
var key = Object.keys(menuIcons).find(function (name) {
|
return icon.classList.contains(name);
|
});
|
|
if (!key || icon.getAttribute("data-icon-rendered") === "true") {
|
return;
|
}
|
|
icon.innerHTML = menuIcons[key];
|
icon.setAttribute("data-icon-rendered", "true");
|
});
|
}
|
})();
|