Optimize layout and stylesheet

src/assets/css/components/common/sidebar.scss

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

src/components/common/Sidebar/Scroll.tsx

@@ -1,33 +1,18 @@
 import { PropsWithChildren } from 'react'
-import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
+import HideScrollbar 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)
 
+const Scroll = (props: PropsWithChildren) => {
     return (
         <div className={'scroll'}>
             <HideScrollbar
                 isShowVerticalScrollbar={true}
                 scrollbarWidth={2}
                 autoHideWaitingTime={800}
-                ref={hideScrollbarRef}
             >
                 {props.children}
             </HideScrollbar>
         </div>
     )
-})
+}
 
 export default Scroll

src/pages/System/Group.tsx

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

src/pages/System/Log.tsx

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

src/pages/System/Role.tsx

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

src/pages/System/Settings/index.tsx

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

src/pages/System/Statistics/index.tsx

@@ -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 />

src/pages/System/User.tsx

@@ -758,12 +758,7 @@ const User = () => {
     ])
 
     const addAndEditForm = (
-        <AntdForm
+        <AntdForm form={form} disabled={isDrawerSubmitting} layout={'vertical'}>
-            form={form}
-            disabled={isDrawerSubmitting}
-            labelCol={{ span: 6 }}
-            wrapperCol={{ span: 18 }}
-        >
             <div
                 style={{
                     display: 'flex',
@@ -847,16 +842,11 @@ const User = () => {
                             }))}
                         />
                     </AntdForm.Item>
-                    <AntdForm.Item name={'verified'} label={'已验证'}>
+                    <AntdForm.Item name={'verified'} label={'验证'}>
-                        <AntdSwitch />
+                        <AntdSwitch checkedChildren={'已验证'} unCheckedChildren={'未验证'} />
                     </AntdForm.Item>
-                    <AntdForm.Item
+                    <AntdForm.Item name={'locking'} label={'锁定'}>
-                        valuePropName={'checked'}
+                        <AntdSwitch checkedChildren={'已锁定'} unCheckedChildren={'未锁定'} />
-                        name={'locking'}
-                        label={'锁定'}
-                        rules={[{ type: 'boolean' }]}
-                    >
-                        <AntdSwitch />
                     </AntdForm.Item>
                     <AntdForm.Item
                         name={'expiration'}
@@ -888,13 +878,8 @@ const User = () => {
                             style={{ width: '100%' }}
                         />
                     </AntdForm.Item>
-                    <AntdForm.Item
+                    <AntdForm.Item name={'enable'} label={'启用'}>
-                        valuePropName={'checked'}
+                        <AntdSwitch checkedChildren={'启用'} unCheckedChildren={'禁用'} />
-                        name={'enable'}
-                        label={'启用'}
-                        rules={[{ type: 'boolean' }]}
-                    >
-                        <AntdSwitch />
                     </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}

src/pages/System/index.tsx

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