1
This commit is contained in:
zhangkai
220
src/App.tsx
Normal file
220
src/App.tsx
Normal file
@@ -0,0 +1,220 @@
|
||||
import uniqueId from "lodash-es/uniqueId";
|
||||
import cloneDeep from "lodash-es/cloneDeep";
|
||||
import { useContext, useEffect, useState } from "react";
|
||||
import { RouterProvider, useSearchParams } from "react-router-dom";
|
||||
import "reactflow/dist/style.css";
|
||||
import "./App.css";
|
||||
|
||||
import ErrorAlert from "./alerts/error";
|
||||
import NoticeAlert from "./alerts/notice";
|
||||
import SuccessAlert from "./alerts/success";
|
||||
import { alertContext } from "./contexts/alertContext";
|
||||
import { locationContext } from "./contexts/locationContext";
|
||||
import { userContext } from "./contexts/userContext";
|
||||
import { LoginPage } from "./pages/login";
|
||||
import router from "./routes";
|
||||
import routesM from "./routesM";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import i18next from "i18next";
|
||||
|
||||
// 是否为手机端
|
||||
const ISMOBILE = function () {
|
||||
let flag = navigator.userAgent.match(
|
||||
/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
|
||||
);
|
||||
return flag;
|
||||
};
|
||||
export default function App() {
|
||||
let { setCurrent, setShowSideBar, setIsStackedOpen } = useContext(locationContext);
|
||||
// let location = useLocation();
|
||||
useEffect(() => {
|
||||
setCurrent(location.pathname.replace(/\/$/g, "").split("/"));
|
||||
setShowSideBar(true);
|
||||
setIsStackedOpen(true);
|
||||
}, [setCurrent, setIsStackedOpen, setShowSideBar]);
|
||||
const {
|
||||
errorData,
|
||||
errorOpen,
|
||||
setErrorOpen,
|
||||
noticeData,
|
||||
noticeOpen,
|
||||
setNoticeOpen,
|
||||
successData,
|
||||
successOpen,
|
||||
setErrorData,
|
||||
setSuccessOpen,
|
||||
} = useContext(alertContext);
|
||||
|
||||
// Initialize state variable for the list of alerts
|
||||
const [alertsList, setAlertsList] = useState<
|
||||
Array<{
|
||||
type: string;
|
||||
data: { title: string; list?: Array<string>; link?: string };
|
||||
id: string;
|
||||
}>
|
||||
>([]);
|
||||
|
||||
// Use effect hook to update alertsList when a new alert is added
|
||||
useEffect(() => {
|
||||
// If there is an error alert open with data, add it to the alertsList
|
||||
if (errorOpen && errorData) {
|
||||
if (
|
||||
alertsList.length > 0 &&
|
||||
JSON.stringify(alertsList[alertsList.length - 1].data) ===
|
||||
JSON.stringify(errorData)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
setErrorOpen(false);
|
||||
setAlertsList((old) => {
|
||||
let newAlertsList = [
|
||||
...old,
|
||||
{ type: "error", data: cloneDeep(errorData), id: uniqueId() },
|
||||
];
|
||||
return newAlertsList;
|
||||
});
|
||||
}
|
||||
// If there is a notice alert open with data, add it to the alertsList
|
||||
else if (noticeOpen && noticeData) {
|
||||
if (
|
||||
alertsList.length > 0 &&
|
||||
JSON.stringify(alertsList[alertsList.length - 1].data) ===
|
||||
JSON.stringify(noticeData)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
setNoticeOpen(false);
|
||||
setAlertsList((old) => {
|
||||
let newAlertsList = [
|
||||
...old,
|
||||
{ type: "notice", data: cloneDeep(noticeData), id: uniqueId() },
|
||||
];
|
||||
return newAlertsList;
|
||||
});
|
||||
}
|
||||
// If there is a success alert open with data, add it to the alertsList
|
||||
else if (successOpen && successData) {
|
||||
if (
|
||||
alertsList.length > 0 &&
|
||||
JSON.stringify(alertsList[alertsList.length - 1].data) ===
|
||||
JSON.stringify(successData)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
setSuccessOpen(false);
|
||||
setAlertsList((old) => {
|
||||
let newAlertsList = [
|
||||
...old,
|
||||
{ type: "success", data: cloneDeep(successData), id: uniqueId() },
|
||||
];
|
||||
return newAlertsList;
|
||||
});
|
||||
}
|
||||
}, [
|
||||
errorData,
|
||||
errorOpen,
|
||||
noticeData,
|
||||
noticeOpen,
|
||||
setErrorOpen,
|
||||
setNoticeOpen,
|
||||
setSuccessOpen,
|
||||
successData,
|
||||
successOpen,
|
||||
]);
|
||||
|
||||
|
||||
/**
|
||||
* 暴露弹窗全局使用
|
||||
**/
|
||||
useEffect(() => {
|
||||
window.errorAlerts = (errorList: string[]) => {
|
||||
setAlertsList((old) => {
|
||||
let newAlertsList = [
|
||||
...old,
|
||||
{ type: "error", data: { title: '', list: errorList }, id: uniqueId() },
|
||||
];
|
||||
return newAlertsList;
|
||||
})
|
||||
}
|
||||
}, [])
|
||||
|
||||
const removeAlert = (id: string) => {
|
||||
setAlertsList((prevAlertsList) =>
|
||||
prevAlertsList.filter((alert) => alert.id !== id)
|
||||
);
|
||||
};
|
||||
|
||||
const { user, setUser } = useContext(userContext);
|
||||
|
||||
// 退出
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event) => {
|
||||
if (event.ctrlKey && event.keyCode === 81) {
|
||||
setUser(null)
|
||||
localStorage.setItem('UUR_INFO', '')
|
||||
}
|
||||
};
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleKeyDown);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// i18n title
|
||||
const { t } = useTranslation()
|
||||
useEffect(() => {
|
||||
document.title = t('title')
|
||||
}, [t])
|
||||
// init language
|
||||
useEffect(() => {
|
||||
const lang = user?.user_id ? localStorage.getItem('language-' + user.user_id) : null
|
||||
if (lang) {
|
||||
i18next.changeLanguage(lang)
|
||||
}
|
||||
}, [user])
|
||||
|
||||
// 免登录列表
|
||||
const noAuthPages = ['chat']
|
||||
const path = location.pathname.split('/')?.[1] || ''
|
||||
|
||||
return (
|
||||
//need parent component with width and height
|
||||
<div className="flex h-full flex-col">
|
||||
{(user?.user_id || noAuthPages.includes(path)) ? <RouterProvider router={ISMOBILE()?routesM:router} />
|
||||
: user ? <div className="loading"></div>
|
||||
: <LoginPage></LoginPage>}
|
||||
<div></div>
|
||||
<div className="app-div" style={{ zIndex: 1000 }}>
|
||||
{alertsList.map((alert) => (
|
||||
<div key={alert.id}>
|
||||
{alert.type === "error" ? (
|
||||
<ErrorAlert
|
||||
key={alert.id}
|
||||
title={alert.data.title}
|
||||
list={alert.data.list}
|
||||
id={alert.id}
|
||||
removeAlert={removeAlert}
|
||||
/>
|
||||
) : alert.type === "notice" ? (
|
||||
<NoticeAlert
|
||||
key={alert.id}
|
||||
title={alert.data.title}
|
||||
link={alert.data.link}
|
||||
id={alert.id}
|
||||
removeAlert={removeAlert}
|
||||
/>
|
||||
) : (
|
||||
<SuccessAlert
|
||||
key={alert.id}
|
||||
title={alert.data.title}
|
||||
id={alert.id}
|
||||
removeAlert={removeAlert}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user