接入前端P0页面真实接口

client/src/components/reservation/ReservationStatusBadge.vue

@@ -0,0 +1,77 @@
+<template>
+  <span
+    class="status-badge"
+    :class="`status-badge--${tone}`"
+  >
+    {{ label }}
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps<{
+  status: string
+}>()
+
+const { t } = useI18n()
+
+const tone = computed(() => {
+  if (['ACTIVE', 'COMPLETED', 'SUCCEEDED'].includes(props.status)) {
+    return 'success'
+  }
+  if (['PENDING_CONFIRM', 'READY', 'PENDING', 'TEMPORARY', 'EXECUTING'].includes(props.status)) {
+    return 'info'
+  }
+  if (['BLOCKED', 'FAILED'].includes(props.status)) {
+    return 'danger'
+  }
+  if (['ENDED', 'LOGIC_DELETED', 'SKIPPED'].includes(props.status)) {
+    return 'neutral'
+  }
+  return 'warning'
+})
+
+const label = computed(() => t(`status.${props.status}`, props.status))
+</script>
+
+<style scoped>
+.status-badge {
+  display: inline-flex;
+  min-width: 54px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  padding: 3px 8px;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1.35;
+  white-space: nowrap;
+}
+
+.status-badge--success {
+  background: var(--th-color-success-bg);
+  color: var(--th-color-success);
+}
+
+.status-badge--info {
+  background: var(--th-color-info-bg);
+  color: var(--th-color-info);
+}
+
+.status-badge--danger {
+  background: var(--th-color-danger-bg);
+  color: var(--th-color-danger);
+}
+
+.status-badge--warning {
+  background: var(--th-color-warning-bg);
+  color: var(--th-color-warning);
+}
+
+.status-badge--neutral {
+  background: var(--th-color-slate-100);
+  color: var(--th-color-slate-700);
+}
+</style>