fix: 聊天功能（部分），图片发送，视频发送，音频发送已完成，好友列表，聊天记录以对接

apps/web-antd/src/views/business/chat/components/MessageInput.vue

@@ -1,119 +1,17 @@
-<template>
-  <div class="message-input-area" :class="{ 'dark': themeStore.isDarkMode }">
-    <!-- 文件上传预览 -->
-    <FileUploadPreview v-if="uploadPreview"/>
-    <!-- 表情选择器 -->
-    <EmojiPicker class="mb-10" v-if="showEmojiPicker" @select="insertEmoji"/>
-
-    <div class="input-container">
-      <!-- 功能按钮区域 -->
-      <div class="function-buttons">
-        <button
-          class="function-btn"
-          @click="triggerFileInput('image')"
-          title="发送图片"
-        >
-          <i class="fas fa-image"></i>
-          <div class="btn-ripple"></div>
-        </button>
-
-        <button
-          class="function-btn"
-          @click="triggerFileInput('video')"
-          title="发送视频"
-        >
-          <i class="fas fa-video"></i>
-          <div class="btn-ripple"></div>
-        </button>
-
-        <button
-          class="function-btn"
-          :class="{ 'active': showEmojiPicker }"
-          @click="toggleEmojiPicker"
-          title="选择表情"
-        >
-          <i class="fas fa-smile"></i>
-          <div class="btn-ripple"></div>
-        </button>
-
-        <button
-          class="function-btn record-btn"
-          :class="{ 'recording': isRecording }"
-          @mousedown="startRecording"
-          @mouseup="stopRecording"
-          @mouseleave="stopRecording"
-          @touchstart="startRecording"
-          @touchend="stopRecording"
-          title="按住录音"
-        >
-          <i class="fas fa-microphone"></i>
-          <div class="btn-ripple"></div>
-          <div class="recording-wave" v-if="isRecording"></div>
-        </button>
-
-
-        <!-- 录音状态指示器 -->
-        <!--        <RecordingIndicator />-->
-      </div>
-
-
-      <!-- 输入框区域 -->
-      <div class="input-section">
-        <CustomTextarea
-          ref="messageInputRef"
-          v-model="messageText"
-          placeholder="输入消息... (支持拖拽文件)"
-          :auto-resize="true"
-          :max-rows="4"
-          :detect-paste="true"
-          class="message-textarea"
-          @keydown="handleKeydown"
-          @paste-file="handlePasteFile"
-        />
-
-        <button
-          class="send-btn"
-          :disabled="!messageText.trim() && !uploadPreview"
-          @click="sendTextMessage"
-          title="发送消息"
-        >
-          <i class="fas fa-paper-plane"></i>
-          <div class="send-ripple"></div>
-        </button>
-      </div>
-    </div>
-
-    <!-- 隐藏的文件输入框 -->
-    <input
-      ref="imageInput"
-      type="file"
-      accept="image/*"
-      class="hidden"
-      @change="handleFileUpload"
-    />
-    <input
-      ref="videoInput"
-      type="file"
-      accept="video/*"
-      class="hidden"
-      @change="handleFileUpload"
-    />
-  </div>
-</template>
-
 <script setup>
-import {ref, nextTick, provide, onMounted, onUnmounted} from 'vue';
-import {useUserStore} from '../stores/user.ts';
-import {useChatStore} from '../stores/chat.ts';
-import {useThemeStore} from '../stores/theme.ts';
-import {useFileUpload} from '../composables/useFileUpload.ts';
-import {useRecording} from '../composables/useRecording.ts';
-import {sendMessage} from '../utils/request.ts';
-import {message} from 'ant-design-vue';
+import { nextTick, onMounted, onUnmounted, provide, ref } from 'vue';
+
+import { message } from 'ant-design-vue';
+
+import { useFileUpload } from '../composables/useFileUpload.ts';
+import { useRecording } from '../composables/useRecording.ts';
+import { useChatStore } from '../stores/chat.ts';
+import { useThemeStore } from '../stores/theme.ts';
+import { useUserStore } from '../stores/user.ts';
+import { sendMessage } from '../utils/request.ts';
 import CustomTextarea from './CustomTextarea.vue';
 import EmojiPicker from './EmojiPicker.vue';
 import FileUploadPreview from './FileUploadPreview.vue';
-import RecordingIndicator from "../components/RecordingIndicator.vue";
 
 const userStore = useUserStore();
 const chatStore = useChatStore();
@@ -130,11 +28,11 @@ const {
   videoInput,
   triggerFileInput,
   handleFileUpload,
-  cancelUpload
+  cancelUpload,
 } = useFileUpload();
 
 // 使用录音组合式函数
-const {isRecording, startRecording, stopRecording} = useRecording();
+const { isRecording, startRecording, stopRecording } = useRecording();
 
 // 发送上传的文件
 const sendUploadedFile = () => {
@@ -144,10 +42,10 @@ const sendUploadedFile = () => {
     type: uploadPreview.value.type,
     content: uploadPreview.value.url,
     time: new Date().toLocaleTimeString().slice(0, 5),
-    senderId: userStore.currentUser.id,
+    senderId: `${userStore.currentUser.id}`,
     receiverId: chatStore.currentFriend.id,
     read: true,
-    duration: 0
+    duration: 0,
   };
 
   chatStore.addMessage(messageObj, userStore.currentUser.id);
@@ -157,8 +55,8 @@ const sendUploadedFile = () => {
     senderId: userStore.currentUser.id,
     receiverId: chatStore.currentFriend.id,
     type: uploadPreview.value.type,
-    content: uploadPreview.value.url
-  }).catch(error => {
+    content: uploadPreview.value.url,
+  }).catch((error) => {
     console.error('发送文件失败:', error);
     message.error('文件发送失败');
   });
@@ -191,9 +89,11 @@ const sendTextMessage = async () => {
     type: messageType,
     content: messageContent,
     time: new Date().toLocaleTimeString().slice(0, 5),
-    senderId: userStore.currentUser.id,
+    senderId: `${userStore.currentUser.id}`,
+    receiverId: chatStore.currentFriend.id,
+    isSent: true,
     read: true,
-    duration: 0
+    duration: 0,
   };
 
   // return console.log('发送消息:' + userStore.currentUser.id, messageObj);
@@ -207,7 +107,7 @@ const sendTextMessage = async () => {
       receiverId: chatStore.currentFriend.id,
       roomId: chatStore.currentFriend.room_id,
       type: messageType,
-      content: messageContent
+      content: messageContent,
     });
   } catch (error) {
     console.error('发送消息失败:', error);
@@ -253,20 +153,22 @@ const handleFileFromPaste = (file, type) => {
   const maxSize = type === 'image' ? 10 * 1024 * 1024 : 50 * 1024 * 1024;
   if (file.size > maxSize) {
     const maxSizeMB = maxSize / 1024 / 1024;
-    message.error(`文件大小超过限制！${type === 'image' ? '图片' : '视频'}最大${maxSizeMB}MB`);
+    message.error(
+      `文件大小超过限制！${type === 'image' ? '图片' : '视频'}最大${maxSizeMB}MB`,
+    );
     return;
   }
 
   const reader = new FileReader();
-  reader.onload = (e) => {
+  reader.addEventListener('load', (e) => {
     uploadPreview.value = {
-      type: type,
+      type,
       url: e.target.result,
       name: file.nick_name,
       size: file.size,
-      file: file
+      file,
     };
-  };
+  });
 
   reader.onerror = (error) => {
     console.error('文件读取失败:', error);
@@ -295,15 +197,17 @@ const insertEmoji = (emoji) => {
 
 // 监听录音完成事件
 const handleAudioRecorded = (event) => {
-  const {url, duration} = event.detail;
+  const { url, duration } = event.detail;
 
   const messageObj = {
     type: 'audio',
     content: url,
     time: new Date().toLocaleTimeString().slice(0, 5),
-    senderId: userStore.currentUser.id,
+    senderId: `${userStore.currentUser.id}`,
+    receiverId: chatStore.currentFriend.id,
+    isSent: true,
     read: true,
-    duration: duration
+    duration,
   };
 
   chatStore.addMessage(messageObj, userStore.currentUser.id);
@@ -313,9 +217,11 @@ const handleAudioRecorded = (event) => {
     senderId: userStore.currentUser.id,
     receiverId: chatStore.currentFriend.id,
     roomId: chatStore.currentFriend.room_id,
+    isSent: true,
     type: 'audio',
-    content: url
-  }).catch(error => {
+    content: url,
+    duration,
+  }).catch((error) => {
     console.error('发送音频失败:', error);
     message.error('音频发送失败');
   });
@@ -326,7 +232,10 @@ onMounted(() => {
 
   // 点击外部关闭表情选择器
   document.addEventListener('click', (event) => {
-    if (!event.target.closest('.emoji-picker') && !event.target.closest('.function-btn')) {
+    if (
+      !event.target.closest('.emoji-picker') &&
+      !event.target.closest('.function-btn')
+    ) {
       showEmojiPicker.value = false;
     }
   });
@@ -337,6 +246,107 @@ onUnmounted(() => {
 });
 </script>
 
+<template>
+  <div :class="{ dark: themeStore.isDarkMode }" class="message-input-area">
+    <!-- 文件上传预览 -->
+    <FileUploadPreview v-if="uploadPreview" />
+    <!-- 表情选择器 -->
+    <EmojiPicker v-if="showEmojiPicker" class="mb-10" @select="insertEmoji" />
+
+    <div class="input-container">
+      <!-- 功能按钮区域 -->
+      <div class="function-buttons">
+        <button
+          class="function-btn"
+          title="发送图片"
+          @click="triggerFileInput('image')"
+        >
+          <i class="fas fa-image"></i>
+          <div class="btn-ripple"></div>
+        </button>
+
+        <button
+          class="function-btn"
+          title="发送视频"
+          @click="triggerFileInput('video')"
+        >
+          <i class="fas fa-video"></i>
+          <div class="btn-ripple"></div>
+        </button>
+
+        <button
+          :class="{ active: showEmojiPicker }"
+          class="function-btn"
+          title="选择表情"
+          @click="toggleEmojiPicker"
+        >
+          <i class="fas fa-smile"></i>
+          <div class="btn-ripple"></div>
+        </button>
+
+        <button
+          :class="{ recording: isRecording }"
+          class="function-btn record-btn"
+          title="按住录音"
+          @mousedown="startRecording"
+          @mouseleave="stopRecording"
+          @mouseup="stopRecording"
+          @touchend="stopRecording"
+          @touchstart="startRecording"
+        >
+          <i class="fas fa-microphone"></i>
+          <div class="btn-ripple"></div>
+          <div v-if="isRecording" class="recording-wave"></div>
+        </button>
+
+        <!-- 录音状态指示器 -->
+        <!--        <RecordingIndicator />-->
+      </div>
+
+      <!-- 输入框区域 -->
+      <div class="input-section">
+        <CustomTextarea
+          ref="messageInputRef"
+          v-model="messageText"
+          :auto-resize="true"
+          :detect-paste="true"
+          :max-rows="4"
+          class="message-textarea"
+          placeholder="输入消息... (支持拖拽文件)"
+          @keydown="handleKeydown"
+          @paste-file="handlePasteFile"
+        />
+
+        <button
+          :disabled="!messageText.trim() && !uploadPreview"
+          class="send-btn"
+          title="发送消息"
+          @click="sendTextMessage"
+        >
+          <i class="fas fa-paper-plane"></i>
+          <div class="send-ripple"></div>
+        </button>
+      </div>
+    </div>
+
+    <!-- 隐藏的文件输入框 -->
+    <input
+      ref="imageInput"
+      accept="image/*"
+      class="hidden"
+      type="file"
+      @change="handleFileUpload"
+    />
+    <input
+      ref="videoInput"
+      accept="video/*"
+      class="hidden"
+      type="file"
+      @change="handleFileUpload"
+    />
+  </div>
+</template>
+
 <style scoped>
 .message-input-area {
   padding: 20px;