FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Complete main UI #37

Merged
FatttSnake merged 192 commits from FatttSnake into dev 2024-02-23 16:31:17 +08:00
Conversation 0 Commits 192 Files Changed 215 +27 -17
9 changed files with 27 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f19e08bdcd - Show all commits

4
src/App.tsx
View File

@@ -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 = () => {
}
}}
>
<Suspense fallback={<LoadingMask />}>
<Suspense fallback={<FullscreenLoadingMask />}>
<RouterProvider router={routerState} />
</Suspense>
</AppContext.Provider>

10
src/assets/css/components/common/fullscreen-loading-mask.scss Normal file
View File

@@ -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);
}

8
src/components/common/LoadingMask.tsx → src/components/common/FullscreenLoadingMask.tsx
View File

@@ -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 = (
<>
<Icon
@@ -17,7 +17,7 @@ const LoadingMask: React.FC = () => {
return (
<>
<FitFullScreen>
<div className={'loading-mask'}>
<div className={'fullscreen-loading-mask'}>
<AntdSpin indicator={loadingIcon} />
</div>
</FitFullScreen>
@@ -25,4 +25,4 @@ const LoadingMask: React.FC = () => {
)
}
export default LoadingMask
export default FullscreenLoadingMask

4
src/pages/HomeFramework.tsx
View File

@@ -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 = () => {
<Suspense
fallback={
<>
<LoadingMask />
<FullscreenLoadingMask />
</>
}
>

4
src/pages/SystemFramework.tsx
View File

@@ -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 = () => {
<Suspense
fallback={
<>
<LoadingMask />
<FullscreenLoadingMask />
</>
}
>

4
src/pages/ToolsFramework.tsx
View File

@@ -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<SidebarScrollElement>(null)
@@ -67,7 +67,7 @@ const ToolsFramework: React.FC = () => {
<Suspense
fallback={
<>
<LoadingMask />
<FullscreenLoadingMask />
</>
}
>

4
src/pages/UserFramework.tsx
View File

@@ -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 = () => {
<Suspense
fallback={
<>
<LoadingMask />
<FullscreenLoadingMask />
</>
}
>

2
src/router/index.tsx
View File

@@ -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',

4
src/util/common.tsx
View File

@@ -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(<LoadingMask />)
return ReactDOM.createRoot(container).render(<FullscreenLoadingMask />)
}
export const removeLoadingMask = (id: string) => {