From b99d397d1f1a878e293ac9667648696cd2d2097f Mon Sep 17 00:00:00 2001
From: Azure <983547216@qq.com>
Date: Tue, 23 Jun 2026 11:14:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=8F=B3=E4=BE=A7?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E3=80=81=E8=81=8A=E5=A4=A9=E5=92=8C=E8=B5=B0?=
 =?UTF-8?q?=E6=A3=8B=E8=AE=B0=E5=BD=95=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/game/components/MoveHistory.vue    |  92 ++++++++++++
 src/views/game/components/RoomChat.vue       | 145 +++++++++++++++++++
 src/views/game/components/RoomRightPanel.vue |  79 ++++++++++
 3 files changed, 316 insertions(+)
 create mode 100644 src/views/game/components/MoveHistory.vue
 create mode 100644 src/views/game/components/RoomChat.vue
 create mode 100644 src/views/game/components/RoomRightPanel.vue

diff --git a/src/views/game/components/MoveHistory.vue b/src/views/game/components/MoveHistory.vue
new file mode 100644
index 0000000..cb09142
--- /dev/null
+++ b/src/views/game/components/MoveHistory.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="move-history">
+    <div v-if="store.moves.length === 0" class="move-history__empty">
+      暂无走棋记录
+    </div>
+    <div v-else class="move-history__list">
+      <div
+        v-for="move in store.moves"
+        :key="move.moveIndex"
+        class="move-history__item"
+      >
+        <span class="move-history__index">{{ move.moveIndex }}</span>
+        <span class="move-history__player">
+          {{ move.playerId === store.currentUserId ? '我' : getPlayerName(move.playerId) }}
+        </span>
+        <span class="move-history__coord">
+          ({{ move.row }}, {{ move.col }})
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRoomStore } from '@/stores'
+import { storeToRefs } from 'pinia'
+
+const store = useRoomStore()
+const { players } = storeToRefs(store)
+
+/**
+ * 根据用户 ID 获取玩家名称
+ * @param userId 用户 ID
+ * @returns 玩家昵称或"未知"
+ */
+function getPlayerName(userId: string): string {
+  const player = players.value.find((p) => p.userId === userId)
+  return player?.nickname ?? '未知'
+}
+</script>
+
+<style scoped lang="scss">
+.move-history {
+  height: 100%;
+  overflow-y: auto;
+  padding: 10px;
+}
+
+.move-history__empty {
+  text-align: center;
+  color: var(--text-tertiary);
+  font-size: 13px;
+  margin-top: 32px;
+}
+
+.move-history__list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.move-history__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 13px;
+  background-color: var(--bg-body);
+
+  &:nth-child(even) {
+    background-color: var(--bg-surface);
+  }
+}
+
+.move-history__index {
+  font-weight: 600;
+  color: var(--text-tertiary);
+  width: 24px;
+}
+
+.move-history__player {
+  flex: 1;
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+.move-history__coord {
+  color: var(--text-secondary);
+  font-family: monospace;
+}
+</style>
diff --git a/src/views/game/components/RoomChat.vue b/src/views/game/components/RoomChat.vue
new file mode 100644
index 0000000..e2a7d3c
--- /dev/null
+++ b/src/views/game/components/RoomChat.vue
@@ -0,0 +1,145 @@
+<template>
+  <div class="room-chat">
+    <!-- 消息列表 -->
+    <div ref="messagesContainer" class="room-chat__messages">
+      <div v-for="(msg, idx) in store.messages" :key="idx" class="room-chat__msg">
+        <span class="room-chat__msg-user">{{ msg.userId === store.currentUserId ? '我' : getUserName(msg.userId) }}</span>
+        <span class="room-chat__msg-text">{{ msg.content }}</span>
+      </div>
+      <div v-if="store.messages.length === 0" class="room-chat__empty">
+        暂无消息
+      </div>
+    </div>
+
+    <!-- 输入区 -->
+    <div class="room-chat__input-area">
+      <input
+        v-model="input"
+        class="room-chat__input"
+        placeholder="输入消息..."
+        maxlength="200"
+        @keyup.enter="sendMessage"
+      />
+      <button class="room-chat__send-btn" @click="sendMessage">发送</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, inject, nextTick, watch } from 'vue'
+import { useRoomStore } from '@/stores'
+import { storeToRefs } from 'pinia'
+import type { RoomSocket } from '@/common/websocket/roomSocket'
+
+const store = useRoomStore()
+const { messages, players } = storeToRefs(store)
+const socket = inject<RoomSocket>('roomSocket')!
+
+/** 输入框内容 */
+const input = ref('')
+/** 消息列表容器引用，用于自动滚动 */
+const messagesContainer = ref<HTMLElement>()
+
+/**
+ * 监听消息列表变化，自动滚动到底部
+ */
+watch(() => messages.value.length, async () => {
+  await nextTick()
+  if (messagesContainer.value) {
+    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
+  }
+})
+
+/** 发送聊天消息 */
+function sendMessage() {
+  const content = input.value.trim()
+  if (!content) return
+  socket.send('chat', { content })
+  input.value = ''
+}
+
+/**
+ * 根据用户 ID 获取显示名称
+ * @param userId 用户 ID
+ * @returns 用户昵称或"未知用户"
+ */
+function getUserName(userId: string): string {
+  const player = players.value.find((p) => p.userId === userId)
+  return player?.nickname ?? '未知用户'
+}
+</script>
+
+<style scoped lang="scss">
+.room-chat {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.room-chat__messages {
+  flex: 1;
+  padding: 10px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.room-chat__msg {
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.room-chat__msg-user {
+  font-weight: 600;
+  color: var(--color-primary);
+  margin-right: 6px;
+}
+
+.room-chat__msg-text {
+  color: var(--text-primary);
+}
+
+.room-chat__empty {
+  text-align: center;
+  color: var(--text-tertiary);
+  font-size: 13px;
+  margin-top: 32px;
+}
+
+.room-chat__input-area {
+  display: flex;
+  gap: 8px;
+  padding: 10px;
+  border-top: 1px solid var(--border-light);
+}
+
+.room-chat__input {
+  flex: 1;
+  padding: 6px 10px;
+  border: 1px solid var(--border-default);
+  border-radius: 6px;
+  font-size: 13px;
+  background-color: var(--bg-surface);
+  color: var(--text-primary);
+  outline: none;
+
+  &:focus {
+    border-color: var(--color-primary);
+  }
+}
+
+.room-chat__send-btn {
+  padding: 6px 14px;
+  border: none;
+  border-radius: 6px;
+  background-color: var(--color-primary);
+  color: var(--text-inverse);
+  font-size: 13px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--color-primary-hover);
+  }
+}
+</style>
diff --git a/src/views/game/components/RoomRightPanel.vue b/src/views/game/components/RoomRightPanel.vue
new file mode 100644
index 0000000..ce86918
--- /dev/null
+++ b/src/views/game/components/RoomRightPanel.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="room-right-panel">
+    <div class="room-right-panel__tabs">
+      <button
+        :class="{ 'room-right-panel__tab--active': activeTab === 'chat' }"
+        class="room-right-panel__tab"
+        @click="activeTab = 'chat'"
+      >
+        聊天
+      </button>
+      <button
+        :class="{ 'room-right-panel__tab--active': activeTab === 'moves' }"
+        class="room-right-panel__tab"
+        @click="activeTab = 'moves'"
+      >
+        记录
+      </button>
+    </div>
+
+    <div class="room-right-panel__content">
+      <RoomChat v-if="activeTab === 'chat'" />
+      <MoveHistory v-else />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import RoomChat from './RoomChat.vue'
+import MoveHistory from './MoveHistory.vue'
+
+/** 当前选中的标签页 */
+const activeTab = ref<'chat' | 'moves'>('chat')
+</script>
+
+<style scoped lang="scss">
+.room-right-panel {
+  display: flex;
+  flex-direction: column;
+  width: 320px;
+  border-left: 1px solid var(--border-default);
+  background-color: var(--bg-sidebar);
+  flex-shrink: 0;
+}
+
+.room-right-panel__tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border-light);
+}
+
+.room-right-panel__tab {
+  flex: 1;
+  padding: 10px 0;
+  border: none;
+  background: transparent;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  border-bottom: 2px solid transparent;
+
+  &:hover {
+    color: var(--text-primary);
+  }
+
+  &--active {
+    color: var(--color-primary);
+    border-bottom-color: var(--color-primary);
+  }
+}
+
+.room-right-panel__content {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+</style>