Web_BLS_ProjectConsole/src/frontend/views/LogView.vue

<template>
  <div class="log-view">
    <div class="log-header">
      <h2>日志记录</h2>
      <div
        v-if="projectName"
        class="project-info"
      >
        <span class="project-name">{{ projectName }}</span>
        <span
          v-if="projectStatus"
          class="project-status"
          :class="`status-${projectStatus}`"
        >
          {{ projectStatus === '在线' ? '在线' : '离线' }}
        </span>
      </div>
    </div>

    <div
      v-if="!projectName"
      class="no-project"
    >
      <p>请先选择一个项目</p>
    </div>

    <div
      v-else
      class="log-container"
    >
      <div
        v-if="loading"
        class="loading-state"
      >
        <p>加载日志中...</p>
      </div>
      <div
        v-else-if="error"
        class="error-state"
      >
        <p>{{ error }}</p>
      </div>
      <div
        v-else-if="logs.length === 0"
        class="empty-state"
      >
        <p>暂无日志记录</p>
      </div>
      <div
        v-else
        class="log-list"
      >
        <div
          v-for="(log, index) in logs"
          :key="log.id || index"
          class="log-item"
          :class="`level-${log.level}`"
        >
          <div class="log-header">
            <span class="log-timestamp">
              {{ formatTimestamp(log.timestamp) }}
            </span>
            <span class="log-level">{{ log.level }}</span>
          </div>
          <div class="log-message">
            {{ log.message }}
          </div>
          <div
            v-if="log.metadata"
            class="log-metadata"
          >
            <pre>{{ JSON.stringify(log.metadata, null, 2) }}</pre>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted } from 'vue';
import axios from 'axios';

const props = defineProps({
  projectName: {
    type: String,
    default: '',
  },
});

const logs = ref([]);
const loading = ref(false);
const error = ref(null);
const projectStatus = ref(null);
let refreshInterval = null;

const fetchLogs = async () => {
  if (!props.projectName) {
    logs.value = [];
    projectStatus.value = null;
    return;
  }

  loading.value = true;
  error.value = null;

  try {
    const response = await axios.get(
      `http://localhost:3001/api/logs?projectName=${encodeURIComponent(props.projectName)}`,
    );
    logs.value = response.data.logs || [];
    projectStatus.value = response.data.projectStatus;
  } catch (err) {
    console.error('Failed to fetch logs:', err);
    error.value = '获取日志失败';
    logs.value = [];
    projectStatus.value = null;
  } finally {
    loading.value = false;
  }
};

const formatTimestamp = (timestamp) => {
  if (!timestamp) return '';
  const date = new Date(timestamp);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
  });
};

watch(
  () => props.projectName,
  () => {
    fetchLogs();
  },
);

onMounted(() => {
  if (props.projectName) {
    fetchLogs();
  }
  refreshInterval = setInterval(fetchLogs, 5000);
});

onUnmounted(() => {
  if (refreshInterval) {
    clearInterval(refreshInterval);
  }
});
</script>

<style scoped>
.log-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1rem;
  background-color: #1e1e1e;
  box-sizing: border-box;
}

.log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #3e3e42;
}

.log-header h2 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #e0e0e0;
  margin: 0;
}

.project-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.project-name {
  font-size: 0.9rem;
  color: #b0b0b0;
}

.project-status {
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  font-weight: 500;
}

.status-在线 {
  background-color: #1e3a2a;
  color: #4ade80;
}

.status-离线 {
  background-color: #3a1a1a;
  color: #f87171;
}

.no-project {
  text-align: center;
  padding: 2rem;
  color: #999;
}

.log-container {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.loading-state,
.error-state,
.empty-state {
  text-align: center;
  padding: 2rem;
  color: #999;
}

.error-state {
  color: #ea4335;
}

.log-list {
  flex: 1;
  overflow-y: auto;
  max-height: calc(100vh - 200px);
}

.log-item {
  padding: 0.8rem;
  margin-bottom: 0.5rem;
  background-color: #252526;
  border: 1px solid #3e3e42;
  border-radius: 4px;
  border-left: 3px solid #999;
}

.log-item.level-info {
  border-left-color: #4285f4;
}

.log-item.level-warn {
  border-left-color: #fbbc05;
}

.log-item.level-error {
  border-left-color: #ea4335;
}

.log-item.level-debug {
  border-left-color: #999;
}

.log-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}

.log-timestamp {
  color: #999;
}

.log-level {
  font-weight: bold;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  text-transform: uppercase;
}

.log-item.level-info .log-level {
  background-color: #1e3a5e;
  color: #4285f4;
}

.log-item.level-warn .log-level {
  background-color: #5e4e1e;
  color: #fbbc05;
}

.log-item.level-error .log-level {
  background-color: #5e1e1e;
  color: #ea4335;
}

.log-item.level-debug .log-level {
  background-color: #3e3e3e;
  color: #999;
}

.log-message {
  color: #e0e0e0;
  line-height: 1.5;
  margin-bottom: 0.5rem;
  word-wrap: break-word;
}

.log-metadata {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background-color: #1e1e1e;
  border-radius: 4px;
  overflow-x: auto;
}

.log-metadata pre {
  margin: 0;
  font-size: 0.75rem;
  color: #b0b0b0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.log-list::-webkit-scrollbar {
  width: 8px;
}

.log-list::-webkit-scrollbar-track {
  background: #252526;
  border-radius: 4px;
}

.log-list::-webkit-scrollbar-thumb {
  background: #3e3e42;
  border-radius: 4px;
}

.log-list::-webkit-scrollbar-thumb:hover {
  background: #4e4e52;
}
</style>