第十章：`actions` —— 票务窗口才是 SvelteKit 最有味道的地方

阻止默认提交
自己收集数据
自己 fetch
自己处理 loading/error
自己跳转

观众提交表单
窗口直接受理
失败就把退回理由写在单子上
成功就给新票据或引导去下一站

// src/routes/box-office/+page.server.ts
import { fail, redirect } from '@sveltejs/kit';
import type { Actions } from './$types';
import { db } from '$lib/server/db';

export const actions: Actions = {
  default: async ({ request, locals }) => {
    if (!locals.user) {
      redirect(303, '/login');
    }

    const formData = await request.formData();

    const playSlug = String(formData.get('playSlug') ?? '').trim();
    const buyerName = String(formData.get('buyerName') ?? '').trim();
    const seats = Number(formData.get('seats') ?? 0);

    const errors: Record<string, string> = {};

    if (!playSlug) errors.playSlug = '请选择剧目';
    if (!buyerName) errors.buyerName = '请输入订票人姓名';
    if (!Number.isInteger(seats) || seats < 1) errors.seats = '至少订 1 张票';

    if (Object.keys(errors).length > 0) {
      return fail(400, {
        errors,
        values: { playSlug, buyerName, seats }
      });
    }

    const order = await db.ticketOrder.create({
      data: {
        playSlug,
        buyerName,
        seats,
        userId: locals.user.id
      }
    });

    redirect(303, `/orders/${order.id}`);
  }
};

<!-- src/routes/box-office/+page.svelte -->
<script lang="ts">
  import { enhance } from '$app/forms';
  import type { PageProps } from './$types';

  let { form }: PageProps = $props();
  let pending = $state(false);
</script>

<h1>票务窗口</h1>

<form
  method="POST"
  use:enhance={() => {
    pending = true;

    return async () => {
      pending = false;
    };
  }}
>
  <label>
    剧目代号
    <input name="playSlug" value={form?.values?.playSlug ?? ''} />
  </label>
  {#if form?.errors?.playSlug}
    <p class="error">{form.errors.playSlug}</p>
  {/if}

  <label>
    订票人
    <input name="buyerName" value={form?.values?.buyerName ?? ''} />
  </label>
  {#if form?.errors?.buyerName}
    <p class="error">{form.errors.buyerName}</p>
  {/if}

  <label>
    票数
    <input name="seats" type="number" min="1" value={form?.values?.seats ?? 1} />
  </label>
  {#if form?.errors?.seats}
    <p class="error">{form.errors.seats}</p>
  {/if}

  <button disabled={pending}>
    {pending ? '出票中...' : '确认订票'}
  </button>
</form>