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 +41 -41
14 changed files with 41 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 8910c3a514 - Show all commits

4
src/components/common/FitFullScreen.tsx → src/components/common/FitFullscreen.tsx
View File

@@ -7,7 +7,7 @@ interface FitFullscreenProps
backgroundColor?: string
}
const FitFullScreen = forwardRef<HTMLDivElement, FitFullscreenProps>((props, ref) => {
const FitFullscreen = forwardRef<HTMLDivElement, FitFullscreenProps>((props, ref) => {
const { zIndex, backgroundColor, className, style, ..._props } = props
return (
<div
@@ -23,4 +23,4 @@ const FitFullScreen = forwardRef<HTMLDivElement, FitFullscreenProps>((props, ref
)
})
export default FitFullScreen
export default FitFullscreen

6
src/components/common/FullscreenLoadingMask.tsx
View File

@@ -2,7 +2,7 @@ import React from 'react'
import Icon from '@ant-design/icons'
import '@/assets/css/components/common/fullscreen-loading-mask.scss'
import { COLOR_FONT_MAIN } from '@/constants/common.constants'
import FitFullScreen from '@/components/common/FitFullScreen'
import FitFullscreen from '@/components/common/FitFullscreen'
const FullscreenLoadingMask: React.FC = () => {
const loadingIcon = (
@@ -16,11 +16,11 @@ const FullscreenLoadingMask: React.FC = () => {
)
return (
<>
<FitFullScreen>
<FitFullscreen>
<div className={'fullscreen-loading-mask'}>
<AntdSpin indicator={loadingIcon} />
</div>
</FitFullScreen>
</FitFullscreen>
</>
)
}

6
src/components/home/Footer.tsx
View File

@@ -2,12 +2,12 @@ import React from 'react'
import Icon from '@ant-design/icons'
import '@/assets/css/components/home/footer.scss'
import FitCenter from '@/components/common/FitCenter'
import FitFullScreen from '@/components/common/FitFullScreen'
import FitFullscreen from '@/components/common/FitFullscreen'
const Footer: React.FC = () => {
return (
<>
<FitFullScreen backgroundColor={'#333'}>
<FitFullscreen backgroundColor={'#333'}>
<FitCenter vertical={true} style={{ gap: 20 }}>
<div className={'icons'}>
<NavLink to={'https://github.com/FatttSnake'}>
@@ -21,7 +21,7 @@ const Footer: React.FC = () => {
<NavLink to={'mailto:fatttsnake@fatweb.top'}>Mail</NavLink>
</div>
</FitCenter>
</FitFullScreen>
</FitFullscreen>
</>
)
}

6
src/pages/SystemFramework.tsx
View File

@@ -1,7 +1,7 @@
import React from 'react'
import '@/assets/css/pages/system-framework.scss'
import { getSystemRouteJson } from '@/router/system'
import FitFullScreen from '@/components/common/FitFullScreen'
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'
@@ -10,7 +10,7 @@ import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
const SystemFramework: React.FC = () => {
return (
<>
<FitFullScreen className={'flex-horizontal'}>
<FitFullscreen className={'flex-horizontal'}>
<div className={'left-panel'}>
<Sidebar title={'系统配置'}>
<SidebarItemList>
@@ -39,7 +39,7 @@ const SystemFramework: React.FC = () => {
<Outlet />
</Suspense>
</div>
</FitFullScreen>
</FitFullscreen>
</>
)
}

6
src/pages/ToolsFramework.tsx
View File

@@ -1,7 +1,7 @@
import React from 'react'
import '@/assets/css/pages/tools-framework.scss'
import { tools } from '@/router/tools'
import FitFullScreen from '@/components/common/FitFullScreen'
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'
@@ -20,7 +20,7 @@ const ToolsFramework: React.FC = () => {
return (
<>
<FitFullScreen className={'flex-horizontal'}>
<FitFullscreen className={'flex-horizontal'}>
<div className={'left-panel'}>
<Sidebar title={'氮工具'} onSidebarSwitch={handleOnSidebarSwitch}>
<SidebarItemList>
@@ -74,7 +74,7 @@ const ToolsFramework: React.FC = () => {
<Outlet />
</Suspense>
</div>
</FitFullScreen>
</FitFullscreen>
</>
)
}

6
src/pages/UserFramework.tsx
View File

@@ -2,7 +2,7 @@ import React from 'react'
import '@/assets/css/pages/tools-framework.scss'
import user from '@/router/user'
import { hasPathPermission } from '@/util/auth'
import FitFullScreen from '@/components/common/FitFullScreen'
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'
@@ -11,7 +11,7 @@ import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
const ToolsFramework: React.FC = () => {
return (
<>
<FitFullScreen className={'flex-horizontal'}>
<FitFullscreen className={'flex-horizontal'}>
<div className={'left-panel'}>
<Sidebar
title={'个人中心'}
@@ -53,7 +53,7 @@ const ToolsFramework: React.FC = () => {
<Outlet />
</Suspense>
</div>
</FitFullScreen>
</FitFullscreen>
</>
)
}

4
src/pages/home/index.tsx
View File

@@ -1,7 +1,7 @@
import React from 'react'
import '@/assets/css/components/home/home.scss'
import { HomeFrameworkContext } from '@/pages/HomeFramework'
import FitFullScreen from '@/components/common/FitFullScreen'
import FitFullscreen from '@/components/common/FitFullscreen'
import Slogan from '@/components/home/Slogan'
import OxygenToolbox from '@/components/home/OxygenToolbox'
import Indicator from '@/components/common/Indicator'
@@ -155,7 +155,7 @@ const Home: React.FC = () => {
onKeyDown={handleKeyDown}
>
{content.map((element, index) => {
return <FitFullScreen key={index} {...element} />
return <FitFullscreen key={index} {...element} />
})}
</div>

6
src/pages/system/Group.tsx
View File

@@ -23,7 +23,7 @@ import {
r_sys_role_get_list
} from '@/services/system'
import Permission from '@/components/common/Permission'
import FitFullScreen from '@/components/common/FitFullScreen'
import FitFullscreen from '@/components/common/FitFullscreen'
import HideScrollbar from '@/components/common/HideScrollbar'
import FlexBox from '@/components/common/FlexBox'
import Card from '@/components/common/Card'
@@ -631,7 +631,7 @@ const Group: React.FC = () => {
return (
<>
<FitFullScreen>
<FitFullscreen>
<HideScrollbar
style={{ padding: 30 }}
isShowVerticalScrollbar
@@ -642,7 +642,7 @@ const Group: React.FC = () => {
{table}
</FlexBox>
</HideScrollbar>
</FitFullScreen>
</FitFullscreen>
<AntdDrawer
title={isDrawerEdit ? '编辑用户组' : '添加用户组'}
width={'36vw'}

6
src/pages/system/Log.tsx
View File

@@ -4,7 +4,7 @@ import { COLOR_FONT_SECONDARY, DATABASE_SELECT_SUCCESS } from '@/constants/commo
import { useUpdatedEffect } from '@/util/hooks'
import { dayjsToUtc, utcToLocalTime } from '@/util/datetime'
import { r_sys_log_get } from '@/services/system'
import FitFullScreen from '@/components/common/FitFullScreen'
import FitFullscreen from '@/components/common/FitFullscreen'
import Card from '@/components/common/Card'
import HideScrollbar from '@/components/common/HideScrollbar'
import FlexBox from '@/components/common/FlexBox'
@@ -284,7 +284,7 @@ const Log: React.FC = () => {
return (
<>
<FitFullScreen>
<FitFullscreen>
<HideScrollbar
style={{ padding: 30 }}
isShowVerticalScrollbar
@@ -295,7 +295,7 @@ const Log: React.FC = () => {
{table}
</FlexBox>
</HideScrollbar>
</FitFullScreen>
</FitFullscreen>
</>
)
}

6
src/pages/system/Role.tsx
View File

@@ -23,7 +23,7 @@ import {
r_sys_role_delete_list
} from '@/services/system'
import Permission from '@/components/common/Permission'
import FitFullScreen from '@/components/common/FitFullScreen'
import FitFullscreen from '@/components/common/FitFullscreen'
import HideScrollbar from '@/components/common/HideScrollbar'
import FlexBox from '@/components/common/FlexBox'
import Card from '@/components/common/Card'
@@ -638,7 +638,7 @@ const Role: React.FC = () => {
return (
<>
<FitFullScreen>
<FitFullscreen>
<HideScrollbar
style={{ padding: 30 }}
isShowVerticalScrollbar
@@ -649,7 +649,7 @@ const Role: React.FC = () => {
{table}
</FlexBox>
</HideScrollbar>
</FitFullScreen>
</FitFullscreen>
<AntdDrawer
title={isDrawerEdit ? '编辑角色' : '添加角色'}
width={'36vw'}

6
src/pages/system/Settings.tsx
View File

@@ -8,7 +8,7 @@ import {
r_sys_settings_mail_send,
r_sys_settings_mail_update
} from '@/services/system'
import FitFullScreen from '@/components/common/FitFullScreen'
import FitFullscreen from '@/components/common/FitFullscreen'
import HideScrollbar from '@/components/common/HideScrollbar'
import Card from '@/components/common/Card'
import FlexBox from '@/components/common/FlexBox'
@@ -195,7 +195,7 @@ const MailSettings: React.FC = () => {
const Settings: React.FC = () => {
return (
<>
<FitFullScreen>
<FitFullscreen>
<HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
<FlexBox className={'root-content'}>
<FlexBox direction={'horizontal'} className={'root-row'}>
@@ -206,7 +206,7 @@ const Settings: React.FC = () => {
</FlexBox>
</FlexBox>
</HideScrollbar>
</FitFullScreen>
</FitFullscreen>
</>
)
}

8
src/pages/system/Statistics.tsx
View File

@@ -29,7 +29,7 @@ import {
} from '@/services/system'
import Card from '@/components/common/Card'
import FlexBox from '@/components/common/FlexBox'
import FitFullScreen from '@/components/common/FitFullScreen'
import FitFullscreen from '@/components/common/FitFullscreen'
import HideScrollbar from '@/components/common/HideScrollbar'
import LoadingMask from '@/components/common/LoadingMask'
import Permission from '@/components/common/Permission'
@@ -276,7 +276,7 @@ const OnlineInfo: React.FC = () => {
<FlexBox gap={10} direction={'horizontal'}>
<span style={{ whiteSpace: 'nowrap' }}>在线用户</span>
<AntdTag>
当前 {currentOnlineCount === -1 ? '获取中...' : currentOnlineCount}
{currentOnlineCount === -1 ? '获取中...' : `当前 ${currentOnlineCount}`}
</AntdTag>
</FlexBox>
</>
@@ -939,7 +939,7 @@ const StorageInfo: React.FC = () => {
const Statistics: React.FC = () => {
return (
<>
<FitFullScreen>
<FitFullscreen>
<HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
<FlexBox direction={'horizontal'} className={'root-content'}>
<Permission operationCode={'system:statistics:query:usage'}>
@@ -956,7 +956,7 @@ const Statistics: React.FC = () => {
</Permission>
</FlexBox>
</HideScrollbar>
</FitFullScreen>
</FitFullscreen>
</>
)
}

6
src/pages/system/User.tsx
View File

@@ -26,7 +26,7 @@ import {
} from '@/services/system'
import Permission from '@/components/common/Permission'
import { r_api_avatar_random_base64 } from '@/services/api/avatar'
import FitFullScreen from '@/components/common/FitFullScreen'
import FitFullscreen from '@/components/common/FitFullscreen'
import HideScrollbar from '@/components/common/HideScrollbar'
import FlexBox from '@/components/common/FlexBox'
import Card from '@/components/common/Card'
@@ -998,7 +998,7 @@ const User: React.FC = () => {
return (
<>
<FitFullScreen>
<FitFullscreen>
<HideScrollbar
style={{ padding: 30 }}
isShowVerticalScrollbar
@@ -1009,7 +1009,7 @@ const User: React.FC = () => {
{table}
</FlexBox>
</HideScrollbar>
</FitFullScreen>
</FitFullscreen>
<AntdDrawer
title={isDrawerEdit ? '编辑用户' : '新增用户'}
width={'36vw'}

6
src/pages/system/index.tsx
View File

@@ -3,7 +3,7 @@ import Icon from '@ant-design/icons'
import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
import '@/assets/css/pages/system/index.scss'
import HideScrollbar from '@/components/common/HideScrollbar'
import FitFullScreen from '@/components/common/FitFullScreen'
import FitFullscreen from '@/components/common/FitFullscreen'
import FlexBox from '@/components/common/FlexBox'
import Card from '@/components/common/Card'
import Permission from '@/components/common/Permission.tsx'
@@ -62,7 +62,7 @@ const CommonCard = forwardRef<HTMLDivElement, CommonCardProps>((props) => {
const System: React.FC = () => {
return (
<>
<FitFullScreen data-component={'system'}>
<FitFullscreen data-component={'system'}>
<HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
<FlexBox direction={'horizontal'} className={'root-content'}>
<Permission path={'/system/statistics'}>
@@ -97,7 +97,7 @@ const System: React.FC = () => {
</Permission>
</FlexBox>
</HideScrollbar>
</FitFullScreen>
</FitFullscreen>
</>
)
}