feat: 添加右侧面板、聊天和走棋记录组件
This commit is contained in:
92
src/views/game/components/MoveHistory.vue
Normal file
92
src/views/game/components/MoveHistory.vue
Normal file
@@ -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>
|
||||||
145
src/views/game/components/RoomChat.vue
Normal file
145
src/views/game/components/RoomChat.vue
Normal file
@@ -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>
|
||||||
79
src/views/game/components/RoomRightPanel.vue
Normal file
79
src/views/game/components/RoomRightPanel.vue
Normal file
@@ -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>
|
||||||
Reference in New Issue
Block a user