105 lines
3.5 KiB
JavaScript
105 lines
3.5 KiB
JavaScript
|
// 会员进退场豪华横幅模块，从 Blade 内联脚本迁移至 Vite 管理。
|
||
|
|
|
||
|
|
import { escapeHtml } from "./html.js";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 转义会员横幅文本，避免横幅层被注入 HTML。
|
||
|
|
*/
|
||
|
|
function escapePresenceText(text) {
|
||
|
|
return escapeHtml(String(text ?? "")).replace(/\n/g, "<br>");
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 根据不同的会员横幅风格返回渐变与光影配置。
|
||
|
|
*/
|
||
|
|
function getVipPresenceStyleConfig(style, color) {
|
||
|
|
const fallback = color || "#f59e0b";
|
||
|
|
|
||
|
|
const map = {
|
||
|
|
aurora: {
|
||
|
|
gradient: `linear-gradient(135deg, #f59e0b, #fbbf24, #fef3c7)`,
|
||
|
|
glow: `rgba(251, 191, 36, 0.4)`,
|
||
|
|
accent: "#78350f",
|
||
|
|
},
|
||
|
|
storm: {
|
||
|
|
gradient: `linear-gradient(135deg, #0ea5e9, #7dd3fc, #f0f9ff)`,
|
||
|
|
glow: `rgba(125, 211, 252, 0.4)`,
|
||
|
|
accent: "#0369a1",
|
||
|
|
},
|
||
|
|
royal: {
|
||
|
|
gradient: `linear-gradient(135deg, #d97706, #fcd34d, #fffbeb)`,
|
||
|
|
glow: `rgba(252, 211, 77, 0.4)`,
|
||
|
|
accent: "#92400e",
|
||
|
|
},
|
||
|
|
cosmic: {
|
||
|
|
gradient: `linear-gradient(135deg, #db2777, #f472b6, #fdf2f8)`,
|
||
|
|
glow: `rgba(244, 114, 182, 0.4)`,
|
||
|
|
accent: "#9d174d",
|
||
|
|
},
|
||
|
|
farewell: {
|
||
|
|
gradient: `linear-gradient(135deg, #ea580c, #fb923c, #fff7ed)`,
|
||
|
|
glow: `rgba(251, 146, 60, 0.4)`,
|
||
|
|
accent: "#9a3412",
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
return map[style] || map.aurora;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 显示会员进退场豪华横幅。
|
||
|
|
*
|
||
|
|
* @param {Record<string, any>} payload 携带 presence_text / presence_type / presence_icon 等字段的消息载荷
|
||
|
|
* @returns {void}
|
||
|
|
*/
|
||
|
|
function showVipPresenceBanner(payload) {
|
||
|
|
if (!payload || !payload.presence_text) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const existing = document.getElementById("vip-presence-banner");
|
||
|
|
if (existing) {
|
||
|
|
existing.remove();
|
||
|
|
}
|
||
|
|
|
||
|
|
const styleConfig = getVipPresenceStyleConfig(
|
||
|
|
payload.presence_banner_style,
|
||
|
|
payload.presence_color,
|
||
|
|
);
|
||
|
|
const bannerTypeLabel =
|
||
|
|
payload.presence_type === "leave"
|
||
|
|
? "离场提示"
|
||
|
|
: payload.presence_type === "purchase"
|
||
|
|
? "开通喜报"
|
||
|
|
: "闪耀登场";
|
||
|
|
|
||
|
|
const banner = document.createElement("div");
|
||
|
|
banner.id = "vip-presence-banner";
|
||
|
|
banner.className = "vip-presence-banner";
|
||
|
|
banner.innerHTML = `
|
||
|
|
<div class="vip-presence-banner__glow" style="background:${styleConfig.glow};"></div>
|
||
|
|
<div class="vip-presence-banner__card" style="background:${styleConfig.gradient}; border-color:${payload.presence_color || "#fff"};">
|
||
|
|
<div class="vip-presence-banner__meta">
|
||
|
|
<span class="vip-presence-banner__icon">${escapeHtml(payload.presence_icon || "👑")}</span>
|
||
|
|
<span class="vip-presence-banner__level">${escapeHtml(payload.presence_level_name || "尊贵会员")}</span>
|
||
|
|
<span class="vip-presence-banner__type">${bannerTypeLabel}</span>
|
||
|
|
</div>
|
||
|
|
<div class="vip-presence-banner__text" style="color:${styleConfig.accent};">
|
||
|
|
${escapePresenceText(payload.presence_text)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
|
||
|
|
document.body.appendChild(banner);
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
banner.classList.add("is-leaving");
|
||
|
|
setTimeout(() => banner.remove(), 700);
|
||
|
|
}, 4200);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 挂载到 window 供 Blade 脚本及其他模块使用。
|
||
|
|
window.showVipPresenceBanner = showVipPresenceBanner;
|
||
|
|
|
||
|
|
export { showVipPresenceBanner, getVipPresenceStyleConfig, escapePresenceText };
|