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

import { View, Text } from '@tarojs/components'
import { useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import { useAuth } from '@/utils/auth'
import { cn } from '@/utils/cn'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import Navbar from '@/components/ui/navbar'
import './index.css'

export default function Login() {
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [showPassword, setShowPassword] = useState(false)
  const { login, isLoading } = useAuth()

  // 设置导航栏标题
  useEffect(() => {
    Taro.setNavigationBarTitle({
      title: '用户登录'
    })
  }, [])

  const handleLogin = async () => {
    // 输入验证
    if (!username.trim()) {
      Taro.showToast({
        title: '请输入用户名',
        icon: 'none',
        duration: 2000
      })
      return
    }

    if (!password.trim()) {
      Taro.showToast({
        title: '请输入密码',
        icon: 'none',
        duration: 2000
      })
      return
    }

    if (username.trim().length < 3) {
      Taro.showToast({
        title: '用户名至少3个字符',
        icon: 'none',
        duration: 2000
      })
      return
    }

    if (password.trim().length < 6) {
      Taro.showToast({
        title: '密码至少6位',
        icon: 'none',
        duration: 2000
      })
      return
    }
    
    try {
      Taro.showLoading({
        title: '登录中...',
        mask: true
      })

      await login({
        username: username.trim(),
        password: password.trim()
      })
      
      Taro.hideLoading()
      
      Taro.showToast({
        title: '登录成功',
        icon: 'success',
        duration: 1500
      })
      
      setTimeout(() => {
        Taro.switchTab({ url: '/pages/index/index' })
      }, 1500)
    } catch (error: any) {
      Taro.hideLoading()
      
      const errorMessage = error.message || '登录失败'
      
      if (errorMessage.includes('用户名或密码错误')) {
        Taro.showToast({
          title: '用户名或密码错误',
          icon: 'none',
          duration: 3000
        })
      } else if (errorMessage.includes('网络')) {
        Taro.showModal({
          title: '网络错误',
          content: '请检查网络连接后重试',
          showCancel: false,
          confirmText: '确定'
        })
      } else {
        Taro.showToast({
          title: errorMessage,
          icon: 'none',
          duration: 3000
        })
      }
    }
  }

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

  const handleUsernameInput = (e: any) => {
    const value = e.detail.value
    if (value.length <= 20) {
      setUsername(value.replace(/\s+/g, ''))
    }
  }

  const handlePasswordInput = (e: any) => {
    const value = e.detail.value
    if (value.length <= 20) {
      setPassword(value)
    }
  }

  return (
    <View className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50">
      <Navbar
        title="用户登录"
        backgroundColor="bg-transparent"
        textColor="text-gray-900"
        border={false}
      />
      <View className="flex-1 px-6 py-12">
        {/* Logo区域 */}
        <View className="flex flex-col items-center mb-10">
          <View className="w-20 h-20 mb-4 rounded-full bg-white shadow-lg flex items-center justify-center">
            <View className="i-heroicons-user-circle-20-solid w-12 h-12 text-blue-500" />
          </View>
          <Text className="text-2xl font-bold text-gray-900 mb-1">欢迎回来</Text>
          <Text className="text-gray-600 text-sm">请使用您的账号登录系统</Text>
        </View>

        {/* 登录表单 */}
        <View className="bg-white rounded-2xl shadow-sm p-6">
          <View className="space-y-5">
            {/* 用户名输入框 */}
            <View className="space-y-2">
              <Text className="text-sm font-medium text-gray-700">用户名</Text>
              <Input
                leftIcon="i-heroicons-user-20-solid"
                placeholder="请输入用户名"
                value={username}
                onInput={handleUsernameInput}
                maxlength={20}
                type="text"
                confirmType="next"
                size="lg"
                variant="filled"
              />
            </View>

            {/* 密码输入框 */}
            <View className="space-y-2">
              <Text className="text-sm font-medium text-gray-700">密码</Text>
              <Input
                leftIcon="i-heroicons-lock-closed-20-solid"
                rightIcon={showPassword ? "i-heroicons-eye-20-solid" : "i-heroicons-eye-slash-20-solid"}
                placeholder="请输入密码"
                password={!showPassword}
                value={password}
                onInput={handlePasswordInput}
                maxlength={20}
                confirmType="done"
                size="lg"
                variant="filled"
                onRightIconClick={() => setShowPassword(!showPassword)}
              />
            </View>

            {/* 忘记密码 */}
            <View className="flex justify-end">
              <Text className="text-sm text-blue-500 hover:text-blue-600">忘记密码？</Text>
            </View>

            {/* 登录按钮 */}
            <Button
              className={cn(
                "w-full",
                isLoading || !username || !password
                  ? "bg-gray-300"
                  : "bg-blue-500 hover:bg-blue-600"
              )}
              size="lg"
              variant="default"
              onClick={handleLogin}
              disabled={isLoading || !username || !password}
            >
              {isLoading ? (
                <View className="flex items-center justify-center">
                  <View className="i-heroicons-arrow-path-20-solid animate-spin w-5 h-5 mr-2" />
                  登录中...
                </View>
              ) : (
                '安全登录'
              )}
            </Button>
          </View>

          {/* 注册链接 */}
          <View className="mt-6 text-center">
            <Text className="text-sm text-gray-600">
              还没有账号？ 
              <Text 
                className="text-blue-500 font-medium hover:text-blue-600" 
                onClick={goToRegister}
              >
                立即注册
              </Text>
            </Text>
          </View>
        </View>

        {/* 协议声明 */}
        <View className="mt-8 text-center">
          <Text className="text-xs text-gray-500">
            登录即表示您同意
            <Text className="text-blue-500 mx-1">用户协议</Text>
            和
            <Text className="text-blue-500 mx-1">隐私政策</Text>
          </Text>
        </View>
      </View>
    </View>
  )
}