Merge pull request #60 from xerrors/40-feat-log-viz

优化日志显示
2025-03-11 00:06:13 +08:00 · 2025-03-11 00:06:13 +08:00 · 5f532f3aea
commit 5f532f3aea
parent ab611018d9 fcbf4e2283
3 changed files with 306 additions and 54 deletions
--- a/web/package.json
+++ b/web/package.json
@ -17,6 +17,7 @@
    "ant-design-vue": "^4.2.3",
    "axios": "^1.3.4",
    "d3": "^7.8.3",
+    "dayjs": "^1.11.13",
    "echarts": "^5.4.2",
    "echarts-gl": "^2.0.9",
    "highlight.js": "^11.10.0",
--- a/web/src/components/ChatComponent.vue
+++ b/web/src/components/ChatComponent.vue
@ -987,7 +987,7 @@ watch(
  background-color: #666;
  border-radius: 50%;
  opacity: 0.3;
-  animation: pulse 1.4s infinite ease-in-out both;
+  animation: pulse 0.5s infinite ease-in-out both;
 }

 .loading-dots div:nth-child(1) {
--- a/web/src/components/DebugComponent.vue
+++ b/web/src/components/DebugComponent.vue
@ -1,52 +1,169 @@
 <template>
-  <div class="log-viewer">
-    <div class="button-group">
-      <a-button @click="fetchLogs" :loading="state.fetching">刷新</a-button>
-      <a-button @click="printConfig">打印配置</a-button>
-      <a-switch v-model:checked="state.autoRefresh" @change="toggleAutoRefresh">
-        自动刷新
-      </a-switch>
+  <div :class="['log-viewer', { fullscreen: state.isFullscreen }]" ref="logViewer">
+    <div class="control-panel">
+      <div class="button-group">
+        <a-button @click="fetchLogs" :loading="state.fetching">
+          <template #icon><ReloadOutlined /></template>
+          刷新
+        </a-button>
+        <a-button @click="clearLogs">
+          <template #icon><ClearOutlined /></template>
+          清空
+        </a-button>
+        <a-button @click="printConfig">
+          <template #icon><SettingOutlined /></template>
+          打印配置
+        </a-button>
+        <a-button @click="toggleFullscreen">
+          <template #icon>
+            <FullscreenOutlined v-if="!state.isFullscreen" />
+            <FullscreenExitOutlined v-else />
+          </template>
+          {{ state.isFullscreen ? '退出全屏' : '全屏' }}
+        </a-button>
+        <a-tooltip :title="state.autoRefresh ? '点击停止自动刷新' : '点击开启自动刷新'">
+          <a-button 
+            :type="state.autoRefresh ? 'primary' : 'default'"
+            @click="toggleAutoRefresh(!state.autoRefresh)"
+          >
+            <template #icon>
+              <SyncOutlined :spin="state.autoRefresh" />
+            </template>
+            自动刷新
+            <span v-if="state.autoRefresh" class="refresh-interval">(5s)</span>
+          </a-button>
+        </a-tooltip>
+      </div>
+      <div class="filter-group">
+        <a-input-search
+          v-model:value="state.searchText"
+          placeholder="搜索日志..."
+          style="width: 200px"
+          @search="onSearch"
+        />
+        <a-select
+          v-model:value="state.selectedLevels"
+          mode="multiple"
+          placeholder="选择日志级别"
+          :options="logLevels"
+          @change="filterLogs"
+        />
+      </div>
    </div>
    <div ref="logContainer" class="log-container">
-      <pre v-if="logs">{{ logs }}</pre>
+      <div v-if="processedLogs.length" class="log-lines">
+        <div
+          v-for="(log, index) in processedLogs"
+          :key="index"
+          :class="['log-line', `level-${log.level.toLowerCase()}`]"
+        >
+          <span class="timestamp">{{ formatTimestamp(log.timestamp) }}</span>
+          <span class="level">{{ log.level }}</span>
+          <span class="module">{{ log.module }}</span>
+          <span class="message">{{ log.message }}</span>
+        </div>
+      </div>
+      <div v-else class="empty-logs">暂无日志</div>
    </div>
    <p v-if="error" class="error">{{ error }}</p>
  </div>
 </template>

 <script setup>
-import { ref, onMounted, onActivated, onUnmounted, nextTick, reactive } from 'vue';
+import { ref, onMounted, onActivated, onUnmounted, nextTick, reactive, computed } from 'vue';
 import { useConfigStore } from '@/stores/config';
 import { useThrottleFn } from '@vueuse/core';
+import { 
+  FullscreenOutlined, 
+  FullscreenExitOutlined,
+  ReloadOutlined,
+  ClearOutlined,
+  SettingOutlined,
+  SyncOutlined
+} from '@ant-design/icons-vue';
+import dayjs from 'dayjs';

 const configStore = useConfigStore()
 const config = configStore.config;

-// 定义一个 ref 来存储日志数据和错误信息
-const logs = ref('');
-const error = ref('');
+// 定义日志级别
+const logLevels = [
+  { value: 'INFO', label: 'INFO' },
+  { value: 'ERROR', label: 'ERROR' },
+  { value: 'DEBUG', label: 'DEBUG' },
+  { value: 'WARNING', label: 'WARNING' }
+];
+
+const logViewer = ref(null);
+
+// 状态管理
 const state = reactive({
  fetching: false,
  autoRefresh: false,
-})
+  searchText: '',
+  selectedLevels: logLevels.map(l => l.value),
+  rawLogs: [],
+  isFullscreen: false,
+});

-// 定义一个 ref 来获取日志容器的 DOM 元素
+const logs = ref('');
+const error = ref('');
 const logContainer = ref(null);
+let autoRefreshInterval = null;

-// 定义一个方法来获取日志数据
+// 解析日志行
+const parseLogLine = (line) => {
+  const match = line.match(/^(\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2},\d{3}) - (\w+) - ([^-]+) - (.+)$/);
+  if (match) {
+    return {
+      timestamp: match[1],
+      level: match[2],
+      module: match[3].trim(),
+      message: match[4].trim(),
+      raw: line
+    };
+  }
+  return null;
+};
+
+// 格式化时间戳
+const formatTimestamp = (timestamp) => {
+  try {
+    // 将 "2025-03-10 08:26:37,269" 格式转换为 "2025-03-10 08:26:37.269"
+    const normalizedTimestamp = timestamp.replace(',', '.');
+    const date = dayjs(normalizedTimestamp);
+    return date.isValid() ? date.format('HH:mm:ss.SSS') : timestamp;
+  } catch (err) {
+    console.error('时间戳格式化错误:', err);
+    return timestamp;
+  }
+};
+
+// 处理日志显示
+const processedLogs = computed(() => {
+  return state.rawLogs
+    .map(parseLogLine)
+    .filter(log => log !== null)
+    .filter(log => state.selectedLevels.includes(log.level))
+    .filter(log => {
+      if (!state.searchText) return true;
+      return log.raw.toLowerCase().includes(state.searchText.toLowerCase());
+    });
+});
+
+// 获取日志数据
 const fetchLogs = async () => {
  state.fetching = true;
  try {
    error.value = '';
    const response = await fetch('/api/log');
    if (!response.ok) {
-      throw new Error('Failed to fetch logs');
+      throw new Error('获取日志失败');
    }

    const data = await response.json();
-    logs.value = data.log;
+    state.rawLogs = data.log.split('\n').filter(line => line.trim());

-    // 使用节流函数优化滚动操作
    await nextTick();
    const scrollToBottom = useThrottleFn(() => {
      if (logContainer.value) {
@ -55,19 +172,82 @@ const fetchLogs = async () => {
    }, 100);
    scrollToBottom();
  } catch (err) {
-    // 处理请求错误
-    error.value = `Error: ${err.message}`;
+    error.value = `错误: ${err.message}`;
  } finally {
    state.fetching = false;
  }
 };

-// 组件第一次挂载时自动获取日志并滚动到底部
+// 清空日志
+const clearLogs = () => {
+  state.rawLogs = [];
+};
+
+// 搜索功能
+const onSearch = () => {
+  // 搜索会通过computed自动触发
+};
+
+// 过滤日志
+const filterLogs = () => {
+  // 过滤会通过computed自动触发
+};
+
+// 自动刷新
+const toggleAutoRefresh = (value) => {
+  if (value) {
+    autoRefreshInterval = setInterval(fetchLogs, 5000);
+    state.autoRefresh = true;
+  } else {
+    if (autoRefreshInterval) {
+      clearInterval(autoRefreshInterval);
+      autoRefreshInterval = null;
+    }
+    state.autoRefresh = false;
+  }
+};
+
+// 全屏切换
+const toggleFullscreen = async () => {
+  try {
+    if (!state.isFullscreen) {
+      if (logViewer.value.requestFullscreen) {
+        await logViewer.value.requestFullscreen();
+      } else if (logViewer.value.webkitRequestFullscreen) {
+        await logViewer.value.webkitRequestFullscreen();
+      } else if (logViewer.value.msRequestFullscreen) {
+        await logViewer.value.msRequestFullscreen();
+      }
+    } else {
+      if (document.exitFullscreen) {
+        await document.exitFullscreen();
+      } else if (document.webkitExitFullscreen) {
+        await document.webkitExitFullscreen();
+      } else if (document.msExitFullscreen) {
+        await document.msExitFullscreen();
+      }
+    }
+  } catch (err) {
+    console.error('全屏切换失败:', err);
+  }
+};
+
+// 监听全屏变化
+const handleFullscreenChange = () => {
+  state.isFullscreen = Boolean(
+    document.fullscreenElement ||
+    document.webkitFullscreenElement ||
+    document.msFullscreenElement
+  );
+};
+
 onMounted(() => {
  fetchLogs();
+  document.addEventListener('fullscreenchange', handleFullscreenChange);
+  document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
+  document.addEventListener('msfullscreenchange', handleFullscreenChange);
 });

-// 组件重新激活时（从 keep-alive 缓存恢复）自动获取日志
 onActivated(() => {
  if (state.autoRefresh) {
    toggleAutoRefresh(true);
@ -76,37 +256,51 @@ onActivated(() => {
  }
 });

-// 添加自动刷新功能
-const toggleAutoRefresh = (value) => {
-  if (value) {
-    let autoRefreshInterval = setInterval(fetchLogs, 5000);
-    state.autoRefresh = true;
-  } else {
-    clearInterval(autoRefreshInterval);
-    state.autoRefresh = false;
-  }
-};
-
 onUnmounted(() => {
-  clearInterval(autoRefreshInterval);
+  if (autoRefreshInterval) {
+    clearInterval(autoRefreshInterval);
+    autoRefreshInterval = null;
+  }
+  document.removeEventListener('fullscreenchange', handleFullscreenChange);
+  document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
+  document.removeEventListener('msfullscreenchange', handleFullscreenChange);
 });

-// 添加新方法来打印配置信息
 const printConfig = () => {
  console.log('Current config:', config);
 };
-
 </script>

 <style scoped>
 .log-viewer {
  background: white;
+  height: 100%;
+}
+
+.log-viewer.fullscreen {
+  padding: 16px;
+}
+
+.control-panel {
+  margin-bottom: 16px;
 }

 .button-group {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
+
+  .refresh-interval {
+    font-size: 12px;
+    opacity: 0.8;
+    margin-left: 2px;
+  }
+}
+
+.filter-group {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 10px;
 }

 .error {
@ -114,32 +308,89 @@ const printConfig = () => {
 }

 .log-container {
-  height: calc(100vh - 150px); /* 设置最大高度 */
-  overflow-y: auto; /* 启用垂直滚动 */
-  background-color: #f6f7f7;
-  padding-bottom: 0;
-  border-radius: 5px;
-  margin-top: 10px;
-  white-space: pre-wrap; /* 使日志内容自动换行 */
-  word-wrap: break-word;
-  font-size: small;
-
+  height: calc(100vh - 200px);
+  overflow-y: auto;
  background: #0C0C0C;
  color: #D1D1D1;
+  border-radius: 5px;
+  font-family: 'Consolas', 'Monaco', monospace;
+  font-size: 13px;
+}

-  pre {
-    margin: 0;
-    padding: 10px;
-    height: 100%;
-  }
+.log-lines {
+  padding: 8px;
+}

-  transition: background-color 0.3s ease;
+.log-line {
+  padding: 2px 4px;
+  display: flex;
+  gap: 8px;
+  line-height: 1.4;
+}
+
+.log-line:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.timestamp {
+  color: #6A9955;
+  min-width: 80px;
+}
+
+.level {
+  min-width: 40px;
+  font-weight: bold;
+}
+
+.module {
+  color: #569CD6;
+  min-width: 30px;
+}
+
+.message {
+  flex: 1;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.level-info {
+  .level { color: #4EC9B0; }
+}
+
+.level-error {
+  .level { color: #F14C4C; }
+}
+
+.level-debug {
+  .level { color: #9CDCFE; }
+}
+
+.level-warning {
+  .level { color: #DCD900; }
+}
+
+.empty-logs {
+  padding: 16px;
+  text-align: center;
+  color: #666;
 }

@media (prefers-color-scheme: dark) {
  .log-container {
    background: #1E1E1E;
-    color: #D4D4D4;
  }
 }
+
+:fullscreen .log-container {
+  height: calc(100vh - 120px);
+}
+
+:-webkit-full-screen .log-container {
+  height: calc(100vh - 120px);
+}
+
+:-ms-fullscreen .log-container {
+  height: calc(100vh - 120px);
+}
+
 </style>