feat: 添加底部观战栏组件

src/views/game/components/SpectatorBar.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="spectator-bar">
+    <span class="spectator-bar__icon">👀</span>
+    <span class="spectator-bar__text">
+      观战中（{{ spectatorCount }}人）
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useRoomStore } from '@/stores'
+
+const store = useRoomStore()
+const { players } = storeToRefs(store)
+
+/**
+ * 观战人数估算：WS 连接数 - 玩家数
+ * 后续由 WS spectator_join/leave 事件维护更准确的数据
+ */
+const spectatorCount = computed(() => {
+  // 首期简化处理：后端 spectator 数据通过 WS 事件维护
+  // 这里暂时返回固定值，后续通过 Store 中的 spectators 列表计算
+  return 0
+})
+</script>
+
+<style scoped lang="scss">
+.spectator-bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 32px;
+  background-color: var(--bg-surface);
+  border-top: 1px solid var(--border-light);
+  font-size: 12px;
+  color: var(--text-secondary);
+  flex-shrink: 0;
+}
+
+.spectator-bar__icon {
+  font-size: 14px;
+}
+</style>