feat: log viewer window

modstart · modstart · commit e6eb70ce2f7e · 2025-08-12T17:59:27.000+08:00
diff --git a/electron/config/window.ts b/electron/config/window.ts
@@ -6,6 +6,8 @@ export const WindowConfig = {
     initHeight: 700,
     aboutWidth: 500,
     aboutHeight: 400,
+    logWidth:800,
+    logHeight: 600,
     feedbackWidth: 700,
     feedbackHeight: 600,
     guideWidth: 800,
diff --git a/electron/mapi/log/index.ts b/electron/mapi/log/index.ts
@@ -8,6 +8,8 @@ import FileIndex from "../file";
 
 let fileName = null;
 let fileStream = null;
+let appFileNames = {};
+let appFileStreams = {};
 
 const stringDatetime = () => {
     return date.format(new Date(), "YYYYMMDD");
@@ -17,7 +19,7 @@ const logsDir = () => {
 };
 
 const appLogsDir = () => {
-    return path.join(AppEnv.userData, "data/logs");
+    return path.join(AppEnv.dataRoot, "logs");
 };
 
 const root = () => {
@@ -28,6 +30,10 @@ const file = () => {
     return path.join(logsDir(), "log_" + stringDatetime() + ".log");
 };
 
+const appFile = (name: string) => {
+    return path.join(appLogsDir(), name + "_" + stringDatetime() + ".log");
+}
+
 const cleanOldLogs = (keepDays: number) => {
     const logDirs = [
         // 系统日志
@@ -104,6 +110,46 @@ const error = (label: string, data: any = null) => {
     return log("ERROR", label, data);
 };
 
+const appLog = (name: string, level: "INFO" | "ERROR", label: string, data: any = null) => {
+    if (appFileNames[name] !== appFile(name)) {
+        appFileNames[name] = appFile(name);
+        if (appFileStreams[name]) {
+            appFileStreams[name].end();
+        }
+        const logDir = appLogsDir();
+        if (!fs.existsSync(logDir)) {
+            fs.mkdirSync(logDir);
+        }
+        appFileStreams[name] = fs.createWriteStream(appFileNames[name], {flags: "a"});
+    }
+    let line = [];
+    line.push(date.format(new Date(), "YYYY-MM-DD HH:mm:ss"));
+    line.push(level);
+    line.push(label);
+    if (data) {
+        if (!["number", "string"].includes(typeof data)) {
+            data = JSON.stringify(data);
+        }
+        line.push(data);
+    }
+    console.log(`[APP:${name}] - ` + line.join(" - "));
+    appFileStreams[name].write(line.join(" - ") + "\n");
+}
+
+const appPath = (name: string) => {
+    if (!appFileNames[name]) {
+        appFileNames[name] = appFile(name);
+    }
+    return appFileNames[name];
+}
+
+const appInfo = (name: string, label: string, data: any = null) => {
+    return appLog(name, "INFO", label, data);
+}
+const appError = (name: string, label: string, data: any = null) => {
+    return appLog(name, "ERROR", label, data);
+};
+
 const infoRenderOrMain = (label: string, data: any = null) => {
     if (electron.ipcRenderer) {
         return electron.ipcRenderer.invoke("log:info", label, data);
@@ -119,7 +165,23 @@ const errorRenderOrMain = (label: string, data: any = null) => {
     }
 };
 
-const collectRenderOrMain = async (option?: {startTime?: string; endTime?: string; limit?: number}) => {
+const appInfoRenderOrMain = (name: string, label: string, data: any = null) => {
+    if (electron.ipcRenderer) {
+        return electron.ipcRenderer.invoke("log:appInfo", name, label, data);
+    } else {
+        return appInfo(name, label, data);
+    }
+}
+
+const appErrorRenderOrMain = (name: string, label: string, data: any = null) => {
+    if (electron.ipcRenderer) {
+        return electron.ipcRenderer.invoke("log:appError", name, label, data);
+    } else {
+        return appError(name, label, data);
+    }
+};
+
+const collectRenderOrMain = async (option?: { startTime?: string; endTime?: string; limit?: number }) => {
     option = Object.assign(
         {
             startTime: dayjs().subtract(1, "day").format("YYYY-MM-DD HH:mm:ss"),
@@ -194,10 +256,18 @@ export default {
     error,
     infoRenderOrMain,
     errorRenderOrMain,
+    appPath,
+    appInfo,
+    appError,
+    appInfoRenderOrMain,
+    appErrorRenderOrMain,
     collectRenderOrMain,
 };
 
 export const Log = {
     info: infoRenderOrMain,
     error: errorRenderOrMain,
+    appPath,
+    appInfo: appInfoRenderOrMain,
+    appError: appErrorRenderOrMain,
 };
diff --git a/electron/mapi/log/main.ts b/electron/mapi/log/main.ts
@@ -7,13 +7,24 @@ ipcMain.handle("log:info", (event, label: string, data: any) => {
 ipcMain.handle("log:error", (event, label: string, data: any) => {
     logIndex.error(label, data);
 });
+ipcMain.handle("log:appInfo", (event, name: string, label: string, data: any) => {
+    logIndex.appInfo(name, label, data);
+})
+ipcMain.handle("log:appError", (event, name: string, label: string, data: any) => {
+    logIndex.appError(name, label, data);
+});
 
 export default {
     info: logIndex.info,
     error: logIndex.error,
+    appInfo: logIndex.appInfo,
+    appError: logIndex.appError,
 };
 
 export const Log = {
     info: logIndex.info,
     error: logIndex.error,
+    appPath: logIndex.appPath,
+    appInfo: logIndex.appInfo,
+    appError: logIndex.appError,
 };
diff --git a/electron/mapi/log/render.ts b/electron/mapi/log/render.ts
@@ -4,5 +4,7 @@ export default {
     root: logIndex.root,
     info: logIndex.infoRenderOrMain,
     error: logIndex.errorRenderOrMain,
+    appInfo: logIndex.appInfoRenderOrMain,
+    appError: logIndex.appErrorRenderOrMain,
     collect: logIndex.collectRenderOrMain,
 };
diff --git a/electron/page/about.ts b/electron/page/about.ts
@@ -1,6 +1,5 @@
 import {BrowserWindow} from "electron";
 import {preloadDefault} from "../lib/env-main";
-import {AppRuntime} from "../mapi/env";
 import {t} from "../config/lang";
 import {Page} from "./index";
 import {WindowConfig} from "../config/window";
diff --git a/electron/page/index.ts b/electron/page/index.ts
@@ -9,6 +9,7 @@ import {DevToolsManager} from "../lib/devtools";
 import {PageFeedback} from "./feedback";
 import {PagePayment} from "./payment";
 import {PageMonitor} from "./monitor";
+import {PageLog} from "./log";
 
 const Pages = {
     user: PageUser,
@@ -17,6 +18,7 @@ const Pages = {
     payment: PagePayment,
     feedback: PageFeedback,
     monitor: PageMonitor,
+    log: PageLog,
 };
 
 export const Page = {
diff --git a/electron/page/log.ts b/electron/page/log.ts
@@ -0,0 +1,51 @@
+import {BrowserWindow} from "electron";
+import {preloadDefault} from "../lib/env-main";
+import {t} from "../config/lang";
+import {Page} from "./index";
+import {WindowConfig} from "../config/window";
+import {AppRuntime} from "../mapi/env";
+
+export const PageLog = {
+    NAME: "log",
+    open: async (option: {
+        log: string,
+    }) => {
+        if (AppRuntime.windows[PageLog.NAME]) {
+            AppRuntime.windows[PageLog.NAME].close();
+        }
+        const win = new BrowserWindow({
+            title: t("日志"),
+            parent: null,
+            minWidth: WindowConfig.logWidth,
+            minHeight: WindowConfig.logHeight,
+            width: WindowConfig.logWidth,
+            height: WindowConfig.logHeight,
+            webPreferences: {
+                preload: preloadDefault,
+                // Warning: Enable nodeIntegration and disable contextIsolation is not secure in production
+                nodeIntegration: true,
+                webSecurity: false,
+                webviewTag: true,
+                // Consider using contextBridge.exposeInMainWorld
+                // Read more on https://www.electronjs.org/docs/latest/tutorial/context-isolation
+                contextIsolation: false,
+            },
+            show: true,
+            frame: false,
+            transparent: false,
+        });
+        await Page.openWindow(PageLog.NAME, win, "page/log.html");
+        const logInit = {
+            log: option.log,
+        }
+        win.webContents.executeJavaScript(`
+        const logInit = ()=>{
+            if(!window.__logInit){
+                setTimeout(logInit, 100);
+                return;
+            }
+            window.__logInit(${JSON.stringify(logInit)});
+        };logInit();
+        `);
+    },
+};
diff --git a/page/log.html b/page/log.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <link rel="icon" type="image/svg+xml" href="/logo.svg"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>%name%</title>
+    <link rel="stylesheet" href="./../iconfont/iconfont.css"/>
+</head>
+<body>
+<div id="app"></div>
+<script type="module" src="/src/entry/log.ts"></script>
+</body>
+</html>
diff --git a/src/components/common/FileLogViewer.vue b/src/components/common/FileLogViewer.vue
@@ -8,12 +8,14 @@ const props = withDefaults(
         maxLines?: number;
         height?: string;
         autoScroll?: boolean;
+        isFullPath?: boolean;
     }>(),
     {
         file: "",
         maxLines: 1000,
         height: "100%",
         autoScroll: true,
+        isFullPath: false,
     }
 );
 
@@ -34,6 +36,7 @@ onMounted(async () => {
             }
         },
         {
+            isFullPath: props.isFullPath,
             limit: props.maxLines,
         }
     );
@@ -46,8 +49,8 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-    <div>
-        <LogViewer :height="props.height" :logs="logs" :auto-scroll="autoScroll" />
+    <div :style="{height:props.height}">
+        <LogViewer :height="props.height" :logs="logs" :auto-scroll="autoScroll"/>
     </div>
 </template>
 
diff --git a/src/components/common/LogViewer.vue b/src/components/common/LogViewer.vue
@@ -58,7 +58,7 @@ watch(
 </script>
 
 <template>
-    <div :style="{height: props.height}" ref="logContainer" class="bg-black rounded p-3 overflow-auto">
+    <div :style="{height: props.height}" ref="logContainer" class="bg-black p-3 overflow-auto">
         <div v-if="!logs.length" class="text-center text-white py-10">
             <div>
                 <i class="iconfont icon-empty-box text-4xl"></i>
diff --git a/src/entry/log.ts b/src/entry/log.ts
@@ -0,0 +1,33 @@
+import {createApp} from "vue";
+import store from "../store";
+
+import ArcoVue, {Message} from "@arco-design/web-vue";
+import ArcoVueIcon from "@arco-design/web-vue/es/icon";
+import "@arco-design/web-vue/dist/arco.css";
+
+import {i18n, t} from "../lang";
+
+import "../style.less";
+import {Dialog} from "../lib/dialog";
+
+import {CommonComponents} from "../components/common";
+import Page from "./Page.vue";
+import PageLog from "../pages/PageLog.vue";
+
+const app = createApp(Page, {
+    name: "log",
+    title: t("日志"),
+    page: PageLog,
+});
+app.use(ArcoVue);
+app.use(ArcoVueIcon);
+app.use(CommonComponents);
+app.use(i18n);
+app.use(store);
+Message._context = app._context;
+app.config.globalProperties.$mapi = window.$mapi;
+app.config.globalProperties.$dialog = Dialog;
+app.config.globalProperties.$t = t as any;
+app.mount("#app").$nextTick(() => {
+    postMessage({payload: "removeLoading"}, "*");
+});
diff --git a/src/pages/PageLog.vue b/src/pages/PageLog.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import FileLogViewer from "../components/common/FileLogViewer.vue";
+import {ref} from "vue";
+
+const file = ref('')
+const autoScroll = ref(true);
+const doOpen = async () => {
+    window.$mapi.app.showItemInFolder(file.value);
+};
+window['__logInit'] = (option: { log: string }) => {
+    file.value = option.log;
+};
+</script>
+
+<template>
+    <div style="height:calc(100vh - 2.5rem);" class="flex flex-col">
+        <div class="flex p-2 items-center">
+            <div class="mr-2">
+                <a-checkbox v-model="autoScroll"/>
+                {{ $t('自动滚动') }}
+            </div>
+            <div class="mr-1">
+                <a-button @click="doOpen" size="mini">
+                    <template #icon>
+                        <icon-file/>
+                    </template>
+                    {{ $t('打开文件') }}
+                </a-button>
+            </div>
+            <div class="text-gray-400 text-xs">
+                {{ file }}
+            </div>
+        </div>
+        <div class="flex-grow overflow-hidden relative bg-black">
+            <FileLogViewer v-if="!!file" :file="file" is-full-path :auto-scroll="autoScroll"/>
+            <div v-else>
+                <div class="text-center py-20 text-gray-300">
+                    <div>
+                        <icon-info-circle class="text-5xl"/>
+                    </div>
+                    <div>
+                        {{ $t('暂无日志文件') }}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped></style>
diff --git a/vite.config.ts b/vite.config.ts
@@ -67,6 +67,7 @@ export default defineConfig(({command}) => {
                         "page/payment.html",
                         "page/setup.html",
                         "page/user.html",
+                        "page/log.html",
                     ];
                     files.forEach(f => {
                         const p = path.resolve(__dirname, "dist", f);

Original file line number	Diff line number	Diff line change
`@@ -8,12 +8,14 @@ const props = withDefaults(`
`8`	`8`	`maxLines?: number;`
`9`	`9`	`height?: string;`
`10`	`10`	`autoScroll?: boolean;`
	`11`	`+ isFullPath?: boolean;`
`11`	`12`	`}>(),`
`12`	`13`	`{`
`13`	`14`	`file: "",`
`14`	`15`	`maxLines: 1000,`
`15`	`16`	`height: "100%",`
`16`	`17`	`autoScroll: true,`
	`18`	`+ isFullPath: false,`
`17`	`19`	`}`
`18`	`20`	`);`
`19`	`21`
`@@ -34,6 +36,7 @@ onMounted(async () => {`
`34`	`36`	`}`
`35`	`37`	`},`
`36`	`38`	`{`
	`39`	`+ isFullPath: props.isFullPath,`
`37`	`40`	`limit: props.maxLines,`
`38`	`41`	`}`
`39`	`42`	`);`
`@@ -46,8 +49,8 @@ onBeforeUnmount(() => {`
`46`	`49`	`</script>`
`47`	`50`
`48`	`51`	`<template>`
`49`		`- <div>`
`50`		`- <LogViewer :height="props.height" :logs="logs" :auto-scroll="autoScroll" />`
	`52`	`+ <div :style="{height:props.height}">`
	`53`	`+ <LogViewer :height="props.height" :logs="logs" :auto-scroll="autoScroll"/>`
`51`	`54`	`</div>`
`52`	`55`	`</template>`
`53`	`56`