Optimize code

src/components/common/Card.tsx

@@ -4,9 +4,8 @@ import '@/assets/css/components/common/card.scss'
 interface CardProps
     extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {}
 
-const Card = forwardRef<HTMLDivElement, CardProps>((props, ref) => {
+const Card = forwardRef<HTMLDivElement, CardProps>(({ className, ...props }, ref) => {
-    const { className, ..._props } = props
+    return <div className={`card-box${className ? ` ${className}` : ''}`} {...props} ref={ref} />
-    return <div className={`card-box${className ? ` ${className}` : ''}`} {..._props} ref={ref} />
 })
 
 export default Card

src/components/common/FitCenter.tsx

@@ -6,14 +6,13 @@ interface FitCenterProps
     vertical?: boolean
 }
 
-const FitCenter: React.FC<FitCenterProps> = (props) => {
+const FitCenter: React.FC<FitCenterProps> = ({ className, vertical, ...props }) => {
-    const { className, vertical, ..._props } = props
     return (
         <div
             className={`fit-center${className ? ` ${className}` : ''}${
                 vertical ? ' flex-vertical' : ' flex-horizontal'
             }`}
-            {..._props}
+            {...props}
         />
     )
 }

src/components/common/FitFullscreen.tsx

@@ -7,20 +7,21 @@ interface FitFullscreenProps
     backgroundColor?: string
 }
 
-const FitFullscreen = forwardRef<HTMLDivElement, FitFullscreenProps>((props, ref) => {
+const FitFullscreen = forwardRef<HTMLDivElement, FitFullscreenProps>(
-    const { zIndex, backgroundColor, className, style, ..._props } = props
+    ({ zIndex, backgroundColor, className, style, ...props }, ref) => {
-    return (
+        return (
-        <div
+            <div
-            className={`fit-fullscreen${className ? ` ${className}` : ''}`}
+                className={`fit-fullscreen${className ? ` ${className}` : ''}`}
-            style={{
+                style={{
-                zIndex,
+                    zIndex,
-                backgroundColor,
+                    backgroundColor,
-                ...style
+                    ...style
-            }}
+                }}
-            ref={ref}
+                ref={ref}
-            {..._props}
+                {...props}
-        />
+            />
-    )
+        )
-})
+    }
+)
 
 export default FitFullscreen

src/components/common/FlexBox.tsx

@@ -7,18 +7,19 @@ interface FlexBoxProps
     gap?: number
 }
 
-const FlexBox = forwardRef<HTMLDivElement, FlexBoxProps>((props, ref) => {
+const FlexBox = forwardRef<HTMLDivElement, FlexBoxProps>(
-    const { className, direction, gap, style, ..._props } = props
+    ({ className, direction, gap, style, ...props }, ref) => {
-    return (
+        return (
-        <div
+            <div
-            className={`flex-box ${
+                className={`flex-box ${
-                direction === 'horizontal' ? 'flex-horizontal' : 'flex-vertical'
+                    direction === 'horizontal' ? 'flex-horizontal' : 'flex-vertical'
-            }${className ? ` ${className}` : ''}`}
+                }${className ? ` ${className}` : ''}`}
-            style={{ gap, ...style }}
+                style={{ gap, ...style }}
-            {..._props}
+                {...props}
-            ref={ref}
+                ref={ref}
-        />
+            />
-    )
+        )
-})
+    }
+)
 
 export default FlexBox

src/components/common/Indicator.tsx

@@ -8,9 +8,7 @@ interface IndicatorProps {
     onSwitch?: (index: number) => void
 }
 
-const Indicator: React.FC<IndicatorProps> = (props) => {
+const Indicator: React.FC<IndicatorProps> = ({ total, current, onSwitch }) => {
-    const { total, current, onSwitch } = props
-
     const handleClick = (index: number) => {
         return () => {
             onSwitch && onSwitch(index)

src/components/common/sidebar/SidebarSeparate.tsx

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

src/pages/system/index.tsx

@@ -6,7 +6,7 @@ import HideScrollbar from '@/components/common/HideScrollbar'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import FlexBox from '@/components/common/FlexBox'
 import Card from '@/components/common/Card'
-import Permission from '@/components/common/Permission.tsx'
+import Permission from '@/components/common/Permission'
 
 interface CommonCardProps
     extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
@@ -16,11 +16,10 @@ interface CommonCardProps
     url?: string
 }
 
-const CommonCard = forwardRef<HTMLDivElement, CommonCardProps>((props) => {
+const CommonCard = forwardRef<HTMLDivElement, CommonCardProps>(
-    const navigate = useNavigate()
+    ({
-    const cardRef = useRef<HTMLDivElement>(null)
-    const {
         style,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         ref,
         icon,
         description,
@@ -32,32 +31,35 @@ const CommonCard = forwardRef<HTMLDivElement, CommonCardProps>((props) => {
         },
         url,
         children,
-        ..._props
+        ...props
-    } = props
+    }) => {
+        const navigate = useNavigate()
+        const cardRef = useRef<HTMLDivElement>(null)
 
-    useEffect(() => {
+        useEffect(() => {
-        cardRef.current && VanillaTilt.init(cardRef.current, options)
+            cardRef.current && VanillaTilt.init(cardRef.current, options)
-    }, [options])
+        }, [options])
 
-    const handleCardOnClick = () => {
+        const handleCardOnClick = () => {
-        url && navigate(url)
+            url && navigate(url)
+        }
+
+        return (
+            <Card
+                style={{ overflow: 'visible', ...style }}
+                ref={cardRef}
+                {...props}
+                onClick={handleCardOnClick}
+            >
+                <FlexBox className={'common-card'}>
+                    <Icon component={icon} className={'icon'} />
+                    <div className={'text'}>{children}</div>
+                    <div className={'description'}>{description}</div>
+                </FlexBox>
+            </Card>
+        )
     }
-
+)
-    return (
-        <Card
-            style={{ overflow: 'visible', ...style }}
-            ref={cardRef}
-            {..._props}
-            onClick={handleCardOnClick}
-        >
-            <FlexBox className={'common-card'}>
-                <Icon component={icon} className={'icon'} />
-                <div className={'text'}>{children}</div>
-                <div className={'description'}>{description}</div>
-            </FlexBox>
-        </Card>
-    )
-})
 
 const System: React.FC = () => {
     return (

src/pages/system/statistics/shared.ts

@@ -15,7 +15,7 @@ import { BarChart, BarSeriesOption, LineChart, LineSeriesOption } from 'echarts/
 import { SVGRenderer } from 'echarts/renderers'
 import { UniversalTransition } from 'echarts/features'
 import { CallbackDataParams } from 'echarts/types/dist/shared'
-import { utcToLocalTime } from '@/util/datetime.tsx'
+import { utcToLocalTime } from '@/util/datetime'
 
 echarts.use([
     TooltipComponent,

src/router/system.tsx

@@ -25,7 +25,7 @@ const system: RouteJsonObject[] = [
         path: 'settings',
         absolutePath: '/system/settings',
         id: 'system-settings',
-        component: React.lazy(() => import('@/pages/system/Settings')),
+        component: React.lazy(() => import('@/pages/system/settings')),
         name: '系统设置',
         icon: React.lazy(() => import('~icons/oxygen/option.jsx')),
         menu: true,