huangting/th-hotel-simple
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化V4订单事项办理页视觉交互

Browse Source
This commit is contained in:
andy
2026-07-22 10:49:29 +07:00
parent 8c1221d2b0
commit 542c872597
8 changed files with 1077 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
client/src/views/reservation/ReservationV4OrderTaskDetailView.vue
View File

@@ -28,52 +28,63 @@
{{ errorMessage }}
</div>
<template v-else-if="detail">
<section class="th-section summary-section">
<div class="th-section-header">
<section class="th-section handling-summary">
<div class="handling-summary__hero">
<div>
<h2 class="th-section-title">
{{ t('taskV4.orderTaskSummary') }}
</h2>
<p class="th-muted">
{{ detail.source_message_summary?.subject ?? t('taskList.noSourceSubject') }}
</p>
<span class="handling-summary__eyebrow">{{ t('taskV4.handlingDesk') }}</span>
<h2>{{ displayOrderReference }}</h2>
<p>{{ detail.source_message_summary?.subject ?? t('taskList.noSourceSubject') }}</p>
</div>
<ReservationStatusBadge :status="detail.order_task.order_task_status" />
</div>
<div class="summary-grid">
<div>
<span>{{ t('taskV4.orderReference') }}</span>
<strong>{{ displayOrderReference }}</strong>
<div class="handling-summary__content">
<div class="handling-summary__facts">
<div>
<span>{{ t('taskV4.targetBookingType') }}</span>
<strong>{{ bookingTypeLabel }}</strong>
</div>
<div>
<span>{{ t('taskV4.targetLocator') }}</span>
<strong>{{ targetLocator }}</strong>
</div>
<div>
<span>{{ t('taskV4.targetResolutionStatus') }}</span>
<strong>{{ targetResolutionLabel }}</strong>
</div>
<div>
<span>{{ t('taskV4.sourceSender') }}</span>
<strong>{{ detail.source_message_summary?.sender_summary ?? '-' }}</strong>
</div>
<div>
<span>{{ t('taskV4.sourceReceivedAt') }}</span>
<strong>{{ formatReservationDateTime(detail.order_task.source_received_at) }}</strong>
</div>
</div>
<div>
<span>{{ t('taskV4.targetBookingType') }}</span>
<strong>{{ bookingTypeLabel }}</strong>
</div>
<div>
<span>{{ t('taskV4.targetLocator') }}</span>
<strong>{{ targetLocator }}</strong>
</div>
<div>
<span>{{ t('taskV4.targetResolutionStatus') }}</span>
<strong>{{ targetResolutionLabel }}</strong>
</div>
<div>
<span>{{ t('taskV4.cardCounts') }}</span>
<strong>
{{ t('taskList.cardCountsTotal', { total: detail.card_counts.total_count }) }}
</strong>
<small>
{{ t('taskList.cardCountsPending', { count: detail.card_counts.pending_confirm_count }) }}
·
{{ t('taskList.cardCountsReview', { count: detail.card_counts.review_required_count }) }}
·
{{ t('taskList.cardCountsConfirmed', { count: detail.card_counts.confirmed_count }) }}
</small>
</div>
<div>
<span>{{ t('task.sourceReceivedAt') }}</span>
<strong>{{ formatReservationDateTime(detail.order_task.source_received_at) }}</strong>
<div
class="handling-progress"
:aria-label="t('taskV4.cardProgress')"
>
<span class="handling-progress__label">{{ t('taskV4.cardProgress') }}</span>
<div class="handling-progress__items">
<div class="handling-progress__item handling-progress__item--total">
<span>{{ t('taskV4.totalCards') }}</span>
<strong>{{ detail.card_counts.total_count }}</strong>
</div>
<div class="handling-progress__item handling-progress__item--pending">
<span>{{ t('taskV4.pendingCards') }}</span>
<strong>{{ detail.card_counts.pending_confirm_count }}</strong>
</div>
<div class="handling-progress__item handling-progress__item--review">
<span>{{ t('taskV4.reviewCards') }}</span>
<strong>{{ detail.card_counts.review_required_count }}</strong>
</div>
<div class="handling-progress__item handling-progress__item--confirmed">
<span>{{ t('taskV4.confirmedCards') }}</span>
<strong>{{ detail.card_counts.confirmed_count }}</strong>
</div>
</div>
</div>
</div>
</section>
@@ -662,39 +673,127 @@ function formatApiError(error: unknown, fallback: string): {
color: var(--th-color-danger);
}
.summary-section,
.handling-summary,
.diagnostics-section,
.card-stack {
overflow: hidden;
}
.summary-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
padding: 0 20px 20px;
.handling-summary {
border-color: color-mix(in srgb, var(--th-color-slate-200) 80%, var(--th-color-blue-600));
box-shadow: var(--th-shadow-panel);
}
.summary-grid div {
.handling-summary__hero {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
border-bottom: 1px solid var(--th-color-slate-200);
background: linear-gradient(180deg, var(--th-color-white), var(--th-color-slate-50));
padding: 22px 24px 18px;
}
.handling-summary__eyebrow {
color: var(--th-color-info);
font-size: 12px;
font-weight: 900;
}
.handling-summary__hero h2,
.handling-summary__hero p {
margin: 0;
}
.handling-summary__hero h2 {
margin-top: 6px;
color: var(--th-color-slate-900);
font-size: 24px;
line-height: 1.2;
overflow-wrap: anywhere;
}
.handling-summary__hero p {
margin-top: 8px;
color: var(--th-color-slate-500);
font-size: 14px;
line-height: 1.5;
overflow-wrap: anywhere;
}
.handling-summary__content {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
gap: 20px;
padding: 18px 24px 22px;
}
.handling-summary__facts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.handling-summary__facts div {
display: grid;
gap: 5px;
min-width: 0;
}
.summary-grid span {
.handling-summary__facts span,
.handling-progress__label,
.handling-progress__item span {
color: var(--th-color-slate-500);
font-size: 12px;
font-weight: 800;
font-weight: 900;
}
.summary-grid strong {
.handling-summary__facts strong {
color: var(--th-color-slate-900);
font-size: 13px;
overflow-wrap: anywhere;
}
.summary-grid small {
color: var(--th-color-slate-500);
font-size: 12px;
.handling-progress {
display: grid;
align-content: start;
gap: 10px;
border: 1px solid var(--th-color-slate-200);
border-radius: var(--th-radius-md);
background: var(--th-color-slate-50);
padding: 12px;
}
.handling-progress__items {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.handling-progress__item {
display: grid;
gap: 4px;
border-radius: var(--th-radius-sm);
background: var(--th-color-white);
padding: 10px;
}
.handling-progress__item strong {
color: var(--th-color-slate-900);
font-size: 20px;
line-height: 1;
}
.handling-progress__item--pending strong {
color: var(--th-color-info);
}
.handling-progress__item--review strong {
color: var(--th-color-warning);
}
.handling-progress__item--confirmed strong {
color: var(--th-color-success);
}
.card-stack {
@@ -757,7 +856,19 @@ function formatApiError(error: unknown, fallback: string): {
}
@media (max-width: 980px) {
.summary-grid {
.page-heading {
flex-direction: column;
}
.handling-summary__content {
grid-template-columns: 1fr;
}
.handling-summary__hero {
flex-direction: column;
}
.handling-summary__facts {
grid-template-columns: 1fr;
}
}