diff --git a/backend/IM_API/Configs/ServiceCollectionExtensions.cs b/backend/IM_API/Configs/ServiceCollectionExtensions.cs
index bbb43c4..f811e2e 100644
--- a/backend/IM_API/Configs/ServiceCollectionExtensions.cs
+++ b/backend/IM_API/Configs/ServiceCollectionExtensions.cs
@@ -12,6 +12,7 @@ namespace IM_API.Configs
             services.AddTransient<IUserService, UserService>();
             services.AddTransient<IFriendSerivce, FriendService>();
             services.AddTransient<IMessageSevice, MessageService>();
+            services.AddTransient<IConversationService, ConversationService>();
             services.AddSingleton<IJWTService, JWTService>();
             services.AddSingleton<IRefreshTokenService,RedisRefreshTokenService>();
             return services;
diff --git a/backend/IM_API/Controllers/ConversationController.cs b/backend/IM_API/Controllers/ConversationController.cs
new file mode 100644
index 0000000..77db965
--- /dev/null
+++ b/backend/IM_API/Controllers/ConversationController.cs
@@ -0,0 +1,33 @@
+using IM_API.Dtos;
+using IM_API.Interface.Services;
+using IM_API.Models;
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Mvc;
+using System.Security.Claims;
+
+namespace IM_API.Controllers
+{
+    [Route("api/[controller]/[action]")]
+    [Authorize]
+    [ApiController]
+    public class ConversationController : ControllerBase
+    {
+        private readonly IConversationService _conversationSerivice;
+        private readonly ILogger<ConversationController> _logger;
+        public ConversationController(IConversationService conversationSerivice, ILogger<ConversationController> logger)
+        {
+            _conversationSerivice = conversationSerivice;
+            _logger = logger;
+        }
+        [HttpGet]
+        public async Task<IActionResult> List()
+        {
+            var userIdStr = User.FindFirstValue(ClaimTypes.NameIdentifier);
+            var list = await _conversationSerivice.GetConversationsAsync(int.Parse(userIdStr));
+            var res = new BaseResponse<List<Conversation>>(list);
+            return Ok(res);
+        }
+
+    }
+}
diff --git a/backend/IM_API/Interface/Services/IConversationService.cs b/backend/IM_API/Interface/Services/IConversationService.cs
index 9c4bf63..3f2aa5a 100644
--- a/backend/IM_API/Interface/Services/IConversationService.cs
+++ b/backend/IM_API/Interface/Services/IConversationService.cs
@@ -10,12 +10,18 @@ namespace IM_API.Interface.Services
         /// </summary>
         /// <param name="clearConversationsDto"></param>
         /// <returns></returns>
-        Task<bool> ClearConversationsAsync(ClearConversationsDto clearConversationsDto);
+        Task<bool> ClearConversationsAsync(int userId);
+        /// <summary>
+        /// 删除单个聊天会话
+        /// </summary>
+        /// <param name="conversationId"></param>
+        /// <returns></returns>
+        Task<bool> DeleteConversationAsync(int conversationId);
         /// <summary>
         /// 获取用户当前消息会话
         /// </summary>
         /// <param name="userId">用户id</param>
         /// <returns></returns>
-        Task<Conversation> GetConversationsAsync(int userId);
+        Task<List<Conversation>> GetConversationsAsync(int userId);
     }
 }
diff --git a/backend/IM_API/Services/ConversationService.cs b/backend/IM_API/Services/ConversationService.cs
new file mode 100644
index 0000000..56632a1
--- /dev/null
+++ b/backend/IM_API/Services/ConversationService.cs
@@ -0,0 +1,44 @@
+using IM_API.Dtos;
+using IM_API.Exceptions;
+using IM_API.Interface.Services;
+using IM_API.Models;
+using IM_API.Tools;
+using Microsoft.EntityFrameworkCore;
+
+namespace IM_API.Services
+{
+    public class ConversationService : IConversationService
+    {
+        private readonly ImContext _context;
+        public ConversationService(ImContext context)
+        {
+            _context = context;
+        }
+        #region 删除用户会话
+        public async Task<bool> ClearConversationsAsync(int userId)
+        {
+           await _context.Conversations.Where(x => x.UserId == userId).ExecuteDeleteAsync();
+            return true;
+        }
+
+        
+        #endregion
+        #region 获取用户会话列表
+        public async Task<List<Conversation>> GetConversationsAsync(int userId)
+        {
+            return await _context.Conversations.Where(x => x.UserId == userId)
+                .ToListAsync();
+        }
+        #endregion
+        #region 删除单个会话
+        public async Task<bool> DeleteConversationAsync(int conversationId)
+        {
+            var conversation = await _context.Conversations.FirstOrDefaultAsync(x => x.Id == conversationId);
+            if (conversation == null) throw new BaseException(CodeDefine.CONVERSATION_NOT_FOUND);
+            _context.Conversations.Remove(conversation);
+            await _context.SaveChangesAsync();
+            return true;
+        }
+        #endregion
+    }
+}
\ No newline at end of file
diff --git a/backend/IM_API/Services/FriendService.cs b/backend/IM_API/Services/FriendService.cs
index 6576b36..e5ef1f1 100644
--- a/backend/IM_API/Services/FriendService.cs
+++ b/backend/IM_API/Services/FriendService.cs
@@ -68,7 +68,7 @@ namespace IM_API.Services
             {
                 query = query.OrderByDescending(x => x.UserId);
             }
-            var friendList = await query.Skip((page - 1 * limit)).Take(limit).ToListAsync();
+            var friendList = await query.Skip(((page - 1) * limit)).Take(limit).ToListAsync();
             return _mapper.Map<List<FriendInfoDto>>(friendList);
         }
         #endregion
diff --git a/backend/IM_API/Services/MessageService.cs b/backend/IM_API/Services/MessageService.cs
index d3e8b16..223c775 100644
--- a/backend/IM_API/Services/MessageService.cs
+++ b/backend/IM_API/Services/MessageService.cs
@@ -54,12 +54,24 @@ namespace IM_API.Services
         {
             throw new NotImplementedException();
         }
-
-        public Task<bool> SendGroupMessageAsync(int senderId, int groupId, MessageBaseDto dto)
+        #region 发送群消息
+        public async Task<bool> SendGroupMessageAsync(int senderId, int groupId, MessageBaseDto dto)
         {
-            throw new NotImplementedException();
-        }
+            //判断群存在
+            var isExist = await _context.Groups.AnyAsync(x => x.Id == groupId);
+            if (!isExist) throw new BaseException(CodeDefine.GROUP_NOT_FOUND);
+            //判断是否是群成员
+            var isMember = await _context.GroupMembers.AnyAsync(x => x.GroupId == groupId && x.UserId == senderId);
+            if (!isMember) throw new BaseException(CodeDefine.NO_GROUP_PERMISSION);
+            var message = _mapper.Map<Message>(dto);
+            message.Sender = senderId;
+            _context.Messages.Add(message);
+            await _context.SaveChangesAsync();
+            return true;
 
+        }
+        #endregion
+        #region 发送私聊消息
         public async Task<bool> SendPrivateMessageAsync(int senderId, int receiverId, MessageBaseDto dto)
         {
             bool isExist = await _context.Friends.AnyAsync(x => x.FriendId == receiverId);
@@ -70,5 +82,6 @@ namespace IM_API.Services
             await _context.SaveChangesAsync();
             return true;
         }
+        #endregion
     }
 }
diff --git a/backend/IM_API/Tools/CodeDefine.cs b/backend/IM_API/Tools/CodeDefine.cs
index 5733b58..e62989e 100644
--- a/backend/IM_API/Tools/CodeDefine.cs
+++ b/backend/IM_API/Tools/CodeDefine.cs
@@ -102,5 +102,8 @@
         /// <summary>后台日志写入失败</summary>
         public static CodeDefine OPERATION_LOG_FAILED = new CodeDefine(3004, "操作记录失败");
 
+        // 3.9 会话相关错误（3100 ~ 3199）
+        /// <summary>发送时异常</summary>
+        public static CodeDefine CONVERSATION_NOT_FOUND = new CodeDefine(3100, "会话不存在");
     }
 }
diff --git a/frontend/web/.env b/frontend/web/.env
index ba350c4..b61e7b0 100644
--- a/frontend/web/.env
+++ b/frontend/web/.env
@@ -1 +1 @@
-VITE_API_BASE_URL = http://192.168.5.116:7070/api
\ No newline at end of file
+VITE_API_BASE_URL = http://localhost:5202/api
\ No newline at end of file
diff --git a/frontend/web/src/assets/default_avatar.png b/frontend/web/src/assets/default_avatar.png
new file mode 100644
index 0000000..a21d544
Binary files /dev/null and b/frontend/web/src/assets/default_avatar.png differ
diff --git a/frontend/web/src/router/index.js b/frontend/web/src/router/index.js
index e966e63..e39fea8 100644
--- a/frontend/web/src/router/index.js
+++ b/frontend/web/src/router/index.js
@@ -11,6 +11,23 @@ const routes = [
   {
     path: '/',
     component: MainView,
+    children: [
+      {
+        path: '/messages',
+        name: 'userMessages',
+        component: () => import('@/views/messages/MessageList.vue'),
+        children: [
+          {
+            path: '/messages/chat/:id',
+            name: '/msgChat',
+            component: () => import('@/views/messages/MessageContent.vue'),
+            props: true
+          }
+        ]
+      },
+      { path: '/contacts', name: 'userContacts', component: () => import('@/views/contact/ContactList.vue') },
+      { path: '/settings', name: 'userSettings', component: () => import('@/views/settings/SettingMenu.vue') }
+    ],
     meta: {
       requiresAuth: true
     }
diff --git a/frontend/web/src/services/api.js b/frontend/web/src/services/api.js
index a1fa558..dc5fd77 100644
--- a/frontend/web/src/services/api.js
+++ b/frontend/web/src/services/api.js
@@ -1,8 +1,10 @@
 import axios from 'axios'
 import { useMessage } from '@/components/messages/useAlert';
 import router from '@/router';
+import { useAuthStore } from '@/stores/auth';
 
-const message = useMessage()
+const message = useMessage();
+const authStore = useAuthStore();
 
 const api = axios.create({
     baseURL: import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000/api', // 从环境变量中读取基础 URL
@@ -14,7 +16,7 @@ const api = axios.create({
 
 api.interceptors.request.use(
     config => {
-        const token = localStorage.getItem('authToken');
+        const token = authStore.token;
         if (token) {
             config.headers.Authorization = `Bearer ${token}`;
         }
diff --git a/frontend/web/src/services/auth.js b/frontend/web/src/services/auth.js
index 0df0456..e3f62e5 100644
--- a/frontend/web/src/services/auth.js
+++ b/frontend/web/src/services/auth.js
@@ -7,5 +7,11 @@ export const authService = {
      * @returns 
      */
     login: (data) => request.post('/auth/login', data),
+
+    /**
+     * 用户注册
+     * @param {*} data 
+     * @returns 
+     */
     register: (data) => request.post('/auth/register', data)
 }
\ No newline at end of file
diff --git a/frontend/web/src/services/friend.js b/frontend/web/src/services/friend.js
new file mode 100644
index 0000000..c4dc0f2
--- /dev/null
+++ b/frontend/web/src/services/friend.js
@@ -0,0 +1,14 @@
+import { request } from "./api";
+
+export const friendService = {
+
+    /**
+     * 获取好友列表
+     * @param {*} page  当前页 
+     * @param {*} limit 页大小
+     * @returns 
+     */
+    getFriendList: (page = 1, limit = 100) => request.get(`/friend/list?page=${page}&limit=${limit}`)
+
+
+}
\ No newline at end of file
diff --git a/frontend/web/src/stores/auth.js b/frontend/web/src/stores/auth.js
index 093b0a1..2193a06 100644
--- a/frontend/web/src/stores/auth.js
+++ b/frontend/web/src/stores/auth.js
@@ -3,7 +3,8 @@ import { defineStore } from 'pinia'
 
 export const useAuthStore = defineStore('auth', () => {
   const token = ref(localStorage.getItem('user_token') || '');
-  const userInfo = ref(null);
+  const refreshToken = ref(localStorage.getItem('refresh_token') || '');
+  const userInfo = ref(localStorage.getItem('user_info') || '');
 
   //判断是否已登录
   const isLoggedIn = computed(() => !!token.value);
@@ -13,10 +14,13 @@ export const useAuthStore = defineStore('auth', () => {
    * @param {String} newToken  用户凭证 
    * @param {*} user      用户信息
    */
-  function setLoginInfo(newToken, user) {
+  function setLoginInfo(newToken, newRefreshToken, user) {
     token.value = newToken;
+    refreshToken.value = newRefreshToken
     userInfo.value = user;
     localStorage.setItem('user_token', newToken);
+    localStorage.setItem('refresh_token', refreshToken)
+    localStorage.setItem('user_info', user)
   }
 
   /**
@@ -26,6 +30,8 @@ export const useAuthStore = defineStore('auth', () => {
     token.value = '';
     userInfo.value = null;
     localStorage.removeItem('user_token');
+    localStorage.removeItem('refresh_token')
+    localStorage.removeItem('user_info')
   }
 
   return { token, userInfo, isLoggedIn, setLoginInfo, logout };
diff --git a/frontend/web/src/views/Main.vue b/frontend/web/src/views/Main.vue
index ab5d6b7..0036541 100644
--- a/frontend/web/src/views/Main.vue
+++ b/frontend/web/src/views/Main.vue
@@ -1,477 +1,226 @@
 <template>
   <div class="im-container">
-    <nav class="sidebar" aria-label="主导航">
-      <div class="avatar-wrapper">
-        <div class="avatar">我</div>
-        <div class="status-dot"></div>
-      </div>
-
-      <div class="menu" role="tablist">
-        <button
-          v-for="item in menus"
-          :key="item.key"
-          @click="currentTab = item.key"
-          :class="['menu-btn', { active: currentTab === item.key }]"
-          :title="item.label"
-          :aria-pressed="currentTab === item.key"
-        >
-          <i :class="item.icon" class="menu-icon" aria-hidden="true"></i>
-          <span v-if="item.notification" class="notification-badge">{{ item.notification }}</span>
-        </button>
-      </div>
-
-      <div class="bottom-menu">
-        <button class="menu-btn" title="设置" @click="currentTab = 'settings'">
-          <i class="fas fa-cog menu-icon"></i>
-        </button>
+    <nav class="nav-sidebar">
+      <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>
     </nav>
-
-    <aside class="list-panel">
-      <div class="panel-header">
-        <h2>{{ currentTabTitle }}</h2>
-        <div class="header-actions">
-           <button class="add-btn" :title="currentTab === 'chat' ? '发起新聊天' : '添加好友'"><i class="fas fa-plus"></i></button>
-        </div>
-      </div>
-
-      <div class="search-wrapper">
-        <div class="search-box">
-          <i class="fas fa-search search-icon" aria-hidden="true"></i>
-          <input type="text" placeholder="搜索..." v-model="searchText" aria-label="搜索" />
-        </div>
-      </div>
-
-      <div class="list-content custom-scroll">
-        <transition-group name="list" tag="ul" v-if="currentTab === 'chat'" class="chat-list">
-          <li
-            v-for="chat in filteredChats"
-            :key="chat.id"
-            @click="selectChat(chat)"
-            :class="['list-item', { active: currentChat?.id === chat.id }]"
-          >
-            <div class="item-avatar">
-              {{ getInitials(chat.name) }}
-              <span v-if="chat.status === 'online'" class="online-dot" aria-hidden="true"></span>
-            </div>
-            <div class="item-info">
-              <div class="row-top">
-                <span class="item-name">{{ chat.name }}</span>
-                <span class="item-time">{{ chat.lastTime }}</span>
-              </div>
-              <div class="row-bottom">
-                <span class="item-msg">{{ chat.lastMsg }}</span>
-                <span v-if="chat.unread > 0" class="unread-badge">{{ chat.unread }}</span>
-              </div>
-            </div>
-          </li>
-        </transition-group>
-
-        <ul v-else-if="currentTab === 'friends'" class="friend-list">
-          <li v-for="f in filteredFriends" :key="f.id" class="list-item">
-            <div class="item-avatar friend">
-              {{ getInitials(f.name) }}
-            </div>
-            <div class="item-info">
-              <div class="row-top">
-                <span class="item-name">{{ f.name }}</span>
-              </div>
-              <div class="row-bottom">
-                <span :class="['status-text', f.status]">
-                  {{ f.status === 'online' ? '在线' : '离线' }}
-                </span>
-              </div>
-            </div>
-          </li>
-        </ul>
-
-        <div v-else class="empty-placeholder">
-          <div class="icon-bg">
-            <i :class="getEmptyIcon()"></i>
-          </div>
-          <h3>{{ currentTab === 'groups' ? '暂无群聊' : '设置中心' }}</h3>
-          <p>这里目前什么都没有</p>
-        </div>
-      </div>
-    </aside>
-
-    <main class="chat-stage">
-      <template v-if="currentChat">
-        <header class="chat-header">
-          <div class="user-profile">
-            <div class="header-avatar">{{ getInitials(currentChat.name) }}</div>
-            <div class="header-info">
-              <div class="header-name">{{ currentChat.name }}</div>
-              <div class="header-status">
-                <span class="status-indicator" :class="currentChat.status"></span>
-                {{ currentChat.status === 'online' ? '在线' : '离线' }}
-              </div>
-            </div>
-          </div>
-          <div class="header-tools">
-            <button class="tool-btn" title="语音通话"><i class="fas fa-phone-alt"></i></button>
-            <button class="tool-btn" title="视频通话"><i class="fas fa-video"></i></button>
-            <button class="tool-btn" title="更多选项"><i class="fas fa-ellipsis-h"></i></button>
-          </div>
-        </header>
-
-        <div class="chat-body custom-scroll" ref="chatBody">
-          <div
-            v-for="msg in messages"
-            :key="msg.id"
-            :class="['msg-row', msg.from === 'me' ? 'msg-me' : 'msg-them']"
-          >
-            <div class="msg-avatar" v-if="msg.from !== 'me'">
-              {{ getInitials(currentChat.name) }}
-            </div>
-            <div class="msg-bubble-group">
-              <div class="msg-bubble">
-                {{ msg.text }}
-              </div>
-              <div class="msg-meta">{{ msg.time }}</div>
-            </div>
-          </div>
-        </div>
-
-        <footer class="chat-footer">
-          <div class="input-container">
-            <button class="attach-btn" title="发送文件"><i class="fas fa-plus"></i></button>
-            <textarea
-              v-model="input"
-              placeholder="输入消息..."
-              @keydown.enter.prevent="handleSend"
-              rows="1"
-              ref="messageInput"
-            ></textarea>
-            <button class="emoji-btn" title="表情"><i class="far fa-smile"></i></button>
-            <button class="send-btn" @click="handleSend" :disabled="!input.trim()">
-              <i class="fas fa-paper-plane"></i>
-            </button>
-          </div>
-        </footer>
-      </template>
-
-      <div class="empty-chat" v-else>
-        <div class="empty-illustration">
-          <i class="fas fa-comments"></i>
-        </div>
-        <h3>开启美好对话</h3>
-        <p>选择左侧联系人，开始畅所欲言</p>
-      </div>
-    </main>
+    <router-view></router-view>
+    
   </div>
 </template>
 
 <script setup>
-import { ref, computed, nextTick, onMounted } from 'vue'
+import { ref, watch } from 'vue'
+import { useAuthStore } from '@/stores/auth';
+import defaultAvatar from '@/assets/default_avatar.png'
 
-/** (原代码未改动，样式优化专注于 CSS) */
-const currentTab = ref('chat')
-const searchText = ref('')
-const chats = ref([
-  { id: 1, name: 'Allen Zhang', lastMsg: '今晚一起吃饭吗？', lastTime: '10:30', unread: 2, status: 'online' },
-  { id: 2, name: 'Sarah Lee', lastMsg: '设计稿已经发你邮箱了', lastTime: '昨天', unread: 0, status: 'online' },
-  { id: 3, name: 'David Wang', lastMsg: '项目进度怎么样？', lastTime: '周三', unread: 1, status: 'offline' },
-  { id: 4, name: 'Product Team', lastMsg: '下周一开会讨论需求', lastTime: '周一', unread: 0, status: 'online' },
-  { id: 5, name: 'Lisa Chen', lastMsg: '好的，没问题', lastTime: '3月15日', unread: 0, status: 'online' },
-])
-const friends = ref([
-  { id: 1, name: 'Allen Zhang', status: 'online' },
-  { id: 2, name: 'Sarah Lee', status: 'online' },
-  { id: 3, name: 'David Wang', status: 'offline' },
-  { id: 4, name: 'Product Team', status: 'online' },
-])
-const menus = ref([
-  { key: 'chat', label: '消息', icon: 'fas fa-comment-alt', notification: computed(() => chats.value.reduce((sum, c) => sum + c.unread, 0)) },
-  { key: 'friends', label: '联系人', icon: 'fas fa-user-friends', notification: 0 },
-  { key: 'groups', label: '群聊', icon: 'fas fa-users', notification: 0 },
-])
-const currentChat = ref(null)
-const messages = ref([])
-const input = ref('')
-const chatBody = ref(null)
-const messageInput = ref(null)
+const authStore = useAuthStore();
+const myInfo = authStore.userInfo;
 
-const filteredChats = computed(() => {
-  if (!searchText.value) return chats.value
-  const lowerSearch = searchText.value.toLowerCase()
-  return chats.value.filter(
-    (chat) => chat.name.toLowerCase().includes(lowerSearch) || chat.lastMsg.toLowerCase().includes(lowerSearch),
-  )
-})
 
-const filteredFriends = computed(() => {
-  if (!searchText.value) return friends.value
-  const lowerSearch = searchText.value.toLowerCase()
-  return friends.value.filter((friend) => friend.name.toLowerCase().includes(lowerSearch))
-})
-
-const currentTabTitle = computed(() => {
-  const map = { chat: '消息', friends: '通讯录', groups: '群组', settings: '设置' }
-  return map[currentTab.value] || '消息'
-})
-
-function getInitials(name) { return name ? name.substring(0, 1).toUpperCase() : '' }
-function getEmptyIcon() { if (currentTab.value === 'groups') return 'fas fa-users'; if (currentTab.value === 'settings') return 'fas fa-cog'; return 'fas fa-box-open' }
-function formatTime(date) { return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }) }
-function scrollBottom() { if (chatBody.value) chatBody.value.scrollTop = chatBody.value.scrollHeight }
-function focusInput() { if (messageInput.value) messageInput.value.focus() }
-function selectChat(chat) {
-  currentChat.value = chat
-  messages.value = [
-    { id: 1, from: 'them', text: `Hi，我是 ${chat.name}`, time: '09:15' },
-    { id: 2, from: 'me', text: '你好！最近怎么样？', time: '09:16' },
-    { id: 3, from: 'them', text: '挺好的，你呢？', time: '09:20' },
-  ]
-  nextTick(() => { scrollBottom(); focusInput() })
-  if (chat.unread > 0) chat.unread = 0
-}
-function simulateReply() {
-  if (!currentChat.value) return
-  const replies = ['收到', '这个设计不错', '稍等我看一下', '哈哈哈哈', '明白，我马上处理']
-  const randomReply = replies[Math.floor(Math.random() * replies.length)]
-  setTimeout(() => {
-    messages.value.push({ id: Date.now(), from: 'them', text: randomReply, time: formatTime(new Date()) })
-    nextTick(scrollBottom)
-  }, 500 + Math.random() * 1500)
-}
-function handleSend() {
-  if (!input.value.trim()) return
-  messages.value.push({ id: Date.now(), from: 'me', text: input.value, time: formatTime(new Date()) })
-  input.value = ''
-  nextTick(scrollBottom)
-  if (currentChat.value) {
-    currentChat.value.lastMsg = messages.value[messages.value.length - 1].text
-    currentChat.value.lastTime = formatTime(new Date())
-  }
-  simulateReply()
-}
-
-onMounted(() => { if (chats.value.length > 0) selectChat(chats.value[0]) })
 </script>
 
 <style scoped>
-/* ------------------- 设计代币 (简约优雅) ------------------- */
-:root{
-  /* 极简设计变量：避免与外部容器背景冲突 */
-  --bg: #f9fafb;              /* 比外部纯白略深的浅灰，形成层级 */              /* 组件自身有背景，不透明 */
-  --panel: #ffffff;               /* 面板纯白 */
-  --border: #e5e7eb;               /* 轻边框 */
-  --text: #1f2937;                 /* 主文字 */
-  --muted: #6b7280;                /* 次文字 */
-  --primary: #4f46e5;              /* 主色：靛蓝 */
-  --primary-contrast: #ffffff;     /* 主色上的前景色 */              /* 单一强调色（靛蓝） */
-  --success: #10b981;
-  --danger: #ef4444;
-  --radius: 10px;
-  --shadow: 0 2px 6px rgba(0,0,0,0.04); /* 极弱阴影 */
-  --fn: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto;
-}
-
-.im-container{
-  width: 100%;
-  height: 100%;
+/* 1. 基础容器：锁定宽高，禁止抖动 */
+.im-container {
   display: flex;
+  width: 1000px;
+  height: 650px;
+  margin: 40px auto;
+  background: #fff;
+  border-radius: 4px;
   overflow: hidden;
-  background: var(--bg);          /* 浅灰背景，明确区分外层 */
-  border-radius: var(--radius);
-  border: 1px solid var(--border);
-  box-shadow: none;
-  font-family: var(--fn);
-  color: var(--text);
+  box-shadow: 0 12px 48px rgba(0,0,0,0.1);
 }
 
-/* ------------------- 侧边栏 ------------------- */
-.sidebar{
-  width: 64px;
-  background: #ffffff;            /* 内部区域保持纯白 */
-  border-right: 1px solid var(--border);
-  padding: 16px 6px;
-  display:flex;
-  flex-direction:column;
-  align-items:center;
+/* 导航栏 */
+.nav-sidebar {
+  width: 60px;
+  flex-shrink: 0;
+  background: #282828;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px 0;
+  gap: 24px;
 }
-.avatar{
-  width:48px;height:48px;border-radius:10px;background:linear-gradient(135deg,var(--primary),#7c3aed);
-  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:16px;box-shadow:0 4px 10px rgba(37,99,235,0.12);
+.user-self { margin-bottom: 10px; }
+
+/* 2. 列表区修复 */
+.list-panel {
+  width: 250px;
+  flex-shrink: 0;
+  background: #eee;
+  border-right: 1px solid #d6d6d6;
+  display: flex;
+  flex-direction: column;
 }
-.avatar-wrapper{position:relative;margin-bottom:18px}
-.status-dot{position:absolute;right:6px;bottom:6px;width:11px;height:11px;background:var(--success);border-radius:50%;box-shadow:0 0 0 2px var(--panel)}
-.menu{display:flex;flex-direction:column;gap:8px;width:100%;align-items:center}
-.menu-btn{
-  background: transparent;
-  border: none;
-  color: var(--muted);              /* 默认图标灰 */
-  width: 48px;
-  height: 48px;
-  border-radius: 8px;
+
+/* 修复：搜索框美化 */
+.search-section {
+  padding: 20px 12px 10px 12px;
+}
+.search-box {
   display: flex;
   align-items: center;
-  justify-content: center;
-  cursor: pointer;
+  background: #dbdbdb;
+  padding: 4px 8px;
+  border-radius: 4px;
+  gap: 5px;
+}
+.search-icon { font-size: 12px; color: #666; }
+.search-box input {
+  background: transparent;
+  border: none;
+  outline: none;
+  font-size: 12px;
+  width: 100%;
 }
 
-/* Font Awesome 兜底：不管外部怎么写 */
-.menu-btn i{
-  color: currentColor;
-}
-.menu-btn:hover{
-  background: #f3f4f6; /* 纯灰 hover，不使用渐变 */
-  color: var(--primary);
-  transform: none;
-}
-.menu-btn.active{
-  background: var(--primary);       /* 选中态：主色背景 */
-  color: var(--primary-contrast);   /* 明确指定前景色 */
-}
+.scroll-area { flex: 1; overflow-y: auto; }
 
-/* 防止 font-awesome 被父级覆盖 */
-.menu-btn.active .menu-icon{
-  font-size: 18px;
-  color: inherit; /* 关键：图标严格继承 button 的 color */
-}
-.menu-icon{font-size:18px}
-.notification-badge{position:absolute;top:8px;right:10px;background:var(--danger);color:#fff;border-radius:999px;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;font-size:11px;font-weight:600;box-shadow:0 1px 0 rgba(255,255,255,0.08)}
-.bottom-menu{margin-top:auto;padding-bottom:6px}
-
-/* ------------------- 中间面板 ------------------- */
-.list-panel{
-  width: 300px;
-  background: #ffffff;            /* 中间列表纯白 */
-  border-right: 1px solid var(--border);
-  display:flex;
-  flex-direction:column;
-}
-.panel-header{display:flex;align-items:center;justify-content:space-between;padding:6px 8px}
-.panel-header h2{margin:0;font-size:18px;font-weight:700;color:var(--text)}
-.add-btn{background:var(--primary);border:none;color:#fff;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 12px rgba(37,99,235,0.12)}
-.search-wrapper{padding:8px}
-.search-box{position:relative}
-.search-box input{width:100%;padding:10px 12px 10px 36px;border-radius:10px;border:1px solid rgba(15,23,42,0.05);background:rgba(255,255,255,0.9);font-size:14px;color:var(--text);box-shadow:inset 0 1px 0 rgba(0,0,0,0.02)}
-.search-box input:focus{outline:none;border-color:rgba(37,99,235,0.35);box-shadow:0 6px 20px rgba(37,99,235,0.06)}
-.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px}
-.list-content{flex:1;overflow:auto;padding-right:6px}
-
-.chat-list,.friend-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
-.list-item{display:flex;align-items:center;padding:10px;border-radius:10px;cursor:pointer;transition:all .16s ease;background:transparent}
-.list-item:hover{
-  background: #f9fafb; /* 极轻 hover */
-  transform: none;
-}
-.list-item.active{
-  background: #eef2ff; /* 单色选中 */
-  border-left: 3px solid var(--primary);
-  padding-left: 9px;
-}
-
-.item-avatar{width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg,#eef2ff,#e9d5ff);display:flex;align-items:center;justify-content:center;color:var(--primary);font-weight:700;font-size:15px;margin-right:12px;flex-shrink:0}
-.item-avatar.friend{background:linear-gradient(135deg,#ecfdf5,#ecfeff);color:var(--success)}
-.online-dot{position:absolute;right:4px;bottom:6px;width:10px;height:10px;background:var(--success);border-radius:50%;box-shadow:0 0 0 2px var(--panel)}
-
-.item-info{flex:1;min-width:0;display:flex;flex-direction:column}
-.row-top{display:flex;justify-content:space-between;align-items:center}
-.item-name{font-weight:600;color:var(--text);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%}
-.item-time{font-size:12px;color:var(--muted);flex-shrink:0;margin-left:8px}
-.item-msg{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.unread-badge{background:var(--danger);color:#fff;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:700}
-.status-text{font-size:13px;color:var(--muted)}
-.status-text.online{color:var(--success);font-weight:600}
-
-/* ------------------- 聊天区 ------------------- */
-.chat-stage{
+/* 3. 聊天主面板修复 */
+.chat-panel {
   flex: 1;
   display: flex;
   flex-direction: column;
-  background: #ffffff;            /* 聊天区纯白 */
+  background: #f5f5f5;
+  min-width: 0;
 }
-.chat-header{
-  height: 64px;
+
+.chat-header {
+  height: 60px;
   padding: 0 20px;
-  display:flex;
-  align-items:center;
-  justify-content:space-between;
-  border-bottom: 1px solid var(--border);
-  background: var(--panel);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #e0e0e0;
+  background: #f5f5f5;
 }
-.user-profile{display:flex;align-items:center;gap:12px}
-.header-avatar{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,#eef2ff,#e9d5ff);display:flex;align-items:center;justify-content:center;color:var(--primary);font-weight:700}
-.header-name{font-weight:700}
-.header-status{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}
-.status-indicator{display:inline-block;width:8px;height:8px;border-radius:999px}
-.status-indicator.online{background:var(--success)}
-.status-indicator.offline{background:rgba(15,23,42,0.08)}
-.header-tools{display:flex;gap:8px}
-.tool-btn{background:transparent;border:1px solid rgba(15,23,42,0.04);padding:8px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center}
 
-.chat-body{flex:1;padding:20px;display:flex;flex-direction:column;gap:12px;overflow:auto}
-.msg-row{display:flex;gap:10px;align-items:flex-end}
-.msg-me{justify-content:flex-end}
-.msg-them{justify-content:flex-start}
-.msg-avatar{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#eef2ff,#e9d5ff);display:flex;align-items:center;justify-content:center;color:var(--primary);font-weight:700}
-.msg-bubble-group{max-width:70%;display:flex;flex-direction:column;align-items:flex-start}
-.msg-bubble{
-  padding: 8px 12px;
-  border-radius: 8px;
-  background: #f3f4f6;
-  color: var(--text);
+.chat-history {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 30px;
+}
+
+/* 修复：本人消息右侧对齐逻辑 */
+.msg {
+  display: flex;
+  margin-bottom: 24px;
+  gap: 12px;
+}
+
+/* 别人发的：默认靠左 */
+.msg.other { flex-direction: row; }
+
+/* 本人发的：翻转排列方向，靠右显示 */
+.msg.mine { 
+  flex-direction: row-reverse; 
+}
+
+.msg-content {
+  display: flex;
+  flex-direction: column;
+  max-width: 70%;
+}
+
+/* 修复：本人消息文字和时间戳也需要右对齐 */
+.msg.mine .msg-content {
+  align-items: flex-end;
+}
+
+.bubble {
+  padding: 9px 14px;
+  border-radius: 6px;
   font-size: 14px;
-  line-height: 1.4;
-  box-shadow: none;
+  line-height: 1.6;
+  word-break: break-all;
+  position: relative;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
 }
-.msg-me .msg-bubble{
-  background: var(--primary);
-  color: #ffffff;
-}
-.msg-meta{font-size:12px;color:var(--muted);margin-top:6px}
 
-.chat-footer{
-  padding: 12px 20px;
-  border-top: 1px solid var(--border);
-  background: var(--panel);
+.other .bubble { background: #fff; color: #333; }
+.mine .bubble { background: #95ec69; color: #000; }
+
+.msg-time {
+  font-size: 11px;
+  color: #b2b2b2;
+  margin-top: 4px;
 }
-.input-container{
-  display:flex;
-  align-items:flex-end;
-  gap: 8px;
-  background: #f9fafb;
-  padding: 8px;
+
+/* 头像样式统一 */
+.avatar-std { width: 40px; height: 40px; border-radius: 4px; object-fit: cover; }
+.avatar-chat { width: 38px; height: 38px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
+
+/* 未读气泡 */
+.avatar-container { position: relative; }
+.unread-badge {
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  background: #ff4d4f;
+  color: #fff;
+  font-size: 10px;
+  padding: 0 4px;
+  min-width: 16px;
+  height: 16px;
   border-radius: 8px;
-  border: 1px solid var(--border);
-  box-shadow: none;
-}
-.input-container:focus-within{box-shadow:0 8px 30px rgba(37,99,235,0.06)}
-.input-container textarea{flex:1;border:none;background:transparent;resize:none;outline:none;font-size:14px;line-height:1.5;min-height:36px;max-height:120px}
-.attach-btn,.emoji-btn{background:transparent;border:none;padding:8px;border-radius:8px;cursor:pointer}
-.send-btn{
-  background: var(--primary);
-  color: var(--primary-contrast);   /* 明确发送按钮图标颜色 */
-  border: none;
-  padding: 8px 12px;
-  border-radius: 8px;
-  cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
+  border: 1px solid #fff;
 }
 
-.send-btn i{
-  color: currentColor;              /* 防止图标丢失 */
+/* 输入框区域修复 */
+.chat-footer {
+  height: 160px;
+  background: #fff;
+  border-top: 1px solid #e0e0e0;
+  padding: 10px 20px;
+  display: flex;
+  flex-direction: column;
 }
 
-.send-btn:disabled{
-  background: #c7d2fe;
-  color: #ffffff;
-}
-.send-btn:disabled{opacity:0.5;cursor:not-allowed}
+.toolbar { display: flex; gap: 12px; margin-bottom: 5px; font-size: 20px; color: #666; }
+.toolbar button { background: none; border: none; cursor: pointer; opacity: 0.7; }
 
-/* ------------------- 细节与响应式 ------------------- */
-.custom-scroll::-webkit-scrollbar{width:8px}
-.custom-scroll::-webkit-scrollbar-thumb{background:rgba(15,23,42,0.06);border-radius:999px}
-
-@media (max-width:900px){
-  .im-container{flex-direction:column;width:94vw;height:92vh}
-  .sidebar{flex-direction:row;width:100%;height:64px;padding:8px}
-  .list-panel{width:100%;order:2;border-right:none;border-top:1px solid rgba(15,23,42,0.03)}
-  .chat-stage{order:1}
+textarea {
+  flex: 1;
+  border: none;
+  outline: none;
+  resize: none;
+  font-family: inherit;
+  font-size: 14px;
+  padding: 5px 0;
 }
-</style>
+
+.send-row { display: flex; justify-content: flex-end; }
+.send-btn {
+  background: #f5f5f5;
+  color: #07c160;
+  border: 1px solid #e0e0e0;
+  padding: 5px 20px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+}
+.send-btn:hover { background: #e2e2e2; }
+
+/* 列表美化 */
+.list-item { display: flex; padding: 12px; gap: 12px; cursor: pointer; }
+.list-item.active { background: #c6c6c6; }
+.list-item:hover:not(.active) { background: #ddd; }
+.info { flex: 1; overflow: hidden; }
+.name-row { display: flex; justify-content: space-between; align-items: center; }
+.name { font-size: 14px; font-weight: 500; }
+.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.active { opacity: 1; }
+</style>
\ No newline at end of file
diff --git a/frontend/web/src/views/auth/Login.vue b/frontend/web/src/views/auth/Login.vue
index ab81d33..97f7b57 100644
--- a/frontend/web/src/views/auth/Login.vue
+++ b/frontend/web/src/views/auth/Login.vue
@@ -87,7 +87,7 @@ const handleLogin = async () => {
   const res = await authService.login(form);
   if(res.code === 0){
     message.success('登陆成功。')
-    authStore.setLoginInfo(res.data.token, res.data.userInfo);
+    authStore.setLoginInfo(res.data.token, res.data.refreshToken, res.data.userInfo);
     loading.value = false;
     router.push('/index')
   }else{
diff --git a/frontend/web/src/views/contact/ContactList.vue b/frontend/web/src/views/contact/ContactList.vue
new file mode 100644
index 0000000..8a09534
--- /dev/null
+++ b/frontend/web/src/views/contact/ContactList.vue
@@ -0,0 +1,327 @@
+<template>
+  <div class="contact-container">
+    <aside class="contact-list-panel">
+      <div class="search-section">
+        <div class="search-box">
+          <span class="search-icon">🔍</span>
+          <input v-model="searchQuery" placeholder="搜索联系人" />
+        </div>
+      </div>
+      
+      <div class="scroll-area">
+        <div class="fixed-entries">
+          <div class="list-item mini">
+            <div class="icon-box orange">👤+</div>
+            <div class="name">新的朋友</div>
+          </div>
+          <div class="list-item mini">
+            <div class="icon-box green">👥</div>
+            <div class="name">群聊</div>
+          </div>
+          <div class="list-item mini">
+            <div class="icon-box blue">🏷️</div>
+            <div class="name">标签</div>
+          </div>
+        </div>
+
+        <div class="group-title">我的好友</div>
+        <div v-for="c in filteredContacts" 
+             :key="c.id" 
+             class="list-item" 
+             :class="{active: activeContactId === c.id}"
+             @click="activeContactId = c.id">
+          <img :src="c.avatar" class="avatar-std" />
+          <div class="info">
+            <div class="name">{{ c.name }}</div>
+          </div>
+        </div>
+      </div>
+    </aside>
+
+    <main class="profile-main">
+      <div v-if="currentContact" class="profile-card">
+        <header class="profile-header">
+          <div class="text-info">
+            <h2 class="display-name">
+              {{ currentContact.name }}
+              <span :class="['gender-tag', currentContact.gender]">
+                {{ currentContact.gender === 'm' ? '♂' : '♀' }}
+              </span>
+            </h2>
+            <p class="sub-text">微信号：{{ currentContact.wxid }}</p>
+            <p class="sub-text">地区：{{ currentContact.region }}</p>
+          </div>
+          <img :src="currentContact.avatar" class="big-avatar" />
+        </header>
+
+        <div class="profile-body">
+          <div class="info-row">
+            <span class="label">备注名</span>
+            <span class="value">{{ currentContact.alias || '未设置' }}</span>
+          </div>
+          <div class="info-row">
+            <span class="label">个性签名</span>
+            <span class="value">{{ currentContact.signature || '这个家伙很懒，什么都没留下' }}</span>
+          </div>
+          <div class="info-row">
+            <span class="label">来源</span>
+            <span class="value">通过搜索微信号添加</span>
+          </div>
+        </div>
+
+        <footer class="profile-footer">
+          <button class="btn-primary" @click="handleGoToChat">发消息</button>
+          <button class="btn-ghost">音视频通话</button>
+        </footer>
+      </div>
+
+      <div v-else class="empty-state">
+        <div class="empty-logo">👤</div>
+        <p>请在左侧选择联系人查看详情</p>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { friendService } from '@/services/friend'
+
+const searchQuery = ref('')
+const activeContactId = ref(null)
+
+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: 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: '铁面人' }
+])
+
+const filteredContacts = computed(() => {
+  return contacts.value.filter(c => 
+    c.name.includes(searchQuery.value) || c.wxid.includes(searchQuery.value)
+  )
+})
+
+const currentContact = computed(() => {
+  return contacts.value.find(c => c.id === activeContactId.value)
+})
+
+// 发送事件给父组件（用于切换回聊天Tab并打开会话）
+const emit = defineEmits(['start-chat'])
+function handleGoToChat() {
+  if (currentContact.value) {
+    emit('start-chat', { ...currentContact.value })
+  }
+}
+
+const loadContactList = async (page = 1,limit = 100) => {
+  const res = await friendService.getFriendList(page,limit);
+  contacts1.value = res.data;
+}
+
+onMounted(async () => {
+  await loadContactList();
+})
+</script>
+
+<style scoped>
+.contact-container {
+  display: flex;
+  width: 100%; /* 继承父组件的高度和宽度 */
+  height: 100%;
+  background: #fff;
+}
+
+/* --- 左侧列表栏 --- */
+.contact-list-panel {
+  width: 250px;
+  background: #eee;
+  border-right: 1px solid #d6d6d6;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+
+.search-section {
+  padding: 20px 12px 10px 12px;
+}
+
+.search-box {
+  display: flex;
+  align-items: center;
+  background: #dbdbdb;
+  padding: 5px 8px;
+  border-radius: 4px;
+  gap: 6px;
+}
+
+.search-box input {
+  background: transparent;
+  border: none;
+  outline: none;
+  font-size: 12px;
+  width: 100%;
+}
+
+.scroll-area {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.group-title {
+  padding: 8px 12px;
+  font-size: 12px;
+  color: #999;
+}
+
+.list-item {
+  display: flex;
+  padding: 10px 12px;
+  gap: 12px;
+  align-items: center;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.list-item:hover { background: #e2e2e2; }
+.list-item.active { background: #c6c6c6; }
+
+.avatar-std {
+  width: 36px;
+  height: 36px;
+  border-radius: 4px;
+  object-fit: cover;
+}
+
+.icon-box {
+  width: 36px;
+  height: 36px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 18px;
+}
+.icon-box.orange { background: #faad14; }
+.icon-box.green { background: #52c41a; }
+.icon-box.blue { background: #1890ff; }
+
+/* --- 右侧名片区 --- */
+.profile-main {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f5f5f5;
+  min-width: 0;
+}
+
+.profile-card {
+  width: 420px;
+  background: transparent;
+  padding: 20px;
+}
+
+.profile-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding-bottom: 30px;
+  border-bottom: 1px solid #e7e7e7;
+  margin-bottom: 30px;
+}
+
+.display-name {
+  font-size: 24px;
+  color: #000;
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.gender-tag { font-size: 16px; }
+.gender-tag.m { color: #1890ff; }
+.gender-tag.f { color: #ff4d4f; }
+
+.sub-text {
+  font-size: 13px;
+  color: #888;
+  margin: 3px 0;
+}
+
+.big-avatar {
+  width: 70px;
+  height: 70px;
+  border-radius: 6px;
+  object-fit: cover;
+}
+
+.profile-body {
+  margin-bottom: 40px;
+}
+
+.info-row {
+  display: flex;
+  margin-bottom: 15px;
+  font-size: 14px;
+}
+
+.info-row .label {
+  width: 80px;
+  color: #999;
+}
+
+.info-row .value {
+  color: #333;
+  flex: 1;
+}
+
+.profile-footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.btn-primary {
+  width: 160px;
+  padding: 10px;
+  background: #07c160;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.btn-ghost {
+  width: 160px;
+  padding: 10px;
+  background: #fff;
+  border: 1px solid #e0e0e0;
+  color: #333;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.btn-primary:hover, .btn-ghost:hover {
+  opacity: 0.8;
+}
+
+.empty-state {
+  text-align: center;
+  color: #ccc;
+}
+
+.empty-logo {
+  font-size: 80px;
+  margin-bottom: 10px;
+  opacity: 0.2;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/web/src/views/contact/UserInfoContent.vue b/frontend/web/src/views/contact/UserInfoContent.vue
new file mode 100644
index 0000000..41a40c8
--- /dev/null
+++ b/frontend/web/src/views/contact/UserInfoContent.vue
@@ -0,0 +1 @@
+<template></template>
\ No newline at end of file
diff --git a/frontend/web/src/views/messages/MessageContent.vue b/frontend/web/src/views/messages/MessageContent.vue
new file mode 100644
index 0000000..8b5293a
--- /dev/null
+++ b/frontend/web/src/views/messages/MessageContent.vue
@@ -0,0 +1,234 @@
+<template>
+  <section class="chat-panel">
+    <header class="chat-header">
+      <span class="title">{{ currentSession?.name || '未选择会话' }}</span>
+      <div class="actions">
+        <button @click="startCall('video')">📹</button>
+        <button @click="startCall('voice')">📞</button>
+      </div>
+    </header>
+
+    <div class="chat-history" ref="historyRef">
+      <div v-for="m in activeMessages" :key="m.id" :class="['msg', m.mine ? 'mine' : 'other']">
+        <img :src="m.mine ? (myInfo?.avatar || defaultAvatar) : currentSession?.avatar" class="avatar-chat" />
+        
+        <div class="msg-content">
+          <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>
+          <span class="msg-time">{{ m.time }}</span>
+        </div>
+      </div>
+    </div>
+
+    <footer class="chat-footer">
+      <div class="toolbar">
+        <button @click="toggleEmoji">😀</button>
+        <label class="tool-btn">
+          📁 <input type="file" hidden @change="handleFile" />
+        </label>
+      </div>
+      <textarea 
+        v-model="input" 
+        placeholder="请输入消息..." 
+        @keydown.enter.exact.prevent="sendText"
+      ></textarea>
+      <div class="send-row">
+        <button class="send-btn" :disabled="!input.trim()" @click="sendText">发送(S)</button>
+      </div>
+    </footer>
+  </section>
+</template>
+
+<script setup>
+import { ref, computed, nextTick, onMounted } from 'vue';
+import { useAuthStore } from '@/stores/auth';
+import defaultAvatar from '@/assets/default_avatar.png';
+
+const props = defineProps({
+    id:{
+        type: String,
+        required:true
+    }
+})
+const input = ref('');   // 输入框内容
+const historyRef = ref(null); // 绑定 DOM 用于滚动
+const myInfo = useAuthStore().userInfo;
+
+// --- 模拟会话数据 (实际开发中应从后端或 store 获取) ---
+const sessions = ref([
+  { id: 1, name: '南浔', avatar: 'https://i.pravatar.cc/40?1', last: '' },
+  { id: 2, name: '技术群', avatar: 'https://i.pravatar.cc/40?2', last: '' }
+]);
+
+// --- 消息数据 ---
+const messages = ref({
+  1: [
+    { id: 1, type: 'text', content: '在干嘛？', mine: false, time: '14:00' },
+    { id: 2, type: 'text', content: '在写代码呢，帮你调样式', mine: true, time: '14:02' }
+  ],
+  2: []
+});
+
+// --- 计算属性 ---
+const currentSession = computed(() => sessions.value.find(s => s.id == props.id));
+const activeMessages = computed(() => messages.value[props.id] || []);
+
+// --- 功能函数 ---
+
+// 自动滚动到底部
+const scrollToBottom = async () => {
+  await nextTick(); // 等待 DOM 更新后执行
+  if (historyRef.value) {
+    historyRef.value.scrollTop = historyRef.value.scrollHeight;
+  }
+};
+
+// 发送文本
+function sendText() {
+  if (!input.value.trim()) return;
+  
+  const now = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  const newMessage = {
+    id: Date.now(),
+    type: 'text',
+    content: input.value,
+    mine: true,
+    time: now
+  };
+
+  // 插入消息
+  if (!messages.value[props.id]) {
+    messages.value[props.id] = [];
+  }
+  messages.value[props.id].push(newMessage);
+
+  // 同步更新会话列表最后一条摘要
+  if (currentSession.value) {
+    currentSession.value.last = input.value;
+  }
+
+  input.value = ''; // 清空输入框
+  scrollToBottom(); // 滚动
+}
+
+// 通话模拟
+function startCall(type) {
+  console.log(`发起${type === 'video' ? '视频' : '语音'}通话`);
+}
+
+// 文件处理模拟
+function handleFile(e) {
+  const file = e.target.files[0];
+  if (file) console.log('选中文件:', file.name);
+}
+
+function toggleEmoji() {
+  console.log('打开表情面板');
+}
+
+// 初始化时滚动到底部
+onMounted(() => {
+  scrollToBottom();
+});
+</script>
+
+<style scoped>
+/* 核心布局修复 */
+.chat-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%; /* 确保占满父容器 */
+  background: #f5f5f5;
+}
+
+.chat-header {
+  height: 60px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  background: #f5f5f5;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+/* 历史区域：自动撑开并处理滚动 */
+.chat-history {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 30px;
+}
+
+.chat-footer {
+  height: 160px;
+  flex-shrink: 0;
+  background: #fff;
+  border-top: 1px solid #e0e0e0;
+  padding: 10px 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 消息对齐逻辑 */
+.msg {
+  display: flex;
+  margin-bottom: 24px;
+  gap: 12px;
+}
+.msg.mine {
+  flex-direction: row-reverse;
+}
+.msg.mine .msg-content {
+  align-items: flex-end;
+}
+
+.bubble {
+  padding: 9px 14px;
+  border-radius: 6px;
+  font-size: 14px;
+  max-width: 450px;
+  word-break: break-all;
+  background: #fff;
+}
+.mine .bubble {
+  background: #95ec69;
+}
+
+.avatar-chat {
+  width: 38px;
+  height: 38px;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.msg-time {
+  font-size: 11px;
+  color: #b2b2b2;
+  margin-top: 4px;
+}
+
+textarea {
+  flex: 1;
+  border: none;
+  outline: none;
+  resize: none;
+  font-family: inherit;
+  font-size: 14px;
+}
+
+.send-row {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.send-btn {
+  background: #f5f5f5;
+  color: #07c160;
+  border: 1px solid #e0e0e0;
+  padding: 5px 20px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/web/src/views/messages/MessageList.vue b/frontend/web/src/views/messages/MessageList.vue
new file mode 100644
index 0000000..820d049
--- /dev/null
+++ b/frontend/web/src/views/messages/MessageList.vue
@@ -0,0 +1,245 @@
+<template>
+    <div id="MsgList">
+        <aside class="list-panel">
+      <div class="search-section">
+        <div class="search-box">
+          <span class="search-icon">🔍</span>
+          <input v-model="searchQuery" placeholder="搜索" />
+        </div>
+      </div>
+      
+      <div class="scroll-area">
+        <div v-for="s in filteredSessions" :key="s.id" 
+             class="list-item" :class="{active: activeId === s.id}" @click="selectSession(s)">
+          <div class="avatar-container">
+            <img :src="s.avatar" class="avatar-std" />
+            <span v-if="s.unread > 0" class="unread-badge">{{ s.unread }}</span>
+          </div>
+          <div class="info">
+            <div class="name-row">
+              <span class="name">{{ s.name }}</span>
+              <span class="time">{{ s.lastTime }}</span>
+            </div>
+            <div class="last-msg">{{ s.last }}</div>
+          </div>
+        </div>
+      </div>
+    </aside>
+
+    <RouterView></RouterView>
+    </div>
+</template>
+
+<script setup>
+import router from '@/router'
+import { ref, computed, nextTick } from 'vue'
+const searchQuery = ref('')
+const input = ref('')
+const historyRef = ref(null)
+const activeId = ref(1)
+
+const sessions = ref([
+  { id: 1, name: '南浔', last: '在写代码呢', lastTime: '14:20', avatar: 'https://i.pravatar.cc/40?1', unread: 2 },
+  { id: 2, name: '技术群', last: '部署好了', lastTime: '12:05', avatar: 'https://i.pravatar.cc/40?2', unread: 0 }
+])
+
+const filteredSessions = computed(() => sessions.value.filter(s => s.name.includes(searchQuery.value)))
+
+const currentSession = computed(() => sessions.value.find(s => s.id === activeId.value))
+
+function selectSession(s) {
+  activeId.value = s.id
+  s.unread = 0
+  router.push(`/messages/chat/${s.id}`)
+  scrollToBottom()
+}
+
+const scrollToBottom = async () => {
+  await nextTick()
+  if (historyRef.value) historyRef.value.scrollTop = historyRef.value.scrollHeight
+}
+
+
+</script>
+
+<style scoped>
+
+#MsgList {
+    display: flex;
+    flex: 1;
+}
+
+/* 2. 列表区修复 */
+.list-panel {
+  width: 250px;
+  flex-shrink: 0;
+  background: #eee;
+  border-right: 1px solid #d6d6d6;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 修复：搜索框美化 */
+.search-section {
+  padding: 20px 12px 10px 12px;
+}
+.search-box {
+  display: flex;
+  align-items: center;
+  background: #dbdbdb;
+  padding: 4px 8px;
+  border-radius: 4px;
+  gap: 5px;
+}
+.search-icon { font-size: 12px; color: #666; }
+.search-box input {
+  background: transparent;
+  border: none;
+  outline: none;
+  font-size: 12px;
+  width: 100%;
+}
+
+.scroll-area { flex: 1; overflow-y: auto; }
+
+/* 3. 聊天主面板修复 */
+.chat-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: #f5f5f5;
+  min-width: 0;
+}
+
+.chat-header {
+  height: 60px;
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #e0e0e0;
+  background: #f5f5f5;
+}
+
+.chat-history {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 30px;
+}
+
+/* 修复：本人消息右侧对齐逻辑 */
+.msg {
+  display: flex;
+  margin-bottom: 24px;
+  gap: 12px;
+}
+
+/* 别人发的：默认靠左 */
+.msg.other { flex-direction: row; }
+
+/* 本人发的：翻转排列方向，靠右显示 */
+.msg.mine { 
+  flex-direction: row-reverse; 
+}
+
+.msg-content {
+  display: flex;
+  flex-direction: column;
+  max-width: 70%;
+}
+
+/* 修复：本人消息文字和时间戳也需要右对齐 */
+.msg.mine .msg-content {
+  align-items: flex-end;
+}
+
+.bubble {
+  padding: 9px 14px;
+  border-radius: 6px;
+  font-size: 14px;
+  line-height: 1.6;
+  word-break: break-all;
+  position: relative;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+}
+
+.other .bubble { background: #fff; color: #333; }
+.mine .bubble { background: #95ec69; color: #000; }
+
+.msg-time {
+  font-size: 11px;
+  color: #b2b2b2;
+  margin-top: 4px;
+}
+
+/* 头像样式统一 */
+.avatar-std { width: 40px; height: 40px; border-radius: 4px; object-fit: cover; }
+.avatar-chat { width: 38px; height: 38px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
+
+/* 未读气泡 */
+.avatar-container { position: relative; }
+.unread-badge {
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  background: #ff4d4f;
+  color: #fff;
+  font-size: 10px;
+  padding: 0 4px;
+  min-width: 16px;
+  height: 16px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #fff;
+}
+
+/* 输入框区域修复 */
+.chat-footer {
+  height: 160px;
+  background: #fff;
+  border-top: 1px solid #e0e0e0;
+  padding: 10px 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.toolbar { display: flex; gap: 12px; margin-bottom: 5px; font-size: 20px; color: #666; }
+.toolbar button { background: none; border: none; cursor: pointer; opacity: 0.7; }
+
+textarea {
+  flex: 1;
+  border: none;
+  outline: none;
+  resize: none;
+  font-family: inherit;
+  font-size: 14px;
+  padding: 5px 0;
+}
+
+.send-row { display: flex; justify-content: flex-end; }
+.send-btn {
+  background: #f5f5f5;
+  color: #07c160;
+  border: 1px solid #e0e0e0;
+  padding: 5px 20px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+}
+.send-btn:hover { background: #e2e2e2; }
+
+/* 列表美化 */
+.list-item { display: flex; padding: 12px; gap: 12px; cursor: pointer; }
+.list-item.active { background: #c6c6c6; }
+.list-item:hover:not(.active) { background: #ddd; }
+.info { flex: 1; overflow: hidden; }
+.name-row { display: flex; justify-content: space-between; align-items: center; }
+.name { font-size: 14px; font-weight: 500; }
+.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.active { opacity: 1; }
+</style>
\ No newline at end of file
diff --git a/frontend/web/src/views/settings/SettingMenu.vue b/frontend/web/src/views/settings/SettingMenu.vue
new file mode 100644
index 0000000..41a40c8
--- /dev/null
+++ b/frontend/web/src/views/settings/SettingMenu.vue
@@ -0,0 +1 @@
+<template></template>
\ No newline at end of file