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