lanhu/web
2
0
Fork 0
Code Issues Actions Packages Releases 11 Activity

更新登录方式切换部分

Browse Source
This commit is contained in:
Eamon-meng
2025-07-01 18:40:11 +08:00
parent bae4ee9b92
commit 5cff89b60c
1 changed files with 22 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/app/(auth)/login/page.tsx
View File

@@ -29,6 +29,8 @@ import logo from '@/assets/logo.webp'
import bg from './_assets/bg.webp'
import {useProfileStore} from '@/components/stores-provider'
import Link from 'next/link'
import {Tabs, TabsList, TabsTrigger} from '@/components/ui/tabs'
import {EyeClosedIcon, EyeIcon} from 'lucide-react'
export type LoginPageProps = {}
@@ -242,30 +244,22 @@ export default function LoginPage(props: LoginPageProps) {
</CardHeader>
<CardContent className="px-8">
{/* 登录方式切换 */}
<Card className="mb-6">
<CardContent className="flex justify-center gap-2">
<Button
type="button"
theme={loginMode === 'sms' ? 'gradient' : 'outline'}
onClick={() => {
setLoginMode('sms')
form.reset({username: form.getValues('username'), password: '', remember: false})
}}
>
<Tabs
value={loginMode}
onValueChange={(val) => {
setLoginMode(val as 'sms' | 'password')
form.reset({username: form.getValues('username'), password: '', remember: false})
}}
className="mb-6">
<TabsList className="w-full h-10 flex justify-center gap-2">
<TabsTrigger value="sms" className="flex-1">
验证码登录
</Button>
<Button
type="button"
theme={loginMode === 'password' ? 'gradient' : 'outline'}
onClick={() => {
setLoginMode('password')
form.reset({username: form.getValues('username'), password: '', remember: false})
}}
>
</TabsTrigger>
<TabsTrigger value="password" className="flex-1">
密码登录
</Button>
</CardContent>
</Card>
</TabsTrigger>
</TabsList>
</Tabs>
<Form<FormValues> className="space-y-6" onSubmit={onSubmit} form={form}>
<FormField name="username" label="手机号码">
{({id, field}) => (
@@ -285,13 +279,13 @@ export default function LoginPage(props: LoginPageProps) {
<Input
{...field}
id={id}
className="h-12"
className="h-10"
placeholder="请输入验证码"
/>
<Button
type="button"
theme="outline"
className="whitespace-nowrap h-12"
className="whitespace-nowrap h-10"
onClick={checkUsername}
disabled={countdown > 0}
>
@@ -304,7 +298,7 @@ export default function LoginPage(props: LoginPageProps) {
{...field}
id={id}
type={showPwd ? 'text' : 'password'}
className="h-12 pr-10"
className="h-10 pr-10"
placeholder="至少6位密码，需包含字母和数字"
autoComplete="current-password"
minLength={6}
@@ -317,20 +311,9 @@ export default function LoginPage(props: LoginPageProps) {
aria-label={showPwd ? '隐藏密码' : '显示密码'}
>
{showPwd ? (
// 眼睛开 icon
<svg width="20" height="20" fill="none" viewBox="0 0 20 20">
<path stroke="currentColor" strokeWidth="1.5" d="M1.667 10S4.167 4.167 10 4.167 18.333 10 18.333 10 15.833 15.833 10 15.833 1.667 10 1.667 10Z"/>
<circle cx="10" cy="10" r="2.5" stroke="currentColor" strokeWidth="1.5"/>
</svg>
<EyeIcon size={20}/>
) : (
// 眼睛关 icon
<>
<svg width="20" height="20" fill="none" viewBox="0 0 20 20">
<path stroke="currentColor" strokeWidth="1.5" d="M1.667 10S4.167 4.167 10 4.167c1.57 0 2.97.33 4.13.87M18.333 10s-2.5 5.833-8.333 5.833c-1.57 0-2.97-.33-4.13-.87"/>
<circle cx="10" cy="10" r="2.5" stroke="currentColor" strokeWidth="1.5"/>
<path stroke="currentColor" strokeWidth="1.5" d="M3 3l14 14"/>
</svg>
</>
<EyeClosedIcon size={20}/>
)}
</button>
</div>
@@ -358,7 +341,7 @@ export default function LoginPage(props: LoginPageProps) {
theme="gradient"
disabled={submitting}
>
{submitting ? '登录中...' : (loginMode === 'sms' ? '注册 / 登录' : '密码登录')}
{submitting ? '登录中...' : (loginMode === 'sms' ? '注册 / 登录' : '登录')}
</Button>
<p className="text-xs text-center text-gray-500">
登录即表示您同意