update(LoginModal): styles

src/components/AudioPlayer/Player.tsx

@@ -171,7 +171,7 @@ export default function AudioPlayer({
 
   useEffect(() => {
     // const handleKeyDown = (e: KeyboardEvent) => {
-    //   if (e.code === 'Space' || e.keyCode === 32) {
+    //   if (e.key === 'Space' || e.keyCode === 32) {
     //     handlePlay();
     //   }
     // };

src/components/Login/LoginForm.tsx

@@ -34,7 +34,7 @@ export default function LoginForm({ className }: { className?: string }) {
   const [time, setTime] = useState<number>(0); // 倒计时
   const [btnLoading, setBtnLoading] = useState<boolean>(false);
   const activeSMS = useMemo(() => phone.length !== 11 || !!time, [phone, time]);
-  const activeLogin = useMemo(() => !(phone.length === 11 && authCode.length === 6), [phone, authCode]); // 是否激活发送短信按钮
+  const disLogin = useMemo(() => !(phone.length === 11 && authCode.length === 6), [phone, authCode]); // 是否激活发送短信按钮
 
   const handleSendSMS = async () => {
     setBtnLoading(true);
@@ -70,6 +70,7 @@ export default function LoginForm({ className }: { className?: string }) {
 
   // 登录
   const handleLogin = async () => {
+    if (disLogin) return;
     setBtnLoading(true);
     const uuid = localStorage.getItem('deviceId') || 'error';
     const result = await SmsLogin({ phone, authCode: authCode, deviceId: uuid });
@@ -106,11 +107,24 @@ export default function LoginForm({ className }: { className?: string }) {
     }
   }, [time]);
 
+  useEffect(() => {
+    const handleListenKeyboard = (e: KeyboardEvent) => {
+      if (e.key === 'Enter' || e.keyCode === 13) {
+        handleLogin();
+      }
+    };
+
+    document.addEventListener('keydown', handleListenKeyboard);
+    return () => {
+      document.removeEventListener('keydown', handleListenKeyboard);
+    };
+  }, []);
+
   return (
     <div className={className}>
       <div className={`w-full flex flex-col`}>
         <input
-          className="w-full h-[56px] rounded-[100px] !placeholder-[rgba(0,0,0,0.4)] !placeholder-text-14px px-[24px] text-[rgba(0,0,0,0.95)] bg-#fff leading-[20px]"
+          className="w-full h-56px rounded-100px !placeholder-[rgba(0,0,0,0.4)] !placeholder-text-14px px-24px text-[rgba(0,0,0,0.95)] bg-#fff leading-20px border-1px border-#fff focus:border-#000/70 transition-all-100"
           type="text"
           value={phone}
           maxLength={11}
@@ -120,7 +134,7 @@ export default function LoginForm({ className }: { className?: string }) {
 
         <div className="relative w-full mt-[20px]">
           <input
-            className="w-full h-[56px] rounded-[100px] px-[24px] !placeholder-[rgba(0,0,0,0.4)] !placeholder-text-14px text-[rgba(0,0,0,0.95)] bg-#fff leading-[20px]"
+            className="w-full h-56px rounded-100px px-24px !placeholder-[rgba(0,0,0,0.4)] !placeholder-text-14px text-[rgba(0,0,0,0.95)] bg-#fff leading-20px border-1px border-1px border-#fff focus:border-#000/70 transition-all-100"
             type="text"
             value={authCode}
             maxLength={6}
@@ -130,7 +144,7 @@ export default function LoginForm({ className }: { className?: string }) {
 
           <Button
             type="white"
-            className={`absolute top-[6px] right-[24px] w-fit h-[44px] rounded-[100px] font-size-[14px] text-right leading-[20px]`}
+            className={`absolute top-6px right-24px w-fit h-44px rounded-100px font-size-14px text-right leading-20px`}
             disabled={btnLoading || activeSMS}
             onClick={debounce(handleSendSMS, 300)}
           >
@@ -145,14 +159,14 @@ export default function LoginForm({ className }: { className?: string }) {
 
       <Button
         type="primary"
-        className="w-full h-[56px] mt-[30px] rounded-[100px] font-size-[14px] leading-[20px]"
+        className="w-full h-56px mt-30px rounded-100px font-size-14px leading-20px"
-        disabled={activeLogin}
+        disabled={disLogin}
         onClick={debounce(handleLogin, 300)}
       >
         确定登录
       </Button>
 
-      <p className="mt-[16px] text-center text-brand text-[13px] leading-[18px]">{errorText}</p>
+      <p className="mt-16px text-center text-brand text-13px leading-18px">{errorText}</p>
     </div>
   );
 }

src/components/Login/LoginModal.tsx

@@ -25,14 +25,14 @@ export default function LoginCard() {
 
       <DialogContent className="w-420px h-450px px-40px bg-#f2f3f7" onPointerDownOutside={(e) => e.preventDefault()}>
         {/* title */}
-        <div>
+        <div className="w-340px">
           <p className="text-[24px] leading-[33px] text-[#000] font-bold">登录雀乐</p>
           <p className="mt-[6px] text-[13px] leading-[18px] text-[rgba(0,0,0,0.7)]">
             输入手机号，开启雀乐；未注册手机，将自动注册
           </p>
         </div>
 
-        <DialogClose className="absolute top-[24px] right-[24px] w-24px h-24px cursor-pointer">
+        <DialogClose className="absolute top-[24px] right-[24px] w-24px h-24px cursor-pointer outline-none">
           <IconClose />
         </DialogClose>
 

src/components/ui/dialog.tsx

@@ -36,7 +36,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'flex flex-col justify-start items-center fixed left-[50%] top-[50%] z-50 max-w-lg pt-49px pb-51px translate-x-[-50%] translate-y-[-50%] gap-0 rounded-[24px] bg-[#f2f3f7] shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
+        'flex flex-col justify-start items-center fixed left-[50%] top-[50%] z-50 max-w-lg pt-49px pb-51px translate-x-[-50%] translate-y-[-50%] gap-0 rounded-[24px] bg-[#f2f3f7] shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] outline-none',
         className,
       )}
       {...props}