24kycj
111 lines
2.3 KiB
Vue
111 lines
2.3 KiB
Vue
<template>
|
|
<div class="activity-log">
|
|
<div class="activity-log__toolbar">
|
|
<button type="button" class="dw-btn dw-btn--ghost" @click="$emit('toggle-all')">
|
|
{{ showAll ? '最新日志' : '全部日志' }}
|
|
</button>
|
|
</div>
|
|
<div class="activity-log__list">
|
|
<div
|
|
v-for="(item, index) in list"
|
|
:key="index"
|
|
class="activity-log__item"
|
|
:class="`activity-log__item--${(item.status || 'INFO').toLowerCase()}`"
|
|
>
|
|
<span class="activity-log__badge">{{ item.status || 'INFO' }}</span>
|
|
<span class="activity-log__text">{{ item.text }}</span>
|
|
<span class="activity-log__time">{{ item.time }}</span>
|
|
</div>
|
|
<dw-empty v-if="!list.length" scene="logs" title="暂无日志" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import DwEmpty from '../ui/DwEmpty.vue'
|
|
|
|
export default {
|
|
name: 'ActivityLog',
|
|
components: { DwEmpty },
|
|
props: {
|
|
list: { type: Array, default: () => [] },
|
|
showAll: { type: Boolean, default: false }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.activity-log {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
min-height: 0;
|
|
|
|
&__toolbar {
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
&__list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
&__item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
padding: 10px 12px;
|
|
border-radius: var(--dw-radius-sm);
|
|
margin-bottom: 6px;
|
|
font-size: 13px;
|
|
background: #fff;
|
|
border: 1px solid var(--dw-border);
|
|
|
|
&--error {
|
|
background: var(--dw-danger-soft);
|
|
border-color: rgba(220, 38, 38, 0.15);
|
|
}
|
|
|
|
&--debug {
|
|
background: var(--dw-warning-soft);
|
|
border-color: rgba(217, 119, 6, 0.15);
|
|
}
|
|
}
|
|
|
|
&__badge {
|
|
flex-shrink: 0;
|
|
min-width: 44px;
|
|
text-align: center;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
background: var(--dw-info-soft);
|
|
color: var(--dw-info);
|
|
}
|
|
|
|
&__item--error &__badge {
|
|
background: rgba(220, 38, 38, 0.12);
|
|
color: var(--dw-danger);
|
|
}
|
|
|
|
&__item--debug &__badge {
|
|
background: rgba(217, 119, 6, 0.12);
|
|
color: var(--dw-warning);
|
|
}
|
|
|
|
&__text {
|
|
flex: 1;
|
|
min-width: 0;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
&__time {
|
|
flex-shrink: 0;
|
|
font-size: 12px;
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
</style>
|