前端：

1、更新界面图标
2、修改消息缓存逻辑
3、新增清空未读消息数
后端：
1、修复不同时区导致的时间显示问题
2、新增清空未读消息数接口

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. 列表区修复 */

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>

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>

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 {

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; }