82 lines
1.4 KiB
Vue
82 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<div class="log-view">
|
||
|
|
<h2>日志记录</h2>
|
||
|
|
<div class="log-container">
|
||
|
|
<div v-if="logs.length === 0" class="empty-state">
|
||
|
|
<p>暂无日志记录</p>
|
||
|
|
</div>
|
||
|
|
<div v-for="(log, index) in logs" :key="index" class="log-item">
|
||
|
|
<div class="log-header">
|
||
|
|
<span class="log-timestamp">{{ log.timestamp }}</span>
|
||
|
|
<span class="log-level">{{ log.level }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="log-message">{{ log.message }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref } from 'vue'
|
||
|
|
|
||
|
|
const logs = ref([])
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.log-view {
|
||
|
|
max-width: 1200px;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
h2 {
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-container {
|
||
|
|
background-color: white;
|
||
|
|
border-radius: 8px;
|
||
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||
|
|
padding: 1rem;
|
||
|
|
max-height: 600px;
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.empty-state {
|
||
|
|
text-align: center;
|
||
|
|
color: #666;
|
||
|
|
padding: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-item {
|
||
|
|
padding: 1rem;
|
||
|
|
border-bottom: 1px solid #eee;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-item:last-child {
|
||
|
|
border-bottom: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
font-size: 0.9rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-timestamp {
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-level {
|
||
|
|
font-weight: bold;
|
||
|
|
padding: 0.2rem 0.5rem;
|
||
|
|
border-radius: 4px;
|
||
|
|
font-size: 0.8rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-message {
|
||
|
|
color: #333;
|
||
|
|
line-height: 1.5;
|
||
|
|
}
|
||
|
|
</style>
|