src/components/common/Sidebar/Footer.tsx

@@ -6,7 +6,7 @@ import { useUpdatedEffect } from '@/util/hooks'
 import { getAvatar, getLoginStatus, getNickname, removeToken } from '@/util/auth'
 import { r_auth_logout } from '@/services/auth'
 
-const SidebarFooter: React.FC = () => {
+const Footer: React.FC = () => {
     const matches = useMatches()
     const lastMatch = matches.reduce((_, second) => second)
     const location = useLocation()
@@ -94,4 +94,4 @@ const SidebarFooter: React.FC = () => {
     )
 }
 
-export default SidebarFooter
+export default Footer

src/components/common/Sidebar/Item.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Icon from '@ant-design/icons'
-import SidebarSubmenu from '@/components/common/sidebar_/SidebarSubmenu'
+import Submenu from '@/components/common/Sidebar/Submenu'
 
 type ItemProps = {
     icon?: IconComponent
@@ -10,7 +10,7 @@ type ItemProps = {
     end?: boolean
 }
 
-const SidebarItem: React.FC<ItemProps> = (props) => {
+const Item: React.FC<ItemProps> = (props) => {
     const [submenuTop, setSubmenuTop] = useState(0)
     const [submenuLeft, setSubmenuLeft] = useState(0)
 
@@ -50,12 +50,12 @@ const SidebarItem: React.FC<ItemProps> = (props) => {
                 </NavLink>
             </div>
             {props.children ? (
-                <SidebarSubmenu submenuTop={submenuTop} submenuLeft={submenuLeft}>
+                <Submenu submenuTop={submenuTop} submenuLeft={submenuLeft}>
                     {props.children}
-                </SidebarSubmenu>
+                </Submenu>
             ) : undefined}
         </li>
     )
 }
 
-export default SidebarItem
+export default Item

src/components/common/Sidebar/ItemList.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const ItemList: React.FC<React.PropsWithChildren> = (props) => {
+    return <ul>{props.children}</ul>
+}
+
+export default ItemList

src/components/common/Sidebar/Scroll.tsx

@@ -5,7 +5,7 @@ export interface SidebarScrollElement {
     refreshLayout(): void
 }
 
-const SidebarScroll = forwardRef<SidebarScrollElement, React.PropsWithChildren>((props, ref) => {
+const Scroll = forwardRef<SidebarScrollElement, React.PropsWithChildren>((props, ref) => {
     useImperativeHandle<SidebarScrollElement, SidebarScrollElement>(ref, () => {
         return {
             refreshLayout() {
@@ -30,4 +30,4 @@ const SidebarScroll = forwardRef<SidebarScrollElement, React.PropsWithChildren>(
     )
 })
 
-export default SidebarScroll
+export default Scroll

src/components/common/Sidebar/Separate.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 
-const SidebarSeparate: React.FC<
+const Separate: React.FC<
     React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
 > = ({ className, ...props }) => {
     return <div className={`separate ${className ? ` ${className}` : ''}`} {...props} />
 }
 
-export default SidebarSeparate
+export default Separate

src/components/common/Sidebar/Submenu.tsx

@@ -5,7 +5,7 @@ interface SidebarSubmenuProps extends React.PropsWithChildren {
     submenuLeft: number
 }
 
-const SidebarSubmenu: React.FC<SidebarSubmenuProps> = (props) => {
+const Submenu: React.FC<SidebarSubmenuProps> = (props) => {
     return (
         <ul
             className={'submenu'}
@@ -19,4 +19,4 @@ const SidebarSubmenu: React.FC<SidebarSubmenuProps> = (props) => {
     )
 }
 
-export default SidebarSubmenu
+export default Submenu

src/components/common/Sidebar/index.tsx

@@ -2,8 +2,12 @@ import React from 'react'
 import Icon from '@ant-design/icons'
 import '@/assets/css/components/common/sidebar.scss'
 import { getLocalStorage, setLocalStorage } from '@/util/browser'
-import SidebarSeparate from '@/components/common/sidebar_/SidebarSeparate'
-import SidebarFooter from '@/components/common/sidebar_/SidebarFooter'
+import Item from '@/components/common/Sidebar/Item'
+import ItemList from '@/components/common/Sidebar/ItemList'
+import Scroll from '@/components/common/Sidebar/Scroll'
+import Separate from '@/components/common/Sidebar/Separate'
+import Submenu from '@/components/common/Sidebar/Submenu'
+import Footer from '@/components/common/Sidebar/Footer'
 
 interface SidebarProps extends React.PropsWithChildren {
     title: string
@@ -12,7 +16,14 @@ interface SidebarProps extends React.PropsWithChildren {
     bottomFixed?: React.ReactNode
 }
 
-const Sidebar: React.FC<SidebarProps> = (props) => {
+const Sidebar: React.FC<SidebarProps> & {
+    Item: typeof Item
+    ItemList: typeof ItemList
+    Scroll: typeof Scroll
+    Separate: typeof Separate
+    Submenu: typeof Submenu
+    Footer: typeof Footer
+} = (props) => {
     const [hideSidebar, setHideSidebar] = useState(getLocalStorage('HIDE_SIDEBAR') === 'true')
 
     const switchSidebar = () => {
@@ -33,16 +44,23 @@ const Sidebar: React.FC<SidebarProps> = (props) => {
                     </span>
                     <span className={'text'}>{props.title}</span>
                 </div>
-                <SidebarSeparate style={{ marginTop: 0 }} />
+                <Separate style={{ marginTop: 0 }} />
                 <div className={'content'}>{props.children}</div>
                 <div className={'bottom-fixed'} style={{ flex: 'none' }}>
                     {props.bottomFixed}
                 </div>
-                <SidebarSeparate style={{ marginTop: 0, marginBottom: 0 }} />
-                <SidebarFooter />
+                <Separate style={{ marginTop: 0, marginBottom: 0 }} />
+                <Footer />
             </div>
         </>
     )
 }
 
+Sidebar.Item = Item
+Sidebar.ItemList = ItemList
+Sidebar.Scroll = Scroll
+Sidebar.Separate = Separate
+Sidebar.Submenu = Submenu
+Sidebar.Footer = Footer
+
 export default Sidebar

src/components/common/sidebar_/SidebarItemList.tsx

@@ -1,7 +0,0 @@
-import React from 'react'
-
-const SidebarItemList: React.FC<React.PropsWithChildren> = (props) => {
-    return <ul>{props.children}</ul>
-}
-
-export default SidebarItemList

src/pages/Sign/index.tsx

@@ -4,10 +4,10 @@ import { useUpdatedEffect } from '@/util/hooks'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import FitCenter from '@/components/common/FitCenter'
 import FlexBox from '@/components/common/FlexBox'
-import SignUp from '@/pages/sign_/SignUp'
-import Verify from '@/pages/sign_/Verify'
-import Forget from '@/pages/sign_/Forget'
-import SignIn from '@/pages/sign_/SignIn'
+import SignUp from '@/pages/Sign/SignUp'
+import Verify from '@/pages/Sign/Verify'
+import Forget from '@/pages/Sign/Forget'
+import SignIn from '@/pages/Sign/SignIn'
 
 const Sign: React.FC = () => {
     const lastPage = useRef('none')

src/pages/System/Settings/Base.tsx

@@ -2,9 +2,9 @@ import React from 'react'
 import { useUpdatedEffect } from '@/util/hooks'
 import { hasPermission } from '@/util/auth'
 import { r_sys_settings_base_get, r_sys_settings_base_update } from '@/services/system'
-import { SettingsCard } from '@/pages/system_/settings_'
+import { SettingsCard } from '@/pages/System/Settings'
 
-const BaseSettings: React.FC = () => {
+const Base: React.FC = () => {
     const [baseForm] = AntdForm.useForm<BaseSettingsParam>()
     const baseFormValues = AntdForm.useWatch([], baseForm)
     const [loading, setLoading] = useState(false)
@@ -78,4 +78,4 @@ const BaseSettings: React.FC = () => {
     )
 }
 
-export default BaseSettings
+export default Base

src/pages/System/Settings/Mail.tsx

@@ -7,9 +7,9 @@ import {
     r_sys_settings_mail_send,
     r_sys_settings_mail_update
 } from '@/services/system'
-import { SettingsCard } from '@/pages/system_/settings_'
+import { SettingsCard } from '@/pages/System/Settings'
 
-const MailSettings: React.FC = () => {
+const Mail: React.FC = () => {
     const [modal, contextHolder] = AntdModal.useModal()
     const [mailForm] = AntdForm.useForm<MailSettingsParam>()
     const mailFormValues = AntdForm.useWatch([], mailForm)
@@ -152,4 +152,4 @@ const MailSettings: React.FC = () => {
     )
 }
 
-export default MailSettings
+export default Mail

src/pages/System/Settings/SensitiveWord.tsx

@@ -8,9 +8,9 @@ import {
     r_sys_settings_sensitive_get,
     r_sys_settings_sensitive_update
 } from '@/services/system'
-import { SettingsCard } from '@/pages/system_/settings_'
+import { SettingsCard } from '@/pages/System/Settings'
 
-const SensitiveWordSettings: React.FC = () => {
+const SensitiveWord: React.FC = () => {
     const [dataSource, setDataSource] = useState<SensitiveWordVo[]>()
     const [targetKeys, setTargetKeys] = useState<string[]>([])
     const [selectedKeys, setSelectedKeys] = useState<string[]>([])
@@ -160,4 +160,4 @@ const SensitiveWordSettings: React.FC = () => {
     )
 }
 
-export default SensitiveWordSettings
+export default SensitiveWord

src/pages/System/Settings/index.tsx

@@ -7,9 +7,9 @@ import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
 import LoadingMask from '@/components/common/LoadingMask'
 import Permission from '@/components/common/Permission'
-import BaseSettings from '@/pages/system_/settings_/BaseSettings'
-import MailSettings from '@/pages/system_/settings_/MailSettings'
-import SensitiveWordSettings from '@/pages/system_/settings_/SensitiveWordSettings'
+import Base from '@/pages/System/Settings/Base'
+import Mail from '@/pages/System/Settings/Mail'
+import SensitiveWord from '@/pages/System/Settings/SensitiveWord'
 
 interface SettingsCardProps extends React.PropsWithChildren {
     icon: IconComponent
@@ -58,15 +58,15 @@ const Settings: React.FC = () => {
                     <FlexBox direction={'horizontal'} className={'root-content'}>
                         <FlexBox className={'root-col'}>
                             <Permission operationCode={'system:settings:query:base'}>
-                                <BaseSettings />
+                                <Base />
                             </Permission>
                             <Permission operationCode={'system:settings:query:sensitive'}>
-                                <SensitiveWordSettings />
+                                <SensitiveWord />
                             </Permission>
                         </FlexBox>
                         <FlexBox className={'root-col'}>
                             <Permission operationCode={'system:settings:query:mail'}>
-                                <MailSettings />
+                                <Mail />
                             </Permission>
                         </FlexBox>
                     </FlexBox>

src/pages/System/Statistics/ActiveInfo.tsx

@@ -5,8 +5,8 @@ import { useUpdatedEffect } from '@/util/hooks'
 import { getTimesBetweenTwoTimes } from '@/util/datetime'
 import { r_sys_statistics_active } from '@/services/system'
 import FlexBox from '@/components/common/FlexBox'
-import { getTooltipTimeFormatter, lineEChartsBaseOption } from '@/pages/system_/statistics_/shared'
-import { CommonCard } from '@/pages/system_/statistics_'
+import { getTooltipTimeFormatter, lineEChartsBaseOption } from '@/pages/System/Statistics/shared'
+import { CommonCard } from '@/pages/System/Statistics'
 
 const ActiveInfo: React.FC = () => {
     const activeInfoDivRef = useRef<HTMLDivElement>(null)

src/pages/System/Statistics/CPUInfo.tsx

@@ -8,8 +8,8 @@ import {
     barDefaultSeriesOption,
     barEChartsBaseOption,
     EChartsOption
-} from '@/pages/system_/statistics_/shared'
-import { CommonCard } from '@/pages/system_/statistics_'
+} from '@/pages/System/Statistics/shared'
+import { CommonCard } from '@/pages/System/Statistics'
 
 const CPUInfo: React.FC = () => {
     const keyDivRef = useRef<HTMLDivElement>(null)

src/pages/System/Statistics/HardwareInfo.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { useUpdatedEffect } from '@/util/hooks'
 import { r_sys_statistics_hardware } from '@/services/system'
 import FlexBox from '@/components/common/FlexBox'
-import { CommonCard } from '@/pages/system_/statistics_'
+import { CommonCard } from '@/pages/System/Statistics'
 
 const HardwareInfo: React.FC = () => {
     const [hardwareInfoData, setHardwareInfoData] = useState<HardwareInfoVo>()

src/pages/System/Statistics/OnlineInfo.tsx

@@ -5,8 +5,8 @@ import { useUpdatedEffect } from '@/util/hooks'
 import { getTimesBetweenTwoTimes } from '@/util/datetime'
 import { r_sys_statistics_online } from '@/services/system'
 import FlexBox from '@/components/common/FlexBox'
-import { getTooltipTimeFormatter, lineEChartsBaseOption } from '@/pages/system_/statistics_/shared'
-import { CommonCard } from '@/pages/system_/statistics_'
+import { getTooltipTimeFormatter, lineEChartsBaseOption } from '@/pages/System/Statistics/shared'
+import { CommonCard } from '@/pages/System/Statistics'
 
 const OnlineInfo: React.FC = () => {
     const onlineInfoDivRef = useRef<HTMLDivElement>(null)

src/pages/System/Statistics/SoftwareInfo.tsx

@@ -3,7 +3,7 @@ import { useUpdatedEffect } from '@/util/hooks'
 import { utcToLocalTime } from '@/util/datetime'
 import { r_sys_statistics_software } from '@/services/system'
 import FlexBox from '@/components/common/FlexBox'
-import { CommonCard } from '@/pages/system_/statistics_'
+import { CommonCard } from '@/pages/System/Statistics'
 
 const SoftwareInfo: React.FC = () => {
     const [softwareInfoData, setSoftwareInfoData] = useState<SoftwareInfoVo>()

src/pages/System/Statistics/StorageInfo.tsx

@@ -9,8 +9,8 @@ import {
     barDefaultSeriesOption,
     barEChartsBaseOption,
     EChartsOption
-} from '@/pages/system_/statistics_/shared'
-import { CommonCard } from '@/pages/system_/statistics_'
+} from '@/pages/System/Statistics/shared'
+import { CommonCard } from '@/pages/System/Statistics'
 
 const StorageInfo: React.FC = () => {
     const keyDivRef = useRef<HTMLDivElement>(null)

src/pages/System/Statistics/index.tsx

@@ -7,12 +7,12 @@ import FitFullscreen from '@/components/common/FitFullscreen'
 import HideScrollbar from '@/components/common/HideScrollbar'
 import LoadingMask from '@/components/common/LoadingMask'
 import Permission from '@/components/common/Permission'
-import OnlineInfo from '@/pages/system_/statistics_/OnlineInfo'
-import ActiveInfo from '@/pages/system_/statistics_/ActiveInfo'
-import SoftwareInfo from '@/pages/system_/statistics_/SoftwareInfo'
-import HardwareInfo from '@/pages/system_/statistics_/HardwareInfo'
-import CPUInfo from '@/pages/system_/statistics_/CPUInfo'
-import StorageInfo from '@/pages/system_/statistics_/StorageInfo'
+import OnlineInfo from '@/pages/System/Statistics/OnlineInfo'
+import ActiveInfo from '@/pages/System/Statistics/ActiveInfo'
+import SoftwareInfo from '@/pages/System/Statistics/SoftwareInfo'
+import HardwareInfo from '@/pages/System/Statistics/HardwareInfo'
+import CPUInfo from '@/pages/System/Statistics/CPUInfo'
+import StorageInfo from '@/pages/System/Statistics/StorageInfo'
 
 interface CommonCardProps extends React.PropsWithChildren {
     icon: IconComponent

src/pages/SystemFramework.tsx

@@ -2,9 +2,7 @@ import React from 'react'
 import '@/assets/css/pages/system-framework.scss'
 import { getSystemRouteJson } from '@/router/system'
 import FitFullscreen from '@/components/common/FitFullscreen'
-import Sidebar from 'src/components/common/sidebar_'
-import SidebarItemList from '@/components/common/sidebar_/SidebarItemList'
-import SidebarItem from '@/components/common/sidebar_/SidebarItem'
+import Sidebar from '@/components/common/Sidebar'
 import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 
 const SystemFramework: React.FC = () => {
@@ -13,10 +11,10 @@ const SystemFramework: React.FC = () => {
             <FitFullscreen data-component={'system-framework'} className={'flex-horizontal'}>
                 <div className={'left-panel'}>
                     <Sidebar title={'系统配置'}>
-                        <SidebarItemList>
+                        <Sidebar.ItemList>
                             {getSystemRouteJson().map((value) => {
                                 return value.menu ? (
-                                    <SidebarItem
+                                    <Sidebar.Item
                                         end={value.id === 'system' ? true : undefined}
                                         path={value.absolutePath}
                                         icon={value.icon}
@@ -25,7 +23,7 @@ const SystemFramework: React.FC = () => {
                                     />
                                 ) : undefined
                             })}
-                        </SidebarItemList>
+                        </Sidebar.ItemList>
                     </Sidebar>
                 </div>
                 <div className={'right-panel'}>

src/pages/ToolsFramework.tsx

@@ -2,11 +2,8 @@ import React from 'react'
 import '@/assets/css/pages/tools-framework.scss'
 import { tools } from '@/router/tools'
 import FitFullscreen from '@/components/common/FitFullscreen'
-import SidebarScroll, { SidebarScrollElement } from '@/components/common/sidebar_/SidebarScroll'
-import Sidebar from 'src/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 Sidebar from '@/components/common/Sidebar'
+import { SidebarScrollElement } from '@/components/common/Sidebar/Scroll'
 import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 
 const ToolsFramework: React.FC = () => {
@@ -23,23 +20,23 @@ const ToolsFramework: React.FC = () => {
             <FitFullscreen data-component={'tools-framework'} className={'flex-horizontal'}>
                 <div className={'left-panel'}>
                     <Sidebar title={'氧工具'} onSidebarSwitch={handleOnSidebarSwitch}>
-                        <SidebarItemList>
-                            <SidebarItem end path={''} icon={tools[0].icon} text={tools[0].name} />
-                            <SidebarItem
+                        <Sidebar.ItemList>
+                            <Sidebar.Item end path={''} icon={tools[0].icon} text={tools[0].name} />
+                            <Sidebar.Item
                                 end
                                 path={'all'}
                                 icon={tools[1].icon}
                                 text={tools[1].name}
                             />
-                        </SidebarItemList>
-                        <SidebarSeparate style={{ marginBottom: 0 }} />
-                        <SidebarScroll ref={sidebarScrollRef}>
-                            <SidebarItemList>
+                        </Sidebar.ItemList>
+                        <Sidebar.Separate style={{ marginBottom: 0 }} />
+                        <Sidebar.Scroll ref={sidebarScrollRef}>
+                            <Sidebar.ItemList>
                                 {tools.map((tool) => {
                                     return tool.menu &&
                                         tool.id !== 'tools' &&
                                         tool.id !== 'tools-all' ? (
-                                        <SidebarItem
+                                        <Sidebar.Item
                                             path={tool.absolutePath}
                                             icon={tool.icon}
                                             text={tool.name}
@@ -48,7 +45,7 @@ const ToolsFramework: React.FC = () => {
                                             {tool.children
                                                 ? tool.children.map((subTool) => {
                                                       return (
-                                                          <SidebarItem
+                                                          <Sidebar.Item
                                                               path={subTool.absolutePath}
                                                               text={subTool.name}
                                                               key={subTool.id}
@@ -56,11 +53,11 @@ const ToolsFramework: React.FC = () => {
                                                       )
                                                   })
                                                 : undefined}
-                                        </SidebarItem>
+                                        </Sidebar.Item>
                                     ) : undefined
                                 })}
-                            </SidebarItemList>
-                        </SidebarScroll>
+                            </Sidebar.ItemList>
+                        </Sidebar.Scroll>
                     </Sidebar>
                 </div>
                 <div className={'right-panel'}>

src/pages/UserFramework.tsx

@@ -3,9 +3,7 @@ import '@/assets/css/pages/user-framework.scss'
 import user from '@/router/user'
 import { hasPathPermission } from '@/util/auth'
 import FitFullscreen from '@/components/common/FitFullscreen'
-import Sidebar from 'src/components/common/sidebar_'
-import SidebarItemList from '@/components/common/sidebar_/SidebarItemList'
-import SidebarItem from '@/components/common/sidebar_/SidebarItem'
+import Sidebar from '@/components/common/Sidebar'
 import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 
 const ToolsFramework: React.FC = () => {
@@ -16,22 +14,26 @@ const ToolsFramework: React.FC = () => {
                     <Sidebar
                         title={'个人中心'}
                         bottomFixed={
-                            <SidebarItemList>
+                            <Sidebar.ItemList>
                                 {hasPathPermission('/system') ? (
-                                    <SidebarItem
+                                    <Sidebar.Item
                                         path={'/system'}
                                         icon={IconOxygenSetting}
                                         text={'系统配置'}
                                     />
                                 ) : undefined}
-                                <SidebarItem path={'/'} icon={IconOxygenBack} text={'回到氧工具'} />
-                            </SidebarItemList>
+                                <Sidebar.Item
+                                    path={'/'}
+                                    icon={IconOxygenBack}
+                                    text={'回到氧工具'}
+                                />
+                            </Sidebar.ItemList>
                         }
                     >
-                        <SidebarItemList>
+                        <Sidebar.ItemList>
                             {user.map((value) => {
                                 return value.menu ? (
-                                    <SidebarItem
+                                    <Sidebar.Item
                                         end={value.id === 'user' ? true : undefined}
                                         path={value.absolutePath}
                                         icon={value.icon}
@@ -40,7 +42,7 @@ const ToolsFramework: React.FC = () => {
                                     />
                                 ) : undefined
                             })}
-                        </SidebarItemList>
+                        </Sidebar.ItemList>
                     </Sidebar>
                 </div>
                 <div className={'right-panel'}>

src/router/index.tsx

@@ -5,7 +5,7 @@ import user from '@/router/user'
 import tools from '@/router/tools'
 import { getAuthRoute, mapJsonToRoute, setTitle } from '@/util/route'
 
-const lazySignPage = React.lazy(() => import('src/pages/sign_'))
+const lazySignPage = React.lazy(() => import('@/pages/Sign'))
 
 const root: RouteJsonObject[] = [
     {

src/router/system.tsx

@@ -6,18 +6,18 @@ const system: RouteJsonObject[] = [
         path: '',
         absolutePath: '/system',
         id: 'system',
-        component: React.lazy(() => import('src/pages/system_')),
+        component: React.lazy(() => import('@/pages/System')),
         name: '系统管理',
-        icon: React.lazy(() => import('~icons/oxygen/setting.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/setting')),
         menu: true
     },
     {
         path: 'statistics',
         absolutePath: '/system/statistics',
         id: 'system-statistics',
-        component: React.lazy(() => import('@/pages/system_/statistics_')),
+        component: React.lazy(() => import('@/pages/System/Statistics')),
         name: '系统概况',
-        icon: React.lazy(() => import('~icons/oxygen/chart.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/chart')),
         menu: true,
         autoHide: true
     },
@@ -25,9 +25,9 @@ const system: RouteJsonObject[] = [
         path: 'settings',
         absolutePath: '/system/settings',
         id: 'system-settings',
-        component: React.lazy(() => import('@/pages/system_/settings_')),
+        component: React.lazy(() => import('@/pages/System/Settings')),
         name: '系统设置',
-        icon: React.lazy(() => import('~icons/oxygen/option.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/option')),
         menu: true,
         autoHide: true
     },
@@ -35,9 +35,9 @@ const system: RouteJsonObject[] = [
         path: 'user',
         absolutePath: '/system/user',
         id: 'system-user',
-        component: React.lazy(() => import('@/pages/system_/User')),
+        component: React.lazy(() => import('@/pages/System/User')),
         name: '用户管理',
-        icon: React.lazy(() => import('~icons/oxygen/user.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/user')),
         menu: true,
         autoHide: true
     },
@@ -45,9 +45,9 @@ const system: RouteJsonObject[] = [
         path: 'role',
         absolutePath: '/system/role',
         id: 'system-role',
-        component: React.lazy(() => import('@/pages/system_/Role')),
+        component: React.lazy(() => import('@/pages/System/Role')),
         name: '角色管理',
-        icon: React.lazy(() => import('~icons/oxygen/role.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/role')),
         menu: true,
         autoHide: true
     },
@@ -55,9 +55,9 @@ const system: RouteJsonObject[] = [
         path: 'group',
         absolutePath: '/system/group',
         id: 'system-group',
-        component: React.lazy(() => import('@/pages/system_/Group')),
+        component: React.lazy(() => import('@/pages/System/Group')),
         name: '群组管理',
-        icon: React.lazy(() => import('~icons/oxygen/group.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/group')),
         menu: true,
         autoHide: true
     },
@@ -65,9 +65,9 @@ const system: RouteJsonObject[] = [
         path: 'log',
         absolutePath: '/system/log',
         id: 'system-log',
-        component: React.lazy(() => import('@/pages/system_/Log')),
+        component: React.lazy(() => import('@/pages/System/Log')),
         name: '系统日志',
-        icon: React.lazy(() => import('~icons/oxygen/log.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/log')),
         menu: true,
         autoHide: true
     },

src/router/tools.tsx

@@ -5,9 +5,9 @@ export const tools: RouteJsonObject[] = [
         path: '',
         absolutePath: '/',
         id: 'tools',
-        component: React.lazy(() => import('src/pages/tools_')),
+        component: React.lazy(() => import('@/pages/Tools')),
         name: '主页',
-        icon: React.lazy(() => import('~icons/oxygen/home.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/home')),
         menu: true,
         auth: false
     },
@@ -15,10 +15,10 @@ export const tools: RouteJsonObject[] = [
         path: 'all',
         absolutePath: '/all',
         id: 'tools-all',
-        component: React.lazy(() => import('src/pages/tools_')),
+        component: React.lazy(() => import('@/pages/Tools')),
         name: '全部工具',
         titlePostfix: ' - 全部工具',
-        icon: React.lazy(() => import('~icons/oxygen/tool.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/tool')),
         menu: true,
         auth: false
     },
@@ -26,9 +26,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation',
         absolutePath: '/translation',
         id: 'tools-translation',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false,
         children: [
@@ -37,7 +37,7 @@ export const tools: RouteJsonObject[] = [
                 absolutePath: '/translation/1',
                 id: '1',
                 name: '翻译1',
-                icon: React.lazy(() => import('~icons/oxygen/logo.jsx')),
+                icon: React.lazy(() => import('~icons/oxygen/logo')),
                 menu: true,
                 auth: false
             },
@@ -55,9 +55,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation-',
         absolutePath: '/translation-',
         id: 'tools-translation-',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false,
         children: [
@@ -83,9 +83,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--',
         absolutePath: '/translation--',
         id: 'tools-translation--',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -93,9 +93,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--1',
         absolutePath: '/translation--1',
         id: 'tools-translation--1',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--1',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -103,9 +103,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--2',
         absolutePath: '/translation--2',
         id: 'tools-translation--2',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--2',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -113,9 +113,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--3',
         absolutePath: '/translation--3',
         id: 'tools-translation--3',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--3',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -123,9 +123,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--4',
         absolutePath: '/translation--4',
         id: 'tools-translation--4',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--4',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -133,9 +133,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--5',
         absolutePath: '/translation--5',
         id: 'tools-translation--5',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--5',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -143,9 +143,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--6',
         absolutePath: '/translation--6',
         id: 'tools-translation--6',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--6',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -153,9 +153,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--7',
         absolutePath: '/translation--7',
         id: 'tools-translation--7',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--7',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -163,9 +163,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--8',
         absolutePath: '/translation--8',
         id: 'tools-translation--8',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--8',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -173,9 +173,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--9',
         absolutePath: '/translation--9',
         id: 'tools-translation--9',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--9',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -183,9 +183,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--10',
         absolutePath: '/translation--10',
         id: 'tools-translation--10',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--10',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -193,9 +193,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--1-',
         absolutePath: '/translation--1-',
         id: 'tools-translation--1-',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--1-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -203,9 +203,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--2-',
         absolutePath: '/translation--2-',
         id: 'tools-translation--2-',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--2-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -213,9 +213,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--3-',
         absolutePath: '/translation--3-',
         id: 'tools-translation--3-',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--3-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -223,9 +223,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--4-',
         absolutePath: '/translation--4-',
         id: 'tools-translation--4-',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--4-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -233,9 +233,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--5-',
         absolutePath: '/translation--5-',
         id: 'tools-translation--5-',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--5-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -243,9 +243,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--6-',
         absolutePath: '/translation--6-',
         id: 'tools-translation--6-',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--6-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -253,9 +253,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--7-',
         absolutePath: '/translation--7-',
         id: 'tools-translation--7-',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--7-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -263,9 +263,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--8-',
         absolutePath: '/translation--8-',
         id: 'tools-translation--8-',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--8-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -273,9 +273,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--9-',
         absolutePath: '/translation--9-',
         id: 'tools-translation--9-',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--9-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -283,9 +283,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--10-',
         absolutePath: '/translation--10-',
         id: 'tools-translation--10-',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--10-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false,
         children: [

src/router/user.tsx

@@ -5,9 +5,9 @@ const user: RouteJsonObject[] = [
         path: '',
         absolutePath: '/user',
         id: 'user',
-        component: React.lazy(() => import('src/pages/user_')),
+        component: React.lazy(() => import('@/pages/User')),
         name: '个人档案',
-        icon: React.lazy(() => import('~icons/oxygen/user.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/user')),
         menu: true
     },
     {