diff --git a/frontend/web/src/views/Main.vue b/frontend/web/src/views/Main.vue
index 0036541..0c0f47c 100644
--- a/frontend/web/src/views/Main.vue
+++ b/frontend/web/src/views/Main.vue
@@ -8,7 +8,7 @@
       <router-link class="nav-item" to="/contacts" active-class="active">👤</router-link>
       <router-link class="nav-item" to="/settings" active-class="active">⚙️</router-link>
     </nav>
-    <router-view></router-view>
+    <router-view @start-chat="handleStartChat"></router-view>
     
   </div>
 </template>
@@ -17,11 +17,25 @@
 import { ref, watch } from 'vue'
 import { useAuthStore } from '@/stores/auth';
 import defaultAvatar from '@/assets/default_avatar.png'
+import { useRouter } from 'vue-router';
 
+const router = useRouter();
 const authStore = useAuthStore();
 const myInfo = authStore.userInfo;
 
+// 监听用户信息变化（如头像更新）
+watch(() => authStore.userInfo, (newInfo) => {
+  myInfo.value = newInfo;
+});
 
+function handleStartChat(contact) {
+  if (contact && contact.id) {
+    // 导航到消息页面并传递联系人 ID
+    router.push(`/messages/chat/${contact.id}`);
+  } else {
+    console.error('Invalid contact object:', contact);
+  }
+}
 </script>
 
 <style scoped>
@@ -221,6 +235,6 @@ textarea {
 .time { font-size: 11px; color: #999; }
 .last-msg { font-size: 12px; color: #888; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
-.nav-item { font-size: 24px; cursor: pointer; opacity: 0.5; }
+.nav-item { font-size: 24px; cursor: pointer; opacity: 0.5; background-color: #fff; border-radius: 5px; text-decoration: none;}
 .nav-item.active { opacity: 1; }
 </style>
\ No newline at end of file
diff --git a/frontend/web/src/views/contact/ContactList.vue b/frontend/web/src/views/contact/ContactList.vue
index 8a09534..231d4c5 100644
--- a/frontend/web/src/views/contact/ContactList.vue
+++ b/frontend/web/src/views/contact/ContactList.vue
@@ -94,7 +94,7 @@ const contacts1 = ref([]);
 
 // 模拟联系人数据
 const contacts = ref([
-  { id: 101, name: '南浔', wxid: 'nan_xun_99', region: '浙江 杭州', avatar: 'https://i.pravatar.cc/40?1', gender: 'f', signature: '山有木兮木有枝', alias: '南酱' },
+  { id: 1, name: '南浔', wxid: 'nan_xun_99', region: '浙江 杭州', avatar: 'https://i.pravatar.cc/40?1', gender: 'f', signature: '山有木兮木有枝', alias: '南酱' },
   { id: 102, name: '老张', wxid: 'zhang_boss', region: '广东 深圳', avatar: 'https://i.pravatar.cc/40?10', gender: 'm', signature: '搞钱要紧', alias: '张总' },
   { id: 103, name: 'UI小王', wxid: 'wang_design', region: '上海 黄浦', avatar: 'https://i.pravatar.cc/40?5', gender: 'f', signature: '不改了，真的不改了', alias: '' },
   { id: 104, name: '测试组长', wxid: 'test_pro', region: '北京', avatar: 'https://i.pravatar.cc/40?8', gender: 'm', signature: 'Bug 哪里跑', alias: '铁面人' }
@@ -205,7 +205,7 @@ onMounted(async () => {
   align-items: center;
   justify-content: center;
   color: #fff;
-  font-size: 18px;
+  font-size: 16px;
 }
 .icon-box.orange { background: #faad14; }
 .icon-box.green { background: #52c41a; }