fix: submit recharge card form

src/app/(admin)/admin/commerce/_components/recharge-card-form.tsx

@@ -22,6 +22,7 @@ export function RechargeCardForm({ plans }: { plans: PlanOption[] }) {
   const router = useRouter();
   const [type, setType] = useState<"BALANCE" | "PLAN">("BALANCE");
   const [planId, setPlanId] = useState(plans[0]?.id ?? "");
+  const [hasExpiry, setHasExpiry] = useState(false);
   const [pending, startTransition] = useTransition();
   const selectedPlan = plans.find((plan) => plan.id === planId) ?? null;
   const planSoldOut = type === "PLAN" && selectedPlan?.remainingCount === 0;
@@ -40,6 +41,7 @@ export function RechargeCardForm({ plans }: { plans: PlanOption[] }) {
             await createAdminRechargeCards(formData);
             toast.success("充值卡已生成");
             form.reset();
+            setHasExpiry(false);
             router.refresh();
           } catch (error) {
             toast.error(getErrorMessage(error, "生成充值卡失败"));
@@ -93,12 +95,19 @@ export function RechargeCardForm({ plans }: { plans: PlanOption[] }) {
           <Label>绑定套餐</Label>
           <Select value={planId} onValueChange={(value) => setPlanId(value ?? "")}>
             <SelectTrigger className="w-full">
-              <SelectValue placeholder="选择套餐" />
+              <SelectValue placeholder="选择套餐">
+                {(value) => {
+                  const plan = plans.find((item) => item.id === value);
+                  return plan
+                    ? `${plan.name} · ${plan.type === "PROXY" ? "代理套餐" : "流媒体套餐"}`
+                    : "选择套餐";
+                }}
+              </SelectValue>
             </SelectTrigger>
             <SelectContent>
               {plans.map((plan) => (
                 <SelectItem key={plan.id} value={plan.id}>
-                  {plan.name} · {plan.type === "PROXY" ? "代理" : "流媒体"} · 余 {plan.remainingCount ?? "不限"}
+                  {plan.name} · {plan.type === "PROXY" ? "代理套餐" : "流媒体套餐"} · 余 {plan.remainingCount ?? "不限"}
                 </SelectItem>
               ))}
             </SelectContent>
@@ -112,11 +121,35 @@ export function RechargeCardForm({ plans }: { plans: PlanOption[] }) {
       )}
 
       <div className="space-y-2">
-        <Label htmlFor="recharge-card-expires">过期时间</Label>
-        <Input id="recharge-card-expires" name="expiresAt" type="datetime-local" />
+        <Label htmlFor="recharge-card-expiry-mode">有效期</Label>
+        <BooleanToggle
+          id="recharge-card-expiry-mode"
+          value={hasExpiry}
+          onChange={setHasExpiry}
+          trueLabel="设置到期"
+          falseLabel="永不过期"
+          ariaLabel="充值卡有效期"
+        />
       </div>
 
-      <Button className="w-full" disabled={pending || (type === "PLAN" && (!planId || planSoldOut))}>
+      {hasExpiry && (
+        <div className="space-y-2">
+          <Label htmlFor="recharge-card-expires">到期时间</Label>
+          <Input id="recharge-card-expires" name="expiresAt" type="datetime-local" required />
+        </div>
+      )}
+
+      {!hasExpiry && (
+        <input type="hidden" name="expiresAt" value="" />
+      )}
+
+      {type === "PLAN" && plans.length === 0 && (
+        <div className="rounded-lg border border-destructive/15 bg-destructive/10 px-3 py-2 text-xs font-medium text-destructive">
+          暂无可用套餐，请先上架套餐。
+        </div>
+      )}
+
+      <Button type="submit" className="w-full" disabled={pending || (type === "PLAN" && (!planId || planSoldOut))}>
         {pending ? "生成中..." : planSoldOut ? "套餐已售罄" : "生成充值卡"}
       </Button>
     </form>