feat: 添加房间顶部信息栏组件

2026-06-23 11:12:12 +08:00
parent 16d3670b5d
commit 6c7d1ce128
1 changed files with 161 additions and 0 deletions
--- a/src/views/game/components/RoomTopBar.vue
+++ b/src/views/game/components/RoomTopBar.vue
@@ -0,0 +1,161 @@
+<template>
+  <div class="room-topbar">
+    <button class="room-topbar__back" @click="goBack">
+      <span class="room-topbar__back-icon">&larr;</span>
+      <span>大厅</span>
+    </button>
+
+    <div class="room-topbar__info">
+      <span class="room-topbar__game-icon">{{ store.gameIcon }}</span>
+      <span class="room-topbar__game-name">{{ store.gameName }}</span>
+      <span class="room-topbar__divider">&middot;</span>
+      <span class="room-topbar__mode">{{ store.mode }}</span>
+      <span class="room-topbar__divider">&middot;</span>
+      <span>底注 {{ store.stakes }}</span>
+    </div>
+
+    <div class="room-topbar__status">
+      <span class="room-topbar__room-name">{{ store.roomName }}</span>
+      <span class="room-topbar__status-badge" :class="statusClass">
+        {{ statusLabel }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useRoomStore } from '@/stores'
+import { storeToRefs } from 'pinia'
+
+const router = useRouter()
+const store = useRoomStore()
+const { status: roomStatus } = storeToRefs(store)
+
+const statusClass = computed(() => {
+  switch (roomStatus.value) {
+    case 'waiting':
+      return 'room-topbar__status-badge--waiting'
+    case 'playing':
+      return 'room-topbar__status-badge--playing'
+    case 'finished':
+      return 'room-topbar__status-badge--finished'
+    default:
+      return ''
+  }
+})
+
+const statusLabel = computed(() => {
+  switch (roomStatus.value) {
+    case 'waiting':
+      return '等待中'
+    case 'playing':
+      return '对局中'
+    case 'finished':
+      return '已结束'
+    default:
+      return ''
+  }
+})
+
+function goBack() {
+  router.push('/')
+}
+</script>
+
+<style scoped lang="scss">
+.room-topbar {
+  display: flex;
+  align-items: center;
+  height: 48px;
+  padding: 0 16px;
+  background-color: var(--bg-surface);
+  border-bottom: 1px solid var(--border-default);
+  gap: 24px;
+  flex-shrink: 0;
+}
+
+.room-topbar__back {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border: 1px solid var(--border-default);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  &:hover {
+    color: var(--text-primary);
+    border-color: var(--color-primary);
+    background-color: var(--color-primary-light);
+  }
+}
+
+.room-topbar__back-icon {
+  font-size: 14px;
+}
+
+.room-topbar__info {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  color: var(--text-primary);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.room-topbar__game-icon {
+  font-size: 16px;
+}
+
+.room-topbar__game-name {
+  font-size: 15px;
+}
+
+.room-topbar__divider {
+  color: var(--text-tertiary);
+  font-weight: 400;
+}
+
+.room-topbar__mode {
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.room-topbar__status {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.room-topbar__room-name {
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.room-topbar__status-badge {
+  padding: 3px 10px;
+  border-radius: 10px;
+  font-size: 12px;
+  font-weight: 600;
+
+  &--waiting {
+    color: var(--color-success);
+    background-color: var(--color-success-light);
+  }
+  &--playing {
+    color: var(--color-warning);
+    background-color: var(--color-warning-light);
+  }
+  &--finished {
+    color: var(--text-tertiary);
+    background-color: var(--bg-body);
+  }
+}
+</style>