mini-starter/mini/src/layouts/tab-bar-layout.tsx

import React, { ReactNode } from 'react'
import { View } from '@tarojs/components'
import { TabBar, TabBarItem } from '@/components/ui/tab-bar'
import { useRouter } from '@tarojs/taro'

export interface TabBarLayoutProps {
  children: ReactNode
  activeKey: string
}

const tabBarItems: TabBarItem[] = [
  {
    key: 'home',
    title: '首页',
    icon: '🏠',
    selectedIcon: '🏠',
  },
  {
    key: 'explore',
    title: '发现',
    icon: '🔍',
    selectedIcon: '🔍',
  },
  {
    key: 'profile',
    title: '我的',
    icon: '👤',
    selectedIcon: '👤',
  },
]

export const TabBarLayout: React.FC<TabBarLayoutProps> = ({ children, activeKey }) => {
  const handleTabChange = (key: string) => {
    // 使用 Taro 的导航 API 进行页面跳转
    import('@tarojs/taro').then(({ default: Taro }) => {
      switch (key) {
        case 'home':
          Taro.switchTab({ url: '/pages/index/index' })
          break
        case 'explore':
          Taro.switchTab({ url: '/pages/explore/index' })
          break
        case 'profile':
          Taro.switchTab({ url: '/pages/profile/index' })
          break
        default:
          break
      }
    })
  }

  return (
    <View className="min-h-screen bg-gray-50">
      <View className="flex-1">
        {children}
      </View>
      <TabBar
        items={tabBarItems}
        activeKey={activeKey}
        onChange={handleTabChange}
        fixed={true}
        safeArea={true}
      />
    </View>
  )
}

export default TabBarLayout