R51 移动端增强：入口页、底部导航与审批批量处理

client/src/components/mobile/MobileBottomNav.tsx

@@ -0,0 +1,94 @@
+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="fixed inset-x-0 bottom-0 z-20 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"
+                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}
+              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-zinc-900 text-white shadow-sm" : "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-white text-zinc-900" : "bg-red-500 text-white",
+                        )}
+                      >
+                        {badge}
+                      </span>
+                    ) : null}
+                  </span>
+                  <span>{item.label}</span>
+                </>
+              )}
+            </NavLink>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}