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

import { View, Input, Button, Text, Image } from '@tarojs/components'
import { useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import { useAuth } from '@/utils/auth'
import { cn } from '@/utils/cn'

export default function Register() {
  const [username, setUsername] = useState('')
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [confirmPassword, setConfirmPassword] = useState('')
  const [showPassword, setShowPassword] = useState(false)
  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
  const { register, isLoading } = useAuth()

  useEffect(() => {
    Taro.setNavigationBarTitle({
      title: '创建账号'
    })
  }, [])

  const handleRegister = async () => {
    // 输入验证
    if (!username.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()) {
      Taro.showToast({
        title: '请输入密码',
        icon: 'none',
        duration: 2000
      })
      return
    }

    if (password.trim().length < 6) {
      Taro.showToast({
        title: '密码至少6个字符',
        icon: 'none',
        duration: 2000
      })
      return
    }

    if (password.trim() !== confirmPassword.trim()) {
      Taro.showToast({
        title: '两次输入的密码不一致',
        icon: 'none',
        duration: 2000
      })
      return
    }

    if (email.trim() && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())) {
      Taro.showToast({
        title: '请输入有效的邮箱地址',
        icon: 'none',
        duration: 2000
      })
      return
    }

    try {
      Taro.showLoading({
        title: '注册中...',
        mask: true
      })

      await register({
        username: username.trim(),
        password: password.trim(),
        email: email.trim() || undefined
      })
      
      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 || '注册失败，请重试'
      Taro.showToast({
        title: errorMessage,
        icon: 'none',
        duration: 3000
      })
    }
  }

  const goToLogin = () => {
    Taro.navigateBack()
  }

  return (
    <View className="min-h-screen bg-gradient-to-br from-green-50 via-white to-emerald-50">
      <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-plus-20-solid w-12 h-12 text-green-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>
              <View className="relative">
                <View className="absolute left-3 top-1/2 -translate-y-1/2">
                  <View className="i-heroicons-user-20-solid w-5 h-5 text-gray-400" />
                </View>
                <Input
                  className="w-full h-12 pl-10 pr-4 bg-gray-50 rounded-lg text-gray-900 placeholder-gray-500 focus:bg-white focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
                  placeholder="请输入用户名（3-20个字符）"
                  value={username}
                  onInput={(e) => setUsername(e.detail.value)}
                  maxlength={20}
                />
              </View>
            </View>

            {/* 邮箱输入框 */}
            <View className="space-y-2">
              <Text className="text-sm font-medium text-gray-700">邮箱（可选）</Text>
              <View className="relative">
                <View className="absolute left-3 top-1/2 -translate-y-1/2">
                  <View className="i-heroicons-envelope-20-solid w-5 h-5 text-gray-400" />
                </View>
                <Input
                  className="w-full h-12 pl-10 pr-4 bg-gray-50 rounded-lg text-gray-900 placeholder-gray-500 focus:bg-white focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
                  placeholder="请输入邮箱地址"
                  type="text"
                  value={email}
                  onInput={(e) => setEmail(e.detail.value)}
                  maxlength={50}
                />
              </View>
            </View>

            {/* 密码输入框 */}
            <View className="space-y-2">
              <Text className="text-sm font-medium text-gray-700">密码</Text>
              <View className="relative">
                <View className="absolute left-3 top-1/2 -translate-y-1/2">
                  <View className="i-heroicons-lock-closed-20-solid w-5 h-5 text-gray-400" />
                </View>
                <Input
                  className="w-full h-12 pl-10 pr-12 bg-gray-50 rounded-lg text-gray-900 placeholder-gray-500 focus:bg-white focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
                  placeholder="请输入密码（至少6位）"
                  password={!showPassword}
                  value={password}
                  onInput={(e) => setPassword(e.detail.value)}
                  maxlength={20}
                />
                <View 
                  className="absolute right-3 top-1/2 -translate-y-1/2"
                  onClick={() => setShowPassword(!showPassword)}
                >
                  <View className={cn(
                    "w-5 h-5 text-gray-400",
                    showPassword ? "i-heroicons-eye-20-solid" : "i-heroicons-eye-slash-20-solid"
                  )} />
                </View>
              </View>
            </View>

            {/* 确认密码输入框 */}
            <View className="space-y-2">
              <Text className="text-sm font-medium text-gray-700">确认密码</Text>
              <View className="relative">
                <View className="absolute left-3 top-1/2 -translate-y-1/2">
                  <View className="i-heroicons-lock-closed-20-solid w-5 h-5 text-gray-400" />
                </View>
                <Input
                  className="w-full h-12 pl-10 pr-12 bg-gray-50 rounded-lg text-gray-900 placeholder-gray-500 focus:bg-white focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
                  placeholder="请再次输入密码"
                  password={!showConfirmPassword}
                  value={confirmPassword}
                  onInput={(e) => setConfirmPassword(e.detail.value)}
                  maxlength={20}
                />
                <View 
                  className="absolute right-3 top-1/2 -translate-y-1/2"
                  onClick={() => setShowConfirmPassword(!showConfirmPassword)}
                >
                  <View className={cn(
                    "w-5 h-5 text-gray-400",
                    showConfirmPassword ? "i-heroicons-eye-20-solid" : "i-heroicons-eye-slash-20-solid"
                  )} />
                </View>
              </View>
            </View>

            {/* 注册按钮 */}
            <Button
              className={cn(
                "w-full h-12 rounded-lg font-medium text-white transition-all duration-200",
                isLoading || !username || !password || !confirmPassword
                  ? "bg-gray-300 cursor-not-allowed"
                  : "bg-green-500 hover:bg-green-600 active:bg-green-700 shadow-lg"
              )}
              loading={isLoading}
              onClick={handleRegister}
              disabled={isLoading || !username || !password || !confirmPassword}
            >
              {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-green-500 font-medium hover:text-green-600" 
                onClick={goToLogin}
              >
                立即登录
              </Text>
            </Text>
          </View>
        </View>

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