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