Initial commit

web/src/components/BatchCard.tsx

@@ -0,0 +1,42 @@
+import type { CallBatchDto } from "../types";
+import { batchTicketCount, formatDateTime, formatVisitorName } from "../lib/format";
+import { StatusBadge } from "./StatusBadge";
+
+export function BatchCard({
+  batch,
+  showContactDetails = false,
+}: {
+  batch: CallBatchDto;
+  showContactDetails?: boolean;
+}) {
+  return (
+    <section className="batch-card" aria-labelledby={`batch-${batch.id}`}>
+      <div className="batch-card__header">
+        <div>
+          <h3 id={`batch-${batch.id}`}>本次叫号</h3>
+        </div>
+        <StatusBadge status={batch.status} />
+      </div>
+      <p className="batch-card__summary">
+        <strong>{batchTicketCount(batch)} 个号码</strong>
+        <span>{formatDateTime(batch.called_at)}</span>
+      </p>
+      <ul className="batch-ticket-list">
+        {batch.tickets.map((ticket) => (
+          <li key={ticket.id} className="batch-ticket-row">
+            <div className="batch-ticket-identity">
+              <strong className="ticket-number">{ticket.ticket_number}</strong>
+              {showContactDetails ? (
+                <span className="ticket-contact-line">
+                  <span><span className="ticket-contact-label">手机号</span> <strong className="phone-value">{ticket.phone || "未返回"}</strong></span>
+                  <span><span className="ticket-contact-label">游客</span> {formatVisitorName(ticket)}</span>
+                </span>
+              ) : null}
+            </div>
+            <StatusBadge status={ticket.status} kind="ticket" />
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}