Optimize code

This commit is contained in:
2024-01-08 13:43:47 +08:00
parent d526d913b9
commit 88c66bd7a7
12 changed files with 68 additions and 70 deletions

View File

@@ -11,7 +11,7 @@ interface IndicatorProps {
const Indicator: React.FC<IndicatorProps> = ({ total, current, onSwitch }) => { const Indicator: React.FC<IndicatorProps> = ({ total, current, onSwitch }) => {
const handleClick = (index: number) => { const handleClick = (index: number) => {
return () => { return () => {
onSwitch && onSwitch(index) onSwitch?.(index)
} }
} }

View File

@@ -16,7 +16,7 @@ const Item: React.FC<ItemProps> = (props) => {
const showSubmenu = (e: React.MouseEvent) => { const showSubmenu = (e: React.MouseEvent) => {
const parentElement = e.currentTarget.parentElement const parentElement = e.currentTarget.parentElement
if (parentElement && parentElement.childElementCount === 2) { if (parentElement?.childElementCount === 2) {
const parentClientRect = parentElement.getBoundingClientRect() const parentClientRect = parentElement.getBoundingClientRect()
if (parentClientRect.top <= screen.height / 2) { if (parentClientRect.top <= screen.height / 2) {
setSubmenuTop(parentClientRect.top) setSubmenuTop(parentClientRect.top)
@@ -42,18 +42,16 @@ const Item: React.FC<ItemProps> = (props) => {
} }
> >
<div className={'icon-box'}> <div className={'icon-box'}>
{props.icon ? ( {props.icon && <Icon className={'icon'} component={props.icon} />}
<Icon className={'icon'} component={props.icon} />
) : undefined}
</div> </div>
<span className={'text'}>{props.text}</span> <span className={'text'}>{props.text}</span>
</NavLink> </NavLink>
</div> </div>
{props.children ? ( {props.children && (
<Submenu submenuTop={submenuTop} submenuLeft={submenuLeft}> <Submenu submenuTop={submenuTop} submenuLeft={submenuLeft}>
{props.children} {props.children}
</Submenu> </Submenu>
) : undefined} )}
</li> </li>
) )
} }

View File

@@ -29,7 +29,7 @@ const Sidebar: React.FC<SidebarProps> & {
const switchSidebar = () => { const switchSidebar = () => {
setLocalStorage('HIDE_SIDEBAR', !hideSidebar ? 'true' : 'false') setLocalStorage('HIDE_SIDEBAR', !hideSidebar ? 'true' : 'false')
setHideSidebar(!hideSidebar) setHideSidebar(!hideSidebar)
props.onSidebarSwitch && props.onSidebarSwitch(hideSidebar) props.onSidebarSwitch?.(hideSidebar)
} }
return ( return (

View File

@@ -529,9 +529,9 @@ const Group: React.FC = () => {
} }
suffix={ suffix={
<> <>
{!isRegexLegal ? ( {!isRegexLegal && (
<span style={{ color: COLOR_ERROR_SECONDARY }}></span> <span style={{ color: COLOR_ERROR_SECONDARY }}></span>
) : undefined} )}
<AntdCheckbox checked={isUseRegex} onChange={handleOnUseRegexChange}> <AntdCheckbox checked={isUseRegex} onChange={handleOnUseRegexChange}>
<AntdTooltip title={'正则表达式'}>.*</AntdTooltip> <AntdTooltip title={'正则表达式'}>.*</AntdTooltip>
</AntdCheckbox> </AntdCheckbox>

View File

@@ -538,9 +538,9 @@ const Role: React.FC = () => {
} }
suffix={ suffix={
<> <>
{!isRegexLegal ? ( {!isRegexLegal && (
<span style={{ color: COLOR_ERROR_SECONDARY }}></span> <span style={{ color: COLOR_ERROR_SECONDARY }}></span>
) : undefined} )}
<AntdCheckbox checked={isUseRegex} onChange={handleOnUseRegexChange}> <AntdCheckbox checked={isUseRegex} onChange={handleOnUseRegexChange}>
<AntdTooltip title={'正则表达式'}>.*</AntdTooltip> <AntdTooltip title={'正则表达式'}>.*</AntdTooltip>
</AntdCheckbox> </AntdCheckbox>

View File

@@ -123,7 +123,7 @@ const SensitiveWord: React.FC = () => {
justifyContent: 'flex-end' justifyContent: 'flex-end'
}} }}
> >
{selectedKeys?.length === 1 ? ( {selectedKeys?.length === 1 && (
<AntdTooltip title={'删除选中项'}> <AntdTooltip title={'删除选中项'}>
<Icon <Icon
style={{ fontSize: '1.2em' }} style={{ fontSize: '1.2em' }}
@@ -131,7 +131,7 @@ const SensitiveWord: React.FC = () => {
onClick={handleOnDelete} onClick={handleOnDelete}
/> />
</AntdTooltip> </AntdTooltip>
) : undefined} )}
</span>, </span>,
'拦截' '拦截'

View File

@@ -27,7 +27,7 @@ export const SettingsCard: React.FC<SettingsCardProps> = (props) => {
<FlexBox direction={'horizontal'} className={'head'}> <FlexBox direction={'horizontal'} className={'head'}>
<Icon component={props.icon} className={'icon'} /> <Icon component={props.icon} className={'icon'} />
<div className={'title'}>{props.title}</div> <div className={'title'}>{props.title}</div>
{!props.loading ? ( {!props.loading && (
<Permission operationCode={props.modifyOperationCode}> <Permission operationCode={props.modifyOperationCode}>
{props.expand} {props.expand}
<AntdButton onClick={props.onReset} title={'重置'}> <AntdButton onClick={props.onReset} title={'重置'}>
@@ -37,7 +37,7 @@ export const SettingsCard: React.FC<SettingsCardProps> = (props) => {
<Icon component={IconOxygenSave} /> <Icon component={IconOxygenSave} />
</AntdButton> </AntdButton>
</Permission> </Permission>
) : undefined} )}
</FlexBox> </FlexBox>
<LoadingMask <LoadingMask
maskContent={<AntdSkeleton active paragraph={{ rows: 6 }} />} maskContent={<AntdSkeleton active paragraph={{ rows: 6 }} />}

View File

@@ -169,22 +169,20 @@ const User: React.FC = () => {
<AntdTag color={'green'}></AntdTag> <AntdTag color={'green'}></AntdTag>
) : ( ) : (
<> <>
{record.verify ? ( {record.verify && (
<> <>
<AntdPopover content={record.verify} trigger={'click'}> <AntdPopover content={record.verify} trigger={'click'}>
<AntdTag style={{ cursor: 'pointer' }}></AntdTag> <AntdTag style={{ cursor: 'pointer' }}></AntdTag>
</AntdPopover> </AntdPopover>
</> </>
) : undefined} )}
{record.locking ? <AntdTag></AntdTag> : undefined} {record.locking && <AntdTag></AntdTag>}
{record.expiration && isPastTime(record.expiration) ? ( {record.expiration && isPastTime(record.expiration) && (
<AntdTag></AntdTag> <AntdTag></AntdTag>
) : undefined} )}
{record.credentialsExpiration && {record.credentialsExpiration &&
isPastTime(record.credentialsExpiration) ? ( isPastTime(record.credentialsExpiration) && <AntdTag></AntdTag>}
<AntdTag></AntdTag> {!record.enable && <AntdTag></AntdTag>}
) : undefined}
{!record.enable ? <AntdTag></AntdTag> : undefined}
</> </>
)} )}
</AntdTooltip> </AntdTooltip>
@@ -215,14 +213,14 @@ const User: React.FC = () => {
</a> </a>
</Permission> </Permission>
<Permission operationCode={'system:user:delete:one'}> <Permission operationCode={'system:user:delete:one'}>
{record.id !== '0' ? ( {record.id !== '0' && (
<a <a
style={{ color: COLOR_PRODUCTION }} style={{ color: COLOR_PRODUCTION }}
onClick={handleOnDeleteBtnClick(record)} onClick={handleOnDeleteBtnClick(record)}
> >
</a> </a>
) : undefined} )}
</Permission> </Permission>
</AntdSpace> </AntdSpace>
</> </>
@@ -378,7 +376,7 @@ const User: React.FC = () => {
> >
<AntdInput.Password /> <AntdInput.Password />
</AntdForm.Item> </AntdForm.Item>
{value.id !== '0' ? ( {value.id !== '0' && (
<AntdForm.Item <AntdForm.Item
name={'needChangePassword'} name={'needChangePassword'}
label={'需改密'} label={'需改密'}
@@ -387,7 +385,7 @@ const User: React.FC = () => {
> >
<AntdSwitch /> <AntdSwitch />
</AntdForm.Item> </AntdForm.Item>
) : undefined} )}
</AntdForm> </AntdForm>
), ),
onOk: () => onOk: () =>
@@ -803,7 +801,7 @@ const User: React.FC = () => {
> >
<AntdInput allowClear /> <AntdInput allowClear />
</AntdForm.Item> </AntdForm.Item>
{!isDrawerEdit ? ( {!isDrawerEdit && (
<> <>
<AntdForm.Item <AntdForm.Item
name={'password'} name={'password'}
@@ -813,7 +811,7 @@ const User: React.FC = () => {
<AntdInput.Password allowClear /> <AntdInput.Password allowClear />
</AntdForm.Item> </AntdForm.Item>
</> </>
) : undefined} )}
<AntdForm.Item name={'nickname'} label={'昵称'} rules={[{ whitespace: false }]}> <AntdForm.Item name={'nickname'} label={'昵称'} rules={[{ whitespace: false }]}>
<AntdInput allowClear /> <AntdInput allowClear />
</AntdForm.Item> </AntdForm.Item>
@@ -824,7 +822,7 @@ const User: React.FC = () => {
> >
<AntdInput type={'email'} allowClear /> <AntdInput type={'email'} allowClear />
</AntdForm.Item> </AntdForm.Item>
{formValues?.id !== '0' ? ( {formValues?.id !== '0' && (
<> <>
<AntdForm.Item name={'roleIds'} label={'角色'}> <AntdForm.Item name={'roleIds'} label={'角色'}>
<AntdSelect <AntdSelect
@@ -900,7 +898,7 @@ const User: React.FC = () => {
<AntdSwitch /> <AntdSwitch />
</AntdForm.Item> </AntdForm.Item>
</> </>
) : undefined} )}
</AntdForm> </AntdForm>
) )
@@ -943,9 +941,9 @@ const User: React.FC = () => {
} }
suffix={ suffix={
<> <>
{!isRegexLegal ? ( {!isRegexLegal && (
<span style={{ color: COLOR_ERROR_SECONDARY }}></span> <span style={{ color: COLOR_ERROR_SECONDARY }}></span>
) : undefined} )}
<AntdCheckbox checked={isUseRegex} onChange={handleOnUseRegexChange}> <AntdCheckbox checked={isUseRegex} onChange={handleOnUseRegexChange}>
<AntdTooltip title={'正则表达式'}>.*</AntdTooltip> <AntdTooltip title={'正则表达式'}>.*</AntdTooltip>
</AntdCheckbox> </AntdCheckbox>

View File

@@ -13,7 +13,8 @@ const SystemFramework: React.FC = () => {
<Sidebar title={'系统配置'}> <Sidebar title={'系统配置'}>
<Sidebar.ItemList> <Sidebar.ItemList>
{getSystemRouteJson().map((value) => { {getSystemRouteJson().map((value) => {
return value.menu ? ( return (
value.menu && (
<Sidebar.Item <Sidebar.Item
end={value.id === 'system' ? true : undefined} end={value.id === 'system' ? true : undefined}
path={value.absolutePath} path={value.absolutePath}
@@ -21,7 +22,8 @@ const SystemFramework: React.FC = () => {
text={value.name} text={value.name}
key={value.id} key={value.id}
/> />
) : undefined )
)
})} })}
</Sidebar.ItemList> </Sidebar.ItemList>
</Sidebar> </Sidebar>

View File

@@ -42,8 +42,8 @@ const ToolsFramework: React.FC = () => {
text={tool.name} text={tool.name}
key={tool.id} key={tool.id}
> >
{tool.children {tool.children &&
? tool.children.map((subTool) => { tool.children.map((subTool) => {
return ( return (
<Sidebar.Item <Sidebar.Item
path={subTool.absolutePath} path={subTool.absolutePath}
@@ -51,8 +51,7 @@ const ToolsFramework: React.FC = () => {
key={subTool.id} key={subTool.id}
/> />
) )
}) })}
: undefined}
</Sidebar.Item> </Sidebar.Item>
) : undefined ) : undefined
})} })}

View File

@@ -15,13 +15,13 @@ const ToolsFramework: React.FC = () => {
title={'个人中心'} title={'个人中心'}
bottomFixed={ bottomFixed={
<Sidebar.ItemList> <Sidebar.ItemList>
{hasPathPermission('/system') ? ( {hasPathPermission('/system') && (
<Sidebar.Item <Sidebar.Item
path={'/system'} path={'/system'}
icon={IconOxygenSetting} icon={IconOxygenSetting}
text={'系统配置'} text={'系统配置'}
/> />
) : undefined} )}
<Sidebar.Item <Sidebar.Item
path={'/'} path={'/'}
icon={IconOxygenBack} icon={IconOxygenBack}
@@ -32,15 +32,17 @@ const ToolsFramework: React.FC = () => {
> >
<Sidebar.ItemList> <Sidebar.ItemList>
{user.map((value) => { {user.map((value) => {
return value.menu ? ( return (
value.menu && (
<Sidebar.Item <Sidebar.Item
end={value.id === 'user' ? true : undefined} end={value.id === 'user' && true}
path={value.absolutePath} path={value.absolutePath}
icon={value.icon} icon={value.icon}
text={value.name} text={value.name}
key={value.id} key={value.id}
/> />
) : undefined )
)
})} })}
</Sidebar.ItemList> </Sidebar.ItemList>
</Sidebar> </Sidebar>

View File

@@ -7,8 +7,7 @@ export const getRedirectUrl = (path: string, redirectUrl: string): string => {
export const getFullTitle = (data: _DataNode, preTitle?: string) => { export const getFullTitle = (data: _DataNode, preTitle?: string) => {
data.fullTitle = `${preTitle ? `${preTitle}-` : ''}${data.title as string}` data.fullTitle = `${preTitle ? `${preTitle}-` : ''}${data.title as string}`
data.children && data.children?.forEach((value) => {
data.children.forEach((value) => {
getFullTitle(value, data.fullTitle) getFullTitle(value, data.fullTitle)
}) })