2025-07-02 16:54:52 +08:00
|
|
|
|
<template>
|
2025-07-03 15:36:34 +08:00
|
|
|
|
<div class="p-5 border-b border-gray-200 bg-white dark:bg-gray-800 dark:border-gray-700">
|
|
|
|
|
|
<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 dark:text-gray-200">{{ chatStore.currentFriend?.name }}</h3>
|
|
|
|
|
|
<p class="text-sm flex items-center gap-1">
|
2025-07-02 16:54:52 +08:00
|
|
|
|
<span
|
|
|
|
|
|
class="w-2 h-2 rounded-full"
|
|
|
|
|
|
:class="isFriendOnline ? 'bg-green-500' : 'bg-red-500'"
|
|
|
|
|
|
></span>
|
2025-07-03 15:36:34 +08:00
|
|
|
|
<span :class="isFriendOnline ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'">
|
2025-07-02 16:54:52 +08:00
|
|
|
|
{{ isFriendOnline ? '在线' : '离线' }}
|
|
|
|
|
|
</span>
|
2025-07-03 15:36:34 +08:00
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
2025-07-02 16:54:52 +08:00
|
|
|
|
</div>
|
2025-07-03 15:36:34 +08:00
|
|
|
|
</div>
|
2025-07-02 16:54:52 +08:00
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
|
import { ref } from 'vue';
|
|
|
|
|
|
import { useChatStore } from '@/stores/chat';
|
|
|
|
|
|
|
|
|
|
|
|
const chatStore = useChatStore();
|
|
|
|
|
|
const isFriendOnline = ref(true); // 简化处理，实际应该根据WebSocket状态判断
|
|
|
|
|
|
</script>
|
