变更首页底部信息&更新登录card里的tab

src/app/(auth)/login/login-card.tsx

@@ -2,12 +2,12 @@
 import {Input} from '@/components/ui/input'
 import {Button} from '@/components/ui/button'
 import {Checkbox} from '@/components/ui/checkbox'
-import {Card, CardHeader, CardContent, CardTitle} from '@/components/ui/card'
+import {Card, CardContent} from '@/components/ui/card'
 import {Form, FormField} from '@/components/ui/form'
 import {Label} from '@/components/ui/label'
 import {Tabs, TabsList, TabsTrigger} from '@/components/ui/tabs'
 import {EyeClosedIcon, EyeIcon} from 'lucide-react'
-import {useEffect, useState} from 'react'
+import {useState, ReactNode} from 'react'
 import zod from 'zod'
 import {useForm} from 'react-hook-form'
 import {zodResolver} from '@hookform/resolvers/zod'
@@ -16,6 +16,7 @@ import {useRouter} from 'next/navigation'
 import {login} from '@/actions/auth'
 import {useProfileStore} from '@/components/stores-provider'
 import Captcha from './captcha'
+import {merge} from '@/lib/utils'
 
 const smsSchema = zod.object({
   username: zod.string().length(11, '请输入正确的手机号码'),
@@ -77,9 +78,6 @@ export default function LoginCard(props: {
 
   return (
     <Card className="w-96 mx-4 shadow-lg relative z-20">
-      <CardHeader className="text-center">
-        <CardTitle className="text-2xl">登录/注册</CardTitle>
-      </CardHeader>
       <CardContent className="px-8">
         {/* 登录方式切换 */}
         <Tabs
@@ -89,13 +87,9 @@ export default function LoginCard(props: {
             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="password" className="flex-1">
-              密码登录
-            </TabsTrigger>
-            <TabsTrigger value="phone_code" className="flex-1">
-              验证码登录
-            </TabsTrigger>
+          <TabsList className="w-full p-2 bg-white rounded-lg justify-start md:justify-center overflow-auto">
+            <Tab value="password">密码登录</Tab>
+            <Tab value="phone_code">验证码登录</Tab>
           </TabsList>
         </Tabs>
         <Form<LoginSchema> className="space-y-6" form={form} handler={handler}>
@@ -185,3 +179,21 @@ export default function LoginCard(props: {
     </Card>
   )
 }
+
+
+function Tab(props: {
+  value: string
+  children: ReactNode
+}) {
+  return (
+    <TabsTrigger
+      className={merge(
+        `w-36 h-12 text-base font-normal flex-none`,
+        `data-[state=active]:text-primary data-[state=active]:bg-primary-muted`,
+      )}
+      value={props.value}
+    >
+      {props.children}
+    </TabsTrigger>
+  )
+}