pref: 优化日志显示

web/src/pages/Logs.vue

@@ -1,14 +1,18 @@
 <template>
     <PageTitle title="日志" @refresh="refresh" />
     <v-card id="toolbar">
-        <v-card-text>
+        <div class="view-operation-components">
             <v-switch class="toolbar-component" color="primary" :model-value="proxy.$store.state.autoRefreshLog"
                 @update:model-value="proxy.$store.state.autoRefreshLog = $event" label="自动刷新"></v-switch>
-        </v-card-text>
+
+            <v-switch class="toolbar-component" color="primary" :model-value="proxy.$store.state.autoScrollLog"
+                @update:model-value="proxy.$store.state.autoScrollLog = $event" label="自动滚动"></v-switch>
+        </div>
     </v-card>
     <v-card id="log-card">
         <v-card-text id="log-card-text">
-            <textarea id="log-textarea" placeholder="点击标题旁的按钮以刷新日志" v-model="logContent" readonly></textarea>
+            <!-- <textarea id="log-textarea" placeholder="点击标题旁的按钮以刷新日志" v-model="logContentHTML" readonly></textarea> -->
+            <div id="log-content-html" v-html="logContentHTML"></div>
         </v-card-text>
     </v-card>
 </template>
@@ -25,6 +29,7 @@ const snackbar = inject('snackbar');
 const { proxy } = getCurrentInstance()
 
 const logContent = ref('')
+const logContentHTML = ref('')
 
 const refresh = () => {
     refreshLog()
@@ -35,6 +40,10 @@ let logPointer = {
     "start_offset": 0
 }
 
+import { AnsiUp } from 'ansi_up';
+
+const ansiUp = new AnsiUp()
+
 const refreshLog = () => {
     proxy.$axios.get(`/logs`, {
         params: {
@@ -47,8 +56,14 @@ const refreshLog = () => {
             return
         }
         logContent.value += response.data.data.logs
+        logContentHTML.value += ansiUp.ansi_to_html(response.data.data.logs)
         logPointer.start_page_number = response.data.data.end_page_number
         logPointer.start_offset = response.data.data.end_offset
+
+        if (proxy.$store.state.autoScrollLog) {
+            // 滚动到最底部
+            document.getElementById('log-content-html').scrollTop = document.getElementById('log-content-html').scrollHeight
+        }
     }).catch(error => {
         snackbar.error(error.message)
     })
@@ -73,7 +88,7 @@ onUnmounted(() => {
 <style scoped>
 #toolbar {
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
     margin: 1rem;
     margin-top: 1rem;
@@ -85,6 +100,13 @@ onUnmounted(() => {
     margin-top: 1.4rem;
 }
 
+.view-operation-components {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 1rem;
+    gap: 1rem;
+}
 
 #log-card {
     margin: 1rem;
@@ -108,5 +130,11 @@ onUnmounted(() => {
 #log-card-text {
     display: flex;
     height: 100%;
+    background-color: #343434;
 }
-</style>
+
+#log-content-html {
+    white-space: pre-wrap;
+    overflow-y: auto;
+}
+</style>

web/src/store/index.js

@@ -6,6 +6,7 @@ export default createStore({
   state: {
     apiBaseUrl: 'http://localhost:5300/api/v1',
     autoRefreshLog: false,
+    autoScrollLog: true,
     settingsPageTab: '',
     version: 'v0.0.0',
     debug: false,