108 lines
3.8 KiB
TypeScript
108 lines
3.8 KiB
TypeScript
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'
|
|
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 DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
|
icon: IconComponent
|
|
description?: 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 = () => {
|
|
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
|