初始化

src/components/ChatHeader.vue

@@ -0,0 +1,33 @@
+<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>