pref: 提高LogEvent的效率(移除发送前的反序列化步骤)

src/bindings.ts

@@ -331,8 +331,10 @@ export type JsonTask = { selected: boolean; completed: boolean }
 export type JsonValue = null | boolean | number | string | JsonValue[] | { [key in string]: JsonValue }
 export type LabelInUserInfo = { path: string; text: string; label_theme: string; text_color: string; bg_style: number; bg_color: string; border_color: string; use_img_label: boolean; img_label_uri_hans: string; img_label_uri_hant: string; img_label_uri_hans_static: string; img_label_uri_hant_static: string }
 export type LevelInfoInUserInfo = { current_level: number; current_min: number; current_exp: number }
-export type LogEvent = { timestamp: string; level: LogLevel; fields: { [key in string]: JsonValue }; target: string; filename: string; line_number: number }
+export type LogEvent = { jsonRaw: string }
 export type LogLevel = "TRACE" | "DEBUG" | "INFO" | "WARN" | "ERROR"
+export type LogMetadata = { timestamp: string; level: LogLevel; fields: { [key in string]: JsonValue }; target: string; filename: string; line_number: number; span?: JsonValue; spans?: LogSpan[] }
+export type LogSpan = ({ [key in string]: null | boolean | number | string | JsonValue[] | { [key in string]: JsonValue } }) & { name: string }
 export type MediaChunk = { start: number; end: number; completed: boolean }
 export type MediaInFav = { id: number; type: number; title: string; cover: string; intro: string; page: number; duration: number; upper: UpperInMedia; attr: number; cnt_info: CntInfoInMedia; link: string; ctime: number; pubtime: number; fav_time: number; bv_id: string; bvid: string; ugc: Ugc | null; media_list_link: string }
 export type MediaInWatchLater = { aid: number; videos: number; tid: number; tname: string; copyright: number; pic: string; title: string; pubdate: number; ctime: number; desc: string; state: number; duration: number; redirect_url: string | null; mission_id: number | null; rights: RightsInWatchLater; owner: OwnerInWatchLater; stat: StatInWatchLater; dynamic: string; dimension: DimensionInWatchLater; short_link_v2: string; up_from_v2: number | null; first_frame: string | null; pub_location: string | null; cover43: string; tidv2: number; tnamev2: string; pid_v2: number; pid_name_v2: string; page: PageInWatchLater; count: number; cid: number; progress: number; add_at: number; bvid: string; uri: string; enable_vt: number; view_text_1: string; card_type: number; left_icon_type: number; left_text: string; right_icon_type: number; right_text: string; arc_state: number; pgc_label: string; show_up: boolean; forbid_fav: boolean; forbid_sort: boolean; season_title: string; long_title: string; index_title: string; c_source: string; season_id: number | null }

src/dialogs/LogDialog.vue

@@ -1,5 +1,5 @@
 <script setup lang="tsx">
-import { LogEvent, LogLevel, events, commands } from '../bindings.ts'
+import { LogLevel, events, commands, LogMetadata } from '../bindings.ts'
 import {
   NButton,
   NCheckbox,
@@ -12,13 +12,13 @@ import {
   NVirtualList,
   useNotification,
 } from 'naive-ui'
-import { onMounted, ref, watch, computed } from 'vue'
+import { onMounted, ref, watch, computed, shallowRef, triggerRef } from 'vue'
 import { appDataDir } from '@tauri-apps/api/path'
 import { path } from '@tauri-apps/api'
 import { useStore } from '../store.ts'
 import { darkTheme } from 'naive-ui'
 
-type LogRecord = LogEvent & { id: number; formatedLog: string }
+type LogRecord = LogMetadata & { id: number; formatedLog: string }
 
 const store = useStore()
 
@@ -28,7 +28,7 @@ const showing = defineModel<boolean>('showing', { required: true })
 
 let nextLogRecordId = 1
 
-const logRecords = ref<LogRecord[]>([])
+const logRecords = shallowRef<LogRecord[]>([])
 const searchText = ref<string>('')
 const selectedLevel = ref<LogLevel>('INFO')
 const logsDirSize = ref<number>(0)
@@ -110,14 +110,18 @@ watch(showing, async () => {
 
 onMounted(async () => {
   await events.logEvent.listen(async ({ payload: logEvent }) => {
-    const logRecord: LogRecord = {
-      ...logEvent,
-      id: nextLogRecordId++,
-      formatedLog: formatLogEvent(logEvent),
-    }
-    logRecords.value.push(logRecord)
+    const logMetadata: LogMetadata = JSON.parse(logEvent.jsonRaw)
 
-    const { level, fields } = logEvent
+    const logRecord: LogRecord = {
+      ...logMetadata,
+      id: nextLogRecordId++,
+      formatedLog: formatLogMetadata(logMetadata),
+    }
+
+    logRecords.value.push(logRecord)
+    triggerRef(logRecords)
+
+    const { level, fields } = logMetadata
     if (level === 'ERROR') {
       notification.error({
         title: fields['err_title'] as string,
@@ -128,8 +132,8 @@ onMounted(async () => {
   })
 })
 
-function formatLogEvent(logEvent: LogEvent): string {
-  const { timestamp, level, fields, target, filename, line_number } = logEvent
+function formatLogMetadata(logMetadata: LogMetadata): string {
+  const { timestamp, level, fields, target, filename, line_number } = logMetadata
   const fields_str = Object.entries(fields)
     .sort(([key1], [key2]) => key1.localeCompare(key2))
     .map(([key, value]) => `${key}=${value}`)