perf: 优化深色主题

electron/electron.js

@@ -17,6 +17,7 @@ const {
     BrowserWindow
 } = require('electron')
 const {autoUpdater} = require("electron-updater")
+const Store = require("electron-store");
 const loger = require("electron-log");
 const electronConf = require('electron-config')
 const userConf = new electronConf()
@@ -29,6 +30,7 @@ const utils = require('./utils');
 const config = require('./package.json');
 const electronMenu = require("./electron-menu");
 const spawn = require("child_process").spawn;
+const store = new Store();
 
 const isMac = process.platform === 'darwin'
 const isWin = process.platform === 'win32'
@@ -133,6 +135,7 @@ function createMainWindow() {
         minHeight: 360,
         center: true,
         autoHideMenuBar: true,
+        backgroundColor: utils.getDefaultBackgroundColor(),
         webPreferences: {
             preload: path.join(__dirname, 'electron-preload.js'),
             webSecurity: true,
@@ -276,6 +279,7 @@ function preCreateChildWindow() {
         show: false,
         parent: mainWindow,
         autoHideMenuBar: true,
+        backgroundColor: utils.getDefaultBackgroundColor(),
         webPreferences: {
             preload: path.join(__dirname, 'electron-preload.js'),
             webSecurity: true,
@@ -328,6 +332,7 @@ function createChildWindow(args) {
             show: false,
             parent: mainWindow,
             autoHideMenuBar: true,
+            backgroundColor: utils.getDefaultBackgroundColor(),
             webPreferences: Object.assign({
                 preload: path.join(__dirname, 'electron-preload.js'),
                 webSecurity: true,
@@ -499,6 +504,7 @@ function createWebTabWindow(args) {
             autoHideMenuBar: true,
             titleBarStyle: 'hidden',
             titleBarOverlay,
+            backgroundColor: utils.getDefaultBackgroundColor(),
             webPreferences: Object.assign({
                 preload: path.join(__dirname, 'electron-preload.js'),
                 webSecurity: true,
@@ -1264,6 +1270,23 @@ ipcMain.on('openNotification', (event, args) => {
     event.returnValue = "ok"
 })
 
+/**
+ * 保存缓存
+ */
+ipcMain.on('setStore', (event, args) => {
+    if (utils.isJson(args)) {
+        store.set(args.key, args.value)
+    }
+    event.returnValue = "ok"
+})
+
+/**
+ * 获取缓存
+ */
+ipcMain.handle('getStore', (event, args) => {
+    return store.get(args)
+});
+
 //================================================================
 // Update
 //================================================================

electron/utils.js

@@ -5,8 +5,10 @@ const dayjs = require("dayjs");
 const http = require('http')
 const https = require('https')
 const crypto = require('crypto')
-const {shell, dialog, session, Notification} = require("electron");
+const {shell, dialog, session, Notification, nativeTheme} = require("electron");
 const loger = require("electron-log");
+const Store = require("electron-store");
+const store = new Store();
 
 const utils = {
     /**
@@ -659,6 +661,30 @@ const utils = {
             }
             browser.loadFile('./public/index.html', options).then(_ => { }).catch(_ => { })
         }
+    },
+
+    /**
+     * 获取主题名称
+     * @returns {string|*}
+     */
+    getThemName() {
+        const themeConf = store.get("themeConf");
+        if (["dark", "light"].includes(themeConf)) {
+            return themeConf;
+        }
+        return nativeTheme.shouldUseDarkColors ? "dark" : "light";
+    },
+
+    /**
+     * 获取默认背景颜色
+     * @returns {string}
+     */
+    getDefaultBackgroundColor() {
+        if (utils.getThemName() === "dark") {
+            return "#0D0D0D";
+        } else {
+            return "#FFFFFF";
+        }
     }
 }
 

resources/assets/js/App.vue

@@ -1,7 +1,7 @@
 <template>
     <div id="app">
         <keep-alive>
-            <router-view class="child-view"></router-view>
+            <router-view class="child-view" @hook:mounted.once="onRouterViewMounted"></router-view>
         </keep-alive>
 
         <!--任务操作-->
@@ -270,6 +270,10 @@ export default {
             }
         },
 
+        onRouterViewMounted() {
+            document.documentElement.setAttribute("data-platform", $A.isElectron ? "desktop" : $A.isEEUiApp ? "app" : "web")
+        },
+
         /**
          * 获取链接打开方式
          * @param url

resources/assets/js/functions/web.js

@@ -1056,6 +1056,9 @@ import {convertLocalResourcePath} from "../components/Replace/utils";
                         min-width: 100%;
                         min-height: 100%;
                     }
+                    html[data-platform="desktop"] {
+                        background-color: #0D0D0D;
+                    }
                     .child-view {
                         background-color: #fff;
                     }

resources/assets/js/store/actions.js

@@ -472,6 +472,11 @@ export default {
                 action: 'updateTheme',
                 themeName: state.themeName,
             });
+        } else if ($A.isElectron) {
+            $A.Electron.sendMessage('setStore', {
+                key: 'themeConf',
+                value: state.themeConf
+            });
         }
     },