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

Optimize layout and stylesheet

Browse Source
This commit is contained in:
Fat Snake
2024-01-18 17:29:42 +08:00
parent 9bcf559718
commit 343152c9d3
9 changed files with 37 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/assets/css/components/common/sidebar.scss
View File

@@ -100,10 +100,21 @@
}
.submenu {
display: none;
visibility: hidden;
position: fixed;
padding-left: 20px;
z-index: 10000;
animation: 0.1s ease forwards;
@include mixins.unique-keyframes {
0% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(-10px);
opacity: 0;
}
}
.content {
display: flex;
@@ -144,7 +155,7 @@
}
.submenu {
display: block;
visibility: visible;
animation: 0.3s ease;
@include mixins.unique-keyframes {
0% {
@@ -185,6 +196,7 @@
display: flex;
justify-content: center;
align-items: center;
flex: 0 0 auto;
margin-left: 4px;
width: 36px;
height: 36px;

21
src/components/common/Sidebar/Scroll.tsx
View File

@@ -1,33 +1,18 @@
import { PropsWithChildren } from 'react'
import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
export interface SidebarScrollElement {
refreshLayout(): void
}
const Scroll = forwardRef<SidebarScrollElement, PropsWithChildren>((props, ref) => {
useImperativeHandle<SidebarScrollElement, SidebarScrollElement>(ref, () => {
return {
refreshLayout() {
hideScrollbarRef.current?.refreshLayout()
}
}
})
const hideScrollbarRef = useRef<HideScrollbarElement>(null)
import HideScrollbar from '@/components/common/HideScrollbar'
const Scroll = (props: PropsWithChildren) => {
return (
<div className={'scroll'}>
<HideScrollbar
isShowVerticalScrollbar={true}
scrollbarWidth={2}
autoHideWaitingTime={800}
ref={hideScrollbarRef}
>
{props.children}
</HideScrollbar>
</div>
)
})
}
export default Scroll

9
src/pages/System/Group.tsx
View File

@@ -594,7 +594,7 @@ const Group = () => {
)
const addAndEditForm = (
<AntdForm form={form} disabled={isSubmitting}>
<AntdForm form={form} disabled={isSubmitting} layout={'vertical'}>
<AntdForm.Item hidden={!isDrawerEdit} name={'id'} label={'ID'}>
<AntdInput disabled />
</AntdForm.Item>
@@ -620,10 +620,10 @@ const Group = () => {
<AntdForm.Item
valuePropName={'checked'}
name={'enable'}
label={'启用'}
label={'状态'}
rules={[{ required: true, type: 'boolean' }]}
>
<AntdSwitch />
<AntdSwitch checkedChildren={'启用'} unCheckedChildren={'禁用'} />
</AntdForm.Item>
</AntdForm>
)
@@ -634,7 +634,7 @@ const Group = () => {
<HideScrollbar
style={{ padding: 30 }}
isShowVerticalScrollbar
autoHideWaitingTime={500}
autoHideWaitingTime={1000}
>
<FlexBox gap={20}>
{toolbar}
@@ -644,7 +644,6 @@ const Group = () => {
</FitFullscreen>
<AntdDrawer
title={isDrawerEdit ? '编辑用户组' : '添加用户组'}
width={'36vw'}
onClose={handleOnDrawerClose}
open={isDrawerOpen}
closable={!isSubmitting}

2
src/pages/System/Log.tsx
View File

@@ -287,7 +287,7 @@ const Log = () => {
<HideScrollbar
style={{ padding: 30 }}
isShowVerticalScrollbar
autoHideWaitingTime={500}
autoHideWaitingTime={1000}
>
<FlexBox gap={20}>
{toolbar}

9
src/pages/System/Role.tsx
View File

@@ -603,7 +603,7 @@ const Role = () => {
)
const addAndEditForm = (
<AntdForm form={form} disabled={isSubmitting}>
<AntdForm form={form} disabled={isSubmitting} layout={'vertical'}>
<AntdForm.Item hidden={!isDrawerEdit} name={'id'} label={'ID'}>
<AntdInput disabled />
</AntdForm.Item>
@@ -627,10 +627,10 @@ const Role = () => {
<AntdForm.Item
valuePropName={'checked'}
name={'enable'}
label={'启用'}
label={'状态'}
rules={[{ required: true, type: 'boolean' }]}
>
<AntdSwitch />
<AntdSwitch checkedChildren={'启用'} unCheckedChildren={'禁用'} />
</AntdForm.Item>
</AntdForm>
)
@@ -641,7 +641,7 @@ const Role = () => {
<HideScrollbar
style={{ padding: 30 }}
isShowVerticalScrollbar
autoHideWaitingTime={500}
autoHideWaitingTime={1000}
>
<FlexBox gap={20}>
{toolbar}
@@ -651,7 +651,6 @@ const Role = () => {
</FitFullscreen>
<AntdDrawer
title={isDrawerEdit ? '编辑角色' : '添加角色'}
width={'36vw'}
onClose={handleOnDrawerClose}
open={isDrawerOpen}
closable={!isSubmitting}

2
src/pages/System/Settings/index.tsx
View File

@@ -54,7 +54,7 @@ const Settings = () => {
return (
<>
<FitFullscreen data-component={'system-settings'}>
<HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
<HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
<FlexBox direction={'horizontal'} className={'root-content'}>
<FlexBox className={'root-col'}>
<Permission operationCode={'system:settings:query:base'}>

2
src/pages/System/Statistics/index.tsx
View File

@@ -45,7 +45,7 @@ const Statistics = () => {
return (
<>
<FitFullscreen data-component={'system-statistics'}>
<HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
<HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
<FlexBox direction={'horizontal'} className={'root-content'}>
<Permission operationCode={'system:statistics:query:usage'}>
<OnlineInfo />

32
src/pages/System/User.tsx
View File

@@ -758,12 +758,7 @@ const User = () => {
])
const addAndEditForm = (
<AntdForm
form={form}
disabled={isDrawerSubmitting}
labelCol={{ span: 6 }}
wrapperCol={{ span: 18 }}
>
<AntdForm form={form} disabled={isDrawerSubmitting} layout={'vertical'}>
<div
style={{
display: 'flex',
@@ -847,16 +842,11 @@ const User = () => {
}))}
/>
</AntdForm.Item>
<AntdForm.Item name={'verified'} label={'已验证'}>
<AntdSwitch />
<AntdForm.Item name={'verified'} label={'验证'}>
<AntdSwitch checkedChildren={'已验证'} unCheckedChildren={'未验证'} />
</AntdForm.Item>
<AntdForm.Item
valuePropName={'checked'}
name={'locking'}
label={'锁定'}
rules={[{ type: 'boolean' }]}
>
<AntdSwitch />
<AntdForm.Item name={'locking'} label={'锁定'}>
<AntdSwitch checkedChildren={'已锁定'} unCheckedChildren={'未锁定'} />
</AntdForm.Item>
<AntdForm.Item
name={'expiration'}
@@ -888,13 +878,8 @@ const User = () => {
style={{ width: '100%' }}
/>
</AntdForm.Item>
<AntdForm.Item
valuePropName={'checked'}
name={'enable'}
label={'启用'}
rules={[{ type: 'boolean' }]}
>
<AntdSwitch />
<AntdForm.Item name={'enable'} label={'启用'}>
<AntdSwitch checkedChildren={'启用'} unCheckedChildren={'禁用'} />
</AntdForm.Item>
</>
)}
@@ -1012,7 +997,7 @@ const User = () => {
<HideScrollbar
style={{ padding: 30 }}
isShowVerticalScrollbar
autoHideWaitingTime={500}
autoHideWaitingTime={1000}
>
<FlexBox gap={20}>
{toolbar}
@@ -1022,7 +1007,6 @@ const User = () => {
</FitFullscreen>
<AntdDrawer
title={isDrawerEdit ? '编辑用户' : '新增用户'}
width={'36vw'}
onClose={handleOnDrawerClose}
open={isDrawerOpen}
closable={!isDrawerSubmitting}

2
src/pages/System/index.tsx
View File

@@ -65,7 +65,7 @@ const System = () => {
return (
<>
<FitFullscreen data-component={'system'}>
<HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
<HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
<FlexBox direction={'horizontal'} className={'root-content'}>
<Permission path={'/system/statistics'}>
<CommonCard icon={IconOxygenAnalysis} url={'statistics'}>