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.

.gitignore

@@ -22,3 +22,5 @@ logs
 .env
 .env.*
 !.env.example
+
+repomix-output.xml

app/assets/css/main.css

@@ -1,2 +1,13 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
+
+/* Subtle fade/slide for conditional reveals */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 200ms ease, transform 200ms ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(4px);
+}

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,22 +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>
+      <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="订阅服务"
+        label="需要"
-        description="默认屏幕尺寸为 1920 &times; 1080。须和屏幕供应单位获取详细尺寸，确保展示无误。"
+        description="默认按 1920 × 1080 交付，可增配动效"
       />
 
+      <Transition name="fade">
         <div
           v-if="orderState.backgroundDesign"
           :class="['grid', 'grid-cols-1', 'gap-4']"
         >
-        <UFormField name="backgroundType">
+          <UFormField name="backgroundType" label="类型">
             <URadioGroup
               v-model="orderState.backgroundType"
               color="primary"
@@ -28,7 +29,7 @@
           </UFormField>
           <div class="flex gap-4">
             <UFormField
-            label="屏宽"
+              label="宽"
               name="backgroundWidthOverride"
               class="flex-1"
             >
@@ -39,9 +40,9 @@
                 class="w-full"
               />
             </UFormField>
-          <span class="text-2xl">&times;</span>
+            <span class="text-2xl">×</span>
             <UFormField
-            label="屏高"
+              label="高"
               name="backgroundHeightOverride"
               class="flex-1"
             >
@@ -54,6 +55,7 @@
             </UFormField>
           </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
+      <Transition name="fade">
+        <USwitch
+          v-if="orderState.biddingSystem"
           v-model="orderState.biddingSystemProvideImage"
-        label="提供照片？"
+          :label="
-        description="活动方将发送标品图片给予本工作室"
+            orderState.biddingSystemProvideImage ? '素材自备' : '请求拍摄'
-        :class="[orderState.biddingSystem ? '' : 'opacity-0']"
+          "
-        :disabled="!orderState.biddingSystem"
+          :description="
+            orderState.biddingSystemProvideImage
+              ? '您提供图片（我们进行后处理）'
+              : '我们需要到您单位去拍摄标品'
+          "
         />
+      </Transition>
 
+      <Transition name="fade">
         <UFormField
+          v-if="orderState.biddingSystem"
           name="estimatedBidItemCount"
-        label="标品数量预估"
+          label="估算件数"
-        :class="[orderState.biddingSystem ? '' : 'opacity-0']"
+          description="不影响计价"
         >
           <USelect
             v-model="orderState.estimatedBidItemCount"
             :items="itemCountRanges"
-          placeholder="请选择预估数量区间"
+            placeholder="请选择件数区间"
             :class="['w-full']"
-          :disabled="!orderState.biddingSystem"
           />
         </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">
+    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
-      <UCheckbox
+      <UCheckbox v-model="orderState.flowBackgroundDesign" label="需要" />
-        v-model="orderState.flowBackgroundDesign"
-        label="订阅服务"
-        description="包含图片处理 & 宴会当日技术支持（场控 / 协调）"
-      />
 
+      <Transition name="fade">
         <UFormField
+          v-if="orderState.flowBackgroundDesign"
           name="backgroundSourceProvided"
-        label="是否提供背景设计稿？"
+          label="背景素材（原设计稿）"
-        :class="[orderState.flowBackgroundDesign ? '' : 'opacity-0']"
         >
           <USwitch
             v-model="orderState.backgroundSourceProvided"
             :label="
               orderState.backgroundSourceProvided
-              ? '我将提供背景图片'
+                ? '客户已提供素材'
-              : '需要重新临摹设计'
+                : '需要我们准备素材'
             "
             :description="
               orderState.backgroundSourceProvided
-              ? '活动方将发送背景设计稿给予本工作室'
+                ? '我们会规范与适配投影比例'
-              : '需要工作室重新设计背景图'
+                : '包含底图搜集/选型'
             "
-          :disabled="!orderState.flowBackgroundDesign"
             required
+            :disabled="orderState.backgroundDesign"
           />
         </UFormField>
+      </Transition>
 
+      <Transition name="fade">
         <UFormField
+          v-if="orderState.flowBackgroundDesign"
           name="pptDesignQty"
-        label="标品数量预估"
+          label="页数"
-        :class="[orderState.flowBackgroundDesign ? '' : 'opacity-0']"
         >
           <UInput
             type="number"
             v-model="orderState.pptDesignQty"
-          placeholder="请选择预估数量区间"
+            placeholder="请输入页数"
             :class="['w-full']"
-          :disabled="!orderState.flowBackgroundDesign"
+            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
+      <UCheckbox v-model="orderState.sponsorListDesign" label="需要" />
-        v-model="orderState.sponsorListDesign"
-        label="订阅服务"
-      />
     </div>
   </UCard>
 </template>

app/composables/eventOrder.ts

@@ -1,5 +1,5 @@
-import * as z from "zod";
 import { createSharedComposable } from "@vueuse/core";
+import * as z from "zod";
 
 export const _useEventOrder = () => {
   const sectionIndex = ref(0);
@@ -68,7 +68,9 @@ export const _useEventOrder = () => {
     isSameContact: true,
     contactNumber: "",
     eventName: "",
-    eventDate: formatLocalDate(new Date()),
+    eventDate: formatLocalDate(
+      new Date(new Date().getTime() + 7 * 24 * 60 * 60 * 1000)
+    ), // 默认一周后
     eventLocation: EVENT_LOCATIONS[0],
     biddingSystem: false,
     biddingSystemProvideImage: false,
@@ -83,11 +85,182 @@ export const _useEventOrder = () => {
     sponsorListDesign: false,
   });
 
+  // --- Pricing logic (editable) ---
+  const PRICE = {
+    bidding: 550, // base for bidding system
+    biddingProvideImageDiscount: 50, // discount if client provides all images
+    biddingLocationTierAdjustment: {
+      [EVENT_LOCATIONS[0]]: { adj: -100, reason: "同乡折扣" },
+      [EVENT_LOCATIONS[1]]: { adj: 0, reason: "" },
+      [EVENT_LOCATIONS[2]]: { adj: 200, reason: "含差旅费" },
+      [EVENT_LOCATIONS[3]]: { adj: 400, reason: "含差旅费" },
+    },
+    // biddingTierAdditions: [
+    //   { range: [10, 20], add: 0 },
+    //   { range: [20, 30], add: 200 },
+    //   { range: [30, 40], add: 400 },
+    //   { range: [40, 50], add: 600 },
+    // ],
+    background: {
+      static: 100,
+      dynamic: 250,
+      // highResSurcharge: 200, // if dimensions exceed 1920x1080
+    },
+    // 背景设计加急
+    // 静态背景：倒数 2 天 + 20，倒数 1 天 + 50
+    // 动态背景：倒数 5 天 + 50，倒数 1 天 + 100，中间 Lerp 计算
+    backgroundRush: (daysLeft: number, isDynamic: boolean) => {
+      if (isDynamic) {
+        if (daysLeft >= 5) return 0;
+        if (daysLeft <= 1) return 100;
+        return Math.round(((5 - daysLeft) / 4) * 50 + 50);
+      } else {
+        if (daysLeft >= 2) return 0;
+        if (daysLeft <= 1) return 50;
+        return Math.round(((2 - daysLeft) / 1) * 30 + 20);
+      }
+    },
+    flowPptDesign: {
+      base: 90,
+      perSlide: 10,
+      slideAfterTen: 5,
+      providedSourceDiscount: 0.5, // 20% off if background sources provided
+    },
+    sponsorList: 100,
+  } as const;
+
+  // function parseRange(range?: string | null): [number, number] | null {
+  //   if (!range) return null;
+  //   const m = String(range).match(/(\d+)\s*[-~]\s*(\d+)/);
+  //   if (!m) return null;
+  //   return [Number(m[1]), Number(m[2])];
+  // }
+
+  const priceBreakdown = computed(() => {
+    const items: { label: string; amount: number; note?: string }[] = [];
+
+    // Bidding system
+    if (orderState.biddingSystem) {
+      let amount = PRICE.bidding;
+      amount -= orderState.biddingSystemProvideImage
+        ? PRICE.biddingProvideImageDiscount
+        : 0;
+      // const r = parseRange(orderState.estimatedBidItemCount);
+      // if (r) {
+      //   const tier = PRICE.biddingTierAdditions.find(
+      //     (t) => r[0] >= t.range[0] && r[1] <= t.range[1]
+      //   );
+      //   if (tier) amount += tier.add;
+      // }
+      items.push({
+        label: "竞价系统",
+        amount,
+        note:
+          `${orderState.estimatedBidItemCount} 件区间` +
+          (orderState.biddingSystemProvideImage
+            ? "，素材由客户提供"
+            : "，包含素材拍摄") +
+          "，图片处理，现场技术支持",
+      });
+      const locationAdj =
+        PRICE.biddingLocationTierAdjustment[orderState.eventLocation];
+      if (locationAdj.adj) {
+        items.push({
+          label: locationAdj.reason,
+          amount: locationAdj.adj,
+          note: `活动地点：${orderState.eventLocation}`,
+        });
+      }
+    }
+
+    // Stage background design
+    if (orderState.backgroundDesign) {
+      let amount =
+        orderState.backgroundType === "dynamic"
+          ? PRICE.background.dynamic
+          : PRICE.background.static;
+      const w = Number(orderState.backgroundWidthOverride || 1920);
+      const h = Number(orderState.backgroundHeightOverride || 1080);
+      // if (w > 1920 || h > 1080) amount += PRICE.background.highResSurcharge;
+      items.push({
+        label: `舞台背景设计（${
+          orderState.backgroundType === "dynamic" ? "动效" : "静态"
+        }）`,
+        amount,
+        note: `${w}×${h}`,
+      });
+    }
+    // Background design rush fee
+    if (orderState.backgroundDesign) {
+      const eventDate = new Date(orderState.eventDate);
+      const today = new Date();
+      // 计算剩余天数（向上取整）
+      const diffTime = eventDate.getTime() - today.getTime();
+      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+      const rushFee = PRICE.backgroundRush(
+        diffDays,
+        orderState.backgroundType === "dynamic"
+      );
+      if (rushFee > 0) {
+        items.push({
+          label: "背景设计加急费",
+          amount: rushFee,
+          note: `距离活动仅剩 ${diffDays} 天`,
+        });
+      }
+    }
+
+    // Flow/PPT design
+    if (orderState.flowBackgroundDesign) {
+      const qty = Number(orderState.pptDesignQty || 0);
+      // 如果客户有要求背景设计，Base Price 不算
+      let amount = orderState.backgroundDesign ? 0 : PRICE.flowPptDesign.base;
+      if (qty > 0) {
+        amount += Math.min(qty, 10) * PRICE.flowPptDesign.perSlide;
+        if (qty > 10) {
+          amount += (qty - 10) * PRICE.flowPptDesign.slideAfterTen;
+        }
+      }
+      if (orderState.backgroundSourceProvided) {
+        amount = Math.round(
+          amount * (1 - PRICE.flowPptDesign.providedSourceDiscount)
+        );
+      }
+      items.push({
+        label: "流程/PPT设计",
+        amount,
+        note:
+          `${qty} 张幻灯片设计` +
+          (orderState.backgroundSourceProvided ? "，客户提供背景素材" : ""),
+      });
+    }
+
+    // Sponsor list
+    if (orderState.sponsorListDesign) {
+      items.push({ label: "赞助商位设计", amount: PRICE.sponsorList });
+    }
+
+    return items;
+  });
+
+  const estimatedTotal = computed(() =>
+    priceBreakdown.value.reduce((sum, i) => sum + (i.amount || 0), 0)
+  );
+
+  const money = new Intl.NumberFormat("zh-CN", {
+    style: "currency",
+    currency: "MYR",
+    maximumFractionDigits: 0,
+  });
+
   return {
     sectionIndex,
     eventLocationItems,
     orderSchema,
     orderState,
+    priceBreakdown,
+    estimatedTotal,
+    money,
   };
 };
 

app/pages/index.vue

@@ -6,24 +6,40 @@
     />
 
     <UContainer>
+      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div class="lg:col-span-2">
           <UForm :schema="orderSchema" :state="orderState" class="space-y-4">
-        <!-- 联系人信息 -->
+            <!-- 基本信息 -->
             <EventOrderMetaDetails />
-        <!-- 竞标大屏 -->
+            <!-- 竞价系统 -->
             <EventOrderProductBidding />
-        <!-- 背景设计 -->
+            <!-- 舞台背景设计 -->
             <EventOrderProductBackgroundDesign />
-        <!-- 致辞 / 流程 PPT 设计 -->
+            <!-- 流程 / 投影 PPT 设计 -->
             <EventOrderProductFlowDesign />
-        <!-- 赞助商名册 -->
+            <!-- 赞助商位设计 -->
             <EventOrderProductSponsor />
           </UForm>
+        </div>
+        <div class="lg:col-span-1">
+          <EventOrderSummary />
+        </div>
+      </div>
     </UContainer>
   </div>
 </template>
 
 <script lang="ts" setup>
 const { orderSchema, orderState } = useEventOrder();
+
+useSeoMeta({
+  title: "Tootaio · 活动价目估算",
+  description:
+    "在线选择服务，实时获得预算估算，包括竞价系统、舞台背景设计、流程/投影PPT与赞助商位设计。",
+  ogTitle: "Tootaio · 活动价目估算",
+  ogDescription: "在线选择服务，实时获得预算估算：竞价系统、舞台背景、PPT等。",
+  twitterCard: "summary_large_image",
+});
 </script>
 
 <style></style>

package.json

@@ -15,5 +15,8 @@
     "typescript": "^5.9.3",
     "vue": "^3.5.22",
     "vue-router": "^4.5.1"
+  },
+  "devDependencies": {
+    "@iconify-json/lucide": "^1.2.69"
   }
 }

pnpm-lock.yaml

@@ -23,6 +23,10 @@ importers:
       vue-router:
         specifier: ^4.5.1
         version: 4.6.0(vue@3.5.22(typescript@5.9.3))
+    devDependencies:
+      '@iconify-json/lucide':
+        specifier: ^1.2.69
+        version: 1.2.69
 
 packages:
 
@@ -368,6 +372,9 @@ packages:
   '@floating-ui/vue@1.1.9':
     resolution: {integrity: sha512-BfNqNW6KA83Nexspgb9DZuz578R7HT8MZw1CfK9I6Ah4QReNWEJsXWHN+SdmOVLNGmTPDi+fDT535Df5PzMLbQ==}
 
+  '@iconify-json/lucide@1.2.69':
+    resolution: {integrity: sha512-xOhNf74m+C+nSCObfEqYi34dXk1GMfMUcOB+gfqKY/bn0RcsPLinGfgouOvrUFEreDEFbCti7sdheTf5HESLTA==}
+
   '@iconify/collections@1.0.605':
     resolution: {integrity: sha512-1bZnGya+UpCWtMBvZbopsNr5ktnQquwPl01yjwSF5b09sU2rgNIPpEBJPQuNJp5oB6fwqZs/h1Q3/cGsB9SecQ==}
 
@@ -4084,6 +4091,10 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@iconify-json/lucide@1.2.69':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify/collections@1.0.605':
     dependencies:
       '@iconify/types': 2.0.0