34 lines
1.2 KiB
Vue
34 lines
1.2 KiB
Vue
<template>
|
||
<div class="p-5 border-b border-gray-200 bg-white">
|
||
<div class="flex items-center">
|
||
<div
|
||
class="w-12 h-12 rounded-full flex items-center justify-center text-white font-bold text-lg mr-4"
|
||
:style="{ background: chatStore.currentFriend?.color }"
|
||
>
|
||
{{ chatStore.currentFriend?.name.charAt(0) }}
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-lg font-semibold text-gray-800">{{ chatStore.currentFriend?.name }}</h3>
|
||
<p class="text-sm flex items-center gap-1">
|
||
<span
|
||
class="w-2 h-2 rounded-full"
|
||
:class="isFriendOnline ? 'bg-green-500' : 'bg-red-500'"
|
||
></span>
|
||
<span :class="isFriendOnline ? 'text-green-600' : 'text-red-600'">
|
||
{{ isFriendOnline ? '在线' : '离线' }}
|
||
</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue';
|
||
import { useChatStore } from '@/stores/chat';
|
||
|
||
const chatStore = useChatStore();
|
||
const isFriendOnline = ref(true); // 简化处理，实际应该根据WebSocket状态判断
|
||
</script>
|