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

client/src/components/reservation/ReservationV4TaskCardSection.vue

@@ -26,44 +26,11 @@
       </p>
     </div>
 
-    <ReservationV4RoomInformationCard
-      v-if="isRoomInformationCard"
-      class="task-card-section__fields"
-      :card="card"
-      :model-value="modelValue"
-      :read-only="readOnly"
-      :editable-keys="editableKeys"
-      :validation-errors="validationErrors"
-      :hotel-id="hotelId"
-      @update:model-value="emit('update:modelValue', $event)"
-    />
-    <template v-else>
-      <ReservationV4RoomingListCard
-        v-if="isRoomingListCard"
-        :order-reference="orderReference"
-        :target-locator="targetLocator"
-        :bound-order-id="boundOrderId"
-        :bound-order-display-name="boundOrderDisplayName"
-      />
-      <ReservationV4PaymentAttachmentPreview
-        v-else-if="isPaymentCard"
-        :card="card"
-        :source-message-id="sourceMessageId"
-      />
-      <ReservationV4TraceCard
-        v-else-if="isTraceCard"
-        :card="card"
-        :model-value="modelValue"
-        :read-only="readOnly"
-        :editable-keys="editableKeys"
-        :validation-errors="validationErrors"
-        :hotel-id="hotelId"
-        @update:model-value="emit('update:modelValue', $event)"
-      />
-      <ReservationV4TaskCardFieldRenderer
-        v-else
+    <div class="task-card-section__body">
+      <ReservationV4RoomInformationCard
+        v-if="isRoomInformationCard"
         class="task-card-section__fields"
-        :fields="visibleFields"
+        :card="card"
         :model-value="modelValue"
         :read-only="readOnly"
         :editable-keys="editableKeys"
@@ -71,50 +38,85 @@
         :hotel-id="hotelId"
         @update:model-value="emit('update:modelValue', $event)"
       />
-    </template>
-
-    <div
-      v-if="actionErrors.length"
-      class="action-message action-message--error"
-    >
-      <p
-        v-for="message in actionErrors"
-        :key="message"
-      >
-        {{ message }}
-      </p>
-    </div>
-
-    <p
-      v-if="successMessage"
-      class="action-message action-message--success"
-    >
-      {{ successMessage }}
-    </p>
-
-    <div
-      v-if="card.card_status === 'REVIEW_REQUIRED'"
-      class="review-box"
-    >
-      <label>
-        <span>{{ t('taskV4.confirmedOrderId') }}</span>
-        <input
-          name="v4_confirmed_order_id"
-          :value="reviewForm.confirmed_order_id"
-          :placeholder="t('taskV4.confirmedOrderIdPlaceholder')"
-          @input="updateReviewForm('confirmed_order_id', $event)"
-        >
-      </label>
-      <label>
-        <span>{{ t('taskV4.reviewReason') }}</span>
-        <textarea
-          name="v4_review_reason"
-          :value="reviewForm.reason"
-          :placeholder="t('taskV4.reviewReasonPlaceholder')"
-          rows="3"
-          @input="updateReviewForm('reason', $event)"
+      <template v-else>
+        <ReservationV4RoomingListCard
+          v-if="isRoomingListCard"
+          :order-reference="orderReference"
+          :target-locator="targetLocator"
+          :bound-order-id="boundOrderId"
+          :bound-order-display-name="boundOrderDisplayName"
         />
-      </label>
+        <ReservationV4PaymentAttachmentPreview
+          v-else-if="isPaymentCard"
+          :card="card"
+          :source-message-id="sourceMessageId"
+        />
+        <ReservationV4TraceCard
+          v-else-if="isTraceCard"
+          :card="card"
+          :model-value="modelValue"
+          :read-only="readOnly"
+          :editable-keys="editableKeys"
+          :validation-errors="validationErrors"
+          :hotel-id="hotelId"
+          @update:model-value="emit('update:modelValue', $event)"
+        />
+        <ReservationV4TaskCardFieldRenderer
+          v-else
+          class="task-card-section__fields"
+          :fields="visibleFields"
+          :model-value="modelValue"
+          :read-only="readOnly"
+          :editable-keys="editableKeys"
+          :validation-errors="validationErrors"
+          :hotel-id="hotelId"
+          @update:model-value="emit('update:modelValue', $event)"
+        />
+      </template>
+
+      <div
+        v-if="actionErrors.length"
+        class="action-message action-message--error"
+      >
+        <p
+          v-for="message in actionErrors"
+          :key="message"
+        >
+          {{ message }}
+        </p>
+      </div>
+
+      <p
+        v-if="successMessage"
+        class="action-message action-message--success"
+      >
+        {{ successMessage }}
+      </p>
+
+      <div
+        v-if="card.card_status === 'REVIEW_REQUIRED'"
+        class="review-box"
+      >
+        <label>
+          <span>{{ t('taskV4.confirmedOrderId') }}</span>
+          <input
+            name="v4_confirmed_order_id"
+            :value="reviewForm.confirmed_order_id"
+            :placeholder="t('taskV4.confirmedOrderIdPlaceholder')"
+            @input="updateReviewForm('confirmed_order_id', $event)"
+          >
+        </label>
+        <label>
+          <span>{{ t('taskV4.reviewReason') }}</span>
+          <textarea
+            name="v4_review_reason"
+            :value="reviewForm.reason"
+            :placeholder="t('taskV4.reviewReasonPlaceholder')"
+            rows="3"
+            @input="updateReviewForm('reason', $event)"
+          />
+        </label>
+      </div>
     </div>
 
     <div
@@ -261,15 +263,18 @@ function handlePrimaryAction(): void {
 <style scoped>
 .task-card-section {
   overflow: hidden;
+  border-color: var(--th-color-slate-200);
+  box-shadow: var(--th-shadow-sm);
 }
 
 .task-card-section__header {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
   gap: 16px;
   border-bottom: 1px solid var(--th-color-slate-200);
-  padding: 20px;
+  background: linear-gradient(180deg, var(--th-color-white), var(--th-color-slate-50));
+  padding: 18px 20px;
 }
 
 .task-card-section__heading {
@@ -289,21 +294,27 @@ function handlePrimaryAction(): void {
 .card-notice-list {
   display: grid;
   gap: 6px;
-  border-bottom: 1px solid var(--th-color-slate-100);
-  background: var(--th-color-slate-50);
+  border-bottom: 1px solid var(--th-color-slate-200);
+  background: var(--th-color-info-bg);
   padding: 12px 20px;
 }
 
 .card-notice-list p {
   margin: 0;
-  color: var(--th-color-slate-600);
+  color: var(--th-color-slate-700);
   font-size: 13px;
-  font-weight: 700;
+  font-weight: 800;
   line-height: 1.5;
 }
 
+.task-card-section__body {
+  display: grid;
+  gap: 16px;
+  padding: 18px 20px 16px;
+}
+
 .task-card-section__fields {
-  padding: 0 20px 18px;
+  padding: 0;
 }
 
 .primary-button {
@@ -337,7 +348,9 @@ function handlePrimaryAction(): void {
   align-items: center;
   justify-content: space-between;
   gap: 14px;
-  padding: 0 20px 20px;
+  border-top: 1px solid var(--th-color-slate-100);
+  background: var(--th-color-white);
+  padding: 14px 20px 18px;
 }
 
 .task-card-section__footer-actions {
@@ -351,9 +364,10 @@ function handlePrimaryAction(): void {
   grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
   gap: 12px;
   align-items: end;
-  border-top: 1px solid var(--th-color-slate-200);
-  background: linear-gradient(180deg, var(--th-color-white), var(--th-color-slate-50));
-  padding: 16px 20px 18px;
+  border: 1px solid var(--th-color-warning-bg);
+  border-radius: var(--th-radius-md);
+  background: var(--th-color-warning-bg);
+  padding: 14px;
 }
 
 .review-box label {
@@ -362,9 +376,9 @@ function handlePrimaryAction(): void {
 }
 
 .review-box span {
-  color: var(--th-color-slate-500);
+  color: var(--th-color-slate-700);
   font-size: 12px;
-  font-weight: 800;
+  font-weight: 900;
 }
 
 .review-box input,
@@ -386,10 +400,10 @@ function handlePrimaryAction(): void {
 }
 
 .action-message {
-  margin: 0 20px 18px;
+  margin: 0;
   border-radius: var(--th-radius-sm);
   font-size: 13px;
-  font-weight: 700;
+  font-weight: 800;
   padding: 10px 12px;
 }
 
@@ -414,18 +428,23 @@ function handlePrimaryAction(): void {
 .card-order-link {
   display: inline-flex;
   align-items: center;
-  color: var(--th-color-blue-600);
+  min-height: 38px;
+  border: 1px solid var(--th-color-slate-200);
+  border-radius: var(--th-radius-sm);
+  background: var(--th-color-white);
+  color: var(--th-color-slate-700);
   font-size: 13px;
   font-weight: 800;
+  padding: 8px 12px;
   text-decoration: none;
 }
 
 .card-order-link:hover {
-  text-decoration: underline;
+  border-color: var(--th-color-blue-600);
+  color: var(--th-color-blue-600);
 }
 
 @media (max-width: 980px) {
-  .task-card-section__header,
   .review-box {
     grid-template-columns: 1fr;
   }