From 5c750f7a6f231d109513816b627b973bf49da751 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Sun, 5 Jun 2022 21:30:24 +0800
Subject: [PATCH] =?UTF-8?q?=E8=81=8A=E5=A4=A9=E5=86=85=E5=AE=B9=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E5=90=8E=E5=B7=A5=E5=85=B7=E5=B0=8F=E6=B5=AE=E7=AA=97?=
 =?UTF-8?q?=E8=A2=AB=E9=81=AE=E6=8C=A1=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../manage/components/ChatInput/index.vue     |  4 ++++
 .../pages/manage/components/DialogWrapper.vue | 19 +++++++++++++++++--
 .../sass/pages/components/dialog-wrapper.scss |  5 ++++-
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/resources/assets/js/pages/manage/components/ChatInput/index.vue b/resources/assets/js/pages/manage/components/ChatInput/index.vue
index ed132f347..834afb8f1 100755
--- a/resources/assets/js/pages/manage/components/ChatInput/index.vue
+++ b/resources/assets/js/pages/manage/components/ChatInput/index.vue
@@ -401,6 +401,10 @@ export default {
             }
         },
 
+        recordState(state) {
+            this.$emit('on-record-state', state)
+        },
+
         dialogInputCache() {
             this.$emit('input', this.getInputCache())
         }
diff --git a/resources/assets/js/pages/manage/components/DialogWrapper.vue b/resources/assets/js/pages/manage/components/DialogWrapper.vue
index 5be6ed4c4..6f753cb6e 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"
+        :class="wrapperClass"
         :style="wrapperStyle"
         @drop.prevent="chatPasteDrag($event, 'drag')"
         @dragover.prevent="chatDragOver(true, $event)"
@@ -129,8 +130,9 @@
                 @on-blur="onEventBlur"
                 @on-more="onEventMore"
                 @on-file="sendFileMsg"
-                @on-record="sendRecord"
                 @on-send="sendMsg"
+                @on-record="sendRecord"
+                @on-record-state="onRecordState"
                 @on-emoji-visible-change="onEventEmojiVisibleChange"
                 :placeholder="$L('输入消息...')"/>
         </div>
@@ -329,7 +331,9 @@ export default {
             operateHasText: false,
             operateStyles: {},
             operateItem: {},
-            operateEmojis: ['👌', '🤝', '🤔', '👍', '👎', '👏', '✋', '✅', '❌', '❤️', '❓']
+            operateEmojis: ['👌', '🤝', '🤔', '👍', '👎', '👏', '✋', '✅', '❌', '❤️', '❓'],
+
+            recordState: '',
         }
     },
 
@@ -395,6 +399,13 @@ export default {
             return '发送文件'
         },
 
+        wrapperClass() {
+            if (['ready', 'ing'].includes(this.recordState)) {
+                return ['record-ing']
+            }
+            return null
+        },
+
         pasteWrapperClass() {
             if (this.pasteItem.find(({type}) => type !== 'image')) {
                 return ['multiple'];
@@ -622,6 +633,10 @@ export default {
             }
         },
 
+        onRecordState(state) {
+            this.recordState = state;
+        },
+
         chatPasteDrag(e, type) {
             this.dialogDrag = false;
             const files = type === 'drag' ? e.dataTransfer.files : e.clipboardData.files;
diff --git a/resources/assets/sass/pages/components/dialog-wrapper.scss b/resources/assets/sass/pages/components/dialog-wrapper.scss
index f3a419dcb..1a17cf97b 100644
--- a/resources/assets/sass/pages/components/dialog-wrapper.scss
+++ b/resources/assets/sass/pages/components/dialog-wrapper.scss
@@ -7,9 +7,12 @@
     display: flex;
     flex-direction: column;
     background-color: #ffffff;
-    overflow: hidden;
     z-index: 1;
 
+    &.record-ing {
+        overflow: hidden;
+    }
+
     .vue-recycle-scroller.direction-vertical:not(.page-mode) {
         overflow-y: overlay;
     }