99 行
3.6 KiB
TypeScript
99 行
3.6 KiB
TypeScript
import { NavLink } from "react-router-dom";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { fetchWorkflowTasks } from "../../api/workflow";
|
|
import { useAuth } from "../../auth/AuthContext";
|
|
import { hasAnyPermission } from "../../auth/permissions";
|
|
import {
|
|
MOBILE_APPROVAL_PERMISSIONS,
|
|
MOBILE_NAV_ITEMS,
|
|
} from "../../features/mobile/navigation";
|
|
import { cn } from "../../lib/utils";
|
|
|
|
function resolveBadgeLabel(count: number) {
|
|
if (count > 99) {
|
|
return "99+";
|
|
}
|
|
return String(count);
|
|
}
|
|
|
|
export function MobileBottomNav() {
|
|
const { permissions } = useAuth();
|
|
const canAccessApprovals = hasAnyPermission(permissions, [...MOBILE_APPROVAL_PERMISSIONS]);
|
|
|
|
const pendingCountQuery = useQuery({
|
|
enabled: canAccessApprovals,
|
|
queryKey: ["mobile", "workflow", "pending-count"],
|
|
queryFn: async () => {
|
|
const response = await fetchWorkflowTasks({ status: "pending", page: 1, pageSize: 1 });
|
|
return response.total;
|
|
},
|
|
refetchInterval: 30_000,
|
|
});
|
|
|
|
const pendingCount = pendingCountQuery.data ?? 0;
|
|
|
|
return (
|
|
<nav className="z-20 shrink-0 border-t border-zinc-200 bg-white/95 px-2 pb-[max(0.5rem,env(safe-area-inset-bottom))] pt-2 shadow-[0_-8px_24px_rgba(15,23,42,0.08)] backdrop-blur md:hidden">
|
|
<div className="grid grid-cols-4 gap-2">
|
|
{MOBILE_NAV_ITEMS.map((item) => {
|
|
const disabled = item.anyOf ? !hasAnyPermission(permissions, [...item.anyOf]) : false;
|
|
const badge = item.key === "approvals" && pendingCount > 0 ? resolveBadgeLabel(pendingCount) : null;
|
|
|
|
if (disabled) {
|
|
return (
|
|
<button
|
|
key={item.key}
|
|
type="button"
|
|
data-testid={`mobile-nav-${item.key}`}
|
|
className="touch-target flex flex-col items-center justify-center gap-1 rounded-2xl px-2 py-2 text-xs font-medium text-zinc-400"
|
|
disabled
|
|
aria-disabled="true"
|
|
title={`${item.label}不可用`}
|
|
>
|
|
<span className="material-symbols-outlined text-[20px]">{item.icon}</span>
|
|
<span>{item.label}</span>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<NavLink
|
|
key={item.key}
|
|
end
|
|
to={item.to}
|
|
data-testid={`mobile-nav-${item.key}`}
|
|
className={({ isActive }) =>
|
|
cn(
|
|
"touch-target flex flex-col items-center justify-center gap-1 rounded-2xl px-2 py-2 text-xs font-medium transition-colors",
|
|
isActive
|
|
? "bg-primary-50 text-primary ring-1 ring-primary-100"
|
|
: "text-zinc-500 hover:bg-zinc-50 hover:text-zinc-900",
|
|
)
|
|
}
|
|
>
|
|
{({ isActive }) => (
|
|
<>
|
|
<span className="relative">
|
|
<span className="material-symbols-outlined text-[20px]">{item.icon}</span>
|
|
{badge ? (
|
|
<span
|
|
className={cn(
|
|
"absolute -right-3 -top-2 min-w-5 rounded-full px-1.5 py-0.5 text-[10px] font-semibold leading-none",
|
|
isActive ? "bg-primary text-white" : "bg-red-500 text-white",
|
|
)}
|
|
>
|
|
{badge}
|
|
</span>
|
|
) : null}
|
|
</span>
|
|
<span>{item.label}</span>
|
|
</>
|
|
)}
|
|
</NavLink>
|
|
);
|
|
})}
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|