From f19e08bdcd5a8c013fe18247a7b99d7cd86f5aa0 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Tue, 5 Dec 2023 18:14:05 +0800 Subject: [PATCH] Rename LoadingMask to FullscreenLoadingMask --- src/App.tsx | 4 ++-- .../css/components/common/fullscreen-loading-mask.scss | 10 ++++++++++ .../{LoadingMask.tsx => FullscreenLoadingMask.tsx} | 8 ++++---- src/pages/HomeFramework.tsx | 4 ++-- src/pages/SystemFramework.tsx | 4 ++-- src/pages/ToolsFramework.tsx | 4 ++-- src/pages/UserFramework.tsx | 4 ++-- src/router/index.tsx | 2 +- src/util/common.tsx | 4 ++-- 9 files changed, 27 insertions(+), 17 deletions(-) create mode 100644 src/assets/css/components/common/fullscreen-loading-mask.scss rename src/components/common/{LoadingMask.tsx => FullscreenLoadingMask.tsx} (73%) diff --git a/src/App.tsx b/src/App.tsx index dd4f9cf..82ce06b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,6 @@ import React from 'react' import { getRouter } from '@/router' -import LoadingMask from '@/components/common/LoadingMask' +import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask' export const AppContext = createContext<{ refreshRouter: () => void }>({ refreshRouter: () => undefined @@ -18,7 +18,7 @@ const App: React.FC = () => { } }} > - }> + }> diff --git a/src/assets/css/components/common/fullscreen-loading-mask.scss b/src/assets/css/components/common/fullscreen-loading-mask.scss new file mode 100644 index 0000000..c4458cd --- /dev/null +++ b/src/assets/css/components/common/fullscreen-loading-mask.scss @@ -0,0 +1,10 @@ +.fullscreen-loading-mask { + position: absolute; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + z-index: 100; + background-color: rgba(200, 200, 200, 0.2); +} \ No newline at end of file diff --git a/src/components/common/LoadingMask.tsx b/src/components/common/FullscreenLoadingMask.tsx similarity index 73% rename from src/components/common/LoadingMask.tsx rename to src/components/common/FullscreenLoadingMask.tsx index bbb231d..4bddf5d 100644 --- a/src/components/common/LoadingMask.tsx +++ b/src/components/common/FullscreenLoadingMask.tsx @@ -1,10 +1,10 @@ import React from 'react' import Icon from '@ant-design/icons' -import '@/assets/css/components/common/loading-mask.scss' +import '@/assets/css/components/common/fullscreen-loading-mask.scss' import { COLOR_FONT_MAIN } from '@/constants/common.constants' import FitFullScreen from '@/components/common/FitFullScreen' -const LoadingMask: React.FC = () => { +const FullscreenLoadingMask: React.FC = () => { const loadingIcon = ( <> { return ( <> -
+
@@ -25,4 +25,4 @@ const LoadingMask: React.FC = () => { ) } -export default LoadingMask +export default FullscreenLoadingMask diff --git a/src/pages/HomeFramework.tsx b/src/pages/HomeFramework.tsx index 327f1f3..605a2cd 100644 --- a/src/pages/HomeFramework.tsx +++ b/src/pages/HomeFramework.tsx @@ -3,7 +3,7 @@ import Icon from '@ant-design/icons' import '@/assets/css/pages/home-framework.scss' import { COLOR_FONT_SECONDARY } from '@/constants/common.constants' import { getRouter } from '@/router' -import LoadingMask from '@/components/common/LoadingMask' +import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask' import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar' export const HomeFrameworkContext = createContext<{ @@ -206,7 +206,7 @@ const HomeFramework: React.FC = () => { - + } > diff --git a/src/pages/SystemFramework.tsx b/src/pages/SystemFramework.tsx index 4bbbacc..3563013 100644 --- a/src/pages/SystemFramework.tsx +++ b/src/pages/SystemFramework.tsx @@ -5,7 +5,7 @@ import FitFullScreen from '@/components/common/FitFullScreen' import Sidebar from '@/components/common/sidebar' import SidebarItemList from '@/components/common/sidebar/SidebarItemList' import SidebarItem from '@/components/common/sidebar/SidebarItem' -import LoadingMask from '@/components/common/LoadingMask' +import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask' const SystemFramework: React.FC = () => { return ( @@ -32,7 +32,7 @@ const SystemFramework: React.FC = () => { - + } > diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx index 1385994..f1a970b 100644 --- a/src/pages/ToolsFramework.tsx +++ b/src/pages/ToolsFramework.tsx @@ -7,7 +7,7 @@ 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' -import LoadingMask from '@/components/common/LoadingMask' +import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask' const ToolsFramework: React.FC = () => { const sidebarScrollRef = useRef(null) @@ -67,7 +67,7 @@ const ToolsFramework: React.FC = () => { - + } > diff --git a/src/pages/UserFramework.tsx b/src/pages/UserFramework.tsx index 830c463..6782f72 100644 --- a/src/pages/UserFramework.tsx +++ b/src/pages/UserFramework.tsx @@ -6,7 +6,7 @@ import FitFullScreen from '@/components/common/FitFullScreen' import Sidebar from '@/components/common/sidebar' import SidebarItemList from '@/components/common/sidebar/SidebarItemList' import SidebarItem from '@/components/common/sidebar/SidebarItem' -import LoadingMask from '@/components/common/LoadingMask' +import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask' const ToolsFramework: React.FC = () => { return ( @@ -46,7 +46,7 @@ const ToolsFramework: React.FC = () => { - + } > diff --git a/src/router/index.tsx b/src/router/index.tsx index d496494..0a7ae4d 100644 --- a/src/router/index.tsx +++ b/src/router/index.tsx @@ -22,7 +22,7 @@ const root: RouteJsonObject[] = [ path: 'loading', absolutePath: '/loading', id: 'loading', - component: React.lazy(() => import('@/components/common/LoadingMask')) + component: React.lazy(() => import('@/components/common/FullscreenLoadingMask')) }, { path: 'tools', diff --git a/src/util/common.tsx b/src/util/common.tsx index 88bf514..099ff6a 100644 --- a/src/util/common.tsx +++ b/src/util/common.tsx @@ -1,5 +1,5 @@ import ReactDOM from 'react-dom/client' -import LoadingMask from '@/components/common/LoadingMask' +import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask' export const randomInt = (start: number, end: number) => { if (start > end) { @@ -46,7 +46,7 @@ export const showLoadingMask = (id: string) => { 'position: fixed; width: 100vw; height: 100vh; z-index: 10000; left: 0; top: 0;' ) - return ReactDOM.createRoot(container).render() + return ReactDOM.createRoot(container).render() } export const removeLoadingMask = (id: string) => {