托盘和窗口优化

src/main/MainWindow.js

@@ -1,13 +1,15 @@
 export default class MainWindow {
 
-    static #instance;
+    static _instance;
     static forceQuit = false;
 
     /**
      *
      * @param mainWindow {BrowserWindow}
      */
     static init(mainWindow) {
+        if (this._instance) return
+        this._instance = mainWindow
         mainWindow.on('close', (event) => {
             if (!this.forceQuit) {
                 event.preventDefault();
@@ -23,7 +25,7 @@ export default class MainWindow {
     }
 
     static show() {
-        this.#instance.isMinimized() ? this.#instance.restore() : this.#instance.show()
+        this._instance.isMinimized() ? this._instance.restore() : this._instance.show()
     }
 
 }

src/main/TrayManage.js

@@ -1,25 +1,27 @@
-import { electronRequireMulti } from '@/main/utils/electron'
+import { app, Tray, Menu, nativeImage } from 'electron'
 import { APP_NAME } from '@/shared/utils/constant'
-const { app, Tray, Menu, nativeImage, getGlobal } = electronRequireMulti()
 import { isMacOS, isWindows } from '@/main/utils/utils'
-import {t}  from '@/shared/utils/i18n'
+import { t } from '@/shared/utils/i18n'
 import Path from '@/main/utils/Path'
 import GetAppPath from '@/main/utils/GetAppPath'
+import MainWindow from '@/main/MainWindow'
 
 export default class TrayManage {
-    static #_instance;
+    static _instance
+
     static init() {
-        let iconPath = this.getIconPath();
+        if (this._instance) return
+        let iconPath = this.getIconPath()
         let icon = nativeImage.createFromPath(iconPath).resize({ width: 18, height: 18 })
         icon.setTemplateImage(true)
         let tray = new Tray(icon)
-        const contextMenu = this.getContextMenu();
+        const contextMenu = this.getContextMenu()
         tray.setToolTip(APP_NAME)
         tray.setContextMenu(contextMenu)
         if (isWindows) {
             tray.on('click', () => this.showMainWindow())
         }
-        this.#_instance = tray;
+        this._instance = tray
     }
 
     static getContextMenu() {
@@ -36,12 +38,11 @@ export default class TrayManage {
     }
 
     static showMainWindow() {
-        const electron = getGlobal('electron')
-        electron.mainWindow.show()
+        MainWindow.show()
     }
 
-    static refresh() {
-        this.#_instance.setContextMenu(this.getContextMenu())
+    static updateContextMenu() {
+        this._instance.setContextMenu(this.getContextMenu())
     }
 
     static getIconPath() {

src/main/common/call.js

@@ -1,18 +1,25 @@
 export async function callStatic(className, methodName, ...args) {
     let result, importReturn
-    if (['ProcessLibrary'].includes(className)) {
+
+    const utilsClassArr = ['ProcessLibrary']
+    if (utilsClassArr.includes(className)) {
         importReturn = await import(`@/main/utils/${className}.js`)
+    } else if (className === 'I18n') {
+        importReturn = await import(`@/shared/i18n/I18n.js`)
+    } else {
+        importReturn = await import(`@/main/${className}.js`)
     }
+
     const moduleClass = importReturn.default
     result = args ? await moduleClass[methodName](...args) : await moduleClass[methodName]()
     return result
 }
 
 export async function callWorker(workName, ...args) {
-    let createWorker;
+    let createWorker
     if (workName === 'processList') {
         createWorker = await import(`@/main/worker/processList.js?nodeWorker`)
-       //?nodeWorker 不支持变量
+        //?nodeWorker 不支持变量
     }
     return new Promise((resolve, reject) => {
         const worker = createWorker.default({ workerData: { args } })

src/main/index.js

@@ -6,6 +6,7 @@ import Store from 'electron-store'
 import MainWindow from '@/main/MainWindow'
 import { ipcListen } from '@/main/ipc'
 import { extendPrototype } from '@/shared/utils/utils'
+import I18n from '@/shared/i18n/I18n'
 
 let mainWindow
 const gotTheLock = app.isPackaged ? app.requestSingleInstanceLock() : true //仅生产环境生效
@@ -16,11 +17,9 @@ if (!gotTheLock) {
     onReady()
     onRunning()
     onBeforeQuit()
-    remoteMain.initialize()
-    Store.initRenderer()
 }
 
-function createMainWindow() {
+async function createMainWindow() {
     // Create the browser window.
     mainWindow = new BrowserWindow({
         width: is.dev ? 1280 : 900,
@@ -64,13 +63,15 @@ function createMainWindow() {
     }
     remoteMain.enable(mainWindow.webContents)
     MainWindow.init(mainWindow)
-    global.electron = { mainWindow }
-    Store.initRenderer()
 }
 
 function onReady() {
     app.on('ready', async () => {
         createMainWindow()
+        Store.initRenderer()
+        remoteMain.initialize()
+        Store.initRenderer()
+        I18n.init()
     })
 }
 

src/renderer/App.vue

@@ -34,15 +34,13 @@ import {message} from "ant-design-vue";
 import DirUtil from "@/main/utils/DirUtil";
 import {MAC_USER_CORE_DIR} from "@/main/utils/constant";
 import ConfigProvider from "@/renderer/components/Theme/ConfigProvider.vue";
-import TrayManage from '@/main/TrayManage'
-import { useI18n } from 'vue-i18n'
 import SetLanguage from "@/renderer/components/SetLanguage.vue";
 import { useMainStore } from '@/renderer/store'
 import Settings from '@/main/Settings'
 import { t } from '@/shared/utils/i18n'
+import { changeLanguageWrapper } from '@/renderer/utils/language'
 
 const store = useMainStore();
-const { locale } = useI18n()
 const userPwdModalShow = ref(false);
 const setLanguageShow = ref(false);
 
@@ -63,8 +61,8 @@ store.settings = settings
     await store.init()
 
     store.loadingTip = t('Initializing')
-    locale.value = store.settings.Language
-    TrayManage.init()
+    await window.api.callStatic('TrayManage', 'init')
+    await changeLanguageWrapper(store.settings.Language)
   } catch (error) {
     await MessageBox.error(error.message ?? error, t('errorOccurredDuring', [t('initializing')]))
     App.exit()

src/renderer/components/SetLanguage.vue

@@ -20,11 +20,11 @@
 <script setup>
 import {t} from "@/shared/utils/i18n";
 import {computed} from "vue";
-import TrayManage from "@/main/TrayManage";
 import Settings from "@/main/Settings";
 import MessageBox from "@/renderer/utils/MessageBox";
 import { useI18n } from 'vue-i18n'
 import { useMainStore } from '@/renderer/store'
+import { changeLanguageWrapper } from '@/renderer/utils/language'
 
 const { locale } = useI18n()
 const props =  defineProps({
@@ -49,12 +49,11 @@ const handleOk = () => {
   visible.value = false
 }
 
-const languageChange = () => {
+const languageChange = async () => {
   //todo改调用 store.setSettings ，并测试init调用此
   try {
     Settings.set('Language', store.settings.Language)
-    locale.value = store.settings.Language
-    TrayManage.refresh()
+    await changeLanguageWrapper(store.settings.Language)
     store.loadingTip = t('Initializing')
   } catch (error) {
     MessageBox.error(error.message ?? error, t('errorOccurredDuring', [t('set')]))

src/renderer/components/Settings/App.vue

@@ -35,9 +35,9 @@
 import {computed} from 'vue'
 import { useI18n } from 'vue-i18n'
 import {mt,t}  from '@/shared/utils/i18n'
-import TrayManage from '@/main/TrayManage'
 import { createAsyncComponent } from '@/renderer/utils/utils'
 import { useMainStore } from '@/renderer/store'
+import { changeLanguageWrapper } from '@/renderer/utils/language'
 
 const ACard = createAsyncComponent(import('ant-design-vue'), 'Card')
 const { locale } = useI18n()
@@ -69,8 +69,7 @@ const colorOptions = computed(() => {
 
 const languageChange = () => {
   store.setSettings('Language', async originVal => {
-    locale.value = store.settings.Language
-    TrayManage.refresh()
+    await changeLanguageWrapper(store.settings.Language)
   })
 }
 

src/renderer/components/TitleBar.vue

@@ -1,7 +1,7 @@
 <template>
   <div class='title-bar draggable'>
     <div class='notify color-text'>
-      {{APP_NAME}} {{ t('notice') }}：<a class='non-draggable color-text' @click='clickUrl'>🎉{{ t('none') }}</a>
+      {{ APP_NAME }} {{ t('notice') }}：<a class='non-draggable color-text' @click='clickUrl'>🎉{{ t('none') }}</a>
     </div>
     <div class='window-controls-container non-draggable color-text' v-if='isWindows'>
       <div class='window-icon codicon codicon-chrome-minimize '
@@ -23,27 +23,24 @@
       </div>
     </div>
   </div>
-
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import Native from '@/main/utils/Native'
 import { t } from '@/shared/utils/i18n'
-import { electronRequire } from '@/main/utils/electron'
-import {isWindows} from "@/main/utils/utils";
-import { APP_NAME } from '../../shared/utils/constant'
+import { isWindows } from '@/main/utils/utils'
+import { APP_NAME } from '@/shared/utils/constant'
+import { getCurrentWindow } from '@electron/remote'
 
-const BrowserWindow = electronRequire('BrowserWindow')
+const mainWindow = getCurrentWindow()
+const isWindowMax = ref(false)
+const minimizeIsHover = ref(false)
 
-let clickUrl = () => {
+const clickUrl = () => {
   Native.openUrl('http://www.eserver.app')
 }
 
-const isWindowMax = ref(false)
-const mainWindow = BrowserWindow.getAllWindows()[0]
-const minimizeIsHover = ref(false)
-
 const minimizeClick = () => {
   mainWindow.minimize()
   minimizeIsHover.value = false
@@ -70,14 +67,15 @@ mainWindow.on('unmaximize', () => {
 })
 </script>
 
-<style scoped lang='less'>
+<style scoped lang="less">
 .notify {
   margin-left: 10px;
   font-size: 14px;
   flex: 1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+
   a {
     &:hover {
       color: #1890ff;
@@ -98,7 +96,7 @@ mainWindow.on('unmaximize', () => {
 
 .window-icon-close {
   &:hover {
-    background-color: rgba(232, 17, 35, .9);
+    background-color: rgba(232, 17, 35, 0.9);
   }
 }
 
@@ -118,6 +116,4 @@ mainWindow.on('unmaximize', () => {
     align-items: center;
   }
 }
-
-
 </style>

src/renderer/main.js

@@ -5,13 +5,12 @@ import './assets/css/index.less'
 import '@vscode/codicons/dist/codicon.css'
 import router from './router'
 import { createPinia } from 'pinia'
-import I18n from '@/renderer/i18n/I18n'
+import I18n from '@/shared/i18n/I18n'
 import { extendPrototype } from '@/shared/utils/utils'
 
 const app = createApp(App)
 const pinia = createPinia()
 
-
 app.use(router)
 app.use(pinia)
 app.use(I18n.getInstance())

src/renderer/utils/language.js

@@ -0,0 +1,7 @@
+import I18n from '@/shared/i18n/I18n'
+
+export async function changeLanguageWrapper(lang) {
+    I18n.setLocale(lang)
+    await window.api.callStatic('I18n', 'setLocale', lang)
+    await window.api.callStatic('TrayManage', 'updateContextMenu')
+}

src/shared/i18n/I18n.js

@@ -0,0 +1,32 @@
+import { createI18n } from 'vue-i18n'
+import zh from '@/shared/i18n/zh'
+import en from '@/shared/i18n/en'
+import { isRendererProcess } from '@/shared/utils/utils'
+
+export default class I18n {
+    static _instance
+    static init() {
+        if (this._instance) return this._instance
+        this._instance = createI18n({
+            legacy: !isRendererProcess(),
+            locale: 'zh',
+            messages: {
+                'zh': zh,
+                'en': en
+            }
+        })
+    }
+
+    static getInstance() {
+        if (!this._instance) this.init()
+        return this._instance
+    }
+
+    static setLocale(locale) {
+        if(isRendererProcess()){
+            this._instance.global.locale.value = locale
+        }else{
+            this._instance.global.locale = locale
+        }
+    }
+}