navigate

components.d.ts

@@ -20,11 +20,14 @@ declare module 'vue' {
     NutRange: typeof import('@nutui/nutui-taro')['Range']
     NutRate: typeof import('@nutui/nutui-taro')['Rate']
     NutSearchbar: typeof import('@nutui/nutui-taro')['Searchbar']
+    NutTabbar: typeof import('@nutui/nutui-taro')['Tabbar']
+    NutTabbarItem: typeof import('@nutui/nutui-taro')['TabbarItem']
     NutTabPane: typeof import('@nutui/nutui-taro')['TabPane']
     NutTabs: typeof import('@nutui/nutui-taro')['Tabs']
     PlayerList: typeof import('./src/components/PlayerList/index.vue')['default']
     PlayerOnly: typeof import('./src/components/PlayerOnly/index.vue')['default']
     QuestionCard: typeof import('./src/components/QuestionCard/index.vue')['default']
     RoomCode: typeof import('./src/components/RoomCode/index.vue')['default']
+    Tabbar: typeof import('./src/components/Tabbar.vue')['default']
   }
 }

src/app.config.ts

@@ -15,30 +15,5 @@ export default defineAppConfig({
     navigationBarTitleText: 'LineJoy',
     navigationBarTextStyle: 'black'
   },
-  tabBar: {
-    color: '#999',
-    selectedColor: '#3C92FB',
-    backgroundColor: '#fff',
-    borderStyle: 'black',
-    custom: true,  // 使用自定义tabBar
-    list: [
-      {
-        pagePath: 'pages/index/index',
-        text: '游戏广场'
-      },
-      {
-        pagePath: 'pages/room/join/index',
-        text: '加入房间'
-      },
-      {
-        pagePath: 'pages/history/index',
-        text: '历史记录'
-      },
-      {
-        pagePath: 'pages/profile/index',
-        text: '我的'
-      }
-    ]
-  },
   lazyCodeLoading: 'requiredComponents'
 })

src/components/Tabbar.vue

@@ -0,0 +1,68 @@
+<template>
+  <nut-tabbar 
+    v-model="tabBarStore.currentIndex" 
+    bottom 
+    safe-area-inset-bottom 
+    placeholder
+    unactive-color="#999" 
+    active-color="#3C92FB"
+    @tab-switch="handleTabSwitch"
+  >
+    <nut-tabbar-item 
+      v-for="(item, index) in tabBarStore.tabList" 
+      :key="index" 
+      :tab-title="item.text"
+    >
+      <template #icon>
+        <component 
+          :is="getIconComponent(item.icon)"
+          size="24px"
+        />
+      </template>
+    </nut-tabbar-item>
+  </nut-tabbar>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onBeforeUnmount } from 'vue'
+import { Home, Find, Clock, My } from '@nutui/icons-vue-taro'
+import { useTabBarStore } from '@/stores/tabbar'
+
+// 初始化 store
+const tabBarStore = useTabBarStore()
+
+// 图标组件映射
+const iconComponents = {
+  Home,
+  Find,
+  Clock,
+  My
+}
+
+// 获取图标组件
+const getIconComponent = (iconName) => {
+  return iconComponents[iconName]
+}
+
+// 处理tab切换
+const handleTabSwitch = (item, index) => {
+  // 调用store中的切换方法
+  const tabItem = tabBarStore.tabList[index]
+  tabBarStore.switchTab(tabItem.pagePath, index)
+}
+
+// 生命周期钩子
+onMounted(() => {
+  // 组件挂载时初始化 TabBar 状态
+  tabBarStore.updateSelected()
+  
+  // 设置全局监听
+  tabBarStore.setupListeners()
+})
+
+onBeforeUnmount(() => {
+  // 组件卸载时移除监听
+  tabBarStore.removeListeners()
+})
+</script>
+  

src/pages/game-detail/index.vue

@@ -92,6 +92,7 @@
     
     <nut-empty v-else description="找不到游戏信息" image="empty" />
   </view>
+  <Tabbar></Tabbar>
 </template>
 
 <script setup lang="ts">
@@ -100,7 +101,7 @@ import Taro from '@tarojs/taro'
 import { useGameStore, type Game } from '@/stores/game'
 import { useUserStore } from '@/stores/user'
 import { People, Clock } from '@nutui/icons-vue-taro'
-
+import Tabbar from '@/components/Tabbar.vue'
 // 初始化store
 const gameStore = useGameStore()
 const userStore = useUserStore()

src/pages/history/index.vue

@@ -3,9 +3,11 @@
       <view class="title">历史记录</view>
       <nut-empty description="正在开发中..." image="empty" />
     </view>
+    <Tabbar></Tabbar>
   </template>
   
   <script setup lang="ts">
+  import Tabbar from '@/components/Tabbar.vue'
   // 历史记录页逻辑
   </script>
   

src/pages/index/index.vue

@@ -98,6 +98,7 @@
       </nut-tab-pane>
     </nut-tabs>
   </view>
+  <Tabbar></Tabbar>
 </template>
 
 <script setup lang="ts">
@@ -106,7 +107,7 @@ import Taro from '@tarojs/taro'
 import { useTabBarStore } from '@/stores/tabbar'
 import { useGameStore } from '@/stores/game'
 import GameCard from '@/components/GameCard/index.vue'
-
+import Tabbar from '@/components/Tabbar.vue'
 // 初始化store
 const gameStore = useGameStore()
 

src/pages/profile/index.vue

@@ -3,9 +3,11 @@
       <view class="title">个人中心</view>
       <nut-empty description="正在开发中..." image="empty" />
     </view>
+    <Tabbar></Tabbar>
   </template>
   
   <script setup lang="ts">
+  import Tabbar from '@/components/Tabbar.vue'
   // 个人中心页逻辑
   </script>
   

src/pages/room/create/index.vue

@@ -49,6 +49,7 @@
       <nut-button type="primary" block @click="createRoom">创建并开始</nut-button>
     </view>
   </view>
+  <Tabbar></Tabbar>
 </template>
 
 <script setup lang="ts">
@@ -57,7 +58,7 @@ import Taro from '@tarojs/taro'
 import { useGameStore, type Game } from '@/stores/game'
 import { useUserStore } from '@/stores/user'
 import { roomAPI } from '@/services/api'
-
+import Tabbar from '@/components/Tabbar.vue'
 // 初始化store
 const gameStore = useGameStore()
 const userStore = useUserStore()

src/pages/room/join/index.vue

@@ -47,6 +47,7 @@
       </view>
     </view>
   </view>
+  <Tabbar></Tabbar>
 </template>
 
 <script setup lang="ts">
@@ -55,7 +56,7 @@ import Taro from '@tarojs/taro'
 import { useUserStore } from '@/stores/user'
 import { Scan2, Right } from '@nutui/icons-vue-taro'
 import { roomAPI } from '@/services/api'
-
+import Tabbar from '@/components/Tabbar.vue'
 // 定义房间类型接口
 interface RecentRoom {
   id: string;

src/pages/room/play/index.vue

@@ -3,9 +3,11 @@
       <view class="title">游戏进行中</view>
       <nut-empty description="正在开发中..." image="empty" />
     </view>
+    <Tabbar></Tabbar>   
   </template>
   
   <script setup lang="ts">
+  import Tabbar from '@/components/Tabbar.vue'
   // 游戏进行中页逻辑
   </script>
   

src/pages/room/waiting/index.vue

@@ -3,9 +3,11 @@
       <view class="title">等待室</view>
       <nut-empty description="正在开发中..." image="empty" />
     </view>
+    <Tabbar></Tabbar>
   </template>
   
   <script setup lang="ts">
+  import Tabbar from '@/components/Tabbar.vue'
   // 等待室页逻辑
   </script>
   

src/stores/tabbar.ts

@@ -71,7 +71,7 @@ export const useTabBarStore = defineStore('tabbar', {
       this.currentIndex = index
       
       // 执行页面跳转
-      Taro.switchTab({
+      Taro.reLaunch({
         url,
         success: () => {
           console.log('跳转成功到:', url)