feat: initialize project with event order form
This commit establishes the initial structure of the Nuxt application, centered around a new event order form. Key changes include: - Setting up the main app layout with a header, footer, and color mode support using @nuxt/ui. - Creating a multi-part event order form on the index page. - Introducing a `useEventOrder` composable to manage form state and validation with Zod. - Adding modular form components under `app/components/eventOrder`. - Including project configuration files for pnpm, VSCode, and global CSS.
This commit is contained in:
78
app/components/eventOrder/ProductBackgroundDesign.vue
Normal file
78
app/components/eventOrder/ProductBackgroundDesign.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h2 class="text-xl font-bold">{{ secIdx }}. 背景设计</h2>
|
||||
<p class="text-muted text-sm">自研动态背景效果,可以自定义形象动态图。</p>
|
||||
</template>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<UCheckbox
|
||||
v-model="orderState.backgroundDesign"
|
||||
label="订阅服务"
|
||||
description="默认屏幕尺寸为 1920 × 1080。须和屏幕供应单位获取详细尺寸,确保展示无误。"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-if="orderState.backgroundDesign"
|
||||
:class="['grid', 'grid-cols-1', 'gap-4']"
|
||||
>
|
||||
<UFormField name="backgroundType">
|
||||
<URadioGroup
|
||||
v-model="orderState.backgroundType"
|
||||
color="primary"
|
||||
variant="table"
|
||||
default-value="static"
|
||||
:items="backgroundTypeSelection"
|
||||
orientation="horizontal"
|
||||
/>
|
||||
</UFormField>
|
||||
<div class="flex gap-4">
|
||||
<UFormField
|
||||
label="屏宽"
|
||||
name="backgroundWidthOverride"
|
||||
class="flex-1"
|
||||
>
|
||||
<UInput
|
||||
type="number"
|
||||
v-model="orderState.backgroundWidthOverride"
|
||||
placeholder="1920"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
<span class="text-2xl">×</span>
|
||||
<UFormField
|
||||
label="屏高"
|
||||
name="backgroundHeightOverride"
|
||||
class="flex-1"
|
||||
>
|
||||
<UInput
|
||||
type="number"
|
||||
v-model="orderState.backgroundHeightOverride"
|
||||
placeholder="1080"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { RadioGroupItem } from "@nuxt/ui";
|
||||
|
||||
const { sectionIndex, orderState } = useEventOrder();
|
||||
|
||||
const secIdx = ref(++sectionIndex.value);
|
||||
|
||||
const backgroundTypeSelection = ref<RadioGroupItem[]>([
|
||||
{ label: "静态背景图", value: "static" },
|
||||
{
|
||||
label: "动态背景图",
|
||||
value: "dynamic",
|
||||
description: "由于技术原因,不能保证每次都能对成果进行微调。",
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
Reference in New Issue
Block a user