From c93cbec021ca838752ea8a5db4f6be7ffb63dbc5 Mon Sep 17 00:00:00 2001
From: lq <workerqi@163.com>
Date: Fri, 25 Jul 2025 13:02:19 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=81=8A=E5=A4=A9=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=EF=BC=88=E9=83=A8=E5=88=86=EF=BC=89=EF=BC=8C=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E5=8F=91=E9=80=81=EF=BC=8C=E8=A7=86=E9=A2=91=E5=8F=91=E9=80=81?=
 =?UTF-8?q?=EF=BC=8C=E9=9F=B3=E9=A2=91=E5=8F=91=E9=80=81=E5=B7=B2=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90=EF=BC=8C=E5=A5=BD=E5=8F=8B=E5=88=97=E8=A1=A8=EF=BC=8C?=
 =?UTF-8?q?=E8=81=8A=E5=A4=A9=E8=AE=B0=E5=BD=95=E4=BB=A5=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/public/audio/sys.mp3            |  Bin 0 -> 10493 bytes
 apps/web-antd/src/api/core/upload.ts          |    7 +
 apps/web-antd/src/util/tool.ts                |   18 +
 .../src/views/business/chat/api/index.ts      |   10 +
 .../business/chat/components/ChatHeader.vue   |  196 ++-
 .../business/chat/components/FriendList.vue   |   14 +-
 .../business/chat/components/MediaPreview.vue |  311 ++--
 .../chat/components/MessageBubble.vue         |  311 ++--
 .../business/chat/components/MessageInput.vue |  274 +--
 .../business/chat/components/MessageItem.vue  |   97 --
 .../business/chat/components/MessageList.vue  |  199 ++-
 .../chat/composables/useFileUpload.ts         |   35 +-
 .../business/chat/composables/useRecording.ts |   23 +-
 .../src/views/business/chat/stores/chat.ts    | 1537 ++++++++++-------
 .../src/views/business/chat/stores/user.ts    |    1 +
 15 files changed, 1740 insertions(+), 1293 deletions(-)
 create mode 100644 apps/web-antd/public/audio/sys.mp3
 delete mode 100644 apps/web-antd/src/views/business/chat/components/MessageItem.vue

diff --git a/apps/web-antd/public/audio/sys.mp3 b/apps/web-antd/public/audio/sys.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..870c9ec085f15fb3c4d6147bf6196e9f78b29b4f
GIT binary patch
literal 10493
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
O{%hzbb@bmZ=Dz@TC!taR

literal 0
HcmV?d00001

diff --git a/apps/web-antd/src/api/core/upload.ts b/apps/web-antd/src/api/core/upload.ts
index c57aae95..7290f4f6 100644
--- a/apps/web-antd/src/api/core/upload.ts
+++ b/apps/web-antd/src/api/core/upload.ts
@@ -7,6 +7,13 @@ import { requestClient } from '#/api/request';
 export async function uploadFile(data: any) {
   return requestClient.upload('upload/image', data);
 }
+/**
+ * 文件上传 - 聊天信息
+ * @param data
+ */
+export async function uploadChatFile(data: any) {
+  return requestClient.upload('upload/chat-file', data);
+}
 
 /**
  * 通过文件id集合获取文件信息
diff --git a/apps/web-antd/src/util/tool.ts b/apps/web-antd/src/util/tool.ts
index 60ae1a53..2c41d111 100644
--- a/apps/web-antd/src/util/tool.ts
+++ b/apps/web-antd/src/util/tool.ts
@@ -3,6 +3,24 @@ import type { DescItem } from '#/components/description';
 
 import { isFunction } from '@vben/utils';
 
+import SysAudioMp3 from '/public/audio/sys.mp3';
+
+
+export const playOnceAndDestroySys = () => {
+  const audio = new Audio(SysAudioMp3);
+
+  // 播放音频
+  audio.play().catch((error) => {
+    console.error('音频播放失败:', error);
+    audio.remove(); // 如果播放失败，也移除音频对象
+  });
+
+  // 播放结束后销毁音频对象
+  audio.addEventListener('ended', () => {
+    audio.remove(); // 移除DOM中的audio元素（如果是动态创建的）
+    audio.src = ''; // 清空音频源以释放内存
+  });
+};
 export const omit = (obj: any, keysToOmit: string[]) => {
   // 如果 obj 不是对象或者 keysToOmit 不是数组，则直接返回 obj
   if (typeof obj !== 'object' || !Array.isArray(keysToOmit)) {
diff --git a/apps/web-antd/src/views/business/chat/api/index.ts b/apps/web-antd/src/views/business/chat/api/index.ts
index 0cf2fa1f..9e4d7251 100644
--- a/apps/web-antd/src/views/business/chat/api/index.ts
+++ b/apps/web-antd/src/views/business/chat/api/index.ts
@@ -8,3 +8,13 @@ const prefix = 'chat-friends/';
 export async function getChatFriendsListApi(data: any = {}) {
   return requestClient.get<any>(`${prefix}list`, { params: data });
 }
+// chat-friends/messages-by-room-id
+
+/**
+ * 获取当前登录的诊所信息
+ * @param data
+ */
+export async function getChatMessageListApi(data: any = {}) {
+  // return requestClient.post<any>(`${prefix}messages-by-room-id`, { params: data });
+  return requestClient.post<any>(`${prefix}messages-by-room-id`, data);
+}
diff --git a/apps/web-antd/src/views/business/chat/components/ChatHeader.vue b/apps/web-antd/src/views/business/chat/components/ChatHeader.vue
index 55c2d15a..b27fcf7f 100644
--- a/apps/web-antd/src/views/business/chat/components/ChatHeader.vue
+++ b/apps/web-antd/src/views/business/chat/components/ChatHeader.vue
@@ -1,79 +1,10 @@
-<template>
-  <div class="chat-header" :class="{ 'dark': themeStore.isDarkMode }">
-    <div class="header-content">
-      <div class="friend-info">
-        <div
-          class="friend-avatar"
-          :style="{ background: chatStore.currentFriend?.color }"
-        >
-          {{ chatStore.currentFriend?.nick_name.charAt(0) }}
-        </div>
-
-        <div class="friend-details">
-          <h3 class="friend-name">{{ chatStore.currentFriend?.nick_name }}</h3>
-          <p class="friend-status">
-            <span
-              class="status-dot"
-              :class="isFriendOnline ? 'online' : 'offline'"
-            ></span>
-            <span class="status-text">
-              {{ isFriendOnline ? '在线' : '离线' }}
-            </span>
-            <span v-if="callStatus" class="call-status-text">
-              {{ callStatusText }}
-            </span>
-          </p>
-        </div>
-      </div>
-
-      <div class="header-actions">
-        <!-- 语音通话按钮 -->
-        <button
-          class="action-btn voice-call-btn"
-          @click="startVoiceCall"
-          title="语音通话"
-        >
-          <i class="fas fa-phone"></i>
-        </button>
-
-        <!-- 视频通话按钮 -->
-        <button
-          class="action-btn video-call-btn"
-          @click="startVideoCall"
-          title="视频通话"
-        >
-          <i class="fas fa-video"></i>
-        </button>
-
-        <!-- 更多操作 -->
-        <button
-          class="action-btn more-btn"
-          @click="showMoreActions = !showMoreActions"
-          title="更多操作"
-        >
-          <i class="fas fa-ellipsis-v"></i>
-        </button>
-
-        <!-- 更多操作菜单 -->
-        <div v-if="showMoreActions" class="more-actions-menu">
-          <div class="menu-item" @click="clearChatHistory">
-            <i class="fas fa-trash"></i>
-            <span>清空聊天记录</span>
-          </div>
-          <div class="menu-item" @click="viewFriendProfile">
-            <i class="fas fa-user"></i>
-            <span>查看资料</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup>
-import {ref, computed} from 'vue';
-import {useChatStore} from '../stores/chat.ts';
-import {useThemeStore} from '../stores/theme.ts';
+import { computed, ref } from 'vue';
+
+import { Avatar } from 'ant-design-vue';
+
+import { useChatStore } from '../stores/chat.ts';
+import { useThemeStore } from '../stores/theme.ts';
 
 const chatStore = useChatStore();
 const themeStore = useThemeStore();
@@ -86,7 +17,10 @@ const callStatus = computed(() => {
   if (!chatStore.currentFriend) return null;
 
   // 检查是否正在与当前好友通话
-  if (chatStore.currentCall && chatStore.currentCall.peerId === chatStore.currentFriend.id) {
+  if (
+    chatStore.currentCall &&
+    chatStore.currentCall.peerId === chatStore.currentFriend.id
+  ) {
     return chatStore.callConnectionStatus || '通话中';
   }
 
@@ -98,24 +32,33 @@ const callStatusText = computed(() => {
   if (!callStatus.value) return '';
 
   switch (callStatus.value) {
-    case '等待对方接听...':
-      return '📞 呼叫中...';
-    case '通话中':
-      return '📞 通话中';
-    case '对方已拒绝':
+    case '对方已拒绝': {
       return '❌ 已拒绝';
-    case '对方无人接听':
-      return '🕒 未接听';
-    case '对方忙线中':
+    }
+    case '对方忙线中': {
       return '🚫 忙线中';
-    default:
-      return '📞 ' + callStatus.value;
+    }
+    case '对方无人接听': {
+      return '🕒 未接听';
+    }
+    case '等待对方接听...': {
+      return '📞 呼叫中...';
+    }
+    case '通话中': {
+      return '📞 通话中';
+    }
+    default: {
+      return `📞 ${callStatus.value}`;
+    }
   }
 });
 
 // 点击外部关闭菜单
 const handleClickOutside = (e) => {
-  if (!e.target.closest('.more-btn') && !e.target.closest('.more-actions-menu')) {
+  if (
+    !e.target.closest('.more-btn') &&
+    !e.target.closest('.more-actions-menu')
+  ) {
     showMoreActions.value = false;
   }
 };
@@ -158,6 +101,85 @@ const viewFriendProfile = () => {
 };
 </script>
 
+<template>
+  <div :class="{ dark: themeStore.isDarkMode }" class="chat-header">
+    <div class="header-content">
+      <div class="friend-info">
+        <div
+          :style="{ background: chatStore.currentFriend?.color }"
+          class="friend-avatar"
+        >
+          <Avatar
+            v-if="chatStore.currentFriend?.avatar"
+            :size="48"
+            :src="chatStore.currentFriend?.avatar"
+          />
+          <Avatar v-else :size="48">
+            {{ chatStore.currentFriend?.nick_name.charAt(0) }}
+          </Avatar>
+        </div>
+
+        <div class="friend-details">
+          <h3 class="friend-name">{{ chatStore.currentFriend?.nick_name }}</h3>
+          <p class="friend-status">
+            <span
+              :class="isFriendOnline ? 'online' : 'offline'"
+              class="status-dot"
+            ></span>
+            <span class="status-text">
+              {{ isFriendOnline ? '在线' : '离线' }}
+            </span>
+            <span v-if="callStatus" class="call-status-text">
+              {{ callStatusText }}
+            </span>
+          </p>
+        </div>
+      </div>
+
+      <div class="header-actions">
+        <!-- 语音通话按钮 -->
+        <button
+          class="action-btn voice-call-btn"
+          title="语音通话"
+          @click="startVoiceCall"
+        >
+          <i class="fas fa-phone"></i>
+        </button>
+
+        <!-- 视频通话按钮 -->
+        <button
+          class="action-btn video-call-btn"
+          title="视频通话"
+          @click="startVideoCall"
+        >
+          <i class="fas fa-video"></i>
+        </button>
+
+        <!-- 更多操作 -->
+        <button
+          class="action-btn more-btn"
+          title="更多操作"
+          @click="showMoreActions = !showMoreActions"
+        >
+          <i class="fas fa-ellipsis-v"></i>
+        </button>
+
+        <!-- 更多操作菜单 -->
+        <div v-if="showMoreActions" class="more-actions-menu">
+          <div class="menu-item" @click="clearChatHistory">
+            <i class="fas fa-trash"></i>
+            <span>清空聊天记录</span>
+          </div>
+          <div class="menu-item" @click="viewFriendProfile">
+            <i class="fas fa-user"></i>
+            <span>查看资料</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style scoped>
 .chat-header {
   background: #ffffff;
diff --git a/apps/web-antd/src/views/business/chat/components/FriendList.vue b/apps/web-antd/src/views/business/chat/components/FriendList.vue
index 419d503e..53f88d91 100644
--- a/apps/web-antd/src/views/business/chat/components/FriendList.vue
+++ b/apps/web-antd/src/views/business/chat/components/FriendList.vue
@@ -99,23 +99,23 @@ watch(
             @click="selectFriend(friend)"
           >
             <div :style="{ background: friend.color }" class="friend-avatar">
-              <Avatar v-if="friend.avatar" :src="friend.avatar" />
-              <Avatar v-else>{{ friend.nick_name.charAt(0) }}</Avatar>
+              <Avatar :size="48" v-if="friend.avatar" :src="friend.avatar" />
+              <Avatar :size="48" v-else>{{ friend.nick_name.charAt(0) }}</Avatar>
             </div>
 
             <div class="friend-info">
               <div class="friend-name">{{ friend.nick_name }}</div>
               <div class="friend-message">
-                {{ friend.lastMessage || '点击开始聊天' }}
+                {{ friend.last_message || '点击开始聊天' }}
               </div>
             </div>
 
             <div class="friend-meta">
-              <div v-if="friend.lastMessageTime" class="message-time">
-                {{ friend.lastMessageTime }}
+              <div v-if="friend.un_read_count > 0" class="unread-badge">
+                {{ friend.un_read_count > 99 ? '99+' : friend.un_read_count }}
               </div>
-              <div v-if="friend.unreadCount > 0" class="unread-badge">
-                {{ friend.unreadCount > 99 ? '99+' : friend.unreadCount }}
+              <div v-if="friend.last_message_time" class="message-time">
+                {{ friend.last_message_time }}
               </div>
             </div>
           </div>
diff --git a/apps/web-antd/src/views/business/chat/components/MediaPreview.vue b/apps/web-antd/src/views/business/chat/components/MediaPreview.vue
index a0bdaa15..6f58d8f9 100644
--- a/apps/web-antd/src/views/business/chat/components/MediaPreview.vue
+++ b/apps/web-antd/src/views/business/chat/components/MediaPreview.vue
@@ -1,133 +1,14 @@
-<template>
-  <!-- 图片预览组件 -->
-  <!--  <div
-        v-if="showImagePreview"
-        class="media-preview-overlay"
-        :class="{ 'dark': themeStore.isDarkMode }"
-        @click.self="hidePreview"
-    >
-      <div class="preview-container">
-        <button class="preview-close-btn" @click="hidePreview">
-          <i class="fas fa-times"></i>
-        </button>
-
-        <div class="image-preview-content">
-          <img
-              :src="mediaData"
-              :alt="'图片预览'"
-              class="preview-image"
-              @load="handleImageLoad"
-          />
-        </div>
-
-        <div class="preview-actions">
-          <button class="action-btn" @click="downloadMedia" title="下载">
-            <i class="fas fa-download"></i>
-          </button>
-          <button class="action-btn" @click="shareMedia" title="分享">
-            <i class="fas fa-share"></i>
-          </button>
-        </div>
-      </div>
-    </div>-->
-  <Image
-    :visible="showImagePreview"
-    :imgs="[{ src: mediaData }]"
-    @hide="hidePreview"
-  />
-
-  <!-- 视频预览组件 -->
-  <div
-    v-if="showVideoPreview"
-    class="media-preview-overlay video-preview"
-    :class="{ 'dark': themeStore.isDarkMode }"
-    @click.self="hidePreview"
-  >
-    <div class="video-preview-container" :class="{ 'portrait': isPortrait }">
-      <button class="preview-close-btn" @click="hidePreview">
-        <i class="fas fa-times"></i>
-      </button>
-
-      <div class="video-content">
-        <video
-          ref="videoPlayer"
-          :src="mediaData"
-          class="preview-video"
-          controls
-          autoplay
-          @loadedmetadata="handleVideoLoad"
-          @play="handleVideoPlay"
-          @pause="handleVideoPause"
-        />
-
-        <!-- 自定义视频控制栏 -->
-        <div class="video-controls" v-if="showControls">
-          <div class="controls-top">
-            <div class="video-title">视频预览</div>
-            <div class="video-info">
-              {{ formatDuration(currentTime) }} / {{ formatDuration(duration) }}
-            </div>
-          </div>
-
-          <div class="controls-bottom">
-            <button class="control-btn" @click="togglePlay">
-              <i class="fas" :class="isPlaying ? 'fa-pause' : 'fa-play'"></i>
-            </button>
-
-            <div class="progress-container">
-              <div class="progress-bar" @click="seekTo">
-                <div class="progress-fill" :style="{ width: progressPercent + '%' }"></div>
-                <div class="progress-thumb" :style="{ left: progressPercent + '%' }"></div>
-              </div>
-            </div>
-
-            <button class="control-btn" @click="toggleMute">
-              <i class="fas" :class="isMuted ? 'fa-volume-mute' : 'fa-volume-up'"></i>
-            </button>
-
-            <div class="volume-container">
-              <input
-                type="range"
-                min="0"
-                max="1"
-                step="0.1"
-                v-model="volume"
-                class="volume-slider"
-                @input="updateVolume"
-              />
-            </div>
-
-            <button class="control-btn" @click="toggleFullscreen">
-              <i class="fas fa-expand"></i>
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <div class="video-actions">
-        <button class="action-btn" @click="downloadMedia" title="下载">
-          <i class="fas fa-download"></i>
-        </button>
-        <button class="action-btn" @click="shareMedia" title="分享">
-          <i class="fas fa-share"></i>
-        </button>
-        <button class="action-btn" @click="togglePictureInPicture" title="画中画">
-          <i class="fas fa-external-link-alt"></i>
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup>
-import {ref, computed, watch, onMounted, onUnmounted} from 'vue';
-import {useMediaPreview} from "../composables/useMediaPreview.ts";
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+
 import { Image } from 'ant-design-vue';
+
+import { useMediaPreview } from '../composables/useMediaPreview.ts';
 // import VueEasyLightbox from 'vue-easy-lightbox';
-import {useThemeStore} from '../stores/theme.ts';
+import { useThemeStore } from '../stores/theme.ts';
 
 const themeStore = useThemeStore();
-const {visible, mediaData, hidePreview, previewType} = useMediaPreview();
+const { visible, mediaData, hidePreview, previewType } = useMediaPreview();
 
 // 视频相关状态
 const videoPlayer = ref(null);
@@ -141,8 +22,12 @@ const isPortrait = ref(false);
 const controlsTimeout = ref(null);
 
 // 计算属性
-const showImagePreview = computed(() => visible.value && previewType.value === 'image');
-const showVideoPreview = computed(() => visible.value && previewType.value === 'video');
+const showImagePreview = computed(
+  () => visible.value && previewType.value === 'image',
+);
+const showVideoPreview = computed(
+  () => visible.value && previewType.value === 'video',
+);
 
 const progressPercent = computed(() => {
   if (duration.value === 0) return 0;
@@ -233,11 +118,9 @@ const toggleFullscreen = () => {
 const togglePictureInPicture = async () => {
   if (videoPlayer.value) {
     try {
-      if (document.pictureInPictureElement) {
-        await document.exitPictureInPicture();
-      } else {
-        await videoPlayer.value.requestPictureInPicture();
-      }
+      await (document.pictureInPictureElement
+        ? document.exitPictureInPicture()
+        : videoPlayer.value.requestPictureInPicture());
     } catch (error) {
       console.error('画中画功能不支持:', error);
     }
@@ -285,9 +168,9 @@ const shareMedia = async () => {
     try {
       await navigator.share({
         title: '分享媒体',
-        url: mediaData.value.url
+        url: mediaData.value.url,
       });
-    } catch (error) {
+    } catch {
       console.log('分享取消或失败');
     }
   } else {
@@ -302,27 +185,31 @@ const handleKeydown = (event) => {
   if (!visible.value) return;
 
   switch (event.code) {
-    case 'Escape':
-      hidePreview();
-      break;
-    case 'Space':
-      if (showVideoPreview.value) {
-        event.preventDefault();
-        togglePlay();
-      }
-      break;
-    case 'ArrowLeft':
+    case 'ArrowLeft': {
       if (showVideoPreview.value && videoPlayer.value) {
         event.preventDefault();
         videoPlayer.value.currentTime -= 10;
       }
       break;
-    case 'ArrowRight':
+    }
+    case 'ArrowRight': {
       if (showVideoPreview.value && videoPlayer.value) {
         event.preventDefault();
         videoPlayer.value.currentTime += 10;
       }
       break;
+    }
+    case 'Escape': {
+      hidePreview();
+      break;
+    }
+    case 'Space': {
+      if (showVideoPreview.value) {
+        event.preventDefault();
+        togglePlay();
+      }
+      break;
+    }
   }
 };
 
@@ -346,6 +233,140 @@ onUnmounted(() => {
 });
 </script>
 
+<template>
+  <!-- 图片预览组件 -->
+  <!--  <div
+        v-if="showImagePreview"
+        class="media-preview-overlay"
+        :class="{ 'dark': themeStore.isDarkMode }"
+        @click.self="hidePreview"
+    >
+      <div class="preview-container">
+        <button class="preview-close-btn" @click="hidePreview">
+          <i class="fas fa-times"></i>
+        </button>
+
+        <div class="image-preview-content">
+          <img
+              :src="mediaData"
+              :alt="'图片预览'"
+              class="preview-image"
+              @load="handleImageLoad"
+          />
+        </div>
+
+        <div class="preview-actions">
+          <button class="action-btn" @click="downloadMedia" title="下载">
+            <i class="fas fa-download"></i>
+          </button>
+          <button class="action-btn" @click="shareMedia" title="分享">
+            <i class="fas fa-share"></i>
+          </button>
+        </div>
+      </div>
+    </div>-->
+  <Image
+    :imgs="[{ src: mediaData }]"
+    :visible="showImagePreview"
+    @hide="hidePreview"
+  />
+
+  <!-- 视频预览组件 -->
+  <div
+    v-if="showVideoPreview"
+    :class="{ dark: themeStore.isDarkMode }"
+    class="media-preview-overlay video-preview"
+    @click.self="hidePreview"
+  >
+    <div :class="{ portrait: isPortrait }" class="video-preview-container">
+      <button class="preview-close-btn" @click="hidePreview">
+        <i class="fas fa-times"></i>
+      </button>
+
+      <div class="video-content">
+        <video
+          ref="videoPlayer"
+          :src="mediaData"
+          autoplay
+          class="preview-video"
+          controls
+          @loadedmetadata="handleVideoLoad"
+          @pause="handleVideoPause"
+          @play="handleVideoPlay"
+        ></video>
+
+        <!-- 自定义视频控制栏 -->
+        <div v-if="showControls" class="video-controls">
+          <div class="controls-top">
+            <div class="video-title">视频预览</div>
+            <div class="video-info">
+              {{ formatDuration(currentTime) }} / {{ formatDuration(duration) }}
+            </div>
+          </div>
+
+          <div class="controls-bottom">
+            <button class="control-btn" @click="togglePlay">
+              <i :class="isPlaying ? 'fa-pause' : 'fa-play'" class="fas"></i>
+            </button>
+
+            <div class="progress-container">
+              <div class="progress-bar" @click="seekTo">
+                <div
+                  :style="{ width: `${progressPercent}%` }"
+                  class="progress-fill"
+                ></div>
+                <div
+                  :style="{ left: `${progressPercent}%` }"
+                  class="progress-thumb"
+                ></div>
+              </div>
+            </div>
+
+            <button class="control-btn" @click="toggleMute">
+              <i
+                :class="isMuted ? 'fa-volume-mute' : 'fa-volume-up'"
+                class="fas"
+              ></i>
+            </button>
+
+            <div class="volume-container">
+              <input
+                v-model="volume"
+                class="volume-slider"
+                max="1"
+                min="0"
+                step="0.1"
+                type="range"
+                @input="updateVolume"
+              />
+            </div>
+
+            <button class="control-btn" @click="toggleFullscreen">
+              <i class="fas fa-expand"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="video-actions">
+        <button class="action-btn" title="下载" @click="downloadMedia">
+          <i class="fas fa-download"></i>
+        </button>
+        <button class="action-btn" title="分享" @click="shareMedia">
+          <i class="fas fa-share"></i>
+        </button>
+        <button
+          class="action-btn"
+          title="画中画"
+          @click="togglePictureInPicture"
+        >
+          <i class="fas fa-external-link-alt"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style scoped>
 .media-preview-overlay {
   position: fixed;
diff --git a/apps/web-antd/src/views/business/chat/components/MessageBubble.vue b/apps/web-antd/src/views/business/chat/components/MessageBubble.vue
index 8b9466fe..dea76785 100644
--- a/apps/web-antd/src/views/business/chat/components/MessageBubble.vue
+++ b/apps/web-antd/src/views/business/chat/components/MessageBubble.vue
@@ -1,129 +1,14 @@
-<template>
-  <div class="flex items-start gap-3 mb-4" :class="isSent ? 'flex-row-reverse' : 'flex-row'">
-    <!-- 头像 -->
-    <div
-      class="w-10 h-10 rounded-full flex items-center justify-center text-white font-bold text-sm flex-shrink-0 cursor-pointer"
-      :style="avatarStyle"
-      @click="showUserProfile"
-    >
-      {{ senderInfo.avatar }}
-    </div>
-
-    <!-- 消息内容区域 -->
-    <div class="flex flex-col max-w-xs md:max-w-md lg:max-w-lg xl:max-w-xl"
-         :class="isSent ? 'items-end' : 'items-start'">
-      <!-- 发送者名称 -->
-      <div class="text-xs text-gray-500 dark:text-gray-400 mb-1 px-2">
-        {{ senderInfo.nick_name }}
-      </div>
-
-      <!-- 消息气泡 -->
-      <div
-        class="rounded-2xl p-4 shadow-sm relative"
-        :class="bubbleClasses"
-      >
-        <!-- 图片消息 -->
-        <div
-          v-if="message.type === 'image'"
-          class="cursor-pointer relative"
-          @click="handlePreviewMedia(message.content, 'image')"
-        >
-          <img
-            :src="message.content"
-            :alt="'图片消息'"
-            class="rounded-lg max-w-full"
-            @error="handleImageError"
-          />
-          <div
-            class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity bg-black/50 rounded-lg">
-            <i class="fas fa-search-plus text-white text-xl"></i>
-          </div>
-        </div>
-
-        <!-- 视频消息 -->
-        <div
-          v-else-if="message.type === 'video'"
-          class="cursor-pointer relative video-message"
-          @click="handlePreviewMedia(message.content, 'video')"
-        >
-          <video
-            :src="message.content"
-            class="rounded-lg max-w-full video-thumbnail"
-            preload="metadata"
-            @error="handleVideoError"
-          />
-          <div class="video-overlay">
-            <div class="play-button">
-              <i class="fas fa-play"></i>
-            </div>
-            <div class="video-duration" v-if="message.duration">
-              {{ formatDuration(message.duration) }}
-            </div>
-          </div>
-        </div>
-
-        <!-- URL链接消息 -->
-        <div v-else-if="message.type === 'url'" class="url-message">
-          <div class="url-preview" @click="openUrl(message.url)">
-            <div class="url-favicon">
-              <img :src="message.favicon" :alt="message.domain" v-if="message.favicon"/>
-              <i class="fas fa-link" v-else></i>
-            </div>
-            <div class="url-content">
-              <div class="url-title">{{ message.title || message.url }}</div>
-              <div class="url-description" v-if="message.description">
-                {{ message.description }}
-              </div>
-              <div class="url-domain">{{ message.domain }}</div>
-            </div>
-            <div class="url-thumbnail" v-if="message.thumbnail">
-              <img :src="message.thumbnail" :alt="message.title"/>
-            </div>
-          </div>
-          <div class="url-text" v-if="message.text">
-            {{ message.text }}
-          </div>
-        </div>
-
-        <!-- 音频消息 -->
-        <AudioMessage v-else-if="message.type === 'audio'" :message="message" :is-sent="isSent"/>
-
-        <!-- 通话消息 -->
-        <div v-else-if="message.type === 'video-call' || message.type === 'voice-call'"
-             class="call-message">
-          <div class="call-info">
-            <i class="fas" :class="message.type === 'video-call' ? 'fa-video' : 'fa-phone'"></i>
-            <span>{{ getCallStatusText(message.callStatus) }}</span>
-          </div>
-          <div class="call-duration" v-if="message.duration">
-            通话时长: {{ formatDuration(message.duration) }}
-          </div>
-        </div>
-
-        <!-- 文本消息 -->
-        <div v-else class="text-base leading-relaxed whitespace-pre-wrap">
-          <span v-html="formatTextWithLinks(message.content)"></span>
-        </div>
-      </div>
-
-      <!-- 消息时间和状态 -->
-      <div class="flex items-center gap-1 mt-1 text-xs text-gray-400 dark:text-gray-500 px-2">
-        <span>{{ message.time }}</span>
-        <i v-if="isSent && message.read" class="fas fa-check-double text-green-500"></i>
-        <i v-else-if="isSent && !message.read" class="fas fa-clock text-gray-400"></i>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup>
 import {computed} from 'vue';
+
+import { useUserStore } from '@vben/stores';
+
+import {Avatar, Image} from 'ant-design-vue';
+
 import previewMedia from '../composables/useMediaPreview.ts';
 import {useThemeStore} from '../stores/theme.ts';
 import AudioMessage from './AudioMessage.vue';
 
-const themeStore = useThemeStore();
-
 const props = defineProps({
   message: {
     type: Object,
@@ -141,8 +26,12 @@ const props = defineProps({
 
 const emit = defineEmits(['show-user-profile']);
 
+const userStore = useUserStore();
+
+const themeStore = useThemeStore();
+
 const avatarStyle = computed(() => ({
-  background: props.senderInfo.color
+  background: props.senderInfo.color,
 }));
 
 const bubbleClasses = computed(() => {
@@ -176,8 +65,11 @@ const formatDuration = (seconds) => {
 };
 
 const formatTextWithLinks = (text) => {
-  const urlRegex = /(https?:\/\/[^\s]+)/g;
-  return text.replace(urlRegex, '<a href="$1" target="_blank" rel="noopener noreferrer" class="text-link">$1</a>');
+  const urlRegex = /(https?:\/\/\S+)/g;
+  return text.replaceAll(
+    urlRegex,
+    '<a href="$1" target="_blank" rel="noopener noreferrer" class="text-link">$1</a>',
+  );
 };
 
 const openUrl = (url) => {
@@ -186,11 +78,11 @@ const openUrl = (url) => {
 
 const getCallStatusText = (status) => {
   const statusMap = {
-    'invite': '发起通话',
-    'accepted': '通话已接通',
-    'rejected': '通话被拒绝',
-    'ended': '通话已结束',
-    'missed': '未接通话'
+    invite: '发起通话',
+    accepted: '通话已接通',
+    rejected: '通话被拒绝',
+    ended: '通话已结束',
+    missed: '未接通话',
   };
   return statusMap[status] || '通话消息';
 };
@@ -204,6 +96,163 @@ const handleVideoError = (event) => {
 };
 </script>
 
+<template>
+  <div
+    :class="isSent ? 'flex-row-reverse' : 'flex-row'"
+    class="mb-4 flex items-start gap-3"
+  >
+    <!-- 头像 -->
+<!--    <div-->
+<!--      :style="avatarStyle"-->
+<!--      class="w-10 h-10 rounded-full flex items-center justify-center text-white font-bold text-sm flex-shrink-0 cursor-pointer"-->
+<!--      @click="showUserProfile"-->
+<!--    >-->
+    <div
+      v-if="isSent"
+      :style="avatarStyle"
+      class="rounded-full cursor-pointer"
+      @click="showUserProfile"
+    >
+      <Avatar v-if="userStore.userInfo?.avatar" :size="48" :src="userStore.userInfo?.avatar" />
+      <Avatar v-else :size="48">{{ userStore.userInfo?.nick_name.charAt(0) }}</Avatar>
+    </div>
+    <div
+      v-else
+      :style="avatarStyle"
+      class="rounded-full cursor-pointer"
+      @click="showUserProfile"
+    >
+      <Avatar v-if="senderInfo.avatar" :size="48" :src="senderInfo.avatar" />
+      <Avatar v-else :size="48">{{ senderInfo.nick_name.charAt(0) }}</Avatar>
+    </div>
+
+    <!-- 消息内容区域 -->
+    <div
+      :class="isSent ? 'items-end' : 'items-start'"
+      class="flex flex-col max-w-xs md:max-w-md lg:max-w-lg xl:max-w-xl"
+    >
+      <!-- 发送者名称 -->
+      <div v-if="isSent" class="mb-1 px-2 text-xs text-gray-500 dark:text-gray-400">
+        {{ userStore.userInfo?.nick_name }}
+      </div>
+      <div v-else class="mb-1 px-2 text-xs text-gray-500 dark:text-gray-400">
+        {{ senderInfo.nick_name }}
+      </div>
+
+      <!-- 消息气泡 -->
+      <div :class="bubbleClasses" class="relative rounded-2xl p-4 shadow-sm">
+        <!-- 图片消息 -->
+        <div
+          v-if="message.type === 'image'"
+          class="relative cursor-pointer"
+          @click="handlePreviewMedia(message.content, 'image')"
+        >
+          <Image
+            :src="message.content"
+            alt="图片消息"
+            class="rounded-lg max-w-full"
+            @error="handleImageError"
+          />
+        </div>
+
+        <!-- 视频消息 -->
+        <div
+          v-else-if="message.type === 'video'"
+          class="video-message relative cursor-pointer"
+          @click="handlePreviewMedia(message.content, 'video')"
+        >
+          <video
+            :src="message.content"
+            class="rounded-lg max-w-full video-thumbnail"
+            preload="metadata"
+            @error="handleVideoError"
+          ></video>
+          <div class="video-overlay">
+            <div class="play-button">
+              <i class="fas fa-play"></i>
+            </div>
+            <div v-if="message.duration" class="video-duration">
+              {{ formatDuration(message.duration) }}
+            </div>
+          </div>
+        </div>
+
+        <!-- URL链接消息 -->
+        <div v-else-if="message.type === 'url'" class="url-message">
+          <div class="url-preview" @click="openUrl(message.url)">
+            <div class="url-favicon">
+              <img
+                v-if="message.favicon"
+                :alt="message.domain"
+                :src="message.favicon"
+              />
+              <i v-else class="fas fa-link"></i>
+            </div>
+            <div class="url-content">
+              <div class="url-title">{{ message.title || message.url }}</div>
+              <div v-if="message.description" class="url-description">
+                {{ message.description }}
+              </div>
+              <div class="url-domain">{{ message.domain }}</div>
+            </div>
+            <div v-if="message.thumbnail" class="url-thumbnail">
+              <img :alt="message.title" :src="message.thumbnail" />
+            </div>
+          </div>
+          <div v-if="message.text" class="url-text">
+            {{ message.text }}
+          </div>
+        </div>
+
+        <!-- 音频消息 -->
+        <AudioMessage
+          v-else-if="message.type === 'audio'"
+          :is-sent="isSent"
+          :message="message"
+        />
+
+        <!-- 通话消息 -->
+        <div
+v-else-if="message.type === 'video-call' || message.type === 'voice-call'"
+          "
+          class="call-message"
+        >
+          <div class="call-info">
+            <i
+              :class="message.type === 'video-call' ? 'fa-video' : 'fa-phone'"
+              class="fas"
+            ></i>
+            <span>{{ getCallStatusText(message.callStatus) }}</span>
+          </div>
+          <div v-if="message.duration" class="call-duration">
+            通话时长: {{ formatDuration(message.duration) }}
+          </div>
+        </div>
+
+        <!-- 文本消息 -->
+        <div v-else class="whitespace-pre-wrap text-base leading-relaxed">
+          <span v-html="formatTextWithLinks(message.content)"></span>
+        </div>
+      </div>
+
+      <!-- 消息时间和状态 -->
+      <div
+        class="mt-1 flex items-center gap-1 px-2 text-xs text-gray-400 dark:text-gray-500"
+      >
+        <span>{{ message.time }}</span>
+        <i
+          v-if="isSent && message.read"
+          class="fas fa-check-double text-green-500"
+        ></i>
+        <i
+          v-else-if="isSent && !message.read"
+          class="fas fa-clock text-gray-400"
+        ></i>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style scoped>
 .message-bubble {
   position: relative;
@@ -249,7 +298,11 @@ const handleVideoError = (event) => {
 .video-overlay {
   position: absolute;
   inset: 0;
-  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
+  background: linear-gradient(
+    to bottom,
+    transparent 0%,
+    rgba(0, 0, 0, 0.3) 100%
+  );
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/apps/web-antd/src/views/business/chat/components/MessageInput.vue b/apps/web-antd/src/views/business/chat/components/MessageInput.vue
index 26eb5839..b56e2d68 100644
--- a/apps/web-antd/src/views/business/chat/components/MessageInput.vue
+++ b/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;
diff --git a/apps/web-antd/src/views/business/chat/components/MessageItem.vue b/apps/web-antd/src/views/business/chat/components/MessageItem.vue
deleted file mode 100644
index cf5e7bde..00000000
--- a/apps/web-antd/src/views/business/chat/components/MessageItem.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<template>
-  <div
-    class="inline-block max-w-xs md:max-w-md lg:max-w-lg xl:max-w-xl"
-    :class="isSent ? 'ml-auto' : 'mr-auto'"
-  >
-    <div
-      class="rounded-2xl p-4 shadow-sm"
-      :class="[
-                isSent
-                    ? 'bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-br-sm'
-                    : 'bg-white text-gray-800 border border-gray-200 rounded-bl-sm'
-            ]"
-    >
-      <!-- 图片消息 - 已修复 -->
-      <div
-        v-if="message.type === 'image'"
-        class="cursor-pointer relative"
-        @click="previewMedia(message.content, 'image')"
-      >
-        <a-image
-          :src="message.content"
-          :alt="'图片消息'"
-          class="rounded-lg max-w-full"
-          :preview="false"
-          @error="handleImageError"
-        />
-        <div
-          class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity bg-black/50 bg-opacity-30 rounded-lg">
-          <!-- 已移除不必要的放大镜图标 -->
-          <SearchOutlined class="text-white text-xl"/>
-        </div>
-      </div>
-
-      <!-- 视频消息 - 已修复 -->
-      <div
-        v-else-if="message.type === 'video'"
-        class="cursor-pointer relative"
-        @click="previewMedia(message.content, 'video')"
-      >
-        <video
-          :src="message.content"
-          class="rounded-lg max-w-full max-h-64"
-          preload="metadata"
-          @error="handleVideoError"
-        />
-        <div
-          class="absolute inset-0 flex items-center justify-center bg-black/50 bg-opacity-30 rounded-lg">
-          <PlayCircleOutlined class="text-white text-3xl"/>
-        </div>
-      </div>
-
-      <!-- 音频消息 -->
-      <AudioMessage v-else-if="message.type === 'audio'" :message="message"/>
-
-      <!-- 文本消息 -->
-      <div v-else class="text-base leading-relaxed">
-        {{ message.content }}
-      </div>
-
-      <!-- 消息时间和状态 -->
-      <div class="flex items-center justify-end gap-1 mt-2 text-xs opacity-70">
-        <span>{{ message.time }}</span>
-        <CheckOutlined v-if="isSent" class="text-green-400"/>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import {defineProps} from 'vue';
-import {PlayCircleOutlined, CheckOutlined, SearchOutlined} from '@ant-design/icons-vue';
-import {useMediaPreview} from '../composables/useMediaPreview.ts';
-import AudioMessage from './AudioMessage.vue';
-
-const {previewMedia} = useMediaPreview();
-
-const handleImageError = (event) => {
-  console.error('图片加载失败:', event.target.src);
-  event.target.style.display = 'none';
-};
-
-const handleVideoError = (event) => {
-  console.error('视频加载失败:', event.target.src);
-  event.target.style.display = 'none';
-};
-
-defineProps({
-  message: {
-    type: Object,
-    required: true
-  },
-  isSent: {
-    type: Boolean,
-    default: false
-  }
-});
-</script>
diff --git a/apps/web-antd/src/views/business/chat/components/MessageList.vue b/apps/web-antd/src/views/business/chat/components/MessageList.vue
index bc3c1d4c..61647be4 100644
--- a/apps/web-antd/src/views/business/chat/components/MessageList.vue
+++ b/apps/web-antd/src/views/business/chat/components/MessageList.vue
@@ -1,39 +1,11 @@
-<template>
-  <div
-    ref="messagesContainer"
-    class="flex-1 p-5 overflow-y-auto bg-gray-50 dark:bg-gray-900 message-list-background"
-  >
-    <a-spin :spinning="loadingMessages" tip="加载消息中...">
-      <!-- 空状态 -->
-      <div v-if="!chatStore.messages.length && chatStore.currentFriend"
-           class="text-center text-gray-500 dark:text-gray-400 py-10">
-        <MessageOutlined class="text-4xl mb-2"/>
-        <p>开始与 {{ chatStore.currentFriend.nick_name }} 对话吧！</p>
-      </div>
-
-      <!-- 消息列表 -->
-      <div v-if="!loadingMessages">
-        <div
-          v-for="(msg, index) in chatStore.messages"
-          :key="index"
-          class="mb-6 clear-both"
-        >
-          <MessageBubble
-            :message="msg"
-            :is-sent="msg.senderId === userStore.currentUser.id"
-            :sender-info="getSenderInfo(msg)"
-          />
-        </div>
-      </div>
-    </a-spin>
-  </div>
-</template>
-
 <script setup>
-import {ref, nextTick, watch, computed} from 'vue';
-import {useUserStore} from '../stores/user.ts';
-import {useChatStore} from '../stores/chat.ts';
-import {MessageOutlined} from '@ant-design/icons-vue';
+import { nextTick, onMounted, ref, watch } from 'vue';
+
+import { MessageOutlined } from '@ant-design/icons-vue';
+import { Spin } from 'ant-design-vue';
+
+import { useChatStore } from '../stores/chat.ts';
+import { useUserStore } from '../stores/user.ts';
 import MessageBubble from './MessageBubble.vue';
 
 const userStore = useUserStore();
@@ -41,26 +13,43 @@ const chatStore = useChatStore();
 
 const messagesContainer = ref(null);
 const loadingMessages = ref(false);
+const loadingOlderMessages = ref(false); // 加载历史消息状态
+const isLoading = ref(false); // 加载历史消息状态
+// const chatStore.hasMore = ref(true); // 是否有更多历史消息
+const oldScrollHeight = ref(0); // 已加载次数
 
 // 获取发送者信息
 const getSenderInfo = (message) => {
-  if (message.senderId === userStore.currentUser.id) {
-    return {
-      name: userStore.currentUser.nick_name,
-      avatar: userStore.currentUser.nick_name.charAt(0),
-      color: userStore.currentUser.color || '#4cc9f0'
-    }
-  } else {
-    return {
-      name: chatStore.currentFriend?.nick_name || '未知用户',
-      avatar: chatStore.currentFriend?.nick_name.charAt(0) || '?',
-      color: chatStore.currentFriend?.color || '#ff6b6b'
-    }
-  }
-}
+  return message.senderId === userStore.currentUser.id
+    ? {
+        nick_name: userStore.currentUser.nick_name,
+        avatar: userStore.currentUser.nick_name.charAt(0),
+        color: userStore.currentUser.color || '#4cc9f0',
+      }
+    : {
+        nick_name: chatStore.currentFriend?.nick_name || '未知用户',
+        avatar:
+          chatStore.currentFriend?.avatar ||
+          chatStore.currentFriend?.nick_name.charAt(0) ||
+          '?',
+        color: chatStore.currentFriend?.color || '#ff6b6b',
+      };
+};
 
 // 滚动到底部
-const scrollToBottom = () => {
+const scrollToBottom = (type = 0) => {
+  if (type === 1) {
+    nextTick(() => {
+      console.table('高度', {
+        o: oldScrollHeight.value,
+        n: messagesContainer.value.scrollHeight,
+        '-': messagesContainer.value.scrollHeight - oldScrollHeight.value,
+      });
+      messagesContainer.value.scrollTop =
+        messagesContainer.value.scrollHeight - oldScrollHeight.value;
+    });
+    return;
+  }
   if (messagesContainer.value) {
     nextTick(() => {
       messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
@@ -68,17 +57,119 @@ const scrollToBottom = () => {
   }
 };
 
+// 加载历史消息
+const loadOlderMessages = async () => {
+  if (loadingOlderMessages.value || !chatStore.hasMore) return;
+
+  oldScrollHeight.value = messagesContainer.value.scrollHeight;
+  loadingOlderMessages.value = true;
+  isLoading.value = true;
+
+  try {
+    // 模拟网络请求延迟
+    await new Promise((resolve) => setTimeout(resolve, 1800));
+
+    // 生成模拟的历史消息
+    chatStore.generateOldMessages();
+
+  } finally {
+    loadingOlderMessages.value = false;
+  }
+};
+
+// 处理滚动事件
+const handleScroll = () => {
+  if (!messagesContainer.value) return;
+
+  const { scrollTop, scrollHeight, clientHeight } = messagesContainer.value;
+
+  // 滚动到顶部时加载更多
+  if (
+    scrollTop < 100 &&
+    !loadingOlderMessages.value &&
+    chatStore.hasMore
+  ) {
+    loadOlderMessages();
+  }
+};
+
 // 监听消息变化，自动滚动到底部
-watch(() => chatStore.messages.length, () => {
-  scrollToBottom();
-});
+watch(
+  () => chatStore.messages.length,
+  () => {
+    if (isLoading.value === true) {
+      isLoading.value = false;
+      scrollToBottom(1);
+      return;
+    }
+    scrollToBottom();
+  },
+);
 
 // 监听当前好友变化，重新加载消息
-watch(() => chatStore.currentFriend, () => {
+watch(
+  () => chatStore.currentFriend,
+  (newFriend, oldFriend) => {
+    if (newFriend?.id !== oldFriend?.id) {
+      // 重置加载状态
+      chatStore.hasMore = true;
+      scrollToBottom();
+    }
+  },
+);
+
+onMounted(() => {
   scrollToBottom();
 });
 </script>
 
+<template>
+  <div
+    ref="messagesContainer"
+    class="message-list-background flex-1 overflow-y-auto bg-gray-50 p-5 dark:bg-gray-900"
+    @scroll="handleScroll"
+  >
+    <Spin :spinning="loadingMessages" tip="加载消息中...">
+      <!-- 空状态 -->
+      <div
+        v-if="chatStore.messages.length === 0 && chatStore.currentFriend"
+        class="py-10 text-center text-gray-500 dark:text-gray-400"
+      >
+        <MessageOutlined class="mb-2 text-4xl" />
+        <p>开始与 {{ chatStore.currentFriend.nick_name }} 对话吧！</p>
+      </div>
+
+      <!-- 消息列表 -->
+      <div v-if="!loadingMessages">
+        <!-- 顶部加载提示 -->
+        <div v-if="loadingOlderMessages" class="py-3 text-center">
+          <Spin size="small" tip="加载历史消息中..." />
+        </div>
+
+        <!-- 没有更多消息提示 -->
+        <div
+          v-if="!chatStore.hasMore"
+          class="py-3 text-center text-sm text-gray-400"
+        >
+          没有更多消息了
+        </div>
+
+        <div
+          v-for="(msg, index) in chatStore.messages"
+          :key="msg.id || index"
+          class="clear-both mb-6"
+        >
+          <MessageBubble
+            :is-sent="msg.isSent"
+            :message="msg"
+            :sender-info="getSenderInfo(msg)"
+          />
+        </div>
+      </div>
+    </Spin>
+  </div>
+</template>
+
 <style>
 .message-list-background {
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" opacity="0.03"><rect width="100" height="100" fill="none"/><path d="M0,0 L100,100 M100,0 L0,100" stroke="currentColor"/></svg>');
diff --git a/apps/web-antd/src/views/business/chat/composables/useFileUpload.ts b/apps/web-antd/src/views/business/chat/composables/useFileUpload.ts
index 8b08f34e..37a2c7c9 100644
--- a/apps/web-antd/src/views/business/chat/composables/useFileUpload.ts
+++ b/apps/web-antd/src/views/business/chat/composables/useFileUpload.ts
@@ -1,6 +1,7 @@
 import {nextTick, ref} from 'vue';
 
 import {message} from 'ant-design-vue';
+import {uploadChatFile} from "#/api/core/upload";
 
 export function useFileUpload() {
   const uploadPreview = ref(null);
@@ -80,23 +81,37 @@ export function useFileUpload() {
       return;
     }
 
-    const reader = new FileReader();
-    reader.addEventListener('load', (e) => {
+    uploadChatFile({
+      file,
+    }).then((res) => {
       uploadPreview.value = {
         type: detectedType,
-        url: e.target.result,
+        url: res.url,
         name: file.name,
         size: file.size,
         file,
       };
     });
-
-    reader.onerror = (error) => {
-      console.error('文件读取失败:', error);
-      message.error('文件读取失败，请重试');
-    };
-
-    reader.readAsDataURL(file);
+    // const reader = new FileReader();
+    // reader.addEventListener('load', (e) => {
+    //   console.log(file, '上传file')
+    //   console.log(e, '上传')
+    //   uploadPreview.value = {
+    //     type: detectedType,
+    //     url: e.target.result,
+    //     name: file.name,
+    //     size: file.size,
+    //     file,
+    //   };
+    // });
+    //
+    // console.log('上传文件')
+    // reader.onerror = (error) => {
+    //   console.error('文件读取失败:', error);
+    //   message.error('文件读取失败，请重试');
+    // };
+    //
+    // reader.readAsDataURL(file);
     event.target.value = '';
   };
 
diff --git a/apps/web-antd/src/views/business/chat/composables/useRecording.ts b/apps/web-antd/src/views/business/chat/composables/useRecording.ts
index df049726..0e0ec4ae 100644
--- a/apps/web-antd/src/views/business/chat/composables/useRecording.ts
+++ b/apps/web-antd/src/views/business/chat/composables/useRecording.ts
@@ -1,6 +1,7 @@
 import { ref } from 'vue';
 
 import { message } from 'ant-design-vue';
+import {uploadChatFile} from "#/api/core/upload";
 
 export function useRecording() {
   const isRecording = ref(false);
@@ -26,21 +27,23 @@ export function useRecording() {
 
         mediaRecorder.value.onstop = () => {
           const audioBlob = new Blob(audioChunks.value, { type: 'audio/wav' });
-          const audioUrl = URL.createObjectURL(audioBlob);
           const duration = Math.floor(
             (Date.now() - recordingStartTime.value) / 1000,
           );
 
-          console.log('   aaa', 'ssssssssssssssss');
-          // 触发音频消息发送事件
-          const event = new CustomEvent('audioRecorded', {
-            detail: {
-              url: audioUrl,
-              duration,
-              blob: audioBlob,
-            },
+          uploadChatFile({
+            file: audioBlob,
+          }).then((res) => {
+            // 触发音频消息发送事件
+            const event = new CustomEvent('audioRecorded', {
+              detail: {
+                url: res.url,
+                duration,
+                blob: audioBlob,
+              },
+            });
+            window.dispatchEvent(event);
           });
-          window.dispatchEvent(event);
 
           // 停止所有音频轨道
           stream.getTracks().forEach((track) => track.stop());
diff --git a/apps/web-antd/src/views/business/chat/stores/chat.ts b/apps/web-antd/src/views/business/chat/stores/chat.ts
index e62f27f0..94f01a8b 100644
--- a/apps/web-antd/src/views/business/chat/stores/chat.ts
+++ b/apps/web-antd/src/views/business/chat/stores/chat.ts
@@ -1,236 +1,294 @@
-import {defineStore} from "pinia"
-import {ref, computed, watch} from "vue"
-import {chatDB} from "../utils/db"
-import {useWebRTC} from "../composables/useWebRTC"
-import {useUserStore} from "../stores/user"
-import {sendCallSignal, callAPI} from "../utils/request.ts"
-import {getChatFriendsListApi} from "#/views/business/chat/api";
+import { computed, ref, watch } from 'vue';
 
-export const useChatStore = defineStore("chat", () => {
-  const friends = ref([])
-  const currentFriend = ref(null)
-  const messages = ref([])
-  const connectionStatus = ref("disconnected")
-  const socket = ref(null)
+import { defineStore } from 'pinia';
+
+import { playOnceAndDestroySys } from '#/util/tool';
+import {
+  getChatFriendsListApi,
+  getChatMessageListApi,
+} from '#/views/business/chat/api';
+
+import { useWebRTC } from '../composables/useWebRTC';
+import { useUserStore } from '../stores/user';
+// import { chatDB } from '../utils/db';
+import { callAPI, sendCallSignal } from '../utils/request.ts';
+
+export const useChatStore = defineStore('chat', () => {
+  const friends = ref([]);
+  const currentFriend = ref(null);
+  const messages = ref([]);
+  const connectionStatus = ref('disconnected');
+  const socket = ref(null);
 
   // 通话相关状态增强
-  const currentCall = ref(null)
-  const incomingCall = ref(null)
-  const callStatus = ref("idle") // idle, calling, ringing, connecting, ongoing, ended, disconnected, hangup
-  const callError = ref(null)
-  const callConnectionStatus = ref("")
-  const callTimeout = ref(null)
+  const currentCall = ref(null);
+  const incomingCall = ref(null);
+  const callStatus = ref('idle'); // idle, calling, ringing, connecting, ongoing, ended, disconnected, hangup
+  const callError = ref(null);
+  const callConnectionStatus = ref('');
+  const callTimeout = ref(null);
+  const hasMore = ref(true);
 
-  const webrtc = useWebRTC()
-  const userStore = useUserStore()
+  const webrtc = useWebRTC();
+  const userStore = useUserStore();
+
+  const lastMessageId = ref(0);
 
   // 计算属性
-  const isConnected = computed(() => connectionStatus.value === "connected")
-  const isInCall = computed(() => ["calling", "ringing", "connecting", "ongoing"].includes(callStatus.value))
-  const isCalling = computed(() => callStatus.value === "calling")
-  const isRinging = computed(() => callStatus.value === "ringing")
-  const isConnecting = computed(() => callStatus.value === "connecting")
-  const isOngoingCall = computed(() => callStatus.value === "ongoing")
-  const isDisconnected = computed(() => callStatus.value === "disconnected")
-  const isHangup = computed(() => callStatus.value === "hangup")
+  const isConnected = computed(() => connectionStatus.value === 'connected');
+  const isInCall = computed(() =>
+    ['calling', 'connecting', 'ongoing', 'ringing'].includes(callStatus.value),
+  );
+  const isCalling = computed(() => callStatus.value === 'calling');
+  const isRinging = computed(() => callStatus.value === 'ringing');
+  const isConnecting = computed(() => callStatus.value === 'connecting');
+  const isOngoingCall = computed(() => callStatus.value === 'ongoing');
+  const isDisconnected = computed(() => callStatus.value === 'disconnected');
+  const isHangup = computed(() => callStatus.value === 'hangup');
 
+  // 获取历史消息
+  const generateOldMessages = () => {
+    getChatMessageListApi({
+      room_id: currentFriend.value.room_id,
+      last_message_id: lastMessageId.value,
+    }).then((res) => {
+      lastMessageId.value = res.last_message_id;
+
+      if (res.count === 0) {
+        hasMore.value = false;
+        return;
+      }
+      const newMessages = checkMyMessage(res.list, currentFriend.value.id);
+      messages.value.unshift(...newMessages);
+      console.log('load message ok', hasMore.value);
+    });
+  };
   // 时间戳日志函数
   const logWithTime = (level, message, ...args) => {
-    const timestamp = new Date().toLocaleTimeString("zh-CN", {
+    const timestamp = new Date().toLocaleTimeString('zh-CN', {
       hour12: false,
-      hour: "2-digit",
-      minute: "2-digit",
-      second: "2-digit",
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
       fractionalSecondDigits: 3,
-    })
+    });
 
     switch (level) {
-      case "log":
-        console.log(`[${timestamp}] ${message}`, ...args)
-        break
-      case "error":
-        console.error(`[${timestamp}] ${message}`, ...args)
-        break
-      case "warn":
-        console.warn(`[${timestamp}] ${message}`, ...args)
-        break
-      default:
-        console.log(`[${timestamp}] ${message}`, ...args)
+      case 'error': {
+        console.error(`[${timestamp}] ${message}`, ...args);
+        break;
+      }
+      case 'log': {
+        console.log(`[${timestamp}] ${message}`, ...args);
+        break;
+      }
+      case 'warn': {
+        console.warn(`[${timestamp}] ${message}`, ...args);
+        break;
+      }
+      default: {
+        console.log(`[${timestamp}] ${message}`, ...args);
+      }
     }
-  }
+  };
 
   // 监听通话状态变化
   watch(
     () => callStatus.value,
     (newStatus) => {
-      logWithTime("log", "通话状态变化:", newStatus)
+      logWithTime('log', '通话状态变化:', newStatus);
     },
-  )
+  );
 
   // 重置所有通话状态
   const resetCallState = () => {
-    clearCallTimeout()
-    callStatus.value = "idle"
-    callError.value = null
-    callConnectionStatus.value = ""
-    currentCall.value = null
-    incomingCall.value = null
-  }
+    clearCallTimeout();
+    callStatus.value = 'idle';
+    callError.value = null;
+    callConnectionStatus.value = '';
+    currentCall.value = null;
+    incomingCall.value = null;
+  };
 
   // 清除通话超时
   const clearCallTimeout = () => {
     if (callTimeout.value) {
-      clearTimeout(callTimeout.value)
-      callTimeout.value = null
+      clearTimeout(callTimeout.value);
+      callTimeout.value = null;
     }
-  }
+  };
 
   // 设置通话超时
-  const setCallTimeout = (callback, duration = 30000) => {
-    clearCallTimeout()
+  const setCallTimeout = (callback, duration = 30_000) => {
+    clearCallTimeout();
     callTimeout.value = setTimeout(() => {
-      callback()
-      clearCallTimeout()
-    }, duration)
-  }
+      callback();
+      clearCallTimeout();
+    }, duration);
+  };
 
   // 发送通话信令
   const sendCallSignalInternal = async (signal) => {
     try {
-      logWithTime("log", "发送通话信令:", signal)
+      logWithTime('log', '发送通话信令:', signal);
 
       if (!userStore.currentUser?.doctor_id) {
-        throw new Error("用户未登录")
+        throw new Error('用户未登录');
       }
 
       if (!signal.receiver_user_id) {
-        throw new Error("缺少接收方用户ID")
+        throw new Error('缺少接收方用户ID');
       }
 
       if (!signal.call_id) {
-        throw new Error("缺少通话ID")
+        throw new Error('缺少通话ID');
       }
 
       if (!signal.call_status) {
-        throw new Error("缺少通话状态")
+        throw new Error('缺少通话状态');
       }
 
       const requestData = {
         sender_user_id: userStore.currentUser.id,
         receiver_user_id: signal.receiver_user_id,
-        message_type: signal.call_type || (signal.call_status === "invite" ? 6 : 7),
+        message_type:
+          signal.call_type || (signal.call_status === 'invite' ? 6 : 7),
         message_content: JSON.stringify(signal.data || {}),
         call_id: signal.call_id,
         call_status: signal.call_status,
-      }
+      };
 
-      logWithTime("log", "发送通话信令请求数据:", requestData)
+      logWithTime('log', '发送通话信令请求数据:', requestData);
 
-      const response = await sendCallSignal(requestData)
-      logWithTime("log", "发送通话信令成功:", signal)
-      return response
+      const response = await sendCallSignal(requestData);
+      logWithTime('log', '发送通话信令成功:', signal);
+      return response;
     } catch (error) {
-      logWithTime("error", "发送通话信令失败:", error)
-      throw error
+      logWithTime('error', '发送通话信令失败:', error);
+      throw error;
     }
-  }
+  };
 
   // 初始化数据库
   const initDB = async () => {
     try {
-      await chatDB.init()
-      logWithTime("log", "数据库初始化成功")
+      // await chatDB.init();
+      logWithTime('log', '数据库初始化成功');
     } catch (error) {
-      logWithTime("error", "数据库初始化失败:", error)
+      logWithTime('error', '数据库初始化失败:', error);
     }
-  }
+  };
 
   // 加载好友列表
   const loadFriends = async (presetUsers, currentUserId) => {
     try {
       getChatFriendsListApi().then((res) => {
-        console.log('好友列表', res)
+        console.log('好友列表', res);
         friends.value = res;
       });
-
-      // let friendList = await chatDB.getFriends(currentUserId)
-      //
-      // if (friendList.length === 0) {
-      //   friendList = presetUsers.filter((user) => user.id !== currentUserId)
-      //
-      //   for (const friend of friendList) {
-      //     await chatDB.saveFriend(
-      //       {
-      //         ...friend,
-      //         lastMessage: "",
-      //         unreadCount: 0,
-      //       },
-      //       currentUserId,
-      //     )
-      //   }
-      // }
-      //
-      // friends.value = friendList
     } catch (error) {
-      logWithTime("error", "加载好友列表失败:", error)
-      const friendList = presetUsers.filter((user) => user.id !== currentUserId)
+      logWithTime('error', '加载好友列表失败:', error);
+      const friendList = presetUsers.filter(
+        (user) => user.id !== currentUserId,
+      );
       friendList.forEach((friend) => {
-        friend.lastMessage = ""
-        friend.unreadCount = 0
-      })
-      friends.value = friendList
+        friend.last_message = '';
+        friend.un_read_count = 0;
+      });
+      friends.value = friendList;
     }
-  }
+  };
 
   // 设置当前好友
   const setCurrentFriend = (friend) => {
-    currentFriend.value = friend
+    currentFriend.value = friend;
     if (friend) {
-      friend.unreadCount = 0
+      friend.un_read_count = 0;
     }
-  }
+  };
 
   // 切换当前聊天好友
   const switchFriend = async (friend, currentUserId) => {
-    currentFriend.value = friend
+    friend.un_read_count = 0;
+    // 循环好友列表，找到该好友，然后吧 un_read_count 设置为0
+    friends.value.forEach((friend) => {
+      if (friend.id === currentFriend.value.id) {
+        friend.un_read_count = 0;
+      }
+    });
+    currentFriend.value = friend;
 
-    friend.unreadCount = 0
-    await chatDB.clearUnreadCount(friend.id)
-
-    try {
-      const chatHistory = await chatDB.getChatHistory(currentUserId, friend.id)
-      messages.value = chatHistory.sort((a, b) => a.timestamp - b.timestamp)
-    } catch (error) {
-      logWithTime("error", "加载聊天记录失败:", error)
-      messages.value = []
-    }
-  }
+    hasMore.value = true;
+    // getChatMessageListApi
+    getChatMessageListApi({
+      room_id: friend.room_id,
+    }).then((res) => {
+      lastMessageId.value = res.last_message_id;
+      messages.value = checkMyMessage(res.list, friend.id);
+    });
+  };
+  /**
+   * 转化消息格式
+   * @param messages
+   * @param currentUserId
+   */
+  const checkMyMessage = (messages, currentUserId) => {
+    return messages.map((message) => {
+      return {
+        id: message.id,
+        type: getMessageType(message.message_type),
+        content: message.message_content,
+        time: message.created_at_text,
+        timestamp: message.created_at,
+        senderId: message.sender_user_id,
+        read: true,
+        duration: message.duration,
+        chatKey: message.id,
+        isSent: message.sender_user_id !== currentUserId,
+      };
+    });
+  };
 
   // 添加消息
   const addMessage = async (message, currentUserId) => {
-    messages.value.push(message)
+    messages.value.push(message);
 
-    const friend = friends.value.find((f) => f.id === message.senderId || f.id === currentFriend.value?.id)
+    const friend = friends.value.find(
+      (f) => f.id === message.senderId || f.id === currentFriend.value?.id,
+    );
     if (friend) {
-      let lastMessage = message.content
-      if (message.type === "image") lastMessage = "[图片]"
-      if (message.type === "video") lastMessage = "[视频]"
-      if (message.type === "audio") lastMessage = "[语音]"
-      if (message.type === "video-call" || message.type === "audio-call") lastMessage = "[通话]"
+      let lastMessage = message.content;
+      if (message.type === 'image') lastMessage = '[图片]';
+      if (message.type === 'video') lastMessage = '[视频]';
+      if (message.type === 'audio') lastMessage = '[语音]';
+      if (message.type === 'video-call' || message.type === 'audio-call')
+        lastMessage = '[通话]';
 
-      friend.lastMessage = lastMessage.length > 20 ? lastMessage.substring(0, 20) + "..." : lastMessage
+      friend.last_message =
+        lastMessage.length > 20
+          ? `${lastMessage.slice(0, 20)}...`
+          : lastMessage;
 
-      await chatDB.updateFriendLastMessage(friend.id, currentUserId, friend.lastMessage, 0)
+      // await chatDB.updateFriendLastMessage(
+      //   friend.id,
+      //   currentUserId,
+      //   friend.last_message,
+      //   0,
+      // );
     }
 
-    if (currentFriend.value && friend && friend.id === currentFriend.value.id) {
-      try {
-        await chatDB.saveMessage(message, currentUserId, currentFriend.value.id)
-      } catch (error) {
-        logWithTime("error", "保存消息失败:", error)
-      }
-    }
-  }
+    // if (currentFriend.value && friend && friend.id === currentFriend.value.id) {
+    //   try {
+    //     await chatDB.saveMessage(
+    //       message,
+    //       currentUserId,
+    //       currentFriend.value.id,
+    //     );
+    //   } catch (error) {
+    //     logWithTime('error', '保存消息失败:', error);
+    //   }
+    // }
+  };
 
   // 处理接收到的消息
   const handleIncomingMessage = async (messageData, currentUserId) => {
@@ -239,250 +297,305 @@ export const useChatStore = defineStore("chat", () => {
     //   return
     // }
 
-    const senderId = messageData.sender_user_id
-    const receiverId = messageData.receiver_user_id
+    const senderId = messageData.sender_user_id;
+    const receiverId = messageData.receiver_user_id;
 
-    if (receiverId !== 'doctor-' + currentUserId) return
+    if (receiverId !== `doctor-${currentUserId}`) return;
 
     if (messageData.call_id || messageData.call_status) {
-      handleCallSignal(messageData)
-      return
+      handleCallSignal(messageData);
+      return;
     }
 
     const newMessage = {
       type: getMessageType(messageData.message_type),
       content: messageData.content,
       time: new Date().toLocaleTimeString().slice(0, 5),
-      senderId: senderId,
+      senderId,
       read: false,
       duration: messageData.duration || 0,
       timestamp: Date.now(),
-    }
+    };
 
     try {
-      await chatDB.saveMessage(newMessage, currentUserId, senderId)
+      // await chatDB.saveMessage(newMessage, currentUserId, senderId);
 
       if (currentFriend.value && senderId == currentFriend.value.id) {
-        newMessage.read = true
-        messages.value.push(newMessage)
+        newMessage.read = true;
+        messages.value.push(newMessage);
       } else {
-        const friend = friends.value.find((f) => f.id == senderId)
+        const friend = friends.value.find((f) => f.id == senderId);
         if (friend) {
-          friend.unreadCount = (friend.unreadCount || 0) + 1
+          friend.un_read_count = (friend.un_read_count || 0) + 1;
         }
       }
 
-      const friend = friends.value.find((f) => f.id == senderId)
+      const friend = friends.value.find((f) => f.id == senderId);
       if (friend) {
-        let lastMessage = newMessage.content
-        if (newMessage.type === "image") lastMessage = "[图片]"
-        if (newMessage.type === "video") lastMessage = "[视频]"
-        if (newMessage.type === "audio") lastMessage = "[语音]"
-        if (newMessage.type === "video-call" || newMessage.type === "audio-call") lastMessage = "[通话]"
-        friend.lastMessage = lastMessage
+        let lastMessage = newMessage.content;
+        if (newMessage.type === 'image') lastMessage = '[图片]';
+        if (newMessage.type === 'video') lastMessage = '[视频]';
+        if (newMessage.type === 'audio') lastMessage = '[语音]';
+        if (
+          newMessage.type === 'video-call' ||
+          newMessage.type === 'audio-call'
+        )
+          lastMessage = '[通话]';
+        friend.last_message = lastMessage;
+        // 使用js 播放这个音频一次 SysAudioMp3
+        playOnceAndDestroySys();
 
-        await chatDB.updateFriendLastMessage(friend.id, currentUserId, lastMessage, friend.unreadCount)
+        // await chatDB.updateFriendLastMessage(
+        //   friend.id,
+        //   currentUserId,
+        //   lastMessage,
+        //   friend.un_read_count,
+        // );
       }
     } catch (error) {
-      logWithTime("error", "处理接收消息失败:", error)
+      logWithTime('error', '处理接收消息失败:', error);
     }
-  }
+  };
 
   // 根据消息类型编号获取类型字符串
   const getMessageType = (type) => {
     const types = [
-      "text",
-      "image",
-      "audio",
-      "video",
-      "prescription",
-      "medical-record",
-      "video-call",
-      "audio-call",
-      "file",
-    ]
-    return types[type] || "text"
-  }
+      'text',
+      'image',
+      'audio',
+      'video',
+      'prescription',
+      'medical-record',
+      'video-call',
+      'audio-call',
+      'file',
+    ];
+    return types[type] || 'text';
+  };
 
   // 处理通话信令
   const handleCallSignal = (data) => {
-    logWithTime("log", "处理通话信令:", data)
-    logWithTime("log", "通话状态:", data.call_status)
+    logWithTime('log', '处理通话信令:', data);
+    logWithTime('log', '通话状态:', data.call_status);
 
     switch (data.call_status) {
-      case "invite":
-        handleIncomingCall(data)
-        break
-      case "accepted":
-        handleCallAccepted(data)
-        break
-      case "rejected":
-        handleCallRejected(data)
-        break
-      case "ended":
-        handleCallEnded(data)
-        break
-      case "offer":
-        handleOffer(data)
-        break
-      case "answer":
-        handleAnswer(data)
-        break
-      case "candidate":
-        handleIceCandidate(data)
-        break
-      case "no-answer":
-        handleCallNoAnswer(data)
-        break
-      case "connecting":
-        handleCallConnecting(data)
-        break
-      case "busy":
-        handleCallBusy(data)
-        break
-      case "hangup":
-        handleCallHangup(data)
-        break
-      case "disconnected":
-        handleCallDisconnected(data)
-        break
-      case "terminated":
-        handleCallTerminated(data)
-        break
-      case "failed":
-        handleCallFailed(data)
-        break
+      case 'accepted': {
+        handleCallAccepted(data);
+        break;
+      }
+      case 'answer': {
+        handleAnswer(data);
+        break;
+      }
+      case 'busy': {
+        handleCallBusy(data);
+        break;
+      }
+      case 'candidate': {
+        handleIceCandidate(data);
+        break;
+      }
+      case 'connecting': {
+        handleCallConnecting(data);
+        break;
+      }
+      case 'disconnected': {
+        handleCallDisconnected(data);
+        break;
+      }
+      case 'ended': {
+        handleCallEnded(data);
+        break;
+      }
+      case 'failed': {
+        handleCallFailed(data);
+        break;
+      }
+      case 'hangup': {
+        handleCallHangup(data);
+        break;
+      }
+      case 'invite': {
+        handleIncomingCall(data);
+        break;
+      }
+      case 'no-answer': {
+        handleCallNoAnswer(data);
+        break;
+      }
+      case 'offer': {
+        handleOffer(data);
+        break;
+      }
+      case 'rejected': {
+        handleCallRejected(data);
+        break;
+      }
+      case 'terminated': {
+        handleCallTerminated(data);
+        break;
+      }
     }
-  }
+  };
 
   // 修复问题2: 改进Offer处理，允许重新协商
   const handleOffer = async (data) => {
     if (incomingCall.value && incomingCall.value.callId === data.call_id) {
       // 修复问题1&2: 不再严格检查ongoing状态，允许重新协商
-      if (callStatus.value === "ongoing" && webrtc.isConnected.value) {
-        logWithTime("log", "通话已稳定连接，忽略重复的 Offer")
-        return
+      if (callStatus.value === 'ongoing' && webrtc.isConnected.value) {
+        logWithTime('log', '通话已稳定连接，忽略重复的 Offer');
+        return;
       }
 
       // 允许在connecting状态下重新处理offer（重新协商）
-      if (callStatus.value === "connecting" || callStatus.value === "failed") {
-        logWithTime("log", "连接中或失败状态，允许重新处理 Offer")
+      if (callStatus.value === 'connecting' || callStatus.value === 'failed') {
+        logWithTime('log', '连接中或失败状态，允许重新处理 Offer');
       }
 
       try {
-        const offer = JSON.parse(data.content || data.message_content || "{}")
+        const offer = JSON.parse(data.content || data.message_content || '{}');
 
-        logWithTime("log", "🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯")
-        logWithTime("log", "📥 收到对方 OFFER 信令:")
-        logWithTime("log", "📋 Offer 类型:", offer.type)
-        logWithTime("log", "📋 Offer SDP (前200字符):", offer.sdp ? offer.sdp.substring(0, 200) + "..." : "无SDP")
-        logWithTime("log", "📋 通话ID:", data.call_id)
-        logWithTime("log", "📋 发送方:", data.sender_user_id)
-        logWithTime("log", "📋 当前通话状态:", callStatus.value)
-        logWithTime("log", "📋 WebRTC连接状态:", webrtc.peerConnection.value?.connectionState)
-        logWithTime("log", "🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯")
+        logWithTime('log', '🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯');
+        logWithTime('log', '📥 收到对方 OFFER 信令:');
+        logWithTime('log', '📋 Offer 类型:', offer.type);
+        logWithTime(
+          'log',
+          '📋 Offer SDP (前200字符):',
+          offer.sdp ? `${offer.sdp.slice(0, 200)}...` : '无SDP',
+        );
+        logWithTime('log', '📋 通话ID:', data.call_id);
+        logWithTime('log', '📋 发送方:', data.sender_user_id);
+        logWithTime('log', '📋 当前通话状态:', callStatus.value);
+        logWithTime(
+          'log',
+          '📋 WebRTC连接状态:',
+          webrtc.peerConnection.value?.connectionState,
+        );
+        logWithTime('log', '🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯');
 
         // 修复问题3: 如果连接失败或不存在，重新创建
         if (
           !webrtc.peerConnection.value ||
-          webrtc.peerConnection.value.connectionState === "failed" ||
-          webrtc.peerConnection.value.connectionState === "closed"
+          webrtc.peerConnection.value.connectionState === 'failed' ||
+          webrtc.peerConnection.value.connectionState === 'closed'
         ) {
-          logWithTime("log", "重新创建 WebRTC 连接以处理 Offer")
-          webrtc.createPeerConnection(data.call_id, data.sender_user_id)
+          logWithTime('log', '重新创建 WebRTC 连接以处理 Offer');
+          webrtc.createPeerConnection(data.call_id, data.sender_user_id);
         }
 
-        const answer = await webrtc.createAnswer(offer, data.call_id, data.sender_user_id)
+        const answer = await webrtc.createAnswer(
+          offer,
+          data.call_id,
+          data.sender_user_id,
+        );
 
-        logWithTime("log", "🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯")
-        logWithTime("log", "📤 准备发送 ANSWER 信令:")
-        logWithTime("log", "📋 Answer 类型:", answer.type)
-        logWithTime("log", "📋 Answer SDP (前200字符):", answer.sdp ? answer.sdp.substring(0, 200) + "..." : "无SDP")
-        logWithTime("log", "📋 通话ID:", data.call_id)
-        logWithTime("log", "📋 接收方:", data.sender_user_id)
-        logWithTime("log", "🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯")
+        logWithTime('log', '🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯');
+        logWithTime('log', '📤 准备发送 ANSWER 信令:');
+        logWithTime('log', '📋 Answer 类型:', answer.type);
+        logWithTime(
+          'log',
+          '📋 Answer SDP (前200字符):',
+          answer.sdp ? `${answer.sdp.slice(0, 200)}...` : '无SDP',
+        );
+        logWithTime('log', '📋 通话ID:', data.call_id);
+        logWithTime('log', '📋 接收方:', data.sender_user_id);
+        logWithTime('log', '🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯');
 
-        await callAPI.sendAnswer(userStore.currentUser.id, data.sender_user_id, data.call_id, answer, data.message_type)
+        await callAPI.sendAnswer(
+          userStore.currentUser.id,
+          data.sender_user_id,
+          data.call_id,
+          answer,
+          data.message_type,
+        );
 
         // 更新状态为连接中
-        if (callStatus.value !== "ongoing") {
-          callStatus.value = "connecting"
-          callConnectionStatus.value = "正在建立连接..."
+        if (callStatus.value !== 'ongoing') {
+          callStatus.value = 'connecting';
+          callConnectionStatus.value = '正在建立连接...';
         }
 
-        logWithTime("log", "✅ 发送Answer成功")
+        logWithTime('log', '✅ 发送Answer成功');
       } catch (error) {
-        logWithTime("error", "❌ 处理Offer失败:", error)
+        logWithTime('error', '❌ 处理Offer失败:', error);
 
         // 修复问题3: 处理失败时尝试重连而不是直接拒绝
         if (webrtc.connectionAttempts.value < 3) {
-          logWithTime("log", "🔄 Offer处理失败，尝试重连")
+          logWithTime('log', '🔄 Offer处理失败，尝试重连');
           setTimeout(() => {
-            webrtc.attemptReconnection(data.call_id, data.sender_user_id)
-          }, 2000)
+            webrtc.attemptReconnection(data.call_id, data.sender_user_id);
+          }, 2000);
         } else {
-          rejectCall("failed")
+          rejectCall('failed');
         }
       }
     }
-  }
+  };
 
   // 修复问题2: 改进Answer处理，允许重新协商
   const handleAnswer = async (data) => {
     if (currentCall.value && currentCall.value.callId === data.call_id) {
       // 修复问题1&2: 不再严格检查ongoing状态，允许重新协商
-      if (callStatus.value === "ongoing" && webrtc.isConnected.value) {
-        logWithTime("log", "通话已稳定连接，忽略重复的 Answer")
-        return
+      if (callStatus.value === 'ongoing' && webrtc.isConnected.value) {
+        logWithTime('log', '通话已稳定连接，忽略重复的 Answer');
+        return;
       }
 
       // 允许在connecting状态下重新处理answer（重新协商）
-      if (callStatus.value === "connecting" || callStatus.value === "failed") {
-        logWithTime("log", "连接中或失败状态，允许重新处理 Answer")
+      if (callStatus.value === 'connecting' || callStatus.value === 'failed') {
+        logWithTime('log', '连接中或失败状态，允许重新处理 Answer');
       }
 
       try {
-        const answer = JSON.parse(data.content || data.message_content || "{}")
+        const answer = JSON.parse(data.content || data.message_content || '{}');
 
-        logWithTime("log", "🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯")
-        logWithTime("log", "📥 收到对方 ANSWER 信令:")
-        logWithTime("log", "📋 Answer 类型:", answer.type)
-        logWithTime("log", "📋 Answer SDP (前200字符):", answer.sdp ? answer.sdp.substring(0, 200) + "..." : "无SDP")
-        logWithTime("log", "📋 通话ID:", data.call_id)
-        logWithTime("log", "📋 发送方:", data.sender_user_id)
-        logWithTime("log", "📋 当前通话状态:", callStatus.value)
-        logWithTime("log", "📋 WebRTC连接状态:", webrtc.peerConnection.value?.connectionState)
-        logWithTime("log", "🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯")
+        logWithTime('log', '🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯');
+        logWithTime('log', '📥 收到对方 ANSWER 信令:');
+        logWithTime('log', '📋 Answer 类型:', answer.type);
+        logWithTime(
+          'log',
+          '📋 Answer SDP (前200字符):',
+          answer.sdp ? `${answer.sdp.slice(0, 200)}...` : '无SDP',
+        );
+        logWithTime('log', '📋 通话ID:', data.call_id);
+        logWithTime('log', '📋 发送方:', data.sender_user_id);
+        logWithTime('log', '📋 当前通话状态:', callStatus.value);
+        logWithTime(
+          'log',
+          '📋 WebRTC连接状态:',
+          webrtc.peerConnection.value?.connectionState,
+        );
+        logWithTime('log', '🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯');
 
-        await webrtc.setRemoteAnswer(answer)
+        await webrtc.setRemoteAnswer(answer);
 
-        callStatus.value = "connecting"
-        callConnectionStatus.value = "正在建立连接..."
+        callStatus.value = 'connecting';
+        callConnectionStatus.value = '正在建立连接...';
 
-        logWithTime("log", "✅ Answer处理成功，开始建立连接")
+        logWithTime('log', '✅ Answer处理成功，开始建立连接');
       } catch (error) {
-        logWithTime("error", "❌ 处理Answer失败:", error)
+        logWithTime('error', '❌ 处理Answer失败:', error);
 
         // 修复问题3: 处理失败时尝试重连而不是直接结束
         if (webrtc.connectionAttempts.value < 3) {
-          logWithTime("log", "🔄 Answer处理失败，尝试重连")
+          logWithTime('log', '🔄 Answer处理失败，尝试重连');
           setTimeout(() => {
-            webrtc.attemptReconnection(data.call_id, currentCall.value.peerId)
-          }, 2000)
+            webrtc.attemptReconnection(data.call_id, currentCall.value.peerId);
+          }, 2000);
         } else {
-          endCall("failed")
+          endCall('failed');
         }
       }
     }
-  }
+  };
 
   // 处理连接中状态
   const handleCallConnecting = (data) => {
-    callConnectionStatus.value = "正在连接..."
+    callConnectionStatus.value = '正在连接...';
     if (currentCall.value?.callId === data.call_id) {
-      callStatus.value = "connecting"
+      callStatus.value = 'connecting';
     }
-  }
+  };
 
   // 修复问题3: 改进通话失败处理，增加重连逻辑
   const handleCallFailed = (data) => {
@@ -490,204 +603,243 @@ export const useChatStore = defineStore("chat", () => {
       (currentCall.value && currentCall.value.callId === data.call_id) ||
       (incomingCall.value && incomingCall.value.callId === data.call_id)
     ) {
-      callError.value = "failed"
-      callConnectionStatus.value = "连接失败"
+      callError.value = 'failed';
+      callConnectionStatus.value = '连接失败';
 
-      const peerId = currentCall.value?.peerId || incomingCall.value?.callerId
-      const friend = friends.value.find((f) => f.id === peerId)
+      const peerId = currentCall.value?.peerId || incomingCall.value?.callerId;
+      const friend = friends.value.find((f) => f.id === peerId);
 
       // 修复问题3: 失败时尝试重连
       if (webrtc.connectionAttempts.value < 3) {
-        logWithTime("log", "🔄 通话失败，尝试重连")
-        callConnectionStatus.value = `连接失败，正在重试 (${webrtc.connectionAttempts.value + 1}/3)`
+        logWithTime('log', '🔄 通话失败，尝试重连');
+        callConnectionStatus.value = `连接失败，正在重试 (${webrtc.connectionAttempts.value + 1}/3)`;
 
         setTimeout(() => {
-          webrtc.attemptReconnection(data.call_id, peerId)
-        }, 3000)
+          webrtc.attemptReconnection(data.call_id, peerId);
+        }, 3000);
       } else {
         // 达到最大重试次数，记录失败消息
         if (friend) {
           const callMessage = {
             type:
-              currentCall.value?.callType === "video" || incomingCall.value?.callType === "video"
-                ? "video-call"
-                : "audio-call",
-            content: "[连接失败]",
+              currentCall.value?.callType === 'video' ||
+              incomingCall.value?.callType === 'video'
+                ? 'video-call'
+                : 'audio-call',
+            content: '[连接失败]',
             time: new Date().toLocaleTimeString().slice(0, 5),
             senderId: peerId,
             read: true,
             timestamp: Date.now(),
             duration: 0,
-          }
-          chatDB.saveMessage(callMessage, userStore.currentUser.id, friend.id)
+          };
+          // chatDB.saveMessage(callMessage, userStore.currentUser.id, friend.id);
 
-          friend.lastMessage = "[连接失败]"
-          chatDB.updateFriendLastMessage(friend.id, userStore.currentUser.id, "[连接失败]", friend.unreadCount)
+          friend.last_message = '[连接失败]';
+          // chatDB.updateFriendLastMessage(
+          //   friend.id,
+          //   userStore.currentUser.id,
+          //   '[连接失败]',
+          //   friend.un_read_count,
+          // );
         }
 
         setTimeout(() => {
-          resetCallState()
-        }, 5000)
+          resetCallState();
+        }, 5000);
       }
     }
-  }
+  };
 
   // 处理来电
   const handleIncomingCall = (data) => {
     if (isInCall.value) {
-      logWithTime("log", "当前正在通话中，发送忙线状态")
-      callAPI.sendBusy(userStore.currentUser.id, data.sender_user_id, data.call_id, data.message_type)
+      logWithTime('log', '当前正在通话中，发送忙线状态');
+      callAPI.sendBusy(
+        userStore.currentUser.id,
+        data.sender_user_id,
+        data.call_id,
+        data.message_type,
+      );
 
-      const friend = friends.value.find((f) => f.id === data.sender_user_id)
+      const friend = friends.value.find((f) => f.id === data.sender_user_id);
       if (friend) {
-        friend.lastMessage = "[未接来电]"
-        chatDB.updateFriendLastMessage(friend.id, userStore.currentUser.id, "[未接来电]", friend.unreadCount)
+        friend.last_message = '[未接来电]';
+        // chatDB.updateFriendLastMessage(
+        //   friend.id,
+        //   userStore.currentUser.id,
+        //   '[未接来电]',
+        //   friend.un_read_count,
+        // );
 
         const callMessage = {
-          type: data.message_type === 6 ? "video-call" : "audio-call",
-          content: "[未接来电]",
+          type: data.message_type === 6 ? 'video-call' : 'audio-call',
+          content: '[未接来电]',
           time: new Date().toLocaleTimeString().slice(0, 5),
           senderId: data.sender_user_id,
           read: true,
           timestamp: Date.now(),
           duration: 0,
-        }
-        chatDB.saveMessage(callMessage, userStore.currentUser.id, friend.id)
+        };
+        // chatDB.saveMessage(callMessage, userStore.currentUser.id, friend.id);
       }
 
-      return
+      return;
     }
 
-    resetCallState()
+    resetCallState();
 
     incomingCall.value = {
       callId: data.call_id,
       callerId: data.sender_user_id,
-      callType: data.message_type === 6 ? "video" : "audio",
+      callType: data.message_type === 6 ? 'video' : 'audio',
       content: data.content,
-    }
-    callStatus.value = "ringing"
-    callError.value = null
-    callConnectionStatus.value = "收到来电"
+    };
+    callStatus.value = 'ringing';
+    callError.value = null;
+    callConnectionStatus.value = '收到来电';
 
-    logWithTime("log", "收到来电:", incomingCall.value)
+    logWithTime('log', '收到来电:', incomingCall.value);
 
     setCallTimeout(() => {
-      if (callStatus.value === "ringing" && incomingCall.value) {
-        logWithTime("log", "来电超时，自动拒绝")
-        rejectCall("no-answer")
+      if (callStatus.value === 'ringing' && incomingCall.value) {
+        logWithTime('log', '来电超时，自动拒绝');
+        rejectCall('no-answer');
       }
-    }, 30000)
-  }
+    }, 30_000);
+  };
 
   // 修复问题2&3: 改进通话接受处理，增加重连机制
   const handleCallAccepted = async (data) => {
     if (currentCall.value && currentCall.value.callId === data.call_id) {
       // 修复问题2: 允许在连接失败后重新接受
-      if (callStatus.value === "ongoing" && webrtc.isConnected.value) {
-        logWithTime("log", "通话已稳定连接，忽略重复的 accepted 信令")
-        return
+      if (callStatus.value === 'ongoing' && webrtc.isConnected.value) {
+        logWithTime('log', '通话已稳定连接，忽略重复的 accepted 信令');
+        return;
       }
 
-      callStatus.value = "connecting"
-      callError.value = null
-      callConnectionStatus.value = "对方已接听，正在连接..."
-      logWithTime("log", "通话已被接受，开始交换信令")
+      callStatus.value = 'connecting';
+      callError.value = null;
+      callConnectionStatus.value = '对方已接听，正在连接...';
+      logWithTime('log', '通话已被接受，开始交换信令');
 
       setTimeout(() => {
-        if (callStatus.value === "connecting") {
-          callConnectionStatus.value = "对方已接听，正在建立连接..."
+        if (callStatus.value === 'connecting') {
+          callConnectionStatus.value = '对方已接听，正在建立连接...';
         }
-      }, 1000)
+      }, 1000);
 
       try {
         if (!webrtc.localStream.value) {
-          logWithTime("log", "获取本地媒体用于创建Offer")
+          logWithTime('log', '获取本地媒体用于创建Offer');
           await webrtc.getLocalMedia({
             audio: true,
-            video: currentCall.value.callType === "video",
-          })
+            video: currentCall.value.callType === 'video',
+          });
         }
 
         // 修复问题3: 如果连接失败，重新创建连接
         if (
           !webrtc.peerConnection.value ||
-          webrtc.peerConnection.value.connectionState === "failed" ||
-          webrtc.peerConnection.value.connectionState === "closed"
+          webrtc.peerConnection.value.connectionState === 'failed' ||
+          webrtc.peerConnection.value.connectionState === 'closed'
         ) {
-          logWithTime("log", "重新创建 WebRTC 连接")
-          webrtc.createPeerConnection(currentCall.value.callId, currentCall.value.peerId)
+          logWithTime('log', '重新创建 WebRTC 连接');
+          webrtc.createPeerConnection(
+            currentCall.value.callId,
+            currentCall.value.peerId,
+          );
         }
 
-        const offer = await webrtc.createOffer(currentCall.value.callId, currentCall.value.peerId)
+        const offer = await webrtc.createOffer(
+          currentCall.value.callId,
+          currentCall.value.peerId,
+        );
 
-        logWithTime("log", "🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯")
-        logWithTime("log", "📤 准备发送 OFFER 信令:")
-        logWithTime("log", "📋 Offer 类型:", offer.type)
-        logWithTime("log", "📋 Offer SDP (前200字符):", offer.sdp ? offer.sdp.substring(0, 200) + "..." : "无SDP")
-        logWithTime("log", "📋 通话ID:", currentCall.value.callId)
-        logWithTime("log", "📋 接收方:", currentCall.value.peerId)
-        logWithTime("log", "📋 连接尝试次数:", webrtc.connectionAttempts.value)
-        logWithTime("log", "🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯")
+        logWithTime('log', '🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯');
+        logWithTime('log', '📤 准备发送 OFFER 信令:');
+        logWithTime('log', '📋 Offer 类型:', offer.type);
+        logWithTime(
+          'log',
+          '📋 Offer SDP (前200字符):',
+          offer.sdp ? `${offer.sdp.slice(0, 200)}...` : '无SDP',
+        );
+        logWithTime('log', '📋 通话ID:', currentCall.value.callId);
+        logWithTime('log', '📋 接收方:', currentCall.value.peerId);
+        logWithTime('log', '📋 连接尝试次数:', webrtc.connectionAttempts.value);
+        logWithTime('log', '🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯');
 
         await callAPI.sendOffer(
           userStore.currentUser.id,
           currentCall.value.peerId,
           currentCall.value.callId,
           offer,
-          currentCall.value.callType === "video" ? 6 : 7,
-        )
+          currentCall.value.callType === 'video' ? 6 : 7,
+        );
 
-        logWithTime("log", "✅ 发送Offer成功")
+        logWithTime('log', '✅ 发送Offer成功');
       } catch (error) {
-        logWithTime("error", "❌ 创建Offer失败:", error)
+        logWithTime('error', '❌ 创建Offer失败:', error);
 
         // 修复问题3: 创建失败时尝试重连
         if (webrtc.connectionAttempts.value < 3) {
-          logWithTime("log", "🔄 创建Offer失败，尝试重连")
+          logWithTime('log', '🔄 创建Offer失败，尝试重连');
           setTimeout(() => {
-            webrtc.attemptReconnection(currentCall.value.callId, currentCall.value.peerId)
+            webrtc.attemptReconnection(
+              currentCall.value.callId,
+              currentCall.value.peerId,
+            );
             // 重连后重新尝试处理accepted信令
             setTimeout(() => {
-              handleCallAccepted(data)
-            }, 1000)
-          }, 2000)
+              handleCallAccepted(data);
+            }, 1000);
+          }, 2000);
         } else {
-          endCall("failed")
+          endCall('failed');
         }
       }
     }
-  }
+  };
 
   // 处理通话拒绝
   const handleCallRejected = (data) => {
     if (currentCall.value && currentCall.value.callId === data.call_id) {
-      resetCallState()
-      callConnectionStatus.value = "对方已拒绝"
-      logWithTime("log", "通话已被拒绝")
+      resetCallState();
+      callConnectionStatus.value = '对方已拒绝';
+      logWithTime('log', '通话已被拒绝');
 
-      const friend = friends.value.find((f) => f.id === currentCall.value.peerId)
+      const friend = friends.value.find(
+        (f) => f.id === currentCall.value.peerId,
+      );
       if (friend) {
         const callMessage = {
-          type: currentCall.value.callType === "video" ? "video-call" : "audio-call",
-          content: "[对方已拒绝]",
+          type:
+            currentCall.value.callType === 'video'
+              ? 'video-call'
+              : 'audio-call',
+          content: '[对方已拒绝]',
           time: new Date().toLocaleTimeString().slice(0, 5),
           senderId: userStore.currentUser?.doctor_id,
           read: true,
           timestamp: Date.now(),
           duration: 0,
-        }
-        chatDB.saveMessage(callMessage, userStore.currentUser.id, friend.id)
+        };
+        // chatDB.saveMessage(callMessage, userStore.currentUser.id, friend.id);
 
-        friend.lastMessage = "[对方已拒绝]"
-        chatDB.updateFriendLastMessage(friend.id, userStore.currentUser.id, "[对方已拒绝]", friend.unreadCount)
+        friend.last_message = '[对方已拒绝]';
+        // chatDB.updateFriendLastMessage(
+        //   friend.id,
+        //   userStore.currentUser.id,
+        //   '[对方已拒绝]',
+        //   friend.un_read_count,
+        // );
       }
 
       setTimeout(() => {
-        callConnectionStatus.value = ""
-      }, 5000)
+        callConnectionStatus.value = '';
+      }, 5000);
     }
-  }
+  };
 
   // 处理通话结束
   const handleCallEnded = (data) => {
@@ -695,44 +847,55 @@ export const useChatStore = defineStore("chat", () => {
       (currentCall.value && currentCall.value.callId === data.call_id) ||
       (incomingCall.value && incomingCall.value.callId === data.call_id)
     ) {
-      const peerId = currentCall.value?.peerId || incomingCall.value?.callerId
-      const friend = friends.value.find((f) => f.id === peerId)
+      const peerId = currentCall.value?.peerId || incomingCall.value?.callerId;
+      const friend = friends.value.find((f) => f.id === peerId);
       if (friend) {
         const duration =
-          callStatus.value === "ongoing"
-            ? Math.floor((Date.now() - (currentCall.value?.startTime || incomingCall.value?.startTime)) / 1000)
-            : 0
+          callStatus.value === 'ongoing'
+            ? Math.floor(
+                (Date.now() -
+                  (currentCall.value?.startTime ||
+                    incomingCall.value?.startTime)) /
+                  1000,
+              )
+            : 0;
 
         const callMessage = {
           type:
-            currentCall.value?.callType === "video" || incomingCall.value?.callType === "video"
-              ? "video-call"
-              : "audio-call",
+            currentCall.value?.callType === 'video' ||
+            incomingCall.value?.callType === 'video'
+              ? 'video-call'
+              : 'audio-call',
           content:
-            callStatus.value === "ongoing"
-              ? `[${currentCall.value?.callType === "video" ? "视频" : "语音"}通话] ${Math.floor(duration / 60)}分${duration % 60}秒`
-              : "[通话结束]",
+            callStatus.value === 'ongoing'
+              ? `[${currentCall.value?.callType === 'video' ? '视频' : '语音'}通话] ${Math.floor(duration / 60)}分${duration % 60}秒`
+              : '[通话结束]',
           time: new Date().toLocaleTimeString().slice(0, 5),
           senderId: peerId,
           read: true,
           timestamp: Date.now(),
-          duration: duration,
-        }
-        chatDB.saveMessage(callMessage, userStore.currentUser.id, friend.id)
+          duration,
+        };
+        // chatDB.saveMessage(callMessage, userStore.currentUser.id, friend.id);
 
-        friend.lastMessage = callMessage.content
-        chatDB.updateFriendLastMessage(friend.id, userStore.currentUser.id, callMessage.content, friend.unreadCount)
+        friend.last_message = callMessage.content;
+        // chatDB.updateFriendLastMessage(
+        //   friend.id,
+        //   userStore.currentUser.id,
+        //   callMessage.content,
+        //   friend.un_read_count,
+        // );
       }
 
-      resetCallState()
-      callConnectionStatus.value = "通话已结束"
-      logWithTime("log", "通话已结束")
+      resetCallState();
+      callConnectionStatus.value = '通话已结束';
+      logWithTime('log', '通话已结束');
 
       setTimeout(() => {
-        callConnectionStatus.value = ""
-      }, 5000)
+        callConnectionStatus.value = '';
+      }, 5000);
     }
-  }
+  };
 
   // 处理ICE候选
   const handleIceCandidate = (data) => {
@@ -741,320 +904,413 @@ export const useChatStore = defineStore("chat", () => {
       (incomingCall.value && incomingCall.value.callId === data.call_id)
     ) {
       try {
-        const candidate = JSON.parse(data.content || data.message_content || "{}")
-        logWithTime("log", "收到ICE候选:", candidate)
+        const candidate = JSON.parse(
+          data.content || data.message_content || '{}',
+        );
+        logWithTime('log', '收到ICE候选:', candidate);
 
-        webrtc.addIceCandidate(candidate)
+        webrtc.addIceCandidate(candidate);
       } catch (error) {
-        logWithTime("error", "处理ICE候选失败:", error)
+        logWithTime('error', '处理ICE候选失败:', error);
       }
     }
-  }
+  };
 
   // 处理无人接听
   const handleCallNoAnswer = (data) => {
     if (currentCall.value && currentCall.value.callId === data.call_id) {
-      const friend = friends.value.find((f) => f.id === currentCall.value.peerId)
+      const friend = friends.value.find(
+        (f) => f.id === currentCall.value.peerId,
+      );
       if (friend) {
         const callMessage = {
-          type: currentCall.value.callType === "video" ? "video-call" : "audio-call",
-          content: "[未接来电]",
+          type:
+            currentCall.value.callType === 'video'
+              ? 'video-call'
+              : 'audio-call',
+          content: '[未接来电]',
           time: new Date().toLocaleTimeString().slice(0, 5),
           senderId: userStore.currentUser?.doctor_id,
           read: true,
           timestamp: Date.now(),
           duration: 0,
-        }
-        chatDB.saveMessage(callMessage, userStore.currentUser.id, friend.id)
+        };
+        // chatDB.saveMessage(callMessage, userStore.currentUser.id, friend.id);
 
-        friend.lastMessage = "[未接来电]"
-        chatDB.updateFriendLastMessage(friend.id, userStore.currentUser.id, "[未接来电]", friend.unreadCount)
+        friend.last_message = '[未接来电]';
+        // chatDB.updateFriendLastMessage(
+        //   friend.id,
+        //   userStore.currentUser.id,
+        //   '[未接来电]',
+        //   friend.un_read_count,
+        // );
       }
 
-      resetCallState()
-      callConnectionStatus.value = "对方无人接听"
-      logWithTime("log", "对方无人接听")
+      resetCallState();
+      callConnectionStatus.value = '对方无人接听';
+      logWithTime('log', '对方无人接听');
 
       setTimeout(() => {
-        callConnectionStatus.value = ""
-      }, 5000)
+        callConnectionStatus.value = '';
+      }, 5000);
     }
-  }
+  };
 
   // 处理对方忙线
   const handleCallBusy = (data) => {
     if (currentCall.value && currentCall.value.callId === data.call_id) {
-      const friend = friends.value.find((f) => f.id === currentCall.value.peerId)
+      const friend = friends.value.find(
+        (f) => f.id === currentCall.value.peerId,
+      );
       if (friend) {
         const callMessage = {
-          type: currentCall.value.callType === "video" ? "video-call" : "audio-call",
-          content: "[对方忙线]",
+          type:
+            currentCall.value.callType === 'video'
+              ? 'video-call'
+              : 'audio-call',
+          content: '[对方忙线]',
           time: new Date().toLocaleTimeString().slice(0, 5),
           senderId: userStore.currentUser?.doctor_id,
           read: true,
           timestamp: Date.now(),
           duration: 0,
-        }
-        chatDB.saveMessage(callMessage, userStore.currentUser.id, friend.id)
+        };
+        // chatDB.saveMessage(callMessage, userStore.currentUser.id, friend.id);
 
-        friend.lastMessage = "[对方忙线]"
-        chatDB.updateFriendLastMessage(friend.id, userStore.currentUser.id, "[对方忙线]", friend.unreadCount)
+        friend.last_message = '[对方忙线]';
+        // chatDB.updateFriendLastMessage(
+        //   friend.id,
+        //   userStore.currentUser.id,
+        //   '[对方忙线]',
+        //   friend.un_read_count,
+        // );
       }
 
-      resetCallState()
-      callConnectionStatus.value = "对方忙线中"
-      logWithTime("log", "对方忙线中")
+      resetCallState();
+      callConnectionStatus.value = '对方忙线中';
+      logWithTime('log', '对方忙线中');
 
       setTimeout(() => {
-        callConnectionStatus.value = ""
-      }, 5000)
+        callConnectionStatus.value = '';
+      }, 5000);
     }
-  }
+  };
 
   // 处理对方挂断
   const handleCallHangup = (data) => {
-    const callId = data?.call_id || currentCall.value?.callId || incomingCall.value?.callId
-    const peerId = data?.sender_user_id || currentCall.value?.peerId || incomingCall.value?.callerId
+    const callId =
+      data?.call_id || currentCall.value?.callId || incomingCall.value?.callId;
+    const peerId =
+      data?.sender_user_id ||
+      currentCall.value?.peerId ||
+      incomingCall.value?.callerId;
 
     if (callId && peerId) {
-      const friend = friends.value.find((f) => f.id === peerId)
+      const friend = friends.value.find((f) => f.id === peerId);
       if (friend) {
         const duration =
-          callStatus.value === "ongoing"
-            ? Math.floor((Date.now() - (currentCall.value?.startTime || incomingCall.value?.startTime)) / 1000)
-            : 0
+          callStatus.value === 'ongoing'
+            ? Math.floor(
+                (Date.now() -
+                  (currentCall.value?.startTime ||
+                    incomingCall.value?.startTime)) /
+                  1000,
+              )
+            : 0;
 
         const callMessage = {
-          type: currentCall.value?.callType || incomingCall.value?.callType === "video" ? "video-call" : "audio-call",
-          content: duration > 0 ? `[对方已挂断] ${Math.floor(duration / 60)}分${duration % 60}秒` : "[对方已挂断]",
+          type:
+            currentCall.value?.callType ||
+            incomingCall.value?.callType === 'video'
+              ? 'video-call'
+              : 'audio-call',
+          content:
+            duration > 0
+              ? `[对方已挂断] ${Math.floor(duration / 60)}分${duration % 60}秒`
+              : '[对方已挂断]',
           time: new Date().toLocaleTimeString().slice(0, 5),
           senderId: peerId,
           read: true,
           timestamp: Date.now(),
-          duration: duration,
-        }
-        chatDB.saveMessage(callMessage, userStore.currentUser.id, friend.id)
+          duration,
+        };
+        // chatDB.saveMessage(callMessage, userStore.currentUser.id, friend.id);
 
-        friend.lastMessage = callMessage.content
-        chatDB.updateFriendLastMessage(friend.id, userStore.currentUser.id, friend.lastMessage, friend.unreadCount)
+        friend.last_message = callMessage.content;
+        // chatDB.updateFriendLastMessage(
+        //   friend.id,
+        //   userStore.currentUser.id,
+        //   friend.last_message,
+        //   friend.un_read_count,
+        // );
       }
 
-      callStatus.value = "hangup"
-      callConnectionStatus.value = "对方已挂断"
-      logWithTime("log", "对方已挂断通话")
+      callStatus.value = 'hangup';
+      callConnectionStatus.value = '对方已挂断';
+      logWithTime('log', '对方已挂断通话');
 
       setTimeout(() => {
-        resetCallState()
-      }, 3000)
+        resetCallState();
+      }, 3000);
     }
-  }
+  };
 
   // 处理对方掉线
   const handleCallDisconnected = (data) => {
-    const callId = data?.call_id || currentCall.value?.callId || incomingCall.value?.callId
-    const peerId = data?.sender_user_id || currentCall.value?.peerId || incomingCall.value?.callerId
+    const callId =
+      data?.call_id || currentCall.value?.callId || incomingCall.value?.callId;
+    const peerId =
+      data?.sender_user_id ||
+      currentCall.value?.peerId ||
+      incomingCall.value?.callerId;
 
     if (callId && peerId) {
-      const friend = friends.value.find((f) => f.id === peerId)
+      const friend = friends.value.find((f) => f.id === peerId);
       if (friend) {
         const duration =
-          callStatus.value === "ongoing"
-            ? Math.floor((Date.now() - (currentCall.value?.startTime || incomingCall.value?.startTime)) / 1000)
-            : 0
+          callStatus.value === 'ongoing'
+            ? Math.floor(
+                (Date.now() -
+                  (currentCall.value?.startTime ||
+                    incomingCall.value?.startTime)) /
+                  1000,
+              )
+            : 0;
 
         const callMessage = {
-          type: currentCall.value?.callType || incomingCall.value?.callType === "video" ? "video-call" : "audio-call",
-          content: duration > 0 ? `[网络中断] ${Math.floor(duration / 60)}分${duration % 60}秒` : "[网络中断]",
+          type:
+            currentCall.value?.callType ||
+            incomingCall.value?.callType === 'video'
+              ? 'video-call'
+              : 'audio-call',
+          content:
+            duration > 0
+              ? `[网络中断] ${Math.floor(duration / 60)}分${duration % 60}秒`
+              : '[网络中断]',
           time: new Date().toLocaleTimeString().slice(0, 5),
           senderId: peerId,
           read: true,
           timestamp: Date.now(),
-          duration: duration,
-        }
-        chatDB.saveMessage(callMessage, userStore.currentUser.id, friend.id)
+          duration,
+        };
+        // chatDB.saveMessage(callMessage, userStore.currentUser.id, friend.id);
 
-        friend.lastMessage = callMessage.content
-        chatDB.updateFriendLastMessage(friend.id, userStore.currentUser.id, friend.lastMessage, friend.unreadCount)
+        friend.last_message = callMessage.content;
+        // chatDB.updateFriendLastMessage(
+        //   friend.id,
+        //   userStore.currentUser.id,
+        //   friend.last_message,
+        //   friend.un_read_count,
+        // );
       }
 
-      callStatus.value = "disconnected"
-      callConnectionStatus.value = "网络连接已断开"
-      logWithTime("log", "网络连接已断开")
+      callStatus.value = 'disconnected';
+      callConnectionStatus.value = '网络连接已断开';
+      logWithTime('log', '网络连接已断开');
 
       setTimeout(() => {
-        resetCallState()
-      }, 3000)
+        resetCallState();
+      }, 3000);
     }
-  }
+  };
 
   // 处理对方终止呼叫
   const handleCallTerminated = (data) => {
-    const callId = data.call_id
-    const peerId = data.sender_user_id
+    const callId = data.call_id;
+    const peerId = data.sender_user_id;
 
     if (
       (currentCall.value && currentCall.value.callId === callId) ||
       (incomingCall.value && incomingCall.value.callId === callId)
     ) {
-      const friend = friends.value.find((f) => f.id === peerId)
+      const friend = friends.value.find((f) => f.id === peerId);
       if (friend) {
         const callMessage = {
-          type: currentCall.value?.callType || incomingCall.value?.callType === "video" ? "video-call" : "audio-call",
-          content: "[对方已终止呼叫]",
+          type:
+            currentCall.value?.callType ||
+            incomingCall.value?.callType === 'video'
+              ? 'video-call'
+              : 'audio-call',
+          content: '[对方已终止呼叫]',
           time: new Date().toLocaleTimeString().slice(0, 5),
           senderId: peerId,
           read: true,
           timestamp: Date.now(),
           duration: 0,
-        }
-        chatDB.saveMessage(callMessage, userStore.currentUser.id, friend.id)
+        };
+        // chatDB.saveMessage(callMessage, userStore.currentUser.id, friend.id);
 
-        friend.lastMessage = "[对方已终止呼叫]"
-        chatDB.updateFriendLastMessage(friend.id, userStore.currentUser.id, "[对方已终止呼叫]", friend.unreadCount)
+        friend.last_message = '[对方已终止呼叫]';
+        // chatDB.updateFriendLastMessage(
+        //   friend.id,
+        //   userStore.currentUser.id,
+        //   '[对方已终止呼叫]',
+        //   friend.un_read_count,
+        // );
       }
 
-      resetCallState()
-      callConnectionStatus.value = "对方已终止呼叫"
-      logWithTime("log", "对方已终止呼叫")
+      resetCallState();
+      callConnectionStatus.value = '对方已终止呼叫';
+      logWithTime('log', '对方已终止呼叫');
 
       setTimeout(() => {
-        callConnectionStatus.value = ""
-      }, 5000)
+        callConnectionStatus.value = '';
+      }, 5000);
     }
-  }
+  };
 
   // 发起通话
   const startCall = async (peerId, type) => {
     if (isInCall.value) {
-      alert("您正在通话中，请先结束当前通话。")
-      return
+      alert('您正在通话中，请先结束当前通话。');
+      return;
     }
 
-    const friend = friends.value.find((f) => f.id === peerId)
+    const friend = friends.value.find((f) => f.id === peerId);
     if (!friend) {
-      alert("好友信息无效")
-      return
+      alert('好友信息无效');
+      return;
     }
 
     if (!userStore.currentUser?.doctor_id) {
-      alert("用户未登录，无法发起通话")
-      return
+      alert('用户未登录，无法发起通话');
+      return;
     }
 
-    resetCallState()
+    resetCallState();
 
-    const callId = Date.now().toString() + Math.random().toString(36).substr(2, 9)
+    const callId =
+      Date.now().toString() + Math.random().toString(36).slice(2, 11);
 
     currentCall.value = {
-      callId: callId,
-      peerId: peerId,
+      callId,
+      peerId,
       callType: type,
       startTime: Date.now(),
-      status: "calling",
-    }
+      status: 'calling',
+    };
 
-    callStatus.value = "calling"
-    callConnectionStatus.value = "等待对方接听..."
+    callStatus.value = 'calling';
+    callConnectionStatus.value = '等待对方接听...';
 
     // 立即获取本地媒体并显示
     try {
-      logWithTime("log", "发起通话，立即获取本地媒体...")
+      logWithTime('log', '发起通话，立即获取本地媒体...');
       await webrtc.getLocalMedia({
         audio: true,
-        video: type === "video",
-      })
-      logWithTime("log", "本地媒体获取成功，可以显示自己的摄像头")
+        video: type === 'video',
+      });
+      logWithTime('log', '本地媒体获取成功，可以显示自己的摄像头');
     } catch (error) {
-      logWithTime("warn", "获取本地媒体失败，但继续通话流程:", error)
+      logWithTime('warn', '获取本地媒体失败，但继续通话流程:', error);
     }
 
     // 设置30秒超时
     setCallTimeout(() => {
-      if (callStatus.value === "calling") {
-        resetCallState()
-        callConnectionStatus.value = "对方无人接听"
-        logWithTime("log", "呼叫超时，对方无人接听")
+      if (callStatus.value === 'calling') {
+        resetCallState();
+        callConnectionStatus.value = '对方无人接听';
+        logWithTime('log', '呼叫超时，对方无人接听');
 
-        callAPI.sendNoAnswer(userStore.currentUser.id, peerId, callId, type === "video" ? 6 : 7)
+        callAPI.sendNoAnswer(
+          userStore.currentUser.id,
+          peerId,
+          callId,
+          type === 'video' ? 6 : 7,
+        );
 
-        friend.lastMessage = "[未接来电]"
-        chatDB.updateFriendLastMessage(friend.id, userStore.currentUser.id, "[未接来电]", friend.unreadCount)
+        friend.last_message = '[未接来电]';
+        // chatDB.updateFriendLastMessage(
+        //   friend.id,
+        //   userStore.currentUser.id,
+        //   '[未接来电]',
+        //   friend.un_read_count,
+        // );
 
         const callMessage = {
-          type: type === "video" ? "video-call" : "audio-call",
-          content: "[未接来电]",
+          type: type === 'video' ? 'video-call' : 'audio-call',
+          content: '[未接来电]',
           time: new Date().toLocaleTimeString().slice(0, 5),
           senderId: userStore.currentUser?.doctor_id,
           read: true,
           timestamp: Date.now(),
           duration: 0,
-        }
-        chatDB.saveMessage(callMessage, userStore.currentUser.id, friend.id)
+        };
+        // chatDB.saveMessage(callMessage, userStore.currentUser.id, friend.id);
 
         setTimeout(() => {
-          callConnectionStatus.value = ""
-        }, 5000)
+          callConnectionStatus.value = '';
+        }, 5000);
       }
-    }, 30000)
+    }, 30_000);
 
     // 发送通话请求
     try {
-      logWithTime("log", "准备发送通话邀请:", {
+      logWithTime('log', '准备发送通话邀请:', {
         senderUserId: userStore.currentUser.id,
         receiverUserId: peerId,
-        callId: callId,
-        callType: type === "video" ? 6 : 7,
-      })
+        callId,
+        callType: type === 'video' ? 6 : 7,
+      });
 
-      await callAPI.invite(userStore.currentUser.id, peerId, callId, type === "video" ? 6 : 7)
+      await callAPI.invite(
+        userStore.currentUser.id,
+        peerId,
+        callId,
+        type === 'video' ? 6 : 7,
+      );
 
-      logWithTime("log", "发起通话成功:", currentCall.value)
+      logWithTime('log', '发起通话成功:', currentCall.value);
     } catch (error) {
-      logWithTime("error", "发起通话失败:", error)
-      resetCallState()
+      logWithTime('error', '发起通话失败:', error);
+      resetCallState();
 
-      let errorMessage = "发起通话失败"
+      let errorMessage = '发起通话失败';
       if (error.response?.status === 400) {
-        errorMessage = "请求参数错误，请检查网络连接"
+        errorMessage = '请求参数错误，请检查网络连接';
       } else if (error.response?.status === 500) {
-        errorMessage = "服务器错误，请稍后重试"
+        errorMessage = '服务器错误，请稍后重试';
       } else if (error.message) {
-        errorMessage = error.message
+        errorMessage = error.message;
       }
 
-      alert(errorMessage)
+      alert(errorMessage);
     }
-  }
+  };
 
   // 接听来电
   const acceptCall = async () => {
     if (!incomingCall.value) {
-      logWithTime("log", "没有来电，无法接听")
-      return
+      logWithTime('log', '没有来电，无法接听');
+      return;
     }
 
-    if (callStatus.value === "connecting" || callStatus.value === "ongoing") {
-      logWithTime("log", "通话已在进行中，忽略重复接听")
-      return
+    if (callStatus.value === 'connecting' || callStatus.value === 'ongoing') {
+      logWithTime('log', '通话已在进行中，忽略重复接听');
+      return;
     }
 
-    clearCallTimeout()
+    clearCallTimeout();
 
-    logWithTime("log", "开始接听通话:", incomingCall.value)
+    logWithTime('log', '开始接听通话:', incomingCall.value);
 
-    callStatus.value = "connecting"
-    callConnectionStatus.value = "正在连接..."
+    callStatus.value = 'connecting';
+    callConnectionStatus.value = '正在连接...';
 
     try {
       // 获取本地媒体
       try {
         await webrtc.getLocalMedia({
           audio: true,
-          video: incomingCall.value.callType === "video",
-        })
-        logWithTime("log", "接听时获取本地媒体成功")
+          video: incomingCall.value.callType === 'video',
+        });
+        logWithTime('log', '接听时获取本地媒体成功');
       } catch (mediaError) {
-        logWithTime("warn", "接听时获取本地媒体失败，但继续通话流程:", mediaError)
+        logWithTime(
+          'warn',
+          '接听时获取本地媒体失败，但继续通话流程:',
+          mediaError,
+        );
       }
 
       // 发送接受信号
@@ -1062,148 +1318,184 @@ export const useChatStore = defineStore("chat", () => {
         userStore.currentUser.id,
         incomingCall.value.callerId,
         incomingCall.value.callId,
-        incomingCall.value.callType === "video" ? 6 : 7,
-      )
+        incomingCall.value.callType === 'video' ? 6 : 7,
+      );
 
       currentCall.value = {
         callId: incomingCall.value.callId,
         peerId: incomingCall.value.callerId,
         callType: incomingCall.value.callType,
         startTime: Date.now(),
-        status: "connecting",
-      }
+        status: 'connecting',
+      };
 
-      logWithTime("log", "接听通话成功，等待信令交换...")
+      logWithTime('log', '接听通话成功，等待信令交换...');
     } catch (error) {
-      logWithTime("error", "接听通话失败:", error)
-      rejectCall("failed")
+      logWithTime('error', '接听通话失败:', error);
+      rejectCall('failed');
     }
-  }
+  };
 
   // 拒绝来电
-  const rejectCall = async (reason = "rejected") => {
+  const rejectCall = async (reason = 'rejected') => {
     if (!incomingCall.value) {
-      logWithTime("log", "没有来电，无法拒绝")
-      return
+      logWithTime('log', '没有来电，无法拒绝');
+      return;
     }
 
-    if (callStatus.value === "connecting" || callStatus.value === "ongoing") {
-      logWithTime("log", "通话已在进行中，无法拒绝")
-      return
+    if (callStatus.value === 'connecting' || callStatus.value === 'ongoing') {
+      logWithTime('log', '通话已在进行中，无法拒绝');
+      return;
     }
 
-    logWithTime("log", "开始拒绝通话:", reason)
+    logWithTime('log', '开始拒绝通话:', reason);
 
     try {
-      if (reason === "rejected") {
-        await callAPI.reject(
-          userStore.currentUser.id,
-          incomingCall.value.callerId,
-          incomingCall.value.callId,
-          incomingCall.value.callType === "video" ? 6 : 7,
-        )
-      } else {
-        await callAPI.sendFailed(
-          userStore.currentUser.id,
-          incomingCall.value.callerId,
-          incomingCall.value.callId,
-          incomingCall.value.callType === "video" ? 6 : 7,
-        )
-      }
+      await (reason === 'rejected'
+        ? callAPI.reject(
+            userStore.currentUser.id,
+            incomingCall.value.callerId,
+            incomingCall.value.callId,
+            incomingCall.value.callType === 'video' ? 6 : 7,
+          )
+        : callAPI.sendFailed(
+            userStore.currentUser.id,
+            incomingCall.value.callerId,
+            incomingCall.value.callId,
+            incomingCall.value.callType === 'video' ? 6 : 7,
+          ));
 
-      const friend = friends.value.find((f) => f.id === incomingCall.value.callerId)
+      const friend = friends.value.find(
+        (f) => f.id === incomingCall.value.callerId,
+      );
       if (friend) {
-        const content = reason === "busy" ? "[对方忙线]" : reason === "no-answer" ? "[未接来电]" : "[已拒绝]"
+        const content =
+          reason === 'busy'
+            ? '[对方忙线]'
+            : (reason === 'no-answer'
+              ? '[未接来电]'
+              : '[已拒绝]');
 
         const callMessage = {
-          type: incomingCall.value.callType === "video" ? "video-call" : "audio-call",
-          content: content,
+          type:
+            incomingCall.value.callType === 'video'
+              ? 'video-call'
+              : 'audio-call',
+          content,
           time: new Date().toLocaleTimeString().slice(0, 5),
           senderId: userStore.currentUser?.doctor_id,
           read: true,
           timestamp: Date.now(),
           duration: 0,
-        }
-        chatDB.saveMessage(callMessage, userStore.currentUser.id, friend.id)
+        };
+        // chatDB.saveMessage(callMessage, userStore.currentUser.id, friend.id);
 
-        friend.lastMessage = content
-        chatDB.updateFriendLastMessage(friend.id, userStore.currentUser.id, content, friend.unreadCount)
+        friend.last_message = content;
+        // chatDB.updateFriendLastMessage(
+        //   friend.id,
+        //   userStore.currentUser.id,
+        //   content,
+        //   friend.un_read_count,
+        // );
       }
 
-      resetCallState()
-      callConnectionStatus.value = reason === "busy" ? "对方忙线" : reason === "no-answer" ? "无人接听" : "已拒绝"
+      resetCallState();
+      callConnectionStatus.value =
+        reason === 'busy'
+          ? '对方忙线'
+          : (reason === 'no-answer'
+            ? '无人接听'
+            : '已拒绝');
 
       setTimeout(() => {
-        callConnectionStatus.value = ""
-      }, 5000)
+        callConnectionStatus.value = '';
+      }, 5000);
 
-      logWithTime("log", "拒绝通话成功")
+      logWithTime('log', '拒绝通话成功');
     } catch (error) {
-      logWithTime("error", "拒绝通话失败:", error)
+      logWithTime('error', '拒绝通话失败:', error);
     }
-  }
+  };
 
   // 结束通话
-  const endCall = async (reason = "ended") => {
-    const callId = currentCall.value?.callId || incomingCall.value?.callId
-    const peerId = currentCall.value?.peerId || incomingCall.value?.callerId
-    const callTypeVal = currentCall.value?.callType || incomingCall.value?.callType
+  const endCall = async (reason = 'ended') => {
+    const callId = currentCall.value?.callId || incomingCall.value?.callId;
+    const peerId = currentCall.value?.peerId || incomingCall.value?.callerId;
+    const callTypeVal =
+      currentCall.value?.callType || incomingCall.value?.callType;
 
     if (!callId || !peerId) {
-      resetCallState()
-      return
+      resetCallState();
+      return;
     }
 
     try {
-      await callAPI.end(userStore.currentUser.id, peerId, callId, callTypeVal === "video" ? 6 : 7)
+      await callAPI.end(
+        userStore.currentUser.id,
+        peerId,
+        callId,
+        callTypeVal === 'video' ? 6 : 7,
+      );
 
-      const friend = friends.value.find((f) => f.id === peerId)
+      const friend = friends.value.find((f) => f.id === peerId);
       if (friend) {
         const duration =
-          callStatus.value === "ongoing"
-            ? Math.floor((Date.now() - (currentCall.value?.startTime || incomingCall.value?.startTime)) / 1000)
-            : 0
+          callStatus.value === 'ongoing'
+            ? Math.floor(
+                (Date.now() -
+                  (currentCall.value?.startTime ||
+                    incomingCall.value?.startTime)) /
+                  1000,
+              )
+            : 0;
 
-        let content = ""
-        if (reason === "no-answer") {
-          content = "[未接来电]"
+        let content = '';
+        if (reason === 'no-answer') {
+          content = '[未接来电]';
         } else if (duration > 0) {
-          content = `[${callTypeVal === "video" ? "视频" : "语音"}通话] ${Math.floor(duration / 60)}分${duration % 60}秒`
+          content = `[${callTypeVal === 'video' ? '视频' : '语音'}通话] ${Math.floor(duration / 60)}分${duration % 60}秒`;
         } else {
-          content = "[通话结束]"
+          content = '[通话结束]';
         }
 
         const callMessage = {
-          type: callTypeVal === "video" ? "video-call" : "audio-call",
-          content: content,
+          type: callTypeVal === 'video' ? 'video-call' : 'audio-call',
+          content,
           time: new Date().toLocaleTimeString().slice(0, 5),
           senderId: userStore.currentUser?.doctor_id,
           read: true,
           timestamp: Date.now(),
-          duration: duration,
-        }
-        chatDB.saveMessage(callMessage, userStore.currentUser.id, friend.id)
+          duration,
+        };
+        // chatDB.saveMessage(callMessage, userStore.currentUser.id, friend.id);
 
-        friend.lastMessage = content
-        chatDB.updateFriendLastMessage(friend.id, userStore.currentUser.id, content, friend.unreadCount)
+        friend.last_message = content;
+        // chatDB.updateFriendLastMessage(
+        //   friend.id,
+        //   userStore.currentUser.id,
+        //   content,
+        //   friend.un_read_count,
+        // );
       }
 
-      resetCallState()
-      callConnectionStatus.value = reason === "no-answer" ? "对方无人接听" : "通话结束"
+      resetCallState();
+      callConnectionStatus.value =
+        reason === 'no-answer' ? '对方无人接听' : '通话结束';
 
       setTimeout(() => {
-        callConnectionStatus.value = ""
-      }, 5000)
+        callConnectionStatus.value = '';
+      }, 5000);
 
-      logWithTime("log", "结束通话成功")
+      logWithTime('log', '结束通话成功');
     } catch (error) {
-      logWithTime("error", "结束通话失败:", error)
-      resetCallState()
+      logWithTime('error', '结束通话失败:', error);
+      resetCallState();
     }
-  }
+  };
 
   return {
     friends,
+    hasMore,
     currentFriend,
     messages,
     connectionStatus,
@@ -1221,6 +1513,7 @@ export const useChatStore = defineStore("chat", () => {
     isOngoingCall,
     isDisconnected,
     isHangup,
+    generateOldMessages,
     initDB,
     loadFriends,
     setCurrentFriend,
@@ -1235,5 +1528,5 @@ export const useChatStore = defineStore("chat", () => {
     resetCallState,
     sendCallSignal: sendCallSignalInternal,
     clearCallTimeout,
-  }
-})
+  };
+});
diff --git a/apps/web-antd/src/views/business/chat/stores/user.ts b/apps/web-antd/src/views/business/chat/stores/user.ts
index 6c3e2ae7..c36fb543 100644
--- a/apps/web-antd/src/views/business/chat/stores/user.ts
+++ b/apps/web-antd/src/views/business/chat/stores/user.ts
@@ -82,6 +82,7 @@ export const useUserStore = defineStore('user', () => {
 
   const login = (user: any) => {
     currentUser.value = user;
+    currentUser.value.id = `doctor-${user.id}`;
     localStorage.setItem('chatUser', JSON.stringify(user));
   };