72 lines
1.6 KiB
Vue
72 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { convertRgbaColor } from '@/utils/color';
|
|
|
|
defineProps<{
|
|
log: Record<string, any>;
|
|
}>();
|
|
|
|
const successColor = '#0EB07B';
|
|
const failColor = '#F2050D';
|
|
|
|
const getColorByCode = (code: string) => {
|
|
if (Number(code) < 300) {
|
|
return {
|
|
color: successColor,
|
|
bgColor: convertRgbaColor(successColor, 0.1)[0]
|
|
};
|
|
}
|
|
return {
|
|
color: failColor,
|
|
bgColor: convertRgbaColor(failColor, 0.1)[0]
|
|
};
|
|
};
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="log-item">
|
|
<div class="flex-1 flex items-center">
|
|
<div class="log-tag log-item-tag" :style="{background: getColorByCode(log.response_status).bgColor, color: getColorByCode(log.response_status).color}">{{ log.response_status }}</div>
|
|
<d-popover :content="log.uuid" trigger="hover">
|
|
<div class="log-item-label">{{ log.uuid }}</div>
|
|
</d-popover>
|
|
<div class="log-tag log-item-event">{{ log.trigger }}</div>
|
|
</div>
|
|
<div class="text-CG500 text-[14px]">
|
|
{{ log.created_at }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.log-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-right: 24px;
|
|
}
|
|
.log-tag {
|
|
@apply box-border rounded-[3px] text-[12px] h-[18px] leading-[18px] text-center;
|
|
}
|
|
.log-item-tag {
|
|
max-width: 100px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
padding: 0px 4px;
|
|
width: auto!important;
|
|
}
|
|
.log-item-label {
|
|
color: var(--color-G900);
|
|
margin: 0 16px;
|
|
width: 260px;
|
|
@apply truncate text-[14px];
|
|
}
|
|
.log-item-event {
|
|
background-color: var(--color-CG200);
|
|
color: var(--color-G900);
|
|
@apply px-[5px];
|
|
}
|
|
</style>
|