初始化

src/views/Chat.vue

@@ -0,0 +1,108 @@
+<template>
+    <div class="h-screen flex bg-gradient-to-br from-blue-900 via-purple-900 to-pink-300 p-5">
+        <!-- 背景装饰 -->
+        <div class="fixed inset-0 pointer-events-none z-0">
+            <div class="absolute w-72 h-72 bg-blue-500 rounded-full opacity-10 top-10 left-10 animate-float"></div>
+            <div class="absolute w-48 h-48 bg-cyan-400 rounded-full opacity-10 top-60 right-15 animate-float-delayed"></div>
+            <div class="absolute w-36 h-36 bg-red-400 rounded-full opacity-10 bottom-10 left-20 animate-float-slow"></div>
+        </div>
+
+        <!-- 连接状态指示器 -->
+        <ConnectionStatus />
+
+        <!-- 录音状态指示器 -->
+        <RecordingIndicator v-if="isRecording" />
+
+        <!-- 主聊天容器 -->
+        <div class="flex-1 max-w-7xl mx-auto bg-white/90 backdrop-blur-sm rounded-2xl shadow-2xl overflow-hidden flex z-10">
+            <!-- 好友列表 -->
+            <FriendList class="w-80 min-w-80" />
+            
+            <!-- 聊天区域 -->
+            <ChatArea class="flex-1 min-w-0" />
+        </div>
+
+        <!-- 媒体预览模态框 -->
+        <MediaPreview />
+    </div>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted, provide } from 'vue';
+import { useUserStore } from '@/stores/user';
+import { useChatStore } from '@/stores/chat';
+import { useThemeStore } from '@/stores/theme';
+import { useWebSocket } from '@/composables/useWebSocket';
+import { useRecording } from '@/composables/useRecording';
+import FriendList from '@/components/FriendList.vue';
+import ChatArea from '@/components/ChatArea.vue';
+import ConnectionStatus from '@/components/ConnectionStatus.vue';
+import RecordingIndicator from '@/components/RecordingIndicator.vue';
+import MediaPreview from '@/components/MediaPreview.vue';
+
+const userStore = useUserStore();
+const chatStore = useChatStore();
+const themeStore = useThemeStore();
+
+// 初始化WebSocket连接
+const { connectWebSocket, disconnectWebSocket } = useWebSocket();
+
+// 初始化录音功能
+const { isRecording } = useRecording();
+
+// 提供录音状态给子组件
+provide('isRecording', isRecording);
+
+// 检查用户会话
+userStore.checkSession();
+    
+// 加载主题
+themeStore.loadTheme();
+    
+// 加载好友列表
+const currentUser = userStore.currentUser;
+const presetUsers = userStore.presetUsers;
+
+onMounted(() => {
+    if (currentUser) {
+        chatStore.loadFriends(presetUsers, currentUser.id);
+        connectWebSocket();
+    }
+});
+
+onUnmounted(() => {
+    disconnectWebSocket();
+});
+</script>
+
+<style scoped>
+@keyframes float {
+    0% { transform: translateY(0px) rotate(0deg); }
+    50% { transform: translateY(-20px) rotate(10deg); }
+    100% { transform: translateY(0px) rotate(0deg); }
+}
+
+@keyframes float-delayed {
+    0% { transform: translateY(0px) rotate(0deg); }
+    50% { transform: translateY(-15px) rotate(-5deg); }
+    100% { transform: translateY(0px) rotate(0deg); }
+}
+
+@keyframes float-slow {
+    0% { transform: translateY(0px) rotate(0deg); }
+    50% { transform: translateY(-10px) rotate(5deg); }
+    100% { transform: translateY(0px) rotate(0deg); }
+}
+
+.animate-float {
+    animation: float 12s infinite ease-in-out;
+}
+
+.animate-float-delayed {
+    animation: float-delayed 15s infinite ease-in-out;
+}
+
+.animate-float-slow {
+    animation: float-slow 18s infinite ease-in-out;
+}
+</style>

src/views/Login.vue

@@ -0,0 +1,84 @@
+<template>
+    <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-900 via-purple-900 to-pink-300 p-5">
+        <!-- 背景装饰 -->
+        <div class="fixed inset-0 pointer-events-none z-0">
+            <div class="absolute w-72 h-72 bg-blue-500 rounded-full opacity-10 top-10 left-10 animate-float"></div>
+            <div class="absolute w-48 h-48 bg-cyan-400 rounded-full opacity-10 top-60 right-15 animate-float-delayed"></div>
+            <div class="absolute w-36 h-36 bg-red-400 rounded-full opacity-10 bottom-10 left-20 animate-float-slow"></div>
+        </div>
+
+        <a-card class="w-full max-w-4xl bg-white/90 backdrop-blur-sm shadow-2xl border-0 z-10">
+            <template #title>
+                <div class="text-center">
+                    <h1 class="text-3xl font-bold text-gray-800 mb-2">高级WebSocket聊天系统</h1>
+                    <p class="text-gray-600">选择以下用户之一登录聊天系统</p>
+                </div>
+            </template>
+
+            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 mt-6">
+                <div
+                    v-for="user in userStore.presetUsers"
+                    :key="user.id"
+                    class="user-card p-4 border-2 border-transparent rounded-xl text-center bg-gray-50 hover:bg-gray-100 cursor-pointer transition-all duration-300 hover:transform hover:-translate-y-1 hover:border-blue-500 hover:shadow-lg"
+                    @click="handleLogin(user)"
+                >
+                    <div
+                        class="w-16 h-16 rounded-full mx-auto mb-3 flex items-center justify-center text-white text-xl font-bold"
+                        :style="{ background: user.color }"
+                    >
+                        {{ user.name.charAt(0) }}
+                    </div>
+                    <h4 class="text-lg font-semibold text-gray-800 mb-1">{{ user.name }}</h4>
+                    <p class="text-sm text-gray-500">ID: {{ user.id }}</p>
+                </div>
+            </div>
+        </a-card>
+    </div>
+</template>
+
+<script setup>
+import { useUserStore } from '@/stores/user';
+import { useRouter } from 'vue-router';
+import { message } from 'ant-design-vue';
+
+const userStore = useUserStore();
+const router = useRouter();
+
+const handleLogin = (user) => {
+    userStore.login(user);
+    message.success(`欢迎回来，${user.name}！`);
+    router.push('/');
+};
+</script>
+
+<style scoped>
+@keyframes float {
+    0% { transform: translateY(0px) rotate(0deg); }
+    50% { transform: translateY(-20px) rotate(10deg); }
+    100% { transform: translateY(0px) rotate(0deg); }
+}
+
+@keyframes float-delayed {
+    0% { transform: translateY(0px) rotate(0deg); }
+    50% { transform: translateY(-15px) rotate(-5deg); }
+    100% { transform: translateY(0px) rotate(0deg); }
+}
+
+@keyframes float-slow {
+    0% { transform: translateY(0px) rotate(0deg); }
+    50% { transform: translateY(-10px) rotate(5deg); }
+    100% { transform: translateY(0px) rotate(0deg); }
+}
+
+.animate-float {
+    animation: float 12s infinite ease-in-out;
+}
+
+.animate-float-delayed {
+    animation: float-delayed 15s infinite ease-in-out;
+}
+
+.animate-float-slow {
+    animation: float-slow 18s infinite ease-in-out;
+}
+</style>