From c5c9e19f7647c91f694e9b7b8e32b03ff13131a2 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Mon, 6 Jun 2022 14:03:50 +0800
Subject: [PATCH] no message

---
 .../pages/manage/components/DialogModal.vue   |  29 +-
 .../pages/manage/components/DialogWrapper.vue | 114 ++---
 .../pages/manage/components/ProjectDialog.vue |   4 +-
 .../pages/manage/components/ProjectPanel.vue  |   7 +-
 .../js/pages/manage/components/TaskDetail.vue |   4 +
 resources/assets/sass/dark.scss               |  26 +-
 .../sass/pages/components/dialog-wrapper.scss | 419 +++++++++---------
 .../sass/pages/components/project-dialog.scss |  18 +-
 resources/assets/sass/pages/page-project.scss |  12 -
 9 files changed, 328 insertions(+), 305 deletions(-)

diff --git a/resources/assets/js/pages/manage/components/DialogModal.vue b/resources/assets/js/pages/manage/components/DialogModal.vue
index a757a7ed6..e117b17ac 100644
--- a/resources/assets/js/pages/manage/components/DialogModal.vue
+++ b/resources/assets/js/pages/manage/components/DialogModal.vue
@@ -1,14 +1,16 @@
 <template>
     <Modal
-        :value="show"
+        :value="visible"
         :mask="false"
         :mask-closable="false"
         :footer-hide="true"
-        :transition-names="['mobile-dialog', '']"
+        :transition-names="['', '']"
         :beforeClose="onBeforeClose"
         class-name="dialog-modal"
         fullscreen>
-        <DialogWrapper v-if="windowSmall && dialogId > 0" :dialogId="dialogId" :beforeBack="onBeforeClose"/>
+        <transition name="mobile-dialog">
+            <DialogWrapper v-if="windowSmall && dialogId > 0" :dialogId="dialogId" :beforeBack="onBeforeClose"/>
+        </transition>
     </Modal>
 </template>
 
@@ -23,6 +25,7 @@ body {
                 padding: 0;
 
                 .ivu-modal-content {
+                    background: transparent;
 
                     .ivu-modal-close {
                         display: none;
@@ -49,6 +52,13 @@ export default {
     name: "DialogModal",
     components: {DialogWrapper},
 
+    data() {
+        return {
+            timer: null,
+            visible: false,
+        }
+    },
+
     computed: {
         ...mapState(['dialogId']),
 
@@ -57,6 +67,19 @@ export default {
         }
     },
 
+    watch: {
+        show(v) {
+            this.timer && clearTimeout(this.timer);
+            if (v) {
+                this.visible = true;
+            } else {
+                this.timer = setTimeout(_ => {
+                    this.visible = false;
+                }, 300);
+            }
+        }
+    },
+
     methods: {
         onBeforeClose() {
             return new Promise(_ => {
diff --git a/resources/assets/js/pages/manage/components/DialogWrapper.vue b/resources/assets/js/pages/manage/components/DialogWrapper.vue
index 118826e17..9ffee1dbb 100644
--- a/resources/assets/js/pages/manage/components/DialogWrapper.vue
+++ b/resources/assets/js/pages/manage/components/DialogWrapper.vue
@@ -3,69 +3,70 @@
         v-if="isReady"
         class="dialog-wrapper"
         :class="wrapperClass"
-        :style="wrapperStyle"
         @drop.prevent="chatPasteDrag($event, 'drag')"
         @dragover.prevent="chatDragOver(true, $event)"
         @dragleave.prevent="chatDragOver(false, $event)"
         @touchmove="onTouchmove">
         <!--顶部导航-->
-        <slot name="head">
-            <div class="dialog-nav" :class="{completed:$A.dialogCompleted(dialogData)}">
-                <div class="dialog-back" @click="onBack">
-                    <i class="taskfont">&#xe72d;</i>
-                    <div v-if="msgUnreadOnly" class="back-num">{{msgUnreadOnly}}</div>
-                </div>
-
-                <div class="dialog-block">
-                    <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">&#xe6f4;</i>
-                            <Icon v-else class="icon-avatar" type="ios-people" />
-                        </template>
-                        <div v-else-if="dialogData.dialog_user" class="user-avatar">
-                            <UserAvatar :online.sync="dialogData.online_state" :userid="dialogData.dialog_user.userid" :size="42"/>
-                        </div>
-                        <Icon v-else class="icon-avatar" type="md-person" />
+        <div class="dialog-nav" :style="navStyle">
+            <slot name="head">
+                <div class="nav-wrapper" :class="{completed:$A.dialogCompleted(dialogData)}">
+                    <div class="dialog-back" @click="onBack">
+                        <i class="taskfont">&#xe72d;</i>
+                        <div v-if="msgUnreadOnly" class="back-num">{{msgUnreadOnly}}</div>
                     </div>
-                    <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>
+
+                    <div class="dialog-block">
+                        <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">&#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 :online.sync="dialogData.online_state" :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('查看任务详情')}}
+                            <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 v-else-if="dialogData.type === 'user'" :class="['sub-title', dialogData.online_state === true ? 'online' : 'offline']">
+                                {{$L(dialogData.online_state === true ? '在线' : dialogData.online_state)}}
                             </div>
-                        </template>
-                        <div v-else-if="dialogData.type === 'user'" :class="['sub-title', dialogData.online_state === true ? 'online' : 'offline']">
-                            {{$L(dialogData.online_state === true ? '在线' : dialogData.online_state)}}
                         </div>
                     </div>
-                </div>
 
-                <template v-if="dialogData.type === 'group'">
-                    <ETooltip
-                        v-if="dialogData.group_type === 'user'"
-                        placement="top"
-                        :disabled="windowSmall"
-                        :openDelay="600"
-                        :content="$L('群设置')">
-                        <i class="taskfont dialog-create" @click="groupInfoShow = true">&#xe6e9;</i>
+                    <template v-if="dialogData.type === 'group'">
+                        <ETooltip
+                            v-if="dialogData.group_type === 'user'"
+                            placement="top"
+                            :disabled="windowSmall"
+                            :openDelay="600"
+                            :content="$L('群设置')">
+                            <i class="taskfont dialog-create" @click="groupInfoShow = true">&#xe6e9;</i>
+                        </ETooltip>
+                    </template>
+                    <ETooltip v-else-if="dialogData.type === 'user' && !isMyDialog" placement="top" :disabled="windowSmall" :content="$L('创建群组')">
+                        <i class="taskfont dialog-create" @click="openCreateGroup">&#xe646;</i>
                     </ETooltip>
-                </template>
-                <ETooltip v-else-if="dialogData.type === 'user' && !isMyDialog" placement="top" :disabled="windowSmall" :content="$L('创建群组')">
-                    <i class="taskfont dialog-create" @click="openCreateGroup">&#xe646;</i>
-                </ETooltip>
-            </div>
-        </slot>
+                </div>
+            </slot>
+        </div>
 
         <!--消息列表-->
         <DynamicScroller
@@ -327,7 +328,7 @@ export default {
             dialogDrag: false,
             groupInfoShow: false,
 
-            wrapperStyle: {},
+            navStyle: {},
 
             operateVisible: false,
             operateHasText: false,
@@ -364,7 +365,8 @@ export default {
             'cacheDialogs',
             'dialogMsgs',
             'wsOpenNum',
-            'touchBackInProgress'
+            'touchBackInProgress',
+            'taskId',
         ]),
 
         isReady() {
@@ -510,8 +512,8 @@ export default {
         windowScrollY(val) {
             if ($A.isIos()) {
                 const {scrollE} = this.scrollInfo();
-                this.wrapperStyle = {
-                    top: val + 'px'
+                this.navStyle = {
+                    marginTop: val + 'px'
                 }
                 if (scrollE <= 10) {
                     this.$nextTick(_ => {
@@ -751,6 +753,9 @@ export default {
             if (!this.dialogData.group_info) {
                 return;
             }
+            if (this.windowSmall) {
+                this.$store.dispatch("openDialog", 0);
+            }
             this.goForward({name: 'manage-project', params: {projectId:this.dialogData.group_info.id}});
         },
 
@@ -758,6 +763,9 @@ export default {
             if (!this.dialogData.group_info) {
                 return;
             }
+            if (this.taskId > 0) {
+                this.$store.dispatch("openDialog", 0);
+            }
             this.$store.dispatch("openTask", this.dialogData.group_info.id);
         },
 
diff --git a/resources/assets/js/pages/manage/components/ProjectDialog.vue b/resources/assets/js/pages/manage/components/ProjectDialog.vue
index a94b53afa..6f52f21e0 100644
--- a/resources/assets/js/pages/manage/components/ProjectDialog.vue
+++ b/resources/assets/js/pages/manage/components/ProjectDialog.vue
@@ -1,5 +1,5 @@
 <template>
-    <DialogWrapper v-if="projectData.cacheParameter.chat" :dialog-id="projectData.dialog_id" class="project-dialog">
+    <DialogWrapper v-if="windowLarge && projectData.cacheParameter.chat" :dialog-id="projectData.dialog_id" class="project-dialog">
         <template slot="head">
             <div class="dialog-user">
                 <div class="member-head">
@@ -14,7 +14,7 @@
                     </li>
                 </ul>
             </div>
-            <div class="dialog-nav">
+            <div class="nav-wrapper">
                 <div class="dialog-title">
                     <h2>{{$L('群聊')}}</h2>
                 </div>
diff --git a/resources/assets/js/pages/manage/components/ProjectPanel.vue b/resources/assets/js/pages/manage/components/ProjectPanel.vue
index 40d95b2c8..23e4053d1 100644
--- a/resources/assets/js/pages/manage/components/ProjectPanel.vue
+++ b/resources/assets/js/pages/manage/components/ProjectPanel.vue
@@ -44,7 +44,7 @@
                         </div>
                     </Tooltip>
                 </li>
-                <li :class="['project-icon', projectData.cacheParameter.chat ? 'active' : '']" @click="toggleParameter('chat')">
+                <li :class="['project-icon', windowLarge && projectData.cacheParameter.chat ? 'active' : '']" @click="toggleParameter('chat')">
                     <Icon class="menu-icon" type="ios-chatbubbles" />
                     <Badge class="menu-badge" :count="msgUnread"></Badge>
                 </li>
@@ -1420,6 +1420,11 @@ export default {
         toggleParameter(data) {
             if (data === 'completedTask') {
                 this.$store.dispatch("forgetTaskCompleteTemp", true);
+            } else if (data === 'chat') {
+                if (this.windowSmall) {
+                    this.$store.dispatch('openDialog', this.projectData.dialog_id)
+                    return;
+                }
             }
             this.$store.dispatch('toggleProjectParameter', data);
         },
diff --git a/resources/assets/js/pages/manage/components/TaskDetail.vue b/resources/assets/js/pages/manage/components/TaskDetail.vue
index 83fc18a1e..576793ced 100644
--- a/resources/assets/js/pages/manage/components/TaskDetail.vue
+++ b/resources/assets/js/pages/manage/components/TaskDetail.vue
@@ -554,6 +554,7 @@ export default {
             'taskContents',
             'taskFiles',
             'taskPriority',
+            'dialogId',
         ]),
 
         projectName() {
@@ -1111,6 +1112,9 @@ export default {
                                 this.msgRecord = {};
                                 this.msgFile = [];
                                 this.msgText = "";
+                                if (this.dialogId > 0) {
+                                    this.$store.dispatch("openTask", 0);
+                                }
                                 this.$store.dispatch('openDialog', data.dialog_id)
                             } else {
                                 this.sendDialogMsg();
diff --git a/resources/assets/sass/dark.scss b/resources/assets/sass/dark.scss
index 47225aa3f..cd394a5b1 100644
--- a/resources/assets/sass/dark.scss
+++ b/resources/assets/sass/dark.scss
@@ -157,19 +157,21 @@ body.dark-mode-reverse {
 
     .dialog-wrapper {
         .dialog-nav {
-            .dialog-block {
-                .dialog-avatar {
-                    .icon-avatar {
-                        color: #1c1917;
-                    }
-                }
-                .dialog-title {
-                    .main-title {
-                        > h2 {
-                            color: #555;
+            .nav-wrapper {
+                .dialog-block {
+                    .dialog-avatar {
+                        .icon-avatar {
+                            color: #1c1917;
                         }
-                        .top-text {
-                            color: #000000;
+                    }
+                    .dialog-title {
+                        .main-title {
+                            > h2 {
+                                color: #555;
+                            }
+                            .top-text {
+                                color: #000000;
+                            }
                         }
                     }
                 }
diff --git a/resources/assets/sass/pages/components/dialog-wrapper.scss b/resources/assets/sass/pages/components/dialog-wrapper.scss
index 1a17cf97b..680d0ed59 100644
--- a/resources/assets/sass/pages/components/dialog-wrapper.scss
+++ b/resources/assets/sass/pages/components/dialog-wrapper.scss
@@ -18,176 +18,180 @@
     }
 
     .dialog-nav {
-        display: flex;
-        align-items: center;
-        padding: 0 22px;
-        height: 68px;
-        position: relative;
+        width: 100%;
 
-        &:before {
-            content: "";
-            position: absolute;
-            left: 0;
-            bottom: 0;
-            width: 100%;
-            height: 1px;
-            background-color: #f4f5f5;
-        }
-
-        &.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;
-            }
-
-            .dialog-title {
-                padding-right: 52px;
-            }
-        }
-
-        .dialog-block {
-            flex: 1;
-            width: 0;
+        .nav-wrapper {
             display: flex;
             align-items: center;
+            padding: 0 22px;
+            height: 68px;
+            position: relative;
 
-            .dialog-avatar {
-                flex-shrink: 0;
-                margin-right: 12px;
+            &:before {
+                content: "";
+                position: absolute;
+                left: 0;
+                bottom: 0;
+                width: 100%;
+                height: 1px;
+                background-color: #f4f5f5;
+            }
 
-                .user-avatar,
-                .icon-avatar {
-                    width: 42px;
-                    height: 42px;
-                    margin: 2px;
-                    flex-grow: 0;
-                    flex-shrink: 0;
+            &.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;
                 }
 
-                .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;
-                    }
+                .dialog-title {
+                    padding-right: 52px;
                 }
             }
 
-            .dialog-title {
+            .dialog-block {
                 flex: 1;
                 width: 0;
                 display: flex;
-                flex-direction: column;
-                justify-content: center;
+                align-items: center;
 
-                .main-title {
-                    display: flex;
-                    align-items: center;
-                    line-height: 22px;
-                    max-width: 100%;
+                .dialog-avatar {
+                    flex-shrink: 0;
+                    margin-right: 12px;
 
-                    .ivu-tag {
+                    .user-avatar,
+                    .icon-avatar {
+                        width: 42px;
+                        height: 42px;
+                        margin: 2px;
+                        flex-grow: 0;
                         flex-shrink: 0;
-                        margin: 0 6px 0 0;
-                        padding: 0 5px;
+                    }
 
-                        &.ivu-tag-success {
+                    .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;
+                        }
+                    }
+                }
+
+                .dialog-title {
+                    flex: 1;
+                    width: 0;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+
+                    .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;
+                            height: 24px;
+                            line-height: 24px;
                             padding: 0 6px;
+                            border-radius: 4px;
+                            margin-left: 10px;
+                            background-color: $primary-color;
+                            color: #FFFFFF;
+                            text-align: center;
+                            white-space: nowrap;
                         }
                     }
 
-                    .ivu-icon {
-                        font-size: 18px;
-                        margin-right: 6px;
+                    .sub-title {
+                        flex-shrink: 0;
+                        font-size: 12px;
+                        line-height: 20px;
+                        padding-top: 2px;
+                        color: #aaaaaa;
+                        white-space: normal;
 
-                        &.completed {
+                        &.pointer {
+                            cursor: pointer;
+
+                            &:hover {
+                                color: #888888;
+                            }
+                        }
+
+                        &.online {
                             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;
-                        height: 24px;
-                        line-height: 24px;
-                        padding: 0 6px;
-                        border-radius: 4px;
-                        margin-left: 10px;
-                        background-color: $primary-color;
-                        color: #FFFFFF;
-                        text-align: center;
-                        white-space: nowrap;
-                    }
-                }
-
-                .sub-title {
-                    flex-shrink: 0;
-                    font-size: 12px;
-                    line-height: 20px;
-                    padding-top: 2px;
-                    color: #aaaaaa;
-                    white-space: normal;
-
-                    &.pointer {
-                        cursor: pointer;
-
-                        &:hover {
-                            color: #888888;
-                        }
-                    }
-
-                    &.online {
-                        color: $primary-color;
-                    }
                 }
             }
-        }
 
-        .dialog-back,
-        .dialog-create {
-            cursor: pointer;
-            margin-left: 24px;
-            font-size: 22px;
-            color: $primary-text-color;
-        }
+            .dialog-back,
+            .dialog-create {
+                cursor: pointer;
+                margin-left: 24px;
+                font-size: 22px;
+                color: $primary-text-color;
+            }
 
-        .dialog-back {
-            display: none;
+            .dialog-back {
+                display: none;
+            }
         }
     }
 
@@ -1038,74 +1042,76 @@
 
 @media (max-width: 768px) {
     .dialog-wrapper {
+        background-color: #f8f8f8;
         .dialog-nav {
-            height: 52px;
-            padding: 0;
-            justify-content: center;
-            background-color: #f8f8f8;
-
-            &.completed {
-                &:after {
-                    right: 14px;
-                }
-                .dialog-title {
-                    padding-right: 0;
-                }
-            }
-
-            .dialog-back,
-            .dialog-create {
-                position: absolute;
-                top: 0;
-                bottom: 0;
-                right: 0;
-                margin: 0;
-                width: 52px;
-                display: flex;
-                align-items: center;
+            .nav-wrapper {
+                height: 52px;
+                padding: 0;
                 justify-content: center;
-            }
-            .dialog-back {
-                padding-right: 6px;
-                right: auto;
-                left: 0;
-                > i {
-                    font-size: 26px;
-                }
-                .back-num {
-                    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
-                    position: absolute;
-                    top: 50%;
-                    left: 32px;
-                    background: #e6ebf1;
-                    color: $primary-title-color;
-                    transform: translate(0, -50%);
-                    font-weight: 500;
-                    font-size: 14px;
-                    border-radius: 12px;
-                    min-width: 24px;
-                    height: 24px;
-                    line-height: 24px;
-                    text-align: center;
-                    padding: 0 6px;
-                }
-            }
-            .dialog-block {
-                margin: 0 80px;
-                justify-content: center;
-                .dialog-avatar {
-                    display: none;
-                }
-                .dialog-title {
-                    flex: unset;
-                    width: unset;
-                    overflow: hidden;
-                    text-align: center;
-                    .main-title {
-                        justify-content: center;
+
+                &.completed {
+                    &:after {
+                        right: 14px;
                     }
-                    .sub-title {
-                        line-height: 18px;
+                    .dialog-title {
+                        padding-right: 0;
+                    }
+                }
+
+                .dialog-back,
+                .dialog-create {
+                    position: absolute;
+                    top: 0;
+                    bottom: 0;
+                    right: 0;
+                    margin: 0;
+                    width: 52px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+                .dialog-back {
+                    padding-right: 6px;
+                    right: auto;
+                    left: 0;
+                    > i {
+                        font-size: 26px;
+                    }
+                    .back-num {
+                        font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
+                        position: absolute;
+                        top: 50%;
+                        left: 32px;
+                        background: #e6ebf1;
+                        color: $primary-title-color;
+                        transform: translate(0, -50%);
+                        font-weight: 500;
+                        font-size: 14px;
+                        border-radius: 12px;
+                        min-width: 24px;
+                        height: 24px;
+                        line-height: 24px;
+                        text-align: center;
+                        padding: 0 6px;
+                    }
+                }
+                .dialog-block {
+                    margin: 0 80px;
+                    justify-content: center;
+                    .dialog-avatar {
+                        display: none;
+                    }
+                    .dialog-title {
+                        flex: unset;
+                        width: unset;
+                        overflow: hidden;
+                        text-align: center;
+                        .main-title {
+                            justify-content: center;
+                        }
+                        .sub-title {
+                            line-height: 18px;
+                        }
                     }
                 }
             }
@@ -1115,6 +1121,7 @@
             padding-left: 14px;
             overscroll-behavior: none;
             user-select: none;
+            background-color: #ffffff;
 
             .dialog-item {
                 .dialog-view {
diff --git a/resources/assets/sass/pages/components/project-dialog.scss b/resources/assets/sass/pages/components/project-dialog.scss
index c07a62bf0..988196146 100644
--- a/resources/assets/sass/pages/components/project-dialog.scss
+++ b/resources/assets/sass/pages/components/project-dialog.scss
@@ -64,22 +64,8 @@
         }
     }
     .dialog-nav {
-        padding: 0 20px;
-    }
-}
-
-@media (max-width: 768px) {
-    .project-dialog {
-        .dialog-user {
-            margin-top: 16px;
-            padding: 0 12px;
-            .member-list {
-                display: none;
-            }
-        }
-        .dialog-nav {
-            padding: 0 12px;
-            height: 64px;
+        .nav-wrapper {
+            padding: 0 20px;
         }
     }
 }
diff --git a/resources/assets/sass/pages/page-project.scss b/resources/assets/sass/pages/page-project.scss
index 28c1632d6..ddaa788da 100644
--- a/resources/assets/sass/pages/page-project.scss
+++ b/resources/assets/sass/pages/page-project.scss
@@ -18,18 +18,6 @@
     }
 }
 
-@media (max-width: 768px) {
-    .page-project {
-        .project-dialog {
-            position: fixed;
-            top: 0;
-            left: 0;
-            height: 100%;
-            width: 100%;
-            max-width: none;
-        }
-    }
-}
 @media (max-height: 700px) {
     .page-project {
         .project-panel {