diff --git a/resources/views/chat.blade.php b/resources/views/chat.blade.php
index a612b712..a21ea591 100644
--- a/resources/views/chat.blade.php
+++ b/resources/views/chat.blade.php
@@ -10,6 +10,7 @@
     <!-- 添加 Vue.js CDN -->
     <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
     <style>
+        /* 原有样式保持不变 */
         :root {
             --bg-dark: #121212;
             --bg-darker: #0a0a0a;
@@ -463,10 +464,54 @@
             50% { transform: scale(1.1); box-shadow: 0 0 10px var(--accent); }
             100% { transform: scale(1); }
         }
+
+        /* 新增样式：媒体消息样式 */
+        .media-message {
+            max-width: 300px;
+            margin: 5px 0;
+            border-radius: 8px;
+            overflow: hidden;
+        }
+
+        .media-message img {
+            max-width: 100%;
+            max-height: 300px;
+            display: block;
+            border-radius: 8px;
+        }
+
+        .media-message video {
+            max-width: 100%;
+            max-height: 300px;
+            display: block;
+            border-radius: 8px;
+        }
+
+        .upload-indicator {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 16px;
+            background: rgba(30, 30, 30, 0.8);
+            border-radius: 20px;
+            position: fixed;
+            top: 70px;
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 100;
+            backdrop-filter: blur(10px);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.5);
+        }
     </style>
 </head>
 <body>
 <div id="app">
+    <!-- 上传状态指示器 -->
+    <div class="upload-indicator" v-if="uploadStatus.show">
+        <i :class="uploadStatus.icon" :style="{ color: uploadStatus.color }"></i>
+        <span>@{{ uploadStatus.message }}</span>
+    </div>
+
     <!-- 连接状态提示 -->
     <div class="connection-status">
         <div class="status-indicator" :class="connectionStatus"></div>
@@ -532,7 +577,20 @@
                         <div class="message-body">
                             <div class="message-name">@{{ msg.name }}</div>
                             <div class="message-bubble">
-                                <div class="message-content">@{{ msg.text }}</div>
+                                <!-- 文本消息 -->
+                                <div class="message-content" v-if="msg.messageType === 'text'">
+                                    @{{ msg.text }}
+                                </div>
+
+                                <!-- 图片消息 -->
+                                <div class="media-message" v-else-if="msg.messageType === 'image'">
+                                    <img :src="msg.text" alt="Image">
+                                </div>
+
+                                <!-- 视频消息 -->
+                                <div class="media-message" v-else-if="msg.messageType === 'video'">
+                                    <video :src="msg.text" controls></video>
+                                </div>
                             </div>
                             <div class="message-info">
                                 <span class="timestamp">@{{ formatTime(msg.timestamp) }}</span>
@@ -581,20 +639,20 @@
 <script>
     // 常见的emoji
     const EMOJIS = [
-        '😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣',
-        '😊', '😇', '🙂', '🙃', '😉', '😌', '😍', '🥰',
-        '😘', '😗', '😋', '😛', '😜', '🤪', '😝', '🤑',
-        '🤗', '🤭', '🤫', '🤔', '🤐', '🤨', '😐', '😑',
-        '😶', '😏', '😒', '🙄', '😬', '🤥', '😲', '😮',
-        '😦', '😧', '😳', '😵', '😖', '😫', '😩', '🥺',
-        '😢', '😭', '😤', '😠', '😡', '🤬', '🤯', '😳',
-        '🥵', '🥶', '😨', '😰', '😥', '😓', '🤗', '🤔',
-        '🫣', '🤭', '🤫', '🫢', '🫠', '😶‍🌫️', '😐', '😑',
-        '🙈', '🙉', '🙊', '❤️', '💛', '💚', '💙', '💜',
-        '💔', '💋', '💯', '💢', '💥', '💫', '💦', '💨',
-        '👍', '👎', '👌', '✌️', '🤞', '🤟', '🤘', '🤙',
-        '👋', '🤚', '🖐️', '✋', '🖖', '👏', '🙌', '👐',
-        '🤲', '🤝', '🙏', '💪', '🦾', '🦿', '🦵', '🦶'
+        '😀😀', '😃😃', '😄😄', '😁😁', '😆😆', '😅😅', '😂', '🤣🤣',
+        '😊😊', '😇😇', '🙂🙂', '🙃🙃', '😉😉', '😌😌', '😍😍', '🥰🥰',
+        '😘😘', '😗😗', '😋😋', '😛😛', '😜😜', '🤪🤪', '😝😝', '🤑🤑',
+        '🤗🤗', '🤭🤭', '🤫🤫', '🤔🤔', '🤐🤐', '🤨🤨', '😐😐', '😑😑',
+        '😶😶', '😏😏', '😒😒', '🙄🙄', '😬😬', '🤥🤥', '😲😲', '😮😮',
+        '😦😦', '😧😧', '😳😳', '😵😵', '😖😖', '😫😫', '😩😩', '🥺🥺',
+        '😢😢', '😭😭', '😤😤', '😠😠', '😡😡', '🤬🤬', '🤯🤯', '😳😳',
+        '🥵🥵', '🥶🥶', '😨😨', '😰😰', '😥😥', '😓😓', '🤗🤗', '🤔🤔',
+        '🫣🫣🫣', '🤭🤭', '🤫🤫', '🫢🫢🫢', '🫠🫠🫠', '😶😶‍🌫🌫️', '😐😐', '😑😑',
+        '🙈🙈', '🙉🙉', '🙊🙊', '❤️', '💛💛', '💚💚', '💙💙', '💜💜',
+        '💔💔', '💋💋', '💯💯', '💢💢', '💥💥', '💫💫', '💦💦', '💨💨',
+        '👍', '👎👎', '👌👌', '✌✌️', '🤞🤞', '🤟🤟', '🤘🤘', '🤙🤙',
+        '👋👋', '🤚🤚', '🖐🖐🖐️', '✋✋', '🖖🖖🖖', '👏👏', '🙌🙌', '👐👐',
+        '🤲🤲', '🤝🤝', '🙏🙏', '💪💪', '🦾🦾🦾', '🦿🦿🦿', '🦵🦵🦵', '🦶🦶🦶'
     ];
 
     // 头像颜色
@@ -603,6 +661,10 @@
         '#60a5fa', '#c084fc', '#fb923c', '#34d399'
     ];
 
+    // 模拟上传的媒体URL
+    const MOCK_IMAGE_URL = 'http://d-jy.nailaoyun.cn/storage/image//20250509/e2e107d3776542eea1c454d84e9bff0c.png';
+    const MOCK_VIDEO_URL = 'http://d-jy.nailaoyun.cn/storage/video//20250327/2cc1abf9bd69410ce7c69660daf54260.mp4';
+
     new Vue({
         el: '#app',
         data: {
@@ -623,7 +685,13 @@
             socket: null,
             statusText: '未连接',
             connectionStatus: '',
-            serverUrl: "{{ config('gateway.ws_address') }}"
+            serverUrl: "{{ config('gateway.ws_address') }}",
+            uploadStatus: {
+                show: false,
+                message: '',
+                icon: '',
+                color: '#ffffff'
+            }
         },
         created() {
             this.token = sessionStorage.getItem('token');
@@ -648,8 +716,6 @@
                 this.currentUser.name = userData.name;
 
                 // 为用户生成头像颜色
-                // const colorIndex = Math.floor(Math.random() * AVATAR_COLORS.length);
-                // this.currentUser.avatarColor = AVATAR_COLORS[colorIndex];
                 this.currentUser.avatarColor = userData.avatarColor;
             },
             connectWebSocket() {
@@ -702,7 +768,8 @@
                             avatarColor: message.avatarColor,
                             text: message.content,
                             timestamp: new Date(message.timestamp),
-                            type: message.userId === this.currentUser.id ? 'sent' : 'received'
+                            type: message.userId === this.currentUser.id ? 'sent' : 'received',
+                            messageType: 'text' // 默认文本类型
                         });
                         break;
                     case 'user_list':
@@ -734,7 +801,8 @@
                     userName: this.currentUser.name,
                     avatarColor: this.currentUser.avatarColor,
                     content: text,
-                    timestamp: Date.now()
+                    timestamp: Date.now(),
+                    messageType: 'text' // 文本消息
                 };
 
                 let token = sessionStorage.getItem('token');
@@ -762,7 +830,8 @@
                                     avatarColor: this.currentUser.avatarColor,
                                     text: text,
                                     timestamp: new Date(),
-                                    type: 'sent'
+                                    type: 'sent',
+                                    messageType: 'text'
                                 });
                                 // 清空输入框
                                 this.messageInput = '';
@@ -880,19 +949,77 @@
                                     name: item.nick_name,
                                     avatarColor: item.avatar,
                                     text: item.content,
-                                    // timestamp: new Date(item.timestamp),
                                     timestamp: item.timestamp,
-                                    type: item.type
+                                    type: item.type,
+                                    messageType: 'text' // 默认为文本类型
                                 });
                             });
                         }
                     })
             },
-            showImageUpload() {
-                this.addSystemMessage("图片上传功能（实际应用中需要实现上传功能）");
+            // 显示图片上传状态
+            showUploadStatus(message, icon, color) {
+                this.uploadStatus = {
+                    show: true,
+                    message: message,
+                    icon: icon,
+                    color: color
+                };
+
+                // 3秒后自动隐藏
+                setTimeout(() => {
+                    this.uploadStatus.show = false;
+                }, 3000);
             },
+
+            // 模拟图片上传功能
+            showImageUpload() {
+                // 显示上传状态
+                this.showUploadStatus('图片上传中...', 'fas fa-spinner fa-spin', '#4ade80');
+
+                // 模拟上传过程
+                setTimeout(() => {
+                    // 上传成功
+                    this.showUploadStatus('图片上传成功', 'fas fa-check-circle', '#4ade80');
+
+                    // 添加到消息列表
+                    this.addMessage({
+                        userId: this.currentUser.id,
+                        name: this.currentUser.name,
+                        avatarColor: this.currentUser.avatarColor,
+                        text: MOCK_IMAGE_URL,
+                        timestamp: new Date(),
+                        type: 'sent',
+                        messageType: 'image' // 图片类型
+                    });
+
+                    // 实际开发中应通过API发送到服务器
+                }, 2000);
+            },
+
+            // 模拟视频上传功能
             showAttachmentUpload() {
-                this.addSystemMessage("附件上传功能（实际应用中需要实现上传功能）");
+                // 显示上传状态
+                this.showUploadStatus('视频上传中...', 'fas fa-spinner fa-spin', '#60a5fa');
+
+                // 模拟上传过程
+                setTimeout(() => {
+                    // 上传成功
+                    this.showUploadStatus('视频上传成功', 'fas fa-check-circle', '#60a5fa');
+
+                    // 添加到消息列表
+                    this.addMessage({
+                        userId: this.currentUser.id,
+                        name: this.currentUser.name,
+                        avatarColor: this.currentUser.avatarColor,
+                        text: MOCK_VIDEO_URL,
+                        timestamp: new Date(),
+                        type: 'sent',
+                        messageType: 'video' // 视频类型
+                    });
+
+                    // 实际开发中应通过API发送到服务器
+                }, 2000);
             }
         }
     });
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
index af957a85..a612b712 100644
--- a/resources/views/welcome.blade.php
+++ b/resources/views/welcome.blade.php
@@ -3,9 +3,12 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>奶酪云 - 暗色主题聊天室</title>
+    <title>奶酪云聊天室</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.5/axios.min.js"></script>
+    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
+    <!-- 添加 Vue.js CDN -->
+    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
     <style>
         :root {
             --bg-dark: #121212;
@@ -35,94 +38,6 @@
             overflow: hidden;
         }
 
-        #login-container {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            background: var(--bg-light);
-            padding: 2.5rem;
-            border-radius: 12px;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
-            width: 100%;
-            max-width: 420px;
-            z-index: 10;
-        }
-
-        #login-container.hidden {
-            display: none;
-        }
-
-        .login-header {
-            text-align: center;
-            margin-bottom: 2rem;
-        }
-
-        .login-header h1 {
-            font-size: 1.8rem;
-            margin-bottom: 0.5rem;
-            background: linear-gradient(90deg, var(--accent), #9d88ff);
-            -webkit-background-clip: text;
-            background-clip: text;
-            color: transparent;
-        }
-
-        .login-header p {
-            color: var(--text-secondary);
-            font-size: 0.9rem;
-        }
-
-        .login-form .input-group {
-            margin-bottom: 1.5rem;
-        }
-
-        .login-form label {
-            display: block;
-            margin-bottom: 0.5rem;
-            font-size: 0.9rem;
-            color: var(--text-secondary);
-        }
-
-        .login-form input {
-            width: 100%;
-            padding: 12px 15px;
-            border-radius: 8px;
-            background: rgba(255, 255, 255, 0.05);
-            border: 1px solid var(--border);
-            color: var(--text-primary);
-            font-size: 1rem;
-            transition: all 0.3s;
-        }
-
-        .login-form input:focus {
-            outline: none;
-            border-color: var(--accent);
-            box-shadow: 0 0 0 3px rgba(106, 85, 250, 0.2);
-        }
-
-        #login-btn {
-            width: 100%;
-            padding: 12px;
-            border-radius: 8px;
-            background: var(--accent);
-            color: white;
-            font-weight: bold;
-            font-size: 1rem;
-            border: none;
-            cursor: pointer;
-            transition: all 0.3s;
-            margin-top: 1rem;
-        }
-
-        #login-btn:hover {
-            background: var(--accent-hover);
-            transform: translateY(-2px);
-        }
-
-        #login-btn:active {
-            transform: translateY(1px);
-        }
-
         .connection-status {
             display: flex;
             align-items: center;
@@ -150,9 +65,13 @@
             background: var(--success);
         }
 
+        .status-indicator.disconnected {
+            background: var(--error);
+        }
+
         #chat-container {
-            display: none;
             height: 100vh;
+            display: flex;
             flex-direction: column;
             background: var(--bg-dark);
         }
@@ -185,7 +104,6 @@
             width: 38px;
             height: 38px;
             border-radius: 50%;
-            background: linear-gradient(45deg, var(--accent), #7e6efc);
             display: flex;
             align-items: center;
             justify-content: center;
@@ -244,6 +162,10 @@
             background: rgba(255, 255, 255, 0.05);
         }
 
+        .user-item.me {
+            background: rgba(255, 255, 255, 0.05);
+        }
+
         .user-item.active {
             background: rgba(106, 85, 250, 0.15);
             border-left: 3px solid var(--accent);
@@ -287,7 +209,6 @@
             width: 36px;
             height: 36px;
             border-radius: 50%;
-            background: linear-gradient(45deg, var(--accent), #7e6efc);
             display: flex;
             align-items: center;
             justify-content: center;
@@ -545,82 +466,112 @@
     </style>
 </head>
 <body>
-<!-- 登录页面 -->
-<div id="login-container">
-    <div class="login-header">
-        <h1>奶酪云聊天室</h1>
-        <p>安全通讯 · 暗色主题 · 极致体验</p>
-    </div>
-    <form class="login-form" id="login-form">
-        <div class="input-group">
-            <label for="user-id">用户ID</label>
-            <input type="text" id="user-id" required autocomplete="off" placeholder="请输入您的唯一ID">
-        </div>
-        <div class="input-group">
-            <label for="user-name">用户名称</label>
-            <input type="text" id="user-name" required autocomplete="off" placeholder="输入您的显示名称">
-        </div>
-        <button type="submit" id="login-btn">登录聊天室</button>
-    </form>
-</div>
-
-<!-- 连接状态提示 -->
-<div class="connection-status">
-    <div class="status-indicator" id="status-indicator"></div>
-    <span id="status-text">未连接</span>
-</div>
-
-<!-- 聊天主界面 -->
-<div id="chat-container">
-    <div class="chat-header">
-        <div class="chat-title">
-            <div class="user-avatar" id="user-avatar">U</div>
-            <h2 id="current-username">聊天室</h2>
-        </div>
-        <button id="logout-btn">退出登录</button>
+<div id="app">
+    <!-- 连接状态提示 -->
+    <div class="connection-status">
+        <div class="status-indicator" :class="connectionStatus"></div>
+        <span id="status-text">@{{ statusText }}：@{{ selectUsers.nick_name }}</span>
     </div>
 
-    <div class="chat-content">
-        <div class="user-list">
-            <div class="section-title">在线用户 <span id="online-count">(0)</span></div>
-            <div id="user-list-container">
-                <!-- 用户列表将通过JS动态生成 -->
+    <!-- 聊天主界面 -->
+    <div id="chat-container">
+        <div class="chat-header">
+            <div class="chat-title">
+                <div class="user-avatar" id="user-avatar" :style="{ background: currentUser.avatarColor }">
+                    @{{ currentUser.name.charAt(0).toUpperCase() }}
+                </div>
+                <h2 id="current-username">@{{ currentUser.name }} 的接诊室</h2>
             </div>
+            <button id="logout-btn" @click="handleLogout">退出登录</button>
         </div>
 
-        <div class="chat-area">
-            <div class="messages-container" id="messages-container">
-                <div class="no-messages">
-                    <i class="fas fa-comment-alt"></i>
-                    <p>开始聊天吧！您发送的消息将在这里显示</p>
-                </div>
-            </div>
-
-            <div class="message-input-area">
-                <!-- 工具栏 -->
-                <div class="input-toolbar">
-                    <div class="toolbar-btn" id="image-btn">
-                        <i class="fas fa-image"></i>
-                    </div>
-                    <div class="toolbar-btn" id="voice-btn">
-                        <i class="fas fa-microphone"></i>
-                    </div>
-                    <div class="toolbar-btn" id="attach-btn">
-                        <i class="fas fa-paperclip"></i>
-                    </div>
-                </div>
-
-                <div class="input-container">
-                    <textarea id="message-input" placeholder="输入消息..." autocomplete="off"></textarea>
-                    <div class="input-actions">
-                        <div class="emoji-btn" id="emoji-btn">
-                            <i class="far fa-smile"></i>
+        <div class="chat-content">
+            <div class="user-list">
+                <div class="section-title">用户列表 <span id="online-count">(@{{ users.length }})</span></div>
+                <div id="user-list-container">
+                    <!-- 当前用户显示在顶部 -->
+                    <div class="user-item me">
+                        <div class="user-avatar" :style="{ background: currentUser.avatarColor }">
+                            @{{ currentUser.name.charAt(0).toUpperCase() }}
                         </div>
-                        <button id="send-btn">发送</button>
+                        <div class="user-name">@{{ currentUser.name }} (我)</div>
+                        <div class="status-indicator connected"></div>
+                    </div>
+
+                    <!-- 其他用户列表 -->
+                    <div class="user-item"
+                         v-for="user in users"
+                         :key="user.id"
+                         v-if="user.id != currentUser.id"
+                         @click="selectUser(user)"
+                         :class="{
+                            active: selectUsers.id === user.id
+                         }"
+                    >
+                        <div class="user-avatar" :style="{ background: user.avatar || '#6a55fa' }">
+                            @{{ user.nick_name.charAt(0).toUpperCase() }}
+                        </div>
+                        <div class="user-name">@{{ user.nick_name }}</div>
+                        <div class="status-indicator" :class="{ connected: user.is_uid_online === true }"></div>
                     </div>
                 </div>
-                <div class="emoji-picker" id="emoji-picker">
-                    <!-- Emoji将通过JS动态加载 -->
+            </div>
+
+            <div class="chat-area">
+                <div class="messages-container" id="messages-container">
+                    <div class="no-messages" v-if="messages.length === 0">
+                        <i class="fas fa-comment-alt"></i>
+                        <p>开始聊天吧！您发送的消息将在这里显示</p>
+                    </div>
+
+                    <!-- 聊天消息 -->
+                    <div class="message-container" :class="msg.type" v-for="msg in messages" :key="msg.timestamp">
+                        <div class="message-avatar" :style="{ background: msg.avatarColor }">
+                            @{{ msg.name.charAt(0).toUpperCase() }}
+                        </div>
+                        <div class="message-body">
+                            <div class="message-name">@{{ msg.name }}</div>
+                            <div class="message-bubble">
+                                <div class="message-content">@{{ msg.text }}</div>
+                            </div>
+                            <div class="message-info">
+                                <span class="timestamp">@{{ formatTime(msg.timestamp) }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="message-input-area">
+                    <!-- 工具栏 -->
+                    <div class="input-toolbar">
+                        <div class="toolbar-btn" id="image-btn" @click="showImageUpload">
+                            <i class="fas fa-image"></i>
+                        </div>
+                        <div class="toolbar-btn" id="voice-btn" :class="{ recording: isRecording }" @click="toggleVoiceRecording">
+                            <i :class="isRecording ? 'fas fa-square' : 'fas fa-microphone'"></i>
+                        </div>
+                        <div class="toolbar-btn" id="attach-btn" @click="showAttachmentUpload">
+                            <i class="fas fa-paperclip"></i>
+                        </div>
+                    </div>
+
+                    <div class="input-container">
+                        <textarea id="message-input" v-model="messageInput" placeholder="输入消息..."
+                                  autocomplete="off" @keydown.enter.exact.prevent="sendChatMessage"></textarea>
+                        <div class="input-actions">
+                            <div class="emoji-btn" id="emoji-btn" @click="toggleEmojiPicker">
+                                <i class="far fa-smile"></i>
+                            </div>
+                            <button id="send-btn" @click="sendChatMessage">发送</button>
+                        </div>
+                    </div>
+
+                    <!-- Emoji选择器 -->
+                    <div class="emoji-picker" :class="{ show: showEmojiPicker }" id="emoji-picker">
+                        <div class="emoji-item" v-for="(emoji, index) in emojis" :key="index" @click="addEmoji(emoji)">
+                            @{{ emoji }}
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -628,435 +579,322 @@
 </div>
 
 <script>
-    // 当前用户信息
-    let currentUser = {
-        id: '',
-        name: '',
-        avatarColor: '#6a55fa' // 新增用户头像颜色属性
-    };
-
-    // 为不同用户生成不同颜色的头像
-    const avatarColors = [
-        '#6a55fa', '#f87171', '#4ade80', '#fbbf24', '#60a5fa', '#c084fc', '#fb923c'
+    // 常见的emoji
+    const EMOJIS = [
+        '😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣',
+        '😊', '😇', '🙂', '🙃', '😉', '😌', '😍', '🥰',
+        '😘', '😗', '😋', '😛', '😜', '🤪', '😝', '🤑',
+        '🤗', '🤭', '🤫', '🤔', '🤐', '🤨', '😐', '😑',
+        '😶', '😏', '😒', '🙄', '😬', '🤥', '😲', '😮',
+        '😦', '😧', '😳', '😵', '😖', '😫', '😩', '🥺',
+        '😢', '😭', '😤', '😠', '😡', '🤬', '🤯', '😳',
+        '🥵', '🥶', '😨', '😰', '😥', '😓', '🤗', '🤔',
+        '🫣', '🤭', '🤫', '🫢', '🫠', '😶‍🌫️', '😐', '😑',
+        '🙈', '🙉', '🙊', '❤️', '💛', '💚', '💙', '💜',
+        '💔', '💋', '💯', '💢', '💥', '💫', '💦', '💨',
+        '👍', '👎', '👌', '✌️', '🤞', '🤟', '🤘', '🤙',
+        '👋', '🤚', '🖐️', '✋', '🖖', '👏', '🙌', '👐',
+        '🤲', '🤝', '🙏', '💪', '🦾', '🦿', '🦵', '🦶'
     ];
 
-    // WebSocket连接
-    let socket = null;
-    const serverUrl = "ws://t-ws.nailaoyun.cn/ws/";
-    // const serverUrl = "ws://127.0.0.1:18282";
+    // 头像颜色
+    const AVATAR_COLORS = [
+        '#6a55fa', '#f87171', '#4ade80', '#fbbf24',
+        '#60a5fa', '#c084fc', '#fb923c', '#34d399'
+    ];
 
-    // DOM元素引用
-    const loginContainer = document.getElementById('login-container');
-    const chatContainer = document.getElementById('chat-container');
-    const loginForm = document.getElementById('login-form');
-    const userIdInput = document.getElementById('user-id');
-    const userNameInput = document.getElementById('user-name');
-    const statusIndicator = document.getElementById('status-indicator');
-    const statusText = document.getElementById('status-text');
-    const messagesContainer = document.getElementById('messages-container');
-    const messageInput = document.getElementById('message-input');
-    const sendBtn = document.getElementById('send-btn');
-    const logoutBtn = document.getElementById('logout-btn');
-    const userAvatar = document.getElementById('user-avatar');
-    const currentUsername = document.getElementById('current-username');
-    const userListContainer = document.getElementById('user-list-container');
-    const onlineCount = document.getElementById('online-count');
-    const emojiBtn = document.getElementById('emoji-btn');
-    const emojiPicker = document.getElementById('emoji-picker');
-    const imageBtn = document.getElementById('image-btn');
-    const voiceBtn = document.getElementById('voice-btn');
-    const attachBtn = document.getElementById('attach-btn');
-
-    // 登录时清除本地缓存
-    function clearStoredCredentials() {
-        localStorage.removeItem('chat_userId');
-        localStorage.removeItem('chat_userName');
-    }
-
-    // 初始化页面：尝试加载缓存的用户信息
-    function initializePage() {
-        const savedUserId = localStorage.getItem('chat_userId');
-        const savedUserName = localStorage.getItem('chat_userName');
-
-        if (savedUserId && savedUserName) {
-            userIdInput.value = savedUserId;
-            userNameInput.value = savedUserName;
-        }
-    }
-
-    // 处理用户登录
-    function handleLogin(e) {
-        e.preventDefault();
-
-        const userId = userIdInput.value.trim();
-        const userName = userNameInput.value.trim();
-
-        if (!userId || !userName) {
-            alert('请输入用户ID和名称');
-            return;
-        }
-
-        // 清除旧缓存
-        clearStoredCredentials();
-        // 保存新凭证
-        localStorage.setItem('chat_userId', userId);
-        localStorage.setItem('chat_userName', userName);
-
-        currentUser.id = userId;
-        currentUser.name = userName;
-
-        // 为用户生成头像颜色
-        const randomIndex = Math.floor(Math.random() * avatarColors.length);
-        currentUser.avatarColor = avatarColors[randomIndex];
-
-        // 更新用户UI
-        userAvatar.textContent = userName.charAt(0).toUpperCase();
-        userAvatar.style.background = currentUser.avatarColor;
-        currentUsername.textContent = `${userName} 的聊天`;
-
-        // 隐藏登录页，显示聊天页
-        loginContainer.classList.add('hidden');
-        chatContainer.style.display = 'flex';
-
-        // 连接WebSocket
-        connectWebSocket();
-    }
-
-    // 连接WebSocket
-    function connectWebSocket() {
-        updateStatus('连接中...', 'connecting');
-
-        socket = new WebSocket(serverUrl);
-
-        socket.onopen = () => {
-            updateStatus('已连接', 'connected');
-
-            // 发送登录信息
-            socket.send(JSON.stringify({
-                type: 'login',
-                userId: currentUser.id,
-                userName: currentUser.name,
-                avatarColor: currentUser.avatarColor
-            }));
-        };
-
-        socket.onmessage = (event) => {
-            try {
-                const message = JSON.parse(event.data);
-                handleIncomingMessage(message);
-            } catch (e) {
-                console.error('消息解析错误:', e);
+    new Vue({
+        el: '#app',
+        data: {
+            currentUser: {
+                id: '',
+                name: '',
+                username: '',
+                avatarColor: ''
+            },
+            selectUsers: [],
+            users: [],
+            messages: [],
+            messageInput: '',
+            token: '',
+            showEmojiPicker: false,
+            emojis: EMOJIS,
+            isRecording: false,
+            socket: null,
+            statusText: '未连接',
+            connectionStatus: '',
+            serverUrl: "{{ config('gateway.ws_address') }}"
+        },
+        created() {
+            this.token = sessionStorage.getItem('token');
+            this.initializeUser();
+            this.connectWebSocket();
+            let selectUserLocalStorage = localStorage.getItem('selectUser')
+            if (selectUserLocalStorage) {
+                this.selectUser(JSON.parse(selectUserLocalStorage))
             }
-        };
+        },
+        methods: {
+            initializeUser() {
+                const storedUser = sessionStorage.getItem('currentUser');
+                if (!storedUser) {
+                    window.location.href = '/login';
+                    return;
+                }
 
-        socket.onerror = (error) => {
-            console.error('WebSocket错误:', error);
-            updateStatus('连接出错', 'error');
-        };
+                const userData = JSON.parse(storedUser);
+                this.currentUser.id = userData.id;
+                this.currentUser.username = userData.username;
+                this.currentUser.name = userData.name;
 
-        socket.onclose = () => {
-            updateStatus('连接已关闭', 'disconnected');
-        };
-    }
+                // 为用户生成头像颜色
+                // const colorIndex = Math.floor(Math.random() * AVATAR_COLORS.length);
+                // this.currentUser.avatarColor = AVATAR_COLORS[colorIndex];
+                this.currentUser.avatarColor = userData.avatarColor;
+            },
+            connectWebSocket() {
+                this.updateStatus('连接中...', 'connecting');
 
-    // 处理接收到的消息
-    function handleIncomingMessage(message) {
-        switch(message.type) {
-            case 'system':
-                addSystemMessage(message.content);
-                break;
-            case 'login_success':
-                // 如果有client_id字段，不为空，则缓存
-                if (message.client_id) {
-                    localStorage.setItem('chat_client_id', message.client_id);
-                    // axios请求/b
-                    axios.post('/b', {
-                        client_id: message.client_id,
-                        user_id: currentUser.id
-                    }).then(response => {
+                this.socket = new WebSocket(this.serverUrl);
+
+                this.socket.onopen = () => {
+                    this.updateStatus('已连接', 'connected');
+
+                    // 发送登录信息
+                    this.socket.send(JSON.stringify({
+                        type: 'login',
+                        userId: this.currentUser.id,
+                        userName: this.currentUser.name,
+                        avatarColor: this.currentUser.avatarColor
+                    }));
+                };
+
+                this.socket.onmessage = (event) => {
+                    try {
+                        const message = JSON.parse(event.data);
+                        this.handleIncomingMessage(message);
+                    } catch (e) {
+                        console.error('消息解析错误:', e);
+                    }
+                };
+
+                this.socket.onerror = (error) => {
+                    console.error('WebSocket错误:', error);
+                    this.updateStatus('连接出错', 'error');
+                };
+
+                this.socket.onclose = () => {
+                    this.updateStatus('连接已关闭', 'disconnected');
+                };
+            },
+            handleIncomingMessage(message) {
+                switch(message.type) {
+                    case 'system':
+                        // this.addSystemMessage(message.content);
+                        break;
+                    case 'login_success':
+                        this.handleLoginSuccess(message);
+                        break;
+                    case 'chat':
+                        this.addMessage({
+                            userId: message.userId,
+                            name: message.userName,
+                            avatarColor: message.avatarColor,
+                            text: message.content,
+                            timestamp: new Date(message.timestamp),
+                            type: message.userId === this.currentUser.id ? 'sent' : 'received'
+                        });
+                        break;
+                    case 'user_list':
+                        this.updateUserList(message.users);
+                        break;
+                    default:
+                        console.log('未知消息类型:', message);
+                }
+            },
+            handleLoginSuccess(message) {
+                let token = sessionStorage.getItem('token');
+                axios.post('/api/b', {
+                    client_id: message.client_id,
+                    user_id: token
+                }).then(response => {
+                    console.log('请求成功:', response.data);
+                }).catch(error => {
+                    console.error('请求出错:', error);
+                });
+                this.addSystemMessage(message.content);
+            },
+            sendChatMessage() {
+                const text = this.messageInput.trim();
+                if (!text) return;
+
+                const message = {
+                    type: 'chat',
+                    userId: this.currentUser.id,
+                    userName: this.currentUser.name,
+                    avatarColor: this.currentUser.avatarColor,
+                    content: text,
+                    timestamp: Date.now()
+                };
+
+                let token = sessionStorage.getItem('token');
+
+                if (this.socket && this.socket.readyState === WebSocket.OPEN) {
+                    axios.post('/api/im/send-message', {
+                        message_type: 0,
+                        data: message,
+                        to_user_id: this.selectUsers.id,
+                        chat_room_id: this.selectUsers.chat_room_id
+                    }, {
+                        headers: {
+                            'token': `${token}`,
+                            'Content-Type': 'application/json'
+                        }
+                    })
+                        .then(response => {
+                            console.log('请求成功:', response.data);
+                            let res = response.data;
+                            if (res.code === 0) {
+                                // 添加消息到UI（自己的消息）
+                                this.addMessage({
+                                    userId: this.currentUser.id,
+                                    name: this.currentUser.name,
+                                    avatarColor: this.currentUser.avatarColor,
+                                    text: text,
+                                    timestamp: new Date(),
+                                    type: 'sent'
+                                });
+                                // 清空输入框
+                                this.messageInput = '';
+                            }
+                        })
+                        .catch(error => {
+                            console.error('请求出错:', error);
+                        });
+                }
+            },
+            updateStatus(text, status) {
+                this.statusText = text;
+                this.connectionStatus = status === 'connected' ? 'connected' : '';
+            },
+            addSystemMessage(text) {
+                // this.messages.push({
+                //     content: text,
+                //     timestamp: new Date()
+                // });
+                // this.scrollToBottom();
+            },
+            addMessage(msg) {
+                this.messages.push(msg);
+                this.scrollToBottom();
+            },
+            updateUserList(users) {
+                console.log('更新用户列表:', users);
+                let token = sessionStorage.getItem('token');
+                axios.get('/api/user/user-list', {
+                    headers: {
+                        'token': `${token}`,
+                        'Content-Type': 'application/json'
+                    }
+                })
+                    .then(response => {
                         console.log('请求成功:', response.data);
-                    }).catch(error => {
+                        let res = response.data;
+                        if (res.code === 0) {
+                            this.users = res.result;
+                        }
+                    })
+                    .catch(error => {
                         console.error('请求出错:', error);
                     });
+            },
+            formatTime(date) {
+                if (!(date instanceof Date)) {
+                    date = new Date(date);
                 }
-                addSystemMessage(message.content);
-                break;
-
-            case 'chat':
-                addMessage({
-                    userId: message.userId,
-                    name: message.userName,
-                    avatarColor: message.avatarColor || avatarColors[Math.floor(Math.random() * avatarColors.length)],
-                    text: message.content,
-                    timestamp: new Date(message.timestamp),
-                    type: message.userId === currentUser.id ? 'sent' : 'received'
+                const hours = date.getHours().toString().padStart(2, '0');
+                const minutes = date.getMinutes().toString().padStart(2, '0');
+                return `${hours}:${minutes}`;
+            },
+            scrollToBottom() {
+                this.$nextTick(() => {
+                    const container = document.getElementById('messages-container');
+                    container.scrollTop = container.scrollHeight;
                 });
-                break;
+            },
+            handleLogout() {
+                if (this.socket && this.socket.readyState === WebSocket.OPEN) {
+                    this.socket.close();
+                }
 
-            case 'user_list':
-                updateUserList(message.users);
-                break;
+                sessionStorage.removeItem('currentUser');
+                window.location.href = '/login';
+            },
+            toggleVoiceRecording() {
+                if (!this.isRecording) {
+                    // 开始录制
+                    this.isRecording = true;
+                    document.getElementById('voice-btn').style.backgroundColor = 'rgba(248, 113, 113, 0.2)';
 
-            default:
-                console.log('未知消息类型:', message);
-        }
-    }
-
-    // 发送聊天消息
-    function sendChatMessage() {
-        const text = messageInput.value.trim();
-        if (!text) return;
-
-        const message = {
-            type: 'chat',
-            userId: currentUser.id,
-            userName: currentUser.name,
-            avatarColor: currentUser.avatarColor,
-            content: text,
-            timestamp: Date.now()
-        };
-
-        if (socket && socket.readyState === WebSocket.OPEN) {
-            socket.send(JSON.stringify(message));
-
-            // 添加消息到UI（自己的消息）
-            addMessage({
-                userId: currentUser.id,
-                name: currentUser.name,
-                avatarColor: currentUser.avatarColor,
-                text: text,
-                timestamp: new Date(),
-                type: 'sent'
-            });
-
-            // 清空输入框
-            messageInput.value = '';
-
-            // 重新聚焦输入框
-            messageInput.focus();
-        }
-    }
-
-    // 更新连接状态
-    function updateStatus(text, status) {
-        statusText.textContent = text;
-
-        statusIndicator.className = 'status-indicator';
-        switch(status) {
-            case 'connecting':
-                statusIndicator.style.backgroundColor = 'var(--warning)';
-                break;
-            case 'connected':
-                statusIndicator.classList.add('connected');
-                break;
-            case 'error':
-            case 'disconnected':
-                statusIndicator.style.backgroundColor = 'var(--error)';
-                break;
-        }
-    }
-
-    // 添加系统消息
-    function addSystemMessage(text) {
-        const noMessages = messagesContainer.querySelector('.no-messages');
-        if (noMessages) noMessages.remove();
-
-        const systemMessage = document.createElement('div');
-        systemMessage.className = 'system-message';
-        systemMessage.textContent = text;
-        messagesContainer.appendChild(systemMessage);
-        scrollToBottom();
-    }
-
-    // 添加聊天消息到UI（优化后的结构）
-    function addMessage(msg) {
-        const noMessages = messagesContainer.querySelector('.no-messages');
-        if (noMessages) noMessages.remove();
-
-        const messageContainer = document.createElement('div');
-        messageContainer.className = `message-container ${msg.type}`;
-
-        // 格式化时间
-        const hours = msg.timestamp.getHours().toString().padStart(2, '0');
-        const minutes = msg.timestamp.getMinutes().toString().padStart(2, '0');
-        const timeString = `${hours}:${minutes}`;
-
-        messageContainer.innerHTML = `
-            <div class="message-avatar" style="background: ${msg.avatarColor}">${msg.name.charAt(0).toUpperCase()}</div>
-            <div class="message-body">
-                <div class="message-name">${msg.name}</div>
-                <div class="message-bubble">
-                    <div class="message-content">${escapeHtml(msg.text)}</div>
-                </div>
-                <div class="message-info">
-                    <span class="timestamp">${timeString}</span>
-                </div>
-            </div>
-        `;
-
-        messagesContainer.appendChild(messageContainer);
-        scrollToBottom();
-    }
-
-    // 更新用户列表
-    function updateUserList(users) {
-        userListContainer.innerHTML = '';
-        onlineCount.textContent = `(${users.length})`;
-
-        if (users.length === 0) {
-            userListContainer.innerHTML = '<div class="no-users">暂无在线用户</div>';
-            return;
-        }
-
-        // 当前用户显示在顶部
-        const currentUserItem = document.createElement('div');
-        currentUserItem.className = 'user-item active';
-        currentUserItem.innerHTML = `
-                <div class="user-avatar" style="background: ${currentUser.avatarColor}">${currentUser.name.charAt(0).toUpperCase()}</div>
-                <div class="user-name">${currentUser.name} (我)</div>
-                <div class="status-indicator connected"></div>
-            `;
-        userListContainer.appendChild(currentUserItem);
-
-        // 添加其他用户
-        users.filter(user => user.id != currentUser.id).forEach(user => {
-            const avatarColor = user.avatarColor || avatarColors[Math.floor(Math.random() * avatarColors.length)];
-
-            const userItem = document.createElement('div');
-            userItem.className = 'user-item';
-            userItem.innerHTML = `
-                    <div class="user-avatar" style="background: ${avatarColor}">${user.name.charAt(0).toUpperCase()}</div>
-                    <div class="user-name">${user.name}</div>
-                    <div class="status-indicator connected"></div>
-                `;
-            userListContainer.appendChild(userItem);
-        });
-    }
-
-    // 初始化Emoji选择器
-    function initEmojiPicker() {
-        // 常见的emoji
-        const emojis = [
-            '😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣',
-            '😊', '😇', '🙂', '🙃', '😉', '😌', '😍', '🥰',
-            '😘', '😗', '😋', '😛', '😜', '🤪', '😝', '🤑',
-            '🤗', '🤭', '🤫', '🤔', '🤐', '🤨', '😐', '😑',
-            '😶', '😏', '😒', '🙄', '😬', '🤥', '😲', '😮',
-            '😦', '😧', '😳', '😵', '😖', '😫', '😩', '🥺',
-            '😢', '😭', '😤', '😠', '😡', '🤬', '🤯', '😳',
-            '🥵', '🥶', '😨', '😰', '😥', '😓', '🤗', '🤔',
-            '🫣', '🤭', '🤫', '🫢', '🫠', '😶‍🌫️', '😐', '😑',
-            '🙈', '🙉', '🙊', '❤️', '💛', '💚', '💙', '💜',
-            '💔', '💋', '💯', '💢', '💥', '💫', '💦', '💨',
-            '👍', '👎', '👌', '✌️', '🤞', '🤟', '🤘', '🤙',
-            '👋', '🤚', '🖐️', '✋', '🖖', '👏', '🙌', '👐',
-            '🤲', '🤝', '🙏', '💪', '🦾', '🦿', '🦵', '🦶'
-        ];
-
-        emojiPicker.innerHTML = '';
-        emojis.forEach(emoji => {
-            const emojiItem = document.createElement('div');
-            emojiItem.className = 'emoji-item';
-            emojiItem.textContent = emoji;
-            emojiItem.addEventListener('click', () => {
-                messageInput.value += emoji;
-                emojiPicker.classList.remove('show');
-            });
-            emojiPicker.appendChild(emojiItem);
-        });
-    }
-
-    // 辅助函数：HTML转义
-    function escapeHtml(text) {
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
-    }
-
-    // 滚动到底部
-    function scrollToBottom() {
-        messagesContainer.scrollTop = messagesContainer.scrollHeight;
-    }
-
-    // 退出登录
-    function handleLogout() {
-        if (socket && socket.readyState === WebSocket.OPEN) {
-            socket.close();
-        }
-
-        clearStoredCredentials();
-        location.reload();
-    }
-
-    // 语音录制功能
-    function handleVoiceRecording() {
-        if (!voiceBtn.classList.contains('recording')) {
-            // 开始录制
-            voiceBtn.classList.add('recording');
-            voiceBtn.innerHTML = '<i class="fas fa-square"></i>';
-            document.getElementById('voice-btn').style.backgroundColor = 'rgba(248, 113, 113, 0.2)';
-
-            // 这里应该添加实际录制逻辑
-            setTimeout(() => {
-                // 模拟完成录制
-                handleVoiceRecordingEnd();
-            }, 3000);
-        }
-    }
-
-    function handleVoiceRecordingEnd() {
-        voiceBtn.classList.remove('recording');
-        voiceBtn.innerHTML = '<i class="fas fa-microphone"></i>';
-        document.getElementById('voice-btn').style.backgroundColor = '';
-    }
-
-    // 事件监听
-    document.addEventListener('DOMContentLoaded', () => {
-        initializePage();
-        initEmojiPicker();
-
-        // 表单提交登录
-        loginForm.addEventListener('submit', handleLogin);
-
-        // 发送消息
-        sendBtn.addEventListener('click', sendChatMessage);
-
-        // Enter发送消息，Shift+Enter换行
-        messageInput.addEventListener('keydown', (e) => {
-            if (e.key === 'Enter' && !e.shiftKey) {
-                e.preventDefault();
-                sendChatMessage();
+                    // 模拟3秒后停止录制
+                    setTimeout(() => {
+                        this.isRecording = false;
+                        document.getElementById('voice-btn').style.backgroundColor = '';
+                    }, 3000);
+                } else {
+                    // 停止录制
+                    this.isRecording = false;
+                    document.getElementById('voice-btn').style.backgroundColor = '';
+                }
+            },
+            toggleEmojiPicker() {
+                this.showEmojiPicker = !this.showEmojiPicker;
+            },
+            addEmoji(emoji) {
+                this.messageInput += emoji;
+                this.showEmojiPicker = false;
+            },
+            selectUser(user) {
+                localStorage.setItem('selectUser', JSON.stringify(user));
+                console.log('Selected user:', user);
+                // 这里可以添加选择用户后的逻辑
+                this.selectUsers = user;
+                this.messages = [];
+                axios.get('/api/im/get-message-by-chat-room-id', {
+                    params: {
+                        chat_room_id: user.chat_room_id
+                    },
+                    headers: {
+                        'token': `${this.token}`,
+                        'Content-Type': 'application/json'
+                    }
+                })
+                    .then(response => {
+                        console.log('请求成功:', response.data);
+                        let res = response.data;
+                        let result =  res.result;
+                        if (res.code === 0) {
+                            result.forEach(item => {
+                                this.addMessage({
+                                    userId: item.userId,
+                                    name: item.nick_name,
+                                    avatarColor: item.avatar,
+                                    text: item.content,
+                                    // timestamp: new Date(item.timestamp),
+                                    timestamp: item.timestamp,
+                                    type: item.type
+                                });
+                            });
+                        }
+                    })
+            },
+            showImageUpload() {
+                this.addSystemMessage("图片上传功能（实际应用中需要实现上传功能）");
+            },
+            showAttachmentUpload() {
+                this.addSystemMessage("附件上传功能（实际应用中需要实现上传功能）");
             }
-        });
-
-        // Emoji选择器
-        emojiBtn.addEventListener('click', (e) => {
-            emojiPicker.classList.toggle('show');
-            e.stopPropagation();
-        });
-
-        // 点击页面其他地方关闭emoji选择器
-        document.addEventListener('click', (e) => {
-            if (emojiPicker.classList.contains('show') && !emojiPicker.contains(e.target) && !emojiBtn.contains(e.target)) {
-                emojiPicker.classList.remove('show');
-            }
-        });
-
-        // 退出登录
-        logoutBtn.addEventListener('click', handleLogout);
-
-        // 图片按钮功能
-        imageBtn.addEventListener('click', () => {
-            alert('图片上传功能已准备就绪');
-        });
-
-        // 语音按钮功能
-        voiceBtn.addEventListener('click', handleVoiceRecording);
-
-        // 附件按钮功能
-        attachBtn.addEventListener('click', () => {
-            alert('附件上传功能已准备就绪');
-        });
+        }
     });
 </script>
 </body>
