From c1e292ea18efc49a09b10fcbf6669ebf880444a3 Mon Sep 17 00:00:00 2001
From: Azure <983547216@qq.com>
Date: Thu, 18 Jun 2026 10:37:13 +0800
Subject: [PATCH] feat: baselayoutStore

---
 src/components/baseLayouts/GameList.vue | 11 ++++--
 src/layouts/BaseLayout.vue              | 40 +++++++++++++++++++-
 src/stores/modules/baseLayout.ts        | 50 +++++++++++++++++++++++++
 src/stores/modules/index.ts             |  1 +
 4 files changed, 98 insertions(+), 4 deletions(-)
 create mode 100644 src/stores/modules/baseLayout.ts

diff --git a/src/components/baseLayouts/GameList.vue b/src/components/baseLayouts/GameList.vue
index cb39991..35bcc7a 100644
--- a/src/components/baseLayouts/GameList.vue
+++ b/src/components/baseLayouts/GameList.vue
@@ -38,6 +38,8 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
+import { useBaseLayoutStore } from '@/stores'
+import { storeToRefs } from 'pinia'
 
 /** 游戏数据接口 */
 interface GameInfo {
@@ -95,15 +97,18 @@ const games: GameInfo[] = [
   }
 ]
 
-/** 当前选中的游戏 ID */
-const activeGameId = ref<string>('basketball')
+const baseLayoutStore = useBaseLayoutStore()
+const { activeGameId } = storeToRefs(baseLayoutStore)
 
 /** 当前选中的游戏对象 */
 const activeGame = computed(() => games.find((g) => g.id === activeGameId.value) ?? null)
 
 /** 选择游戏 */
 function selectGame(id: string) {
-  activeGameId.value = id
+  const game = games.find((g) => g.id === id)
+  if (game) {
+    baseLayoutStore.setActiveGame(game.id, game.icon, game.name)
+  }
 }
 </script>
 
diff --git a/src/layouts/BaseLayout.vue b/src/layouts/BaseLayout.vue
index ffe8e9e..63cbe1c 100644
--- a/src/layouts/BaseLayout.vue
+++ b/src/layouts/BaseLayout.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="base-layout">
     <!-- 顶部导航栏 -->
-    <div class="base-layout__topbar"></div>
+    <div class="base-layout__topbar">
+      <div class="base-layout__topbar-title">
+        <span class="base-layout__topbar-game-icon">{{ activeGameIcon }}</span>
+        <span class="base-layout__topbar-game-name">{{ activeGameName }}</span>
+      </div>
+    </div>
 
     <!-- 主体区域 -->
     <div class="base-layout__main">
@@ -30,6 +35,11 @@
 <script setup lang="ts">
 import UserBar from '@/components/baseLayouts/UserBar.vue'
 import GameList from '@/components/baseLayouts/GameList.vue'
+import { useBaseLayoutStore } from '@/stores'
+import { storeToRefs } from 'pinia'
+
+const baseLayoutStore = useBaseLayoutStore()
+const { activeGameIcon, activeGameName } = storeToRefs(baseLayoutStore)
 </script>
 
 <style scoped lang="scss">
@@ -43,11 +53,39 @@ import GameList from '@/components/baseLayouts/GameList.vue'
 
 .base-layout__topbar {
   display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   height: 30px;
+  padding: 0 12px;
   background-color: #fde68a; // amber-200
 }
 
+.base-layout__topbar-title {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  height: 30px;
+}
+
+.base-layout__topbar-game-icon {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  line-height: 1;
+  height: 100%;
+}
+
+.base-layout__topbar-game-name {
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1;
+  height: 100%;
+  color: #1a1a1a;
+}
+
 .base-layout__main {
   display: flex;
   flex: 1;
diff --git a/src/stores/modules/baseLayout.ts b/src/stores/modules/baseLayout.ts
new file mode 100644
index 0000000..3df3072
--- /dev/null
+++ b/src/stores/modules/baseLayout.ts
@@ -0,0 +1,50 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useBaseLayoutStore = defineStore(
+  'baseLayout',
+  () => {
+    /** 顶部导航栏标题 */
+    const topbarTitle = ref<string>('')
+    /** 当前选中的游戏 ID */
+    const activeGameId = ref<string>('basketball')
+    /** 当前选中的游戏图标 */
+    const activeGameIcon = ref<string>('🏀')
+    /** 当前选中的游戏名称 */
+    const activeGameName = ref<string>('篮球对决')
+
+    /**
+     * 设置顶部导航栏标题
+     * @param title - 标题文本
+     */
+    const setTopbarTitle = (title: string): void => {
+      topbarTitle.value = title
+    }
+
+    /**
+     * 更新当前选中的游戏信息
+     * @param id - 游戏 ID
+     * @param icon - 游戏图标
+     * @param name - 游戏名称
+     */
+    const setActiveGame = (id: string, icon: string, name: string): void => {
+      activeGameId.value = id
+      activeGameIcon.value = icon
+      activeGameName.value = name
+    }
+
+    return {
+      topbarTitle,
+      activeGameId,
+      activeGameIcon,
+      activeGameName,
+      setTopbarTitle,
+      setActiveGame
+    }
+  },
+  {
+    persist: {
+      pick: ['activeGameId', 'activeGameIcon', 'activeGameName']
+    }
+  }
+)
diff --git a/src/stores/modules/index.ts b/src/stores/modules/index.ts
index a5850be..8f94af6 100644
--- a/src/stores/modules/index.ts
+++ b/src/stores/modules/index.ts
@@ -1 +1,2 @@
 export * from './account.ts'
+export * from './baseLayout.ts'