聊天内容选择后工具小浮窗被遮挡的问题

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())
         }

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;

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;
     }