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.

app/components/eventOrder/MetaDetails.vue

@@ -0,0 +1,68 @@
+<template>
+  <UCard>
+    <template #header>
+      <h2 class="text-xl font-bold">{{ secIdx }}. 您的活动信息</h2>
+      <p class="text-muted text-sm">
+        您提供的联系方式与活动信息仅用于沟通与履约，本工作室将妥善保护，不会未经同意向第三方公开或出售。
+      </p>
+    </template>
+
+    <div class="grid gap-4">
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <UFormField name="contactName" label="联络人姓名" required>
+          <UInput v-model="orderState.contactName" class="w-full" />
+        </UFormField>
+
+        <UFormField name="contactNumber" label="联系方式（推荐 WhatsApp）">
+          <div class="flex items-center gap-2">
+            <UCheckbox
+              v-model="orderState.isSameContact"
+              label="当前手机号码？"
+              class="whitespace-nowrap"
+            />
+            <UInput
+              v-model="orderState.contactNumber"
+              :disabled="orderState.isSameContact"
+              :class="[
+                'w-full transition-opacity duration-300',
+                orderState.isSameContact ? 'opacity-0 pointer-events-none' : '',
+              ]"
+            />
+          </div>
+        </UFormField>
+      </div>
+
+      <!-- 活动信息 -->
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+        <UFormField name="eventName" label="活动名称" required>
+          <UInput
+            v-model="orderState.eventName"
+            class="w-full"
+            placeholder="如果可能，请写上活动全名"
+          />
+        </UFormField>
+
+        <UFormField name="eventDate" label="活动日期" required>
+          <UInput type="date" v-model="orderState.eventDate" class="w-full" />
+        </UFormField>
+
+        <UFormField name="eventLocation" label="地点" required>
+          <USelect
+            v-model="orderState.eventLocation"
+            :items="eventLocationItems"
+            placeholder="请选择地点"
+            class="w-full"
+          />
+        </UFormField>
+      </div>
+    </div>
+  </UCard>
+</template>
+
+<script lang="ts" setup>
+const { sectionIndex, orderState, eventLocationItems } = useEventOrder();
+
+const secIdx = ref(++sectionIndex.value);
+</script>
+
+<style></style>

app/components/eventOrder/ProductBackgroundDesign.vue

@@ -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 &times; 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">&times;</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>

app/components/eventOrder/ProductBidding.vue

@@ -0,0 +1,54 @@
+<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-3 gap-4 items-center">
+      <UCheckbox
+        v-model="orderState.biddingSystem"
+        label="订阅服务"
+        description="包含图片处理 & 宴会当日技术支持（场控 / 协调）"
+      />
+
+      <UCheckbox
+        v-model="orderState.biddingSystemProvideImage"
+        label="提供照片？"
+        description="活动方将发送标品图片给予本工作室"
+        :class="[orderState.biddingSystem ? '' : 'opacity-0']"
+        :disabled="!orderState.biddingSystem"
+      />
+
+      <UFormField
+        name="estimatedBidItemCount"
+        label="标品数量预估"
+        :class="[orderState.biddingSystem ? '' : 'opacity-0']"
+      >
+        <USelect
+          v-model="orderState.estimatedBidItemCount"
+          :items="itemCountRanges"
+          placeholder="请选择预估数量区间"
+          :class="['w-full']"
+          :disabled="!orderState.biddingSystem"
+        />
+      </UFormField>
+    </div>
+  </UCard>
+</template>
+
+<script lang="ts" setup>
+const { sectionIndex, orderState } = useEventOrder();
+
+const secIdx = ref(++sectionIndex.value);
+
+const itemCountRanges = Array.from({ length: 4 }, (_, i) => {
+  const start = 10 + i * 10;
+  const end = start + 10;
+  return { label: `${start} ~ ${end}`, value: `${start}-${end}` };
+});
+</script>
+
+<style></style>

app/components/eventOrder/ProductFlowDesign.vue

@@ -0,0 +1,65 @@
+<template>
+  <UCard>
+    <template #header>
+      <h2 class="text-xl font-bold">{{ secIdx }}. 流程 PPT 设计</h2>
+    </template>
+
+    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 items-center">
+      <UCheckbox
+        v-model="orderState.flowBackgroundDesign"
+        label="订阅服务"
+        description="包含图片处理 & 宴会当日技术支持（场控 / 协调）"
+      />
+
+      <UFormField
+        name="backgroundSourceProvided"
+        label="是否提供背景设计稿？"
+        :class="[orderState.flowBackgroundDesign ? '' : 'opacity-0']"
+      >
+        <USwitch
+          v-model="orderState.backgroundSourceProvided"
+          :label="
+            orderState.backgroundSourceProvided
+              ? '我将提供背景图片'
+              : '需要重新临摹设计'
+          "
+          :description="
+            orderState.backgroundSourceProvided
+              ? '活动方将发送背景设计稿给予本工作室'
+              : '需要工作室重新设计背景图'
+          "
+          :disabled="!orderState.flowBackgroundDesign"
+          required
+        />
+      </UFormField>
+
+      <UFormField
+        name="pptDesignQty"
+        label="标品数量预估"
+        :class="[orderState.flowBackgroundDesign ? '' : 'opacity-0']"
+      >
+        <UInput
+        type="number"
+          v-model="orderState.pptDesignQty"
+          placeholder="请选择预估数量区间"
+          :class="['w-full']"
+          :disabled="!orderState.flowBackgroundDesign"
+        />
+      </UFormField>
+    </div>
+
+    <template #footer>
+      <p class="text-muted text-sm">
+        包含基础排版与动画，可额外购买内容编排服务（另计）
+      </p>
+    </template>
+  </UCard>
+</template>
+
+<script lang="ts" setup>
+const { sectionIndex, orderState } = useEventOrder();
+
+const secIdx = ref(++sectionIndex.value);
+</script>
+
+<style></style>

app/components/eventOrder/ProductSponsor.vue

@@ -0,0 +1,25 @@
+<template>
+  <UCard>
+    <template #header>
+      <h2 class="text-xl font-bold">{{ secIdx }}. 赞助商名册</h2>
+      <p class="text-muted text-sm">
+        附送一个<strong>基础款</strong>手机端电子征信录，可定制（另计）
+      </p>
+    </template>
+
+    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 items-center">
+      <UCheckbox
+        v-model="orderState.sponsorListDesign"
+        label="订阅服务"
+      />
+    </div>
+  </UCard>
+</template>
+
+<script lang="ts" setup>
+const { sectionIndex, orderState } = useEventOrder();
+
+const secIdx = ref(++sectionIndex.value);
+</script>
+
+<style></style>