MUD6 推广移动统一设计

client/src/pages/MobileMePage.tsx

@@ -38,11 +38,11 @@ function MobileActionLink({
   return (
     <Link
       to={to}
-      className="mobile-me-action-link"
+      className="mobile-action-link mobile-me-action-link"
       data-testid="mobile-me-action-link"
     >
-      <MobileIcon name={icon} className="mobile-me-action-icon" />
-      <span className="mobile-me-action-copy">
+      <MobileIcon name={icon} className="mobile-action-icon mobile-me-action-icon" />
+      <span className="mobile-action-copy mobile-me-action-copy">
         <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}
       </span>
@@ -82,11 +82,11 @@ export function MobileMePage() {
       <PageHeader title="我的" />
 
       <SectionPanel title="个人信息">
-        <div className="mobile-me-profile-row" data-testid="mobile-me-profile-row">
-          <div className="mobile-me-avatar-slot" data-testid="mobile-me-avatar-slot">
+        <div className="mobile-slot-row mobile-me-profile-row" data-testid="mobile-me-profile-row">
+          <div className="mobile-slot-avatar mobile-me-avatar-slot" data-testid="mobile-me-avatar-slot">
             <EmployeeAvatar name={me?.name ?? "员工"} src={profile?.avatarUrl} size="md" />
           </div>
-          <div className="mobile-me-profile-copy" data-testid="mobile-me-profile-copy">
+          <div className="mobile-slot-copy mobile-me-profile-copy" data-testid="mobile-me-profile-copy">
             <div className="text-lg font-semibold leading-7 text-zinc-900" data-testid="mobile-me-profile-name">
               {me?.name ?? "-"}
             </div>
@@ -113,7 +113,7 @@ export function MobileMePage() {
       </SectionPanel>
 
       <SectionPanel title="更多入口">
-        <div className="mobile-me-entry-grid" data-testid="mobile-more-links">
+        <div className="mobile-entry-grid mobile-me-entry-grid" data-testid="mobile-more-links">
           <MobileActionLink to="/mobile/notifications" label="通知中心" icon="notifications" />
           <MobileActionLink to="/mobile/leave" label="请假" icon="event_available" />
           <MobileActionLink to="/mobile/reimbursements" label="报销" icon="request_quote" />
@@ -125,7 +125,7 @@ export function MobileMePage() {
 
       {canAccessAdmin ? (
         <SectionPanel title="管理入口">
-          <div className="mobile-me-entry-grid">
+          <div className="mobile-entry-grid mobile-me-entry-grid">
             <MobileActionLink to="/mobile/me" label="人员管理" icon="group" />
             <MobileActionLink to="/mobile/me" label="组织架构" icon="account_tree" />
             <MobileActionLink to="/mobile/me" label="系统设置" icon="settings" />