From 07ecc7caeb047c93db063d7c7c1a58ba7851dd16 Mon Sep 17 00:00:00 2001 From: MaxtuneLee Date: Fri, 11 Oct 2024 15:05:15 +0800 Subject: [PATCH] fix: UI issues --- .../callback/feishu/page.module.scss | 2 +- app/(tourist)/callback/feishu/page.tsx | 2 +- .../callback/github/page.module.scss | 2 +- app/(tourist)/callback/github/page.tsx | 2 +- app/(tourist)/login/2/page.tsx | 3 +- .../accountItem/index.module.scss | 2 +- components/accountPanel/accountItem/index.tsx | 2 +- components/accountPanel/accountList/index.tsx | 49 ++++++++++--------- 8 files changed, 32 insertions(+), 32 deletions(-) diff --git a/app/(tourist)/callback/feishu/page.module.scss b/app/(tourist)/callback/feishu/page.module.scss index d63950a..fb0dfb8 100644 --- a/app/(tourist)/callback/feishu/page.module.scss +++ b/app/(tourist)/callback/feishu/page.module.scss @@ -2,7 +2,7 @@ display: grid; align-items: center; justify-content: center; - width: 100%; + width: 100vw; height: 100vh; .wrap { display: flex; diff --git a/app/(tourist)/callback/feishu/page.tsx b/app/(tourist)/callback/feishu/page.tsx index 70287d8..943da75 100644 --- a/app/(tourist)/callback/feishu/page.tsx +++ b/app/(tourist)/callback/feishu/page.tsx @@ -35,7 +35,7 @@ const FeishuCallback = ({ const data = res.data.Data; dispatch( addAccount({ - nickName: "ming", + nickName: "NJUPTer", email: data.email, Token: feishuRes.data.Data.loginToken, userId: data.userId, diff --git a/app/(tourist)/callback/github/page.module.scss b/app/(tourist)/callback/github/page.module.scss index d63950a..fb0dfb8 100644 --- a/app/(tourist)/callback/github/page.module.scss +++ b/app/(tourist)/callback/github/page.module.scss @@ -2,7 +2,7 @@ display: grid; align-items: center; justify-content: center; - width: 100%; + width: 100vw; height: 100vh; .wrap { display: flex; diff --git a/app/(tourist)/callback/github/page.tsx b/app/(tourist)/callback/github/page.tsx index 33f0f3a..c707f8d 100644 --- a/app/(tourist)/callback/github/page.tsx +++ b/app/(tourist)/callback/github/page.tsx @@ -35,7 +35,7 @@ const GithubCallback = ({ const data = res.data.Data; dispatch( addAccount({ - nickName: "ming", + nickName: "NJUPTer", email: data.email, Token: githubRes.data.Data.loginToken, userId: data.userId, diff --git a/app/(tourist)/login/2/page.tsx b/app/(tourist)/login/2/page.tsx index 221f469..c14625b 100644 --- a/app/(tourist)/login/2/page.tsx +++ b/app/(tourist)/login/2/page.tsx @@ -72,13 +72,12 @@ const LoginStep2 = () => { const data = res.data.Data; dispatch( addAccount({ - nickName: "ming", + nickName: "NJUPTer", email: data.email, Token: tokenRef.current, userId: data.userId, }), ); - //dispatch(login({ username: "ming", email: data.email })); if (urlParams.get("redirect") !== null) { router.push(redirect_uri); } else { diff --git a/components/accountPanel/accountItem/index.module.scss b/components/accountPanel/accountItem/index.module.scss index 699e85c..a83c960 100644 --- a/components/accountPanel/accountItem/index.module.scss +++ b/components/accountPanel/accountItem/index.module.scss @@ -5,7 +5,7 @@ flex-shrink: 0; align-items: center; justify-content: space-between; - width: 300px; + width: 100%; height: 78px; margin: 1px 0; padding: 0px 14px; diff --git a/components/accountPanel/accountItem/index.tsx b/components/accountPanel/accountItem/index.tsx index 420c8d2..6f3fcc1 100644 --- a/components/accountPanel/accountItem/index.tsx +++ b/components/accountPanel/accountItem/index.tsx @@ -36,7 +36,7 @@ const AccountItem = forwardRef( />
-
{nickName ?? "Ming"}
+
{nickName ?? "NJUPTer"}
{mail ?? "B2100000@njupt.edu.cn"}
diff --git a/components/accountPanel/accountList/index.tsx b/components/accountPanel/accountList/index.tsx index f6c9ee1..c9f53bc 100644 --- a/components/accountPanel/accountList/index.tsx +++ b/components/accountPanel/accountList/index.tsx @@ -1,13 +1,14 @@ -"use client"; -import { useCallback, useEffect, useRef } from "react"; -import { MemorizedAccountItem } from "../accountItem"; -import styles from "./index.module.scss"; -import { useAppSelector } from "@/redux"; -import { useAppDispatch } from "@/redux"; -import { removeAccount } from "@/redux/features/userList"; -import { useRouter } from "next/navigation"; -import { useContext } from "react"; -import { SelectedAccountContext } from "@/lib/context"; +'use client' +import { useCallback, useEffect, useRef } from 'react' +import { MemorizedAccountItem } from '../accountItem' +import styles from './index.module.scss' +import { useAppSelector } from '@/redux' +import { useAppDispatch } from '@/redux' +import { removeAccount } from '@/redux/features/userList' +import { useRouter } from 'next/navigation' +import { useContext } from 'react' +import { SelectedAccountContext } from '@/lib/context' +import defaultAvatar from '@/public/defaultAvatar.png' /** * @@ -16,14 +17,14 @@ import { SelectedAccountContext } from "@/lib/context"; * @returns */ const AccountList = () => { - const { selected, setSelected } = useContext(SelectedAccountContext); - const scrollRef = useRef(null); - const localUserList = useAppSelector((state) => state.localUserList); - const dispatch = useAppDispatch(); + const { selected, setSelected } = useContext(SelectedAccountContext) + const scrollRef = useRef(null) + const localUserList = useAppSelector((state) => state.localUserList) + const dispatch = useAppDispatch() const scroll = useCallback((index: number) => { - scrollRef.current!.scroll({ top: index * 80, behavior: "smooth" }); - }, []); + scrollRef.current!.scroll({ top: index * 80, behavior: 'smooth' }) + }, []) return ( <> @@ -38,22 +39,22 @@ const AccountList = () => { key={`${value.email}_${value.nickName}`} nickName={`${value.nickName}`} mail={`${value.email}`} - avator={`${value.avator}`} + avator={`${value.avator || defaultAvatar.src}`} onFocus={() => { - setSelected(index); - scroll(index); + setSelected(index) + scroll(index) }} onClose={() => { - dispatch(removeAccount(index)); + dispatch(removeAccount(index)) }} /> - ); + ) })}
- ); -}; + ) +} -export { AccountList }; +export { AccountList }