Merge pull request '前端：' (#47) from feature-nxdev into main

Reviewed-on: #47
2026-01-21 18:50:42 +08:00 · 2026-01-21 18:50:42 +08:00 · cca84f88c0
commit cca84f88c0
parent e18fb9db48 77744015de
21 changed files with 943 additions and 42 deletions
--- a/backend/IM_API/Application/EventHandlers/ConversationEventHandler.cs
+++ b/backend/IM_API/Application/EventHandlers/ConversationEventHandler.cs
@ -46,8 +46,10 @@ namespace IM_API.Application.EventHandlers
                }
                userAConversation.LastMessage = @event.MessageContent;
                userAConversation.LastReadMessageId = @event.MessageId;
+                userAConversation.LastMessageTime = @event.MessageCreated;
                userBConversation.LastMessage = @event.MessageContent;
                userBConversation.UnreadCount += 1;
+                userBConversation.LastMessageTime = @event.MessageCreated;
                _context.UpdateRange(userAConversation,userBConversation);
                await _context.SaveChangesAsync();
            }
--- a/backend/IM_API/Application/EventHandlers/SignalREventHandler.cs
+++ b/backend/IM_API/Application/EventHandlers/SignalREventHandler.cs
@ -23,7 +23,17 @@ namespace IM_API.Application.EventHandlers
        {
            if(@event.ChatType == Models.ChatType.PRIVATE)
            {
-                MessageBaseDto messageBaseDto = _mapper.Map<MessageBaseDto>(_mapper.Map<Message>(@event));
+                MessageBaseDto messageBaseDto = new MessageBaseDto
+                {
+                    MsgId = @event.MessageId.ToString(),
+                    ChatType = @event.ChatType.ToString(),
+                    Content = @event.MessageContent,
+                    GroupMemberId = null,
+                    ReceiverId = @event.MsgRecipientId,
+                    SenderId = @event.MsgSenderId,
+                    TimeStamp = @event.MessageCreated,
+                    Type = @event.MessageMsgType.ToString()
+                };
                await _hub.Clients.Users(@event.MsgRecipientId.ToString()).SendAsync("ReceiveMessage", messageBaseDto);
            }
        }
--- a/backend/IM_API/Configs/MapperConfig.cs
+++ b/backend/IM_API/Configs/MapperConfig.cs
@ -41,7 +41,7 @@ namespace IM_API.Configs
            CreateMap<FriendRequestDto, FriendRequest>()
                .ForMember(dest => dest.RequestUser , opt => opt.MapFrom(src => src.FromUserId))
                .ForMember(dest => dest.ResponseUser , opt => opt.MapFrom(src => src.ToUserId))
-                .ForMember(dest => dest.Created , opt => opt.MapFrom(src => DateTime.Now))
+                .ForMember(dest => dest.Created , opt => opt.MapFrom(src => DateTime.UtcNow))
                .ForMember(dest => dest.StateEnum , opt => opt.MapFrom(src => FriendRequestState.Pending))
                .ForMember(dest => dest.Description , opt => opt.MapFrom(src => src.Description))
                ;
@ -101,7 +101,7 @@ namespace IM_API.Configs
                .ForMember(dest => dest.TargetId, opt => opt.MapFrom(src => src.MsgRecipientId))
                .ForMember(dest => dest.UnreadCount, opt => opt.MapFrom(src => 0))
                .ForMember(dest => dest.StreamKey, opt => opt.MapFrom(src => src.StreamKey))
-                .ForMember(dest => dest.LastMessageTime, opt => opt.MapFrom(src => DateTime.Now))
+                .ForMember(dest => dest.LastMessageTime, opt => opt.MapFrom(src => DateTime.UtcNow))
                ;

            //创建会话对象
--- a/backend/IM_API/Hubs/ChatHub.cs
+++ b/backend/IM_API/Hubs/ChatHub.cs
@ -60,5 +60,17 @@ namespace IM_API.Hubs
            }
            return;
        }
+        public async Task ClearUnreadCount(int conversationId)
+        {
+            if (!Context.User.Identity.IsAuthenticated)
+            {
+                await Clients.Caller.SendAsync("ReceiveMessage", new BaseResponse<object?>(CodeDefine.AUTH_FAILED));
+                Context.Abort();
+                return;
+            }
+            var userIdStr = Context.User.FindFirstValue(ClaimTypes.NameIdentifier);
+            await _conversationService.ClearUnreadCountAsync(int.Parse(userIdStr), conversationId);
+            return;
+        }
    }
 }
--- a/backend/IM_API/Interface/Services/IConversationService.cs
+++ b/backend/IM_API/Interface/Services/IConversationService.cs
@ -35,5 +35,12 @@ namespace IM_API.Interface.Services
        /// <param name="conversationId"></param>
        /// <returns></returns>
        Task<ConversationDto> GetConversationByIdAsync(int userId, int conversationId);
+        /// <summary>
+        /// 清空未读消息
+        /// </summary>
+        /// <param name="userId"></param>
+        /// <param name="conversationId"></param>
+        /// <returns></returns>
+        Task<bool> ClearUnreadCountAsync(int userId, int conversationId);
    }
 }
--- a/backend/IM_API/Program.cs
+++ b/backend/IM_API/Program.cs
@ -3,6 +3,7 @@ using IM_API.Configs;
 using IM_API.Filters;
 using IM_API.Hubs;
 using IM_API.Models;
+using IM_API.Tools;
 using Microsoft.AspNetCore.Authentication.JwtBearer;
 using Microsoft.EntityFrameworkCore;
 using Microsoft.IdentityModel.Tokens;
@ -103,6 +104,10 @@ namespace IM_API
            builder.Services.AddControllers(options =>
            {
                options.Filters.Add<GlobalExceptionFilter>();
+            }).AddJsonOptions(options =>
+            {
+                // ±£³Ö ISO 8601 ¸ñÊ½
+                options.JsonSerializerOptions.Converters.Add(new UtcDateTimeConverter());
            });
            builder.Services.AddModelValidation(configuration);
            // Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
--- a/backend/IM_API/Services/ConversationService.cs
+++ b/backend/IM_API/Services/ConversationService.cs
@ -118,5 +118,21 @@ namespace IM_API.Services
            return dto;
        }
        #endregion
+
+        public async Task<bool> ClearUnreadCountAsync(int userId, int conversationId)
+        {
+            var conversation = await _context.Conversations.FirstOrDefaultAsync(x => x.UserId == userId && x.Id == conversationId);
+            if (conversation is null) throw new BaseException(CodeDefine.CONVERSATION_NOT_FOUND);
+            var message = await _context.Messages
+                .Where(x => x.StreamKey == conversation.StreamKey)
+                .OrderByDescending(x => x.Id)
+                .FirstOrDefaultAsync();
+            conversation.LastReadMessage = message;
+            conversation.UnreadCount = 0;
+            _context.Conversations.Update(conversation);
+            await _context.SaveChangesAsync();
+            return true;
+
+        }
    }
 }
--- a/backend/IM_API/Tools/UTCConverter.cs
+++ b/backend/IM_API/Tools/UTCConverter.cs
@ -0,0 +1,18 @@
+using System.Text.Json;
+
+namespace IM_API.Tools
+{
+    public class UtcDateTimeConverter : System.Text.Json.Serialization.JsonConverter<DateTime>
+    {
+        public override DateTime Read(ref Utf8JsonReader reader, Type typeToConvert, JsonSerializerOptions options)
+            => reader.GetDateTime();
+
+        public override void Write(Utf8JsonWriter writer, DateTime value, JsonSerializerOptions options)
+        {
+            // 如果 Kind 已经是 Utc，直接输出。
+            // 如果不是，先 SpecifyKind 再输出，确保不会发生时区偏移计算
+            var utcDate = value.Kind == DateTimeKind.Utc ? value : DateTime.SpecifyKind(value, DateTimeKind.Utc);
+            writer.WriteStringValue(utcDate.ToString("yyyy-MM-ddTHH:mm:ssZ"));
+        }
+    }
+}
--- a/frontend/web/.env
+++ b/frontend/web/.env
@ -1,2 +1,4 @@
+#VITE_API_BASE_URL = http://localhost:5202/api
+#VITE_SIGNALR_BASE_URL = http://localhost:5202/chat
 VITE_API_BASE_URL = http://localhost:5202/api
 VITE_SIGNALR_BASE_URL = http://localhost:5202/chat
--- a/frontend/web/package.json
+++ b/frontend/web/package.json
@ -7,7 +7,7 @@
    "node": "^20.19.0 || >=22.12.0"
  },
  "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
    "build": "vite build",
    "preview": "vite preview",
    "test:unit": "vitest",
--- a/frontend/web/src/components/addMenu.vue
+++ b/frontend/web/src/components/addMenu.vue
@ -0,0 +1,180 @@
+<template>
+  <div class="add-menu-container" v-click-outside="closeMenu">
+    <button class="add-btn" :class="{ active: isShow }" @click="toggleMenu">
+      <span class="plus-icon">+</span>
+    </button>
+
+    <Transition name="pop">
+      <div v-if="isShow" class="menu-card">
+        <div class="arrow"></div>
+        
+        <div class="menu-list">
+          <div class="menu-item" v-for="(item, index) in props.menuList" :key="index" @click="handleAction(item.action)">
+            <i class="icon" v-html="item.icon"></i>
+            <span>{{item.text}}</span>
+        </div>
+      </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup>
+import { ref, defineProps, onMounted, defineEmits } from 'vue';
+
+const props = defineProps({
+    menuList: {
+        type: Object,
+        required: true
+    }
+})
+
+const emit = defineEmits(['actionActive'])
+
+const isShow = ref(false);
+
+const toggleMenu = () => {
+  isShow.value = !isShow.value;
+};
+
+const closeMenu = () => {
+  isShow.value = false;
+};
+
+const handleAction = (type) => {
+    emit('actionActive', type);
+    isShow.value = false; // 点击后关闭
+  
+};
+
+/**
+ * 自定义指令：点击外部区域关闭菜单
+ * 也可以使用第三方库如 @vueuse/core 的 onClickOutside
+ */
+const vClickOutside = {
+  mounted(el, binding) {
+    el.clickOutsideEvent = (event) => {
+      if (!(el === event.target || el.contains(event.target))) {
+        binding.value();
+      }
+    };
+    document.addEventListener('click', el.clickOutsideEvent);
+  },
+  unmounted(el) {
+    document.removeEventListener('click', el.clickOutsideEvent);
+  },
+};
+</script>
+
+<style scoped>
+.add-menu-container {
+  position: relative;
+  display: inline-block;
+}
+
+/* 加号按钮样式 */
+.add-btn {
+  width: 32px;
+  height: 32px;
+  background: #dbdbdb;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+
+.add-btn:hover {
+  background:  #cccbcb;
+}
+/*
+.add-btn.active {
+  background: #007aff;
+  color: white;
+}
+  */
+
+.plus-icon {
+  font-size: 22px;
+  line-height: 1;
+  font-weight: 300;
+}
+
+/* 弹出卡片容器 */
+.menu-card {
+  position: absolute;
+  top: 45px;
+  right: 0;
+  width: 100px;
+  background: white;
+  border-radius: 10px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  z-index: 100;
+  transform-origin: top right;
+}
+
+/* 小三角 */
+.arrow {
+  position: absolute;
+  top: -6px;
+  right: 12px;
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid white;
+}
+
+/* 列表样式 */
+.menu-list {
+  padding: 6px 0;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  padding: 5px 5px;
+  cursor: pointer;
+  transition: background 0.2s;
+  color: #333;
+}
+
+.menu-item:hover {
+  background: #f5f5f5;
+}
+
+.menu-item:first-child:hover {
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+
+.menu-item:last-child:hover {
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+}
+
+.icon {
+  margin-right: 5px;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  /*width: 20px;*/
+}
+
+.menu-item span {
+  font-size: 12px;
+  /*font-weight: 400;*/
+}
+
+/* 弹出动画 */
+.pop-enter-active, .pop-leave-active {
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.pop-enter-from, .pop-leave-to {
+  opacity: 0;
+  transform: scale(0.9) translateY(-10px);
+}
+</style>
--- a/frontend/web/src/components/groups/GroupChatModal.vue
+++ b/frontend/web/src/components/groups/GroupChatModal.vue
@ -0,0 +1,256 @@
+<template>
+  <div class="modal-overlay" @click.self="$emit('close')">
+    <div class="chat-modal">
+      <div class="modal-header">
+        <div class="header-top">
+          <h3>群聊</h3>
+          <button class="close-btn" @click="$emit('close')">&times;</button>
+        </div>
+        <div class="search-bar">
+          <input 
+            v-model="searchQuery" 
+            type="text" 
+            placeholder="搜索群组..." 
+          />
+        </div>
+      </div>
+
+      <div class="chat-list">
+        <TransitionGroup name="list">
+          <div 
+            v-for="group in filteredGroups" 
+            :key="group.id" 
+            class="chat-item"
+            @click="handleSelect(group)"
+          >
+            <div 
+              class="avatar" 
+              :style="{ background: group.avatar ? `url(${group.avatar}) center/cover` : group.color }"
+            >
+              {{ group.avatar ? '' : group.name.charAt(0) }}
+            </div>
+
+            <div class="chat-info">
+              <div class="chat-name">{{ group.name }}</div>
+              <!--<div class="chat-preview">{{ group.lastMsg }}</div>-->
+            </div>
+            <!--
+            <div class="chat-meta">
+              <span class="time">{{ group.time }}</span>
+              <span v-if="group.unread" class="unread">{{ group.unread }}</span>
+            </div>
+            -->
+          </div>
+        
+        </TransitionGroup>
+
+        <div v-if="filteredGroups.length === 0" class="empty-state">
+          未找到相关群聊
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, defineProps } from 'vue';
+
+// 检查你的代码，确保 default 是一个返回数组的函数，且逗号、括号一一对应
+const props = defineProps({
+  initialGroups: {
+    type: Array,
+    default: () => [
+      { id: 1, name: '产品设计交流群', lastMsg: '张三: 确认一下原型图', time: '14:30', unread: 3, color: 'linear-gradient(45deg, #007AFF, #5AC8FA)' },
+      { id: 2, name: '技术研发部', lastMsg: '王五: Bug已修复并上线', time: '12:05', unread: 0, color: 'linear-gradient(45deg, #4CD964, #5AC8FA)' },
+      { id: 3, name: '周末户外徒步', lastMsg: '李四: 记得带雨伞', time: '昨天', unread: 12, color: 'linear-gradient(45deg, #FF9500, #FFCC00)' },
+      { id: 4, name: 'Family 家族群', lastMsg: '[图片]', time: '周一', unread: 0, color: 'linear-gradient(45deg, #5856D6, #AF52DE)' }, // 确保这里没有多余或缺失的逗号
+      { id: 5, name: 'Family 家族群', lastMsg: '[图片]', time: '周一', unread: 0, color: 'linear-gradient(45deg, #5856D6, #AF52DE)' },
+      { id: 6, name: 'Family 家族群', lastMsg: '[图片]', time: '周一', unread: 0, color: 'linear-gradient(45deg, #5856D6, #AF52DE)' },
+      { id: 7, name: 'Family 家族群', lastMsg: '[图片]', time: '周一', unread: 0, color: 'linear-gradient(45deg, #5856D6, #AF52DE)' },
+      { id: 8, name: 'Family 家族群', lastMsg: '[图片]', time: '周一', unread: 0, color: 'linear-gradient(45deg, #5856D6, #AF52DE)' },
+      { id: 9, name: 'Family 家族群', lastMsg: '[图片]', time: '周一', unread: 0, color: 'linear-gradient(45deg, #5856D6, #AF52DE)' }
+    ]
+  }
+}); // 检查这里是否漏掉了右括号 )
+
+
+const emit = defineEmits(['close', 'select']);
+const searchQuery = ref('');
+
+// 搜索过滤逻辑
+const filteredGroups = computed(() => {
+  return props.initialGroups.filter(g => 
+    g.name.toLowerCase().includes(searchQuery.value.toLowerCase())
+  );
+});
+
+const handleSelect = (group) => {
+  emit('select', group);
+};
+</script>
+
+<style scoped>
+/* 遮罩层 */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.2);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  backdrop-filter: blur(4px);
+  z-index: 1000;
+}
+
+/* 弹出层主容器 */
+.chat-modal {
+  width: 360px;
+  max-height: 80vh;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(20px);
+  border-radius: 28px;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.4);
+}
+
+/* 头部样式 */
+.modal-header {
+  padding: 20px 20px 10px;
+}
+
+.header-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.header-top h3 {
+  margin: 0;
+  font-size: 20px;
+  color: #1d1d1f;
+}
+
+.close-btn {
+  background: #eee;
+  border: none;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 搜索框 */
+.search-bar input {
+  width: 100%;
+  padding: 10px 15px;
+  border-radius: 12px;
+  border: none;
+  background: rgba(0, 0, 0, 0.05);
+  outline: none;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+
+/* 列表滚动区 */
+.chat-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px;
+}
+
+.chat-item {
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  border-radius: 18px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+  margin-bottom: 4px;
+}
+
+.chat-item:hover {
+  background: rgba(0, 122, 255, 0.08);
+}
+
+/* 头像 */
+.avatar {
+  width: 50px;
+  height: 50px;
+  border-radius: 15px;
+  margin-right: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.chat-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.chat-name {
+  font-weight: 600;
+  font-size: 16px;
+  color: #1d1d1f;
+  margin-bottom: 4px;
+}
+
+.chat-preview {
+  font-size: 13px;
+  color: #86868b;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.chat-meta {
+  text-align: right;
+  margin-left: 10px;
+}
+
+.time {
+  font-size: 12px;
+  color: #86868b;
+  display: block;
+  margin-bottom: 5px;
+}
+
+.unread {
+  background: #007AFF;
+  color: white;
+  font-size: 11px;
+  padding: 2px 7px;
+  border-radius: 10px;
+  font-weight: 500;
+}
+
+/* 列表过渡动画 */
+.list-enter-active, .list-leave-active {
+  transition: all 0.3s ease;
+}
+.list-enter-from, .list-leave-to {
+  opacity: 0;
+  transform: translateX(-10px);
+}
+
+.empty-state {
+  text-align: center;
+  padding: 40px 0;
+  color: #86868b;
+  font-size: 14px;
+}
+</style>
--- a/frontend/web/src/handler/messageHandler.js
+++ b/frontend/web/src/handler/messageHandler.js
@ -0,0 +1,15 @@
+import { useConversationStore } from "@/stores/conversation"
+
+export const messageHandler = (msg) => {
+    const conversationStore = useConversationStore();
+    const conversation = conversationStore.conversations.find(x => x.targetId == msg.senderId || x.targetId == msg.receiverId);
+    conversation.lastMessage = msg.content;
+    if (conversation.targetId == msg.receiverId) {
+        conversation.unreadCount = 0;
+    } else {
+        conversation.unreadCount += 1;
+    }
+    console.log(conversation)
+    conversation.dateTime = new Date().toISOString();
+
+}
--- a/frontend/web/src/stores/chat.js
+++ b/frontend/web/src/stores/chat.js
@ -10,8 +10,20 @@ export const useChatStore = defineStore('chat', {
        pageSize: 20
    }),
    actions: {
+        // 抽取统一的排序去重方法
+        pushAndSortMessages(newMsgs) {
+            const combined = [...this.messages, ...newMsgs];
+            // 1. 根据 msgId 或唯一 key 去重
+            const uniqueMap = new Map();
+            combined.forEach(m => uniqueMap.set(m.msgId || m.id, m));
+
+            // 2. 转换为数组并按时间戳升序排序 (旧的在前，新的在后)
+            this.messages = Array.from(uniqueMap.values()).sort((a, b) => {
+                return new Date(a.timeStamp).getTime() - new Date(b.timeStamp).getTime();
+            });
+        },
        async addMessage(msg, sessionId) {
-            await messagesDb.save({ ...msg, sessionId });
+            await messagesDb.save({ ...msg, sessionId, isLoading: false });
            this.messages.push({ ...msg, sessionId })
        },
        /**
@ -32,13 +44,13 @@ export const useChatStore = defineStore('chat', {
                const serverHistoryMsg = await this.fetchHistoryFromServer(this.activeConversationId, conversation.lastReadMessageId);
                //对消息进行过滤，防止重复消息
                const filterMsg = serverHistoryMsg.filter(m => !this.messages.find(exist => exist.msgId === m.msgId));
-                this.messages = [...filterMsg, ...this.messages]
+                this.pushAndSortMessages([...filterMsg, ...this.messages]);
            }
            //拉取新消息
            this.fetchNewMsgFromServier(this.activeConversationId).then((newMsg) => {
                //去重
                const filterNewMsg = newMsg.filter(m => !this.messages.find(exist => exist.msgId === m.msgId));
-                this.messages = [...filterNewMsg, ...this.messages]
+                this.pushAndSortMessages([...filterNewMsg, ...this.messages])
            });
        },
        /**
@ -88,7 +100,7 @@ export const useChatStore = defineStore('chat', {
            } else {
                const fetchMsg = await this.fetchHistoryFromServer(this.conversationId, this.messages[0].msgId);
                const newMsgs = fetchMsg.filter(m => !this.messages.find(exist => exist.msgId === m.msgId));
-                this.messages = [...newMsgs, ...this.messages]
+                this.pushAndSortMessages([...newMsgs, ...this.messages])
            }
        }
    }
--- a/frontend/web/src/stores/conversation.js
+++ b/frontend/web/src/stores/conversation.js
@ -9,6 +9,15 @@ export const useConversationStore = defineStore('conversation', {
    state: () => ({
        conversations: []
    }),
+    // stores/conversation.js
+    getters: {
+        // 始终根据时间戳倒序排列
+        sortedConversations: (state) => {
+            return [...state.conversations].sort((a, b) =>
+                new Date(b.dateTime) - new Date(a.dateTime)
+            );
+        }
+    },
    actions: {
        async addConversation(conversation) {
            await conversationDb.save(conversation);
--- a/frontend/web/src/stores/signalr.js
+++ b/frontend/web/src/stores/signalr.js
@ -4,6 +4,8 @@ import { useMessage } from "@/components/messages/useAlert";
 import { useAuthStore } from "./auth";
 import { useChatStore } from "./chat";
 import { authService } from "@/services/auth";
+import { generateSessionId } from "@/utils/sessionIdTools";
+import { messageHandler } from "@/handler/messageHandler";

 export const useSignalRStore = defineStore('signalr', {
    state: () => ({
@ -39,6 +41,7 @@ export const useSignalRStore = defineStore('signalr', {
        registerHandlers() {
            const chatStore = useChatStore()
            this.connection.on('ReceiveMessage', (msg) => {
+                messageHandler(msg);
                chatStore.addMessage(msg);
            });

@ -46,6 +49,11 @@ export const useSignalRStore = defineStore('signalr', {
            this.connection.onreconnected(() => { this.isConnected = true });

        },
+        /**
+         * 通过signalr发送消息
+         * @param {*} msg 
+         * @returns 
+         */
        async sendMsg(msg) {
            const message = useMessage()
            const chatStore = useChatStore()
@ -59,13 +67,24 @@ export const useSignalRStore = defineStore('signalr', {
                if (msg.msgId == null) {
                    msg.msgId = self.crypto.randomUUID();
                }
-                await this.connection.invoke("SendMessage", msg);
-                chatStore.addMessage(msg);
+                const sessionId = generateSessionId(msg.senderId, msg.receiverId);
+                this.connection.invoke("SendMessage", msg).then(() => {
+                    const msga = chatStore.messages.find(x => x.msgId == msg.msgId)
+                    if (msga.isLoading) {
+                        msga.isLoading = false;
+                    }
+                })
+                    ;
+                chatStore.addMessage({ ...msg, isLoading: true }, sessionId);
+                messageHandler(msg);
                console.log("消息发送成功!");
            } catch (err) {
                console.error("消息发送失败:", err);
                message.error("消息发送失败");
            }
+        },
+        async clearUnreadCount(conversationId) {
+            await this.connection.invoke("ClearUnreadCount", conversationId)
        }
    }
 })
--- a/frontend/web/src/views/Main.vue
+++ b/frontend/web/src/views/Main.vue
@ -4,9 +4,15 @@
      <div class="user-self">
        <img :src="myInfo?.avatar ?? defaultAvatar" class="avatar-std" />
      </div>
-      <router-link class="nav-item" to="/messages" active-class="active">💬</router-link>
-      <router-link class="nav-item" to="/contacts" active-class="active">👤</router-link>
-      <router-link class="nav-item" to="/settings" active-class="active">⚙️</router-link>
+      <router-link class="nav-item" to="/messages" active-class="active">
+        <i class="menuIcon" v-html="feather.icons['message-square'].toSvg()"></i>
+      </router-link>
+      <router-link class="nav-item" to="/contacts" active-class="active">
+        <i class="menuIcon" v-html="feather.icons['user'].toSvg()"></i>
+      </router-link>
+      <router-link class="nav-item" to="/settings" active-class="active">
+        <i class="menuIcon" v-html="feather.icons['settings'].toSvg()"></i>
+      </router-link>
    </nav>
    <router-view @start-chat="handleStartChat"></router-view>
    
@ -18,6 +24,7 @@ import { ref, watch } from 'vue'
 import { useAuthStore } from '@/stores/auth';
 import defaultAvatar from '@/assets/default_avatar.png'
 import { useRouter } from 'vue-router';
+import feather from 'feather-icons';

 const router = useRouter();
 const authStore = useAuthStore();
@ -55,13 +62,19 @@ function handleStartChat(contact) {
 .nav-sidebar {
  width: 60px;
  flex-shrink: 0;
-  background: #282828;
+  background: #e9e9e9;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  gap: 24px;
 }
+
+.menuIcon {
+  background-color: #e9e9e9;
+  color: black;
+}
+
 .user-self { margin-bottom: 10px; }

 /* 2. 列表区修复 */
--- a/frontend/web/src/views/Test.vue
+++ b/frontend/web/src/views/Test.vue
@ -1,30 +1,254 @@
 <template>
+  <div class="modal-overlay" @click.self="$emit('close')">
+    <div class="chat-modal">
+      <div class="modal-header">
+        <div class="header-top">
+          <h3>消息中心</h3>
+          <button class="close-btn" @click="$emit('close')">&times;</button>
+        </div>
+        <div class="search-bar">
+          <input 
+            v-model="searchQuery" 
+            type="text" 
+            placeholder="搜索群组..." 
+          />
+        </div>
+      </div>

-<div id="Test">
-<MyInput icon-name="user"></MyInput>
-<MyButton @click="handler">登录...</MyButton>
-</div>
+      <div class="chat-list">
+        <TransitionGroup name="list">
+          <div 
+            v-for="group in filteredGroups" 
+            :key="group.id" 
+            class="chat-item"
+            @click="handleSelect(group)"
+          >
+            <div 
+              class="avatar" 
+              :style="{ background: group.avatar ? `url(${group.avatar}) center/cover` : group.color }"
+            >
+              {{ group.avatar ? '' : group.name.charAt(0) }}
+            </div>

+            <div class="chat-info">
+              <div class="chat-name">{{ group.name }}</div>
+              <div class="chat-preview">{{ group.lastMsg }}</div>
+            </div>
+
+            <div class="chat-meta">
+              <span class="time">{{ group.time }}</span>
+              <span v-if="group.unread" class="unread">{{ group.unread }}</span>
+            </div>
+          </div>
+        </TransitionGroup>
+
+        <div v-if="filteredGroups.length === 0" class="empty-state">
+          未找到相关群聊
+        </div>
+      </div>
+    </div>
+  </div>
 </template>

 <script setup>
-import MyInput from '@/components/IconInput.vue';
-import MyButton from '@/components/MyButton.vue';
-import { useMessage } from '@/components/messages/useAlert';
+import { ref, computed, defineProps } from 'vue';

-const message = useMessage();
-const handler = () => {
-    message.success('成功')
-}
+// 检查你的代码，确保 default 是一个返回数组的函数，且逗号、括号一一对应
+const props = defineProps({
+  initialGroups: {
+    type: Array,
+    default: () => [
+      { id: 1, name: '产品设计交流群', lastMsg: '张三: 确认一下原型图', time: '14:30', unread: 3, color: 'linear-gradient(45deg, #007AFF, #5AC8FA)' },
+      { id: 2, name: '技术研发部', lastMsg: '王五: Bug已修复并上线', time: '12:05', unread: 0, color: 'linear-gradient(45deg, #4CD964, #5AC8FA)' },
+      { id: 3, name: '周末户外徒步', lastMsg: '李四: 记得带雨伞', time: '昨天', unread: 12, color: 'linear-gradient(45deg, #FF9500, #FFCC00)' },
+      { id: 4, name: 'Family 家族群', lastMsg: '[图片]', time: '周一', unread: 0, color: 'linear-gradient(45deg, #5856D6, #AF52DE)' }, // 确保这里没有多余或缺失的逗号
+      { id: 5, name: 'Family 家族群', lastMsg: '[图片]', time: '周一', unread: 0, color: 'linear-gradient(45deg, #5856D6, #AF52DE)' },
+      { id: 6, name: 'Family 家族群', lastMsg: '[图片]', time: '周一', unread: 0, color: 'linear-gradient(45deg, #5856D6, #AF52DE)' },
+      { id: 7, name: 'Family 家族群', lastMsg: '[图片]', time: '周一', unread: 0, color: 'linear-gradient(45deg, #5856D6, #AF52DE)' },
+      { id: 8, name: 'Family 家族群', lastMsg: '[图片]', time: '周一', unread: 0, color: 'linear-gradient(45deg, #5856D6, #AF52DE)' },
+      { id: 9, name: 'Family 家族群', lastMsg: '[图片]', time: '周一', unread: 0, color: 'linear-gradient(45deg, #5856D6, #AF52DE)' }
+    ]
+  }
+}); // 检查这里是否漏掉了右括号 )

+
+const emit = defineEmits(['close', 'select']);
+const searchQuery = ref('');
+
+// 搜索过滤逻辑
+const filteredGroups = computed(() => {
+  return props.initialGroups.filter(g => 
+    g.name.toLowerCase().includes(searchQuery.value.toLowerCase())
+  );
+});
+
+const handleSelect = (group) => {
+  emit('select', group);
+};
 </script>

-
 <style scoped>
-#Test {
-    width: 100%;
-    height: 100%;
-    background-color: white;
+/* 遮罩层 */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.2);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  backdrop-filter: blur(4px);
+  z-index: 1000;
 }

+/* 弹出层主容器 */
+.chat-modal {
+  width: 360px;
+  max-height: 80vh;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(20px);
+  border-radius: 28px;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.4);
+}
+
+/* 头部样式 */
+.modal-header {
+  padding: 20px 20px 10px;
+}
+
+.header-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.header-top h3 {
+  margin: 0;
+  font-size: 20px;
+  color: #1d1d1f;
+}
+
+.close-btn {
+  background: #eee;
+  border: none;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 搜索框 */
+.search-bar input {
+  width: 100%;
+  padding: 10px 15px;
+  border-radius: 12px;
+  border: none;
+  background: rgba(0, 0, 0, 0.05);
+  outline: none;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+
+/* 列表滚动区 */
+.chat-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px;
+}
+
+.chat-item {
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  border-radius: 18px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+  margin-bottom: 4px;
+}
+
+.chat-item:hover {
+  background: rgba(0, 122, 255, 0.08);
+}
+
+/* 头像 */
+.avatar {
+  width: 50px;
+  height: 50px;
+  border-radius: 15px;
+  margin-right: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.chat-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.chat-name {
+  font-weight: 600;
+  font-size: 16px;
+  color: #1d1d1f;
+  margin-bottom: 4px;
+}
+
+.chat-preview {
+  font-size: 13px;
+  color: #86868b;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.chat-meta {
+  text-align: right;
+  margin-left: 10px;
+}
+
+.time {
+  font-size: 12px;
+  color: #86868b;
+  display: block;
+  margin-bottom: 5px;
+}
+
+.unread {
+  background: #007AFF;
+  color: white;
+  font-size: 11px;
+  padding: 2px 7px;
+  border-radius: 10px;
+  font-weight: 500;
+}
+
+/* 列表过渡动画 */
+.list-enter-active, .list-leave-active {
+  transition: all 0.3s ease;
+}
+.list-enter-from, .list-leave-to {
+  opacity: 0;
+  transform: translateX(-10px);
+}
+
+.empty-state {
+  text-align: center;
+  padding: 40px 0;
+  color: #86868b;
+  font-size: 14px;
+}
 </style>
--- a/frontend/web/src/views/contact/ContactList.vue
+++ b/frontend/web/src/views/contact/ContactList.vue
@ -3,7 +3,7 @@
    <aside class="contact-list-panel">
      <div class="search-section">
        <div class="search-box">
-          <span class="search-icon">🔍</span>
+          <span class="search-icon"><i v-html="feather.icons['search'].toSvg({width:15,height:15})"></i></span>
          <input v-model="searchQuery" placeholder="搜索联系人" />
        </div>
      </div>
@ -11,15 +11,15 @@
      <div class="scroll-area">
        <div class="fixed-entries">
          <div class="list-item mini">
-            <div class="icon-box orange">👤+</div>
+            <div class="icon-box orange" v-html="feather.icons['user-plus'].toSvg()"></div>
            <div class="name">新的朋友</div>
          </div>
-          <div class="list-item mini">
-            <div class="icon-box green">👥</div>
+          <div class="list-item mini" @click="showGroupList">
+            <div class="icon-box green" v-html="feather.icons['users'].toSvg()"></div>
            <div class="name">群聊</div>
          </div>
          <div class="list-item mini">
-            <div class="icon-box blue">🏷️</div>
+            <div class="icon-box blue" v-html="feather.icons['tag'].toSvg()"></div>
            <div class="name">标签</div>
          </div>
        </div>
@ -81,11 +81,20 @@
      </div>
    </main>
  </div>
+  <Transition>
+    <GroupChatModal 
+        v-if="groupModal" 
+        @close="groupModal = false"
+        @select="handleChatSelect"
+      />
+  </Transition>
 </template>

 <script setup>
 import { ref, computed, onMounted } from 'vue'
 import { friendService } from '@/services/friend'
+import GroupChatModal from '@/components/groups/GroupChatModal.vue'
+import feather from 'feather-icons';


 const searchQuery = ref('')
@ -93,6 +102,8 @@ const activeContactId = ref(null)

 const contacts = ref([]);

+const groupModal = ref(false);
+

 const filteredContacts = computed(() => {
  const searchKey = searchQuery.value.toString().trim();
@ -128,6 +139,9 @@ const loadContactList = async (page = 1,limit = 100) => {
  contacts.value = res.data;
 }

+const showGroupList = () => {
+  groupModal.value = true;
+}


 onMounted(async () => {
@ -331,4 +345,15 @@ onMounted(async () => {
  margin-bottom: 10px;
  opacity: 0.2;
 }
+/* 4. 定义组件进场和退场的动画 */
+.fade-scale-enter-active,
+.fade-scale-leave-active {
+  transition: all 0.3s ease;
+}
+
+.fade-scale-enter-from,
+.fade-scale-leave-to {
+  opacity: 0;
+  transform: scale(0.9) translateY(10px);
+}
 </style>
--- a/frontend/web/src/views/messages/MessageContent.vue
+++ b/frontend/web/src/views/messages/MessageContent.vue
@ -3,8 +3,8 @@
    <header class="chat-header">
      <span class="title">{{ conversationInfo?.targetName || '未选择会话' }}</span>
      <div class="actions">
-        <button @click="startCall('video')">📹</button>
-        <button @click="startCall('voice')">📞</button>
+        <button @click="startCall('video')" v-html="feather.icons['video'].toSvg({width:16, height: 16})"></button>
+        <button @click="startCall('voice')" v-html="feather.icons['phone'].toSvg({width:16, height: 16})"></button>
      </div>
    </header>

@ -16,7 +16,12 @@
          <div class="bubble">
            <div v-if="m.type === 'Text'">{{ m.content }}</div>
            <div v-else-if="m.type === 'emoji'" class="emoji-msg">{{ m.content }}</div>
+            <div class="status" v-if="m.senderId == myInfo.id">
+              <i v-if="m.isFail" style="color: red;" v-html="feather.icons['alert-circle'].toSvg({width:18, height: 18})"></i>
+              <i v-if="m.isLoading" class="loaderIcon" v-html="feather.icons['loader'].toSvg({width:18, height: 18})"></i>
            </div>
+            </div>
+            
          <span class="msg-time">{{ formatDate(m.timeStamp) }}</span>
        </div>
      </div>
@ -24,9 +29,11 @@

    <footer class="chat-footer">
      <div class="toolbar">
-        <button @click="toggleEmoji">😀</button>
+        <button class="tool-btn" @click="toggleEmoji" v-html="feather.icons['smile'].toSvg({width:18, height: 18})">
+        </button>
        <label class="tool-btn">
-          📁 <input type="file" hidden @change="handleFile" />
+          <i v-html="feather.icons['file'].toSvg({width:18, height: 18})"></i>
+          <input type="file" hidden @change="handleFile" />
        </label>
      </div>
      <textarea 
@ -51,6 +58,7 @@ import { useChatStore } from '@/stores/chat';
 import { generateSessionId } from '@/utils/sessionIdTools';
 import { useSignalRStore } from '@/stores/signalr';
 import { useConversationStore } from '@/stores/conversation';
+import feather from 'feather-icons';

 const props = defineProps({
    id:{
@ -76,6 +84,8 @@ watch(
  () => chatStore.messages,
  async (newVal) => {
    scrollToBottom();
+    conversationStore.conversations.find(x => x.id == conversationInfo.value.id).unreadCount = 0;
+    signalRStore.clearUnreadCount(conversationInfo.value.id);
  },
  {deep: true}
 );
@ -100,8 +110,10 @@ const msg = {
    content: input.value, 
    timeStamp: new Date().toISOString() // 对应 DateTime，建议存标准 ISO 字符串
 };
+  msg.isLoading = false;
  await signalRStore.sendMsg(msg);
  input.value = ''; // 清空输入框
+  msg.isLoading = false;
 }

 // 通话模拟
@ -159,6 +171,10 @@ onMounted(async () => {
  border-bottom: 1px solid #e0e0e0;
 }

+.tool-btn {
+  border: 0;
+  background-color: white;
+}
 /* 历史区域：自动撑开并处理滚动 */
 .chat-history {
  flex: 1;
@ -182,6 +198,28 @@ onMounted(async () => {
  margin-bottom: 24px;
  gap: 12px;
 }
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.loaderIcon {
+  display: inline-block; /* 必须是 block 或 inline-block 才能旋转 */
+  line-height: 0;
+  animation: spin 1s linear infinite; /* 1秒转一圈，线性速度，无限循环 */
+}
+
+.status {
+  position: absolute;
+  top: 30%;
+  left: -20px;
+}
+
 .msg.mine {
  flex-direction: row-reverse;
 }
@ -196,6 +234,8 @@ onMounted(async () => {
  max-width: 450px;
  word-break: break-all;
  background: #fff;
+  position: relative;
+  display: inline-block;
 }
 .mine .bubble {
  background: #95ec69;
@ -212,6 +252,7 @@ onMounted(async () => {
  font-size: 11px;
  color: #b2b2b2;
  margin-top: 4px;
+  display: block;
 }

 textarea {
--- a/frontend/web/src/views/messages/MessageList.vue
+++ b/frontend/web/src/views/messages/MessageList.vue
@ -3,9 +3,12 @@
        <aside class="list-panel">
      <div class="search-section">
        <div class="search-box">
-          <span class="search-icon">🔍</span>
+          <span class="search-icon"><i v-html="feather.icons['search'].toSvg({width:15,height:15})"></i></span>
          <input v-model="searchQuery" placeholder="搜索" />
        </div>
+        <div class="addMenu">
+          <AddMenu :menu-list="addMenuList" @action-active="actionHandler"/>
+        </div>
      </div>
      
      <div class="scroll-area">
@ -37,24 +40,49 @@ import { messageService } from '@/services/message'
 import defaultAvatar from '@/assets/default_avatar.png'
 import { formatDate } from '@/utils/formatDate'
 import { useConversationStore } from '@/stores/conversation'
+import AddMenu from '@/components/addMenu.vue'
+import feather from 'feather-icons'

 const conversationStore = useConversationStore();

 const searchQuery = ref('')
 const activeId = ref(1)
 const conversations = ref([]);
+const addMenuList = [
+  {
+    text: '发起群聊',
+    action: 'createGroup',
+    // 气泡/对话图标
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>`
+  },
+  {
+    text: '添加朋友',
+    action: 'addFriend',
+    // 人像+号图标
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="20" y1="8" x2="20" y2="14"></line><line x1="17" y1="11" x2="23" y2="11"></line></svg>`
+  },
+  {
+    text: '新建笔记',
+    action: 'newNote',
+    // 书本/笔记本图标
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>`
+  }
+];

-const filteredSessions = computed(() => conversationStore.conversations.filter(s => s.targetName.includes(searchQuery.value)))
+const filteredSessions = computed(() => conversationStore.sortedConversations.filter(s => s.targetName.includes(searchQuery.value)))

 function selectSession(s) {
  activeId.value = s.id
  router.push(`/messages/chat/${s.id}`)
 }

+function actionHandler(type){
+  console.log(type)
+}
+
 async function loadConversation() {
 const res = await messageService.getConversations(); 
 conversations.value = res.data;
- console.log(res)
 }

 onMounted(async () => {
@ -81,11 +109,14 @@ onMounted(async () => {
  flex-direction: column;
 }

+
 /* 修复：搜索框美化 */
 .search-section {
  padding: 20px 12px 10px 12px;
+  display: flex;
 }
 .search-box {
+  flex: 9;
  display: flex;
  align-items: center;
  background: #dbdbdb;
@ -101,6 +132,10 @@ onMounted(async () => {
  font-size: 12px;
  width: 100%;
 }
+.addMenu {
+  flex: 1;
+  padding-left: 5px;
+}

 .scroll-area { flex: 1; overflow-y: auto; }