DG7/MRF7 移动信息架构与展示去重治理

client/src/components/mobile/MobileBottomNav.tsx

@@ -37,12 +37,11 @@ export function MobileBottomNav() {
     >
       <div className="relative z-[71] grid grid-cols-4 gap-1">
         {MOBILE_NAV_ITEMS.map((item) => {
-          const disabled = item.key === "approvals"
-            ? !canAccessApprovals
-            : item.anyOf
+          const disabled = item.anyOf
               ? !hasAnyPermission(permissions, [...item.anyOf])
               : false;
           const badge = item.key === "approvals" && pendingCount > 0 ? resolveBadgeLabel(pendingCount) : null;
+          const label = item.key === "approvals" && !canAccessApprovals ? "进度" : item.label;
 
           if (disabled) {
             return (
@@ -53,14 +52,14 @@ export function MobileBottomNav() {
                 className="touch-target flex h-12 min-h-0 min-w-0 select-none flex-col items-center justify-center gap-0.5 rounded-xl px-0.5 py-1 text-[11px] font-medium leading-none text-zinc-400"
                 disabled
                 aria-disabled="true"
-                title={`${item.label}不可用`}
+                title={`${label}不可用`}
               >
                 <MobileIcon name={item.icon} className="size-5" />
                 <span
                   className="max-w-full overflow-hidden text-ellipsis whitespace-nowrap"
                   data-testid={`mobile-nav-${item.key}-label`}
                 >
-                  {item.label}
+                  {label}
                 </span>
               </button>
             );
@@ -83,26 +82,26 @@ export function MobileBottomNav() {
             >
               {({ isActive }) => (
                 <>
-                  <span>
+                  <span className="relative">
                     <MobileIcon name={item.icon} className="size-5" />
+                    {badge ? (
+                      <span
+                        data-testid={`mobile-nav-${item.key}-badge`}
+                        className={cn(
+                          "pointer-events-none absolute left-[calc(100%+1px)] top-0 min-w-4 -translate-y-1/2 rounded-full px-1 text-center text-[10px] font-semibold leading-4 shadow-sm",
+                          isActive ? "bg-red-500 text-white" : "bg-red-500 text-white",
+                        )}
+                      >
+                        {badge}
+                      </span>
+                    ) : null}
                   </span>
                   <span
                     className="max-w-full overflow-hidden text-ellipsis whitespace-nowrap"
                     data-testid={`mobile-nav-${item.key}-label`}
                   >
-                    {item.label}
+                    {label}
                   </span>
-                  {badge ? (
-                    <span
-                      data-testid={`mobile-nav-${item.key}-badge`}
-                      className={cn(
-                        "pointer-events-none absolute right-1 top-1 min-w-4 rounded-full px-1 text-[10px] font-semibold leading-4 shadow-sm",
-                        isActive ? "bg-red-500 text-white" : "bg-red-500 text-white",
-                      )}
-                    >
-                      {badge}
-                    </span>
-                  ) : null}
                 </>
               )}
             </NavLink>