diff --git a/src/views/ChatRoom.vue b/src/views/ChatRoom.vue
new file mode 100644
index 0000000..ad63f9d
--- /dev/null
+++ b/src/views/ChatRoom.vue
@@ -0,0 +1,187 @@
+<template>
+  <div class="chat-room">
+    <h2>聊天室</h2>
+    <div class="chat-messages" ref="messagesRef">
+      <div v-for="(msg, idx) in messages" :key="idx" class="chat-message">
+        <span class="chat-user">{{ msg.username || '匿名' }}：</span>
+        <span class="chat-content">{{ msg.content }}</span>
+        <span class="chat-time" v-if="msg.timestamp">({{ formatTime(msg.timestamp) }})</span>
+      </div>
+    </div>
+    <div class="chat-input">
+      <el-input v-model="input" placeholder="输入消息..." @keyup.enter="sendMessage" />
+      <el-button type="primary" @click="sendMessage">发送</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import { useStore } from 'vuex'
+import axios from 'axios'
+
+const store = useStore()
+const wsUrl = 'ws://localhost:8081/api/ws/chat'
+const ws = ref(null)
+const messages = ref([])
+const input = ref('')
+const messagesRef = ref(null)
+
+function getToken() {
+  return localStorage.getItem('token')
+}
+
+function setCookie(name, value, days = 7) {
+  const expires = new Date()
+  expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000))
+  document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`
+}
+
+// 获取聊天历史记录
+async function loadChatHistory() {
+  try {
+    const token = getToken()
+    if (!token) return
+
+    console.log('🔄 获取聊天历史记录...')
+    const response = await axios.get('http://localhost:8081/api/chat/history', {
+      params: { roomId: 1 },
+      headers: { 'sapling-token': token }
+    })
+    
+    if (response.data && Array.isArray(response.data)) {
+      messages.value = response.data
+      console.log('📚 获取到', response.data.length, '条历史消息')
+      
+      // 滚动到底部
+      nextTick(() => {
+        if (messagesRef.value) {
+          messagesRef.value.scrollTop = messagesRef.value.scrollHeight
+        }
+      })
+    }
+  } catch (error) {
+    console.error('❌ 获取聊天历史失败:', error)
+  }
+}
+
+function connect() {
+  const token = getToken()
+  if (!token) {
+    console.error('无法连接WebSocket：未找到token')
+    return
+  }
+
+  // 设置cookie，这样WebSocket握手时后端可以从cookie获取token
+  setCookie('sapling-token', token)
+  
+  console.log('尝试连接WebSocket:', wsUrl)
+  console.log('已设置cookie: sapling-token =', token)
+  
+  ws.value = new WebSocket(wsUrl)
+  
+  ws.value.onopen = async () => {
+    console.log('✅ WebSocket连接成功')
+    // 连接成功后立即获取聊天历史
+    await loadChatHistory()
+  }
+  
+  ws.value.onmessage = (event) => {
+    console.log('📥 收到消息:', event.data)
+    try {
+      const msg = JSON.parse(event.data)
+      console.log('📥 解析后的消息:', msg)
+      messages.value.push(msg)
+      nextTick(() => {
+        if (messagesRef.value) {
+          messagesRef.value.scrollTop = messagesRef.value.scrollHeight
+        }
+      })
+    } catch (e) {
+      console.error('❌ 消息解析失败:', e, event.data)
+    }
+  }
+  
+  ws.value.onerror = (err) => {
+    console.error('❌ WebSocket错误:', err)
+  }
+  
+  ws.value.onclose = (event) => {
+    console.log('❌ WebSocket已断开, 代码:', event.code, '原因:', event.reason)
+    setTimeout(() => {
+      console.log('🔄 尝试重连...')
+      connect()
+    }, 2000)
+  }
+}
+
+function sendMessage() {
+  if (!input.value.trim()) return
+  
+  if (!ws.value || ws.value.readyState !== WebSocket.OPEN) {
+    console.error('❌ WebSocket未连接')
+    return
+  }
+
+  const message = {
+    roomId: 1, // 默认房间ID为1
+    content: input.value.trim()
+  }
+  
+  console.log('📤 发送消息:', message)
+  ws.value.send(JSON.stringify(message))
+  input.value = ''
+}
+
+function formatTime(timestamp) {
+  return new Date(timestamp).toLocaleTimeString()
+}
+
+onMounted(() => {
+  console.log('🚀 聊天室组件已挂载')
+  connect()
+})
+
+onBeforeUnmount(() => {
+  console.log('🔌 组件卸载，关闭WebSocket连接')
+  if (ws.value) {
+    ws.value.close()
+  }
+})
+</script>
+
+<style scoped>
+.chat-room {
+  max-width: 600px;
+  margin: 40px auto;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  padding: 24px;
+  background: #fff;
+}
+.chat-messages {
+  height: 320px;
+  overflow-y: auto;
+  border: 1px solid #f0f0f0;
+  border-radius: 4px;
+  padding: 12px;
+  margin-bottom: 16px;
+  background: #fafbfc;
+}
+.chat-message {
+  margin-bottom: 8px;
+}
+.chat-user {
+  font-weight: bold;
+  color: #409eff;
+}
+.chat-time {
+  color: #999;
+  font-size: 12px;
+  margin-left: 8px;
+}
+.chat-input {
+  display: flex;
+  gap: 8px;
+}
+</style> 
\ No newline at end of file