u

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

@@ -1,6 +1,7 @@
 import { Lock, UserRound } from 'lucide-react-native'
 import { useState } from 'react'
 import { Image, Text, View } from 'react-native'
+import { AForm, AFormItem, AInput } from '@/components/common/ao'
 import { IconQq, IconWeixin, IconZhiwen } from '@/components/iconfont'
 import { Button, ButtonText } from '@/components/ui/button'
 import {
@@ -10,13 +11,9 @@ import {
   CheckboxLabel,
 } from '@/components/ui/checkbox'
 import { Divider } from '@/components/ui/divider'
-import {
-  FormControl,
-  FormControlLabel,
-  FormControlLabelText,
-} from '@/components/ui/form-control'
-import { CheckIcon, EyeIcon, EyeOffIcon } from '@/components/ui/icon'
-import { Input, InputField, InputIcon, InputSlot } from '@/components/ui/input'
+
+import { CheckIcon } from '@/components/ui/icon'
+
 import alovaInstance from '@/request'
 import { useToast } from '@/utils/toast'
 
@@ -30,13 +27,14 @@ interface LoginForm {
 export default function AuthLogin() {
   const toast = useToast()
 
-  const [showPassword, setShowPassword] = useState(false)
   const [form, setForm] = useState<LoginForm>({
     username: '',
     password: '',
     rememberMe: true,
   })
-
+  const handleInputChange = (field: keyof LoginForm, value: string) => {
+    setForm(prev => ({ ...prev, [field]: value }))
+  }
   const defaultLogin = () => {
     alovaInstance.Post('/auth/login/default', {
       title: 'foo',
@@ -56,39 +54,21 @@ export default function AuthLogin() {
         className="my-12"
       />
 
-      <FormControl size="md" className="w-full  mb-6">
-        <FormControlLabel>
-          <FormControlLabelText>账号</FormControlLabelText>
-        </FormControlLabel>
-        <Input size="md">
-          <InputSlot className="pl-3">
-            <InputIcon as={UserRound} />
-          </InputSlot>
-          <InputField
-            placeholder="请输入账号"
-            onChangeText={text => setForm(prev => ({ ...prev, username: text }))}
+      <AForm form={form}>
+        <AFormItem label="账号">
+          <AInput
+            value={form.username}
+            onChange={text => handleInputChange('username', text)}
           />
-        </Input>
-      </FormControl>
-
-      <FormControl size="md" className="w-full mb-6">
-        <FormControlLabel>
-          <FormControlLabelText>密码</FormControlLabelText>
-        </FormControlLabel>
-        <Input size="md">
-          <InputSlot className="pl-3">
-            <InputIcon as={Lock} />
-          </InputSlot>
-          <InputField
-            type={showPassword ? 'text' : 'password'}
-            placeholder="请输入密码"
-            onChangeText={text => setForm(prev => ({ ...prev, password: text }))}
+        </AFormItem>
+        <AFormItem label="密码">
+          <AInput
+            isPassword
+            value={form.password}
+            onChange={text => handleInputChange('password', text)}
           />
-          <InputSlot className="pr-3" onPress={() => setShowPassword(prev => !prev)}>
-            <InputIcon as={showPassword ? EyeIcon : EyeOffIcon} />
-          </InputSlot>
-        </Input>
-      </FormControl>
+        </AFormItem>
+      </AForm>
 
       <View className="w-full flex-row justify-between items-center mb-6">
         <Checkbox