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/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>