修复 R124 企业微信移动入口与部署迁移门禁

client/src/pages/MobileNotificationsPage.tsx

@@ -0,0 +1,232 @@
+import { Link, useSearchParams } from "react-router-dom";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { fetchNotifications, markAllNotificationsRead, markNotificationRead } from "../api/notifications";
+import { isApiError } from "../api/types";
+import { mapApiErrorMessage } from "../api/errorMessages";
+import { PageHeader } from "../components/common/PageHeader";
+import { Pagination } from "../components/common/Pagination";
+import { PageScaffold } from "../components/patterns/PageScaffold";
+import { Button } from "../components/ui/button";
+import { Tabs, TabsList, TabsTrigger } from "../components/ui/tabs";
+import { resolveNotificationTargetLink } from "../lib/notificationLinks";
+import { resolveMobileEquivalentPath } from "../lib/runtimeContext";
+import { resolveErrorMessage } from "../lib/resolveErrorMessage";
+
+const PAGE_SIZE = 20;
+
+const NOTIFICATION_TYPE_OPTIONS = [
+  { label: "全部", value: "" },
+  { label: "审批待办", value: "workflow.task_assigned" },
+  { label: "报销", value: "reimbursement.approved,reimbursement.rejected,reimbursement.returned,reimbursement.paid" },
+  { label: "请假", value: "leave.approved,leave.rejected" },
+  { label: "采购", value: "purchase_request.approved,purchase_request.rejected" },
+  { label: "差旅", value: "travel_request.approved,travel_request.rejected" },
+  { label: "资产", value: "asset.assigned,asset.returned,asset.transferred" },
+  { label: "盘点", value: "inventory_check.completed" },
+];
+
+function resolveNotificationError(error: unknown) {
+  if (isApiError(error)) {
+    return `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`;
+  }
+  return "加载通知失败";
+}
+
+function resolveMobileNotificationTarget(item: Parameters<typeof resolveNotificationTargetLink>[0]) {
+  const targetLink = resolveNotificationTargetLink(item);
+  if (!targetLink) return null;
+  const [pathname, search = ""] = targetLink.split("?");
+  return resolveMobileEquivalentPath(pathname, search ? `?${search}` : "");
+}
+
+function formatTime(value: string) {
+  return value.slice(0, 19).replace("T", " ");
+}
+
+export function MobileNotificationsPage() {
+  const queryClient = useQueryClient();
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const unreadOnlyRaw = searchParams.get("unreadOnly") ?? "0";
+  const unreadOnly = unreadOnlyRaw === "1" || unreadOnlyRaw === "true";
+  const page = Number(searchParams.get("page") ?? "1") || 1;
+  const selectedType = searchParams.get("type") ?? "";
+
+  const updateFilters = (next: { unreadOnly?: boolean; page?: number; type?: string }) => {
+    const params = new URLSearchParams();
+    params.set("unreadOnly", (next.unreadOnly ?? unreadOnly) ? "1" : "0");
+    params.set("page", String(next.page ?? page));
+    const nextType = next.type ?? selectedType;
+    if (nextType) {
+      params.set("type", nextType);
+    }
+    setSearchParams(params);
+  };
+
+  const listQuery = useQuery({
+    queryKey: ["notifications", "list", unreadOnly, selectedType, page],
+    queryFn: () =>
+      fetchNotifications({
+        unreadOnly,
+        page,
+        pageSize: PAGE_SIZE,
+        ...(selectedType ? { type: selectedType } : {}),
+      }),
+  });
+
+  const markReadMutation = useMutation({
+    mutationFn: async (notificationId: string) => markNotificationRead(notificationId),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["notifications"] });
+    },
+  });
+
+  const markAllReadMutation = useMutation({
+    mutationFn: () => markAllNotificationsRead(),
+    onSuccess: async () => {
+      toast.success("已全部标为已读");
+      await queryClient.invalidateQueries({ queryKey: ["notifications"] });
+    },
+    onError: (error) => {
+      toast.error(resolveErrorMessage(error));
+    },
+  });
+
+  const notificationItems = listQuery.data?.items ?? [];
+  const totalPages = Math.max(1, Math.ceil((listQuery.data?.total ?? 0) / PAGE_SIZE));
+
+  return (
+    <PageScaffold className="pb-4">
+      <div className="space-y-3" data-testid="mobile-notifications-page">
+      <PageHeader
+        title="通知"
+        meta={<span className="badge-neutral">未读 {listQuery.data?.unreadCount ?? 0}</span>}
+        actions={
+          <Button
+            type="button"
+            variant="secondary"
+            data-testid="mobile-notifications-mark-all-read"
+            disabled={(listQuery.data?.unreadCount ?? 0) === 0 || markAllReadMutation.isPending}
+            onClick={() => markAllReadMutation.mutate()}
+          >
+            全部已读
+          </Button>
+        }
+      />
+
+      <section className="card-std space-y-4 p-4" data-testid="mobile-notifications-list">
+        <div className="space-y-3">
+          <Tabs
+            data-testid="mobile-notifications-filter-tabs"
+            value={unreadOnly ? "unread" : "all"}
+            onValueChange={(value) =>
+              updateFilters({
+                unreadOnly: value === "unread",
+                page: 1,
+              })
+            }
+          >
+            <TabsList className="grid h-auto w-full grid-cols-2">
+              <TabsTrigger data-testid="mobile-notifications-filter-all" value="all">
+                全部
+              </TabsTrigger>
+              <TabsTrigger data-testid="mobile-notifications-filter-unread" value="unread">
+                未读
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
+
+          <label className="flex items-center gap-2 text-sm text-zinc-600">
+            <span className="shrink-0">类型</span>
+            <select
+              data-testid="mobile-notifications-type-filter"
+              className="h-10 min-w-0 flex-1 rounded-lg border border-zinc-200 bg-white px-3 text-sm text-zinc-700 shadow-sm outline-none transition focus:border-zinc-300 focus:ring-2 focus:ring-zinc-100"
+              value={selectedType}
+              onChange={(event) =>
+                updateFilters({
+                  type: event.target.value,
+                  page: 1,
+                })
+              }
+            >
+              {NOTIFICATION_TYPE_OPTIONS.map((option) => (
+                <option key={option.label} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </select>
+          </label>
+        </div>
+
+        {listQuery.isLoading ? (
+          <div className="rounded-lg border border-dashed border-zinc-200 p-6 text-center text-sm text-zinc-500">加载中...</div>
+        ) : null}
+
+        {listQuery.isError ? (
+          <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
+            {resolveNotificationError(listQuery.error)}
+          </p>
+        ) : null}
+
+        {!listQuery.isLoading && !listQuery.isError && !notificationItems.length ? (
+          <div className="rounded-lg border border-dashed border-zinc-200 p-6 text-center text-sm text-zinc-500">暂无通知</div>
+        ) : null}
+
+        {notificationItems.map((item) => {
+          const targetLink = resolveMobileNotificationTarget(item);
+          return (
+            <article data-testid="mobile-notification-card" key={item.id} className="rounded-lg border border-zinc-200 bg-white p-4">
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0">
+                  <div className="text-sm font-semibold text-zinc-900">{item.title}</div>
+                  {item.body ? <div className="mt-1 text-xs leading-5 text-zinc-500">{item.body}</div> : null}
+                </div>
+                <span className={item.readAt ? "badge-neutral shrink-0" : "badge-warning shrink-0"}>
+                  {item.readAt ? "已读" : "未读"}
+                </span>
+              </div>
+
+              <div className="mt-3 text-xs text-zinc-500">{formatTime(item.createdAt)}</div>
+              <div className="mt-3 grid grid-cols-2 gap-2">
+                {targetLink ? (
+                  <Button asChild size="sm" variant="secondary" data-testid="mobile-notification-target-link">
+                    <Link to={targetLink}>查看</Link>
+                  </Button>
+                ) : null}
+
+                {!item.readAt ? (
+                  <Button
+                    className={targetLink ? "" : "col-span-2"}
+                    data-testid="mobile-notification-mark-read"
+                    size="sm"
+                    type="button"
+                    variant="secondary"
+                    disabled={markReadMutation.isPending}
+                    onClick={() => markReadMutation.mutate(item.id)}
+                  >
+                    标为已读
+                  </Button>
+                ) : null}
+              </div>
+            </article>
+          );
+        })}
+
+        <Pagination
+          page={page}
+          totalPages={totalPages}
+          onPageChange={(nextPage) =>
+            updateFilters({
+              page: nextPage,
+            })
+          }
+          testIdPrefix="mobile-notifications"
+        />
+      </section>
+      </div>
+    </PageScaffold>
+  );
+}
+
+export default MobileNotificationsPage;