优化窗口激活机制

electron/electron.js

@@ -206,6 +206,14 @@ app.on('before-quit', () => {
     willQuitApp = true
 })
 
+app.on('browser-window-blur', () => {
+    mainWindow.webContents.send("browserWindowBlur", {})
+})
+
+app.on('browser-window-focus', () => {
+    mainWindow.webContents.send("browserWindowFocus", {})
+})
+
 /**
  * 打开文件
  * @param args {path}

resources/assets/js/App.vue

@@ -59,13 +59,14 @@ export default {
     created() {
         this.electronEvents();
         this.eeuiEvents();
+        this.otherEvents();
+        this.synchThemeLanguage();
     },
 
     mounted() {
         window.addEventListener('resize', this.windowSizeListener);
         window.addEventListener('scroll', this.windowScrollListener);
         this.searchInter = setInterval(this.searchEnter, 1000);
-        this.synchThemeLanguage();
     },
 
     beforeDestroy() {
@@ -76,6 +77,10 @@ export default {
 
     computed: {
         ...mapState(['ws', 'themeMode']),
+
+        isSoftware() {
+            return this.$Electron || this.$isEEUiApp;
+        },
     },
 
     watch: {
@@ -175,6 +180,16 @@ export default {
             });
         },
 
+        synchThemeLanguage() {
+            if (this.isSoftware) {
+                this.iframes = this.iframes.filter(({key}) => key != 'synchThemeLanguage')
+                this.iframes.push({
+                    key: 'synchThemeLanguage',
+                    url: $A.apiUrl(`../setting/theme_language?theme=${this.themeMode}&language=${this.languageType}`)
+                })
+            }
+        },
+
         windowSizeListener() {
             this.$store.state.windowWidth = $A(window).width()
             this.$store.state.windowHeight = $A(window).height()
@@ -202,6 +217,12 @@ export default {
                 let {action, data} = args;
                 this.$store.dispatch(action, data);
             })
+            this.$Electron.registerMsgListener('browserWindowBlur', _ => {
+                this.$store.state.windowActive = false;
+            })
+            this.$Electron.registerMsgListener('browserWindowFocus', _ => {
+                this.$store.state.windowActive = true;
+            })
             this.iframes.push({
                 key: 'manifest',
                 url: $A.apiUrl("../manifest")
@@ -214,17 +235,12 @@ export default {
             }
             // 页面失活
             window.__onPagePause = () => {
-                if (this.$openLog) {
+                this.$store.state.windowActive = false;
-                    console.log('onPagePause');
+                this.$store.dispatch("getBasicData", -1);
-                }
-                this.$store.dispatch("getBasicData", -1)
             }
             // 页面激活
             window.__onPageResume = (num) => {
-                if (this.$openLog) {
+                this.$store.state.windowActive = true;
-                    console.log('onPageResume', num);
-                    console.log('ws', this.ws, this.ws ? this.ws.readyState : null);
-                }
                 if (num > 0) {
                     this.$store.dispatch("getBasicData", 600)
                     if (this.ws === null) {
@@ -240,13 +256,14 @@ export default {
             }
         },
 
-        synchThemeLanguage() {
+        otherEvents() {
-            if (this.$Electron || this.$isEEUiApp) {
+            if (!this.isSoftware) {
-                this.iframes = this.iframes.filter(({key}) => key != 'synchThemeLanguage')
+                // 非客户端监听窗口激活
-                this.iframes.push({
+                const hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : 'mozHidden' in document ? 'mozHidden' : null;
-                    key: 'synchThemeLanguage',
+                const visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
-                    url: $A.apiUrl(`../setting/theme_language?theme=${this.themeMode}&language=${this.languageType}`)
+                document.addEventListener(visibilityChangeEvent, () => {
-                })
+                    this.$store.state.windowActive = !document[hiddenProperty]
+                });
             }
         },
     }

resources/assets/js/pages/manage.vue

@@ -431,7 +431,6 @@ export default {
             allProjectShow: false,
             archivedProjectShow: false,
 
-            natificationHidden: false,
             natificationReady: false,
             notificationManage: null,
 
@@ -451,7 +450,6 @@ export default {
         }
         //
         this.notificationInit();
-        this.onVisibilityChange();
         //
         this.addTaskSubscribe = Store.subscribe('addTask', this.onAddTask);
         this.dialogMsgSubscribe = Store.subscribe('dialogMsgPush', this.addDialogMsg);
@@ -501,6 +499,7 @@ export default {
             'clientNewVersion',
             'cacheTaskBrowse',
 
+            'windowActive',
             'dialogIns',
         ]),
 
@@ -663,15 +662,6 @@ export default {
             }, 600);
         },
 
-        natificationHidden(val) {
-            clearTimeout(this.notificationTimeout);
-            if (!val && this.notificationManage) {
-                this.notificationTimeout = setTimeout(() => {
-                    this.notificationManage.close();
-                }, 6000);
-            }
-        },
-
         wsOpenNum(num) {
             if (num <= 1) return
             this.$store.dispatch("getBasicData", 600).then(this.getReportUnread)
@@ -903,17 +893,17 @@ export default {
 
         addDialogMsg(data) {
             if (!this.natificationReady && !this.$isEEUiApp) {
-                return; // 通知未准备好
+                return; // 通知未准备好不通知
             }
-            if ($A.last(this.dialogIns)?.dialog_id === data.dialog_id) {
+            if (this.windowActive && data.dialog_id === $A.last(this.dialogIns)?.dialog_id) {
-                return; // 最后打开的会话是通知的会话时不通知
+                return; // 窗口激活且最后打开的会话是通知的会话时不通知
             }
             //
             const {id, dialog_id, type, msg, userid} = data;
             if (userid == this.userId) {
-                return; // 自己的消息不弹出通知
+                return; // 自己的消息不通知
             }
-            let body = '';
+            let body;
             switch (type) {
                 case 'text':
                     body = $A.getMsgTextPreview(msg.text)
@@ -1092,15 +1082,6 @@ export default {
             };
             this.notificationManage.initNotification(userSelectFn);
         },
-
-        onVisibilityChange() {
-            let hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : 'mozHidden' in document ? 'mozHidden' : null;
-            let visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
-            let visibilityChangeListener = () => {
-                this.natificationHidden = !!document[hiddenProperty]
-            }
-            document.addEventListener(visibilityChangeEvent, visibilityChangeListener);
-        },
     }
 }
 </script>

resources/assets/js/pages/manage/components/DialogView.vue

@@ -171,7 +171,7 @@ export default {
     },
 
     computed: {
-        ...mapState(['dialogMsgs', 'audioPlaying']),
+        ...mapState(['dialogMsgs', 'audioPlaying', 'windowActive']),
 
         viewClass() {
             const {msgData, operateAction, operateEnter} = this;
@@ -235,6 +235,11 @@ export default {
             },
             immediate: true,
         },
+        windowActive(active) {
+            if (active) {
+                this.msgRead();
+            }
+        },
         operateAction(val) {
             this.operateEnter = false;
             if (val) {
@@ -255,7 +260,7 @@ export default {
         },
 
         msgRead() {
-            if (this.msgData._r === true) {
+            if (!this.windowActive || this.msgData._r === true) {
                 return;
             }
             this.msgData._r = true;

resources/assets/js/pages/manage/components/DialogWrapper.vue

@@ -116,7 +116,7 @@
 
         <!--底部输入-->
         <div class="dialog-footer" :class="{newmsg: msgNew > 0 && allMsgs.length > 0}" @click="onActive">
-            <div class="dialog-newmsg" @click="onToBottom">{{$L('有' + msgNew + '条新消息')}}</div>
+            <div class="dialog-newmsg" @click="onToBottom">{{$L(`有${msgNew}条新消息`)}}</div>
             <DialogUpload
                 ref="chatUpload"
                 class="chat-upload"
@@ -356,6 +356,7 @@ export default {
             'cacheDialogs',
             'wsOpenNum',
             'touchBackInProgress',
+            'windowActive',
         ]),
 
         isReady() {
@@ -505,7 +506,7 @@ export default {
             }
             this.allMsgs = newList;
             //
-            if (scrollE > 10 && oldList.length > 0) {
+            if (!this.windowActive || (scrollE > 10 && oldList.length > 0)) {
                 const lastId = oldList[oldList.length - 1].id
                 const tmpList = newList.filter(item => item.id && item.id > lastId)
                 this.msgNew += tmpList.length

resources/assets/js/store/state.js

@@ -8,6 +8,9 @@ const stateData = {
     windowLarge: $A(window).width() > 768, // 大窗口
     windowSmall: $A(window).width() <= 768, // 小窗口
 
+    // 窗口是否激活
+    windowActive: true,
+
     // 播放中的音频地址
     audioPlaying: null,