mini-starter/mini/src/pages/index/index.tsx

import { View, Text, Button, Image } from '@tarojs/components'
import { useLoad, useDidShow } from '@tarojs/taro'
import { useState } from 'react'
import Taro from '@tarojs/taro'
import { authManager, User } from '../../utils/auth'
import './index.css'

export default function Index() {
  const [user, setUser] = useState<User | null>(null)
  const [loading, setLoading] = useState(false)

  useLoad(() => {
    console.log('Index Page loaded.')
    checkLoginStatus()
  })

  useDidShow(() => {
    checkLoginStatus()
  })

  const checkLoginStatus = async () => {
    if (authManager.isLoggedIn()) {
      const userInfo = authManager.getUserInfo()
      setUser(userInfo)
    } else {
      setUser(null)
    }
  }

  const handleLogin = () => {
    Taro.navigateTo({ url: '/pages/login/index' })
  }

  const handleLogout = async () => {
    setLoading(true)
    try {
      await authManager.logout()
      setUser(null)
      Taro.showToast({
        title: '退出成功',
        icon: 'success'
      })
    } catch (error) {
      console.error('Logout error:', error)
    } finally {
      setLoading(false)
    }
  }

  const handleProfile = () => {
    Taro.navigateTo({ url: '/pages/profile/index' })
  }

  const goToRegister = () => {
    Taro.navigateTo({ url: '/pages/register/index' })
  }

  return (
    <View className="index-container">
      {user ? (
        <View className="user-welcome">
          <View className="user-avatar">
            <Image
              className="avatar-image"
              src={user.avatar || 'https://via.placeholder.com/100x100'}
              mode="aspectFill"
            />
          </View>
          
          <Text className="welcome-text">欢迎回来，{user.username}！</Text>
          
          <View className="user-info">
            <Text className="info-item">ID: {user.id}</Text>
            {user.email && <Text className="info-item">邮箱: {user.email}</Text>}
            <Text className="info-item">注册时间: {new Date(user.createdAt).toLocaleDateString()}</Text>
          </View>
          
          <View className="action-buttons">
            <Button className="action-button" type="primary" onClick={handleProfile}>
              查看资料
            </Button>
            <Button 
              className="action-button" 
              type="warn" 
              loading={loading}
              onClick={handleLogout}
            >
              退出登录
            </Button>
          </View>
        </View>
      ) : (
        <View className="login-prompt">
          <View className="welcome-section">
            <Text className="welcome-title">欢迎使用小程序</Text>
            <Text className="welcome-subtitle">请先登录以使用完整功能</Text>
          </View>
          
          <View className="login-buttons">
            <Button 
              className="login-button" 
              type="primary" 
              onClick={handleLogin}
            >
              立即登录
            </Button>
            <Button 
              className="register-button" 
              plain
              onClick={goToRegister}
            >
              注册新账号
            </Button>
          </View>
          
          <View className="features-section">
            <Text className="features-title">功能特色</Text>
            <View className="features-list">
              <Text className="feature-item">✅ 安全的用户认证</Text>
              <Text className="feature-item">✅ 完整的用户管理</Text>
              <Text className="feature-item">✅ 响应式界面设计</Text>
              <Text className="feature-item">✅ 实时数据同步</Text>
            </View>
          </View>
        </View>
      )}
    </View>
  )
}