UI6 优化移动首页快捷卡视觉

client/src/pages/MobilePortalPage.tsx

@@ -130,18 +130,25 @@ function ActionTile({ action }: { action: MobileAction }) {
       to={action.to}
       className={
         isPrimary
-          ? "flex min-h-24 flex-col justify-between rounded-lg border border-primary-100 bg-primary-50 p-3 text-primary shadow-sm"
+          ? "relative flex min-h-24 flex-col justify-between rounded-lg border border-primary-100 bg-primary-50 p-3 pr-14 text-primary shadow-sm"
           : isWarning
-            ? "flex min-h-24 flex-col justify-between rounded-lg border border-amber-200 bg-amber-50 p-3 text-amber-900"
-            : "flex min-h-24 flex-col justify-between rounded-lg border border-zinc-200 bg-white p-3 text-zinc-900 shadow-sm"
+            ? "relative flex min-h-24 flex-col justify-between rounded-lg border border-amber-200 bg-amber-50 p-3 pr-14 text-amber-900"
+            : "relative flex min-h-24 flex-col justify-between rounded-lg border border-zinc-200 bg-white p-3 pr-14 text-zinc-900 shadow-sm"
       }
       data-testid={`mobile-action-${action.key}`}
     >
-      <div className="flex items-center justify-between gap-2">
-        <span className="text-sm font-semibold">{action.label}</span>
-        <span className="material-symbols-outlined text-[20px]">{action.icon}</span>
+      <div className="min-w-0">
+        <span className="block min-w-0 whitespace-nowrap text-base font-semibold leading-6" data-testid={`mobile-action-${action.key}-label`}>
+          {action.label}
+        </span>
       </div>
-      <div className={isPrimary ? "text-xs text-primary/70" : "text-xs text-zinc-500"}>{action.meta}</div>
+      <span
+        className="material-symbols-outlined absolute right-3 top-3 flex size-8 items-center justify-center rounded-md bg-white/70 text-[21px] leading-none shadow-sm"
+        data-testid={`mobile-action-${action.key}-icon`}
+      >
+        {action.icon}
+      </span>
+      <div className={isPrimary ? "truncate text-xs text-primary/70" : "truncate text-xs text-zinc-500"}>{action.meta}</div>
     </Link>
   );
 }