code/IM
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

修改侧栏，添加联系人跳转消息

Browse Source
This commit is contained in:
chuyang02 2026-01-12 16:44:32 +08:00
parent 57deb5c9bf
commit ca4e2b7dd5
2 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/web/src/views/Main.vue
View File

@ -8,7 +8,7 @@
<router-link class="nav-item" to="/contacts" 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="/settings" active-class="active">⚙️</router-link>
</nav> </nav>
<router-view></router-view> <router-view @start-chat="handleStartChat"></router-view>
</div> </div>
</template> </template>
@ -17,11 +17,25 @@
import { ref, watch } from 'vue' import { ref, watch } from 'vue'
import { useAuthStore } from '@/stores/auth'; import { useAuthStore } from '@/stores/auth';
import defaultAvatar from '@/assets/default_avatar.png' import defaultAvatar from '@/assets/default_avatar.png'
import { useRouter } from 'vue-router';
const router = useRouter();
const authStore = useAuthStore(); const authStore = useAuthStore();
const myInfo = authStore.userInfo; 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> </script>
<style scoped> <style scoped>
@ -221,6 +235,6 @@ textarea {
.time { font-size: 11px; color: #999; } .time { font-size: 11px; color: #999; }
.last-msg { font-size: 12px; color: #888; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .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; } .nav-item.active { opacity: 1; }
</style> </style>

4
frontend/web/src/views/contact/ContactList.vue
View File

@ -94,7 +94,7 @@ const contacts1 = ref([]);
// 模拟联系人数据 // 模拟联系人数据
const contacts = 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: 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: 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: '铁面人' } { 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; align-items: center;
justify-content: center; justify-content: center;
color: #fff; color: #fff;
font-size: 18px; font-size: 16px;
} }
.icon-box.orange { background: #faad14; } .icon-box.orange { background: #faad14; }
.icon-box.green { background: #52c41a; } .icon-box.green { background: #52c41a; }