From b4352561576375a42f1c0da1eaa878b2a1385baf Mon Sep 17 00:00:00 2001
From: Azure <983547216@qq.com>
Date: Tue, 23 Jun 2026 11:15:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=BA=95=E9=83=A8?=
 =?UTF-8?q?=E8=A7=82=E6=88=98=E6=A0=8F=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/SpectatorBar.vue | 46 ++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 src/views/game/components/SpectatorBar.vue

diff --git a/src/views/game/components/SpectatorBar.vue b/src/views/game/components/SpectatorBar.vue
new file mode 100644
index 0000000..5b8fb28
--- /dev/null
+++ b/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>