update(login): Add request error prompt.

src/app/mylist/page.tsx

@@ -36,7 +36,6 @@ export default function Journal() {
     //   journal: apiGetSongCollect,
     // };
     const result = await apiGetSongCollect({ userId: userInfo?.id, pageNum, pageSize });
-    console.log(result.data);
     if (result.code === 200) setList(result.data.rows);
   };
 

src/components/Header/UserCard.tsx

@@ -5,6 +5,9 @@ import { useRouter } from 'next/navigation';
 import { useShallow } from 'zustand/react/shallow';
 
 import { Avatar } from '@/components';
+
+import logout from '@/utils/logout';
+
 import useUserStore from '@/store/user';
 
 interface Props {
@@ -19,10 +22,9 @@ interface TDataList {
 
 export default function UserCard({ onClose, className }: Props) {
   const router = useRouter();
-  const { userInfo, userLogout } = useUserStore(
+  const { userInfo } = useUserStore(
     useShallow((state) => ({
       userInfo: state.userInfo,
-      userLogout: state.userLogout,
     })),
   );
 
@@ -38,12 +40,6 @@ export default function UserCard({ onClose, className }: Props) {
     onClose();
   };
 
-  const handleLogout = async () => {
-    userLogout();
-    router.push('/');
-    onClose();
-  };
-
   useEffect(() => {
     setUserDataList([
       { label: '关注', value: userInfo.followCount },
@@ -87,7 +83,7 @@ export default function UserCard({ onClose, className }: Props) {
         </li>
         <li
           className="flex flex-row items-center w-[238px] h-[49px] px-[15px] rounded-[3px] text-[15px] leading-[21px] hover:bg-[#f2f3f7] cursor-pointer"
-          onClick={handleLogout}
+          onClick={logout}
         >
           <span>退出登录</span>
         </li>

src/components/Login/LoginForm.tsx

@@ -5,7 +5,7 @@ import React, { useState, useMemo, useEffect } from 'react';
 import { debounce } from 'lodash';
 import { useShallow } from 'zustand/react/shallow';
 
-import { Input, Button } from '@/components';
+import { Button } from '@/components';
 import { apiSendSMS } from '@/services';
 import useUserStore from '@/store/user';
 
@@ -19,6 +19,7 @@ export default function LoginForm() {
 
   const [phone, setPhone] = useState<string>('17861518060'); // 手机号
   const [authCode, seAuthCode] = useState<string>('111111'); // 验证码
+  const [errorText, setErrorText] = useState<string>(''); // 验证码
   const [time, setTime] = useState<number>(0); // 倒计时
   const [btnLoading, setBtnLoading] = useState<boolean>(false);
   const deviceId = '1'; // 设备id 暂时写死
@@ -29,23 +30,33 @@ export default function LoginForm() {
     setBtnLoading(true);
     const result = await apiSendSMS({ mobile: phone, deviceId });
 
-    if (result.code === 200) {
-      setTime(59);
-      setTimeout(() => {
-        setBtnLoading(false);
-      }, 60000);
+    if (result.code !== 200) {
+      setErrorText(result.message);
+      setBtnLoading(false);
+      return;
     }
-    setBtnLoading(false);
+    setTime(59);
+    setTimeout(() => {
+      setBtnLoading(false);
+    }, 60000);
   };
 
   // 登录
   const handleLogin = async () => {
+    setBtnLoading(true);
     const result = await userLogin({ mobile: phone, mobileCheckCode: authCode, deviceId: '1' });
-    if (result) setShowLogin(false);
+    if (result.code === 200) {
+      setShowLogin(false);
+      window.location.reload();
+    } else {
+      setErrorText(result.message);
+      setBtnLoading(false);
+    }
   };
 
   // 输入框，只允许输入数字
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>, fn: (text: string) => void) => {
+    if (errorText) setErrorText('');
     const inputValue = e.target.value;
     const regex = /^[0-9]*$/;
     if (regex.test(inputValue) || inputValue === '') fn(e.target.value);
@@ -64,7 +75,8 @@ export default function LoginForm() {
   return (
     <form autoComplete="on">
       <div className="w-full flex flex-col">
-        <Input
+        <input
+          className="w-full h-[56px] rounded-[100px] px-[14px] bg-[#fff] leading-[20px]"
           type="text"
           value={phone}
           maxLength={11}
@@ -73,8 +85,8 @@ export default function LoginForm() {
         />
 
         <div className="relative w-full mt-[20px]">
-          <Input
-            className="w-full"
+          <input
+            className="w-full h-[56px] rounded-[100px] px-[14px] bg-[#fff] leading-[20px]"
             type="text"
             value={authCode}
             maxLength={6}
@@ -83,7 +95,7 @@ export default function LoginForm() {
           />
 
           <Button
-            type="black"
+            type="white"
             className={`absolute top-[6px] right-[6px] w-[123px] h-[44px] rounded-[100px] font-size-[14px] leading-[20px] ${time ? 'text-[#000]' : ''}`}
             disabled={btnLoading || activeSMS}
             onClick={debounce(handleSendSMS, 300)}
@@ -101,6 +113,8 @@ export default function LoginForm() {
       >
         确定登录
       </Button>
+
+      <p className="mt-[16px] text-center text-brand text-[13px] leading-[18.2px]">{errorText}</p>
     </form>
   );
 }

src/components/Login/LoginModal.tsx

@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import { useShallow } from 'zustand/react/shallow';
 
-import LoginForm from '../Login/LoginForm';
+import LoginForm from './LoginForm';
 
 import useUserStore from '@/store/user';
 
@@ -18,7 +18,7 @@ export default function LoginCard() {
       <div className="fixed inset-0 bg-black opacity-50"></div>
 
       {/* 登录框 */}
-      <div className="relative flex flex-col w-[420px] h-[470px] pt-[49px] p-[40px] rounded-[24px] bg-[#fff] z-10">
+      <div className="relative flex flex-col w-[420px] h-[470px] pt-[49px] p-[40px] rounded-[24px] bg-[#f2f3f7]">
         {/* title */}
         <div className="mb-[30px]">
           <p className="text-[24px] leading-[33px] text-[#000] font-bold">登录雀乐</p>
@@ -42,10 +42,14 @@ export default function LoginCard() {
 
         <div className="absolute bottom-[30px] left-0 right-0 text-[13px] leading-[18px] text-[rgba(0,0,0,0.4)] text-center">
           注册登录即代表同意{' '}
-          <a className="text-[#000]" href="">
-            《用户协议》
+          <a
+            className="text-[#000]"
+            href="http://cdn.indie.cn/html/agreement/registrationAgreement.html"
+            target="_blank"
+          >
+            《注册协议》
           </a>
-          <a className="text-[#000]" href="">
+          <a className="text-[#000]" href="http://cdn.indie.cn/html/agreement/privacyPolicy.html" target="_blank">
             《隐私政策》
           </a>
         </div>

src/components/common/Button.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 interface ButtonProps {
-  type?: 'default' | 'primary' | 'black';
+  type?: 'default' | 'primary' | 'black' | 'white';
   disabled?: boolean;
   className?: string;
   children: React.ReactNode;
@@ -18,6 +18,7 @@ const Button: React.FC<ButtonProps> = ({
   const buttonColorList = {
     default: { default: 'bg-blue text-[#000]', disabled: 'opacity-50' },
     primary: { default: 'bg-brand text-[#fff]', disabled: 'opacity-50' },
+    white: { default: 'bg-[#fff] text-brand', disabled: 'text-[rgba(0,0,0,0.4)]' },
     black: { default: 'bg-[#000] text-[#fff]', disabled: 'opacity-10' },
   };
 

src/components/index.ts

@@ -7,7 +7,7 @@ export { default as Category } from './Category';
 export { default as ContributorCard } from './ContributorCard';
 
 // Login
-export { default as LoginModal } from './Header/LoginModal';
+export { default as LoginModal } from './Login/LoginModal';
 export { default as LoginForm } from './Login/LoginForm';
 
 // Journal

src/services/client/user.ts

@@ -41,7 +41,7 @@ export const apiUserLogin = async (params: {
  * @description token 续期
  */
 export const apiAutoLogin = async (params: { deviceId: string; deviceBrand?: string }) => {
-  const result: FetchResponse<string> = await clientHttp.post('http://localhost:3001/api/user/autoLogin', params);
+  const result: FetchResponse<string> = await clientHttp.post('/queyueapi/user/autoLogin', params);
   return result;
 };
 

src/store/user.ts

@@ -21,11 +21,11 @@ interface UserState {
   /** 更新用户信息 */
   setUserInfo: (parmas: UserInfo) => void;
   /** 用户登录 */
-  userLogin: (params: TRequestLogin) => Promise<boolean>;
+  userLogin: (params: TRequestLogin) => Promise<FetchResponse<string>>;
   /** 登出 */
   userLogout: () => void;
   /** 获取用户信息 */
-  getUserInfo: () => Promise<boolean>;
+  getUserInfo: () => Promise<FetchResponse<UserInfo>>;
 }
 
 const useUserStore = create<UserState>()(
@@ -58,7 +58,7 @@ const useUserStore = create<UserState>()(
         const getUserInfo = async () => {
           const result = await apiGetMyUserInfo();
           if (result.code === 200) setUserInfo(result.data);
-          return result.code === 200;
+          return result;
         };
 
         return {
@@ -68,12 +68,14 @@ const useUserStore = create<UserState>()(
           setUserInfo,
           userLogin: async (params) => {
             const result = await apiUserLogin(params);
-            if (result.code !== 200) return false;
-            await setCookie(null, 'token', result.data, {
-              maxAge: 7 * 24 * 60 * 60,
-              path: '/',
-            });
-            return await getUserInfo();
+            if (result.code === 200) {
+              setCookie(null, 'token', result.data, {
+                maxAge: 7 * 24 * 60 * 60,
+                path: '/',
+              });
+              await getUserInfo();
+            }
+            return result;
           },
           userLogout: async () => {
             apiUserLogout();

src/utils/logout.ts

@@ -6,7 +6,7 @@ const logout = () => {
   apiUserLogout();
   localStorage.clear();
   destroyCookie(null, 'token');
-  window.location.href = '/';
+  window.location.reload();
 };
 
 export default logout;