更新依赖版本，优化日志处理逻辑，添加日志解析功能

package.json

@@ -19,36 +19,36 @@
     ]
   },
   "dependencies": {
-    "@fullcalendar/core": "^6.1.8",
+    "@fullcalendar/core": "^6.1.15",
-    "@fullcalendar/daygrid": "^6.1.8",
+    "@fullcalendar/daygrid": "^6.1.15",
-    "@fullcalendar/interaction": "^6.1.7",
+    "@fullcalendar/interaction": "^6.1.15",
-    "@fullcalendar/list": "^6.1.7",
+    "@fullcalendar/list": "^6.1.15",
-    "@fullcalendar/timegrid": "^6.1.7",
+    "@fullcalendar/timegrid": "^6.1.15",
-    "@fullcalendar/vue3": "^6.1.8",
+    "@fullcalendar/vue3": "^6.1.15",
-    "@iconify/utils": "^2.1.22",
+    "@iconify/utils": "^2.2.1",
     "@vue-js-cron/vuetify": "^5.0.9",
-    "@vueuse/core": "^10.1.2",
+    "@vueuse/core": "^12.4.0",
-    "@vueuse/math": "^10.1.2",
+    "@vueuse/math": "^12.4.0",
-    "ace-builds": "^1.32.6",
+    "ace-builds": "^1.37.4",
     "apexcharts-clevision": "^3.28.5",
-    "axios": "1.6.8",
+    "axios": "^1.7.9",
-    "colorthief": "^2.4.0",
+    "colorthief": "^2.6.0",
     "copy-to-clipboard": "^3.3.3",
-    "dayjs": "^1.11.10",
+    "dayjs": "^1.11.13",
-    "express": "^4.18.2",
+    "express": "^4.21.2",
-    "express-http-proxy": "^2.0.0",
+    "express-http-proxy": "^2.1.1",
     "lodash": "^4.17.21",
     "mousetrap": "^1.6.5",
     "nprogress": "^0.2.0",
-    "qrcode.vue": "^3.4.1",
+    "qrcode.vue": "^3.6.0",
-    "sass": "^1.59.3",
+    "sass": "^1.83.4",
-    "tailwindcss": "^3.3.2",
+    "tailwindcss": "^ 3.4.17",
-    "unplugin-vue-define-options": "^1.3.5",
+    "unplugin-vue-define-options": "^1.5.3",
-    "vue": "^3.3.2",
+    "vue": "^3.5.13",
-    "vue-router": "^4.2.0",
+    "vue-router": "^4.5.0",
-    "vue-toast-notification": "^3",
+    "vue-toast-notification": "^3.1.3",
     "vue3-ace-editor": "^2.2.4",
-    "vue3-apexcharts": "^1.4.1",
+    "vue3-apexcharts": "^1.8.0",
     "vue3-perfect-scrollbar": "^2.0.0",
     "vuedraggable": "^4.1.0",
     "vuetify": "3.7.3",

src/views/system/LoggingView.vue

@@ -2,6 +2,9 @@
 // 日志列表
 const logs = ref<string[]>([])
 
+// 已解析的日志列表
+const parsedLogs = ref<{ level: string; time: string; program: string; content: string }[]>([])
+
 // 表头
 const headers = [
   { title: '级别', value: 'level' },
@@ -13,54 +16,60 @@ const headers = [
 // SSE消息对象
 let eventSource: EventSource | null = null
 
+// 日志颜色映射表
+const logColorMap: Record<string, string> = {
+  DEBUG: 'primary',
+  INFO: 'secondary',
+  WARNING: 'warning',
+  ERROR: 'error',
+}
+
+// 获取日志颜色
+function getLogColor(level: string): string {
+  return logColorMap[level] || 'secondary'
+}
+
 // SSE持续获取日志
 function startSSELogging() {
   eventSource = new EventSource(`${import.meta.env.VITE_API_BASE_URL}system/logging`)
+  const buffer: string[] = []
+  let timeoutId: number | null = null
+
   eventSource.addEventListener('message', event => {
     const message = event.data
-    if (message) logs.value.push(message)
+    if (message) {
+      buffer.push(message)
+      if (!timeoutId) {
+        timeoutId = window.setTimeout(() => {
+          logs.value.push(...buffer)
+          buffer.length = 0
+          timeoutId = null
+        }, 100) // 批量处理间隔，视需求调整
+      }
+    }
   })
 }
 
-// 从日志中提取日志详情
+// 解析日志
-function extractLogDetailsFromLogs(
+watch(
-  logs: string[],
+  logs,
-): { level: string; time: string; program: string; content: string }[] {
+  newLogs => {
-  const logDetails: { level: string; time: string; program: string; content: string }[] = []
+    const newParsedLogs = newLogs
-
+      .slice(parsedLogs.value.length)
-  const logPattern = /^【(.*?)】[0-9\-:]*\s(.*?)\s-\s(.*?)\s-\s(.*)$/
+      .map(log => {
-
+        const logPattern = /^【(.*?)】[0-9\-:]*\s(.*?)\s-\s(.*?)\s-\s(.*)$/
-  for (const log of logs) {
+        const matches = log.match(logPattern)
-    const matches = RegExp(logPattern).exec(log)
+        if (matches) {
-    if (matches && matches.length === 5) {
+          const [, level, time, program, content] = matches
-      const [_, level, time, program, content] = matches
+          return { level, time, program, content }
-      logDetails.unshift({ level, time, program, content })
+        }
-    }
+        return null
-  }
+      })
-
+      .filter(Boolean)
-  return logDetails
+    parsedLogs.value.push(...(newParsedLogs as any[]))
-}
+  },
-
+  { deep: true },
-// 计算日志颜色
+) // 添加 deep 监听，确保 Vue 响应式正确触发
-function getLogColor(level: string): string {
-  switch (level) {
-    case 'DEBUG':
-      return 'primary'
-    case 'INFO':
-      return 'secondary'
-    case 'WARNING':
-      return 'warning'
-    case 'ERROR':
-      return 'error'
-    default:
-      return 'secondary'
-  }
-}
-
-// 拆分日志数据计算属性
-const extractLogDetails = computed(() => {
-  return extractLogDetailsFromLogs(logs.value)
-})
 
 onMounted(() => {
   startSSELogging()
@@ -78,7 +87,7 @@ onBeforeUnmount(() => {
       <tbody>
         <VDataTableVirtual
           :headers="headers"
-          :items="extractLogDetails"
+          :items="parsedLogs"
           height="100%"
           density="compact"
           hover