Electron：macOS 菜单栏适配

💚 [build-electron][not-build-web]
Stapxs · Apr 7, 2024 · d40623f · d40623f
1 parent df7895b
commit d40623f
Show file tree

Hide file tree

Showing 14 changed files with 972 additions and 2,545 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "stapxs-qq-lite",
-  "version": "2.6.6",
+  "version": "2.6.7",
   "private": false,
   "author": "Stapx Steve [林槐]",
   "description": "一个兼容 oicq-http 的非官方网页版 QQ 客户端，使用 Vue 重制的全新版本。",
@@ -13,7 +13,6 @@
     "postinstall": "electron-builder install-app-deps",
     "postuninstall": "electron-builder install-app-deps"
   },
-  "main": "background.js",
   "dependencies": {
     "@bitprojects/umami-logger-typescript": "^1.0.10",
     "@jakejarrett/gtk-theme": "^2.0.1",
@@ -59,11 +58,11 @@
     "@vue/cli-service": "~5.0.0",
     "@vue/eslint-config-typescript": "^9.1.0",
     "child_process": "^1.0.2",
-    "electron": "^20.0.0",
-    "electron-devtools-installer": "^3.1.0",
+    "electron": "^27.0.0",
+    "electron-devtools-installer": "^3.2.0",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
     "typescript": "~4.5.5",
-    "vue-cli-plugin-electron-builder": "~2.1.1"
+    "vue-cli-plugin-electron-builder": "^3.0.0-alpha.4"
   }
 }
diff --git a/src/App.vue b/src/App.vue
@@ -43,7 +43,7 @@
                             d="M464 64C490.5 64 512 85.49 512 112C512 127.1 504.9 141.3 492.8 150.4L275.2 313.6C263.8 322.1 248.2 322.1 236.8 313.6L19.2 150.4C7.113 141.3 0 127.1 0 112C0 85.49 21.49 64 48 64H464zM217.6 339.2C240.4 356.3 271.6 356.3 294.4 339.2L512 176V384C512 419.3 483.3 448 448 448H64C28.65 448 0 419.3 0 384V176L217.6 339.2z" />
                     </svg>
                 </li>
-                <li @click="changeTab('列表', 'Friends', false)">
+                <li id="bar-friends" @click="changeTab('列表', 'Friends', false)">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                         <path
                             d="M224 256c70.7 0 128-57.31 128-128s-57.3-128-128-128C153.3 0 96 57.31 96 128S153.3 256 224 256zM274.7 304H173.3C77.61 304 0 381.6 0 477.3c0 19.14 15.52 34.67 34.66 34.67h378.7C432.5 512 448 496.5 448 477.3C448 381.6 370.4 304 274.7 304z" />
@@ -166,7 +166,7 @@
         </TransitionGroup>
         <Transition>
             <div class="pop-box" v-if="runtimeData.popBoxList.length > 0">
-                <div :class="'pop-box-body ss-card' + (runtimeData.popBoxList[0].full ? ' full' : '')"
+                <div :class="'pop-box-body ss-card' + (runtimeData.popBoxList[0].full ? ' full' : '') + (get('option_view_no_window') == true ? '' : ' window')"
                     :style="'transform: translate(-50%, calc(-50% - ' + ((runtimeData.popBoxList.length > 3 ? 3 : runtimeData.popBoxList.length) * 10) + 'px))'">
                     <header v-show="runtimeData.popBoxList[0].title != undefined">
                         <div
@@ -232,7 +232,7 @@ import { Logger, popList, PopInfo } from '@/function/base'
 import { runtimeData } from '@/function/msg'
 import { BaseChatInfoElem } from '@/function/elements/information'
 import { getTrueLang, gitmojiToEmoji } from '@/utils/systemUtil'
-import { openLink, loadHistory } from './utils/appUtil'
+import { openLink, loadHistory, createMenu, createIpc } from './utils/appUtil'
 
 import Options from '@/pages/Options.vue'
 import Friends from '@/pages/Friends.vue'
@@ -254,6 +254,7 @@ export default defineComponent({
             Connector: Connector,
             defineAsyncComponent: defineAsyncComponent,
             save: Option.runASWEvent,
+            get: Option.get,
             popInfo: new PopInfo(),
             appMsgs: popList,
             loadHistory: loadHistory,
@@ -430,24 +431,26 @@ export default defineComponent({
     mounted () {
         const logger = new Logger()
         window.moYu = () => { return 'undefined' }
-        // MacOS：初始化菜单
-        const electron = (process.env.IS_ELECTRON as any) === true ? window.require('electron') : null
-        const reader = electron ? electron.ipcRenderer : null
-        if (reader) {
-            reader.send('sys:updateMenu')
-        }
         // 页面加载完成后
         window.onload = () => {
+            createMenu()
+            createIpc()
+            // 加载开发者相关
+            if (process.env.NODE_ENV == 'development') {
+                document.title = 'Stapxs QQ Lite (Dev)'
+                // 布局检查工具
+                Spacing.start()
+            }
             app.config.globalProperties.$viewer = this.viewerBody
             // 初始化波浪动画
             runtimeData.tags.loginWaveTimer = this.waveAnimation(document.getElementById('login-wave'))
             // 加载设置项
             runtimeData.sysConfig = Option.load()
             // PS：重新再应用部分需要加载完成后才能应用的设置
-            Option.runAS('opt_dark', Option.get('opt_dark'))
-            Option.runAS('opt_auto_dark', Option.get('opt_auto_dark'))
-            Option.runAS('theme_color', Option.get('theme_color'))
-            Option.runAS('opt_auto_win_color', Option.get('opt_auto_win_color'))
+            Option.run('opt_dark', Option.get('opt_dark'))
+            Option.run('opt_auto_dark', Option.get('opt_auto_dark'))
+            Option.run('theme_color', Option.get('theme_color'))
+            Option.run('opt_auto_win_color', Option.get('opt_auto_win_color'))
             if(Option.get('opt_no_window') == true) {
                 const app = document.getElementById('base-app')
                 if(app) app.classList.add('withBar')
@@ -467,12 +470,6 @@ export default defineComponent({
             // 初始化完成
             logger.debug(this.$t('log_welcome'))
             logger.debug(this.$t('log_runtime') + ': ' + process.env.NODE_ENV)
-            // 加载开发者相关
-            if (process.env.NODE_ENV == 'development') {
-                document.title = 'Stapxs QQ Lite (Dev)'
-                // 布局检查工具
-                Spacing.start()
-            }
             // UM：加载 Umami 统计功能
             if (!Option.get('close_ga') && process.env.NODE_ENV == 'production') {
                 Umami.initialize({

diff --git a/src/assets/css/view.css b/src/assets/css/view.css
@@ -665,6 +665,16 @@ html, body {
     margin: 60px 20px 0 20px;
     width: calc(100% - 80px);
 }
+.pop-box-body.full iframe {
+    height: calc(100vh - 145px);
+}
+.pop-box-body.full.window {
+    height: calc(100vh - 80px);
+    margin: 20px 20px 0 20px;
+}
+.pop-box-body.full.window iframe {
+    height: calc(100vh - 105px);
+}
 .pop-box-body > header {
     align-items: center;
     display: flex;

diff --git a/src/assets/l10n/zh-CN.json b/src/assets/l10n/zh-CN.json
@@ -275,7 +275,7 @@
   "option_dev_restart": "重启应用",
   "option_dev_restart_tip": "99% 的特性都能通过重启解决！",
   "btn_close": "关闭",
-  "btn_open": "打开",
+  "btn_open": "打开…",
   "pop_send_file_fail": "发送文件失败",
   "pop_send_file_err": "发送文件错误",
   "pop_send_file": "正在发送文件 {percent}%",
@@ -299,5 +299,30 @@
   "sw_updated_1": "应用已更新，刷新生效。",
   "chat_show_msg_error": "解析消息错误",
   "botinfo_protocol_version": "OneBot 版本",
-  "botinfo_nt_protocol": "NT 协议版本"
+  "botinfo_nt_protocol": "NT 协议版本",
+  "load_success": "应用显示完成，应用初始化完成！欢迎使用 {name}！",
+  "pop_reload_user_success": "刷新用户列表成功",
+  "pop_log_con_close": "正在断开链接……",
+
+  "menu_about": "关于",
+  "menu_update": "检查更新…",
+  "menu_hide": "隐藏",
+  "menu_hide_others": "隐藏其他",
+  "menu_unhide": "全部显示",
+  "menu_quit": "退出",
+  "menu_account": "账户",
+  "menu_user_list": "用户列表（{count}）",
+  "menu_flush_user": "刷新列表…",
+  "menu_logout": "登出",
+  "menu_edit": "编辑",
+  "menu_undo": "撤销",
+  "menu_redo": "重做",
+  "menu_cut": "剪切",
+  "menu_copy": "复制",
+  "menu_paste": "粘贴",
+  "menu_select_all": "全选",
+  "menu_help": "帮助",
+  "menu_doc": "帮助文档",
+  "menu_feedback": "在 Github 上反馈问题",
+  "menu_license": "许可协议"
 }
diff --git a/src/background.ts b/src/background.ts
@@ -2,10 +2,11 @@
 
 import Store from 'electron-store'
 import windowStateKeeper from 'electron-window-state'
-import regIpcListener from './function/electron/ipc'
+import { regIpcListener } from './function/electron/ipc'
 import path from 'path'
+import { version as appVersion } from '../package.json'
 
-import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer'
+import installExtension from 'electron-devtools-installer'
 
 import { Menu, session } from 'electron'
 import { app, protocol, BrowserWindow } from 'electron'
@@ -20,18 +21,27 @@ protocol.registerSchemesAsPrivileged([
 export let win = undefined as BrowserWindow | undefined
 
 async function createWindow() {
-    console.log('开始创建窗口 ……')
-    // 窗口创建前事务
+    console.log('')
+    console.log('███████╗████████╗ █████╗ ██████╗ ██╗  ██╗')
+    console.log('██╔════╝╚══██╔══╝██╔══██╗██╔══██╗╚██╗██╔╝')
+    console.log('███████╗   ██║   ███████║██████╔╝ ╚███╔╝ ')
+    console.log('╚════██║   ██║   ██╔══██║██╔═══╝  ██╔██╗ ')
+    console.log('███████║   ██║   ██║  ██║██║     ██╔╝ ██╗')
+    console.log('╚══════╝   ╚═╝   ╚═╝  ╚═╝╚═╝     ╚═╝  ╚═╝')
+    console.log('===========================================')
+    console.log('Welcome to Stapxs QQ Lite, current version: ' + appVersion)
+    console.log('The background language component will be initialized after the frontend is loaded.')
+
+    console.log('Platform：' + process.platform)
+    console.log('Start creating main window ……')
     Menu.setApplicationMenu(null)
-    regIpcListener()
     // 创建窗口
     const mainWindowState = windowStateKeeper({
         defaultWidth: 1200,
         defaultHeight: 800
     })
     const store = new Store()
     const noWindow = await store.get('opt_no_window')
-    console.log('窗口框架状态：' + noWindow)
     win = new BrowserWindow({
         x: mainWindowState.x,
         y: mainWindowState.y,
@@ -46,7 +56,9 @@ async function createWindow() {
     })
     win.once('focus', () => {if(win)win.flashFrame(false)})
     mainWindowState.manage(win)     // 窗口状态管理器
-    console.log('窗口创建完成')
+    console.log('Create main window to complete.')
+    // 注册 IPC 事务
+    regIpcListener()
     // 加载应用
     if (process.env.WEBPACK_DEV_SERVER_URL) {
         await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL as string)
@@ -55,7 +67,6 @@ async function createWindow() {
         createProtocol('app')
         win.loadURL('app://./index.html')
     }
-    console.log('应用加载完成')
 
     session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
         if(details.responseHeaders) {
@@ -68,9 +79,9 @@ async function createWindow() {
 }
 
 app.on('window-all-closed', () => {
-    if (process.platform !== 'darwin') {
+    // if (process.platform !== 'darwin') {
         app.quit()
-    }
+    // }
 })
 
 app.on('activate', () => {
@@ -80,12 +91,7 @@ app.on('activate', () => {
 app.on('ready', async () => {
     if (isDevelopment && !process.env.IS_TEST) {
         try {
-            await installExtension(VUEJS3_DEVTOOLS)
-            // 这是个谷歌分析调试工具，好像用不了？？
-            // await installExtension({
-            //     id: 'ilnpmccnfdjdjjikgkefkcegefikecdc',
-            //     electron: '>=1.2.1'
-            // })
+            await installExtension('nhdogjmejiglipccpnnnanhbledajbpd')
         } catch (e: any) {
             console.error('Vue Devtools failed to install:', e.toString())
         }

diff --git a/src/components/WelPan.vue b/src/components/WelPan.vue
@@ -64,7 +64,8 @@ export default defineComponent({
             const sender = event.target as HTMLInputElement
             // UM：上传语言选择
             Umami.trackEvent('use_language', { name: sender.value })
-
+            // 刷新菜单
+            // TODO
         },
         setPage(name: string) {
             this.show = name

diff --git a/src/function/connect.ts b/src/function/connect.ts
@@ -14,6 +14,7 @@ import { LogType, Logger, PopType, PopInfo  } from './base'
 import { parse, runtimeData, resetRimtime } from './msg'
 
 import { BotActionElem, LoginCacheElem } from './elements/system'
+import { updateMenu } from "@/utils/appUtil"
 
 const logger = new Logger()
 const popInfo = new PopInfo()
@@ -82,6 +83,11 @@ export class Connector {
         }
         websocket.onclose = (e) => {
             websocket = undefined
+            updateMenu({
+                id: 'account',
+                action: 'visible',
+                value: false
+            })
 
             switch(e.code) {
                 case 1000: break;   // 正常关闭
@@ -122,6 +128,7 @@ export class Connector {
      * 正常断开 Websocket 连接
      */
     static close() {
+        popInfo.add(PopType.INFO, app.config.globalProperties.$t('pop_log_con_close'))
         if(websocket) websocket.close(1000)
     }