DG7/MRF7 移动信息架构与展示去重治理

client/src/pages/MobileLeavePage.tsx

@@ -1,9 +1,11 @@
 import { useMemo, useRef, useState } from "react";
+import { Link, useParams } from "react-router-dom";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { toast } from "sonner";
 import {
   createLeaveRequest,
   fetchLeaveBalances,
+  fetchLeaveRequestDetail,
   fetchLeaveRequests,
   fetchLeaveTypes,
   patchLeaveRequest,
@@ -60,11 +62,13 @@ function LeaveRecordCard({
   isSaving,
   onEdit,
   onSubmit,
+  showActions = true,
 }: {
   item: LeaveRequestItem;
   isSaving: boolean;
   onEdit: (item: LeaveRequestItem) => void;
   onSubmit: (item: LeaveRequestItem) => void;
+  showActions?: boolean;
 }) {
   const canEdit = item.status === "draft" || item.status === "rejected";
   const canSubmit = item.status === "draft" || item.status === "rejected";
@@ -104,7 +108,7 @@ function LeaveRecordCard({
         </div>
       ) : null}
 
-      {canEdit || canSubmit ? (
+      {showActions && (canEdit || canSubmit) ? (
         <div className="mobile-two-action-grid mt-4">
           {canEdit ? (
             <Button variant="secondary" type="button" disabled={isSaving} onClick={() => onEdit(item)}>
@@ -124,6 +128,7 @@ function LeaveRecordCard({
 
 export function MobileLeavePage() {
   const queryClient = useQueryClient();
+  const { leaveRequestId = "" } = useParams();
   const { permissions } = useAuth();
   const canCreateLeave = hasPermission(permissions, "leave.create");
   const [statusFilter, setStatusFilter] = useState<LeaveStatusFilter>("all");
@@ -158,6 +163,12 @@ export function MobileLeavePage() {
       }),
   });
 
+  const detailQuery = useQuery({
+    enabled: Boolean(leaveRequestId),
+    queryKey: ["mobile", "leave", "detail", leaveRequestId],
+    queryFn: () => fetchLeaveRequestDetail(leaveRequestId),
+  });
+
   const invalidateLeaveQueries = async () => {
     await Promise.all([
       queryClient.invalidateQueries({ queryKey: ["mobile", "leave"] }),
@@ -265,6 +276,35 @@ export function MobileLeavePage() {
     window.scrollTo({ top: 0, behavior: "smooth" });
   };
 
+  if (leaveRequestId) {
+    return (
+      <PageScaffold className="space-y-3 pb-4">
+        <PageHeader
+          title="请假详情"
+          actions={
+            <Button asChild size="sm" type="button" variant="secondary">
+              <Link to="/mobile/leave">返回</Link>
+            </Button>
+          }
+        />
+
+        {detailQuery.isLoading ? <div className="mobile-card text-sm text-zinc-500">加载中...</div> : null}
+        {detailQuery.isError ? (
+          <div className="mobile-card text-sm text-red-600">{resolveErrorMessage(detailQuery.error)}</div>
+        ) : null}
+        {detailQuery.data ? (
+          <LeaveRecordCard
+            item={detailQuery.data}
+            isSaving={false}
+            onEdit={startEditing}
+            onSubmit={(nextItem) => submitMutation.mutate(nextItem)}
+            showActions={false}
+          />
+        ) : null}
+      </PageScaffold>
+    );
+  }
+
   return (
     <PageScaffold className="space-y-3 pb-4">
       <PageHeader title="请假" />