u

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

@@ -1,41 +1,39 @@
-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 { AButton, ACheckbox, AForm, AFormItem, AInput } from '@/components/common/ao'
 import { IconQq, IconWeixin, IconZhiwen } from '@/components/iconfont'
-import { Button, ButtonText } from '@/components/ui/button'
-import {
-  Checkbox,
-  CheckboxIcon,
-  CheckboxIndicator,
-  CheckboxLabel,
-} from '@/components/ui/checkbox'
 import { Divider } from '@/components/ui/divider'
-
-import { CheckIcon } from '@/components/ui/icon'
-
+import useFormValidation from '@/hooks/useFormValidation'
 import alovaInstance from '@/request'
-import { useToast } from '@/utils/toast'
+import { toast } from '@/utils/toast'
 
 interface LoginForm {
   username: string
   password: string
-  rememberMe?: boolean
+  rememberMe: boolean
   socialType?: 'qq' | 'weixin' | 'fingerprint'
 }
 
 export default function AuthLogin() {
-  const toast = useToast()
-
   const [form, setForm] = useState<LoginForm>({
     username: '',
     password: '',
     rememberMe: true,
   })
+
   const handleInputChange = (field: keyof LoginForm, value: string) => {
     setForm(prev => ({ ...prev, [field]: value }))
   }
-  const defaultLogin = () => {
+
+  // 验证规则
+  const rules = {
+    username: { required: true, message: '账号是必填项' },
+    password: { required: true, message: '密码是必填项' },
+  }
+
+  const { isValid } = useFormValidation(form, rules)
+
+  const loginDefault = () => {
     alovaInstance.Post('/auth/test', {
       title: 'foo',
       body: 'bar',
@@ -49,6 +47,16 @@ export default function AuthLogin() {
       })
   }
 
+  const loginQq = () => {
+    toast.show({ title: '功能待开发，请稍等. . .' })
+  }
+  const loginWx = () => {
+    toast.show({ title: '功能待开发，请稍等. . .' })
+  }
+  const loginZhiwen = () => {
+    toast.show({ title: '功能待开发，请稍等. . .' })
+  }
+
   return (
     <View className="flex flex-col items-center px-6 h-full">
       <Image
@@ -64,6 +72,7 @@ export default function AuthLogin() {
             onChange={text => handleInputChange('username', text)}
           />
         </AFormItem>
+
         <AFormItem label="密码">
           <AInput
             isPassword
@@ -74,45 +83,34 @@ export default function AuthLogin() {
       </AForm>
 
       <View className="w-full flex-row justify-between items-center mb-6">
-        <Checkbox
-          value="rememberMe"
+        <ACheckbox
           isChecked={form.rememberMe}
-          onChange={checked =>
-            setForm(prev => ({ ...prev, rememberMe: checked }))}
-        >
-          <CheckboxIndicator>
-            <CheckboxIcon as={CheckIcon} />
-          </CheckboxIndicator>
-          <CheckboxLabel>记住我</CheckboxLabel>
-        </Checkbox>
+          onChange={checked => setForm(prev => ({ ...prev, rememberMe: checked }))}
+          label="记住我"
+        />
 
-        <Text className="text-blue-500">
-          忘记密码?
-        </Text>
+        <Text className="text-blue-500">忘记密码?</Text>
       </View>
 
-      <Button className="w-full" onPress={() => defaultLogin()}>
-        <ButtonText>登录</ButtonText>
-      </Button>
+      <AButton className="w-full" onPress={loginDefault} disabled={!isValid}>
+        登录
+      </AButton>
 
       <View className="flex-row items-center my-8 w-full">
         <View className="flex-1">
           <Divider />
         </View>
-
         <Text className="mx-3 text-gray-500 text-sm">社交账号</Text>
-
         <View className="flex-1">
           <Divider />
         </View>
       </View>
 
       <View className="w-full flex-row justify-between items-center">
-        <IconQq size={32} />
-        <IconWeixin size={32} />
-        <IconZhiwen size={32} />
+        <IconQq size={32} onPress={loginQq} />
+        <IconWeixin size={32} onPress={loginWx} />
+        <IconZhiwen size={32} onPress={loginZhiwen} />
       </View>
-
     </View>
   )
 }