Web_BLS_ProjectConsole/src/frontend/views/LogView.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>