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 (