WCM6 收口企业微信多手机移动渲染稳定化

client/src/pages/MobileCapturePage.tsx

@@ -5,6 +5,7 @@ import { uploadInvoice } from "../api/invoicePool";
 import { mapApiErrorMessage } from "../api/errorMessages";
 import { isApiError } from "../api/types";
 import { PageHeader } from "../components/common/PageHeader";
+import { MobileIcon } from "../components/mobile/MobileIcon";
 import { PageScaffold } from "../components/patterns/PageScaffold";
 import { Button } from "../components/ui/button";
 import { Spinner } from "../components/ui/spinner";
@@ -201,7 +202,7 @@ export function MobileCapturePage() {
             htmlFor="mobile-capture-pdf-file"
             className="flex min-h-16 cursor-pointer items-center gap-3 rounded-xl border border-zinc-200 bg-white px-4 py-3 text-left shadow-sm transition-colors hover:bg-zinc-50"
           >
-            <span className="material-symbols-outlined flex size-10 shrink-0 items-center justify-center rounded-lg bg-emerald-50 text-[22px] text-emerald-700">picture_as_pdf</span>
+            <MobileIcon name="picture_as_pdf" className="size-10 rounded-lg bg-emerald-50 p-2 text-emerald-700" />
             <span className="min-w-0">
               <span className="block text-sm font-semibold text-zinc-900">选择 PDF 发票</span>
               <span className="mt-0.5 block text-xs leading-5 text-zinc-500">数电票或扫描件 PDF</span>

client/src/pages/MobileMePage.tsx

@@ -9,6 +9,7 @@ import { useAuth } from "../auth/AuthContext";
 import { hasAnyPermission } from "../auth/permissions";
 import { EmployeeAvatar } from "../components/common/EmployeeAvatar";
 import { PageHeader } from "../components/common/PageHeader";
+import { MobileIcon } from "../components/mobile/MobileIcon";
 import { PageScaffold } from "../components/patterns/PageScaffold";
 import { SectionPanel } from "../components/patterns/SectionPanel";
 import { Button } from "../components/ui/button";
@@ -39,9 +40,7 @@ function MobileActionLink({
       to={to}
       className="flex min-h-12 items-center gap-3 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-left shadow-sm transition-colors hover:bg-zinc-50"
     >
-      <span className="material-symbols-outlined flex size-8 shrink-0 items-center justify-center rounded-lg bg-zinc-100 text-[18px] text-zinc-700">
-        {icon}
-      </span>
+      <MobileIcon name={icon} className="size-8 rounded-lg bg-zinc-100 p-1.5 text-zinc-700" />
       <span className="min-w-0">
         <span className="block text-sm font-semibold text-zinc-900">{label}</span>
         {description ? <span className="mt-0.5 block text-xs leading-5 text-zinc-500">{description}</span> : null}

client/src/pages/MobilePortalPage.tsx

@@ -15,6 +15,7 @@ import { useAuth } from "../auth/AuthContext";
 import { hasAnyPermission } from "../auth/permissions";
 import { PageHeader } from "../components/common/PageHeader";
 import { PageScaffold } from "../components/patterns/PageScaffold";
+import { MobileIcon } from "../components/mobile/MobileIcon";
 import { Button } from "../components/ui/button";
 import {
   MOBILE_APPROVAL_PERMISSIONS,
@@ -139,13 +140,11 @@ function ActionTile({ action }: { action: MobileAction }) {
       title={`${action.label}：${action.meta}`}
       aria-label={`${action.label}，${action.meta}`}
     >
-      <span
-        className="material-symbols-outlined mobile-icon-action__icon"
+      <MobileIcon
+        className="mobile-icon-action__icon"
         data-testid={`mobile-action-${action.key}-icon`}
-        aria-hidden="true"
-      >
-        {action.icon}
-      </span>
+        name={action.icon}
+      />
       <span className="mobile-icon-action__label" data-testid={`mobile-action-${action.key}-label`}>
         {action.label}
       </span>

client/src/pages/MobileReimbursementDetailPage.tsx

@@ -31,6 +31,7 @@ import type { PrecheckResponse } from "../api/feeControl";
 import { useAuth } from "../auth/AuthContext";
 import { hasPermission } from "../auth/permissions";
 import { ConfirmDialog } from "../components/common/ConfirmDialog";
+import { MobileIcon } from "../components/mobile/MobileIcon";
 import { PageScaffold } from "../components/patterns/PageScaffold";
 import { Button } from "../components/ui/button";
 import {
@@ -1175,7 +1176,7 @@ export function MobileReimbursementDetailPage() {
                   htmlFor="mobile-reimbursement-invoice-upload-pdf"
                   className="flex min-h-28 cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed border-zinc-300 bg-zinc-50 px-3 py-4 text-center"
                 >
-                  <span className="material-symbols-outlined text-[28px] text-zinc-700">picture_as_pdf</span>
+                  <MobileIcon name="picture_as_pdf" className="size-7 text-zinc-700" />
                   <span className="mt-2 text-sm font-semibold text-zinc-900">选择 PDF 发票</span>
                   <span className="mt-1 text-xs text-zinc-500">仅支持 PDF，减少拍照模糊和错传</span>
                 </label>