feat 实时日志

src/pages/setting.vue

@@ -5,6 +5,7 @@ import AccountSettingNotification from '@/views/setting/AccountSettingNotificati
 import AccountSettingRule from '@/views/setting/AccountSettingRule.vue'
 import AccountSettingSite from '@/views/setting/AccountSettingSite.vue'
 import AccountSettingWords from '@/views/setting/AccountSettingWords.vue'
+import AccountSettingLogging from '@/views/setting/AccountSettingLogging.vue'
 
 const route = useRoute()
 
@@ -37,6 +38,11 @@ const tabs = [
     icon: 'mdi-file-word-box',
     tab: 'words',
   },
+  {
+    title: '日志',
+    icon: 'mdi-text-box',
+    tab: 'logging',
+  },
 ]
 </script>
 
@@ -84,6 +90,12 @@ const tabs = [
           <AccountSettingWords />
         </transition>
       </VWindowItem>
+      <!-- Logging -->
+      <VWindowItem value="logging">
+        <transition name="fade-slide" appear>
+          <AccountSettingLogging />
+        </transition>
+      </VWindowItem>
     </VWindow>
   </div>
 </template>

src/views/setting/AccountSettingLogging.vue

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import store from '@/store'
+
+// 日志列表
+const logs = ref<string[]>([])
+
+// SSE持续获取日志
+function startSSELogging() {
+  const token = store.state.auth.token
+  if (token) {
+    const eventSource = new EventSource(
+      `${import.meta.env.VITE_API_BASE_URL}system/logging?token=${token}`,
+    )
+
+    eventSource.addEventListener('message', (event) => {
+      const message = event.data
+      if (message)
+        logs.value.push(message)
+    })
+
+    onBeforeUnmount(() => {
+      eventSource.close()
+    })
+  }
+}
+
+onMounted(() => {
+  startSSELogging()
+})
+</script>
+
+<template>
+  <VRow>
+    <VCol cols="12">
+      <VCard title="实时日志">
+        <VCardText>
+          <div v-for="(log, i) in logs.reverse()" :key="i">
+            {{ log }}
+          </div>
+        </VCardText>
+      </VCard>
+    </VCol>
+  </VRow>
+</template>