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>