feat(pricing): introduce real-time budget estimator

This commit introduces a real-time budget estimator for event services. A new summary sidebar now displays a live,
itemized breakdown of costs as the user selects options in the order form.

Key changes include:
- A new `OrderSummary` component to display the price breakdown and total.
- Comprehensive pricing logic implemented in the `useEventOrder` composable.
- A responsive two-column layout on the main page to accommodate the summary.
- UI/UX improvements across the form, including clearer labels and subtle transition animations for conditional fields.

app/components/eventOrder/MetaDetails.vue

@@ -1,23 +1,23 @@
 <template>
   <UCard>
     <template #header>
-      <h2 class="text-xl font-bold">{{ secIdx }}. 您的活动信息</h2>
+      <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>
+        <UFormField name="contactName" label="联系人" required>
           <UInput v-model="orderState.contactName" class="w-full" />
         </UFormField>
 
-        <UFormField name="contactNumber" label="联系方式（推荐 WhatsApp）">
+        <UFormField name="contactNumber" label="联系电话（或 WhatsApp）">
           <div class="flex items-center gap-2">
             <UCheckbox
               v-model="orderState.isSameContact"
-              label="当前手机号码？"
+              label="同活动联系人"
               class="whitespace-nowrap"
             />
             <UInput
@@ -38,7 +38,7 @@
           <UInput
             v-model="orderState.eventName"
             class="w-full"
-            placeholder="如果可能，请写上活动全名"
+            placeholder="例： ACME 集团 2025 年终晚会暨 50 周年庆典"
           />
         </UFormField>
 

app/components/eventOrder/OrderSummary.vue

@@ -0,0 +1,77 @@
+<template>
+  <UCard class="lg:sticky lg:top-24">
+    <template #header>
+      <div class="flex items-center justify-between">
+        <h2 class="text-xl font-bold">预算估算</h2>
+        <UBadge color="primary" variant="soft">实时</UBadge>
+      </div>
+      <p class="text-muted text-sm">基于所选服务动态计算</p>
+    </template>
+
+    <div class="space-y-3">
+      <div v-if="items.length === 0" class="text-muted text-sm">
+        当前未选择任何可计价项目。
+      </div>
+      <div v-else class="space-y-3">
+        <div
+          v-for="(it, idx) in items"
+          :key="idx"
+          class="flex items-start justify-between gap-3 border-b border-[--ui-border] pb-2"
+        >
+          <div>
+            <div class="font-medium">{{ it.label }}</div>
+            <div v-if="it.note" class="text-muted text-xs">{{ it.note }}</div>
+          </div>
+          <div class="font-semibold">{{ money.format(it.amount) }}</div>
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="flex items-center justify-between">
+        <div class="text-lg font-bold">合计</div>
+        <div class="text-2xl font-extrabold tracking-tight">
+          {{ money.format(total) }}
+        </div>
+      </div>
+      <div class="mt-3 flex items-center gap-2">
+        <UButton
+          color="primary"
+          size="lg"
+          block
+          :disabled="total === 0"
+          icon="lucide:send"
+          @click="onRequestQuote"
+        >
+          获取详细报价
+        </UButton>
+      </div>
+      <UAlert
+        class="mt-3"
+        title="说明"
+        color="neutral"
+        variant="subtle"
+        description="该预算为参考价，具体以需求细化及工期排期为准。"
+      />
+    </template>
+  </UCard>
+</template>
+
+<script lang="ts" setup>
+const { priceBreakdown, estimatedTotal, money } = useEventOrder();
+
+const items = computed(() => priceBreakdown.value);
+const total = computed(() => estimatedTotal.value);
+
+function onRequestQuote() {
+  // Placeholder interaction (no backend). Could open mailto or copy summary.
+  const lines = items.value.map(
+    (i) =>
+      `${i.label}：${money.format(i.amount)}${i.note ? `（${i.note}）` : ""}`
+  );
+  const text = `预算合计：${money.format(total.value)}\n\n` + lines.join("\n");
+  if (navigator?.clipboard) navigator.clipboard.writeText(text).catch(() => {});
+}
+</script>
+
+<style></style>

app/components/eventOrder/ProductBackgroundDesign.vue

@@ -1,59 +1,61 @@
 <template>
   <UCard>
     <template #header>
-      <h2 class="text-xl font-bold">{{ secIdx }}. 背景设计</h2>
-      <p class="text-muted text-sm">自研动态背景效果，可以自定义形象动态图。</p>
+      <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。须和屏幕供应单位获取详细尺寸，确保展示无误。"
+        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">&times;</span>
-          <UFormField
-            label="屏高"
-            name="backgroundHeightOverride"
-            class="flex-1"
-          >
-            <UInput
-              type="number"
-              v-model="orderState.backgroundHeightOverride"
-              placeholder="1080"
-              class="w-full"
+      <Transition name="fade">
+        <div
+          v-if="orderState.backgroundDesign"
+          :class="['grid', 'grid-cols-1', 'gap-4']"
+        >
+          <UFormField name="backgroundType" label="类型">
+            <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>
+      </Transition>
     </div>
   </UCard>
 </template>
@@ -66,11 +68,11 @@ const { sectionIndex, orderState } = useEventOrder();
 const secIdx = ref(++sectionIndex.value);
 
 const backgroundTypeSelection = ref<RadioGroupItem[]>([
-  { label: "静态背景图", value: "static" },
+  { label: "静态", value: "static" },
   {
-    label: "动态背景图",
+    label: "动效",
     value: "dynamic",
-    description: "由于技术原因，不能保证每次都能对成果进行微调。",
+    description: "适配现场屏幕规格，含基础动效",
   },
 ]);
 </script>

app/components/eventOrder/ProductBidding.vue

@@ -1,40 +1,49 @@
 <template>
   <UCard>
     <template #header>
-      <h2 class="text-xl font-bold">{{ secIdx }}. 宴会竞标大屏</h2>
+      <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">
+    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
       <UCheckbox
         v-model="orderState.biddingSystem"
-        label="订阅服务"
+        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"
+      <Transition name="fade">
+        <USwitch
+          v-if="orderState.biddingSystem"
+          v-model="orderState.biddingSystemProvideImage"
+          :label="
+            orderState.biddingSystemProvideImage ? '素材自备' : '请求拍摄'
+          "
+          :description="
+            orderState.biddingSystemProvideImage
+              ? '您提供图片（我们进行后处理）'
+              : '我们需要到您单位去拍摄标品'
+          "
         />
-      </UFormField>
+      </Transition>
+
+      <Transition name="fade">
+        <UFormField
+          v-if="orderState.biddingSystem"
+          name="estimatedBidItemCount"
+          label="估算件数"
+          description="不影响计价"
+        >
+          <USelect
+            v-model="orderState.estimatedBidItemCount"
+            :items="itemCountRanges"
+            placeholder="请选择件数区间"
+            :class="['w-full']"
+          />
+        </UFormField>
+      </Transition>
     </div>
   </UCard>
 </template>

app/components/eventOrder/ProductFlowDesign.vue

@@ -1,56 +1,58 @@
 <template>
   <UCard>
     <template #header>
-      <h2 class="text-xl font-bold">{{ secIdx }}. 流程 PPT 设计</h2>
+      <h2 class="text-xl font-bold">{{ secIdx }}. 流程 / 投影 PPT</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.flowBackgroundDesign"
-        label="订阅服务"
-        description="包含图片处理 & 宴会当日技术支持（场控 / 协调）"
-      />
+    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+      <UCheckbox v-model="orderState.flowBackgroundDesign" label="需要" />
 
-      <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>
+      <Transition name="fade">
+        <UFormField
+          v-if="orderState.flowBackgroundDesign"
+          name="backgroundSourceProvided"
+          label="背景素材（原设计稿）"
+        >
+          <USwitch
+            v-model="orderState.backgroundSourceProvided"
+            :label="
+              orderState.backgroundSourceProvided
+                ? '客户已提供素材'
+                : '需要我们准备素材'
+            "
+            :description="
+              orderState.backgroundSourceProvided
+                ? '我们会规范与适配投影比例'
+                : '包含底图搜集/选型'
+            "
+            required
+            :disabled="orderState.backgroundDesign"
+          />
+        </UFormField>
+      </Transition>
 
-      <UFormField
-        name="pptDesignQty"
-        label="标品数量预估"
-        :class="[orderState.flowBackgroundDesign ? '' : 'opacity-0']"
-      >
-        <UInput
-        type="number"
-          v-model="orderState.pptDesignQty"
-          placeholder="请选择预估数量区间"
-          :class="['w-full']"
-          :disabled="!orderState.flowBackgroundDesign"
-        />
-      </UFormField>
+      <Transition name="fade">
+        <UFormField
+          v-if="orderState.flowBackgroundDesign"
+          name="pptDesignQty"
+          label="页数"
+        >
+          <UInput
+            type="number"
+            v-model="orderState.pptDesignQty"
+            placeholder="请输入页数"
+            :class="['w-full']"
+            min="1"
+            max="20"
+          />
+        </UFormField>
+      </Transition>
     </div>
 
     <template #footer>
       <p class="text-muted text-sm">
-        包含基础排版与动画，可额外购买内容编排服务（另计）
+        交付包含可编辑源文件（可选），如需加急请提前沟通排期。
       </p>
     </template>
   </UCard>
@@ -60,6 +62,15 @@
 const { sectionIndex, orderState } = useEventOrder();
 
 const secIdx = ref(++sectionIndex.value);
+
+watch(
+  () => orderState.backgroundDesign,
+  (newVal) => {
+    if (newVal) {
+      orderState.backgroundSourceProvided = false;
+    }
+  }
+);
 </script>
 
 <style></style>

app/components/eventOrder/ProductSponsor.vue

@@ -1,17 +1,15 @@
 <template>
   <UCard>
     <template #header>
-      <h2 class="text-xl font-bold">{{ secIdx }}. 赞助商名册</h2>
+      <h2 class="text-xl font-bold">{{ secIdx }}. 赞助商位</h2>
       <p class="text-muted text-sm">
+        可制作<strong>赞助页</strong>，含标志排版与统一风格。
         附送一个<strong>基础款</strong>手机端电子征信录，可定制（另计）
       </p>
     </template>
 
     <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 items-center">
-      <UCheckbox
-        v-model="orderState.sponsorListDesign"
-        label="订阅服务"
-      />
+      <UCheckbox v-model="orderState.sponsorListDesign" label="需要" />
     </div>
   </UCard>
 </template>