接入前端真实接口并标记邮件HTML清洗

client/src/components/reservation/ReservationTaskQueue.vue

@@ -1,27 +1,50 @@
 <template>
   <div class="task-queue">
-    <button
+    <article
       v-for="task in items"
       :key="task.task_id"
       class="task-row"
       :class="{ 'task-row--active': task.task_id === activeTaskId }"
-      type="button"
-      @click="$emit('openTask', task.task_id)"
     >
-      <span class="task-row__index">{{ task.queue_sequence ?? '-' }}</span>
-      <span class="task-row__main">
-        <strong>{{ task.card_name ?? task.task_type }}</strong>
-        <small>{{ task.task_type }} / {{ task.task_subtype ?? '-' }}</small>
-        <em v-if="!task.source_message_id || !task.external_conversation_id">
+      <button
+        class="task-row__select"
+        type="button"
+        @click="$emit('openTask', task.task_id)"
+      >
+        <span class="task-row__index">{{ task.queue_sequence ?? '-' }}</span>
+        <span class="task-row__main">
+          <strong>{{ task.card_name ?? task.task_type }}</strong>
+          <small>{{ task.task_type }} / {{ task.task_subtype ?? '-' }}</small>
+          <em :class="{ 'task-row__reason--blocked': !task.can_process }">
+            {{ task.can_process ? t('taskList.canProcess') : t('taskList.cannotProcess') }}
+            <template v-if="!task.can_process && task.readonly_reason_code">
+              · {{ task.readonly_reason_code }}
+            </template>
+          </em>
+        </span>
+        <ReservationStatusBadge :status="task.task_status" />
+      </button>
+      <div class="task-row__actions">
+        <span
+          v-if="!task.source_message_id"
+          class="task-row__pending"
+        >
           {{ t('common.endpointMissing') }}
-        </em>
-      </span>
-      <ReservationStatusBadge :status="task.task_status" />
-    </button>
+        </span>
+        <RouterLink
+          v-else
+          class="task-row__link"
+          :to="`/reservation/source-messages/${task.source_message_id}/conversation`"
+        >
+          {{ t('taskList.viewConversation') }}
+        </RouterLink>
+      </div>
+    </article>
   </div>
 </template>
 
 <script setup lang="ts">
+import { RouterLink } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 
 import ReservationStatusBadge from '@/components/reservation/ReservationStatusBadge.vue'
@@ -46,17 +69,24 @@ const { t } = useI18n()
 }
 
 .task-row {
+  border: 1px solid var(--th-color-slate-200);
+  border-radius: var(--th-radius-md);
+  background: var(--th-color-white);
+  color: inherit;
+  padding: 10px;
+}
+
+.task-row__select {
   display: grid;
   grid-template-columns: 34px minmax(0, 1fr) auto;
   gap: 10px;
   align-items: center;
   width: 100%;
-  border: 1px solid var(--th-color-slate-200);
-  border-radius: var(--th-radius-md);
-  background: var(--th-color-white);
+  border: 0;
+  background: transparent;
   color: inherit;
   cursor: pointer;
-  padding: 10px;
+  padding: 0;
   text-align: left;
 }
 
@@ -85,7 +115,8 @@ const { t } = useI18n()
 }
 
 .task-row__main strong,
-.task-row__main small {
+.task-row__main small,
+.task-row__main em {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -102,9 +133,31 @@ const { t } = useI18n()
 }
 
 .task-row__main em {
-  color: var(--th-color-slate-500);
+  color: var(--th-color-success);
   font-size: 11px;
   font-style: normal;
   font-weight: 800;
 }
+
+.task-row__reason--blocked {
+  color: var(--th-color-warning);
+}
+
+.task-row__actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 8px;
+}
+
+.task-row__link,
+.task-row__pending {
+  color: var(--th-color-slate-500);
+  font-size: 11px;
+  font-weight: 800;
+  text-decoration: none;
+}
+
+.task-row__link {
+  color: var(--th-color-blue-600);
+}
 </style>