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

client/src/pages/MobileCapturePage.tsx

@@ -196,26 +196,73 @@ export function MobileCapturePage() {
           </span>
         </div>
 
-        <label
-          htmlFor="mobile-capture-file"
-          className="flex min-h-36 cursor-pointer flex-col items-center justify-center rounded-2xl border border-dashed border-zinc-300 bg-zinc-50 px-4 py-6 text-center transition-colors hover:border-zinc-400 hover:bg-white"
-        >
-          <span className="material-symbols-outlined text-[32px] text-zinc-700">add_photo_alternate</span>
-          <span className="mt-2 text-sm font-semibold text-zinc-900">拍照或选择文件</span>
-          <span className="mt-1 text-xs leading-5 text-zinc-500">JPG、PNG、PDF 均可上传</span>
-        </label>
-        <input
-          id="mobile-capture-file"
-          accept="image/*,application/pdf"
-          capture="environment"
-          className="sr-only"
-          data-testid="mobile-capture-file"
-          onChange={(event) => {
-            setSelectedFiles(Array.from(event.target.files ?? []));
-          }}
-          multiple
-          type="file"
-        />
+        <div className="grid gap-2" data-testid="mobile-capture-file">
+          <label
+            htmlFor="mobile-capture-camera-file"
+            className="flex min-h-16 cursor-pointer items-center gap-3 rounded-xl border border-zinc-200 bg-white px-4 py-3 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-lg bg-blue-50 text-[22px] text-blue-700">photo_camera</span>
+            <span className="min-w-0">
+              <span className="block text-sm font-semibold text-zinc-900">拍照上传</span>
+              <span className="mt-0.5 block text-xs leading-5 text-zinc-500">打开摄像头拍摄发票</span>
+            </span>
+          </label>
+          <input
+            id="mobile-capture-camera-file"
+            accept="image/*"
+            capture="environment"
+            className="sr-only"
+            data-testid="mobile-capture-camera-file"
+            onChange={(event) => {
+              setSelectedFiles(Array.from(event.target.files ?? []));
+            }}
+            type="file"
+          />
+
+          <label
+            htmlFor="mobile-capture-image-file"
+            className="flex min-h-16 cursor-pointer items-center gap-3 rounded-xl border border-zinc-200 bg-white px-4 py-3 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-lg bg-cyan-50 text-[22px] text-cyan-700">image</span>
+            <span className="min-w-0">
+              <span className="block text-sm font-semibold text-zinc-900">选择图片</span>
+              <span className="mt-0.5 block text-xs leading-5 text-zinc-500">JPG、PNG、WEBP</span>
+            </span>
+          </label>
+          <input
+            id="mobile-capture-image-file"
+            accept="image/jpeg,image/png,image/webp"
+            className="sr-only"
+            data-testid="mobile-capture-image-file"
+            multiple
+            onChange={(event) => {
+              setSelectedFiles(Array.from(event.target.files ?? []));
+            }}
+            type="file"
+          />
+
+          <label
+            htmlFor="mobile-capture-pdf-file"
+            className="flex min-h-16 cursor-pointer items-center gap-3 rounded-xl border border-zinc-200 bg-white px-4 py-3 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-lg bg-emerald-50 text-[22px] text-emerald-700">picture_as_pdf</span>
+            <span className="min-w-0">
+              <span className="block text-sm font-semibold text-zinc-900">选择 PDF</span>
+              <span className="mt-0.5 block text-xs leading-5 text-zinc-500">数电票和扫描件 PDF</span>
+            </span>
+          </label>
+          <input
+            id="mobile-capture-pdf-file"
+            accept="application/pdf"
+            className="sr-only"
+            data-testid="mobile-capture-pdf-file"
+            multiple
+            onChange={(event) => {
+              setSelectedFiles(Array.from(event.target.files ?? []));
+            }}
+            type="file"
+          />
+        </div>
 
         <div className="rounded-xl border border-zinc-200 bg-white px-3 py-3 text-sm text-zinc-600">
           <span className="font-medium text-zinc-800">当前文件：</span>

client/src/pages/MobileMePage.tsx

@@ -103,7 +103,7 @@ export function MobileMePage() {
         <div className="grid gap-2">
           <MobileActionLink to="/mobile/profile" label="个人设置" description="企业微信、账号与通知" icon="manage_accounts" />
           {me?.id ? (
-            <MobileActionLink to={`/people/${me.id}`} label="员工档案" description="办公地点和紧急联系人" icon="badge" />
+            <MobileActionLink to="/mobile/profile" label="账号资料" description="员工号和联系方式" icon="badge" />
           ) : null}
         </div>
       </SectionPanel>

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;

client/src/pages/MobileProfilePage.tsx

@@ -0,0 +1,222 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { useSearchParams } from "react-router-dom";
+import { fetchWecomConfig, startWecomBind, unbindWecom, updateNotificationPreferences } from "../api/auth";
+import { isApiError } from "../api/types";
+import { useAuth } from "../auth/AuthContext";
+import { PageHeader } from "../components/common/PageHeader";
+import { PageScaffold } from "../components/patterns/PageScaffold";
+import { SectionPanel } from "../components/patterns/SectionPanel";
+import { Button } from "../components/ui/button";
+import {
+  resolveWecomBindNotice,
+  resolveWecomEntryStatus,
+  type WecomNotice,
+} from "../lib/wecomEntry";
+
+function noticeClasses(tone: WecomNotice["tone"]) {
+  if (tone === "success") {
+    return "border-emerald-200 bg-emerald-50 text-emerald-700";
+  }
+  if (tone === "warning") {
+    return "border-amber-200 bg-amber-50 text-amber-700";
+  }
+  return "border-zinc-200 bg-zinc-50 text-zinc-700";
+}
+
+function statusTone(status?: string) {
+  if (status === "active") return "badge-success";
+  if (status === "inactive") return "badge-warning";
+  return "badge-neutral";
+}
+
+function resolveProfileError(error: unknown) {
+  if (isApiError(error)) {
+    return `${error.code}: ${error.message}`;
+  }
+  if (error instanceof Error) {
+    return error.message;
+  }
+  return "请求失败，请稍后重试。";
+}
+
+function resolveBinding(
+  binding: {
+    externalUserId?: string;
+    userId?: string;
+    createdAt?: string | null;
+    boundAt?: string | null;
+  } | null | undefined,
+) {
+  return {
+    externalUserId: binding?.externalUserId ?? binding?.userId ?? "",
+    createdAt: binding?.createdAt ?? binding?.boundAt ?? null,
+  };
+}
+
+function maskExternalUserId(value: string) {
+  if (!value) return "-";
+  if (value.length <= 8) {
+    return value;
+  }
+  return `${value.slice(0, 4)}****${value.slice(-4)}`;
+}
+
+export function MobileProfilePage() {
+  const { me, refreshMe } = useAuth();
+  const [searchParams] = useSearchParams();
+  const wecomConfigQuery = useQuery({
+    queryKey: ["auth", "wecom-config"],
+    queryFn: () => fetchWecomConfig(),
+    staleTime: 60_000,
+  });
+
+  const bindMutation = useMutation({
+    mutationFn: async () => startWecomBind("/mobile/profile"),
+    onSuccess: (payload) => {
+      window.location.assign(payload.loginUrl);
+    },
+    onError: (error) => {
+      toast.error(resolveProfileError(error));
+    },
+  });
+
+  const unbindMutation = useMutation({
+    mutationFn: () => unbindWecom(),
+    onSuccess: async () => {
+      await refreshMe();
+      toast.success("企业微信已解绑");
+    },
+    onError: (error) => {
+      toast.error(resolveProfileError(error));
+    },
+  });
+
+  const notificationPreferenceMutation = useMutation({
+    mutationFn: (notificationPushEnabled: boolean) => updateNotificationPreferences({ notificationPushEnabled }),
+    onSuccess: async () => {
+      await refreshMe();
+      toast.success("外部推送偏好已更新");
+    },
+    onError: (error) => {
+      toast.error(resolveProfileError(error));
+    },
+  });
+
+  const binding = resolveBinding(me?.wecomBinding);
+  const isBound = Boolean(binding.externalUserId);
+  const wecomStatus = resolveWecomEntryStatus(wecomConfigQuery.data);
+  const bindNotice = resolveWecomBindNotice(searchParams.get("wecomBind"));
+
+  return (
+    <PageScaffold className="pb-4">
+      <div className="space-y-3" data-testid="mobile-profile-page">
+      <PageHeader
+        title="个人设置"
+        meta={<span className={statusTone(me?.status)}>{me?.status === "active" ? "账号正常" : "账号待确认"}</span>}
+      />
+
+      {bindNotice ? (
+        <div className={`rounded-lg border px-3 py-2 text-sm ${noticeClasses(bindNotice.tone)}`} data-testid="mobile-profile-wecom-notice">
+          <div className="font-medium">{bindNotice.title}</div>
+          <div className="mt-1 leading-5">{bindNotice.description}</div>
+        </div>
+      ) : null}
+
+      <SectionPanel title="基本信息">
+        <dl className="grid gap-3 text-sm">
+          <div className="rounded-lg border border-zinc-200 bg-white px-3 py-3">
+            <dt className="text-xs text-zinc-500">姓名</dt>
+            <dd className="mt-1 font-medium text-zinc-900">{me?.name ?? "-"}</dd>
+          </div>
+          <div className="rounded-lg border border-zinc-200 bg-white px-3 py-3">
+            <dt className="text-xs text-zinc-500">员工号</dt>
+            <dd className="mt-1 font-medium text-zinc-900">{me?.employeeNo ?? "-"}</dd>
+          </div>
+          <div className="rounded-lg border border-zinc-200 bg-white px-3 py-3">
+            <dt className="text-xs text-zinc-500">邮箱</dt>
+            <dd className="mt-1 break-words font-medium text-zinc-900">{me?.email ?? "-"}</dd>
+          </div>
+          <div className="rounded-lg border border-zinc-200 bg-white px-3 py-3">
+            <dt className="text-xs text-zinc-500">手机号</dt>
+            <dd className="mt-1 font-medium text-zinc-900">{me?.phone ?? "-"}</dd>
+          </div>
+        </dl>
+      </SectionPanel>
+
+      <SectionPanel title="外部通知推送">
+        <label className="flex min-h-12 items-center justify-between gap-3 rounded-lg border border-zinc-200 bg-white px-3 py-3 text-sm text-zinc-800">
+          <span>接收外部渠道推送</span>
+          <input
+            type="checkbox"
+            className="h-5 w-5 rounded border-zinc-300"
+            checked={Boolean(me?.notificationPushEnabled ?? true)}
+            disabled={!me || notificationPreferenceMutation.isPending}
+            onChange={(event) => notificationPreferenceMutation.mutate(event.target.checked)}
+          />
+        </label>
+      </SectionPanel>
+
+      <SectionPanel title="企业微信绑定">
+        <div className="space-y-3" data-testid="mobile-profile-wecom-card">
+          <div className="rounded-lg border border-zinc-200 bg-white px-3 py-3">
+            <div className="text-xs text-zinc-500">接入状态</div>
+            <div className="mt-1 font-semibold text-zinc-900">{wecomStatus.label}</div>
+            <div className="mt-1 text-sm leading-5 text-zinc-500">{wecomStatus.description}</div>
+          </div>
+
+          <div className="rounded-lg border border-zinc-200 bg-white px-3 py-3">
+            <div className="flex items-center justify-between gap-3">
+              <div>
+                <div className="text-xs text-zinc-500">当前绑定</div>
+                <div className="mt-1 font-semibold text-zinc-900">{isBound ? "已绑定" : "未绑定"}</div>
+              </div>
+              <span className={isBound ? "badge-success" : "badge-neutral"}>{isBound ? "可用" : "待绑定"}</span>
+            </div>
+            {isBound ? (
+              <div className="mt-3 rounded-lg bg-zinc-50 px-3 py-2 text-xs leading-5 text-zinc-500">
+                <div>绑定标识：{maskExternalUserId(binding.externalUserId)}</div>
+                <div>绑定时间：{binding.createdAt ? new Date(binding.createdAt).toLocaleString() : "-"}</div>
+              </div>
+            ) : null}
+          </div>
+
+          <div className="grid grid-cols-2 gap-2">
+            <Button
+              className="w-full"
+              type="button"
+              disabled={!wecomConfigQuery.data?.bindEnabled || bindMutation.isPending}
+              onClick={() => bindMutation.mutate()}
+            >
+              {isBound ? "重新绑定" : "立即绑定"}
+            </Button>
+            <Button
+              className="w-full"
+              type="button"
+              variant="secondary"
+              disabled={!isBound || unbindMutation.isPending}
+              onClick={() => unbindMutation.mutate()}
+            >
+              解绑
+            </Button>
+          </div>
+        </div>
+      </SectionPanel>
+
+      <SectionPanel title="账号状态">
+        <div className="space-y-3 text-sm">
+          <div className="flex flex-wrap gap-2">
+            <span className={statusTone(me?.status)}>{me?.status === "active" ? "active" : me?.status ?? "unknown"}</span>
+            {(me?.roleCodes ?? []).map((role) => (
+              <span className="badge-neutral" key={role}>{role}</span>
+            ))}
+          </div>
+          <p className="text-zinc-500">角色和权限由管理员统一维护。</p>
+        </div>
+      </SectionPanel>
+      </div>
+    </PageScaffold>
+  );
+}
+
+export default MobileProfilePage;

client/src/pages/MobileReimbursementsPage.tsx

@@ -4,12 +4,14 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { toast } from "sonner";
 import {
   createReimbursement,
+  deleteReimbursement,
   fetchReimbursements,
   type ReimbursementListItem,
   type ReimbursementStatus,
 } from "../api/reimbursements";
 import { useAuth } from "../auth/AuthContext";
 import { hasPermission } from "../auth/permissions";
+import { ConfirmDialog } from "../components/common/ConfirmDialog";
 import { Button } from "../components/ui/button";
 import { Tabs, TabsList, TabsTrigger } from "../components/ui/tabs";
 import { PageHeader } from "../components/common/PageHeader";
@@ -48,7 +50,17 @@ function formatDate(value: string | null | undefined) {
   return value || "未填写日期";
 }
 
-function ReimbursementCard({ item }: { item: ReimbursementListItem }) {
+function ReimbursementCard({
+  item,
+  canDeleteDraft,
+  isDeleting,
+  onDelete,
+}: {
+  item: ReimbursementListItem;
+  canDeleteDraft: boolean;
+  isDeleting: boolean;
+  onDelete: (item: ReimbursementListItem) => void;
+}) {
   const actionLabel = item.status === "draft" || item.status === "rejected" ? "继续编辑" : "查看详情";
   const displayCode = resolveReimbursementDisplayCode(item);
 
@@ -75,9 +87,23 @@ function ReimbursementCard({ item }: { item: ReimbursementListItem }) {
 
       {item.description ? <p className="mt-3 line-clamp-2 text-sm text-zinc-500">{item.description}</p> : null}
 
-      <Button asChild className="mt-4 w-full" type="button">
-        <Link to={`/mobile/reimbursements/${item.id}`}>{actionLabel}</Link>
-      </Button>
+      <div className={canDeleteDraft ? "mt-4 grid grid-cols-2 gap-2" : "mt-4"}>
+        <Button asChild className="w-full" type="button">
+          <Link to={`/mobile/reimbursements/${item.id}`}>{actionLabel}</Link>
+        </Button>
+        {canDeleteDraft ? (
+          <Button
+            className="w-full"
+            data-testid="mobile-reimbursement-delete"
+            disabled={isDeleting}
+            onClick={() => onDelete(item)}
+            type="button"
+            variant="destructive"
+          >
+            删除草稿
+          </Button>
+        ) : null}
+      </div>
     </article>
   );
 }
@@ -87,7 +113,9 @@ export function MobileReimbursementsPage() {
   const queryClient = useQueryClient();
   const { permissions } = useAuth();
   const [status, setStatus] = useState<ReimbursementStatus>("draft");
+  const [deleteTarget, setDeleteTarget] = useState<ReimbursementListItem | null>(null);
   const canCreateExpense = hasPermission(permissions, "expense.create");
+  const canDeleteExpense = hasPermission(permissions, "expense.delete_own");
 
   const listQuery = useQuery({
     queryKey: ["mobile", "reimbursements", status],
@@ -106,6 +134,21 @@ export function MobileReimbursementsPage() {
     },
   });
 
+  const deleteMutation = useMutation({
+    mutationFn: (reimbursementId: string) => deleteReimbursement(reimbursementId),
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ["mobile", "reimbursements"] }),
+        queryClient.invalidateQueries({ queryKey: ["reimbursements"] }),
+      ]);
+      setDeleteTarget(null);
+      toast.success("草稿已删除");
+    },
+    onError: (error) => {
+      toast.error(resolveErrorMessage(error));
+    },
+  });
+
   const items = listQuery.data?.items ?? [];
   const total = listQuery.data?.total ?? 0;
   const totalAmount = useMemo(
@@ -166,10 +209,35 @@ export function MobileReimbursementsPage() {
             <div className="rounded-lg border border-dashed border-zinc-200 p-6 text-center text-sm text-zinc-500">暂无报销记录</div>
           ) : null}
           {items.map((item) => (
-            <ReimbursementCard item={item} key={item.id} />
+            <ReimbursementCard
+              canDeleteDraft={canDeleteExpense && item.status === "draft"}
+              isDeleting={deleteMutation.isPending}
+              item={item}
+              key={item.id}
+              onDelete={setDeleteTarget}
+            />
           ))}
         </div>
       </section>
+
+      <ConfirmDialog
+        open={Boolean(deleteTarget)}
+        onOpenChange={(open) => {
+          if (!open) {
+            setDeleteTarget(null);
+          }
+        }}
+        title="删除草稿？"
+        description="删除后无法恢复，已添加发票会回到可用状态。"
+        variant="destructive"
+        confirmLabel="删除草稿"
+        onConfirm={async () => {
+          if (!deleteTarget) {
+            return;
+          }
+          await deleteMutation.mutateAsync(deleteTarget.id);
+        }}
+      />
     </PageScaffold>
   );
 }