feat: 增加全局水印配置

src/app.tsx

@@ -175,9 +175,14 @@ export const layout: RunTimeLayoutConfig = ({ initialState }) => {
   return {
     rightContentRender: () => <RightContent />,
     disableContentMargin: false,
-    waterMarkProps: {
-      content: initialState?.currentUser?.username
+    waterMarkProps: initialState.currentUser && {
+      fontColor: 'rgba(0,0,0,.1)',
+      offsetTop: 200,
+      content: `${initialState.currentUser?.username}  ${initialState.currentUser?.telephone.slice(
+        -4
+      )}`
     },
+
     footerRender: () => <Footer />,
     onPageChange: () => {
       const { location } = history

src/pages/Business/Attendance/components/ShowTitleMenu.tsx

@@ -14,7 +14,11 @@ const ShowTitleMenu: React.FC<ShowTitleMenuProps> = ({ options, onSelect, defaul
     }
   }
   return (
-    <div className="h-full w-max-234px rounded-4px shadow-card">
+    <div
+      className="w-max-234px rounded-4px shadow-card"
+      style={{
+        height: `calc(100vh - 96px)`
+      }}>
       <div className="p-4 border-b-1 border-solid border-black border-opacity-10 bg-[#f7f9fa] text-left">
         <span>栏目/功能</span>
       </div>

src/pages/Business/Attendance/index.tsx

@@ -13,6 +13,7 @@ import {
 } from '@/services/user/system'
 import ConnectModal from '@/pages/role/System/components/ConnectModal'
 import ProForm, { ProFormText } from '@ant-design/pro-form'
+import { PageContainer } from '@ant-design/pro-layout'
 
 const titleOptions = [
   { label: '加班申请人', value: 0 },
@@ -162,73 +163,75 @@ const Attendance: React.FC = () => {
   ]
 
   return (
-    <div className="h-full w-full flex flex-row">
-      <ShowTitleMenu onSelect={onSelect} options={titleOptions} defaultValue={0} />
-      <div className="w-max-3/4">
-        <div className="ml-8 bg-white p-4 shadow-md shadow-hex-3e2c5a relative">
-          {state.menuId === 0 ? (
-            <>
-              <div className="absolute right-7 top-7 z-100">
-                <Button
-                  type="primary"
-                  onClick={() =>
-                    setState({ ...state, visible: true, type: modalType.addobjectModal })
-                  }>
-                  添加新申请人
-                </Button>
-                <ConnectModal
-                  dataId={state.id}
-                  show={state.visible}
-                  onShowChange={(visible: boolean) => setState({ ...state, visible })}
-                  onReload={() => tryGetRoleStaffList(state.id)}
-                  postUrl={
-                    state.type === modalType.addobjectModal
-                      ? '/attendance/add'
-                      : '/attendance/linkStaff'
-                  }
-                  showButton={false}
+    <PageContainer title={false} breadcrumb={false} className="h-full w-full flex flex-row">
+      <div className="h-full w-full flex flex-row">
+        <ShowTitleMenu onSelect={onSelect} options={titleOptions} defaultValue={0} />
+        <div className="w-max-3/4">
+          <div className="ml-8 bg-white p-4 shadow-md shadow-hex-3e2c5a relative">
+            {state.menuId === 0 ? (
+              <>
+                <div className="absolute right-7 top-7 z-100">
+                  <Button
+                    type="primary"
+                    onClick={() =>
+                      setState({ ...state, visible: true, type: modalType.addobjectModal })
+                    }>
+                    添加新申请人
+                  </Button>
+                  <ConnectModal
+                    dataId={state.id}
+                    show={state.visible}
+                    onShowChange={(visible: boolean) => setState({ ...state, visible })}
+                    onReload={() => tryGetRoleStaffList(state.id)}
+                    postUrl={
+                      state.type === modalType.addobjectModal
+                        ? '/attendance/add'
+                        : '/attendance/linkStaff'
+                    }
+                    showButton={false}
+                  />
+                </div>
+                <Table
+                  bordered
+                  title={() => '加班申请人'}
+                  columns={columns}
+                  dataSource={state.attendanceList}
+                  rowKey={row => row.id}
                 />
-              </div>
-              <Table
-                bordered
-                title={() => '加班申请人'}
-                columns={columns}
-                dataSource={state.attendanceList}
-                rowKey={row => row.id}
-              />
-            </>
-          ) : null}
-          {state.menuId === 1 ? (
-            <>
-              <div>
-                <ProForm
-                  formRef={formRef}
-                  onFinish={async values => {
-                    await tryUpdateParameters(values)
-                    message.success('更新成功')
-                    return true
-                  }}
-                  initialValues={{ parametersType: 1 }}>
-                  <h3 className="font-bold">销假参数</h3>
-                  <div className="mt-4 mb-4">
-                    <Alert
-                      type="warning"
-                      message="超过当前设置销假参数（不包含当前所写的）不计算考勤"
-                    />
-                  </div>
-                  <ProForm.Group>
-                    <ProFormText name="parametersType" hidden />
-                    <span>每月</span>
-                    <ProFormText name="content" label="" />
-                    <span>号</span>
-                  </ProForm.Group>
-                </ProForm>
-              </div>
-            </>
-          ) : null}
+              </>
+            ) : null}
+            {state.menuId === 1 ? (
+              <>
+                <div>
+                  <ProForm
+                    formRef={formRef}
+                    onFinish={async values => {
+                      await tryUpdateParameters(values)
+                      message.success('更新成功')
+                      return true
+                    }}
+                    initialValues={{ parametersType: 1 }}>
+                    <h3 className="font-bold">销假参数</h3>
+                    <div className="mt-4 mb-4">
+                      <Alert
+                        type="warning"
+                        message="超过当前设置销假参数（不包含当前所写的）不计算考勤"
+                      />
+                    </div>
+                    <ProForm.Group>
+                      <ProFormText name="parametersType" hidden />
+                      <span>每月</span>
+                      <ProFormText name="content" label="" />
+                      <span>号</span>
+                    </ProForm.Group>
+                  </ProForm>
+                </div>
+              </>
+            ) : null}
+          </div>
         </div>
       </div>
-    </div>
+    </PageContainer>
   )
 }
 

src/pages/Business/Contact/index.tsx

@@ -19,6 +19,7 @@ import {
 import type { ColumnsType } from 'antd/lib/table'
 import { Delete } from '@icon-park/react'
 import { useRef } from 'react'
+import { PageContainer } from '@ant-design/pro-layout'
 
 enum modalType {
   CREATE = 0,
@@ -310,135 +311,137 @@ const Contact: React.FC = () => {
     }
   ]
   return (
-    <div className="h-full w-full flex flex-row">
-      <ShowTitleMenu
-        onSelect={onSelect}
-        options={[
-          { label: '商机状态组', value: 1 },
-          { label: '来源设置', value: 2 }
-        ]}
-        defaultValue={1}
-      />
-      <div className="w-max-3/4">
-        <div className="ml-8 bg-white p-4 shadow-md shadow-hex-3e2c5a relative">
+    <PageContainer title={false} breadcrumb={false}>
+      <div className="h-full w-full flex flex-row">
+        <ShowTitleMenu
+          onSelect={onSelect}
+          options={[
+            { label: '商机状态组', value: 1 },
+            { label: '来源设置', value: 2 }
+          ]}
+          defaultValue={1}
+        />
+        <div className="w-max-3/4">
+          <div className="ml-8 bg-white p-4 shadow-md shadow-hex-3e2c5a relative">
+            {state.menuId === 1 ? (
+              <>
+                <div className="pb-3 border-b border-b-black border-opacity-8 mb-3 flex items-center justify-between">
+                  <div>商机状态组</div>
+                  <Button
+                    type="primary"
+                    onClick={() => setState({ ...state, visible: true, type: modalType.CREATE })}>
+                    添加新组
+                  </Button>
+                </div>
+                <Table
+                  columns={mainColumns}
+                  dataSource={state.dataSource}
+                  bordered
+                  rowKey={row => row.id}
+                />
+              </>
+            ) : null}
+            {state.menuId === 2 ? (
+              <>
+                <div className="pb-3 border-b border-b-black border-opacity-8 mb-3 flex items-center justify-between">
+                  <div>来源设置</div>
+                  <Button
+                    type="primary"
+                    onClick={() => setState({ ...state, visible: true, type: modalType.CREATE })}>
+                    添加来源
+                  </Button>
+                </div>
+                <Table
+                  columns={clientSource}
+                  dataSource={state.clientSourceList}
+                  bordered
+                  rowKey={row => row.id}
+                />
+              </>
+            ) : null}
+          </div>
+        </div>
+        <ModalForm
+          visible={state.visible}
+          formRef={formRef}
+          onVisibleChange={show => setState({ ...state, visible: show })}
+          title={`${state.type === modalType.CREATE ? '创建' : '更新'}${
+            modalTitleType[state.menuId]
+          }`}
+          onFinish={async value => {
+            try {
+              if (state.type === modalType.CREATE && state.menuId === 1) {
+                await tryAddBusinessgroup({
+                  ...value,
+                  stageSettings: JSON.stringify(value.stageSettings.filter(item => !item.isDefault))
+                })
+              }
+              if (state.type === modalType.UPDATE && state.menuId === 1) {
+                await tryUpdateBusinessGroup({
+                  ...value,
+                  stageSettings: JSON.stringify(value.stageSettings.filter(item => !item.isDefault))
+                })
+              }
+              if (state.type === modalType.CREATE && state.menuId === 2) {
+                await tryAddClientSource({
+                  ...value
+                })
+              }
+              if (state.type === modalType.UPDATE && state.menuId === 2) {
+                await tryUpdateClientSource({
+                  ...value
+                })
+              }
+              return true
+            } catch (error) {
+              message.error(`${state.type === modalType.CREATE ? '创建' : '更新'}失败，请重试`)
+              return false
+            }
+          }}>
           {state.menuId === 1 ? (
             <>
-              <div className="pb-3 border-b border-b-black border-opacity-8 mb-3 flex items-center justify-between">
-                <div>商机状态组</div>
-                <Button
-                  type="primary"
-                  onClick={() => setState({ ...state, visible: true, type: modalType.CREATE })}>
-                  添加新组
-                </Button>
-              </div>
-              <Table
-                columns={mainColumns}
-                dataSource={state.dataSource}
-                bordered
-                rowKey={row => row.id}
-              />
+              <ProFormText name="name" label="组名称" required />
+              <ProFormText name="id" hidden />
+              <ProForm.Item name="departmentIds" label="应用部门" required>
+                <TreeSelect treeData={department} multiple={true} />
+              </ProForm.Item>
+              <ProForm.Item
+                label="状态设置"
+                name="stageSettings"
+                initialValue={defaultData}
+                trigger="onValuesChange">
+                <EditableProTable<StageSettingsType>
+                  rowKey="id"
+                  toolBarRender={false}
+                  columns={columns}
+                  recordCreatorProps={{
+                    newRecordType: 'dataSource',
+                    position: 'bottom',
+                    record: () => ({
+                      id: Date.now()
+                    })
+                  }}
+                  editable={{
+                    type: 'multiple',
+                    editableKeys,
+                    onChange: setEditableRowKeys,
+                    actionRender: (row, _, dom) => {
+                      return [dom.delete]
+                    }
+                  }}
+                />
+              </ProForm.Item>
             </>
           ) : null}
           {state.menuId === 2 ? (
             <>
-              <div className="pb-3 border-b border-b-black border-opacity-8 mb-3 flex items-center justify-between">
-                <div>来源设置</div>
-                <Button
-                  type="primary"
-                  onClick={() => setState({ ...state, visible: true, type: modalType.CREATE })}>
-                  添加来源
-                </Button>
-              </div>
-              <Table
-                columns={clientSource}
-                dataSource={state.clientSourceList}
-                bordered
-                rowKey={row => row.id}
-              />
+              <ProFormText name="id" hidden />
+              <ProFormText name="name" label="来源名称" required />
             </>
           ) : null}
-        </div>
+        </ModalForm>
       </div>
-      <ModalForm
-        visible={state.visible}
-        formRef={formRef}
-        onVisibleChange={show => setState({ ...state, visible: show })}
-        title={`${state.type === modalType.CREATE ? '创建' : '更新'}${
-          modalTitleType[state.menuId]
-        }`}
-        onFinish={async value => {
-          try {
-            if (state.type === modalType.CREATE && state.menuId === 1) {
-              await tryAddBusinessgroup({
-                ...value,
-                stageSettings: JSON.stringify(value.stageSettings.filter(item => !item.isDefault))
-              })
-            }
-            if (state.type === modalType.UPDATE && state.menuId === 1) {
-              await tryUpdateBusinessGroup({
-                ...value,
-                stageSettings: JSON.stringify(value.stageSettings.filter(item => !item.isDefault))
-              })
-            }
-            if (state.type === modalType.CREATE && state.menuId === 2) {
-              await tryAddClientSource({
-                ...value
-              })
-            }
-            if (state.type === modalType.UPDATE && state.menuId === 2) {
-              await tryUpdateClientSource({
-                ...value
-              })
-            }
-            return true
-          } catch (error) {
-            message.error(`${state.type === modalType.CREATE ? '创建' : '更新'}失败，请重试`)
-            return false
-          }
-        }}>
-        {state.menuId === 1 ? (
-          <>
-            <ProFormText name="name" label="组名称" required />
-            <ProFormText name="id" hidden />
-            <ProForm.Item name="departmentIds" label="应用部门" required>
-              <TreeSelect treeData={department} multiple={true} />
-            </ProForm.Item>
-            <ProForm.Item
-              label="状态设置"
-              name="stageSettings"
-              initialValue={defaultData}
-              trigger="onValuesChange">
-              <EditableProTable<StageSettingsType>
-                rowKey="id"
-                toolBarRender={false}
-                columns={columns}
-                recordCreatorProps={{
-                  newRecordType: 'dataSource',
-                  position: 'bottom',
-                  record: () => ({
-                    id: Date.now()
-                  })
-                }}
-                editable={{
-                  type: 'multiple',
-                  editableKeys,
-                  onChange: setEditableRowKeys,
-                  actionRender: (row, _, dom) => {
-                    return [dom.delete]
-                  }
-                }}
-              />
-            </ProForm.Item>
-          </>
-        ) : null}
-        {state.menuId === 2 ? (
-          <>
-            <ProFormText name="id" hidden />
-            <ProFormText name="name" label="来源名称" required />
-          </>
-        ) : null}
-      </ModalForm>
-    </div>
+    </PageContainer>
   )
 }
 

src/pages/Business/Invoice/index.tsx

@@ -17,6 +17,7 @@ import {
 import { useRequest } from 'umi'
 import classNames from 'classnames'
 import './index.less'
+import { PageContainer } from '@ant-design/pro-layout'
 
 const DragHandle = SortableHandle(() => <MenuOutlined style={{ cursor: 'grab', color: '#999' }} />)
 const SortableItem = SortableElement(props => <tr {...props} />)
@@ -216,130 +217,132 @@ const Invoice: React.FC = () => {
   }
 
   return (
-    <div className="h-full w-full flex flex-row">
-      <ShowTitleMenu
-        onSelect={onSelect}
-        options={[{ label: '开票内容', value: 1 }]}
-        defaultValue={1}
-      />
-      <div className="w-max-3/4">
-        <div className="ml-8 bg-white p-4 shadow-md shadow-hex-3e2c5a relative">
-          <div className="absolute right-4 top-4 z-100">
-            <Button
-              type="primary"
-              onClick={() => setState({ ...state, visible: true, type: modalType.CREATE })}>
-              添加新内容
-            </Button>
+    <PageContainer title={false} breadcrumb={false}>
+      <div className="h-full w-full flex flex-row">
+        <ShowTitleMenu
+          onSelect={onSelect}
+          options={[{ label: '开票内容', value: 1 }]}
+          defaultValue={1}
+        />
+        <div className="w-max-3/4">
+          <div className="ml-8 bg-white p-4 shadow-md shadow-hex-3e2c5a relative">
+            <div className="absolute right-4 top-4 z-100">
+              <Button
+                type="primary"
+                onClick={() => setState({ ...state, visible: true, type: modalType.CREATE })}>
+                添加新内容
+              </Button>
+            </div>
+            {state.menuId === 1 ? (
+              <Tabs
+                defaultActiveKey="6"
+                type="card"
+                onChange={key => setState({ ...state, activeKey: key })}>
+                <TabPane tab="开票内容 1" key="6">
+                  <Table<API.InvoiceList>
+                    pagination={false}
+                    columns={mainColumns}
+                    dataSource={state.dataSource}
+                    components={{
+                      body: {
+                        wrapper: DraggableContainer,
+                        row: DraggableBodyRow
+                      }
+                    }}
+                    bordered
+                    rowKey="index"
+                  />
+                </TabPane>
+                <TabPane tab="开票内容 2" key="13">
+                  <Table<API.InvoiceList>
+                    pagination={false}
+                    columns={mainColumns}
+                    dataSource={state.dataSource}
+                    components={{
+                      body: {
+                        wrapper: DraggableContainer,
+                        row: DraggableBodyRow
+                      }
+                    }}
+                    bordered
+                    rowKey="index"
+                  />
+                </TabPane>
+              </Tabs>
+            ) : // <>
+            //   <div className="pb-3 border-b border-b-black border-opacity-8 mb-3 flex items-center justify-between">
+            //     <div>开票内容</div>
+            //     <Button
+            //       type="primary"
+            //       onClick={() => setState({ ...state, visible: true, type: modalType.CREATE })}>
+            //       添加新内容
+            //     </Button>
+            //   </div>
+            //   <Table
+            //     pagination={false}
+            //     columns={mainColumns}
+            //     dataSource={state.dataSource}
+            //     components={{
+            //       body: {
+            //         wrapper: DraggableContainer,
+            //         row: DraggableBodyRow
+            //       }
+            //     }}
+            //     bordered
+            //     rowKey="index"
+            //   />
+            // </>
+            null}
           </div>
-          {state.menuId === 1 ? (
-            <Tabs
-              defaultActiveKey="6"
-              type="card"
-              onChange={key => setState({ ...state, activeKey: key })}>
-              <TabPane tab="开票内容 1" key="6">
-                <Table<API.InvoiceList>
-                  pagination={false}
-                  columns={mainColumns}
-                  dataSource={state.dataSource}
-                  components={{
-                    body: {
-                      wrapper: DraggableContainer,
-                      row: DraggableBodyRow
-                    }
-                  }}
-                  bordered
-                  rowKey="index"
-                />
-              </TabPane>
-              <TabPane tab="开票内容 2" key="13">
-                <Table<API.InvoiceList>
-                  pagination={false}
-                  columns={mainColumns}
-                  dataSource={state.dataSource}
-                  components={{
-                    body: {
-                      wrapper: DraggableContainer,
-                      row: DraggableBodyRow
-                    }
-                  }}
-                  bordered
-                  rowKey="index"
-                />
-              </TabPane>
-            </Tabs>
-          ) : // <>
-          //   <div className="pb-3 border-b border-b-black border-opacity-8 mb-3 flex items-center justify-between">
-          //     <div>开票内容</div>
-          //     <Button
-          //       type="primary"
-          //       onClick={() => setState({ ...state, visible: true, type: modalType.CREATE })}>
-          //       添加新内容
-          //     </Button>
-          //   </div>
-          //   <Table
-          //     pagination={false}
-          //     columns={mainColumns}
-          //     dataSource={state.dataSource}
-          //     components={{
-          //       body: {
-          //         wrapper: DraggableContainer,
-          //         row: DraggableBodyRow
-          //       }
-          //     }}
-          //     bordered
-          //     rowKey="index"
-          //   />
-          // </>
-          null}
         </div>
-      </div>
-      <ModalForm
-        visible={state.visible}
-        formRef={formRef}
-        onVisibleChange={show => setState({ ...state, visible: show })}
-        title={`${state.type === modalType.CREATE ? '新增' : '编辑'}${
-          modalTitleType[state.menuId]
-        }`}
-        onFinish={async value => {
-          try {
-            if (state.type === modalType.CREATE && state.menuId === 1) {
-              await tryAddInvoiceItem({
-                ...value
-              })
-            }
-            if (state.type === modalType.UPDATE && state.menuId === 1) {
-              await tryUpdateInvoiceItem({
-                ...value
-              })
+        <ModalForm
+          visible={state.visible}
+          formRef={formRef}
+          onVisibleChange={show => setState({ ...state, visible: show })}
+          title={`${state.type === modalType.CREATE ? '新增' : '编辑'}${
+            modalTitleType[state.menuId]
+          }`}
+          onFinish={async value => {
+            try {
+              if (state.type === modalType.CREATE && state.menuId === 1) {
+                await tryAddInvoiceItem({
+                  ...value
+                })
+              }
+              if (state.type === modalType.UPDATE && state.menuId === 1) {
+                await tryUpdateInvoiceItem({
+                  ...value
+                })
+              }
+              return true
+            } catch (error) {
+              message.error(`${state.type === modalType.CREATE ? '创建' : '更新'}失败，请重试`)
+              return false
             }
-            return true
-          } catch (error) {
-            message.error(`${state.type === modalType.CREATE ? '创建' : '更新'}失败，请重试`)
-            return false
-          }
-        }}>
-        {state.menuId === 1 ? (
-          <>
-            <ProFormText name="id" hidden />
-            <ProFormText name="name" label="开票内容" required />
-            <ProFormSelect
-              options={[
-                {
-                  value: '6',
-                  label: '6'
-                },
-                {
-                  value: '13',
-                  label: '13'
-                }
-              ]}
-              name="rate"
-              label="税率"
-            />
-          </>
-        ) : null}
-      </ModalForm>
-    </div>
+          }}>
+          {state.menuId === 1 ? (
+            <>
+              <ProFormText name="id" hidden />
+              <ProFormText name="name" label="开票内容" required />
+              <ProFormSelect
+                options={[
+                  {
+                    value: '6',
+                    label: '6'
+                  },
+                  {
+                    value: '13',
+                    label: '13'
+                  }
+                ]}
+                name="rate"
+                label="税率"
+              />
+            </>
+          ) : null}
+        </ModalForm>
+      </div>
+    </PageContainer>
   )
 }
 

src/pages/Business/Notification/index.tsx

@@ -17,6 +17,7 @@ import consts from '@/utils/consts'
 import { PlusOutlined } from '@ant-design/icons'
 import useWebSocketFn, { cmdType } from '@/hooks/core/useWebSocketFn'
 import RighEditor from './components/RighEditor'
+import { PageContainer } from '@ant-design/pro-layout'
 
 export enum msgTypeEnum {
   Notification = 'notification',
@@ -82,115 +83,118 @@ const Notification: React.FC = () => {
     return newValues
   }
   return (
-    <div className="h-full w-full flex flex-row">
-      <ShowTitleMenu options={[{ label: '通知', value: 1 }]} defaultValue={1} />
-      <div className="w-max-3/4">
-        <div className="ml-8 bg-white shadow-md shadow-hex-3e2c5a relative">
-          {/* <div className="pb-3 border-b border-b-black border-opacity-8 mb-3 flex items-center justify-between">
+    <PageContainer title={false} breadcrumb={false}>
+      <div className="h-full w-full flex flex-row">
+        <ShowTitleMenu options={[{ label: '通知', value: 1 }]} defaultValue={1} />
+        <div className="w-max-3/4">
+          <div className="ml-8 bg-white shadow-md shadow-hex-3e2c5a relative">
+            {/* <div className="pb-3 border-b border-b-black border-opacity-8 mb-3 flex items-center justify-between">
             <div>通知推送</div>
           </div> */}
-          <ProTable
-            isKeyPressSubmit
-            toolbar={{
-              title: '通知推送'
-            }}
-            actionRef={tRef}
-            columns={columns}
-            params={{ msgType: 'notification' }}
-            search={false}
-            toolbar={{
-              actions: [
-                <ModalForm
-                  isKeyPressSubmit={false}
-                  key="modalForm"
-                  trigger={
-                    <Button type="primary">
-                      <PlusOutlined />
-                      新建通知
-                    </Button>
-                  }
-                  initialValues={{ msgType: 'notification', refresh: 0 }}
-                  onFinish={async values => {
-                    try {
-                      const nValues = handleFormValues(values)
-                      await trySendNotice(nValues)
-                      message.success('添加成功')
-                      return true
-                    } catch (error) {
-                      return false
+            <ProTable
+              isKeyPressSubmit
+              actionRef={tRef}
+              columns={columns}
+              params={{ msgType: 'notification' }}
+              search={false}
+              toolbar={{
+                title: '通知推送',
+                actions: [
+                  <ModalForm
+                    isKeyPressSubmit={false}
+                    key="modalForm"
+                    trigger={
+                      <Button type="primary">
+                        <PlusOutlined />
+                        新建通知
+                      </Button>
                     }
-                  }}>
-                  <ProFormText
-                    label="标题"
-                    name="title"
-                    rules={[{ required: true, message: '请输入标题' }]}
-                  />
-                  {/* <ProFormTextArea label="内容" name="content" required /> */}
-                  <Form.Item
-                    label="内容"
-                    name="content"
-                    rules={[{ required: true, message: '请输入通知内容' }]}>
-                    <RighEditor />
-                  </Form.Item>
-                  <ProFormRadio.Group
-                    label="类型"
-                    name="msgType"
-                    required
-                    options={[
-                      { label: '通知', value: msgTypeEnum.Notification },
-                      { label: '消息', value: msgTypeEnum.Message }
-                    ]}></ProFormRadio.Group>
-                  <ProFormDependency name={['msgType']}>
-                    {({ msgType }) =>
-                      msgType === msgTypeEnum.Notification ? (
-                        <ProFormSelect
-                          name="media"
-                          label="通知类型"
-                          rules={[{ required: true, message: '请选择类型' }]}
-                          options={[
-                            { label: '版本更新', value: mediaType.VersionUpdate },
-                            { label: '节假通知', value: mediaType.HolidayNotice }
-                          ]}
-                        />
-                      ) : null
-                    }
-                  </ProFormDependency>
-                  <ProFormDependency name={['msgType', 'media']}>
-                    {({ msgType, media }) =>
-                      msgType === msgTypeEnum.Notification && media === mediaType.VersionUpdate ? (
-                        <ProFormRadio.Group
-                          name="refresh"
-                          rules={[{ required: true, message: '请选择刷新机制' }]}
-                          options={[
-                            { label: '手动刷新', value: 0 },
-                            { label: '强制刷新', value: 1 }
-                          ]}></ProFormRadio.Group>
-                      ) : null
-                    }
-                  </ProFormDependency>
-                </ModalForm>
-              ]
-            }}
-            request={async (params, sort, filter) => {
-              const { code = -1, data = {} } = await queryNoticeList({
-                ...params,
-                ...sort,
-                ...filter
-              })
-              const { message: notices = [], total = 0 } = data
-              return {
-                data: notices,
-                success: code === consts.RET_CODE.SUCCESS,
-                total
-              }
-            }}
-            bordered
-            pagination={{ defaultPageSize: 10 }}
-            rowKey={row => row.id}
-          />
+                    initialValues={{ msgType: 'notification', refresh: 0 }}
+                    onFinish={async values => {
+                      try {
+                        const nValues = handleFormValues(values)
+                        await trySendNotice(nValues)
+                        message.success('添加成功')
+                        return true
+                      } catch (error) {
+                        return false
+                      }
+                    }}>
+                    <ProFormText
+                      label="标题"
+                      name="title"
+                      rules={[{ required: true, message: '请输入标题' }]}
+                    />
+                    {/* <ProFormTextArea label="内容" name="content" required /> */}
+                    <Form.Item
+                      label="内容"
+                      name="content"
+                      rules={[{ required: true, message: '请输入通知内容' }]}>
+                      <RighEditor />
+                    </Form.Item>
+                    <ProFormRadio.Group
+                      label="类型"
+                      name="msgType"
+                      required
+                      options={[
+                        { label: '通知', value: msgTypeEnum.Notification },
+                        { label: '消息', value: msgTypeEnum.Message }
+                      ]}
+                    />
+                    <ProFormDependency name={['msgType']}>
+                      {({ msgType }) =>
+                        msgType === msgTypeEnum.Notification ? (
+                          <ProFormSelect
+                            name="media"
+                            label="通知类型"
+                            rules={[{ required: true, message: '请选择类型' }]}
+                            options={[
+                              { label: '版本更新', value: mediaType.VersionUpdate },
+                              { label: '节假通知', value: mediaType.HolidayNotice }
+                            ]}
+                          />
+                        ) : null
+                      }
+                    </ProFormDependency>
+                    <ProFormDependency name={['msgType', 'media']}>
+                      {({ msgType, media }) =>
+                        msgType === msgTypeEnum.Notification &&
+                        media === mediaType.VersionUpdate ? (
+                          <ProFormRadio.Group
+                            name="refresh"
+                            rules={[{ required: true, message: '请选择刷新机制' }]}
+                            options={[
+                              { label: '手动刷新', value: 0 },
+                              { label: '强制刷新', value: 1 }
+                            ]}
+                          />
+                        ) : null
+                      }
+                    </ProFormDependency>
+                  </ModalForm>
+                ]
+              }}
+              request={async (params, sort, filter) => {
+                const { code = -1, data = {} } = await queryNoticeList({
+                  ...params,
+                  ...sort,
+                  ...filter
+                })
+                const { message: notices = [], total = 0 } = data
+                return {
+                  data: notices,
+                  success: code === consts.RET_CODE.SUCCESS,
+                  total
+                }
+              }}
+              bordered
+              pagination={{ defaultPageSize: 10 }}
+              rowKey={row => row.id}
+            />
+          </div>
         </div>
       </div>
-    </div>
+    </PageContainer>
   )
 }
 

src/pages/Role/Customer/index.tsx

@@ -17,6 +17,7 @@ import { formatPermission } from '@/utils/utils'
 import RoleMenu from '../System/components/RoleMenu'
 import ConnectModal from '../System/components/ConnectModal'
 import FormItem from 'antd/lib/form/FormItem'
+import { PageContainer } from '@ant-design/pro-layout'
 
 export const permData = [
   {
@@ -169,183 +170,185 @@ const Customer = () => {
   ]
 
   return (
-    <div className="h-full w-full flex flex-row">
-      <RoleMenu menuId={menuId} onSelect={onSelect} itemCount={state.roleStaff?.length || 0} />
-      <div className="w-max-3/4">
-        <div className="ml-8 bg-white p-4 shadow-md shadow-hex-3e2c5a relative">
-          <div className="absolute right-4 top-4 z-100">
-            {state.id && (
-              <ConnectModal
-                title="关联员工"
-                dataId={state.id}
-                postUrl="/role/staff/add"
-                closeAfterSelect={false}
-                onReload={() => tryGetRoleStaffList(state.id)}
-              />
-            )}
-          </div>
-          <Tabs
-            defaultActiveKey="1"
-            type="card"
-            onChange={key => setState({ ...state, activeKey: key })}>
-            <TabPane tab="员工列表" key="1">
-              <Table<API.RoleStaffListItem>
-                dataSource={state.roleStaff}
-                columns={columns}
-                rowKey={row => row.staffId}
-              />
-            </TabPane>
-            <TabPane tab="角色权限" key="2">
-              <div className="ml-4">
-                {state.id && (
-                  <ProForm
-                    formRef={formRef}
-                    layout="horizontal"
-                    onFinish={async values => {
-                      const newValues = formatPermission('submit', values)
-                      await updateRolePermission({
-                        permission: JSON.stringify(newValues),
-                        id: state.id
-                      })
-                      message.success('设置成功')
-                    }}>
-                    <ProFormSwitch
-                      fieldProps={{
-                        onChange(checked) {
-                          if (!checked) {
-                            formRef.current?.setFieldsValue({ client: [] })
+    <PageContainer title={false} breadcrumb={false}>
+      <div className="h-full w-full flex flex-row">
+        <RoleMenu menuId={menuId} onSelect={onSelect} itemCount={state.roleStaff?.length || 0} />
+        <div className="w-max-3/4">
+          <div className="ml-8 bg-white p-4 shadow-md shadow-hex-3e2c5a relative">
+            <div className="absolute right-4 top-4 z-100">
+              {state.id && (
+                <ConnectModal
+                  title="关联员工"
+                  dataId={state.id}
+                  postUrl="/role/staff/add"
+                  closeAfterSelect={false}
+                  onReload={() => tryGetRoleStaffList(state.id)}
+                />
+              )}
+            </div>
+            <Tabs
+              defaultActiveKey="1"
+              type="card"
+              onChange={key => setState({ ...state, activeKey: key })}>
+              <TabPane tab="员工列表" key="1">
+                <Table<API.RoleStaffListItem>
+                  dataSource={state.roleStaff}
+                  columns={columns}
+                  rowKey={row => row.staffId}
+                />
+              </TabPane>
+              <TabPane tab="角色权限" key="2">
+                <div className="ml-4">
+                  {state.id && (
+                    <ProForm
+                      formRef={formRef}
+                      layout="horizontal"
+                      onFinish={async values => {
+                        const newValues = formatPermission('submit', values)
+                        await updateRolePermission({
+                          permission: JSON.stringify(newValues),
+                          id: state.id
+                        })
+                        message.success('设置成功')
+                      }}>
+                      <ProFormSwitch
+                        fieldProps={{
+                          onChange(checked) {
+                            if (!checked) {
+                              formRef.current?.setFieldsValue({ client: [] })
+                            }
                           }
+                        }}
+                        name="showClient"
+                        label={
+                          <span className="flex items-center">
+                            <EveryUser className="mr-1" className="flex items-baseline mr-1" />
+                            客户
+                          </span>
                         }
-                      }}
-                      name="showClient"
-                      label={
-                        <span className="flex items-center">
-                          <EveryUser className="mr-1" className="flex items-baseline mr-1" />
-                          客户
-                        </span>
-                      }
-                    />
-                    <ProFormDependency name={['showClient']}>
-                      {({ showClient }) => (
-                        <ProFormCheckbox.Group
-                          wrapperCol={{ offset: 1 }}
-                          name="client"
-                          options={[
-                            { value: 'access', label: '查看', disabled: !showClient },
-                            { value: 'add', label: '添加客户', disabled: !showClient },
-                            // { value: 'delete', label: '删除客户', disabled: !showClient },
-                            {
-                              value: 'edit_team_tags',
-                              label: '编辑协作标签',
-                              disabled: !showClient
+                      />
+                      <ProFormDependency name={['showClient']}>
+                        {({ showClient }) => (
+                          <ProFormCheckbox.Group
+                            wrapperCol={{ offset: 1 }}
+                            name="client"
+                            options={[
+                              { value: 'access', label: '查看', disabled: !showClient },
+                              { value: 'add', label: '添加客户', disabled: !showClient },
+                              // { value: 'delete', label: '删除客户', disabled: !showClient },
+                              {
+                                value: 'edit_team_tags',
+                                label: '编辑协作标签',
+                                disabled: !showClient
+                              }
+                            ]}
+                          />
+                        )}
+                      </ProFormDependency>
+                      <ProFormSwitch
+                        fieldProps={{
+                          onChange(checked) {
+                            if (!checked) {
+                              formRef.current?.setFieldsValue({ company: [] })
                             }
-                          ]}
-                        />
-                      )}
-                    </ProFormDependency>
-                    <ProFormSwitch
-                      fieldProps={{
-                        onChange(checked) {
-                          if (!checked) {
-                            formRef.current?.setFieldsValue({ company: [] })
                           }
+                        }}
+                        name="showCompany"
+                        label={
+                          <span className="flex items-center">
+                            <EveryUser className="mr-1" className="flex items-baseline mr-1" />
+                            单位
+                          </span>
                         }
-                      }}
-                      name="showCompany"
-                      label={
-                        <span className="flex items-center">
-                          <EveryUser className="mr-1" className="flex items-baseline mr-1" />
-                          单位
-                        </span>
-                      }
-                    />
-                    <ProFormDependency name={['showCompany']}>
-                      {({ showCompany }) => (
-                        <ProFormCheckbox.Group
-                          wrapperCol={{ offset: 1 }}
-                          // initialValue={}
-                          name="company"
-                          options={[
-                            { value: 'access', label: '查看', disabled: !showCompany },
-                            { value: 'add', label: '添加单位', disabled: !showCompany },
-                            // { value: 'delete', label: '删除单位', disabled: !showCompany },
-                            {
-                              value: 'edit_team_tags',
-                              label: '编辑协作标签',
-                              disabled: !showCompany
+                      />
+                      <ProFormDependency name={['showCompany']}>
+                        {({ showCompany }) => (
+                          <ProFormCheckbox.Group
+                            wrapperCol={{ offset: 1 }}
+                            // initialValue={}
+                            name="company"
+                            options={[
+                              { value: 'access', label: '查看', disabled: !showCompany },
+                              { value: 'add', label: '添加单位', disabled: !showCompany },
+                              // { value: 'delete', label: '删除单位', disabled: !showCompany },
+                              {
+                                value: 'edit_team_tags',
+                                label: '编辑协作标签',
+                                disabled: !showCompany
+                              }
+                            ]}
+                          />
+                        )}
+                      </ProFormDependency>
+                      <ProFormSwitch
+                        fieldProps={{
+                          onChange(checked) {
+                            if (!checked) {
+                              formRef.current?.setFieldsValue({ bisiness: [] })
                             }
-                          ]}
-                        />
-                      )}
-                    </ProFormDependency>
-                    <ProFormSwitch
-                      fieldProps={{
-                        onChange(checked) {
-                          if (!checked) {
-                            formRef.current?.setFieldsValue({ bisiness: [] })
                           }
+                        }}
+                        name="showBusiness"
+                        label={
+                          <span className="flex items-center">
+                            <EveryUser className="mr-1" className="flex items-baseline mr-1" />
+                            商机
+                          </span>
                         }
-                      }}
-                      name="showBusiness"
-                      label={
-                        <span className="flex items-center">
-                          <EveryUser className="mr-1" className="flex items-baseline mr-1" />
-                          商机
-                        </span>
+                      />
+                      <ProFormDependency name={['showBusiness']}>
+                        {({ showBusiness }) => (
+                          <ProFormCheckbox.Group
+                            wrapperCol={{ offset: 1 }}
+                            name="business"
+                            options={[
+                              { value: 'access', label: '查看', disabled: !showBusiness },
+                              { value: 'add', label: '添加商机', disabled: !showBusiness }
+                              // { value: 'delete', label: '删除商机', disabled: !showBusiness }
+                            ]}
+                          />
+                        )}
+                      </ProFormDependency>
+                    </ProForm>
+                  )}
+                </div>
+              </TabPane>
+              <TabPane tab="数据权限" key="3">
+                {state.id && (
+                  <ProForm
+                    formRef={formRef2}
+                    layout="vertical"
+                    onFinish={async values => {
+                      try {
+                        await updatePermDataByRoleId({
+                          id: state.id,
+                          dataPermission: JSON.stringify(values)
+                        })
+                      } catch (error) {
+                        return message.error(error.toString())
                       }
-                    />
-                    <ProFormDependency name={['showBusiness']}>
-                      {({ showBusiness }) => (
-                        <ProFormCheckbox.Group
-                          wrapperCol={{ offset: 1 }}
-                          name="business"
-                          options={[
-                            { value: 'access', label: '查看', disabled: !showBusiness },
-                            { value: 'add', label: '添加商机', disabled: !showBusiness }
-                            // { value: 'delete', label: '删除商机', disabled: !showBusiness }
-                          ]}
-                        />
-                      )}
-                    </ProFormDependency>
+                      message.success('设置成功')
+                      return true
+                    }}>
+                    <FormItem name="access" label="客户模块可见" required>
+                      <Radio.Group>
+                        <Space direction="vertical">
+                          {permData.map(item => (
+                            <Radio key={item.value} value={item.value}>
+                              {item.label}
+                            </Radio>
+                          ))}
+                        </Space>
+                      </Radio.Group>
+                    </FormItem>
                   </ProForm>
                 )}
-              </div>
-            </TabPane>
-            <TabPane tab="数据权限" key="3">
-              {state.id && (
-                <ProForm
-                  formRef={formRef2}
-                  layout="vertical"
-                  onFinish={async values => {
-                    try {
-                      await updatePermDataByRoleId({
-                        id: state.id,
-                        dataPermission: JSON.stringify(values)
-                      })
-                    } catch (error) {
-                      return message.error(error.toString())
-                    }
-                    message.success('设置成功')
-                    return true
-                  }}>
-                  <FormItem name="access" label="客户模块可见" required>
-                    <Radio.Group>
-                      <Space direction="vertical">
-                        {permData.map(item => (
-                          <Radio key={item.value} value={item.value}>
-                            {item.label}
-                          </Radio>
-                        ))}
-                      </Space>
-                    </Radio.Group>
-                  </FormItem>
-                </ProForm>
-              )}
-            </TabPane>
-          </Tabs>
+              </TabPane>
+            </Tabs>
+          </div>
         </div>
       </div>
-    </div>
+    </PageContainer>
   )
 }
 

src/pages/Role/Hr/index.tsx

@@ -16,6 +16,7 @@ import type { ColumnsType } from 'antd/lib/table'
 import { formatPermission } from '@/utils/utils'
 import RoleMenu from '../System/components/RoleMenu'
 import ConnectModal from '../System/components/ConnectModal'
+import { PageContainer } from '@ant-design/pro-layout'
 // import FormItem from 'antd/lib/form/FormItem'
 
 // const permData = [
@@ -160,110 +161,119 @@ const Hr = () => {
   ]
 
   return (
-    <div className="h-full w-full flex flex-row">
-      <RoleMenu menuId={menuId} onSelect={onSelect} itemCount={state.roleStaff?.length || 0} />
-      <div className="w-max-3/4">
-        <div className="ml-8 bg-white p-4 shadow-md shadow-hex-3e2c5a relative">
-          <div className="absolute right-4 top-4 z-100">
-            {state.id && (
-              <ConnectModal
-                title="关联员工"
-                dataId={state.id}
-                postUrl="/role/staff/add"
-                closeAfterSelect={false}
-                onReload={() => tryGetRoleStaffList(state.id)}
-              />
-            )}
-          </div>
-          <Tabs
-            defaultActiveKey="1"
-            type="card"
-            onChange={key => setState({ ...state, activeKey: key })}>
-            <TabPane tab="员工列表" key="1">
-              <Table<API.RoleStaffListItem>
-                dataSource={state.roleStaff}
-                columns={columns}
-                rowKey={row => row.staffId}
-              />
-            </TabPane>
-            <TabPane tab="角色权限" key="2">
-              <div className="ml-4">
-                {state.id && (
-                  <ProForm
-                    formRef={formRef}
-                    layout="horizontal"
-                    onFinish={async values => {
-                      const newValues = formatPermission('submit', values)
-                      await updateRolePermission({
-                        permission: JSON.stringify(newValues),
-                        id: state.id
-                      })
-                      message.success('设置成功')
-                    }}>
-                    <ProFormSwitch
-                      fieldProps={{
-                        onChange(checked) {
-                          if (!checked) {
-                            formRef.current?.setFieldsValue({ employee: [] })
+    <PageContainer title={false} breadcrumb={false}>
+      <div className="h-full w-full flex flex-row">
+        <RoleMenu menuId={menuId} onSelect={onSelect} itemCount={state.roleStaff?.length || 0} />
+        <div className="w-max-3/4">
+          <div className="ml-8 bg-white p-4 shadow-md shadow-hex-3e2c5a relative">
+            <div className="absolute right-4 top-4 z-100">
+              {state.id && (
+                <ConnectModal
+                  title="关联员工"
+                  dataId={state.id}
+                  postUrl="/role/staff/add"
+                  closeAfterSelect={false}
+                  onReload={() => tryGetRoleStaffList(state.id)}
+                />
+              )}
+            </div>
+            <Tabs
+              defaultActiveKey="1"
+              type="card"
+              onChange={key => setState({ ...state, activeKey: key })}>
+              <TabPane tab="员工列表" key="1">
+                <Table<API.RoleStaffListItem>
+                  dataSource={state.roleStaff}
+                  columns={columns}
+                  rowKey={row => row.staffId}
+                />
+              </TabPane>
+              <TabPane tab="角色权限" key="2">
+                <div className="ml-4">
+                  {state.id && (
+                    <ProForm
+                      formRef={formRef}
+                      layout="horizontal"
+                      onFinish={async values => {
+                        const newValues = formatPermission('submit', values)
+                        await updateRolePermission({
+                          permission: JSON.stringify(newValues),
+                          id: state.id
+                        })
+                        message.success('设置成功')
+                      }}>
+                      <ProFormSwitch
+                        fieldProps={{
+                          onChange(checked) {
+                            if (!checked) {
+                              formRef.current?.setFieldsValue({ employee: [] })
+                            }
                           }
+                        }}
+                        name="showEmployee"
+                        label={
+                          <span className="flex items-center">
+                            <EveryUser className="flex items-baseline mr-1" />
+                            部门与员工
+                          </span>
                         }
-                      }}
-                      name="showEmployee"
-                      label={
-                        <span className="flex items-center">
-                          <EveryUser className="mr-1" className="flex items-baseline mr-1" />
-                          部门与员工
-                        </span>
-                      }
-                    />
-                    <ProFormDependency name={['showEmployee']}>
-                      {({ showEmployee }) => (
-                        <ProFormCheckbox.Group
-                          wrapperCol={{ offset: 1 }}
-                          name="employee"
-                          options={[
-                            { value: 'access', label: '查看', disabled: !showEmployee },
-                            { value: 'add', label: '添加', disabled: !showEmployee },
-                            { value: 'delete', label: '删除', disabled: !showEmployee },
-                            { value: 'add_department', label: '新增部门', disabled: !showEmployee },
-                            { value: 'del_department', label: '删除部门', disabled: !showEmployee }
-                          ]}
-                        />
-                      )}
-                    </ProFormDependency>
-                    <ProFormSwitch
-                      fieldProps={{
-                        onChange(checked) {
-                          if (!checked) {
-                            formRef.current?.setFieldsValue({ notification: [] })
+                      />
+                      <ProFormDependency name={['showEmployee']}>
+                        {({ showEmployee }) => (
+                          <ProFormCheckbox.Group
+                            wrapperCol={{ offset: 1 }}
+                            name="employee"
+                            options={[
+                              { value: 'access', label: '查看', disabled: !showEmployee },
+                              { value: 'add', label: '添加', disabled: !showEmployee },
+                              { value: 'delete', label: '删除', disabled: !showEmployee },
+                              {
+                                value: 'add_department',
+                                label: '新增部门',
+                                disabled: !showEmployee
+                              },
+                              {
+                                value: 'del_department',
+                                label: '删除部门',
+                                disabled: !showEmployee
+                              }
+                            ]}
+                          />
+                        )}
+                      </ProFormDependency>
+                      <ProFormSwitch
+                        fieldProps={{
+                          onChange(checked) {
+                            if (!checked) {
+                              formRef.current?.setFieldsValue({ notification: [] })
+                            }
                           }
+                        }}
+                        name="showNotification"
+                        label={
+                          <span className="flex items-center">
+                            <EveryUser className="flex items-baseline mr-1" />
+                            通知中心
+                          </span>
                         }
-                      }}
-                      name="showNotification"
-                      label={
-                        <span className="flex items-center">
-                          <EveryUser className="mr-1" className="flex items-baseline mr-1" />
-                          通知中心
-                        </span>
-                      }
-                    />
-                    <ProFormDependency name={['showNotification']}>
-                      {({ showNotification }) => (
-                        <ProFormCheckbox.Group
-                          wrapperCol={{ offset: 1 }}
-                          name="notification"
-                          options={[
-                            { value: 'access', label: '查看', disabled: !showNotification },
-                            { value: 'add', label: '添加', disabled: !showNotification }
-                          ]}
-                        />
-                      )}
-                    </ProFormDependency>
-                  </ProForm>
-                )}
-              </div>
-            </TabPane>
-            {/* <TabPane tab="数据权限" key="3">
+                      />
+                      <ProFormDependency name={['showNotification']}>
+                        {({ showNotification }) => (
+                          <ProFormCheckbox.Group
+                            wrapperCol={{ offset: 1 }}
+                            name="notification"
+                            options={[
+                              { value: 'access', label: '查看', disabled: !showNotification },
+                              { value: 'add', label: '添加', disabled: !showNotification }
+                            ]}
+                          />
+                        )}
+                      </ProFormDependency>
+                    </ProForm>
+                  )}
+                </div>
+              </TabPane>
+              {/* <TabPane tab="数据权限" key="3">
               {state.id && (
                 <ProForm
                   formRef={formRef2}
@@ -294,10 +304,11 @@ const Hr = () => {
                 </ProForm>
               )}
             </TabPane> */}
-          </Tabs>
+            </Tabs>
+          </div>
         </div>
       </div>
-    </div>
+    </PageContainer>
   )
 }
 

src/pages/Role/Product/index.tsx

@@ -19,6 +19,7 @@ import FormItem from 'antd/lib/form/FormItem'
 import { permData } from '../Customer'
 import styles from './index.less'
 import classNames from 'classnames'
+import { PageContainer } from '@ant-design/pro-layout'
 
 const Product = () => {
   const { TabPane } = Tabs
@@ -163,195 +164,201 @@ const Product = () => {
   ]
 
   return (
-    <div className="h-full w-full flex flex-row">
-      <RoleMenu menuId={menuId} onSelect={onSelect} itemCount={state.roleStaff?.length || 0} />
-      <div className="w-max-3/4">
-        <div className="ml-8 bg-white p-4 shadow-md shadow-hex-3e2c5a relative">
-          <div className="absolute right-4 top-4 z-100">
-            {state.id && (
-              <ConnectModal
-                title="关联员工"
-                dataId={state.id}
-                postUrl="/role/staff/add"
-                closeAfterSelect={false}
-                onReload={() => tryGetRoleStaffList(state.id)}
-              />
-            )}
-          </div>
-          <Tabs
-            defaultActiveKey="1"
-            type="card"
-            onChange={key => setState({ ...state, activeKey: key })}>
-            <TabPane tab="员工列表" key="1">
-              <Table<API.RoleStaffListItem>
-                dataSource={state.roleStaff}
-                columns={columns}
-                rowKey={row => row.staffId}
-              />
-            </TabPane>
-            <TabPane tab="角色权限" key="2">
-              <div className="ml-4">
-                {state.id && (
-                  <ProForm
-                    formRef={formRef}
-                    layout="horizontal"
-                    onFinish={async values => {
-                      const newValues = formatPermission('submit', values)
-                      await updateRolePermission({
-                        permission: JSON.stringify(newValues),
-                        id: state.id
-                      })
-                      message.success('设置成功')
-                    }}>
-                    <ProFormSwitch
-                      fieldProps={{
-                        onChange(checked) {
-                          if (!checked) {
-                            formRef.current?.setFieldsValue({ lockstore: [] })
-                          }
-                        }
-                      }}
-                      name="showLockstore"
-                      label={
-                        <span className="flex items-center">
-                          <DataLock theme="outline" className="flex items-baseline mr-1" />
-                          软件锁-公共锁库
-                        </span>
-                      }
-                    />
-                    <ProFormDependency name={['showLockstore']}>
-                      {({ showLockstore }) => (
-                        <ProFormCheckbox.Group
-                          wrapperCol={{ offset: 1 }}
-                          name="lockstore"
-                          options={[
-                            { value: 'access', label: '查看', disabled: !showLockstore },
-                            { value: 'delete_record', label: '删除记录', disabled: !showLockstore }
-                          ]}
-                        />
-                      )}
-                    </ProFormDependency>
-                    <ProFormSwitch
-                      fieldProps={{
-                        onChange(checked) {
-                          if (!checked) {
-                            formRef.current?.setFieldsValue({
-                              building: [],
-                              curing: [],
-                              highway: [],
-                              gs: []
-                            })
+    <PageContainer title={false} breadcrumb={false}>
+      <div className="h-full w-full flex flex-row">
+        <RoleMenu menuId={menuId} onSelect={onSelect} itemCount={state.roleStaff?.length || 0} />
+        <div className="w-max-3/4">
+          <div className="ml-8 bg-white p-4 shadow-md shadow-hex-3e2c5a relative">
+            <div className="absolute right-4 top-4 z-100">
+              {state.id && (
+                <ConnectModal
+                  title="关联员工"
+                  dataId={state.id}
+                  postUrl="/role/staff/add"
+                  closeAfterSelect={false}
+                  onReload={() => tryGetRoleStaffList(state.id)}
+                />
+              )}
+            </div>
+            <Tabs
+              defaultActiveKey="1"
+              type="card"
+              onChange={key => setState({ ...state, activeKey: key })}>
+              <TabPane tab="员工列表" key="1">
+                <Table<API.RoleStaffListItem>
+                  dataSource={state.roleStaff}
+                  columns={columns}
+                  rowKey={row => row.staffId}
+                />
+              </TabPane>
+              <TabPane tab="角色权限" key="2">
+                <div className="ml-4">
+                  {state.id && (
+                    <ProForm
+                      formRef={formRef}
+                      layout="horizontal"
+                      onFinish={async values => {
+                        const newValues = formatPermission('submit', values)
+                        await updateRolePermission({
+                          permission: JSON.stringify(newValues),
+                          id: state.id
+                        })
+                        message.success('设置成功')
+                      }}>
+                      <ProFormSwitch
+                        fieldProps={{
+                          onChange(checked) {
+                            if (!checked) {
+                              formRef.current?.setFieldsValue({ lockstore: [] })
+                            }
                           }
+                        }}
+                        name="showLockstore"
+                        label={
+                          <span className="flex items-center">
+                            <DataLock theme="outline" className="flex items-baseline mr-1" />
+                            软件锁-公共锁库
+                          </span>
                         }
-                      }}
-                      name="showCloud"
-                      label={<span className="flex items-center">云版管理</span>}
-                    />
-                    <div className={classNames('ml-6', styles.laberContent)}>
-                      <ProFormDependency name={['showCloud']}>
-                        {({ showCloud }) => (
-                          <>
-                            <ProFormCheckbox.Group
-                              wrapperCol={{ offset: 1 }}
-                              name="building"
-                              label="大司空云计价"
-                              options={[{ value: 'access', label: '查看', disabled: !showCloud }]}
-                            />
-                            <ProFormCheckbox.Group
-                              wrapperCol={{ offset: 1 }}
-                              name="curing"
-                              label="养护云造价"
-                              options={[{ value: 'access', label: '查看', disabled: !showCloud }]}
-                            />
-                            <ProFormCheckbox.Group
-                              wrapperCol={{ offset: 1 }}
-                              name="highway"
-                              label="公路云计价"
-                              options={[{ value: 'access', label: '查看', disabled: !showCloud }]}
-                            />
-                            <ProFormCheckbox.Group
-                              wrapperCol={{ offset: 1 }}
-                              name="gs"
-                              label="大司空概算"
-                              options={[{ value: 'access', label: '查看', disabled: !showCloud }]}
-                            />
-                          </>
+                      />
+                      <ProFormDependency name={['showLockstore']}>
+                        {({ showLockstore }) => (
+                          <ProFormCheckbox.Group
+                            wrapperCol={{ offset: 1 }}
+                            name="lockstore"
+                            options={[
+                              { value: 'access', label: '查看', disabled: !showLockstore },
+                              {
+                                value: 'delete_record',
+                                label: '删除记录',
+                                disabled: !showLockstore
+                              }
+                            ]}
+                          />
                         )}
                       </ProFormDependency>
-                    </div>
-                    <ProFormSwitch
-                      fieldProps={{
-                        onChange(checked) {
-                          if (!checked) {
-                            formRef.current?.setFieldsValue({ personal: [], enterprise: [] })
+                      <ProFormSwitch
+                        fieldProps={{
+                          onChange(checked) {
+                            if (!checked) {
+                              formRef.current?.setFieldsValue({
+                                building: [],
+                                curing: [],
+                                highway: [],
+                                gs: []
+                              })
+                            }
                           }
-                        }
-                      }}
-                      name="showRoad"
-                      label={<span className="flex items-center">大司空2.0</span>}
-                    />
-                    <div className={['ml-6', styles.laberContent].join(' ')}>
-                      <ProFormDependency name={['showRoad']}>
-                        {({ showRoad }) => (
-                          <>
-                            <ProFormCheckbox.Group
-                              wrapperCol={{ offset: 1 }}
-                              name="personal"
-                              label="个人版"
-                              options={[{ value: 'access', label: '查看', disabled: !showRoad }]}
-                            />
-                            <ProFormCheckbox.Group
-                              wrapperCol={{ offset: 1 }}
-                              name="enterprise"
-                              label="企业版"
-                              options={[
-                                { value: 'access', label: '查看', disabled: !showRoad },
-                                { value: 'add', label: '添加企业', disabled: !showRoad }
-                              ]}
-                            />
-                          </>
-                        )}
-                      </ProFormDependency>
-                    </div>
+                        }}
+                        name="showCloud"
+                        label={<span className="flex items-center">云版管理</span>}
+                      />
+                      <div className={classNames('ml-6', styles.laberContent)}>
+                        <ProFormDependency name={['showCloud']}>
+                          {({ showCloud }) => (
+                            <>
+                              <ProFormCheckbox.Group
+                                wrapperCol={{ offset: 1 }}
+                                name="building"
+                                label="大司空云计价"
+                                options={[{ value: 'access', label: '查看', disabled: !showCloud }]}
+                              />
+                              <ProFormCheckbox.Group
+                                wrapperCol={{ offset: 1 }}
+                                name="curing"
+                                label="养护云造价"
+                                options={[{ value: 'access', label: '查看', disabled: !showCloud }]}
+                              />
+                              <ProFormCheckbox.Group
+                                wrapperCol={{ offset: 1 }}
+                                name="highway"
+                                label="公路云计价"
+                                options={[{ value: 'access', label: '查看', disabled: !showCloud }]}
+                              />
+                              <ProFormCheckbox.Group
+                                wrapperCol={{ offset: 1 }}
+                                name="gs"
+                                label="大司空概算"
+                                options={[{ value: 'access', label: '查看', disabled: !showCloud }]}
+                              />
+                            </>
+                          )}
+                        </ProFormDependency>
+                      </div>
+                      <ProFormSwitch
+                        fieldProps={{
+                          onChange(checked) {
+                            if (!checked) {
+                              formRef.current?.setFieldsValue({ personal: [], enterprise: [] })
+                            }
+                          }
+                        }}
+                        name="showRoad"
+                        label={<span className="flex items-center">大司空2.0</span>}
+                      />
+                      <div className={['ml-6', styles.laberContent].join(' ')}>
+                        <ProFormDependency name={['showRoad']}>
+                          {({ showRoad }) => (
+                            <>
+                              <ProFormCheckbox.Group
+                                wrapperCol={{ offset: 1 }}
+                                name="personal"
+                                label="个人版"
+                                options={[{ value: 'access', label: '查看', disabled: !showRoad }]}
+                              />
+                              <ProFormCheckbox.Group
+                                wrapperCol={{ offset: 1 }}
+                                name="enterprise"
+                                label="企业版"
+                                options={[
+                                  { value: 'access', label: '查看', disabled: !showRoad },
+                                  { value: 'add', label: '添加企业', disabled: !showRoad }
+                                ]}
+                              />
+                            </>
+                          )}
+                        </ProFormDependency>
+                      </div>
+                    </ProForm>
+                  )}
+                </div>
+              </TabPane>
+              <TabPane tab="数据权限" key="3">
+                {state.id && (
+                  <ProForm
+                    formRef={formRef2}
+                    layout="vertical"
+                    onFinish={async values => {
+                      try {
+                        await updatePermDataByRoleId({
+                          id: state.id,
+                          dataPermission: JSON.stringify(values)
+                        })
+                      } catch (error) {
+                        return message.error(error.toString())
+                      }
+                      message.success('设置成功')
+                      return true
+                    }}>
+                    <FormItem name="access" label="客户模块可见" required>
+                      <Radio.Group>
+                        <Space direction="vertical">
+                          {permData.map(item => (
+                            <Radio key={item.value} value={item.value}>
+                              {item.label}
+                            </Radio>
+                          ))}
+                        </Space>
+                      </Radio.Group>
+                    </FormItem>
                   </ProForm>
                 )}
-              </div>
-            </TabPane>
-            <TabPane tab="数据权限" key="3">
-              {state.id && (
-                <ProForm
-                  formRef={formRef2}
-                  layout="vertical"
-                  onFinish={async values => {
-                    try {
-                      await updatePermDataByRoleId({
-                        id: state.id,
-                        dataPermission: JSON.stringify(values)
-                      })
-                    } catch (error) {
-                      return message.error(error.toString())
-                    }
-                    message.success('设置成功')
-                    return true
-                  }}>
-                  <FormItem name="access" label="客户模块可见" required>
-                    <Radio.Group>
-                      <Space direction="vertical">
-                        {permData.map(item => (
-                          <Radio key={item.value} value={item.value}>
-                            {item.label}
-                          </Radio>
-                        ))}
-                      </Space>
-                    </Radio.Group>
-                  </FormItem>
-                </ProForm>
-              )}
-            </TabPane>
-          </Tabs>
+              </TabPane>
+            </Tabs>
+          </div>
         </div>
       </div>
-    </div>
+    </PageContainer>
   )
 }
 

src/pages/Role/Statistic/index.tsx

@@ -19,6 +19,7 @@ import ConnectModal from '../System/components/ConnectModal'
 import FormItem from 'antd/lib/form/FormItem'
 import { permData } from '../Customer'
 import { PieChartOutlined } from '@ant-design/icons'
+import { PageContainer } from '@ant-design/pro-layout'
 
 const Statistic = () => {
   const { TabPane } = Tabs
@@ -162,164 +163,182 @@ const Statistic = () => {
   ]
 
   return (
-    <div className="h-full w-full flex flex-row">
-      <RoleMenu menuId={menuId} onSelect={onSelect} itemCount={state.roleStaff?.length || 0} />
-      <div className="w-max-3/4">
-        <div className="ml-8 bg-white p-4 shadow-md shadow-hex-3e2c5a relative">
-          <div className="absolute right-4 top-4 z-100">
-            {state.id && (
-              <ConnectModal
-                title="关联员工"
-                dataId={state.id}
-                postUrl="/role/staff/add"
-                closeAfterSelect={false}
-                onReload={() => tryGetRoleStaffList(state.id)}
-              />
-            )}
-          </div>
-          <Tabs
-            defaultActiveKey="1"
-            type="card"
-            onChange={key => setState({ ...state, activeKey: key })}>
-            <TabPane tab="员工列表" key="1">
-              <Table<API.RoleStaffListItem>
-                dataSource={state.roleStaff}
-                columns={columns}
-                rowKey={row => row.staffId}
-              />
-            </TabPane>
-            <TabPane tab="角色权限" key="2">
-              <div className="ml-4">
-                {state.id && (
-                  <ProForm
-                    formRef={formRef}
-                    layout="horizontal"
-                    onFinish={async values => {
-                      const newValues = formatPermission('submit', values)
-                      await updateRolePermission({
-                        permission: JSON.stringify(newValues),
-                        id: state.id
-                      })
-                      message.success('设置成功')
-                    }}>
-                    <ProFormSwitch
-                      fieldProps={{
-                        onChange(checked) {
-                          if (!checked) {
-                            formRef.current?.setFieldsValue({
-                              'software-usage': [],
-                              'invoice-aggregate': [],
-                              'invoice-trends': [],
-                              'customer-additions': [],
-                              'invoice-receivables': []
-                            })
+    <PageContainer title={false} breadcrumb={false}>
+      <div className="h-full w-full flex flex-row">
+        <RoleMenu menuId={menuId} onSelect={onSelect} itemCount={state.roleStaff?.length || 0} />
+        <div className="w-max-3/4">
+          <div className="ml-8 bg-white p-4 shadow-md shadow-hex-3e2c5a relative">
+            <div className="absolute right-4 top-4 z-100">
+              {state.id && (
+                <ConnectModal
+                  title="关联员工"
+                  dataId={state.id}
+                  postUrl="/role/staff/add"
+                  closeAfterSelect={false}
+                  onReload={() => tryGetRoleStaffList(state.id)}
+                />
+              )}
+            </div>
+            <Tabs
+              defaultActiveKey="1"
+              type="card"
+              onChange={key => setState({ ...state, activeKey: key })}>
+              <TabPane tab="员工列表" key="1">
+                <Table<API.RoleStaffListItem>
+                  dataSource={state.roleStaff}
+                  columns={columns}
+                  rowKey={row => row.staffId}
+                />
+              </TabPane>
+              <TabPane tab="角色权限" key="2">
+                <div className="ml-4">
+                  {state.id && (
+                    <ProForm
+                      formRef={formRef}
+                      layout="horizontal"
+                      onFinish={async values => {
+                        const newValues = formatPermission('submit', values)
+                        await updateRolePermission({
+                          permission: JSON.stringify(newValues),
+                          id: state.id
+                        })
+                        message.success('设置成功')
+                      }}>
+                      <ProFormSwitch
+                        fieldProps={{
+                          onChange(checked) {
+                            if (!checked) {
+                              formRef.current?.setFieldsValue({
+                                'software-usage': [],
+                                'invoice-aggregate': [],
+                                'invoice-trends': [],
+                                'customer-additions': [],
+                                'invoice-receivables': []
+                              })
+                            }
                           }
-                        }
-                      }}
-                      name="showProduct"
-                      label={
-                        <span className="flex items-center">
-                          <PieChartOutlined theme="outline" className="flex items-baseline mr-1" />
-                          产品销售
-                        </span>
-                      }
-                    />
-                    <div className="ml-25px">
-                      <ProFormDependency name={['showProduct']}>
-                        {({ showProduct }) => (
-                          <>
-                            <ProFormCheckbox.Group
-                              name="software-usage"
-                              label="软件锁用量"
-                              options={[{ value: 'access', label: '查看', disabled: !showProduct }]}
+                        }}
+                        name="showProduct"
+                        label={
+                          <span className="flex items-center">
+                            <PieChartOutlined
+                              theme="outline"
+                              className="flex items-baseline mr-1"
                             />
-                            <ProFormCheckbox.Group
-                              name="invoice-aggregate"
-                              label="发票收款入账汇总"
-                              options={[{ value: 'access', label: '查看', disabled: !showProduct }]}
-                            />
-                            <ProFormCheckbox.Group
-                              name="invoice-trends"
-                              label="发票收款入账趋势"
-                              options={[{ value: 'access', label: '查看', disabled: !showProduct }]}
+                            产品销售
+                          </span>
+                        }
+                      />
+                      <div className="ml-25px">
+                        <ProFormDependency name={['showProduct']}>
+                          {({ showProduct }) => (
+                            <>
+                              <ProFormCheckbox.Group
+                                name="software-usage"
+                                label="软件锁用量"
+                                options={[
+                                  { value: 'access', label: '查看', disabled: !showProduct }
+                                ]}
+                              />
+                              <ProFormCheckbox.Group
+                                name="invoice-aggregate"
+                                label="发票收款入账汇总"
+                                options={[
+                                  { value: 'access', label: '查看', disabled: !showProduct }
+                                ]}
+                              />
+                              <ProFormCheckbox.Group
+                                name="invoice-trends"
+                                label="发票收款入账趋势"
+                                options={[
+                                  { value: 'access', label: '查看', disabled: !showProduct }
+                                ]}
+                              />
+                              <ProFormCheckbox.Group
+                                name="invoice-receivables"
+                                label="应收款统计"
+                                options={[
+                                  { value: 'access', label: '查看', disabled: !showProduct }
+                                ]}
+                              />
+                            </>
+                          )}
+                        </ProFormDependency>
+                      </div>
+                      <ProFormSwitch
+                        fieldProps={{
+                          onChange(checked) {
+                            if (!checked) {
+                              formRef.current?.setFieldsValue({
+                                'customer-additions': []
+                              })
+                            }
+                          }
+                        }}
+                        name="showCustomer"
+                        label={
+                          <span className="flex items-center">
+                            <PieChartOutlined
+                              theme="outline"
+                              className="flex items-baseline mr-1"
                             />
+                            客户数据
+                          </span>
+                        }
+                      />
+                      <div className="ml-25px">
+                        <ProFormDependency name={['showCustomer']}>
+                          {({ showCustomer }) => (
                             <ProFormCheckbox.Group
-                              name="invoice-receivables"
-                              label="应收款统计"
-                              options={[{ value: 'access', label: '查看', disabled: !showProduct }]}
+                              name="customer-additions"
+                              label="客户新增"
+                              options={[
+                                { value: 'access', label: '查看', disabled: !showCustomer }
+                              ]}
                             />
-                          </>
-                        )}
-                      </ProFormDependency>
-                    </div>
-                    <ProFormSwitch
-                      fieldProps={{
-                        onChange(checked) {
-                          if (!checked) {
-                            formRef.current?.setFieldsValue({
-                              'customer-additions': []
-                            })
-                          }
-                        }
-                      }}
-                      name="showCustomer"
-                      label={
-                        <span className="flex items-center">
-                          <PieChartOutlined theme="outline" className="flex items-baseline mr-1" />
-                          客户数据
-                        </span>
+                          )}
+                        </ProFormDependency>
+                      </div>
+                    </ProForm>
+                  )}
+                </div>
+              </TabPane>
+              <TabPane tab="数据权限" key="3">
+                {state.id && (
+                  <ProForm
+                    formRef={formRef2}
+                    layout="vertical"
+                    onFinish={async values => {
+                      try {
+                        await updatePermDataByRoleId({
+                          id: state.id,
+                          dataPermission: JSON.stringify(values)
+                        })
+                      } catch (error) {
+                        return message.error(error.toString())
                       }
-                    />
-                    <div className="ml-25px">
-                      <ProFormDependency name={['showCustomer']}>
-                        {({ showCustomer }) => (
-                          <ProFormCheckbox.Group
-                            name="customer-additions"
-                            label="客户新增"
-                            options={[{ value: 'access', label: '查看', disabled: !showCustomer }]}
-                          />
-                        )}
-                      </ProFormDependency>
-                    </div>
+                      message.success('设置成功')
+                      return true
+                    }}>
+                    <FormItem name="access" label="产品销售模块可见" required>
+                      <Radio.Group>
+                        <Space direction="vertical">
+                          {permData.map(item => (
+                            <Radio key={item.value} value={item.value}>
+                              {item.label}
+                            </Radio>
+                          ))}
+                        </Space>
+                      </Radio.Group>
+                    </FormItem>
                   </ProForm>
                 )}
-              </div>
-            </TabPane>
-            <TabPane tab="数据权限" key="3">
-              {state.id && (
-                <ProForm
-                  formRef={formRef2}
-                  layout="vertical"
-                  onFinish={async values => {
-                    try {
-                      await updatePermDataByRoleId({
-                        id: state.id,
-                        dataPermission: JSON.stringify(values)
-                      })
-                    } catch (error) {
-                      return message.error(error.toString())
-                    }
-                    message.success('设置成功')
-                    return true
-                  }}>
-                  <FormItem name="access" label="产品销售模块可见" required>
-                    <Radio.Group>
-                      <Space direction="vertical">
-                        {permData.map(item => (
-                          <Radio key={item.value} value={item.value}>
-                            {item.label}
-                          </Radio>
-                        ))}
-                      </Space>
-                    </Radio.Group>
-                  </FormItem>
-                </ProForm>
-              )}
-            </TabPane>
-          </Tabs>
+              </TabPane>
+            </Tabs>
+          </div>
         </div>
       </div>
-    </div>
+    </PageContainer>
   )
 }
 

src/pages/Role/System/components/RoleMenu/index.tsx

@@ -54,20 +54,15 @@ const RoleMenu: React.FC<RoleMenuProps> = ({ menuId, onSelect, itemCount }) => {
     }
   })
 
-  const { run: tryDeleteRole } = useRequest(
-    (id: string) => {
-      if (activeId === id) {
-        setActiveId('')
-      }
-      return deleteRole({ id })
+  const { run: tryDeleteRole } = useRequest((id: string) => deleteRole({ id }), {
+    manual: true,
+    onSuccess: () => {
+      tryFetchMenuRoles(menuId)
     },
-    {
-      manual: true,
-      onSuccess: () => {
-        tryFetchMenuRoles(menuId)
-      }
+    onError: e => {
+      message.error(e.message)
     }
-  )
+  })
   const { run: tryUpdateStaff } = useRequest(updateStaff, {
     manual: true,
     onSuccess: () => {
@@ -106,7 +101,11 @@ const RoleMenu: React.FC<RoleMenuProps> = ({ menuId, onSelect, itemCount }) => {
     })
   }
   return (
-    <div className="h-full w-max-234px rounded-4px">
+    <div
+      className="w-max-234px rounded-4px"
+      style={{
+        height: `calc(100vh - 96px)`
+      }}>
       <div className="p-4 border-b-1 border-solid border-black border-opacity-10 bg-hex-f7f9fa flex items-center justify-around">
         <span className="text-[0.9375rem]">角色列表</span>
         <Button

src/pages/Role/System/index.tsx

@@ -14,6 +14,7 @@ import type { ColumnsType } from 'antd/lib/table'
 import RoleMenu from '../System/components/RoleMenu'
 import ConnectModal from '../System/components/ConnectModal'
 import { formatPermission } from '@/utils/utils'
+import { PageContainer } from '@ant-design/pro-layout'
 
 const System = () => {
   const { TabPane } = Tabs
@@ -129,112 +130,114 @@ const System = () => {
   ]
 
   return (
-    <div className="h-full w-full flex flex-row">
-      <RoleMenu menuId={menuId} onSelect={onSelect} itemCount={state.roleStaff?.length || 0} />
-      <div className="w-max-3/4">
-        <div className="ml-8 bg-white p-4 shadow-md shadow-hex-3e2c5a relative">
-          <div className="absolute right-4 top-4 z-100">
-            {state.id && (
-              <ConnectModal
-                title="关联员工"
-                dataId={state.id}
-                closeAfterSelect={false}
-                onReload={() => tryGetRoleStaffList(state.id)}
-                postUrl="/role/staff/add"
-              />
-            )}
-          </div>
-          <Tabs
-            defaultActiveKey="1"
-            type="card"
-            onChange={key => setState({ ...state, activeKey: key })}>
-            <TabPane tab="员工列表" key="1">
-              <Table<API.RoleStaffListItem>
-                dataSource={state.roleStaff}
-                columns={columns}
-                rowKey={row => row.staffId}
-              />
-            </TabPane>
-            <TabPane tab="角色权限" key="2">
-              <div className="ml-4">
-                {state.id && (
-                  <ProForm
-                    layout="horizontal"
-                    formRef={formRef}
-                    onFinish={async values => {
-                      const newValues = formatPermission('submit', values)
-                      await updateRolePermission({
-                        permission: JSON.stringify(newValues),
-                        id: state.id
-                      })
-                      message.success('设置成功')
-                    }}>
-                    <ProFormSwitch
-                      name="showSystem"
-                      fieldProps={{
-                        onChange(checked) {
-                          if (!checked) {
-                            formRef.current?.setFieldsValue({ system: [] })
+    <PageContainer title={false} breadcrumb={false}>
+      <div className="h-full w-full flex flex-row">
+        <RoleMenu menuId={menuId} onSelect={onSelect} itemCount={state.roleStaff?.length || 0} />
+        <div className="w-max-3/4">
+          <div className="ml-8 bg-white p-4 shadow-md shadow-hex-3e2c5a relative">
+            <div className="absolute right-4 top-4 z-100">
+              {state.id && (
+                <ConnectModal
+                  title="关联员工"
+                  dataId={state.id}
+                  closeAfterSelect={false}
+                  onReload={() => tryGetRoleStaffList(state.id)}
+                  postUrl="/role/staff/add"
+                />
+              )}
+            </div>
+            <Tabs
+              defaultActiveKey="1"
+              type="card"
+              onChange={key => setState({ ...state, activeKey: key })}>
+              <TabPane tab="员工列表" key="1">
+                <Table<API.RoleStaffListItem>
+                  dataSource={state.roleStaff}
+                  columns={columns}
+                  rowKey={row => row.staffId}
+                />
+              </TabPane>
+              <TabPane tab="角色权限" key="2">
+                <div className="ml-4">
+                  {state.id && (
+                    <ProForm
+                      layout="horizontal"
+                      formRef={formRef}
+                      onFinish={async values => {
+                        const newValues = formatPermission('submit', values)
+                        await updateRolePermission({
+                          permission: JSON.stringify(newValues),
+                          id: state.id
+                        })
+                        message.success('设置成功')
+                      }}>
+                      <ProFormSwitch
+                        name="showSystem"
+                        fieldProps={{
+                          onChange(checked) {
+                            if (!checked) {
+                              formRef.current?.setFieldsValue({ system: [] })
+                            }
                           }
+                        }}
+                        label={
+                          <span className="flex items-center">
+                            <EveryUser className="flex items-baseline mr-1" />
+                            角色权限管理
+                          </span>
+                        }
+                      />
+                      <ProFormDependency name={['showSystem']}>
+                        {({ showSystem }) => (
+                          <ProFormCheckbox.Group
+                            wrapperCol={{ offset: 1 }}
+                            // initialValue={}
+                            name="system"
+                            options={[
+                              { value: 'system', label: '系统管理', disabled: !showSystem },
+                              { value: 'workbench', label: '工作台', disabled: !showSystem },
+                              { value: 'customer', label: '客户', disabled: !showSystem },
+                              { value: 'hr', label: '人资', disabled: !showSystem },
+                              { value: 'product', label: '产品', disabled: !showSystem },
+                              { value: 'statistic', label: '统计', disabled: !showSystem }
+                              // { value: '4', label: '开票合同', disabled: !showAuth },
+                              // { value: '5', label: '考勤', disabled: !showAuth },
+                              // { value: '7', label: '财务费用', disabled: !showAuth }
+                            ]}
+                          />
+                        )}
+                      </ProFormDependency>
+                      <ProFormSwitch
+                        name="showBusiness"
+                        label={
+                          <span className="flex items-center">
+                            <Association className="flex items-baseline mr-1" />
+                            业务参数
+                          </span>
                         }
-                      }}
-                      label={
-                        <span className="flex items-center">
-                          <EveryUser className="mr-1" className="flex items-baseline mr-1" />
-                          角色权限管理
-                        </span>
-                      }
-                    />
-                    <ProFormDependency name={['showSystem']}>
-                      {({ showSystem }) => (
-                        <ProFormCheckbox.Group
-                          wrapperCol={{ offset: 1 }}
-                          // initialValue={}
-                          name="system"
-                          options={[
-                            { value: 'system', label: '系统管理', disabled: !showSystem },
-                            { value: 'workbench', label: '工作台', disabled: !showSystem },
-                            { value: 'customer', label: '客户', disabled: !showSystem },
-                            { value: 'hr', label: '人资', disabled: !showSystem },
-                            { value: 'product', label: '产品', disabled: !showSystem },
-                            { value: 'statistic', label: '统计', disabled: !showSystem }
-                            // { value: '4', label: '开票合同', disabled: !showAuth },
-                            // { value: '5', label: '考勤', disabled: !showAuth },
-                            // { value: '7', label: '财务费用', disabled: !showAuth }
-                          ]}
-                        />
-                      )}
-                    </ProFormDependency>
-                    <ProFormSwitch
-                      name="showBusiness"
-                      label={
-                        <span className="flex items-center">
-                          <Association className="mr-1" className="flex items-baseline mr-1" />
-                          业务参数
-                        </span>
-                      }
-                    />
-                    <ProFormDependency name={['showBusiness']}>
-                      {({ showBusiness }) => (
-                        <ProFormCheckbox.Group
-                          wrapperCol={{ offset: 1 }}
-                          name="business"
-                          options={[
-                            { value: 'attendance', label: '考勤', disabled: !showBusiness },
-                            { value: 'contact', label: '客户', disabled: !showBusiness }
-                            // { value: 'notice', label: '推送', disabled: !showBusiness }
-                          ]}
-                        />
-                      )}
-                    </ProFormDependency>
-                  </ProForm>
-                )}
-              </div>
-            </TabPane>
-          </Tabs>
+                      />
+                      <ProFormDependency name={['showBusiness']}>
+                        {({ showBusiness }) => (
+                          <ProFormCheckbox.Group
+                            wrapperCol={{ offset: 1 }}
+                            name="business"
+                            options={[
+                              { value: 'attendance', label: '考勤', disabled: !showBusiness },
+                              { value: 'contact', label: '客户', disabled: !showBusiness }
+                              // { value: 'notice', label: '推送', disabled: !showBusiness }
+                            ]}
+                          />
+                        )}
+                      </ProFormDependency>
+                    </ProForm>
+                  )}
+                </div>
+              </TabPane>
+            </Tabs>
+          </div>
         </div>
       </div>
-    </div>
+    </PageContainer>
   )
 }
 

src/pages/Role/Workbench/index.tsx

@@ -16,6 +16,7 @@ import type { ColumnsType } from 'antd/lib/table'
 import RoleMenu from '../System/components/RoleMenu'
 import ConnectModal from '../System/components/ConnectModal'
 import { permData } from '../Customer'
+import { PageContainer } from '@ant-design/pro-layout'
 
 const Workbench = () => {
   const { TabPane } = Tabs
@@ -140,33 +141,34 @@ const Workbench = () => {
   ]
 
   return (
-    <div className="h-full w-full flex flex-row">
-      <RoleMenu menuId={menuId} onSelect={onSelect} itemCount={state.roleStaff?.length || 0} />
-      <div className="w-max-3/4">
-        <div className="ml-8 bg-white p-4 shadow-md shadow-hex-3e2c5a relative">
-          <div className="absolute right-4 top-4 z-100">
-            {state.id && (
-              <ConnectModal
-                title="关联员工"
-                dataId={state.id}
-                closeAfterSelect={false}
-                onReload={() => tryGetRoleStaffList(state.id)}
-                postUrl="/role/staff/add"
-              />
-            )}
-          </div>
-          <Tabs
-            defaultActiveKey="1"
-            type="card"
-            onChange={key => setState({ ...state, activeKey: key })}>
-            <TabPane tab="员工列表" key="1">
-              <Table<API.RoleStaffListItem>
-                dataSource={state.roleStaff}
-                columns={columns}
-                rowKey={row => row.staffId}
-              />
-            </TabPane>
-            {/* <TabPane tab="角色权限" key="2">
+    <PageContainer title={false} breadcrumb={false}>
+      <div className="h-full w-full flex flex-row">
+        <RoleMenu menuId={menuId} onSelect={onSelect} itemCount={state.roleStaff?.length || 0} />
+        <div className="w-max-3/4">
+          <div className="ml-8 bg-white p-4 shadow-md shadow-hex-3e2c5a relative">
+            <div className="absolute right-4 top-4 z-100">
+              {state.id && (
+                <ConnectModal
+                  title="关联员工"
+                  dataId={state.id}
+                  closeAfterSelect={false}
+                  onReload={() => tryGetRoleStaffList(state.id)}
+                  postUrl="/role/staff/add"
+                />
+              )}
+            </div>
+            <Tabs
+              defaultActiveKey="1"
+              type="card"
+              onChange={key => setState({ ...state, activeKey: key })}>
+              <TabPane tab="员工列表" key="1">
+                <Table<API.RoleStaffListItem>
+                  dataSource={state.roleStaff}
+                  columns={columns}
+                  rowKey={row => row.staffId}
+                />
+              </TabPane>
+              {/* <TabPane tab="角色权限" key="2">
               <div className="ml-4">
                 {state.id && (
                   <ProForm
@@ -235,41 +237,42 @@ const Workbench = () => {
                 )}
               </div>
             </TabPane> */}
-            <TabPane tab="数据权限" key="3">
-              {state.id && (
-                <ProForm
-                  formRef={formRef2}
-                  layout="vertical"
-                  onFinish={async values => {
-                    try {
-                      await updatePermDataByRoleId({
-                        id: state.id,
-                        dataPermission: JSON.stringify(values)
-                      })
-                    } catch (error) {
-                      return message.error(error.toString())
-                    }
-                    message.success('设置成功')
-                    return true
-                  }}>
-                  <Form.Item name="access" label="联系人/客户可见" required>
-                    <Radio.Group>
-                      <Space direction="vertical">
-                        {permData.map(item => (
-                          <Radio key={item.value} value={item.value}>
-                            {item.label}
-                          </Radio>
-                        ))}
-                      </Space>
-                    </Radio.Group>
-                  </Form.Item>
-                </ProForm>
-              )}
-            </TabPane>
-          </Tabs>
+              <TabPane tab="数据权限" key="3">
+                {state.id && (
+                  <ProForm
+                    formRef={formRef2}
+                    layout="vertical"
+                    onFinish={async values => {
+                      try {
+                        await updatePermDataByRoleId({
+                          id: state.id,
+                          dataPermission: JSON.stringify(values)
+                        })
+                      } catch (error) {
+                        return message.error(error.toString())
+                      }
+                      message.success('设置成功')
+                      return true
+                    }}>
+                    <Form.Item name="access" label="联系人/客户可见" required>
+                      <Radio.Group>
+                        <Space direction="vertical">
+                          {permData.map(item => (
+                            <Radio key={item.value} value={item.value}>
+                              {item.label}
+                            </Radio>
+                          ))}
+                        </Space>
+                      </Radio.Group>
+                    </Form.Item>
+                  </ProForm>
+                )}
+              </TabPane>
+            </Tabs>
+          </div>
         </div>
       </div>
-    </div>
+    </PageContainer>
   )
 }