From 85f95ff89ca806bf0618d79fdc6fda4d6dbd6b57 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Sat, 28 May 2022 17:05:45 +0800
Subject: [PATCH] no message

---
 package.json                                  |   2 +-
 .../assets/js/components/Mobile/Back.vue      |   4 +-
 .../manage/components/ChatInput/index.vue     |  89 +++--
 .../pages/manage/components/DialogWrapper.vue |  29 +-
 .../sass/pages/components/chat-input.scss     | 310 +++++++++---------
 .../sass/pages/components/dialog-wrapper.scss |   3 +-
 6 files changed, 242 insertions(+), 195 deletions(-)

diff --git a/package.json b/package.json
index e702909e6..870ff62bb 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
         "notification-koro1": "^1.1.1",
         "postcss": "^8.4.5",
         "quill": "^1.3.7",
-        "quill-mention": "^3.1.0",
+        "quill-mention-hi": "^3.1.0-1",
         "resolve-url-loader": "^4.0.0",
         "sass": "^1.45.1",
         "sass-loader": "^12.4.0",
diff --git a/resources/assets/js/components/Mobile/Back.vue b/resources/assets/js/components/Mobile/Back.vue
index 898b04737..fc3d5f6fc 100644
--- a/resources/assets/js/components/Mobile/Back.vue
+++ b/resources/assets/js/components/Mobile/Back.vue
@@ -59,7 +59,9 @@ export default {
         },
 
         touchmove(event) {
-            this.getXY(event)
+            if (this.show) {
+                this.getXY(event)
+            }
         },
 
         touchend() {
diff --git a/resources/assets/js/pages/manage/components/ChatInput/index.vue b/resources/assets/js/pages/manage/components/ChatInput/index.vue
index 90d7ef8cd..cc3d8fc38 100755
--- a/resources/assets/js/pages/manage/components/ChatInput/index.vue
+++ b/resources/assets/js/pages/manage/components/ChatInput/index.vue
@@ -105,7 +105,7 @@
 <script>
 import {mapState} from "vuex";
 import Quill from 'quill';
-import "quill-mention";
+import "quill-mention-hi";
 import ChatEmoji from "./emoji";
 import touchmouse from "../../../../directives/touchmouse";
 import TransferDom from "../../../../directives/transfer-dom";
@@ -308,6 +308,7 @@ export default {
             if (!val && this.$refs.emojiTip) {
                 this.$refs.emojiTip.updatePopper()
             }
+            this.$emit('on-emoji-visible-change', val)
         },
 
         showMore(val) {
@@ -317,6 +318,7 @@ export default {
             if (!val && this.$refs.moreTip) {
                 this.$refs.moreTip.updatePopper()
             }
+            this.$emit('on-more-visible-change', val)
         },
 
         dialogInputCache() {
@@ -365,6 +367,7 @@ export default {
                         mentionDenotationChars: ["@", "#"],
                         defaultMenuOrientation: this.defaultMenuOrientation,
                         isolateCharacter: true,
+                        positioningStrategy: 'fixed',
                         renderItem: (data) => {
                             if (data.disabled === true) {
                                 return `<div class="mention-item-disabled">${data.value}</div>`;
@@ -381,6 +384,13 @@ export default {
                             return "Loading...";
                         },
                         source: (searchTerm, renderList, mentionChar) => {
+                            const mentionName = mentionChar == "@" ? 'user-mention' : 'task-mention';
+                            const containers = document.getElementsByClassName("ql-mention-list-container");
+                            for (let i = 0; i < containers.length; i++) {
+                                containers[i].classList.remove("user-mention");
+                                containers[i].classList.remove("task-mention");
+                                containers[i].classList.add(mentionName);
+                            }
                             this.getSource(mentionChar).then(array => {
                                 let values = [];
                                 array.some(item => {
@@ -492,7 +502,18 @@ export default {
                         this.recordDuration = duration;
                     }
                 })
-                this.recordReady = true;
+                if (window.Recorder.Support()) {
+                    this.recordReady = true;
+                    this.$nextTick(_ => {
+                        this.recordWave = window.Recorder.FrequencyHistogramView({
+                            elem: this.$refs.recwave,
+                            lineCount: 90,
+                            position: 0,
+                            minHeight: 1,
+                            stripeEnable: false
+                        })
+                    })
+                }
             });
 
             // Ready event
@@ -586,24 +607,17 @@ export default {
                 this.recordState = "ready";
                 this.recordRec.open(_ => {
                     if (this.recordState === "ready") {
+                        this.recordDuration = 0;
                         this.recordState = "ing"
                         this.recordBlob = null
-                        this.$nextTick(_ => {
-                            this.$refs.recwave.innerHTML = "";
-                            this.recordWave = window.Recorder.FrequencyHistogramView({
-                                elem: this.$refs.recwave,
-                                lineCount: 90,
-                                position: 0,
-                                minHeight: 1,
-                                stripeEnable: false
-                            })
+                        setTimeout(_ => {
                             this.recordRec.start()
-                        })
+                        }, 300)
                     } else {
                         this.recordRec.close();
                     }
                 }, (msg) => {
-                    $A.modalError(msg || '打开录音失败')
+                    $A.messageError(msg || '打开录音失败')
                 });
                 return true;
             } else {
@@ -612,28 +626,33 @@ export default {
         },
 
         stopRecord(isCancel) {
-            if (this.recordState === "ing") {
-                this.recordState = "stop";
-                this.recordRec.stop((blob, duration) => {
-                    this.recordRec.close();
-                    if (isCancel === true) {
-                        return;
-                    }
-                    if (duration < 600) {
-                        // 小于 600ms 不发送
-                        $A.messageWarning("说话时间太短")
-                    } else {
-                        this.recordBlob = blob;
-                        this.uploadRecord(duration);
-                    }
-                }, (msg) => {
-                    this.recordRec.close();
-                    $A.modalError("录音失败: " + msg);
-                });
-                return true;
-            } else {
-                this.recordState = "stop";
-                return false;
+            switch (this.recordState) {
+                case "ing":
+                    this.recordState = "stop";
+                    this.recordRec.stop((blob, duration) => {
+                        this.recordRec.close();
+                        if (isCancel === true) {
+                            return;
+                        }
+                        if (duration < 600) {
+                            $A.messageWarning("说话时间太短") // 小于 600ms 不发送
+                        } else {
+                            this.recordBlob = blob;
+                            this.uploadRecord(duration);
+                        }
+                    }, (msg) => {
+                        this.recordRec.close();
+                        $A.messageError(msg || "录音失败");
+                    });
+                    return true;
+
+                case "ready":
+                    this.recordState = "stop";
+                    return true;
+
+                default:
+                    this.recordState = "stop";
+                    return false;
             }
         },
 
diff --git a/resources/assets/js/pages/manage/components/DialogWrapper.vue b/resources/assets/js/pages/manage/components/DialogWrapper.vue
index f3812a812..b45b7369e 100644
--- a/resources/assets/js/pages/manage/components/DialogWrapper.vue
+++ b/resources/assets/js/pages/manage/components/DialogWrapper.vue
@@ -2,6 +2,7 @@
     <div
         v-if="isReady"
         class="dialog-wrapper"
+        :style="wrapperStyle"
         @drop.prevent="chatPasteDrag($event, 'drag')"
         @dragover.prevent="chatDragOver(true, $event)"
         @dragleave.prevent="chatDragOver(false, $event)">
@@ -116,6 +117,7 @@
                 @on-more="onEventMore"
                 @on-file="sendFileMsg"
                 @on-send="sendMsg"
+                @on-emoji-visible-change="onEventEmojiVisibleChange"
                 :placeholder="$L('输入消息...')"/>
         </div>
         <div v-if="dialogDrag" class="drag-over" @click="dialogDrag=false">
@@ -218,15 +220,21 @@ export default {
 
             dialogDrag: false,
             groupInfoShow: false,
+
+            windowScrollY: 0
         }
     },
 
     mounted() {
-
+        if ($A.isIos()) {
+            window.addEventListener('scroll', this.onScrollEvent);
+        }
     },
 
     beforeDestroy() {
-
+        if ($A.isIos()) {
+            window.removeEventListener('scroll', this.onScrollEvent);
+        }
     },
 
     computed: {
@@ -313,6 +321,13 @@ export default {
         isMyDialog() {
             const {dialogData, userId} = this;
             return dialogData.dialog_user && dialogData.dialog_user.userid == userId
+        },
+
+        wrapperStyle() {
+            const {windowScrollY} = this;
+            return {
+                top: windowScrollY + 'px'
+            }
         }
     },
 
@@ -580,6 +595,12 @@ export default {
             }
         },
 
+        onEventEmojiVisibleChange(val) {
+            if (val && !this.$isDesktop) {
+                this.onToBottom();
+            }
+        },
+
         onActive() {
             this.$emit("on-active");
         },
@@ -673,6 +694,10 @@ export default {
                 }
             }, 100)
         },
+
+        onScrollEvent() {
+            this.windowScrollY = window.scrollY
+        }
     }
 }
 </script>
diff --git a/resources/assets/sass/pages/components/chat-input.scss b/resources/assets/sass/pages/components/chat-input.scss
index 9652d5f08..25e64906f 100755
--- a/resources/assets/sass/pages/components/chat-input.scss
+++ b/resources/assets/sass/pages/components/chat-input.scss
@@ -1,5 +1,5 @@
 @import "~quill/dist/quill.bubble.css";
-@import "~quill-mention/dist/quill.mention.min.css";
+@import "~quill-mention-hi/dist/quill.mention.min.css";
 
 .chat-input-box {
     display: inline-block;
@@ -7,6 +7,9 @@
 
     &.record-ing {
         .chat-input-wrapper {
+            .ql-container {
+                opacity: 0;
+            }
             .chat-toolbar {
                 > li {
                     &.chat-send {
@@ -15,29 +18,8 @@
                         }
                     }
                     &.chat-record-recwave {
-                        display: flex;
-                    }
-                }
-            }
-        }
-    }
-
-    &.task-mention {
-        .chat-input-wrapper {
-            .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;
-                        }
+                        visibility: visible;
+                        opacity: 1;
                     }
                 }
             }
@@ -102,136 +84,6 @@
                     }
                 }
             }
-
-            .ql-mention-list-container {
-                width: auto;
-                min-width: 220px;
-                max-width: 280px;
-                max-height: 360px;
-                //noinspection CssInvalidPropertyValue
-                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: $primary-color;
-                        overflow: hidden;
-                    }
-
-                    .mention-item-img {
-                        position: relative;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-
-                        > img {
-                            width: 28px;
-                            height: 28px;
-                            border-radius: 50%;
-                            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;
-                        }
-
-                        &.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-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;
-                    }
-                }
-            }
         }
 
         .ql-bubble {
@@ -245,6 +97,7 @@
             display: flex;
             align-items: center;
             justify-content: flex-end;
+            user-select: none;
             > li {
                 width: 30px;
                 height: 30px;
@@ -297,10 +150,12 @@
                     height: 100%;
                     width: 100%;
                     background-color: #ffffff;
-                    display: none;
                     flex-direction: column;
                     align-items: center;
                     justify-content: center;
+                    pointer-events: none;
+                    visibility: hidden;
+                    opacity: 0;
                     > div {
                         flex: 1;
                         width: 100%;
@@ -499,6 +354,151 @@
     }
 }
 
+.ql-mention-list-container {
+    width: auto;
+    min-width: 220px;
+    max-width: 280px;
+    max-height: 360px;
+    overflow-y: overlay;
+
+    &.task-mention {
+        .ql-mention-list {
+            > li {
+                &:first-child {
+                    margin-top: 0;
+                }
+            }
+        }
+        .ql-mention-list-item {
+            line-height: 36px;
+            .mention-item-disabled {
+                padding: 8px 4px 0;
+            }
+        }
+    }
+
+    &::-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: $primary-color;
+            overflow: hidden;
+        }
+
+        .mention-item-img {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            > img {
+                width: 28px;
+                height: 28px;
+                border-radius: 50%;
+                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;
+            }
+
+            &.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-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;
+        }
+    }
+}
+
 @media (max-width: 768px) {
     .chat-input-box {
         .chat-input-wrapper {
diff --git a/resources/assets/sass/pages/components/dialog-wrapper.scss b/resources/assets/sass/pages/components/dialog-wrapper.scss
index ea32a6956..71ec97690 100644
--- a/resources/assets/sass/pages/components/dialog-wrapper.scss
+++ b/resources/assets/sass/pages/components/dialog-wrapper.scss
@@ -451,7 +451,7 @@
                                 flex-direction: row-reverse;
                                 justify-content: flex-end;
                                 align-content: center;
-                                color: #ffffff;
+                                color: #333333;
                                 line-height: 20px;
                                 cursor: pointer;
 
@@ -691,6 +691,7 @@
 
                                 .dialog-record {
                                     flex-direction: row;
+                                    color: #ffffff;
 
                                     .record-time {
                                         padding: 0 4px 0 0;