From 2d1eb8d9e231515ead26f75c94d996c8c6bd7eb5 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Sun, 15 Oct 2023 16:46:35 +0800 Subject: [PATCH 001/192] Optimize remove token --- src/services/index.tsx | 14 ++++++++++++-- src/utils/auth.ts | 5 ++--- src/utils/common.ts | 1 + 3 files changed, 15 insertions(+), 5 deletions(-) diff --git a/src/services/index.tsx b/src/services/index.tsx index 3d3a308..8aca097 100644 --- a/src/services/index.tsx +++ b/src/services/index.tsx @@ -1,6 +1,6 @@ import axios, { type AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios' import jwtDecode, { JwtPayload } from 'jwt-decode' -import { clearLocalStorage, getToken, setToken } from '@/utils/common' +import { getToken, removeToken, setToken } from '@/utils/common' import { SYSTEM_ACCESS_DENIED, SYSTEM_TOKEN_HAS_EXPIRED, @@ -66,9 +66,19 @@ service.interceptors.response.use( (response: AxiosResponse<_Response>) => { switch (response.data.code) { case SYSTEM_UNAUTHORIZED: + removeToken() + void message.error( + <> + 未登录 + + ) + setTimeout(() => { + location.reload() + }, 1500) + throw response?.data case SYSTEM_TOKEN_ILLEGAL: case SYSTEM_TOKEN_HAS_EXPIRED: - clearLocalStorage() + removeToken() void message.error( <> 登录已过期 diff --git a/src/utils/auth.ts b/src/utils/auth.ts index aa3fc82..c2f3155 100644 --- a/src/utils/auth.ts +++ b/src/utils/auth.ts @@ -1,4 +1,4 @@ -import { getCaptcha, getLocalStorage, removeLocalStorage, setLocalStorage } from './common' +import { getCaptcha, getLocalStorage, removeToken, setLocalStorage } from './common' import { SYSTEM_OK, TOKEN_NAME } from '@/constants/Common.constants' import request from '@/services' @@ -13,8 +13,7 @@ export const login = async (username: string, password: string) => { export const logout = async () => { return request.post('/logout').finally(() => { - removeLocalStorage('userInfo') - removeLocalStorage(TOKEN_NAME) + removeToken() }) } diff --git a/src/utils/common.ts b/src/utils/common.ts index 04d1244..c74b23e 100644 --- a/src/utils/common.ts +++ b/src/utils/common.ts @@ -69,6 +69,7 @@ export const removeLocalStorage = (name: string) => { } export const removeToken = () => { + removeLocalStorage('userInfo') removeLocalStorage(TOKEN_NAME) } -- 2.49.1 From 2af3219e593cd150fe14c4762de6de577c2d9082 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Sun, 15 Oct 2023 18:16:30 +0800 Subject: [PATCH 002/192] Optimize code --- src/AuthRoute.tsx | 6 +-- src/components/common/LoadingMask.tsx | 2 +- src/constants/Common.constants.ts | 67 --------------------------- src/constants/common.constants.ts | 35 ++++++++++++++ src/constants/urls.constants.ts | 3 ++ src/pages/HomeFramework.tsx | 2 +- src/pages/Login.tsx | 6 +-- src/pages/ToolsFramework.tsx | 8 ++-- src/services/index.tsx | 2 +- src/utils/auth.ts | 15 +++--- src/utils/common.ts | 10 ++-- 11 files changed, 64 insertions(+), 92 deletions(-) delete mode 100644 src/constants/Common.constants.ts create mode 100644 src/constants/common.constants.ts create mode 100644 src/constants/urls.constants.ts diff --git a/src/AuthRoute.tsx b/src/AuthRoute.tsx index 35b6a77..c3e3cda 100644 --- a/src/AuthRoute.tsx +++ b/src/AuthRoute.tsx @@ -1,6 +1,6 @@ -import { getLoginStatus } from '@/utils/auth.ts' -import { PRODUCTION_NAME } from '@/constants/Common.constants.ts' -import { getRedirectUrl } from '@/utils/common.ts' +import { getLoginStatus } from '@/utils/auth' +import { PRODUCTION_NAME } from '@/constants/common.constants' +import { getRedirectUrl } from '@/utils/common' const AuthRoute = () => { const matches = useMatches() diff --git a/src/components/common/LoadingMask.tsx b/src/components/common/LoadingMask.tsx index 84c09e8..86d2548 100644 --- a/src/components/common/LoadingMask.tsx +++ b/src/components/common/LoadingMask.tsx @@ -2,7 +2,7 @@ import React from 'react' import Icon from '@ant-design/icons' import '@/assets/css/components/common/loading-mask.scss' import FitFullScreen from '@/components/common/FitFullScreen' -import { COLOR_FONT_MAIN } from '@/constants/Common.constants' +import { COLOR_FONT_MAIN } from '@/constants/common.constants' const LoadingMask: React.FC = () => { const loadingIcon = ( diff --git a/src/constants/Common.constants.ts b/src/constants/Common.constants.ts deleted file mode 100644 index d7b32ad..0000000 --- a/src/constants/Common.constants.ts +++ /dev/null @@ -1,67 +0,0 @@ -const PRODUCTION_NAME = 'FatWeb' -const TOKEN_NAME = 'JWT_TOKEN' -const COLOR_PRODUCTION = '#00D4FF' -const COLOR_BACKGROUND = '#F5F5F5' -const COLOR_TOP = 'rgba(234,46,13,0.85)' -const COLOR_FONT_MAIN = '#4D4D4D' -const COLOR_FONT_SECONDARY = '#9E9E9E' -const SIZE_ICON_XS = '16px' -const SIZE_ICON_SM = '20px' -const SIZE_ICON_MD = '24px' -const SIZE_ICON_LG = '32px' -const SIZE_ICON_XL = '64px' - -/** - * Response code - */ -const SYSTEM_OK = 10000 -const SYSTEM_LOGIN_SUCCESS = 10020 -const SYSTEM_PASSWORD_CHANGE_SUCCESS = 10021 -const SYSTEM_LOGOUT_SUCCESS = 10022 -const SYSTEM_TOKEN_RENEW_SUCCESS = 10023 -const SYSTEM_UNAUTHORIZED = 10030 -const SYSTEM_USERNAME_NOT_FOUND = 10031 -const SYSTEM_ACCESS_DENIED = 10032 -const SYSTEM_USER_DISABLE = 10033 -const SYSTEM_LOGIN_USERNAME_PASSWORD_ERROR = 10034 -const SYSTEM_OLD_PASSWORD_NOT_MATCH = 10035 -const SYSTEM_LOGOUT_FAILED = 10036 -const SYSTEM_TOKEN_ILLEGAL = 10037 -const SYSTEM_TOKEN_HAS_EXPIRED = 10038 -const SYSTEM_REQUEST_ILLEGAL = 10040 -const SYSTEM_ARGUMENT_NOT_VALID = 10041 -const SYSTEM_ERROR = 10050 -const SYSTEM_TIMEOUT = 10051 - -export { - PRODUCTION_NAME, - TOKEN_NAME, - COLOR_PRODUCTION, - COLOR_BACKGROUND, - COLOR_FONT_MAIN, - COLOR_FONT_SECONDARY, - COLOR_TOP, - SIZE_ICON_XS, - SIZE_ICON_SM, - SIZE_ICON_MD, - SIZE_ICON_LG, - SIZE_ICON_XL, - SYSTEM_OK, - SYSTEM_LOGIN_SUCCESS, - SYSTEM_PASSWORD_CHANGE_SUCCESS, - SYSTEM_LOGOUT_SUCCESS, - SYSTEM_TOKEN_RENEW_SUCCESS, - SYSTEM_UNAUTHORIZED, - SYSTEM_USERNAME_NOT_FOUND, - SYSTEM_ACCESS_DENIED, - SYSTEM_USER_DISABLE, - SYSTEM_LOGIN_USERNAME_PASSWORD_ERROR, - SYSTEM_OLD_PASSWORD_NOT_MATCH, - SYSTEM_LOGOUT_FAILED, - SYSTEM_TOKEN_ILLEGAL, - SYSTEM_TOKEN_HAS_EXPIRED, - SYSTEM_REQUEST_ILLEGAL, - SYSTEM_ARGUMENT_NOT_VALID, - SYSTEM_ERROR, - SYSTEM_TIMEOUT -} diff --git a/src/constants/common.constants.ts b/src/constants/common.constants.ts new file mode 100644 index 0000000..6ca7f6a --- /dev/null +++ b/src/constants/common.constants.ts @@ -0,0 +1,35 @@ +export const PRODUCTION_NAME = 'FatWeb' +export const STORAGE_TOKEN_KEY = 'JWT_TOKEN' +export const STORAGE_USER_INFO_KEY = 'USER_INFO' +export const COLOR_PRODUCTION = '#00D4FF' +export const COLOR_BACKGROUND = '#F5F5F5' +export const COLOR_TOP = 'rgba(234,46,13,0.85)' +export const COLOR_FONT_MAIN = '#4D4D4D' +export const COLOR_FONT_SECONDARY = '#9E9E9E' +export const SIZE_ICON_XS = '16px' +export const SIZE_ICON_SM = '20px' +export const SIZE_ICON_MD = '24px' +export const SIZE_ICON_LG = '32px' +export const SIZE_ICON_XL = '64px' + +/** + * Response code + */ +export const SYSTEM_OK = 10000 +export const SYSTEM_LOGIN_SUCCESS = 10020 +export const SYSTEM_PASSWORD_CHANGE_SUCCESS = 10021 +export const SYSTEM_LOGOUT_SUCCESS = 10022 +export const SYSTEM_TOKEN_RENEW_SUCCESS = 10023 +export const SYSTEM_UNAUTHORIZED = 10030 +export const SYSTEM_USERNAME_NOT_FOUND = 10031 +export const SYSTEM_ACCESS_DENIED = 10032 +export const SYSTEM_USER_DISABLE = 10033 +export const SYSTEM_LOGIN_USERNAME_PASSWORD_ERROR = 10034 +export const SYSTEM_OLD_PASSWORD_NOT_MATCH = 10035 +export const SYSTEM_LOGOUT_FAILED = 10036 +export const SYSTEM_TOKEN_ILLEGAL = 10037 +export const SYSTEM_TOKEN_HAS_EXPIRED = 10038 +export const SYSTEM_REQUEST_ILLEGAL = 10040 +export const SYSTEM_ARGUMENT_NOT_VALID = 10041 +export const SYSTEM_ERROR = 10050 +export const SYSTEM_TIMEOUT = 10051 diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts new file mode 100644 index 0000000..d9cd425 --- /dev/null +++ b/src/constants/urls.constants.ts @@ -0,0 +1,3 @@ +export const URL_API_LOGIN = '/login' +export const URL_API_TOKEN = '/token' +export const URL_API_LOGOUT = '/logout' diff --git a/src/pages/HomeFramework.tsx b/src/pages/HomeFramework.tsx index 56993c1..c09e00d 100644 --- a/src/pages/HomeFramework.tsx +++ b/src/pages/HomeFramework.tsx @@ -4,7 +4,7 @@ import router from '@/router' import LoadingMask from '@/components/common/LoadingMask' import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar' import Icon from '@ant-design/icons' -import { COLOR_FONT_SECONDARY } from '@/constants/Common.constants.ts' +import { COLOR_FONT_SECONDARY } from '@/constants/common.constants' import { NavLink } from 'react-router-dom' export const HomeFrameworkContext = createContext<{ diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index 92a8bac..e4cb933 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -1,12 +1,12 @@ import React from 'react' -import { login } from '@/utils/auth.ts' +import { login } from '@/utils/auth' import { SYSTEM_LOGIN_SUCCESS, SYSTEM_LOGIN_USERNAME_PASSWORD_ERROR, SYSTEM_USER_DISABLE, SYSTEM_USERNAME_NOT_FOUND -} from '@/constants/Common.constants.ts' -import { setToken } from '@/utils/common.ts' +} from '@/constants/common.constants' +import { setToken } from '@/utils/common' import '@/assets/css/pages/login.scss' const Login: React.FC = () => { diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx index c386c86..ebaa939 100644 --- a/src/pages/ToolsFramework.tsx +++ b/src/pages/ToolsFramework.tsx @@ -2,10 +2,10 @@ import React from 'react' import FitFullScreen from '@/components/common/FitFullScreen' import '@/assets/css/pages/tools-framework.scss' import Icon from '@ant-design/icons' -import { toolsJsonObjects } from '@/router/tools.tsx' -import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar.tsx' -import { getLocalStorage, getRedirectUrl, setLocalStorage } from '@/utils/common.ts' -import { getLoginStatus, logout } from '@/utils/auth.ts' +import { toolsJsonObjects } from '@/router/tools' +import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar' +import { getLocalStorage, getRedirectUrl, setLocalStorage } from '@/utils/common' +import { getLoginStatus, logout } from '@/utils/auth' import { NavLink, Outlet } from 'react-router-dom' const ToolsFramework: React.FC = () => { diff --git a/src/services/index.tsx b/src/services/index.tsx index 8aca097..8106e18 100644 --- a/src/services/index.tsx +++ b/src/services/index.tsx @@ -7,7 +7,7 @@ import { SYSTEM_TOKEN_ILLEGAL, SYSTEM_TOKEN_RENEW_SUCCESS, SYSTEM_UNAUTHORIZED -} from '@/constants/Common.constants' +} from '@/constants/common.constants' import { message } from 'antd' const service: AxiosInstance = axios.create({ diff --git a/src/utils/auth.ts b/src/utils/auth.ts index c2f3155..f58a9ac 100644 --- a/src/utils/auth.ts +++ b/src/utils/auth.ts @@ -1,30 +1,31 @@ import { getCaptcha, getLocalStorage, removeToken, setLocalStorage } from './common' -import { SYSTEM_OK, TOKEN_NAME } from '@/constants/Common.constants' +import { SYSTEM_OK, STORAGE_TOKEN_KEY, STORAGE_USER_INFO_KEY } from '@/constants/common.constants' import request from '@/services' +import { URL_API_LOGIN, URL_API_LOGOUT } from '@/constants/urls.constants' let captcha: Captcha export const login = async (username: string, password: string) => { - return await request.post('/login', { + return await request.post(URL_API_LOGIN, { username, password }) } export const logout = async () => { - return request.post('/logout').finally(() => { + return request.post(URL_API_LOGOUT).finally(() => { removeToken() }) } export const getLoginStatus = () => { - return getLocalStorage(TOKEN_NAME) !== null + return getLocalStorage(STORAGE_TOKEN_KEY) !== null } export const getUser = async (): Promise => { - if (getLocalStorage('userInfo') !== null) { + if (getLocalStorage(STORAGE_USER_INFO_KEY) !== null) { return new Promise((resolve) => { - resolve(JSON.parse(getLocalStorage('userInfo') as string) as User) + resolve(JSON.parse(getLocalStorage(STORAGE_USER_INFO_KEY) as string) as User) }) } return requestUser() @@ -37,7 +38,7 @@ export const requestUser = async () => { const response = value.data if (response.code === SYSTEM_OK) { user = response.data - setLocalStorage('userInfo', JSON.stringify(user)) + setLocalStorage(STORAGE_USER_INFO_KEY, JSON.stringify(user)) } }) diff --git a/src/utils/common.ts b/src/utils/common.ts index c74b23e..ebae83a 100644 --- a/src/utils/common.ts +++ b/src/utils/common.ts @@ -1,4 +1,4 @@ -import { TOKEN_NAME } from '@/constants/Common.constants' +import { STORAGE_TOKEN_KEY, STORAGE_USER_INFO_KEY } from '@/constants/common.constants' export const getQueryVariable = (variable: string) => { const query = window.location.search.substring(1) @@ -36,7 +36,7 @@ export const setLocalStorage = (name: string, value: string) => { } export const setToken = (token: string) => { - setLocalStorage(TOKEN_NAME, token) + setLocalStorage(STORAGE_TOKEN_KEY, token) } export const getCookie = (name: string) => { @@ -57,7 +57,7 @@ export const getLocalStorage = (name: string) => { } export const getToken = () => { - return getLocalStorage(TOKEN_NAME) + return getLocalStorage(STORAGE_TOKEN_KEY) } export const removeCookie = (name: string) => { @@ -69,8 +69,8 @@ export const removeLocalStorage = (name: string) => { } export const removeToken = () => { - removeLocalStorage('userInfo') - removeLocalStorage(TOKEN_NAME) + removeLocalStorage(STORAGE_USER_INFO_KEY) + removeLocalStorage(STORAGE_TOKEN_KEY) } export const clearLocalStorage = () => { -- 2.49.1 From a0903274297edacd33dc92202fbc468eb22f91a7 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Mon, 16 Oct 2023 15:31:58 +0800 Subject: [PATCH 003/192] Add exit waiting to ToolsFramework --- src/pages/ToolsFramework.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx index ebaa939..c997eff 100644 --- a/src/pages/ToolsFramework.tsx +++ b/src/pages/ToolsFramework.tsx @@ -17,6 +17,7 @@ const ToolsFramework: React.FC = () => { const [submenuTop, setSubmenuTop] = useState(0) const [submenuLeft, setSubmenuLeft] = useState(0) const [hideSidebar, setHideSidebar] = useState(getLocalStorage('hideSidebar') === 'false') + const [exiting, setExiting] = useState(false) const switchSidebar = () => { setHideSidebar(!hideSidebar) @@ -52,6 +53,11 @@ const ToolsFramework: React.FC = () => { } const handleLogout = () => { + if (exiting) { + return + } + + setExiting(true) void logout().finally(() => { setTimeout(() => { window.location.reload() @@ -232,7 +238,10 @@ const ToolsFramework: React.FC = () => { className={'icon-exit'} onClick={handleLogout} > - + -- 2.49.1 From 75962aafc9721f3a9575152b533ad2d2519f8e1f Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Tue, 17 Oct 2023 11:32:39 +0800 Subject: [PATCH 004/192] Optimize router --- src/global.d.ts | 7 +-- src/pages/ToolsFramework.tsx | 16 +++---- src/router/home.tsx | 34 ++++++++++++++ src/router/index.tsx | 89 ++++++++++++++++-------------------- src/router/tools.tsx | 42 ++--------------- 5 files changed, 91 insertions(+), 97 deletions(-) create mode 100644 src/router/home.tsx diff --git a/src/global.d.ts b/src/global.d.ts index e64304b..36438e0 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -10,9 +10,10 @@ interface ImportMeta { readonly env: ImportMetaEnv } -type ToolsJsonObject = { +type RouteJsonObject = { path: string - id: string + id?: string + element?: React.JSX.Element component?: React.ComponentType name?: string titlePrefix?: string @@ -21,7 +22,7 @@ type ToolsJsonObject = { icon?: IconComponent menu?: boolean auth?: boolean - children?: ToolsJsonObject[] + children?: RouteJsonObject[] } type RouteHandle = { diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx index c997eff..27d51cc 100644 --- a/src/pages/ToolsFramework.tsx +++ b/src/pages/ToolsFramework.tsx @@ -2,7 +2,7 @@ import React from 'react' import FitFullScreen from '@/components/common/FitFullScreen' import '@/assets/css/pages/tools-framework.scss' import Icon from '@ant-design/icons' -import { toolsJsonObjects } from '@/router/tools' +import { tools } from '@/router/tools' import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar' import { getLocalStorage, getRedirectUrl, setLocalStorage } from '@/utils/common' import { getLoginStatus, logout } from '@/utils/auth' @@ -88,14 +88,14 @@ const ToolsFramework: React.FC = () => { } >
- {toolsJsonObjects[0].icon ? ( + {tools[0].icon ? ( ) : undefined}
- {toolsJsonObjects[0].name} + {tools[0].name} @@ -108,14 +108,14 @@ const ToolsFramework: React.FC = () => { } >
- {toolsJsonObjects[1].icon ? ( + {tools[1].icon ? ( ) : undefined}
- {toolsJsonObjects[1].name} + {tools[1].name} @@ -132,7 +132,7 @@ const ToolsFramework: React.FC = () => { ref={hideScrollbarRef} >
    - {toolsJsonObjects.map((tool) => { + {tools.map((tool) => { return tool.menu && tool.id !== 'tools' && tool.id !== 'tools-all' ? ( diff --git a/src/router/home.tsx b/src/router/home.tsx new file mode 100644 index 0000000..50792a6 --- /dev/null +++ b/src/router/home.tsx @@ -0,0 +1,34 @@ +import React from 'react' + +const home: RouteJsonObject[] = [ + { + path: '', + id: 'home', + component: React.lazy(() => import('@/pages/home')), + name: '主页', + menu: true, + auth: false + }, + { + path: 'https://blog.fatweb.top', + id: 'url-blog', + name: '博客', + menu: true + }, + { + path: '/tools', + id: 'url-tools', + children: [ + { + path: 'translation', + id: 'url-tools-translation', + name: '翻译', + menu: true + } + ], + name: '工具', + menu: true + } +] + +export default home diff --git a/src/router/index.tsx b/src/router/index.tsx index ea360d9..2259f62 100644 --- a/src/router/index.tsx +++ b/src/router/index.tsx @@ -1,74 +1,36 @@ import React from 'react' import tools from '@/router/tools' +import home from '@/router/home' -const routes: RouteObject[] = [ +const root: RouteJsonObject[] = [ { path: '/', - Component: React.lazy(() => import('@/AuthRoute')), + component: React.lazy(() => import('@/AuthRoute')), children: [ { path: '/login', id: 'login', - Component: React.lazy(() => import('@/pages/Login')) + component: React.lazy(() => import('@/pages/Login')) }, { path: '/loading', id: 'loading', - Component: React.lazy(() => import('@/components/common/LoadingMask')) + component: React.lazy(() => import('@/components/common/LoadingMask')) }, { path: '/tools', id: 'toolsFramework', - Component: React.lazy(() => import('@/pages/ToolsFramework')), + component: React.lazy(() => import('@/pages/ToolsFramework')), children: tools, - handle: { - name: '工具', - title: '工具', - auth: false - } + name: '工具', + title: '工具', + auth: false }, { path: '', id: 'homeFramework', - Component: React.lazy(() => import('@/pages/HomeFramework')), - children: [ - { - path: '', - id: 'home', - Component: React.lazy(() => import('@/pages/home')), - handle: { - name: '主页', - menu: true, - auth: false - } - }, - { - path: 'https://blog.fatweb.top', - id: 'url-blog', - handle: { - name: '博客', - menu: true - } - }, - { - path: '/tools', - id: 'url-tools', - children: [ - { - path: 'translation', - id: 'url-tools-translation', - handle: { - name: '翻译', - menu: true - } - } - ], - handle: { - name: '工具', - menu: true - } - } - ] + component: React.lazy(() => import('@/pages/HomeFramework')), + children: home }, { path: '*', @@ -78,5 +40,34 @@ const routes: RouteObject[] = [ } ] +const mapJsonToRoute = (jsonObject: RouteJsonObject[]): RouteObject[] => { + return jsonObject.map((value) => ({ + path: value.path, + id: value.id, + element: value.element, + Component: value.component, + handle: { + name: value.name, + titlePrefix: value.titlePrefix, + title: value.title, + titlePostfix: value.titlePostfix, + icon: value.icon, + menu: value.menu, + auth: value.auth + }, + children: + value.children && + mapJsonToRoute(value.children).map((sub) => { + const handle = sub.handle as RouteHandle + if (!handle.title) { + handle.title = value.title + } + return sub + }) + })) +} + +const routes = mapJsonToRoute(root) + const router = createBrowserRouter(routes) export default router diff --git a/src/router/tools.tsx b/src/router/tools.tsx index 997809a..89a38ff 100644 --- a/src/router/tools.tsx +++ b/src/router/tools.tsx @@ -1,8 +1,6 @@ import React from 'react' -const defaultTitle = '氮工具' - -export const toolsJsonObjects: ToolsJsonObject[] = [ +export const tools: RouteJsonObject[] = [ { path: '', id: 'tools', @@ -277,41 +275,11 @@ export const toolsJsonObjects: ToolsJsonObject[] = [ auth: false } ] + }, + { + path: '*', + element: } ] -const tools: RouteObject[] = toolsJsonObjects.map((value) => ({ - path: value.path, - id: value.id, - Component: value.component, - handle: { - name: value.name, - titlePrefix: value.titlePrefix, - title: value.title ?? defaultTitle, - titlePostfix: value.titlePostfix, - icon: value.icon, - menu: value.menu, - auth: value.auth - }, - children: value.children?.map((value) => ({ - path: value.path, - id: value.id, - Component: value.component, - handle: { - name: value.name, - titlePrefix: value.titlePrefix, - title: value.title ?? defaultTitle, - titlePostfix: value.titlePostfix, - icon: value.icon, - menu: value.menu, - auth: value.auth - } - })) -})) - -tools.push({ - path: '*', - element: -}) - export default tools -- 2.49.1 From 21450cc753157fdb2bf84720076d4e5e30366be2 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Tue, 17 Oct 2023 11:49:57 +0800 Subject: [PATCH 005/192] Optimize router --- src/router/index.tsx | 60 +++++++++++++++++++++++--------------------- 1 file changed, 31 insertions(+), 29 deletions(-) diff --git a/src/router/index.tsx b/src/router/index.tsx index 2259f62..da0ff94 100644 --- a/src/router/index.tsx +++ b/src/router/index.tsx @@ -2,6 +2,36 @@ import React from 'react' import tools from '@/router/tools' import home from '@/router/home' +const mapJsonToRoute = (jsonObject: RouteJsonObject[]): RouteObject[] => { + return jsonObject.map((value) => ({ + path: value.path, + id: value.id, + element: value.element, + Component: value.component, + handle: { + name: value.name, + titlePrefix: value.titlePrefix, + title: value.title, + titlePostfix: value.titlePostfix, + icon: value.icon, + menu: value.menu, + auth: value.auth + }, + children: value.children && mapJsonToRoute(value.children) + })) +} + +const setTitle = (jsonObject: RouteJsonObject[], title: string): RouteJsonObject[] => { + return jsonObject.map((value) => { + if (!value.title) { + value.title = title + } + value.children && setTitle(value.children, title) + + return value + }) +} + const root: RouteJsonObject[] = [ { path: '/', @@ -21,9 +51,8 @@ const root: RouteJsonObject[] = [ path: '/tools', id: 'toolsFramework', component: React.lazy(() => import('@/pages/ToolsFramework')), - children: tools, + children: setTitle(tools, '氮工具'), name: '工具', - title: '工具', auth: false }, { @@ -40,33 +69,6 @@ const root: RouteJsonObject[] = [ } ] -const mapJsonToRoute = (jsonObject: RouteJsonObject[]): RouteObject[] => { - return jsonObject.map((value) => ({ - path: value.path, - id: value.id, - element: value.element, - Component: value.component, - handle: { - name: value.name, - titlePrefix: value.titlePrefix, - title: value.title, - titlePostfix: value.titlePostfix, - icon: value.icon, - menu: value.menu, - auth: value.auth - }, - children: - value.children && - mapJsonToRoute(value.children).map((sub) => { - const handle = sub.handle as RouteHandle - if (!handle.title) { - handle.title = value.title - } - return sub - }) - })) -} - const routes = mapJsonToRoute(root) const router = createBrowserRouter(routes) -- 2.49.1 From 491fb75be8a0038fdba69b07eddf8c09ba06e56c Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Tue, 17 Oct 2023 17:42:34 +0800 Subject: [PATCH 006/192] Optimize import --- src/AuthRoute.tsx | 2 +- src/pages/HomeFramework.tsx | 7 +++---- src/pages/Login.tsx | 4 ++-- src/services/index.tsx | 2 +- 4 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/AuthRoute.tsx b/src/AuthRoute.tsx index c3e3cda..c131a0b 100644 --- a/src/AuthRoute.tsx +++ b/src/AuthRoute.tsx @@ -1,5 +1,5 @@ -import { getLoginStatus } from '@/utils/auth' import { PRODUCTION_NAME } from '@/constants/common.constants' +import { getLoginStatus } from '@/utils/auth' import { getRedirectUrl } from '@/utils/common' const AuthRoute = () => { diff --git a/src/pages/HomeFramework.tsx b/src/pages/HomeFramework.tsx index c09e00d..b16e2ec 100644 --- a/src/pages/HomeFramework.tsx +++ b/src/pages/HomeFramework.tsx @@ -1,11 +1,10 @@ import React from 'react' -import '@/assets/css/pages/home-framework.scss' +import Icon from '@ant-design/icons' import router from '@/router' +import { COLOR_FONT_SECONDARY } from '@/constants/common.constants' +import '@/assets/css/pages/home-framework.scss' import LoadingMask from '@/components/common/LoadingMask' import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar' -import Icon from '@ant-design/icons' -import { COLOR_FONT_SECONDARY } from '@/constants/common.constants' -import { NavLink } from 'react-router-dom' export const HomeFrameworkContext = createContext<{ navbarHiddenState: { diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index e4cb933..0efc6a7 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -1,13 +1,13 @@ import React from 'react' -import { login } from '@/utils/auth' import { SYSTEM_LOGIN_SUCCESS, SYSTEM_LOGIN_USERNAME_PASSWORD_ERROR, SYSTEM_USER_DISABLE, SYSTEM_USERNAME_NOT_FOUND } from '@/constants/common.constants' -import { setToken } from '@/utils/common' import '@/assets/css/pages/login.scss' +import { setToken } from '@/utils/common' +import { login } from '@/utils/auth' const Login: React.FC = () => { const [messageApi, contextHolder] = message.useMessage() diff --git a/src/services/index.tsx b/src/services/index.tsx index 8106e18..d509f81 100644 --- a/src/services/index.tsx +++ b/src/services/index.tsx @@ -1,5 +1,6 @@ import axios, { type AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios' import jwtDecode, { JwtPayload } from 'jwt-decode' +import { message } from 'antd' import { getToken, removeToken, setToken } from '@/utils/common' import { SYSTEM_ACCESS_DENIED, @@ -8,7 +9,6 @@ import { SYSTEM_TOKEN_RENEW_SUCCESS, SYSTEM_UNAUTHORIZED } from '@/constants/common.constants' -import { message } from 'antd' const service: AxiosInstance = axios.create({ baseURL: import.meta.env.VITE_API_URL, -- 2.49.1 From 14380d42dce322c12541e6ca62ea8f3b5d1f7a11 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Tue, 17 Oct 2023 17:46:52 +0800 Subject: [PATCH 007/192] Add Sidebar component --- src/assets/css/components/common/sidebar.scss | 301 ++++++++++++++++++ src/assets/css/pages/tools-framework.scss | 288 ----------------- .../common/sidebar/SidebarFooter.tsx | 64 ++++ src/components/common/sidebar/SidebarItem.tsx | 60 ++++ .../common/sidebar/SidebarItemList.tsx | 7 + .../common/sidebar/SidebarScroll.tsx | 34 ++ .../common/sidebar/SidebarSeparate.tsx | 11 + .../common/sidebar/SidebarSubmenu.tsx | 22 ++ src/components/common/sidebar/index.tsx | 44 +++ src/pages/ToolsFramework.tsx | 290 ++++------------- 10 files changed, 597 insertions(+), 524 deletions(-) create mode 100644 src/assets/css/components/common/sidebar.scss create mode 100644 src/components/common/sidebar/SidebarFooter.tsx create mode 100644 src/components/common/sidebar/SidebarItem.tsx create mode 100644 src/components/common/sidebar/SidebarItemList.tsx create mode 100644 src/components/common/sidebar/SidebarScroll.tsx create mode 100644 src/components/common/sidebar/SidebarSeparate.tsx create mode 100644 src/components/common/sidebar/SidebarSubmenu.tsx create mode 100644 src/components/common/sidebar/index.tsx diff --git a/src/assets/css/components/common/sidebar.scss b/src/assets/css/components/common/sidebar.scss new file mode 100644 index 0000000..b94d972 --- /dev/null +++ b/src/assets/css/components/common/sidebar.scss @@ -0,0 +1,301 @@ +@use "@/assets/css/constants" as constants; +@use "@/assets/css/mixins" as mixins; + +.sidebar { + display: flex; + flex-direction: column; + height: 100%; + user-select: none; + transition: all .3s; + white-space: nowrap; + + .title { + display: flex; + align-items: center; + font-weight: bold; + padding: 10px 14px; + color: constants.$main-color; + overflow: hidden; + + .icon-box { + display: flex; + justify-content: center; + align-items: center; + padding: 10px; + width: 40px; + height: 40px; + font-size: constants.$SIZE_ICON_SM; + border-radius: 8px; + cursor: pointer; + span { + transform: rotateZ(180deg); + transition: all .3s; + } + + &:hover { + background-color: constants.$background-color; + } + } + + .text { + flex: 1; + font-size: 2em; + text-align: center; + letter-spacing: 0.2em; + transform: translateX(0.1em); + } + } + + .content { + display: flex; + min-height: 0; + flex-direction: column; + flex: 1; + + .scroll { + min-height: 0; + flex: 1; + } + + ul { + > li { + &.item { + position: relative; + margin: 4px 14px; + font-size: 1.4em; + + >.menu-bt { + border-radius: 8px; + overflow: hidden; + height: 40px; + + .icon-box { + display: flex; + justify-content: center; + align-items: center; + padding: 0 10px; + width: 40px; + height: 40px; + font-size: constants.$SIZE_ICON_SM; + cursor: pointer; + } + + a { + display: flex; + align-items: center; + height: 100%; + width: 100%; + transition: all 0.2s; + + .text { + flex: 1; + padding-left: 8px; + } + + &.active { + color: constants.$origin-color; + background-color: constants.$main-color !important; + } + } + } + + .submenu { + display: none; + position: fixed; + padding-left: 20px; + z-index: 10000; + + .content { + display: flex; + flex-direction: column; + gap: 2px; + padding: 10px 10px; + background-color: constants.$origin-color; + border-radius: 8px; + + .item { + border-radius: 8px; + white-space: nowrap; + overflow: hidden; + + a { + display: block; + padding: 8px 16px; + transition: all 0.2s; + + &.active { + color: constants.$origin-color; + background-color: constants.$main-color !important; + } + } + + &:hover a { + background-color: constants.$background-color; + } + } + } + } + + &:hover { + >.menu-bt { + a { + background-color: constants.$background-color; + } + } + + .submenu { + display: block; + animation: 0.3s ease; + @include mixins.unique-keyframes { + 0% { + transform: translateX(-10px); + opacity: 0; + } + 100% { + transform: translateX(0); + opacity: 1; + } + } + } + } + } + } + } + } + + .separate { + height: 0; + margin: 10px 5px; + border: { + width: 1px; + color: constants.$font-secondary-color; + style: solid; + }; + opacity: 0.4; + } + + .footer { + display: flex; + align-items: center; + font-weight: bold; + padding: 8px 14px; + color: constants.$main-color; + + .icon-user { + display: flex; + justify-content: center; + align-items: center; + margin-left: 4px; + padding: 10px; + width: 36px; + height: 36px; + font-size: constants.$SIZE_ICON_XS; + border: 2px constants.$font-secondary-color solid; + color: constants.$font-secondary-color; + border-radius: 50%; + cursor: pointer; + } + + .text { + flex: 1; + padding-left: 10px; + font-size: 1.4em; + color: constants.$font-main-color; + user-select: text; + + a{ + color: constants.$main-color; + text-decoration: underline; + } + } + + .icon-exit { + font-size: constants.$SIZE_ICON_XS; + color: constants.$error-color; + padding: 6px 10px; + cursor: pointer; + + &:hover { + border-radius: 8px; + background-color: constants.$background-color; + } + } + } + + &.hide { + width: 68px !important; + + .title { + .icon-box { + span { + transform: rotateZ(360deg); + transition: all .3s; + } + } + .text { + display: none; + } + } + + .menu-bt { + .text { + display: none; + } + } + + .submenu { + .menu-bt { + .text { + display: block; + } + } + } + + .footer { + position: relative; + .text { + display: none; + } + + .submenu-exit { + display: none; + position: absolute; + padding-left: 6px; + left: 100%; + + .content { + padding: 8px; + border-radius: 8px; + background-color: constants.$origin-color; + + .icon-exit { + padding: 4px 8px; + &:hover { + border-radius: 8px; + background-color: constants.$background-color; + } + } + } + + &.hide { + display: none!important; + } + } + + &:hover .submenu-exit { + display: block; + animation: 0.3s ease; + @include mixins.unique-keyframes { + 0% { + transform: translateX(-10px); + opacity: 0; + } + 100% { + transform: translateX(0); + opacity: 1; + } + } + } + } + } +} \ No newline at end of file diff --git a/src/assets/css/pages/tools-framework.scss b/src/assets/css/pages/tools-framework.scss index f9e08cf..9906a03 100644 --- a/src/assets/css/pages/tools-framework.scss +++ b/src/assets/css/pages/tools-framework.scss @@ -6,295 +6,7 @@ body { } .left-panel { - display: flex; - flex-direction: column; - width: clamp(180px, 20vw, 240px); background-color: constants.$origin-color; - user-select: none; - transition: all .3s; - white-space: nowrap; - - .title { - display: flex; - align-items: center; - font-weight: bold; - padding: 10px 14px; - color: constants.$main-color; - overflow: hidden; - - .icon-box { - display: flex; - justify-content: center; - align-items: center; - padding: 10px; - width: 40px; - height: 40px; - font-size: constants.$SIZE_ICON_SM; - border-radius: 8px; - cursor: pointer; - span { - transform: rotateZ(180deg); - transition: all .3s; - } - - &:hover { - background-color: constants.$background-color; - } - } - - .text { - flex: 1; - font-size: 2em; - text-align: center; - letter-spacing: 0.6em; - transform: translateX(0.3em); - } - } - - .content { - display: flex; - min-height: 0; - flex-direction: column; - flex: 1; - - .toolsMenu { - min-height: 0; - flex: 1; - } - - ul { - > li { - &.item { - position: relative; - margin: 4px 14px; - font-size: 1.4em; - - .menu-bt { - border-radius: 8px; - overflow: hidden; - height: 40px; - - .icon-box { - display: flex; - justify-content: center; - align-items: center; - padding: 0 10px; - width: 40px; - height: 40px; - font-size: constants.$SIZE_ICON_SM; - cursor: pointer; - } - - a { - display: flex; - align-items: center; - height: 100%; - width: 100%; - transition: all 0.2s; - - .text { - flex: 1; - padding-left: 8px; - } - - &.active { - color: constants.$origin-color; - background-color: constants.$main-color !important; - } - } - } - - .submenu { - display: none; - position: fixed; - padding-left: 20px; - z-index: 10000; - - .content { - display: flex; - flex-direction: column; - gap: 2px; - padding: 10px 10px; - background-color: constants.$origin-color; - border-radius: 8px; - - .item { - border-radius: 8px; - white-space: nowrap; - overflow: hidden; - - a { - display: block; - padding: 8px 16px; - transition: all 0.2s; - - &.active { - color: constants.$origin-color; - background-color: constants.$main-color !important; - } - } - - &:hover a { - background-color: constants.$background-color; - } - } - } - } - - &:hover { - .menu-bt { - a { - background-color: constants.$background-color; - } - } - - .submenu { - display: block; - animation: 0.3s ease; - @include mixins.unique-keyframes { - 0% { - transform: translateX(-10px); - opacity: 0; - } - 100% { - transform: translateX(0); - opacity: 1; - } - } - } - } - } - } - } - } - - .separate { - height: 0; - margin: 10px 5px; - border: { - width: 1px; - color: constants.$font-secondary-color; - style: solid; - }; - opacity: 0.4; - } - - .footer { - display: flex; - align-items: center; - font-weight: bold; - padding: 8px 14px; - color: constants.$main-color; - - .icon-user { - display: flex; - justify-content: center; - align-items: center; - margin-left: 4px; - padding: 10px; - width: 36px; - height: 36px; - font-size: constants.$SIZE_ICON_XS; - border: 2px constants.$font-secondary-color solid; - color: constants.$font-secondary-color; - border-radius: 50%; - cursor: pointer; - } - - .text { - flex: 1; - padding-left: 10px; - font-size: 1.4em; - color: constants.$font-main-color; - user-select: text; - - a{ - color: constants.$main-color; - text-decoration: underline; - } - } - - .icon-exit { - font-size: constants.$SIZE_ICON_XS; - color: constants.$error-color; - padding: 6px 10px; - cursor: pointer; - - &:hover { - border-radius: 8px; - background-color: constants.$background-color; - } - } - } - - &.hide { - width: 68px; - - .title { - .icon-box { - span { - transform: rotateZ(360deg); - transition: all .3s; - } - } - .text { - display: none; - } - } - - .menu-bt { - .text { - display: none; - } - } - - .footer { - position: relative; - .text { - display: none; - } - - .submenu-exit { - display: none; - position: absolute; - padding-left: 6px; - left: 100%; - - .content { - padding: 8px; - border-radius: 8px; - background-color: constants.$origin-color; - - .icon-exit { - padding: 4px 8px; - &:hover { - border-radius: 8px; - background-color: constants.$background-color; - } - } - } - - &.hide { - display: none!important; - } - } - - &:hover .submenu-exit { - display: block; - animation: 0.3s ease; - @include mixins.unique-keyframes { - 0% { - transform: translateX(-10px); - opacity: 0; - } - 100% { - transform: translateX(0); - opacity: 1; - } - } - } - } - } } .right-panel { diff --git a/src/components/common/sidebar/SidebarFooter.tsx b/src/components/common/sidebar/SidebarFooter.tsx new file mode 100644 index 0000000..55e1d24 --- /dev/null +++ b/src/components/common/sidebar/SidebarFooter.tsx @@ -0,0 +1,64 @@ +import React from 'react' +import Icon from '@ant-design/icons' +import { getLoginStatus, logout } from '@/utils/auth' +import { getRedirectUrl } from '@/utils/common' + +const SidebarFooter: React.FC = () => { + const matches = useMatches() + const lastMatch = matches.reduce((_, second) => second) + const location = useLocation() + const navigate = useNavigate() + const [exiting, setExiting] = useState(false) + const handleClickAvatar = () => { + if (getLoginStatus()) { + navigate('/user') + } else { + navigate(getRedirectUrl('/login', `${lastMatch.pathname}${location.search}`)) + } + } + + const handleLogout = () => { + if (exiting) { + return + } + + setExiting(true) + void logout().finally(() => { + setTimeout(() => { + window.location.reload() + }, 1500) + }) + } + + return ( +
    + + + + + + +
    + ) +} + +export default SidebarFooter diff --git a/src/components/common/sidebar/SidebarItem.tsx b/src/components/common/sidebar/SidebarItem.tsx new file mode 100644 index 0000000..4fff29d --- /dev/null +++ b/src/components/common/sidebar/SidebarItem.tsx @@ -0,0 +1,60 @@ +import React from 'react' +import Icon from '@ant-design/icons' +import SidebarSubmenu from '@/components/common/sidebar/SidebarSubmenu' + +type ItemProps = { + icon?: IconComponent + text?: string + path: string + children?: React.ReactNode +} + +const SidebarItem: React.FC = (props) => { + const [submenuTop, setSubmenuTop] = useState(0) + const [submenuLeft, setSubmenuLeft] = useState(0) + + const showSubmenu = (e: React.MouseEvent) => { + const parentElement = e.currentTarget.parentElement + if (parentElement && parentElement.childElementCount === 2) { + const parentClientRect = parentElement.getBoundingClientRect() + if (parentClientRect.top <= screen.height / 2) { + setSubmenuTop(parentClientRect.top) + } else { + setSubmenuTop( + parentClientRect.top - + (parentElement.lastElementChild?.clientHeight ?? 0) + + e.currentTarget.clientHeight + ) + } + setSubmenuLeft(parentClientRect.right) + } + } + + return ( +
  • +
    + + isPending ? 'pending' : isActive ? 'active' : '' + } + > +
    + {props.icon ? ( + + ) : undefined} +
    + {props.text} +     +
    + {props.children ? ( + + {props.children} + + ) : undefined} +
    • + ) +} + +export default SidebarItem diff --git a/src/components/common/sidebar/SidebarItemList.tsx b/src/components/common/sidebar/SidebarItemList.tsx new file mode 100644 index 0000000..42337e1 --- /dev/null +++ b/src/components/common/sidebar/SidebarItemList.tsx @@ -0,0 +1,7 @@ +import React from 'react' + +const SidebarItemList: React.FC = (props) => { + return
      {props.children}
    +} + +export default SidebarItemList diff --git a/src/components/common/sidebar/SidebarScroll.tsx b/src/components/common/sidebar/SidebarScroll.tsx new file mode 100644 index 0000000..8690664 --- /dev/null +++ b/src/components/common/sidebar/SidebarScroll.tsx @@ -0,0 +1,34 @@ +import React, { useImperativeHandle } from 'react' +import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar' + +export interface SidebarScrollElement { + refreshLayout(): void +} + +const SidebarScroll = forwardRef((props, ref) => { + useImperativeHandle(ref, () => { + return { + refreshLayout() { + hideScrollbarRef.current?.refreshLayout() + } + } + }) + + const hideScrollbarRef = useRef(null) + + return ( +
    + + {props.children} + +
    + ) +}) + +export default SidebarScroll diff --git a/src/components/common/sidebar/SidebarSeparate.tsx b/src/components/common/sidebar/SidebarSeparate.tsx new file mode 100644 index 0000000..3887824 --- /dev/null +++ b/src/components/common/sidebar/SidebarSeparate.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const SidebarSeparate: React.FC< + React.DetailedHTMLProps, HTMLDivElement> +> = (props) => { + const { className, ..._props } = props + + return
    +} + +export default SidebarSeparate diff --git a/src/components/common/sidebar/SidebarSubmenu.tsx b/src/components/common/sidebar/SidebarSubmenu.tsx new file mode 100644 index 0000000..ed2039b --- /dev/null +++ b/src/components/common/sidebar/SidebarSubmenu.tsx @@ -0,0 +1,22 @@ +import React from 'react' + +interface SidebarSubmenuProps extends React.PropsWithChildren { + submenuTop: number + submenuLeft: number +} + +const SidebarSubmenu: React.FC = (props) => { + return ( +
      +
      {props.children}
      +
    + ) +} + +export default SidebarSubmenu diff --git a/src/components/common/sidebar/index.tsx b/src/components/common/sidebar/index.tsx new file mode 100644 index 0000000..41f1006 --- /dev/null +++ b/src/components/common/sidebar/index.tsx @@ -0,0 +1,44 @@ +import React from 'react' +import Icon from '@ant-design/icons' +import '@/assets/css/components/common/sidebar.scss' +import SidebarSeparate from '@/components/common/sidebar/SidebarSeparate' +import SidebarFooter from '@/components/common/sidebar/SidebarFooter' +import { getLocalStorage, setLocalStorage } from '@/utils/common' + +interface SidebarProps extends React.PropsWithChildren { + title: string + width?: string + onSidebarSwitch?: (hidden: boolean) => void +} + +const Sidebar: React.FC = (props) => { + const [hideSidebar, setHideSidebar] = useState(getLocalStorage('hideSidebar') === 'false') + + const switchSidebar = () => { + setHideSidebar(!hideSidebar) + setLocalStorage('hideSidebar', hideSidebar ? 'true' : 'false') + props.onSidebarSwitch && props.onSidebarSwitch(hideSidebar) + } + + return ( + <> +
    +
    + + + + {props.title} +
    + +
    {props.children}
    + + +
    + + ) +} + +export default Sidebar diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx index 27d51cc..8930fd5 100644 --- a/src/pages/ToolsFramework.tsx +++ b/src/pages/ToolsFramework.tsx @@ -1,251 +1,69 @@ import React from 'react' -import FitFullScreen from '@/components/common/FitFullScreen' -import '@/assets/css/pages/tools-framework.scss' -import Icon from '@ant-design/icons' import { tools } from '@/router/tools' -import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar' -import { getLocalStorage, getRedirectUrl, setLocalStorage } from '@/utils/common' -import { getLoginStatus, logout } from '@/utils/auth' -import { NavLink, Outlet } from 'react-router-dom' +import '@/assets/css/pages/tools-framework.scss' +import FitFullScreen from '@/components/common/FitFullScreen' +import SidebarScroll, { SidebarScrollElement } from '@/components/common/sidebar/SidebarScroll' +import Sidebar from '@/components/common/sidebar' +import SidebarItemList from '@/components/common/sidebar/SidebarItemList' +import SidebarItem from '@/components/common/sidebar/SidebarItem' +import SidebarSeparate from '@/components/common/sidebar/SidebarSeparate' const ToolsFramework: React.FC = () => { - const matches = useMatches() - const lastMatch = matches.reduce((_, second) => second) - const location = useLocation() - const navigate = useNavigate() - const hideScrollbarRef = useRef(null) - const [submenuTop, setSubmenuTop] = useState(0) - const [submenuLeft, setSubmenuLeft] = useState(0) - const [hideSidebar, setHideSidebar] = useState(getLocalStorage('hideSidebar') === 'false') - const [exiting, setExiting] = useState(false) + const sidebarScrollRef = useRef(null) - const switchSidebar = () => { - setHideSidebar(!hideSidebar) - setLocalStorage('hideSidebar', hideSidebar ? 'true' : 'false') + const handleOnSidebarSwitch = () => { setTimeout(() => { - hideScrollbarRef.current?.refreshLayout() + sidebarScrollRef.current?.refreshLayout() }, 300) } - const showSubmenu = (e: React.MouseEvent) => { - const parentElement = e.currentTarget.parentElement - if (parentElement && parentElement.childElementCount === 2) { - const parentClientRect = parentElement.getBoundingClientRect() - if (parentClientRect.top <= screen.height / 2) { - setSubmenuTop(parentClientRect.top) - } else { - setSubmenuTop( - parentClientRect.top - - (parentElement.lastElementChild?.clientHeight ?? 0) + - e.currentTarget.clientHeight - ) - } - setSubmenuLeft(parentClientRect.right) - } - } - - const handleClickAvatar = () => { - if (getLoginStatus()) { - navigate(`${lastMatch.pathname}${location.search}`) - } else { - navigate(getRedirectUrl('/login', `${lastMatch.pathname}${location.search}`)) - } - } - - const handleLogout = () => { - if (exiting) { - return - } - - setExiting(true) - void logout().finally(() => { - setTimeout(() => { - window.location.reload() - }, 1500) - }) - } - return ( <> -
    -
    - - - - 氮工具 -
    -
    -
    -
      -
    • -
      - - isPending ? 'pending' : isActive ? 'active' : '' - } - > -
      - {tools[0].icon ? ( - - ) : undefined} -
      - {tools[0].name} -       -
      -
      • -
    • -
      - - isPending ? ' pending' : isActive ? ' active' : '' - } - > -
      - {tools[1].icon ? ( - - ) : undefined} -
      - {tools[1].name} -       -
      -
      • -
    • -
      -
      • -
    -
    - -
      - {tools.map((tool) => { - return tool.menu && - tool.id !== 'tools' && - tool.id !== 'tools-all' ? ( -
    • -
      - - isPending - ? 'pending' - : isActive - ? 'active' - : '' - } - > -
      - {tool.icon ? ( - - ) : undefined} -
      - {tool.name} -       -
      - {tool.children ? ( -
        -
        - {tool.children.map((subTool) => { - return subTool.menu ? ( -
      • - - isPending - ? 'pending' - : isActive - ? 'active' - : '' - } - > - - {subTool.name} - - -
        • - ) : undefined - })} -
        -
      - ) : undefined} -
      • - ) : undefined - })} -
    -     -
    -
    -
    -
    - - - - - - -
    +
    + + + + + + + + + {tools.map((tool) => { + return tool.menu && + tool.id !== 'tools' && + tool.id !== 'tools-all' ? ( + + {tool.children + ? tool.children.map((subTool) => { + return ( + + ) + }) + : undefined} + + ) : undefined + })} + + +
    -- 2.49.1 From 8c1bd15dc279151fa2bac0738f078d2a97696353 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Tue, 17 Oct 2023 18:29:28 +0800 Subject: [PATCH 008/192] Fix union key in ToolsFramework --- src/pages/ToolsFramework.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx index 8930fd5..9f05bec 100644 --- a/src/pages/ToolsFramework.tsx +++ b/src/pages/ToolsFramework.tsx @@ -53,7 +53,7 @@ const ToolsFramework: React.FC = () => { ) }) -- 2.49.1 From 5d71433d630c5c175c8953712ebd9cf6e1e9b7db Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Tue, 17 Oct 2023 18:33:21 +0800 Subject: [PATCH 009/192] Add UserFramework --- src/pages/UserFramework.tsx | 37 +++++++++++++++++++++++++++++++++++++ src/router/index.tsx | 9 +++++++++ src/router/user.tsx | 17 +++++++++++++++++ 3 files changed, 63 insertions(+) create mode 100644 src/pages/UserFramework.tsx create mode 100644 src/router/user.tsx diff --git a/src/pages/UserFramework.tsx b/src/pages/UserFramework.tsx new file mode 100644 index 0000000..3b66b40 --- /dev/null +++ b/src/pages/UserFramework.tsx @@ -0,0 +1,37 @@ +import React from 'react' +import FitFullScreen from '@/components/common/FitFullScreen' +import '@/assets/css/pages/tools-framework.scss' +import Sidebar from '@/components/common/sidebar' +import SidebarItemList from '@/components/common/sidebar/SidebarItemList' +import SidebarItem from '@/components/common/sidebar/SidebarItem' +import user from '@/router/user.tsx' + +const ToolsFramework: React.FC = () => { + return ( + <> + +
    + + + {user.map((value) => { + return value.menu ? ( + + ) : undefined + })} + + +
    +
    + +
    +     + + ) +} + +export default ToolsFramework diff --git a/src/router/index.tsx b/src/router/index.tsx index da0ff94..c570281 100644 --- a/src/router/index.tsx +++ b/src/router/index.tsx @@ -1,6 +1,7 @@ import React from 'react' import tools from '@/router/tools' import home from '@/router/home' +import user from '@/router/user.tsx' const mapJsonToRoute = (jsonObject: RouteJsonObject[]): RouteObject[] => { return jsonObject.map((value) => ({ @@ -55,6 +56,14 @@ const root: RouteJsonObject[] = [ name: '工具', auth: false }, + { + path: '/user', + id: 'userFramework', + component: React.lazy(() => import('@/pages/UserFramework')), + children: setTitle(user, '个人中心'), + name: '个人中心', + auth: true + }, { path: '', id: 'homeFramework', diff --git a/src/router/user.tsx b/src/router/user.tsx new file mode 100644 index 0000000..ee8c550 --- /dev/null +++ b/src/router/user.tsx @@ -0,0 +1,17 @@ +import React from 'react' + +const user: RouteJsonObject[] = [ + { + path: '', + id: 'user', + name: '个人档案', + icon: React.lazy(() => import('~icons/fatweb/user.jsx')), + menu: true + }, + { + path: '*', + element: + } +] + +export default user -- 2.49.1 From fcd4fd532c6efe161a00b3f49f8060566035a476 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Mon, 30 Oct 2023 00:26:19 +0800 Subject: [PATCH 010/192] Add login and logout notification --- package-lock.json | 9 ++++ package.json | 1 + src/assets/css/constants.scss | 11 ++--- .../common/sidebar/SidebarFooter.tsx | 22 +++++++++- src/constants/common.constants.ts | 19 ++++++++- src/constants/urls.constants.ts | 1 + src/global.d.ts | 41 +++++++++++++++++-- src/pages/Login.tsx | 25 ++++++++++- src/services/index.tsx | 2 +- src/utils/auth.ts | 28 +++++++------ 10 files changed, 134 insertions(+), 25 deletions(-) diff --git a/package-lock.json b/package-lock.json index c67c05d..159998f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "localforage": "^1.10.0", "lodash": "^4.17.21", "match-sorter": "^6.3.1", + "moment": "^2.29.4", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router": "^6.15.0", @@ -4885,6 +4886,14 @@ "ufo": "^1.3.0" } }, + "node_modules/moment": { + "version": "2.29.4", + "resolved": "https://registry.npmmirror.com/moment/-/moment-2.29.4.tgz", + "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==", + "engines": { + "node": "*" + } + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz", diff --git a/package.json b/package.json index 288a28a..932e59b 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "localforage": "^1.10.0", "lodash": "^4.17.21", "match-sorter": "^6.3.1", + "moment": "^2.29.4", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router": "^6.15.0", diff --git a/src/assets/css/constants.scss b/src/assets/css/constants.scss index 3e6e1b5..50786e0 100644 --- a/src/assets/css/constants.scss +++ b/src/assets/css/constants.scss @@ -1,10 +1,11 @@ $origin-color: white; -$main-color: #4E47BB; +$production-color: #4E47BB; +$main-color: $production-color; $secondary-color: #BAB8E5; -$error-color: #ff4d4f; -$error-secondary-color: #ff7875; -$blue-color: #1677ff; -$active-color: #EBECFFD; +$error-color: #FF4D4F; +$error-secondary-color: #FF7875; +$blue-color: #1677FF; +$active-color: #EBECFD; $background-color: #F5F5F5; $font-main-color: #4D4D4D; $font-secondary-color: #9E9E9E; diff --git a/src/components/common/sidebar/SidebarFooter.tsx b/src/components/common/sidebar/SidebarFooter.tsx index 55e1d24..c3b7666 100644 --- a/src/components/common/sidebar/SidebarFooter.tsx +++ b/src/components/common/sidebar/SidebarFooter.tsx @@ -1,7 +1,9 @@ import React from 'react' import Icon from '@ant-design/icons' -import { getLoginStatus, logout } from '@/utils/auth' +import { getLoginStatus, getUsername, logout } from '@/utils/auth' import { getRedirectUrl } from '@/utils/common' +import { notification } from 'antd' +import { COLOR_ERROR } from '@/constants/common.constants.ts' const SidebarFooter: React.FC = () => { const matches = useMatches() @@ -9,6 +11,8 @@ const SidebarFooter: React.FC = () => { const location = useLocation() const navigate = useNavigate() const [exiting, setExiting] = useState(false) + const [username, setUsername] = useState('') + const handleClickAvatar = () => { if (getLoginStatus()) { navigate('/user') @@ -24,12 +28,26 @@ const SidebarFooter: React.FC = () => { setExiting(true) void logout().finally(() => { + notification.info({ + message: '已退出登录', + icon: + }) setTimeout(() => { window.location.reload() }, 1500) }) } + const loginStatus = getLoginStatus() + + useEffect(() => { + if (getLoginStatus()) { + void getUsername().then((username) => { + setUsername(username) + }) + } + }, [loginStatus]) + return (
    @@ -42,7 +60,7 @@ const SidebarFooter: React.FC = () => {