Optimize role page

src/pages/system/Role.tsx

@@ -487,15 +487,7 @@ const Role: React.FC = () => {
         JSON.stringify(tableParams.pagination?.current)
     ])
 
-    return (
-        <>
-            <FitFullScreen>
-                <HideScrollbar
-                    style={{ padding: 30 }}
-                    isShowVerticalScrollbar
-                    autoHideWaitingTime={500}
-                >
-                    <FlexBox gap={20}>
+    const toolbar = (
         <FlexBox direction={'horizontal'} gap={10}>
             <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
                 <AntdButton
@@ -503,24 +495,15 @@ const Role: React.FC = () => {
                     style={{ padding: '4px 8px' }}
                     onClick={handleOnAddBtnClick}
                 >
-                                    <Icon
-                                        component={IconFatwebPlus}
-                                        style={{ fontSize: '1.2em' }}
-                                    />
+                    <Icon component={IconFatwebPlus} style={{ fontSize: '1.2em' }} />
                 </AntdButton>
             </Card>
             <Card
                 hidden={tableSelectedItem.length === 0}
                 style={{ overflow: 'inherit', flex: '0 0 auto' }}
             >
-                                <AntdButton
-                                    style={{ padding: '4px 8px' }}
-                                    onClick={handleOnListDeleteBtnClick}
-                                >
-                                    <Icon
-                                        component={IconFatwebDelete}
-                                        style={{ fontSize: '1.2em' }}
-                                    />
+                <AntdButton style={{ padding: '4px 8px' }} onClick={handleOnListDeleteBtnClick}>
+                    <Icon component={IconFatwebDelete} style={{ fontSize: '1.2em' }} />
                 </AntdButton>
             </Card>
             <Card style={{ overflow: 'inherit' }}>
@@ -538,14 +521,9 @@ const Role: React.FC = () => {
                     suffix={
                         <>
                             {!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>
                             </AntdCheckbox>
                         </>
@@ -563,6 +541,9 @@ const Role: React.FC = () => {
                 </AntdButton>
             </Card>
         </FlexBox>
+    )
+
+    const table = (
         <Card>
             <AntdTable
                 dataSource={roleData}
@@ -577,17 +558,9 @@ const Role: React.FC = () => {
                 }}
             />
         </Card>
-                    </FlexBox>
-                </HideScrollbar>
-            </FitFullScreen>
-            <AntdDrawer
-                title={isDrawerEdit ? '编辑角色' : '添加角色'}
-                width={'36vw'}
-                onClose={handleOnDrawerClose}
-                open={isDrawerOpen}
-                closable={!isSubmitting}
-                maskClosable={!isSubmitting}
-                extra={
+    )
+
+    const drawerToolbar = (
         <AntdSpace>
             <AntdTooltip title={'刷新权限列表'}>
                 <AntdButton onClick={getPowerTreeData} disabled={isSubmitting}>
@@ -606,8 +579,9 @@ const Role: React.FC = () => {
                 提交
             </AntdButton>
         </AntdSpace>
-                }
-            >
+    )
+
+    const addAndEditForm = (
         <AntdForm form={form} disabled={isSubmitting}>
             <AntdForm.Item hidden={!isDrawerEdit} name={'id'} label={'ID'}>
                 <AntdInput disabled />
@@ -637,6 +611,32 @@ const Role: React.FC = () => {
                 <AntdSwitch />
             </AntdForm.Item>
         </AntdForm>
+    )
+
+    return (
+        <>
+            <FitFullScreen>
+                <HideScrollbar
+                    style={{ padding: 30 }}
+                    isShowVerticalScrollbar
+                    autoHideWaitingTime={500}
+                >
+                    <FlexBox gap={20}>
+                        {toolbar}
+                        {table}
+                    </FlexBox>
+                </HideScrollbar>
+            </FitFullScreen>
+            <AntdDrawer
+                title={isDrawerEdit ? '编辑角色' : '添加角色'}
+                width={'36vw'}
+                onClose={handleOnDrawerClose}
+                open={isDrawerOpen}
+                closable={!isSubmitting}
+                maskClosable={!isSubmitting}
+                extra={drawerToolbar}
+            >
+                {addAndEditForm}
             </AntdDrawer>
             {contextHolder}
         </>