【代码优化】客服聊天

pages/chat/components/messageInput.vue

@@ -7,7 +7,11 @@
         :clearable="false"
         v-model="message"
         placeholder="请输入你要咨询的问题"
+        :maxlength="maxLength"
+        :focus="autoFocus"
+        @focus="handleFocus"
       ></uni-easyinput>
+      <text v-if="showCharCount" class="char-count">{{ message.length }}/{{ maxLength }}</text>
     </view>
     <text class="sicon-basic bq" @tap.stop="onTools('emoji')"></text>
     <text
@@ -16,14 +20,21 @@
       :class="{ 'is-active': toolsMode === 'tools' }"
       @tap.stop="onTools('tools')"
     ></text>
-    <button v-if="message" class="ss-reset-button send-btn" @tap="sendMessage">
-      发送
+    <button
+      v-if="message"
+      class="ss-reset-button send-btn"
+      @tap="sendMessage"
+      :disabled="isDisabled || sending"
+      :class="{ 'disabled': isDisabled || sending }"
+    >
+      <text v-if="sending">发送中</text>
+      <text v-else>发送</text>
     </button>
   </view>
 </template>
 
 <script setup>
-  import { computed } from 'vue';
+  import { computed, ref, onUnmounted } from 'vue';
   /**
    * 消息发送组件
    */
@@ -38,8 +49,25 @@
       type: String,
       default: '',
     },
+    // 是否自动获取焦点
+    autoFocus: {
+      type: Boolean,
+      default: false
+    },
+    // 最大字数限制
+    maxLength: {
+      type: Number,
+      default: 500
+    },
+    // 是否显示字数统计
+    showCharCount: {
+      type: Boolean,
+      default: true
+    }
   });
+
   const emits = defineEmits(['update:modelValue', 'onTools', 'sendMessage']);
+
   const message = computed({
     get() {
       return props.modelValue;
@@ -49,16 +77,55 @@
     }
   });
 
+  // 控制发送状态
+  const sending = ref(false);
+
+  // 是否禁用发送按钮
+  const isDisabled = computed(() => {
+    return !message.value.trim() || message.value.length > props.maxLength;
+  });
+
+  // 输入框获取焦点
+  const handleFocus = () => {
+    // 输入框获取焦点时关闭工具栏
+    if (props.toolsMode !== '') {
+      onTools('');
+    }
+  };
 
   // 打开工具菜单
   function onTools(mode) {
     emits('onTools', mode);
   }
 
+  // 防抖处理
+  let sendTimer = null;
+
   // 发送消息
   function sendMessage() {
-    emits('sendMessage');
+    // 如果正在发送中，或者内容为空，则不处理
+    if (sending.value || isDisabled.value) return;
+
+    // 清除可能存在的定时器
+    if (sendTimer) clearTimeout(sendTimer);
+
+    // 设置发送状态
+    sending.value = true;
+
+    // 执行发送，并添加防抖
+    sendTimer = setTimeout(() => {
+      emits('sendMessage');
+      // 发送完成后重置状态
+      setTimeout(() => {
+        sending.value = false;
+      }, 300);
+    }, 300);
   }
+
+  // 组件卸载时清除定时器
+  onUnmounted(() => {
+    if (sendTimer) clearTimeout(sendTimer);
+  });
 </script>
 
 <style scoped lang="scss">
@@ -70,6 +137,16 @@
       height: 64rpx;
       border-radius: 32rpx;
       background: var(--ui-BG-1);
+      position: relative;
+
+      .char-count {
+        position: absolute;
+        right: 15rpx;
+        top: 50%;
+        transform: translateY(-50%);
+        font-size: 22rpx;
+        color: #999;
+      }
     }
 
     .bq {
@@ -97,6 +174,12 @@
       font-size: 26rpx;
       color: #fff;
       margin-left: 11rpx;
+      transition: all 0.3s;
+
+      &.disabled {
+        opacity: 0.6;
+        background: #cccccc;
+      }
     }
   }
 </style>