perf: 客户端本地通知

resources/assets/js/components/Mobile/Notification.vue

@@ -0,0 +1,65 @@
+<template>
+    <transition v-if="show && userid > 0" name="mobile-notify">
+        <div class="mobile-notification" :class="{show}" @click.stop="onClick">
+            <UserAvatar :userid="userid" :size="40" show-name/>
+            <div class="notification-desc">{{desc}}</div>
+        </div>
+    </transition>
+</template>
+
+<script>
+export default {
+    name: "MobileNotification",
+    data() {
+        return {
+            userid: 0,
+            desc: '',
+            duration: 6000,
+            callback: null,
+
+            show: false,
+            timer: null,
+        };
+    },
+
+    beforeDestroy() {
+        this.timer && clearTimeout(this.timer);
+        this.show = false;
+    },
+
+    methods: {
+        open(config) {
+            if (!$A.isJson(config)) {
+                return;
+            }
+            this.userid = config.userid || 0;
+            this.desc = config.desc || "";
+            this.duration = typeof config.duration === "number" ? config.duration : 6000;
+            this.callback = typeof config.callback === "function" ? config.callback : null;
+            this.show = true;
+            this.timer && clearTimeout(this.timer);
+            if (this.duration > 0) {
+                this.timer = setTimeout(this.close, this.duration)
+            }
+            if (this.$isEEUiApp) {
+                const webview = requireModuleJs("webview");
+                webview && webview.sendMessage({
+                    action: 'setVibrate',
+                    time: 1000
+                });
+            }
+        },
+
+        close() {
+            this.show = false;
+        },
+
+        onClick() {
+            this.close();
+            if (typeof this.callback === "function") {
+                this.callback();
+            }
+        }
+    },
+};
+</script>

resources/assets/js/pages/manage.vue

@@ -359,6 +359,7 @@
         <!--移动端选项卡-->
         <MobileTabbar v-if="showMobileTabbar" @on-click="onTabbarClick"/>
         <MobileBack :showTabbar="showMobileTabbar"/>
+        <MobileNotification ref="mobileNotification"/>
     </div>
 </template>
 
@@ -378,9 +379,11 @@ import notificationKoro from "notification-koro1";
 import {Store} from "le5le-store";
 import MobileBack from "../components/Mobile/Back";
 import TaskMenu from "./manage/components/TaskMenu";
+import MobileNotification from "../components/Mobile/Notification";
 
 export default {
     components: {
+        MobileNotification,
         TaskMenu,
         MobileBack,
         MobileTabbar,
@@ -894,7 +897,7 @@ export default {
         },
 
         addDialogMsg(data) {
-            if (!this.natificationReady) {
+            if (!this.natificationReady && !this.$isEEUiApp) {
                 return; // 通知未准备好
             }
             if (!this.natificationHidden
@@ -918,24 +921,36 @@ export default {
                 default:
                     return;
             }
-            this._notificationId = id;
+            this.__notificationId = id;
-            this.notificationManage.replaceOptions({
+            const notificationFunc = (title) => {
-                icon: $A.originUrl('images/logo.png'),
+                if (this.__notificationId === id) {
-                body: body,
+                    if (this.$isEEUiApp) {
-                data: data,
+                        this.$refs.mobileNotification.open({
-                tag: "dialog",
+                            userid: userid,
-                requireInteraction: true
+                            desc: body,
-            });
+                            callback: () => {
-            let dialog = this.cacheDialogs.find((item) => item.id == dialog_id);
+                                this.goForward({name: 'manage-messenger', params: {dialogId: dialog_id}});
-            if (dialog) {
+                            }
-                this.notificationManage.replaceTitle(dialog.name);
+                        })
-                this.notificationManage.userAgreed();
+                    } else {
-            } else {
+                        this.notificationManage.replaceOptions({
-                this.$store.dispatch("getDialogOne", dialog_id).then(({data}) => {
+                            icon: $A.originUrl('images/logo.png'),
-                    if (this._notificationId === id) {
+                            body: body,
-                        this.notificationManage.replaceTitle(data.name);
+                            data: data,
+                            tag: "dialog",
+                            requireInteraction: true
+                        });
+                        this.notificationManage.replaceTitle(title);
                         this.notificationManage.userAgreed();
                     }
+                }
+            }
+            const dialog = this.cacheDialogs.find((item) => item.id == dialog_id);
+            if (dialog) {
+                notificationFunc(dialog.name)
+            } else {
+                this.$store.dispatch("getDialogOne", dialog_id).then(({data}) => {
+                    notificationFunc(data.name)
                 }).catch(() => {})
             }
         },

resources/assets/sass/components/mobile.scss

@@ -144,6 +144,43 @@
     }
 }
 
+.mobile-notification {
+    position: fixed;
+    left: 50%;
+    top: 20px;
+    z-index: 9998;
+    padding: 12px;
+    border-radius: 8px;
+    border: 1px solid #ebeef5;
+    background-color: #fff;
+    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+    width: 90%;
+    max-width: 320px;
+    transform: translate(-50%, 0);
+    .common-avatar {
+        &.avatar-wrapper {
+            align-items: flex-start;
+            .avatar-name {
+                font-weight: bold;
+                padding-left: 12px;
+            }
+        }
+    }
+    .notification-desc {
+        float: left;
+        margin-top: -18px;
+        margin-left: 52px;
+        font-size: 13px;
+        line-height: 18px;
+        word-break: break-all;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+    }
+}
+
 .mobile-fade-enter-active {
     transition: all 0.2s ease;
 }
@@ -171,6 +208,20 @@
     opacity: 0;
 }
 
+.mobile-notify-enter-active {
+    transition: all 0.3s ease;
+}
+
+.mobile-notify-leave-active {
+    transition: all 0.3s ease;
+}
+
+.mobile-notify-enter,
+.mobile-notify-leave-to {
+    transform: translate(-50%, -100%);
+    opacity: 0;
+}
+
 @media (max-width: 768px) {
     .mobile-tabbar {
         display: flex;
@@ -178,4 +229,9 @@
     .mobile-back {
         display: block;
     }
+    .mobile-notification {
+        top: 12px;
+        width: 94%;
+        max-width: none;
+    }
 }