From 06c9ab1be7b47bc8bc58032e04d23566418cfc66 Mon Sep 17 00:00:00 2001
From: shunli <shunli@qq.com>
Date: Fri, 8 May 2026 01:04:34 +0800
Subject: [PATCH] =?UTF-8?q?R109/A1,A5=20=E4=BC=98=E5=8C=96=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E5=BA=95=E9=83=A8=E5=AF=BC=E8=88=AA=E5=92=8C?=
 =?UTF-8?q?=E5=B8=B8=E7=94=A8=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/mobile/MobileBottomNav.tsx | 16 ++++----
 client/src/pages/MobileLeavePage.tsx          | 14 +++----
 client/src/pages/MobileMePage.tsx             | 38 +++++++++----------
 3 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/client/src/components/mobile/MobileBottomNav.tsx b/client/src/components/mobile/MobileBottomNav.tsx
index 4dd805fc..d8576955 100644
--- a/client/src/components/mobile/MobileBottomNav.tsx
+++ b/client/src/components/mobile/MobileBottomNav.tsx
@@ -33,8 +33,8 @@ export function MobileBottomNav() {
   const pendingCount = pendingCountQuery.data ?? 0;
 
   return (
-    <nav className="z-20 shrink-0 border-t border-zinc-200 bg-white/95 px-2 pb-[max(0.5rem,env(safe-area-inset-bottom))] pt-2 shadow-[0_-8px_24px_rgba(15,23,42,0.08)] backdrop-blur md:hidden">
-      <div className="grid grid-cols-4 gap-2">
+    <nav className="z-20 shrink-0 border-t border-zinc-200 bg-white/95 px-2 pb-[max(0.25rem,env(safe-area-inset-bottom))] pt-1.5 shadow-[0_-6px_18px_rgba(15,23,42,0.06)] backdrop-blur md:hidden">
+      <div className="grid grid-cols-4 gap-1">
         {MOBILE_NAV_ITEMS.map((item) => {
           const disabled = item.anyOf ? !hasAnyPermission(permissions, [...item.anyOf]) : false;
           const badge = item.key === "approvals" && pendingCount > 0 ? resolveBadgeLabel(pendingCount) : null;
@@ -45,7 +45,7 @@ export function MobileBottomNav() {
                 key={item.key}
                 type="button"
                 data-testid={`mobile-nav-${item.key}`}
-                className="touch-target flex flex-col items-center justify-center gap-1 rounded-2xl px-2 py-2 text-xs font-medium text-zinc-400"
+                className="touch-target flex h-12 min-h-0 flex-col items-center justify-center gap-0.5 rounded-xl px-1 py-1 text-[11px] font-medium leading-none text-zinc-400"
                 disabled
                 aria-disabled="true"
                 title={`${item.label}不可用`}
@@ -59,14 +59,14 @@ export function MobileBottomNav() {
           return (
             <NavLink
               key={item.key}
-              end
+              end={item.to === "/mobile"}
               to={item.to}
               data-testid={`mobile-nav-${item.key}`}
               className={({ isActive }) =>
                 cn(
-                  "touch-target flex flex-col items-center justify-center gap-1 rounded-2xl px-2 py-2 text-xs font-medium transition-colors",
+                  "touch-target flex h-12 min-h-0 flex-col items-center justify-center gap-0.5 rounded-xl px-1 py-1 text-[11px] font-medium leading-none transition-colors",
                   isActive
-                    ? "bg-primary-50 text-primary ring-1 ring-primary-100"
+                    ? "bg-primary text-white shadow-sm"
                     : "text-zinc-500 hover:bg-zinc-50 hover:text-zinc-900",
                 )
               }
@@ -74,12 +74,12 @@ export function MobileBottomNav() {
               {({ isActive }) => (
                 <>
                   <span className="relative">
-                    <span className="material-symbols-outlined text-[20px]">{item.icon}</span>
+                    <span className="material-symbols-outlined text-[19px] leading-none">{item.icon}</span>
                     {badge ? (
                       <span
                         className={cn(
                           "absolute -right-3 -top-2 min-w-5 rounded-full px-1.5 py-0.5 text-[10px] font-semibold leading-none",
-                          isActive ? "bg-primary text-white" : "bg-red-500 text-white",
+                          isActive ? "bg-white text-primary" : "bg-red-500 text-white",
                         )}
                       >
                         {badge}
diff --git a/client/src/pages/MobileLeavePage.tsx b/client/src/pages/MobileLeavePage.tsx
index 0ed3234a..35a1884b 100644
--- a/client/src/pages/MobileLeavePage.tsx
+++ b/client/src/pages/MobileLeavePage.tsx
@@ -248,10 +248,10 @@ export function MobileLeavePage() {
   };
 
   return (
-    <PageScaffold className="space-y-4">
+    <PageScaffold className="space-y-3 pb-4">
       <PageHeader title="请假" />
 
-      <section className="rounded-lg border border-zinc-200 bg-white p-4 shadow-sm" data-testid="mobile-leave-summary">
+      <section className="rounded-lg border border-zinc-200 bg-white p-3 shadow-sm" data-testid="mobile-leave-summary">
         <div className="grid grid-cols-3 gap-3 text-sm">
           <div>
             <div className="text-xs text-zinc-500">可用</div>
@@ -268,7 +268,7 @@ export function MobileLeavePage() {
         </div>
       </section>
 
-      <section className="rounded-lg border border-zinc-200 bg-white p-4 shadow-sm" data-testid="mobile-leave-form">
+      <section className="rounded-lg border border-zinc-200 bg-white p-3 shadow-sm" data-testid="mobile-leave-form">
         <div className="mb-4 flex items-center justify-between gap-3">
           <h3 className="text-base font-semibold text-zinc-900">{editingItem ? "编辑请假" : "新建请假"}</h3>
           {editingItem ? (
@@ -278,7 +278,7 @@ export function MobileLeavePage() {
           ) : null}
         </div>
 
-        <div className="space-y-4">
+        <div className="space-y-3">
           <label className="block space-y-2 text-sm text-zinc-700">
             <span>假期类型</span>
             <select className="select-std" value={leaveTypeId} onChange={(event) => setLeaveTypeId(event.target.value)}>
@@ -353,7 +353,7 @@ export function MobileLeavePage() {
           </label>
 
           <Button
-            className="w-full"
+            className="min-h-12 w-full"
             type="button"
             disabled={!canCreateLeave || isSaving || !leaveTypeId || !startDate || !endDate}
             onClick={() => {
@@ -370,7 +370,7 @@ export function MobileLeavePage() {
         </div>
       </section>
 
-      <section className="rounded-lg border border-zinc-200 bg-white p-4 shadow-sm" data-testid="mobile-leave-balances">
+      <section className="rounded-lg border border-zinc-200 bg-white p-3 shadow-sm" data-testid="mobile-leave-balances">
         <h3 className="text-base font-semibold text-zinc-900">额度</h3>
         <div className="mt-3 space-y-2">
           {balancesQuery.isLoading ? <div className="text-sm text-zinc-500">加载中...</div> : null}
@@ -400,7 +400,7 @@ export function MobileLeavePage() {
         </div>
       </section>
 
-      <section className="rounded-lg border border-zinc-200 bg-white p-4 shadow-sm" data-testid="mobile-leave-records">
+      <section className="rounded-lg border border-zinc-200 bg-white p-3 shadow-sm" data-testid="mobile-leave-records">
         <h3 className="text-base font-semibold text-zinc-900">请假记录</h3>
         <Tabs value={statusFilter} onValueChange={(value) => setStatusFilter(value as LeaveStatusFilter)}>
           <TabsList className="mt-3 grid h-auto w-full grid-cols-4">
diff --git a/client/src/pages/MobileMePage.tsx b/client/src/pages/MobileMePage.tsx
index 0955164e..d8a08d09 100644
--- a/client/src/pages/MobileMePage.tsx
+++ b/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}