diff --git a/src/App.tsx b/src/App.tsx
index 82ce06b..bd05da7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { getRouter } from '@/router'
 import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 
@@ -6,7 +5,7 @@ export const AppContext = createContext<{ refreshRouter: () => void }>({
     refreshRouter: () => undefined
 })
 
-const App: React.FC = () => {
+const App = () => {
     const [routerState, setRouterState] = useState(getRouter)
 
     return (
diff --git a/src/ant-design.d.ts b/src/ant-design.d.ts
index d3f35af..17e849d 100644
--- a/src/ant-design.d.ts
+++ b/src/ant-design.d.ts
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { ComponentType, ForwardRefExoticComponent, Key, SVGProps } from 'react'
 import { CustomIconComponentProps } from '@ant-design/icons/es/components/Icon'
 import { TablePaginationConfig } from 'antd/lib'
 import { ColumnsType, FilterValue, SorterResult, SortOrder } from 'antd/es/table/interface'
@@ -7,8 +7,8 @@ import type { DataNode } from 'antd/es/tree'
 
 declare global {
     type IconComponent =
-        | React.ComponentType<CustomIconComponentProps | React.SVGProps<SVGSVGElement>>
-        | React.ForwardRefExoticComponent<CustomIconComponentProps>
+        | ComponentType<CustomIconComponentProps | SVGProps<SVGSVGElement>>
+        | ForwardRefExoticComponent<CustomIconComponentProps>
 
     type _TablePaginationConfig = TablePaginationConfig
 
@@ -18,7 +18,7 @@ declare global {
     type _SortOrder = SortOrder
     type _CheckboxChangeEvent = CheckboxChangeEvent
     interface _DataNode extends DataNode {
-        value: React.Key
+        value: Key
         fullTitle?: string
         parentId?: number
         children?: _DataNode[]
diff --git a/src/components/Playground/CodeEditor/Editor/index.tsx b/src/components/Playground/CodeEditor/Editor/index.tsx
index 2e8e6e0..6e8e483 100644
--- a/src/components/Playground/CodeEditor/Editor/index.tsx
+++ b/src/components/Playground/CodeEditor/Editor/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { editor, Selection } from 'monaco-editor'
 import MonacoEditor, { Monaco } from '@monaco-editor/react'
 import '@/components/Playground/CodeEditor/Editor/editor.scss'
@@ -19,7 +18,7 @@ interface EditorProps {
     onJumpFile?: (fileName: string) => void
 }
 
-const Editor: React.FC<EditorProps> = ({
+const Editor = ({
     tsConfig,
     files = {},
     selectedFileName = '',
@@ -28,7 +27,7 @@ const Editor: React.FC<EditorProps> = ({
     onChange,
     options,
     onJumpFile
-}) => {
+}: EditorProps) => {
     const editorRef = useRef<editor.IStandaloneCodeEditor>()
     const monacoRef = useRef<Monaco>()
     const { doOpenEditor, loadJsxSyntaxHighlight, autoLoadExtraLib } = useEditor()
diff --git a/src/components/Playground/CodeEditor/FileSelector/Item.tsx b/src/components/Playground/CodeEditor/FileSelector/Item.tsx
index d81b507..4fe7c1f 100644
--- a/src/components/Playground/CodeEditor/FileSelector/Item.tsx
+++ b/src/components/Playground/CodeEditor/FileSelector/Item.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { Dispatch, SetStateAction, KeyboardEvent, ChangeEvent, MouseEvent } from 'react'
 
 interface ItemProps {
     className?: string
@@ -7,7 +7,7 @@ interface ItemProps {
     value: string
     active?: boolean
     hasEditing?: boolean
-    setHasEditing?: React.Dispatch<React.SetStateAction<boolean>>
+    setHasEditing?: Dispatch<SetStateAction<boolean>>
     onOk?: (fileName: string) => void
     onCancel?: () => void
     onRemove?: (fileName: string) => void
@@ -15,7 +15,7 @@ interface ItemProps {
     onValidate?: (newFileName: string, oldFileName: string) => boolean
 }
 
-const Item: React.FC<ItemProps> = ({
+const Item = ({
     className,
     readonly = false,
     value,
@@ -28,7 +28,7 @@ const Item: React.FC<ItemProps> = ({
     onClick,
     onValidate,
     ...prop
-}) => {
+}: ItemProps) => {
     const inputRef = useRef<HTMLInputElement>(null)
     const [fileName, setFileName] = useState(value)
     const [creating, setCreating] = useState(prop.creating)
@@ -41,7 +41,7 @@ const Item: React.FC<ItemProps> = ({
         onClick?.()
     }
 
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
         if (event.key === 'Enter') {
             event.preventDefault()
             finishNameFile()
@@ -89,11 +89,11 @@ const Item: React.FC<ItemProps> = ({
         })
     }
 
-    const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
         setFileName(e.target.value)
     }
 
-    const handleOnDelete = (e: React.MouseEvent<HTMLDivElement>) => {
+    const handleOnDelete = (e: MouseEvent<HTMLDivElement>) => {
         e.stopPropagation()
         if (hasEditing) {
             return
diff --git a/src/components/Playground/CodeEditor/FileSelector/index.tsx b/src/components/Playground/CodeEditor/FileSelector/index.tsx
index 5bacab9..f8fd51c 100644
--- a/src/components/Playground/CodeEditor/FileSelector/index.tsx
+++ b/src/components/Playground/CodeEditor/FileSelector/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import '@/components/Playground/CodeEditor/FileSelector/file-selector.scss'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
@@ -22,7 +21,7 @@ interface FileSelectorProps {
     selectedFileName?: string
 }
 
-const FileSelector: React.FC<FileSelectorProps> = ({
+const FileSelector = ({
     files = {},
     onChange,
     onError,
@@ -32,7 +31,7 @@ const FileSelector: React.FC<FileSelectorProps> = ({
     onAddFile,
     onUpdateFileName,
     selectedFileName = ''
-}) => {
+}: FileSelectorProps) => {
     const hideScrollbarRef = useRef<HideScrollbarElement>(null)
     const [tabs, setTabs] = useState<string[]>([])
     const [creating, setCreating] = useState(false)
diff --git a/src/components/Playground/CodeEditor/index.tsx b/src/components/Playground/CodeEditor/index.tsx
index 0062904..7b1cbb6 100644
--- a/src/components/Playground/CodeEditor/index.tsx
+++ b/src/components/Playground/CodeEditor/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import _ from 'lodash'
 import '@/components/Playground/CodeEditor/code-editor.scss'
 import FlexBox from '@/components/common/FlexBox'
@@ -29,7 +28,7 @@ interface CodeEditorProps {
     onError?: (msg: string) => void
 }
 
-const CodeEditor: React.FC<CodeEditorProps> = ({
+const CodeEditor = ({
     theme,
     tsConfig,
     files,
@@ -44,7 +43,7 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
     onChangeFileContent,
     onError,
     ...props
-}) => {
+}: CodeEditorProps) => {
     const filteredFilesName = getFileNameList(files).filter(
         (item) => ![IMPORT_MAP_FILE_NAME, TS_CONFIG_FILE_NAME].includes(item) && !files[item].hidden
     )
diff --git a/src/components/Playground/Output/Preview/index.tsx b/src/components/Playground/Output/Preview/index.tsx
index 18366b2..753e70a 100644
--- a/src/components/Playground/Output/Preview/index.tsx
+++ b/src/components/Playground/Output/Preview/index.tsx
@@ -1,4 +1,3 @@
-import React, { useRef, useState } from 'react'
 import { useUpdatedEffect } from '@/util/hooks'
 import '@/components/Playground/Output/Preview/preview.scss'
 import { IFiles, IImportMap } from '@/components/Playground/shared'
@@ -34,7 +33,7 @@ const getIframeUrl = (iframeRaw: string) => {
 
 const iframeUrl = getIframeUrl(iframeRaw)
 
-const Preview: React.FC<PreviewProps> = ({ iframeKey, files, importMap }) => {
+const Preview = ({ iframeKey, files, importMap }: PreviewProps) => {
     const iframeRef = useRef<HTMLIFrameElement>(null)
     const [errorMsg, setErrorMsg] = useState('')
     const [loaded, setLoaded] = useState(false)
diff --git a/src/components/Playground/Output/Transform/index.tsx b/src/components/Playground/Output/Transform/index.tsx
index a5eb75a..419f4bc 100644
--- a/src/components/Playground/Output/Transform/index.tsx
+++ b/src/components/Playground/Output/Transform/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import MonacoEditor from '@monaco-editor/react'
 import { Loader } from 'esbuild-wasm'
 import '@/components/Playground/Output/Transform/transform.scss'
@@ -13,7 +12,7 @@ interface OutputProps {
     theme?: ITheme
 }
 
-const Transform: React.FC<OutputProps> = ({ file, theme }) => {
+const Transform = ({ file, theme }: OutputProps) => {
     const [compiledCode, setCompiledCode] = useState('')
     const [errorMsg, setErrorMsg] = useState('')
 
diff --git a/src/components/Playground/Output/index.tsx b/src/components/Playground/Output/index.tsx
index 6c58d20..5b58410 100644
--- a/src/components/Playground/Output/index.tsx
+++ b/src/components/Playground/Output/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import FlexBox from '@/components/common/FlexBox'
 import { IFiles, IImportMap } from '@/components/Playground/shared'
 import FileSelector from '@/components/Playground/CodeEditor/FileSelector'
@@ -11,7 +10,7 @@ interface OutputProps {
     importMap: IImportMap
 }
 
-const Output: React.FC<OutputProps> = ({ files, selectedFileName, importMap }) => {
+const Output = ({ files, selectedFileName, importMap }: OutputProps) => {
     const [selectedTab, setSelectedTab] = useState('Preview')
 
     return (
diff --git a/src/components/Playground/index.tsx b/src/components/Playground/index.tsx
index 9fa22b4..cabccc8 100644
--- a/src/components/Playground/index.tsx
+++ b/src/components/Playground/index.tsx
@@ -1,4 +1,3 @@
-import React, { useState } from 'react'
 import '@/components/Playground/playground.scss'
 import { useUpdatedEffect } from '@/util/hooks'
 import { IFiles, IImportMap, ITsConfig } from '@/components/Playground/shared'
@@ -17,11 +16,7 @@ interface PlaygroundProps {
     initTsConfigRaw: string
 }
 
-const Playground: React.FC<PlaygroundProps> = ({
-    initFiles,
-    initImportMapRaw,
-    initTsConfigRaw
-}) => {
+const Playground = ({ initFiles, initImportMapRaw, initTsConfigRaw }: PlaygroundProps) => {
     const [files, setFiles] = useState(initFiles)
     const [selectedFileName, setSelectedFileName] = useState(MAIN_FILE_NAME)
     const [importMapRaw, setImportMapRaw] = useState<string>(initImportMapRaw)
diff --git a/src/components/common/Card.tsx b/src/components/common/Card.tsx
index aaf0fa9..82802f7 100644
--- a/src/components/common/Card.tsx
+++ b/src/components/common/Card.tsx
@@ -1,8 +1,7 @@
-import React from 'react'
+import { DetailedHTMLProps, HTMLAttributes } from 'react'
 import '@/assets/css/components/common/card.scss'
 
-interface CardProps
-    extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {}
+interface CardProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {}
 
 const Card = forwardRef<HTMLDivElement, CardProps>(({ className, ...props }, ref) => {
     return <div className={`card-box${className ? ` ${className}` : ''}`} {...props} ref={ref} />
diff --git a/src/components/common/FitCenter.tsx b/src/components/common/FitCenter.tsx
index d735fcf..a0be5ce 100644
--- a/src/components/common/FitCenter.tsx
+++ b/src/components/common/FitCenter.tsx
@@ -1,12 +1,11 @@
-import React from 'react'
+import { DetailedHTMLProps, HTMLAttributes } from 'react'
 import '@/assets/css/components/common/fit-center.scss'
 
-interface FitCenterProps
-    extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+interface FitCenterProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     vertical?: boolean
 }
 
-const FitCenter: React.FC<FitCenterProps> = ({ className, vertical, ...props }) => {
+const FitCenter = ({ className, vertical, ...props }: FitCenterProps) => {
     return (
         <div
             className={`fit-center${className ? ` ${className}` : ''}${
diff --git a/src/components/common/FitFullscreen.tsx b/src/components/common/FitFullscreen.tsx
index e236247..8d80704 100644
--- a/src/components/common/FitFullscreen.tsx
+++ b/src/components/common/FitFullscreen.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
+import { DetailedHTMLProps, HTMLAttributes } from 'react'
 import '@/assets/css/components/common/fit-fullscreen.scss'
 
 interface FitFullscreenProps
-    extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     zIndex?: number
     backgroundColor?: string
 }
diff --git a/src/components/common/FlexBox.tsx b/src/components/common/FlexBox.tsx
index 606ce43..58ca4d7 100644
--- a/src/components/common/FlexBox.tsx
+++ b/src/components/common/FlexBox.tsx
@@ -1,8 +1,7 @@
-import React from 'react'
+import { DetailedHTMLProps, HTMLAttributes } from 'react'
 import '@/assets/css/components/common/flex-box.scss'
 
-interface FlexBoxProps
-    extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+interface FlexBoxProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     direction?: 'horizontal' | 'vertical'
     gap?: number
 }
diff --git a/src/components/common/FullscreenLoadingMask.tsx b/src/components/common/FullscreenLoadingMask.tsx
index 5310b94..2c9240e 100644
--- a/src/components/common/FullscreenLoadingMask.tsx
+++ b/src/components/common/FullscreenLoadingMask.tsx
@@ -1,10 +1,9 @@
-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'
 
-const FullscreenLoadingMask: React.FC = () => {
+const FullscreenLoadingMask = () => {
     const loadingIcon = (
         <>
             <Icon
diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx
index f444182..237ff7a 100644
--- a/src/components/common/HideScrollbar.tsx
+++ b/src/components/common/HideScrollbar.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
+import { TouchEvent, MouseEvent, KeyboardEvent, DetailedHTMLProps, HTMLAttributes } from 'react'
 import '@/assets/css/components/common/hide-scrollbar.scss'
 
 interface HideScrollbarProps
-    extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     isPreventScroll?: boolean
     isPreventVerticalScroll?: boolean
     isPreventHorizontalScroll?: boolean
@@ -210,7 +210,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
         }, [autoHideWaitingTime, horizontalScrollbarPosition])
 
         const handleDefaultTouchStart = useCallback(
-            (event: React.TouchEvent) => {
+            (event: TouchEvent) => {
                 if (event.touches.length !== 1 || isPreventScroll) {
                     lastTouchPositionRef.current = { x: -1, y: -1 }
                     return
@@ -223,7 +223,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
         )
 
         const handleDefaultTouchmove = useCallback(
-            (event: React.TouchEvent) => {
+            (event: TouchEvent) => {
                 if (event.touches.length !== 1 || isPreventScroll) {
                     lastTouchPositionRef.current = { x: -1, y: -1 }
                     return
@@ -252,7 +252,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
             [isPreventHorizontalScroll, isPreventScroll, isPreventVerticalScroll]
         )
 
-        const handleDefaultMouseDown = (event: React.MouseEvent) => {
+        const handleDefaultMouseDown = (event: MouseEvent) => {
             if (isPreventAnyScroll)
                 if (event.button === 1) {
                     event.preventDefault()
@@ -260,7 +260,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
         }
 
         const handleDefaultKeyDown = useCallback(
-            (event: React.KeyboardEvent) => {
+            (event: KeyboardEvent) => {
                 if (
                     isPreventScroll &&
                     [
@@ -297,7 +297,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
         )
 
         const handleScrollbarMouseEvent = (eventFlag: string, scrollbarFlag: string) => {
-            return (event: React.MouseEvent) => {
+            return (event: MouseEvent) => {
                 switch (eventFlag) {
                     case 'down':
                         lastScrollbarClickPositionRef.current = {
@@ -348,7 +348,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
         }
 
         const handleScrollbarTouchEvent = (eventFlag: string, scrollbarFlag: string) => {
-            return (event: React.TouchEvent) => {
+            return (event: TouchEvent) => {
                 switch (eventFlag) {
                     case 'start':
                         if (event.touches.length !== 1) {
diff --git a/src/components/common/Indicator.tsx b/src/components/common/Indicator.tsx
index 1b56baa..2304254 100644
--- a/src/components/common/Indicator.tsx
+++ b/src/components/common/Indicator.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import _ from 'lodash'
 import '@/assets/css/components/common/indicator.scss'
 
@@ -8,7 +7,7 @@ interface IndicatorProps {
     onSwitch?: (index: number) => void
 }
 
-const Indicator: React.FC<IndicatorProps> = ({ total, current, onSwitch }) => {
+const Indicator = ({ total, current, onSwitch }: IndicatorProps) => {
     const handleClick = (index: number) => {
         return () => {
             onSwitch?.(index)
diff --git a/src/components/common/LoadingMask.tsx b/src/components/common/LoadingMask.tsx
index 41d5854..f843af5 100644
--- a/src/components/common/LoadingMask.tsx
+++ b/src/components/common/LoadingMask.tsx
@@ -1,13 +1,13 @@
-import React from 'react'
+import { PropsWithChildren, ReactNode } from 'react'
 import Icon from '@ant-design/icons'
 import '@/assets/css/components/common/loading-mask.scss'
 import { COLOR_FONT_MAIN } from '@/constants/common.constants'
 
-interface LoadingMaskProps extends React.PropsWithChildren {
+interface LoadingMaskProps extends PropsWithChildren {
     hidden?: boolean
-    maskContent?: React.ReactNode
+    maskContent?: ReactNode
 }
-const LoadingMask: React.FC<LoadingMaskProps> = (props) => {
+const LoadingMask = (props: LoadingMaskProps) => {
     const loadingIcon = (
         <>
             <Icon
diff --git a/src/components/common/Permission.tsx b/src/components/common/Permission.tsx
index 57b37e5..c3035b9 100644
--- a/src/components/common/Permission.tsx
+++ b/src/components/common/Permission.tsx
@@ -1,12 +1,12 @@
-import React from 'react'
+import { PropsWithChildren } from 'react'
 import { hasPathPermission, hasPermission } from '@/util/auth'
 
-interface PermissionProps extends React.PropsWithChildren {
+interface PermissionProps extends PropsWithChildren {
     operationCode?: string
     path?: string
 }
 
-const Permission: React.FC<PermissionProps> = (props) => {
+const Permission = (props: PermissionProps) => {
     if (
         (!props.operationCode || hasPermission(props.operationCode)) &&
         (!props.path || hasPathPermission(props.path))
diff --git a/src/components/common/Sidebar/Footer.tsx b/src/components/common/Sidebar/Footer.tsx
index 64e0901..a25a5f2 100644
--- a/src/components/common/Sidebar/Footer.tsx
+++ b/src/components/common/Sidebar/Footer.tsx
@@ -1,4 +1,3 @@
-import React, { useState } from 'react'
 import Icon from '@ant-design/icons'
 import { COLOR_ERROR } from '@/constants/common.constants'
 import { getRedirectUrl } from '@/util/route'
@@ -6,7 +5,7 @@ import { useUpdatedEffect } from '@/util/hooks'
 import { getAvatar, getLoginStatus, getNickname, removeToken } from '@/util/auth'
 import { r_auth_logout } from '@/services/auth'
 
-const Footer: React.FC = () => {
+const Footer = () => {
     const matches = useMatches()
     const lastMatch = matches.reduce((_, second) => second)
     const location = useLocation()
diff --git a/src/components/common/Sidebar/Item.tsx b/src/components/common/Sidebar/Item.tsx
index 289b746..1031b15 100644
--- a/src/components/common/Sidebar/Item.tsx
+++ b/src/components/common/Sidebar/Item.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { ReactNode, MouseEvent } from 'react'
 import Icon from '@ant-design/icons'
 import Submenu from '@/components/common/Sidebar/Submenu'
 
@@ -6,15 +6,15 @@ type ItemProps = {
     icon?: IconComponent
     text?: string
     path: string
-    children?: React.ReactNode
+    children?: ReactNode
     end?: boolean
 }
 
-const Item: React.FC<ItemProps> = (props) => {
+const Item = (props: ItemProps) => {
     const [submenuTop, setSubmenuTop] = useState(0)
     const [submenuLeft, setSubmenuLeft] = useState(0)
 
-    const showSubmenu = (e: React.MouseEvent) => {
+    const showSubmenu = (e: MouseEvent) => {
         const parentElement = e.currentTarget.parentElement
         if (parentElement?.childElementCount === 2) {
             const parentClientRect = parentElement.getBoundingClientRect()
diff --git a/src/components/common/Sidebar/ItemList.tsx b/src/components/common/Sidebar/ItemList.tsx
index 661e94d..44ec841 100644
--- a/src/components/common/Sidebar/ItemList.tsx
+++ b/src/components/common/Sidebar/ItemList.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
+import { PropsWithChildren } from 'react'
 
-const ItemList: React.FC<React.PropsWithChildren> = (props) => {
+const ItemList = (props: PropsWithChildren) => {
     return <ul>{props.children}</ul>
 }
 
diff --git a/src/components/common/Sidebar/Scroll.tsx b/src/components/common/Sidebar/Scroll.tsx
index 6fc0c1f..e27f1c0 100644
--- a/src/components/common/Sidebar/Scroll.tsx
+++ b/src/components/common/Sidebar/Scroll.tsx
@@ -1,11 +1,11 @@
-import React from 'react'
+import { PropsWithChildren } from 'react'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
 
 export interface SidebarScrollElement {
     refreshLayout(): void
 }
 
-const Scroll = forwardRef<SidebarScrollElement, React.PropsWithChildren>((props, ref) => {
+const Scroll = forwardRef<SidebarScrollElement, PropsWithChildren>((props, ref) => {
     useImperativeHandle<SidebarScrollElement, SidebarScrollElement>(ref, () => {
         return {
             refreshLayout() {
diff --git a/src/components/common/Sidebar/Separate.tsx b/src/components/common/Sidebar/Separate.tsx
index 6e626e7..4c42aff 100644
--- a/src/components/common/Sidebar/Separate.tsx
+++ b/src/components/common/Sidebar/Separate.tsx
@@ -1,8 +1,9 @@
-import React from 'react'
+import { DetailedHTMLProps, HTMLAttributes } from 'react'
 
-const Separate: React.FC<
-    React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
-> = ({ className, ...props }) => {
+const Separate = ({
+    className,
+    ...props
+}: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => {
     return <div className={`separate ${className ? ` ${className}` : ''}`} {...props} />
 }
 
diff --git a/src/components/common/Sidebar/Submenu.tsx b/src/components/common/Sidebar/Submenu.tsx
index 6d7afdc..02497e6 100644
--- a/src/components/common/Sidebar/Submenu.tsx
+++ b/src/components/common/Sidebar/Submenu.tsx
@@ -1,11 +1,11 @@
-import React from 'react'
+import { PropsWithChildren } from 'react'
 
-interface SidebarSubmenuProps extends React.PropsWithChildren {
+interface SidebarSubmenuProps extends PropsWithChildren {
     submenuTop: number
     submenuLeft: number
 }
 
-const Submenu: React.FC<SidebarSubmenuProps> = (props) => {
+const Submenu = (props: SidebarSubmenuProps) => {
     return (
         <ul
             className={'submenu'}
diff --git a/src/components/common/Sidebar/index.tsx b/src/components/common/Sidebar/index.tsx
index ae45063..db30b6a 100644
--- a/src/components/common/Sidebar/index.tsx
+++ b/src/components/common/Sidebar/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { PropsWithChildren, ReactNode } from 'react'
 import Icon from '@ant-design/icons'
 import '@/assets/css/components/common/sidebar.scss'
 import { getLocalStorage, setLocalStorage } from '@/util/browser'
@@ -9,21 +9,14 @@ 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 {
+interface SidebarProps extends PropsWithChildren {
     title: string
     width?: string
     onSidebarSwitch?: (hidden: boolean) => void
-    bottomFixed?: React.ReactNode
+    bottomFixed?: ReactNode
 }
 
-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 Sidebar = (props: SidebarProps) => {
     const [hideSidebar, setHideSidebar] = useState(getLocalStorage('HIDE_SIDEBAR') === 'true')
 
     const switchSidebar = () => {
diff --git a/src/main.tsx b/src/main.tsx
index 4cbf761..c8665a4 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,13 +1,13 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
 import zh_CN from 'antd/locale/zh_CN'
 import '@/assets/css/base.scss'
 import '@/assets/css/common.scss'
 import { COLOR_MAIN } from '@/constants/common.constants'
 import App from './App'
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-    <React.StrictMode>
+createRoot(document.getElementById('root')!).render(
+    <StrictMode>
         <AntdConfigProvider
             theme={{
                 token: { colorPrimary: COLOR_MAIN, colorLinkHover: COLOR_MAIN },
@@ -21,5 +21,5 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
         >
             <App />
         </AntdConfigProvider>
-    </React.StrictMode>
+    </StrictMode>
 )
diff --git a/src/pages/OnlineEditor.tsx b/src/pages/OnlineEditor.tsx
index 805f647..a4b6dc0 100644
--- a/src/pages/OnlineEditor.tsx
+++ b/src/pages/OnlineEditor.tsx
@@ -1,9 +1,8 @@
-import React from 'react'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import Playground from '@/components/Playground'
 import { initFiles, initImportMap, initTsConfig } from '@/components/Playground/files'
 
-const OnlineEditor: React.FC = () => {
+const OnlineEditor = () => {
     return (
         <>
             <FitFullscreen>
diff --git a/src/pages/Sign/Forget.tsx b/src/pages/Sign/Forget.tsx
index e9bf48a..3e094e4 100644
--- a/src/pages/Sign/Forget.tsx
+++ b/src/pages/Sign/Forget.tsx
@@ -1,4 +1,3 @@
-import React, { useCallback } from 'react'
 import Icon from '@ant-design/icons'
 import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile'
 import {
@@ -14,7 +13,7 @@ import { r_auth_forget, r_auth_retrieve } from '@/services/auth'
 import FitCenter from '@/components/common/FitCenter'
 import FlexBox from '@/components/common/FlexBox'
 
-const Forget: React.FC = () => {
+const Forget = () => {
     const navigate = useNavigate()
     const [searchParams] = useSearchParams()
     const turnstileRef = useRef<TurnstileInstance>()
diff --git a/src/pages/Sign/SignIn.tsx b/src/pages/Sign/SignIn.tsx
index 03d09fb..85ab8af 100644
--- a/src/pages/Sign/SignIn.tsx
+++ b/src/pages/Sign/SignIn.tsx
@@ -1,4 +1,3 @@
-import React, { useCallback } from 'react'
 import Icon from '@ant-design/icons'
 import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile'
 import {
@@ -17,7 +16,7 @@ import { AppContext } from '@/App'
 import FitCenter from '@/components/common/FitCenter'
 import FlexBox from '@/components/common/FlexBox'
 
-const SignIn: React.FC = () => {
+const SignIn = () => {
     const { refreshRouter } = useContext(AppContext)
     const navigate = useNavigate()
     const [searchParams] = useSearchParams()
diff --git a/src/pages/Sign/SignUp.tsx b/src/pages/Sign/SignUp.tsx
index c91b508..61b4f2e 100644
--- a/src/pages/Sign/SignUp.tsx
+++ b/src/pages/Sign/SignUp.tsx
@@ -1,4 +1,3 @@
-import React, { useCallback } from 'react'
 import Icon from '@ant-design/icons'
 import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile'
 import {
@@ -14,7 +13,7 @@ import { r_auth_register, r_auth_resend } from '@/services/auth'
 import FitCenter from '@/components/common/FitCenter'
 import FlexBox from '@/components/common/FlexBox'
 
-const SignUp: React.FC = () => {
+const SignUp = () => {
     const location = useLocation()
     const navigate = useNavigate()
     const turnstileRef = useRef<TurnstileInstance>()
diff --git a/src/pages/Sign/Verify.tsx b/src/pages/Sign/Verify.tsx
index 8edb23c..c370db5 100644
--- a/src/pages/Sign/Verify.tsx
+++ b/src/pages/Sign/Verify.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import {
     COLOR_BACKGROUND,
     PERMISSION_ACCOUNT_NEED_INIT,
@@ -15,7 +14,7 @@ import { AppContext } from '@/App'
 import FitCenter from '@/components/common/FitCenter'
 import FlexBox from '@/components/common/FlexBox'
 
-const Verify: React.FC = () => {
+const Verify = () => {
     const { refreshRouter } = useContext(AppContext)
     const navigate = useNavigate()
     const [searchParams] = useSearchParams()
diff --git a/src/pages/Sign/index.tsx b/src/pages/Sign/index.tsx
index c464068..01417b6 100644
--- a/src/pages/Sign/index.tsx
+++ b/src/pages/Sign/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import '@/assets/css/pages/sign.scss'
 import { useUpdatedEffect } from '@/util/hooks'
 import FitFullscreen from '@/components/common/FitFullscreen'
@@ -9,7 +8,7 @@ import Verify from '@/pages/Sign/Verify'
 import Forget from '@/pages/Sign/Forget'
 import SignIn from '@/pages/Sign/SignIn'
 
-const Sign: React.FC = () => {
+const Sign = () => {
     const lastPage = useRef('none')
     const currentPage = useRef('none')
     const match = useMatches().reduce((_, second) => second)
diff --git a/src/pages/System/Group.tsx b/src/pages/System/Group.tsx
index 0340fce..fcea149 100644
--- a/src/pages/System/Group.tsx
+++ b/src/pages/System/Group.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { ChangeEvent, Key, KeyboardEvent } from 'react'
 import Icon from '@ant-design/icons'
 import {
     COLOR_ERROR_SECONDARY,
@@ -28,7 +28,7 @@ import HideScrollbar from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
 import Card from '@/components/common/Card'
 
-const Group: React.FC = () => {
+const Group = () => {
     const [modal, contextHolder] = AntdModal.useModal()
     const [form] = AntdForm.useForm<GroupAddEditParam>()
     const formValues = AntdForm.useWatch([], form)
@@ -55,7 +55,7 @@ const Group: React.FC = () => {
     const [roleData, setRoleData] = useState<RoleVo[]>([])
     const [isLoadingRole, setIsLoadingRole] = useState(false)
     const [isSubmitting, setIsSubmitting] = useState(false)
-    const [tableSelectedItem, setTableSelectedItem] = useState<React.Key[]>([])
+    const [tableSelectedItem, setTableSelectedItem] = useState<Key[]>([])
 
     const dataColumns: _ColumnsType<GroupWithRoleGetVo> = [
         {
@@ -172,7 +172,7 @@ const Group: React.FC = () => {
         }
     }
 
-    const handleOnTableSelectChange = (selectedRowKeys: React.Key[]) => {
+    const handleOnTableSelectChange = (selectedRowKeys: Key[]) => {
         setTableSelectedItem(selectedRowKeys)
     }
 
@@ -331,7 +331,7 @@ const Group: React.FC = () => {
         }
     }
 
-    const handleOnSearchNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleOnSearchNameChange = (e: ChangeEvent<HTMLInputElement>) => {
         setSearchName(e.target.value)
 
         if (isUseRegex) {
@@ -346,7 +346,7 @@ const Group: React.FC = () => {
         }
     }
 
-    const handleOnSearchNameKeyDown = (e: React.KeyboardEvent) => {
+    const handleOnSearchNameKeyDown = (e: KeyboardEvent) => {
         if (e.key === 'Enter') {
             getGroup()
         }
diff --git a/src/pages/System/Log.tsx b/src/pages/System/Log.tsx
index b342dd7..a596053 100644
--- a/src/pages/System/Log.tsx
+++ b/src/pages/System/Log.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { ChangeEvent, KeyboardEvent } from 'react'
 import dayjs from 'dayjs'
 import { COLOR_FONT_SECONDARY, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
 import { useUpdatedEffect } from '@/util/hooks'
@@ -9,7 +9,7 @@ import Card from '@/components/common/Card'
 import HideScrollbar from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
 
-const Log: React.FC = () => {
+const Log = () => {
     const [logData, setLogData] = useState<SysLogGetVo[]>([])
     const [loading, setLoading] = useState(false)
     const [tableParams, setTableParams] = useState<TableParam>({
@@ -159,11 +159,11 @@ const Log: React.FC = () => {
         }
     }
 
-    const handleOnSearchUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleOnSearchUrlChange = (e: ChangeEvent<HTMLInputElement>) => {
         setSearchRequestUrl(e.target.value)
     }
 
-    const handleOnSearchUrlKeyDown = (e: React.KeyboardEvent) => {
+    const handleOnSearchUrlKeyDown = (e: KeyboardEvent) => {
         if (e.key === 'Enter') {
             getLog()
         }
diff --git a/src/pages/System/Role.tsx b/src/pages/System/Role.tsx
index dc059aa..00c0f28 100644
--- a/src/pages/System/Role.tsx
+++ b/src/pages/System/Role.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { ChangeEvent, Key, KeyboardEvent } from 'react'
 import Icon from '@ant-design/icons'
 import {
     COLOR_ERROR_SECONDARY,
@@ -28,7 +28,7 @@ import HideScrollbar from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
 import Card from '@/components/common/Card'
 
-const Role: React.FC = () => {
+const Role = () => {
     const [modal, contextHolder] = AntdModal.useModal()
     const [form] = AntdForm.useForm<RoleAddEditParam>()
     const formValues = AntdForm.useWatch([], form)
@@ -55,7 +55,7 @@ const Role: React.FC = () => {
     const [powerTreeData, setPowerTreeData] = useState<_DataNode[]>([])
     const [isLoadingPower, setIsLoadingPower] = useState(false)
     const [isSubmitting, setIsSubmitting] = useState(false)
-    const [tableSelectedItem, setTableSelectedItem] = useState<React.Key[]>([])
+    const [tableSelectedItem, setTableSelectedItem] = useState<Key[]>([])
 
     const dataColumns: _ColumnsType<RoleWithPowerGetVo> = [
         {
@@ -164,7 +164,7 @@ const Role: React.FC = () => {
         }
     }
 
-    const handleOnTableSelectChange = (selectedRowKeys: React.Key[]) => {
+    const handleOnTableSelectChange = (selectedRowKeys: Key[]) => {
         setTableSelectedItem(selectedRowKeys)
     }
 
@@ -320,7 +320,7 @@ const Role: React.FC = () => {
         }
     }
 
-    const handleOnSearchNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleOnSearchNameChange = (e: ChangeEvent<HTMLInputElement>) => {
         setSearchName(e.target.value)
 
         if (isUseRegex) {
@@ -335,7 +335,7 @@ const Role: React.FC = () => {
         }
     }
 
-    const handleOnSearchNameKeyDown = (e: React.KeyboardEvent) => {
+    const handleOnSearchNameKeyDown = (e: KeyboardEvent) => {
         if (e.key === 'Enter') {
             getRole()
         }
diff --git a/src/pages/System/Settings/Base.tsx b/src/pages/System/Settings/Base.tsx
index b584d2d..8b52d43 100644
--- a/src/pages/System/Settings/Base.tsx
+++ b/src/pages/System/Settings/Base.tsx
@@ -1,10 +1,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'
 
-const Base: React.FC = () => {
+const Base = () => {
     const [baseForm] = AntdForm.useForm<BaseSettingsParam>()
     const baseFormValues = AntdForm.useWatch([], baseForm)
     const [loading, setLoading] = useState(false)
diff --git a/src/pages/System/Settings/Mail.tsx b/src/pages/System/Settings/Mail.tsx
index 6e44a97..87802b5 100644
--- a/src/pages/System/Settings/Mail.tsx
+++ b/src/pages/System/Settings/Mail.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import Icon from '@ant-design/icons'
 import { useUpdatedEffect } from '@/util/hooks'
 import { hasPermission } from '@/util/auth'
@@ -9,7 +8,7 @@ import {
 } from '@/services/system'
 import { SettingsCard } from '@/pages/System/Settings'
 
-const Mail: React.FC = () => {
+const Mail = () => {
     const [modal, contextHolder] = AntdModal.useModal()
     const [mailForm] = AntdForm.useForm<MailSettingsParam>()
     const mailFormValues = AntdForm.useWatch([], mailForm)
diff --git a/src/pages/System/Settings/SensitiveWord.tsx b/src/pages/System/Settings/SensitiveWord.tsx
index 429b741..ab2daf2 100644
--- a/src/pages/System/Settings/SensitiveWord.tsx
+++ b/src/pages/System/Settings/SensitiveWord.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { ChangeEvent } from 'react'
 import Icon from '@ant-design/icons'
 import { DATABASE_DUPLICATE_KEY, DATABASE_INSERT_SUCCESS } from '@/constants/common.constants'
 import { useUpdatedEffect } from '@/util/hooks'
@@ -10,7 +10,7 @@ import {
 } from '@/services/system'
 import { SettingsCard } from '@/pages/System/Settings'
 
-const SensitiveWord: React.FC = () => {
+const SensitiveWord = () => {
     const [dataSource, setDataSource] = useState<SensitiveWordVo[]>()
     const [targetKeys, setTargetKeys] = useState<string[]>([])
     const [selectedKeys, setSelectedKeys] = useState<string[]>([])
@@ -64,7 +64,7 @@ const SensitiveWord: React.FC = () => {
         })
     }
 
-    const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
         setNewWord(e.target.value)
     }
 
diff --git a/src/pages/System/Settings/index.tsx b/src/pages/System/Settings/index.tsx
index f411aac..927c742 100644
--- a/src/pages/System/Settings/index.tsx
+++ b/src/pages/System/Settings/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { PropsWithChildren, ReactNode } from 'react'
 import Icon from '@ant-design/icons'
 import '@/assets/css/pages/system/settings.scss'
 import FitFullscreen from '@/components/common/FitFullscreen'
@@ -11,16 +11,16 @@ 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 {
+interface SettingsCardProps extends PropsWithChildren {
     icon: IconComponent
     title: string
     loading?: boolean
     modifyOperationCode?: string
-    expand?: React.ReactNode
+    expand?: ReactNode
     onReset?: () => void
     onSave?: () => void
 }
-export const SettingsCard: React.FC<SettingsCardProps> = (props) => {
+export const SettingsCard = (props: SettingsCardProps) => {
     return (
         <Card>
             <FlexBox className={'settings-card'}>
@@ -50,7 +50,7 @@ export const SettingsCard: React.FC<SettingsCardProps> = (props) => {
     )
 }
 
-const Settings: React.FC = () => {
+const Settings = () => {
     return (
         <>
             <FitFullscreen data-component={'system-settings'}>
diff --git a/src/pages/System/Statistics/ActiveInfo.tsx b/src/pages/System/Statistics/ActiveInfo.tsx
index 727e1d9..d3e2000 100644
--- a/src/pages/System/Statistics/ActiveInfo.tsx
+++ b/src/pages/System/Statistics/ActiveInfo.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import Icon from '@ant-design/icons'
 import * as echarts from 'echarts/core'
 import { useUpdatedEffect } from '@/util/hooks'
@@ -8,7 +7,7 @@ import FlexBox from '@/components/common/FlexBox'
 import { getTooltipTimeFormatter, lineEChartsBaseOption } from '@/pages/System/Statistics/shared'
 import { CommonCard } from '@/pages/System/Statistics'
 
-const ActiveInfo: React.FC = () => {
+const ActiveInfo = () => {
     const activeInfoDivRef = useRef<HTMLDivElement>(null)
     const activeInfoEChartsRef = useRef<echarts.EChartsType | null>(null)
     const [isLoading, setIsLoading] = useState(false)
diff --git a/src/pages/System/Statistics/CPUInfo.tsx b/src/pages/System/Statistics/CPUInfo.tsx
index 027a9cf..885a236 100644
--- a/src/pages/System/Statistics/CPUInfo.tsx
+++ b/src/pages/System/Statistics/CPUInfo.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import * as echarts from 'echarts/core'
 import { BarSeriesOption } from 'echarts/charts'
 import { useUpdatedEffect } from '@/util/hooks'
@@ -11,7 +10,7 @@ import {
 } from '@/pages/System/Statistics/shared'
 import { CommonCard } from '@/pages/System/Statistics'
 
-const CPUInfo: React.FC = () => {
+const CPUInfo = () => {
     const keyDivRef = useRef<HTMLDivElement>(null)
     const percentDivRef = useRef<HTMLDivElement>(null)
     const cpuInfoDivRef = useRef<HTMLDivElement>(null)
diff --git a/src/pages/System/Statistics/HardwareInfo.tsx b/src/pages/System/Statistics/HardwareInfo.tsx
index 72dd651..f571a90 100644
--- a/src/pages/System/Statistics/HardwareInfo.tsx
+++ b/src/pages/System/Statistics/HardwareInfo.tsx
@@ -1,10 +1,9 @@
-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'
 
-const HardwareInfo: React.FC = () => {
+const HardwareInfo = () => {
     const [hardwareInfoData, setHardwareInfoData] = useState<HardwareInfoVo>()
 
     useUpdatedEffect(() => {
diff --git a/src/pages/System/Statistics/OnlineInfo.tsx b/src/pages/System/Statistics/OnlineInfo.tsx
index c2badf2..29271ea 100644
--- a/src/pages/System/Statistics/OnlineInfo.tsx
+++ b/src/pages/System/Statistics/OnlineInfo.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import Icon from '@ant-design/icons'
 import * as echarts from 'echarts/core'
 import { useUpdatedEffect } from '@/util/hooks'
@@ -8,7 +7,7 @@ import FlexBox from '@/components/common/FlexBox'
 import { getTooltipTimeFormatter, lineEChartsBaseOption } from '@/pages/System/Statistics/shared'
 import { CommonCard } from '@/pages/System/Statistics'
 
-const OnlineInfo: React.FC = () => {
+const OnlineInfo = () => {
     const onlineInfoDivRef = useRef<HTMLDivElement>(null)
     const onlineInfoEChartsRef = useRef<echarts.EChartsType | null>(null)
     const [isLoading, setIsLoading] = useState(false)
diff --git a/src/pages/System/Statistics/SoftwareInfo.tsx b/src/pages/System/Statistics/SoftwareInfo.tsx
index 6309eca..a187349 100644
--- a/src/pages/System/Statistics/SoftwareInfo.tsx
+++ b/src/pages/System/Statistics/SoftwareInfo.tsx
@@ -1,11 +1,10 @@
-import React from 'react'
 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'
 
-const SoftwareInfo: React.FC = () => {
+const SoftwareInfo = () => {
     const [softwareInfoData, setSoftwareInfoData] = useState<SoftwareInfoVo>()
 
     useUpdatedEffect(() => {
diff --git a/src/pages/System/Statistics/StorageInfo.tsx b/src/pages/System/Statistics/StorageInfo.tsx
index 5a888cf..3e4fa34 100644
--- a/src/pages/System/Statistics/StorageInfo.tsx
+++ b/src/pages/System/Statistics/StorageInfo.tsx
@@ -1,4 +1,3 @@
-import React, { useEffect, useState } from 'react'
 import * as echarts from 'echarts/core'
 import { BarSeriesOption } from 'echarts/charts'
 import { formatByteSize } from '@/util/common'
@@ -12,7 +11,7 @@ import {
 } from '@/pages/System/Statistics/shared'
 import { CommonCard } from '@/pages/System/Statistics'
 
-const StorageInfo: React.FC = () => {
+const StorageInfo = () => {
     const keyDivRef = useRef<HTMLDivElement>(null)
     const percentDivRef = useRef<HTMLDivElement>(null)
     const storageInfoDivRef = useRef<HTMLDivElement>(null)
diff --git a/src/pages/System/Statistics/index.tsx b/src/pages/System/Statistics/index.tsx
index f5994ca..853b0a8 100644
--- a/src/pages/System/Statistics/index.tsx
+++ b/src/pages/System/Statistics/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { PropsWithChildren, ReactNode } from 'react'
 import Icon from '@ant-design/icons'
 import '@/assets/css/pages/system/statistics.scss'
 import Card from '@/components/common/Card'
@@ -14,14 +14,14 @@ 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 {
+interface CommonCardProps extends PropsWithChildren {
     icon: IconComponent
-    title: React.ReactNode
+    title: ReactNode
     loading?: boolean
-    expand?: React.ReactNode
+    expand?: ReactNode
 }
 
-export const CommonCard: React.FC<CommonCardProps> = (props) => {
+export const CommonCard = (props: CommonCardProps) => {
     return (
         <Card style={{ overflow: 'visible' }}>
             <FlexBox className={'common-card'}>
@@ -41,7 +41,7 @@ export const CommonCard: React.FC<CommonCardProps> = (props) => {
     )
 }
 
-const Statistics: React.FC = () => {
+const Statistics = () => {
     return (
         <>
             <FitFullscreen data-component={'system-statistics'}>
diff --git a/src/pages/System/User.tsx b/src/pages/System/User.tsx
index fbf2761..29591b2 100644
--- a/src/pages/System/User.tsx
+++ b/src/pages/System/User.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { ChangeEvent, Key, KeyboardEvent } from 'react'
 import Icon from '@ant-design/icons'
 import dayjs from 'dayjs'
 import {
@@ -36,7 +36,7 @@ interface ChangePasswordFields extends UserChangePasswordParam {
     needChangePassword: boolean
 }
 
-const User: React.FC = () => {
+const User = () => {
     const [modal, contextHolder] = AntdModal.useModal()
 
     const [isDrawerOpen, setIsDrawerOpen] = useState(false)
@@ -66,7 +66,7 @@ const User: React.FC = () => {
                 } 项 共 ${total} 项`
         }
     })
-    const [tableSelectedItem, setTableSelectedItem] = useState<React.Key[]>([])
+    const [tableSelectedItem, setTableSelectedItem] = useState<Key[]>([])
     const [userData, setUserData] = useState<UserWithRoleInfoVo[]>([])
     const [isLoadingUserData, setIsLoadingUserData] = useState(false)
 
@@ -254,7 +254,7 @@ const User: React.FC = () => {
         }
     }
 
-    const handleOnTableSelectChange = (selectedRowKeys: React.Key[]) => {
+    const handleOnTableSelectChange = (selectedRowKeys: Key[]) => {
         setTableSelectedItem(selectedRowKeys)
     }
 
@@ -570,7 +570,7 @@ const User: React.FC = () => {
         }
     }
 
-    const handleOnSearchValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleOnSearchValueChange = (e: ChangeEvent<HTMLInputElement>) => {
         setSearchValue(e.target.value)
 
         if (isUseRegex) {
@@ -585,7 +585,7 @@ const User: React.FC = () => {
         }
     }
 
-    const handleOnSearchNameKeyDown = (e: React.KeyboardEvent) => {
+    const handleOnSearchNameKeyDown = (e: KeyboardEvent) => {
         if (e.key === 'Enter') {
             getUser()
         }
diff --git a/src/pages/System/index.tsx b/src/pages/System/index.tsx
index 639e7ac..1fd60d2 100644
--- a/src/pages/System/index.tsx
+++ b/src/pages/System/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react'
 import Icon from '@ant-design/icons'
 import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
 import '@/assets/css/pages/system/index.scss'
@@ -9,9 +9,9 @@ import Card from '@/components/common/Card'
 import Permission from '@/components/common/Permission'
 
 interface CommonCardProps
-    extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     icon: IconComponent
-    description?: React.ReactNode
+    description?: ReactNode
     options?: TiltOptions
     url?: string
 }
@@ -61,7 +61,7 @@ const CommonCard = forwardRef<HTMLDivElement, CommonCardProps>(
     }
 )
 
-const System: React.FC = () => {
+const System = () => {
     return (
         <>
             <FitFullscreen data-component={'system'}>
diff --git a/src/pages/SystemFramework.tsx b/src/pages/SystemFramework.tsx
index a47a786..00d3a17 100644
--- a/src/pages/SystemFramework.tsx
+++ b/src/pages/SystemFramework.tsx
@@ -1,11 +1,10 @@
-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 '@/components/common/Sidebar'
 import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 
-const SystemFramework: React.FC = () => {
+const SystemFramework = () => {
     return (
         <>
             <FitFullscreen data-component={'system-framework'} className={'flex-horizontal'}>
diff --git a/src/pages/Tools/All.tsx b/src/pages/Tools/All.tsx
index 85e812d..b5af6ff 100644
--- a/src/pages/Tools/All.tsx
+++ b/src/pages/Tools/All.tsx
@@ -1,6 +1,4 @@
-import React from 'react'
-
-const All: React.FC = () => {
+const All = () => {
     return <></>
 }
 
diff --git a/src/pages/Tools/Translation.tsx b/src/pages/Tools/Translation.tsx
index 6057f22..bb9dad6 100644
--- a/src/pages/Tools/Translation.tsx
+++ b/src/pages/Tools/Translation.tsx
@@ -1,6 +1,4 @@
-import React from 'react'
-
-const Translation: React.FC = () => {
+const Translation = () => {
     return <></>
 }
 
diff --git a/src/pages/Tools/index.tsx b/src/pages/Tools/index.tsx
index 5a1c5e9..0f205de 100644
--- a/src/pages/Tools/index.tsx
+++ b/src/pages/Tools/index.tsx
@@ -1,6 +1,4 @@
-import React from 'react'
-
-const Tools: React.FC = () => {
+const Tools = () => {
     return <></>
 }
 
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index 42e5ec2..0e5d787 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import '@/assets/css/pages/tools-framework.scss'
 import { tools } from '@/router/tools'
 import FitFullscreen from '@/components/common/FitFullscreen'
@@ -6,7 +5,7 @@ import Sidebar from '@/components/common/Sidebar'
 import { SidebarScrollElement } from '@/components/common/Sidebar/Scroll'
 import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 
-const ToolsFramework: React.FC = () => {
+const ToolsFramework = () => {
     const sidebarScrollRef = useRef<SidebarScrollElement>(null)
 
     const handleOnSidebarSwitch = () => {
diff --git a/src/pages/User/index.tsx b/src/pages/User/index.tsx
index 4e446cd..aa61947 100644
--- a/src/pages/User/index.tsx
+++ b/src/pages/User/index.tsx
@@ -1,6 +1,4 @@
-import React from 'react'
-
-const User: React.FC = () => {
+const User = () => {
     return <></>
 }
 
diff --git a/src/pages/UserFramework.tsx b/src/pages/UserFramework.tsx
index 3c9361a..90c205c 100644
--- a/src/pages/UserFramework.tsx
+++ b/src/pages/UserFramework.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import '@/assets/css/pages/user-framework.scss'
 import user from '@/router/user'
 import { hasPathPermission } from '@/util/auth'
@@ -6,7 +5,7 @@ import FitFullscreen from '@/components/common/FitFullscreen'
 import Sidebar from '@/components/common/Sidebar'
 import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 
-const ToolsFramework: React.FC = () => {
+const ToolsFramework = () => {
     return (
         <>
             <FitFullscreen data-component={'user-framework'} className={'flex-horizontal'}>
diff --git a/src/router/index.tsx b/src/router/index.tsx
index 2f5880c..158d7db 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -1,17 +1,16 @@
-import React from 'react'
 import _ from 'lodash'
 import system from '@/router/system'
 import user from '@/router/user'
 import tools from '@/router/tools'
 import { getAuthRoute, mapJsonToRoute, setTitle } from '@/util/route'
 
-const lazySignPage = React.lazy(() => import('@/pages/Sign'))
+const lazySignPage = lazy(() => import('@/pages/Sign'))
 
 const root: RouteJsonObject[] = [
     {
         path: '/',
         absolutePath: '/',
-        component: React.lazy(() => import('@/AuthRoute')),
+        component: lazy(() => import('@/AuthRoute')),
         children: [
             {
                 path: 'register',
@@ -41,13 +40,13 @@ const root: RouteJsonObject[] = [
                 path: 'loading',
                 absolutePath: '/loading',
                 id: 'loading',
-                component: React.lazy(() => import('@/components/common/FullscreenLoadingMask'))
+                component: lazy(() => import('@/components/common/FullscreenLoadingMask'))
             },
             {
                 path: 'user',
                 absolutePath: '/user',
                 id: 'userFramework',
-                component: React.lazy(() => import('@/pages/UserFramework')),
+                component: lazy(() => import('@/pages/UserFramework')),
                 children: setTitle(user, '个人中心'),
                 name: '个人中心',
                 auth: true
@@ -56,7 +55,7 @@ const root: RouteJsonObject[] = [
                 path: 'system',
                 absolutePath: '/system',
                 id: 'systemFramework',
-                component: React.lazy(() => import('@/pages/SystemFramework')),
+                component: lazy(() => import('@/pages/SystemFramework')),
                 children: setTitle(system, '系统配置'),
                 name: '系统配置',
                 auth: true,
@@ -66,14 +65,14 @@ const root: RouteJsonObject[] = [
                 path: 'online-editor',
                 absolutePath: '/online-editor',
                 id: 'online-editor',
-                component: React.lazy(() => import('@/pages/OnlineEditor')),
+                component: lazy(() => import('@/pages/OnlineEditor')),
                 name: '在线编辑器'
             },
             {
                 path: '',
                 absolutePath: '/',
                 id: 'toolsFramework',
-                component: React.lazy(() => import('@/pages/ToolsFramework')),
+                component: lazy(() => import('@/pages/ToolsFramework')),
                 children: setTitle(tools, '氧工具'),
                 name: '工具',
                 auth: false
diff --git a/src/router/system.tsx b/src/router/system.tsx
index 9633dc4..3c0a0b3 100644
--- a/src/router/system.tsx
+++ b/src/router/system.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { getAuthRoute } from '@/util/route'
 
 const system: RouteJsonObject[] = [
@@ -6,18 +5,18 @@ const system: RouteJsonObject[] = [
         path: '',
         absolutePath: '/system',
         id: 'system',
-        component: React.lazy(() => import('@/pages/System')),
+        component: lazy(() => import('@/pages/System')),
         name: '系统管理',
-        icon: React.lazy(() => import('~icons/oxygen/setting')),
+        icon: lazy(() => import('~icons/oxygen/setting')),
         menu: true
     },
     {
         path: 'statistics',
         absolutePath: '/system/statistics',
         id: 'system-statistics',
-        component: React.lazy(() => import('@/pages/System/Statistics')),
+        component: lazy(() => import('@/pages/System/Statistics')),
         name: '系统概况',
-        icon: React.lazy(() => import('~icons/oxygen/chart')),
+        icon: lazy(() => import('~icons/oxygen/chart')),
         menu: true,
         autoHide: true
     },
@@ -25,9 +24,9 @@ const system: RouteJsonObject[] = [
         path: 'settings',
         absolutePath: '/system/settings',
         id: 'system-settings',
-        component: React.lazy(() => import('@/pages/System/Settings')),
+        component: lazy(() => import('@/pages/System/Settings')),
         name: '系统设置',
-        icon: React.lazy(() => import('~icons/oxygen/option')),
+        icon: lazy(() => import('~icons/oxygen/option')),
         menu: true,
         autoHide: true
     },
@@ -35,9 +34,9 @@ const system: RouteJsonObject[] = [
         path: 'user',
         absolutePath: '/system/user',
         id: 'system-user',
-        component: React.lazy(() => import('@/pages/System/User')),
+        component: lazy(() => import('@/pages/System/User')),
         name: '用户管理',
-        icon: React.lazy(() => import('~icons/oxygen/user')),
+        icon: lazy(() => import('~icons/oxygen/user')),
         menu: true,
         autoHide: true
     },
@@ -45,9 +44,9 @@ const system: RouteJsonObject[] = [
         path: 'role',
         absolutePath: '/system/role',
         id: 'system-role',
-        component: React.lazy(() => import('@/pages/System/Role')),
+        component: lazy(() => import('@/pages/System/Role')),
         name: '角色管理',
-        icon: React.lazy(() => import('~icons/oxygen/role')),
+        icon: lazy(() => import('~icons/oxygen/role')),
         menu: true,
         autoHide: true
     },
@@ -55,9 +54,9 @@ const system: RouteJsonObject[] = [
         path: 'group',
         absolutePath: '/system/group',
         id: 'system-group',
-        component: React.lazy(() => import('@/pages/System/Group')),
+        component: lazy(() => import('@/pages/System/Group')),
         name: '群组管理',
-        icon: React.lazy(() => import('~icons/oxygen/group')),
+        icon: lazy(() => import('~icons/oxygen/group')),
         menu: true,
         autoHide: true
     },
@@ -65,9 +64,9 @@ const system: RouteJsonObject[] = [
         path: 'log',
         absolutePath: '/system/log',
         id: 'system-log',
-        component: React.lazy(() => import('@/pages/System/Log')),
+        component: lazy(() => import('@/pages/System/Log')),
         name: '系统日志',
-        icon: React.lazy(() => import('~icons/oxygen/log')),
+        icon: lazy(() => import('~icons/oxygen/log')),
         menu: true,
         autoHide: true
     },
diff --git a/src/router/tools.tsx b/src/router/tools.tsx
index b6abe60..aaad39c 100644
--- a/src/router/tools.tsx
+++ b/src/router/tools.tsx
@@ -1,13 +1,11 @@
-import React from 'react'
-
 export const tools: RouteJsonObject[] = [
     {
         path: '',
         absolutePath: '/',
         id: 'tools',
-        component: React.lazy(() => import('@/pages/Tools')),
+        component: lazy(() => import('@/pages/Tools')),
         name: '主页',
-        icon: React.lazy(() => import('~icons/oxygen/home')),
+        icon: lazy(() => import('~icons/oxygen/home')),
         menu: true,
         auth: false
     },
@@ -15,10 +13,10 @@ export const tools: RouteJsonObject[] = [
         path: 'all',
         absolutePath: '/all',
         id: 'tools-all',
-        component: React.lazy(() => import('@/pages/Tools')),
+        component: lazy(() => import('@/pages/Tools')),
         name: '全部工具',
         titlePostfix: ' - 全部工具',
-        icon: React.lazy(() => import('~icons/oxygen/tool')),
+        icon: lazy(() => import('~icons/oxygen/tool')),
         menu: true,
         auth: false
     },
@@ -26,9 +24,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation',
         absolutePath: '/translation',
         id: 'tools-translation',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false,
         children: [
@@ -37,7 +35,7 @@ export const tools: RouteJsonObject[] = [
                 absolutePath: '/translation/1',
                 id: '1',
                 name: '翻译1',
-                icon: React.lazy(() => import('~icons/oxygen/logo')),
+                icon: lazy(() => import('~icons/oxygen/logo')),
                 menu: true,
                 auth: false
             },
@@ -55,9 +53,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation-',
         absolutePath: '/translation-',
         id: 'tools-translation-',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false,
         children: [
@@ -83,9 +81,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--',
         absolutePath: '/translation--',
         id: 'tools-translation--',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -93,9 +91,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--1',
         absolutePath: '/translation--1',
         id: 'tools-translation--1',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--1',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -103,9 +101,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--2',
         absolutePath: '/translation--2',
         id: 'tools-translation--2',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--2',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -113,9 +111,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--3',
         absolutePath: '/translation--3',
         id: 'tools-translation--3',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--3',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -123,9 +121,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--4',
         absolutePath: '/translation--4',
         id: 'tools-translation--4',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--4',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -133,9 +131,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--5',
         absolutePath: '/translation--5',
         id: 'tools-translation--5',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--5',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -143,9 +141,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--6',
         absolutePath: '/translation--6',
         id: 'tools-translation--6',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--6',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -153,9 +151,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--7',
         absolutePath: '/translation--7',
         id: 'tools-translation--7',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--7',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -163,9 +161,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--8',
         absolutePath: '/translation--8',
         id: 'tools-translation--8',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--8',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -173,9 +171,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--9',
         absolutePath: '/translation--9',
         id: 'tools-translation--9',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--9',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -183,9 +181,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--10',
         absolutePath: '/translation--10',
         id: 'tools-translation--10',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--10',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -193,9 +191,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--1-',
         absolutePath: '/translation--1-',
         id: 'tools-translation--1-',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--1-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -203,9 +201,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--2-',
         absolutePath: '/translation--2-',
         id: 'tools-translation--2-',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--2-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -213,9 +211,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--3-',
         absolutePath: '/translation--3-',
         id: 'tools-translation--3-',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--3-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -223,9 +221,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--4-',
         absolutePath: '/translation--4-',
         id: 'tools-translation--4-',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--4-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -233,9 +231,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--5-',
         absolutePath: '/translation--5-',
         id: 'tools-translation--5-',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--5-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -243,9 +241,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--6-',
         absolutePath: '/translation--6-',
         id: 'tools-translation--6-',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--6-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -253,9 +251,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--7-',
         absolutePath: '/translation--7-',
         id: 'tools-translation--7-',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--7-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -263,9 +261,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--8-',
         absolutePath: '/translation--8-',
         id: 'tools-translation--8-',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--8-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -273,9 +271,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--9-',
         absolutePath: '/translation--9-',
         id: 'tools-translation--9-',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--9-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -283,9 +281,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--10-',
         absolutePath: '/translation--10-',
         id: 'tools-translation--10-',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--10-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false,
         children: [
diff --git a/src/router/user.tsx b/src/router/user.tsx
index 875bbea..20d084d 100644
--- a/src/router/user.tsx
+++ b/src/router/user.tsx
@@ -1,13 +1,11 @@
-import React from 'react'
-
 const user: RouteJsonObject[] = [
     {
         path: '',
         absolutePath: '/user',
         id: 'user',
-        component: React.lazy(() => import('@/pages/User')),
+        component: lazy(() => import('@/pages/User')),
         name: '个人档案',
-        icon: React.lazy(() => import('~icons/oxygen/user')),
+        icon: lazy(() => import('~icons/oxygen/user')),
         menu: true
     },
     {
diff --git a/src/services/system.tsx b/src/services/system.tsx
index 4c6d321..8e6cd7f 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { Key } from 'react'
 import {
     URL_SYS_USER_INFO,
     URL_SYS_USER,
@@ -34,7 +34,7 @@ export const r_sys_user_change_password = (param: UserChangePasswordParam) =>
 
 export const r_sys_user_delete = (id: string) => request.delete(`${URL_SYS_USER}/${id}`)
 
-export const r_sys_user_delete_list = (ids: React.Key[]) => request.delete(URL_SYS_USER, { ids })
+export const r_sys_user_delete_list = (ids: Key[]) => request.delete(URL_SYS_USER, { ids })
 
 export const r_sys_power_get_list = () => request.get<PowerSetVo>(URL_SYS_POWER_LIST)
 
@@ -52,7 +52,7 @@ export const r_sys_role_update = (param: RoleAddEditParam) => request.put(URL_SY
 
 export const r_sys_role_delete = (id: string) => request.delete(`${URL_SYS_ROLE}/${id}`)
 
-export const r_sys_role_delete_list = (ids: React.Key[]) => request.delete(URL_SYS_ROLE, { ids })
+export const r_sys_role_delete_list = (ids: Key[]) => request.delete(URL_SYS_ROLE, { ids })
 
 export const r_sys_group_get = (param: GroupGetParam) =>
     request.get<PageVo<GroupWithRoleGetVo>>(URL_SYS_GROUP, param)
@@ -68,7 +68,7 @@ export const r_sys_group_update = (param: GroupAddEditParam) => request.put(URL_
 
 export const r_sys_group_delete = (id: string) => request.delete(`${URL_SYS_GROUP}/${id}`)
 
-export const r_sys_group_delete_list = (ids: React.Key[]) => request.delete(URL_SYS_GROUP, { ids })
+export const r_sys_group_delete_list = (ids: Key[]) => request.delete(URL_SYS_GROUP, { ids })
 
 export const r_sys_log_get = (param: SysLogGetParam) =>
     request.get<PageVo<SysLogGetVo>>(URL_SYS_LOG, param)
diff --git a/src/util/common.tsx b/src/util/common.tsx
index 1e014ea..043b554 100644
--- a/src/util/common.tsx
+++ b/src/util/common.tsx
@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom/client'
+import { createRoot } from 'react-dom/client'
 import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 import { floor } from 'lodash'
 
@@ -47,7 +47,7 @@ export const showLoadingMask = (id: string) => {
         'position: fixed; width: 100vw; height: 100vh; z-index: 10000; left: 0; top: 0;'
     )
 
-    return ReactDOM.createRoot(container).render(<FullscreenLoadingMask />)
+    return createRoot(container).render(<FullscreenLoadingMask />)
 }
 
 export const removeLoadingMask = (id: string) => {
diff --git a/src/util/hooks.tsx b/src/util/hooks.tsx
index 6152d2a..44cf769 100644
--- a/src/util/hooks.tsx
+++ b/src/util/hooks.tsx
@@ -1,9 +1,6 @@
-import React from 'react'
+import { DependencyList, EffectCallback } from 'react'
 
-export const useUpdatedEffect = (
-    effect: React.EffectCallback,
-    dependencies: React.DependencyList
-) => {
+export const useUpdatedEffect = (effect: EffectCallback, dependencies: DependencyList) => {
     const isFirstRender = useRef(true)
 
     useEffect(() => {