chore: 给phone登陆改成sms登陆，并顺手实现sms登陆

apps/frontend/app/console/login/components/SmsLoginMode.tsx

@@ -0,0 +1,78 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";
+import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
+import { useState, useCallback } from "react";
+import { toast } from "sonner";
+import LoginHeader from "./LoginHeader";
+import { Label } from "@/components/ui/label"
+import { HumanVerification } from "@/components/human-verification";
+import { AuthAPI, SmsAPI } from "@/lib/api/client";
+import { handleAPIError } from "@/lib/api/common";
+
+export default function SmsLoginMode() {
+    const [phone, setPhone] = useState("");
+    const handleSendCode = useCallback(async () => {
+        await SmsAPI.sendLoginSms(phone)
+            .then(() => toast.success('验证码已发送！'))
+            .catch(e => handleAPIError(e, ({ message }) => toast.error(`${message}`)))
+    }, [phone]);
+
+    return (
+        <>
+            <LoginHeader />
+            <div className="grid gap-3">
+                <Label htmlFor="phone">手机号</Label>
+                <Input
+                    id="phone-login-mode-phone"
+                    name="phone"
+                    type="text"
+                    placeholder="+86 手机号"
+                    value={phone}
+                    onChange={(e) => setPhone(e.target.value)}
+                    required />
+            </div>
+            <div className="grid gap-3">
+                <div className="flex items-center h-4">
+                    <Label htmlFor="code">验证码</Label>
+                </div>
+                <div className="flex gap-1 overflow-hidden items-center flex-row-reverse">
+                    <HumanVerification onSuccess={handleSendCode} >
+                        <Button type="button" variant="secondary">
+                            获取验证码
+                        </Button>
+                    </HumanVerification>
+                    <div className="flex-1 min-w-0">
+                        <InputOTP
+                            id="phone-login-mode-code"
+                            name="code"
+                            maxLength={6}
+                            pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
+                            required
+                        >
+                            <InputOTPGroup className="w-full flex justify-between">
+                                {[...Array(6)].map((_, i) => (
+                                    <InputOTPSlot
+                                        key={i}
+                                        index={i}
+                                        className="flex-1 aspect-square"
+                                    />
+                                ))}
+                            </InputOTPGroup>
+                        </InputOTP>
+                    </div>
+                </div>
+            </div>
+            <Button type="submit" className="w-full" >
+                注册并登陆
+            </Button>
+        </>
+    )
+}
+
+export async function handleSubmit(formData: FormData) {
+    const phone = formData.get('phone')?.toString() || '';
+    const code = formData.get('code')?.toString() || '';
+
+    return AuthAPI.loginBySms(phone, code)
+}