MUD6 推广移动统一设计

client/src/pages/MobileApprovalsPage.tsx

@@ -811,7 +811,7 @@ export function MobileApprovalsPage() {
         <p className="rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-700">{message}</p>
       ) : null}
 
-      <section className="card-std space-y-4 p-4" data-testid="mobile-approvals-list">
+      <section className="mobile-card space-y-4" data-testid="mobile-approvals-list">
         <div className="flex flex-wrap items-center justify-between gap-3">
           <div>
             <h3 className="text-base font-semibold text-zinc-900">{listTitle}</h3>
@@ -835,7 +835,7 @@ export function MobileApprovalsPage() {
             placeholder="搜索待办"
           />
 
-          <details className="rounded-xl border border-zinc-200 bg-zinc-50/70 px-3 py-2 text-sm">
+          <details className="mobile-subcard bg-zinc-50/70 text-sm">
             <summary className="cursor-pointer select-none font-medium text-zinc-700">
               筛选与批量
             </summary>
@@ -891,7 +891,7 @@ export function MobileApprovalsPage() {
         </div>
 
         {batchMode ? (
-          <div className="rounded-2xl border border-zinc-200 bg-zinc-50 p-3 text-sm">
+          <div className="mobile-subcard bg-zinc-50 text-sm">
             <div className="flex flex-wrap items-center justify-between gap-3">
               <div className="text-zinc-700">已选 {selectedBatchTaskIds.length} 条</div>
               <div className="grid w-full gap-2 sm:flex sm:w-auto sm:flex-wrap">
@@ -964,7 +964,7 @@ export function MobileApprovalsPage() {
               return (
                 <div
                   key={task.id}
-                  className={`flex gap-3 rounded-xl border px-3 py-3 ${
+                  className={`mobile-list-card flex gap-3 ${
                     isBatchSelected ? "border-primary bg-primary-50" : "border-zinc-200 bg-white"
                   }`}
                 >
@@ -999,7 +999,7 @@ export function MobileApprovalsPage() {
             return (
               <button
                 key={task.id}
-                className={`min-h-20 w-full rounded-xl border px-3 py-3 text-left transition-colors ${
+                className={`mobile-list-card min-h-20 w-full text-left transition-colors ${
                   isSelected ? "border-primary bg-primary-50" : "border-zinc-200 bg-white"
                 }`}
                 data-testid={`mobile-approvals-task-${task.id}`}
@@ -1022,7 +1022,7 @@ export function MobileApprovalsPage() {
         </div>
       </section>
 
-      <section ref={detailSectionRef} className="card-std scroll-mt-4 space-y-3 p-4" data-testid="mobile-approvals-detail">
+      <section ref={detailSectionRef} className="mobile-card scroll-mt-4 space-y-3" data-testid="mobile-approvals-detail">
         <h3 className="text-base font-semibold text-zinc-900">处理</h3>
 
         {!selectedTaskId ? <p className="text-sm text-zinc-500">请先选择任务。</p> : null}
@@ -1045,7 +1045,7 @@ export function MobileApprovalsPage() {
 
         {selectedTask ? (
           <>
-            <div className="rounded-lg border border-zinc-200 p-3 text-sm">
+            <div className="mobile-list-card text-sm">
               <div>任务状态：{workflowStatusLabel(selectedTask.task.status)}</div>
               <div>步骤：{selectedTask.task.stepName}</div>
               <div>对象类型：{entityLabel(selectedTask.workflowInstance?.entityType)}</div>
@@ -1105,7 +1105,7 @@ export function MobileApprovalsPage() {
                   <p className="text-xs text-zinc-500">离线仅保存通过 / 驳回草稿，联网同步成功后才会正式提交。</p>
                 ) : null}
 
-                <div className="grid gap-2 sm:grid-cols-3">
+                <div className="grid gap-2 min-[390px]:grid-cols-3">
                   <Button
                     className="min-h-12 w-full"
                     data-testid="mobile-approvals-approve"
@@ -1150,7 +1150,7 @@ export function MobileApprovalsPage() {
                 </div>
 
                 {canTransfer ? (
-                  <div className="space-y-3 rounded-lg border border-zinc-200 bg-white p-3 text-sm">
+                  <div className="mobile-list-card space-y-3 text-sm">
                     <p className="font-medium text-zinc-800">转审</p>
                     <select
                       className="h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
@@ -1192,7 +1192,7 @@ export function MobileApprovalsPage() {
         ) : null}
       </section>
 
-      <section className="card-std space-y-3 p-4" data-testid="mobile-approvals-queue">
+      <section className="mobile-card space-y-3" data-testid="mobile-approvals-queue">
         <div className="flex items-center justify-between gap-3">
           <h3 className="text-base font-semibold text-zinc-900">离线草稿</h3>
           <span className="text-sm text-zinc-500">{currentQueueItems.length ? `待同步 ${currentQueueItems.length}` : "无草稿"}</span>
@@ -1216,7 +1216,7 @@ export function MobileApprovalsPage() {
         {!currentQueueItems.length ? <p className="text-sm text-zinc-500">暂无待同步草稿。</p> : null}
 
         {currentQueueItems.map((item) => (
-          <div key={item.id} className="rounded-lg border border-zinc-200 px-3 py-3 text-sm">
+          <div key={item.id} className="mobile-list-card text-sm">
             <div className="font-medium text-zinc-900">
               {publicReference(item.taskSnapshot.reference) ?? entityLabel(item.taskSnapshot.entityType)} · {item.action === "approve" ? "通过" : "驳回"}
             </div>