R109/A1,A5 优化移动端底部导航和常用页面

client/src/components/mobile/MobileBottomNav.tsx

@@ -33,8 +33,8 @@ export function MobileBottomNav() {
   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">
+    <nav className="z-20 shrink-0 border-t border-zinc-200 bg-white/95 px-2 pb-[max(0.25rem,env(safe-area-inset-bottom))] pt-1.5 shadow-[0_-6px_18px_rgba(15,23,42,0.06)] backdrop-blur md:hidden">
+      <div className="grid grid-cols-4 gap-1">
         {MOBILE_NAV_ITEMS.map((item) => {
           const disabled = item.anyOf ? !hasAnyPermission(permissions, [...item.anyOf]) : false;
           const badge = item.key === "approvals" && pendingCount > 0 ? resolveBadgeLabel(pendingCount) : null;
@@ -45,7 +45,7 @@ export function MobileBottomNav() {
                 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"
+                className="touch-target flex h-12 min-h-0 flex-col items-center justify-center gap-0.5 rounded-xl px-1 py-1 text-[11px] font-medium leading-none text-zinc-400"
                 disabled
                 aria-disabled="true"
                 title={`${item.label}不可用`}
@@ -59,14 +59,14 @@ export function MobileBottomNav() {
           return (
             <NavLink
               key={item.key}
-              end
+              end={item.to === "/mobile"}
               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",
+                  "touch-target flex h-12 min-h-0 flex-col items-center justify-center gap-0.5 rounded-xl px-1 py-1 text-[11px] font-medium leading-none transition-colors",
                   isActive
-                    ? "bg-primary-50 text-primary ring-1 ring-primary-100"
+                    ? "bg-primary text-white shadow-sm"
                     : "text-zinc-500 hover:bg-zinc-50 hover:text-zinc-900",
                 )
               }
@@ -74,12 +74,12 @@ export function MobileBottomNav() {
               {({ isActive }) => (
                 <>
                   <span className="relative">
-                    <span className="material-symbols-outlined text-[20px]">{item.icon}</span>
+                    <span className="material-symbols-outlined text-[19px] leading-none">{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",
+                          isActive ? "bg-white text-primary" : "bg-red-500 text-white",
                         )}
                       >
                         {badge}