修复V4办理页进度与卡片对齐问题

client/src/components/reservation/ReservationV4PaymentAttachmentPreview.vue

@@ -386,7 +386,6 @@ function formatFileSize(size: number | null): string {
 .payment-attachments {
   display: grid;
   gap: 12px;
-  margin: 0 20px 18px;
   border: 1px solid var(--th-color-slate-200);
   border-radius: var(--th-radius-sm);
   background: var(--th-color-slate-50);

client/src/components/reservation/ReservationV4RoomingListCard.vue

@@ -58,7 +58,6 @@ function readableValue(value?: string | null): string {
 .rooming-list-card {
   display: grid;
   gap: 12px;
-  margin: 0 20px 18px;
   border: 1px solid var(--th-color-slate-200);
   border-radius: var(--th-radius-sm);
   background: var(--th-color-slate-50);

client/src/components/reservation/ReservationV4TraceCard.vue

@@ -415,7 +415,6 @@ function isRecord(value: unknown): value is ReservationRecord {
 .trace-card {
   display: grid;
   gap: 14px;
-  margin: 0 20px 18px;
 }
 
 .trace-item {

client/src/i18n/locales/en-US.ts

@@ -581,6 +581,7 @@ export default {
     totalCards: 'Total',
     pendingCards: 'Pending',
     reviewCards: 'Review',
+    readonlyCards: 'View only',
     confirmedCards: 'Confirmed',
     orderTaskId: 'Item ID',
     orderReference: 'Order reference',

client/src/i18n/locales/th-TH.ts

@@ -581,6 +581,7 @@ export default {
     totalCards: 'ทั้งหมด',
     pendingCards: 'รอยืนยัน',
     reviewCards: 'รอตรวจสอบ',
+    readonlyCards: 'ดูอย่างเดียว',
     confirmedCards: 'ยืนยันแล้ว',
     orderTaskId: 'รหัสรายการ',
     orderReference: 'อ้างอิงออเดอร์',

client/src/i18n/locales/zh-CN.ts

@@ -581,6 +581,7 @@ export default {
     totalCards: '全部',
     pendingCards: '待确认',
     reviewCards: '待复核',
+    readonlyCards: '仅查看',
     confirmedCards: '已确认',
     orderTaskId: '事项编号',
     orderReference: '订单引用',

client/src/tests/reservationV4Views.spec.ts

@@ -7,6 +7,9 @@ import { createI18n } from 'vue-i18n'
 import { createMemoryHistory, createRouter } from 'vue-router'
 
 import taskCardSectionSource from '@/components/reservation/ReservationV4TaskCardSection.vue?raw'
+import paymentAttachmentPreviewSource from '@/components/reservation/ReservationV4PaymentAttachmentPreview.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'
 import { useAuthStore } from '@/stores/authStore'
 import type {
@@ -164,7 +167,11 @@ describe('reservation V4 pages', () => {
     expect(summary.text()).toContain('3')
     expect(summary.text()).toContain('2')
     expect(summary.text()).toContain(zhCN.taskV4.pendingCards)
+    expect(summary.text()).toContain(zhCN.taskV4.readonlyCards)
     expect(summary.text()).toContain(zhCN.taskV4.confirmedCards)
+    const readonlyProgress = summary.find('.handling-progress__item--readonly')
+    expect(readonlyProgress.exists()).toBe(true)
+    expect(readonlyProgress.text()).toContain('1')
     expect(summary.text()).not.toContain('9001')
     expect(summary.text()).not.toContain(zhCN.taskV4.orderTaskId)
   })
@@ -201,6 +208,25 @@ describe('reservation V4 pages', () => {
     expect(wrapper.find('.card-actions .primary-button').exists()).toBe(false)
   })
 
+  it('keeps bound order links in non-rooming card footers', async () => {
+    const detail = createOrderTaskDetail()
+    useBoundOrder(detail)
+    vi.mocked(service.fetchReservationV4OrderTaskDetail).mockResolvedValue(detail)
+
+    const wrapper = await mountWithPlugins(
+      ReservationV4OrderTaskDetailView,
+      '/reservation/order-tasks/9001',
+    )
+    await flushPromises()
+
+    const firstCard = wrapper.find('.task-card-section')
+    const footerLink = firstCard.find('.task-card-section__footer .card-order-link')
+    expect(footerLink.exists()).toBe(true)
+    expect(footerLink.text()).toContain(zhCN.task.viewOrder)
+    expect(footerLink.attributes('data-to')).toBe('/reservation/orders/order-2001')
+    expect(firstCard.find('.task-card-section__body .card-order-link').exists()).toBe(false)
+  })
+
   it('does not render direct attachment URLs from V4 source message payload', async () => {
     const detail = createOrderTaskDetail({
       sourceDisplayPayload: {
@@ -1408,6 +1434,12 @@ describe('reservation V4 pages', () => {
     expect(taskCardSectionSource).toContain('.task-card-section__footer {\n    align-items: flex-end;\n  }')
   })
 
+  it('lets specialized V4 card bodies align with the shared card shell padding', () => {
+    expect(paymentAttachmentPreviewSource).not.toContain('margin: 0 20px 18px')
+    expect(roomingListCardSource).not.toContain('margin: 0 20px 18px')
+    expect(traceCardSource).not.toContain('margin: 0 20px 18px')
+  })
+
   it('requires confirmed order id before resolving an unresolved V4 review card', async () => {
     const detail = createOrderTaskDetail({
       businessCardStatus: 'REVIEW_REQUIRED',
@@ -1525,7 +1557,8 @@ async function mountWithPlugins(component: object, initialPath: string) {
       plugins: [pinia, i18n, router, PrimeVue],
       stubs: {
         RouterLink: {
-          template: '<a><slot /></a>',
+          props: ['to'],
+          template: '<a :data-to="to"><slot /></a>',
         },
       },
     },

client/src/views/reservation/ReservationV4OrderTaskDetailView.vue

@@ -80,6 +80,10 @@
                 <span>{{ t('taskV4.reviewCards') }}</span>
                 <strong>{{ detail.card_counts.review_required_count }}</strong>
               </div>
+              <div class="handling-progress__item handling-progress__item--readonly">
+                <span>{{ t('taskV4.readonlyCards') }}</span>
+                <strong>{{ detail.card_counts.readonly_count }}</strong>
+              </div>
               <div class="handling-progress__item handling-progress__item--confirmed">
                 <span>{{ t('taskV4.confirmedCards') }}</span>
                 <strong>{{ detail.card_counts.confirmed_count }}</strong>
@@ -784,6 +788,10 @@ function formatApiError(error: unknown, fallback: string): {
   line-height: 1;
 }
 
+.handling-progress__item--total {
+  grid-column: 1 / -1;
+}
+
 .handling-progress__item--pending strong {
   color: var(--th-color-info);
 }
@@ -796,6 +804,10 @@ function formatApiError(error: unknown, fallback: string): {
   color: var(--th-color-success);
 }
 
+.handling-progress__item--readonly strong {
+  color: var(--th-color-slate-600);
+}
+
 .card-stack {
   display: grid;
   gap: 14px;