perf: 优化显示效果

app/Http/Controllers/Api/ReportController.php

@@ -363,6 +363,7 @@ class ReportController extends AbstractController
         } else {
             $title = $user->nickname . "的日报[" . $start_time->format("Y/m/d") . "]";
         }
+        $title = Doo::translate($title);
 
         // 生成内容
         $contents = [];

app/Models/User.php

@@ -156,7 +156,7 @@ class User extends AbstractModel
         });
         $array = [];
         foreach ($list as $item) {
-            $array[] = $item['name'] . ($item['owner_userid'] === $this->userid ? '(M)' : '');
+            $array[] = $item['name'] . ($item['owner_userid'] === $this->userid ? ' (M)' : '');
         }
         return implode(', ', $array);
     }

app/Models/UserBot.php

@@ -247,7 +247,7 @@ class UserBot extends AbstractModel
                         'remark' => '考勤机',
                     ];
                 }
-            } 
+            }
             if ($array) {
                 $record = UserCheckinRecord::where($array)->first();
                 if (empty($record)) {
@@ -299,7 +299,7 @@ class UserBot extends AbstractModel
                             ], [
                                 'content' => $subcontent,
                                 'language' => false,
-                                'style' => 'padding-top:4px;opacity:0.4',
+                                'style' => 'padding-top:4px;opacity:0.6',
                             ]
                         ],
                     ], $botUser->userid, false, false, $type != "up");

app/Tasks/CheckinRemindTask.php

@@ -102,7 +102,7 @@ class CheckinRemindTask extends AbstractTask
                             ],
                             [
                                 'content' => $content,
-                                'style' => 'padding-top:4px;opacity:0.4',
+                                'style' => 'padding-top:4px;opacity:0.6',
                             ],
                         ],
                     ], $botUser->userid);

language/translate.json

@@ -4959,7 +4959,7 @@
         "key": "选择负责人",
         "zh": "",
         "zh-CHT": "選擇負責人",
-        "en": "Select person in charge",
+        "en": "Select owner",
         "ko": "담당자 선택",
         "ja": "担当者を選択",
         "de": "Verantwortlichen auswählen",
@@ -7887,7 +7887,7 @@
         "key": "选择主题",
         "zh": "",
         "zh-CHT": "選擇主題",
-        "en": "Choose Theme",
+        "en": "Select Theme",
         "ko": "테마 선택",
         "ja": "テーマを選択",
         "de": "Thema auswählen",
@@ -9339,7 +9339,7 @@
         "key": "负责人",
         "zh": "",
         "zh-CHT": "負責人",
-        "en": "Person in Charge",
+        "en": "Owner",
         "ko": "담당자",
         "ja": "担当者",
         "de": "Verantwortlicher",

resources/assets/js/App.vue

@@ -224,6 +224,7 @@ export default {
             this.$store.state.windowLandscape = windowOrientation === 'landscape'
             this.$store.state.windowPortrait = windowOrientation === 'portrait'
 
+            this.$store.state.formLabelClassName = windowWidth > 576 ? '' : 'form-label-weight-bold'
             this.$store.state.formLabelPosition = windowWidth > 576 ? 'right' : 'top'
             this.$store.state.formLabelWidth = windowWidth > 576 ? 'auto' : ''
 

resources/assets/js/functions/web.js

@@ -571,10 +571,10 @@ import {MarkdownPreview} from "../store/markdown";
             } else if (typeof config === "string") {
                 config = {content: config};
             }
-            config.title = config.title || (typeof config.render === 'undefined' ? '温馨提示' : '');
+            config.title = config.title || (typeof config.render === 'undefined' ? $A.modalTranslation('温馨提示', config.language) : '');
             config.content = config.content || '';
-            config.okText = config.okText || '确定';
+            config.okText = config.okText || $A.modalTranslation('确定', config.language);
-            config.cancelText = config.cancelText || '取消';
+            config.cancelText = config.cancelText || $A.modalTranslation('取消', config.language);
             if (config.language !== false) {
                 delete config.language;
                 config.title = $A.L(config.title);
@@ -585,6 +585,14 @@ import {MarkdownPreview} from "../store/markdown";
             return config;
         },
 
+        modalTranslation(title, language) {
+            if (language !== false) {
+                return title;
+            } else {
+                return $A.L(title)
+            }
+        },
+
         modalInput(config, millisecond = 0) {
             if (millisecond > 0) {
                 setTimeout(() => { $A.modalInput(config) }, millisecond);

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

@@ -24,7 +24,7 @@
             </Form>
         </div>
         <div v-else class="report-detail-context">
-            <Form class="report-form" :labelPosition="formLabelPosition" :labelWidth="formLabelWidth">
+            <Form class="report-form" :class="formLabelClassName" :labelPosition="formLabelPosition" :labelWidth="formLabelWidth">
                 <template v-if="formLabelWidth !== 'auto'">
                     <FormItem :label="$L('汇报人')">
                         <UserAvatar :userid="data.userid" :size="28"/>
@@ -61,7 +61,7 @@ export default {
         }
     },
     computed: {
-        ...mapState(['formLabelPosition', 'formLabelWidth']),
+        ...mapState(['formLabelPosition', 'formLabelWidth', 'formLabelClassName']),
     },
     watch: {
         'data.id': {

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

@@ -35,21 +35,24 @@
                         <div class="nav-icon"><i class="taskfont">&#xe634;</i></div>
                         <EDropdownMenu 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-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
+                    <div class="nav-list" ref="navList">
-                        v-for="(item, key) in typeItems"
+                        <div
-                        :key="key"
+                            v-for="(item, key) in dialogHistorys"
-                        :class="{active:dialogActive==item.type}"
+                            :key="key"
-                        @click="onActive(item.type)">
+                            class="nav-item"
-                        <div class="nav-title">
+                            :class="{active:dialogActive==item.type}"
-                            <em>{{$L(item.name)}}</em>
+                            @click="onActive(item.type)">
-                            <Badge class="nav-num" :overflow-count="999" :count="msgUnread(item.type)"/>
+                            <div class="nav-title">
+                                <em>{{$L(item.name)}}</em>
+                                <Badge class="nav-num" :overflow-count="999" :count="msgUnread(item.type)"/>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -258,7 +261,19 @@ import DialogWrapper from "./components/DialogWrapper";
 import longpress from "../../directives/longpress";
 import {Store} from "le5le-store";
 
-const MessengerObject = {menuHistory: []};
+const navDatas = {
+    menus: [
+        {type: '', name: '全部'},
+        {type: 'project', name: '项目'},
+        {type: 'task', name: '任务'},
+        {type: 'user', name: '单聊'},
+        {type: 'group', name: '群聊'},
+        {type: 'bot', name: '机器人'},
+        {type: 'mark', name: '标注'},
+        {type: '@', name: '@我'},
+    ],
+    historys: []
+};
 
 export default {
     components: {DialogWrapper},
@@ -274,17 +289,8 @@ export default {
             dialogSearchList: [],
 
             dialogActive: '',
-            dialogMenus: [
+            dialogMenus: navDatas.menus,
-                {type: '', name: '全部'},
+            dialogHistorys: navDatas.historys,
-                {type: 'project', name: '项目'},
-                {type: 'task', name: '任务'},
-                {type: 'user', name: '单聊'},
-                {type: 'group', name: '群聊'},
-                {type: 'bot', name: '机器人'},
-                {type: 'mark', name: '标注'},
-                {type: '@', name: '@我'},
-            ],
-            dialogHistory: MessengerObject.menuHistory,
 
             contactsKey: '',
             contactsLoad: 0,
@@ -304,7 +310,10 @@ export default {
     },
 
     async beforeRouteEnter(to, from, next) {
-        MessengerObject.menuHistory = await $A.IDBArray("dialogMenuHistory")
+        navDatas.historys = (await $A.IDBArray("dialogMenuHistorys"))
+        if (navDatas.historys.length === 0) {
+            navDatas.historys = navDatas.menus.map(item => Object.assign(item, {time: 0}))
+        }
         next()
     },
 
@@ -328,6 +337,7 @@ export default {
 
     activated() {
         this.updateDialogs(this.firstLoad ? 0 : 1000);
+        this.scrollToNav();
         this.firstLoad = false;
         //
         this.$nextTick(_ => this.activeNum++)
@@ -363,35 +373,6 @@ export default {
             return this.windowPortrait ? 36 : 30
         },
 
-        typeItems() {
-            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', 'user'].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, dialogSearchKey, dialogSearchList} = this
             if (dialogSearchList.length > 0) {
@@ -625,6 +606,7 @@ export default {
                     }
                 } else {
                     this.updateDialogs(1000);
+                    this.scrollToNav();
                 }
             },
             immediate: true
@@ -639,11 +621,20 @@ export default {
             immediate: true
         },
 
-        dialogActive(){
+        dialogActive(active) {
             this.dialogSearchList = [];
-            if(this.dialogActive == 'mark' && !this.dialogSearchKey){
+            if (active == 'mark' && !this.dialogSearchKey) {
                 this.searchTagDialog()
             }
+            //
+            this.dialogHistorys.forEach(item => {
+                if (item.type == '') {
+                    item.time = $A.dayjs().unix() + 1
+                } else if (item.type == active) {
+                    item.time = $A.dayjs().unix()
+                }
+            })
+            $A.IDBSave("dialogMenuHistorys", $A.cloneJSON(this.dialogHistorys).sort((a, b) => b.time - a.time))
         }
     },
 
@@ -689,6 +680,16 @@ export default {
             } else {
                 this.dialogActive = type
             }
+            this.scrollToNav()
+        },
+
+        scrollToNav() {
+            if (this.tabActive != 'dialog') {
+                return
+            }
+            this.$nextTick(_ => {
+                $A.scrollToView(this.$refs.navList?.querySelector('.active'), { behavior: "auto", block: "nearest", inline: "nearest" });
+            })
         },
 
         shakeUnread() {

resources/assets/js/pages/manage/setting/components/SystemSetting.vue

@@ -1,6 +1,12 @@
 <template>
     <div class="setting-component-item">
-        <Form ref="formDatum" :model="formDatum" label-width="auto" @submit.native.prevent>
+        <Form
+            ref="formDatum"
+            :model="formDatum"
+            :class="formLabelClassName"
+            :labelPosition="formLabelPosition"
+            :labelWidth="formLabelWidth"
+            @submit.native.prevent>
             <div class="block-setting-box">
                 <h3>{{ $L('帐号相关') }}</h3>
                 <div class="form-box">
@@ -28,7 +34,7 @@
                             v-model="formDatum.temp_account_alias"
                             style="width:220px;margin-top:6px"
                             :placeholder="$L('临时帐号')">
-                            <span slot="prepend">{{$L('临时帐号')}} {{$L('别名')}}</span>
+                            <span slot="prepend">{{$L('别名')}}</span>
                         </Input>
                         <div class="form-tip form-list">
                             <p>{{$L('临时帐号')}}：</p>
@@ -245,6 +251,8 @@
 </template>
 
 <script>
+import {mapState} from "vuex";
+
 export default {
     name: 'SystemSetting',
 
@@ -260,6 +268,10 @@ export default {
         this.systemSetting();
     },
 
+    computed: {
+        ...mapState(['formLabelPosition', 'formLabelWidth', 'formLabelClassName']),
+    },
+
     methods: {
         submitForm() {
             this.$refs.formDatum.validate((valid) => {

resources/assets/js/pages/manage/setting/delete.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="setting-item submit">
         <Loading v-if="configLoad > 0"/>
-        <Form v-else ref="formDatum" :model="formDatum" :rules="ruleDatum" :labelPosition="formLabelPosition" :labelWidth="formLabelWidth" @submit.native.prevent>
+        <Form v-else ref="formDatum" :model="formDatum" :rules="ruleDatum" :class="formLabelClassName" :labelPosition="formLabelPosition" :labelWidth="formLabelWidth" @submit.native.prevent>
             <FormItem :label="$L('帐号')" prop="email">
                 <Input v-if="isRegVerify == 1" v-model="formDatum.email"
                        :class="count > 0 ? 'setting-send-input':'setting-input'" search @on-search="sendEmailCode"
@@ -116,7 +116,7 @@ export default {
     },
 
     computed: {
-        ...mapState(['userInfo', 'formLabelPosition', 'formLabelWidth']),
+        ...mapState(['userInfo', 'formLabelPosition', 'formLabelWidth', 'formLabelClassName']),
 
         appTitle() {
             return window.systemInfo.title || "DooTask";

resources/assets/js/pages/manage/setting/email.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="setting-item submit">
         <Loading v-if="configLoad > 0"/>
-        <Form v-else ref="formDatum" :model="formDatum" :rules="ruleDatum" :labelPosition="formLabelPosition" :labelWidth="formLabelWidth" @submit.native.prevent>
+        <Form v-else ref="formDatum" :model="formDatum" :rules="ruleDatum" :class="formLabelClassName" :labelPosition="formLabelPosition" :labelWidth="formLabelWidth" @submit.native.prevent>
             <Alert v-if="isLdap" type="warning">{{$L('LDAP 用户禁止修改邮箱地址')}}</Alert>
             <FormItem :label="$L('新邮箱地址')" prop="newEmail">
                 <Input v-if="isRegVerify == 1" v-model="formDatum.newEmail"
@@ -66,7 +66,7 @@ export default {
     },
 
     computed: {
-        ...mapState(['formLabelPosition', 'formLabelWidth']),
+        ...mapState(['formLabelPosition', 'formLabelWidth', 'formLabelClassName']),
 
         isLdap() {
             return this.$store.state.userInfo.identity.includes("ldap")

resources/assets/js/pages/manage/setting/language.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="setting-item submit">
-        <Form ref="formData" :model="formData" :rules="ruleData" :labelPosition="formLabelPosition" :labelWidth="formLabelWidth" @submit.native.prevent>
+        <Form ref="formData" :model="formData" :rules="ruleData" :class="formLabelClassName" :labelPosition="formLabelPosition" :labelWidth="formLabelWidth" @submit.native.prevent>
             <FormItem :label="$L('选择语言')" prop="language">
                 <Select v-model="formData.language" :placeholder="$L('选项语言')">
                     <Option v-for="(item, index) in languageList" :value="index" :key="index">{{ item }}</Option>
@@ -38,7 +38,7 @@ export default {
     },
 
     computed: {
-        ...mapState(['formLabelPosition', 'formLabelWidth']),
+        ...mapState(['formLabelPosition', 'formLabelWidth', 'formLabelClassName']),
     },
 
     methods: {

resources/assets/js/pages/manage/setting/license.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="setting-item submit">
-        <Form ref="formData" :model="formData" :labelPosition="formLabelPosition" :labelWidth="formLabelWidth" @submit.native.prevent>
+        <Form ref="formData" :model="formData" :class="formLabelClassName" :labelPosition="formLabelPosition" :labelWidth="formLabelWidth" @submit.native.prevent>
             <FormItem label="License" prop="license">
                 <Input v-model="formData.license" type="textarea" :autosize="{minRows: 2,maxRows: 5}" :placeholder="$L('请输入License...')" />
             </FormItem>
@@ -136,7 +136,7 @@ export default {
         this.systemSetting();
     },
     computed: {
-        ...mapState(['userInfo', 'formLabelPosition', 'formLabelWidth']),
+        ...mapState(['userInfo', 'formLabelPosition', 'formLabelWidth', 'formLabelClassName']),
     },
     methods: {
         submitForm() {

resources/assets/js/pages/manage/setting/password.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="setting-item submit">
-        <Form ref="formDatum" :model="formDatum" :rules="ruleDatum" :labelPosition="formLabelPosition" :labelWidth="formLabelWidth" @submit.native.prevent>
+        <Form ref="formDatum" :model="formDatum" :rules="ruleDatum" :class="formLabelClassName" :labelPosition="formLabelPosition" :labelWidth="formLabelWidth" @submit.native.prevent>
             <Alert v-if="userInfo.changepass" type="warning" showIcon style="margin-bottom:32px">{{$L('请先修改登录密码！')}}</Alert>
             <FormItem :label="$L('旧密码')" prop="oldpass">
                 <Input v-model="formDatum.oldpass" type="password"></Input>
@@ -74,7 +74,7 @@ export default {
         }
     },
     computed: {
-        ...mapState(['userInfo', 'formLabelPosition', 'formLabelWidth']),
+        ...mapState(['userInfo', 'formLabelPosition', 'formLabelWidth', 'formLabelClassName']),
     },
     methods: {
         submitForm() {

resources/assets/js/pages/manage/setting/personal.vue

@@ -1,6 +1,13 @@
 <template>
     <div class="setting-item submit">
-        <Form ref="formData" :model="formData" :rules="ruleData" :labelPosition="formLabelPosition" :labelWidth="formLabelWidth" @submit.native.prevent>
+        <Form
+            ref="formData"
+            :model="formData"
+            :rules="ruleData"
+            :class="formLabelClassName"
+            :labelPosition="formLabelPosition"
+            :labelWidth="formLabelWidth"
+            @submit.native.prevent>
             <FormItem :label="$L('头像')" prop="userimg">
                 <ImgUpload v-model="formData.userimg" :num="1" :width="512" :height="512" :whcut="1"></ImgUpload>
                 <span class="form-tip">{{$L('建议尺寸：200x200')}}</span>
@@ -61,7 +68,7 @@ export default {
         this.initData();
     },
     computed: {
-        ...mapState(['userInfo', 'formLabelPosition', 'formLabelWidth']),
+        ...mapState(['userInfo', 'formLabelPosition', 'formLabelWidth', 'formLabelClassName']),
     },
     watch: {
         userInfo() {

resources/assets/js/pages/manage/setting/theme.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="setting-item submit">
-        <Form ref="formData" :model="formData" :rules="ruleData" :labelPosition="formLabelPosition" :labelWidth="formLabelWidth" @submit.native.prevent>
+        <Form ref="formData" :model="formData" :rules="ruleData" :class="formLabelClassName" :labelPosition="formLabelPosition" :labelWidth="formLabelWidth" @submit.native.prevent>
             <FormItem :label="$L('选择主题')" prop="theme">
                 <Select v-model="formData.theme" :placeholder="$L('选项主题')">
                     <Option v-for="(item, index) in themeList" :value="item.value" :key="index">{{$L(item.name)}}</Option>
@@ -39,7 +39,8 @@ export default {
             'themeConf',
             'themeList',
             'formLabelPosition',
-            'formLabelWidth'
+            'formLabelWidth',
+            'formLabelClassName'
         ])
     },
 

resources/assets/js/store/state.js

@@ -28,6 +28,7 @@ export default {
     windowPortrait: windowOrientation === 'portrait',   // 竖屏
 
     // 表单布局
+    formLabelClassName: windowWidth > 576 ? '' : 'form-label-weight-bold',
     formLabelPosition: windowWidth > 576 ? 'right' : 'top',
     formLabelWidth: windowWidth > 576 ? 'auto' : '',
 

resources/assets/sass/components/report.scss

@@ -190,7 +190,8 @@
 
     .report-users {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
+        line-height: 34px;
 
         .common-user-select {
             margin-right: 12px;

resources/assets/sass/components/right-bottom.scss

@@ -47,7 +47,7 @@
         max-height: 210px;
         margin-bottom: 16px;
         .vuepress-markdown-body {
-            padding: 4px;
+            padding: 0 !important;
             font-size: 14px;
         }
     }

resources/assets/sass/dark.scss

@@ -215,7 +215,8 @@ body.dark-mode-reverse {
                         .dialog-content {
                             .content-text,
                             .content-record,
-                            .content-meeting {
+                            .content-meeting,
+                            .content-template {
                                 color: #ffffff !important;
                             }
 

resources/assets/sass/pages/common.scss

@@ -805,7 +805,7 @@ body.window-portrait {
         position: sticky;
         top: 0;
         left: 24px;
-        z-index: 2;
+        z-index: 9;
         line-height: 32px;
         box-sizing: content-box;
         padding: 0 10px;
@@ -839,6 +839,11 @@ body.window-portrait {
 .block-setting-space {
     height: 8px;
 }
+.form-label-weight-bold {
+    .ivu-form-item-label {
+        font-weight: bold;
+    }
+}
 .confirm-popover {
     max-width: 200px;
     .buttons {

resources/assets/sass/pages/components/dialog-wrapper.scss

@@ -1175,10 +1175,13 @@
                         }
 
                         .content-template {
-                            color: #ffffff;
+                            color: $primary-title-color;
+                            max-width: 100%;
+
                             .warning-color {
                                 color: $flow-status-start-color;
                             }
+
                             .mark-color {
                                 color: $primary-color;
                             }
@@ -1720,6 +1723,14 @@
                                 }
                             }
 
+                            .content-template {
+                                color: #ffffff;
+
+                                .mark-color {
+                                    color: $primary-title-color;
+                                }
+                            }
+
                             .content-loading {
                                 > i {
                                     color: #ffffff;

resources/assets/sass/pages/components/task-add.scss

@@ -200,6 +200,9 @@
         .task-add-visibility {
             cursor: pointer;
             color: rgba($primary-desc-color, 0.7);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
         }
     }
     .task-add-advanced {

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

@@ -69,52 +69,76 @@
             .messenger-nav {
                 display: flex;
                 align-items: center;
-                padding: 2px 10px 12px;
+                padding: 0 10px 10px;
-                > div {
+                .nav-menu {
-                    flex: 1;
-                    flex-shrink: 0;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     line-height: 1;
-                    padding: 0 6px;
                     color: #888888;
                     cursor: pointer;
-                    &.nav-menu {
+                    width: 28px;
-                        max-width: 46px;
+                    .nav-icon {
-                        .nav-icon {
+                        width: 100%;
-                            width: 100%;
+                        height: 100%;
-                            height: 100%;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        > i {
+                            font-size: 16px;
+                        }
+                    }
+                }
+                .nav-list {
+                    flex: 1;
+                    flex-shrink: 0;
+                    display: flex;
+                    align-items: center;
+                    flex-wrap: nowrap;
+                    overflow-y: hidden;
+                    overflow-x: auto;
+                    margin-top: -12px;
+                    padding-top: 12px;
+                    &::-webkit-scrollbar {
+                        display: none;
+                    }
+                    .nav-item {
+                        flex: 1;
+                        flex-shrink: 0;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        line-height: 1;
+                        padding: 2px 12px;
+                        color: #888888;
+                        cursor: pointer;
+                        .nav-title {
+                            position: relative;
+                            max-width: 100%;
                             display: flex;
                             align-items: center;
                             justify-content: center;
-                            > i {
+                            > em {
-                                font-size: 16px;
+                                font-style: normal;
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                                white-space: nowrap;
+                            }
+                            .nav-num {
+                                position: absolute;
+                                top: -12px;
+                                right: -8px;
+                                transform: scale(0.7);
                             }
                         }
-                    }
+                        &.active {
-                    .nav-title {
+                            color: #555555;
-                        position: relative;
+                            font-weight: 500;
-                        > em {
-                            font-style: normal;
-                            overflow: hidden;
-                            text-overflow: ellipsis;
-                            white-space: nowrap;
                         }
-                        .nav-num {
+                        &:hover {
-                            position: absolute;
+                            color: #777777;
-                            top: -12px;
-                            right: -8px;
-                            transform: scale(0.7);
                         }
                     }
-                    &.active {
-                        color: #555555;
-                        font-weight: 500;
-                    }
-                    &:hover {
-                        color: #777777;
-                    }
                 }
             }
             .messenger-notify-permission {
@@ -579,7 +603,7 @@
 }
 
 .messenger-nav-menu {
-    .messenger-nav-item {
+    .nav-item {
         display: flex;
         align-items: center;
         min-width: 80px;
@@ -666,6 +690,14 @@ body.window-portrait {
                 }
                 .messenger-nav {
                     background-color: #f8f8f8;
+                    .nav-menu {
+                        width: 46px;
+                    }
+                    .nav-list {
+                        .nav-item {
+                            min-width: 25%;
+                        }
+                    }
                 }
                 .messenger-menu {
                     border-top: 0;
@@ -726,7 +758,7 @@ body.window-portrait {
         }
     }
     .messenger-nav-menu {
-        .messenger-nav-item {
+        .nav-item {
             min-width: 100px;
         }
     }