47 lines
2.0 KiB
JavaScript
47 lines
2.0 KiB
JavaScript
import { useMemo } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useAuth } from "@/app/auth/AuthProvider.jsx";
|
|
import { getFrequentSecondLevelMenus } from "@/app/navigation/menuUsage.js";
|
|
import { formatMillis } from "@/shared/utils/time.js";
|
|
|
|
export function DashboardFrequentMenus({ menus = [] }) {
|
|
const { user } = useAuth();
|
|
const navigate = useNavigate();
|
|
const frequentMenus = useMemo(() => getFrequentSecondLevelMenus({ menus, user }), [menus, user]);
|
|
|
|
return (
|
|
<section className="frequent-menu-section" aria-label="常用二级菜单">
|
|
<div className="frequent-menu-head">
|
|
<div>
|
|
<h2>常用页面</h2>
|
|
<p>本地缓存的二级菜单访问次数</p>
|
|
</div>
|
|
</div>
|
|
{frequentMenus.length ? (
|
|
<div className="frequent-menu-grid">
|
|
{frequentMenus.map((item) => {
|
|
const Icon = item.icon;
|
|
return (
|
|
<button
|
|
className="frequent-menu-card"
|
|
key={item.code}
|
|
type="button"
|
|
onClick={() => navigate(item.path)}
|
|
>
|
|
<span className="frequent-menu-card__icon">{Icon ? <Icon fontSize="small" /> : null}</span>
|
|
<span className="frequent-menu-card__group">{item.parentLabel}</span>
|
|
<strong>{item.label}</strong>
|
|
<span className="frequent-menu-card__meta">
|
|
进入 {item.count || 0} 次 · {formatMillis(item.lastVisitedAtMs)}
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<div className="frequent-menu-empty">暂无本地访问记录</div>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|