From 8eca06fd5f3b276df2f923e406ab2cba06671f6a Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Thu, 31 Mar 2022 22:26:47 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E8=81=8A=E5=A4=A9?=
 =?UTF-8?q?=E7=AA=97=E5=8F=A3=E6=98=BE=E7=A4=BA=E5=A4=B4=E5=83=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/manage/components/DialogWrapper.vue |  39 ++--
 .../pages/manage/components/ProjectDialog.vue |   6 +-
 .../sass/pages/components/dialog-wrapper.scss | 201 ++++++++++--------
 .../sass/pages/components/project-dialog.scss |   4 +-
 .../assets/sass/pages/page-messenger.scss     |  10 +-
 5 files changed, 156 insertions(+), 104 deletions(-)

diff --git a/resources/assets/js/pages/manage/components/DialogWrapper.vue b/resources/assets/js/pages/manage/components/DialogWrapper.vue
index ff4a439b3..16cbf5581 100644
--- a/resources/assets/js/pages/manage/components/DialogWrapper.vue
+++ b/resources/assets/js/pages/manage/components/DialogWrapper.vue
@@ -6,23 +6,34 @@
         @dragover.prevent="chatDragOver(true, $event)"
         @dragleave.prevent="chatDragOver(false, $event)">
         <slot name="head">
-            <div class="dialog-title" :class="{completed:$A.dialogCompleted(dialogData)}">
-                <div class="main-title">
-                    <template v-for="tag in $A.dialogTags(dialogData)" v-if="tag.color != 'success'">
-                        <Tag :color="tag.color" :fade="false">{{$L(tag.text)}}</Tag>
+            <div class="dialog-nav">
+                <div class="dialog-avatar">
+                    <template v-if="dialogData.type=='group'">
+                        <i v-if="dialogData.group_type=='project'" class="taskfont icon-avatar project">&#xe6f9;</i>
+                        <i v-else-if="dialogData.group_type=='task'" class="taskfont icon-avatar task" :class="{completed:$A.dialogCompleted(dialogData)}">&#xe6f4;</i>
+                        <Icon v-else class="icon-avatar" type="ios-people" />
                     </template>
-                    <h2>{{dialogData.name}}</h2>
-                    <em v-if="peopleNum > 0">({{peopleNum}})</em>
-                    <label v-if="dialogData.top_at" class="top-text">{{$L('置顶')}}</label>
+                    <div v-else-if="dialogData.dialog_user" class="user-avatar"><UserAvatar :userid="dialogData.dialog_user.userid" :size="42"/></div>
+                    <Icon v-else class="icon-avatar" type="md-person" />
                 </div>
-                <template v-if="dialogData.type === 'group'">
-                    <div v-if="dialogData.group_type === 'project'" class="sub-title pointer" @click="openProject">
-                        {{$L('项目聊天室')}} {{$L('打开项目管理')}}
+                <div class="dialog-title">
+                    <div class="main-title">
+                        <template v-for="tag in $A.dialogTags(dialogData)" v-if="tag.color != 'success'">
+                            <Tag :color="tag.color" :fade="false">{{$L(tag.text)}}</Tag>
+                        </template>
+                        <h2>{{dialogData.name}}</h2>
+                        <em v-if="peopleNum > 0">({{peopleNum}})</em>
+                        <label v-if="dialogData.top_at" class="top-text">{{$L('置顶')}}</label>
                     </div>
-                    <div v-else-if="dialogData.group_type === 'task'" class="sub-title pointer" @click="openTask">
-                        {{$L('任务聊天室')}} {{$L('查看任务详情')}}
-                    </div>
-                </template>
+                    <template v-if="dialogData.type === 'group'">
+                        <div v-if="dialogData.group_type === 'project'" class="sub-title pointer" @click="openProject">
+                            {{$L('项目聊天室')}} {{$L('打开项目管理')}}
+                        </div>
+                        <div v-else-if="dialogData.group_type === 'task'" class="sub-title pointer" @click="openTask">
+                            {{$L('任务聊天室')}} {{$L('查看任务详情')}}
+                        </div>
+                    </template>
+                </div>
             </div>
         </slot>
         <ScrollerY
diff --git a/resources/assets/js/pages/manage/components/ProjectDialog.vue b/resources/assets/js/pages/manage/components/ProjectDialog.vue
index edd8448e7..5aa2cf476 100644
--- a/resources/assets/js/pages/manage/components/ProjectDialog.vue
+++ b/resources/assets/js/pages/manage/components/ProjectDialog.vue
@@ -15,8 +15,10 @@
                         </li>
                     </ul>
                 </div>
-                <div class="dialog-title">
-                    <h2>{{$L('群聊')}}</h2>
+                <div class="dialog-nav">
+                    <div class="dialog-title">
+                        <h2>{{$L('群聊')}}</h2>
+                    </div>
                 </div>
             </div>
             <div slot="inputBefore" class="dialog-back" @click="onInputBack">
diff --git a/resources/assets/sass/pages/components/dialog-wrapper.scss b/resources/assets/sass/pages/components/dialog-wrapper.scss
index aacf7659b..1deb85ae4 100644
--- a/resources/assets/sass/pages/components/dialog-wrapper.scss
+++ b/resources/assets/sass/pages/components/dialog-wrapper.scss
@@ -9,11 +9,10 @@
     background-color: #ffffff;
     z-index: 1;
 
-    .dialog-title {
+    .dialog-nav {
         display: flex;
-        flex-direction: column;
-        justify-content: center;
-        padding: 0 30px;
+        align-items: center;
+        padding: 0 22px;
         height: 68px;
         position: relative;
 
@@ -27,88 +26,124 @@
             background-color: #f4f5f5;
         }
 
-        &.completed {
-            &:after {
-                content: "\f373";
-                font-family: Ionicons, serif;
-                pointer-events: none;
-                position: absolute;
-                top: 50%;
-                right: 24px;
-                transform: translateY(-50%);
-                font-size: 52px;
-                color: #19be6b;
-                opacity: .2;
-                z-index: 1;
-            }
-        }
-
-        .main-title {
-            display: flex;
-            align-items: center;
-            line-height: 22px;
-            max-width: 100%;
-
-            .ivu-tag {
-                flex-shrink: 0;
-                margin: 0 6px 0 0;
-                padding: 0 5px;
-
-                &.ivu-tag-success {
-                    padding: 0 6px;
-                }
-            }
-
-            .ivu-icon {
-                font-size: 18px;
-                margin-right: 6px;
-
-                &.completed {
-                    color: $primary-color;
-                }
-            }
-
-            > h2 {
-                font-size: 17px;
-                font-weight: 600;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-
-            > em {
-                flex-shrink: 0;
-                font-style: normal;
-                font-size: 17px;
-                font-weight: 500;
-                padding-left: 6px;
-            }
-
-            .top-text {
-                flex-shrink: 0;
-                width: 40px;
-                height: 24px;
-                border-radius: 4px;
-                margin-left: 10px;
-                background-color: #8BCF70;
-                color: #FFFFFF;
-                text-align: center;
-                padding-top: 1px
-            }
-        }
-
-        .sub-title {
+        .dialog-avatar {
             flex-shrink: 0;
-            font-size: 12px;
-            line-height: 20px;
-            padding-top: 2px;
-            color: #aaaaaa;
+            margin-right: 12px;
+            .user-avatar,
+            .icon-avatar {
+                width: 42px;
+                height: 42px;
+                margin: 2px;
+                flex-grow: 0;
+                flex-shrink: 0;
+            }
+            .icon-avatar {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border-radius: 50%;
+                font-size: 26px;
+                background-color: #61B2F9;
+                color: #ffffff;
+                &.project {
+                    background-color: #6E99EB;
+                }
+                &.task {
+                    background-color: #9B96DF;
+                    font-size: 24px;
+                }
+                &.completed {
+                    &:after {
+                        content: "\f373";
+                        font-family: Ionicons, serif;
+                        pointer-events: none;
+                        position: absolute;
+                        top: 50%;
+                        right: 22px;
+                        transform: translateY(-50%);
+                        font-size: 40px;
+                        color: #19be6b;
+                        opacity: .2;
+                        z-index: 1;
+                    }
+                }
+            }
+        }
 
-            &.pointer {
-                cursor: pointer;
+        .dialog-title {
+            flex: 1;
+            width: 0;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
 
-                &:hover {
-                    color: #888888;
+            .main-title {
+                display: flex;
+                align-items: center;
+                line-height: 22px;
+                max-width: 100%;
+
+                .ivu-tag {
+                    flex-shrink: 0;
+                    margin: 0 6px 0 0;
+                    padding: 0 5px;
+
+                    &.ivu-tag-success {
+                        padding: 0 6px;
+                    }
+                }
+
+                .ivu-icon {
+                    font-size: 18px;
+                    margin-right: 6px;
+
+                    &.completed {
+                        color: $primary-color;
+                    }
+                }
+
+                > h2 {
+                    font-size: 17px;
+                    font-weight: 600;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+
+                > em {
+                    flex-shrink: 0;
+                    font-style: normal;
+                    font-size: 17px;
+                    font-weight: 500;
+                    padding-left: 6px;
+                }
+
+                .top-text {
+                    flex-shrink: 0;
+                    width: 40px;
+                    height: 24px;
+                    border-radius: 4px;
+                    margin-left: 10px;
+                    background-color: #8BCF70;
+                    color: #FFFFFF;
+                    text-align: center;
+                    padding-top: 1px
+                }
+            }
+
+            .sub-title {
+                flex-shrink: 0;
+                font-size: 12px;
+                line-height: 20px;
+                padding-top: 2px;
+                color: #aaaaaa;
+
+                &.pointer {
+                    cursor: pointer;
+
+                    &:hover {
+                        color: #888888;
+                    }
                 }
             }
         }
diff --git a/resources/assets/sass/pages/components/project-dialog.scss b/resources/assets/sass/pages/components/project-dialog.scss
index d89d4ada8..edb0e90fa 100644
--- a/resources/assets/sass/pages/components/project-dialog.scss
+++ b/resources/assets/sass/pages/components/project-dialog.scss
@@ -64,7 +64,7 @@
                 }
             }
         }
-        .dialog-title {
+        .dialog-nav {
             padding: 0 20px;
         }
         .dialog-footer {
@@ -82,7 +82,7 @@
                 margin-top: 16px;
                 padding: 0 12px;
             }
-            .dialog-title {
+            .dialog-nav {
                 padding: 0 12px;
                 height: 58px;
             }
diff --git a/resources/assets/sass/pages/page-messenger.scss b/resources/assets/sass/pages/page-messenger.scss
index cb72de863..81aa4a050 100644
--- a/resources/assets/sass/pages/page-messenger.scss
+++ b/resources/assets/sass/pages/page-messenger.scss
@@ -121,7 +121,7 @@
                                         position: absolute;
                                         bottom: 0;
                                         right: 12px;
-                                        font-size: 32px;
+                                        font-size: 28px;
                                         color: #19be6b;
                                         opacity: .2;
                                         z-index: 1;
@@ -376,9 +376,13 @@
             }
             .messenger-msg {
                 .dialog-wrapper {
-                    .dialog-title {
+                    .dialog-nav {
                         height: 54px;
-                        align-items: center;
+                        justify-content: center;
+                        .dialog-title {
+                            flex: 0;
+                            width: auto;
+                        }
                     }
                     .dialog-footer {
                         position: relative;