From 62563c365e1b2b4b8cbdbfeec0adea3acbd958b0 Mon Sep 17 00:00:00 2001
From: lq <workerqi@163.com>
Date: Fri, 4 Jul 2025 12:56:18 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E4=BA=86=E4=B8=80=E4=BA=9B?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                          |   1 +
 pnpm-lock.yaml                        |  34 ++
 src/components/CallInviteDialog.vue   | 487 +++++++++++++++
 src/components/MediaPreview.vue       |  32 +-
 src/components/MessageBubble.vue      |  85 ++-
 src/components/SettingsModal.vue      | 831 ++++++++++++++++++--------
 src/components/SideNavigation.vue     | 455 ++++++++------
 src/components/UserProfileModal.vue   | 657 +++++++++++---------
 src/components/VideoCallComponent.vue | 445 +++++++++-----
 src/composables/useMediaPreview.js    |  39 +-
 src/composables/useWebRTC.js          | 132 ++++
 src/composables/useWebSocket.js       | 282 +++++++--
 src/views/Chat.vue                    |   2 +-
 13 files changed, 2501 insertions(+), 981 deletions(-)
 create mode 100644 src/components/CallInviteDialog.vue
 create mode 100644 src/composables/useWebRTC.js

diff --git a/package.json b/package.json
index 1d69479..b32b9ec 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@ant-design/icons-vue": "^7.0.1",
     "@fortawesome/fontawesome-free": "^6.7.2",
     "@tailwindcss/vite": "^4.1.4",
+    "@vueuse/core": "^13.5.0",
     "@vueuse/head": "^2.0.0",
     "ant-design-vue": "^4.1.1",
     "axios": "^1.6.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 87b22cc..b5ab189 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,9 @@ importers:
       '@tailwindcss/vite':
         specifier: ^4.1.4
         version: 4.1.4(vite@6.3.3(jiti@2.4.2)(lightningcss@1.29.2)(sass@1.88.0))
+      '@vueuse/core':
+        specifier: ^13.5.0
+        version: 13.5.0(vue@3.5.13)
       '@vueuse/head':
         specifier: ^2.0.0
         version: 2.0.0(vue@3.5.13)
@@ -551,6 +554,9 @@ packages:
   '@types/estree@1.0.7':
     resolution: {integrity: sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==}
 
+  '@types/web-bluetooth@0.0.21':
+    resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
+
   '@unhead/dom@1.11.20':
     resolution: {integrity: sha512-jgfGYdOH+xHJF/j8gudjsYu3oIjFyXhCWcgKaw3vQnT616gSqyqnGQGOItL+BQtQZACKNISwIfx5PuOtztMKLA==}
 
@@ -607,11 +613,24 @@ packages:
   '@vue/shared@3.5.13':
     resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==}
 
+  '@vueuse/core@13.5.0':
+    resolution: {integrity: sha512-wV7z0eUpifKmvmN78UBZX8T7lMW53Nrk6JP5+6hbzrB9+cJ3jr//hUlhl9TZO/03bUkMK6gGkQpqOPWoabr72g==}
+    peerDependencies:
+      vue: ^3.5.0
+
   '@vueuse/head@2.0.0':
     resolution: {integrity: sha512-ykdOxTGs95xjD4WXE4na/umxZea2Itl0GWBILas+O4oqS7eXIods38INvk3XkJKjqMdWPcpCyLX/DioLQxU1KA==}
     peerDependencies:
       vue: '>=2.7 || >=3'
 
+  '@vueuse/metadata@13.5.0':
+    resolution: {integrity: sha512-euhItU3b0SqXxSy8u1XHxUCdQ8M++bsRs+TYhOLDU/OykS7KvJnyIFfep0XM5WjIFry9uAPlVSjmVHiqeshmkw==}
+
+  '@vueuse/shared@13.5.0':
+    resolution: {integrity: sha512-K7GrQIxJ/ANtucxIXbQlUHdB0TPA8c+q5i+zbrjxuhJCnJ9GtBg75sBSnvmLSxHKPg2Yo8w62PWksl9kwH0Q8g==}
+    peerDependencies:
+      vue: ^3.5.0
+
   ant-design-vue@4.2.6:
     resolution: {integrity: sha512-t7eX13Yj3i9+i5g9lqFyYneoIb3OzTvQjq9Tts1i+eiOd3Eva/6GagxBSXM1fOCjqemIu0FYVE1ByZ/38epR3Q==}
     engines: {node: '>=12.22.0'}
@@ -1402,6 +1421,8 @@ snapshots:
 
   '@types/estree@1.0.7': {}
 
+  '@types/web-bluetooth@0.0.21': {}
+
   '@unhead/dom@1.11.20':
     dependencies:
       '@unhead/schema': 1.11.20
@@ -1491,6 +1512,13 @@ snapshots:
 
   '@vue/shared@3.5.13': {}
 
+  '@vueuse/core@13.5.0(vue@3.5.13)':
+    dependencies:
+      '@types/web-bluetooth': 0.0.21
+      '@vueuse/metadata': 13.5.0
+      '@vueuse/shared': 13.5.0(vue@3.5.13)
+      vue: 3.5.13
+
   '@vueuse/head@2.0.0(vue@3.5.13)':
     dependencies:
       '@unhead/dom': 1.11.20
@@ -1499,6 +1527,12 @@ snapshots:
       '@unhead/vue': 1.11.20(vue@3.5.13)
       vue: 3.5.13
 
+  '@vueuse/metadata@13.5.0': {}
+
+  '@vueuse/shared@13.5.0(vue@3.5.13)':
+    dependencies:
+      vue: 3.5.13
+
   ant-design-vue@4.2.6(vue@3.5.13):
     dependencies:
       '@ant-design/colors': 6.0.0
diff --git a/src/components/CallInviteDialog.vue b/src/components/CallInviteDialog.vue
new file mode 100644
index 0000000..1342805
--- /dev/null
+++ b/src/components/CallInviteDialog.vue
@@ -0,0 +1,487 @@
+<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.name.charAt(0) }}
+        </div>
+        <div class="caller-details">
+          <h3 class="caller-name">{{ callerInfo.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'
+
+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/src/components/MediaPreview.vue b/src/components/MediaPreview.vue
index 1062eaf..3c0ce98 100644
--- a/src/components/MediaPreview.vue
+++ b/src/components/MediaPreview.vue
@@ -1,19 +1,19 @@
 <template>
   <!-- 图片预览组件 -->
-  <div
+<!--  <div
       v-if="showImagePreview"
       class="media-preview-overlay"
       :class="{ 'dark': themeStore.isDarkMode }"
-      @click.self="closePreview"
+      @click.self="hidePreview"
   >
     <div class="preview-container">
-      <button class="preview-close-btn" @click="closePreview">
+      <button class="preview-close-btn" @click="hidePreview">
         <i class="fas fa-times"></i>
       </button>
 
       <div class="image-preview-content">
         <img
-            :src="mediaData?.url"
+            :src="mediaData"
             :alt="'图片预览'"
             class="preview-image"
             @load="handleImageLoad"
@@ -29,24 +29,29 @@
         </button>
       </div>
     </div>
-  </div>
+  </div>-->
+  <VueEasyLightbox
+      :visible="showImagePreview"
+      :imgs="[{ src: mediaData }]"
+      @hide="hidePreview"
+  />
 
   <!-- 视频预览组件 -->
   <div
       v-if="showVideoPreview"
       class="media-preview-overlay video-preview"
       :class="{ 'dark': themeStore.isDarkMode }"
-      @click.self="closePreview"
+      @click.self="hidePreview"
   >
     <div class="video-preview-container" :class="{ 'portrait': isPortrait }">
-      <button class="preview-close-btn" @click="closePreview">
+      <button class="preview-close-btn" @click="hidePreview">
         <i class="fas fa-times"></i>
       </button>
 
       <div class="video-content">
         <video
             ref="videoPlayer"
-            :src="mediaData?.url"
+            :src="mediaData"
             class="preview-video"
             controls
             autoplay
@@ -117,10 +122,11 @@
 <script setup>
 import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
 import { useMediaPreview } from "@/composables/useMediaPreview.js";
+import VueEasyLightbox from 'vue-easy-lightbox';
 import { useThemeStore } from '@/stores/theme';
 
 const themeStore = useThemeStore();
-const { visible, mediaData, closePreview } = useMediaPreview();
+const { visible, mediaData, hidePreview, previewType } = useMediaPreview();
 
 // 视频相关状态
 const videoPlayer = ref(null);
@@ -134,8 +140,8 @@ const isPortrait = ref(false);
 const controlsTimeout = ref(null);
 
 // 计算属性
-const showImagePreview = computed(() => visible.value && mediaData.value?.type === 'image');
-const showVideoPreview = computed(() => visible.value && mediaData.value?.type === 'video');
+const showImagePreview = computed(() => visible.value && previewType.value === 'image');
+const showVideoPreview = computed(() => visible.value && previewType.value === 'video');
 
 const progressPercent = computed(() => {
   if (duration.value === 0) return 0;
@@ -296,7 +302,7 @@ const handleKeydown = (event) => {
 
   switch (event.code) {
     case 'Escape':
-      closePreview();
+      hidePreview();
       break;
     case 'Space':
       if (showVideoPreview.value) {
@@ -321,7 +327,7 @@ const handleKeydown = (event) => {
 
 // 监听媒体数据变化
 watch(mediaData, () => {
-  if (mediaData.value?.type === 'video') {
+  if (previewType.value=== 'video') {
     isPlaying.value = false;
     currentTime.value = 0;
     duration.value = 0;
diff --git a/src/components/MessageBubble.vue b/src/components/MessageBubble.vue
index 106800b..3d4a204 100644
--- a/src/components/MessageBubble.vue
+++ b/src/components/MessageBubble.vue
@@ -2,8 +2,9 @@
   <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"
+        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>
@@ -24,7 +25,7 @@
         <div
             v-if="message.type === 'image'"
             class="cursor-pointer relative"
-            @click="previewMedia(message.content, 'image')"
+            @click="handlePreviewMedia(message.content, 'image')"
         >
           <img
               :src="message.content"
@@ -41,7 +42,7 @@
         <div
             v-else-if="message.type === 'video'"
             class="cursor-pointer relative video-message"
-            @click="previewMedia(message.content, 'video')"
+            @click="handlePreviewMedia(message.content, 'video')"
         >
           <video
               :src="message.content"
@@ -85,6 +86,17 @@
         <!-- 音频消息 -->
         <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>
@@ -103,11 +115,10 @@
 
 <script setup>
 import { computed } from 'vue';
-import { useMediaPreview } from '@/composables/useMediaPreview';
+import previewMedia from '@/composables/useMediaPreview';
 import { useThemeStore } from '@/stores/theme';
 import AudioMessage from './AudioMessage.vue';
 
-const previewMedia = useMediaPreview();
 const themeStore = useThemeStore();
 
 const props = defineProps({
@@ -125,6 +136,8 @@ const props = defineProps({
   }
 });
 
+const emit = defineEmits(['show-user-profile']);
+
 const avatarStyle = computed(() => ({
   background: props.senderInfo.color
 }));
@@ -145,6 +158,14 @@ const bubbleClasses = computed(() => {
   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;
@@ -159,6 +180,25 @@ const formatTextWithLinks = (text) => {
 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>
@@ -249,6 +289,30 @@ const openUrl = (url) => {
   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;
 }
@@ -260,6 +324,10 @@ const openUrl = (url) => {
   cursor: pointer;
   transition: all 0.3s ease;
   background: white;
+  display: flex;
+  align-items: flex-start;
+  padding: 12px;
+  gap: 12px;
 }
 
 .url-preview:hover {
@@ -279,13 +347,6 @@ const openUrl = (url) => {
   background: #4b5563;
 }
 
-.url-preview {
-  display: flex;
-  align-items: flex-start;
-  padding: 12px;
-  gap: 12px;
-}
-
 .url-favicon {
   width: 20px;
   height: 20px;
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index cf798c1..2007e29 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -1,192 +1,212 @@
 <template>
   <CustomModal
+      :visible="isVisible"
       title="设置"
       size="large"
-      @close="$emit('close')"
+      @close="closeModal"
   >
     <div class="settings-content" :class="{ 'dark': themeStore.isDarkMode }">
       <!-- 设置导航 -->
       <div class="settings-nav">
         <div
-            v-for="tab in settingsTabs"
-            :key="tab.key"
-            class="nav-tab"
-            :class="{ 'active': activeTab === tab.key }"
-            @click="activeTab = tab.key"
+            v-for="section in settingSections"
+            :key="section.key"
+            class="nav-item"
+            :class="{ 'active': currentSection === section.key }"
+            @click="currentSection = section.key"
         >
-          <i :class="tab.icon"></i>
-          <span>{{ tab.label }}</span>
+          <i :class="section.icon"></i>
+          <span>{{ section.label }}</span>
         </div>
       </div>
 
       <!-- 设置内容 -->
-      <div class="settings-body">
+      <div class="settings-main">
         <!-- 通用设置 -->
-        <div v-if="activeTab === 'general'" class="settings-panel">
-          <h3 class="panel-title">通用设置</h3>
+        <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">
-                <div class="setting-name">主题模式</div>
-                <div class="setting-desc">选择亮色或暗色主题</div>
+                <label>主题模式</label>
+                <span class="setting-desc">选择应用的外观主题</span>
               </div>
-              <div class="theme-switcher">
-                <button
-                    class="theme-option"
-                    :class="{ 'active': !themeStore.isDarkMode }"
-                    @click="themeStore.setTheme(false)"
-                >
-                  <i class="fas fa-sun"></i>
-                  <span>亮色</span>
-                </button>
-                <button
-                    class="theme-option"
-                    :class="{ 'active': themeStore.isDarkMode }"
-                    @click="themeStore.setTheme(true)"
-                >
-                  <i class="fas fa-moon"></i>
-                  <span>暗色</span>
-                </button>
+              <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">
-                <div class="setting-name">语言</div>
-                <div class="setting-desc">选择界面语言</div>
+                <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>
-              <select class="setting-select">
-                <option value="zh-CN">简体中文</option>
-                <option value="en-US">English</option>
-              </select>
             </div>
 
             <div class="setting-item">
               <div class="setting-info">
-                <div class="setting-name">字体大小</div>
-                <div class="setting-desc">调整界面字体大小</div>
+                <label>字体大小</label>
+                <span class="setting-desc">调整聊天界面的字体大小</span>
               </div>
-              <div class="font-size-slider">
-                <input type="range" min="12" max="18" value="14" class="slider">
-                <span class="size-label">14px</span>
+              <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="activeTab === 'notifications'" class="settings-panel">
-          <h3 class="panel-title">通知设置</h3>
+        <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">
-                <div class="setting-name">桌面通知</div>
-                <div class="setting-desc">接收新消息的桌面通知</div>
+                <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>
-              <label class="toggle-switch">
-                <input type="checkbox" v-model="settings.desktopNotifications">
-                <span class="toggle-slider"></span>
-              </label>
             </div>
 
             <div class="setting-item">
               <div class="setting-info">
-                <div class="setting-name">声音提醒</div>
-                <div class="setting-desc">新消息时播放提示音</div>
+                <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>
-              <label class="toggle-switch">
-                <input type="checkbox" v-model="settings.soundNotifications">
-                <span class="toggle-slider"></span>
-              </label>
             </div>
 
             <div class="setting-item">
               <div class="setting-info">
-                <div class="setting-name">消息预览</div>
-                <div class="setting-desc">在通知中显示消息内容</div>
+                <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>
-              <label class="toggle-switch">
-                <input type="checkbox" v-model="settings.messagePreview">
-                <span class="toggle-slider"></span>
-              </label>
             </div>
           </div>
         </div>
 
-        <!-- 聊天设置 -->
-        <div v-if="activeTab === 'chat'" class="settings-panel">
-          <h3 class="panel-title">聊天设置</h3>
+        <!-- 隐私设置 -->
+        <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">
-                <div class="setting-name">Enter键发送</div>
-                <div class="setting-desc">按Enter键直接发送消息</div>
+                <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>
-              <label class="toggle-switch">
-                <input type="checkbox" v-model="settings.enterToSend">
-                <span class="toggle-slider"></span>
-              </label>
             </div>
 
             <div class="setting-item">
               <div class="setting-info">
-                <div class="setting-name">自动下载图片</div>
-                <div class="setting-desc">自动下载并显示图片</div>
+                <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>
-              <label class="toggle-switch">
-                <input type="checkbox" v-model="settings.autoDownloadImages">
-                <span class="toggle-slider"></span>
-              </label>
             </div>
 
             <div class="setting-item">
               <div class="setting-info">
-                <div class="setting-name">消息时间显示</div>
-                <div class="setting-desc">显示消息发送时间</div>
+                <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>
-              <label class="toggle-switch">
-                <input type="checkbox" v-model="settings.showMessageTime">
-                <span class="toggle-slider"></span>
-              </label>
             </div>
           </div>
         </div>
 
-        <!-- 账户设置 -->
-        <div v-if="activeTab === 'account'" class="settings-panel">
-          <h3 class="panel-title">账户设置</h3>
+        <!-- 关于 -->
+        <div v-if="currentSection === 'about'" class="setting-section">
+          <h3 class="section-title">关于应用</h3>
 
-          <div class="setting-group">
-            <div class="setting-item">
-              <div class="setting-info">
-                <div class="setting-name">清除聊天记录</div>
-                <div class="setting-desc">删除所有本地聊天记录</div>
+          <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>
-              <button class="danger-btn" @click="clearChatHistory">
-                清除记录
-              </button>
             </div>
 
-            <div class="setting-item">
-              <div class="setting-info">
-                <div class="setting-name">导出数据</div>
-                <div class="setting-desc">导出聊天记录和设置</div>
-              </div>
-              <button class="primary-btn">
-                导出数据
-              </button>
+            <div class="feature-list">
+              <h5>主要功能</h5>
+              <ul>
+                <li>实时消息传输</li>
+                <li>语音视频通话</li>
+                <li>文件传输</li>
+                <li>群聊功能</li>
+                <li>暗色模式</li>
+                <li>响应式设计</li>
+              </ul>
             </div>
 
-            <div class="setting-item">
-              <div class="setting-info">
-                <div class="setting-name">退出登录</div>
-                <div class="setting-desc">退出当前账户</div>
-              </div>
-              <button class="danger-btn" @click="logout">
-                退出登录
+            <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>
@@ -194,89 +214,210 @@
       </div>
     </div>
 
+    <!-- 底部操作 -->
     <template #footer>
-      <button class="modal-btn modal-btn-cancel" @click="$emit('close')">
-        取消
-      </button>
-      <button class="modal-btn modal-btn-confirm" @click="saveSettings">
-        保存设置
-      </button>
+      <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 } from 'vue';
-import { useThemeStore } from '@/stores/theme';
-import { useUserStore } from '@/stores/user';
-import { useRouter } from 'vue-router';
-import CustomModal from './CustomModal.vue';
+import { ref, reactive, watch, onMounted } from 'vue'
+import { useThemeStore } from '@/stores/theme'
+import CustomModal from './CustomModal.vue'
 
-const themeStore = useThemeStore();
-const userStore = useUserStore();
-const router = useRouter();
+const themeStore = useThemeStore()
 
-const emit = defineEmits(['close']);
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  }
+})
 
-const activeTab = ref('general');
+const emit = defineEmits(['close'])
 
-const settingsTabs = ref([
+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: 'chat', label: '聊天', icon: 'fas fa-comments' },
-  { key: 'account', label: '账户', icon: 'fas fa-user' }
-]);
+  { 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,
-  messagePreview: true,
-  enterToSend: true,
-  autoDownloadImages: true,
-  showMessageTime: true
-});
+  callNotifications: true,
+  showOnlineStatus: true,
+  readReceipts: true,
+  autoDownload: true
+})
 
-const clearChatHistory = () => {
-  if (confirm('确定要清除所有聊天记录吗？此操作不可恢复。')) {
-    // 清除本地存储的聊天记录
-    const keys = Object.keys(localStorage);
-    keys.forEach(key => {
-      if (key.startsWith('chat_')) {
-        localStorage.removeItem(key);
-      }
-    });
-    alert('聊天记录已清除');
-  }
-};
+const loadSettings = () => {
+  try {
+    const savedSettings = localStorage.getItem('chat-settings')
+    if (savedSettings) {
+      Object.assign(settings, JSON.parse(savedSettings))
+    }
 
-const logout = () => {
-  if (confirm('确定要退出登录吗？')) {
-    userStore.logout();
-    emit('close');
-    router.push('/login');
+    // 同步主题设置
+    settings.theme = themeStore.isDarkMode ? 'dark' : 'light'
+  } catch (error) {
+    console.error('加载设置失败:', error)
   }
-};
+}
 
 const saveSettings = () => {
-  // 保存设置到本地存储
-  localStorage.setItem('chatSettings', JSON.stringify(settings));
-  emit('close');
-};
+  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;
-  gap: 0;
-  margin: -24px;
+  overflow: hidden;
+}
+
+.settings-content.dark {
+  color: #f7fafc;
 }
 
 .settings-nav {
   width: 200px;
   background: #f8fafc;
   border-right: 1px solid #e2e8f0;
-  padding: 24px 0;
+  padding: 16px 0;
+  overflow-y: auto;
 }
 
 .settings-content.dark .settings-nav {
@@ -284,84 +425,101 @@ const saveSettings = () => {
   border-right-color: #4b5563;
 }
 
-.nav-tab {
+.nav-item {
   display: flex;
   align-items: center;
   gap: 12px;
-  padding: 12px 24px;
+  padding: 12px 20px;
   cursor: pointer;
   transition: all 0.2s ease;
   color: #64748b;
+  font-size: 14px;
 }
 
-.nav-tab:hover {
+.nav-item:hover {
   background: #e2e8f0;
-  color: #475569;
+  color: #374151;
 }
 
-.nav-tab.active {
+.nav-item.active {
   background: #4361ee;
   color: white;
-  border-right: 3px solid #3f37c9;
 }
 
-.settings-content.dark .nav-tab:hover {
+.settings-content.dark .nav-item {
+  color: #9ca3af;
+}
+
+.settings-content.dark .nav-item:hover {
   background: #4b5563;
   color: #d1d5db;
 }
 
-.nav-tab i {
-  width: 16px;
-  font-size: 14px;
-}
-
-.settings-body {
+.settings-main {
   flex: 1;
   padding: 24px;
   overflow-y: auto;
 }
 
-.panel-title {
+.section-title {
   font-size: 20px;
   font-weight: 600;
-  margin-bottom: 24px;
   color: #1a202c;
+  margin: 0 0 24px 0;
+  padding-bottom: 12px;
+  border-bottom: 2px solid #e2e8f0;
 }
 
-.settings-content.dark .panel-title {
+.settings-content.dark .section-title {
   color: #f7fafc;
+  border-bottom-color: #374151;
 }
 
 .setting-group {
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: 20px;
 }
 
 .setting-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 16px 0;
-  border-bottom: 1px solid #e2e8f0;
+  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 {
-  border-bottom-color: #4b5563;
+  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-name {
+.setting-info label {
+  display: block;
   font-size: 16px;
   font-weight: 500;
   color: #1a202c;
   margin-bottom: 4px;
 }
 
-.settings-content.dark .setting-name {
+.settings-content.dark .setting-info label {
   color: #f7fafc;
 }
 
@@ -374,145 +532,314 @@ const saveSettings = () => {
   color: #9ca3af;
 }
 
-.theme-switcher {
-  display: flex;
-  background: #e2e8f0;
-  border-radius: 8px;
-  padding: 4px;
-}
-
-.settings-content.dark .theme-switcher {
-  background: #4b5563;
-}
-
-.theme-option {
+.setting-control {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  border: none;
-  background: transparent;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  color: #64748b;
-  font-size: 14px;
+  gap: 12px;
 }
 
-.theme-option.active {
-  background: white;
-  color: #4361ee;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.settings-content.dark .theme-option.active {
-  background: #2d2d2d;
-  color: #4361ee;
-}
-
-.setting-select {
+.setting-control select {
   padding: 8px 12px;
   border: 1px solid #e2e8f0;
-  border-radius: 6px;
+  border-radius: 8px;
   background: white;
   color: #1a202c;
   font-size: 14px;
   min-width: 120px;
 }
 
-.settings-content.dark .setting-select {
-  background: #4b5563;
-  border-color: #6b7280;
+.settings-content.dark .setting-control select {
+  background: #374151;
+  border-color: #4b5563;
   color: #f7fafc;
 }
 
-.font-size-slider {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
 .slider {
   width: 120px;
+  height: 6px;
+  border-radius: 3px;
+  background: #e2e8f0;
+  outline: none;
+  -webkit-appearance: none;
 }
 
-.size-label {
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #4361ee;
+  cursor: pointer;
+}
+
+.value-display {
   font-size: 14px;
-  color: #64748b;
+  font-weight: 500;
+  color: #4361ee;
   min-width: 40px;
 }
 
-.toggle-switch {
+.switch {
   position: relative;
   display: inline-block;
-  width: 48px;
+  width: 50px;
   height: 24px;
 }
 
-.toggle-switch input {
+.switch input {
   opacity: 0;
   width: 0;
   height: 0;
 }
 
-.toggle-slider {
+.slider-switch {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background: #cbd5e1;
+  background-color: #e2e8f0;
+  transition: 0.3s;
   border-radius: 24px;
-  transition: all 0.3s ease;
 }
 
-.toggle-slider:before {
+.slider-switch:before {
   position: absolute;
   content: "";
   height: 18px;
   width: 18px;
   left: 3px;
   bottom: 3px;
-  background: white;
+  background-color: white;
+  transition: 0.3s;
   border-radius: 50%;
-  transition: all 0.3s ease;
 }
 
-input:checked + .toggle-slider {
-  background: #4361ee;
+input:checked + .slider-switch {
+  background-color: #4361ee;
 }
 
-input:checked + .toggle-slider:before {
-  transform: translateX(24px);
+input:checked + .slider-switch:before {
+  transform: translateX(26px);
 }
 
-.primary-btn,
-.danger-btn {
-  padding: 8px 16px;
+.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: 6px;
+  border-radius: 8px;
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
-.primary-btn {
-  background: #4361ee;
+.btn.primary {
+  background: linear-gradient(135deg, #4361ee, #3f37c9);
   color: white;
 }
 
-.primary-btn:hover {
-  background: #3f37c9;
+.btn.primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(67, 97, 238, 0.3);
 }
 
-.danger-btn {
-  background: #ff6b6b;
-  color: white;
+.btn.secondary {
+  background: #f1f5f9;
+  color: #64748b;
+  border: 1px solid #e2e8f0;
 }
 
-.danger-btn:hover {
-  background: #ff5252;
+.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/src/components/SideNavigation.vue b/src/components/SideNavigation.vue
index 6f6b498..48bb489 100644
--- a/src/components/SideNavigation.vue
+++ b/src/components/SideNavigation.vue
@@ -1,45 +1,46 @@
 <template>
   <div class="side-navigation" :class="{ 'dark': themeStore.isDarkMode }">
-    <!-- 用户头像区域 -->
-    <div class="user-avatar-section">
+    <div class="nav-header">
+<!--      <div class="logo">-->
+<!--        <i class="fas fa-comments"></i>-->
+<!--      </div>-->
       <div
-          class="user-avatar-container"
-          @click="showUserProfile = true"
+          class="nav-item profile-item"
+          @click="showProfile"
+          title="个人资料"
       >
-        <div
-            class="user-avatar"
-            :style="{ background: userStore.currentUser?.color || '#4cc9f0' }"
-        >
-          {{ userStore.currentUser?.name?.charAt(0) || 'U' }}
+        <div class="nav-icon user-avatar" :style="{ background: userStore.currentUser.color }">
+          {{ userStore.currentUser.name.charAt(0) }}
         </div>
-        <div class="online-indicator"></div>
+<!--        <div class="nav-label">我的</div>-->
       </div>
     </div>
 
-    <!-- 导航菜单 -->
-    <nav class="navigation-menu">
+    <nav class="nav-menu">
       <div
-          v-for="item in navigationItems"
+          v-for="item in navItems"
           :key="item.key"
           class="nav-item"
-          :class="{ 'active': activeNav === item.key }"
-          @click="handleNavClick(item.key)"
+          :class="{ 'active': currentView === item.key }"
+          @click="switchView(item.key)"
           :title="item.label"
       >
         <div class="nav-icon">
           <i :class="item.icon"></i>
         </div>
-        <div class="nav-label" :class="{ 'active': activeNav === item.key }">
+        <div class="nav-label">
           {{ item.label }}
         </div>
+        <div v-if="item.badge" class="nav-badge">
+          {{ item.badge }}
+        </div>
       </div>
     </nav>
 
-    <!-- 底部设置 -->
-    <div class="bottom-actions">
+    <div class="nav-footer">
       <div
           class="nav-item settings-item"
-          @click="showSettings = true"
+          @click="showSettings"
           title="设置"
       >
         <div class="nav-icon">
@@ -47,252 +48,330 @@
         </div>
         <div class="nav-label">设置</div>
       </div>
+
     </div>
 
-    <!-- 用户信息弹窗 -->
-    <UserProfileModal
-        v-if="showUserProfile"
-        @close="showUserProfile = false"
+    <!-- 设置模态框 -->
+    <SettingsModal
+        :visible="showSettingsModal"
+        @close="showSettingsModal = false"
     />
 
-    <!-- 设置弹窗 -->
-    <SettingsModal
-        v-if="showSettings"
-        @close="showSettings = false"
+    <!-- 用户资料模态框 -->
+    <UserProfileModal
+        :visible="showProfileModal"
+        :user-info="userStore.currentUser"
+        @close="showProfileModal = false"
     />
   </div>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
-import { useUserStore } from '@/stores/user';
-import { useThemeStore } from '@/stores/theme';
-import UserProfileModal from './UserProfileModal.vue';
-import SettingsModal from './SettingsModal.vue';
+import { ref, computed } from 'vue'
+import { useThemeStore } from '@/stores/theme'
+import { useUserStore } from '@/stores/user'
+import { useChatStore } from '@/stores/chat'
+import SettingsModal from './SettingsModal.vue'
+import UserProfileModal from './UserProfileModal.vue'
 
-const userStore = useUserStore();
-const themeStore = useThemeStore();
+const themeStore = useThemeStore()
+const userStore = useUserStore()
+const chatStore = useChatStore()
 
-const activeNav = ref('chat');
-const showUserProfile = ref(false);
-const showSettings = ref(false);
+const props = defineProps({
+  currentView: {
+    type: String,
+    default: 'chat'
+  }
+})
 
-const navigationItems = ref([
+const emit = defineEmits(['view-change'])
+
+const showSettingsModal = ref(false)
+const showProfileModal = ref(false)
+
+const navItems = computed(() => [
   {
     key: 'chat',
     label: '聊天',
-    icon: 'fas fa-comments'
+    icon: 'fas fa-comment-dots',
+    badge: getUnreadCount()
   },
   {
     key: 'friends',
     label: '好友',
-    icon: 'fas fa-user-friends'
+    icon: 'fas fa-user-friends',
+    badge: null
   },
   {
     key: 'groups',
     label: '群聊',
-    icon: 'fas fa-users'
+    icon: 'fas fa-users',
+    badge: null
   },
   {
     key: 'moments',
     label: '圈子',
-    icon: 'fas fa-globe'
+    icon: 'fas fa-globe',
+    badge: null
   }
-]);
+])
 
-const emit = defineEmits(['nav-change']);
+const getUnreadCount = () => {
+  const totalUnread = chatStore.friends.reduce((total, friend) => {
+    return total + (friend.unreadCount || 0)
+  }, 0)
 
-const handleNavClick = (key) => {
-  activeNav.value = key;
+  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>
 
 <style scoped>
 .side-navigation {
   width: 80px;
-  height: 100%;
-  background: linear-gradient(180deg, #4361ee 0%, #3f37c9 100%);
+  height: 100vh;
+  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+  border-right: 1px solid #e2e8f0;
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 20px 0;
+  padding: 16px 0;
   position: relative;
-  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
 }
 
 .side-navigation.dark {
-  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
-  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
+  background: linear-gradient(180deg, #1a1a1a 0%, #2d2d2d 100%);
+  border-right-color: #374151;
 }
 
-.user-avatar-section {
-  margin-bottom: 30px;
+.nav-header {
+  margin-bottom: 24px;
 }
 
-.user-avatar-container {
-  position: relative;
-  cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.user-avatar-container:hover {
-  transform: scale(1.1);
-}
-
-.user-avatar {
-  width: 45px;
-  height: 45px;
-  border-radius: 50%;
+.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-weight: bold;
+  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;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-  transition: all 0.3s ease;
+  margin-bottom: 2px;
 }
 
-.online-indicator {
+.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;
-  bottom: 2px;
-  right: 2px;
-  width: 12px;
-  height: 12px;
-  background: #4caf50;
-  border: 2px solid white;
-  border-radius: 50%;
-  animation: pulse-online 2s infinite;
+  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;
 }
 
-@keyframes pulse-online {
+.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); }
 }
 
-.navigation-menu {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.nav-item {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-  padding: 12px 8px;
-  border-radius: 16px;
-  cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  background: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(10px);
-  min-height: 70px;
-}
-
-.nav-item:hover {
-  background: rgba(255, 255, 255, 0.2);
-  transform: scale(1.05);
-}
-
-.nav-item.active {
-  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
-  transform: scale(1.1);
-  box-shadow: 0 8px 20px rgba(255, 107, 107, 0.4);
-}
-
-.side-navigation.dark .nav-item.active {
-  background: linear-gradient(135deg, #4cc9f0, #3a9bc1);
-  box-shadow: 0 8px 20px rgba(76, 201, 240, 0.4);
-}
-
-.nav-icon {
-  color: white;
-  font-size: 20px;
-  transition: all 0.3s ease;
-}
-
-.nav-item:hover .nav-icon {
-  transform: scale(1.1);
-}
-
-.nav-label {
-  color: white;
-  font-size: 10px;
-  font-weight: 500;
-  text-align: center;
-  opacity: 0.8;
-  transition: all 0.3s ease;
-  background: rgba(255, 255, 255, 0.15);
-  padding: 4px 8px;
-  border-radius: 8px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  backdrop-filter: blur(5px);
-  min-width: 32px;
-}
-
-.nav-label.active {
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2));
-  border-color: rgba(255, 255, 255, 0.4);
-  opacity: 1;
-  font-weight: 600;
-  color: white;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-}
-
-.side-navigation.dark .nav-label.active {
-  background: linear-gradient(135deg, rgba(76, 201, 240, 0.3), rgba(58, 155, 193, 0.2));
-  border-color: rgba(76, 201, 240, 0.4);
-}
-
-.nav-item:hover .nav-label {
-  opacity: 1;
-  transform: scale(1.05);
-  background: rgba(255, 255, 255, 0.25);
-}
-
-.bottom-actions {
-  margin-top: auto;
-}
-
-.settings-item {
-  background: rgba(255, 255, 255, 0.08);
-}
-
-.settings-item:hover {
-  background: rgba(255, 255, 255, 0.15);
-}
-
 /* 响应式设计 */
 @media (max-width: 768px) {
   .side-navigation {
-    width: 70px;
-    padding: 15px 0;
+    width: 100%;
+    height: 60px;
+    flex-direction: row;
+    justify-content: space-around;
+    padding: 8px 16px;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 1000;
   }
 
-  .user-avatar {
-    width: 40px;
-    height: 40px;
-    font-size: 16px;
+  .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 {
-    min-height: 60px;
-    padding: 10px 6px;
+    width: 44px;
+    height: 44px;
+    border-radius: 12px;
   }
 
   .nav-icon {
-    font-size: 18px;
+    font-size: 16px;
   }
 
   .nav-label {
     font-size: 9px;
-    padding: 3px 6px;
-    min-width: 28px;
   }
 }
 </style>
diff --git a/src/components/UserProfileModal.vue b/src/components/UserProfileModal.vue
index 8798965..bb8bb3b 100644
--- a/src/components/UserProfileModal.vue
+++ b/src/components/UserProfileModal.vue
@@ -1,162 +1,207 @@
 <template>
   <CustomModal
-      :visible="true"
-      title="个人信息"
+      :visible="isVisible"
+      title="用户资料"
       size="medium"
-      @close="$emit('close')"
+      @close="closeModal"
   >
     <div class="user-profile-content" :class="{ 'dark': themeStore.isDarkMode }">
       <!-- 用户头像和基本信息 -->
       <div class="profile-header">
-        <div class="avatar-section">
-          <div
-              class="user-avatar-large"
-              :style="{ background: userStore.currentUser?.color || '#4cc9f0' }"
-          >
-            {{ userStore.currentUser?.name?.charAt(0) || 'U' }}
-          </div>
-          <button class="avatar-edit-btn">
-            <i class="fas fa-camera"></i>
-          </button>
+        <div class="user-avatar" :style="{ background: userInfo.color }">
+          {{ userInfo.name?.charAt(0) }}
         </div>
-
-        <div class="user-info">
-          <h2 class="user-name">{{ userStore.currentUser?.name || '未知用户' }}</h2>
-          <p class="user-id">ID: {{ userStore.currentUser?.id || '000000' }}</p>
+        <div class="user-basic-info">
+          <h2 class="user-name">{{ userInfo.name }}</h2>
+          <p class="user-id">ID: {{ userInfo.id }}</p>
           <div class="user-status">
-            <div class="status-indicator online"></div>
-            <span>在线</span>
+            <span class="status-dot" :class="isOnline ? 'online' : 'offline'"></span>
+            <span class="status-text">{{ isOnline ? '在线' : '离线' }}</span>
           </div>
         </div>
       </div>
 
-      <!-- 统计信息 -->
-      <div class="stats-section">
-        <div class="stat-item">
-          <div class="stat-number">{{ friendsCount }}</div>
-          <div class="stat-label">好友</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.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="stat-item">
-          <div class="stat-number">{{ groupsCount }}</div>
-          <div class="stat-label">群聊</div>
-        </div>
-        <div class="stat-item">
-          <div class="stat-number">{{ messagesCount }}</div>
-          <div class="stat-label">消息</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="settings-section">
-        <h3 class="section-title">个人设置</h3>
-
-        <div class="setting-item">
-          <div class="setting-info">
-            <i class="fas fa-user setting-icon"></i>
-            <div>
-              <div class="setting-name">昵称</div>
-              <div class="setting-desc">{{ userStore.currentUser?.name || '未设置' }}</div>
-            </div>
-          </div>
-          <button class="setting-action">
-            <i class="fas fa-chevron-right"></i>
-          </button>
-        </div>
-
-        <div class="setting-item">
-          <div class="setting-info">
-            <i class="fas fa-palette setting-icon"></i>
-            <div>
-              <div class="setting-name">主题颜色</div>
-              <div class="setting-desc">个性化你的聊天界面</div>
-            </div>
-          </div>
-          <div class="color-picker">
-            <div
-                v-for="color in themeColors"
-                :key="color"
-                class="color-option"
-                :class="{ 'active': userStore.currentUser?.color === color }"
-                :style="{ background: color }"
-                @click="changeThemeColor(color)"
-            ></div>
-          </div>
-        </div>
-
-        <div class="setting-item">
-          <div class="setting-info">
-            <i class="fas fa-bell setting-icon"></i>
-            <div>
-              <div class="setting-name">消息通知</div>
-              <div class="setting-desc">管理通知设置</div>
-            </div>
-          </div>
-          <button class="setting-action">
-            <i class="fas fa-chevron-right"></i>
-          </button>
-        </div>
-
-        <div class="setting-item">
-          <div class="setting-info">
-            <i class="fas fa-shield-alt setting-icon"></i>
-            <div>
-              <div class="setting-name">隐私设置</div>
-              <div class="setting-desc">控制谁可以联系你</div>
-            </div>
-          </div>
-          <button class="setting-action">
-            <i class="fas fa-chevron-right"></i>
-          </button>
-        </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>
-
-    <template #footer>
-      <button class="modal-btn modal-btn-cancel" @click="$emit('close')">
-        关闭
-      </button>
-      <button class="modal-btn modal-btn-confirm">
-        保存更改
-      </button>
-    </template>
   </CustomModal>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
-import { useUserStore } from '@/stores/user';
-import { useThemeStore } from '@/stores/theme';
-import { useChatStore } from '@/stores/chat';
-import CustomModal from './CustomModal.vue';
+import { ref, computed, watch } from 'vue'
+import { useThemeStore } from '@/stores/theme'
+import { useChatStore } from '@/stores/chat'
+import { useUserStore } from '@/stores/user'
+import CustomModal from './CustomModal.vue'
 
-const userStore = useUserStore();
-const themeStore = useThemeStore();
-const chatStore = useChatStore();
+const themeStore = useThemeStore()
+const chatStore = useChatStore()
+const userStore = useUserStore()
 
-const emit = defineEmits(['close']);
-
-const themeColors = ref([
-  '#4cc9f0', '#ff6b6b', '#6a0dad', '#20b2aa',
-  '#ffa500', '#9acd32', '#ff1493', '#4682b4',
-  '#c71585', '#2e8b57', '#4361ee', '#3f37c9'
-]);
-
-const friendsCount = computed(() => chatStore.friends?.length || 0);
-const groupsCount = computed(() => 0); // 暂时为0，后续实现群聊功能
-const messagesCount = computed(() => {
-  // 计算总消息数
-  return chatStore.friends?.reduce((total, friend) => {
-    const chatHistory = JSON.parse(localStorage.getItem(`chat_${userStore.currentUser.id}_${friend.id}`) || '[]');
-    return total + chatHistory.length;
-  }, 0) || 0;
-});
-
-const changeThemeColor = (color) => {
-  if (userStore.currentUser) {
-    userStore.currentUser.color = color;
-    // 这里可以添加保存到后端的逻辑
+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>
@@ -169,232 +214,284 @@ const changeThemeColor = (color) => {
 }
 
 .profile-header {
-  background: linear-gradient(135deg, #4361ee, #3f37c9);
-  color: white;
-  padding: 32px 24px;
   display: flex;
   align-items: center;
-  gap: 24px;
-  margin: -24px -24px 24px -24px;
+  gap: 20px;
+  padding: 24px;
+  border-bottom: 1px solid #e2e8f0;
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
 }
 
-.avatar-section {
-  position: relative;
+.user-profile-content.dark .profile-header {
+  border-bottom-color: #374151;
+  background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
 }
 
-.user-avatar-large {
+.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;
-  color: white;
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+  flex-shrink: 0;
 }
 
-.avatar-edit-btn {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  background: white;
-  color: #4361ee;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-  transition: all 0.2s ease;
-}
-
-.avatar-edit-btn:hover {
-  transform: scale(1.1);
-}
-
-.user-info {
+.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;
-  opacity: 0.8;
+  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;
-  font-size: 14px;
 }
 
-.status-indicator {
+.status-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  background: #4caf50;
   animation: pulse 2s infinite;
 }
 
-.stats-section {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 24px;
-  margin-bottom: 32px;
-  padding: 24px;
-  background: #f8fafc;
-  border-radius: 12px;
+.status-dot.online {
+  background: #10b981;
 }
 
-.user-profile-content.dark .stats-section {
-  background: #374151;
+.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: 28px;
+  font-size: 24px;
   font-weight: 700;
   color: #4361ee;
   margin-bottom: 4px;
 }
 
 .stat-label {
-  font-size: 14px;
+  font-size: 12px;
   color: #64748b;
+  font-weight: 500;
 }
 
 .user-profile-content.dark .stat-label {
   color: #9ca3af;
 }
 
-.settings-section {
-  margin-top: 24px;
-}
-
-.section-title {
-  font-size: 18px;
-  font-weight: 600;
-  margin-bottom: 16px;
-  color: #1a202c;
-}
-
-.user-profile-content.dark .section-title {
-  color: #f7fafc;
-}
-
-.setting-item {
+.profile-actions {
+  padding: 24px;
+  border-top: 1px solid #e2e8f0;
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 0;
-  border-bottom: 1px solid #e2e8f0;
-  transition: all 0.2s ease;
+  gap: 12px;
+  flex-wrap: wrap;
 }
 
-.setting-item:hover {
-  background: #f8fafc;
-  margin: 0 -24px;
-  padding: 16px 24px;
-  border-radius: 8px;
+.user-profile-content.dark .profile-actions {
+  border-top-color: #374151;
 }
 
-.user-profile-content.dark .setting-item {
-  border-bottom-color: #4b5563;
-}
-
-.user-profile-content.dark .setting-item:hover {
-  background: #374151;
-}
-
-.setting-info {
-  display: flex;
-  align-items: center;
-  gap: 16px;
+.action-btn {
   flex: 1;
-}
-
-.setting-icon {
-  width: 20px;
-  color: #4361ee;
-  font-size: 16px;
-}
-
-.setting-name {
-  font-size: 16px;
-  font-weight: 500;
-  color: #1a202c;
-  margin-bottom: 2px;
-}
-
-.user-profile-content.dark .setting-name {
-  color: #f7fafc;
-}
-
-.setting-desc {
-  font-size: 14px;
-  color: #64748b;
-}
-
-.user-profile-content.dark .setting-desc {
-  color: #9ca3af;
-}
-
-.setting-action {
-  background: none;
+  min-width: 120px;
+  padding: 12px 16px;
   border: none;
-  color: #94a3b8;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
   cursor: pointer;
-  padding: 8px;
-  border-radius: 6px;
-  transition: all 0.2s ease;
-}
-
-.setting-action:hover {
-  background: #e2e8f0;
-  color: #64748b;
-}
-
-.user-profile-content.dark .setting-action:hover {
-  background: #4b5563;
-  color: #d1d5db;
-}
-
-.color-picker {
+  transition: all 0.3s ease;
   display: flex;
+  align-items: center;
+  justify-content: center;
   gap: 8px;
 }
 
-.color-option {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  cursor: pointer;
-  border: 2px solid transparent;
-  transition: all 0.2s ease;
+.primary-btn {
+  background: linear-gradient(135deg, #4361ee, #3f37c9);
+  color: white;
 }
 
-.color-option:hover {
-  transform: scale(1.1);
+.primary-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(67, 97, 238, 0.3);
 }
 
-.color-option.active {
-  border-color: white;
-  box-shadow: 0 0 0 2px #4361ee;
+.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/src/components/VideoCallComponent.vue b/src/components/VideoCallComponent.vue
index a239094..20fb50a 100644
--- a/src/components/VideoCallComponent.vue
+++ b/src/components/VideoCallComponent.vue
@@ -1,44 +1,74 @@
 <template>
   <div
       v-if="isVisible"
+      ref="container"
       class="video-call-container"
-      :class="{ 'minimized': isMinimized, 'dark': themeStore.isDarkMode }"
-      :style="{ left: position.x + 'px', top: position.y + 'px' }"
-      @mousedown="startDrag"
+      :class="{
+      'minimized': isMinimized,
+      'dark': themeStore.isDarkMode,
+      'dragging': isDragging
+    }"
+      :style="containerStyle"
   >
     <!-- 拖拽头部 -->
-    <div class="call-header" v-if="!isMinimized">
+    <div
+        class="call-header"
+        v-if="!isMinimized"
+        @mousedown="startDrag"
+    >
       <div class="call-info">
         <div class="caller-avatar" :style="{ background: callerInfo.color }">
           {{ callerInfo.name.charAt(0) }}
         </div>
         <div class="caller-details">
           <div class="caller-name">{{ callerInfo.name }}</div>
-          <div class="call-status">{{ callStatus }}</div>
+          <div class="call-status">{{ callStatus }} {{ formattedDuration }}</div>
         </div>
       </div>
 
       <div class="call-actions">
-        <button class="action-btn minimize-btn" @click="toggleMinimize">
+        <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">
+        <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" @click="toggleMinimize">
-      <div class="mini-avatar" :style="{ background: callerInfo.color }">
-        {{ callerInfo.name.charAt(0) }}
+    <!-- 设备状态指示 -->
+    <div v-if="!isMinimized" class="device-status-container">
+      <div v-if="callType === 'video' && !isCameraWorking" class="status-alert">
+        <i class="fas fa-video-slash"></i> 摄像头未工作
       </div>
+      <div v-if="!isMicWorking" class="status-alert">
+        <i class="fas fa-microphone-slash"></i> 麦克风未工作
+      </div>
+    </div>
+
+    <!-- 最小化状态 -->
+    <div
+        v-if="isMinimized"
+        class="minimized-content"
+        @mousedown="startDrag"
+    >
+      <div class="remote-video-preview">
+        <video
+            v-if="callType === 'video' && hasRemoteVideo"
+            class="remote-video"
+            autoplay
+            playsinline
+        ></video>
+        <div v-else class="video-placeholder">
+          <div class="placeholder-avatar" :style="{ background: callerInfo.color }">
+            {{ callerInfo.name.charAt(0) }}
+          </div>
+        </div>
+      </div>
+
       <div class="mini-info">
         <div class="mini-name">{{ callerInfo.name }}</div>
-        <div class="mini-status">{{ callStatus }}</div>
-      </div>
-      <div class="call-indicator">
-        <div class="pulse-dot"></div>
+        <div class="mini-status">{{ formattedDuration }}</div>
       </div>
     </div>
 
@@ -63,7 +93,10 @@
       </div>
 
       <!-- 本地视频 -->
-      <div class="local-video-container" v-if="hasLocalVideo && callType === 'video'">
+      <div
+          class="local-video-container"
+          v-if="hasLocalVideo && callType === 'video' && isCameraWorking"
+      >
         <video
             ref="localVideo"
             class="local-video"
@@ -72,6 +105,14 @@
             muted
         ></video>
       </div>
+      <div
+          v-else-if="callType === 'video'"
+          class="local-placeholder-container"
+      >
+        <div class="local-avatar" :style="{ background: callerInfo.color }">
+          {{ callerInfo.name.charAt(0) }}
+        </div>
+      </div>
     </div>
 
     <!-- 控制栏 -->
@@ -116,7 +157,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, onUnmounted, computed } from 'vue';
+import { ref, reactive, computed, onMounted, onUnmounted } from 'vue';
 import { useThemeStore } from '@/stores/theme';
 
 const themeStore = useThemeStore();
@@ -148,26 +189,48 @@ const isSpeakerOn = ref(true);
 const hasLocalVideo = ref(false);
 const hasRemoteVideo = ref(false);
 const connectionText = ref('正在连接...');
-
-// 拖拽相关
-const position = reactive({ x: 100, y: 100 });
+const callDuration = ref(0);
+const callTimer = ref(null);
+const isCameraWorking = ref(true);
+const isMicWorking = ref(true);
 const isDragging = ref(false);
-const dragOffset = reactive({ x: 0, y: 0 });
 
-// 视频元素引用
-const localVideo = ref(null);
-const remoteVideo = ref(null);
+// 拖拽相关状态
+const position = reactive({ x: 0, y: 0 });
+const startPosition = reactive({ x: 0, y: 0 });
+const container = ref(null);
 
-// 媒体流
-const localStream = ref(null);
-const remoteStream = ref(null);
+// 通话计时器
+const startCallTimer = () => {
+  if (callTimer.value) clearInterval(callTimer.value);
+  callTimer.value = setInterval(() => {
+    callDuration.value += 1;
+  }, 1000);
+};
+
+// 格式化通话时间
+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(() => {
+  return {
+    left: `${position.x}px`,
+    top: `${position.y}px`,
+    width: isMinimized.value ? '200px' : '500px',
+    height: isMinimized.value ? '60px' : '380px'
+  };
+});
 
 // 通话状态
 const callStatus = computed(() => {
   if (props.isIncoming) {
     return '来电中...';
   }
-  return '通话中 00:32';
+  return '通话中';
 });
 
 // 初始化媒体设备
@@ -178,109 +241,99 @@ const initializeMedia = async () => {
       video: props.callType === 'video'
     };
 
-    localStream.value = await navigator.mediaDevices.getUserMedia(constraints);
-
-    if (localVideo.value && props.callType === 'video') {
-      localVideo.value.srcObject = localStream.value;
-      hasLocalVideo.value = true;
-    }
-
-    // 检查是否有摄像头
-    const videoTracks = localStream.value.getVideoTracks();
-    if (videoTracks.length === 0) {
-      isCameraOn.value = false;
-    }
-
-    // 模拟连接成功
+    // 模拟媒体访问
     setTimeout(() => {
-      connectionText.value = '已连接';
-      // 模拟远程视频（实际应用中这里会是真实的远程流）
       if (props.callType === 'video') {
-        hasRemoteVideo.value = false; // 设为false显示头像
+        hasLocalVideo.value = true;
+        hasRemoteVideo.value = true;
       }
-    }, 2000);
+      connectionText.value = '已连接';
+      startCallTimer();
+    }, 1500);
 
   } catch (error) {
     console.error('无法访问媒体设备:', error);
     isCameraOn.value = false;
+    isCameraWorking.value = false;
     connectionText.value = '连接失败';
-
-    if (error.name === 'NotAllowedError') {
-      alert('请允许访问摄像头和麦克风');
-    } else if (error.name === 'NotFoundError') {
-      alert('未找到摄像头或麦克风设备');
-    }
   }
 };
 
 // 控制功能
 const toggleMic = () => {
-  if (localStream.value) {
-    const audioTracks = localStream.value.getAudioTracks();
-    audioTracks.forEach(track => {
-      track.enabled = !track.enabled;
-    });
-    isMicOn.value = !isMicOn.value;
-  }
+  isMicOn.value = !isMicOn.value;
+  isMicWorking.value = isMicOn.value;
 };
 
 const toggleCamera = () => {
-  if (localStream.value && props.callType === 'video') {
-    const videoTracks = localStream.value.getVideoTracks();
-    videoTracks.forEach(track => {
-      track.enabled = !track.enabled;
-    });
+  if (props.callType === 'video') {
     isCameraOn.value = !isCameraOn.value;
     hasLocalVideo.value = isCameraOn.value;
+    isCameraWorking.value = isCameraOn.value;
   }
 };
 
 const toggleSpeaker = () => {
   isSpeakerOn.value = !isSpeakerOn.value;
-  if (remoteVideo.value) {
-    remoteVideo.value.muted = !isSpeakerOn.value;
-  }
 };
 
 const toggleMinimize = () => {
   isMinimized.value = !isMinimized.value;
+
+  // 最小化时确保在屏幕内
+  if (isMinimized.value) {
+    position.x = Math.max(0, Math.min(position.x, window.innerWidth - 200));
+    position.y = Math.max(0, Math.min(position.y, window.innerHeight - 60));
+  } else {
+    // 最大化时确保在屏幕内
+    position.x = Math.max(0, Math.min(position.x, window.innerWidth - 500));
+    position.y = Math.max(0, Math.min(position.y, window.innerHeight - 380));
+  }
 };
 
 const endCall = () => {
-  // 停止所有媒体流
-  if (localStream.value) {
-    localStream.value.getTracks().forEach(track => track.stop());
-  }
-
+  if (callTimer.value) clearInterval(callTimer.value);
   isVisible.value = false;
   emit('end-call');
 };
 
-// 拖拽功能
+// 拖拽功能 - 完全重写以解决偏移问题
 const startDrag = (event) => {
-  if (isMinimized.value || event.target.closest('.call-controls')) return;
+  if (event.target.closest('.action-btn') || event.target.closest('.control-btn')) {
+    return;
+  }
 
   isDragging.value = true;
-  dragOffset.x = event.clientX - position.x;
-  dragOffset.y = event.clientY - position.y;
+
+  // 记录初始位置（鼠标位置和元素位置）
+  startPosition.x = event.clientX;
+  startPosition.y = event.clientY;
 
   document.addEventListener('mousemove', handleDrag);
   document.addEventListener('mouseup', stopDrag);
-  event.preventDefault();
 };
 
 const handleDrag = (event) => {
   if (!isDragging.value) return;
 
-  position.x = event.clientX - dragOffset.x;
-  position.y = event.clientY - dragOffset.y;
+  // 计算鼠标移动的偏移量
+  const deltaX = event.clientX - startPosition.x;
+  const deltaY = event.clientY - startPosition.y;
 
-  // 限制在窗口范围内
-  const maxX = window.innerWidth - 320;
-  const maxY = window.innerHeight - 240;
+  // 更新元素位置
+  position.x += deltaX;
+  position.y += deltaY;
 
-  position.x = Math.max(0, Math.min(position.x, maxX));
-  position.y = Math.max(0, Math.min(position.y, maxY));
+  // 更新初始位置为当前位置
+  startPosition.x = event.clientX;
+  startPosition.y = event.clientY;
+
+  // 确保不超出屏幕边界
+  const width = isMinimized.value ? 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 = () => {
@@ -289,20 +342,30 @@ const stopDrag = () => {
   document.removeEventListener('mouseup', stopDrag);
 };
 
+// 窗口大小变化处理
+const handleWindowResize = () => {
+  const width = isMinimized.value ? 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));
+};
+
 onMounted(() => {
   initializeMedia();
 
-  // 设置初始位置（屏幕右上角）
-  position.x = window.innerWidth - 340;
-  position.y = 20;
+  // 设置初始居中位置
+  position.x = Math.max(0, (window.innerWidth - 500) / 2);
+  position.y = Math.max(0, (window.innerHeight - 380) / 2);
+
+  window.addEventListener('resize', handleWindowResize);
 });
 
 onUnmounted(() => {
-  if (localStream.value) {
-    localStream.value.getTracks().forEach(track => track.stop());
-  }
+  if (callTimer.value) clearInterval(callTimer.value);
   document.removeEventListener('mousemove', handleDrag);
   document.removeEventListener('mouseup', stopDrag);
+  window.removeEventListener('resize', handleWindowResize);
 });
 </script>
 
@@ -315,9 +378,14 @@ onUnmounted(() => {
   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);
-  user-select: none;
-  width: 320px;
-  height: 240px;
+  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 {
@@ -326,9 +394,7 @@ onUnmounted(() => {
 }
 
 .video-call-container.minimized {
-  width: 200px;
-  height: 60px;
-  cursor: pointer;
+  cursor: move;
 }
 
 .call-header {
@@ -338,6 +404,7 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  height: 56px;
   cursor: move;
 }
 
@@ -401,36 +468,84 @@ onUnmounted(() => {
   background: #ff6b6b;
 }
 
+.device-status-container {
+  position: absolute;
+  top: 65px;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  gap: 15px;
+  z-index: 10;
+  padding: 5px;
+}
+
+.status-alert {
+  background: rgba(255, 87, 87, 0.8);
+  color: white;
+  padding: 4px 10px;
+  border-radius: 20px;
+  font-size: 12px;
+  animation: blink 1.5s infinite;
+}
+
+@keyframes blink {
+  0% { opacity: 1; }
+  50% { opacity: 0.6; }
+  100% { opacity: 1; }
+}
+
 .minimized-content {
   display: flex;
   align-items: center;
-  padding: 12px 16px;
-  gap: 12px;
   height: 100%;
   background: linear-gradient(135deg, #4361ee, #3f37c9);
   color: white;
+  padding: 0 10px;
+  cursor: move;
 }
 
-.mini-avatar {
-  width: 36px;
-  height: 36px;
+.remote-video-preview {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.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);
+}
+
+.placeholder-avatar {
+  width: 30px;
+  height: 30px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: white;
   font-weight: bold;
-  font-size: 14px;
-  flex-shrink: 0;
+  color: white;
 }
 
 .mini-info {
   flex: 1;
   min-width: 0;
+  padding: 0 10px;
 }
 
 .mini-name {
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 600;
   white-space: nowrap;
   overflow: hidden;
@@ -438,36 +553,15 @@ onUnmounted(() => {
 }
 
 .mini-status {
-  font-size: 12px;
+  font-size: 11px;
   opacity: 0.8;
 }
 
-.call-indicator {
-  display: flex;
-  align-items: center;
-}
-
-.pulse-dot {
-  width: 8px;
-  height: 8px;
-  background: #4caf50;
-  border-radius: 50%;
-  animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
-  0% { transform: scale(1); opacity: 1; }
-  50% { transform: scale(1.2); opacity: 0.7; }
-  100% { transform: scale(1); opacity: 1; }
-}
-
 .video-area {
   position: relative;
-  flex: 1;
+  height: calc(100% - 116px);
   background: #000;
   overflow: hidden;
-  display: flex;
-  flex-direction: column;
 }
 
 .remote-video-container {
@@ -476,12 +570,6 @@ onUnmounted(() => {
   position: relative;
 }
 
-.remote-video {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
 .video-placeholder {
   width: 100%;
   height: 100%;
@@ -495,19 +583,19 @@ onUnmounted(() => {
 }
 
 .placeholder-avatar {
-  width: 60px;
-  height: 60px;
+  width: 80px;
+  height: 80px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 24px;
+  font-size: 32px;
   font-weight: bold;
-  margin-bottom: 12px;
+  margin-bottom: 15px;
 }
 
 .placeholder-text {
-  font-size: 16px;
+  font-size: 18px;
   font-weight: 500;
   margin-bottom: 8px;
 }
@@ -519,20 +607,41 @@ onUnmounted(() => {
 
 .local-video-container {
   position: absolute;
-  bottom: 12px;
-  right: 12px;
-  width: 80px;
-  height: 60px;
+  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);
 }
 
-.local-video {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+.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;
+}
+
+.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;
 }
 
 .call-controls {
@@ -542,6 +651,7 @@ onUnmounted(() => {
   display: flex;
   justify-content: center;
   gap: 16px;
+  height: 60px;
 }
 
 .control-btn {
@@ -581,28 +691,35 @@ onUnmounted(() => {
 }
 
 /* 响应式设计 */
-@media (max-width: 768px) {
-  .video-call-container {
-    width: 280px;
-    height: 200px;
+@media (max-width: 600px) {
+  .video-call-container:not(.minimized) {
+    width: 95vw !important;
+    height: 75vh !important;
+    max-width: 95vw;
+    max-height: 75vh;
   }
 
-  .video-call-container.minimized {
-    width: 180px;
-    height: 50px;
-  }
-
-  .local-video-container {
-    width: 60px;
-    height: 45px;
-    bottom: 8px;
-    right: 8px;
+  .call-header,
+  .call-controls {
+    padding: 8px;
   }
 
   .control-btn {
-    width: 40px;
-    height: 40px;
+    width: 36px;
+    height: 36px;
     font-size: 14px;
   }
+
+  .local-video-container,
+  .local-placeholder-container {
+    width: 80px;
+    height: 60px;
+  }
 }
-</style>
+
+@media (max-height: 500px) {
+  .video-call-container:not(.minimized) {
+    height: 95vh !important;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/composables/useMediaPreview.js b/src/composables/useMediaPreview.js
index 6edd95f..b9e93b9 100644
--- a/src/composables/useMediaPreview.js
+++ b/src/composables/useMediaPreview.js
@@ -2,22 +2,33 @@ import { ref } from "vue"
 
 const visible = ref(false)
 const mediaData = ref(null)
+const previewType = ref("image")
 
 export function useMediaPreview() {
-  const previewMedia = (url, type) => {
-    mediaData.value = { url, type }
-    visible.value = true
-  }
+    const showPreview = (content, type = "image") => {
+        console.log("显示媒体预览:", content, type)
+        mediaData.value = content
+        previewType.value = type
+        visible.value = true
+    }
 
-  const closePreview = () => {
-    visible.value = false
-    mediaData.value = null
-  }
+    const hidePreview = () => {
+        visible.value = false
+        mediaData.value = null
+        previewType.value = "image"
+    }
 
-  return {
-    visible,
-    mediaData,
-    previewMedia,
-    closePreview,
-  }
+    return {
+        visible,
+        mediaData,
+        previewType,
+        showPreview,
+        hidePreview,
+    }
+}
+
+// 导出一个函数供组件直接使用
+export default function previewMedia(content, type = "image") {
+    const { showPreview } = useMediaPreview()
+    showPreview(content, type)
 }
diff --git a/src/composables/useWebRTC.js b/src/composables/useWebRTC.js
new file mode 100644
index 0000000..c71b5ae
--- /dev/null
+++ b/src/composables/useWebRTC.js
@@ -0,0 +1,132 @@
+import { ref } from "vue"
+
+export function useWebRTC() {
+    const localStream = ref(null)
+    const remoteStream = ref(null)
+    const peerConnection = ref(null)
+    const isConnected = ref(false)
+    const isConnecting = ref(false)
+
+    const configuration = {
+        iceServers: [{ urls: "stun:stun.l.google.com:19302" }, { urls: "stun:stun1.l.google.com:19302" }],
+    }
+
+    const createPeerConnection = () => {
+        peerConnection.value = new RTCPeerConnection(configuration)
+
+        peerConnection.value.onicecandidate = (event) => {
+            if (event.candidate) {
+                // 发送ICE候选到对端
+                console.log("ICE候选:", event.candidate)
+            }
+        }
+
+        peerConnection.value.ontrack = (event) => {
+            remoteStream.value = event.streams[0]
+            console.log("接收到远程流:", event.streams[0])
+        }
+
+        peerConnection.value.onconnectionstatechange = () => {
+            const state = peerConnection.value.connectionState
+            console.log("连接状态变化:", state)
+
+            if (state === "connected") {
+                isConnected.value = true
+                isConnecting.value = false
+            } else if (state === "disconnected" || state === "failed") {
+                isConnected.value = false
+                isConnecting.value = false
+            }
+        }
+
+        return peerConnection.value
+    }
+
+    const getLocalMedia = async (constraints = { audio: true, video: true }) => {
+        try {
+            localStream.value = await navigator.mediaDevices.getUserMedia(constraints)
+            return localStream.value
+        } catch (error) {
+            console.error("获取本地媒体失败:", error)
+            throw error
+        }
+    }
+
+    const createOffer = async () => {
+        if (!peerConnection.value) {
+            createPeerConnection()
+        }
+
+        // 添加本地流到连接
+        if (localStream.value) {
+            localStream.value.getTracks().forEach((track) => {
+                peerConnection.value.addTrack(track, localStream.value)
+            })
+        }
+
+        const offer = await peerConnection.value.createOffer()
+        await peerConnection.value.setLocalDescription(offer)
+
+        return offer
+    }
+
+    const createAnswer = async (offer) => {
+        if (!peerConnection.value) {
+            createPeerConnection()
+        }
+
+        // 添加本地流到连接
+        if (localStream.value) {
+            localStream.value.getTracks().forEach((track) => {
+                peerConnection.value.addTrack(track, localStream.value)
+            })
+        }
+
+        await peerConnection.value.setRemoteDescription(offer)
+        const answer = await peerConnection.value.createAnswer()
+        await peerConnection.value.setLocalDescription(answer)
+
+        return answer
+    }
+
+    const setRemoteAnswer = async (answer) => {
+        await peerConnection.value.setRemoteDescription(answer)
+    }
+
+    const addIceCandidate = async (candidate) => {
+        if (peerConnection.value && peerConnection.value.remoteDescription) {
+            await peerConnection.value.addIceCandidate(candidate)
+        }
+    }
+
+    const closeConnection = () => {
+        if (localStream.value) {
+            localStream.value.getTracks().forEach((track) => track.stop())
+            localStream.value = null
+        }
+
+        if (peerConnection.value) {
+            peerConnection.value.close()
+            peerConnection.value = null
+        }
+
+        remoteStream.value = null
+        isConnected.value = false
+        isConnecting.value = false
+    }
+
+    return {
+        localStream,
+        remoteStream,
+        peerConnection,
+        isConnected,
+        isConnecting,
+        createPeerConnection,
+        getLocalMedia,
+        createOffer,
+        createAnswer,
+        setRemoteAnswer,
+        addIceCandidate,
+        closeConnection,
+    }
+}
diff --git a/src/composables/useWebSocket.js b/src/composables/useWebSocket.js
index 468cbca..8d2bd8b 100644
--- a/src/composables/useWebSocket.js
+++ b/src/composables/useWebSocket.js
@@ -1,3 +1,4 @@
+import { ref, onMounted, onUnmounted } from "vue"
 import { useUserStore } from "@/stores/user"
 import { useChatStore } from "@/stores/chat"
 
@@ -5,76 +6,243 @@ export function useWebSocket() {
   const userStore = useUserStore()
   const chatStore = useChatStore()
 
+  const socket = ref(null)
+  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 {
-      chatStore.connectionStatus = "connecting"
+      const wsUrl = import.meta.env.VITE_WS_URL || "ws://localhost:12080/ws"
+      socket.value = new WebSocket(wsUrl)
 
-      // const wsUrl = "ws://g-ws.nailaoyun.cn/ws"
-      const wsUrl = "ws://127.0.0.1:12080/ws"
-      console.log("连接WebSocket:", wsUrl)
-
-      chatStore.socket = new WebSocket(wsUrl)
-
-      chatStore.socket.onopen = () => {
-        console.log("WebSocket连接已建立")
-        chatStore.connectionStatus = "connected"
-
-        // 发送绑定请求
-        if (userStore.currentUser) {
-          const bindMsg = {
-            request_type: "bind",
-            sender_user_id: userStore.currentUser.id.toString(),
-          }
-          chatStore.socket.send(JSON.stringify(bindMsg))
-        }
-      }
-
-      chatStore.socket.onmessage = (event) => {
-        try {
-          const message = JSON.parse(event.data)
-          console.log("收到消息:", message)
-
-          // 检查是否是系统消息
-          if (message.clientId) return
-
-          chatStore.handleIncomingMessage(message, userStore.currentUser.id)
-        } catch (e) {
-          console.error("解析消息失败:", e)
-        }
-      }
-
-      chatStore.socket.onclose = (event) => {
-        console.log("WebSocket连接已关闭, 代码:", event.code, "原因:", event.reason)
-        chatStore.connectionStatus = "disconnected"
-
-        // 智能重连策略
-        if (event.code !== 1000) {
-          setTimeout(() => {
-            console.log("尝试重新连接WebSocket...")
-            connectWebSocket()
-          }, 3000)
-        }
-      }
-
-      chatStore.socket.onerror = (error) => {
-        console.error("WebSocket错误:", error)
-        chatStore.connectionStatus = "disconnected"
-      }
+      socket.value.onopen = handleOpen
+      socket.value.onmessage = handleMessage
+      socket.value.onclose = disconnectWebSocket
+      socket.value.onerror = handleError
     } catch (error) {
-      console.error("连接WebSocket失败:", error)
+      console.error("WebSocket连接失败:", error)
+      isConnecting.value = false
       chatStore.connectionStatus = "disconnected"
     }
   }
 
-  const disconnectWebSocket = () => {
-    if (chatStore.socket) {
-      chatStore.socket.close()
-      chatStore.socket = null
+  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
+  }
+
+  const handleMessage = (event) => {
+    try {
+      const data = JSON.parse(event.data)
+
+      console.log("收到消息:", data)
+      // 处理客户端ID
+      if (data?.clientId) {
+        // console.log("收到客户端ID:", data.clientId)
+        // userStore.setClientId(data.clientId)
+        //
+        // // 绑定用户
+        // if (userStore.currentUser?.id) {
+          bindUser(userStore.currentUser.id)
+        // }
+        return
+      }
+
+      // 处理通话信令
+      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 disconnectWebSocket = (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, 30000)
+        console.log(`尝试重连 (${reconnectAttempts.value}/${maxReconnectAttempts})`)
+        connect()
+      }, reconnectDelay.value)
+    }
+  }
+
+  const handleError = (error) => {
+    console.error("WebSocket错误:", error)
+    isConnecting.value = false
+    chatStore.connectionStatus = "disconnected"
+  }
+
+  const handleCallSignal = (data) => {
+    console.log("收到通话信令:", data)
+
+    // 根据通话状态处理
+    switch (data.call_status) {
+      case "invite":
+        // 显示来电通知
+        showIncomingCallDialog(data)
+        break
+      case "accepted":
+        // 通话被接受
+        handleCallAccepted(data)
+        break
+      case "rejected":
+        // 通话被拒绝
+        handleCallRejected(data)
+        break
+      case "ended":
+        // 通话结束
+        handleCallEnded(data)
+        break
+      case "candidate":
+        // ICE候选
+        handleIceCandidate(data)
+        break
+    }
+  }
+
+  const bindUser = (userId) => {
+    console.log(userId, 'ssssssssss')
+    if (!isConnected.value || !userId) return
+
+    const bindMessage = {
+      request_type: "bind",
+      sender_user_id: userId,
+      client_id: userStore.clientId,
+    }
+
+    send(bindMessage)
+  }
+
+  const send = (message) => {
+    if (!isConnected.value || !socket.value) {
+      console.error("WebSocket未连接，无法发送消息")
+      return false
+    }
+
+    try {
+      socket.value.send(JSON.stringify(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(signal)
+  }
+
+  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).substr(2, 9)
+  }
+
+  onMounted(() => {
+    connectWebSocket()
+  })
+
+  onUnmounted(() => {
+    disconnectWebSocket()
+  })
+
   return {
+    socket,
+    isConnected,
+    isConnecting,
     connectWebSocket,
     disconnectWebSocket,
+    send,
+    sendMessage,
+    sendCallSignal,
+    bindUser,
+    generateCallId,
   }
 }
+
+// 全局通话处理函数
+const incomingCallDialog = null
+const currentCall = null
+
+function showIncomingCallDialog(callData) {
+  // 这里应该显示来电弹窗
+  console.log("显示来电弹窗:", callData)
+
+  // 创建来电通知
+  if ("Notification" in window && Notification.permission === "granted") {
+    new Notification(`${callData.sender_user_id} 邀请您进行${callData.message_type === 6 ? "视频" : "语音"}通话`, {
+      icon: "/favicon.ico",
+      tag: "incoming-call",
+    })
+  }
+}
+
+function handleCallAccepted(data) {
+  console.log("通话被接受:", data)
+  // 开始WebRTC连接
+}
+
+function handleCallRejected(data) {
+  console.log("通话被拒绝:", data)
+  // 显示拒绝消息
+}
+
+function handleCallEnded(data) {
+  console.log("通话结束:", data)
+  // 清理通话状态
+}
+
+function handleIceCandidate(data) {
+  console.log("收到ICE候选:", data)
+  // 处理ICE候选
+}
diff --git a/src/views/Chat.vue b/src/views/Chat.vue
index bc4976e..2f7f2d4 100644
--- a/src/views/Chat.vue
+++ b/src/views/Chat.vue
@@ -16,7 +16,7 @@
     <!-- 主聊天容器 -->
     <div class="flex-1 max-w-7xl mx-auto bg-white/90 backdrop-blur-sm rounded-2xl shadow-2xl overflow-hidden flex z-10">
       <!-- 侧边导航 -->
-      <SideNavigation @nav-change="handleNavChange" />
+      <SideNavigation :current-view="currentNav" @nav-change="handleNavChange" />
 
       <!-- 好友列表 -->
       <FriendList