Optimize code

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>

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>()

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()

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>()

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()

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)

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()
         }

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()
         }

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()
         }

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)

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)

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

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

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)

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)

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(() => {

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)

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(() => {

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)

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

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()
         }

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

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

src/pages/Tools/All.tsx

@@ -1,6 +1,4 @@
-import React from 'react'
-
-const All: React.FC = () => {
+const All = () => {
     return <></>
 }
 

src/pages/Tools/Translation.tsx

@@ -1,6 +1,4 @@
-import React from 'react'
-
-const Translation: React.FC = () => {
+const Translation = () => {
     return <></>
 }
 

src/pages/Tools/index.tsx

@@ -1,6 +1,4 @@
-import React from 'react'
-
-const Tools: React.FC = () => {
+const Tools = () => {
     return <></>
 }
 

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 = () => {

src/pages/User/index.tsx

@@ -1,6 +1,4 @@
-import React from 'react'
-
-const User: React.FC = () => {
+const User = () => {
     return <></>
 }
 

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