From 50a233b7340c75bd4c60b6900e4a8bcbabd0db9b Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Fri, 4 Aug 2023 12:43:52 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=E5=AE=9E=E6=97=B6=E6=97=A5=E5=BF=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/setting.vue                       | 12 ++++++
 src/views/setting/AccountSettingLogging.vue | 44 +++++++++++++++++++++
 2 files changed, 56 insertions(+)
 create mode 100644 src/views/setting/AccountSettingLogging.vue

diff --git a/src/pages/setting.vue b/src/pages/setting.vue
index e3185e7a..1fbbe991 100644
--- a/src/pages/setting.vue
+++ b/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>
diff --git a/src/views/setting/AccountSettingLogging.vue b/src/views/setting/AccountSettingLogging.vue
new file mode 100644
index 00000000..0d63cd5a
--- /dev/null
+++ b/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>