Optimize file name

src/pages/System/index.tsx

@@ -0,0 +1,107 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
+import '@/assets/css/pages/system/index.scss'
+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'
+
+interface CommonCardProps
+    extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    icon: IconComponent
+    description?: React.ReactNode
+    options?: TiltOptions
+    url?: string
+}
+
+const CommonCard = forwardRef<HTMLDivElement, CommonCardProps>(
+    ({
+        style,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        ref,
+        icon,
+        description,
+        options = {
+            reverse: true,
+            max: 8,
+            glare: true,
+            scale: 1.03
+        },
+        url,
+        children,
+        ...props
+    }) => {
+        const navigate = useNavigate()
+        const cardRef = useRef<HTMLDivElement>(null)
+
+        useEffect(() => {
+            cardRef.current && VanillaTilt.init(cardRef.current, options)
+        }, [options])
+
+        const handleCardOnClick = () => {
+            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>
+        )
+    }
+)
+
+const System: React.FC = () => {
+    return (
+        <>
+            <FitFullscreen data-component={'system'}>
+                <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
+                    <FlexBox direction={'horizontal'} className={'root-content'}>
+                        <Permission path={'/system/statistics'}>
+                            <CommonCard icon={IconOxygenAnalysis} url={'statistics'}>
+                                系统概况
+                            </CommonCard>
+                        </Permission>
+                        <Permission path={'/system/settings'}>
+                            <CommonCard icon={IconOxygenOption} url={'settings'}>
+                                系统设置
+                            </CommonCard>
+                        </Permission>
+                        <Permission path={'/system/user'}>
+                            <CommonCard icon={IconOxygenUser} url={'user'}>
+                                用户管理
+                            </CommonCard>
+                        </Permission>
+                        <Permission path={'/system/role'}>
+                            <CommonCard icon={IconOxygenRole} url={'role'}>
+                                角色管理
+                            </CommonCard>
+                        </Permission>
+                        <Permission path={'/system/group'}>
+                            <CommonCard icon={IconOxygenGroup} url={'group'}>
+                                群组管理
+                            </CommonCard>
+                        </Permission>
+                        <Permission path={'/system/log'}>
+                            <CommonCard icon={IconOxygenLog} url={'log'}>
+                                系统日志
+                            </CommonCard>
+                        </Permission>
+                    </FlexBox>
+                </HideScrollbar>
+            </FitFullscreen>
+        </>
+    )
+}
+
+export default System