From b17e6c53ad70e3a1065825d6414bee52cea81f3a Mon Sep 17 00:00:00 2001
From: lq <workerqi@163.com>
Date: Sat, 19 Jul 2025 16:47:52 +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?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/app.vue                     |   73 +-
 apps/web-antd/src/main.ts                     |    3 +
 .../src/views/business/chat/api/index.ts      |   10 +
 .../business/chat/components/AudioMessage.vue |  253 +++
 .../chat/components/CallInviteDialog.vue      |  495 +++++
 .../business/chat/components/ChatArea.vue     |   18 +
 .../business/chat/components/ChatHeader.vue   |  434 +++++
 .../chat/components/ConnectionStatus.vue      |   60 +
 .../business/chat/components/CustomInput.vue  |  245 +++
 .../business/chat/components/CustomModal.vue  |  302 +++
 .../chat/components/CustomTextarea.vue        |  311 ++++
 .../business/chat/components/EmojiPicker.vue  |   81 +
 .../business/chat/components/EmptyState.vue   |  198 ++
 .../chat/components/FileUploadPreview.vue     |   69 +
 .../business/chat/components/FriendList.vue   |  353 ++++
 .../chat/components/FriendsManagement.vue     |  265 +++
 .../chat/components/GroupsManagement.vue      |  280 +++
 .../business/chat/components/MediaPreview.vue |  637 +++++++
 .../chat/components/MessageBubble.vue         |  464 +++++
 .../business/chat/components/MessageInput.vue |  543 ++++++
 .../business/chat/components/MessageItem.vue  |   97 +
 .../business/chat/components/MessageList.vue  |   87 +
 .../business/chat/components/MomentsView.vue  |  446 +++++
 .../chat/components/RecordingIndicator.vue    |   19 +
 .../chat/components/SettingsModal.vue         |  845 +++++++++
 .../chat/components/SideNavigation.vue        |  387 ++++
 .../chat/components/UserProfileModal.vue      |  506 +++++
 .../chat/components/VideoCallComponent.vue    | 1620 +++++++++++++++++
 .../business/chat/components/VirtualList.vue  |  129 ++
 .../chat/composables/useFileUpload.ts         |  115 ++
 .../chat/composables/useMediaPreview.ts       |   34 +
 .../business/chat/composables/useRecording.ts |   67 +
 .../business/chat/composables/useWebRTC.ts    |  904 +++++++++
 .../business/chat/composables/useWebSocket.ts |  191 ++
 .../src/views/business/chat/index.vue         |  211 +++
 .../src/views/business/chat/stores/chat.ts    | 1239 +++++++++++++
 .../src/views/business/chat/stores/theme.ts   |   38 +
 .../src/views/business/chat/stores/user.ts    |  114 ++
 .../src/views/business/chat/utils/db.ts       |  153 ++
 .../src/views/business/chat/utils/request.ts  |  360 ++++
 .../views/doctor/doctor/components/modal.vue  |   68 +-
 apps/web-antd/vite.config.mts                 |    9 +
 package.json                                  |    2 +
 pnpm-lock.yaml                                |  550 ++++--
 44 files changed, 13104 insertions(+), 181 deletions(-)
 create mode 100644 apps/web-antd/src/views/business/chat/api/index.ts
 create mode 100644 apps/web-antd/src/views/business/chat/components/AudioMessage.vue
 create mode 100644 apps/web-antd/src/views/business/chat/components/CallInviteDialog.vue
 create mode 100644 apps/web-antd/src/views/business/chat/components/ChatArea.vue
 create mode 100644 apps/web-antd/src/views/business/chat/components/ChatHeader.vue
 create mode 100644 apps/web-antd/src/views/business/chat/components/ConnectionStatus.vue
 create mode 100644 apps/web-antd/src/views/business/chat/components/CustomInput.vue
 create mode 100644 apps/web-antd/src/views/business/chat/components/CustomModal.vue
 create mode 100644 apps/web-antd/src/views/business/chat/components/CustomTextarea.vue
 create mode 100644 apps/web-antd/src/views/business/chat/components/EmojiPicker.vue
 create mode 100644 apps/web-antd/src/views/business/chat/components/EmptyState.vue
 create mode 100644 apps/web-antd/src/views/business/chat/components/FileUploadPreview.vue
 create mode 100644 apps/web-antd/src/views/business/chat/components/FriendList.vue
 create mode 100644 apps/web-antd/src/views/business/chat/components/FriendsManagement.vue
 create mode 100644 apps/web-antd/src/views/business/chat/components/GroupsManagement.vue
 create mode 100644 apps/web-antd/src/views/business/chat/components/MediaPreview.vue
 create mode 100644 apps/web-antd/src/views/business/chat/components/MessageBubble.vue
 create mode 100644 apps/web-antd/src/views/business/chat/components/MessageInput.vue
 create mode 100644 apps/web-antd/src/views/business/chat/components/MessageItem.vue
 create mode 100644 apps/web-antd/src/views/business/chat/components/MessageList.vue
 create mode 100644 apps/web-antd/src/views/business/chat/components/MomentsView.vue
 create mode 100644 apps/web-antd/src/views/business/chat/components/RecordingIndicator.vue
 create mode 100644 apps/web-antd/src/views/business/chat/components/SettingsModal.vue
 create mode 100644 apps/web-antd/src/views/business/chat/components/SideNavigation.vue
 create mode 100644 apps/web-antd/src/views/business/chat/components/UserProfileModal.vue
 create mode 100644 apps/web-antd/src/views/business/chat/components/VideoCallComponent.vue
 create mode 100644 apps/web-antd/src/views/business/chat/components/VirtualList.vue
 create mode 100644 apps/web-antd/src/views/business/chat/composables/useFileUpload.ts
 create mode 100644 apps/web-antd/src/views/business/chat/composables/useMediaPreview.ts
 create mode 100644 apps/web-antd/src/views/business/chat/composables/useRecording.ts
 create mode 100644 apps/web-antd/src/views/business/chat/composables/useWebRTC.ts
 create mode 100644 apps/web-antd/src/views/business/chat/composables/useWebSocket.ts
 create mode 100644 apps/web-antd/src/views/business/chat/index.vue
 create mode 100644 apps/web-antd/src/views/business/chat/stores/chat.ts
 create mode 100644 apps/web-antd/src/views/business/chat/stores/theme.ts
 create mode 100644 apps/web-antd/src/views/business/chat/stores/user.ts
 create mode 100644 apps/web-antd/src/views/business/chat/utils/db.ts
 create mode 100644 apps/web-antd/src/views/business/chat/utils/request.ts

diff --git a/apps/web-antd/src/app.vue b/apps/web-antd/src/app.vue
index 71950bb1..05d7a4f8 100644
--- a/apps/web-antd/src/app.vue
+++ b/apps/web-antd/src/app.vue
@@ -1,40 +1,39 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, ref, watch } from 'vue';
 
 import { useAntdDesignTokens } from '@vben/hooks';
 import { preferences, usePreferences } from '@vben/preferences';
+import { useUserStore as useVbenUserStore } from '@vben/stores';
 
 import { App, ConfigProvider, theme } from 'ant-design-vue';
 
 import { antdLocale } from '#/locales';
+import { useWebSocket } from '#/views/business/chat/composables/useWebSocket';
+import { useChatStore } from '#/views/business/chat/stores/chat';
+import { useUserStore } from '#/views/business/chat/stores/user';
 
 defineOptions({ name: 'App' });
-// 定义颜色代码
-const redBoldYellowBg = '\u001B[1;31;43m'; // 1=加粗 31=红色文字 43=黄色背景
-const reset = '\u001B[0m';
 
-console.log(
-  `${redBoldYellowBg}......................阿弥陀佛...................... \n` +
-    `                       _oo0oo_                      \n` +
-    `                      o8888888o                     \n` +
-    `                      88" . "88                     \n` +
-    `                      (| -_- |)                     \n` +
-    `                      0\\  =  /0                    \n` +
-    `                   ___/‘---’\\___                   \n` +
-    `                  .' \\|       |/ '.                 \n` +
-    `                 / \\\\|||  :  |||// \\                \n` +
-    `                / _||||| -卍-|||||_ \\               \n` +
-    `               |   | \\\\\\  -  /// |   |              \n` +
-    `               | \\_|  ''\\---/''  |_/ |              \n` +
-    `               \\  .-\\__  '-'  ___/-. /              \n` +
-    `             ___'. .'  /--.--\\  '. .'___            \n` +
-    `         ."" ‘<  ‘.___\\_<|>_/___.’>’ "".          \n` +
-    `       | | :  ‘- \\‘.;‘\\ _ /’;.’/ - ’ : | |        \n` +
-    `         \\  \\ ‘_.   \\_ __\\ /__ _/   .-’ /  /        \n` +
-    `    =====‘-.____‘.___ \\_____/___.-’___.-’=====     \n` +
-    `                       ‘=---=’                      \n` +
-    `                                                    \n` +
-    `....................佛祖保佑 ,永无BUG...................${reset}`,
+const { connectWebSocket } = useWebSocket();
+const userStore = useUserStore();
+const chatStore = useChatStore();
+const vbenUserStore = useVbenUserStore();
+
+// 用户信息加载状态跟踪
+const userInfoLoaded = ref(false);
+
+// 监听userInfo加载完成
+watch(
+  () => vbenUserStore.userInfo,
+  (newUserInfo) => {
+    if (newUserInfo) {
+      console.log('用户信息已加载：', newUserInfo)
+      userStore.currentUser = newUserInfo;
+      userStore.login(newUserInfo);
+      userInfoLoaded.value = true;
+    }
+  },
+  { immediate: true },
 );
 
 const { isDark } = usePreferences();
@@ -45,7 +44,6 @@ const tokenTheme = computed(() => {
     ? [theme.darkAlgorithm]
     : [theme.defaultAlgorithm];
 
-  // antd 紧凑模式算法
   if (preferences.app.compact) {
     algorithm.push(theme.compactAlgorithm);
   }
@@ -55,6 +53,27 @@ const tokenTheme = computed(() => {
     token: tokens,
   };
 });
+
+const initWebsocket = () => {
+  // 确保用户信息已加载
+  if (!userStore.currentUser) return;
+
+  // 初始化数据库
+  chatStore.initDB();
+
+  // 加载好友列表（使用用户ID）
+  chatStore.loadFriends(userStore.presetUsers, userStore.currentUser?.id);
+
+  // 创建WebSocket连接
+  connectWebSocket();
+};
+
+// 当userInfo加载完成后再执行初始化
+watch(userInfoLoaded, (loaded) => {
+  if (loaded) {
+    initWebsocket();
+  }
+});
 </script>
 
 <template>
diff --git a/apps/web-antd/src/main.ts b/apps/web-antd/src/main.ts
index 5d728a02..21cb193b 100644
--- a/apps/web-antd/src/main.ts
+++ b/apps/web-antd/src/main.ts
@@ -3,6 +3,9 @@ import { unmountGlobalLoading } from '@vben/utils';
 
 import { overridesPreferences } from './preferences';
 
+// eslint-disable-next-line n/no-extraneous-import
+import '@fortawesome/fontawesome-free/css/all.min.css';
+
 /**
  * 应用初始化完成之后再进行页面加载渲染
  */
diff --git a/apps/web-antd/src/views/business/chat/api/index.ts b/apps/web-antd/src/views/business/chat/api/index.ts
new file mode 100644
index 00000000..0cf2fa1f
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/api/index.ts
@@ -0,0 +1,10 @@
+import { requestClient } from '#/api/request';
+
+const prefix = 'chat-friends/';
+/**
+ * 获取当前登录的诊所信息
+ * @param data
+ */
+export async function getChatFriendsListApi(data: any = {}) {
+  return requestClient.get<any>(`${prefix}list`, { params: data });
+}
diff --git a/apps/web-antd/src/views/business/chat/components/AudioMessage.vue b/apps/web-antd/src/views/business/chat/components/AudioMessage.vue
new file mode 100644
index 00000000..eafbea3f
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/components/AudioMessage.vue
@@ -0,0 +1,253 @@
+<template>
+  <div
+    class="rounded-xl p-4 flex items-center gap-4 min-w-72 max-w-md cursor-pointer transition-all duration-200 hover:opacity-90"
+    :class="audioContainerClasses"
+    @click="togglePlay"
+  >
+    <!-- 播放状态指示器 -->
+    <div class="flex-shrink-0 w-10 h-10 flex items-center justify-center rounded-full"
+         :class="playIconBgClasses">
+      <component
+        :is="isPlaying ? PauseOutlined : CaretRightOutlined"
+        class="text-white"
+        style="font-size: 16px; transform: translateX(1px)"
+      />
+    </div>
+
+    <div class="flex-1 overflow-hidden">
+      <!-- 高级音波动画 -->
+      <div class="flex items-end gap-1 h-8 mb-2">
+        <div
+          v-for="i in 20"
+          :key="i"
+          class="rounded-full transition-all duration-300 ease-out"
+          :class="waveBarClasses"
+          :style="{
+            width: '3px',
+            height: isPlaying ? `${getWaveHeight(i)}px` : '4px',
+            animationDelay: `${i * 40}ms`
+          }"
+        ></div>
+      </div>
+
+      <!-- 进度条和时间显示 -->
+      <div class="flex items-center gap-2 w-full">
+        <!-- 当前时间 -->
+        <div class="text-xs font-medium flex-shrink-0" :class="timeTextClasses">
+          {{ formatDuration(currentTime) }}
+        </div>
+
+        <!-- 进度条 -->
+        <div class="flex-1 rounded-full h-1.5 overflow-hidden" :class="progressTrackClasses">
+          <div
+            class="h-full rounded-full transition-all duration-300 ease-out"
+            :class="progressBarClasses"
+            :style="{ width: `${progress}%` }"
+          ></div>
+        </div>
+
+        <!-- 剩余时间 -->
+        <div class="text-xs font-medium flex-shrink-0" :class="timeTextClasses">
+          -{{ formatDuration(remainingTime) }}
+        </div>
+      </div>
+    </div>
+
+    <!-- 总时长显示 -->
+    <div class="text-sm font-medium flex-shrink-0 min-w-12 text-right" :class="durationTextClasses">
+      {{ formatDuration(audioDuration) }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref, onUnmounted, computed, watch} from 'vue';
+import {CaretRightOutlined, PauseOutlined} from '@ant-design/icons-vue';
+
+const props = defineProps({
+  message: {
+    type: Object,
+    required: true
+  },
+  isSent: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const isPlaying = ref(false);
+const progress = ref(0);
+const audio = ref(null);
+const audioDuration = ref(0);
+const currentTime = ref(0);
+const remainingTime = computed(() => Math.max(0, audioDuration.value - currentTime.value));
+
+// 直接获取音频时长
+const getAudioDuration = () => {
+  // 如果消息对象中已经包含时长，直接使用
+  if (props.message.duration && props.message.duration > 0) {
+    audioDuration.value = props.message.duration;
+    return;
+  }
+
+  // 否则创建临时音频获取元数据
+  const tempAudio = new Audio(props.message.content);
+  tempAudio.addEventListener('loadedmetadata', () => {
+    if (tempAudio.duration && tempAudio.duration > 0) {
+      audioDuration.value = Math.round(tempAudio.duration);
+    }
+  });
+
+  // 设置超时以防无法获取元数据
+  setTimeout(() => {
+    if (audioDuration.value === 0 && tempAudio.duration > 0) {
+      audioDuration.value = Math.round(tempAudio.duration);
+    }
+  }, 500);
+};
+
+// 初始化时获取音频时长
+getAudioDuration();
+
+// 样式计算属性
+const audioContainerClasses = computed(() => {
+  if (props.isSent) {
+    return 'bg-gradient-to-r from-blue-500 to-indigo-600 text-white shadow-lg';
+  } else {
+    return 'bg-gray-50 dark:bg-gray-700 border border-gray-100 dark:border-gray-600 shadow';
+  }
+});
+
+const playIconBgClasses = computed(() => {
+  if (props.isSent) {
+    return 'bg-white/20';
+  } else {
+    return 'bg-blue-500';
+  }
+});
+
+const waveBarClasses = computed(() => {
+  if (props.isSent) {
+    return ['bg-white/80', {'animate-wave': isPlaying.value}];
+  } else {
+    return ['bg-blue-500', {'animate-wave': isPlaying.value}];
+  }
+});
+
+const progressTrackClasses = computed(() => {
+  if (props.isSent) {
+    return 'bg-white/30';
+  } else {
+    return 'bg-gray-200 dark:bg-gray-600';
+  }
+});
+
+const progressBarClasses = computed(() => {
+  if (props.isSent) {
+    return 'bg-white';
+  } else {
+    return 'bg-blue-500';
+  }
+});
+
+const durationTextClasses = computed(() => {
+  if (props.isSent) {
+    return 'text-white/90';
+  } else {
+    return 'text-gray-700 dark:text-gray-300';
+  }
+});
+
+const timeTextClasses = computed(() => {
+  if (props.isSent) {
+    return 'text-white/80';
+  } else {
+    return 'text-gray-600 dark:text-gray-400';
+  }
+});
+
+// 生成高级波形高度
+const getWaveHeight = (index) => {
+  const baseHeight = 4;
+  const maxHeight = 20;
+  // 使用更平滑的正弦波叠加
+  const wavePattern =
+    Math.sin((index * 0.4) + (Date.now() * 0.008)) * 0.4 +
+    Math.cos((index * 0.7) + (Date.now() * 0.01)) * 0.3;
+  const normalized = Math.max(0, wavePattern * 0.5 + 0.5);
+  return baseHeight + (maxHeight - baseHeight) * normalized;
+};
+
+const togglePlay = () => {
+  if (!audio.value) {
+    audio.value = new Audio(props.message.content);
+
+    // 确保获取音频时长
+    audio.value.addEventListener('loadedmetadata', () => {
+      if (audio.value.duration && audio.value.duration > 0) {
+        audioDuration.value = Math.round(audio.value.duration);
+      }
+    });
+
+    audio.value.addEventListener('timeupdate', () => {
+      if (audio.value.duration) {
+        currentTime.value = Math.round(audio.value.currentTime);
+        progress.value = (currentTime.value / audioDuration.value) * 100;
+      }
+    });
+
+    audio.value.addEventListener('ended', () => {
+      isPlaying.value = false;
+      progress.value = 0;
+      currentTime.value = 0;
+    });
+  }
+
+  if (isPlaying.value) {
+    audio.value.pause();
+    isPlaying.value = false;
+  } else {
+    audio.value.play();
+    isPlaying.value = true;
+  }
+};
+
+const formatDuration = (seconds) => {
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  return `${mins}:${secs.toString().padStart(2, '0')}`;
+};
+
+onUnmounted(() => {
+  if (audio.value) {
+    audio.value.pause();
+    audio.value = null;
+  }
+});
+</script>
+
+<style scoped>
+@keyframes wave {
+  0%, 100% {
+    transform: scaleY(0.7);
+    opacity: 0.7;
+  }
+  25% {
+    transform: scaleY(1.2);
+    opacity: 1;
+  }
+  50% {
+    transform: scaleY(0.8);
+    opacity: 0.8;
+  }
+  75% {
+    transform: scaleY(1.1);
+    opacity: 0.9;
+  }
+}
+
+.animate-wave {
+  animation: wave 1.2s ease-in-out infinite;
+  transform-origin: center bottom;
+}
+</style>
diff --git a/apps/web-antd/src/views/business/chat/components/CallInviteDialog.vue b/apps/web-antd/src/views/business/chat/components/CallInviteDialog.vue
new file mode 100644
index 00000000..47735cf6
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/components/CallInviteDialog.vue
@@ -0,0 +1,495 @@
+<template>
+  <div class="call-invite-overlay" :class="{ 'dark': themeStore.isDarkMode }">
+    <div class="call-invite-dialog">
+      <!-- 来电信息 -->
+      <div class="caller-info">
+        <div class="caller-avatar" :style="{ background: callerInfo.color }">
+          {{ callerInfo.nick_name.charAt(0) }}
+        </div>
+        <div class="caller-details">
+          <h3 class="caller-name">{{ callerInfo.nick_name }}</h3>
+          <p class="call-type">{{ callType === 'video' ? '视频通话' : '语音通话' }}</p>
+        </div>
+      </div>
+
+      <!-- 通话状态 -->
+      <div class="call-status">
+        <div class="status-text">{{ statusText }}</div>
+        <div class="call-animation">
+          <div class="pulse-ring"></div>
+          <div class="pulse-ring delay-1"></div>
+          <div class="pulse-ring delay-2"></div>
+        </div>
+      </div>
+
+      <!-- 操作按钮 -->
+      <div class="call-actions">
+        <button
+          v-if="isVisible && isIncoming"
+          class="action-btn accept-btn"
+          @click="acceptCall"
+          :disabled="isProcessing"
+        >
+          <i class="fas fa-phone"></i>
+          <span>接听</span>
+        </button>
+
+        <button
+          class="action-btn reject-btn"
+          @click="rejectCall"
+          :disabled="isProcessing"
+        >
+          <i class="fas fa-phone-slash"></i>
+          <span>{{ isVisible && isIncoming ? '拒绝' : '取消' }}</span>
+        </button>
+      </div>
+
+      <!-- 等待状态 -->
+      <div v-if="isVisible && isProcessing" class="processing-overlay">
+        <div class="spinner"></div>
+        <div class="processing-text">{{ processingText }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref, computed, onMounted, onUnmounted} from 'vue'
+import {useThemeStore} from '../stores/theme.ts'
+
+const themeStore = useThemeStore()
+
+const props = defineProps({
+  isVisible: {
+    type: Boolean,
+    default: false
+  },
+  callerInfo: {
+    type: Object,
+    required: true
+  },
+  callType: {
+    type: String,
+    default: 'video',
+    validator: (value) => ['video', 'audio'].includes(value)
+  },
+  isIncoming: {
+    type: Boolean,
+    default: true
+  },
+  callId: {
+    type: String,
+    required: true
+  }
+})
+
+const emit = defineEmits(['accept', 'reject', 'timeout'])
+
+const isProcessing = ref(false)
+const timeoutTimer = ref(null)
+const callDuration = ref(0)
+const durationTimer = ref(null)
+
+const statusText = computed(() => {
+  if (isProcessing.value) {
+    return '连接中...'
+  }
+
+  if (props.isIncoming) {
+    return '邀请您进行通话'
+  }
+
+  return '等待对方接听...'
+})
+
+const processingText = computed(() => {
+  if (props.isIncoming) {
+    return '正在接听...'
+  }
+  return '正在取消...'
+})
+
+const acceptCall = async () => {
+  if (isProcessing.value) return
+
+  isProcessing.value = true
+
+  try {
+    await emit('accept', {
+      callId: props.callId,
+      callType: props.callType
+    })
+  } catch (error) {
+    console.error('接听通话失败:', error)
+    isProcessing.value = false
+  }
+}
+
+const rejectCall = async () => {
+  if (isProcessing.value) return
+
+  isProcessing.value = true
+
+  try {
+    await emit('reject', {
+      callId: props.callId,
+      callType: props.callType,
+      reason: props.isIncoming ? '用户拒绝' : '用户取消'
+    })
+  } catch (error) {
+    console.error('拒绝通话失败:', error)
+    isProcessing.value = false
+  }
+}
+
+const startTimeout = () => {
+  // 来电30秒超时，拨出60秒超时
+  const timeout = props.isIncoming ? 30000 : 60000
+
+  timeoutTimer.value = setTimeout(() => {
+    emit('timeout', {
+      callId: props.callId,
+      reason: '超时未响应'
+    })
+  }, timeout)
+}
+
+const startDurationTimer = () => {
+  durationTimer.value = setInterval(() => {
+    callDuration.value++
+  }, 1000)
+}
+
+const clearTimers = () => {
+  if (timeoutTimer.value) {
+    clearTimeout(timeoutTimer.value)
+    timeoutTimer.value = null
+  }
+
+  if (durationTimer.value) {
+    clearInterval(durationTimer.value)
+    durationTimer.value = null
+  }
+}
+
+// 键盘事件处理
+const handleKeydown = (event) => {
+  if (!props.isVisible) return
+
+  switch (event.key) {
+    case 'Enter':
+      if (props.isIncoming) {
+        acceptCall()
+      }
+      break
+    case 'Escape':
+      rejectCall()
+      break
+  }
+}
+
+onMounted(() => {
+  if (props.isVisible) {
+    startTimeout()
+    document.addEventListener('keydown', handleKeydown)
+
+    // 请求通知权限
+    if ('Notification' in window && Notification.permission === 'default') {
+      Notification.requestPermission()
+    }
+  }
+})
+
+onUnmounted(() => {
+  clearTimers()
+  document.removeEventListener('keydown', handleKeydown)
+})
+</script>
+
+<style scoped>
+.call-invite-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(10px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+  animation: fadeIn 0.3s ease;
+}
+
+.call-invite-overlay.dark {
+  background: rgba(0, 0, 0, 0.9);
+}
+
+.call-invite-dialog {
+  background: white;
+  border-radius: 24px;
+  padding: 32px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  text-align: center;
+  min-width: 320px;
+  max-width: 400px;
+  position: relative;
+  animation: slideUp 0.3s ease;
+}
+
+.call-invite-overlay.dark .call-invite-dialog {
+  background: #2d2d2d;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
+}
+
+.caller-info {
+  margin-bottom: 32px;
+}
+
+.caller-avatar {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  margin: 0 auto 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 32px;
+  font-weight: bold;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+}
+
+.caller-name {
+  font-size: 24px;
+  font-weight: 600;
+  color: #1a202c;
+  margin: 0 0 8px 0;
+}
+
+.call-invite-overlay.dark .caller-name {
+  color: #f7fafc;
+}
+
+.call-type {
+  font-size: 16px;
+  color: #64748b;
+  margin: 0;
+}
+
+.call-invite-overlay.dark .call-type {
+  color: #9ca3af;
+}
+
+.call-status {
+  margin-bottom: 32px;
+  position: relative;
+}
+
+.status-text {
+  font-size: 18px;
+  color: #374151;
+  margin-bottom: 24px;
+  font-weight: 500;
+}
+
+.call-invite-overlay.dark .status-text {
+  color: #d1d5db;
+}
+
+.call-animation {
+  position: relative;
+  width: 60px;
+  height: 60px;
+  margin: 0 auto;
+}
+
+.pulse-ring {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 60px;
+  height: 60px;
+  border: 2px solid #4361ee;
+  border-radius: 50%;
+  animation: pulse 2s infinite;
+}
+
+.pulse-ring.delay-1 {
+  animation-delay: 0.5s;
+}
+
+.pulse-ring.delay-2 {
+  animation-delay: 1s;
+}
+
+.call-actions {
+  display: flex;
+  gap: 24px;
+  justify-content: center;
+}
+
+.action-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 16px;
+  border: none;
+  border-radius: 50%;
+  width: 80px;
+  height: 80px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-size: 24px;
+  position: relative;
+  overflow: hidden;
+}
+
+.action-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.action-btn span {
+  font-size: 12px;
+  font-weight: 500;
+  position: absolute;
+  bottom: -24px;
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+}
+
+.accept-btn {
+  background: linear-gradient(135deg, #10b981, #059669);
+  color: white;
+  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
+}
+
+.accept-btn:hover:not(:disabled) {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 32px rgba(16, 185, 129, 0.5);
+}
+
+.reject-btn {
+  background: linear-gradient(135deg, #ef4444, #dc2626);
+  color: white;
+  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4);
+}
+
+.reject-btn:hover:not(:disabled) {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 32px rgba(239, 68, 68, 0.5);
+}
+
+.processing-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+}
+
+.call-invite-overlay.dark .processing-overlay {
+  background: rgba(45, 45, 45, 0.9);
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid #e2e8f0;
+  border-top: 3px solid #4361ee;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.processing-text {
+  font-size: 16px;
+  color: #374151;
+  font-weight: 500;
+}
+
+.call-invite-overlay.dark .processing-text {
+  color: #d1d5db;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(40px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pulse {
+  0% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1.5);
+    opacity: 0;
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 480px) {
+  .call-invite-dialog {
+    margin: 20px;
+    padding: 24px;
+    min-width: unset;
+    width: calc(100% - 40px);
+  }
+
+  .caller-avatar {
+    width: 60px;
+    height: 60px;
+    font-size: 24px;
+  }
+
+  .caller-name {
+    font-size: 20px;
+  }
+
+  .action-btn {
+    width: 60px;
+    height: 60px;
+    font-size: 20px;
+  }
+
+  .call-actions {
+    gap: 16px;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/business/chat/components/ChatArea.vue b/apps/web-antd/src/views/business/chat/components/ChatArea.vue
new file mode 100644
index 00000000..37955b6c
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/components/ChatArea.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="flex flex-col h-full">
+    <!-- 聊天头部 -->
+    <ChatHeader/>
+
+    <!-- 消息区域 -->
+    <MessageList class="flex-1"/>
+
+    <!-- 输入区域 -->
+    <MessageInput/>
+  </div>
+</template>
+
+<script setup>
+import ChatHeader from './ChatHeader.vue';
+import MessageList from './MessageList.vue';
+import MessageInput from './MessageInput.vue';
+</script>
diff --git a/apps/web-antd/src/views/business/chat/components/ChatHeader.vue b/apps/web-antd/src/views/business/chat/components/ChatHeader.vue
new file mode 100644
index 00000000..55c2d15a
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/components/ChatHeader.vue
@@ -0,0 +1,434 @@
+<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';
+
+const chatStore = useChatStore();
+const themeStore = useThemeStore();
+
+const isFriendOnline = ref(true);
+const showMoreActions = ref(false);
+
+// 获取当前通话状态
+const callStatus = computed(() => {
+  if (!chatStore.currentFriend) return null;
+
+  // 检查是否正在与当前好友通话
+  if (chatStore.currentCall && chatStore.currentCall.peerId === chatStore.currentFriend.id) {
+    return chatStore.callConnectionStatus || '通话中';
+  }
+
+  return null;
+});
+
+// 获取通话状态文本
+const callStatusText = computed(() => {
+  if (!callStatus.value) return '';
+
+  switch (callStatus.value) {
+    case '等待对方接听...':
+      return '📞 呼叫中...';
+    case '通话中':
+      return '📞 通话中';
+    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')) {
+    showMoreActions.value = false;
+  }
+};
+
+document.addEventListener('click', handleClickOutside);
+
+// 开始语音通话
+const startVoiceCall = () => {
+  if (!chatStore.currentFriend) {
+    alert('请先选择一个好友');
+    return;
+  }
+
+  chatStore.startCall(chatStore.currentFriend.id, 'audio');
+};
+
+// 开始视频通话
+const startVideoCall = () => {
+  if (!chatStore.currentFriend) {
+    alert('请先选择一个好友');
+    return;
+  }
+
+  chatStore.startCall(chatStore.currentFriend.id, 'video');
+};
+
+// 清空聊天记录
+const clearChatHistory = () => {
+  if (confirm('确定要清空与该好友的聊天记录吗？')) {
+    chatStore.messages = [];
+    showMoreActions.value = false;
+    console.log('聊天记录已清空');
+  }
+};
+
+// 查看好友资料
+const viewFriendProfile = () => {
+  showMoreActions.value = false;
+  console.log('查看好友资料:', chatStore.currentFriend);
+};
+</script>
+
+<style scoped>
+.chat-header {
+  background: #ffffff;
+  border-bottom: 1px solid #e2e8f0;
+  padding: 16px 24px;
+  position: relative;
+}
+
+.chat-header.dark {
+  background: #2d2d2d;
+  border-bottom-color: #374151;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.friend-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.friend-avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: bold;
+  font-size: 18px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.friend-details {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.friend-name {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1a202c;
+  margin: 0;
+}
+
+.chat-header.dark .friend-name {
+  color: #f7fafc;
+}
+
+.friend-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0;
+  font-size: 14px;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  animation: pulse 2s infinite;
+}
+
+.status-dot.online {
+  background: #10b981;
+}
+
+.status-dot.offline {
+  background: #ef4444;
+}
+
+.status-text {
+  color: #64748b;
+}
+
+.chat-header.dark .status-text {
+  color: #9ca3af;
+}
+
+.status-text.online {
+  color: #10b981;
+}
+
+.status-text.offline {
+  color: #ef4444;
+}
+
+/* 添加通话状态样式 */
+.call-status-text {
+  margin-left: 8px;
+  font-size: 13px;
+  color: #3b82f6;
+  font-weight: 500;
+  background: rgba(59, 130, 246, 0.1);
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.chat-header.dark .call-status-text {
+  color: #93c5fd;
+  background: rgba(59, 130, 246, 0.2);
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  position: relative;
+}
+
+.action-btn {
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-size: 16px;
+  position: relative;
+}
+
+.voice-call-btn {
+  background: linear-gradient(135deg, #10b981, #059669);
+  color: white;
+  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+}
+
+.voice-call-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
+}
+
+.video-call-btn {
+  background: linear-gradient(135deg, #3b82f6, #2563eb);
+  color: white;
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+}
+
+.video-call-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
+}
+
+.more-btn {
+  background: #f1f5f9;
+  color: #64748b;
+  border: 1px solid #e2e8f0;
+}
+
+.more-btn:hover {
+  background: #e2e8f0;
+  color: #475569;
+}
+
+.chat-header.dark .more-btn {
+  background: #374151;
+  color: #9ca3af;
+  border-color: #4b5563;
+}
+
+.chat-header.dark .more-btn:hover {
+  background: #4b5563;
+  color: #d1d5db;
+}
+
+.more-actions-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  padding: 8px 0;
+  min-width: 160px;
+  z-index: 1000;
+  margin-top: 8px;
+}
+
+.chat-header.dark .more-actions-menu {
+  background: #374151;
+  border-color: #4b5563;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: #374151;
+  font-size: 14px;
+}
+
+.menu-item:hover {
+  background: #f8fafc;
+}
+
+.chat-header.dark .menu-item {
+  color: #d1d5db;
+}
+
+.chat-header.dark .menu-item:hover {
+  background: #4b5563;
+}
+
+.menu-item i {
+  width: 16px;
+  font-size: 14px;
+  color: #64748b;
+}
+
+.chat-header.dark .menu-item i {
+  color: #9ca3af;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 0.7;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .chat-header {
+    padding: 12px 16px;
+  }
+
+  .friend-avatar {
+    width: 40px;
+    height: 40px;
+    font-size: 16px;
+  }
+
+  .friend-name {
+    font-size: 16px;
+  }
+
+  .action-btn {
+    width: 36px;
+    height: 36px;
+    font-size: 14px;
+  }
+
+  .header-actions {
+    gap: 8px;
+  }
+
+  .call-status-text {
+    font-size: 11px;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/business/chat/components/ConnectionStatus.vue b/apps/web-antd/src/views/business/chat/components/ConnectionStatus.vue
new file mode 100644
index 00000000..dfdd121a
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/components/ConnectionStatus.vue
@@ -0,0 +1,60 @@
+<script setup>
+import { computed } from 'vue';
+
+import {
+  DisconnectOutlined,
+  LoadingOutlined,
+  WifiOutlined,
+} from '@ant-design/icons-vue';
+
+import { useChatStore } from '../stores/chat.ts';
+
+const chatStore = useChatStore();
+
+const statusClass = computed(() => {
+  switch (chatStore.connectionStatus) {
+    case 'connected': {
+      return 'bg-green-500 text-white';
+    }
+    case 'connecting': {
+      return 'bg-yellow-500 text-white';
+    }
+    case 'disconnected': {
+      return 'bg-red-500 text-white';
+    }
+    default: {
+      return 'bg-gray-500 text-white';
+    }
+  }
+});
+
+const iconComponent = computed(() => {
+  switch (chatStore.connectionStatus) {
+    case 'connected': {
+      return WifiOutlined;
+    }
+    case 'connecting': {
+      return LoadingOutlined;
+    }
+    case 'disconnected': {
+      return DisconnectOutlined;
+    }
+    default: {
+      return WifiOutlined;
+    }
+  }
+});
+</script>
+
+<template>
+  <div
+    :class="statusClass"
+    class="fixed left-5 bottom-5 z-50 flex items-center gap-2 rounded-full px-3 py-2 text-sm font-medium transition-all"
+  >
+    <component
+      :is="iconComponent"
+      :class="{ 'animate-spin': chatStore.connectionStatus === 'connecting' }"
+    />
+    {{ chatStore.connectionStatusText }}
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/business/chat/components/CustomInput.vue b/apps/web-antd/src/views/business/chat/components/CustomInput.vue
new file mode 100644
index 00000000..aac29bab
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/components/CustomInput.vue
@@ -0,0 +1,245 @@
+<template>
+  <div class="custom-input-container"
+       :class="{ 'dark': isDark, 'focused': isFocused, 'disabled': disabled }">
+    <div class="input-prefix" v-if="prefixIcon || $slots.prefix">
+      <slot name="prefix">
+        <i :class="prefixIcon" v-if="prefixIcon"></i>
+      </slot>
+    </div>
+
+    <input
+      ref="inputRef"
+      :type="type"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      :maxlength="maxlength"
+      class="custom-input"
+      @input="handleInput"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @keydown="handleKeydown"
+    />
+
+    <div class="input-suffix" v-if="suffixIcon || $slots.suffix || clearable">
+      <button
+        v-if="clearable && modelValue && !disabled"
+        class="clear-btn"
+        @click="handleClear"
+        type="button"
+      >
+        <i class="fas fa-times"></i>
+      </button>
+      <slot name="suffix">
+        <i :class="suffixIcon" v-if="suffixIcon"></i>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref, computed} from 'vue';
+import {useThemeStore} from '../stores/theme.ts';
+
+const themeStore = useThemeStore();
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: ''
+  },
+  type: {
+    type: String,
+    default: 'text'
+  },
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  clearable: {
+    type: Boolean,
+    default: false
+  },
+  prefixIcon: {
+    type: String,
+    default: ''
+  },
+  suffixIcon: {
+    type: String,
+    default: ''
+  },
+  maxlength: {
+    type: Number,
+    default: undefined
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'clear', 'keydown']);
+
+const inputRef = ref(null);
+const isFocused = ref(false);
+
+const isDark = computed(() => themeStore.isDarkMode);
+
+const handleInput = (event) => {
+  emit('update:modelValue', event.target.value);
+};
+
+const handleFocus = (event) => {
+  isFocused.value = true;
+  emit('focus', event);
+};
+
+const handleBlur = (event) => {
+  isFocused.value = false;
+  emit('blur', event);
+};
+
+const handleClear = () => {
+  emit('update:modelValue', '');
+  emit('clear');
+  inputRef.value?.focus();
+};
+
+const handleKeydown = (event) => {
+  emit('keydown', event);
+};
+
+const focus = () => {
+  inputRef.value?.focus();
+};
+
+const blur = () => {
+  inputRef.value?.blur();
+};
+
+defineExpose({
+  focus,
+  blur
+});
+</script>
+
+<style scoped>
+.custom-input-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  background: #ffffff;
+  border: 2px solid #e2e8f0;
+  border-radius: 12px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+}
+
+.custom-input-container:hover {
+  border-color: #cbd5e1;
+}
+
+.custom-input-container.focused {
+  border-color: #4361ee;
+  box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.1);
+}
+
+.custom-input-container.disabled {
+  background: #f8fafc;
+  border-color: #e2e8f0;
+  cursor: not-allowed;
+}
+
+.custom-input-container.dark {
+  background: #374151;
+  border-color: #4b5563;
+}
+
+.custom-input-container.dark:hover {
+  border-color: #6b7280;
+}
+
+.custom-input-container.dark.focused {
+  border-color: #4361ee;
+  box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.2);
+}
+
+.custom-input-container.dark.disabled {
+  background: #1f2937;
+  border-color: #374151;
+}
+
+.input-prefix,
+.input-suffix {
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  color: #64748b;
+  font-size: 14px;
+}
+
+.custom-input-container.dark .input-prefix,
+.custom-input-container.dark .input-suffix {
+  color: #9ca3af;
+}
+
+.custom-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  padding: 12px 16px;
+  font-size: 14px;
+  color: #1a202c;
+  line-height: 1.5;
+}
+
+.custom-input::placeholder {
+  color: #94a3b8;
+}
+
+.custom-input:disabled {
+  cursor: not-allowed;
+  color: #94a3b8;
+}
+
+.custom-input-container.dark .custom-input {
+  color: #f7fafc;
+}
+
+.custom-input-container.dark .custom-input::placeholder {
+  color: #6b7280;
+}
+
+.custom-input-container.dark .custom-input:disabled {
+  color: #6b7280;
+}
+
+.clear-btn {
+  background: none;
+  border: none;
+  color: #94a3b8;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.clear-btn:hover {
+  color: #64748b;
+  background: #f1f5f9;
+}
+
+.custom-input-container.dark .clear-btn:hover {
+  color: #d1d5db;
+  background: #4b5563;
+}
+</style>
diff --git a/apps/web-antd/src/views/business/chat/components/CustomModal.vue b/apps/web-antd/src/views/business/chat/components/CustomModal.vue
new file mode 100644
index 00000000..bee09d51
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/components/CustomModal.vue
@@ -0,0 +1,302 @@
+<template>
+  <div v-if="visible" class="modal-overlay" @click="handleOverlayClick">
+    <div
+      class="modal-container"
+      :class="[sizeClass, { 'dark': themeStore.isDarkMode }]"
+      @click.stop
+    >
+      <!-- 模态框头部 -->
+      <div class="modal-header">
+        <slot name="header">
+          <h2 class="modal-title">{{ title }}</h2>
+        </slot>
+        <button class="close-btn" @click="$emit('close')" v-if="closable">
+          <i class="fas fa-times"></i>
+        </button>
+      </div>
+
+      <!-- 模态框内容 -->
+      <div class="modal-body">
+        <slot></slot>
+      </div>
+
+      <!-- 模态框底部 -->
+      <div class="modal-footer" v-if="$slots.footer">
+        <slot name="footer"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {computed, onMounted, onUnmounted} from 'vue';
+import {useThemeStore} from '../stores/theme.ts';
+
+const themeStore = useThemeStore();
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: true
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  size: {
+    type: String,
+    default: 'medium',
+    validator: (value) => ['small', 'medium', 'large', 'full'].includes(value)
+  },
+  closable: {
+    type: Boolean,
+    default: true
+  },
+  maskClosable: {
+    type: Boolean,
+    default: true
+  }
+});
+
+const emit = defineEmits(['close']);
+
+const sizeClass = computed(() => {
+  return `modal-${props.size}`;
+});
+
+const handleOverlayClick = () => {
+  if (props.maskClosable) {
+    emit('close');
+  }
+};
+
+const handleEscKey = (event) => {
+  if (event.key === 'Escape' && props.closable) {
+    emit('close');
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('keydown', handleEscKey);
+  document.body.style.overflow = 'hidden';
+});
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleEscKey);
+  document.body.style.overflow = '';
+});
+</script>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(8px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: fadeIn 0.3s ease;
+  padding: 20px;
+}
+
+.modal-container {
+  background: white;
+  border-radius: 20px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.modal-container.dark {
+  background: #2d2d2d;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
+}
+
+/* 尺寸变体 */
+.modal-small {
+  width: 100%;
+  max-width: 400px;
+}
+
+.modal-medium {
+  width: 100%;
+  max-width: 600px;
+}
+
+.modal-large {
+  width: 100%;
+  max-width: 800px;
+}
+
+.modal-full {
+  width: 95vw;
+  height: 95vh;
+  max-width: none;
+  max-height: none;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24px 30px;
+  border-bottom: 1px solid #e2e8f0;
+  background: linear-gradient(135deg, #4361ee, #3f37c9);
+  color: white;
+  flex-shrink: 0;
+}
+
+.modal-container.dark .modal-header {
+  border-bottom-color: #4b5563;
+}
+
+.modal-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.close-btn {
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  color: white;
+  font-size: 14px;
+}
+
+.close-btn:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: scale(1.1);
+}
+
+.modal-body {
+  padding: 24px 30px;
+  overflow-y: auto;
+  flex: 1;
+  color: #374151;
+}
+
+.modal-container.dark .modal-body {
+  color: #d1d5db;
+}
+
+.modal-footer {
+  padding: 20px 30px;
+  border-top: 1px solid #e2e8f0;
+  background: #f8fafc;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.modal-container.dark .modal-footer {
+  background: #374151;
+  border-top-color: #4b5563;
+}
+
+/* 按钮样式 */
+:deep(.modal-btn) {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+:deep(.modal-btn-cancel) {
+  background: #f1f5f9;
+  color: #64748b;
+  border: 1px solid #e2e8f0;
+}
+
+:deep(.modal-btn-cancel:hover) {
+  background: #e2e8f0;
+  color: #475569;
+}
+
+:deep(.modal-btn-confirm) {
+  background: linear-gradient(135deg, #4361ee, #3f37c9);
+  color: white;
+}
+
+:deep(.modal-btn-confirm:hover) {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
+}
+
+.modal-container.dark :deep(.modal-btn-cancel) {
+  background: #4b5563;
+  color: #d1d5db;
+  border-color: #6b7280;
+}
+
+.modal-container.dark :deep(.modal-btn-cancel:hover) {
+  background: #6b7280;
+  color: #f3f4f6;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .modal-overlay {
+    padding: 10px;
+  }
+
+  .modal-small,
+  .modal-medium,
+  .modal-large {
+    width: 100%;
+    max-width: none;
+  }
+
+  .modal-full {
+    width: 100vw;
+    height: 100vh;
+    border-radius: 0;
+  }
+
+  .modal-header,
+  .modal-body,
+  .modal-footer {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/business/chat/components/CustomTextarea.vue b/apps/web-antd/src/views/business/chat/components/CustomTextarea.vue
new file mode 100644
index 00000000..8d406a30
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/components/CustomTextarea.vue
@@ -0,0 +1,311 @@
+<template>
+  <div
+    class="custom-textarea-container"
+    :class="{ 'dark': isDark, 'focused': isFocused, 'disabled': disabled }"
+    @drop="handleDrop"
+    @dragover="handleDragOver"
+    @dragenter="handleDragEnter"
+    @dragleave="handleDragLeave"
+  >
+        <textarea
+          ref="textareaRef"
+          :value="modelValue"
+          :placeholder="placeholder"
+          :disabled="disabled"
+          :readonly="readonly"
+          :maxlength="maxlength"
+          :rows="rows"
+          class="custom-textarea"
+          @input="handleInput"
+          @focus="handleFocus"
+          @blur="handleBlur"
+          @keydown="handleKeydown"
+          @paste="handlePaste"
+        ></textarea>
+
+    <div class="textarea-actions" v-if="clearable || $slots.actions">
+      <button
+        v-if="clearable && modelValue && !disabled"
+        class="clear-btn"
+        @click="handleClear"
+        type="button"
+      >
+        <i class="fas fa-times"></i>
+      </button>
+      <slot name="actions"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref, computed, nextTick, watch} from 'vue';
+import {useThemeStore} from '../stores/theme.ts';
+
+const themeStore = useThemeStore();
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  clearable: {
+    type: Boolean,
+    default: false
+  },
+  maxlength: {
+    type: Number,
+    default: undefined
+  },
+  rows: {
+    type: Number,
+    default: 3
+  },
+  autoResize: {
+    type: Boolean,
+    default: false
+  },
+  maxRows: {
+    type: Number,
+    default: 6
+  },
+  detectPaste: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'clear', 'keydown', 'paste-file']);
+
+const textareaRef = ref(null);
+const isFocused = ref(false);
+
+const isDark = computed(() => themeStore.isDarkMode);
+
+const handleInput = (event) => {
+  emit('update:modelValue', event.target.value);
+
+  if (props.autoResize) {
+    autoResize();
+  }
+};
+
+const handleFocus = (event) => {
+  isFocused.value = true;
+  emit('focus', event);
+};
+
+const handleBlur = (event) => {
+  isFocused.value = false;
+  emit('blur', event);
+};
+
+const handleClear = () => {
+  emit('update:modelValue', '');
+  emit('clear');
+  textareaRef.value?.focus();
+
+  if (props.autoResize) {
+    autoResize();
+  }
+};
+
+const handleKeydown = (event) => {
+  emit('keydown', event);
+};
+
+const handlePaste = (event) => {
+  if (!props.detectPaste) return;
+
+  const items = event.clipboardData?.items;
+  if (!items) return;
+
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+    if (item.kind === 'file') {
+      event.preventDefault();
+      const file = item.getAsFile();
+      if (file) {
+        emit('paste-file', file);
+      }
+      break;
+    }
+  }
+};
+
+const handleDrop = (event) => {
+  event.preventDefault();
+  const files = event.dataTransfer?.files;
+  if (files && files.length > 0) {
+    emit('paste-file', files[0]);
+  }
+};
+
+const handleDragOver = (event) => {
+  event.preventDefault();
+};
+
+const handleDragEnter = (event) => {
+  event.preventDefault();
+};
+
+const handleDragLeave = (event) => {
+  event.preventDefault();
+};
+
+const autoResize = () => {
+  nextTick(() => {
+    if (!textareaRef.value) return;
+
+    const textarea = textareaRef.value;
+    textarea.style.height = 'auto';
+
+    const lineHeight = parseInt(getComputedStyle(textarea).lineHeight);
+    const maxHeight = lineHeight * props.maxRows;
+    const scrollHeight = textarea.scrollHeight;
+
+    textarea.style.height = Math.min(scrollHeight, maxHeight) + 'px';
+  });
+};
+
+const focus = () => {
+  textareaRef.value?.focus();
+};
+
+const blur = () => {
+  textareaRef.value?.blur();
+};
+
+// 监听内容变化自动调整高度
+watch(() => props.modelValue, () => {
+  if (props.autoResize) {
+    autoResize();
+  }
+});
+
+defineExpose({
+  focus,
+  blur
+});
+</script>
+
+<style scoped>
+.custom-textarea-container {
+  position: relative;
+  background: #ffffff;
+  border: 2px solid #e2e8f0;
+  border-radius: 12px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+}
+
+.custom-textarea-container:hover {
+  border-color: #cbd5e1;
+}
+
+.custom-textarea-container.focused {
+  border-color: #4361ee;
+  box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.1);
+}
+
+.custom-textarea-container.disabled {
+  background: #f8fafc;
+  border-color: #e2e8f0;
+  cursor: not-allowed;
+}
+
+.custom-textarea-container.dark {
+  background: #374151;
+  border-color: #4b5563;
+}
+
+.custom-textarea-container.dark:hover {
+  border-color: #6b7280;
+}
+
+.custom-textarea-container.dark.focused {
+  border-color: #4361ee;
+  box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.2);
+}
+
+.custom-textarea-container.dark.disabled {
+  background: #1f2937;
+  border-color: #374151;
+}
+
+.custom-textarea {
+  width: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  padding: 12px 16px;
+  font-size: 14px;
+  color: #1a202c;
+  line-height: 1.5;
+  resize: none;
+  font-family: inherit;
+}
+
+.custom-textarea::placeholder {
+  color: #94a3b8;
+}
+
+.custom-textarea:disabled {
+  cursor: not-allowed;
+  color: #94a3b8;
+}
+
+.custom-textarea-container.dark .custom-textarea {
+  color: #f7fafc;
+}
+
+.custom-textarea-container.dark .custom-textarea::placeholder {
+  color: #6b7280;
+}
+
+.custom-textarea-container.dark .custom-textarea:disabled {
+  color: #6b7280;
+}
+
+.textarea-actions {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  display: flex;
+  gap: 8px;
+}
+
+.clear-btn {
+  background: none;
+  border: none;
+  color: #94a3b8;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.clear-btn:hover {
+  color: #64748b;
+  background: #f1f5f9;
+}
+
+.custom-textarea-container.dark .clear-btn:hover {
+  color: #d1d5db;
+  background: #4b5563;
+}
+</style>
diff --git a/apps/web-antd/src/views/business/chat/components/EmojiPicker.vue b/apps/web-antd/src/views/business/chat/components/EmojiPicker.vue
new file mode 100644
index 00000000..2df9c87e
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/components/EmojiPicker.vue
@@ -0,0 +1,81 @@
+<script setup>
+import { ref } from 'vue';
+
+defineEmits(['select']);
+
+const emojiList = ref([
+  '😀',
+  '😃',
+  '😄',
+  '😁',
+  '😆',
+  '😅',
+  '😂',
+  '🤣',
+  '😊',
+  '😇',
+  '🙂',
+  '🙃',
+  '😉',
+  '😌',
+  '😍',
+  '🥰',
+  '😘',
+  '😗',
+  '😙',
+  '😚',
+  '😋',
+  '😛',
+  '😝',
+  '😜',
+  '🤪',
+  '🤨',
+  '🧐',
+  '🤓',
+  '😎',
+  '🤩',
+  '🥳',
+  '😏',
+  '😒',
+  '😞',
+  '😔',
+  '😟',
+  '😕',
+  '🙁',
+  '☹️',
+  '😣',
+  '😖',
+  '😫',
+  '😩',
+  '🥺',
+  '😢',
+  '😭',
+  '😤',
+  '😠',
+  '😡',
+  '🤬',
+  '🤯',
+  '😳',
+  '🥵',
+  '🥶',
+  '😱',
+  '😨',
+]);
+</script>
+
+<template>
+  <div
+    class="emoji-picker-container max-w-xs rounded-lg border border-gray-200 bg-white p-3 shadow-lg dark:border-gray-600 dark:bg-gray-700"
+  >
+    <div class="grid max-w-xs grid-cols-8 gap-2">
+      <div
+        v-for="emoji in emojiList"
+        :key="emoji"
+        class="flex h-8 w-8 cursor-pointer items-center justify-center rounded text-lg transition-all hover:scale-110 hover:bg-gray-100 dark:hover:bg-gray-600"
+        @click="$emit('select', emoji)"
+      >
+        {{ emoji }}
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/business/chat/components/EmptyState.vue b/apps/web-antd/src/views/business/chat/components/EmptyState.vue
new file mode 100644
index 00000000..572491bb
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/components/EmptyState.vue
@@ -0,0 +1,198 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+
+const isDark = ref(false);
+
+// 检查系统偏好或本地存储
+onMounted(() => {
+  const savedPreference = localStorage.getItem('darkMode');
+  const systemPreference = window.matchMedia(
+    '(prefers-color-scheme: dark)',
+  ).matches;
+
+  isDark.value =
+    savedPreference === null ? systemPreference : savedPreference === 'true';
+
+  updateDarkClass();
+});
+
+// 切换模式
+function toggleDarkMode() {
+  isDark.value = !isDark.value;
+  localStorage.setItem('darkMode', isDark.value);
+  updateDarkClass();
+}
+
+// 更新HTML class
+function updateDarkClass() {
+  if (isDark.value) {
+    document.documentElement.classList.add('dark');
+  } else {
+    document.documentElement.classList.remove('dark');
+  }
+}
+</script>
+
+<template>
+  <div
+    class="flex h-full flex-col items-center justify-center bg-white dark:bg-[#1a1a1a]"
+  >
+    <!-- 模式切换按钮 -->
+    <!--    <div class="absolute top-4 right-4">-->
+    <!--      <button @click="toggleDarkMode" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700">-->
+    <!--        <svg v-if="isDark" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-300"-->
+    <!--             viewBox="0 0 20 20" fill="currentColor">-->
+    <!--          <path fill-rule="evenodd"-->
+    <!--                d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"-->
+    <!--                clip-rule="evenodd"/>-->
+    <!--        </svg>-->
+    <!--        <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-700"-->
+    <!--             viewBox="0 0 20 20" fill="currentColor">-->
+    <!--          <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/>-->
+    <!--        </svg>-->
+    <!--      </button>-->
+    <!--    </div>-->
+
+    <!-- SVG 插画 -->
+    <div class="mb-8">
+      <svg
+        fill="none"
+        height="200"
+        viewBox="0 0 200 200"
+        width="200"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <!-- 聊天气泡 -->
+        <ellipse
+          class="fill-blue-100 stroke-blue-500 dark:fill-blue-900 dark:stroke-blue-300"
+          cx="70"
+          cy="80"
+          rx="35"
+          ry="25"
+          stroke-width="2"
+        />
+        <ellipse
+          class="fill-purple-100 stroke-purple-500 dark:fill-purple-900 dark:stroke-purple-300"
+          cx="130"
+          cy="120"
+          rx="35"
+          ry="25"
+          stroke-width="2"
+        />
+
+        <!-- 消息线条 -->
+        <line
+          class="stroke-blue-500 dark:stroke-blue-300"
+          stroke-linecap="round"
+          stroke-width="2"
+          x1="45"
+          x2="55"
+          y1="85"
+          y2="85"
+        />
+        <line
+          class="stroke-blue-500 dark:stroke-blue-300"
+          stroke-linecap="round"
+          stroke-width="2"
+          x1="45"
+          x2="65"
+          y1="90"
+          y2="90"
+        />
+        <line
+          class="stroke-blue-500 dark:stroke-blue-300"
+          stroke-linecap="round"
+          stroke-width="2"
+          x1="45"
+          x2="60"
+          y1="95"
+          y2="95"
+        />
+
+        <line
+          class="stroke-purple-500 dark:stroke-purple-300"
+          stroke-linecap="round"
+          stroke-width="2"
+          x1="110"
+          x2="125"
+          y1="115"
+          y2="115"
+        />
+        <line
+          class="stroke-purple-500 dark:stroke-purple-300"
+          stroke-linecap="round"
+          stroke-width="2"
+          x1="110"
+          x2="140"
+          y1="120"
+          y2="120"
+        />
+        <line
+          class="stroke-purple-500 dark:stroke-purple-300"
+          stroke-linecap="round"
+          stroke-width="2"
+          x1="110"
+          x2="135"
+          y1="125"
+          y2="125"
+        />
+
+        <!-- 装饰性元素 -->
+        <circle
+          class="fill-orange-500 dark:fill-orange-300"
+          cx="50"
+          cy="50"
+          r="3"
+        />
+        <circle
+          class="fill-green-500 dark:fill-green-300"
+          cx="150"
+          cy="60"
+          r="3"
+        />
+        <circle
+          class="fill-pink-500 dark:fill-pink-300"
+          cx="40"
+          cy="140"
+          r="3"
+        />
+        <circle
+          class="fill-blue-500 dark:fill-blue-300"
+          cx="160"
+          cy="150"
+          r="3"
+        />
+
+        <!-- 连接线 -->
+        <path
+          class="stroke-gray-300 dark:stroke-gray-500"
+          d="M70 105 Q100 110 130 95"
+          fill="none"
+          stroke-dasharray="5,5"
+          stroke-width="2"
+        />
+      </svg>
+    </div>
+
+    <!-- 文字提示 -->
+    <div class="text-center">
+      <h3 class="mb-2 text-xl font-semibold text-gray-700 dark:text-gray-200">
+        开始聊天吧！
+      </h3>
+      <p class="max-w-md text-gray-600 dark:text-gray-400">
+        从左侧选择一个联系人开始对话，享受愉快的聊天体验
+      </p>
+    </div>
+
+    <!-- 装饰性动画元素 -->
+    <div
+      class="absolute left-20 top-20 h-4 w-4 animate-bounce rounded-full bg-blue-100 opacity-80 dark:bg-blue-800"
+    ></div>
+    <div
+      class="absolute bottom-20 right-20 h-6 w-6 animate-pulse rounded-full bg-purple-100 opacity-80 dark:bg-purple-800"
+    ></div>
+    <div
+      class="absolute right-40 top-40 h-3 w-3 animate-ping rounded-full bg-green-100 opacity-80 dark:bg-green-800"
+    ></div>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/business/chat/components/FileUploadPreview.vue b/apps/web-antd/src/views/business/chat/components/FileUploadPreview.vue
new file mode 100644
index 00000000..47d265f2
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/components/FileUploadPreview.vue
@@ -0,0 +1,69 @@
+<template>
+  <div
+    class="mb-3 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
+    <div class="flex items-center gap-3">
+      <!-- 文件缩略图 -->
+      <div
+        class="w-16 h-16 rounded-lg overflow-hidden bg-gray-200 dark:bg-gray-600 flex items-center justify-center">
+        <img
+          v-if="uploadPreview.type === 'image'"
+          :src="uploadPreview.url"
+          alt="预览"
+          class="w-full h-full object-cover"
+        />
+        <video
+          v-else-if="uploadPreview.type === 'video'"
+          :src="uploadPreview.url"
+          class="w-full h-full object-cover"
+          preload="metadata"
+        />
+        <FileOutlined v-else class="text-2xl text-gray-400"/>
+      </div>
+
+      <!-- 文件信息 -->
+      <div class="flex-1 min-w-0">
+        <div class="font-medium text-gray-800 dark:text-gray-200 truncate">{{
+            uploadPreview.nick_name
+          }}
+        </div>
+        <div class="text-sm text-gray-500 dark:text-gray-400">{{
+            formatFileSize(uploadPreview.size)
+          }}
+        </div>
+      </div>
+
+      <!-- 操作按钮 -->
+      <div class="flex gap-2">
+        <a-button type="primary" size="small" @click="sendFile">
+          <template #icon>
+            <SendOutlined/>
+          </template>
+          发送
+        </a-button>
+        <a-button size="small" @click="cancelUpload">
+          <template #icon>
+            <CloseOutlined/>
+          </template>
+          取消
+        </a-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {inject} from 'vue';
+import {FileOutlined, SendOutlined, CloseOutlined} from '@ant-design/icons-vue';
+
+const uploadPreview = inject('uploadPreview');
+const sendFile = inject('sendFile');
+const cancelUpload = inject('cancelUpload');
+
+const formatFileSize = (bytes) => {
+  if (bytes === 0) return '0 Bytes';
+  const k = 1024;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+};
+</script>
diff --git a/apps/web-antd/src/views/business/chat/components/FriendList.vue b/apps/web-antd/src/views/business/chat/components/FriendList.vue
new file mode 100644
index 00000000..419d503e
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/components/FriendList.vue
@@ -0,0 +1,353 @@
+<script setup>
+import { computed, ref, watch } from 'vue';
+import { Avatar } from 'ant-design-vue';
+import { useChatStore } from '../stores/chat.ts';
+import { useThemeStore } from '../stores/theme.ts';
+import { useUserStore } from '../stores/user.ts';
+import CustomInput from './CustomInput.vue';
+import FriendsManagement from './FriendsManagement.vue';
+import GroupsManagement from './GroupsManagement.vue';
+import MomentsView from './MomentsView.vue';
+import VirtualList from './VirtualList.vue';
+
+const props = defineProps({
+  currentView: {
+    type: String,
+    default: 'chat',
+  },
+});
+const chatStore = useChatStore();
+const userStore = useUserStore();
+const themeStore = useThemeStore();
+
+const searchQuery = ref('');
+
+const filteredFriends = computed(() => {
+  if (!searchQuery.value) return chatStore.friends;
+
+  const query = searchQuery.value.toLowerCase();
+  return chatStore.friends.filter(
+    (friend) =>
+      friend.nick_name.toLowerCase().includes(query) ||
+      friend.id.toString().includes(query),
+  );
+});
+
+const getListTitle = () => {
+  const titles = {
+    chat: '聊天',
+    friends: '好友',
+    groups: '群聊',
+    moments: '圈子',
+  };
+  return titles[props.currentView] || '聊天';
+};
+
+const selectFriend = (friend) => {
+  chatStore.setCurrentFriend(friend);
+  // 清除未读消息并加载聊天记录
+  chatStore.switchFriend(friend, userStore.currentUser.id);
+};
+
+// 监听当前视图变化，清空搜索
+watch(
+  () => props.currentView,
+  () => {
+    searchQuery.value = '';
+  },
+);
+</script>
+
+<template>
+  <div :class="{ dark: themeStore.isDarkMode }" class="friend-list">
+    <div class="list-header">
+      <h2 class="list-title">
+        {{ getListTitle() }}
+        <button
+          :title="themeStore.isDarkMode ? '切换到亮色模式' : '切换到暗色模式'"
+          class="theme-toggle"
+          @click="themeStore.toggleTheme"
+        >
+          <i
+            :class="themeStore.isDarkMode ? 'fa-sun' : 'fa-moon'"
+            class="fas"
+          ></i>
+        </button>
+      </h2>
+
+      <div class="search-container">
+        <CustomInput
+          v-model="searchQuery"
+          class="search-input"
+          placeholder="搜索联系人..."
+          prefix-icon="fas fa-search"
+        />
+      </div>
+    </div>
+
+    <div class="friends-container">
+      <VirtualList
+        v-if="currentView === 'chat'"
+        :item-height="80"
+        :items="filteredFriends"
+        class="friends-list"
+      >
+        <template #default="{ item: friend }">
+          <div
+            :class="{ active: chatStore.currentFriend?.id === friend.id }"
+            class="friend-item"
+            @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>
+            </div>
+
+            <div class="friend-info">
+              <div class="friend-name">{{ friend.nick_name }}</div>
+              <div class="friend-message">
+                {{ friend.lastMessage || '点击开始聊天' }}
+              </div>
+            </div>
+
+            <div class="friend-meta">
+              <div v-if="friend.lastMessageTime" class="message-time">
+                {{ friend.lastMessageTime }}
+              </div>
+              <div v-if="friend.unreadCount > 0" class="unread-badge">
+                {{ friend.unreadCount > 99 ? '99+' : friend.unreadCount }}
+              </div>
+            </div>
+          </div>
+        </template>
+      </VirtualList>
+
+      <FriendsManagement v-else-if="currentView === 'friends'" />
+      <GroupsManagement v-else-if="currentView === 'groups'" />
+      <MomentsView v-else-if="currentView === 'moments'" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.friend-list {
+  width: 320px;
+  min-width: 320px;
+  height: 100vh;
+  background: #ffffff;
+  border-right: 1px solid #e2e8f0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.friend-list.dark {
+  background: #1a1a1a;
+  border-right-color: #374151;
+}
+
+.list-header {
+  padding: 24px 20px;
+  border-bottom: 1px solid #e2e8f0;
+  background: #ffffff;
+  flex-shrink: 0;
+}
+
+.friend-list.dark .list-header {
+  background: #1a1a1a;
+  border-bottom-color: #374151;
+}
+
+.list-title {
+  font-size: 24px;
+  font-weight: 700;
+  color: #1a202c;
+  margin: 0 0 20px 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.friend-list.dark .list-title {
+  color: #f7fafc;
+}
+
+.theme-toggle {
+  background: #f7fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 8px 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  color: #64748b;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.theme-toggle:hover {
+  background: linear-gradient(135deg, #4361ee, #3f37c9);
+  color: white;
+  transform: scale(1.05);
+  border-color: transparent;
+}
+
+.friend-list.dark .theme-toggle {
+  background: #374151;
+  border-color: #4b5563;
+  color: #d1d5db;
+}
+
+.search-container {
+  position: relative;
+}
+
+.search-input {
+  width: 100%;
+}
+
+.friends-container {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.friends-list {
+  height: 100%;
+  flex: 1;
+}
+
+.friend-item {
+  display: flex;
+  align-items: center;
+  padding: 16px 20px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border-bottom: 1px solid #f1f5f9;
+  position: relative;
+}
+
+.friend-item:hover {
+  background: #f8fafc;
+}
+
+.friend-item.active {
+  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
+  border-left: 4px solid #4361ee;
+}
+
+.friend-list.dark .friend-item {
+  border-bottom-color: #374151;
+}
+
+.friend-list.dark .friend-item:hover {
+  background: #374151;
+}
+
+.friend-list.dark .friend-item.active {
+  background: linear-gradient(
+    135deg,
+    rgba(67, 97, 238, 0.2),
+    rgba(63, 55, 201, 0.1)
+  );
+}
+
+.friend-avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: bold;
+  font-size: 18px;
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+
+.friend-info {
+  flex: 1;
+  min-width: 0;
+  margin-right: 12px;
+}
+
+.friend-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1a202c;
+  margin-bottom: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.friend-list.dark .friend-name {
+  color: #f7fafc;
+}
+
+.friend-message {
+  font-size: 14px;
+  color: #64748b;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.friend-list.dark .friend-message {
+  color: #9ca3af;
+}
+
+.friend-meta {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.message-time {
+  font-size: 12px;
+  color: #94a3b8;
+}
+
+.friend-list.dark .message-time {
+  color: #6b7280;
+}
+
+.unread-badge {
+  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
+  color: white;
+  border-radius: 12px;
+  padding: 2px 8px;
+  font-size: 12px;
+  font-weight: 600;
+  min-width: 20px;
+  text-align: center;
+  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .friend-list {
+    width: 100%;
+    min-width: unset;
+  }
+
+  .list-header {
+    padding: 20px 16px;
+  }
+
+  .friend-item {
+    padding: 14px 16px;
+  }
+
+  .friend-avatar {
+    width: 44px;
+    height: 44px;
+    font-size: 16px;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/business/chat/components/FriendsManagement.vue b/apps/web-antd/src/views/business/chat/components/FriendsManagement.vue
new file mode 100644
index 00000000..e98b8007
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/components/FriendsManagement.vue
@@ -0,0 +1,265 @@
+<template>
+  <div class="friends-management" :class="{ 'dark': themeStore.isDarkMode }">
+    <div class="management-content">
+      <h1 class="page-title">好友管理</h1>
+
+      <!-- 搜索和筛选 -->
+      <div class="search-filter-section">
+        <CustomInput
+          v-model="searchQuery"
+          placeholder="搜索好友..."
+          prefix-icon="fas fa-search"
+          clearable
+          class="search-input"
+        />
+        <select class="filter-select">
+          <option value="all">全部好友</option>
+          <option value="online">在线好友</option>
+          <option value="offline">离线好友</option>
+        </select>
+      </div>
+
+      <!-- 好友网格 -->
+      <div class="friends-grid">
+        <div
+          v-for="friend in filteredFriends"
+          :key="friend.id"
+          class="friend-card"
+        >
+          <div class="card-content">
+            <div
+              class="friend-avatar"
+              :style="{ background: friend.color }"
+            >
+              {{ friend.nick_name.charAt(0) }}
+            </div>
+            <h3 class="friend-name">{{ friend.nick_name }}</h3>
+            <p class="friend-id">ID: {{ friend.id }}</p>
+            <div class="friend-actions">
+              <button class="action-btn primary-btn" @click="startChat(friend)">
+                聊天
+              </button>
+              <button class="action-btn secondary-btn">
+                详情
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref, computed} from 'vue';
+import {useChatStore} from '../stores/chat.ts';
+import {useUserStore} from '../stores/user.ts';
+import {useThemeStore} from '../stores/theme.ts';
+import CustomInput from './CustomInput.vue';
+
+const chatStore = useChatStore();
+const userStore = useUserStore();
+const themeStore = useThemeStore();
+
+const searchQuery = ref('');
+
+const filteredFriends = computed(() => {
+  if (!searchQuery.value) return chatStore.friends;
+  const query = searchQuery.value.toLowerCase();
+  return chatStore.friends.filter(friend =>
+    friend.nick_name.toLowerCase().includes(query) ||
+    friend.id.toString().includes(query)
+  );
+});
+
+const startChat = (friend) => {
+  chatStore.setCurrentFriend(friend);
+  chatStore.switchFriend(friend, userStore.currentUser.id);
+};
+</script>
+
+<style scoped>
+.friends-management {
+  height: 100%;
+  background: #f8fafc;
+  overflow-y: auto;
+}
+
+.friends-management.dark {
+  background: #111827;
+}
+
+.management-content {
+  padding: 24px;
+}
+
+.page-title {
+  font-size: 28px;
+  font-weight: 700;
+  color: #1a202c;
+  margin-bottom: 24px;
+}
+
+.friends-management.dark .page-title {
+  color: #f7fafc;
+}
+
+.search-filter-section {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.search-input {
+  flex: 1;
+}
+
+.filter-select {
+  padding: 12px 16px;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  background: white;
+  color: #1a202c;
+  font-size: 14px;
+  min-width: 140px;
+  cursor: pointer;
+}
+
+.friends-management.dark .filter-select {
+  background: #374151;
+  border-color: #4b5563;
+  color: #f7fafc;
+}
+
+.friends-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 20px;
+}
+
+.friend-card {
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+  border: 1px solid #e2e8f0;
+}
+
+.friend-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+}
+
+.friends-management.dark .friend-card {
+  background: #374151;
+  border-color: #4b5563;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.friends-management.dark .friend-card:hover {
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+}
+
+.card-content {
+  padding: 24px;
+  text-align: center;
+}
+
+.friend-avatar {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  margin: 0 auto 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: bold;
+  font-size: 24px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.friend-name {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1a202c;
+  margin: 0 0 8px 0;
+}
+
+.friends-management.dark .friend-name {
+  color: #f7fafc;
+}
+
+.friend-id {
+  font-size: 14px;
+  color: #64748b;
+  margin: 0 0 20px 0;
+}
+
+.friends-management.dark .friend-id {
+  color: #9ca3af;
+}
+
+.friend-actions {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+}
+
+.action-btn {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.primary-btn {
+  background: linear-gradient(135deg, #4361ee, #3f37c9);
+  color: white;
+}
+
+.primary-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
+}
+
+.secondary-btn {
+  background: #f1f5f9;
+  color: #64748b;
+  border: 1px solid #e2e8f0;
+}
+
+.secondary-btn:hover {
+  background: #e2e8f0;
+  color: #475569;
+}
+
+.friends-management.dark .secondary-btn {
+  background: #4b5563;
+  color: #d1d5db;
+  border-color: #6b7280;
+}
+
+.friends-management.dark .secondary-btn:hover {
+  background: #6b7280;
+  color: #f3f4f6;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .management-content {
+    padding: 16px;
+  }
+
+  .search-filter-section {
+    flex-direction: column;
+  }
+
+  .friends-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/business/chat/components/GroupsManagement.vue b/apps/web-antd/src/views/business/chat/components/GroupsManagement.vue
new file mode 100644
index 00000000..1d5b7743
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/components/GroupsManagement.vue
@@ -0,0 +1,280 @@
+<template>
+  <div class="groups-management" :class="{ 'dark': themeStore.isDarkMode }">
+    <div class="management-content">
+      <div class="header-section">
+        <h1 class="page-title">群聊管理</h1>
+        <button class="create-btn">
+          <i class="fas fa-plus"></i>
+          创建群聊
+        </button>
+      </div>
+
+      <!-- 群聊列表 -->
+      <div class="groups-grid">
+        <div
+          v-for="group in mockGroups"
+          :key="group.id"
+          class="group-card"
+        >
+          <div class="card-content">
+            <div class="group-header">
+              <div class="group-avatar">
+                {{ group.nick_name.charAt(0) }}
+              </div>
+              <div class="group-info">
+                <h3 class="group-name">{{ group.nick_name }}</h3>
+                <p class="group-members">{{ group.memberCount }} 人</p>
+              </div>
+            </div>
+            <p class="group-description">{{ group.description }}</p>
+            <div class="group-actions">
+              <button class="action-btn primary-btn">
+                进入群聊
+              </button>
+              <button class="action-btn secondary-btn">
+                设置
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref} from 'vue';
+import {useThemeStore} from '../stores/theme.ts';
+
+const themeStore = useThemeStore();
+
+const mockGroups = ref([
+  {
+    id: 1,
+    name: '技术交流群',
+    memberCount: 128,
+    description: '分享技术心得，讨论前沿技术'
+  },
+  {
+    id: 2,
+    name: '项目讨论组',
+    memberCount: 45,
+    description: '项目进度讨论和问题解决'
+  },
+  {
+    id: 3,
+    name: '休闲聊天室',
+    memberCount: 89,
+    description: '轻松愉快的日常交流'
+  }
+]);
+</script>
+
+<style scoped>
+.groups-management {
+  height: 100%;
+  background: #f8fafc;
+  overflow-y: auto;
+}
+
+.groups-management.dark {
+  background: #111827;
+}
+
+.management-content {
+  padding: 24px;
+}
+
+.header-section {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+}
+
+.page-title {
+  font-size: 28px;
+  font-weight: 700;
+  color: #1a202c;
+  margin: 0;
+}
+
+.groups-management.dark .page-title {
+  color: #f7fafc;
+}
+
+.create-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 20px;
+  background: linear-gradient(135deg, #4361ee, #3f37c9);
+  color: white;
+  border: none;
+  border-radius: 12px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.create-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(67, 97, 238, 0.3);
+}
+
+.groups-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  gap: 20px;
+}
+
+.group-card {
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+  border: 1px solid #e2e8f0;
+}
+
+.group-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+}
+
+.groups-management.dark .group-card {
+  background: #374151;
+  border-color: #4b5563;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.groups-management.dark .group-card:hover {
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+}
+
+.card-content {
+  padding: 24px;
+}
+
+.group-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.group-avatar {
+  width: 48px;
+  height: 48px;
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: bold;
+  font-size: 18px;
+  flex-shrink: 0;
+}
+
+.group-info {
+  flex: 1;
+}
+
+.group-name {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1a202c;
+  margin: 0 0 4px 0;
+}
+
+.groups-management.dark .group-name {
+  color: #f7fafc;
+}
+
+.group-members {
+  font-size: 14px;
+  color: #64748b;
+  margin: 0;
+}
+
+.groups-management.dark .group-members {
+  color: #9ca3af;
+}
+
+.group-description {
+  font-size: 14px;
+  color: #64748b;
+  margin: 0 0 20px 0;
+  line-height: 1.5;
+}
+
+.groups-management.dark .group-description {
+  color: #9ca3af;
+}
+
+.group-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.action-btn {
+  flex: 1;
+  padding: 10px 16px;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.primary-btn {
+  background: linear-gradient(135deg, #4361ee, #3f37c9);
+  color: white;
+}
+
+.primary-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
+}
+
+.secondary-btn {
+  background: #f1f5f9;
+  color: #64748b;
+  border: 1px solid #e2e8f0;
+}
+
+.secondary-btn:hover {
+  background: #e2e8f0;
+  color: #475569;
+}
+
+.groups-management.dark .secondary-btn {
+  background: #4b5563;
+  color: #d1d5db;
+  border-color: #6b7280;
+}
+
+.groups-management.dark .secondary-btn:hover {
+  background: #6b7280;
+  color: #f3f4f6;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .management-content {
+    padding: 16px;
+  }
+
+  .header-section {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+  }
+
+  .groups-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/business/chat/components/MediaPreview.vue b/apps/web-antd/src/views/business/chat/components/MediaPreview.vue
new file mode 100644
index 00000000..a0bdaa15
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/components/MediaPreview.vue
@@ -0,0 +1,637 @@
+<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 { Image } from 'ant-design-vue';
+// import VueEasyLightbox from 'vue-easy-lightbox';
+import {useThemeStore} from '../stores/theme.ts';
+
+const themeStore = useThemeStore();
+const {visible, mediaData, hidePreview, previewType} = useMediaPreview();
+
+// 视频相关状态
+const videoPlayer = ref(null);
+const isPlaying = ref(false);
+const isMuted = ref(false);
+const volume = ref(1);
+const currentTime = ref(0);
+const duration = ref(0);
+const showControls = ref(true);
+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 progressPercent = computed(() => {
+  if (duration.value === 0) return 0;
+  return (currentTime.value / duration.value) * 100;
+});
+
+// 视频加载完成
+const handleVideoLoad = () => {
+  if (videoPlayer.value) {
+    duration.value = videoPlayer.value.duration;
+
+    // 检测视频方向
+    const video = videoPlayer.value;
+    isPortrait.value = video.videoHeight > video.videoWidth;
+
+    // 监听时间更新
+    video.addEventListener('timeupdate', updateTime);
+  }
+};
+
+// 图片加载完成
+const handleImageLoad = () => {
+  // 可以在这里添加图片加载完成的逻辑
+};
+
+// 更新播放时间
+const updateTime = () => {
+  if (videoPlayer.value) {
+    currentTime.value = videoPlayer.value.currentTime;
+  }
+};
+
+// 视频播放/暂停事件
+const handleVideoPlay = () => {
+  isPlaying.value = true;
+  hideControlsAfterDelay();
+};
+
+const handleVideoPause = () => {
+  isPlaying.value = false;
+  showControls.value = true;
+  clearTimeout(controlsTimeout.value);
+};
+
+// 控制功能
+const togglePlay = () => {
+  if (videoPlayer.value) {
+    if (isPlaying.value) {
+      videoPlayer.value.pause();
+    } else {
+      videoPlayer.value.play();
+    }
+  }
+};
+
+const toggleMute = () => {
+  if (videoPlayer.value) {
+    videoPlayer.value.muted = !videoPlayer.value.muted;
+    isMuted.value = videoPlayer.value.muted;
+  }
+};
+
+const updateVolume = () => {
+  if (videoPlayer.value) {
+    videoPlayer.value.volume = volume.value;
+    isMuted.value = volume.value === 0;
+  }
+};
+
+const seekTo = (event) => {
+  if (videoPlayer.value) {
+    const rect = event.target.getBoundingClientRect();
+    const percent = (event.clientX - rect.left) / rect.width;
+    videoPlayer.value.currentTime = percent * duration.value;
+  }
+};
+
+const toggleFullscreen = () => {
+  if (videoPlayer.value) {
+    if (document.fullscreenElement) {
+      document.exitFullscreen();
+    } else {
+      videoPlayer.value.requestFullscreen();
+    }
+  }
+};
+
+const togglePictureInPicture = async () => {
+  if (videoPlayer.value) {
+    try {
+      if (document.pictureInPictureElement) {
+        await document.exitPictureInPicture();
+      } else {
+        await videoPlayer.value.requestPictureInPicture();
+      }
+    } catch (error) {
+      console.error('画中画功能不支持:', error);
+    }
+  }
+};
+
+// 隐藏控制栏
+const hideControlsAfterDelay = () => {
+  clearTimeout(controlsTimeout.value);
+  controlsTimeout.value = setTimeout(() => {
+    if (isPlaying.value) {
+      showControls.value = false;
+    }
+  }, 3000);
+};
+
+// 显示控制栏
+const showControlsTemporarily = () => {
+  showControls.value = true;
+  if (isPlaying.value) {
+    hideControlsAfterDelay();
+  }
+};
+
+// 格式化时间
+const formatDuration = (seconds) => {
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins}:${secs.toString().padStart(2, '0')}`;
+};
+
+// 下载媒体
+const downloadMedia = () => {
+  if (mediaData.value?.url) {
+    const link = document.createElement('a');
+    link.href = mediaData.value.url;
+    link.download = `media_${Date.now()}`;
+    link.click();
+  }
+};
+
+// 分享媒体
+const shareMedia = async () => {
+  if (navigator.share && mediaData.value?.url) {
+    try {
+      await navigator.share({
+        title: '分享媒体',
+        url: mediaData.value.url
+      });
+    } catch (error) {
+      console.log('分享取消或失败');
+    }
+  } else {
+    // 复制链接到剪贴板
+    navigator.clipboard.writeText(mediaData.value?.url || '');
+    alert('链接已复制到剪贴板');
+  }
+};
+
+// 键盘事件处理
+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':
+      if (showVideoPreview.value && videoPlayer.value) {
+        event.preventDefault();
+        videoPlayer.value.currentTime -= 10;
+      }
+      break;
+    case 'ArrowRight':
+      if (showVideoPreview.value && videoPlayer.value) {
+        event.preventDefault();
+        videoPlayer.value.currentTime += 10;
+      }
+      break;
+  }
+};
+
+// 监听媒体数据变化
+watch(mediaData, () => {
+  if (previewType.value === 'video') {
+    isPlaying.value = false;
+    currentTime.value = 0;
+    duration.value = 0;
+    showControls.value = true;
+  }
+});
+
+onMounted(() => {
+  document.addEventListener('keydown', handleKeydown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleKeydown);
+  clearTimeout(controlsTimeout.value);
+});
+</script>
+
+<style scoped>
+.media-preview-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.9);
+  backdrop-filter: blur(10px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+  animation: fadeIn 0.3s ease;
+}
+
+.media-preview-overlay.dark {
+  background: rgba(0, 0, 0, 0.95);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.preview-container {
+  position: relative;
+  max-width: 90vw;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.video-preview-container {
+  position: relative;
+  max-width: 90vw;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: #000;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.video-preview-container.portrait {
+  max-width: 60vw;
+}
+
+.preview-close-btn {
+  position: absolute;
+  top: -50px;
+  right: 0;
+  width: 40px;
+  height: 40px;
+  background: rgba(255, 255, 255, 0.2);
+  border: none;
+  border-radius: 50%;
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  transition: all 0.3s ease;
+  z-index: 10;
+}
+
+.preview-close-btn:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: scale(1.1);
+}
+
+.image-preview-content {
+  position: relative;
+}
+
+.preview-image {
+  max-width: 100%;
+  max-height: 80vh;
+  border-radius: 8px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+}
+
+.video-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.preview-video {
+  width: 100%;
+  height: 100%;
+  max-height: 80vh;
+  object-fit: contain;
+}
+
+.video-controls {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
+  color: white;
+  padding: 20px;
+  transition: all 0.3s ease;
+}
+
+.controls-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.video-title {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.video-info {
+  font-size: 14px;
+  opacity: 0.8;
+}
+
+.controls-bottom {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.control-btn {
+  width: 40px;
+  height: 40px;
+  background: rgba(255, 255, 255, 0.2);
+  border: none;
+  border-radius: 50%;
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  transition: all 0.3s ease;
+}
+
+.control-btn:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: scale(1.1);
+}
+
+.progress-container {
+  flex: 1;
+  margin: 0 16px;
+}
+
+.progress-bar {
+  position: relative;
+  height: 6px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.progress-fill {
+  height: 100%;
+  background: #4361ee;
+  border-radius: 3px;
+  transition: width 0.1s ease;
+}
+
+.progress-thumb {
+  position: absolute;
+  top: -4px;
+  width: 14px;
+  height: 14px;
+  background: #4361ee;
+  border-radius: 50%;
+  transform: translateX(-50%);
+  transition: left 0.1s ease;
+}
+
+.volume-container {
+  width: 80px;
+}
+
+.volume-slider {
+  width: 100%;
+  height: 4px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 2px;
+  outline: none;
+  cursor: pointer;
+}
+
+.volume-slider::-webkit-slider-thumb {
+  appearance: none;
+  width: 12px;
+  height: 12px;
+  background: #4361ee;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.preview-actions,
+.video-actions {
+  position: absolute;
+  top: 20px;
+  right: 60px;
+  display: flex;
+  gap: 12px;
+}
+
+.action-btn {
+  width: 40px;
+  height: 40px;
+  background: rgba(255, 255, 255, 0.2);
+  border: none;
+  border-radius: 50%;
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  transition: all 0.3s ease;
+}
+
+.action-btn:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: scale(1.1);
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .preview-container,
+  .video-preview-container {
+    max-width: 95vw;
+    max-height: 95vh;
+  }
+
+  .video-preview-container.portrait {
+    max-width: 95vw;
+  }
+
+  .preview-close-btn {
+    top: -40px;
+    width: 36px;
+    height: 36px;
+    font-size: 16px;
+  }
+
+  .video-controls {
+    padding: 16px;
+  }
+
+  .controls-bottom {
+    gap: 12px;
+  }
+
+  .control-btn {
+    width: 36px;
+    height: 36px;
+    font-size: 14px;
+  }
+
+  .volume-container {
+    width: 60px;
+  }
+
+  .preview-actions,
+  .video-actions {
+    top: 16px;
+    right: 50px;
+    gap: 8px;
+  }
+
+  .action-btn {
+    width: 36px;
+    height: 36px;
+    font-size: 14px;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/business/chat/components/MessageBubble.vue b/apps/web-antd/src/views/business/chat/components/MessageBubble.vue
new file mode 100644
index 00000000..8b9466fe
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/components/MessageBubble.vue
@@ -0,0 +1,464 @@
+<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 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,
+    required: true
+  },
+  isSent: {
+    type: Boolean,
+    default: false
+  },
+  senderInfo: {
+    type: Object,
+    required: true
+  }
+});
+
+const emit = defineEmits(['show-user-profile']);
+
+const avatarStyle = computed(() => ({
+  background: props.senderInfo.color
+}));
+
+const bubbleClasses = computed(() => {
+  const baseClasses = ['message-bubble'];
+
+  if (props.isSent) {
+    baseClasses.push('sent');
+  } else {
+    baseClasses.push('received');
+  }
+
+  if (themeStore.isDarkMode) {
+    baseClasses.push('dark');
+  }
+
+  return baseClasses;
+});
+
+const handlePreviewMedia = (content, type) => {
+  previewMedia(content, type);
+};
+
+const showUserProfile = () => {
+  emit('show-user-profile', props.senderInfo);
+};
+
+const formatDuration = (seconds) => {
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  return `${mins}:${secs.toString().padStart(2, '0')}`;
+};
+
+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 openUrl = (url) => {
+  window.open(url, '_blank', 'noopener,noreferrer');
+};
+
+const getCallStatusText = (status) => {
+  const statusMap = {
+    'invite': '发起通话',
+    'accepted': '通话已接通',
+    'rejected': '通话被拒绝',
+    'ended': '通话已结束',
+    'missed': '未接通话'
+  };
+  return statusMap[status] || '通话消息';
+};
+
+const handleImageError = (event) => {
+  event.target.src = '/placeholder.svg?height=200&width=300';
+};
+
+const handleVideoError = (event) => {
+  console.error('视频加载失败:', event);
+};
+</script>
+
+<style scoped>
+.message-bubble {
+  position: relative;
+  max-width: 100%;
+  word-wrap: break-word;
+  transition: all 0.2s ease;
+}
+
+.message-bubble.sent {
+  background: linear-gradient(135deg, #4361ee, #3f37c9);
+  color: white;
+  border-bottom-right-radius: 4px;
+}
+
+.message-bubble.received {
+  background: white;
+  color: #1a202c;
+  border: 1px solid #e2e8f0;
+  border-bottom-left-radius: 4px;
+}
+
+.message-bubble.received.dark {
+  background: #374151;
+  color: #f7fafc;
+  border-color: #4b5563;
+}
+
+.video-message {
+  position: relative;
+  border-radius: 12px;
+  overflow: hidden;
+  max-width: 300px;
+}
+
+.video-thumbnail {
+  width: 100%;
+  height: auto;
+  max-height: 200px;
+  object-fit: cover;
+  display: block;
+}
+
+.video-overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.video-message:hover .video-overlay {
+  opacity: 1;
+}
+
+.play-button {
+  width: 60px;
+  height: 60px;
+  background: rgba(0, 0, 0, 0.7);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 24px;
+  backdrop-filter: blur(10px);
+  transition: all 0.3s ease;
+}
+
+.play-button:hover {
+  background: rgba(0, 0, 0, 0.8);
+  transform: scale(1.1);
+}
+
+.video-duration {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.call-message {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 4px 0;
+}
+
+.call-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 500;
+}
+
+.call-info i {
+  width: 16px;
+  text-align: center;
+}
+
+.call-duration {
+  font-size: 12px;
+  opacity: 0.8;
+}
+
+.url-message {
+  max-width: 400px;
+}
+
+.url-preview {
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  background: white;
+  display: flex;
+  align-items: flex-start;
+  padding: 12px;
+  gap: 12px;
+}
+
+.url-preview:hover {
+  border-color: #4361ee;
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(67, 97, 238, 0.15);
+}
+
+.message-bubble.sent .url-preview {
+  border-color: rgba(255, 255, 255, 0.3);
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+}
+
+.message-bubble.received.dark .url-preview {
+  border-color: #4b5563;
+  background: #4b5563;
+}
+
+.url-favicon {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.url-favicon img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 2px;
+}
+
+.url-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.url-title {
+  font-weight: 600;
+  font-size: 14px;
+  margin-bottom: 4px;
+  color: #1a202c;
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.message-bubble.sent .url-title {
+  color: white;
+}
+
+.message-bubble.received.dark .url-title {
+  color: #f7fafc;
+}
+
+.url-description {
+  font-size: 12px;
+  color: #64748b;
+  margin-bottom: 4px;
+  line-height: 1.3;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.message-bubble.sent .url-description {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.message-bubble.received.dark .url-description {
+  color: #9ca3af;
+}
+
+.url-domain {
+  font-size: 11px;
+  color: #94a3b8;
+  font-weight: 500;
+}
+
+.message-bubble.sent .url-domain {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.message-bubble.received.dark .url-domain {
+  color: #6b7280;
+}
+
+.url-thumbnail {
+  width: 60px;
+  height: 60px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.url-thumbnail img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.url-text {
+  margin-top: 8px;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+:deep(.text-link) {
+  color: #4361ee;
+  text-decoration: underline;
+  transition: color 0.2s ease;
+}
+
+:deep(.text-link:hover) {
+  color: #3f37c9;
+}
+
+.message-bubble.sent :deep(.text-link) {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.message-bubble.sent :deep(.text-link:hover) {
+  color: white;
+}
+</style>
diff --git a/apps/web-antd/src/views/business/chat/components/MessageInput.vue b/apps/web-antd/src/views/business/chat/components/MessageInput.vue
new file mode 100644
index 00000000..23e73219
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/components/MessageInput.vue
@@ -0,0 +1,543 @@
+<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 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();
+const themeStore = useThemeStore();
+
+const messageText = ref('');
+const messageInputRef = ref(null);
+const showEmojiPicker = ref(false);
+
+// 使用文件上传组合式函数
+const {
+  uploadPreview,
+  imageInput,
+  videoInput,
+  triggerFileInput,
+  handleFileUpload,
+  cancelUpload
+} = useFileUpload();
+
+// 使用录音组合式函数
+const {isRecording, startRecording, stopRecording} = useRecording();
+
+// 发送上传的文件
+const sendUploadedFile = () => {
+  if (!uploadPreview.value) return;
+
+  const messageObj = {
+    type: uploadPreview.value.type,
+    content: uploadPreview.value.url,
+    time: new Date().toLocaleTimeString().slice(0, 5),
+    senderId: userStore.currentUser.id,
+    receiverId: chatStore.currentFriend.id,
+    read: true,
+    duration: 0
+  };
+
+  chatStore.addMessage(messageObj, userStore.currentUser.id);
+
+  // 发送到服务器
+  sendMessage({
+    senderId: userStore.currentUser.id,
+    receiverId: chatStore.currentFriend.id,
+    type: uploadPreview.value.type,
+    content: uploadPreview.value.url
+  }).catch(error => {
+    console.error('发送文件失败:', error);
+    message.error('文件发送失败');
+  });
+
+  uploadPreview.value = null;
+};
+
+// 提供给子组件
+provide('uploadPreview', uploadPreview);
+provide('cancelUpload', cancelUpload);
+provide('sendFile', sendUploadedFile);
+
+// 发送文本消息
+const sendTextMessage = async () => {
+  const content = messageText.value.trim();
+  if (!content && !uploadPreview.value) return;
+
+  let messageContent = content;
+  let messageType = 'text';
+
+  // 如果有文件预览，发送文件
+  if (uploadPreview.value) {
+    messageContent = uploadPreview.value.url;
+    messageType = uploadPreview.value.type;
+    uploadPreview.value = null;
+  }
+
+  // 创建消息对象
+  const messageObj = {
+    type: messageType,
+    content: messageContent,
+    time: new Date().toLocaleTimeString().slice(0, 5),
+    senderId: userStore.currentUser.id,
+    read: true,
+    duration: 0
+  };
+
+  // return console.log('发送消息:' + userStore.currentUser.id, messageObj);
+  // 添加到本地消息列表
+  chatStore.addMessage(messageObj, userStore.currentUser.id);
+
+  // 发送到服务器
+  try {
+    await sendMessage({
+      senderId: userStore.currentUser.id,
+      receiverId: chatStore.currentFriend.id,
+      roomId: chatStore.currentFriend.room_id,
+      type: messageType,
+      content: messageContent
+    });
+  } catch (error) {
+    console.error('发送消息失败:', error);
+    message.error('消息发送失败');
+  }
+
+  // 清空输入框
+  messageText.value = '';
+
+  // 重置焦点
+  nextTick(() => {
+    if (messageInputRef.value) {
+      messageInputRef.value.focus();
+    }
+  });
+};
+
+// 处理键盘事件
+const handleKeydown = (event) => {
+  if (event.key === 'Enter' && !event.shiftKey) {
+    event.preventDefault();
+    sendTextMessage();
+  }
+};
+
+// 处理粘贴文件
+const handlePasteFile = (file) => {
+  console.log('检测到粘贴文件:', file);
+
+  // 根据文件类型自动选择处理方式
+  if (file.type.startsWith('image/')) {
+    handleFileFromPaste(file, 'image');
+  } else if (file.type.startsWith('video/')) {
+    handleFileFromPaste(file, 'video');
+  } else {
+    message.warning('不支持的文件类型');
+  }
+};
+
+// 处理粘贴的文件
+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`);
+    return;
+  }
+
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    uploadPreview.value = {
+      type: type,
+      url: e.target.result,
+      name: file.nick_name,
+      size: file.size,
+      file: file
+    };
+  };
+
+  reader.onerror = (error) => {
+    console.error('文件读取失败:', error);
+    message.error('文件读取失败，请重试');
+  };
+
+  reader.readAsDataURL(file);
+};
+
+// 切换表情选择器
+const toggleEmojiPicker = () => {
+  showEmojiPicker.value = !showEmojiPicker.value;
+};
+
+// 插入表情
+const insertEmoji = (emoji) => {
+  messageText.value += emoji;
+  showEmojiPicker.value = false;
+
+  nextTick(() => {
+    if (messageInputRef.value) {
+      messageInputRef.value.focus();
+    }
+  });
+};
+
+// 监听录音完成事件
+const handleAudioRecorded = (event) => {
+  const {url, duration} = event.detail;
+
+  const messageObj = {
+    type: 'audio',
+    content: url,
+    time: new Date().toLocaleTimeString().slice(0, 5),
+    senderId: userStore.currentUser.id,
+    read: true,
+    duration: duration
+  };
+
+  chatStore.addMessage(messageObj, userStore.currentUser.id);
+
+  // 发送到服务器
+  sendMessage({
+    senderId: userStore.currentUser.id,
+    receiverId: chatStore.currentFriend.id,
+    type: 'audio',
+    content: url
+  }).catch(error => {
+    console.error('发送音频失败:', error);
+    message.error('音频发送失败');
+  });
+};
+
+onMounted(() => {
+  window.addEventListener('audioRecorded', handleAudioRecorded);
+
+  // 点击外部关闭表情选择器
+  document.addEventListener('click', (event) => {
+    if (!event.target.closest('.emoji-picker') && !event.target.closest('.function-btn')) {
+      showEmojiPicker.value = false;
+    }
+  });
+});
+
+onUnmounted(() => {
+  window.removeEventListener('audioRecorded', handleAudioRecorded);
+});
+</script>
+
+<style scoped>
+.message-input-area {
+  padding: 20px;
+  border-top: 1px solid #e2e8f0;
+  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+  position: relative;
+}
+
+.message-input-area.dark {
+  border-top-color: #374151;
+  background: linear-gradient(135deg, #2d2d2d 0%, #1f2937 100%);
+}
+
+.input-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.function-buttons {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.function-btn {
+  position: relative;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  border: none;
+  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
+  color: #64748b;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.function-btn:hover {
+  background: linear-gradient(135deg, #4361ee, #3f37c9);
+  color: white;
+  transform: translateY(-2px) scale(1.05);
+  box-shadow: 0 8px 20px rgba(67, 97, 238, 0.3);
+}
+
+.function-btn.active {
+  background: linear-gradient(135deg, #4361ee, #3f37c9);
+  color: white;
+  transform: scale(1.1);
+}
+
+.function-btn.recording {
+  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
+  color: white;
+  animation: pulse-recording 1s infinite;
+}
+
+@keyframes pulse-recording {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.recording-wave {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 60px;
+  height: 60px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  animation: wave-expand 1.5s infinite;
+}
+
+@keyframes wave-expand {
+  0% {
+    transform: translate(-50%, -50%) scale(0.8);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1.5);
+    opacity: 0;
+  }
+}
+
+.btn-ripple {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.3);
+  transform: translate(-50%, -50%);
+  transition: all 0.6s ease;
+}
+
+.function-btn:active .btn-ripple {
+  width: 100px;
+  height: 100px;
+}
+
+.message-input-area.dark .function-btn {
+  background: linear-gradient(135deg, #374151, #4b5563);
+  color: #9ca3af;
+}
+
+.message-input-area.dark .function-btn:hover {
+  background: linear-gradient(135deg, #4361ee, #3f37c9);
+  color: white;
+}
+
+.input-section {
+  display: flex;
+  align-items: end;
+  gap: 12px;
+  position: relative;
+}
+
+.message-textarea {
+  flex: 1;
+}
+
+.send-btn {
+  position: relative;
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  border: none;
+  background: linear-gradient(135deg, #4361ee, #3f37c9);
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
+}
+
+.send-btn:hover:not(:disabled) {
+  transform: translateY(-2px) scale(1.05);
+  box-shadow: 0 8px 20px rgba(67, 97, 238, 0.4);
+}
+
+.send-btn:disabled {
+  background: #94a3b8;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+.send-ripple {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.4);
+  transform: translate(-50%, -50%);
+  transition: all 0.6s ease;
+}
+
+.send-btn:active:not(:disabled) .send-ripple {
+  width: 80px;
+  height: 80px;
+}
+
+.hidden {
+  display: none;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .function-buttons {
+    gap: 8px;
+  }
+
+  .function-btn {
+    width: 40px;
+    height: 40px;
+    font-size: 16px;
+  }
+
+  .send-btn {
+    width: 48px;
+    height: 48px;
+    font-size: 16px;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/business/chat/components/MessageItem.vue b/apps/web-antd/src/views/business/chat/components/MessageItem.vue
new file mode 100644
index 00000000..cf5e7bde
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/components/MessageItem.vue
@@ -0,0 +1,97 @@
+<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
new file mode 100644
index 00000000..bc3c1d4c
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/components/MessageList.vue
@@ -0,0 +1,87 @@
+<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 MessageBubble from './MessageBubble.vue';
+
+const userStore = useUserStore();
+const chatStore = useChatStore();
+
+const messagesContainer = ref(null);
+const loadingMessages = ref(false);
+
+// 获取发送者信息
+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'
+    }
+  }
+}
+
+// 滚动到底部
+const scrollToBottom = () => {
+  if (messagesContainer.value) {
+    nextTick(() => {
+      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
+    });
+  }
+};
+
+// 监听消息变化，自动滚动到底部
+watch(() => chatStore.messages.length, () => {
+  scrollToBottom();
+});
+
+// 监听当前好友变化，重新加载消息
+watch(() => chatStore.currentFriend, () => {
+  scrollToBottom();
+});
+</script>
+
+<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>');
+  background-size: 200px 200px;
+}
+</style>
diff --git a/apps/web-antd/src/views/business/chat/components/MomentsView.vue b/apps/web-antd/src/views/business/chat/components/MomentsView.vue
new file mode 100644
index 00000000..b087691f
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/components/MomentsView.vue
@@ -0,0 +1,446 @@
+<template>
+  <div class="moments-view" :class="{ 'dark': themeStore.isDarkMode }">
+    <div class="moments-content">
+      <h1 class="page-title">朋友圈</h1>
+
+      <!-- 发布动态 -->
+      <div class="post-composer">
+        <div class="composer-header">
+          <div class="user-avatar" :style="{ background: userStore.currentUser?.color }">
+            {{ userStore.currentUser?.nick_name?.charAt(0) }}
+          </div>
+          <CustomTextarea
+            v-model="newPostContent"
+            placeholder="分享新鲜事..."
+            class="post-input"
+            :rows="3"
+          />
+        </div>
+        <div class="composer-actions">
+          <div class="media-buttons">
+            <button class="media-btn">
+              <i class="fas fa-image"></i>
+              图片
+            </button>
+            <button class="media-btn">
+              <i class="fas fa-video"></i>
+              视频
+            </button>
+          </div>
+          <button class="publish-btn" :disabled="!newPostContent.trim()">
+            发布
+          </button>
+        </div>
+      </div>
+
+      <!-- 动态列表 -->
+      <div class="moments-list">
+        <div
+          v-for="moment in mockMoments"
+          :key="moment.id"
+          class="moment-card"
+        >
+          <div class="moment-header">
+            <div class="author-avatar" :style="{ background: moment.author.color }">
+              {{ moment.author.nick_name.charAt(0) }}
+            </div>
+            <div class="author-info">
+              <h4 class="author-name">{{ moment.author.nick_name }}</h4>
+              <p class="post-time">{{ moment.time }}</p>
+            </div>
+          </div>
+
+          <div class="moment-content">
+            <p class="moment-text">{{ moment.content }}</p>
+            <div v-if="moment.images" class="moment-images">
+              <img
+                v-for="(image, index) in moment.images"
+                :key="index"
+                :src="image"
+                :alt="`图片${index + 1}`"
+                class="moment-image"
+              />
+            </div>
+          </div>
+
+          <div class="moment-actions">
+            <button class="action-btn like-btn">
+              <i class="fas fa-heart"></i>
+              {{ moment.likes }}
+            </button>
+            <button class="action-btn comment-btn">
+              <i class="fas fa-comment"></i>
+              {{ moment.comments }}
+            </button>
+            <button class="action-btn share-btn">
+              <i class="fas fa-share"></i>
+              分享
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref} from 'vue';
+import {useUserStore} from '../stores/user.ts';
+import {useThemeStore} from '../stores/theme.ts';
+import CustomTextarea from './CustomTextarea.vue';
+
+const userStore = useUserStore();
+const themeStore = useThemeStore();
+
+const newPostContent = ref('');
+
+const mockMoments = ref([
+  {
+    id: 1,
+    author: {
+      name: '张三',
+      color: '#ff6b6b'
+    },
+    content: '今天天气真不错，出去走走心情都变好了！',
+    time: '2小时前',
+    likes: 12,
+    comments: 3,
+    images: ['/placeholder.svg?height=200&width=200']
+  },
+  {
+    id: 2,
+    author: {
+      name: '李四',
+      color: '#4ecdc4'
+    },
+    content: '刚完成了一个新项目，感觉很有成就感！',
+    time: '5小时前',
+    likes: 8,
+    comments: 2
+  },
+  {
+    id: 3,
+    author: {
+      name: '王五',
+      color: '#45b7d1'
+    },
+    content: '分享一张美丽的日落照片',
+    time: '1天前',
+    likes: 25,
+    comments: 7,
+    images: ['/placeholder.svg?height=300&width=400']
+  }
+]);
+</script>
+
+<style scoped>
+.moments-view {
+  height: 100%;
+  background: #f8fafc;
+  overflow-y: auto;
+}
+
+.moments-view.dark {
+  background: #111827;
+}
+
+.moments-content {
+  padding: 24px;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.page-title {
+  font-size: 28px;
+  font-weight: 700;
+  color: #1a202c;
+  margin-bottom: 24px;
+  text-align: center;
+}
+
+.moments-view.dark .page-title {
+  color: #f7fafc;
+}
+
+.post-composer {
+  background: white;
+  border-radius: 16px;
+  padding: 20px;
+  margin-bottom: 24px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  border: 1px solid #e2e8f0;
+}
+
+.moments-view.dark .post-composer {
+  background: #374151;
+  border-color: #4b5563;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.composer-header {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.user-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: bold;
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.post-input {
+  flex: 1;
+}
+
+.composer-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.media-buttons {
+  display: flex;
+  gap: 12px;
+}
+
+.media-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  background: #f1f5f9;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  color: #64748b;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.media-btn:hover {
+  background: #e2e8f0;
+  color: #475569;
+}
+
+.moments-view.dark .media-btn {
+  background: #4b5563;
+  border-color: #6b7280;
+  color: #d1d5db;
+}
+
+.moments-view.dark .media-btn:hover {
+  background: #6b7280;
+  color: #f3f4f6;
+}
+
+.publish-btn {
+  padding: 8px 20px;
+  background: linear-gradient(135deg, #4361ee, #3f37c9);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.publish-btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
+}
+
+.publish-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.moments-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.moment-card {
+  background: white;
+  border-radius: 16px;
+  padding: 20px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  border: 1px solid #e2e8f0;
+  transition: all 0.3s ease;
+}
+
+.moment-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+}
+
+.moments-view.dark .moment-card {
+  background: #374151;
+  border-color: #4b5563;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.moments-view.dark .moment-card:hover {
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+}
+
+.moment-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.author-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.author-info {
+  flex: 1;
+}
+
+.author-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1a202c;
+  margin: 0 0 4px 0;
+}
+
+.moments-view.dark .author-name {
+  color: #f7fafc;
+}
+
+.post-time {
+  font-size: 12px;
+  color: #64748b;
+  margin: 0;
+}
+
+.moments-view.dark .post-time {
+  color: #9ca3af;
+}
+
+.moment-content {
+  margin-bottom: 16px;
+}
+
+.moment-text {
+  font-size: 14px;
+  color: #374151;
+  line-height: 1.6;
+  margin: 0 0 12px 0;
+}
+
+.moments-view.dark .moment-text {
+  color: #d1d5db;
+}
+
+.moment-images {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.moment-image {
+  width: 100%;
+  height: 150px;
+  object-fit: cover;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.moment-image:hover {
+  transform: scale(1.02);
+}
+
+.moment-actions {
+  display: flex;
+  gap: 20px;
+  padding-top: 16px;
+  border-top: 1px solid #e2e8f0;
+}
+
+.moments-view.dark .moment-actions {
+  border-top-color: #4b5563;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  background: transparent;
+  border: none;
+  color: #64748b;
+  font-size: 14px;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.action-btn:hover {
+  background: #f1f5f9;
+  color: #475569;
+}
+
+.moments-view.dark .action-btn {
+  color: #9ca3af;
+}
+
+.moments-view.dark .action-btn:hover {
+  background: #4b5563;
+  color: #d1d5db;
+}
+
+.like-btn:hover {
+  color: #ef4444;
+}
+
+.comment-btn:hover {
+  color: #3b82f6;
+}
+
+.share-btn:hover {
+  color: #10b981;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .moments-content {
+    padding: 16px;
+  }
+
+  .composer-actions {
+    flex-direction: column;
+    gap: 12px;
+    align-items: stretch;
+  }
+
+  .media-buttons {
+    justify-content: center;
+  }
+
+  .moment-images {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/business/chat/components/RecordingIndicator.vue b/apps/web-antd/src/views/business/chat/components/RecordingIndicator.vue
new file mode 100644
index 00000000..bf9de4ff
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/components/RecordingIndicator.vue
@@ -0,0 +1,19 @@
+<template>
+  <div
+    v-if="isRecording"
+    class="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50"
+  >
+    <div class="bg-white dark:bg-gray-800 rounded-lg p-6 flex items-center gap-4 shadow-xl">
+      <div class="w-4 h-4 bg-red-500 rounded-full animate-pulse"></div>
+      <span class="text-lg font-medium text-gray-800 dark:text-gray-200">正在录音... 松开发送</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {inject} from 'vue';
+import {useRecording} from "../composables/useRecording.ts";
+
+// 使用录音组合式函数
+const {isRecording} = useRecording();
+</script>
diff --git a/apps/web-antd/src/views/business/chat/components/SettingsModal.vue b/apps/web-antd/src/views/business/chat/components/SettingsModal.vue
new file mode 100644
index 00000000..4deb755a
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/components/SettingsModal.vue
@@ -0,0 +1,845 @@
+<template>
+  <CustomModal
+    :visible="isVisible"
+    title="设置"
+    size="large"
+    @close="closeModal"
+  >
+    <div class="settings-content" :class="{ 'dark': themeStore.isDarkMode }">
+      <!-- 设置导航 -->
+      <div class="settings-nav">
+        <div
+          v-for="section in settingSections"
+          :key="section.key"
+          class="nav-item"
+          :class="{ 'active': currentSection === section.key }"
+          @click="currentSection = section.key"
+        >
+          <i :class="section.icon"></i>
+          <span>{{ section.label }}</span>
+        </div>
+      </div>
+
+      <!-- 设置内容 -->
+      <div class="settings-main">
+        <!-- 通用设置 -->
+        <div v-if="currentSection === 'general'" class="setting-section">
+          <h3 class="section-title">通用设置</h3>
+
+          <div class="setting-group">
+            <div class="setting-item">
+              <div class="setting-info">
+                <label>主题模式</label>
+                <span class="setting-desc">选择应用的外观主题</span>
+              </div>
+              <div class="setting-control">
+                <select v-model="settings.theme" @change="updateTheme">
+                  <option value="light">亮色模式</option>
+                  <option value="dark">暗色模式</option>
+                  <option value="auto">跟随系统</option>
+                </select>
+              </div>
+            </div>
+
+            <div class="setting-item">
+              <div class="setting-info">
+                <label>语言设置</label>
+                <span class="setting-desc">选择应用显示语言</span>
+              </div>
+              <div class="setting-control">
+                <select v-model="settings.language">
+                  <option value="zh-CN">简体中文</option>
+                  <option value="en-US">English</option>
+                  <option value="ja-JP">日本語</option>
+                </select>
+              </div>
+            </div>
+
+            <div class="setting-item">
+              <div class="setting-info">
+                <label>字体大小</label>
+                <span class="setting-desc">调整聊天界面的字体大小</span>
+              </div>
+              <div class="setting-control">
+                <input
+                  type="range"
+                  v-model="settings.fontSize"
+                  min="12"
+                  max="20"
+                  step="1"
+                  class="slider"
+                />
+                <span class="value-display">{{ settings.fontSize }}px</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 通知设置 -->
+        <div v-if="currentSection === 'notifications'" class="setting-section">
+          <h3 class="section-title">通知设置</h3>
+
+          <div class="setting-group">
+            <div class="setting-item">
+              <div class="setting-info">
+                <label>桌面通知</label>
+                <span class="setting-desc">接收新消息的桌面通知</span>
+              </div>
+              <div class="setting-control">
+                <label class="switch">
+                  <input
+                    type="checkbox"
+                    v-model="settings.desktopNotifications"
+                    @change="updateNotificationPermission"
+                  />
+                  <span class="slider-switch"></span>
+                </label>
+              </div>
+            </div>
+
+            <div class="setting-item">
+              <div class="setting-info">
+                <label>声音提醒</label>
+                <span class="setting-desc">新消息时播放提示音</span>
+              </div>
+              <div class="setting-control">
+                <label class="switch">
+                  <input type="checkbox" v-model="settings.soundNotifications"/>
+                  <span class="slider-switch"></span>
+                </label>
+              </div>
+            </div>
+
+            <div class="setting-item">
+              <div class="setting-info">
+                <label>通话通知</label>
+                <span class="setting-desc">接收语音和视频通话邀请</span>
+              </div>
+              <div class="setting-control">
+                <label class="switch">
+                  <input type="checkbox" v-model="settings.callNotifications"/>
+                  <span class="slider-switch"></span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 隐私设置 -->
+        <div v-if="currentSection === 'privacy'" class="setting-section">
+          <h3 class="section-title">隐私设置</h3>
+
+          <div class="setting-group">
+            <div class="setting-item">
+              <div class="setting-info">
+                <label>在线状态</label>
+                <span class="setting-desc">是否向其他用户显示在线状态</span>
+              </div>
+              <div class="setting-control">
+                <label class="switch">
+                  <input type="checkbox" v-model="settings.showOnlineStatus"/>
+                  <span class="slider-switch"></span>
+                </label>
+              </div>
+            </div>
+
+            <div class="setting-item">
+              <div class="setting-info">
+                <label>已读回执</label>
+                <span class="setting-desc">发送消息已读状态给对方</span>
+              </div>
+              <div class="setting-control">
+                <label class="switch">
+                  <input type="checkbox" v-model="settings.readReceipts"/>
+                  <span class="slider-switch"></span>
+                </label>
+              </div>
+            </div>
+
+            <div class="setting-item">
+              <div class="setting-info">
+                <label>自动下载</label>
+                <span class="setting-desc">自动下载接收到的图片和文件</span>
+              </div>
+              <div class="setting-control">
+                <label class="switch">
+                  <input type="checkbox" v-model="settings.autoDownload"/>
+                  <span class="slider-switch"></span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 关于 -->
+        <div v-if="currentSection === 'about'" class="setting-section">
+          <h3 class="section-title">关于应用</h3>
+
+          <div class="about-content">
+            <div class="app-info">
+              <div class="app-icon">
+                <i class="fas fa-comments"></i>
+              </div>
+              <div class="app-details">
+                <h4>WebSocket 聊天系统</h4>
+                <p>版本 1.0.0</p>
+                <p>基于 Vue 3 + WebSocket 构建的现代化聊天应用</p>
+              </div>
+            </div>
+
+            <div class="feature-list">
+              <h5>主要功能</h5>
+              <ul>
+                <li>实时消息传输</li>
+                <li>语音视频通话</li>
+                <li>文件传输</li>
+                <li>群聊功能</li>
+                <li>暗色模式</li>
+                <li>响应式设计</li>
+              </ul>
+            </div>
+
+            <div class="action-buttons">
+              <button class="btn secondary" @click="checkUpdate">
+                <i class="fas fa-sync-alt"></i>
+                检查更新
+              </button>
+              <button class="btn secondary" @click="clearCache">
+                <i class="fas fa-trash"></i>
+                清除缓存
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部操作 -->
+    <template #footer>
+      <div class="modal-footer">
+        <button class="btn secondary" @click="resetSettings">
+          重置设置
+        </button>
+        <div class="footer-actions">
+          <button class="btn secondary" @click="closeModal">
+            取消
+          </button>
+          <button class="btn primary" @click="saveSettings">
+            保存设置
+          </button>
+        </div>
+      </div>
+    </template>
+  </CustomModal>
+</template>
+
+<script setup>
+import {ref, reactive, watch, onMounted} from 'vue'
+import {useThemeStore} from '../stores/theme.ts'
+import CustomModal from './CustomModal.vue'
+
+const themeStore = useThemeStore()
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['close'])
+
+const isVisible = ref(false)
+const currentSection = ref('general')
+
+const settingSections = [
+  {key: 'general', label: '通用', icon: 'fas fa-cog'},
+  {key: 'notifications', label: '通知', icon: 'fas fa-bell'},
+  {key: 'privacy', label: '隐私', icon: 'fas fa-shield-alt'},
+  {key: 'about', label: '关于', icon: 'fas fa-info-circle'}
+]
+
+const settings = reactive({
+  theme: 'light',
+  language: 'zh-CN',
+  fontSize: 14,
+  desktopNotifications: true,
+  soundNotifications: true,
+  callNotifications: true,
+  showOnlineStatus: true,
+  readReceipts: true,
+  autoDownload: true
+})
+
+const loadSettings = () => {
+  try {
+    const savedSettings = localStorage.getItem('chat-settings')
+    if (savedSettings) {
+      Object.assign(settings, JSON.parse(savedSettings))
+    }
+
+    // 同步主题设置
+    settings.theme = themeStore.isDarkMode ? 'dark' : 'light'
+  } catch (error) {
+    console.error('加载设置失败:', error)
+  }
+}
+
+const saveSettings = () => {
+  try {
+    localStorage.setItem('chat-settings', JSON.stringify(settings))
+
+    // 应用设置
+    applySettings()
+
+    // 显示保存成功提示
+    showNotification('设置已保存', 'success')
+
+    closeModal()
+  } catch (error) {
+    console.error('保存设置失败:', error)
+    showNotification('保存设置失败', 'error')
+  }
+}
+
+const applySettings = () => {
+  // 应用主题
+  // if (settings.theme === 'dark') {
+  //   themeStore.toggleTheme(true)
+  // } else if (settings.theme === 'light') {
+  //   themeStore.setDarkMode(false)
+  // } else {
+  //   // 跟随系统
+  //   const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+  //   themeStore.setDarkMode(prefersDark)
+  // }
+  //
+  // // 应用字体大小
+  // document.documentElement.style.setProperty('--base-font-size', `${settings.fontSize}px`)
+}
+
+const resetSettings = () => {
+  if (confirm('确定要重置所有设置吗？')) {
+    Object.assign(settings, {
+      theme: 'light',
+      language: 'zh-CN',
+      fontSize: 14,
+      desktopNotifications: true,
+      soundNotifications: true,
+      callNotifications: true,
+      showOnlineStatus: true,
+      readReceipts: true,
+      autoDownload: true
+    })
+
+    showNotification('设置已重置', 'info')
+  }
+}
+
+const updateTheme = () => {
+  applySettings()
+}
+
+const updateNotificationPermission = async () => {
+  if (settings.desktopNotifications && 'Notification' in window) {
+    if (Notification.permission === 'default') {
+      const permission = await Notification.requestPermission()
+      if (permission !== 'granted') {
+        settings.desktopNotifications = false
+        showNotification('通知权限被拒绝', 'warning')
+      }
+    }
+  }
+}
+
+const checkUpdate = () => {
+  showNotification('当前已是最新版本', 'info')
+}
+
+const clearCache = () => {
+  if (confirm('确定要清除所有缓存数据吗？')) {
+    try {
+      // 清除localStorage中的聊天数据
+      const keysToRemove = []
+      for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i)
+        if (key && (key.startsWith('chat-') || key.startsWith('message-'))) {
+          keysToRemove.push(key)
+        }
+      }
+
+      keysToRemove.forEach(key => localStorage.removeItem(key))
+
+      showNotification('缓存已清除', 'success')
+    } catch (error) {
+      console.error('清除缓存失败:', error)
+      showNotification('清除缓存失败', 'error')
+    }
+  }
+}
+
+const showNotification = (message, type = 'info') => {
+  // 这里应该调用全局通知组件
+  console.log(`[${type.toUpperCase()}] ${message}`)
+}
+
+const closeModal = () => {
+  isVisible.value = false
+  emit('close')
+}
+
+watch(() => props.visible, (newValue) => {
+  isVisible.value = newValue
+  if (newValue) {
+    loadSettings()
+  }
+})
+
+onMounted(() => {
+  loadSettings()
+  applySettings()
+})
+</script>
+
+<style scoped>
+.settings-content {
+  display: flex;
+  height: 500px;
+  overflow: hidden;
+}
+
+.settings-content.dark {
+  color: #f7fafc;
+}
+
+.settings-nav {
+  width: 200px;
+  background: #f8fafc;
+  border-right: 1px solid #e2e8f0;
+  padding: 16px 0;
+  overflow-y: auto;
+}
+
+.settings-content.dark .settings-nav {
+  background: #374151;
+  border-right-color: #4b5563;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 20px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: #64748b;
+  font-size: 14px;
+}
+
+.nav-item:hover {
+  background: #e2e8f0;
+  color: #374151;
+}
+
+.nav-item.active {
+  background: #4361ee;
+  color: white;
+}
+
+.settings-content.dark .nav-item {
+  color: #9ca3af;
+}
+
+.settings-content.dark .nav-item:hover {
+  background: #4b5563;
+  color: #d1d5db;
+}
+
+.settings-main {
+  flex: 1;
+  padding: 24px;
+  overflow-y: auto;
+}
+
+.section-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #1a202c;
+  margin: 0 0 24px 0;
+  padding-bottom: 12px;
+  border-bottom: 2px solid #e2e8f0;
+}
+
+.settings-content.dark .section-title {
+  color: #f7fafc;
+  border-bottom-color: #374151;
+}
+
+.setting-group {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.setting-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  transition: all 0.2s ease;
+}
+
+.setting-item:hover {
+  border-color: #4361ee;
+  box-shadow: 0 4px 12px rgba(67, 97, 238, 0.1);
+}
+
+.settings-content.dark .setting-item {
+  background: #4b5563;
+  border-color: #6b7280;
+}
+
+.settings-content.dark .setting-item:hover {
+  border-color: #3b82f6;
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
+}
+
+.setting-info {
+  flex: 1;
+}
+
+.setting-info label {
+  display: block;
+  font-size: 16px;
+  font-weight: 500;
+  color: #1a202c;
+  margin-bottom: 4px;
+}
+
+.settings-content.dark .setting-info label {
+  color: #f7fafc;
+}
+
+.setting-desc {
+  font-size: 14px;
+  color: #64748b;
+}
+
+.settings-content.dark .setting-desc {
+  color: #9ca3af;
+}
+
+.setting-control {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.setting-control select {
+  padding: 8px 12px;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  background: white;
+  color: #1a202c;
+  font-size: 14px;
+  min-width: 120px;
+}
+
+.settings-content.dark .setting-control select {
+  background: #374151;
+  border-color: #4b5563;
+  color: #f7fafc;
+}
+
+.slider {
+  width: 120px;
+  height: 6px;
+  border-radius: 3px;
+  background: #e2e8f0;
+  outline: none;
+  -webkit-appearance: none;
+}
+
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #4361ee;
+  cursor: pointer;
+}
+
+.value-display {
+  font-size: 14px;
+  font-weight: 500;
+  color: #4361ee;
+  min-width: 40px;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 24px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider-switch {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #e2e8f0;
+  transition: 0.3s;
+  border-radius: 24px;
+}
+
+.slider-switch:before {
+  position: absolute;
+  content: "";
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  transition: 0.3s;
+  border-radius: 50%;
+}
+
+input:checked + .slider-switch {
+  background-color: #4361ee;
+}
+
+input:checked + .slider-switch:before {
+  transform: translateX(26px);
+}
+
+.about-content {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.app-info {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 20px;
+  background: #f8fafc;
+  border-radius: 12px;
+  border: 1px solid #e2e8f0;
+}
+
+.settings-content.dark .app-info {
+  background: #4b5563;
+  border-color: #6b7280;
+}
+
+.app-icon {
+  width: 60px;
+  height: 60px;
+  background: linear-gradient(135deg, #4361ee, #3f37c9);
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 24px;
+}
+
+.app-details h4 {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1a202c;
+  margin: 0 0 8px 0;
+}
+
+.settings-content.dark .app-details h4 {
+  color: #f7fafc;
+}
+
+.app-details p {
+  font-size: 14px;
+  color: #64748b;
+  margin: 0 0 4px 0;
+}
+
+.settings-content.dark .app-details p {
+  color: #9ca3af;
+}
+
+.feature-list {
+  padding: 20px;
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+}
+
+.settings-content.dark .feature-list {
+  background: #4b5563;
+  border-color: #6b7280;
+}
+
+.feature-list h5 {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1a202c;
+  margin: 0 0 12px 0;
+}
+
+.settings-content.dark .feature-list h5 {
+  color: #f7fafc;
+}
+
+.feature-list ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.feature-list li {
+  padding: 6px 0;
+  color: #64748b;
+  font-size: 14px;
+  position: relative;
+  padding-left: 20px;
+}
+
+.feature-list li:before {
+  content: "✓";
+  position: absolute;
+  left: 0;
+  color: #10b981;
+  font-weight: bold;
+}
+
+.settings-content.dark .feature-list li {
+  color: #9ca3af;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 12px;
+}
+
+.btn {
+  padding: 10px 16px;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.btn.primary {
+  background: linear-gradient(135deg, #4361ee, #3f37c9);
+  color: white;
+}
+
+.btn.primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(67, 97, 238, 0.3);
+}
+
+.btn.secondary {
+  background: #f1f5f9;
+  color: #64748b;
+  border: 1px solid #e2e8f0;
+}
+
+.btn.secondary:hover {
+  background: #e2e8f0;
+  color: #475569;
+}
+
+.settings-content.dark .btn.secondary {
+  background: #4b5563;
+  color: #d1d5db;
+  border-color: #6b7280;
+}
+
+.settings-content.dark .btn.secondary:hover {
+  background: #6b7280;
+  color: #f3f4f6;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+  border-top: 1px solid #e2e8f0;
+  background: #f8fafc;
+}
+
+.settings-content.dark .modal-footer {
+  border-top-color: #374151;
+  background: #374151;
+}
+
+.footer-actions {
+  display: flex;
+  gap: 12px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .settings-content {
+    flex-direction: column;
+    height: auto;
+    max-height: 70vh;
+  }
+
+  .settings-nav {
+    width: 100%;
+    display: flex;
+    overflow-x: auto;
+    padding: 8px 0;
+  }
+
+  .nav-item {
+    flex-shrink: 0;
+    padding: 8px 16px;
+    white-space: nowrap;
+  }
+
+  .settings-main {
+    padding: 16px;
+  }
+
+  .setting-item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  .setting-control {
+    width: 100%;
+    justify-content: flex-end;
+  }
+
+  .modal-footer {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .footer-actions {
+    width: 100%;
+    justify-content: center;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/business/chat/components/SideNavigation.vue b/apps/web-antd/src/views/business/chat/components/SideNavigation.vue
new file mode 100644
index 00000000..57a544ba
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/components/SideNavigation.vue
@@ -0,0 +1,387 @@
+<script setup>
+import { computed, ref } from 'vue';
+
+import { useChatStore } from '../stores/chat.ts';
+import { useThemeStore } from '../stores/theme.ts';
+import { useUserStore } from '../stores/user.ts';
+import SettingsModal from './SettingsModal.vue';
+import UserProfileModal from './UserProfileModal.vue';
+
+const props = defineProps({
+  currentView: {
+    type: String,
+    default: 'chat',
+  },
+});
+const emit = defineEmits(['view-change']);
+const themeStore = useThemeStore();
+const userStore = useUserStore();
+const chatStore = useChatStore();
+
+const showSettingsModal = ref(false);
+const showProfileModal = ref(false);
+
+const navItems = computed(() => [
+  {
+    key: 'chat',
+    label: '聊天',
+    icon: 'fas fa-comment-dots',
+    badge: getUnreadCount(),
+  },
+  {
+    key: 'friends',
+    label: '好友',
+    icon: 'fas fa-user-friends',
+    badge: null,
+  },
+  {
+    key: 'groups',
+    label: '群聊',
+    icon: 'fas fa-users',
+    badge: null,
+  },
+  {
+    key: 'moments',
+    label: '圈子',
+    icon: 'fas fa-globe',
+    badge: null,
+  },
+]);
+
+const getUnreadCount = () => {
+  const totalUnread = chatStore.friends.reduce((total, friend) => {
+    return total + (friend.unreadCount || 0);
+  }, 0);
+
+  return totalUnread > 0
+    ? totalUnread > 99
+      ? '99+'
+      : totalUnread.toString()
+    : null;
+};
+
+const switchView = (key) => {
+  emit('nav-change', key);
+};
+
+const showSettings = () => {
+  showSettingsModal.value = true;
+};
+
+const showProfile = () => {
+  showProfileModal.value = true;
+};
+</script>
+
+<template>
+  <div :class="{ dark: themeStore.isDarkMode }" class="side-navigation">
+    <div class="nav-header">
+      <!--      <div class="logo">-->
+      <!--        <i class="fas fa-comments"></i>-->
+      <!--      </div>-->
+      <!--      <div-->
+      <!--        class="nav-item profile-item"-->
+      <!--        @click="showProfile"-->
+      <!--        title="个人资料"-->
+      <!--      >-->
+      <!--        <div class="nav-icon user-avatar" :style="{ background: userStore.currentUser?.color }">-->
+      <!--          {{ userStore.currentUser.nick_name.charAt(0) }}-->
+      <!--        </div>-->
+      <!--        &lt;!&ndash;        <div class="nav-label">我的</div>&ndash;&gt;-->
+      <!--      </div>-->
+    </div>
+
+    <nav class="nav-menu">
+      <div
+        v-for="item in navItems"
+        :key="item.key"
+        :class="{ active: currentView === item.key }"
+        :title="item.label"
+        class="nav-item"
+        @click="switchView(item.key)"
+      >
+        <div class="nav-icon">
+          <i :class="item.icon"></i>
+        </div>
+        <div class="nav-label">
+          {{ item.label }}
+        </div>
+        <div v-if="item.badge" class="nav-badge">
+          {{ item.badge }}
+        </div>
+      </div>
+    </nav>
+
+    <div class="nav-footer">
+      <div class="nav-item settings-item" title="设置" @click="showSettings">
+        <div class="nav-icon">
+          <i class="fas fa-cog"></i>
+        </div>
+        <div class="nav-label">设置</div>
+      </div>
+    </div>
+
+    <!-- 设置模态框 -->
+    <SettingsModal
+      :visible="showSettingsModal"
+      @close="showSettingsModal = false"
+    />
+
+    <!-- 用户资料模态框 -->
+    <UserProfileModal
+      :user-info="userStore.currentUser"
+      :visible="showProfileModal"
+      @close="showProfileModal = false"
+    />
+  </div>
+</template>
+
+<style scoped>
+.side-navigation {
+  width: 80px;
+  height: 100vh;
+  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+  border-right: 1px solid #e2e8f0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px 0;
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+.side-navigation.dark {
+  background: linear-gradient(180deg, #1a1a1a 0%, #2d2d2d 100%);
+  border-right-color: #374151;
+}
+
+.nav-header {
+  margin-bottom: 24px;
+}
+
+.logo {
+  width: 48px;
+  height: 48px;
+  background: linear-gradient(135deg, #4361ee, #3f37c9);
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 20px;
+  box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
+  animation: gradient-shift 3s ease infinite;
+}
+
+.nav-menu {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  padding: 0 12px;
+}
+
+.nav-item {
+  position: relative;
+  width: 56px;
+  height: 56px;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  background: transparent;
+  color: #64748b;
+  gap: 2px;
+}
+
+.nav-item:hover {
+  background: rgba(67, 97, 238, 0.1);
+  color: #4361ee;
+  transform: translateY(-2px);
+}
+
+.nav-item.active {
+  background: linear-gradient(135deg, #4361ee, #3f37c9);
+  color: white;
+  box-shadow: 0 8px 20px rgba(67, 97, 238, 0.4);
+  transform: translateY(-2px);
+}
+
+.side-navigation.dark .nav-item {
+  color: #9ca3af;
+}
+
+.side-navigation.dark .nav-item:hover {
+  background: rgba(67, 97, 238, 0.2);
+  color: #60a5fa;
+}
+
+.side-navigation.dark .nav-item.active {
+  background: linear-gradient(135deg, #3b82f6, #2563eb);
+  color: white;
+  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
+}
+
+.nav-icon {
+  font-size: 18px;
+  margin-bottom: 2px;
+}
+
+.nav-label {
+  font-size: 10px;
+  font-weight: 500;
+  text-align: center;
+  line-height: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 48px;
+}
+
+.nav-badge {
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  background: linear-gradient(135deg, #ef4444, #dc2626);
+  color: white;
+  border-radius: 10px;
+  padding: 2px 6px;
+  font-size: 10px;
+  font-weight: 600;
+  min-width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
+  animation: pulse 2s infinite;
+}
+
+.nav-footer {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  padding: 0 12px;
+  margin-top: 16px;
+}
+
+.settings-item {
+  background: #f1f5f9;
+  color: #64748b;
+  margin-bottom: 30px;
+}
+
+.settings-item:hover {
+  background: #e2e8f0;
+  color: #475569;
+}
+
+.side-navigation.dark .settings-item {
+  background: #374151;
+  color: #9ca3af;
+}
+
+.side-navigation.dark .settings-item:hover {
+  background: #4b5563;
+  color: #d1d5db;
+}
+
+.profile-item {
+  background: linear-gradient(135deg, #10b981, #059669);
+  color: white;
+}
+
+.profile-item:hover {
+  background: linear-gradient(135deg, #059669, #047857);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
+}
+
+.user-avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 2px;
+}
+
+@keyframes gradient-shift {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .side-navigation {
+    width: 100%;
+    height: 60px;
+    flex-direction: row;
+    justify-content: space-around;
+    padding: 8px 16px;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 1000;
+  }
+
+  .nav-header {
+    display: none;
+  }
+
+  .nav-menu {
+    flex-direction: row;
+    flex: 1;
+    justify-content: space-around;
+    padding: 0;
+    margin: 0;
+  }
+
+  .nav-footer {
+    flex-direction: row;
+    margin: 0;
+    padding: 0;
+  }
+
+  .nav-item {
+    width: 44px;
+    height: 44px;
+    border-radius: 12px;
+  }
+
+  .nav-icon {
+    font-size: 16px;
+  }
+
+  .nav-label {
+    font-size: 9px;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/business/chat/components/UserProfileModal.vue b/apps/web-antd/src/views/business/chat/components/UserProfileModal.vue
new file mode 100644
index 00000000..a2222868
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/components/UserProfileModal.vue
@@ -0,0 +1,506 @@
+<template>
+  <CustomModal
+    :visible="isVisible"
+    title="用户资料"
+    size="medium"
+    @close="closeModal"
+  >
+    <div class="user-profile-content" :class="{ 'dark': themeStore.isDarkMode }">
+      <!-- 用户头像和基本信息 -->
+      <div class="profile-header">
+        <div class="user-avatar" :style="{ background: userInfo.color }">
+          {{ userInfo.nick_name?.charAt(0) }}
+        </div>
+        <div class="user-basic-info">
+          <h2 class="user-name">{{ userInfo.nick_name }}</h2>
+          <p class="user-id">ID: {{ userInfo.id }}</p>
+          <div class="user-status">
+            <span class="status-dot" :class="isOnline ? 'online' : 'offline'"></span>
+            <span class="status-text">{{ isOnline ? '在线' : '离线' }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 用户详细信息 -->
+      <div class="profile-details">
+        <div class="detail-section">
+          <h3 class="section-title">个人信息</h3>
+          <div class="detail-grid">
+            <div class="detail-item">
+              <label>昵称</label>
+              <span>{{ userInfo.nick_name || '未设置' }}</span>
+            </div>
+            <div class="detail-item">
+              <label>用户ID</label>
+              <span>{{ userInfo.id }}</span>
+            </div>
+            <div class="detail-item">
+              <label>注册时间</label>
+              <span>{{ formatDate(userInfo.createdAt) }}</span>
+            </div>
+            <div class="detail-item">
+              <label>最后在线</label>
+              <span>{{ formatDate(userInfo.lastSeen) }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 聊天统计 -->
+        <div class="detail-section">
+          <h3 class="section-title">聊天统计</h3>
+          <div class="stats-grid">
+            <div class="stat-item">
+              <div class="stat-number">{{ chatStats.messageCount || 0 }}</div>
+              <div class="stat-label">消息数量</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-number">{{ chatStats.callCount || 0 }}</div>
+              <div class="stat-label">通话次数</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-number">{{ formatDuration(chatStats.totalCallTime || 0) }}</div>
+              <div class="stat-label">通话时长</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 操作按钮 -->
+      <div class="profile-actions">
+        <button class="action-btn primary-btn" @click="startChat">
+          <i class="fas fa-comment"></i>
+          发送消息
+        </button>
+        <button class="action-btn secondary-btn" @click="startVoiceCall">
+          <i class="fas fa-phone"></i>
+          语音通话
+        </button>
+        <button class="action-btn secondary-btn" @click="startVideoCall">
+          <i class="fas fa-video"></i>
+          视频通话
+        </button>
+      </div>
+    </div>
+  </CustomModal>
+</template>
+
+<script setup>
+import {ref, computed, watch} from 'vue'
+import {useThemeStore} from '../stores/theme.ts'
+import {useChatStore} from '../stores/chat.ts'
+import {useUserStore} from '../stores/user.ts'
+import CustomModal from './CustomModal.vue'
+
+const themeStore = useThemeStore()
+const chatStore = useChatStore()
+const userStore = useUserStore()
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  userInfo: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const emit = defineEmits(['close', 'start-chat', 'start-call'])
+
+const isVisible = computed(() => props.visible)
+const isOnline = ref(true) // 简化处理，实际应该从服务器获取
+
+// 聊天统计数据
+const chatStats = ref({
+  messageCount: 0,
+  callCount: 0,
+  totalCallTime: 0
+})
+
+// 格式化日期
+const formatDate = (dateString) => {
+  if (!dateString) return '未知'
+
+  const date = new Date(dateString)
+  const now = new Date()
+  const diff = now - date
+
+  if (diff < 60000) { // 1分钟内
+    return '刚刚'
+  } else if (diff < 3600000) { // 1小时内
+    return `${Math.floor(diff / 60000)}分钟前`
+  } else if (diff < 86400000) { // 24小时内
+    return `${Math.floor(diff / 3600000)}小时前`
+  } else if (diff < 604800000) { // 7天内
+    return `${Math.floor(diff / 86400000)}天前`
+  } else {
+    return date.toLocaleDateString('zh-CN')
+  }
+}
+
+// 格式化时长
+const formatDuration = (seconds) => {
+  if (seconds < 60) {
+    return `${seconds}秒`
+  } else if (seconds < 3600) {
+    return `${Math.floor(seconds / 60)}分钟`
+  } else {
+    const hours = Math.floor(seconds / 3600)
+    const minutes = Math.floor((seconds % 3600) / 60)
+    return `${hours}小时${minutes}分钟`
+  }
+}
+
+// 加载聊天统计
+const loadChatStats = async () => {
+  try {
+    // 这里应该从数据库或API获取统计数据
+    // 暂时使用模拟数据
+    chatStats.value = {
+      messageCount: Math.floor(Math.random() * 1000),
+      callCount: Math.floor(Math.random() * 50),
+      totalCallTime: Math.floor(Math.random() * 7200)
+    }
+  } catch (error) {
+    console.error('加载聊天统计失败:', error)
+  }
+}
+
+// 开始聊天
+const startChat = () => {
+  emit('start-chat', props.userInfo)
+  closeModal()
+}
+
+// 开始语音通话
+const startVoiceCall = () => {
+  emit('start-call', {
+    user: props.userInfo,
+    type: 'audio'
+  })
+  closeModal()
+}
+
+// 开始视频通话
+const startVideoCall = () => {
+  emit('start-call', {
+    user: props.userInfo,
+    type: 'video'
+  })
+  closeModal()
+}
+
+// 关闭模态框
+const closeModal = () => {
+  emit('close')
+}
+
+// 监听用户信息变化
+watch(() => props.userInfo, (newUserInfo) => {
+  if (newUserInfo && newUserInfo.id) {
+    loadChatStats()
+  }
+}, {immediate: true})
+</script>
+
+<style scoped>
+.user-profile-content {
+  padding: 0;
+}
+
+.user-profile-content.dark {
+  color: #f7fafc;
+}
+
+.profile-header {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  padding: 24px;
+  border-bottom: 1px solid #e2e8f0;
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+}
+
+.user-profile-content.dark .profile-header {
+  border-bottom-color: #374151;
+  background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
+}
+
+.user-avatar {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 32px;
+  font-weight: bold;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+  flex-shrink: 0;
+}
+
+.user-basic-info {
+  flex: 1;
+}
+
+.user-name {
+  font-size: 24px;
+  font-weight: 700;
+  color: #1a202c;
+  margin: 0 0 8px 0;
+}
+
+.user-profile-content.dark .user-name {
+  color: #f7fafc;
+}
+
+.user-id {
+  font-size: 14px;
+  color: #64748b;
+  margin: 0 0 12px 0;
+  font-family: 'Courier New', monospace;
+}
+
+.user-profile-content.dark .user-id {
+  color: #9ca3af;
+}
+
+.user-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.status-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  animation: pulse 2s infinite;
+}
+
+.status-dot.online {
+  background: #10b981;
+}
+
+.status-dot.offline {
+  background: #ef4444;
+}
+
+.status-text {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.status-text {
+  color: #64748b;
+}
+
+.user-profile-content.dark .status-text {
+  color: #9ca3af;
+}
+
+.profile-details {
+  padding: 24px;
+}
+
+.detail-section {
+  margin-bottom: 32px;
+}
+
+.detail-section:last-child {
+  margin-bottom: 0;
+}
+
+.section-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1a202c;
+  margin: 0 0 16px 0;
+  padding-bottom: 8px;
+  border-bottom: 2px solid #e2e8f0;
+}
+
+.user-profile-content.dark .section-title {
+  color: #f7fafc;
+  border-bottom-color: #374151;
+}
+
+.detail-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+}
+
+.detail-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.detail-item label {
+  font-size: 12px;
+  font-weight: 500;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.user-profile-content.dark .detail-item label {
+  color: #9ca3af;
+}
+
+.detail-item span {
+  font-size: 14px;
+  color: #1a202c;
+  font-weight: 500;
+}
+
+.user-profile-content.dark .detail-item span {
+  color: #f7fafc;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+
+.stat-item {
+  text-align: center;
+  padding: 16px;
+  background: #f8fafc;
+  border-radius: 12px;
+  border: 1px solid #e2e8f0;
+}
+
+.user-profile-content.dark .stat-item {
+  background: #374151;
+  border-color: #4b5563;
+}
+
+.stat-number {
+  font-size: 24px;
+  font-weight: 700;
+  color: #4361ee;
+  margin-bottom: 4px;
+}
+
+.stat-label {
+  font-size: 12px;
+  color: #64748b;
+  font-weight: 500;
+}
+
+.user-profile-content.dark .stat-label {
+  color: #9ca3af;
+}
+
+.profile-actions {
+  padding: 24px;
+  border-top: 1px solid #e2e8f0;
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.user-profile-content.dark .profile-actions {
+  border-top-color: #374151;
+}
+
+.action-btn {
+  flex: 1;
+  min-width: 120px;
+  padding: 12px 16px;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.primary-btn {
+  background: linear-gradient(135deg, #4361ee, #3f37c9);
+  color: white;
+}
+
+.primary-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(67, 97, 238, 0.3);
+}
+
+.secondary-btn {
+  background: #f1f5f9;
+  color: #64748b;
+  border: 1px solid #e2e8f0;
+}
+
+.secondary-btn:hover {
+  background: #e2e8f0;
+  color: #475569;
+  transform: translateY(-1px);
+}
+
+.user-profile-content.dark .secondary-btn {
+  background: #4b5563;
+  color: #d1d5db;
+  border-color: #6b7280;
+}
+
+.user-profile-content.dark .secondary-btn:hover {
+  background: #6b7280;
+  color: #f3f4f6;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 0.7;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .profile-header {
+    flex-direction: column;
+    text-align: center;
+    gap: 16px;
+  }
+
+  .user-avatar {
+    width: 60px;
+    height: 60px;
+    font-size: 24px;
+  }
+
+  .detail-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .stats-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .profile-actions {
+    flex-direction: column;
+  }
+
+  .action-btn {
+    min-width: unset;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/business/chat/components/VideoCallComponent.vue b/apps/web-antd/src/views/business/chat/components/VideoCallComponent.vue
new file mode 100644
index 00000000..b35b24ea
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/components/VideoCallComponent.vue
@@ -0,0 +1,1620 @@
+<template>
+  <div
+    v-if="isVisible"
+    ref="container"
+    class="video-call-container"
+    :class="{
+        'minimized': isMinimized,
+        'dark': themeStore.isDarkMode,
+        'dragging': isDragging
+      }"
+    :style="containerStyle"
+  >
+    <!-- 拖拽头部 -->
+    <div
+      class="call-header"
+      @mousedown="startDrag"
+    >
+      <div class="call-info">
+        <div class="caller-avatar" :style="{ background: callerInfo.color }">
+          {{ callerInfo.nick_name.charAt(0) }}
+        </div>
+        <div class="caller-details">
+          <div class="caller-name">{{ callerInfo.nick_name }}</div>
+          <div class="call-status">{{ connectionText }}</div>
+        </div>
+      </div>
+
+      <div class="call-actions">
+        <button class="action-btn minimize-btn" @click="toggleMinimize" @mousedown.stop>
+          <i class="fas fa-minus"></i>
+        </button>
+        <button class="action-btn close-btn" @click="endCall" @mousedown.stop>
+          <i class="fas fa-times"></i>
+        </button>
+      </div>
+    </div>
+
+    <!-- 最小化状态 -->
+    <div
+      v-if="isMinimized"
+      class="minimized-content"
+      @mousedown="startDrag"
+      @dblclick="toggleMinimize"
+    >
+      <!-- 音频通话：显示头像和计时器 -->
+      <template v-if="callType === 'audio'">
+        <div class="audio-call-mini">
+          <div class="mini-avatar" :style="{ background: callerInfo.color }">
+            {{ callerInfo.nick_name.charAt(0) }}
+          </div>
+          <div class="mini-info">
+            <div class="mini-name">{{ callerInfo.nick_name }}</div>
+            <div class="mini-timer">{{ formattedDuration }}</div>
+          </div>
+          <button class="mini-expand-btn" @click="toggleMinimize" @mousedown.stop>
+            <i class="fas fa-expand"></i>
+          </button>
+        </div>
+      </template>
+
+      <!-- 视频通话最小化时显示远程视频流 -->
+      <template v-else>
+        <div class="video-call-mini">
+          <div class="remote-video-preview">
+            <!-- 修复问题1: 确保视频元素始终存在 -->
+            <video
+              ref="remoteVideoPreview"
+              class="remote-video"
+              autoplay
+              playsinline
+              muted
+              @loadedmetadata="handleVideoLoaded($event, 'preview')"
+              @error="handleVideoError($event, 'preview')"
+              @canplay="handleVideoCanPlay($event, 'preview')"
+              @loadstart="handleVideoLoadStart($event, 'preview')"
+              @waiting="handleVideoWaiting($event, 'preview')"
+              @playing="handleVideoPlaying($event, 'preview')"
+            ></video>
+            <div v-if="!remoteStream" class="video-placeholder">
+              <div class="placeholder-avatar" :style="{ background: callerInfo.color }">
+                {{ callerInfo.nick_name.charAt(0) }}
+              </div>
+            </div>
+          </div>
+          <div class="mini-info">
+            <div class="mini-name">{{ callerInfo.nick_name }}</div>
+            <div class="mini-timer">{{ formattedDuration }}</div>
+          </div>
+          <button class="mini-expand-btn" @click="toggleMinimize" @mousedown.stop>
+            <i class="fas fa-expand"></i>
+          </button>
+        </div>
+      </template>
+    </div>
+
+    <!-- 视频区域 -->
+    <div v-if="!isMinimized" class="video-area">
+      <!-- 远程视频 -->
+      <div class="remote-video-container">
+        <!-- 修复问题1: 确保视频元素始终存在，移除v-if条件 -->
+        <video
+          ref="remoteVideo"
+          class="remote-video"
+          autoplay
+          playsinline
+          @loadedmetadata="handleVideoLoaded($event, 'main')"
+          @error="handleVideoError($event, 'main')"
+          @canplay="handleVideoCanPlay($event, 'main')"
+          @loadstart="handleVideoLoadStart($event, 'main')"
+          @waiting="handleVideoWaiting($event, 'main')"
+          @playing="handleVideoPlaying($event, 'main')"
+        ></video>
+        <div v-if="!remoteStream" class="video-placeholder">
+          <div class="placeholder-avatar" :style="{ background: callerInfo.color }">
+            {{ callerInfo.nick_name.charAt(0) }}
+          </div>
+          <div class="placeholder-text">{{ callerInfo.nick_name }}</div>
+          <div class="connection-status">{{ connectionText }}</div>
+        </div>
+      </div>
+
+      <!-- 本地视频 -->
+      <div
+        class="local-video-container"
+        v-if="callType === 'video' && localStream"
+      >
+        <video
+          ref="localVideo"
+          class="local-video"
+          autoplay
+          playsinline
+          muted
+          :srcObject="localStream"
+          @error="handleVideoError($event, 'local')"
+        ></video>
+      </div>
+      <div
+        v-else-if="callType === 'video'"
+        class="local-placeholder-container"
+      >
+        <div class="local-avatar" :style="{ background: userStore.currentUser?.color || '#666' }">
+          {{ userStore.currentUser?.nick_name?.charAt(0) || 'U' }}
+        </div>
+      </div>
+
+      <!-- 通话计时器显示 -->
+      <div v-if="callStatus === 'ongoing'" class="call-timer-display">
+        <i class="fas fa-clock"></i>
+        <span>{{ formattedDuration }}</span>
+      </div>
+
+      <!-- 连接状态指示器 -->
+      <div v-if="webrtc.isConnecting?.value" class="connection-indicator">
+        <div class="spinner"></div>
+        <span>正在连接...</span>
+      </div>
+
+      <!-- 视频重试指示器 -->
+      <div v-if="videoRetryCount > 0" class="video-retry-indicator">
+        <div class="retry-spinner"></div>
+        <span>视频加载中... ({{ videoRetryCount }}/{{ maxVideoRetries }})</span>
+      </div>
+
+      <!-- 修复问题1: 视频调试信息 -->
+      <div v-if="showDebugInfo" class="video-debug-info">
+        <div>远程流: {{ remoteStream ? '✅' : '❌' }}</div>
+        <div>主视频元素: {{ remoteVideo ? '✅' : '❌' }}</div>
+        <div>预览视频元素: {{ remoteVideoPreview ? '✅' : '❌' }}</div>
+        <div>回调数量: {{ videoCallbackCount }}</div>
+        <div v-if="remoteStream">
+          <div>流ID: {{ remoteStream.id }}</div>
+          <div>轨道数: {{ remoteStream.getTracks().length }}</div>
+          <div v-for="track in remoteStream.getTracks()" :key="track.id">
+            {{ track.kind }}: {{ track.readyState }} - {{ track.enabled ? '启用' : '禁用' }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 控制栏 -->
+    <div v-if="!isMinimized" class="call-controls">
+      <!-- 来电时显示忙线状态 -->
+      <div v-if="isIncoming && callStatus === 'busy'" class="busy-status-inline">
+        <i class="fas fa-phone-slash"></i>
+        <span>对方忙线中</span>
+      </div>
+
+      <!-- 正常控制按钮 -->
+      <template v-else>
+        <!-- 来电时显示接听和拒绝按钮 -->
+        <template v-if="isIncoming && callStatus === 'ringing'">
+          <button
+            class="control-btn accept-btn-inline"
+            @click="acceptCall"
+            :disabled="isAccepting"
+            :title="isAccepting ? '接听中...' : '接听'"
+          >
+            <i class="fas fa-phone"></i>
+          </button>
+          <button
+            class="control-btn reject-btn-inline"
+            @click="rejectCall"
+            :disabled="isAccepting"
+            title="拒绝"
+          >
+            <i class="fas fa-phone-slash"></i>
+          </button>
+        </template>
+
+        <!-- 通话中的控制按钮 -->
+        <template v-else>
+          <button
+            class="control-btn"
+            :class="{ 'active': isMicOn, 'disabled': !isMicOn }"
+            @click="toggleMic"
+            :title="isMicOn ? '关闭麦克风' : '开启麦克风'"
+          >
+            <i class="fas" :class="isMicOn ? 'fa-microphone' : 'fa-microphone-slash'"></i>
+          </button>
+
+          <button
+            v-if="callType === 'video'"
+            class="control-btn"
+            :class="{ 'active': isCameraOn, 'disabled': !isCameraOn }"
+            @click="toggleCamera"
+            :title="isCameraOn ? '关闭摄像头' : '开启摄像头'"
+          >
+            <i class="fas" :class="isCameraOn ? 'fa-video' : 'fa-video-slash'"></i>
+          </button>
+
+          <button
+            class="control-btn speaker-btn"
+            :class="{ 'active': isSpeakerOn }"
+            @click="toggleSpeaker"
+            :title="isSpeakerOn ? '关闭扬声器' : '开启扬声器'"
+          >
+            <i class="fas" :class="isSpeakerOn ? 'fa-volume-up' : 'fa-volume-mute'"></i>
+          </button>
+
+          <button
+            class="control-btn end-call-btn"
+            @click="endCall"
+            title="结束通话"
+          >
+            <i class="fas fa-phone-slash"></i>
+          </button>
+
+          <!-- 修复问题1: 调试按钮 -->
+          <button
+            class="control-btn debug-btn"
+            @click="toggleDebugInfo"
+            title="调试信息"
+          >
+            <i class="fas fa-bug"></i>
+          </button>
+        </template>
+      </template>
+    </div>
+
+    <!-- 通话结束提示 -->
+    <div v-if="showEndingNotification" class="ending-notification">
+      <div class="notification-content">
+        <i class="fas fa-phone-slash"></i>
+        <span>通话已结束</span>
+        <div class="countdown">{{ endingCountdown }}秒后关闭</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref, reactive, computed, onMounted, onUnmounted, watch, nextTick} from 'vue';
+import {useThemeStore} from '../stores/theme.ts';
+import {useWebRTC} from '../composables/useWebRTC.ts';
+import {useChatStore} from '../stores/chat.ts';
+import {useUserStore} from '../stores/user.ts';
+
+const themeStore = useThemeStore();
+const chatStore = useChatStore();
+const webrtc = useWebRTC();
+const userStore = useUserStore();
+
+const props = defineProps({
+  callerInfo: {
+    type: Object,
+    required: true
+  },
+  callType: {
+    type: String,
+    default: 'video',
+    validator: (value) => ['video', 'audio'].includes(value)
+  },
+  isIncoming: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['end-call', 'accept-call', 'reject-call']);
+
+// 时间戳日志函数
+const logWithTime = (level, message, ...args) => {
+  const timestamp = new Date().toLocaleTimeString('zh-CN', {
+    hour12: false,
+    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);
+  }
+};
+
+// 状态管理
+const isVisible = ref(true);
+const isMinimized = ref(false);
+const isMicOn = ref(true);
+const isCameraOn = ref(props.callType === 'video');
+const isSpeakerOn = ref(true);
+const callDuration = ref(0);
+const callTimer = ref(null);
+const isDragging = ref(false);
+const isAccepting = ref(false);
+
+// 结束通话提示相关状态
+const showEndingNotification = ref(false);
+const endingCountdown = ref(3);
+const endingTimer = ref(null);
+
+// 视频重试相关状态
+const videoRetryCount = ref(0);
+const maxVideoRetries = 3;
+const videoRetryTimers = ref(new Map());
+
+// 修复问题1: 调试相关状态
+const showDebugInfo = ref(false);
+const videoCallbackCount = ref(0);
+
+// 元素引用
+const localVideo = ref(null);
+const remoteVideo = ref(null);
+const remoteVideoPreview = ref(null);
+
+// 修复问题1: 视频回调取消注册函数
+const unregisterVideoCallback = ref(null);
+
+// 创建本地和远程流的引用
+const localStream = computed(() => webrtc.localStream?.value);
+const remoteStream = computed(() => webrtc.remoteStream?.value);
+
+// 获取当前通话状态
+const callStatus = computed(() => {
+  return chatStore.callStatus;
+});
+
+// 连接状态文本
+const connectionText = computed(() => {
+  if (chatStore.callConnectionStatus) {
+    return chatStore.callConnectionStatus;
+  }
+
+  if (callStatus.value === "busy") {
+    return '对方忙线中';
+  }
+
+  if (callStatus.value === "hangup") {
+    return '对方已挂断';
+  }
+
+  if (callStatus.value === "disconnected") {
+    return '网络连接已断开';
+  }
+
+  if (callStatus.value === "failed") {
+    return '连接失败，请检查网络';
+  }
+
+  if (props.isIncoming && callStatus.value !== "ongoing") {
+    return '来电中...';
+  }
+
+  if (callStatus.value === "ongoing") {
+    return `通话中`;
+  }
+
+  if (callStatus.value === "connecting") {
+    return '正在连接...';
+  }
+
+  return '正在连接...';
+});
+
+// 修复问题1: 安全的视频元素更新函数
+const safeUpdateVideoElement = (videoElement, stream, type) => {
+  if (!videoElement) {
+    logWithTime('warn', `⚠️ ${type}视频元素不存在，跳过更新`);
+    return false;
+  }
+
+  try {
+    logWithTime('log', `🔄 安全更新${type}视频元素`, {
+      hasStream: !!stream,
+      elementExists: !!videoElement,
+      currentSrc: !!videoElement.srcObject,
+      streamId: stream?.id
+    });
+
+    if (stream) {
+      // 检查流的有效性
+      if (!stream.active) {
+        logWithTime('warn', `⚠️ ${type}流不是活跃状态`);
+      }
+
+      const tracks = stream.getTracks();
+      if (tracks.length === 0) {
+        logWithTime('warn', `⚠️ ${type}流没有轨道`);
+        return false;
+      }
+
+      // 检查视频轨道
+      const videoTracks = tracks.filter(t => t.kind === 'video');
+      if (videoTracks.length === 0 && type !== 'local') {
+        logWithTime('warn', `⚠️ ${type}流没有视频轨道`);
+      }
+
+      // 设置srcObject
+      if (videoElement.srcObject !== stream) {
+        videoElement.srcObject = stream;
+        logWithTime('log', `✅ ${type}视频srcObject已设置`);
+
+        // 强制加载
+        videoElement.load();
+
+        // 尝试播放
+        videoElement.play().catch(error => {
+          logWithTime('error', `❌ ${type}视频播放失败:`, error);
+          // 启动重试
+          retryVideoPlay(videoElement, type, 1);
+        });
+      }
+    } else {
+      // 清理视频元素
+      if (videoElement.srcObject) {
+        videoElement.srcObject = null;
+        logWithTime('log', `🔄 ${type}视频srcObject已清理`);
+      }
+    }
+
+    return true;
+  } catch (error) {
+    logWithTime('error', `❌ 安全更新${type}视频元素失败:`, error);
+    return false;
+  }
+};
+
+// 修复问题1: 视频元素更新回调函数
+const handleVideoElementUpdate = (stream) => {
+  logWithTime('log', '📹 收到视频元素更新回调', {
+    hasStream: !!stream,
+    streamId: stream?.id,
+    hasMainVideo: !!remoteVideo.value,
+    hasPreviewVideo: !!remoteVideoPreview.value
+  });
+
+  // 更新主视频元素
+  if (remoteVideo.value) {
+    safeUpdateVideoElement(remoteVideo.value, stream, 'main');
+  } else {
+    logWithTime('warn', '⚠️ 主视频元素不存在');
+  }
+
+  // 更新预览视频元素
+  if (remoteVideoPreview.value) {
+    safeUpdateVideoElement(remoteVideoPreview.value, stream, 'preview');
+  } else {
+    logWithTime('warn', '⚠️ 预览视频元素不存在');
+  }
+};
+
+// 修复问题3: 视频重试机制
+const retryVideoPlay = async (videoElement, type, attempt = 1) => {
+  if (attempt > maxVideoRetries) {
+    logWithTime('error', `❌ ${type}视频重试失败，已达到最大重试次数`);
+    videoRetryCount.value = 0;
+    return false;
+  }
+
+  videoRetryCount.value = attempt;
+  logWithTime('log', `🔄 ${type}视频播放重试 ${attempt}/${maxVideoRetries}`);
+
+  try {
+    // 等待递增的延迟时间
+    await new Promise(resolve => setTimeout(resolve, 1000 * attempt));
+
+    if (!videoElement || !videoElement.srcObject) {
+      logWithTime('warn', `⚠️ ${type}视频元素或流已不存在，停止重试`);
+      return false;
+    }
+
+    // 检查视频状态
+    if (videoElement.readyState >= 2) {
+      await videoElement.play();
+      logWithTime('log', `✅ ${type}视频重试播放成功`);
+      videoRetryCount.value = 0;
+      return true;
+    } else {
+      // 强制重新加载
+      const currentStream = videoElement.srcObject;
+      videoElement.srcObject = null;
+      setTimeout(() => {
+        videoElement.srcObject = currentStream;
+        videoElement.load();
+      }, 100);
+
+      // 递归重试
+      setTimeout(() => {
+        retryVideoPlay(videoElement, type, attempt + 1);
+      }, 1000);
+    }
+  } catch (error) {
+    logWithTime('error', `❌ ${type}视频重试播放失败:`, error);
+
+    // 继续重试
+    setTimeout(() => {
+      retryVideoPlay(videoElement, type, attempt + 1);
+    }, 1000 * attempt);
+  }
+};
+
+// 改进视频加载处理
+const handleVideoLoaded = async (event, type) => {
+  const video = event.target;
+  logWithTime('log', `📹 ${type} 视频元数据已加载`, {
+    readyState: video.readyState,
+    videoWidth: video.videoWidth,
+    videoHeight: video.videoHeight,
+    duration: video.duration,
+    paused: video.paused,
+    currentTime: video.currentTime
+  });
+
+  try {
+    if (video && video.readyState >= 2) {
+      await video.play();
+      logWithTime('log', `✅ ${type} 视频开始播放`);
+      videoRetryCount.value = 0; // 重置重试计数
+
+      // 检查视频尺寸和轨道状态
+      if (type === 'main' || type === 'preview') {
+        setTimeout(() => {
+          if (video.videoWidth === 0 && video.videoHeight === 0) {
+            logWithTime('warn', `⚠️ ${type} 视频尺寸为0，可能存在问题，尝试重新设置`);
+            const currentStream = video.srcObject;
+            if (currentStream) {
+              safeUpdateVideoElement(video, currentStream, type);
+            }
+          } else {
+            logWithTime('log', `✅ ${type} 视频尺寸正常: ${video.videoWidth}x${video.videoHeight}`);
+          }
+        }, 2000);
+      }
+    }
+  } catch (error) {
+    logWithTime('error', `❌ ${type} 视频播放失败:`, error);
+
+    // 启动重试机制
+    retryVideoPlay(video, type, 1);
+  }
+};
+
+const handleVideoLoadStart = (event, type) => {
+  const video = event.target;
+  logWithTime('log', `📹 ${type} 视频开始加载`);
+};
+
+const handleVideoWaiting = (event, type) => {
+  const video = event.target;
+  logWithTime('log', `📹 ${type} 视频等待数据`);
+};
+
+const handleVideoPlaying = (event, type) => {
+  const video = event.target;
+  logWithTime('log', `📹 ${type} 视频正在播放`);
+  videoRetryCount.value = 0; // 重置重试计数
+};
+
+const handleVideoCanPlay = (event, type) => {
+  const video = event.target;
+  logWithTime('log', `📹 ${type} 视频可以播放`, {
+    readyState: video.readyState,
+    buffered: video.buffered.length
+  });
+};
+
+const handleVideoError = (event, type) => {
+  const video = event.target;
+  logWithTime('error', `❌ ${type} 视频错误:`, {
+    error: video.error,
+    networkState: video.networkState,
+    readyState: video.readyState
+  });
+
+  // 视频错误时启动重试
+  if (video.srcObject) {
+    retryVideoPlay(video, type, 1);
+  }
+};
+
+// 通话计时器
+const startCallTimer = () => {
+  logWithTime('log', "⏰ 开始通话计时");
+  if (callTimer.value) clearInterval(callTimer.value);
+  callDuration.value = 0;
+  callTimer.value = setInterval(() => {
+    callDuration.value += 1;
+  }, 1000);
+};
+
+const stopCallTimer = () => {
+  logWithTime('log', "⏰ 停止通话计时");
+  if (callTimer.value) {
+    clearInterval(callTimer.value);
+    callTimer.value = null;
+  }
+};
+
+const formattedDuration = computed(() => {
+  const minutes = Math.floor(callDuration.value / 60);
+  const seconds = callDuration.value % 60;
+  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+});
+
+const containerStyle = computed(() => {
+  const width = isMinimized.value ? (props.callType === 'audio' ? '250px' : '200px') : '500px';
+  const height = isMinimized.value ? '60px' : '380px';
+
+  return {
+    left: `${position.x}px`,
+    top: `${position.y}px`,
+    width: width,
+    height: height
+  };
+});
+
+// 初始化媒体设备
+const initializeMedia = async () => {
+  try {
+    logWithTime('log', "🎥 初始化媒体设备");
+    const constraints = {
+      audio: true,
+      video: props.callType === 'video'
+    };
+
+    await webrtc.getLocalMedia(constraints);
+    logWithTime('log', "✅ 媒体设备初始化成功");
+    return true;
+  } catch (error) {
+    logWithTime('error', '❌ 无法访问媒体设备:', error);
+    return false;
+  }
+};
+
+// 控制功能
+const toggleMic = () => {
+  isMicOn.value = !isMicOn.value;
+  webrtc.toggleMicrophone(isMicOn.value);
+  logWithTime('log', `🎤 麦克风${isMicOn.value ? '开启' : '关闭'}`);
+};
+
+const toggleCamera = () => {
+  if (props.callType === 'video') {
+    isCameraOn.value = !isCameraOn.value;
+    webrtc.toggleCamera(isCameraOn.value);
+    logWithTime('log', `📹 摄像头${isCameraOn.value ? '开启' : '关闭'}`);
+  }
+};
+
+const toggleSpeaker = () => {
+  isSpeakerOn.value = !isSpeakerOn.value;
+  logWithTime('log', `🔊 扬声器${isSpeakerOn.value ? '开启' : '关闭'}`);
+};
+
+const toggleMinimize = () => {
+  isMinimized.value = !isMinimized.value;
+  logWithTime('log', `${isMinimized.value ? '最小化' : '展开'}通话窗口`);
+
+  const width = isMinimized.value ? (props.callType === 'audio' ? 250 : 200) : 500;
+  const height = isMinimized.value ? 60 : 380;
+
+  position.x = Math.max(0, Math.min(position.x, window.innerWidth - width));
+  position.y = Math.max(0, Math.min(position.y, window.innerHeight - height));
+};
+
+// 修复问题1: 调试信息切换
+const toggleDebugInfo = () => {
+  showDebugInfo.value = !showDebugInfo.value;
+  logWithTime('log', `🐛 调试信息${showDebugInfo.value ? '开启' : '关闭'}`);
+};
+
+// 结束通话逻辑
+const endCall = () => {
+  logWithTime('log', "📞 开始结束通话流程");
+
+  // 清理视频重试定时器
+  videoRetryTimers.value.forEach(timer => clearTimeout(timer));
+  videoRetryTimers.value.clear();
+  videoRetryCount.value = 0;
+
+  // 取消注册视频回调
+  if (unregisterVideoCallback.value) {
+    unregisterVideoCallback.value();
+    unregisterVideoCallback.value = null;
+  }
+
+  // 立即释放媒体资源
+  webrtc.releaseMediaResources();
+
+  // 显示结束提示
+  showEndingNotification.value = true;
+  endingCountdown.value = 3;
+
+  // 开始倒计时
+  endingTimer.value = setInterval(() => {
+    endingCountdown.value--;
+    if (endingCountdown.value <= 0) {
+      clearInterval(endingTimer.value);
+      endingTimer.value = null;
+      performEndCall();
+    }
+  }, 1000);
+
+  // 关闭WebRTC连接
+  webrtc.closeConnection();
+  stopCallTimer();
+  chatStore.endCall();
+};
+
+const performEndCall = () => {
+  logWithTime('log', "📞 执行结束通话操作");
+  showEndingNotification.value = false;
+  isVisible.value = false;
+  emit('end-call');
+};
+
+// 接听通话
+const acceptCall = async () => {
+  if (isAccepting.value) return;
+
+  logWithTime('log', "📞 开始接听通话");
+  isAccepting.value = true;
+
+  try {
+    const mediaSuccess = await initializeMedia();
+    if (mediaSuccess) {
+      await chatStore.acceptCall();
+      emit('accept-call');
+      logWithTime('log', "✅ 通话接听成功");
+    } else {
+      logWithTime('error', "❌ 媒体设备初始化失败，无法接听");
+    }
+  } catch (error) {
+    logWithTime('error', "❌ 接听失败:", error);
+  } finally {
+    setTimeout(() => {
+      isAccepting.value = false;
+    }, 3000);
+  }
+};
+
+// 拒绝通话
+const rejectCall = () => {
+  logWithTime('log', "📞 拒绝通话");
+
+  // 清理视频重试定时器
+  videoRetryTimers.value.forEach(timer => clearTimeout(timer));
+  videoRetryTimers.value.clear();
+  videoRetryCount.value = 0;
+
+  // 取消注册视频回调
+  if (unregisterVideoCallback.value) {
+    unregisterVideoCallback.value();
+    unregisterVideoCallback.value = null;
+  }
+
+  webrtc.forceCleanup();
+  isVisible.value = false;
+  chatStore.rejectCall();
+  emit('reject-call');
+};
+
+// 拖拽相关
+const position = reactive({x: 0, y: 0});
+const startPosition = reactive({x: 0, y: 0});
+const container = ref(null);
+
+const startDrag = (event) => {
+  if (event.target.closest('.action-btn') ||
+    event.target.closest('.control-btn') ||
+    event.target.closest('.mini-expand-btn')) {
+    return;
+  }
+
+  isDragging.value = true;
+  startPosition.x = event.clientX;
+  startPosition.y = event.clientY;
+
+  document.addEventListener('mousemove', handleDrag);
+  document.addEventListener('mouseup', stopDrag);
+};
+
+const handleDrag = (event) => {
+  if (!isDragging.value) return;
+
+  const deltaX = event.clientX - startPosition.x;
+  const deltaY = event.clientY - startPosition.y;
+
+  position.x += deltaX;
+  position.y += deltaY;
+
+  startPosition.x = event.clientX;
+  startPosition.y = event.clientY;
+
+  const width = isMinimized.value ? (props.callType === 'audio' ? 250 : 200) : 500;
+  const height = isMinimized.value ? 60 : 380;
+
+  position.x = Math.max(0, Math.min(position.x, window.innerWidth - width));
+  position.y = Math.max(0, Math.min(position.y, window.innerHeight - height));
+};
+
+const stopDrag = () => {
+  isDragging.value = false;
+  document.removeEventListener('mousemove', handleDrag);
+  document.removeEventListener('mouseup', stopDrag);
+};
+
+const handleWindowResize = () => {
+  const width = isMinimized.value ? (props.callType === 'audio' ? 250 : 200) : 500;
+  const height = isMinimized.value ? 60 : 380;
+
+  position.x = Math.max(0, Math.min(position.x, window.innerWidth - width));
+  position.y = Math.max(0, Math.min(position.y, window.innerHeight - height));
+};
+
+// 修复问题4: 监听ICE连接失败事件
+const handleIceConnectionFailed = (event) => {
+  const {callId, peerId} = event.detail;
+  logWithTime('log', '🧊 收到ICE连接失败事件，尝试重新协商');
+
+  // 通知chat store重新发送offer
+  if (chatStore.currentCall?.value?.callId === callId) {
+    setTimeout(() => {
+      chatStore.handleCallAccepted({
+        call_id: callId,
+        sender_user_id: peerId
+      });
+    }, 1000);
+  }
+};
+
+// 监听本地流变化
+watch(localStream, (newStream) => {
+  logWithTime('log', "📹 本地流状态变化", {
+    hasStream: !!newStream,
+    tracks: newStream?.getTracks().map(t => `${t.kind}:${t.id}`)
+  });
+
+  if (newStream && localVideo.value) {
+    nextTick(() => {
+      if (localVideo.value.srcObject !== newStream) {
+        logWithTime('log', "📹 更新本地视频");
+        localVideo.value.srcObject = newStream;
+      }
+    });
+  }
+});
+
+// 监听通话状态变化
+watch(() => chatStore.callStatus, async (status, oldStatus) => {
+  logWithTime('log', "📞 通话状态变化:", {from: oldStatus, to: status});
+
+  try {
+    switch (status) {
+      case "calling":
+      case "connecting":
+        logWithTime('log', "🔄 准备通话，初始化媒体");
+        await initializeMedia();
+        break;
+
+      case "ongoing":
+        logWithTime('log', "✅ 通话进行中");
+        if (!callTimer.value) {
+          startCallTimer();
+        }
+        break;
+
+      case "ended":
+      case "idle":
+        logWithTime('log', "📞 通话结束，释放资源");
+        webrtc.releaseMediaResources();
+        stopCallTimer();
+        setTimeout(() => {
+          if (chatStore.callStatus === status) {
+            endCall();
+          }
+        }, 1000);
+        break;
+
+      case "failed":
+        logWithTime('log', "❌ 通话失败，释放资源");
+        webrtc.releaseMediaResources();
+        setTimeout(() => {
+          if (chatStore.callStatus === status) {
+            endCall();
+          }
+        }, 3000);
+        break;
+
+      case "hangup":
+        logWithTime('log', "📞 对方挂断，释放资源");
+        webrtc.releaseMediaResources();
+        setTimeout(() => {
+          if (chatStore.callStatus === status) {
+            endCall();
+          }
+        }, 3000);
+        break;
+
+      case "disconnected":
+        logWithTime('log', "🔌 连接断开，释放资源");
+        webrtc.releaseMediaResources();
+        setTimeout(() => {
+          if (chatStore.callStatus === status) {
+            endCall();
+          }
+        }, 3000);
+        break;
+    }
+  } catch (error) {
+    logWithTime('error', '❌ 处理通话状态变化失败:', error);
+    webrtc.forceCleanup();
+  }
+});
+
+onMounted(async () => {
+  logWithTime('log', "🚀 VideoCallComponent 组件挂载");
+
+  position.x = Math.max(0, (window.innerWidth - 500) / 2);
+  position.y = Math.max(0, (window.innerHeight - 380) / 2);
+
+  window.addEventListener('resize', handleWindowResize);
+
+  // 修复问题4: 监听ICE连接失败事件
+  window.addEventListener('iceConnectionFailed', handleIceConnectionFailed);
+
+  // 修复问题1: 注册视频元素更新回调
+  unregisterVideoCallback.value = webrtc.registerVideoCallback(handleVideoElementUpdate);
+
+  // 更新回调计数
+  videoCallbackCount.value = webrtc.videoElementCallbacks?.value?.size || 0;
+
+  const handleBeforeUnload = () => {
+    logWithTime('log', "🔄 页面即将卸载，释放WebRTC资源");
+
+    // 清理视频重试定时器
+    videoRetryTimers.value.forEach(timer => clearTimeout(timer));
+    videoRetryTimers.value.clear();
+
+    // 取消注册视频回调
+    if (unregisterVideoCallback.value) {
+      unregisterVideoCallback.value();
+      unregisterVideoCallback.value = null;
+    }
+
+    webrtc.forceCleanup();
+  };
+
+  window.addEventListener('beforeunload', handleBeforeUnload);
+
+  onUnmounted(() => {
+    window.removeEventListener('beforeunload', handleBeforeUnload);
+    window.removeEventListener('iceConnectionFailed', handleIceConnectionFailed);
+  });
+
+  if (['calling', 'connecting', 'ongoing'].includes(chatStore.callStatus)) {
+    logWithTime('log', "🎥 当前状态需要媒体，立即初始化");
+    await initializeMedia();
+  }
+});
+
+onUnmounted(() => {
+  logWithTime('log', "🔄 VideoCallComponent 组件卸载");
+
+  if (endingTimer.value) {
+    clearInterval(endingTimer.value);
+    endingTimer.value = null;
+  }
+
+  // 清理视频重试定时器
+  videoRetryTimers.value.forEach(timer => clearTimeout(timer));
+  videoRetryTimers.value.clear();
+  videoRetryCount.value = 0;
+
+  // 取消注册视频回调
+  if (unregisterVideoCallback.value) {
+    unregisterVideoCallback.value();
+    unregisterVideoCallback.value = null;
+  }
+
+  webrtc.forceCleanup();
+  stopCallTimer();
+
+  document.removeEventListener('mousemove', handleDrag);
+  document.removeEventListener('mouseup', stopDrag);
+  window.removeEventListener('resize', handleWindowResize);
+
+  logWithTime('log', "✅ 组件卸载完成，所有资源已释放");
+});
+</script>
+
+<style scoped>
+/* 保持原有样式，添加新的指示器样式 */
+.video-call-container {
+  position: fixed;
+  z-index: 9999;
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: default;
+}
+
+.video-call-container.dragging {
+  opacity: 0.9;
+  cursor: grabbing;
+  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5);
+  transition: none;
+}
+
+.video-call-container.dark {
+  background: #2d2d2d;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
+}
+
+.video-call-container.minimized {
+  cursor: move;
+}
+
+.call-header {
+  background: linear-gradient(135deg, #4361ee, #3f37c9);
+  color: white;
+  padding: 12px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 56px;
+  cursor: move;
+}
+
+.call-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.caller-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.caller-details {
+  display: flex;
+  flex-direction: column;
+}
+
+.caller-name {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.call-status {
+  font-size: 12px;
+  opacity: 0.8;
+}
+
+.call-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.action-btn {
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.2);
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
+
+.action-btn:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.close-btn:hover {
+  background: #ff6b6b;
+}
+
+.minimized-content {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  background: linear-gradient(135deg, #4361ee, #3f37c9);
+  color: white;
+  cursor: move;
+}
+
+.audio-call-mini {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 0 12px;
+  gap: 10px;
+}
+
+.video-call-mini {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 0 10px;
+  gap: 8px;
+}
+
+.mini-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  color: white;
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.remote-video-preview {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  overflow: hidden;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.remote-video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.video-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.3);
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.placeholder-avatar {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  color: white;
+  font-size: 14px;
+}
+
+.mini-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.mini-name {
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mini-timer {
+  font-size: 12px;
+  opacity: 0.9;
+  font-family: 'Courier New', monospace;
+}
+
+.mini-expand-btn {
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.2);
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+}
+
+.mini-expand-btn:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.video-area {
+  position: relative;
+  height: calc(100% - 116px);
+  background: #000;
+  overflow: hidden;
+}
+
+.remote-video-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.remote-video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.video-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  color: white;
+  text-align: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+.placeholder-avatar {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32px;
+  font-weight: bold;
+  color: white;
+  margin-bottom: 15px;
+}
+
+.placeholder-text {
+  font-size: 18px;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+
+.connection-status {
+  font-size: 14px;
+  opacity: 0.8;
+}
+
+.call-timer-display {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  padding: 8px 12px;
+  border-radius: 20px;
+  font-size: 14px;
+  font-family: 'Courier New', monospace;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  backdrop-filter: blur(10px);
+  z-index: 10;
+}
+
+/* 连接状态指示器 */
+.connection-indicator {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 16px 24px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  backdrop-filter: blur(10px);
+  z-index: 10;
+}
+
+.spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top: 2px solid white;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+/* 视频重试指示器 */
+.video-retry-indicator {
+  position: absolute;
+  top: 60px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(255, 152, 0, 0.9);
+  color: white;
+  padding: 8px 16px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  backdrop-filter: blur(10px);
+  z-index: 10;
+}
+
+.retry-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top: 2px solid white;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+/* 修复问题1: 视频调试信息样式 */
+.video-debug-info {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 8px 12px;
+  border-radius: 8px;
+  font-size: 11px;
+  font-family: 'Courier New', monospace;
+  max-width: 200px;
+  backdrop-filter: blur(10px);
+  z-index: 10;
+}
+
+.video-debug-info div {
+  margin-bottom: 2px;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.local-video-container {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  width: 120px;
+  height: 90px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 2px solid white;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  z-index: 5;
+}
+
+.local-placeholder-container {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  width: 120px;
+  height: 90px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 2px solid white;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 5;
+}
+
+.local-avatar {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  font-weight: bold;
+  color: white;
+}
+
+.local-video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.call-controls {
+  background: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(10px);
+  padding: 12px;
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  height: 60px;
+}
+
+.control-btn {
+  width: 44px;
+  height: 44px;
+  border: none;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  transition: all 0.3s ease;
+}
+
+.control-btn:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: scale(1.1);
+}
+
+.control-btn.active {
+  background: #4caf50;
+}
+
+.control-btn.disabled {
+  background: #ff6b6b;
+}
+
+.end-call-btn {
+  background: #ff6b6b;
+}
+
+.end-call-btn:hover {
+  background: #ff5252;
+}
+
+.accept-btn-inline {
+  background: #4CAF50;
+}
+
+.accept-btn-inline:hover {
+  background: #45a049;
+}
+
+.reject-btn-inline {
+  background: #F44336;
+}
+
+.reject-btn-inline:hover {
+  background: #da190b;
+}
+
+.debug-btn {
+  background: #9c27b0;
+}
+
+.debug-btn:hover {
+  background: #7b1fa2;
+}
+
+.busy-status-inline {
+  background: rgba(255, 107, 107, 0.2);
+  color: #ff6b6b;
+  padding: 8px 16px;
+  border-radius: 20px;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  backdrop-filter: blur(10px);
+}
+
+.busy-status-inline i {
+  font-size: 16px;
+}
+
+.ending-notification {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.notification-content {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  padding: 24px;
+  text-align: center;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.notification-content i {
+  font-size: 32px;
+  color: #ff6b6b;
+}
+
+.notification-content span {
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.countdown {
+  font-size: 14px;
+  opacity: 0.8;
+  font-family: 'Courier New', monospace;
+}
+
+@media (max-width: 600px) {
+  .video-call-container:not(.minimized) {
+    width: 95vw !important;
+    height: 75vh !important;
+    max-width: 95vw;
+    max-height: 75vh;
+  }
+
+  .call-header,
+  .call-controls {
+    padding: 8px;
+  }
+
+  .control-btn {
+    width: 36px;
+    height: 36px;
+    font-size: 14px;
+  }
+
+  .local-video-container,
+  .local-placeholder-container {
+    width: 80px;
+    height: 60px;
+  }
+
+  .video-debug-info {
+    font-size: 10px;
+    max-width: 150px;
+  }
+}
+
+@media (max-height: 500px) {
+  .video-call-container:not(.minimized) {
+    height: 95vh !important;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/business/chat/components/VirtualList.vue b/apps/web-antd/src/views/business/chat/components/VirtualList.vue
new file mode 100644
index 00000000..ad58d6e5
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/components/VirtualList.vue
@@ -0,0 +1,129 @@
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true,
+  },
+  itemHeight: {
+    type: Number,
+    default: 80,
+  },
+  containerHeight: {
+    type: Number,
+    default: 400,
+  },
+});
+
+const containerRef = ref(null);
+const scrollTop = ref(0);
+
+// 计算总高度
+const totalHeight = computed(() => props.items.length * props.itemHeight);
+
+// 计算可见区域的起始索引
+const startIndex = computed(() =>
+  Math.floor(scrollTop.value / props.itemHeight),
+);
+
+// 计算可见区域的结束索引
+const endIndex = computed(() => {
+  const visibleCount = Math.ceil(props.containerHeight / props.itemHeight);
+  return Math.min(startIndex.value + visibleCount + 1, props.items.length - 1);
+});
+
+// 计算可见的项目
+const visibleItems = computed(() => {
+  return props.items
+    .slice(startIndex.value, endIndex.value + 1)
+    .map((item, index) => ({
+      ...item,
+      index: startIndex.value + index,
+    }));
+});
+
+// 计算偏移量
+const offsetY = computed(() => startIndex.value * props.itemHeight);
+
+// 处理滚动事件
+const handleScroll = (event) => {
+  scrollTop.value = event.target.scrollTop;
+};
+
+// 监听容器大小变化
+const resizeObserver = ref(null);
+
+onMounted(() => {
+  if (containerRef.value) {
+    resizeObserver.value = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { height } = entry.contentRect;
+        if (height !== props.containerHeight) {
+          // 可以在这里触发高度变化事件
+        }
+      }
+    });
+    resizeObserver.value.observe(containerRef.value);
+  }
+});
+
+onUnmounted(() => {
+  if (resizeObserver.value) {
+    resizeObserver.value.disconnect();
+  }
+});
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    :style="{ height: `${containerHeight}px` }"
+    class="virtual-list-container"
+    @scroll="handleScroll"
+  >
+    <div
+      :style="{ height: `${totalHeight}px` }"
+      class="virtual-list-phantom"
+    ></div>
+    <div
+      :style="{ transform: `translateY(${offsetY}px)` }"
+      class="virtual-list-content"
+    >
+      <div
+        v-for="item in visibleItems"
+        :key="item.id"
+        :style="{ height: `${itemHeight}px` }"
+        class="virtual-list-item"
+      >
+        <slot :index="item.index" :item="item"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.virtual-list-container {
+  position: relative;
+  overflow-y: auto;
+}
+
+.virtual-list-phantom {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: -1;
+}
+
+.virtual-list-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.virtual-list-item {
+  box-sizing: border-box;
+}
+</style>
diff --git a/apps/web-antd/src/views/business/chat/composables/useFileUpload.ts b/apps/web-antd/src/views/business/chat/composables/useFileUpload.ts
new file mode 100644
index 00000000..8b08f34e
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/composables/useFileUpload.ts
@@ -0,0 +1,115 @@
+import {nextTick, ref} from 'vue';
+
+import {message} from 'ant-design-vue';
+
+export function useFileUpload() {
+  const uploadPreview = ref(null);
+  const imageInput = ref(null);
+  const videoInput = ref(null);
+  const currentFileType = ref('');
+
+  const triggerFileInput = (type) => {
+    currentFileType.value = type;
+
+    nextTick(() => {
+      if (type === 'image' && imageInput.value) {
+        imageInput.value.value = '';
+        imageInput.value.click();
+      } else if (type === 'video' && videoInput.value) {
+        videoInput.value.value = '';
+        videoInput.value.click();
+      }
+    });
+  };
+
+  const handleFileUpload = (event) => {
+    if (!event.target.files || event.target.files.length === 0) return;
+
+    const file = event.target.files[0];
+
+    // 确定文件类型
+    let detectedType = currentFileType.value;
+    if (event.target === imageInput.value) {
+      detectedType = 'image';
+    } else if (event.target === videoInput.value) {
+      detectedType = 'video';
+    }
+
+    // 文件大小检查
+    const maxSize =
+      detectedType === 'image' ? 10 * 1024 * 1024 : 50 * 1024 * 1024;
+    if (file.size > maxSize) {
+      const maxSizeMB = maxSize / 1024 / 1024;
+      message.error(
+        `文件大小超过限制！${detectedType === 'image' ? '图片' : '视频'}最大${maxSizeMB}MB`,
+      );
+      event.target.value = '';
+      return;
+    }
+
+    // 文件类型检查
+    const validImageTypes = [
+      'image/jpeg',
+      'image/jpg',
+      'image/png',
+      'image/gif',
+      'image/webp',
+      'image/bmp',
+    ];
+    const validVideoTypes = [
+      'video/mp4',
+      'video/avi',
+      'video/mov',
+      'video/wmv',
+      'video/flv',
+      'video/webm',
+      'video/mkv',
+    ];
+
+    if (detectedType === 'image' && !validImageTypes.includes(file.type)) {
+      message.error('请选择有效的图片格式 (JPEG, PNG, GIF, WebP, BMP)');
+      event.target.value = '';
+      return;
+    }
+
+    if (detectedType === 'video' && !validVideoTypes.includes(file.type)) {
+      message.error(
+        '请选择有效的视频格式 (MP4, AVI, MOV, WMV, FLV, WebM, MKV)',
+      );
+      event.target.value = '';
+      return;
+    }
+
+    const reader = new FileReader();
+    reader.addEventListener('load', (e) => {
+      uploadPreview.value = {
+        type: detectedType,
+        url: e.target.result,
+        name: file.name,
+        size: file.size,
+        file,
+      };
+    });
+
+    reader.onerror = (error) => {
+      console.error('文件读取失败:', error);
+      message.error('文件读取失败，请重试');
+    };
+
+    reader.readAsDataURL(file);
+    event.target.value = '';
+  };
+
+  const cancelUpload = () => {
+    uploadPreview.value = null;
+  };
+
+  return {
+    uploadPreview,
+    imageInput,
+    videoInput,
+    triggerFileInput,
+    handleFileUpload,
+    cancelUpload,
+  };
+}
diff --git a/apps/web-antd/src/views/business/chat/composables/useMediaPreview.ts b/apps/web-antd/src/views/business/chat/composables/useMediaPreview.ts
new file mode 100644
index 00000000..e94872e7
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/composables/useMediaPreview.ts
@@ -0,0 +1,34 @@
+import {ref} from "vue"
+
+const visible = ref(false)
+const mediaData = ref(null)
+const previewType = ref("image")
+
+export function useMediaPreview() {
+  const showPreview = (content, type = "image") => {
+    console.log("显示媒体预览:", content, type)
+    mediaData.value = content
+    previewType.value = type
+    visible.value = true
+  }
+
+  const hidePreview = () => {
+    visible.value = false
+    mediaData.value = null
+    previewType.value = "image"
+  }
+
+  return {
+    visible,
+    mediaData,
+    previewType,
+    showPreview,
+    hidePreview,
+  }
+}
+
+// 导出一个函数供组件直接使用
+export default function previewMedia(content, type = "image") {
+  const {showPreview} = useMediaPreview()
+  showPreview(content, type)
+}
diff --git a/apps/web-antd/src/views/business/chat/composables/useRecording.ts b/apps/web-antd/src/views/business/chat/composables/useRecording.ts
new file mode 100644
index 00000000..35fbe019
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/composables/useRecording.ts
@@ -0,0 +1,67 @@
+import {ref} from "vue"
+import {message} from "ant-design-vue"
+
+export function useRecording() {
+  const isRecording = ref(false)
+  const mediaRecorder = ref(null)
+  const audioChunks = ref([])
+  const recordingStartTime = ref(0)
+
+  const startRecording = () => {
+    if (isRecording.value) return
+
+    navigator.mediaDevices
+      .getUserMedia({audio: true})
+      .then((stream) => {
+        isRecording.value = true
+        audioChunks.value = []
+        recordingStartTime.value = Date.now()
+
+        mediaRecorder.value = new MediaRecorder(stream)
+
+        mediaRecorder.value.ondataavailable = (event) => {
+          audioChunks.value.push(event.data)
+        }
+
+        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: duration,
+              blob: audioBlob,
+            },
+          })
+          window.dispatchEvent(event)
+
+          // 停止所有音频轨道
+          stream.getTracks().forEach((track) => track.stop())
+        }
+
+        mediaRecorder.value.start()
+      })
+      .catch((error) => {
+        console.error("录音失败:", error)
+        message.error("无法访问麦克风，请检查权限设置")
+        isRecording.value = false
+      })
+  }
+
+  const stopRecording = () => {
+    if (!isRecording.value || !mediaRecorder.value) return
+
+    isRecording.value = false
+    mediaRecorder.value.stop()
+  }
+
+  return {
+    isRecording,
+    startRecording,
+    stopRecording,
+  }
+}
diff --git a/apps/web-antd/src/views/business/chat/composables/useWebRTC.ts b/apps/web-antd/src/views/business/chat/composables/useWebRTC.ts
new file mode 100644
index 00000000..88bde710
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/composables/useWebRTC.ts
@@ -0,0 +1,904 @@
+import { ref } from 'vue';
+
+import { useChatStore } from '../stores/chat';
+import { useUserStore } from '../stores/user';
+import { callAPI } from '../utils/request.ts';
+
+export function useWebRTC() {
+  const localStream = ref(null);
+  const remoteStream = ref(null);
+  const peerConnection = ref(null);
+  const isConnected = ref(false);
+  const isConnecting = ref(false);
+
+  // ICE候选缓存和状态管理
+  const pendingIceCandidates = ref([]);
+  const isRemoteDescriptionSet = ref(false);
+  const connectionAttempts = ref(0);
+  const maxConnectionAttempts = 3;
+
+  // 修复问题1: 添加视频元素回调注册机制
+  const videoElementCallbacks = ref(new Set());
+
+  const userStore = useUserStore();
+  const chatStore = useChatStore();
+
+  // 改进ICE服务器配置
+  const configuration = {
+    iceServers: [
+      { urls: 'stun:stun.l.google.com:19302' },
+      { urls: 'stun:stun1.l.google.com:19302' },
+      { urls: 'stun:stun2.l.google.com:19302' },
+      { urls: 'stun:stun3.l.google.com:19302' },
+      { urls: 'stun:stun4.l.google.com:19302' },
+    ],
+    iceTransportPolicy: 'all',
+    iceCandidatePoolSize: 10,
+    bundlePolicy: 'max-bundle',
+    rtcpMuxPolicy: 'require',
+  };
+
+  // 时间戳日志函数
+  const logWithTime = (level, message, ...args) => {
+    const timestamp = new Date().toLocaleTimeString('zh-CN', {
+      hour12: false,
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      fractionalSecondDigits: 3,
+    });
+
+    switch (level) {
+      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);
+      }
+    }
+  };
+
+  // 获取本地媒体流
+  const getLocalMedia = async (constraints = { audio: true, video: true }) => {
+    try {
+      logWithTime('log', '🎥 开始获取本地媒体流', constraints);
+
+      if (localStream.value) {
+        logWithTime('log', '🔄 停止现有本地媒体流');
+        localStream.value.getTracks().forEach((track) => {
+          track.stop();
+          logWithTime('log', `停止轨道: ${track.kind} - ${track.label}`);
+        });
+        localStream.value = null;
+      }
+
+      const stream = await navigator.mediaDevices.getUserMedia(constraints);
+      localStream.value = stream;
+      logWithTime(
+        'log',
+        '✅ 本地媒体流获取成功',
+        stream.getTracks().map((t) => `${t.kind}:${t.label}`),
+      );
+      return stream;
+    } catch (error) {
+      logWithTime('error', '❌ 获取本地媒体流失败:', error);
+      throw error;
+    }
+  };
+
+  // 处理缓存的ICE候选
+  const processPendingIceCandidates = async () => {
+    if (
+      !peerConnection.value ||
+      !isRemoteDescriptionSet.value ||
+      pendingIceCandidates.value.length === 0
+    ) {
+      logWithTime(
+        'log',
+        `🧊 跳过处理ICE候选 - PC:${!!peerConnection.value}, RD:${isRemoteDescriptionSet.value}, 候选数:${pendingIceCandidates.value.length}`,
+      );
+      return;
+    }
+
+    logWithTime(
+      'log',
+      `🧊 开始处理 ${pendingIceCandidates.value.length} 个缓存的ICE候选`,
+    );
+
+    const candidates = [...pendingIceCandidates.value];
+    pendingIceCandidates.value = [];
+
+    for (const candidate of candidates) {
+      try {
+        if (
+          peerConnection.value &&
+          peerConnection.value.connectionState !== 'closed'
+        ) {
+          const iceCandidate = candidate.candidate
+            ? candidate
+            : new RTCIceCandidate(candidate);
+          await peerConnection.value.addIceCandidate(iceCandidate);
+          logWithTime(
+            'log',
+            '✅ 缓存ICE候选添加成功:',
+            `${iceCandidate.candidate?.slice(0, 50)}...`,
+          );
+        }
+      } catch (error) {
+        logWithTime('error', '❌ 缓存ICE候选添加失败:', error);
+      }
+    }
+  };
+
+  // 修复问题1: 注册视频元素更新回调
+  const registerVideoCallback = (callback) => {
+    videoElementCallbacks.value.add(callback);
+    logWithTime(
+      'log',
+      '📹 注册视频元素回调，当前回调数量:',
+      videoElementCallbacks.value.size,
+    );
+
+    // 如果已经有远程流，立即调用回调
+    if (remoteStream.value) {
+      logWithTime('log', '📹 立即调用新注册的回调，因为远程流已存在');
+      try {
+        callback(remoteStream.value);
+      } catch (error) {
+        logWithTime('error', '❌ 调用视频回调失败:', error);
+      }
+    }
+
+    return () => {
+      videoElementCallbacks.value.delete(callback);
+      logWithTime('log', '📹 取消注册视频元素回调');
+    };
+  };
+
+  // 修复问题1: 通知所有注册的视频元素更新
+  const notifyVideoElementsUpdate = (stream) => {
+    logWithTime(
+      'log',
+      '📹 通知所有视频元素更新，回调数量:',
+      videoElementCallbacks.value.size,
+    );
+
+    videoElementCallbacks.value.forEach((callback) => {
+      try {
+        callback(stream);
+      } catch (error) {
+        logWithTime('error', '❌ 调用视频回调失败:', error);
+      }
+    });
+  };
+
+  // 修复问题1: 改进远程轨道处理，直接通知组件更新
+  const setupRemoteTrackHandling = (pc) => {
+    pc.ontrack = (event) => {
+      logWithTime('log', '📹 接收到远程轨道事件:', {
+        streams: event.streams?.length,
+        track: event.track?.kind,
+        trackId: event.track?.id,
+        trackState: event.track?.readyState,
+        trackEnabled: event.track?.enabled,
+        trackMuted: event.track?.muted,
+      });
+
+      if (event.streams && event.streams.length > 0) {
+        const stream = event.streams[0];
+        const tracks = stream.getTracks();
+
+        if (tracks.length === 0) {
+          logWithTime('warn', '⚠️ 远程流没有轨道');
+          return;
+        }
+
+        logWithTime('log', '✅ 设置远程流:', {
+          id: stream.id,
+          tracks: tracks.map(
+            (t) => `${t.kind}:${t.id}:${t.readyState}:${t.enabled}:${t.muted}`,
+          ),
+          active: stream.active,
+        });
+
+        // 清理旧的远程流
+        if (remoteStream.value && remoteStream.value.id !== stream.id) {
+          logWithTime('log', '🔄 清理旧的远程流');
+          remoteStream.value.getTracks().forEach((track) => {
+            track.stop();
+            logWithTime('log', `停止旧远程轨道: ${track.kind}`);
+          });
+        }
+
+        // 设置新的远程流
+        remoteStream.value = stream;
+
+        // 修复问题1: 直接通知所有注册的视频元素
+        notifyVideoElementsUpdate(stream);
+
+        // 监听流和轨道的状态变化
+        stream.onactive = () => {
+          logWithTime('log', '📹 远程流变为活跃状态');
+          notifyVideoElementsUpdate(stream);
+        };
+
+        stream.oninactive = () => {
+          logWithTime('warn', '⚠️ 远程流变为非活跃状态');
+        };
+
+        stream.onaddtrack = (trackEvent) => {
+          logWithTime('log', '📹 远程流添加新轨道:', trackEvent.track.kind);
+          setupTrackListeners(trackEvent.track);
+          notifyVideoElementsUpdate(stream);
+        };
+
+        stream.onremovetrack = (trackEvent) => {
+          logWithTime('warn', '⚠️ 远程流移除轨道:', trackEvent.track.kind);
+        };
+
+        // 为每个轨道设置监听器
+        tracks.forEach((track, index) => {
+          setupTrackListeners(track, index);
+        });
+
+        // 延迟通知，确保DOM已更新
+        setTimeout(() => {
+          notifyVideoElementsUpdate(stream);
+        }, 100);
+
+        setTimeout(() => {
+          notifyVideoElementsUpdate(stream);
+        }, 500);
+      } else if (event.track) {
+        // 如果没有流，尝试从轨道创建流
+        logWithTime('log', '🔄 从轨道创建远程流');
+        const newStream = new MediaStream([event.track]);
+        remoteStream.value = newStream;
+        setupTrackListeners(event.track);
+
+        logWithTime('log', '✅ 从轨道创建的流:', {
+          id: newStream.id,
+          tracks: newStream.getTracks().map((t) => `${t.kind}:${t.id}`),
+        });
+
+        // 通知视频元素更新
+        notifyVideoElementsUpdate(newStream);
+
+        setTimeout(() => {
+          notifyVideoElementsUpdate(newStream);
+        }, 100);
+      } else {
+        logWithTime('warn', '⚠️ ontrack事件没有接收到有效的媒体流或轨道');
+      }
+    };
+  };
+
+  // 为轨道设置完整的状态监听
+  const setupTrackListeners = (track, index = 0) => {
+    logWithTime(
+      'log',
+      `设置轨道${index}监听器: ${track.kind} - ${track.readyState} - ${track.enabled}`,
+    );
+
+    track.addEventListener('ended', () => {
+      logWithTime('warn', `远程轨道结束: ${track.kind} - ${track.id}`);
+      // 轨道结束时尝试重新协商
+      if (
+        peerConnection.value &&
+        peerConnection.value.connectionState === 'connected'
+      ) {
+        logWithTime('log', '轨道结束，可能需要重新协商');
+      }
+    });
+
+    track.onmute = () => {
+      logWithTime('warn', `远程轨道静音: ${track.kind} - ${track.id}`);
+    };
+
+    track.onunmute = () => {
+      logWithTime('log', `远程轨道取消静音: ${track.kind} - ${track.id}`);
+      // 取消静音时触发视频更新
+      if (track.kind === 'video' && remoteStream.value) {
+        notifyVideoElementsUpdate(remoteStream.value);
+      }
+    };
+
+    // 确保轨道是启用的
+    if (!track.enabled) {
+      logWithTime('warn', `⚠️ 远程轨道未启用，尝试启用: ${track.kind}`);
+      track.enabled = true;
+    }
+
+    // 定期检查轨道状态
+    const checkInterval = setInterval(() => {
+      if (track.readyState === 'ended') {
+        clearInterval(checkInterval);
+        return;
+      }
+
+      if (
+        track.kind === 'video' &&
+        track.readyState === 'live' &&
+        track.enabled &&
+        !track.muted && // 视频轨道状态良好，确保视频元素正在播放
+        remoteStream.value
+      ) {
+        notifyVideoElementsUpdate(remoteStream.value);
+      }
+    }, 5000);
+
+    // 清理定时器
+    track.addEventListener('ended', () => {
+      clearInterval(checkInterval);
+    });
+  };
+
+  // 连接重试机制
+  const attemptReconnection = async (callId, peerId) => {
+    if (connectionAttempts.value >= maxConnectionAttempts) {
+      logWithTime('error', '❌ 达到最大重连次数，停止重试');
+      chatStore.callStatus = 'failed';
+      return false;
+    }
+
+    connectionAttempts.value++;
+    logWithTime(
+      'log',
+      `🔄 尝试重新连接 (${connectionAttempts.value}/${maxConnectionAttempts})`,
+    );
+
+    try {
+      // 清理现有连接
+      cleanupPeerConnection();
+
+      // 重新创建连接
+      createPeerConnection(callId, peerId);
+
+      // 重置状态
+      isRemoteDescriptionSet.value = false;
+      pendingIceCandidates.value = [];
+
+      return true;
+    } catch (error) {
+      logWithTime('error', '❌ 重连失败:', error);
+      return false;
+    }
+  };
+
+  // 改进PeerConnection创建逻辑
+  const createPeerConnection = (callId, peerId) => {
+    logWithTime('log', '🔗 创建PeerConnection', { callId, peerId });
+
+    if (peerConnection.value) {
+      logWithTime('log', '🔄 关闭现有PeerConnection');
+      cleanupPeerConnection();
+    }
+
+    // 重置状态
+    isConnected.value = false;
+    isConnecting.value = false;
+    isRemoteDescriptionSet.value = false;
+    pendingIceCandidates.value = [];
+
+    const pc = new RTCPeerConnection(configuration);
+    peerConnection.value = pc;
+
+    // 添加本地流到连接
+    if (localStream.value) {
+      logWithTime('log', '📤 添加本地流轨道到PeerConnection');
+      localStream.value.getTracks().forEach((track) => {
+        logWithTime('log', `添加轨道: ${track.kind} - ${track.label}`);
+        pc.addTrack(track, localStream.value);
+      });
+    }
+
+    // ICE候选事件处理
+    pc.onicecandidate = async (event) => {
+      if (event.candidate) {
+        logWithTime(
+          'log',
+          '📡 发送ICE候选:',
+          `${event.candidate.candidate?.slice(0, 50)}...`,
+        );
+        try {
+          await callAPI.sendCandidate(
+            userStore.currentUser?.id,
+            peerId,
+            callId,
+            event.candidate,
+            6,
+          );
+          logWithTime('log', '✅ ICE候选发送成功');
+        } catch (error) {
+          logWithTime('error', '❌ 发送ICE候选失败:', error);
+        }
+      } else {
+        logWithTime('log', '📡 ICE候选收集完成');
+      }
+    };
+
+    // 设置改进的远程轨道处理
+    setupRemoteTrackHandling(pc);
+
+    // 连接状态监听
+    pc.onconnectionstatechange = () => {
+      const state = pc.connectionState;
+      logWithTime('log', '🔗 连接状态变化:', state);
+
+      switch (state) {
+        case 'closed': {
+          isConnected.value = false;
+          isConnecting.value = false;
+          logWithTime('log', '🔒 WebRTC连接已关闭');
+          break;
+        }
+
+        case 'connected': {
+          isConnected.value = true;
+          isConnecting.value = false;
+          connectionAttempts.value = 0; // 重置重试计数
+          chatStore.callStatus = 'ongoing';
+          chatStore.callConnectionStatus = '通话已连接';
+          logWithTime('log', '✅ WebRTC连接已建立');
+          break;
+        }
+
+        case 'connecting': {
+          isConnecting.value = true;
+          chatStore.callConnectionStatus = '正在连接...';
+          logWithTime('log', '🔄 WebRTC正在连接');
+          break;
+        }
+
+        case 'disconnected': {
+          isConnected.value = false;
+          isConnecting.value = false;
+          chatStore.callStatus = 'disconnected';
+          chatStore.callConnectionStatus = '连接已断开';
+          logWithTime('warn', '⚠️ WebRTC连接断开');
+
+          // 连接断开时尝试重连
+          setTimeout(() => {
+            if (chatStore.callStatus === 'disconnected') {
+              attemptReconnection(callId, peerId);
+            }
+          }, 2000);
+          break;
+        }
+
+        case 'failed': {
+          isConnected.value = false;
+          isConnecting.value = false;
+          chatStore.callStatus = 'failed';
+          chatStore.callConnectionStatus = '连接失败';
+          logWithTime('error', '❌ WebRTC连接失败');
+
+          // 连接失败时尝试重连
+          setTimeout(() => {
+            if (chatStore.callStatus === 'failed') {
+              attemptReconnection(callId, peerId);
+            }
+          }, 3000);
+          break;
+        }
+      }
+    };
+
+    // ICE连接状态监听和重连逻辑
+    pc.oniceconnectionstatechange = () => {
+      const iceState = pc.iceConnectionState;
+      logWithTime('log', '🧊 ICE连接状态变化:', iceState);
+
+      switch (iceState) {
+        case 'checking': {
+          logWithTime('log', '🧊 ICE正在检查连接');
+          break;
+        }
+        case 'closed': {
+          logWithTime('log', '🔒 ICE连接已关闭');
+          break;
+        }
+        case 'completed': {
+          logWithTime('log', '✅ ICE连接完成');
+          break;
+        }
+        case 'connected': {
+          logWithTime('log', '✅ ICE连接成功');
+          connectionAttempts.value = 0; // 重置重试计数
+          break;
+        }
+        case 'disconnected': {
+          logWithTime('warn', '⚠️ ICE连接断开');
+
+          // ICE断开时等待一段时间看是否能恢复
+          setTimeout(() => {
+            if (pc.iceConnectionState === 'disconnected') {
+              logWithTime('log', '🔄 ICE连接断开超时，尝试重连');
+              attemptReconnection(callId, peerId);
+            }
+          }, 5000);
+          break;
+        }
+        case 'failed': {
+          logWithTime('error', '❌ ICE连接失败');
+          chatStore.callConnectionStatus = '网络连接失败';
+
+          // ICE连接失败时重新协商
+          setTimeout(() => {
+            if (pc.iceConnectionState === 'failed') {
+              logWithTime('log', '🔄 ICE连接失败，尝试重新协商');
+              // 通知需要重新协商
+              const event = new CustomEvent('iceConnectionFailed', {
+                detail: { callId, peerId },
+              });
+              window.dispatchEvent(event);
+            }
+          }, 2000);
+          break;
+        }
+      }
+    };
+
+    // ICE收集状态监听
+    pc.onicegatheringstatechange = () => {
+      logWithTime('log', '🧊 ICE收集状态:', pc.iceGatheringState);
+    };
+
+    // 信令状态监听
+    pc.onsignalingstatechange = () => {
+      logWithTime('log', '📡 信令状态:', pc.signalingState);
+    };
+
+    return pc;
+  };
+
+  // 清理PeerConnection
+  const cleanupPeerConnection = () => {
+    if (!peerConnection.value) return;
+
+    try {
+      const senders = peerConnection.value.getSenders();
+      senders.forEach((sender) => {
+        if (sender.track) {
+          logWithTime('log', `停止发送器轨道: ${sender.track.kind}`);
+          sender.track.stop();
+        }
+      });
+
+      const receivers = peerConnection.value.getReceivers();
+      receivers.forEach((receiver) => {
+        if (receiver.track) {
+          logWithTime('log', `停止接收器轨道: ${receiver.track.kind}`);
+          receiver.track.stop();
+        }
+      });
+    } catch (error) {
+      logWithTime('error', '❌ 清理发送器/接收器时出错:', error);
+    }
+
+    // 清理事件监听器
+    peerConnection.value.onicecandidate = null;
+    peerConnection.value.ontrack = null;
+    peerConnection.value.onconnectionstatechange = null;
+    peerConnection.value.oniceconnectionstatechange = null;
+    peerConnection.value.onicegatheringstatechange = null;
+    peerConnection.value.onsignalingstatechange = null;
+    peerConnection.value.ondatachannel = null;
+
+    peerConnection.value.close();
+    peerConnection.value = null;
+  };
+
+  // 创建Offer
+  const createOffer = async (callId, peerId) => {
+    logWithTime('log', '📤 创建Offer', { callId, peerId });
+
+    if (!peerConnection.value) {
+      logWithTime('log', '🔗 PeerConnection不存在，先创建');
+      createPeerConnection(callId, peerId);
+    }
+
+    try {
+      const offerOptions = {
+        offerToReceiveAudio: true,
+        offerToReceiveVideo: true,
+        voiceActivityDetection: true,
+        iceRestart: connectionAttempts.value > 0, // 重连时启用ICE重启
+      };
+
+      const offer = await peerConnection.value.createOffer(offerOptions);
+      await peerConnection.value.setLocalDescription(offer);
+
+      logWithTime('log', '✅ Offer创建成功:', {
+        type: offer.type,
+        sdpLength: offer.sdp.length,
+        hasAudio: offer.sdp.includes('m=audio'),
+        hasVideo: offer.sdp.includes('m=video'),
+        iceRestart: offerOptions.iceRestart,
+      });
+
+      return offer;
+    } catch (error) {
+      logWithTime('error', '❌ 创建Offer失败:', error);
+      throw error;
+    }
+  };
+
+  // 创建Answer
+  const createAnswer = async (offer, callId, peerId) => {
+    logWithTime('log', '📥 处理Offer并创建Answer');
+
+    if (!peerConnection.value) {
+      logWithTime('log', '🔗 PeerConnection不存在，先创建');
+      createPeerConnection(callId, peerId);
+    }
+
+    try {
+      logWithTime('log', '📥 设置远程Offer');
+      const remoteDesc = new RTCSessionDescription(offer);
+      await peerConnection.value.setRemoteDescription(remoteDesc);
+
+      isRemoteDescriptionSet.value = true;
+      logWithTime('log', '✅ 远程描述设置完成，开始处理缓存的ICE候选');
+
+      await processPendingIceCandidates();
+
+      const answer = await peerConnection.value.createAnswer();
+      await peerConnection.value.setLocalDescription(answer);
+
+      logWithTime('log', '✅ Answer创建成功:', {
+        type: answer.type,
+        sdpLength: answer.sdp.length,
+        hasAudio: answer.sdp.includes('m=audio'),
+        hasVideo: answer.sdp.includes('m=video'),
+      });
+
+      return answer;
+    } catch (error) {
+      logWithTime('error', '❌ 创建Answer失败:', error);
+      throw error;
+    }
+  };
+
+  // 设置远程Answer
+  const setRemoteAnswer = async (answer) => {
+    logWithTime('log', '📥 设置远程Answer');
+
+    if (!peerConnection.value) {
+      logWithTime('error', '❌ PeerConnection不存在');
+      throw new Error('PeerConnection不存在');
+    }
+
+    try {
+      const remoteDesc = new RTCSessionDescription(answer);
+      await peerConnection.value.setRemoteDescription(remoteDesc);
+
+      isRemoteDescriptionSet.value = true;
+      logWithTime('log', '✅ 远程Answer设置成功，开始处理缓存的ICE候选');
+
+      await processPendingIceCandidates();
+    } catch (error) {
+      logWithTime('error', '❌ 设置远程Answer失败:', error);
+      throw error;
+    }
+  };
+
+  // ICE候选添加逻辑
+  const addIceCandidate = async (candidate) => {
+    logWithTime(
+      'log',
+      '🧊 收到ICE候选:',
+      `${candidate.candidate?.slice(0, 50)}...`,
+    );
+
+    if (!candidate || !candidate.candidate) {
+      logWithTime('warn', '⚠️ 无效的ICE候选:', candidate);
+      return false;
+    }
+
+    if (!peerConnection.value) {
+      logWithTime('warn', '⚠️ PeerConnection不存在，缓存ICE候选');
+      pendingIceCandidates.value.push(candidate);
+      return false;
+    }
+
+    if (
+      peerConnection.value.connectionState === 'closed' ||
+      peerConnection.value.connectionState === 'failed'
+    ) {
+      logWithTime(
+        'warn',
+        '⚠️ PeerConnection状态异常，缓存ICE候选:',
+        peerConnection.value.connectionState,
+      );
+      pendingIceCandidates.value.push(candidate);
+      return false;
+    }
+
+    if (!isRemoteDescriptionSet.value) {
+      logWithTime('warn', '⚠️ 远程描述未设置，缓存ICE候选');
+      pendingIceCandidates.value.push(candidate);
+      return false;
+    }
+
+    try {
+      const iceCandidate = candidate.candidate
+        ? candidate
+        : new RTCIceCandidate(candidate);
+      await peerConnection.value.addIceCandidate(iceCandidate);
+      logWithTime('log', '✅ ICE候选添加成功');
+      return true;
+    } catch (error) {
+      logWithTime('error', '❌ 添加ICE候选失败:', error);
+      return false;
+    }
+  };
+
+  // 切换摄像头
+  const toggleCamera = (enable) => {
+    if (!localStream.value) {
+      logWithTime('warn', '⚠️ 本地流不存在，无法切换摄像头');
+      return;
+    }
+
+    const videoTracks = localStream.value.getVideoTracks();
+    if (videoTracks.length > 0) {
+      videoTracks.forEach((track) => {
+        track.enabled = enable;
+        logWithTime(
+          'log',
+          `📹 摄像头${enable ? '开启' : '关闭'}: ${track.label}`,
+        );
+      });
+    } else {
+      logWithTime('warn', '⚠️ 没有找到视频轨道');
+    }
+  };
+
+  // 切换麦克风
+  const toggleMicrophone = (enable) => {
+    if (!localStream.value) {
+      logWithTime('warn', '⚠️ 本地流不存在，无法切换麦克风');
+      return;
+    }
+
+    const audioTracks = localStream.value.getAudioTracks();
+    if (audioTracks.length > 0) {
+      audioTracks.forEach((track) => {
+        track.enabled = enable;
+        logWithTime(
+          'log',
+          `🎤 麦克风${enable ? '开启' : '关闭'}: ${track.label}`,
+        );
+      });
+    } else {
+      logWithTime('warn', '⚠️ 没有找到音频轨道');
+    }
+  };
+
+  // 释放媒体资源
+  const releaseMediaResources = () => {
+    logWithTime('log', '🔄 开始释放媒体资源');
+
+    if (localStream.value) {
+      logWithTime('log', '🔄 释放本地媒体流');
+      localStream.value.getTracks().forEach((track) => {
+        logWithTime(
+          'log',
+          `停止本地轨道: ${track.kind} - ${track.label} - 状态: ${track.readyState}`,
+        );
+        track.stop();
+
+        setTimeout(() => {
+          if (track.readyState === 'ended') {
+            logWithTime('log', `✅ 轨道已完全停止: ${track.kind}`);
+          } else {
+            logWithTime(
+              'warn',
+              `⚠️ 轨道未完全停止: ${track.kind} - ${track.readyState}`,
+            );
+            try {
+              track.stop();
+            } catch (error) {
+              logWithTime('error', '强制停止轨道失败:', error);
+            }
+          }
+        }, 200);
+      });
+      localStream.value = null;
+    }
+
+    if (remoteStream.value) {
+      logWithTime('log', '🔄 释放远程媒体流');
+      remoteStream.value.getTracks().forEach((track) => {
+        logWithTime('log', `停止远程轨道: ${track.kind}`);
+        track.stop();
+      });
+      remoteStream.value = null;
+
+      // 通知视频元素清理
+      notifyVideoElementsUpdate(null);
+    }
+
+    logWithTime('log', '✅ 媒体资源释放完成');
+  };
+
+  // 关闭连接
+  const closeConnection = () => {
+    logWithTime('log', '🔄 开始关闭WebRTC连接');
+
+    pendingIceCandidates.value = [];
+    isRemoteDescriptionSet.value = false;
+    connectionAttempts.value = 0;
+    logWithTime('log', '🧊 清空ICE候选缓存和状态');
+
+    releaseMediaResources();
+    cleanupPeerConnection();
+
+    isConnected.value = false;
+    isConnecting.value = false;
+
+    logWithTime('log', '✅ WebRTC连接已完全关闭，所有资源已释放');
+  };
+
+  // 强制清理所有资源
+  const forceCleanup = () => {
+    logWithTime('log', '🚨 强制清理所有WebRTC资源');
+
+    try {
+      pendingIceCandidates.value = [];
+      isRemoteDescriptionSet.value = false;
+      connectionAttempts.value = 0;
+
+      // 清理所有回调
+      videoElementCallbacks.value.clear();
+
+      closeConnection();
+
+      setTimeout(() => {
+        localStream.value = null;
+        remoteStream.value = null;
+        peerConnection.value = null;
+        isConnected.value = false;
+        isConnecting.value = false;
+
+        logWithTime('log', '✅ 强制清理完成');
+      }, 100);
+    } catch (error) {
+      logWithTime('error', '❌ 强制清理时出错:', error);
+    }
+  };
+
+  return {
+    localStream,
+    remoteStream,
+    peerConnection,
+    isConnected,
+    isConnecting,
+    pendingIceCandidates,
+    isRemoteDescriptionSet,
+    connectionAttempts,
+    getLocalMedia,
+    createPeerConnection,
+    createOffer,
+    createAnswer,
+    setRemoteAnswer,
+    addIceCandidate,
+    toggleCamera,
+    toggleMicrophone,
+    closeConnection,
+    releaseMediaResources,
+    forceCleanup,
+    attemptReconnection,
+    registerVideoCallback, // 修复问题1: 新增方法
+  };
+}
diff --git a/apps/web-antd/src/views/business/chat/composables/useWebSocket.ts b/apps/web-antd/src/views/business/chat/composables/useWebSocket.ts
new file mode 100644
index 00000000..ec2c389d
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/composables/useWebSocket.ts
@@ -0,0 +1,191 @@
+import { onMounted, onUnmounted, ref } from 'vue';
+
+import { useChatStore } from '../stores/chat';
+import { useUserStore } from '../stores/user';
+// useVbenUserStore
+export function useWebSocket() {
+  const userStore = useUserStore();
+  const chatStore = useChatStore();
+
+  const socket = ref();
+  const isConnected = ref(false);
+  const isConnecting = ref(false);
+  const reconnectAttempts = ref(0);
+  const maxReconnectAttempts = 5;
+  const reconnectDelay = ref(1000);
+
+  const connectWebSocket = () => {
+    if (isConnecting.value || isConnected.value) return;
+
+    isConnecting.value = true;
+    chatStore.connectionStatus = 'connecting';
+
+    try {
+      // const wsUrl = import.meta.env.VITE_WS_URL || "wss://g-ws.nailaoyun.cn/ws"
+      const wsUrl = import.meta.env.VITE_WS_URL || 'ws://localhost:12080/ws';
+      // const wsUrl = import.meta.env.VITE_WS_URL || "wss://g-ws.nailaoyun.cn/ws"
+      socket.value = new WebSocket(wsUrl);
+
+      socket.value.addEventListener('open', handleOpen);
+      socket.value.onmessage = handleMessage;
+      socket.value.addEventListener('close', handleClose);
+      socket.value.onerror = handleError;
+    } catch (error) {
+      console.error('WebSocket连接失败:', error);
+      isConnecting.value = false;
+      chatStore.connectionStatus = 'disconnected';
+    }
+  };
+
+  const handleOpen = (event) => {
+    console.log('WebSocket连接已建立');
+    isConnected.value = true;
+    isConnecting.value = false;
+    reconnectAttempts.value = 0;
+    reconnectDelay.value = 1000;
+    chatStore.connectionStatus = 'connected';
+    chatStore.socket = socket.value;
+    console.log(userStore.currentUser, 'ssssssssss')
+
+    // 绑定当前用户
+    if (userStore.currentUser?.id) {
+      bindUser(userStore.currentUser.id);
+    }
+  };
+
+  const handleMessage = (event) => {
+    try {
+      const data = JSON.parse(event.data);
+      console.log('收到WebSocket消息:', data);
+
+      // 优先处理通话信令（无论是否在当前聊天窗口）
+      if (data.call_id && data.call_status) {
+        handleCallSignal(data);
+        return;
+      }
+
+      // 处理普通消息 - 添加来源判断防止循环
+      if (data.sender_user_id && data.receiver_user_id) {
+        chatStore.handleIncomingMessage(data, userStore.currentUser?.id);
+      }
+    } catch (error) {
+      console.error('解析WebSocket消息失败:', error);
+    }
+  };
+
+  const handleClose = (event) => {
+    console.log('WebSocket连接已关闭:', event.code, event.reason);
+    isConnected.value = false;
+    isConnecting.value = false;
+    chatStore.connectionStatus = 'disconnected';
+    chatStore.socket = null;
+
+    // 自动重连
+    if (reconnectAttempts.value < maxReconnectAttempts) {
+      setTimeout(() => {
+        reconnectAttempts.value++;
+        reconnectDelay.value = Math.min(reconnectDelay.value * 2, 30_000);
+        console.log(
+          `尝试重连 (${reconnectAttempts.value}/${maxReconnectAttempts})`,
+        );
+        connectWebSocket();
+      }, reconnectDelay.value);
+    }
+  };
+
+  const handleError = (error) => {
+    console.error('WebSocket错误:', error);
+    isConnecting.value = false;
+    chatStore.connectionStatus = 'disconnected';
+  };
+
+  const handleCallSignal = (data) => {
+    console.log('收到通话信令:', data);
+    chatStore.handleCallSignal(data);
+  };
+
+  const bindUser = (userId) => {
+    if (!isConnected.value || !userId) return;
+
+    const bindMessage = {
+      request_type: 'bind',
+      user_type: 'doctor',
+      sender_user_id: `doctor-${userId}`,
+    };
+
+    send(bindMessage);
+  };
+
+  const send = (message) => {
+    if (!isConnected.value || !socket.value) {
+      console.error('WebSocket未连接，无法发送消息');
+      return false;
+    }
+
+    try {
+      socket.value.send(JSON.stringify(message));
+      console.log('发送消息:', message);
+      return true;
+    } catch (error) {
+      console.error('发送消息失败:', error);
+      return false;
+    }
+  };
+
+  const sendMessage = (receiverUserId, messageType, content) => {
+    const message = {
+      request_type: 'send_message',
+      sender_user_id: userStore.currentUser?.id,
+      receiver_user_id: receiverUserId,
+      message_type: messageType,
+      message_content: content,
+    };
+
+    return send(message);
+  };
+
+  const sendCallSignal = (signal) => {
+    return send({
+      request_type: 'call_signal',
+      ...signal,
+      sender_user_id: userStore.currentUser?.id,
+    });
+  };
+
+  const disconnect = () => {
+    if (socket.value) {
+      socket.value.close();
+      socket.value = null;
+    }
+    isConnected.value = false;
+    isConnecting.value = false;
+    chatStore.connectionStatus = 'disconnected';
+    chatStore.socket = null;
+  };
+
+  // 生成唯一ID
+  const generateCallId = () => {
+    return Date.now().toString() + Math.random().toString(36).slice(2, 11);
+  };
+
+  // onMounted(() => {
+  //   connectWebSocket();
+  // });
+
+  onUnmounted(() => {
+    disconnect();
+  });
+
+  return {
+    socket,
+    isConnected,
+    isConnecting,
+    connectWebSocket,
+    disconnect,
+    send,
+    sendMessage,
+    sendCallSignal,
+    bindUser,
+    generateCallId,
+  };
+}
diff --git a/apps/web-antd/src/views/business/chat/index.vue b/apps/web-antd/src/views/business/chat/index.vue
new file mode 100644
index 00000000..82ba4a19
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/index.vue
@@ -0,0 +1,211 @@
+<script setup>
+import { onMounted, onUnmounted, ref, watch } from 'vue';
+
+import ChatArea from './components/ChatArea.vue';
+import ConnectionStatus from './components/ConnectionStatus.vue';
+import EmptyState from './components/EmptyState.vue';
+import FriendList from './components/FriendList.vue';
+import FriendsManagement from './components/FriendsManagement.vue';
+import GroupsManagement from './components/GroupsManagement.vue';
+import MediaPreview from './components/MediaPreview.vue';
+import MomentsView from './components/MomentsView.vue';
+// import SideNavigation from './components/SideNavigation.vue';
+import VideoCallComponent from './components/VideoCallComponent.vue';
+import { useChatStore } from './stores/chat.ts';
+import { useThemeStore } from './stores/theme.ts';
+
+const chatStore = useChatStore();
+const themeStore = useThemeStore();
+
+const currentNav = ref('chat');
+
+// 视频通话相关状态
+const showVideoCall = ref(false);
+const callType = ref('video');
+const isIncoming = ref(false);
+const callerInfo = ref(null);
+
+// 初始化录音功能
+// const { isRecording } = useRecording();
+
+// 处理导航切换
+const handleNavChange = (nav) => {
+  currentNav.value = nav;
+};
+
+// 监听通话状态变化
+watch(
+  () => chatStore.callStatus,
+  (status) => {
+    // 只有当通话状态是活跃状态时才显示视频组件
+    showVideoCall.value =
+      status === 'connecting' ||
+      status === 'calling' ||
+      status === 'ringing' ||
+      status === 'ongoing';
+  },
+);
+
+// 监听来电
+watch(
+  () => chatStore.incomingCall,
+  (call) => {
+    if (call) {
+      isIncoming.value = true;
+      callerInfo.value = chatStore.friends.find((f) => f.id === call.callerId);
+      callType.value = call.callType;
+    } else {
+      isIncoming.value = false;
+    }
+  },
+);
+
+// 监听当前通话
+watch(
+  () => chatStore.currentCall,
+  (call) => {
+    if (call) {
+      callerInfo.value = chatStore.friends.find((f) => f.id === call.peerId);
+      callType.value = call.callType;
+      isIncoming.value = false;
+    } else {
+      // 当通话结束时重置状态
+      showVideoCall.value = false;
+    }
+  },
+);
+
+// 处理接听通话
+const handleAcceptCall = () => {
+  chatStore.acceptCall();
+};
+
+// 处理拒绝通话
+const handleRejectCall = () => {
+  chatStore.rejectCall();
+};
+
+// 处理结束通话 - 修复挂断逻辑
+const handleEndCall = () => {
+  chatStore.endCall();
+};
+
+// 加载主题
+themeStore.loadTheme();
+
+onUnmounted(() => {
+  // disconnectWebSocket();
+});
+</script>
+
+<template>
+  <div
+    style="height: 95vh;"
+    class="flex bg-gradient-to-br from-blue-900 via-purple-900 to-pink-300 p-5"
+  >
+    <!--    &lt;!&ndash; 背景装饰 &ndash;&gt;-->
+    <!--    <div class="pointer-events-none fixed inset-0 z-0">-->
+    <!--      <div-->
+    <!--        class="animate-float absolute left-10 top-10 h-72 w-72 rounded-full bg-blue-500 opacity-10"-->
+    <!--      ></div>-->
+    <!--      <div-->
+    <!--        class="right-15 animate-float-delayed absolute top-60 h-48 w-48 rounded-full bg-cyan-400 opacity-10"-->
+    <!--      ></div>-->
+    <!--      <div-->
+    <!--        class="animate-float-slow absolute bottom-10 left-20 h-36 w-36 rounded-full bg-red-400 opacity-10"-->
+    <!--      ></div>-->
+    <!--    </div>-->
+
+
+    <!--    &lt;!&ndash; 录音状态指示器 &ndash;&gt;-->
+    <!--    <RecordingIndicator />-->
+
+    <!-- 视频通话组件（移动到此处） -->
+    <VideoCallComponent
+      v-if="showVideoCall"
+      :call-type="callType"
+      :caller-info="callerInfo"
+      :is-incoming="isIncoming"
+      @accept-call="handleAcceptCall"
+      @end-call="handleEndCall"
+      @reject-call="handleRejectCall"
+    />
+
+    <!-- 主聊天容器 -->
+    <div
+      class="z-10 mx-auto flex flex-1 overflow-hidden rounded-2xl bg-white/90 shadow-2xl backdrop-blur-sm"
+    >
+      <!-- 连接状态指示器 -->
+      <ConnectionStatus />
+<!--      &lt;!&ndash; 侧边导航 &ndash;&gt;-->
+<!--      <SideNavigation-->
+<!--        :current-view="currentNav"-->
+<!--        @nav-change="handleNavChange"-->
+<!--      />-->
+
+      <!-- 好友列表 -->
+      <FriendList class="w-80 min-w-80" />
+
+      <!-- 聊天区域 -->
+      <div class="min-w-0 flex-1">
+        <ChatArea v-if="chatStore.currentFriend && currentNav === 'chat'" />
+        <FriendsManagement v-else-if="currentNav === 'friends'" />
+        <GroupsManagement v-else-if="currentNav === 'groups'" />
+        <MomentsView v-else-if="currentNav === 'moments'" />
+        <EmptyState v-else />
+      </div>
+    </div>
+
+    <!-- 媒体预览模态框 -->
+    <MediaPreview />
+  </div>
+</template>
+<style scoped>
+/*@keyframes float {
+  0% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-20px) rotate(10deg);
+  }
+  100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+}
+
+@keyframes float-delayed {
+  0% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-15px) rotate(-5deg);
+  }
+  100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+}
+
+@keyframes float-slow {
+  0% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-10px) rotate(5deg);
+  }
+  100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+}
+
+.animate-float {
+  animation: float 12s infinite ease-in-out;
+}
+
+.animate-float-delayed {
+  animation: float-delayed 15s infinite ease-in-out;
+}
+
+.animate-float-slow {
+  animation: float-slow 18s infinite ease-in-out;
+}*/
+</style>
diff --git a/apps/web-antd/src/views/business/chat/stores/chat.ts b/apps/web-antd/src/views/business/chat/stores/chat.ts
new file mode 100644
index 00000000..d899f318
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/stores/chat.ts
@@ -0,0 +1,1239 @@
+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";
+
+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 webrtc = useWebRTC()
+  const userStore = useUserStore()
+
+  // 计算属性
+  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 logWithTime = (level, message, ...args) => {
+    const timestamp = new Date().toLocaleTimeString("zh-CN", {
+      hour12: false,
+      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)
+    }
+  }
+
+  // 监听通话状态变化
+  watch(
+    () => callStatus.value,
+    (newStatus) => {
+      logWithTime("log", "通话状态变化:", newStatus)
+    },
+  )
+
+  // 重置所有通话状态
+  const resetCallState = () => {
+    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
+    }
+  }
+
+  // 设置通话超时
+  const setCallTimeout = (callback, duration = 30000) => {
+    clearCallTimeout()
+    callTimeout.value = setTimeout(() => {
+      callback()
+      clearCallTimeout()
+    }, duration)
+  }
+
+  // 发送通话信令
+  const sendCallSignalInternal = async (signal) => {
+    try {
+      logWithTime("log", "发送通话信令:", signal)
+
+      if (!userStore.currentUser?.id) {
+        throw new Error("用户未登录")
+      }
+
+      if (!signal.receiver_user_id) {
+        throw new Error("缺少接收方用户ID")
+      }
+
+      if (!signal.call_id) {
+        throw new Error("缺少通话ID")
+      }
+
+      if (!signal.call_status) {
+        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_content: JSON.stringify(signal.data || {}),
+        call_id: signal.call_id,
+        call_status: signal.call_status,
+      }
+
+      logWithTime("log", "发送通话信令请求数据:", requestData)
+
+      const response = await sendCallSignal(requestData)
+      logWithTime("log", "发送通话信令成功:", signal)
+      return response
+    } catch (error) {
+      logWithTime("error", "发送通话信令失败:", error)
+      throw error
+    }
+  }
+
+  // 初始化数据库
+  const initDB = async () => {
+    try {
+      await chatDB.init()
+      logWithTime("log", "数据库初始化成功")
+    } catch (error) {
+      logWithTime("error", "数据库初始化失败:", error)
+    }
+  }
+
+  // 加载好友列表
+  const loadFriends = async (presetUsers, currentUserId) => {
+    try {
+      getChatFriendsListApi().then((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)
+      friendList.forEach((friend) => {
+        friend.lastMessage = ""
+        friend.unreadCount = 0
+      })
+      friends.value = friendList
+    }
+  }
+
+  // 设置当前好友
+  const setCurrentFriend = (friend) => {
+    currentFriend.value = friend
+    if (friend) {
+      friend.unreadCount = 0
+    }
+  }
+
+  // 切换当前聊天好友
+  const switchFriend = async (friend, currentUserId) => {
+    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 = []
+    }
+  }
+
+  // 添加消息
+  const addMessage = async (message, currentUserId) => {
+    messages.value.push(message)
+
+    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 = "[通话]"
+
+      friend.lastMessage = lastMessage.length > 20 ? lastMessage.substring(0, 20) + "..." : lastMessage
+
+      await chatDB.updateFriendLastMessage(friend.id, currentUserId, friend.lastMessage, 0)
+    }
+
+    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) => {
+    // if (messageData.isFromHttp) {
+    //   logWithTime("log", "忽略来自HTTP的消息，避免循环")
+    //   return
+    // }
+
+    const senderId = messageData.sender_user_id
+    const receiverId = messageData.receiver_user_id
+
+    if (receiverId !== 'doctor-' + currentUserId) return
+
+    if (messageData.call_id || messageData.call_status) {
+      handleCallSignal(messageData)
+      return
+    }
+
+    const newMessage = {
+      type: getMessageType(messageData.message_type),
+      content: messageData.content,
+      time: new Date().toLocaleTimeString().slice(0, 5),
+      senderId: senderId,
+      read: false,
+      duration: messageData.duration || 0,
+      timestamp: Date.now(),
+    }
+
+    try {
+      await chatDB.saveMessage(newMessage, currentUserId, senderId)
+
+      if (currentFriend.value && senderId == currentFriend.value.id) {
+        newMessage.read = true
+        messages.value.push(newMessage)
+      } else {
+        const friend = friends.value.find((f) => f.id == senderId)
+        if (friend) {
+          friend.unreadCount = (friend.unreadCount || 0) + 1
+        }
+      }
+
+      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
+
+        await chatDB.updateFriendLastMessage(friend.id, currentUserId, lastMessage, friend.unreadCount)
+      }
+    } catch (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"
+  }
+
+  // 处理通话信令
+  const handleCallSignal = (data) => {
+    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
+    }
+  }
+
+  // 修复问题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
+      }
+
+      // 允许在connecting状态下重新处理offer（重新协商）
+      if (callStatus.value === "connecting" || callStatus.value === "failed") {
+        logWithTime("log", "连接中或失败状态，允许重新处理 Offer")
+      }
+
+      try {
+        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", "🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯")
+
+        // 修复问题3: 如果连接失败或不存在，重新创建
+        if (
+          !webrtc.peerConnection.value ||
+          webrtc.peerConnection.value.connectionState === "failed" ||
+          webrtc.peerConnection.value.connectionState === "closed"
+        ) {
+          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)
+
+        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", "🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯")
+
+        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 = "正在建立连接..."
+        }
+
+        logWithTime("log", "✅ 发送Answer成功")
+      } catch (error) {
+        logWithTime("error", "❌ 处理Offer失败:", error)
+
+        // 修复问题3: 处理失败时尝试重连而不是直接拒绝
+        if (webrtc.connectionAttempts.value < 3) {
+          logWithTime("log", "🔄 Offer处理失败，尝试重连")
+          setTimeout(() => {
+            webrtc.attemptReconnection(data.call_id, data.sender_user_id)
+          }, 2000)
+        } else {
+          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
+      }
+
+      // 允许在connecting状态下重新处理answer（重新协商）
+      if (callStatus.value === "connecting" || callStatus.value === "failed") {
+        logWithTime("log", "连接中或失败状态，允许重新处理 Answer")
+      }
+
+      try {
+        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", "🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯")
+
+        await webrtc.setRemoteAnswer(answer)
+
+        callStatus.value = "connecting"
+        callConnectionStatus.value = "正在建立连接..."
+
+        logWithTime("log", "✅ Answer处理成功，开始建立连接")
+      } catch (error) {
+        logWithTime("error", "❌ 处理Answer失败:", error)
+
+        // 修复问题3: 处理失败时尝试重连而不是直接结束
+        if (webrtc.connectionAttempts.value < 3) {
+          logWithTime("log", "🔄 Answer处理失败，尝试重连")
+          setTimeout(() => {
+            webrtc.attemptReconnection(data.call_id, currentCall.value.peerId)
+          }, 2000)
+        } else {
+          endCall("failed")
+        }
+      }
+    }
+  }
+
+  // 处理连接中状态
+  const handleCallConnecting = (data) => {
+    callConnectionStatus.value = "正在连接..."
+    if (currentCall.value?.callId === data.call_id) {
+      callStatus.value = "connecting"
+    }
+  }
+
+  // 修复问题3: 改进通话失败处理，增加重连逻辑
+  const handleCallFailed = (data) => {
+    if (
+      (currentCall.value && currentCall.value.callId === data.call_id) ||
+      (incomingCall.value && incomingCall.value.callId === data.call_id)
+    ) {
+      callError.value = "failed"
+      callConnectionStatus.value = "连接失败"
+
+      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)`
+
+        setTimeout(() => {
+          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: "[连接失败]",
+            time: new Date().toLocaleTimeString().slice(0, 5),
+            senderId: peerId,
+            read: true,
+            timestamp: Date.now(),
+            duration: 0,
+          }
+          chatDB.saveMessage(callMessage, userStore.currentUser.id, friend.id)
+
+          friend.lastMessage = "[连接失败]"
+          chatDB.updateFriendLastMessage(friend.id, userStore.currentUser.id, "[连接失败]", friend.unreadCount)
+        }
+
+        setTimeout(() => {
+          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)
+
+      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)
+
+        const callMessage = {
+          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)
+      }
+
+      return
+    }
+
+    resetCallState()
+
+    incomingCall.value = {
+      callId: data.call_id,
+      callerId: data.sender_user_id,
+      callType: data.message_type === 6 ? "video" : "audio",
+      content: data.content,
+    }
+    callStatus.value = "ringing"
+    callError.value = null
+    callConnectionStatus.value = "收到来电"
+
+    logWithTime("log", "收到来电:", incomingCall.value)
+
+    setCallTimeout(() => {
+      if (callStatus.value === "ringing" && incomingCall.value) {
+        logWithTime("log", "来电超时，自动拒绝")
+        rejectCall("no-answer")
+      }
+    }, 30000)
+  }
+
+  // 修复问题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
+      }
+
+      callStatus.value = "connecting"
+      callError.value = null
+      callConnectionStatus.value = "对方已接听，正在连接..."
+      logWithTime("log", "通话已被接受，开始交换信令")
+
+      setTimeout(() => {
+        if (callStatus.value === "connecting") {
+          callConnectionStatus.value = "对方已接听，正在建立连接..."
+        }
+      }, 1000)
+
+      try {
+        if (!webrtc.localStream.value) {
+          logWithTime("log", "获取本地媒体用于创建Offer")
+          await webrtc.getLocalMedia({
+            audio: true,
+            video: currentCall.value.callType === "video",
+          })
+        }
+
+        // 修复问题3: 如果连接失败，重新创建连接
+        if (
+          !webrtc.peerConnection.value ||
+          webrtc.peerConnection.value.connectionState === "failed" ||
+          webrtc.peerConnection.value.connectionState === "closed"
+        ) {
+          logWithTime("log", "重新创建 WebRTC 连接")
+          webrtc.createPeerConnection(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", "🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯🎯")
+
+        await callAPI.sendOffer(
+          userStore.currentUser.id,
+          currentCall.value.peerId,
+          currentCall.value.callId,
+          offer,
+          currentCall.value.callType === "video" ? 6 : 7,
+        )
+
+        logWithTime("log", "✅ 发送Offer成功")
+      } catch (error) {
+        logWithTime("error", "❌ 创建Offer失败:", error)
+
+        // 修复问题3: 创建失败时尝试重连
+        if (webrtc.connectionAttempts.value < 3) {
+          logWithTime("log", "🔄 创建Offer失败，尝试重连")
+          setTimeout(() => {
+            webrtc.attemptReconnection(currentCall.value.callId, currentCall.value.peerId)
+            // 重连后重新尝试处理accepted信令
+            setTimeout(() => {
+              handleCallAccepted(data)
+            }, 1000)
+          }, 2000)
+        } else {
+          endCall("failed")
+        }
+      }
+    }
+  }
+
+  // 处理通话拒绝
+  const handleCallRejected = (data) => {
+    if (currentCall.value && currentCall.value.callId === data.call_id) {
+      resetCallState()
+      callConnectionStatus.value = "对方已拒绝"
+      logWithTime("log", "通话已被拒绝")
+
+      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: "[对方已拒绝]",
+          time: new Date().toLocaleTimeString().slice(0, 5),
+          senderId: userStore.currentUser?.id,
+          read: true,
+          timestamp: Date.now(),
+          duration: 0,
+        }
+        chatDB.saveMessage(callMessage, userStore.currentUser.id, friend.id)
+
+        friend.lastMessage = "[对方已拒绝]"
+        chatDB.updateFriendLastMessage(friend.id, userStore.currentUser.id, "[对方已拒绝]", friend.unreadCount)
+      }
+
+      setTimeout(() => {
+        callConnectionStatus.value = ""
+      }, 5000)
+    }
+  }
+
+  // 处理通话结束
+  const handleCallEnded = (data) => {
+    if (
+      (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)
+      if (friend) {
+        const duration =
+          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",
+          content:
+            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)
+
+        friend.lastMessage = callMessage.content
+        chatDB.updateFriendLastMessage(friend.id, userStore.currentUser.id, callMessage.content, friend.unreadCount)
+      }
+
+      resetCallState()
+      callConnectionStatus.value = "通话已结束"
+      logWithTime("log", "通话已结束")
+
+      setTimeout(() => {
+        callConnectionStatus.value = ""
+      }, 5000)
+    }
+  }
+
+  // 处理ICE候选
+  const handleIceCandidate = (data) => {
+    if (
+      (currentCall.value && currentCall.value.callId === data.call_id) ||
+      (incomingCall.value && incomingCall.value.callId === data.call_id)
+    ) {
+      try {
+        const candidate = JSON.parse(data.content || data.message_content || "{}")
+        logWithTime("log", "收到ICE候选:", candidate)
+
+        webrtc.addIceCandidate(candidate)
+      } catch (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)
+      if (friend) {
+        const callMessage = {
+          type: currentCall.value.callType === "video" ? "video-call" : "audio-call",
+          content: "[未接来电]",
+          time: new Date().toLocaleTimeString().slice(0, 5),
+          senderId: userStore.currentUser?.id,
+          read: true,
+          timestamp: Date.now(),
+          duration: 0,
+        }
+        chatDB.saveMessage(callMessage, userStore.currentUser.id, friend.id)
+
+        friend.lastMessage = "[未接来电]"
+        chatDB.updateFriendLastMessage(friend.id, userStore.currentUser.id, "[未接来电]", friend.unreadCount)
+      }
+
+      resetCallState()
+      callConnectionStatus.value = "对方无人接听"
+      logWithTime("log", "对方无人接听")
+
+      setTimeout(() => {
+        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)
+      if (friend) {
+        const callMessage = {
+          type: currentCall.value.callType === "video" ? "video-call" : "audio-call",
+          content: "[对方忙线]",
+          time: new Date().toLocaleTimeString().slice(0, 5),
+          senderId: userStore.currentUser?.id,
+          read: true,
+          timestamp: Date.now(),
+          duration: 0,
+        }
+        chatDB.saveMessage(callMessage, userStore.currentUser.id, friend.id)
+
+        friend.lastMessage = "[对方忙线]"
+        chatDB.updateFriendLastMessage(friend.id, userStore.currentUser.id, "[对方忙线]", friend.unreadCount)
+      }
+
+      resetCallState()
+      callConnectionStatus.value = "对方忙线中"
+      logWithTime("log", "对方忙线中")
+
+      setTimeout(() => {
+        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
+
+    if (callId && 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
+
+        const callMessage = {
+          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)
+
+        friend.lastMessage = callMessage.content
+        chatDB.updateFriendLastMessage(friend.id, userStore.currentUser.id, friend.lastMessage, friend.unreadCount)
+      }
+
+      callStatus.value = "hangup"
+      callConnectionStatus.value = "对方已挂断"
+      logWithTime("log", "对方已挂断通话")
+
+      setTimeout(() => {
+        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
+
+    if (callId && 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
+
+        const callMessage = {
+          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)
+
+        friend.lastMessage = callMessage.content
+        chatDB.updateFriendLastMessage(friend.id, userStore.currentUser.id, friend.lastMessage, friend.unreadCount)
+      }
+
+      callStatus.value = "disconnected"
+      callConnectionStatus.value = "网络连接已断开"
+      logWithTime("log", "网络连接已断开")
+
+      setTimeout(() => {
+        resetCallState()
+      }, 3000)
+    }
+  }
+
+  // 处理对方终止呼叫
+  const handleCallTerminated = (data) => {
+    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)
+      if (friend) {
+        const callMessage = {
+          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)
+
+        friend.lastMessage = "[对方已终止呼叫]"
+        chatDB.updateFriendLastMessage(friend.id, userStore.currentUser.id, "[对方已终止呼叫]", friend.unreadCount)
+      }
+
+      resetCallState()
+      callConnectionStatus.value = "对方已终止呼叫"
+      logWithTime("log", "对方已终止呼叫")
+
+      setTimeout(() => {
+        callConnectionStatus.value = ""
+      }, 5000)
+    }
+  }
+
+  // 发起通话
+  const startCall = async (peerId, type) => {
+    if (isInCall.value) {
+      alert("您正在通话中，请先结束当前通话。")
+      return
+    }
+
+    const friend = friends.value.find((f) => f.id === peerId)
+    if (!friend) {
+      alert("好友信息无效")
+      return
+    }
+
+    if (!userStore.currentUser?.id) {
+      alert("用户未登录，无法发起通话")
+      return
+    }
+
+    resetCallState()
+
+    const callId = Date.now().toString() + Math.random().toString(36).substr(2, 9)
+
+    currentCall.value = {
+      callId: callId,
+      peerId: peerId,
+      callType: type,
+      startTime: Date.now(),
+      status: "calling",
+    }
+
+    callStatus.value = "calling"
+    callConnectionStatus.value = "等待对方接听..."
+
+    // 立即获取本地媒体并显示
+    try {
+      logWithTime("log", "发起通话，立即获取本地媒体...")
+      await webrtc.getLocalMedia({
+        audio: true,
+        video: type === "video",
+      })
+      logWithTime("log", "本地媒体获取成功，可以显示自己的摄像头")
+    } catch (error) {
+      logWithTime("warn", "获取本地媒体失败，但继续通话流程:", error)
+    }
+
+    // 设置30秒超时
+    setCallTimeout(() => {
+      if (callStatus.value === "calling") {
+        resetCallState()
+        callConnectionStatus.value = "对方无人接听"
+        logWithTime("log", "呼叫超时，对方无人接听")
+
+        callAPI.sendNoAnswer(userStore.currentUser.id, peerId, callId, type === "video" ? 6 : 7)
+
+        friend.lastMessage = "[未接来电]"
+        chatDB.updateFriendLastMessage(friend.id, userStore.currentUser.id, "[未接来电]", friend.unreadCount)
+
+        const callMessage = {
+          type: type === "video" ? "video-call" : "audio-call",
+          content: "[未接来电]",
+          time: new Date().toLocaleTimeString().slice(0, 5),
+          senderId: userStore.currentUser?.id,
+          read: true,
+          timestamp: Date.now(),
+          duration: 0,
+        }
+        chatDB.saveMessage(callMessage, userStore.currentUser.id, friend.id)
+
+        setTimeout(() => {
+          callConnectionStatus.value = ""
+        }, 5000)
+      }
+    }, 30000)
+
+    // 发送通话请求
+    try {
+      logWithTime("log", "准备发送通话邀请:", {
+        senderUserId: userStore.currentUser.id,
+        receiverUserId: peerId,
+        callId: callId,
+        callType: type === "video" ? 6 : 7,
+      })
+
+      await callAPI.invite(userStore.currentUser.id, peerId, callId, type === "video" ? 6 : 7)
+
+      logWithTime("log", "发起通话成功:", currentCall.value)
+    } catch (error) {
+      logWithTime("error", "发起通话失败:", error)
+      resetCallState()
+
+      let errorMessage = "发起通话失败"
+      if (error.response?.status === 400) {
+        errorMessage = "请求参数错误，请检查网络连接"
+      } else if (error.response?.status === 500) {
+        errorMessage = "服务器错误，请稍后重试"
+      } else if (error.message) {
+        errorMessage = error.message
+      }
+
+      alert(errorMessage)
+    }
+  }
+
+  // 接听来电
+  const acceptCall = async () => {
+    if (!incomingCall.value) {
+      logWithTime("log", "没有来电，无法接听")
+      return
+    }
+
+    if (callStatus.value === "connecting" || callStatus.value === "ongoing") {
+      logWithTime("log", "通话已在进行中，忽略重复接听")
+      return
+    }
+
+    clearCallTimeout()
+
+    logWithTime("log", "开始接听通话:", incomingCall.value)
+
+    callStatus.value = "connecting"
+    callConnectionStatus.value = "正在连接..."
+
+    try {
+      // 获取本地媒体
+      try {
+        await webrtc.getLocalMedia({
+          audio: true,
+          video: incomingCall.value.callType === "video",
+        })
+        logWithTime("log", "接听时获取本地媒体成功")
+      } catch (mediaError) {
+        logWithTime("warn", "接听时获取本地媒体失败，但继续通话流程:", mediaError)
+      }
+
+      // 发送接受信号
+      await callAPI.accept(
+        userStore.currentUser.id,
+        incomingCall.value.callerId,
+        incomingCall.value.callId,
+        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",
+      }
+
+      logWithTime("log", "接听通话成功，等待信令交换...")
+    } catch (error) {
+      logWithTime("error", "接听通话失败:", error)
+      rejectCall("failed")
+    }
+  }
+
+  // 拒绝来电
+  const rejectCall = async (reason = "rejected") => {
+    if (!incomingCall.value) {
+      logWithTime("log", "没有来电，无法拒绝")
+      return
+    }
+
+    if (callStatus.value === "connecting" || callStatus.value === "ongoing") {
+      logWithTime("log", "通话已在进行中，无法拒绝")
+      return
+    }
+
+    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,
+        )
+      }
+
+      const friend = friends.value.find((f) => f.id === incomingCall.value.callerId)
+      if (friend) {
+        const content = reason === "busy" ? "[对方忙线]" : reason === "no-answer" ? "[未接来电]" : "[已拒绝]"
+
+        const callMessage = {
+          type: incomingCall.value.callType === "video" ? "video-call" : "audio-call",
+          content: content,
+          time: new Date().toLocaleTimeString().slice(0, 5),
+          senderId: userStore.currentUser?.id,
+          read: true,
+          timestamp: Date.now(),
+          duration: 0,
+        }
+        chatDB.saveMessage(callMessage, userStore.currentUser.id, friend.id)
+
+        friend.lastMessage = content
+        chatDB.updateFriendLastMessage(friend.id, userStore.currentUser.id, content, friend.unreadCount)
+      }
+
+      resetCallState()
+      callConnectionStatus.value = reason === "busy" ? "对方忙线" : reason === "no-answer" ? "无人接听" : "已拒绝"
+
+      setTimeout(() => {
+        callConnectionStatus.value = ""
+      }, 5000)
+
+      logWithTime("log", "拒绝通话成功")
+    } catch (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
+
+    if (!callId || !peerId) {
+      resetCallState()
+      return
+    }
+
+    try {
+      await callAPI.end(userStore.currentUser.id, peerId, callId, callTypeVal === "video" ? 6 : 7)
+
+      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
+
+        let content = ""
+        if (reason === "no-answer") {
+          content = "[未接来电]"
+        } else if (duration > 0) {
+          content = `[${callTypeVal === "video" ? "视频" : "语音"}通话] ${Math.floor(duration / 60)}分${duration % 60}秒`
+        } else {
+          content = "[通话结束]"
+        }
+
+        const callMessage = {
+          type: callTypeVal === "video" ? "video-call" : "audio-call",
+          content: content,
+          time: new Date().toLocaleTimeString().slice(0, 5),
+          senderId: userStore.currentUser?.id,
+          read: true,
+          timestamp: Date.now(),
+          duration: duration,
+        }
+        chatDB.saveMessage(callMessage, userStore.currentUser.id, friend.id)
+
+        friend.lastMessage = content
+        chatDB.updateFriendLastMessage(friend.id, userStore.currentUser.id, content, friend.unreadCount)
+      }
+
+      resetCallState()
+      callConnectionStatus.value = reason === "no-answer" ? "对方无人接听" : "通话结束"
+
+      setTimeout(() => {
+        callConnectionStatus.value = ""
+      }, 5000)
+
+      logWithTime("log", "结束通话成功")
+    } catch (error) {
+      logWithTime("error", "结束通话失败:", error)
+      resetCallState()
+    }
+  }
+
+  return {
+    friends,
+    currentFriend,
+    messages,
+    connectionStatus,
+    socket,
+    currentCall,
+    incomingCall,
+    callStatus,
+    callError,
+    callConnectionStatus,
+    isConnected,
+    isInCall,
+    isCalling,
+    isRinging,
+    isConnecting,
+    isOngoingCall,
+    isDisconnected,
+    isHangup,
+    initDB,
+    loadFriends,
+    setCurrentFriend,
+    switchFriend,
+    addMessage,
+    handleIncomingMessage,
+    handleCallSignal,
+    startCall,
+    acceptCall,
+    rejectCall,
+    endCall,
+    resetCallState,
+    sendCallSignal: sendCallSignalInternal,
+    clearCallTimeout,
+  }
+})
diff --git a/apps/web-antd/src/views/business/chat/stores/theme.ts b/apps/web-antd/src/views/business/chat/stores/theme.ts
new file mode 100644
index 00000000..97d11cb7
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/stores/theme.ts
@@ -0,0 +1,38 @@
+import {defineStore} from "pinia"
+import {ref} from "vue"
+
+export const useThemeStore = defineStore("theme", () => {
+  const isDarkMode = ref(false)
+
+  const toggleTheme = () => {
+    isDarkMode.value = !isDarkMode.value
+    localStorage.setItem("chatTheme", isDarkMode.value ? "dark" : "light")
+    updateTheme()
+  }
+
+  const updateTheme = () => {
+    if (isDarkMode.value) {
+      document.documentElement.setAttribute("data-theme", "dark")
+      document.documentElement.classList.add("dark")
+    } else {
+      document.documentElement.removeAttribute("data-theme")
+      document.documentElement.classList.remove("dark")
+    }
+  }
+
+  const loadTheme = () => {
+    const savedTheme = localStorage.getItem("chatTheme")
+    if (savedTheme) {
+      isDarkMode.value = savedTheme === "dark"
+    } else {
+      isDarkMode.value = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+    }
+    updateTheme()
+  }
+
+  return {
+    isDarkMode,
+    toggleTheme,
+    loadTheme,
+  }
+})
diff --git a/apps/web-antd/src/views/business/chat/stores/user.ts b/apps/web-antd/src/views/business/chat/stores/user.ts
new file mode 100644
index 00000000..6c3e2ae7
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/stores/user.ts
@@ -0,0 +1,114 @@
+import { computed, ref } from 'vue';
+
+import { defineStore } from 'pinia';
+
+export const useUserStore = defineStore('user', () => {
+  const currentUser = ref();
+  const isLoggedIn = computed(() => !!currentUser.value);
+
+  // 预设用户数据
+  const presetUsers = ref([
+    {
+      id: '1',
+      room_id: '10001',
+      name: '张三',
+      avatar: 'avatar1',
+      color: '#4cc9f0',
+    },
+    {
+      id: '2',
+      room_id: '10002',
+      name: '李四',
+      avatar: 'avatar2',
+      color: '#ff6b6b',
+    },
+    {
+      id: '3',
+      room_id: '10003',
+      name: '王五',
+      avatar: 'avatar3',
+      color: '#6a0dad',
+    },
+    {
+      id: '4',
+      room_id: '10004',
+      name: '赵六',
+      avatar: 'avatar4',
+      color: '#20b2aa',
+    },
+    {
+      id: '5',
+      room_id: '10005',
+      name: '钱七',
+      avatar: 'avatar5',
+      color: '#ffa500',
+    },
+    {
+      id: '6',
+      room_id: '10006',
+      name: '孙八',
+      avatar: 'avatar6',
+      color: '#9acd32',
+    },
+    {
+      id: '7',
+      room_id: '10007',
+      name: '周九',
+      avatar: 'avatar7',
+      color: '#ff1493',
+    },
+    {
+      id: '8',
+      room_id: '10008',
+      name: '吴十',
+      avatar: 'avatar8',
+      color: '#4682b4',
+    },
+    {
+      id: '9',
+      room_id: '10009',
+      name: '郑十一',
+      avatar: 'avatar9',
+      color: '#c71585',
+    },
+    {
+      id: '10',
+      room_id: '100010',
+      name: '王十二',
+      avatar: 'avatar10',
+      color: '#2e8b57',
+    },
+  ]);
+
+  const login = (user: any) => {
+    currentUser.value = user;
+    localStorage.setItem('chatUser', JSON.stringify(user));
+  };
+
+  const logout = () => {
+    currentUser.value = null;
+    localStorage.removeItem('chatUser');
+    localStorage.removeItem('token');
+  };
+
+  const checkSession = () => {
+    const savedUser = localStorage.getItem('chatUser');
+    if (savedUser) {
+      currentUser.value = JSON.parse(savedUser);
+    }
+  };
+
+  const setClientId = (clientId: number | string) => {
+    currentUser.value.clientId = clientId;
+  };
+
+  return {
+    currentUser,
+    isLoggedIn,
+    presetUsers,
+    login,
+    logout,
+    checkSession,
+    setClientId,
+  };
+});
diff --git a/apps/web-antd/src/views/business/chat/utils/db.ts b/apps/web-antd/src/views/business/chat/utils/db.ts
new file mode 100644
index 00000000..78e62d22
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/utils/db.ts
@@ -0,0 +1,153 @@
+// IndexedDB 数据库工具类
+class ChatDB {
+  constructor() {
+    this.dbName = 'ChatApp';
+    this.version = 1;
+    this.db = null;
+  }
+
+  // 清空未读消息
+  async clearUnreadCount(friendId) {
+    const transaction = this.db.transaction(['friends'], 'readwrite');
+    const store = transaction.objectStore('friends');
+
+    const request = store.get(friendId);
+
+    return new Promise((resolve, reject) => {
+      request.onsuccess = () => {
+        const friend = request.result;
+        if (friend) {
+          friend.unreadCount = 0;
+          store.put(friend);
+        }
+        resolve();
+      };
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  // 获取聊天记录
+  async getChatHistory(currentUserId, friendId) {
+    const transaction = this.db.transaction(['messages'], 'readonly');
+    const store = transaction.objectStore('messages');
+    const index = store.index('chatKey');
+
+    const chatKey = `${currentUserId}_${friendId}`;
+    const request = index.getAll(chatKey);
+
+    return new Promise((resolve, reject) => {
+      request.onsuccess = () => resolve(request.result || []);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  // 获取好友列表
+  async getFriends(currentUserId) {
+    const transaction = this.db.transaction(['friends'], 'readonly');
+    const store = transaction.objectStore('friends');
+    const index = store.index('userId');
+
+    const request = index.getAll(currentUserId);
+
+    return new Promise((resolve, reject) => {
+      request.onsuccess = () => resolve(request.result || []);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  async init() {
+    return new Promise((resolve, reject) => {
+      const request = indexedDB.open(this.dbName, this.version);
+
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => {
+        this.db = request.result;
+        resolve(this.db);
+      };
+
+      request.onupgradeneeded = (event) => {
+        const db = event.target.result;
+
+        // 创建聊天记录表
+        if (!db.objectStoreNames.contains('messages')) {
+          const messageStore = db.createObjectStore('messages', {
+            keyPath: 'id',
+            autoIncrement: true,
+          });
+          messageStore.createIndex('chatKey', 'chatKey', { unique: false });
+          messageStore.createIndex('timestamp', 'timestamp', { unique: false });
+        }
+
+        // 创建用户表
+        if (!db.objectStoreNames.contains('users')) {
+          const userStore = db.createObjectStore('users', { keyPath: 'id' });
+        }
+
+        // 创建好友表
+        if (!db.objectStoreNames.contains('friends')) {
+          const friendStore = db.createObjectStore('friends', {
+            keyPath: 'id',
+          });
+          friendStore.createIndex('userId', 'userId', { unique: false });
+        }
+      };
+    });
+  }
+
+  // 保存好友信息
+  async saveFriend(friend, currentUserId) {
+    const transaction = this.db.transaction(['friends'], 'readwrite');
+    const store = transaction.objectStore('friends');
+
+    const friendData = {
+      ...friend,
+      userId: currentUserId,
+      updatedAt: Date.now(),
+    };
+
+    return store.put(friendData);
+  }
+
+  // 保存消息
+  async saveMessage(message, currentUserId, friendId) {
+    const transaction = this.db.transaction(['messages'], 'readwrite');
+    const store = transaction.objectStore('messages');
+
+    const messageData = {
+      ...message,
+      chatKey: `${currentUserId}_${friendId}`,
+      timestamp: Date.now(),
+    };
+
+    return store.add(messageData);
+  }
+
+  // 更新好友最后消息
+  async updateFriendLastMessage(
+    friendId,
+    currentUserId,
+    lastMessage,
+    unreadCount = 0,
+  ) {
+    const transaction = this.db.transaction(['friends'], 'readwrite');
+    const store = transaction.objectStore('friends');
+
+    const request = store.get(friendId);
+
+    return new Promise((resolve, reject) => {
+      request.onsuccess = () => {
+        const friend = request.result;
+        if (friend) {
+          friend.lastMessage = lastMessage;
+          friend.unreadCount = unreadCount;
+          friend.updatedAt = Date.now();
+          store.put(friend);
+        }
+        resolve();
+      };
+      request.onerror = () => reject(request.error);
+    });
+  }
+}
+
+export const chatDB = new ChatDB();
diff --git a/apps/web-antd/src/views/business/chat/utils/request.ts b/apps/web-antd/src/views/business/chat/utils/request.ts
new file mode 100644
index 00000000..5270d8d4
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/utils/request.ts
@@ -0,0 +1,360 @@
+import { message } from 'ant-design-vue';
+import axios from 'axios';
+
+// 创建 Axios 实例
+const service = axios.create({
+  baseURL: '/im-api/',
+  timeout: 15_000,
+});
+
+// 请求拦截器
+service.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem('token');
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => {
+    console.error('Request error:', error);
+    return Promise.reject(error);
+  },
+);
+
+// 响应拦截器
+service.interceptors.response.use(
+  (response) => {
+    const { code, result, message: msg } = response.data;
+    if (code === 0) {
+      return result;
+    } else {
+      if (code === 401) {
+        message.error(msg);
+        localStorage.removeItem('token');
+        localStorage.removeItem('chatUser');
+        window.location.href = '/login';
+        return Promise.reject(new Error(msg));
+      }
+      message.error(msg);
+      return Promise.reject(new Error(msg));
+    }
+  },
+  (error) => {
+    console.error('Response error:', error);
+
+    // 详细的错误处理
+    if (error.code === 'ECONNABORTED') {
+      console.log('请求超时，请检查网络连接');
+    } else if (error.response?.status === 0 || error.message.includes('CORS')) {
+      console.log('CORS错误检测到，尝试备用方案...');
+      handleCORSError(error.config);
+    } else if (error.response?.status >= 400 && error.response?.status < 500) {
+      console.log('客户端错误:', error.response.status, error.response.data);
+    } else if (error.response?.status >= 500) {
+      console.log('服务器错误:', error.response.status);
+    } else {
+      console.log('网络错误:', error.message);
+    }
+
+    message.error('网络请求失败');
+    return Promise.reject(error);
+  },
+);
+
+// CORS错误的备用处理方案
+const handleCORSError = (config) => {
+  console.log('执行CORS错误备用方案...');
+  const apiUrl = config.url.replace('/api', '');
+
+  return fetch(apiUrl, {
+    method: config.method.toUpperCase(),
+    headers: {
+      'Content-Type': 'application/json',
+      ...config.headers,
+    },
+    mode: 'cors',
+    body: config.data ? JSON.stringify(config.data) : undefined,
+  })
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      return response.json();
+    })
+    .catch((error) => {
+      console.error('备用方案也失败:', error);
+      throw error;
+    });
+};
+
+// 封装请求方法
+export const get = (url, params = {}) => {
+  return service.get(url, { params });
+};
+
+export const post = (url, data = {}) => {
+  return service.post(url, data);
+};
+
+export const upload = (url, file) => {
+  const formData = new FormData();
+  formData.append('file', file);
+  return service.post(url, formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+  });
+};
+
+// 发送普通消息API
+export const sendMessage = (data) => {
+  const apiUrl = '/im-api/send-to-user';
+
+  // 消息类型映射 - 根据用户提供的完整映射更新
+  const messageTypeMap = {
+    text: 0,
+    image: 1,
+    audio: 2,
+    video: 3,
+    prescription: 4,
+    'medical-record': 5,
+    'video-call': 6,
+    'audio-call': 7,
+    file: 8,
+  };
+
+  const requestData = {
+    room_id: data.roomId,
+    sender_user_id: 'doctor-' + data.senderId.toString(),
+    receiver_user_id: data.receiverId.toString(),
+    message_type: messageTypeMap[data.type] || 0,
+    message_content: data.content || '',
+    // 添加来源标记
+    isFromHttp: true,
+  };
+
+  // 如果包含通话信令，添加call_id和call_status
+  if (data.callId) {
+    requestData.call_id = data.callId;
+  }
+  if (data.callStatus) {
+    requestData.call_status = data.callStatus;
+  }
+
+  return axios
+    .post(apiUrl, requestData, {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      timeout: 15_000,
+      withCredentials: false,
+    })
+    .then((response) => {
+      console.log('消息发送成功:', response.data);
+      return response.data;
+    })
+    .catch((error) => {
+      console.error('消息发送失败:', error);
+      throw error;
+    });
+};
+
+// 专门的通话信令发送方法
+export const sendCallSignal = (signalData) => {
+  const apiUrl = '/api/send-to-user';
+
+  // 验证必要参数
+  if (!signalData.sender_user_id) {
+    throw new Error('缺少发送方用户ID');
+  }
+  if (!signalData.receiver_user_id) {
+    throw new Error('缺少接收方用户ID');
+  }
+  if (!signalData.call_id) {
+    throw new Error('缺少通话ID');
+  }
+  if (!signalData.call_status) {
+    throw new Error('缺少通话状态');
+  }
+
+  // 构建通话信令请求数据
+  const requestData = {
+    sender_user_id: signalData.sender_user_id,
+    receiver_user_id: signalData.receiver_user_id,
+    message_type: signalData.message_type || 6, // 默认视频通话
+    message_content:
+      signalData.message_content || JSON.stringify(signalData.data || {}),
+    call_id: signalData.call_id,
+    call_status: signalData.call_status,
+    // 添加来源标记
+    isFromHttp: true,
+  };
+
+  console.log('发送通话信令到API:', apiUrl, requestData);
+
+  return axios
+    .post(apiUrl, requestData, {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      timeout: 15_000,
+      withCredentials: false,
+    })
+    .then((response) => {
+      console.log('通话信令发送成功:', response.data);
+      return response.data;
+    })
+    .catch((error) => {
+      console.error('通话信令发送失败:', error);
+
+      // 提供更详细的错误信息
+      if (error.response) {
+        console.error('响应错误:', error.response.data);
+        console.error('响应状态:', error.response.status);
+        console.error('响应头:', error.response.headers);
+      } else if (error.request) {
+        console.error('请求错误:', error.request);
+      } else {
+        console.error('配置错误:', error.message);
+      }
+
+      throw error;
+    });
+};
+
+// 通话相关的便捷方法
+export const callAPI = {
+  // 发起通话邀请
+  invite: (senderUserId, receiverUserId, callId, callType = 6) => {
+    return sendCallSignal({
+      sender_user_id: senderUserId,
+      receiver_user_id: receiverUserId,
+      call_id: callId,
+      call_status: 'invite',
+      message_type: callType, // 6=视频, 7=语音
+    });
+  },
+
+  // 接受通话
+  accept: (senderUserId, receiverUserId, callId, callType = 6) => {
+    return sendCallSignal({
+      sender_user_id: senderUserId,
+      receiver_user_id: receiverUserId,
+      call_id: callId,
+      call_status: 'accepted',
+      message_type: callType,
+    });
+  },
+
+  // 拒绝通话
+  reject: (senderUserId, receiverUserId, callId, callType = 6) => {
+    return sendCallSignal({
+      sender_user_id: senderUserId,
+      receiver_user_id: receiverUserId,
+      call_id: callId,
+      call_status: 'rejected',
+      message_type: callType,
+    });
+  },
+
+  // 结束通话
+  end: (senderUserId, receiverUserId, callId, callType = 6) => {
+    return sendCallSignal({
+      sender_user_id: senderUserId,
+      receiver_user_id: receiverUserId,
+      call_id: callId,
+      call_status: 'ended',
+      message_type: callType,
+    });
+  },
+
+  // 发送WebRTC Offer
+  sendOffer: (
+    senderUserId,
+    receiverUserId,
+    callId,
+    offerData,
+    callType = 6,
+  ) => {
+    return sendCallSignal({
+      sender_user_id: senderUserId,
+      receiver_user_id: receiverUserId,
+      call_id: callId,
+      call_status: 'offer',
+      message_type: callType,
+      data: offerData,
+    });
+  },
+
+  // 发送WebRTC Answer
+  sendAnswer: (
+    senderUserId,
+    receiverUserId,
+    callId,
+    answerData,
+    callType = 6,
+  ) => {
+    return sendCallSignal({
+      sender_user_id: senderUserId,
+      receiver_user_id: receiverUserId,
+      call_id: callId,
+      call_status: 'answer',
+      message_type: callType,
+      data: answerData,
+    });
+  },
+
+  // 发送ICE候选
+  sendCandidate: (
+    senderUserId,
+    receiverUserId,
+    callId,
+    candidateData,
+    callType = 6,
+  ) => {
+    return sendCallSignal({
+      sender_user_id: senderUserId,
+      receiver_user_id: receiverUserId,
+      call_id: callId,
+      call_status: 'candidate',
+      message_type: callType,
+      data: candidateData,
+    });
+  },
+
+  // 发送忙线状态
+  sendBusy: (senderUserId, receiverUserId, callId, callType = 6) => {
+    return sendCallSignal({
+      sender_user_id: senderUserId,
+      receiver_user_id: receiverUserId,
+      call_id: callId,
+      call_status: 'busy',
+      message_type: callType,
+    });
+  },
+
+  // 发送无人接听
+  sendNoAnswer: (senderUserId, receiverUserId, callId, callType = 6) => {
+    return sendCallSignal({
+      sender_user_id: senderUserId,
+      receiver_user_id: receiverUserId,
+      call_id: callId,
+      call_status: 'no-answer',
+      message_type: callType,
+    });
+  },
+
+  // 发送通话失败
+  sendFailed: (senderUserId, receiverUserId, callId, callType = 6) => {
+    return sendCallSignal({
+      sender_user_id: senderUserId,
+      receiver_user_id: receiverUserId,
+      call_id: callId,
+      call_status: 'failed',
+      message_type: callType,
+    });
+  },
+};
+
+export default service;
diff --git a/apps/web-antd/src/views/doctor/doctor/components/modal.vue b/apps/web-antd/src/views/doctor/doctor/components/modal.vue
index 24a3205e..5be64cbc 100644
--- a/apps/web-antd/src/views/doctor/doctor/components/modal.vue
+++ b/apps/web-antd/src/views/doctor/doctor/components/modal.vue
@@ -51,42 +51,42 @@ const [Modal, modalApi] = useVbenModal({
       console.log(values, 'ssssssssssss');
       if (values) {
         isUpdate.value = update;
-        // getPharmacistEditInfoApi(values.id).then((res) => {
-        //   formApi.setValues(res);
-        // });
-        // formApi.setValues(values);
+        getPharmacistEditInfoApi(values.id).then((res) => {
+          formApi.setValues(res);
+        });
+        formApi.setValues(values);
 
-        const img = 'https://img2.baidu.com/it/u=3046024791,55863177&fm=253&fmt=auto&app=138&f=JPEG';
-        formApi.setValues({
-          name: '测试药师',
-          mobile: '15110000000',
-          idcard: '134111000022225555',
-          type: 1,
-          sign_type: 2,
-          qualification: img,
-          practicing: img,
-          title: img,
-          card_up: img,
-          card_down: img,
-          sign_image: 'http://demo-1.nailaoyun.cn/p/image/qm1.png',
-          avatar: img,
-        });
+        // const img = 'https://img2.baidu.com/it/u=3046024791,55863177&fm=253&fmt=auto&app=138&f=JPEG';
+        // formApi.setValues({
+        //   name: '测试药师',
+        //   mobile: '15110000000',
+        //   idcard: '134111000022225555',
+        //   type: 1,
+        //   sign_type: 2,
+        //   qualification: img,
+        //   practicing: img,
+        //   title: img,
+        //   card_up: img,
+        //   card_down: img,
+        //   sign_image: 'http://demo-1.nailaoyun.cn/p/image/qm1.png',
+        //   avatar: img,
+        // });
       } else {
-        const img = 'https://img2.baidu.com/it/u=3046024791,55863177&fm=253&fmt=auto&app=138&f=JPEG';
-        formApi.setValues({
-          name: '测试药师',
-          mobile: '15110000000',
-          idcard: '134111000022225555',
-          type: 1,
-          sign_type: 2,
-          qualification: img,
-          practicing: img,
-          title: img,
-          card_up: img,
-          card_down: img,
-          sign_image: 'http://demo-1.nailaoyun.cn/p/image/qm1.png',
-          avatar: img,
-        });
+        // const img = 'https://img2.baidu.com/it/u=3046024791,55863177&fm=253&fmt=auto&app=138&f=JPEG';
+        // formApi.setValues({
+        //   name: '测试药师',
+        //   mobile: '15110000000',
+        //   idcard: '134111000022225555',
+        //   type: 1,
+        //   sign_type: 2,
+        //   qualification: img,
+        //   practicing: img,
+        //   title: img,
+        //   card_up: img,
+        //   card_down: img,
+        //   sign_image: 'http://demo-1.nailaoyun.cn/p/image/qm1.png',
+        //   avatar: img,
+        // });
       }
 
     }
diff --git a/apps/web-antd/vite.config.mts b/apps/web-antd/vite.config.mts
index c2b9eb12..dbd8ac8c 100644
--- a/apps/web-antd/vite.config.mts
+++ b/apps/web-antd/vite.config.mts
@@ -15,6 +15,15 @@ export default defineConfig(async () => {
             // target: 'http://api.xiaokang88.com/api/admin/',
             ws: true,
           },
+          '/im-api': {
+            changeOrigin: true,
+            rewrite: (path) => path.replace(/^\/im-api/, ''),
+            // mock代理目标地址
+            // target: 'https://api.xiaokang88.com/api/admin/',
+            target: 'http://localhost:12080/api/',
+            // target: 'http://api.xiaokang88.com/api/admin/',
+            ws: true,
+          },
         },
       },
     },
diff --git a/package.json b/package.json
index 0299297a..3696b0cf 100644
--- a/package.json
+++ b/package.json
@@ -111,7 +111,9 @@
     ]
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.7.2",
     "@vueup/vue-quill": "^1.2.0",
+    "axios": "^1.10.0",
     "html2canvas": "^1.4.1",
     "js-base64": "^3.7.7",
     "lodash-es": "^4.17.21",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d66251da..7aed9145 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,51 +12,387 @@ catalogs:
     '@changesets/cli':
       specifier: ^2.27.11
       version: 2.27.11
+    '@changesets/git':
+      specifier: ^3.0.2
+      version: 3.0.2
+    '@clack/prompts':
+      specifier: ^0.9.0
+      version: 0.9.0
+    '@commitlint/cli':
+      specifier: ^19.6.1
+      version: 19.6.1
+    '@commitlint/config-conventional':
+      specifier: ^19.6.0
+      version: 19.6.0
+    '@eslint/js':
+      specifier: ^9.17.0
+      version: 9.17.0
+    '@iconify/json':
+      specifier: ^2.2.286
+      version: 2.2.286
+    '@iconify/tailwind':
+      specifier: ^1.2.0
+      version: 1.2.0
+    '@iconify/vue':
+      specifier: ^4.2.0
+      version: 4.2.0
+    '@intlify/core-base':
+      specifier: ^10.0.5
+      version: 10.0.5
+    '@intlify/unplugin-vue-i18n':
+      specifier: ^6.0.1
+      version: 6.0.1
+    '@jspm/generator':
+      specifier: ^2.4.1
+      version: 2.4.1
+    '@manypkg/get-packages':
+      specifier: ^2.2.2
+      version: 2.2.2
     '@playwright/test':
       specifier: ^1.49.1
       version: 1.49.1
+    '@pnpm/workspace.read-manifest':
+      specifier: ^1000.0.1
+      version: 1000.0.1
+    '@stylistic/stylelint-plugin':
+      specifier: ^3.1.1
+      version: 3.1.1
+    '@tailwindcss/nesting':
+      specifier: 0.0.0-insiders.565cd3e
+      version: 0.0.0-insiders.565cd3e
+    '@tailwindcss/typography':
+      specifier: ^0.5.15
+      version: 0.5.15
+    '@tanstack/vue-query':
+      specifier: ^5.62.8
+      version: 5.62.8
+    '@tanstack/vue-store':
+      specifier: ^0.6.0
+      version: 0.6.0
+    '@types/archiver':
+      specifier: ^6.0.3
+      version: 6.0.3
+    '@types/eslint':
+      specifier: ^9.6.1
+      version: 9.6.1
+    '@types/html-minifier-terser':
+      specifier: ^7.0.2
+      version: 7.0.2
+    '@types/lodash.clonedeep':
+      specifier: ^4.5.9
+      version: 4.5.9
+    '@types/lodash.get':
+      specifier: ^4.4.9
+      version: 4.4.9
+    '@types/lodash.isequal':
+      specifier: ^4.5.8
+      version: 4.5.8
     '@types/node':
       specifier: ^22.10.2
       version: 22.10.2
+    '@types/nprogress':
+      specifier: ^0.2.3
+      version: 0.2.3
+    '@types/postcss-import':
+      specifier: ^14.0.3
+      version: 14.0.3
+    '@types/qrcode':
+      specifier: ^1.5.5
+      version: 1.5.5
+    '@types/sortablejs':
+      specifier: ^1.15.8
+      version: 1.15.8
+    '@typescript-eslint/eslint-plugin':
+      specifier: ^8.18.1
+      version: 8.18.1
+    '@typescript-eslint/parser':
+      specifier: ^8.18.1
+      version: 8.18.1
+    '@vee-validate/zod':
+      specifier: ^4.14.7
+      version: 4.14.7
     '@vitejs/plugin-vue':
       specifier: ^5.2.1
       version: 5.2.1
     '@vitejs/plugin-vue-jsx':
       specifier: ^4.1.1
       version: 4.1.1
+    '@vue/shared':
+      specifier: ^3.5.13
+      version: 3.5.13
     '@vue/test-utils':
       specifier: ^2.4.6
       version: 2.4.6
+    '@vueuse/core':
+      specifier: ^12.0.0
+      version: 12.0.0
+    '@vueuse/integrations':
+      specifier: ^12.0.0
+      version: 12.0.0
+    ant-design-vue:
+      specifier: ^4.2.6
+      version: 4.2.6
+    archiver:
+      specifier: ^7.0.1
+      version: 7.0.1
     autoprefixer:
       specifier: ^10.4.20
       version: 10.4.20
+    axios:
+      specifier: ^1.7.9
+      version: 1.7.9
+    axios-mock-adapter:
+      specifier: ^2.1.0
+      version: 2.1.0
+    cac:
+      specifier: ^6.7.14
+      version: 6.7.14
+    chalk:
+      specifier: ^5.4.0
+      version: 5.4.0
+    cheerio:
+      specifier: 1.0.0
+      version: 1.0.0
+    circular-dependency-scanner:
+      specifier: ^2.3.0
+      version: 2.3.0
+    class-variance-authority:
+      specifier: ^0.7.1
+      version: 0.7.1
+    commitlint-plugin-function-rules:
+      specifier: ^4.0.1
+      version: 4.0.1
+    consola:
+      specifier: ^3.3.0
+      version: 3.3.0
     cross-env:
       specifier: ^7.0.3
       version: 7.0.3
     cspell:
       specifier: ^8.17.1
       version: 8.17.1
+    cssnano:
+      specifier: ^7.0.6
+      version: 7.0.6
+    cz-git:
+      specifier: ^1.11.0
+      version: 1.11.0
+    czg:
+      specifier: ^1.11.0
+      version: 1.11.0
+    dayjs:
+      specifier: ^1.11.13
+      version: 1.11.13
+    defu:
+      specifier: ^6.1.4
+      version: 6.1.4
+    depcheck:
+      specifier: ^1.4.7
+      version: 1.4.7
+    dotenv:
+      specifier: ^16.4.7
+      version: 16.4.7
+    echarts:
+      specifier: ^5.5.1
+      version: 5.5.1
+    eslint:
+      specifier: ^9.17.0
+      version: 9.17.0
+    eslint-config-turbo:
+      specifier: ^2.3.3
+      version: 2.3.3
+    eslint-plugin-command:
+      specifier: ^0.2.7
+      version: 0.2.7
+    eslint-plugin-eslint-comments:
+      specifier: ^3.2.0
+      version: 3.2.0
+    eslint-plugin-import-x:
+      specifier: ^4.6.1
+      version: 4.6.1
+    eslint-plugin-jsdoc:
+      specifier: ^50.6.1
+      version: 50.6.1
+    eslint-plugin-jsonc:
+      specifier: ^2.18.2
+      version: 2.18.2
+    eslint-plugin-n:
+      specifier: ^17.15.1
+      version: 17.15.1
+    eslint-plugin-no-only-tests:
+      specifier: ^3.3.0
+      version: 3.3.0
+    eslint-plugin-perfectionist:
+      specifier: ^3.9.1
+      version: 3.9.1
+    eslint-plugin-prettier:
+      specifier: ^5.2.1
+      version: 5.2.1
+    eslint-plugin-regexp:
+      specifier: ^2.7.0
+      version: 2.7.0
+    eslint-plugin-unicorn:
+      specifier: ^56.0.1
+      version: 56.0.1
+    eslint-plugin-unused-imports:
+      specifier: ^4.1.4
+      version: 4.1.4
+    eslint-plugin-vitest:
+      specifier: ^0.5.4
+      version: 0.5.4
+    eslint-plugin-vue:
+      specifier: ^9.32.0
+      version: 9.32.0
+    execa:
+      specifier: ^9.5.2
+      version: 9.5.2
+    find-up:
+      specifier: ^7.0.0
+      version: 7.0.0
+    get-port:
+      specifier: ^7.1.0
+      version: 7.1.0
+    globals:
+      specifier: ^15.14.0
+      version: 15.14.0
     happy-dom:
       specifier: ^15.11.7
       version: 15.11.7
+    html-minifier-terser:
+      specifier: ^7.2.0
+      version: 7.2.0
     husky:
       specifier: ^9.1.7
       version: 9.1.7
     is-ci:
       specifier: ^4.1.0
       version: 4.1.0
+    jsonc-eslint-parser:
+      specifier: ^2.4.0
+      version: 2.4.0
     lint-staged:
       specifier: ^15.2.11
       version: 15.2.11
+    lodash.clonedeep:
+      specifier: ^4.5.0
+      version: 4.5.0
+    lodash.get:
+      specifier: ^4.4.2
+      version: 4.4.2
+    lodash.isequal:
+      specifier: ^4.5.0
+      version: 4.5.0
+    lucide-vue-next:
+      specifier: ^0.469.0
+      version: 0.469.0
+    nitropack:
+      specifier: ^2.10.4
+      version: 2.10.4
+    nprogress:
+      specifier: ^0.2.0
+      version: 0.2.0
+    ora:
+      specifier: ^8.1.1
+      version: 8.1.1
+    pinia-plugin-persistedstate:
+      specifier: ^4.2.0
+      version: 4.2.0
+    pkg-types:
+      specifier: ^1.2.1
+      version: 1.2.1
     playwright:
       specifier: ^1.49.1
       version: 1.49.1
+    postcss:
+      specifier: ^8.4.49
+      version: 8.4.49
+    postcss-antd-fixes:
+      specifier: ^0.2.0
+      version: 0.2.0
+    postcss-html:
+      specifier: ^1.7.0
+      version: 1.7.0
+    postcss-import:
+      specifier: ^16.1.0
+      version: 16.1.0
+    postcss-preset-env:
+      specifier: ^10.1.2
+      version: 10.1.2
+    postcss-scss:
+      specifier: ^4.0.9
+      version: 4.0.9
+    prettier:
+      specifier: ^3.4.2
+      version: 3.4.2
+    prettier-plugin-tailwindcss:
+      specifier: ^0.6.9
+      version: 0.6.9
+    publint:
+      specifier: ^0.2.12
+      version: 0.2.12
+    qrcode:
+      specifier: ^1.5.4
+      version: 1.5.4
+    radix-vue:
+      specifier: ^1.9.11
+      version: 1.9.11
+    resolve.exports:
+      specifier: ^2.0.3
+      version: 2.0.3
     rimraf:
       specifier: ^6.0.1
       version: 6.0.1
+    rollup:
+      specifier: ^4.28.1
+      version: 4.28.1
+    rollup-plugin-visualizer:
+      specifier: ^5.12.0
+      version: 5.12.0
+    sass:
+      specifier: 1.80.6
+      version: 1.80.6
+    sortablejs:
+      specifier: ^1.15.6
+      version: 1.15.6
+    stylelint:
+      specifier: ^16.12.0
+      version: 16.12.0
+    stylelint-config-recess-order:
+      specifier: ^5.1.1
+      version: 5.1.1
+    stylelint-config-recommended:
+      specifier: ^14.0.1
+      version: 14.0.1
+    stylelint-config-recommended-scss:
+      specifier: ^14.1.0
+      version: 14.1.0
+    stylelint-config-recommended-vue:
+      specifier: ^1.5.0
+      version: 1.5.0
+    stylelint-config-standard:
+      specifier: ^36.0.1
+      version: 36.0.1
+    stylelint-order:
+      specifier: ^6.0.4
+      version: 6.0.4
+    stylelint-prettier:
+      specifier: ^5.0.2
+      version: 5.0.2
+    stylelint-scss:
+      specifier: ^6.10.0
+      version: 6.10.0
+    tailwind-merge:
+      specifier: ^2.5.5
+      version: 2.5.5
     tailwindcss:
       specifier: ^3.4.17
       version: 3.4.17
+    tailwindcss-animate:
+      specifier: ^1.0.7
+      version: 1.0.7
+    theme-colors:
+      specifier: ^0.1.0
+      version: 0.1.0
     turbo:
       specifier: ^2.3.3
       version: 2.3.3
@@ -66,15 +402,60 @@ catalogs:
     unbuild:
       specifier: ^3.0.1
       version: 3.0.1
+    vee-validate:
+      specifier: ^4.14.7
+      version: 4.14.7
     vite:
       specifier: ^6.0.5
       version: 6.0.5
+    vite-plugin-compression:
+      specifier: ^0.5.1
+      version: 0.5.1
+    vite-plugin-dts:
+      specifier: 4.2.1
+      version: 4.2.1
+    vite-plugin-html:
+      specifier: ^3.2.2
+      version: 3.2.2
+    vite-plugin-lazy-import:
+      specifier: ^1.0.7
+      version: 1.0.7
+    vite-plugin-pwa:
+      specifier: ^0.21.1
+      version: 0.21.1
+    vite-plugin-vue-devtools:
+      specifier: ^7.6.8
+      version: 7.6.8
     vitest:
       specifier: ^2.1.8
       version: 2.1.8
+    vue-eslint-parser:
+      specifier: ^9.4.3
+      version: 9.4.3
+    vue-i18n:
+      specifier: ^10.0.5
+      version: 10.0.5
+    vue-router:
+      specifier: ^4.5.0
+      version: 4.5.0
     vue-tsc:
       specifier: ^2.1.10
       version: 2.1.10
+    vxe-pc-ui:
+      specifier: ^4.3.40
+      version: 4.3.40
+    vxe-table:
+      specifier: ^4.9.33
+      version: 4.9.33
+    watermark-js-plus:
+      specifier: ^1.5.7
+      version: 1.5.7
+    zod:
+      specifier: ^3.24.1
+      version: 3.24.1
+    zod-defaults:
+      specifier: ^0.1.3
+      version: 0.1.3
 
 overrides:
   '@ast-grep/napi': ^0.31.1
@@ -88,9 +469,15 @@ importers:
 
   .:
     dependencies:
+      '@fortawesome/fontawesome-free':
+        specifier: ^6.7.2
+        version: 6.7.2
       '@vueup/vue-quill':
         specifier: ^1.2.0
         version: 1.2.0(vue@3.5.13(typescript@5.6.3))
+      axios:
+        specifier: ^1.10.0
+        version: 1.10.0
       html2canvas:
         specifier: ^1.4.1
         version: 1.4.1
@@ -196,10 +583,10 @@ importers:
         version: 3.0.1(typescript@5.6.3)(vue-tsc@2.1.10(typescript@5.6.3))(vue@3.5.13(typescript@5.6.3))
       vite:
         specifier: 'catalog:'
-        version: 6.0.5(@types/node@22.10.2)(jiti@2.4.2)(less@4.2.1)(terser@5.37.0)(yaml@2.6.1)
+        version: 6.0.5(@types/node@22.10.2)(jiti@2.4.2)(less@4.2.1)(sass@1.80.6)(terser@5.37.0)(yaml@2.6.1)
       vitest:
         specifier: 'catalog:'
-        version: 2.1.8(@types/node@22.10.2)(happy-dom@15.11.7)(less@4.2.1)(terser@5.37.0)
+        version: 2.1.8(@types/node@22.10.2)(happy-dom@15.11.7)(less@4.2.1)(sass@1.80.6)(terser@5.37.0)
       vue:
         specifier: ^3.5.13
         version: 3.5.13(typescript@5.6.3)
@@ -930,7 +1317,7 @@ importers:
         version: 12.0.0(typescript@5.7.2)
       '@vueuse/integrations':
         specifier: 'catalog:'
-        version: 12.0.0(async-validator@4.2.5)(axios@1.7.9)(change-case@5.4.4)(focus-trap@7.6.2)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.6)(typescript@5.7.2)
+        version: 12.0.0(async-validator@4.2.5)(axios@1.10.0)(change-case@5.4.4)(focus-trap@7.6.2)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.6)(typescript@5.7.2)
       qrcode:
         specifier: 'catalog:'
         version: 1.5.4
@@ -2804,6 +3191,10 @@ packages:
   '@floating-ui/vue@1.1.5':
     resolution: {integrity: sha512-ynL1p5Z+woPVSwgMGqeDrx6HrJfGIDzFyESFkyqJKilGW1+h/8yVY29Khn0LaU6wHBRwZ13ntG6reiHWK6jyzw==}
 
+  '@fortawesome/fontawesome-free@6.7.2':
+    resolution: {integrity: sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA==}
+    engines: {node: '>=6'}
+
   '@gar/promisify@1.1.3':
     resolution: {integrity: sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==}
 
@@ -2867,20 +3258,20 @@ packages:
     resolution: {integrity: sha512-6GT1BJ852gZ0gItNZN2krX5QAmea+cmdjMvsWohArAZ3GmHdnNANEcF9JjPXAMRtQ6Ux5E269ymamg/+WU6tQA==}
     engines: {node: '>= 16'}
 
-  '@intlify/message-compiler@12.0.0-alpha.2':
-    resolution: {integrity: sha512-PD9C+oQbb7BF52hec0+vLnScaFkvnfX+R7zSbODYuRo/E2niAtGmHd0wPvEMsDhf9Z9b8f/qyDsVeZnD/ya9Ug==}
+  '@intlify/message-compiler@12.0.0-alpha.3':
+    resolution: {integrity: sha512-mDDTN3gfYOHhBnpnlby19UHyvMaOnzdlpsIrxUfs44R/vCATfn8pMOkE8PXD2t410xkocEj3FpDcC9XC/0v4Dg==}
     engines: {node: '>= 16'}
 
   '@intlify/shared@10.0.5':
     resolution: {integrity: sha512-bmsP4L2HqBF6i6uaMqJMcFBONVjKt+siGluRq4Ca4C0q7W2eMaVZr8iCgF9dKbcVXutftkC7D6z2SaSMmLiDyA==}
     engines: {node: '>= 16'}
 
-  '@intlify/shared@11.1.3':
-    resolution: {integrity: sha512-pTFBgqa/99JRA2H1qfyqv97MKWJrYngXBA/I0elZcYxvJgcCw3mApAoPW3mJ7vx3j+Ti0FyKUFZ4hWxdjKaxvA==}
+  '@intlify/shared@11.1.10':
+    resolution: {integrity: sha512-6ZW/f3Zzjxfa1Wh0tYQI5pLKUtU+SY7l70pEG+0yd0zjcsYcK0EBt6Fz30Dy0tZhEqemziQQy2aNU3GJzyrMUA==}
     engines: {node: '>= 16'}
 
-  '@intlify/shared@12.0.0-alpha.2':
-    resolution: {integrity: sha512-P2DULVX9nz3y8zKNqLw9Es1aAgQ1JGC+kgpx5q7yLmrnAKkPR5MybQWoEhxanefNJgUY5ehsgo+GKif59SrncA==}
+  '@intlify/shared@12.0.0-alpha.3':
+    resolution: {integrity: sha512-ryaNYBvxQjyJUmVuBBg+HHUsmGnfxcEUPR0NCeG4/K9N2qtyFE35C80S15IN6iYFE2MGWLN7HfOSyg0MXZIc9w==}
     engines: {node: '>= 16'}
 
   '@intlify/unplugin-vue-i18n@6.0.1':
@@ -4137,6 +4528,9 @@ packages:
     peerDependencies:
       axios: '>= 0.17.0'
 
+  axios@1.10.0:
+    resolution: {integrity: sha512-/1xYAC4MP/HEG+3duIhFr4ZQXR4sQXOIe+o6sdqzeykGLx6Upp/1p8MHqhINOvGeP7xyNHe7tsiJByc4SSVUxw==}
+
   axios@1.7.9:
     resolution: {integrity: sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==}
 
@@ -9505,7 +9899,7 @@ snapshots:
       '@babel/traverse': 7.26.4
       '@babel/types': 7.26.3
       convert-source-map: 2.0.0
-      debug: 4.4.0
+      debug: 4.4.0(supports-color@9.4.0)
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
@@ -10166,7 +10560,7 @@ snapshots:
       '@babel/parser': 7.26.3
       '@babel/template': 7.25.9
       '@babel/types': 7.26.3
-      debug: 4.4.0
+      debug: 4.4.0(supports-color@9.4.0)
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
@@ -11302,6 +11696,8 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@fortawesome/fontawesome-free@6.7.2': {}
+
   '@gar/promisify@1.1.3': {}
 
   '@humanfs/core@0.19.1': {}
@@ -11343,8 +11739,8 @@ snapshots:
 
   '@intlify/bundle-utils@10.0.0(vue-i18n@10.0.5(vue@3.5.13(typescript@5.7.2)))':
     dependencies:
-      '@intlify/message-compiler': 12.0.0-alpha.2
-      '@intlify/shared': 12.0.0-alpha.2
+      '@intlify/message-compiler': 12.0.0-alpha.3
+      '@intlify/shared': 12.0.0-alpha.3
       acorn: 8.14.0
       escodegen: 2.1.0
       estree-walker: 2.0.2
@@ -11365,23 +11761,23 @@ snapshots:
       '@intlify/shared': 10.0.5
       source-map-js: 1.2.1
 
-  '@intlify/message-compiler@12.0.0-alpha.2':
+  '@intlify/message-compiler@12.0.0-alpha.3':
     dependencies:
-      '@intlify/shared': 12.0.0-alpha.2
+      '@intlify/shared': 12.0.0-alpha.3
       source-map-js: 1.2.1
 
   '@intlify/shared@10.0.5': {}
 
-  '@intlify/shared@11.1.3': {}
+  '@intlify/shared@11.1.10': {}
 
-  '@intlify/shared@12.0.0-alpha.2': {}
+  '@intlify/shared@12.0.0-alpha.3': {}
 
   '@intlify/unplugin-vue-i18n@6.0.1(@vue/compiler-dom@3.5.13)(eslint@9.17.0(jiti@2.4.2))(rollup@4.28.1)(typescript@5.7.2)(vue-i18n@10.0.5(vue@3.5.13(typescript@5.7.2)))(vue@3.5.13(typescript@5.7.2))':
     dependencies:
       '@eslint-community/eslint-utils': 4.4.1(eslint@9.17.0(jiti@2.4.2))
       '@intlify/bundle-utils': 10.0.0(vue-i18n@10.0.5(vue@3.5.13(typescript@5.7.2)))
-      '@intlify/shared': 11.1.3
-      '@intlify/vue-i18n-extensions': 7.0.0(@intlify/shared@11.1.3)(@vue/compiler-dom@3.5.13)(vue-i18n@10.0.5(vue@3.5.13(typescript@5.7.2)))(vue@3.5.13(typescript@5.7.2))
+      '@intlify/shared': 11.1.10
+      '@intlify/vue-i18n-extensions': 7.0.0(@intlify/shared@11.1.10)(@vue/compiler-dom@3.5.13)(vue-i18n@10.0.5(vue@3.5.13(typescript@5.7.2)))(vue@3.5.13(typescript@5.7.2))
       '@rollup/pluginutils': 5.1.4(rollup@4.28.1)
       '@typescript-eslint/scope-manager': 8.18.1
       '@typescript-eslint/typescript-estree': 8.18.1(typescript@5.7.2)
@@ -11403,11 +11799,11 @@ snapshots:
       - supports-color
       - typescript
 
-  '@intlify/vue-i18n-extensions@7.0.0(@intlify/shared@11.1.3)(@vue/compiler-dom@3.5.13)(vue-i18n@10.0.5(vue@3.5.13(typescript@5.7.2)))(vue@3.5.13(typescript@5.7.2))':
+  '@intlify/vue-i18n-extensions@7.0.0(@intlify/shared@11.1.10)(@vue/compiler-dom@3.5.13)(vue-i18n@10.0.5(vue@3.5.13(typescript@5.7.2)))(vue@3.5.13(typescript@5.7.2))':
     dependencies:
       '@babel/parser': 7.26.3
     optionalDependencies:
-      '@intlify/shared': 11.1.3
+      '@intlify/shared': 11.1.10
       '@vue/compiler-dom': 3.5.13
       vue: 3.5.13(typescript@5.7.2)
       vue-i18n: 10.0.5(vue@3.5.13(typescript@5.7.2))
@@ -12391,7 +12787,7 @@ snapshots:
       '@babel/core': 7.26.0
       '@babel/plugin-transform-typescript': 7.26.3(@babel/core@7.26.0)
       '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.26.0)
-      vite: 6.0.5(@types/node@22.10.2)(jiti@2.4.2)(less@4.2.1)(terser@5.37.0)(yaml@2.6.1)
+      vite: 6.0.5(@types/node@22.10.2)(jiti@2.4.2)(less@4.2.1)(sass@1.80.6)(terser@5.37.0)(yaml@2.6.1)
       vue: 3.5.13(typescript@5.6.3)
     transitivePeerDependencies:
       - supports-color
@@ -12403,7 +12799,7 @@ snapshots:
 
   '@vitejs/plugin-vue@5.2.1(vite@6.0.5(@types/node@22.10.2)(jiti@2.4.2)(less@4.2.1)(terser@5.37.0)(yaml@2.6.1))(vue@3.5.13(typescript@5.6.3))':
     dependencies:
-      vite: 6.0.5(@types/node@22.10.2)(jiti@2.4.2)(less@4.2.1)(terser@5.37.0)(yaml@2.6.1)
+      vite: 6.0.5(@types/node@22.10.2)(jiti@2.4.2)(less@4.2.1)(sass@1.80.6)(terser@5.37.0)(yaml@2.6.1)
       vue: 3.5.13(typescript@5.6.3)
 
   '@vitest/expect@2.1.8':
@@ -12420,15 +12816,6 @@ snapshots:
       magic-string: 0.30.17
     optionalDependencies:
       vite: 5.4.11(@types/node@22.10.2)(less@4.2.1)(sass@1.80.6)(terser@5.37.0)
-    optional: true
-
-  '@vitest/mocker@2.1.8(vite@5.4.11(@types/node@22.10.2)(less@4.2.1)(terser@5.37.0))':
-    dependencies:
-      '@vitest/spy': 2.1.8
-      estree-walker: 3.0.3
-      magic-string: 0.30.17
-    optionalDependencies:
-      vite: 5.4.11(@types/node@22.10.2)(less@4.2.1)(terser@5.37.0)
 
   '@vitest/pretty-format@2.1.8':
     dependencies:
@@ -12650,14 +13037,14 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
-  '@vueuse/integrations@12.0.0(async-validator@4.2.5)(axios@1.7.9)(change-case@5.4.4)(focus-trap@7.6.2)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.6)(typescript@5.7.2)':
+  '@vueuse/integrations@12.0.0(async-validator@4.2.5)(axios@1.10.0)(change-case@5.4.4)(focus-trap@7.6.2)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.6)(typescript@5.7.2)':
     dependencies:
       '@vueuse/core': 12.0.0(typescript@5.7.2)
       '@vueuse/shared': 12.0.0(typescript@5.7.2)
       vue: 3.5.13(typescript@5.7.2)
     optionalDependencies:
       async-validator: 4.2.5
-      axios: 1.7.9
+      axios: 1.10.0
       change-case: 5.4.4
       focus-trap: 7.6.2
       nprogress: 0.2.0
@@ -12918,6 +13305,14 @@ snapshots:
       fast-deep-equal: 3.1.3
       is-buffer: 2.0.5
 
+  axios@1.10.0:
+    dependencies:
+      follow-redirects: 1.15.9
+      form-data: 4.0.1
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
   axios@1.7.9:
     dependencies:
       follow-redirects: 1.15.9
@@ -13694,10 +14089,6 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
-  debug@4.4.0:
-    dependencies:
-      ms: 2.1.3
-
   debug@4.4.0(supports-color@9.4.0):
     dependencies:
       ms: 2.1.3
@@ -15375,7 +15766,7 @@ snapshots:
     dependencies:
       chalk: 5.3.0
       commander: 12.1.0
-      debug: 4.4.0
+      debug: 4.4.0(supports-color@9.4.0)
       execa: 8.0.1
       lilconfig: 3.1.3
       listr2: 8.2.5
@@ -18124,25 +18515,6 @@ snapshots:
       - sugarss
       - supports-color
       - terser
-    optional: true
-
-  vite-node@2.1.8(@types/node@22.10.2)(less@4.2.1)(terser@5.37.0):
-    dependencies:
-      cac: 6.7.14
-      debug: 4.4.0
-      es-module-lexer: 1.5.4
-      pathe: 1.1.2
-      vite: 5.4.11(@types/node@22.10.2)(less@4.2.1)(terser@5.37.0)
-    transitivePeerDependencies:
-      - '@types/node'
-      - less
-      - lightningcss
-      - sass
-      - sass-embedded
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
 
   vite-plugin-compression@0.5.1(vite@6.0.5(@types/node@22.10.2)(jiti@2.4.2)(less@4.2.1)(sass@1.80.6)(terser@5.37.0)(yaml@2.6.1)):
     dependencies:
@@ -18264,18 +18636,6 @@ snapshots:
       less: 4.2.1
       sass: 1.80.6
       terser: 5.37.0
-    optional: true
-
-  vite@5.4.11(@types/node@22.10.2)(less@4.2.1)(terser@5.37.0):
-    dependencies:
-      esbuild: 0.24.0
-      postcss: 8.4.49
-      rollup: 4.28.1
-    optionalDependencies:
-      '@types/node': 22.10.2
-      fsevents: 2.3.3
-      less: 4.2.1
-      terser: 5.37.0
 
   vite@6.0.5(@types/node@22.10.2)(jiti@2.4.2)(less@4.2.1)(sass@1.80.6)(terser@5.37.0)(yaml@2.6.1):
     dependencies:
@@ -18291,19 +18651,6 @@ snapshots:
       terser: 5.37.0
       yaml: 2.6.1
 
-  vite@6.0.5(@types/node@22.10.2)(jiti@2.4.2)(less@4.2.1)(terser@5.37.0)(yaml@2.6.1):
-    dependencies:
-      esbuild: 0.24.0
-      postcss: 8.4.49
-      rollup: 4.28.1
-    optionalDependencies:
-      '@types/node': 22.10.2
-      fsevents: 2.3.3
-      jiti: 2.4.2
-      less: 4.2.1
-      terser: 5.37.0
-      yaml: 2.6.1
-
   vitest@2.1.8(@types/node@22.10.2)(happy-dom@15.11.7)(less@4.2.1)(sass@1.80.6)(terser@5.37.0):
     dependencies:
       '@vitest/expect': 2.1.8
@@ -18339,43 +18686,6 @@ snapshots:
       - sugarss
       - supports-color
       - terser
-    optional: true
-
-  vitest@2.1.8(@types/node@22.10.2)(happy-dom@15.11.7)(less@4.2.1)(terser@5.37.0):
-    dependencies:
-      '@vitest/expect': 2.1.8
-      '@vitest/mocker': 2.1.8(vite@5.4.11(@types/node@22.10.2)(less@4.2.1)(terser@5.37.0))
-      '@vitest/pretty-format': 2.1.8
-      '@vitest/runner': 2.1.8
-      '@vitest/snapshot': 2.1.8
-      '@vitest/spy': 2.1.8
-      '@vitest/utils': 2.1.8
-      chai: 5.1.2
-      debug: 4.4.0
-      expect-type: 1.1.0
-      magic-string: 0.30.17
-      pathe: 1.1.2
-      std-env: 3.8.0
-      tinybench: 2.9.0
-      tinyexec: 0.3.1
-      tinypool: 1.0.2
-      tinyrainbow: 1.2.0
-      vite: 5.4.11(@types/node@22.10.2)(less@4.2.1)(terser@5.37.0)
-      vite-node: 2.1.8(@types/node@22.10.2)(less@4.2.1)(terser@5.37.0)
-      why-is-node-running: 2.3.0
-    optionalDependencies:
-      '@types/node': 22.10.2
-      happy-dom: 15.11.7
-    transitivePeerDependencies:
-      - less
-      - lightningcss
-      - msw
-      - sass
-      - sass-embedded
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
 
   vscode-languageserver-textdocument@1.0.12: {}