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