backend/IM_API/Configs/MapperConfig.cs

@@ -26,7 +26,9 @@ namespace IM_API.Configs
                 .ForMember(dest => dest.IsDeleted,opt => opt.MapFrom(src => 0))
                 ;
             //好友信息模型转换
-            CreateMap<Friend, FriendInfoDto>();
+            CreateMap<Friend, FriendInfoDto>()
+                .ForMember(dest => dest.UserInfo, opt => opt.MapFrom(src => src.FriendNavigation))
+                ;
             //好友请求通过后新增好友关系
             CreateMap<FriendRequest, Friend>()
                 .ForMember(dest => dest.UserId , opt => opt.MapFrom(src => src.RequestUser))

backend/IM_API/Dtos/FriendDto.cs

@@ -18,6 +18,7 @@ namespace IM_API.Dtos
         public string RemarkName { get; init; } = string.Empty;
 
         public string? Avatar { get; init; }
+        public UserInfoDto UserInfo { get; init; }
     }
 
     public record FriendRequestHandleDto

backend/IM_API/Services/FriendService.cs

@@ -63,7 +63,7 @@ namespace IM_API.Services
 
         public async Task<List<FriendInfoDto>> GetFriendListAsync(int userId, int page, int limit, bool desc)
         {
-            var query = _context.Friends.Where(x => x.UserId == userId && x.Status == (sbyte)FriendStatus.Added);
+            var query = _context.Friends.Include(u => u.FriendNavigation).Where(x => x.UserId == userId && x.Status == (sbyte)FriendStatus.Added);
             if (desc)
             {
                 query = query.OrderByDescending(x => x.UserId);

frontend/web/src/views/Main.vue

@@ -8,7 +8,7 @@
       <router-link class="nav-item" to="/contacts" active-class="active">👤</router-link>
       <router-link class="nav-item" to="/settings" active-class="active">⚙️</router-link>
     </nav>
-    <router-view></router-view>
+    <router-view @start-chat="handleStartChat"></router-view>
     
   </div>
 </template>
@@ -17,11 +17,25 @@
 import { ref, watch } from 'vue'
 import { useAuthStore } from '@/stores/auth';
 import defaultAvatar from '@/assets/default_avatar.png'
+import { useRouter } from 'vue-router';
 
+const router = useRouter();
 const authStore = useAuthStore();
 const myInfo = authStore.userInfo;
 
+// 监听用户信息变化（如头像更新）
+watch(() => authStore.userInfo, (newInfo) => {
+  myInfo.value = newInfo;
+});
 
+function handleStartChat(contact) {
+  if (contact && contact.id) {
+    // 导航到消息页面并传递联系人 ID
+    router.push(`/messages/chat/${contact.id}`);
+  } else {
+    console.error('Invalid contact object:', contact);
+  }
+}
 </script>
 
 <style scoped>
@@ -221,6 +235,6 @@ textarea {
 .time { font-size: 11px; color: #999; }
 .last-msg { font-size: 12px; color: #888; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
-.nav-item { font-size: 24px; cursor: pointer; opacity: 0.5; }
+.nav-item { font-size: 24px; cursor: pointer; opacity: 0.5; background-color: #fff; border-radius: 5px; text-decoration: none;}
 .nav-item.active { opacity: 1; }
 </style>

frontend/web/src/views/contact/ContactList.vue

@@ -87,6 +87,7 @@
 import { ref, computed, onMounted } from 'vue'
 import { friendService } from '@/services/friend'
 
+
 const searchQuery = ref('')
 const activeContactId = ref(null)
 
@@ -94,7 +95,7 @@ const contacts1 = ref([]);
 
 // 模拟联系人数据
 const contacts = ref([
-  { id: 101, name: '南浔', wxid: 'nan_xun_99', region: '浙江 杭州', avatar: 'https://i.pravatar.cc/40?1', gender: 'f', signature: '山有木兮木有枝', alias: '南酱' },
+  { id: 1, name: '南浔', wxid: 'nan_xun_99', region: '浙江 杭州', avatar: 'https://i.pravatar.cc/40?1', gender: 'f', signature: '山有木兮木有枝', alias: '南酱' },
   { id: 102, name: '老张', wxid: 'zhang_boss', region: '广东 深圳', avatar: 'https://i.pravatar.cc/40?10', gender: 'm', signature: '搞钱要紧', alias: '张总' },
   { id: 103, name: 'UI小王', wxid: 'wang_design', region: '上海 黄浦', avatar: 'https://i.pravatar.cc/40?5', gender: 'f', signature: '不改了，真的不改了', alias: '' },
   { id: 104, name: '测试组长', wxid: 'test_pro', region: '北京', avatar: 'https://i.pravatar.cc/40?8', gender: 'm', signature: 'Bug 哪里跑', alias: '铁面人' }
@@ -123,8 +124,12 @@ const loadContactList = async (page = 1,limit = 100) => {
   contacts1.value = res.data;
 }
 
+
+
 onMounted(async () => {
   await loadContactList();
+  const contacts = await friendService.getFriendList();
+  console.log(contacts) 
 })
 </script>
 
@@ -205,7 +210,7 @@ onMounted(async () => {
   align-items: center;
   justify-content: center;
   color: #fff;
-  font-size: 18px;
+  font-size: 16px;
 }
 .icon-box.orange { background: #faad14; }
 .icon-box.green { background: #52c41a; }