u

code/base-project/base-app/src/app/auth/register.tsx

@@ -1,10 +1,149 @@
-import { Text, View } from 'react-native'
+import type { FormWrapperRef } from '@/components/common/FormWrapper'
+import { Lock, UserRound } from 'lucide-react-native'
+import { useRef, useState } from 'react'
+import { Image, View } from 'react-native'
+import FormWrapper from '@/components/common/FormWrapper'
+import { Button, ButtonSpinner, ButtonText } from '@/components/ui/button'
+import { useToast } from '@/utils/toast'
+
+interface RegisterForm {
+  username: string
+  password: string
+  confirmPassword: string
+  a: string
+  b: string
+  c: string
+}
+
+export default function AuthLogin() {
+  const toast = useToast()
+  const [form, setForm] = useState<RegisterForm>({
+    username: '',
+    password: '',
+    confirmPassword: '',
+    a: '',
+    b: '',
+    c: '',
+  })
+  const [loading, setLoading] = useState(false)
+  const formRef = useRef<FormWrapperRef>(null)
+
+  const handleInputChange = (field: keyof RegisterForm, value: string) => {
+    setForm(prev => ({ ...prev, [field]: value }))
+  }
+
+  const defaultLogin = () => {
+    if (formRef.current?.validate()) {
+      setLoading(true)
+      toast.show({ title: '校验通过，开始注册', action: 'success' })
+      // 模拟注册过程
+      setTimeout(() => {
+        setLoading(false)
+      }, 2000)
+    }
+  }
 
-export default function Register() {
   return (
-    <View style={{ minHeight: 1000 }}>
-      <Text>测试内容</Text>
-      <View style={{ height: 800, backgroundColor: 'red' }} />
+    <View className="flex flex-col items-center px-6 h-full mb-4">
+      <Image source={require('@/static/images/logo.png')} style={{ width: 120, height: 120 }} className="my-12" />
+
+      <FormWrapper ref={formRef} form={form}>
+        <FormWrapper.FormItem
+          name="username"
+          label="账号"
+          required
+        >
+          <FormWrapper.Input
+            placeholder="请输入账号"
+            leftIcon={UserRound}
+            value={form.username}
+            onChangeText={text => handleInputChange('username', text)}
+          />
+        </FormWrapper.FormItem>
+
+        <FormWrapper.FormItem
+          name="password"
+          label="密码"
+          required
+          rules={[
+            (val: any) => val && !/\d{6}/.test(val) ? '请输入6位数字密码' : null,
+          ]}
+        >
+          <FormWrapper.Input
+            placeholder="请输入密码"
+            leftIcon={Lock}
+            isPassword
+            value={form.password}
+            onChangeText={text => handleInputChange('password', text)}
+          />
+        </FormWrapper.FormItem>
+
+        <FormWrapper.FormItem
+          name="confirmPassword"
+          label="确认密码"
+          required
+          rules={[
+            (val: any) => val !== form.password ? '两次密码不一致' : null,
+          ]}
+        >
+          <FormWrapper.Input
+            placeholder="请再次输入密码"
+            leftIcon={Lock}
+            isPassword
+            value={form.confirmPassword}
+            onChangeText={text => handleInputChange('confirmPassword', text)}
+          />
+        </FormWrapper.FormItem>
+        <FormWrapper.FormItem
+          name="a"
+          label="a"
+          required
+        >
+          <FormWrapper.Input
+            placeholder="请再次输入密码"
+            isPassword
+            value={form.a}
+            onChangeText={text => handleInputChange('a', text)}
+          />
+        </FormWrapper.FormItem>
+        <FormWrapper.FormItem
+          name="b"
+          label="b"
+          required
+        >
+          <FormWrapper.Input
+            placeholder="请再次输入密码"
+            isPassword
+            value={form.a}
+            onChangeText={text => handleInputChange('b', text)}
+          />
+        </FormWrapper.FormItem>
+        <FormWrapper.FormItem
+          name="c"
+          label="c"
+          required
+        >
+          <FormWrapper.Input
+            placeholder="请再次输入密码"
+            isPassword
+            value={form.c}
+            onChangeText={text => handleInputChange('c', text)}
+          />
+        </FormWrapper.FormItem>
+      </FormWrapper>
+
+      <Button className="w-full mt-4" onPress={defaultLogin} disabled={loading}>
+        {loading
+          ? (
+              <>
+                <ButtonSpinner color="gray" />
+                <ButtonText>请稍等 . . .</ButtonText>
+              </>
+            )
+          : (
+              <ButtonText>注册</ButtonText>
+            )}
+      </Button>
     </View>
   )
 }