From 5cff89b60c24ad2364d15a879aa425034459942b Mon Sep 17 00:00:00 2001
From: Eamon-meng <17516219072@163.com>
Date: Tue, 1 Jul 2025 18:40:11 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E7=99=BB=E5=BD=95=E6=96=B9?=
 =?UTF-8?q?=E5=BC=8F=E5=88=87=E6=8D=A2=E9=83=A8=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(auth)/login/page.tsx | 61 +++++++++++++----------------------
 1 file changed, 22 insertions(+), 39 deletions(-)

diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx
index 2075f8b..f48ba3b 100644
--- a/src/app/(auth)/login/page.tsx
+++ b/src/app/(auth)/login/page.tsx
@@ -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">
                 登录即表示您同意