✨ feat(tabbar): 实现底部导航栏功能

- 添加TabBarLayout组件，支持首页、发现和个人中心三个标签页切换
- 新增发现页面(pages/explore)和个人中心页面(pages/profile)
- 更新首页布局，使用TabBarLayout组件包装内容
- 为三个主要页面添加配置文件，统一导航栏样式和下拉刷新功能
- 在app.config.ts中注册新页面路由

✨ feat(page): 简化首页内容展示

- 移除首页原有的用户登录/注册相关功能和UI
- 简化首页布局，仅保留基础欢迎文本
- 通过TabBarLayout组件集成底部导航功能

mini/src/app.config.ts

@@ -1,6 +1,8 @@
 export default defineAppConfig({
   pages: [
     'pages/index/index',
+    'pages/explore/index',
+    'pages/profile/index',
     'pages/login/index',
     'pages/register/index'
   ],

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

@@ -0,0 +1,68 @@
+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

mini/src/pages/explore/index.config.ts

@@ -0,0 +1,6 @@
+export default {
+  navigationBarTitleText: '发现',
+  enablePullDownRefresh: true,
+  backgroundTextStyle: 'dark',
+  backgroundColor: '#f5f5f5',
+}

mini/src/pages/explore/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { View, Text } from '@tarojs/components'
+import { TabBarLayout } from '@/layouts/tab-bar-layout'
+
+const ExplorePage: React.FC = () => {
+  return (
+    <TabBarLayout activeKey="explore">
+      <View className="p-4">
+        <Text className="text-2xl font-bold text-gray-900">发现页面</Text>
+        <View className="mt-4">
+          <Text className="text-gray-600">这里展示发现内容</Text>
+        </View>
+      </View>
+    </TabBarLayout>
+  )
+}
+
+export default ExplorePage

mini/src/pages/index/index.config.ts

@@ -1,5 +1,6 @@
-export default definePageConfig({
+export default {
   navigationBarTitleText: '首页',
-  navigationBarBackgroundColor: '#1890ff',
-  navigationBarTextStyle: 'white'
-})
+  enablePullDownRefresh: true,
+  backgroundTextStyle: 'dark',
+  backgroundColor: '#f5f5f5',
+}

mini/src/pages/index/index.tsx

@@ -1,182 +1,18 @@
-import { View, Text, Button, Image } from '@tarojs/components'
-import { useDidShow } from '@tarojs/taro'
-import { useState } from 'react'
-import Taro from '@tarojs/taro'
-import './index.css'
-import { useAuth } from '@/utils/auth'
-
-export default function Index() {
-  const { user, isLoading, logout } = useAuth()
-  const [logoutLoading, setLogoutLoading] = useState(false)
-
-  useDidShow(() => {
-    // 用户状态由useAuth自动管理，无需手动检查
-    console.log('页面显示，当前用户状态:', user ? '已登录' : '未登录')
-  })
-
-  const handleLogin = () => {
-    Taro.navigateTo({ url: '/pages/login/index' })
-  }
-
-  const handleLogout = async () => {
-    setLogoutLoading(true)
-    try {
-      await logout()
-      // 退出成功后，useAuth会自动更新user状态
-      Taro.showToast({
-        title: '退出成功',
-        icon: 'success'
-      })
-    } catch (error) {
-      console.error('Logout error:', error)
-    } finally {
-      setLogoutLoading(false)
-    }
-  }
-
-  const handleProfile = () => {
-    Taro.navigateTo({ url: '/pages/profile/index' })
-  }
-
-  const goToRegister = () => {
-    Taro.navigateTo({ url: '/pages/register/index' })
-  }
-
-  // 显示加载状态
-  if (isLoading) {
-    return (
-      <View className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
-        <View className="text-center">
-          <View className="w-12 h-12 border-4 border-blue-200 border-t-blue-600 rounded-full animate-spin mx-auto mb-4"></View>
-          <Text className="text-gray-600">加载中...</Text>
-        </View>
-      </View>
-    )
-  }
+import React from 'react'
+import { View, Text } from '@tarojs/components'
+import { TabBarLayout } from '@/layouts/tab-bar-layout'
 
+const HomePage: React.FC = () => {
   return (
-    <View className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
-      {user ? (
-        <View className="p-6">
-          <View className="bg-white rounded-2xl shadow-lg p-6 mb-6">
-            <View className="flex items-center mb-6">
-              <View className="w-20 h-20 rounded-full overflow-hidden mr-4">
-                <Image
-                  className="w-full h-full"
-                  src={user.avatar || 'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=160&h=160&fit=crop&crop=face'}
-                />
-              </View>
-              <View>
-                <Text className="text-gray-600 text-sm">欢迎回来</Text>
-                <Text className="text-2xl font-bold text-gray-900">{user.username}</Text>
-              </View>
-            </View>
-            
-            <View className="space-y-4 mb-6">
-              <View className="flex justify-between items-center py-3 border-b border-gray-100">
-                <Text className="text-gray-600">用户ID</Text>
-                <Text className="text-gray-900 font-mono">{user.id}</Text>
-              </View>
-              {user.email && (
-                <View className="flex justify-between items-center py-3 border-b border-gray-100">
-                  <Text className="text-gray-600">邮箱</Text>
-                  <Text className="text-gray-900">{user.email}</Text>
-                </View>
-              )}
-              <View className="flex justify-between items-center py-3">
-                <Text className="text-gray-600">注册时间</Text>
-                <Text className="text-gray-900">{new Date(user.createdAt).toLocaleDateString()}</Text>
-              </View>
-            </View>
-            
-            <View className="flex space-x-3">
-              <Button className="flex-1" type="primary" onClick={handleProfile}>
-                查看资料
-              </Button>
-              <Button
-                className="flex-1"
-                loading={logoutLoading}
-                onClick={handleLogout}
-              >
-                退出登录
-              </Button>
-            </View>
-          </View>
-          
-          <View className="grid grid-cols-3 gap-4">
-            <View className="bg-white rounded-xl shadow-lg p-4 text-center">
-              <Text className="text-3xl font-bold text-blue-600 mb-1">1</Text>
-              <Text className="text-gray-600 text-sm">今日访问</Text>
-            </View>
-            <View className="bg-white rounded-xl shadow-lg p-4 text-center">
-              <Text className="text-3xl font-bold text-green-600 mb-1">7</Text>
-              <Text className="text-gray-600 text-sm">本周活跃</Text>
-            </View>
-            <View className="bg-white rounded-xl shadow-lg p-4 text-center">
-              <Text className="text-3xl font-bold text-purple-600 mb-1">30</Text>
-              <Text className="text-gray-600 text-sm">本月使用</Text>
-            </View>
-          </View>
+    <TabBarLayout activeKey="home">
+      <View className="p-4">
+        <Text className="text-2xl font-bold text-gray-900">首页</Text>
+        <View className="mt-4">
+          <Text className="text-gray-600">欢迎来到首页！</Text>
         </View>
-      ) : (
-        <View className="p-6">
-          <View className="flex flex-col items-center mb-8">
-            <Image
-              className="w-32 h-32 rounded-full mx-auto mb-4"
-              src="https://images.unsplash.com/photo-1551650975-87deedd944c3?w=192&h=192&fit=crop"
-            />
-            <Text className="text-3xl font-bold text-gray-900 mb-2">欢迎使用小程序444</Text>
-            <Text className="text-gray-600 text-lg">请先登录以使用完整功能</Text>
-          </View>
-          
-          <View className="bg-white rounded-2xl shadow-lg p-6 mb-6">
-            <View className="space-y-4">
-              <Button
-                className="w-full"
-                type="primary"
-                onClick={handleLogin}
-              >
-                立即登录
-              </Button>
-              <Button
-                className="w-full"
-                plain
-                onClick={goToRegister}
-              >
-                注册新账号
-              </Button>
-            </View>
-          </View>
-          
-          <View>
-            <Text className="text-xl font-bold text-gray-900 mb-4 block">功能特色</Text>
-            <View className="grid grid-cols-2 gap-4">
-              <View className="bg-white rounded-xl shadow-lg p-4">
-                <View className="text-2xl mb-2">
-                  <View className="i-heroicons-lock-closed-16-solid" />
-                </View>
-                <Text className="font-bold text-gray-900 mb-1 block">安全认证</Text>
-                <Text className="text-gray-600 text-sm">多重加密保护账户安全</Text>
-              </View>
-              <View className="bg-white rounded-xl shadow-lg p-4">
-                <View className="text-2xl mb-2">👤</View>
-                <Text className="font-bold text-gray-900 mb-1 block">用户管理</Text>
-                <Text className="text-gray-600 text-sm">完整的用户信息管理</Text>
-              </View>
-              <View className="bg-white rounded-xl shadow-lg p-4">
-                <View className="text-2xl mb-2">📱</View>
-                <Text className="font-bold text-gray-900 mb-1 block">响应式设计</Text>
-                <Text className="text-gray-600 text-sm">完美适配各种设备</Text>
-              </View>
-              <View className="bg-white rounded-xl shadow-lg p-4">
-                <View className="text-2xl mb-2">⚡</View>
-                <Text className="font-bold text-gray-900 mb-1 block">实时同步</Text>
-                <Text className="text-gray-600 text-sm">数据实时更新同步</Text>
-              </View>
-            </View>
-          </View>
-        </View>
-      )}
-    </View>
+      </View>
+    </TabBarLayout>
   )
 }
+
+export default HomePage

mini/src/pages/profile/index.config.ts

@@ -0,0 +1,6 @@
+export default {
+  navigationBarTitleText: '我的',
+  enablePullDownRefresh: true,
+  backgroundTextStyle: 'dark',
+  backgroundColor: '#f5f5f5',
+}

mini/src/pages/profile/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { View, Text } from '@tarojs/components'
+import { TabBarLayout } from '@/layouts/tab-bar-layout'
+
+const ProfilePage: React.FC = () => {
+  return (
+    <TabBarLayout activeKey="profile">
+      <View className="p-4">
+        <Text className="text-2xl font-bold text-gray-900">个人中心</Text>
+        <View className="mt-4">
+          <Text className="text-gray-600">这里展示个人信息</Text>
+        </View>
+      </View>
+    </TabBarLayout>
+  )
+}
+
+export default ProfilePage