u

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

@@ -1,12 +1,141 @@
-import { Text, View } from 'react-native'
-import CustomLayout from '@/components/custom/layout'
+import { Lock, UserRound } from 'lucide-react-native'
+import { useState } from 'react'
+import { Image, Text, View } from 'react-native'
+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 {
+  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 { useToast } from '@/utils/toast'
+
+interface LoginForm {
+  username: string
+  password: string
+  rememberMe?: boolean
+  socialType?: 'qq' | 'weixin' | 'fingerprint'
+}
 
 export default function AuthLogin() {
+  const toast = useToast()
+
+  const [showPassword, setShowPassword] = useState(false)
+  const [form, setForm] = useState<LoginForm>({
+    username: '',
+    password: '',
+    rememberMe: true,
+  })
+
+  const defaultLogin = () => {
+    if (form.username === '') {
+      toast.show({
+        title: '账号不能为空！',
+        action: 'error',
+      })
+      return
+    }
+    if (form.password === '') {
+      toast.show({
+        title: '密码不能为空！',
+        action: 'error',
+      })
+    }
+    //
+  }
+
   return (
-    <CustomLayout>
-      <View>
-        <Text>登录</Text>
+
+    <View className="flex flex-col items-center px-6 h-full">
+      <Image
+        source={require('@/static/images/logo.png')}
+        style={{ width: 120, height: 120 }}
+        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 }))}
+          />
+        </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 }))}
+          />
+          <InputSlot className="pr-3" onPress={() => setShowPassword(prev => !prev)}>
+            <InputIcon as={showPassword ? EyeIcon : EyeOffIcon} />
+          </InputSlot>
+        </Input>
+      </FormControl>
+
+      <View className="w-full flex-row justify-between items-center mb-6">
+        <Checkbox
+          value="rememberMe"
+          isChecked={form.rememberMe}
+          onChange={checked =>
+            setForm(prev => ({ ...prev, rememberMe: checked }))}
+        >
+          <CheckboxIndicator>
+            <CheckboxIcon as={CheckIcon} />
+          </CheckboxIndicator>
+          <CheckboxLabel>记住我</CheckboxLabel>
+        </Checkbox>
+
+        <Text className="text-blue-500">
+          忘记密码?
+        </Text>
       </View>
-    </CustomLayout>
+
+      <Button className="w-full" onPress={() => defaultLogin()}>
+        <ButtonText>登录</ButtonText>
+      </Button>
+
+      <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} />
+      </View>
+
+    </View>
   )
 }