style: update LoggingView table layout and styling

src/views/system/LoggingView.vue

@@ -4,6 +4,14 @@ import store from '@/store'
 // 日志列表
 const logs = ref<string[]>([])
 
+// 表头
+const headers = [
+  { title: '级别', value: 'level' },
+  { title: '时间', value: 'time' },
+  { title: '程序', value: 'program' },
+  { title: '内容', value: 'content' },
+]
+
 // SSE消息对象
 let eventSource: EventSource | null = null
 
@@ -11,20 +19,19 @@ let eventSource: EventSource | null = null
 function startSSELogging() {
   const token = store.state.auth.token
   if (token) {
-    eventSource = new EventSource(
+    eventSource = new EventSource(`${import.meta.env.VITE_API_BASE_URL}system/logging?token=${token}`)
-      `${import.meta.env.VITE_API_BASE_URL}system/logging?token=${token}`,
-    )
 
-    eventSource.addEventListener('message', (event) => {
+    eventSource.addEventListener('message', event => {
       const message = event.data
-      if (message)
+      if (message) logs.value.push(message)
-        logs.value.push(message)
     })
   }
 }
 
 // 从日志中提取日志详情
-function extractLogDetailsFromLogs(logs: string[]): { level: string; time: string; program: string; content: string }[] {
+function extractLogDetailsFromLogs(
+  logs: string[],
+): { level: string; time: string; program: string; content: string }[] {
   const logDetails: { level: string; time: string; program: string; content: string }[] = []
 
   const logPattern = /^【(.*?)】[0-9\-:]*\s(.*?)\s-\s(.*?)\s-\s(.*)$/
@@ -66,59 +73,34 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
-  if (eventSource)
+  if (eventSource) eventSource.close()
-    eventSource.close()
 })
 </script>
 
 <template>
-  <div
+  <div v-if="logs.length === 0" class="mt-5 w-full text-center flex flex-col items-center">
-    v-if="logs.length === 0"
+    <VProgressCircular size="48" indeterminate color="primary" />
-    class="mt-5 w-full text-center flex flex-col items-center"
-  >
-    <VProgressCircular
-      size="48"
-      indeterminate
-      color="primary"
-    />
     <span class="mt-3">正在刷新 ...</span>
   </div>
   <div>
-    <VTable
+    <VTable class="table-rounded" hide-default-footer disable-sort>
-      class="table-rounded"
-      hide-default-footer
-      disable-sort
-    >
       <tbody>
-        <tr v-for="(log, i) in extractLogDetails" :key="i" class="text-sm">
+        <VDataTableVirtual :headers="headers" :items="extractLogDetails" height="100%" density="compact" hover>
-          <td
+          <template #item.level="{ item }">
-            class="text-sm"
+            <VChip size="small" :color="getLogColor(item.level)" variant="elevated" v-text="item.level" />
-          >
+          </template>
-            <VChip
+          <template #item.time="{ item }">
-              size="small"
+            <span class="text-sm">{{ item.time }}</span>
-              :color="getLogColor(log.level)"
+          </template>
-              variant="elevated"
+          <template #item.program="{ item }">
-              v-text="log.level"
+            <h6 class="text-sm font-weight-medium">{{ item.program }}</h6>
-            />
+          </template>
-          </td>
+          <template #item.content="{ item }">
-          <!-- name -->
+            <span class="text-sm">
-          <td
+              {{ item.content }}
-            class="text-sm"
+            </span>
-          >
+          </template>
-            {{ log.time }}
+        </VDataTableVirtual>
-          </td>
-          <td
-            class="text-sm"
-          >
-            <h6 class="text-sm font-weight-medium">
-              {{ log.program }}
-            </h6>
-          </td>
-          <td
-            class="text-sm"
-            v-text="log.content"
-          />
-        </tr>
       </tbody>
     </VTable>
   </div>