From 5d45ad037f91728d0cec46313d96b8fd8e59bb0f Mon Sep 17 00:00:00 2001
From: Azure <983547216@qq.com>
Date: Tue, 23 Jun 2026 11:17:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=B8=B8=E6=88=8F?=
 =?UTF-8?q?=E7=94=BB=E5=B8=83=E5=AE=B9=E5=99=A8=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/GameCanvas.vue | 33 ++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 src/views/game/components/GameCanvas.vue

diff --git a/src/views/game/components/GameCanvas.vue b/src/views/game/components/GameCanvas.vue
new file mode 100644
index 0000000..561f32f
--- /dev/null
+++ b/src/views/game/components/GameCanvas.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="game-canvas">
+    <GomokuBoard v-if="store.gameId === 'gomoku'" />
+    <!-- 后续其他游戏在此添加 -->
+    <div v-else class="game-canvas__unsupported">
+      <p>暂不支持的游戏类型</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRoomStore } from '@/stores'
+import { storeToRefs } from 'pinia'
+import GomokuBoard from './GomokuBoard.vue'
+
+const store = useRoomStore()
+const { gameId } = storeToRefs(store)
+</script>
+
+<style scoped lang="scss">
+.game-canvas {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.game-canvas__unsupported {
+  color: var(--text-tertiary);
+  font-size: 16px;
+}
+</style>