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

client/src/pages/MobileMePage.tsx

@@ -31,20 +31,20 @@ function MobileActionLink({
 }: {
   to: string;
   label: string;
-  description: string;
+  description?: string;
   icon: string;
 }) {
   return (
     <Link
       to={to}
-      className="flex min-h-16 items-center gap-3 rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-left shadow-sm transition-colors hover:bg-zinc-50"
+      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-10 shrink-0 items-center justify-center rounded-xl bg-zinc-100 text-[20px] text-zinc-700">
+      <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>
       <span className="min-w-0">
         <span className="block text-sm font-semibold text-zinc-900">{label}</span>
-        <span className="mt-0.5 block text-xs leading-5 text-zinc-500">{description}</span>
+        {description ? <span className="mt-0.5 block text-xs leading-5 text-zinc-500">{description}</span> : null}
       </span>
     </Link>
   );
@@ -78,12 +78,12 @@ export function MobileMePage() {
   const departmentName = profile?.department?.name ?? (me?.departmentId ? "已关联组织" : "待管理员维护");
 
   return (
-    <PageScaffold className="space-y-4">
+    <PageScaffold className="space-y-3 pb-4">
       <PageHeader title="我的" />
 
       <SectionPanel title="个人信息">
-        <div className="flex items-center gap-4">
-          <EmployeeAvatar name={me?.name ?? "员工"} src={profile?.avatarUrl} size="lg" />
+        <div className="flex items-center gap-3">
+          <EmployeeAvatar name={me?.name ?? "员工"} src={profile?.avatarUrl} size="md" />
           <div className="min-w-0 space-y-1">
             <div className="text-lg font-semibold text-zinc-900">{me?.name ?? "-"}</div>
             <div className="text-sm text-zinc-500">{departmentName}</div>
@@ -100,7 +100,7 @@ export function MobileMePage() {
       </SectionPanel>
 
       <SectionPanel title="账号与绑定">
-        <div className="grid gap-3">
+        <div className="grid gap-2">
           <MobileActionLink to="/settings/profile" label="个人设置" description="企业微信、账号与通知" icon="manage_accounts" />
           {me?.id ? (
             <MobileActionLink to={`/people/${me.id}`} label="员工档案" description="办公地点和紧急联系人" icon="badge" />
@@ -109,22 +109,22 @@ export function MobileMePage() {
       </SectionPanel>
 
       <SectionPanel title="更多入口">
-        <div className="grid gap-3" data-testid="mobile-more-links">
-          <MobileActionLink to="/notifications" label="通知中心" description="查看全部站内通知" icon="notifications" />
-          <MobileActionLink to="/mobile/leave" label="请假" description="申请和记录" icon="event_available" />
-          <MobileActionLink to="/mobile/reimbursements" label="报销" description="草稿和进度" icon="request_quote" />
-          {canAccessApprovals ? <MobileActionLink to="/mobile/approvals" label="审批" description="待办处理" icon="fact_check" /> : null}
-          {canAccessAssets ? <MobileActionLink to="/assets" label="资产" description="台账和盘点" icon="inventory_2" /> : null}
-          {canAccessProjects ? <MobileActionLink to="/projects" label="项目" description="项目和里程碑" icon="workspaces" /> : null}
+        <div className="grid grid-cols-2 gap-2" data-testid="mobile-more-links">
+          <MobileActionLink to="/notifications" label="通知中心" icon="notifications" />
+          <MobileActionLink to="/mobile/leave" label="请假" icon="event_available" />
+          <MobileActionLink to="/mobile/reimbursements" label="报销" icon="request_quote" />
+          {canAccessApprovals ? <MobileActionLink to="/mobile/approvals" label="审批" icon="fact_check" /> : null}
+          {canAccessAssets ? <MobileActionLink to="/assets" label="资产" icon="inventory_2" /> : null}
+          {canAccessProjects ? <MobileActionLink to="/projects" label="项目" icon="workspaces" /> : null}
         </div>
       </SectionPanel>
 
       {canAccessAdmin ? (
         <SectionPanel title="管理入口">
-          <div className="grid gap-3">
-            <MobileActionLink to="/people" label="人员管理" description="用户、角色和员工资料" icon="group" />
-            <MobileActionLink to="/organization" label="组织架构" description="部门和汇报关系" icon="account_tree" />
-            <MobileActionLink to="/system/settings" label="系统设置" description="工作区和系统参数" icon="settings" />
+          <div className="grid grid-cols-2 gap-2">
+            <MobileActionLink to="/people" label="人员管理" icon="group" />
+            <MobileActionLink to="/organization" label="组织架构" icon="account_tree" />
+            <MobileActionLink to="/system/settings" label="系统设置" icon="settings" />
           </div>
         </SectionPanel>
       ) : null}