样式和代码结构调整

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

@@ -77,7 +77,7 @@ export default function LoginCard(props: {
   const [showPwd, setShowPwd] = useState(false)
 
   return (
-    <Card className="w-96 mx-4 shadow-lg relative z-20">
+    <Card className="w-96 mx-4 shadow-lg relative z-20 py-8">
       <CardContent className="px-8">
         {/* 登录方式切换 */}
         <Tabs
@@ -87,7 +87,7 @@ export default function LoginCard(props: {
             form.reset({username: form.getValues('username'), password: '', remember: false})
           }}
           className="mb-6">
-          <TabsList className="w-full p-2 bg-white rounded-lg justify-start md:justify-center overflow-auto">
+          <TabsList className="w-full p-0 bg-white">
             <Tab value="password">密码登录</Tab>
             <Tab value="phone_code">验证码登录</Tab>
           </TabsList>
@@ -99,7 +99,7 @@ export default function LoginCard(props: {
                 {...field}
                 id={id}
                 type="tel"
-                placeholder="请输入手机号"
+                placeholder={mode === 'phone_code' ? '请输入手机号' : '请输入用户名'}
                 autoComplete="tel-national"
               />
             )}
@@ -113,6 +113,7 @@ export default function LoginCard(props: {
                     id={id}
                     className="h-10"
                     placeholder="请输入验证码"
+                    autoComplete="one-time-code"
                   />
                   <Captcha/>
                 </div>
@@ -180,20 +181,16 @@ export default function LoginCard(props: {
   )
 }
 
-
 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`,
-      )}
+      className="h-12 text-base data-[state=active]:text-primary data-[state=active]:bg-primary-muted"
       value={props.value}
     >
       {props.children}
     </TabsTrigger>
   )
-}
+}