feat: baselayoutStore

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 baseLayoutStore = useBaseLayoutStore()
-const activeGameId = ref<string>('basketball')
+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>
 

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;

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']
+    }
+  }
+)

src/stores/modules/index.ts

@@ -1 +1,2 @@
 export * from './account.ts'
+export * from './baseLayout.ts'