refactor(ui): streamline booking form layout and table actions
Consolidate booking table row actions into a dropdown menu Update booking page layout to use a sidebar card for event details
This commit is contained in:
@@ -235,23 +235,28 @@ async function bookTicket(event: FormSubmitEvent<typeof form>) {
|
||||
|
||||
<template>
|
||||
<UContainer class="page-shell-narrow">
|
||||
<div class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_34rem] xl:items-start xl:gap-8">
|
||||
<section class="space-y-4 xl:sticky xl:top-6 xl:space-y-6">
|
||||
<div class="page-header">
|
||||
<UBadge :label="t('layout.brand')" color="primary" variant="soft" class="page-eyebrow" />
|
||||
<h1 class="page-title">
|
||||
{{ bookingConfig.event.title }}
|
||||
</h1>
|
||||
<p class="page-description">
|
||||
{{ t('booking.seatGeneration', { count: seatCount, seatLabel: locale === 'zh' ? '座位' : `seat${seatCount === 1 ? '' : 's'}` }) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid gap-5 xl:grid-cols-[22rem_minmax(0,1fr)] xl:items-start xl:gap-8">
|
||||
<UCard
|
||||
class="surface-card overflow-hidden rounded-lg xl:sticky xl:top-6"
|
||||
:ui="{ header: 'px-4 py-4 sm:px-5 sm:py-5', body: 'space-y-4 px-4 pb-4 pt-0 sm:px-5 sm:pb-5' }"
|
||||
>
|
||||
<template #header>
|
||||
<div class="space-y-1">
|
||||
<UBadge :label="t('layout.brand')" color="primary" variant="soft" class="page-eyebrow" />
|
||||
<h1 class="text-2xl font-bold leading-tight text-highlighted sm:text-3xl xl:text-2xl">
|
||||
{{ bookingConfig.event.title }}
|
||||
</h1>
|
||||
<p class="page-description">
|
||||
{{ t('booking.seatGeneration', { count: seatCount, seatLabel: locale === 'zh' ? '座位' : `seat${seatCount === 1 ? '' : 's'}` }) }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="grid gap-2 sm:grid-cols-3 xl:grid-cols-1 xl:gap-3">
|
||||
<div class="grid gap-3">
|
||||
<div
|
||||
v-for="detail in eventDetails"
|
||||
:key="detail.label"
|
||||
class="surface-card rounded-lg p-3 sm:p-4"
|
||||
class="surface-panel rounded-lg p-4"
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
|
||||
@@ -268,7 +273,7 @@ async function bookTicket(event: FormSubmitEvent<typeof form>) {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</UCard>
|
||||
|
||||
<UCard
|
||||
id="booking-form"
|
||||
@@ -285,15 +290,13 @@ async function bookTicket(event: FormSubmitEvent<typeof form>) {
|
||||
</div>
|
||||
|
||||
<UForm :state="form" :validate="validateBooking" class="space-y-5 sm:space-y-6" @submit="bookTicket">
|
||||
<div class="grid gap-4 sm:grid-cols-2 sm:gap-5">
|
||||
<UFormField name="name" :label="t('booking.name')" required>
|
||||
<UInput v-model="form.name" size="xl" class="w-full" :placeholder="t('booking.namePlaceholder')" />
|
||||
</UFormField>
|
||||
<UFormField name="name" :label="t('booking.name')" required>
|
||||
<UInput v-model="form.name" size="xl" class="w-full" :placeholder="t('booking.namePlaceholder')" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField name="phone" :label="t('common.phoneNumber')" required>
|
||||
<UInput v-model="form.phone" size="xl" type="tel" class="w-full" :placeholder="t('booking.phonePlaceholder')" />
|
||||
</UFormField>
|
||||
</div>
|
||||
<UFormField name="phone" :label="t('common.phoneNumber')" required>
|
||||
<UInput v-model="form.phone" size="xl" type="tel" class="w-full" :placeholder="t('booking.phonePlaceholder')" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField :label="t('booking.bookingMode')" name="bookingMode">
|
||||
<URadioGroup
|
||||
@@ -303,30 +306,28 @@ async function bookTicket(event: FormSubmitEvent<typeof form>) {
|
||||
indicator="hidden"
|
||||
:items="bookingModeOptions"
|
||||
:ui="{
|
||||
fieldset: 'grid grid-cols-1 gap-3 sm:grid-cols-2',
|
||||
fieldset: 'grid grid-cols-2 gap-3',
|
||||
item: 'min-h-14 rounded-lg border border-default bg-default p-3 transition-colors data-[state=checked]:border-primary data-[state=checked]:bg-primary/5'
|
||||
}"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<div class="grid gap-4 sm:grid-cols-[minmax(0,1fr)_minmax(0,1.1fr)] sm:gap-5">
|
||||
<UFormField :label="quantityLabel" name="quantity">
|
||||
<UInputNumber v-model="form.quantity" size="xl" class="w-full" :min="1" :step="1" />
|
||||
<template #help>
|
||||
{{ t('booking.seatGeneration', { count: seatCount, seatLabel: locale === 'zh' ? '座位' : `seat${seatCount === 1 ? '' : 's'}` }) }}
|
||||
</template>
|
||||
</UFormField>
|
||||
<UFormField :label="quantityLabel" name="quantity">
|
||||
<UInputNumber v-model="form.quantity" size="xl" class="w-full" :min="1" :step="1" />
|
||||
<template #help>
|
||||
{{ t('booking.seatGeneration', { count: seatCount, seatLabel: locale === 'zh' ? '座位' : `seat${seatCount === 1 ? '' : 's'}` }) }}
|
||||
</template>
|
||||
</UFormField>
|
||||
|
||||
<UFormField :label="t('booking.personInCharge')">
|
||||
<USelect
|
||||
v-model="selectedPersonInCharge"
|
||||
size="xl"
|
||||
class="w-full"
|
||||
:items="personInCharge"
|
||||
:disabled="!personInCharge.length"
|
||||
/>
|
||||
</UFormField>
|
||||
</div>
|
||||
<UFormField :label="t('booking.personInCharge')">
|
||||
<USelect
|
||||
v-model="selectedPersonInCharge"
|
||||
size="xl"
|
||||
class="w-full"
|
||||
:items="personInCharge"
|
||||
:disabled="!personInCharge.length"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<UFormField :label="t('booking.ticketCategory')" name="ticketType">
|
||||
<URadioGroup
|
||||
@@ -336,7 +337,7 @@ async function bookTicket(event: FormSubmitEvent<typeof form>) {
|
||||
indicator="hidden"
|
||||
:items="ticketCatalogOptions"
|
||||
:ui="{
|
||||
fieldset: 'grid grid-cols-1 gap-3 sm:grid-cols-2',
|
||||
fieldset: 'grid grid-cols-2 gap-3',
|
||||
item: 'min-h-14 rounded-lg border border-default bg-default p-3 transition-colors data-[state=checked]:border-primary data-[state=checked]:bg-primary/5'
|
||||
}"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user