+ {children}
+
+ );
+}
diff --git a/frontend/src/components/chart/chart.tsx b/frontend/src/components/chart/chart.tsx
new file mode 100644
index 0000000..c5fd5c6
--- /dev/null
+++ b/frontend/src/components/chart/chart.tsx
@@ -0,0 +1,21 @@
+import { memo } from 'react';
+import ApexChart from 'react-apexcharts';
+
+import { useSettings } from '@/store/settingStore';
+import { useThemeToken } from '@/theme/hooks';
+
+import { StyledApexChart } from './styles';
+
+import type { Props as ApexChartProps } from 'react-apexcharts';
+
+function Chart(props: ApexChartProps) {
+ const { themeMode } = useSettings();
+ const theme = useThemeToken();
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {!isSimple && (
+
+
+
+
+ )}
+
+
+
+
+ {!isSimple && }
+ {!isSimple && }
+
+
+ {!isSimple && (
+
+
+
+
+ )}
+
+ {!isSimple && (
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {!isSimple && }
+
+
+
+
+ );
+}
diff --git a/frontend/src/components/loading/index.tsx b/frontend/src/components/loading/index.tsx
new file mode 100644
index 0000000..e1d4954
--- /dev/null
+++ b/frontend/src/components/loading/index.tsx
@@ -0,0 +1,2 @@
+export * from './circle-loading';
+export * from './line-loading';
diff --git a/frontend/src/components/loading/line-loading.tsx b/frontend/src/components/loading/line-loading.tsx
new file mode 100644
index 0000000..9fb2310
--- /dev/null
+++ b/frontend/src/components/loading/line-loading.tsx
@@ -0,0 +1,41 @@
+import { Progress } from 'antd';
+import Color from 'color';
+import { useEffect, useState } from 'react';
+
+import { useThemeToken } from '@/theme/hooks';
+
+export function LineLoading() {
+ const { colorTextBase, colorBgContainerDisabled } = useThemeToken();
+ const [percent, setPercent] = useState(10);
+ const [increasing, setIncreasing] = useState(true);
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ if (increasing) {
+ setPercent((prevPercent) => prevPercent + 20);
+ if (percent === 100) {
+ setIncreasing(false);
+ }
+ } else {
+ setPercent(0);
+ setIncreasing(true);
+ }
+ }, 50);
+
+ return () => {
+ clearInterval(interval);
+ };
+ }, [percent, increasing]);
+
+ return (
+
+
+
+ );
+}
diff --git a/frontend/src/components/locale-picker/index.tsx b/frontend/src/components/locale-picker/index.tsx
new file mode 100644
index 0000000..f126692
--- /dev/null
+++ b/frontend/src/components/locale-picker/index.tsx
@@ -0,0 +1,38 @@
+import { Dropdown } from 'antd';
+
+import useLocale, { LANGUAGE_MAP } from '@/locales/useLocale';
+
+import { IconButton, SvgIcon } from '../icon';
+
+import { LocalEnum } from '#/enum';
+import type { MenuProps } from 'antd';
+
+type Locale = keyof typeof LocalEnum;
+
+/**
+ * Locale Picker
+ */
+export default function LocalePicker() {
+ const { setLocale, locale } = useLocale();
+
+ const localeList: MenuProps['items'] = Object.values(LANGUAGE_MAP).map((item) => {
+ return {
+ key: item.locale,
+ label: item.label,
+ icon:
+
+ );
+
+ const renderContent = (
+ Upload Photo
+ handelHover(true)}
+ onMouseLeave={() => handelHover(false)}
+ >
+ {imageUrl ? renderPreview : null}
+ {!imageUrl || isHover ? renderPlaceholder : null}
+
+ );
+
+ const defaultHelperText = (
+ max size of {fBytes(3145728)} +
{helperText || defaultHelperText}
;
+
+ return (
+
+ {placeholder || (
+
+
+
+ )}
+ {closeButton}
+
+ {name}
+
+ {fBytes(size)}
+
+
+ {closeButton}
+
+
+
+ Drop or Select file
+
+
+ Drop files here or click
+
+ browse
+
+ thorough your machine
+
+
+
+
+
+
+ );
+
+ const items: MenuProps['items'] = [
+ { label:
+
+ {username}
+ {email}
+
+ {data &&
+
+
+ }
+
+ );
+};
+
+export default PandoraUsage;
diff --git a/frontend/src/layouts/_common/search-bar.tsx b/frontend/src/layouts/_common/search-bar.tsx
new file mode 100644
index 0000000..53eaf86
--- /dev/null
+++ b/frontend/src/layouts/_common/search-bar.tsx
@@ -0,0 +1,248 @@
+import { Empty, GlobalToken, Input, InputRef, Modal } from 'antd';
+import match from 'autosuggest-highlight/match';
+import parse from 'autosuggest-highlight/parse';
+import Color from 'color';
+import { CSSProperties, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useBoolean, useEvent, useKeyPressEvent } from 'react-use';
+import styled from 'styled-components';
+
+import { IconButton, SvgIcon } from '@/components/icon';
+import Scrollbar from '@/components/scrollbar';
+import { useFlattenedRoutes, useRouter } from '@/router/hooks';
+import ProTag from '@/theme/antd/components/tag';
+import { useThemeToken } from '@/theme/hooks';
+
+export default function SearchBar() {
+ const { t } = useTranslation();
+ const { replace } = useRouter();
+ const inputRef = useRef
+
+
+ ⌘K
+
+
+
+ }
+ >
+ {searchResult.length === 0 ? (
+
+ ↑
+ ↓
+ to navigate
+
+
+ ↵
+ to select
+
+
+ ESC
+ to close
+
+
+ {searchResult.map(({ key, label }, index) => {
+ const partsTitle = parse(t(label), match(t(label), searchQuery));
+ const partsKey = parse(key, match(key, searchQuery));
+ return (
+ handleSelect(key)}
+ onMouseMove={() => handleHover(index)}
+ >
+
+ );
+ })}
+
+
+
+
+
+
+ {partsTitle.map((item) => (
+
+ {item.text}
+
+ ))}
+
+
+ {partsKey.map((item) => (
+
+ {item.text}
+
+ ))}
+
+
+ setDrawerOpen(true)}
+ >
+
+
+
+
+
+ {/* theme mode */}
+
+
+
+
+ {/* theme layout */}
+
+ Mode
+
+
+ setThemeMode(ThemeMode.Light)}
+ className="flex h-20 w-full cursor-pointer items-center justify-center"
+ >
+
+ setThemeMode(ThemeMode.Dark)}
+ className="flex h-20 w-full cursor-pointer items-center justify-center"
+ >
+
+
+
+
+
+ {/* theme stretch */}
+
+ Layout
+
+
+ setThemeLayout(ThemeLayout.Vertical)}
+ className="h-14 cursor-pointer"
+ style={{ flexGrow: 1, flexShrink: 0 }}
+ bodyStyle={{
+ padding: 0,
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ height: '100%',
+ }}
+ >
+
+ setThemeLayout(ThemeLayout.Horizontal)}
+ className="h-14 cursor-pointer"
+ style={{ flexGrow: 1, flexShrink: 0 }}
+ bodyStyle={{
+ padding: 0,
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ height: '100%',
+ }}
+ >
+
+ setThemeLayout(ThemeLayout.Mini)}
+ className="h-14 cursor-pointer"
+ style={{ flexGrow: 1, flexShrink: 0 }}
+ bodyStyle={{
+ padding: 0,
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ height: '100%',
+ }}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ setThemeStretch(!themeStretch)}
+ className="flex h-20 w-full cursor-pointer items-center justify-center"
+ bodyStyle={{
+ width: '50%',
+ padding: 0,
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ }}
+ >
+ {themeStretch ? (
+
+
+
+ {/* theme presets */}
+
+ Stretch
+
+
+
+
+
+
+ ) : (
+
+
+ )}
+
+
+
+ {/* Page config */}
+
+ Presets
+
+
+ {Object.entries(colorPrimarys).map(([preset, color]) => (
+ setThemeColorPresets(preset as ThemeColorPresets)}
+ >
+
+ ))}
+
+
+
+
+
+
+ Page
+
+
+
+
+ setBreadCrumn(checked)}
+ />
+
+ BreadCrumb
+
+ setMultiTab(checked)}
+ />
+
+ Multi Tab
+
+
+
+ {themeLayout !== ThemeLayout.Horizontal ? (
+ setDrawerOpen(true)} className="h-10 w-10 md:hidden">
+
+ ) : (
+
+
+ {breadCrumb ?
+
+ {/* window.open('https://github.com/nianhua99/PandoraNext-Helper')}>
+
+
+
+
+
+
+
+ );
+
+ const horizontalLayout = (
+
+
+ );
+
+ const layout = themeLayout !== ThemeLayout.Horizontal ? verticalLayout : horizontalLayout;
+
+ return (
+
+
+
+ {multiTab ?
+ {
+ if (tab.key === activeTabRoutePath) return;
+ setHoveringTabKey(tab.key);
+ }}
+ onMouseLeave={() => setHoveringTabKey('')}
+ >
+ {
+ e.stopPropagation();
+ closeTab(tab.key);
+ }}
+ style={{
+ visibility:
+ (tab.key !== activeTabRoutePath && tab.key !== hoveringTabKey) ||
+ tabs.length === 1
+ ? 'hidden'
+ : 'visible',
+ }}
+ />
+
+ {t(tab.label)}
+
+ {tab.children}
+
+ ),
+ }));
+ }, [tabs, renderTabLabel]);
+
+ /**
+ * 拖拽结束事件
+ */
+ const onDragEnd: OnDragEndResponder = ({ destination, source }) => {
+ // 拖拽到非法非 droppable区域
+ if (!destination) {
+ return;
+ }
+ // 原地放下
+ if (destination.droppableId === source.droppableId && destination.index === source.index) {
+ return;
+ }
+
+ const newTabs = Array.from(tabs);
+ const [movedTab] = newTabs.splice(source.index, 1);
+ newTabs.splice(destination.index, 0, movedTab);
+ setTabs(newTabs);
+ };
+
+ /**
+ * 渲染 tabbar
+ */
+ const { themeLayout } = useSettings();
+ const { colorBorder, colorBgElevated } = useThemeToken();
+ const { screenMap } = useResponsive();
+
+ const multiTabsStyle: CSSProperties = {
+ position: 'fixed',
+ top: offsetTop ? OFFSET_HEADER_HEIGHT - 2 : HEADER_HEIGHT,
+ left: 0,
+ height: MULTI_TABS_HEIGHT,
+ backgroundColor: Color(colorBgElevated).alpha(1).toString(),
+ borderBottom: `1px dashed ${Color(colorBorder).alpha(0.6).toString()}`,
+ transition: 'top 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+ };
+
+ if (themeLayout === ThemeLayout.Horizontal) {
+ multiTabsStyle.top = HEADER_HEIGHT + NAV_HORIZONTAL_HEIGHT - 2;
+ } else if (screenMap.md) {
+ multiTabsStyle.right = '0px';
+ multiTabsStyle.left = 'auto';
+ multiTabsStyle.width = `calc(100% - ${
+ themeLayout === ThemeLayout.Vertical ? NAV_WIDTH : NAV_COLLAPSED_WIDTH
+ }px`;
+ } else {
+ multiTabsStyle.width = '100vw';
+ }
+ const renderTabBar: TabsProps['renderTabBar'] = () => {
+ return (
+
+
+
+ {(provided) => (
+
+
+
+ );
+ };
+
+ /**
+ * 路由变化时，滚动到指定tab
+ */
+ useEffect(() => {
+ if (!scrollContainer || !scrollContainer.current) {
+ return;
+ }
+ const index = tabs.findIndex((tab) => tab.key === activeTabRoutePath);
+ const currentTabElement = scrollContainer.current.querySelector(`#tab-${index}`);
+ if (currentTabElement) {
+ currentTabElement.scrollIntoView({
+ block: 'nearest',
+ behavior: 'smooth',
+ });
+ }
+ }, [activeTabRoutePath, tabs]);
+
+ /**
+ * scrollContainer 监听wheel事件
+ */
+ useEffect(() => {
+ function handleMouseWheel(event: WheelEvent) {
+ event.preventDefault();
+ scrollContainer.current!.scrollLeft += event.deltaY;
+ }
+
+ scrollContainer.current!.addEventListener('mouseenter', () => {
+ scrollContainer.current!.addEventListener('wheel', handleMouseWheel);
+ });
+ scrollContainer.current!.addEventListener('mouseleave', () => {
+ scrollContainer.current!.removeEventListener('wheel', handleMouseWheel);
+ });
+ }, []);
+
+ return (
+
+
+ )}
+
+ {tabs.map((tab, index) => (
+
+ {provided.placeholder}
+ push(tab.key)}
+ >
+
+ {(provided) => (
+
+
+ ))}
+
+ {renderTabLabel(tab)}
+
+ )}
+
+
+
+ );
+}
diff --git a/frontend/src/layouts/dashboard/nav.tsx b/frontend/src/layouts/dashboard/nav.tsx
new file mode 100644
index 0000000..933bdce
--- /dev/null
+++ b/frontend/src/layouts/dashboard/nav.tsx
@@ -0,0 +1,153 @@
+import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
+import { Menu, MenuProps } from 'antd';
+import { ItemType } from 'antd/es/menu/hooks/useItems';
+import Color from 'color';
+import { CSSProperties, useEffect, useState } from 'react';
+import { useLocation, useMatches, useNavigate } from 'react-router-dom';
+
+import Logo from '@/components/logo';
+import Scrollbar from '@/components/scrollbar';
+import { useRouteToMenuFn, usePermissionRoutes } from '@/router/hooks';
+import { menuFilter } from '@/router/utils';
+import { useSettingActions, useSettings } from '@/store/settingStore';
+import { useThemeToken } from '@/theme/hooks';
+
+import { NAV_COLLAPSED_WIDTH, NAV_WIDTH } from './config';
+
+import { ThemeLayout } from '#/enum';
+
+type Props = {
+ closeSideBarDrawer?: () => void;
+};
+export default function Nav(props: Props) {
+ const navigate = useNavigate();
+ const matches = useMatches();
+ const { pathname } = useLocation();
+
+ const { colorTextBase, colorBgElevated, colorBorder } = useThemeToken();
+
+ const settings = useSettings();
+ const { themeLayout } = settings;
+ const { setSettings } = useSettingActions();
+
+ const menuStyle: CSSProperties = {
+ background: colorBgElevated,
+ };
+
+ const routeToMenuFn = useRouteToMenuFn();
+ const permissionRoutes = usePermissionRoutes();
+
+ /**
+ * state
+ */
+ const [collapsed, setCollapsed] = useState(false);
+ const [openKeys, setOpenKeys] = useState
+
+ {/* */}
+
+
+
+ );
+}
diff --git a/frontend/src/layouts/simple/index.tsx b/frontend/src/layouts/simple/index.tsx
new file mode 100644
index 0000000..8742b7f
--- /dev/null
+++ b/frontend/src/layouts/simple/index.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { useThemeToken } from '@/theme/hooks';
+
+import HeaderSimple from '../_common/header-simple';
+
+type Props = {
+ children: React.ReactNode;
+};
+export default function SimpleLayout({ children }: Props) {
+ const { colorBgElevated, colorTextBase } = useThemeToken();
+ return (
+
+ {themeLayout === ThemeLayout.Mini ? (
+
+
+
+
+ );
+}
diff --git a/frontend/src/locales/i18n.ts b/frontend/src/locales/i18n.ts
new file mode 100644
index 0000000..3ea8b06
--- /dev/null
+++ b/frontend/src/locales/i18n.ts
@@ -0,0 +1,35 @@
+import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import { initReactI18next } from 'react-i18next';
+
+import { getStringItem } from '@/utils/storage';
+
+import en_US from './lang/en_US';
+import zh_CN from './lang/zh_CN';
+
+import { LocalEnum, StorageEnum } from '#/enum';
+
+const defaultLng = getStringItem(StorageEnum.I18N) || (LocalEnum.en_US as string);
+i18n
+ // detect user language
+ // learn more: https://github.com/i18next/i18next-browser-languageDetector
+ .use(LanguageDetector)
+ // pass the i18n instance to react-i18next.
+ .use(initReactI18next)
+ // init i18next
+ // for all options read: https://www.i18next.com/overview/configuration-options
+ .init({
+ debug: true,
+ lng: defaultLng, // localstorage -> i18nextLng: en_US
+ fallbackLng: LocalEnum.en_US,
+ interpolation: {
+ escapeValue: false, // not needed for react as it escapes by default
+ },
+ resources: {
+ en_US: { translation: en_US },
+ zh_CN: { translation: zh_CN },
+ },
+ });
+
+export default i18n;
+export const { t } = i18n;
diff --git a/frontend/src/locales/lang/en_US/common.json b/frontend/src/locales/lang/en_US/common.json
new file mode 100644
index 0000000..3010920
--- /dev/null
+++ b/frontend/src/locales/lang/en_US/common.json
@@ -0,0 +1,32 @@
+{
+ "common": {
+ "okText": "OK",
+ "closeText": "Close",
+ "cancelText": "Cancel",
+ "loadingText": "Loading...",
+ "saveText": "Save",
+ "delText": "Delete",
+ "resetText": "Reset",
+ "searchText": "Search",
+ "queryText": "Search",
+
+ "inputText": "Please enter",
+ "chooseText": "Please choose",
+
+ "redo": "Refresh",
+ "back": "Back",
+
+ "light": "Light",
+ "dark": "Dark",
+ "refresh": "Refresh",
+ "refreshConfirm": "Refresh the Account",
+ "deleteConfirm": "Delete the Account",
+ "welcomeBack": "Welcome back \uD83D\uDC4B",
+ "desc": "Manage your PandoraNext account and token in 1 place.",
+ "goNow": "Go Now",
+
+ "optional": "Optional"
+ },
+ "%namespace%:password": "",
+ "%namespace%:shareStatus": ""
+}
diff --git a/frontend/src/locales/lang/en_US/index.ts b/frontend/src/locales/lang/en_US/index.ts
new file mode 100644
index 0000000..caa565e
--- /dev/null
+++ b/frontend/src/locales/lang/en_US/index.ts
@@ -0,0 +1,9 @@
+import common from './common.json';
+import sys from './sys.json';
+import token from './token.json'
+
+export default {
+ ...common,
+ ...sys,
+ ...token
+};
diff --git a/frontend/src/locales/lang/en_US/sys.json b/frontend/src/locales/lang/en_US/sys.json
new file mode 100644
index 0000000..5c93309
--- /dev/null
+++ b/frontend/src/locales/lang/en_US/sys.json
@@ -0,0 +1,146 @@
+{
+ "sys": {
+ "api": {
+ "operationSuccess": "Operation Success",
+ "operationFailed": "Operation failed",
+ "errorTip": "Error Tip",
+ "successTip": "Success Tip",
+ "errorMessage": "The operation failed, the system is abnormal!",
+ "timeoutMessage": "Login timed out, please log in again!",
+ "apiTimeoutMessage": "The interface request timed out, please refresh the page and try again!",
+ "apiRequestFailed": "The interface request failed, please try again later!",
+ "networkException": "network anomaly",
+ "networkExceptionMsg": "Please check if your network connection is normal! The network is abnormal",
+
+ "errMsg401": "The user does not have permission (token, user name, password error)!",
+ "errMsg403": "The user is authorized, but access is forbidden!",
+ "errMsg404": "Network request error, the resource was not found!",
+ "errMsg405": "Network request error, request method not allowed!",
+ "errMsg408": "Network request timed out!",
+ "errMsg500": "Server error, please contact the administrator!",
+ "errMsg501": "The network is not implemented!",
+ "errMsg502": "Network Error!",
+ "errMsg503": "The service is unavailable, the server is temporarily overloaded or maintained!",
+ "errMsg504": "Network timeout!",
+ "errMsg505": "The http version does not support the request!"
+ },
+ "login": {
+ "backSignIn": "Back sign in",
+ "mobileSignInFormTitle": "Mobile sign in",
+ "qrSignInFormTitle": "Qr code sign in",
+ "signInFormTitle": "Sign in",
+ "signUpFormTitle": "Sign up",
+ "forgetFormTitle": "Reset password",
+
+ "signInPrimaryTitle": "Hi, Welcome Back",
+ "signInSecondTitle": "Backstage management system",
+ "signInTitle": "",
+ "signInDesc": "Enter your personal details and get started!",
+ "policy": "I agree to the xxx Privacy Policy",
+ "scanSign": "scanning the code to complete the login",
+ "forgetFormSecondTitle": "Please enter the email address associated with your account and We will email you a link to reset your password.",
+
+ "loginButton": "Sign in",
+ "registerButton": "Sign up",
+ "rememberMe": "Remember me",
+ "forgetPassword": "Forget Password?",
+ "otherSignIn": "Sign in with",
+ "sendSmsButton": "Send SMS code",
+ "sendSmsText": "Reacquire in {{second}}s",
+ "sendEmailButton": "Send Email",
+
+ "loginSuccessTitle": "Login successful",
+ "loginSuccessDesc": "Welcome back",
+
+ "accountPlaceholder": "Please input username",
+ "passwordPlaceholder": "Please input password",
+ "confirmPasswordPlaceholder": "Please input confirm password",
+ "emaildPlaceholder": "Please input email",
+ "smsPlaceholder": "Please input sms code",
+ "mobilePlaceholder": "Please input mobile",
+ "policyPlaceholder": "Register after checking",
+ "diffPwd": "The two passwords are inconsistent",
+
+ "userName": "Username",
+ "password": "Password",
+ "confirmPassword": "Confirm Password",
+ "email": "Email",
+ "smsCode": "SMS code",
+ "mobile": "Mobile",
+
+ "registerAndAgree": "By signing up, I agree to",
+ "termsOfService": " Terms of service ",
+ "privacyPolicy": " Privacy policy ",
+ "logout": "Logout"
+ },
+ "tab": {
+ "fullscreen": "FullScreen",
+ "refresh": "Refresh",
+ "close": "Close",
+ "closeOthers": "Close Others",
+ "closeAll": "Close All",
+ "closeLeft": "Close Left",
+ "closeRight": "Close Right"
+ },
+ "menu": {
+ "token": "Token",
+ "account": "Account",
+ "share": "Share",
+ "dashboard": "Dashboard",
+ "workbench": "Workbench",
+ "analysis": "Analysis",
+ "management": "Management",
+ "user": {
+ "index": "User",
+ "profile": "Profile",
+ "account": "Account"
+ },
+ "system": {
+ "index": "System",
+ "organization": "Organization",
+ "permission": "Permission",
+ "role": "Role",
+ "user": "User"
+ },
+ "blog": "Blog",
+ "components": "Components",
+ "icon": "Icon",
+ "animate": "Animate",
+ "scroll": "Scroll",
+ "markdown": "Markdown",
+ "editor": "Editor",
+ "i18n": "Multi Language",
+ "upload": "Upload",
+ "chart": "Chart",
+ "functions": "Functions",
+ "clipboard": "Clipboard",
+ "menulevel": {
+ "index": "Menu Level",
+ "1a": "Menu Level 1a",
+ "1b": {
+ "index": "Menu Level 1b",
+ "2a": "Menu Level 2a",
+ "2b": {
+ "index": "Menu Level 2b",
+ "3a": "Menu Level 3a",
+ "3b": "Menu Level 3b"
+ }
+ }
+ },
+ "disabled": "Item Disabled",
+ "label": "Item Label",
+ "frame": "Item External",
+ "external_link": "External Link",
+ "iframe": "Iframe",
+ "blank": "Blank",
+ "calendar": "Calendar",
+ "kanban": "Kanban",
+ "error": {
+ "index": "Error Page",
+ "403": "403",
+ "404": "404",
+ "500": "500"
+ }
+ }
+ }
+}
diff --git a/frontend/src/locales/lang/en_US/token.json b/frontend/src/locales/lang/en_US/token.json
new file mode 100644
index 0000000..fd8badd
--- /dev/null
+++ b/frontend/src/locales/lang/en_US/token.json
@@ -0,0 +1,27 @@
+{
+ "token": {
+ "email": "Email",
+ "password": "Password",
+ "loginStatus": "Login status",
+ "shareStatus": "Share Status",
+ "updateTime": "Update Time",
+ "action": "Action",
+ "share": "Share",
+ "shareList": "Share List",
+ "createNew": "Create New",
+ "edit": "Edit",
+ "accountList": "Account List",
+ "comment": "Comment",
+ "tokenType": "Token Type",
+ "customToken": "Custom Token",
+ "statistic": "Statistic",
+ "queryingInfo": "Querying, this will take a long time...",
+ "search": "Search",
+ "reset": "Reset",
+ "deleteConfirm": "Are you sure?",
+ "stop": "Stop Auto Refresh",
+ "start": "Start Auto Refresh",
+ "copySuccess": "Copy Success",
+ "refreshCron": "Refresh Limit Everyday"
+ }
+}
diff --git a/frontend/src/locales/lang/zh_CN/common.json b/frontend/src/locales/lang/zh_CN/common.json
new file mode 100644
index 0000000..f93c265
--- /dev/null
+++ b/frontend/src/locales/lang/zh_CN/common.json
@@ -0,0 +1,24 @@
+{
+ "common": {
+ "okText": "确认",
+ "closeText": "关闭",
+ "cancelText": "取消",
+ "loadingText": "加载中...",
+ "saveText": "保存",
+ "delText": "删除",
+ "resetText": "重置",
+ "searchText": "搜索",
+ "queryText": "查询",
+
+ "inputText": "请输入",
+ "chooseText": "请选择",
+
+ "redo": "刷新",
+ "back": "返回",
+
+ "light": "亮色主题",
+ "dark": "黑暗主题",
+
+ "optional": "可选"
+ }
+}
diff --git a/frontend/src/locales/lang/zh_CN/index.ts b/frontend/src/locales/lang/zh_CN/index.ts
new file mode 100644
index 0000000..e5c9a34
--- /dev/null
+++ b/frontend/src/locales/lang/zh_CN/index.ts
@@ -0,0 +1,9 @@
+import common from './common.json';
+import sys from './sys.json';
+import token from "./token.json"
+
+export default {
+ ...common,
+ ...sys,
+ ...token
+};
diff --git a/frontend/src/locales/lang/zh_CN/sys.json b/frontend/src/locales/lang/zh_CN/sys.json
new file mode 100644
index 0000000..6c5180f
--- /dev/null
+++ b/frontend/src/locales/lang/zh_CN/sys.json
@@ -0,0 +1,145 @@
+{
+ "sys": {
+ "api": {
+ "operationSuccess": "操作成功",
+ "operationFailed": "操作失败",
+ "errorTip": "错误提示",
+ "successTip": "成功提示",
+ "errorMessage": "操作失败,系统异常!",
+ "timeoutMessage": "登录超时,请重新登录!",
+ "apiTimeoutMessage": "接口请求超时,请刷新页面重试!",
+ "apiRequestFailed": "请求出错，请稍候重试",
+ "networkException": "网络异常",
+ "networkExceptionMsg": "网络异常，请检查您的网络连接是否正常!",
+
+ "errMsg401": "用户没有权限（令牌、用户名、密码错误）!",
+ "errMsg403": "用户得到授权，但是访问是被禁止的。!",
+ "errMsg404": "网络请求错误,未找到该资源!",
+ "errMsg405": "网络请求错误,请求方法未允许!",
+ "errMsg408": "网络请求超时!",
+ "errMsg500": "服务器错误,请联系管理员!",
+ "errMsg501": "网络未实现!",
+ "errMsg502": "网络错误!",
+ "errMsg503": "服务不可用，服务器暂时过载或维护!",
+ "errMsg504": "网络超时!",
+ "errMsg505": "http版本不支持该请求!"
+ },
+ "login": {
+ "backSignIn": "返回",
+ "signInFormTitle": "登录",
+ "mobileSignInFormTitle": "手机登录",
+ "qrSignInFormTitle": "二维码登录",
+ "signUpFormTitle": "注册",
+ "forgetFormTitle": "重置密码",
+
+ "signInPrimaryTitle": "欢迎回来",
+ "signInSecondTitle": "开箱即用的中后台管理系统",
+ "signInDesc": "输入您的个人详细信息开始使用！",
+ "policy": "我同意xxx隐私政策",
+ "scanSign": "扫码后点击'确认'，即可完成登录",
+ "forgetFormSecondTitle": "请输入与您的帐户关联的电子邮件地址，我们将通过电子邮件向您发送重置密码的链接。",
+
+ "loginButton": "登录",
+ "registerButton": "注册",
+ "rememberMe": "记住我",
+ "forgetPassword": "忘记密码?",
+ "otherSignIn": "其他登录方式",
+ "sendSmsButton": "发送验证码",
+ "sendSmsText": "{{second}}秒后重新获取",
+ "sendEmailButton": "发送邮件",
+
+ "loginSuccessTitle": "登录成功",
+ "loginSuccessDesc": "欢迎回来",
+
+ "accountPlaceholder": "请输入账号",
+ "passwordPlaceholder": "请输入密码",
+ "confirmPasswordPlaceholder": "请输入确认密码",
+ "emaildPlaceholder": "请输入邮箱",
+ "smsPlaceholder": "请输入验证码",
+ "mobilePlaceholder": "请输入手机号码",
+ "policyPlaceholder": "勾选后才能注册",
+ "diffPwd": "两次输入密码不一致",
+
+ "userName": "账号",
+ "password": "密码",
+ "confirmPassword": "确认密码",
+ "email": "邮箱",
+ "smsCode": "短信验证码",
+ "mobile": "手机号码",
+
+ "registerAndAgree": "注册即我同意",
+ "termsOfService": " 服务条款 ",
+ "privacyPolicy": " 隐私政策 ",
+ "logout": "退出"
+ },
+ "tab": {
+ "fullscreen": "内容全屏",
+ "refresh": "刷新",
+ "close": "关闭标签页",
+ "closeOthers": "关闭其它标签页",
+ "closeAll": "关闭所有标签页",
+ "closeLeft": "关闭左侧标签页",
+ "closeRight": "关闭右侧标签页"
+ },
+ "menu": {
+ "token": "令牌",
+ "account": "账号管理",
+ "share": "分享管理",
+ "dashboard": "仪表",
+ "workbench": "工作台",
+ "analysis": "分析",
+ "management": "管理",
+ "user": {
+ "index": "用户",
+ "profile": "个人资料",
+ "account": "账户"
+ },
+ "system": {
+ "index": "系统",
+ "organization": "组织",
+ "permission": "权限",
+ "role": "角色",
+ "user": "用户"
+ },
+ "blog": "博客",
+ "components": "组件",
+ "icon": "图标",
+ "animate": "动画",
+ "scroll": "滚动",
+ "markdown": "Markdown",
+ "editor": "富文本",
+ "i18n": "多语言",
+ "upload": "上传",
+ "chart": "图表",
+ "functions": "功能",
+ "clipboard": "剪贴板",
+ "menulevel": {
+ "index": "多级菜单",
+ "1a": "多级菜单 1a",
+ "1b": {
+ "index": "多级菜单 1b",
+ "2a": "多级菜单 2a",
+ "2b": {
+ "index": "多级菜单 2b",
+ "3a": "多级菜单 3a",
+ "3b": "多级菜单 3b"
+ }
+ }
+ },
+ "disabled": "项目禁用",
+ "label": "项目标签",
+ "frame": "项目外部链接",
+ "external_link": "外链",
+ "iframe": "内嵌",
+ "blank": "空白",
+ "calendar": "日历",
+ "kanban": "看板",
+ "error": {
+ "index": "异常页",
+ "403": "403",
+ "404": "404",
+ "500": "500"
+ }
+ }
+ }
+}
diff --git a/frontend/src/locales/lang/zh_CN/token.json b/frontend/src/locales/lang/zh_CN/token.json
new file mode 100644
index 0000000..a84d161
--- /dev/null
+++ b/frontend/src/locales/lang/zh_CN/token.json
@@ -0,0 +1,33 @@
+{
+ "token": {
+ "email": "电子邮件",
+ "password": "密码",
+ "loginStatus": "登录状态",
+ "shareStatus": "共享状态",
+ "updateTime": "更新时间",
+ "action": "操作",
+ "share": "共享",
+ "shareList": "共享列表",
+ "createNew": "新建",
+ "edit": "编辑",
+ "accountList": "账号列表",
+ "comment": "备注",
+ "tokenType": "令牌类型",
+ "customToken": "自定义令牌",
+ "statistic": "统计",
+ "queryingInfo": "查询中，这将需要很长时间......",
+ "search": "搜索",
+ "reset": "重置",
+ "deleteConfirm": "确定删除吗",
+ "stop": "停止定时刷新",
+ "start": "启动定时刷新",
+ "copySuccess": "复制成功",
+ "expiresIn": "有效期(秒)",
+ "siteLimit": "站点限制",
+ "gpt35Limit": "GPT-3.5次数",
+ "gpt4Limit": "GPT-4次数",
+ "showUserinfo": "显示用户信息",
+ "showConversations": "会话隔离",
+ "refreshEveryday": "每天重置限额"
+ }
+}
diff --git a/frontend/src/locales/useLocale.ts b/frontend/src/locales/useLocale.ts
new file mode 100644
index 0000000..8abbbf2
--- /dev/null
+++ b/frontend/src/locales/useLocale.ts
@@ -0,0 +1,50 @@
+import en_US from 'antd/locale/en_US';
+import zh_CN from 'antd/locale/zh_CN';
+import { useTranslation } from 'react-i18next';
+
+import { LocalEnum } from '#/enum';
+import type { Locale as AntdLocal } from 'antd/es/locale';
+
+type Locale = keyof typeof LocalEnum;
+type Language = {
+ locale: keyof typeof LocalEnum;
+ icon: string;
+ label: string;
+ antdLocal: AntdLocal;
+};
+
+export const LANGUAGE_MAP: Record
+
+ ))}
+ {item.type.toUpperCase()}
+ -
+ {item.values.map((item) => (
+
- onChangeVarient(item)} + style={selectedStyle(item)} + > + {item} + + ))} +
+
+ {isKenburns ? (
+
+
+ );
+}
diff --git a/frontend/src/pages/components/animate/views/background/index.tsx b/frontend/src/pages/components/animate/views/background/index.tsx
new file mode 100644
index 0000000..63b0e06
--- /dev/null
+++ b/frontend/src/pages/components/animate/views/background/index.tsx
@@ -0,0 +1,55 @@
+import { Card, Row, Col } from 'antd';
+import { useMemo, useState } from 'react';
+
+import ControlPanel from '../../control-panel';
+
+import ContainerView from './container';
+import Toolbar from './toolbar';
+
+export default function BackgroundView() {
+ const defaultValue = useMemo(() => {
+ return {
+ selectedVariant: 'kenburnsTop',
+ };
+ }, []);
+ const [selectedVariant, setSelectedVariant] = useState(defaultValue.selectedVariant);
+
+ const onRefresh = () => {
+ setSelectedVariant(defaultValue.selectedVariant);
+ };
+ return (
+
+
+ );
+}
diff --git a/frontend/src/pages/components/animate/views/inview/container.tsx b/frontend/src/pages/components/animate/views/inview/container.tsx
new file mode 100644
index 0000000..ecf805b
--- /dev/null
+++ b/frontend/src/pages/components/animate/views/inview/container.tsx
@@ -0,0 +1,55 @@
+import { m } from 'framer-motion';
+import { repeat } from 'ramda';
+import { useMemo } from 'react';
+
+import Cover3 from '@/assets/images/cover/cover_3.jpg';
+import MotionContainer from '@/components/animate/motion-container';
+import { getVariant } from '@/components/animate/variants';
+import { useThemeToken } from '@/theme/hooks';
+
+const TEXT = 'SlashAdmin';
+type Props = {
+ isText: boolean;
+ isMulti: boolean;
+ variant: string;
+};
+export default function ContainerView({ isText, variant, isMulti }: Props) {
+ const { colorBgLayout } = useThemeToken();
+ const varients = useMemo(() => getVariant(variant), [variant]);
+ const imgs = useMemo(() => (isMulti ? repeat(Cover3, 5) : [Cover3]), [isMulti]);
+
+ return (
+
+ {isText ? (
+
+ {TEXT.split('').map((letter, index) => (
+
+ {letter}
+
+ ))}
+
+ ) : (
+
+ {imgs.map((img, index) => (
+
+ )}
+
+ );
+}
diff --git a/frontend/src/pages/components/animate/views/inview/index.tsx b/frontend/src/pages/components/animate/views/inview/index.tsx
new file mode 100644
index 0000000..89c120c
--- /dev/null
+++ b/frontend/src/pages/components/animate/views/inview/index.tsx
@@ -0,0 +1,115 @@
+import { Card, Col, Row } from 'antd';
+import { useMemo, useState } from 'react';
+
+import ControlPanel from '../../control-panel';
+
+import ContainerView from './container';
+import Toolbar from './toolbar';
+
+const variantKey = [
+ {
+ type: 'slide in',
+ values: ['slideInUp', 'slideInDown', 'slideInLeft', 'slideInRight'],
+ },
+ {
+ type: 'slide out',
+ values: ['slideOutUp', 'slideOutDown', 'slideOutLeft', 'slideOutRight'],
+ },
+ {
+ type: 'fade in',
+ values: ['fadeIn', 'fadeInUp', 'fadeInDown', 'fadeInLeft', 'fadeInRight'],
+ },
+ {
+ type: 'fade out',
+ values: ['fadeOut', 'fadeOutUp', 'fadeOutDown', 'fadeOutLeft', 'fadeOutRight'],
+ },
+ {
+ type: 'zoom in',
+ values: ['zoomIn', 'zoomInUp', 'zoomInDown', 'zoomInLeft', 'zoomInRight'],
+ },
+ {
+ type: 'zoom out',
+ values: ['zoomOut', 'zoomOutUp', 'zoomOutDown', 'zoomOutLeft', 'zoomOutRight'],
+ },
+ {
+ type: 'bounce in',
+ values: ['bounceIn', 'bounceInUp', 'bounceInDown', 'bounceInLeft', 'bounceInRight'],
+ },
+ {
+ type: 'bounce out',
+ values: ['bounceOut', 'bounceOutUp', 'bounceOutDown', 'bounceOutLeft', 'bounceOutRight'],
+ },
+ {
+ type: 'flip in',
+ values: ['flipInX', 'flipInY'],
+ },
+ {
+ type: 'flip out',
+ values: ['flipOutX', 'flipOutY'],
+ },
+ {
+ type: 'scale in',
+ values: ['scaleInX', 'scaleInY'],
+ },
+ {
+ type: 'scale out',
+ values: ['scaleOutX', 'scaleOutY'],
+ },
+ {
+ type: 'rotate in',
+ values: ['rotateIn'],
+ },
+ {
+ type: 'rotate out',
+ values: ['rotateOut'],
+ },
+];
+
+export default function Inview() {
+ const defaultValue = useMemo(() => {
+ return {
+ isText: false,
+ isMulti: false,
+ selectedVariant: 'slideInUp',
+ };
+ }, []);
+
+ const [isText, setIsText] = useState(defaultValue.isText);
+ const [isMulti, setIsMulti] = useState(defaultValue.isMulti);
+
+ const [selectedVariant, setSelectedVariant] = useState(defaultValue.selectedVariant);
+
+ const onRefresh = () => {
+ setIsText(defaultValue.isText);
+ setIsMulti(defaultValue.isMulti);
+ setSelectedVariant(defaultValue.selectedVariant);
+ };
+
+ return (
+
+
+ );
+}
diff --git a/frontend/src/pages/components/animate/views/scroll/container.tsx b/frontend/src/pages/components/animate/views/scroll/container.tsx
new file mode 100644
index 0000000..56c2626
--- /dev/null
+++ b/frontend/src/pages/components/animate/views/scroll/container.tsx
@@ -0,0 +1,30 @@
+import { Card, Typography } from 'antd';
+import { useMemo } from 'react';
+
+import MotionViewport from '@/components/animate/motion-viewport';
+import { getVariant } from '@/components/animate/variants';
+import { useThemeToken } from '@/theme/hooks';
+
+type Props = {
+ variant: string;
+};
+export default function ContainerView({ variant }: Props) {
+ const { colorBgLayout } = useThemeToken();
+ const varients = useMemo(() => getVariant(variant), [variant]);
+
+ return (
+
+
+
+ {isText ? null : (
+
+
+
+ )}
+
+ {[...Array(40)].map((_, index) => (
+
+
+ Item {index + 1}
+
+
+ ))}
+
+ );
+}
diff --git a/frontend/src/pages/components/animate/views/scroll/index.tsx b/frontend/src/pages/components/animate/views/scroll/index.tsx
new file mode 100644
index 0000000..a99de34
--- /dev/null
+++ b/frontend/src/pages/components/animate/views/scroll/index.tsx
@@ -0,0 +1,72 @@
+import { Card, Row, Col } from 'antd';
+import { useMemo, useState } from 'react';
+
+import ControlPanel from '../../control-panel';
+
+import ContainerView from './container';
+import Toolbar from './toolbar';
+
+export default function ScrollView() {
+ const defaultValue = useMemo(() => {
+ return {
+ selectedVariant: 'slideInUp',
+ };
+ }, []);
+ const [selectedVariant, setSelectedVariant] = useState(defaultValue.selectedVariant);
+
+ const onRefresh = () => {
+ setSelectedVariant(defaultValue.selectedVariant);
+ };
+ return (
+
+
+ );
+}
diff --git a/frontend/src/pages/components/chart/index.tsx b/frontend/src/pages/components/chart/index.tsx
new file mode 100644
index 0000000..29f6633
--- /dev/null
+++ b/frontend/src/pages/components/chart/index.tsx
@@ -0,0 +1,99 @@
+import { Card, Col, Row, Typography } from 'antd';
+
+import { useThemeToken } from '@/theme/hooks';
+
+import ChartArea from './view/chart-area';
+import ChartBar from './view/chart-bar';
+import ChartColumnMultiple from './view/chart-column-multiple';
+import ChartColumnNegative from './view/chart-column-negative';
+import ChartColumnSingle from './view/chart-column-single';
+import ChartColumnStacked from './view/chart-column-Stacked';
+import ChartDonut from './view/chart-donut';
+import ChartLine from './view/chart-line';
+import ChartMixed from './view/chart-mixed';
+import ChartPie from './view/chart-pie';
+import ChartRadar from './view/chart-radar';
+import ChartRadial from './view/chart-radial';
+
+export default function ChartPage() {
+ const { colorPrimary } = useThemeToken();
+ return (
+ <>
+
+ {`import { StepBackwardOutlined } from '@ant-design/icons';`}
+ {`
+
+
+
+ {`
+
+
+
+ {`
+
+
+ + +## h2 + +
+ +**Paragraph** Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. + +
+ +[Link (https://www.google.com/)](https://www.google.com/) + +
+ +###### Lists + +
+ +- [x] Write the press release +- [ ] Update the website +- [ ] Contact the media + +
+ +--- + +
+ +###### A table: + +
+ +| Syntax | Description | Test Text | +| :--- | :----: | ---: | +| Header | Title | Here's this | +| Paragraph | Text | And more | + +
+ +\`\`\`tsx +import React from 'react'; +import ReactDOM from 'react-dom'; +import ReactMarkdown from 'react-markdown'; +import rehypeHighlight from 'rehype-highlight'; + +ReactDOM.render( +
+ + + +> A block quote with ~~strikethrough~~ and a URL: [https://reactjs.org](https://reactjs.org). + +`; + +export default function MarkdownPage() { + const [content] = useState(TEXT); + const { colorPrimary } = useThemeToken(); + return ( + <> +
+
+
+
+ Upload File
+
+
+ );
+ const UploadFileTab = (
+
+
+ {t('common.welcomeBack')}
+PandoraNext Helper
++ {t('common.desc')} +
+ + + +
+
+
+
+ No permission
+
+
+
+
+
+ The page you are trying access has restricted access. Please refer to your system
+ administrator
+
+
+
+
+
+
+
+
+ Go to Home
+
+
+
+
+ );
+}
diff --git a/frontend/src/pages/sys/error/Page404.tsx b/frontend/src/pages/sys/error/Page404.tsx
new file mode 100644
index 0000000..273ef63
--- /dev/null
+++ b/frontend/src/pages/sys/error/Page404.tsx
@@ -0,0 +1,120 @@
+import { Typography } from 'antd';
+import { m } from 'framer-motion';
+import { Helmet } from 'react-helmet-async';
+import { NavLink } from 'react-router-dom';
+
+import Character6 from '@/assets/images/characters/character_6.png';
+import MotionContainer from '@/components/animate/motion-container';
+import { varBounce } from '@/components/animate/variants/bounce';
+import { useThemeToken } from '@/theme/hooks';
+
+const { VITE_APP_HOMEPAGE: HOMEPAGE } = import.meta.env;
+
+export default function Page404() {
+ const {
+ colorBgBase,
+ colorTextBase,
+ colorPrimary,
+ colorPrimaryActive,
+ colorPrimaryTextActive,
+ colorPrimaryHover,
+ } = useThemeToken();
+ return (
+ <>
+
+
+
+
+ Sorry, Page Not Found!
+
+
+
+
+
+ Sorry, we couldn’t find the page you’re looking for. Perhaps you’ve mistyped the URL?
+ Be sure to check your spelling.
+
+
+
+
+
+
+
+
+ Go to Home
+
+
+
+
+ );
+}
diff --git a/frontend/src/pages/sys/error/Page500.tsx b/frontend/src/pages/sys/error/Page500.tsx
new file mode 100644
index 0000000..7e58ebe
--- /dev/null
+++ b/frontend/src/pages/sys/error/Page500.tsx
@@ -0,0 +1,161 @@
+import { Typography } from 'antd';
+import { m } from 'framer-motion';
+import { Helmet } from 'react-helmet-async';
+import { NavLink } from 'react-router-dom';
+
+import Character8 from '@/assets/images/characters/character_8.png';
+import MotionContainer from '@/components/animate/motion-container';
+import { varBounce } from '@/components/animate/variants/bounce';
+import { useThemeToken } from '@/theme/hooks';
+
+const { VITE_APP_HOMEPAGE: HOMEPAGE } = import.meta.env;
+
+export default function Page() {
+ const { colorBgBase, colorTextBase, colorPrimary } = useThemeToken();
+ return (
+ <>
+
+
+
+
+ 500 Internal Server Error
+
+
+
+
+
+ There was an error, please try again later.
+
+
+
+
+
+
+
+
+ Go to Home
+
+
+
+
+ );
+}
diff --git a/frontend/src/pages/sys/login/Login.tsx b/frontend/src/pages/sys/login/Login.tsx
new file mode 100644
index 0000000..204199f
--- /dev/null
+++ b/frontend/src/pages/sys/login/Login.tsx
@@ -0,0 +1,60 @@
+import {Layout, Typography} from 'antd';
+import Color from 'color';
+import {useTranslation} from 'react-i18next';
+import {Navigate} from 'react-router-dom';
+
+import DashboardImg from '@/assets/images/background/dashboard.png';
+import Overlay2 from '@/assets/images/background/overlay_2.jpg';
+import LocalePicker from '@/components/locale-picker';
+import {useUserToken} from '@/store/userStore';
+import {useThemeToken} from '@/theme/hooks';
+
+import LoginForm from './LoginForm';
+import {LoginStateProvider} from './providers/LoginStateProvider';
+import {getItem} from "@/utils/storage.ts";
+import {StorageEnum} from "#/enum.ts";
+
+const { VITE_APP_HOMEPAGE: HOMEPAGE } = import.meta.env;
+
+function Login() {
+ const { t } = useTranslation();
+ const token = useUserToken();
+ const { colorBgElevated } = useThemeToken();
+
+ // 判断用户是否有权限
+ if (token.accessToken && getItem(StorageEnum.Token)) {
+ // 如果有授权，则跳转到首页
+ return
+ 
+
+ {t('sys.login.signInSecondTitle')}
+
+
+
+ PandoraNext Helper
+
+
+
+
+
+
+
+ {t('sys.login.signInFormTitle')}
+
+
+ );
+}
+
+export default LoginForm;
diff --git a/frontend/src/pages/sys/login/components/ReturnButton.tsx b/frontend/src/pages/sys/login/components/ReturnButton.tsx
new file mode 100644
index 0000000..0c5a09b
--- /dev/null
+++ b/frontend/src/pages/sys/login/components/ReturnButton.tsx
@@ -0,0 +1,18 @@
+import { Button } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { MdArrowBackIosNew } from 'react-icons/md';
+
+interface ReturnButtonProps {
+ onClick?: () => void;
+}
+export function ReturnButton({ onClick }: ReturnButtonProps) {
+ const { t } = useTranslation();
+ return (
+
+ );
+}
diff --git a/frontend/src/pages/sys/login/providers/LoginStateProvider.tsx b/frontend/src/pages/sys/login/providers/LoginStateProvider.tsx
new file mode 100644
index 0000000..a8f14e8
--- /dev/null
+++ b/frontend/src/pages/sys/login/providers/LoginStateProvider.tsx
@@ -0,0 +1,39 @@
+import { PropsWithChildren, createContext, useContext, useMemo, useState } from 'react';
+
+export enum LoginStateEnum {
+ LOGIN,
+ REGISTER,
+ RESET_PASSWORD,
+ MOBILE,
+ QR_CODE,
+}
+
+interface LoginStateContextType {
+ loginState: LoginStateEnum;
+ setLoginState: (loginState: LoginStateEnum) => void;
+ backToLogin: () => void;
+}
+const LoginStateContext = createContext