// Full-viewport "全部导航" mega-menu, modeled after the reference screenshot. const MegaNav = ({ onClose, onOpen }) => { const [activeSection, setActiveSection] = React.useState("sys"); const cols = XLY.MEGA_COLUMNS[activeSection]; return (
{/* Header */}
{/* Body */}
{/* Left rail */}
{XLY.MEGA_NAV.map((s) => { const active = s.id === activeSection; return (
setActiveSection(s.id)} style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 14px", cursor: "pointer", fontSize: 12, background: active ? "var(--accent)" : "transparent", color: active ? "#fff" : "var(--text-on-dark)", borderLeft: active ? "3px solid #fff" : "3px solid transparent", }} onMouseEnter={(e) => { if (!active) e.currentTarget.style.background = "rgba(255,255,255,0.06)"; }} onMouseLeave={(e) => { if (!active) e.currentTarget.style.background = "transparent"; }} > {s.label}
); })}
{/* Columns */}
{cols ? (
{cols.map((col) => (
{col.title}
{col.items.map((it, i) => { const clickable = !!it.screen; return (
{ onOpen(it.screen, it.label); onClose(); } : undefined} style={{ fontSize: 12, color: it.featured ? "var(--accent)" : "var(--text-on-dark-muted)", cursor: clickable ? "pointer" : "default", display: "inline-flex", alignItems: "center", gap: 4, padding: "1px 0", }} onMouseEnter={(e) => { if (clickable) e.currentTarget.style.color = "#fff"; }} onMouseLeave={(e) => { if (clickable) e.currentTarget.style.color = it.featured ? "var(--accent)" : "var(--text-on-dark-muted)"; }} > {it.label} {it.featured ? : null}
); })}
))}
) : (
{XLY.MEGA_NAV.find((s) => s.id === activeSection)?.label} · 模块开发中
)}
); }; window.MegaNav = MegaNav;