From d0f04e3787314cc7d61e8835ecb806ae74e1dd24 Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Thu, 27 Aug 2026 12:03:40 +0800
Subject: [PATCH] fix: make vehicle demand fields responsive

---
 WonderQ-MiniAPP/src/pages/vehicle-demand.vue  | 56 +++++++++----------
 .../tests/vehicle-demand-layout.test.ts       | 19 +++++++
 2 files changed, 47 insertions(+), 28 deletions(-)
 create mode 100644 WonderQ-MiniAPP/tests/vehicle-demand-layout.test.ts

diff --git a/WonderQ-MiniAPP/src/pages/vehicle-demand.vue b/WonderQ-MiniAPP/src/pages/vehicle-demand.vue
index 82bf9bc..5544d4f 100644
--- a/WonderQ-MiniAPP/src/pages/vehicle-demand.vue
+++ b/WonderQ-MiniAPP/src/pages/vehicle-demand.vue
@@ -39,7 +39,7 @@
             </view>
           </view>
 
-          <view class="rounded-[16px] border border-[#e3d9cf] bg-white p-4 shadow-[0_8px_24px_rgba(67,52,38,0.05)]">
+          <view class="overflow-hidden rounded-[16px] border border-[#e3d9cf] bg-white p-4 shadow-[0_8px_24px_rgba(67,52,38,0.05)]">
             <view class="mb-4">
               <text class="block text-[18px] font-semibold text-[#202629]">提交用车需求</text>
               <text class="mt-1 block text-[12px] leading-5 text-[#77746e]">填写后由管家联系确认车型、服务安排和报价。</text>
@@ -53,70 +53,70 @@
               </view>
             </view>
 
-            <view class="grid gap-4">
+            <view class="grid min-w-0 gap-4">
               <view>
-                <text class="block text-[12px] font-medium leading-5 text-[#5f5b56]">联系人姓名</text>
-                <input v-model="form.contactName" class="mt-2 h-11 w-full rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] px-3 text-[13px] text-[#292d2f]" placeholder="请输入联系人姓名" maxlength="40" />
+                <text class="block text-[11px] font-medium tracking-[0.01em] leading-5 text-[#5f5b56]">联系人姓名</text>
+                <input v-model="form.contactName" class="mt-2 box-border h-11 w-full min-w-0 rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] px-3 text-[13px] text-[#292d2f]" placeholder="请输入联系人姓名" maxlength="40" />
               </view>
               <view>
-                <text class="block text-[12px] font-medium leading-5 text-[#5f5b56]">联系电话</text>
-                <input v-model="form.phone" class="mt-2 h-11 w-full rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] px-3 text-[13px] text-[#292d2f]" type="number" placeholder="请输入手机号" maxlength="20" />
+                <text class="block text-[11px] font-medium tracking-[0.01em] leading-5 text-[#5f5b56]">联系电话</text>
+                <input v-model="form.phone" class="mt-2 box-border h-11 w-full min-w-0 rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] px-3 text-[13px] text-[#292d2f]" type="number" placeholder="请输入手机号" maxlength="20" />
               </view>
               <view>
-                <text class="block text-[12px] font-medium leading-5 text-[#5f5b56]">服务类型</text>
+                <text class="block text-[11px] font-medium tracking-[0.01em] leading-5 text-[#5f5b56]">服务类型</text>
                 <view class="grid grid-cols-2 gap-2">
-                  <view v-for="option in serviceTypes" :key="option.value" class="flex h-11 items-center justify-center rounded-[10px] border text-[13px] font-medium transition-colors" :class="form.serviceType === option.value ? 'border-[#a45a3d] bg-[#fff1ea] text-[#a45a3d]' : 'border-[#e5ddd3] bg-[#fffdfb] text-[#6f6a64]'" @click="form.serviceType = option.value">
+                  <view v-for="option in serviceTypes" :key="option.value" class="flex min-w-0 h-11 items-center justify-center rounded-[10px] border text-[13px] font-medium transition-colors" :class="form.serviceType === option.value ? 'border-[#a45a3d] bg-[#fff1ea] text-[#a45a3d]' : 'border-[#e5ddd3] bg-[#fffdfb] text-[#6f6a64]'" @click="form.serviceType = option.value">
                     <text>{{ option.label }}</text>
                   </view>
                 </view>
               </view>
               <view v-if="form.serviceType === 'charter'">
-                <text class="block text-[12px] font-medium leading-5 text-[#5f5b56]">包车时长</text>
+                <text class="block text-[11px] font-medium tracking-[0.01em] leading-5 text-[#5f5b56]">包车时长</text>
                 <view class="grid grid-cols-2 gap-2">
-                  <view v-for="option in charterDurations" :key="option.value" class="flex h-11 items-center justify-center rounded-[10px] border text-[13px] font-medium transition-colors" :class="form.charterDuration === option.value ? 'border-[#a45a3d] bg-[#fff1ea] text-[#a45a3d]' : 'border-[#e5ddd3] bg-[#fffdfb] text-[#6f6a64]'" @click="form.charterDuration = option.value">
+                  <view v-for="option in charterDurations" :key="option.value" class="flex min-w-0 h-11 items-center justify-center rounded-[10px] border text-[13px] font-medium transition-colors" :class="form.charterDuration === option.value ? 'border-[#a45a3d] bg-[#fff1ea] text-[#a45a3d]' : 'border-[#e5ddd3] bg-[#fffdfb] text-[#6f6a64]'" @click="form.charterDuration = option.value">
                     <text>{{ option.label }}</text>
                   </view>
                 </view>
               </view>
               <view>
-                <text class="block text-[12px] font-medium leading-5 text-[#5f5b56]">出行日期</text>
+                <text class="block text-[11px] font-medium tracking-[0.01em] leading-5 text-[#5f5b56]">出行日期</text>
                 <picker mode="date" :value="form.travelDate" @change="changeDate">
-                  <view class="mt-2 flex h-11 items-center rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] px-3 text-[13px] text-[#6f6a64]">{{ form.travelDate || '请选择出行日期' }}</view>
+                  <view class="mt-2 box-border flex h-11 w-full min-w-0 items-center rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] px-3 text-[13px] text-[#6f6a64]">{{ form.travelDate || '请选择出行日期' }}</view>
                 </picker>
               </view>
               <view>
-                <text class="block text-[12px] font-medium leading-5 text-[#5f5b56]">预计出发时间（选填）</text>
+                <text class="block text-[11px] font-medium tracking-[0.01em] leading-5 text-[#5f5b56]">预计出发时间（选填）</text>
                 <picker mode="time" :value="form.pickupTime" @change="changeTime">
-                  <view class="mt-2 flex h-11 items-center rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] px-3 text-[13px] text-[#6f6a64]">{{ form.pickupTime || '请选择出发时间' }}</view>
+                  <view class="mt-2 box-border flex h-11 w-full min-w-0 items-center rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] px-3 text-[13px] text-[#6f6a64]">{{ form.pickupTime || '请选择出发时间' }}</view>
                 </picker>
               </view>
               <view>
-                <text class="block text-[12px] font-medium leading-5 text-[#5f5b56]">上车地点</text>
-                <input v-model="form.pickupLocation" class="mt-2 h-11 w-full rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] px-3 text-[13px] text-[#292d2f]" placeholder="例如：贵阳北站" maxlength="100" />
+                <text class="block text-[11px] font-medium tracking-[0.01em] leading-5 text-[#5f5b56]">上车地点</text>
+                <input v-model="form.pickupLocation" class="mt-2 box-border h-11 w-full min-w-0 rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] px-3 text-[13px] text-[#292d2f]" placeholder="例如：贵阳北站" maxlength="100" />
               </view>
               <view>
-                <text class="block text-[12px] font-medium leading-5 text-[#5f5b56]">目的地/下车地点</text>
-                <input v-model="form.dropoffLocation" class="mt-2 h-11 w-full rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] px-3 text-[13px] text-[#292d2f]" placeholder="例如：黄果树景区" maxlength="100" />
+                <text class="block text-[11px] font-medium tracking-[0.01em] leading-5 text-[#5f5b56]">目的地/下车地点</text>
+                <input v-model="form.dropoffLocation" class="mt-2 box-border h-11 w-full min-w-0 rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] px-3 text-[13px] text-[#292d2f]" placeholder="例如：黄果树景区" maxlength="100" />
               </view>
-              <view class="grid grid-cols-2 gap-3">
-                <view>
-                  <text class="block text-[12px] font-medium leading-5 text-[#5f5b56]">出行人数</text>
-                  <input v-model="form.peopleCount" class="mt-2 h-11 w-full rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] px-3 text-[13px] text-[#292d2f]" type="number" placeholder="人数" maxlength="4" />
+              <view class="grid min-w-0 grid-cols-2 gap-3">
+                <view class="min-w-0">
+                  <text class="block text-[11px] font-medium tracking-[0.01em] leading-5 text-[#5f5b56]">出行人数</text>
+                  <input v-model="form.peopleCount" class="mt-2 box-border h-11 w-full min-w-0 rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] px-3 text-[13px] text-[#292d2f]" type="number" placeholder="人数" maxlength="4" />
                 </view>
-                <view>
-                  <text class="block text-[12px] font-medium leading-5 text-[#5f5b56]">行李数量（选填）</text>
-                  <input v-model="form.luggageCount" class="mt-2 h-11 w-full rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] px-3 text-[13px] text-[#292d2f]" type="number" placeholder="件数" maxlength="4" />
+                <view class="min-w-0">
+                  <text class="block text-[11px] font-medium tracking-[0.01em] leading-5 text-[#5f5b56]">行李数量（选填）</text>
+                  <input v-model="form.luggageCount" class="mt-2 box-border h-11 w-full min-w-0 rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] px-3 text-[13px] text-[#292d2f]" type="number" placeholder="件数" maxlength="4" />
                 </view>
               </view>
               <view>
-                <text class="block text-[12px] font-medium leading-5 text-[#5f5b56]">特殊要求（选填）</text>
-                <textarea v-model="form.specialRequirements" class="mt-2 min-h-[96px] w-full rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] p-3 text-[13px] leading-5 text-[#292d2f]" placeholder="儿童座椅、老人同行或其他需求" maxlength="1000" />
+                <text class="block text-[11px] font-medium tracking-[0.01em] leading-5 text-[#5f5b56]">特殊要求（选填）</text>
+                <textarea v-model="form.specialRequirements" class="mt-2 block box-border h-24 min-h-[96px] w-full min-w-0 rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] p-3 text-[13px] leading-5 text-[#292d2f]" placeholder="儿童座椅、老人同行或其他需求" maxlength="1000" />
               </view>
             </view>
 
             <view v-if="errorMessage" class="mt-4 rounded-[10px] bg-[#fff0ed] px-3 py-2 text-[12px] leading-5 text-[#b44d3d]">{{ errorMessage }}</view>
             <view v-if="submitted" class="mt-4 rounded-[10px] bg-[#eef7f1] px-3 py-3 text-[12px] leading-5 text-[#39724f]">需求已提交，管家会尽快联系你确认服务安排。</view>
-            <button class="tap-feedback mt-5 h-11 rounded-full border-0 bg-[#a45a3d] text-[14px] font-semibold text-white" :disabled="isSubmitting || submitted" @click="submit">
+            <button class="tap-feedback mt-5 box-border h-11 w-full rounded-full border-0 bg-[#a45a3d] text-[14px] font-semibold text-white" :disabled="isSubmitting || submitted" @click="submit">
               {{ isSubmitting ? '提交中…' : submitted ? '已提交' : '提交需求' }}
             </button>
           </view>
diff --git a/WonderQ-MiniAPP/tests/vehicle-demand-layout.test.ts b/WonderQ-MiniAPP/tests/vehicle-demand-layout.test.ts
new file mode 100644
index 0000000..31e6cb4
--- /dev/null
+++ b/WonderQ-MiniAPP/tests/vehicle-demand-layout.test.ts
@@ -0,0 +1,19 @@
+import { describe, expect, it } from "vitest";
+import vehicleDemandSource from "@/pages/vehicle-demand.vue?raw";
+
+describe("vehicle demand form layout", () => {
+  it("keeps native inputs and textarea inside their responsive parent width", () => {
+    const fieldClasses = [
+      ...vehicleDemandSource.matchAll(/<(?:input|textarea)\b[^>]*\sclass="([^"]+)"/g),
+    ].map((match) => match[1].split(/\s+/));
+
+    expect(fieldClasses).toHaveLength(7);
+    expect(fieldClasses.every((classes) => classes.includes("box-border"))).toBe(true);
+    expect(fieldClasses.every((classes) => classes.includes("min-w-0"))).toBe(true);
+  });
+
+  it("allows the two-column passenger fields to shrink within the form card", () => {
+    expect(vehicleDemandSource).toContain('class="grid min-w-0 grid-cols-2 gap-3"');
+    expect(vehicleDemandSource).toContain('class="min-w-0"');
+  });
+});