93 lines
1.9 KiB
Vue
93 lines
1.9 KiB
Vue
<script setup lang="ts">
|
||
import type { SigningTaskEvent } from '@/api/workbench/types'
|
||
|
||
defineProps<{
|
||
events: SigningTaskEvent[]
|
||
loading: boolean
|
||
error: boolean
|
||
}>()
|
||
</script>
|
||
|
||
<template>
|
||
<section class="audit-card">
|
||
<strong>操作留痕</strong>
|
||
|
||
<div v-if="loading" class="audit-state">正在加载操作留痕…</div>
|
||
<div v-else-if="error" class="audit-state audit-state--error">
|
||
操作留痕加载失败，请稍后刷新重试
|
||
</div>
|
||
<div v-else-if="!events.length" class="audit-state">暂无操作留痕</div>
|
||
|
||
<ol v-else class="audit-list">
|
||
<li v-for="event in events" :key="event.id">
|
||
<time>{{ event.time }}</time>
|
||
<span class="audit-event-content">
|
||
<span>{{ event.text }}</span>
|
||
<small v-if="event.attemptNo || event.reason">
|
||
<template v-if="event.attemptNo">第 {{ event.attemptNo }} 次</template>
|
||
<template v-if="event.attemptNo && event.reason"> · </template>
|
||
<template v-if="event.reason">{{ event.reason }}</template>
|
||
</small>
|
||
</span>
|
||
</li>
|
||
</ol>
|
||
</section>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.audit-card {
|
||
padding: 12px 16px;
|
||
margin-top: 14px;
|
||
background: var(--card);
|
||
border-radius: var(--r);
|
||
box-shadow: var(--sh);
|
||
}
|
||
|
||
.audit-card > strong {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.audit-state {
|
||
padding: 8px 0 1px;
|
||
color: var(--mut);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.audit-state--error {
|
||
color: var(--err);
|
||
}
|
||
|
||
.audit-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
padding: 0;
|
||
margin: 6px 0 0;
|
||
color: var(--mut);
|
||
font-size: 12px;
|
||
line-height: 1.65;
|
||
list-style: none;
|
||
}
|
||
|
||
.audit-list li {
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
.audit-list time {
|
||
flex-shrink: 0;
|
||
color: var(--mut);
|
||
}
|
||
|
||
.audit-event-content {
|
||
display: inline-flex;
|
||
gap: 4px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.audit-event-content small {
|
||
color: var(--mut);
|
||
font-size: 11px;
|
||
}
|
||
</style>
|