优化预订事项房型与房表展示

client/src/components/reservation/ReservationV4RoomInformationCard.vue

@@ -7,7 +7,7 @@
       {{ t('taskV4.roomInformation.noDisplayModel') }}
     </div>
     <template v-else>
-      <div class="room-information__header">
+      <div class="room-information__summary">
         <div class="room-information__chips">
           <span>{{ eventTypeLabel }}</span>
           <span>{{ bookingTypeLabel }}</span>
@@ -664,11 +664,15 @@ const roomInformationLabelKeys: Record<string, string> = {
   gap: 16px;
 }
 
-.room-information__header {
+.room-information__summary {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: space-between;
-  gap: 12px;
+  gap: 14px;
+  border: 1px solid var(--th-color-slate-200);
+  border-radius: var(--th-radius-sm);
+  background: linear-gradient(180deg, var(--th-color-white), var(--th-color-slate-50));
+  padding: 10px 12px;
 }
 
 .room-information__chips {
@@ -688,19 +692,32 @@ const roomInformationLabelKeys: Record<string, string> = {
 
 .room-information__status-slot {
   display: flex;
+  flex: 0 1 360px;
   justify-content: flex-end;
-  min-width: min(260px, 100%);
+  min-width: 0;
 }
 
 .room-information__status-badge,
 .room-information__status-field {
-  display: grid;
+  width: min(320px, 100%);
-  gap: 6px;
+  min-width: 0;
-  min-width: 180px;
   border: 1px solid var(--th-color-slate-200);
   border-radius: var(--th-radius-sm);
-  background: var(--th-color-slate-50);
+  background: var(--th-color-white);
-  padding: 10px 12px;
+  padding: 8px 10px;
+}
+
+.room-information__status-badge {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.room-information__status-field {
+  display: grid;
+  gap: 6px;
 }
 
 .room-information__status-badge span,
@@ -718,12 +735,18 @@ const roomInformationLabelKeys: Record<string, string> = {
 
 .room-information__status-badge strong {
   color: var(--th-color-slate-900);
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 900;
+  overflow-wrap: anywhere;
+  text-align: right;
+}
+
+.room-information__status-badge .room-information__status-error {
+  flex-basis: 100%;
 }
 
 .room-information__status-field select {
-  min-height: 36px;
+  min-height: 34px;
   border: 1px solid var(--th-color-slate-200);
   border-radius: var(--th-radius-sm);
   background: var(--th-color-white);
@@ -866,13 +889,20 @@ const roomInformationLabelKeys: Record<string, string> = {
 }
 
 @media (max-width: 760px) {
-  .room-information__header {
+  .room-information__summary {
     align-items: stretch;
     flex-direction: column;
   }
 
   .room-information__status-slot {
+    flex: 0 1 auto;
     justify-content: flex-start;
+    width: 100%;
+  }
+
+  .room-information__status-badge,
+  .room-information__status-field {
+    width: 100%;
   }
 
   .room-information__grid,

client/src/components/reservation/ReservationV4RoomingListCard.vue

@@ -16,9 +16,6 @@
         {{ t('task.viewOrder') }}
       </RouterLink>
     </div>
-
-    <p>{{ t('taskV4.roomingList.description') }}</p>
-    <small>{{ t('taskV4.roomingList.confirmHint') }}</small>
   </section>
 </template>
 
@@ -89,19 +86,6 @@ function readableValue(value?: string | null): string {
   overflow-wrap: anywhere;
 }
 
-.rooming-list-card p,
-.rooming-list-card small {
-  margin: 0;
-  color: var(--th-color-slate-600);
-  font-size: 13px;
-  line-height: 1.55;
-}
-
-.rooming-list-card small {
-  color: var(--th-color-slate-500);
-  font-weight: 700;
-}
-
 .rooming-list-card__link {
   color: var(--th-color-blue-600);
   flex: 0 0 auto;

client/src/tests/reservationV4Views.spec.ts

@@ -8,6 +8,7 @@ import { createMemoryHistory, createRouter } from 'vue-router'
 
 import taskCardSectionSource from '@/components/reservation/ReservationV4TaskCardSection.vue?raw'
 import paymentAttachmentPreviewSource from '@/components/reservation/ReservationV4PaymentAttachmentPreview.vue?raw'
+import roomInformationCardSource from '@/components/reservation/ReservationV4RoomInformationCard.vue?raw'
 import roomingListCardSource from '@/components/reservation/ReservationV4RoomingListCard.vue?raw'
 import traceCardSource from '@/components/reservation/ReservationV4TraceCard.vue?raw'
 import zhCN from '@/i18n/locales/zh-CN'
@@ -528,7 +529,8 @@ describe('reservation V4 pages', () => {
     const roomingListCard = roomingListSection!.find('[data-testid="rooming-list-card"]')
     expect(roomingListCard.exists()).toBe(true)
     expect(roomingListSection!.text()).toContain(zhCN.taskV4.roomingList.title)
-    expect(roomingListCard.text()).toContain(zhCN.taskV4.roomingList.description)
+    expect(roomingListCard.text()).not.toContain(zhCN.taskV4.roomingList.description)
+    expect(roomingListCard.text()).not.toContain(zhCN.taskV4.roomingList.confirmHint)
     expect(roomingListCard.text()).toContain('GRP-001')
     expect(roomingListSection!.findAll('a').filter((link) => link.text() === zhCN.task.viewOrder)).toHaveLength(1)
     expect(wrapper.text()).toContain(zhCN.taskV4.sourceMessageCard)
@@ -885,6 +887,10 @@ describe('reservation V4 pages', () => {
     const blockIdField = findFieldByLabel(roomCard, zhCN.taskV4.roomInformation.blockId)
     expect(confirmationField?.find('.v4-field__static').text()).toBe('-')
     expect(blockIdField?.find('.v4-field__static').text()).toBe('-')
+    const summary = roomCard.find('.room-information__summary')
+    expect(summary.exists()).toBe(true)
+    expect(summary.find('.room-information__chips').exists()).toBe(true)
+    expect(summary.find('.room-information__status-slot').exists()).toBe(true)
     const statusSlot = roomCard.find('.room-information__status-slot')
     const statusSelect = statusSlot.find('select[name="/room_information/final_values/group_booking_status"]')
     expect(statusSlot.text()).toContain(zhCN.taskV4.roomInformation.groupBookingStatus)
@@ -1440,6 +1446,12 @@ describe('reservation V4 pages', () => {
     expect(traceCardSource).not.toContain('margin: 0 20px 18px')
   })
 
+  it('keeps Room Information summary compact on narrow screens and readable with readonly errors', () => {
+    expect(roomInformationCardSource).toMatch(/\.room-information__status-badge\s*\{[\s\S]*?flex-wrap: wrap;/)
+    expect(roomInformationCardSource).toMatch(/\.room-information__status-badge \.room-information__status-error\s*\{[\s\S]*?flex-basis: 100%;/)
+    expect(roomInformationCardSource).toMatch(/\.room-information__status-slot\s*\{[\s\S]*?flex: 0 1 auto;[\s\S]*?width: 100%;/)
+  })
+
   it('requires confirmed order id before resolving an unresolved V4 review card', async () => {
     const detail = createOrderTaskDetail({
       businessCardStatus: 'REVIEW_REQUIRED',