fix(frontend): too many notifications when 401

Makefile

@@ -30,6 +30,7 @@ build: swag
 	@go build -ldflags "-linkmode external -w -s $(LDFLAGS)" -o ./build/$(BINARY) $(PACKAGE)/cmd/cloudsdale
 	@echo Build finished.
 
+run: export DEBUG = true
 run: swag
 	@echo Running $(PACKAGE)...
 	go run -ldflags "$(LDFLAGS)" $(PACKAGE)/cmd/cloudsdale

main.go

@@ -0,0 +1 @@
+package Cloudsdale

web/src/App.tsx

@@ -4,7 +4,7 @@ import routes from "~react-pages";
 import { Box, LoadingOverlay, MantineProvider } from "@mantine/core";
 import { emotionTransform, MantineEmotionProvider } from "@mantine/emotion";
 import { Suspense, useEffect } from "react";
-import useTheme from "@/composables/useTheme";
+import { useTheme } from "@/utils/theme";
 import { useCategoryApi } from "@/api/category";
 import { useCategoryStore } from "@/stores/category";
 import { useConfigApi } from "@/api/config";

web/src/pages/admin/challenges/[id]/index.tsx

@@ -56,16 +56,18 @@ function Page() {
 	}
 
 	function saveAttachment() {
-		const notificationID = showLoadingNotification({
+		showLoadingNotification({
+			id: "upload-attachment",
 			message: "正在上传附件",
 		});
 		const config: AxiosRequestConfig<FormData> = {};
 		challengeApi
 			.saveChallengeAttachment(Number(id), attachment!, config)
 			.then((_) => {
 				showSuccessNotification({
-					id: notificationID,
+					id: "upload-attachment",
 					message: "附件上传成功",
+					update: true,
 				});
 				setRefresh((prev) => prev + 1);
 			});

web/src/utils/axios.ts

@@ -38,6 +38,7 @@ export const useAuth = () => {
 					authStore.setUser(undefined);
 					navigate("/login");
 					showInfoNotification({
+						id: "auth-expired",
 						message: "登录凭据已过期，请重新登录",
 					});
 				}

web/src/utils/notification.tsx

@@ -1,140 +1,146 @@
-import { notifications, showNotification } from "@mantine/notifications";
+import {
+	NotificationData,
+	showNotification,
+	updateNotification,
+} from "@mantine/notifications";
 import MDIcon from "@/components/ui/MDIcon";
 
 export function showErrNotification({
 	id,
 	title,
 	message,
+	update,
 }: {
 	id?: string;
 	title?: string;
 	message?: string;
+	update?: boolean;
 }) {
-	if (id) {
-		notifications.update({
-			id: id,
-			title: title || "发生了错误",
-			message: message,
-			color: "red",
-			icon: <MDIcon c={"white"}>close</MDIcon>,
+	const notificationData: NotificationData = {
+		id: id,
+		title: title || "错误",
+		message: message,
+		color: "red",
+		icon: <MDIcon c={"white"}>exclamation</MDIcon>,
+	};
+	if (update) {
+		updateNotification({
+			...notificationData,
 			autoClose: 2000,
 			withCloseButton: true,
 			loading: false,
 		});
-		return;
+	} else {
+		showNotification(notificationData);
 	}
-	showNotification({
-		title: title || "发生了错误",
-		message: message,
-		color: "red",
-		icon: <MDIcon c={"white"}>close</MDIcon>,
-	});
 }
 
 export function showSuccessNotification({
 	id,
 	title,
 	message,
+	update,
 }: {
 	id?: string;
 	title?: string;
 	message?: string;
+	update?: boolean;
 }) {
-	if (id) {
-		notifications.update({
-			id: id,
-			title: title || "成功",
-			message: message,
-			color: "green",
-			icon: <MDIcon c={"white"}>check</MDIcon>,
+	const notificationData: NotificationData = {
+		id: id,
+		title: title || "成功",
+		message: message,
+		color: "green",
+		icon: <MDIcon c={"white"}>check</MDIcon>,
+	};
+	if (update) {
+		updateNotification({
+			...notificationData,
 			autoClose: 2000,
 			withCloseButton: true,
 			loading: false,
 		});
-		return;
+	} else {
+		showNotification(notificationData);
 	}
-	showNotification({
-		title: title || "成功",
-		message: message,
-		color: "green",
-		icon: <MDIcon c={"white"}>check</MDIcon>,
-	});
 }
 
 export function showInfoNotification({
 	id,
 	title,
 	message,
+	update,
 }: {
 	id?: string;
 	title?: string;
 	message?: string;
+	update?: boolean;
 }) {
-	if (id) {
-		notifications.update({
-			id: id,
-			title: title || "信息",
-			message: message,
-			color: "blue",
-			icon: <MDIcon c={"white"}>info_i</MDIcon>,
+	const notificationData: NotificationData = {
+		id: id,
+		title: title || "信息",
+		message: message,
+		color: "blue",
+		icon: <MDIcon c={"white"}>info_i</MDIcon>,
+	};
+	if (update) {
+		updateNotification({
+			...notificationData,
 			autoClose: 2000,
 			withCloseButton: true,
 			loading: false,
 		});
-		return;
+	} else {
+		showNotification(notificationData);
 	}
-	showNotification({
-		title: title || "信息",
-		message: message,
-		color: "blue",
-		icon: <MDIcon c={"white"}>info_i</MDIcon>,
-	});
 }
 
 export function showWarnNotification({
 	id,
 	title,
 	message,
+	update,
 }: {
 	id?: string;
 	title?: string;
 	message?: string;
+	update?: boolean;
 }) {
-	if (id) {
-		notifications.update({
-			id: id,
-			title: title || "警告",
-			message: message,
-			color: "orange",
-			icon: <MDIcon c={"white"}>exclamation</MDIcon>,
+	const notificationData: NotificationData = {
+		id: id,
+		title: title || "警告",
+		message: message,
+		color: "orange",
+		icon: <MDIcon c={"white"}>exclamation</MDIcon>,
+	};
+	if (update) {
+		updateNotification({
+			...notificationData,
 			autoClose: 2000,
 			withCloseButton: true,
 			loading: false,
 		});
-		return;
+	} else {
+		showNotification(notificationData);
 	}
-	showNotification({
-		title: title || "警告",
-		message: message,
-		color: "orange",
-		icon: <MDIcon c={"white"}>exclamation</MDIcon>,
-	});
 }
 
 export function showLoadingNotification({
+	id,
 	title,
 	message,
 }: {
+	id?: string;
 	title?: string;
 	message?: string;
-}): string {
-	const id = notifications.show({
+}) {
+	showNotification({
+		id: id,
 		title: title || "请稍后",
 		loading: true,
 		message: message,
 		color: "blue",
 		autoClose: false,
 		withCloseButton: false,
 	});
-	return id;
 }

web/src/composables/useTheme.ts → web/src/utils/theme.ts

@@ -1,6 +1,6 @@
 import { createTheme } from "@mantine/core";
 
-export default function useTheme() {
+export function useTheme() {
 	const theme = createTheme({
 		colors: {
 			brand: [