Refactor(Card): Component all cards

Make all cards into components

src/components/system/SettingCard.tsx

@@ -0,0 +1,48 @@
+import { PropsWithChildren, ReactNode } from 'react'
+import Icon from '@ant-design/icons'
+import '@/assets/css/components/system/setting-card.scss'
+import Card from '@/components/common/Card'
+import FlexBox from '@/components/common/FlexBox'
+import Permission from '@/components/common/Permission'
+import LoadingMask from '@/components/common/LoadingMask'
+
+interface SettingsCardProps extends PropsWithChildren {
+    icon: IconComponent
+    title: string
+    loading?: boolean
+    modifyOperationCode?: string[]
+    expand?: ReactNode
+    onReset?: () => void
+    onSave?: () => void
+}
+export const SettingsCard = (props: SettingsCardProps) => {
+    return (
+        <Card data-component={'component-setting-card'}>
+            <FlexBox className={'settings-card'}>
+                <FlexBox direction={'horizontal'} className={'head'}>
+                    <Icon component={props.icon} className={'icon'} />
+                    <div className={'title'}>{props.title}</div>
+                    {!props.loading && (
+                        <Permission operationCode={props.modifyOperationCode}>
+                            {props.expand}
+                            <AntdButton onClick={props.onReset} title={'重置'}>
+                                <Icon component={IconOxygenBack} />
+                            </AntdButton>
+                            <AntdButton className={'bt-save'} onClick={props.onSave} title={'保存'}>
+                                <Icon component={IconOxygenSave} />
+                            </AntdButton>
+                        </Permission>
+                    )}
+                </FlexBox>
+                <LoadingMask
+                    maskContent={<AntdSkeleton active paragraph={{ rows: 6 }} />}
+                    hidden={!props.loading}
+                >
+                    {props.children}
+                </LoadingMask>
+            </FlexBox>
+        </Card>
+    )
+}
+
+export default SettingsCard

src/components/system/StatisticsCard.tsx

@@ -0,0 +1,35 @@
+import { PropsWithChildren, ReactNode } from 'react'
+import Icon from '@ant-design/icons'
+import '@/assets/css/components/system/statistics-card.scss'
+import Card from '@/components/common/Card'
+import FlexBox from '@/components/common/FlexBox'
+import LoadingMask from '@/components/common/LoadingMask'
+
+interface StatisticsCardProps extends PropsWithChildren {
+    icon: IconComponent
+    title: ReactNode
+    loading?: boolean
+    expand?: ReactNode
+}
+
+export const StatisticsCard = (props: StatisticsCardProps) => {
+    return (
+        <Card data-component={'component-statistics-card'} style={{ overflow: 'visible' }}>
+            <FlexBox className={'statistics-card'}>
+                <FlexBox direction={'horizontal'} className={'head'}>
+                    <Icon component={props.icon} className={'icon'} />
+                    <div className={'title'}>{props.title}</div>
+                    {props.expand}
+                </FlexBox>
+                <LoadingMask
+                    hidden={!props.loading}
+                    maskContent={<AntdSkeleton active paragraph={{ rows: 6 }} />}
+                >
+                    {props.children}
+                </LoadingMask>
+            </FlexBox>
+        </Card>
+    )
+}
+
+export default StatisticsCard

src/components/system/SystemCard.tsx

@@ -0,0 +1,62 @@
+import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react'
+import Icon from '@ant-design/icons'
+import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
+import '@/assets/css/components/system/system-card.scss'
+import Card from '@/components/common/Card'
+import FlexBox from '@/components/common/FlexBox'
+
+interface SystemCardProps
+    extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    icon: IconComponent
+    description?: ReactNode
+    options?: TiltOptions
+    url?: string
+}
+
+const SystemCard = forwardRef<HTMLDivElement, SystemCardProps>(
+    ({
+        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
+                data-component={'component-system-card'}
+                style={{ overflow: 'visible', ...style }}
+                ref={cardRef}
+                {...props}
+                onClick={handleCardOnClick}
+            >
+                <FlexBox className={'system-card'}>
+                    <Icon component={icon} className={'icon'} />
+                    <div className={'text'}>{children}</div>
+                    <div className={'description'}>{description}</div>
+                </FlexBox>
+            </Card>
+        )
+    }
+)
+
+export default SystemCard