refactor(ui): 提取表单原生组件公共样式并修复面板边距bug

client/src/pages/invoice-pool/InvoiceBindCard.tsx

@@ -0,0 +1,69 @@
+import type { UseMutationResult, UseQueryResult } from "@tanstack/react-query";
+import type { InvoicePoolListResponse } from "../../api/invoicePool";
+import type { ReimbursementListResponse } from "../../api/reimbursements";
+import { Button } from "../../components/ui/button";
+
+export type InvoiceBindCardProps = {
+  listQuery: UseQueryResult<InvoicePoolListResponse, Error>;
+  reimbursementQuery: UseQueryResult<ReimbursementListResponse, Error>;
+  bindMutation: UseMutationResult<Record<string, unknown>, Error, void>;
+  selectedInvoiceId: string;
+  setSelectedInvoiceId: (id: string) => void;
+  selectedReimbursementId: string;
+  setSelectedReimbursementId: (id: string) => void;
+};
+
+export function InvoiceBindCard({
+  listQuery,
+  reimbursementQuery,
+  bindMutation,
+  selectedInvoiceId,
+  setSelectedInvoiceId,
+  selectedReimbursementId,
+  setSelectedReimbursementId,
+}: InvoiceBindCardProps) {
+  return (
+    <div className="card-std space-y-4">
+      <h3 className="card-title">绑定报销</h3>
+      <select
+        className="select-std"
+        data-testid="invoice-bind-invoice"
+        onChange={(event) => setSelectedInvoiceId(event.target.value)}
+        value={selectedInvoiceId}
+      >
+        <option value="">选择票据</option>
+        {(listQuery.data?.items ?? []).map((item) => (
+          <option key={item.id} value={item.id}>
+            {item.invoiceCode ? `${item.invoiceCode}-${item.invoiceNumber}` : item.id.substring(0, 8)} ({item.status})
+          </option>
+        ))}
+      </select>
+
+      <select
+        className="select-std"
+        data-testid="invoice-bind-reimbursement"
+        onChange={(event) => setSelectedReimbursementId(event.target.value)}
+        value={selectedReimbursementId}
+      >
+        <option value="">选择报销单</option>
+        {(reimbursementQuery.data?.items ?? []).map((item) => (
+          <option key={item.id} value={item.id}>
+            {item.formNumber ?? item.id} ({item.status})
+          </option>
+        ))}
+      </select>
+
+      <div className="pt-2">
+        <Button
+          data-testid="invoice-bind-submit"
+          className="btn-primary"
+          disabled={bindMutation.isPending || !selectedInvoiceId || !selectedReimbursementId}
+          onClick={() => bindMutation.mutate()}
+          type="button"
+        >
+          {bindMutation.isPending ? "绑定中..." : "绑定票据"}
+        </Button>
+      </div>
+    </div>
+  );
+}