78 lines
1.5 KiB
Vue
78 lines
1.5 KiB
Vue
<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>
|