Refactor(Card): Component all cards

Make all cards into components

src/pages/System/Settings/Base.tsx

@@ -1,6 +1,6 @@
 import { hasPermission } from '@/util/auth'
 import { r_sys_settings_base_get, r_sys_settings_base_update } from '@/services/system'
-import { SettingsCard } from '@/pages/System/Settings'
+import SettingsCard from '@/components/system/SettingCard'
 
 const Base = () => {
     const [baseForm] = AntdForm.useForm<BaseSettingsParam>()

src/pages/System/Settings/Mail.tsx

@@ -5,7 +5,7 @@ import {
     r_sys_settings_mail_send,
     r_sys_settings_mail_update
 } from '@/services/system'
-import { SettingsCard } from '@/pages/System/Settings'
+import SettingsCard from '@/components/system/SettingCard'
 
 const Mail = () => {
     const [modal, contextHolder] = AntdModal.useModal()

src/pages/System/Settings/SensitiveWord.tsx

@@ -7,7 +7,7 @@ import {
     r_sys_settings_sensitive_get,
     r_sys_settings_sensitive_update
 } from '@/services/system'
-import { SettingsCard } from '@/pages/System/Settings'
+import SettingsCard from '@/components/system/SettingCard'
 
 const SensitiveWord = () => {
     const [dataSource, setDataSource] = useState<SensitiveWordVo[]>()

src/pages/System/Settings/TwoFactor.tsx

@@ -1,6 +1,6 @@
 import { hasPermission } from '@/util/auth'
 import { r_sys_settings_two_factor_get, r_sys_settings_two_factor_update } from '@/services/system'
-import { SettingsCard } from '@/pages/System/Settings'
+import SettingsCard from '@/components/system/SettingCard'
 
 const TwoFactor = () => {
     const [twoFactorForm] = AntdForm.useForm<TwoFactorSettingsParam>()

src/pages/System/Settings/index.tsx

@@ -1,55 +1,12 @@
-import { PropsWithChildren, ReactNode } from 'react'
-import Icon from '@ant-design/icons'
 import '@/assets/css/pages/system/settings.scss'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import HideScrollbar from '@/components/common/HideScrollbar'
-import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
-import LoadingMask from '@/components/common/LoadingMask'
 import Permission from '@/components/common/Permission'
 import Base from '@/pages/System/Settings/Base'
 import Mail from '@/pages/System/Settings/Mail'
 import SensitiveWord from '@/pages/System/Settings/SensitiveWord'
-import TwoFactor from '@/pages/System/Settings/TwoFactor.tsx'
-
-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>
-            <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>
-    )
-}
+import TwoFactor from '@/pages/System/Settings/TwoFactor'
 
 const Settings = () => {
     return (

src/pages/System/Statistics/ActiveInfo.tsx

@@ -4,7 +4,7 @@ import { getTimesBetweenTwoTimes } from '@/util/datetime'
 import { r_sys_statistics_active } from '@/services/system'
 import FlexBox from '@/components/common/FlexBox'
 import { getTooltipTimeFormatter, lineEChartsBaseOption } from '@/pages/System/Statistics/shared'
-import { CommonCard } from '@/pages/System/Statistics'
+import StatisticsCard from '@/components/system/StatisticsCard'
 
 const ActiveInfo = () => {
     const activeInfoDivRef = useRef<HTMLDivElement>(null)
@@ -147,7 +147,7 @@ const ActiveInfo = () => {
     }
 
     return (
-        <CommonCard
+        <StatisticsCard
             icon={IconOxygenAnalysis}
             title={
                 <>
@@ -183,7 +183,7 @@ const ActiveInfo = () => {
             <FlexBox className={'card-content'} direction={'horizontal'}>
                 <div className={'big-chart'} ref={activeInfoDivRef} />
             </FlexBox>
-        </CommonCard>
+        </StatisticsCard>
     )
 }
 

src/pages/System/Statistics/CPUInfo.tsx

@@ -7,7 +7,7 @@ import {
     barEChartsBaseOption,
     EChartsOption
 } from '@/pages/System/Statistics/shared'
-import { CommonCard } from '@/pages/System/Statistics'
+import StatisticsCard from '@/components/system/StatisticsCard'
 
 const CPUInfo = () => {
     const keyDivRef = useRef<HTMLDivElement>(null)
@@ -142,7 +142,7 @@ const CPUInfo = () => {
 
     return (
         <>
-            <CommonCard
+            <StatisticsCard
                 icon={IconOxygenCpu}
                 title={'CPU 信息'}
                 loading={isLoading}
@@ -172,7 +172,7 @@ const CPUInfo = () => {
                     <FlexBox className={'value-chart'} ref={cpuInfoDivRef} />
                     <FlexBox className={'value-percent'} ref={percentDivRef} />
                 </FlexBox>
-            </CommonCard>
+            </StatisticsCard>
         </>
     )
 }

src/pages/System/Statistics/HardwareInfo.tsx

@@ -1,6 +1,6 @@
 import { r_sys_statistics_hardware } from '@/services/system'
 import FlexBox from '@/components/common/FlexBox'
-import { CommonCard } from '@/pages/System/Statistics'
+import StatisticsCard from '@/components/system/StatisticsCard'
 
 const HardwareInfo = () => {
     const [hardwareInfoData, setHardwareInfoData] = useState<HardwareInfoVo>()
@@ -17,7 +17,7 @@ const HardwareInfo = () => {
     }, [])
 
     return (
-        <CommonCard
+        <StatisticsCard
             icon={IconOxygenHardware}
             title={'硬件信息'}
             loading={hardwareInfoData === undefined}
@@ -56,7 +56,7 @@ const HardwareInfo = () => {
                     <div title={hardwareInfoData?.disks}>{hardwareInfoData?.disks}</div>
                 </FlexBox>
             </FlexBox>
-        </CommonCard>
+        </StatisticsCard>
     )
 }
 

src/pages/System/Statistics/OnlineInfo.tsx

@@ -4,7 +4,7 @@ import { getTimesBetweenTwoTimes } from '@/util/datetime'
 import { r_sys_statistics_online } from '@/services/system'
 import FlexBox from '@/components/common/FlexBox'
 import { getTooltipTimeFormatter, lineEChartsBaseOption } from '@/pages/System/Statistics/shared'
-import { CommonCard } from '@/pages/System/Statistics'
+import StatisticsCard from '@/components/system/StatisticsCard'
 
 const OnlineInfo = () => {
     const onlineInfoDivRef = useRef<HTMLDivElement>(null)
@@ -148,7 +148,7 @@ const OnlineInfo = () => {
     }
 
     return (
-        <CommonCard
+        <StatisticsCard
             icon={IconOxygenOnline}
             title={
                 <>
@@ -188,7 +188,7 @@ const OnlineInfo = () => {
             <FlexBox className={'card-content'} direction={'horizontal'}>
                 <div className={'big-chart'} ref={onlineInfoDivRef} />
             </FlexBox>
-        </CommonCard>
+        </StatisticsCard>
     )
 }
 

src/pages/System/Statistics/SoftwareInfo.tsx

@@ -1,7 +1,7 @@
 import { utcToLocalTime } from '@/util/datetime'
 import { r_sys_statistics_software } from '@/services/system'
 import FlexBox from '@/components/common/FlexBox'
-import { CommonCard } from '@/pages/System/Statistics'
+import StatisticsCard from '@/components/system/StatisticsCard'
 
 const SoftwareInfo = () => {
     const [softwareInfoData, setSoftwareInfoData] = useState<SoftwareInfoVo>()
@@ -18,7 +18,7 @@ const SoftwareInfo = () => {
     }, [])
 
     return (
-        <CommonCard
+        <StatisticsCard
             icon={IconOxygenSoftware}
             title={'软件信息'}
             loading={softwareInfoData === undefined}
@@ -61,7 +61,7 @@ const SoftwareInfo = () => {
                     </div>
                 </FlexBox>
             </FlexBox>
-        </CommonCard>
+        </StatisticsCard>
     )
 }
 

src/pages/System/Statistics/StorageInfo.tsx

@@ -8,7 +8,7 @@ import {
     barEChartsBaseOption,
     EChartsOption
 } from '@/pages/System/Statistics/shared'
-import { CommonCard } from '@/pages/System/Statistics'
+import StatisticsCard from '@/components/system/StatisticsCard'
 
 const StorageInfo = () => {
     const keyDivRef = useRef<HTMLDivElement>(null)
@@ -161,7 +161,7 @@ const StorageInfo = () => {
 
     return (
         <>
-            <CommonCard
+            <StatisticsCard
                 icon={IconOxygenMemory}
                 title={'内存信息'}
                 loading={isLoading}
@@ -191,7 +191,7 @@ const StorageInfo = () => {
                     <FlexBox className={'value-chart'} ref={storageInfoDivRef} />
                     <FlexBox className={'value-percent'} ref={percentDivRef} />
                 </FlexBox>
-            </CommonCard>
+            </StatisticsCard>
         </>
     )
 }

src/pages/System/Statistics/index.tsx

@@ -1,11 +1,7 @@
-import { PropsWithChildren, ReactNode } from 'react'
-import Icon from '@ant-design/icons'
 import '@/assets/css/pages/system/statistics.scss'
-import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import HideScrollbar from '@/components/common/HideScrollbar'
-import LoadingMask from '@/components/common/LoadingMask'
 import Permission from '@/components/common/Permission'
 import OnlineInfo from '@/pages/System/Statistics/OnlineInfo'
 import ActiveInfo from '@/pages/System/Statistics/ActiveInfo'
@@ -14,33 +10,6 @@ import HardwareInfo from '@/pages/System/Statistics/HardwareInfo'
 import CPUInfo from '@/pages/System/Statistics/CPUInfo'
 import StorageInfo from '@/pages/System/Statistics/StorageInfo'
 
-interface CommonCardProps extends PropsWithChildren {
-    icon: IconComponent
-    title: ReactNode
-    loading?: boolean
-    expand?: ReactNode
-}
-
-export const CommonCard = (props: CommonCardProps) => {
-    return (
-        <Card style={{ overflow: 'visible' }}>
-            <FlexBox className={'common-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>
-    )
-}
-
 const Statistics = () => {
     return (
         <>

src/pages/System/index.tsx

@@ -1,65 +1,9 @@
-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>
-        )
-    }
-)
+import SystemCard from '@/components/system/SystemCard.tsx'
 
 const System = () => {
     return (
@@ -68,54 +12,54 @@ const System = () => {
                 <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
                     <FlexBox direction={'horizontal'} className={'root-content'}>
                         <Permission path={'/system/statistics'}>
-                            <CommonCard icon={IconOxygenAnalysis} url={'statistics'}>
+                            <SystemCard icon={IconOxygenAnalysis} url={'statistics'}>
                                 系统概况
-                            </CommonCard>
+                            </SystemCard>
                         </Permission>
                         <Permission path={'/system/settings'}>
-                            <CommonCard icon={IconOxygenOption} url={'settings'}>
+                            <SystemCard icon={IconOxygenOption} url={'settings'}>
                                 系统设置
-                            </CommonCard>
+                            </SystemCard>
                         </Permission>
                         <Permission operationCode={['system:tool:query:tool']}>
-                            <CommonCard icon={IconOxygenTool} url={'tools'}>
+                            <SystemCard icon={IconOxygenTool} url={'tools'}>
                                 工具管理
-                            </CommonCard>
+                            </SystemCard>
                         </Permission>
                         <Permission operationCode={['system:tool:query:template']}>
-                            <CommonCard icon={IconOxygenTemplate} url={'tools/template'}>
+                            <SystemCard icon={IconOxygenTemplate} url={'tools/template'}>
                                 模板管理
-                            </CommonCard>
+                            </SystemCard>
                         </Permission>
                         <Permission operationCode={['system:tool:query:base']}>
-                            <CommonCard icon={IconOxygenBase} url={'tools/base'}>
+                            <SystemCard icon={IconOxygenBase} url={'tools/base'}>
                                 基板管理
-                            </CommonCard>
+                            </SystemCard>
                         </Permission>
                         <Permission operationCode={['system:tool:query:category']}>
-                            <CommonCard icon={IconOxygenCategory} url={'tools/category'}>
+                            <SystemCard icon={IconOxygenCategory} url={'tools/category'}>
                                 类别管理
-                            </CommonCard>
+                            </SystemCard>
                         </Permission>
                         <Permission path={'/system/user'}>
-                            <CommonCard icon={IconOxygenUser} url={'user'}>
+                            <SystemCard icon={IconOxygenUser} url={'user'}>
                                 用户管理
-                            </CommonCard>
+                            </SystemCard>
                         </Permission>
                         <Permission path={'/system/role'}>
-                            <CommonCard icon={IconOxygenRole} url={'role'}>
+                            <SystemCard icon={IconOxygenRole} url={'role'}>
                                 角色管理
-                            </CommonCard>
+                            </SystemCard>
                         </Permission>
                         <Permission path={'/system/group'}>
-                            <CommonCard icon={IconOxygenGroup} url={'group'}>
+                            <SystemCard icon={IconOxygenGroup} url={'group'}>
                                 群组管理
-                            </CommonCard>
+                            </SystemCard>
                         </Permission>
                         <Permission path={'/system/log'}>
-                            <CommonCard icon={IconOxygenLog} url={'log'}>
+                            <SystemCard icon={IconOxygenLog} url={'log'}>
                                 系统日志
-                            </CommonCard>
+                            </SystemCard>
                         </Permission>
                     </FlexBox>
                 </HideScrollbar>