报销审批需联网核对完整报销内容；当前不能通过、退回、驳回或转审。

退回意见

退回后原单可修改并重新提交，单号和审批历史会保留。

setReturnComment(event.target.value)} />
          <ReimbursementReturnReferencePicker evidence={model.evidence} onReference={appendReturnReference} />
          <Button className="min-h-11 w-full" data-testid={layout === "desktop" ? "workflow-task-return" : "mobile-approvals-return-submit"} disabled={actionDisabled || !returnComment.trim()} onClick={() => requestAction("return")} type="button" variant="secondary">确认退回</Button>
        </div>
      ) : null}
      {activeSecondaryAction === "reject" ? (
        <div className="space-y-2">
          <Label htmlFor={`${layout}-reimbursement-reject-comment`}>驳回意见</Label>
          <p className="text-xs text-zinc-500">驳回会终止本次流程，申请人通常需要重新发起。</p>
          <Textarea data-testid={layout === "desktop" ? "workflow-task-reject-comment" : "mobile-approvals-comment"} id={`${layout}-reimbursement-reject-comment`} value={rejectComment} onChange={(event) => setRejectComment(event.target.value)} />
          <Button className="min-h-11 w-full" data-testid={layout === "desktop" ? "workflow-task-reject" : "mobile-approvals-reject-submit"} disabled={actionDisabled || !rejectComment.trim()} onClick={() => requestAction("reject")} type="button" variant="secondary">确认驳回</Button>
        </div>
      ) : null}
      {activeSecondaryAction === "transfer" ? (
        <div className="space-y-2">
          <Label htmlFor={`${layout}-reimbursement-transfer-approver`}>目标审批人</Label>
          <select className="select-std min-h-11" data-testid={layout === "desktop" ? "workflow-task-transfer-approver" : "mobile-approvals-transfer-to"} id={`${layout}-reimbursement-transfer-approver`} value={selectedApprover} onChange={(event) => setSelectedApprover(event.target.value)}>
            <option value="">请选择目标审批人</option>
            {(approverQuery.data?.items ?? []).map((item) => <option key={item.id} value={item.id}>{item.name} ({item.employeeNo})</option>)}
          </select>
          <Label htmlFor={`${layout}-reimbursement-transfer-reason`}>转审理由</Label>
          <Textarea data-testid={layout === "desktop" ? "workflow-task-transfer-reason" : "mobile-approvals-transfer-reason"} id={`${layout}-reimbursement-transfer-reason`} value={transferReason} onChange={(event) => setTransferReason(event.target.value)} />
          <p className="text-xs text-zinc-500" data-testid={layout === "desktop" ? "workflow-task-transfer-disabled-reason" : "mobile-approvals-transfer-disabled-reason"}>{!selectedApprover ? "请先选择目标审批人。" : transferReason.trim().length < 10 ? `请填写转审理由，至少 10 个字（还差 ${10 - transferReason.trim().length} 个字）。` : "转审理由已满足要求。"}</p>
          <Button className="min-h-11 w-full" data-testid={layout === "desktop" ? "workflow-task-transfer" : "mobile-approvals-transfer-submit"} disabled={actionDisabled || !selectedApprover || transferReason.trim().length < 10} onClick={() => setTransferConfirmOpen(true)} type="button" variant="secondary">确认转审</Button>
        </div>
      ) : null}
    </>
  );
  const timeline = (
    <SectionPanel title="处理历史">
      <div className="detail-timeline" data-testid="reimbursement-workflow-history">
        {detail.history.length ? detail.history.map((item) => (
          <div className="detail-timeline-item" key={item.id}>
            <div className="font-medium text-zinc-900">{workflowActionLabel(item.action)} · {item.actorName || item.actorEmployeeNo}</div>
            <div className="text-zinc-600">{item.comment || "-"}</div>
            <div className="text-xs text-zinc-500">{formatDisplayDateTime(item.createdAt)}</div>
          </div>
        )) : <p className="text-sm text-zinc-500">暂无历史记录</p>}
      </div>
    </SectionPanel>
  );
  const hasMaterials = model.evidence.items.some((item) => item.invoices.length > 0)
    || model.evidence.unlinkedInvoices.length > 0
    || model.evidence.attachments.length > 0;
  const capabilities = {
    onOpenInvoice: (invoice: { id: string }) => openInvoiceMutation.mutate(invoice.id),
    onOpenAttachment: (attachment: { id: string }) => void openAttachment(attachment.id),
    onOpenMaterialBundle: hasMaterials ? () => void openAllMaterials() : undefined,
  };

if (layout === "mobile") {
    const mobileActions = detail.task.status === "pending" ? (
      <>
        <section className="mobile-card space-y-3">
          {offlineNotice}
          {issueAnchors}
          {commentEditor}
          <div className="grid grid-cols-2 gap-2">
            {allowedActions.has("return") || !online ? <Button className="min-h-11" data-testid="mobile-approvals-return" disabled={actionDisabled} onClick={() => setActiveSecondaryAction(activeSecondaryAction === "return" ? null : "return")} type="button" variant="secondary">退回</Button> : null}
            {allowedActions.has("reject") || !online ? <Button className="min-h-11" data-testid="mobile-approvals-reject" disabled={actionDisabled} onClick={() => setActiveSecondaryAction(activeSecondaryAction === "reject" ? null : "reject")} type="button" variant="secondary">驳回</Button> : null}
            {canTransfer || !online ? <Button className="min-h-11" data-testid="mobile-approvals-transfer" disabled={actionDisabled} onClick={() => setActiveSecondaryAction(activeSecondaryAction === "transfer" ? null : "transfer")} type="button" variant="secondary">转审</Button> : null}
          </div>
        </section>
        <MobileStickyActionBar testId="mobile-approvals-sticky-actions">
          <Button className="min-h-12 w-full" data-testid="mobile-approvals-approve" disabled={actionDisabled || !allowedActions.has("approve")} onClick={() => requestAction("approve")} type="button">通过</Button>
        </MobileStickyActionBar>
      </>
    ) : null;
    return (
      <>
        <ReimbursementMobileWorkspaceShell
          capabilities={capabilities}
          fallbackTo={backTarget}
          model={model}
          slots={{
            status: <StatusBadge label={workflowTaskStatusLabel(detail.task.status)} status={detail.task.status} />,
            beforeEvidence: detail.task.status !== "pending" ? <p className="mobile-card text-sm text-blue-800">当前显示报销单最新版本；审批意见与提交检查保留历史语义。</p> : null,
            afterEvidence: snapshot?.budgetCheckStatus === "missing" ? <p className="mobile-card text-sm text-zinc-500" id="reimbursement-workspace-snapshot">该次提交未留存预算快照。</p> : null,
            timeline,
            mobileActions,
          }}
        />
        {dialogs}
      </>
    );
  }

const actionPanel = (
    <BusinessDetailActionPanel
      title="审批决定"
      primaryAction={allowedActions.has("approve") ? <Button data-testid="workflow-task-approve" disabled={actionDisabled} onClick={() => requestAction("approve")} type="button">通过</Button> : null}
      secondaryActions={(
        <>
          {allowedActions.has("return") ? <Button data-testid="workflow-task-return-toggle" disabled={actionDisabled} onClick={() => setActiveSecondaryAction(activeSecondaryAction === "return" ? null : "return")} type="button" variant="secondary">退回</Button> : null}
          {allowedActions.has("reject") ? <Button data-testid="workflow-task-reject-toggle" disabled={actionDisabled} onClick={() => setActiveSecondaryAction(activeSecondaryAction === "reject" ? null : "reject")} type="button" variant="secondary">驳回</Button> : null}
        </>
      )}
      moreActions={canTransfer ? <Button className="w-full" data-testid="workflow-task-transfer-menu-item" disabled={actionDisabled} onClick={() => setActiveSecondaryAction(activeSecondaryAction === "transfer" ? null : "transfer")} type="button" variant="ghost">转审</Button> : null}
      summary={statusSummary}
      testId="workflow-task-action-panel"
    >
      <div className="space-y-3">{issueAnchors}{commentEditor}</div>
    </BusinessDetailActionPanel>
  );
  return (
    <>
      <ReimbursementDesktopWorkspaceShell
        capabilities={capabilities}
        model={model}
        slots={{
          status: <StatusBadge label={workflowTaskStatusLabel(detail.task.status)} status={detail.task.status} />,
          backAction: <Button asChild variant="ghost"><Link replace to={backTarget}>返回审批列表</Link></Button>,
          beforeEvidence: detail.task.status !== "pending" ? <p className="rounded-lg border border-blue-200 bg-blue-50 px-3 py-2 text-sm text-blue-800">当前显示报销单最新版本；审批意见与提交检查保留历史语义。</p> : null,
          afterEvidence: snapshot?.budgetCheckStatus === "missing" ? <p className="text-sm text-zinc-500" id="reimbursement-workspace-snapshot">该次提交未留存预算快照。</p> : null,
          actionPanel,
          asideContext: timeline,
        }}
      />
      {dialogs}
    </>
  );
}