Optimize Settings page

src/pages/system/settings/index.tsx

@@ -0,0 +1,70 @@
+import React 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 BaseSettings from '@/pages/system/settings/BaseSettings'
+import MailSettings from '@/pages/system/settings/MailSettings'
+
+interface SettingsCardProps extends React.PropsWithChildren {
+    icon: IconComponent
+    title: string
+    loading?: boolean
+    modifyOperationCode?: string
+    expand?: React.ReactNode
+    onReset?: () => void
+    onSave?: () => void
+}
+export const SettingsCard: React.FC<SettingsCardProps> = (props) => {
+    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>
+                    ) : undefined}
+                </FlexBox>
+                <LoadingMask hidden={!props.loading}>{props.children}</LoadingMask>
+            </FlexBox>
+        </Card>
+    )
+}
+
+const Settings: React.FC = () => {
+    return (
+        <>
+            <FitFullscreen data-component={'system-settings'}>
+                <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
+                    <FlexBox direction={'horizontal'} className={'root-content'}>
+                        <FlexBox className={'root-col'}>
+                            <Permission operationCode={'system:settings:query:base'}>
+                                <BaseSettings />
+                            </Permission>
+                        </FlexBox>
+                        <FlexBox className={'root-col'}>
+                            <Permission operationCode={'system:settings:query:mail'}>
+                                <MailSettings />
+                            </Permission>
+                        </FlexBox>
+                    </FlexBox>
+                </HideScrollbar>
+            </FitFullscreen>
+        </>
+    )
+}
+
+export default Settings