feat: baselayoutStore

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;