登陆页面功能，优化项目结构，字体字重重新调整

src/app/(auth)/login/page.tsx

@@ -1,102 +1,101 @@
-import {ReactNode} from 'react'
+'use client'
+import { ReactNode, useState } from 'react'
+import Image from 'next/image'
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
 
 export type LoginPageProps = {}
 
 export default function LoginPage(props: LoginPageProps) {
-  return (
-    
-    <div className="flex h-screen w-screen">
-      {/* 左侧背景图 */}
-      <div className="relative flex-1 hidden lg:block">
-        <img 
-          src="/images/login-bg.jpg" 
-          alt="登录背景"
-          className="object-cover w-full h-full"
-        />
-        <div className="absolute inset-0 bg-black/30">
-          <div className="flex items-center justify-center h-full">
-            <h1 className="text-4xl font-bold text-white">
-              欢迎回来
-            </h1>
-          </div>
-        </div>
-      </div>
+  const [countdown, setCountdown] = useState(0);
 
-      {/* 右侧登录表单 */}
-      <div className="w-[600px] flex items-center justify-center p-8">
+  const handleSendCode = () => {
+    // 这里实现发送验证码的逻辑
+    setCountdown(60);
+    const timer = setInterval(() => {
+      setCountdown((prev) => {
+        if (prev <= 1) {
+          clearInterval(timer);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+  };
+
+  return (
+
+    <main className="h-screen w-screen lg:pr-80 bg-[url(/login/bg.webp)] bg-cover bg-left flex justify-center lg:justify-end items-center">
+
+      {/* 登录表单 */}
+      <div className="w-96 mx-4 p-8 lg:p-12 bg-white rounded-lg flex items-center justify-center">
         <div className="w-full space-y-8">
           <div className="text-center">
-            <h2 className="text-3xl font-bold text-gray-900">
-              登录您的账户
+            <h2 className="text-2xl text-gray-900">
+              登录/注册
             </h2>
-            <p className="mt-2 text-sm text-gray-600">
-              或者{' '}
-              <a href="#" className="font-medium text-blue-600 hover:text-blue-500">
-                开始14天免费试用
-              </a>
-            </p>
           </div>
 
           <form className="mt-8 space-y-6">
             <div className="space-y-4">
-              <div>
-                <label htmlFor="email" className="block text-sm font-medium text-gray-700">
-                  邮箱地址
-                </label>
-                <input
-                  id="email"
-                  name="email"
-                  type="email"
-                  autoComplete="email"
+              <div className="space-y-2">
+                <Label htmlFor="phone">手机号码</Label>
+                <Input
+                  id="phone"
+                  name="phone"
+                  type="tel"
+                  placeholder="请输入手机号码"
+                  autoComplete="tel"
                   required
-                  className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                 />
               </div>
 
-              <div>
-                <label htmlFor="password" className="block text-sm font-medium text-gray-700">
-                  密码
-                </label>
-                <input
-                  id="password"
-                  name="password"
-                  type="password"
-                  autoComplete="current-password"
-                  required
-                  className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
-                />
+              <div className="space-y-2">
+                <Label htmlFor="verificationCode">验证码</Label>
+                <div className="flex space-x-2">
+                  <Input
+                    id="verificationCode"
+                    name="verificationCode"
+                    type="text"
+                    placeholder="请输入验证码"
+                    required
+                  />
+                  <Button
+                    type="button"
+                    variant="outline"
+                    className="whitespace-nowrap"
+                    onClick={handleSendCode}
+                    disabled={countdown > 0}
+                  >
+                    {countdown > 0 ? `${countdown}秒后重发` : '获取验证码'}
+                  </Button>
+                </div>
               </div>
             </div>
 
             <div className="flex items-center justify-between">
-              <div className="flex items-center">
-                <input
-                  id="remember-me"
-                  name="remember-me"
-                  type="checkbox"
-                  className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
-                />
-                <label htmlFor="remember-me" className="ml-2 block text-sm text-gray-900">
-                  记住我
+              <div className="flex items-center space-x-2">
+                <Checkbox id="remember-me" name="remember-me" />
+                <label htmlFor="remember-me" className="text-sm text-gray-900">
+                  保持登录
                 </label>
               </div>
-
-              <div className="text-sm">
-                <a href="#" className="font-medium text-blue-600 hover:text-blue-500">
-                  忘记密码？
-                </a>
-              </div>
             </div>
 
-            <button
-              type="submit"
-              className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-            >
-              登录
-            </button>
+            <div className={`flex flex-col gap-2`}>
+              <Button type="submit" className="w-full">
+                注册 / 登录
+              </Button>
+
+              <p className="text-xs text-center text-gray-500">
+                登录即表示您同意<a href="#" className="text-blue-600 hover:text-blue-500">《用户协议》</a>和<a href="#" className="text-blue-600 hover:text-blue-500">《隐私政策》</a>
+              </p>
+            </div>
           </form>
         </div>
       </div>
-    </div>
+    </main>
   )
 }