From 572415d08944361459970e6aff9374776a4bcb4d Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Sat, 16 Apr 2022 12:46:38 +0800
Subject: [PATCH] no message

---
 .../js/pages/manage/components/ChatInput.vue  |  17 +-
 .../pages/manage/components/DialogWrapper.vue |  25 +-
 .../js/pages/manage/components/TaskDetail.vue |  15 +-
 .../assets/js/pages/manage/messenger.vue      |   2 +-
 .../sass/pages/components/chat-input.scss     | 306 ++++++++++--------
 .../sass/pages/components/dialog-wrapper.scss |  21 +-
 .../sass/pages/components/project-dialog.scss |  35 +-
 .../sass/pages/components/task-detail.scss    |  39 +--
 .../assets/sass/pages/page-messenger.scss     |  35 +-
 9 files changed, 245 insertions(+), 250 deletions(-)

diff --git a/resources/assets/js/pages/manage/components/ChatInput.vue b/resources/assets/js/pages/manage/components/ChatInput.vue
index 37ea121f9..df026b6a1 100755
--- a/resources/assets/js/pages/manage/components/ChatInput.vue
+++ b/resources/assets/js/pages/manage/components/ChatInput.vue
@@ -1,6 +1,11 @@
 <template>
     <div class="chat-input-wrapper" :class="modeClass">
         <div ref="editor"></div>
+        <div class="chat-input-toolbar">
+            <Loading v-if="loading"/>
+            <Icon v-else :class="[value ? '' : 'disabled']" type="md-send" @click="send"/>
+            <slot name="toolbarAfter"/>
+        </div>
     </div>
 </template>
 
@@ -33,6 +38,10 @@ export default {
             type: Boolean,
             default: false
         },
+        loading: {
+            type: Boolean,
+            default: false
+        },
         enterSend: {
             type: Boolean,
             default: true
@@ -118,7 +127,7 @@ export default {
                                 shortKey: true,
                                 handler: _ => {
                                     if (!this.enterSend) {
-                                        this.$emit('on-send', this.quill)
+                                        this.send();
                                         return false;
                                     }
                                     return true;
@@ -129,7 +138,7 @@ export default {
                                 shiftKey: false,
                                 handler: _ => {
                                     if (this.enterSend) {
-                                        this.$emit('on-send', this.quill)
+                                        this.send();
                                         return false;
                                     }
                                     return true;
@@ -230,6 +239,10 @@ export default {
             })
         },
 
+        send() {
+            this.$emit('on-send', this.quill)
+        },
+
         getSource(mentionChar) {
             return new Promise(resolve => {
                 switch (mentionChar) {
diff --git a/resources/assets/js/pages/manage/components/DialogWrapper.vue b/resources/assets/js/pages/manage/components/DialogWrapper.vue
index cc9298db4..f7e839d35 100644
--- a/resources/assets/js/pages/manage/components/DialogWrapper.vue
+++ b/resources/assets/js/pages/manage/components/DialogWrapper.vue
@@ -82,19 +82,18 @@
         </ScrollerY>
         <div :class="['dialog-footer', msgNew > 0 && dialogMsgList.length > 0 ? 'newmsg' : '']" @click="onActive">
             <div class="dialog-newmsg" @click="onToBottom">{{$L('有' + msgNew + '条新消息')}}</div>
-            <slot name="inputBefore"/>
-            <ChatInput
-                ref="input"
-                class="dialog-input"
-                :dialog-id="dialogId"
-                v-model="msgText"
-                :maxlength="20000"
-                @on-focus="onEventFocus"
-                @on-blur="onEventblur"
-                @on-send="sendMsg"
-                :placeholder="$L('输入消息...')"/>
-            <div v-if="msgText != ''" class="dialog-send" @click="sendMsg">
-                <Icon type="md-send" />
+            <div class="dialog-input">
+                <slot name="inputBefore"/>
+                <ChatInput
+                    ref="input"
+                    :dialog-id="dialogId"
+                    v-model="msgText"
+                    :maxlength="20000"
+                    @on-focus="onEventFocus"
+                    @on-blur="onEventblur"
+                    @on-send="sendMsg"
+                    :placeholder="$L('输入消息...')"/>
+                <slot name="inputAfter"/>
             </div>
             <DialogUpload
                 ref="chatUpload"
diff --git a/resources/assets/js/pages/manage/components/TaskDetail.vue b/resources/assets/js/pages/manage/components/TaskDetail.vue
index f9f21843c..b0960744f 100644
--- a/resources/assets/js/pages/manage/components/TaskDetail.vue
+++ b/resources/assets/js/pages/manage/components/TaskDetail.vue
@@ -399,20 +399,15 @@
                     <div class="no-tip">{{$L('暂无消息')}}</div>
                     <div class="no-input">
                         <ChatInput
-                            class="dialog-input"
                             :task-id="taskId"
                             v-model="msgText"
                             :disabled="sendLoad > 0"
+                            :loading="sendLoad > 0"
                             :maxlength="20000"
                             :placeholder="$L('输入消息...')"
-                            @on-send="msgDialog"/>
-                        <div class="no-send" @click="msgDialog">
-                            <Loading v-if="sendLoad > 0"/>
-                            <template v-else>
-                                <Badge :count="taskDetail.msg_num"/>
-                                <Icon type="md-send" />
-                            </template>
-                        </div>
+                            @on-send="msgDialog">
+                            <Badge slot="toolbarAfter" :count="taskDetail.msg_num"/>
+                        </ChatInput>
                     </div>
                     <div v-if="dialogDrag" class="drag-over" @click="dialogDrag=false">
                         <div class="drag-text">{{$L('拖动到这里发送')}}</div>
@@ -1090,7 +1085,7 @@ export default {
                                 };
                                 this.msgFile = [];
                                 this.msgText = "";
-                                this.goForward({name: 'manage-messenger', params: {dialogId: data.dialog_id}});
+                                this.goForward({name: 'manage-messenger', params: {dialogId: data.dialog_id}, query: {_: $A.randomString(6)}});
                                 this.$store.dispatch('openTask', 0);
                             } else {
                                 this.sendDialogMsg();
diff --git a/resources/assets/js/pages/manage/messenger.vue b/resources/assets/js/pages/manage/messenger.vue
index 0c8704145..43d51bb55 100644
--- a/resources/assets/js/pages/manage/messenger.vue
+++ b/resources/assets/js/pages/manage/messenger.vue
@@ -59,7 +59,7 @@
                                     <em v-if="dialog.last_at">{{$A.formatTime(dialog.last_at)}}</em>
                                 </div>
                                 <div class="dialog-text no-dark-mode">
-                                    <template v-if="dialog.type=='group'">
+                                    <template v-if="dialog.type=='group' && dialog.last_msg">
                                         <div v-if="dialog.last_msg.userid == userId" class="last-self">{{$L('您')}}</div>
                                         <UserAvatar v-else :userid="dialog.last_msg.userid" :show-name="true" :show-icon="false"/>
                                     </template>
diff --git a/resources/assets/sass/pages/components/chat-input.scss b/resources/assets/sass/pages/components/chat-input.scss
index ea0008afc..7fb5a870a 100755
--- a/resources/assets/sass/pages/components/chat-input.scss
+++ b/resources/assets/sass/pages/components/chat-input.scss
@@ -6,169 +6,199 @@
     width: 100%;
 
     &.task-mention {
+        .ql-container {
+            .ql-mention-list-container {
+                .ql-mention-list {
+                    > li {
+                        &:first-child {
+                            margin-top: 0;
+                        }
+                    }
+                }
+                .ql-mention-list-item {
+                    line-height: 36px;
+                    .mention-item-disabled {
+                        padding: 8px 4px 0;
+                    }
+                }
+            }
+        }
+    }
+
+    .ql-container {
+        display: block;
+        float: left;
+        max-width: 100%;
+        min-width: calc(100% - 28px);
+
+        .ql-editor {
+            padding: 4px 7px;
+            font-size: 14px;
+            max-height: 200px;
+
+            img {
+                max-width: 150px;
+                max-height: 150px;
+            }
+
+            &.ql-blank {
+                &::before {
+                    left: 7px;
+                    right: 7px;
+                    color: #ccc;
+                    font-style: normal;
+                }
+            }
+        }
+
         .ql-mention-list-container {
+            width: auto;
+            min-width: 220px;
+            max-width: 350px;
+            max-height: 360px;
+            overflow-y: overlay;
+
+            &::-webkit-scrollbar {
+                width: 10px;
+                height: 10px;
+            }
+
+            &::-webkit-scrollbar-thumb {
+                border-radius: 10px;
+                background: rgba(0, 0, 0, 0);
+            }
+
+            &::-webkit-scrollbar-thumb:active {
+                border-radius: 10px;
+                background: rgba(0, 0, 0, .5);
+            }
+
+            &:hover::-webkit-scrollbar-thumb {
+                border: 2px solid transparent;
+                background: rgba(0, 0, 0, .2);
+                background-clip: content-box;
+            }
+
+            &:hover::-webkit-scrollbar-thumb:hover {
+                border-top-width: 0;
+                border-bottom-width: 0;
+            }
+
+            &::-webkit-scrollbar-track {
+                border-radius: 10px;
+                background: rgba(0, 0, 0, 0);
+            }
+
             .ql-mention-list {
                 > li {
                     &:first-child {
-                        margin-top: 0;
+                        margin-top: 8px;
+                    }
+                    &:last-child {
+                        margin-bottom: 8px;
                     }
                 }
             }
+
             .ql-mention-list-item {
-                line-height: 36px;
-                .mention-item-disabled {
-                    padding: 8px 4px 0;
-                }
-            }
-        }
-    }
-
-    .ql-editor {
-        padding: 4px 7px;
-        font-size: 14px;
-        max-height: 200px;
-
-        img {
-            max-width: 150px;
-            max-height: 150px;
-        }
-
-        &.ql-blank {
-            &::before {
-                left: 7px;
-                right: 7px;
-                color: #ccc;
-                font-style: normal;
-            }
-        }
-    }
-
-    .ql-mention-list-container {
-        width: auto;
-        min-width: 220px;
-        max-width: 350px;
-        max-height: 360px;
-        overflow-y: overlay;
-
-        &::-webkit-scrollbar {
-            width: 10px;
-            height: 10px;
-        }
-
-        &::-webkit-scrollbar-thumb {
-            border-radius: 10px;
-            background: rgba(0, 0, 0, 0);
-        }
-
-        &::-webkit-scrollbar-thumb:active {
-            border-radius: 10px;
-            background: rgba(0, 0, 0, .5);
-        }
-
-        &:hover::-webkit-scrollbar-thumb {
-            border: 2px solid transparent;
-            background: rgba(0, 0, 0, .2);
-            background-clip: content-box;
-        }
-
-        &:hover::-webkit-scrollbar-thumb:hover {
-            border-top-width: 0;
-            border-bottom-width: 0;
-        }
-
-        &::-webkit-scrollbar-track {
-            border-radius: 10px;
-            background: rgba(0, 0, 0, 0);
-        }
-
-        .ql-mention-list {
-            > li {
-                &:first-child {
-                    margin-top: 8px;
-                }
-                &:last-child {
-                    margin-bottom: 8px;
-                }
-            }
-        }
-
-        .ql-mention-list-item {
-            padding: 0 8px;
-            display: flex;
-            align-items: center;
-            margin: 0 8px;
-
-            &.selected {
-                border-radius: 4px;
-            }
-
-            .mention-item-at {
-                width: 28px;
-                height: 28px;
-                line-height: 28px;
-                border-radius: 50%;
-                text-align: center;
-                color: #ffffff;
-                background-color: #8bcf70;
-                overflow: hidden;
-            }
-
-            .mention-item-img {
-                position: relative;
+                padding: 0 8px;
                 display: flex;
                 align-items: center;
-                justify-content: center;
+                margin: 0 8px;
 
-                > img {
+                &.selected {
+                    border-radius: 4px;
+                }
+
+                .mention-item-at {
                     width: 28px;
                     height: 28px;
+                    line-height: 28px;
                     border-radius: 50%;
+                    text-align: center;
+                    color: #ffffff;
+                    background-color: #8bcf70;
                     overflow: hidden;
                 }
 
-                > em {
-                    position: absolute;
-                    right: 0;
-                    bottom: 0;
-                    width: 8px;
-                    height: 8px;
-                    border-radius: 50%;
-                    background-color: #ff9900;
-                    border: 1px solid #ffffff;
-                    transform-origin: right bottom;
-                    z-index: 1;
-                }
+                .mention-item-img {
+                    position: relative;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+
+                    > img {
+                        width: 28px;
+                        height: 28px;
+                        border-radius: 50%;
+                        overflow: hidden;
+                    }
 
-                &.online {
                     > em {
-                        background-color: $primary-color;
+                        position: absolute;
+                        right: 0;
+                        bottom: 0;
+                        width: 8px;
+                        height: 8px;
+                        border-radius: 50%;
+                        background-color: #ff9900;
+                        border: 1px solid #ffffff;
+                        transform-origin: right bottom;
+                        z-index: 1;
+                    }
+
+                    &.online {
+                        > em {
+                            background-color: $primary-color;
+                        }
                     }
                 }
-            }
 
-            .mention-item-name {
-                padding: 0 8px;
-                font-size: 14px;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-            }
+                .mention-item-name {
+                    padding: 0 8px;
+                    font-size: 14px;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
 
-            .mention-item-tip {
-                color: #8f8f8e;
-                font-size: 12px;
-                font-style: normal;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-            }
+                .mention-item-tip {
+                    color: #8f8f8e;
+                    font-size: 12px;
+                    font-style: normal;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
 
-            .mention-item-disabled {
-                color: #aaa;
-                font-size: 12px;
-                padding: 0 4px;
-                line-height: 40px;
+                .mention-item-disabled {
+                    color: #aaa;
+                    font-size: 12px;
+                    padding: 0 4px;
+                    line-height: 40px;
+                }
             }
         }
     }
+
+    .chat-input-toolbar {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        float: right;
+        width: 28px;
+        height: 28px;
+        padding: 0 2px;
+        .common-loading {
+            width: 18px;
+            height: 18px;
+        }
+        > i {
+            font-size: 18px;
+            &.disabled {
+                opacity: 0.5;
+            }
+        }
+    }
+
 }
diff --git a/resources/assets/sass/pages/components/dialog-wrapper.scss b/resources/assets/sass/pages/components/dialog-wrapper.scss
index 3179d68a3..962d067a5 100644
--- a/resources/assets/sass/pages/components/dialog-wrapper.scss
+++ b/resources/assets/sass/pages/components/dialog-wrapper.scss
@@ -550,21 +550,16 @@
         }
 
         .dialog-input {
-            background-color: #F4F5F7;
-            padding: 10px 52px 10px 12px;
-            border-radius: 10px;
-        }
-
-        .dialog-send {
-            position: absolute;
-            top: 0;
-            right: 28px;
-            bottom: 0;
-            font-size: 18px;
-            width: 46px;
+            width: 100%;
             display: flex;
             align-items: center;
-            justify-content: center;
+            .chat-input-wrapper {
+                flex: 1;
+                width: 0;
+                background-color: #F4F5F7;
+                padding: 10px 12px;
+                border-radius: 10px;
+            }
         }
 
         .chat-upload {
diff --git a/resources/assets/sass/pages/components/project-dialog.scss b/resources/assets/sass/pages/components/project-dialog.scss
index 0075fe1b7..4772b7b3d 100644
--- a/resources/assets/sass/pages/components/project-dialog.scss
+++ b/resources/assets/sass/pages/components/project-dialog.scss
@@ -68,8 +68,18 @@
             padding: 0 20px;
         }
         .dialog-footer {
-            .dialog-back {
-                display: none;
+            .dialog-input {
+                .dialog-back {
+                    display: none;
+                    align-items: center;
+                    justify-content: center;
+                    width: 64px;
+                    height: 100%;
+                    max-height: 64px;
+                    font-size: 26px;
+                    margin-left: -20px;
+                    z-index: 1;
+                }
             }
         }
     }
@@ -90,24 +100,11 @@
                 padding: 0 20px;
             }
             .dialog-footer {
-                position: relative;
-                .dialog-back {
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    bottom: 0;
-                    width: 64px;
-                    z-index: 1;
-                    font-size: 26px;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                }
                 .dialog-input {
-                    width: calc(100% - 44px);
-                }
-                .dialog-send {
-                    right: 22px;
+                    align-items: flex-end;
+                    .dialog-back {
+                        display: flex;
+                    }
                 }
             }
         }
diff --git a/resources/assets/sass/pages/components/task-detail.scss b/resources/assets/sass/pages/components/task-detail.scss
index b25b84fe9..5817a475c 100644
--- a/resources/assets/sass/pages/components/task-detail.scss
+++ b/resources/assets/sass/pages/components/task-detail.scss
@@ -574,21 +574,13 @@
                 background-color: #F4F5F7;
                 padding: 10px 12px;
                 border-radius: 10px;
-                .ivu-input {
-                    border: 0;
-                    resize: none;
-                    background-color: transparent;
-                    &:focus {
-                        box-shadow: none;
-                    }
-                }
-                .no-send {
-                    display: none;
+                .chat-input-toolbar {
+                    position: relative;
                     .ivu-badge {
                         position: absolute;
                         transform: scale(0.6);
-                        top: 5px;
-                        left: 4px;
+                        top: -6px;
+                        left: 0;
                     }
                 }
             }
@@ -826,28 +818,5 @@
                 overflow-x: auto;
             }
         }
-        .task-dialog {
-            .no-dialog {
-                .no-input {
-                    position: relative;
-                    padding-right: 52px;
-                    .no-send {
-                        position: absolute;
-                        top: 0;
-                        right: 0;
-                        bottom: 0;
-                        font-size: 18px;
-                        width: 46px;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        .common-loading {
-                            width: 20px;
-                            height: 20px;
-                        }
-                    }
-                }
-            }
-        }
     }
 }
diff --git a/resources/assets/sass/pages/page-messenger.scss b/resources/assets/sass/pages/page-messenger.scss
index c3242e9a4..9bc4762f2 100644
--- a/resources/assets/sass/pages/page-messenger.scss
+++ b/resources/assets/sass/pages/page-messenger.scss
@@ -352,8 +352,18 @@
             position: relative;
             .dialog-wrapper {
                 .dialog-footer {
-                    .dialog-back {
-                        display: none;
+                    .dialog-input {
+                        .dialog-back {
+                            display: none;
+                            align-items: center;
+                            justify-content: center;
+                            width: 64px;
+                            height: 100%;
+                            max-height: 64px;
+                            font-size: 26px;
+                            margin-left: -20px;
+                            z-index: 1;
+                        }
                     }
                 }
             }
@@ -415,24 +425,11 @@
                         justify-content: center;
                     }
                     .dialog-footer {
-                        position: relative;
-                        .dialog-back {
-                            position: absolute;
-                            left: 0;
-                            bottom: 0;
-                            width: 64px;
-                            height: 49px;
-                            z-index: 1;
-                            font-size: 26px;
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                        }
                         .dialog-input {
-                            width: calc(100% - 44px);
-                        }
-                        .dialog-send {
-                            right: 22px;
+                            align-items: flex-end;
+                            .dialog-back {
+                                display: flex;
+                            }
                         }
                     }
                 }