perf: 优化消息类型分类

resources/assets/js/pages/manage/messenger.vue

@@ -15,13 +15,30 @@
                     </div>
                 </div>
                 <div v-if="tabActive==='dialog' && !dialogKey" class="messenger-nav">
+                    <EDropdown
+                        trigger="click"
+                        placement="bottom-start"
+                        class="nav-menu"
+                        @command="onActive">
+                        <div><i class="taskfont nav-icon">&#xe634;</i></div>
+                        <EDropdownMenu v-slot="dropdown" class="messenger-nav-menu">
+                            <EDropdownItem v-for="(item, key) in dialogMenus" :key="key" :command="item.type">
+                                <div class="messenger-nav-item" :class="{active: dialogActive==item.type}">
+                                    <div class="nav-title">{{$L(item.name)}}</div>
+                                    <Badge class="nav-num" :overflow-count="999" :count="msgUnread(item.type)"/>
+                                </div>
+                            </EDropdownItem>
+                        </EDropdownMenu>
+                    </EDropdown>
                     <div
-                        v-for="(item, key) in dialogType"
+                        v-for="(item, key) in computedType"
                         :key="key"
                         :class="{active:dialogActive==item.type}"
                         @click="onActive(item.type)">
-                        <Badge class="nav-num" :overflow-count="999" :count="msgUnread(item.type)"/>
+                        <div class="nav-title">
-                        <div class="nav-title">{{$L(item.name)}}</div>
+                            <em>{{$L(item.name)}}</em>
+                            <Badge class="nav-num" :overflow-count="999" :count="msgUnread(item.type)"/>
+                        </div>
                     </div>
                 </div>
                 <div v-if="$isEEUiApp && !appNotificationPermission" class="messenger-notify-permission" @click="onOpenAppSetting">
@@ -166,6 +183,8 @@ import ScrollerY from "../../components/ScrollerY";
 import longpress from "../../directives/longpress";
 import {Store} from "le5le-store";
 
+const MessengerObject = {menuHistory: []};
+
 export default {
     components: {ScrollerY, DialogWrapper},
     directives: {longpress},
@@ -179,12 +198,15 @@ export default {
             dialogSearch: [],
 
             dialogActive: '',
-            dialogType: [
+            dialogMenus: [
                 {type: '', name: '全部'},
                 {type: 'project', name: '项目'},
                 {type: 'task', name: '任务'},
-                {type: 'user', name: '个人'},
+                {type: 'user', name: '单聊'},
+                {type: 'group', name: '群聊'},
+                {type: 'bot', name: '机器人'},
             ],
+            dialogHistory: MessengerObject.menuHistory,
 
             contactsKey: '',
             contactsLoad: 0,
@@ -201,6 +223,11 @@ export default {
         }
     },
 
+    async beforeRouteEnter(to, from, next) {
+        MessengerObject.menuHistory = await $A.IDBArray("dialogMenuHistory")
+        next()
+    },
+
     mounted() {
         const id = $A.runNum(this.$route.query.dialog_id);
         if (id > 0) {
@@ -239,6 +266,35 @@ export default {
             return this.$route.name
         },
 
+        computedType() {
+            const {dialogActive, dialogMenus, dialogHistory} = this
+            const types = []
+            if (this.dialogHistory.includes(dialogActive)) {
+                types.push(...this.dialogHistory)
+            } else {
+                types.push('')
+                if (dialogActive) {
+                    types.push(dialogActive)
+                }
+                dialogHistory.some(item => {
+                    if (!types.includes(item)) {
+                        types.push(item)
+                    }
+                });
+                ['project', 'task'].some(item => {
+                    if (!types.includes(item)) {
+                        types.push(item)
+                    }
+                })
+                this.dialogHistory = types.slice(0, 4)
+                $A.IDBSave("dialogMenuHistory", this.dialogHistory)
+            }
+            //
+            return this.dialogHistory.map(type => {
+                return dialogMenus.find(item => item.type == type)
+            })
+        },
+
         dialogList() {
             const {dialogActive, dialogKey, dialogSearch} = this;
             if (dialogActive == '' && dialogKey == '') {
@@ -277,12 +333,22 @@ export default {
                     switch (dialogActive) {
                         case 'project':
                         case 'task':
-                            if (dialog.group_type != dialogActive) {
+                            if (dialogActive != dialog.group_type) {
                                 return false;
                             }
                             break;
                         case 'user':
-                            if (dialog.type != 'user' || dialog.bot) {
+                            if (dialogActive != dialog.type || dialog.bot) {
+                                return false;
+                            }
+                            break;
+                        case 'group':
+                            if (dialogActive != dialog.type || ['project', 'task'].includes(dialog.group_type)) {
+                                return false;
+                            }
+                            break;
+                        case 'bot':
+                            if (!dialog.bot) {
                                 return false;
                             }
                             break;
@@ -381,6 +447,16 @@ export default {
                                 return false
                             }
                             break;
+                        case 'group':
+                            if (type != dialog.type || ['project', 'task'].includes(dialog.group_type)) {
+                                return false
+                            }
+                            break;
+                        case 'bot':
+                            if (!dialog.bot) {
+                                return false;
+                            }
+                            break;
                     }
                     num += $A.getDialogNum(dialog);
                 });

resources/assets/sass/pages/page-messenger.scss

@@ -62,25 +62,37 @@
             .messenger-nav {
                 display: flex;
                 align-items: center;
-                justify-content: space-evenly;
+                padding: 2px 10px 12px;
-                padding: 2px 0 12px;
                 > div {
-                    max-width: 25%;
+                    flex: 1;
-                    position: relative;
+                    flex-shrink: 0;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
                     line-height: 1;
                     padding: 0 6px;
                     color: #888888;
                     cursor: pointer;
-                    .nav-num {
+                    &.nav-menu {
-                        position: absolute;
+                        max-width: 46px;
-                        top: -12px;
+                    }
-                        right: -8px;
+                    .nav-icon {
-                        transform: scale(0.7);
+                        font-size: 16px;
                     }
                     .nav-title {
-                        overflow: hidden;
+                        position: relative;
-                        text-overflow: ellipsis;
+                        > em {
-                        white-space: nowrap;
+                            font-style: normal;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            white-space: nowrap;
+                        }
+                        .nav-num {
+                            position: absolute;
+                            top: -12px;
+                            right: -8px;
+                            transform: scale(0.7);
+                        }
                     }
                     &.active {
                         color: #555555;
@@ -540,6 +552,34 @@
     }
 }
 
+.messenger-nav-menu {
+    transform: translateX(-4px);
+    .popper__arrow {
+        transform: translateX(2px);
+    }
+    .messenger-nav-item {
+        display: flex;
+        align-items: center;
+        &.active {
+            .nav-title {
+                font-weight: bold;
+            }
+        }
+        .nav-title {
+            flex: 1;
+            max-width: 88px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            margin-right: 12px;
+        }
+        .nav-num {
+            transform: scale(0.7);
+            transform-origin: center right;
+        }
+    }
+}
+
 @media (max-width: 768px) {
     .page-messenger {
         .messenger-wrapper {