pref: 优化日志显示

pkg/core/bootutils/log.py

@@ -36,8 +36,8 @@ async def init_logging(extra_handlers: list[logging.Handler] = None) -> logging.
     qcg_logger.setLevel(level)
 
     color_formatter = colorlog.ColoredFormatter(
-        fmt="%(log_color)s[%(asctime)s.%(msecs)03d] %(pathname)s (%(lineno)d) - [%(levelname)s] :\n    %(message)s",
-        datefmt="%Y-%m-%d %H:%M:%S",
+        fmt="%(log_color)s[%(asctime)s.%(msecs)03d] %(filename)s (%(lineno)d) - [%(levelname)s] : %(message)s",
+        datefmt="%m-%d %H:%M:%S",
         log_colors=log_colors_config,
     )
 

web/package-lock.json

@@ -15,6 +15,7 @@
         "ajv-errors": "^3.0.0",
         "ajv-formats": "^3.0.1",
         "ajv-i18n": "^4.2.0",
+        "ansi_up": "^6.0.2",
         "axios": "^1.7.7",
         "codemirror": "^5.65.18",
         "core-js": "^3.37.1",
@@ -1334,6 +1335,15 @@
         "ajv": "^8.0.0-beta.0"
       }
     },
+    "node_modules/ansi_up": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/ansi_up/-/ansi_up-6.0.2.tgz",
+      "integrity": "sha512-3G3vKvl1ilEp7J1u6BmULpMA0xVoW/f4Ekqhl8RTrJrhEBkonKn5k3bUc5Xt+qDayA6iDX0jyUh3AbZjB/l0tw==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",

web/package.json

@@ -15,6 +15,7 @@
     "ajv-errors": "^3.0.0",
     "ajv-formats": "^3.0.1",
     "ajv-i18n": "^4.2.0",
+    "ansi_up": "^6.0.2",
     "axios": "^1.7.7",
     "codemirror": "^5.65.18",
     "core-js": "^3.37.1",

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,