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,8 +7,8 @@ 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 (
             <div
                 className={`fit-fullscreen${className ? ` ${className}` : ''}`}
@@ -18,9 +18,10 @@ const FitFullscreen = forwardRef<HTMLDivElement, FitFullscreenProps>((props, ref
                     ...style
                 }}
                 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 (
             <div
                 className={`flex-box ${
                     direction === 'horizontal' ? 'flex-horizontal' : 'flex-vertical'
                 }${className ? ` ${className}` : ''}`}
                 style={{ gap, ...style }}
-            {..._props}
+                {...props}
                 ref={ref}
             />
         )
-})
+    }
+)
 
 export default FlexBox

src/components/common/HideScrollbar.tsx

@@ -49,7 +49,27 @@ export interface HideScrollbarElement {
     refreshLayout(): void
 }
 
-const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((props, ref) => {
+const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
+    (
+        {
+            isPreventScroll,
+            isPreventVerticalScroll,
+            isPreventHorizontalScroll,
+            isShowVerticalScrollbar,
+            isHiddenVerticalScrollbarWhenFull,
+            isShowHorizontalScrollbar,
+            isHiddenHorizontalScrollbarWhenFull,
+            minWidth,
+            minHeight,
+            scrollbarWidth,
+            autoHideWaitingTime,
+            children,
+            style,
+            className,
+            ...props
+        },
+        ref
+    ) => {
         useImperativeHandle<HideScrollbarElement, HideScrollbarElement>(
             ref,
             () => {
@@ -162,24 +182,6 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
         const [horizontalScrollbarOnTouch, setHorizontalScrollbarOnTouch] = useState(false)
         const [horizontalScrollbarAutoHide, setHorizontalScrollbarAutoHide] = useState(false)
 
-    const {
-        isPreventScroll,
-        isPreventVerticalScroll,
-        isPreventHorizontalScroll,
-        isShowVerticalScrollbar,
-        isHiddenVerticalScrollbarWhenFull,
-        isShowHorizontalScrollbar,
-        isHiddenHorizontalScrollbarWhenFull,
-        minWidth,
-        minHeight,
-        scrollbarWidth,
-        autoHideWaitingTime,
-        children,
-        style,
-        className,
-        ..._props
-    } = props
-
         const isPreventAnyScroll =
             isPreventScroll || isPreventVerticalScroll || isPreventHorizontalScroll
 
@@ -230,14 +232,17 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
 
                 if (!isPreventVerticalScroll) {
                     rootRef.current?.scrollTo({
-                    top: rootRef.current?.scrollTop + (lastTouchPositionRef.current.y - clientY),
+                        top:
+                            rootRef.current?.scrollTop + (lastTouchPositionRef.current.y - clientY),
                         behavior: 'instant'
                     })
                 }
 
                 if (!isPreventHorizontalScroll) {
                     rootRef.current?.scrollTo({
-                    left: rootRef.current?.scrollLeft + (lastTouchPositionRef.current.x - clientX),
+                        left:
+                            rootRef.current?.scrollLeft +
+                            (lastTouchPositionRef.current.x - clientX),
                         behavior: 'instant'
                     })
                 }
@@ -295,7 +300,10 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
             return (event: React.MouseEvent) => {
                 switch (eventFlag) {
                     case 'down':
-                    lastScrollbarClickPositionRef.current = { x: event.clientX, y: event.clientY }
+                        lastScrollbarClickPositionRef.current = {
+                            x: event.clientX,
+                            y: event.clientY
+                        }
                         switch (scrollbarFlag) {
                             case 'vertical':
                                 setVerticalScrollbarOnClick(true)
@@ -470,7 +478,12 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                 wheelListenerRef.current = handleDefaultWheel
                 rootRef.current?.addEventListener('wheel', handleDefaultWheel, { passive: false })
             }
-    }, [isPreventAnyScroll, isPreventHorizontalScroll, isPreventScroll, isPreventVerticalScroll])
+        }, [
+            isPreventAnyScroll,
+            isPreventHorizontalScroll,
+            isPreventScroll,
+            isPreventVerticalScroll
+        ])
 
         return (
             <>
@@ -483,8 +496,12 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                     onTouchMove={
                         !isPreventScroll ? handleScrollbarTouchEvent('move', 'all') : undefined
                     }
-                onMouseUp={!isPreventScroll ? handleScrollbarMouseEvent('up', 'all') : undefined}
+                    onMouseUp={
-                onTouchEnd={!isPreventScroll ? handleScrollbarTouchEvent('end', 'all') : undefined}
+                        !isPreventScroll ? handleScrollbarMouseEvent('up', 'all') : undefined
+                    }
+                    onTouchEnd={
+                        !isPreventScroll ? handleScrollbarTouchEvent('end', 'all') : undefined
+                    }
                     onMouseLeave={
                         !isPreventScroll ? handleScrollbarMouseEvent('leave', 'all') : undefined
                     }
@@ -503,7 +520,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                             msTouchAction: isPreventAnyScroll ? 'none' : '',
                             ...style
                         }}
-                    {..._props}
+                        {...props}
                         onMouseDown={isPreventAnyScroll ? handleDefaultMouseDown : undefined}
                         onKeyDown={isPreventAnyScroll ? handleDefaultKeyDown : undefined}
                         onTouchStart={isPreventAnyScroll ? handleDefaultTouchStart : undefined}
@@ -600,6 +617,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                 </div>
             </>
         )
-})
+    }
+)
 
 export default HideScrollbar

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,8 +31,10 @@ const CommonCard = forwardRef<HTMLDivElement, CommonCardProps>((props) => {
         },
         url,
         children,
-        ..._props
+        ...props
-    } = props
+    }) => {
+        const navigate = useNavigate()
+        const cardRef = useRef<HTMLDivElement>(null)
 
         useEffect(() => {
             cardRef.current && VanillaTilt.init(cardRef.current, options)
@@ -47,7 +48,7 @@ const CommonCard = forwardRef<HTMLDivElement, CommonCardProps>((props) => {
             <Card
                 style={{ overflow: 'visible', ...style }}
                 ref={cardRef}
-            {..._props}
+                {...props}
                 onClick={handleCardOnClick}
             >
                 <FlexBox className={'common-card'}>
@@ -57,7 +58,8 @@ const CommonCard = forwardRef<HTMLDivElement, CommonCardProps>((props) => {
                 </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,