更新登录方式切换部分

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">
+          <Tabs
-            <CardContent className="flex justify-center gap-2">
+            value={loginMode}
-              <Button
+            onValueChange={(val) => {
-                type="button"
+              setLoginMode(val as 'sms' | 'password')
-                theme={loginMode === 'sms' ? 'gradient' : 'outline'}
+              form.reset({username: form.getValues('username'), password: '', remember: false})
-                onClick={() => {
+            }}
-                  setLoginMode('sms')
+            className="mb-6">
-                  form.reset({username: form.getValues('username'), password: '', remember: false})
+            <TabsList className="w-full h-10 flex justify-center gap-2">
-                }}
+              <TabsTrigger value="sms" className="flex-1">
-              >
                 验证码登录
-              </Button>
+              </TabsTrigger>
-              <Button
+              <TabsTrigger value="password" className="flex-1">
-                type="button"
-                theme={loginMode === 'password' ? 'gradient' : 'outline'}
-                onClick={() => {
-                  setLoginMode('password')
-                  form.reset({username: form.getValues('username'), password: '', remember: false})
-                }}
-              >
                 密码登录
-              </Button>
+              </TabsTrigger>
-            </CardContent>
+            </TabsList>
-          </Card>
+          </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
+                        <EyeIcon size={20}/>
-                        <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>
                       ) : (
-                      // 眼睛关 icon
+                        <EyeClosedIcon size={20}/>
-                        <>
-                          <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>
-                        </>
                       )}
                     </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">
                 登录即表示您同意