wip(frontend): loading overlay

ElaBosak233 · Jun 5, 2024 · f029237 · f029237
1 parent 9acec95
commit f029237
Show file tree

Hide file tree

Showing 10 changed files with 192 additions and 127 deletions.
diff --git a/web/src/components/layouts/withGame.tsx b/web/src/components/layouts/withGame.tsx
@@ -40,7 +40,7 @@ export default function withGame(WrappedComponent: React.ComponentType<any>) {
 								flexShrink: 0,
 							}}
 						>
-							<Text fw={700} size="1.5rem">
+							<Text fw={700} size="2rem">
 								{game?.title}
 							</Text>
 						</Box>

diff --git a/web/src/components/modals/ChallengeModal.tsx b/web/src/components/modals/ChallengeModal.tsx
@@ -36,6 +36,8 @@ import {
 } from "@/utils/notification";
 import { useForm } from "@mantine/form";
 import { useTeamStore } from "@/stores/team";
+import { useInterval } from "@mantine/hooks";
+import { set } from "zod";
 
 interface ChallengeModalProps extends ModalProps {
 	challenge?: Challenge;
@@ -54,7 +56,11 @@ export default function ChallengeModal(props: ChallengeModalProps) {
 	const teamStore = useTeamStore();
 
 	const [pod, setPod] = useState<Pod>();
+	const [podTime, setPodTime] = useState<number>(0);
+	const interval = useInterval(() => setPodTime((s) => s - 1), 1000);
 	const [podCreateLoading, setPodCreateLoading] = useState(false);
+	const [podRemoveLoading, setPodRemoveLoading] = useState(false);
+	const [podRenewLoading, setPodRenewLoading] = useState(false);
 
 	const form = useForm({
 		mode: "uncontrolled",
@@ -108,23 +114,26 @@ export default function ChallengeModal(props: ChallengeModalProps) {
 	}
 
 	function removePod() {
+		setPodRemoveLoading(true);
 		podApi
 			.removePod({
 				id: pod?.id as number,
 			})
-			.then((res) => {
-				const r = res.data;
-				if (r?.code === 200) {
-					setPod(undefined);
-				}
+			.then((_) => {
+				setPod(undefined);
+				setPodTime(0);
 				showSuccessNotification({
 					title: "操作成功",
 					message: "实例已销毁！",
 				});
+			})
+			.finally(() => {
+				setPodRemoveLoading(false);
 			});
 	}
 
 	function renewPod() {
+		setPodRenewLoading(true);
 		podApi
 			.renewPod({
 				id: pod?.id!,
@@ -134,6 +143,9 @@ export default function ChallengeModal(props: ChallengeModalProps) {
 				if (r?.code === 200) {
 					getPod();
 				}
+			})
+			.finally(() => {
+				setPodRenewLoading(false);
 			});
 	}
 
@@ -196,14 +208,31 @@ export default function ChallengeModal(props: ChallengeModalProps) {
 			});
 	}
 
+	useEffect(() => {
+		if (podTime > 0) {
+			interval.start();
+			return interval.stop;
+		}
+	}, [podTime]);
+
+	useEffect(() => {
+		if (pod) {
+			setPodTime(
+				Math.ceil(pod?.removed_at - new Date().getTime() / 1000)
+			);
+		}
+	}, [pod]);
+
 	useEffect(() => {
 		if (challenge?.is_dynamic) {
 			getPod();
 		}
-	}, [challenge]);
+	}, [challenge, modalProps.opened]);
 
 	useEffect(() => {
 		form.reset();
+		setPodTime(0);
+		setPod(undefined);
 	}, [modalProps.opened]);
 
 	return (
@@ -238,18 +267,7 @@ export default function ChallengeModal(props: ChallengeModalProps) {
 							}}
 						>
 							<Group gap={6}>
-								<MDIcon
-									color={
-										colorScheme === "light"
-											? challenge?.category?.color ||
-												"#3F51B5"
-											: lighten(
-													challenge?.category
-														?.color || "#3F51B5",
-													0.15
-												)
-									}
-								>
+								<MDIcon color={challenge?.category?.color}>
 									{challenge?.category?.icon}
 								</MDIcon>
 								<Text fw={700}>{challenge?.title}</Text>
@@ -345,16 +363,7 @@ export default function ChallengeModal(props: ChallengeModalProps) {
 											key={nat?.id}
 											value={nat?.entry}
 											readOnly
-											sx={{
-												input: {
-													"&:focus": {
-														borderColor:
-															challenge?.category
-																?.color ||
-															"#3F51B5",
-													},
-												},
-											}}
+											color={challenge?.category?.color}
 											leftSectionWidth={135}
 											leftSection={
 												<Flex
@@ -431,36 +440,23 @@ export default function ChallengeModal(props: ChallengeModalProps) {
 											本题为动态容器题目，解题需开启容器实例
 										</Text>
 										<Text size="0.8rem" c="secondary">
-											本题容器时间 {challenge?.duration}s
+											本题容器时间{" "}
+											{podTime || challenge?.duration}s
 										</Text>
 									</Stack>
 									<Flex gap={10}>
 										{pod?.id && (
 											<>
 												<Button
-													sx={{
-														backgroundColor:
-															"#3b81f5",
-														"&:hover": {
-															backgroundColor:
-																"#3b81f5",
-														},
-														color: "#FFF",
-													}}
+													loading={podRenewLoading}
+													color={"blue"}
 													onClick={renewPod}
 												>
 													实例续期
 												</Button>
 												<Button
-													sx={{
-														backgroundColor:
-															"#d22e2d",
-														"&:hover": {
-															backgroundColor:
-																"#d22e2d",
-														},
-														color: "#FFF",
-													}}
+													loading={podRemoveLoading}
+													color={"red"}
 													onClick={removePod}
 												>
 													销毁实例
@@ -470,18 +466,8 @@ export default function ChallengeModal(props: ChallengeModalProps) {
 										{!pod?.id && (
 											<Button
 												size="sm"
-												bg={
-													colorScheme === "light"
-														? challenge?.category
-																?.color ||
-															"#3F51B5"
-														: darken(
-																challenge
-																	?.category
-																	?.color ||
-																	"#3F51B5",
-																0.25
-															)
+												color={
+													challenge?.category?.color
 												}
 												loading={podCreateLoading}
 												onClick={createPod}
@@ -523,16 +509,7 @@ export default function ChallengeModal(props: ChallengeModalProps) {
 									{...form.getInputProps("flag")}
 								/>
 								<Button
-									bg={
-										colorScheme === "light"
-											? challenge?.category?.color ||
-												"#3F51B5"
-											: darken(
-													challenge?.category
-														?.color || "#3F51B5",
-													0.25
-												)
-									}
+									color={challenge?.category?.color}
 									w={"15%"}
 									type="submit"
 								>

diff --git a/web/src/components/navigations/Navbar.tsx b/web/src/components/navigations/Navbar.tsx
@@ -304,7 +304,7 @@ export default function Navbar() {
 						</Menu.Target>
 						<Menu.Dropdown>
 							<Menu.Item
-								c={"brand"}
+								color={"brand"}
 								leftSection={<MDIcon>person</MDIcon>}
 								onClick={() => navigate("/profile")}
 							>
@@ -314,7 +314,7 @@ export default function Navbar() {
 							</Menu.Item>
 							<Menu.Divider />
 							<Menu.Item
-								c={"red"}
+								color={"red"}
 								leftSection={
 									<MDIcon color={"red"}>logout</MDIcon>
 								}

diff --git a/web/src/components/widgets/GameNoticeArea.tsx b/web/src/components/widgets/GameNoticeArea.tsx
@@ -1,6 +1,6 @@
 import { useGameApi } from "@/api/game";
 import { Notice } from "@/types/notice";
-import { Box, Flex, ScrollArea } from "@mantine/core";
+import { Box, Flex, ScrollArea, ThemeIcon } from "@mantine/core";
 import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import MDIcon from "@/components/ui/MDIcon";
@@ -75,13 +75,19 @@ export default function GameNoticeArea() {
 								<MDIcon>campaign</MDIcon>
 							)}
 							{notice?.type === "first_blood" && (
-								<FirstBloodIcon />
+								<ThemeIcon variant={"transparent"}>
+									<FirstBloodIcon />
+								</ThemeIcon>
 							)}
 							{notice?.type === "second_blood" && (
-								<SecondBloodIcon />
+								<ThemeIcon variant={"transparent"}>
+									<SecondBloodIcon />
+								</ThemeIcon>
 							)}
 							{notice?.type === "third_blood" && (
-								<ThirdBloodIcon />
+								<ThemeIcon variant={"transparent"}>
+									<ThirdBloodIcon />
+								</ThemeIcon>
 							)}
 							{notice?.type === "new_challenge" && (
 								<MDIcon color={"green"}>add</MDIcon>

diff --git a/web/src/components/widgets/TeamCard.tsx b/web/src/components/widgets/TeamCard.tsx
@@ -9,6 +9,7 @@ import {
 	Stack,
 	Tooltip,
 	Divider,
+	Title,
 } from "@mantine/core";
 import MDIcon from "@/components/ui/MDIcon";
 
@@ -34,10 +35,28 @@ export default function TeamCard({ team }: { team?: Team }) {
 					<MDIcon size={40}>people</MDIcon>
 				</Avatar>
 				<Stack gap={5}>
-					<Text size="2rem" fw={600}>
+					<Title
+						size="2rem"
+						fw={600}
+						maw={200}
+						sx={{
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							whiteSpace: "nowrap",
+						}}
+					>
 						{team?.name}
+					</Title>
+					<Text
+						maw={200}
+						sx={{
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							whiteSpace: "nowrap",
+						}}
+					>
+						{team?.description}
 					</Text>
-					<Text>{team?.description}</Text>
 				</Stack>
 			</Flex>
 			<Divider my={15} />

diff --git a/web/src/composables/useTheme.ts b/web/src/composables/useTheme.ts
@@ -53,6 +53,15 @@ export default function useTheme() {
 			],
 		},
 		primaryColor: "brand",
+		components: {
+			LoadingOverlay: {
+				defaultProps: {
+					transitionProps: {
+						exitDuration: 250,
+					},
+				},
+			},
+		},
 	});
 	return { theme: theme };
 }
diff --git a/web/src/pages/challenges/index.tsx b/web/src/pages/challenges/index.tsx
@@ -38,7 +38,7 @@ export default function Page() {
 	const [selectedCategory, setSelectedCategory] = useState<number>(0);
 	const [sort, setSort] = useState<string>("id_desc");
 
-	const [loading, setLoading] = useState<boolean>(false);
+	const [loading, setLoading] = useState<boolean>(true);
 
 	const [opened, { open, close }] = useDisclosure(false);
 	const [selectedChallenge, setSelectedChallenge] = useState<Challenge>();