u

code/base-project/base-app/src/app/(tabs)/_layout.tsx

@@ -1,5 +1,5 @@
-import type { TabbarItem } from '@/components/custom/tabbar'
-import CustomTabbar from '@/components/custom/tabbar'
+import type { TabbarItem } from '@/components/custom/Tabbar'
+import CustomTabbar from '@/components/custom/Tabbar'
 import { useToast } from '@/utils/toast'
 
 export default function TabsLayout() {

code/base-project/base-app/src/app/+not-found.tsx

@@ -1,6 +1,6 @@
 import { router, Stack } from 'expo-router'
 import { ArrowLeft } from 'lucide-react-native'
-import { EmptyState } from '@/components/common/empty-status'
+import { EmptyState } from '@/components/common/EmptyStatus'
 
 export default function NotFound() {
   return (

code/base-project/base-app/src/app/_layout.tsx

@@ -6,7 +6,7 @@ import * as SplashScreen from 'expo-splash-screen'
 import { StatusBar } from 'expo-status-bar'
 import { RefreshCw } from 'lucide-react-native'
 import { useEffect, useState } from 'react'
-import { EmptyState } from '@/components/common/empty-status'
+import EmptyState from '@/components/common/EmptyStatus'
 import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider'
 import { useUserStore } from '@/store/user'
 import { ToastProviderWrapper } from '@/utils/toast'
@@ -56,7 +56,7 @@ export default function RootLayout() {
 
       // 如果没有 token，则跳转登录页
       if (token === null) {
-        // router.replace('/auth/login')
+        router.replace('/auth')
       }
     }
   }, [fontsLoaded, storeLoaded, token])
@@ -81,7 +81,7 @@ export default function RootLayout() {
               options={{ headerShown: false }}
             />
             <Stack.Screen
-              name="auth/login"
+              name="auth"
               options={{
                 headerShown: false,
               }}

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

@@ -0,0 +1,26 @@
+import type { StepLayoutItem } from '@/components/custom/StepLayout'
+import { Slot } from 'expo-router'
+import StepLayout from '@/components/custom/StepLayout'
+
+const steps: StepLayoutItem[] = [
+  {
+    path: '/auth/index',
+    showHearder: false,
+  },
+  {
+    title: '登录',
+    path: '/auth/login',
+  },
+  {
+    title: '注册',
+    path: '/auth/register',
+  },
+]
+
+export default function AuthLayout() {
+  return (
+    <StepLayout steps={steps}>
+      <Slot />
+    </StepLayout>
+  )
+}

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

@@ -0,0 +1,42 @@
+import { useRouter } from 'expo-router'
+import { Image, Text, View } from 'react-native'
+import { Button, ButtonText } from '@/components/ui/button'
+
+export default function AuthIndex() {
+  const router = useRouter()
+
+  function toPath(url: string) {
+    router.push(url)
+  }
+
+  return (
+    <View className="flex-1 bg-white items-center justify-center">
+      <Image
+        source={require('@/static/images/work.png')}
+        style={{ width: '100%', height: 280 }}
+        className="mb-6"
+      />
+
+      <Image
+        source={require('@/static/images/logo.png')}
+        style={{ width: 60, height: 60 }}
+        className="mb-6"
+        resizeMode="contain"
+      />
+
+      <Text className="font-bold text-3xl text-[#333] tracking-wide">
+        ONEAO
+      </Text>
+
+      <View className="w-full flex flex-col gap-3 mt-12 px-3">
+        <Button onPress={() => toPath('/auth/login')}>
+          <ButtonText>登录</ButtonText>
+        </Button>
+
+        <Button action="secondary" onPress={() => toPath('/auth/register')}>
+          <ButtonText>注册</ButtonText>
+        </Button>
+      </View>
+    </View>
+  )
+}

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>
   )
 }

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

@@ -0,0 +1,10 @@
+import { Text, View } from 'react-native'
+
+export default function Register() {
+  return (
+    <View style={{ minHeight: 1000 }}>
+      <Text>测试内容</Text>
+      <View style={{ height: 800, backgroundColor: 'red' }} />
+    </View>
+  )
+}