From 8ce5bff0a106460eed32924e7fa7a580604c2141 Mon Sep 17 00:00:00 2001 From: mackt <1033530438@qq.com> Date: Wed, 24 Jul 2024 20:58:17 +0800 Subject: [PATCH 1/6] fix: text --- src/components/Header/Auth.tsx | 2 +- src/components/Login/LoginModal.tsx | 2 +- src/store/audio.ts | 2 +- src/utils/request/client/utils.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Header/Auth.tsx b/src/components/Header/Auth.tsx index 01340f7..bf3ac93 100644 --- a/src/components/Header/Auth.tsx +++ b/src/components/Header/Auth.tsx @@ -2,7 +2,7 @@ import { useShallow } from 'zustand/react/shallow'; -import { LoginProvider } from '@/components/Login/loginContext'; +import { LoginProvider } from '@/components/Login/LoginContext'; import HeaderAvatar from './HeaderAvatar'; diff --git a/src/components/Login/LoginModal.tsx b/src/components/Login/LoginModal.tsx index d674ff7..9cc23f9 100644 --- a/src/components/Login/LoginModal.tsx +++ b/src/components/Login/LoginModal.tsx @@ -4,7 +4,7 @@ import { useContext } from 'react'; import { Dialog, DialogContent, DialogTrigger, DialogClose } from '@/components/ui/dialog'; -import { LoginContext } from './loginContext'; +import { LoginContext } from './LoginContext'; import LoginForm from './LoginForm'; import { IconClose } from '@/components'; diff --git a/src/store/audio.ts b/src/store/audio.ts index 7b21a6e..d9f0c15 100644 --- a/src/store/audio.ts +++ b/src/store/audio.ts @@ -3,7 +3,7 @@ import cloneDeep from 'lodash/cloneDeep'; import { create } from 'zustand'; import { devtools, persist, createJSONStorage } from 'zustand/middleware'; -import { openLogin } from '@/components/Login/loginContext'; +import { openLogin } from '@/components/Login/LoginContext'; import { apiGetSongRandom } from '@/services'; import { clearAccessToken, checkAuthOffline } from '@/utils'; diff --git a/src/utils/request/client/utils.ts b/src/utils/request/client/utils.ts index 92144a2..5abf0e5 100644 --- a/src/utils/request/client/utils.ts +++ b/src/utils/request/client/utils.ts @@ -3,7 +3,7 @@ import cloneDeep from 'lodash/cloneDeep'; import qs from 'qs'; -import { openLogin } from '@/components/Login/loginContext'; +import { openLogin } from '@/components/Login/LoginContext'; import { toast } from '@/components/ui/use-toast'; import { IQueryParams, IResponse } from '@/utils/request/type'; From 684148879c25c5f9658031e7db14c7b209f493be Mon Sep 17 00:00:00 2001 From: mackt <1033530438@qq.com> Date: Wed, 24 Jul 2024 22:04:47 +0800 Subject: [PATCH 2/6] feat: Update Login UI with qrcode. --- src/components/Header/Auth.tsx | 4 +- src/components/Login/Footer.tsx | 21 ++++++++++ src/components/Login/Login.tsx | 46 +++++++++++++++++++++ src/components/Login/LoginForm.tsx | 8 ++-- src/components/Login/LoginModal.tsx | 62 ---------------------------- src/components/Login/LoginPhone.tsx | 26 ++++++++++++ src/components/Login/LoginQrcode.tsx | 23 +++++++++++ src/components/Login/Tab.tsx | 30 ++++++++++++++ src/components/index.ts | 2 +- src/types/login.d.ts | 6 +++ 10 files changed, 159 insertions(+), 69 deletions(-) create mode 100644 src/components/Login/Footer.tsx create mode 100644 src/components/Login/Login.tsx delete mode 100644 src/components/Login/LoginModal.tsx create mode 100644 src/components/Login/LoginPhone.tsx create mode 100644 src/components/Login/LoginQrcode.tsx create mode 100644 src/components/Login/Tab.tsx create mode 100644 src/types/login.d.ts diff --git a/src/components/Header/Auth.tsx b/src/components/Header/Auth.tsx index bf3ac93..fe42a4a 100644 --- a/src/components/Header/Auth.tsx +++ b/src/components/Header/Auth.tsx @@ -6,7 +6,7 @@ import { LoginProvider } from '@/components/Login/LoginContext'; import HeaderAvatar from './HeaderAvatar'; -import { LoginModal } from '@/components'; +import { Login } from '@/components'; import { useUserStore } from '@/store'; export default function Auth() { @@ -18,7 +18,7 @@ export default function Auth() { ) : ( - + )} diff --git a/src/components/Login/Footer.tsx b/src/components/Login/Footer.tsx new file mode 100644 index 0000000..c629549 --- /dev/null +++ b/src/components/Login/Footer.tsx @@ -0,0 +1,21 @@ +export default function Footer() { + return ( +
+ 注册登录即代表同意 + + 《注册协议》 + + + 《隐私政策》 + +
+ ); +} diff --git a/src/components/Login/Login.tsx b/src/components/Login/Login.tsx new file mode 100644 index 0000000..4e01d0f --- /dev/null +++ b/src/components/Login/Login.tsx @@ -0,0 +1,46 @@ +'use client'; + +import { useState, useContext } from 'react'; + +import { Dialog, DialogContent, DialogTrigger, DialogClose } from '@/components/ui/dialog'; + +import Footer from './Footer'; +import { LoginContext } from './LoginContext'; +import LoginPhone from './LoginPhone'; +import LoginQrcode from './LoginQrcode'; +import Tab from './Tab'; + +import { IconClose } from '@/components'; + +export default function Login() { + const { state, dispatch } = useContext(LoginContext); + const [currentTab, setCurrent] = useState('qrCode'); + + return ( + dispatch({ type: 'SHOW_LOGIN', payload: open })}> + + + + + e.preventDefault()}> + setCurrent(value)} /> + + + + + +
+ {currentTab === 'qrCode' && } + {currentTab === 'phone' && } +
+ +
+ +
+ ); +} diff --git a/src/components/Login/LoginForm.tsx b/src/components/Login/LoginForm.tsx index 4d63709..19d579c 100644 --- a/src/components/Login/LoginForm.tsx +++ b/src/components/Login/LoginForm.tsx @@ -124,7 +124,7 @@ export default function LoginForm({ className }: { className?: string }) {
-
+
diff --git a/src/components/Login/LoginModal.tsx b/src/components/Login/LoginModal.tsx deleted file mode 100644 index 9cc23f9..0000000 --- a/src/components/Login/LoginModal.tsx +++ /dev/null @@ -1,62 +0,0 @@ -'use client'; - -import { useContext } from 'react'; - -import { Dialog, DialogContent, DialogTrigger, DialogClose } from '@/components/ui/dialog'; - -import { LoginContext } from './LoginContext'; -import LoginForm from './LoginForm'; - -import { IconClose } from '@/components'; - -export default function LoginCard() { - const { state, dispatch } = useContext(LoginContext); - - return ( - dispatch({ type: 'SHOW_LOGIN', payload: open })}> - - - - - e.preventDefault()}> - {/* title */} -
-

登录雀乐

-

- 输入手机号,开启雀乐;未注册手机,将自动注册 -

-
- - - - - - {/* form */} - - -
- 注册登录即代表同意 - - 《注册协议》 - - - 《隐私政策》 - -
-
-
- ); -} diff --git a/src/components/Login/LoginPhone.tsx b/src/components/Login/LoginPhone.tsx new file mode 100644 index 0000000..26c09cb --- /dev/null +++ b/src/components/Login/LoginPhone.tsx @@ -0,0 +1,26 @@ +'use client'; + +import { useContext } from 'react'; + +import { Dialog, DialogContent, DialogTrigger, DialogClose } from '@/components/ui/dialog'; + +import { LoginContext } from './LoginContext'; +import LoginForm from './LoginForm'; + +import { IconClose } from '@/components'; + +export default function LoginPhone() { + const { state, dispatch } = useContext(LoginContext); + + return ( +
+ {/* title */} +

+ 输入手机号,开启雀乐;未注册手机,将自动注册 +

+ + {/* form */} + +
+ ); +} diff --git a/src/components/Login/LoginQrcode.tsx b/src/components/Login/LoginQrcode.tsx new file mode 100644 index 0000000..5d7a855 --- /dev/null +++ b/src/components/Login/LoginQrcode.tsx @@ -0,0 +1,23 @@ +'use client'; + +import { useContext } from 'react'; + +import { Dialog, DialogContent, DialogTrigger, DialogClose } from '@/components/ui/dialog'; + +import { LoginContext } from './LoginContext'; +import LoginForm from './LoginForm'; + +import { IconClose } from '@/components'; + +export default function LoginQrcode() { + const { state, dispatch } = useContext(LoginContext); + + return ( +
+ {/* title */} +
通过雀乐APP扫码登录
+ +
+
+ ); +} diff --git a/src/components/Login/Tab.tsx b/src/components/Login/Tab.tsx new file mode 100644 index 0000000..3963b94 --- /dev/null +++ b/src/components/Login/Tab.tsx @@ -0,0 +1,30 @@ +export default function Tab({ + className, + value, + changeTab, +}: { + className?: string; + value: string; + changeTab: (value: string) => void; +}) { + const tabs = [ + { name: 'qrCode', label: '扫码登录' }, + { name: 'phone', label: '手机登录' }, + ]; + + return ( +
+ {tabs.map((tab) => { + return ( +
changeTab(tab.name)} + > + {tab.label} +
+ ); + })} +
+ ); +} diff --git a/src/components/index.ts b/src/components/index.ts index c2d5b95..71f7f67 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -15,7 +15,7 @@ export { default as Category } from './Category'; export { default as ContributorCard } from './ContributorCard'; // Login -export { default as LoginModal } from './Login/LoginModal'; +export { default as Login } from './Login/Login'; export { default as LoginForm } from './Login/LoginForm'; export { default as RedirectCheck } from './Login/RedirectCheck'; diff --git a/src/types/login.d.ts b/src/types/login.d.ts new file mode 100644 index 0000000..5e5f2e3 --- /dev/null +++ b/src/types/login.d.ts @@ -0,0 +1,6 @@ +declare namespace Login { + export interface Tabs { + name: string; + label: string; + } +} From 2f9207a9e4df4a709676b34d7ba5752a496d4119 Mon Sep 17 00:00:00 2001 From: mackt Date: Mon, 29 Jul 2024 00:00:46 +0800 Subject: [PATCH 3/6] temp --- src/components/Login/LoginQrcode.tsx | 32 +++++++++++++++++++++++++++- src/services/client/user.ts | 25 ++++++++++++++++++++++ 2 files changed, 56 insertions(+), 1 deletion(-) diff --git a/src/components/Login/LoginQrcode.tsx b/src/components/Login/LoginQrcode.tsx index 5d7a855..1260145 100644 --- a/src/components/Login/LoginQrcode.tsx +++ b/src/components/Login/LoginQrcode.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useContext } from 'react'; +import { useContext, useEffect, useState } from 'react'; import { Dialog, DialogContent, DialogTrigger, DialogClose } from '@/components/ui/dialog'; @@ -9,8 +9,38 @@ import LoginForm from './LoginForm'; import { IconClose } from '@/components'; +import { apiGetUUID, apiCheckQr, apiGetLoginQr } from '@/services'; + export default function LoginQrcode() { const { state, dispatch } = useContext(LoginContext); + const { uuid, setUuid } = useState(''); + + const getUUID = async () => { + const result = await apiGetUUID(); + + if (result.code === 200) { + setUuid(result.data); + getQrcode(result.data); + return; + } + }; + + const getQrcode = async (id: string) => { + const res = await apiGetLoginQr(id); + const qrCode = await res.data; + }; + + const checkLoginStatus = async () => { + const res = await apiCheckQr(uuid); + console.log(res); + }; + + useEffect(() => { + const intervalId = setInterval(checkLoginStatus, 1000); + + return () => clearInterval(intervalId); + getUUID(); + }, []); return (
diff --git a/src/services/client/user.ts b/src/services/client/user.ts index 321d92b..10aba7b 100644 --- a/src/services/client/user.ts +++ b/src/services/client/user.ts @@ -61,3 +61,28 @@ export const apiGetMyUserInfo = async () => { const res: FetchResponse = await clientHttp.get('/queyueapi/user/my/userInfo'); return res; }; + +/** + * @description 获取UUID + */ +export const apiGetUUID = async () => { + const res: FetchResponse = await clientHttp.get('/queyueapi/user/user/uuid'); + console.log(res); + return res; +}; + +/** + * @description 校验uuid对应的请求认证状态 + */ +export const apiCheckQr = async (uuid: string) => { + const res: FetchResponse = await clientHttp.get(`/queyueapi/user/user/check/qr?uuid=${uuid}`); + return res; +}; + +/** + * @description 获取登录二维码 + */ +export const apiGetLoginQr = async (uuid: string) => { + const res: FetchResponse = await clientHttp.get(`/queyueapi/user/user/getLoginQr?uuid=${uuid}`); + return res; +}; From 482dd6f51800bfe66ae5342648a6084c4c895eb0 Mon Sep 17 00:00:00 2001 From: mackt <1033530438@qq.com> Date: Thu, 1 Aug 2024 15:57:34 +0800 Subject: [PATCH 4/6] =?UTF-8?q?fix:=20=E8=8E=B7=E5=8F=96=E9=AA=8C=E8=AF=81?= =?UTF-8?q?=E7=A0=81=20UI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + public/img/logo_qrcode.svg | 4 + src/components/Login/LoginForm.tsx | 2 +- src/components/Login/LoginPhone.tsx | 10 --- src/components/Login/LoginQrcode.tsx | 116 +++++++++++++++++++++++---- src/hooks/useLogin.ts | 9 ++- src/services/client/user.ts | 5 +- yarn.lock | 5 ++ 8 files changed, 118 insertions(+), 34 deletions(-) create mode 100644 public/img/logo_qrcode.svg diff --git a/package.json b/package.json index 420790f..686df70 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "next": "14.1.3", "nookies": "^2.5.2", "qrcode": "^1.5.3", + "qrcode.react": "^3.1.0", "qs": "^6.12.0", "react": "^18", "react-dom": "^18", diff --git a/public/img/logo_qrcode.svg b/public/img/logo_qrcode.svg new file mode 100644 index 0000000..b8478f2 --- /dev/null +++ b/public/img/logo_qrcode.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/Login/LoginForm.tsx b/src/components/Login/LoginForm.tsx index 19d579c..5b08008 100644 --- a/src/components/Login/LoginForm.tsx +++ b/src/components/Login/LoginForm.tsx @@ -144,7 +144,7 @@ export default function LoginForm({ className }: { className?: string }) {