feat: 使用pageContainer包裹内容，显示水印

src/pages/Hr/AddressBook/index.jsx

@@ -1,6 +1,7 @@
 import BasicTable from '@/components/Table'
 import consts from '@/consts'
 import { queryStaff } from '@/services/staff'
+import { PageContainer } from '@ant-design/pro-layout'
 import React, { useState } from 'react'
 import RoleMenu from '../Employee/components/RoleMenu'
 
@@ -62,32 +63,34 @@ const AddressBook = () => {
     }
   ]
   return (
-    <div className="h-full w-full flex flex-row">
-      <RoleMenu onSelect={onSelect} showType={false} />
-      <div style={{ width: 'calc(100% - 12rem)' }}>
-        <div className="ml-6 shadow-hex-3e2c5a">
-          {state.params.id && (
-            <BasicTable
-              mainMenuType="hr"
-              columnStateType="ADDRESSBOOK"
-              params={{ departmentId: state.params.id }}
-              rowKey={record => record.id}
-              columns={columns}
-              request={async params => {
-                const { code = -1, data: { list = [], total = 0 } = { list: [], total: 0 } } =
-                  await queryStaff({ ...params })
-                return {
-                  data: list,
-                  success: code === consts.RET_CODE.SUCCESS,
-                  total
-                }
-              }}
-              search={false}
-            />
-          )}
+    <PageContainer title={false} breadcrumb={false}>
+      <div className="h-full w-full flex flex-row">
+        <RoleMenu onSelect={onSelect} showType={false} />
+        <div style={{ width: 'calc(100% - 12rem)' }}>
+          <div className="ml-6 shadow-hex-3e2c5a">
+            {state.params.id && (
+              <BasicTable
+                mainMenuType="hr"
+                columnStateType="ADDRESSBOOK"
+                params={{ departmentId: state.params.id }}
+                rowKey={record => record.id}
+                columns={columns}
+                request={async params => {
+                  const { code = -1, data: { list = [], total = 0 } = { list: [], total: 0 } } =
+                    await queryStaff({ ...params })
+                  return {
+                    data: list,
+                    success: code === consts.RET_CODE.SUCCESS,
+                    total
+                  }
+                }}
+                search={false}
+              />
+            )}
+          </div>
         </div>
       </div>
-    </div>
+    </PageContainer>
   )
 }
 

src/pages/Hr/Employee/index.jsx

@@ -4,6 +4,7 @@ import RoleMenu from '@/pages/Hr/Employee/components/RoleMenu'
 import { queryStaff } from '@/services/staff'
 import BasicTable from '@/components/Table'
 import { useModal } from '@/components/ModalStore'
+import { PageContainer } from '@ant-design/pro-layout'
 
 const Employee = props => {
   const { dispatch } = props
@@ -80,32 +81,34 @@ const Employee = props => {
   }
 
   return (
-    <div className="h-full w-full flex flex-row">
-      <RoleMenu onSelect={onSelect} showType={true} />
-      <div style={{ width: 'calc(100% - 12rem)' }}>
-        <div className="ml-6 shadow-hex-3e2c5a">
-          {state.params.id && (
-            <BasicTable
-              mainMenuType="hr"
-              columnStateType="EMPLOYEE"
-              params={{ departmentId: state.params.id }}
-              rowKey={record => record.id}
-              columns={columns}
-              request={async params => {
-                const { code = -1, data: { list = [], total = 0 } = { list: [], total: 0 } } =
-                  await queryStaff({ ...params })
-                return {
-                  data: list,
-                  success: code === consts.RET_CODE.SUCCESS,
-                  total
-                }
-              }}
-              search={false}
-            />
-          )}
+    <PageContainer title={false} breadcrumb={false}>
+      <div className="h-full w-full flex flex-row">
+        <RoleMenu onSelect={onSelect} showType={true} />
+        <div style={{ width: 'calc(100% - 12rem)' }}>
+          <div className="ml-6 shadow-hex-3e2c5a">
+            {state.params.id && (
+              <BasicTable
+                mainMenuType="hr"
+                columnStateType="EMPLOYEE"
+                params={{ departmentId: state.params.id }}
+                rowKey={record => record.id}
+                columns={columns}
+                request={async params => {
+                  const { code = -1, data: { list = [], total = 0 } = { list: [], total: 0 } } =
+                    await queryStaff({ ...params })
+                  return {
+                    data: list,
+                    success: code === consts.RET_CODE.SUCCESS,
+                    total
+                  }
+                }}
+                search={false}
+              />
+            )}
+          </div>
         </div>
       </div>
-    </div>
+    </PageContainer>
   )
 }
 

src/pages/Hr/Notification/index.jsx

@@ -8,6 +8,7 @@ import { useRequest, useIntl, useAccess } from 'umi'
 import ws, { CmdType } from '@/utils/ws'
 import { useModal } from '@/components/ModalStore'
 import MarkDown from 'react-markdown'
+import { PageContainer } from '@ant-design/pro-layout'
 
 const Notification = () => {
   const intl = useIntl()
@@ -64,70 +65,68 @@ const Notification = () => {
   const hasPerm = useAccess()?.validatePermByType('notification_add')
 
   return (
-    <div className="bg-hex-ffffff rounded-md px-6 pb-6">
-      <div className="flex justify-between items-center">
-        <div className="py-4 text-xl">通知中心</div>
-        {hasPerm ? <AddMessage onConfirm={trySendMessage} /> : null}
-      </div>
-      <div
-        id="scrollableDiv"
-        className="pr-4"
-        style={{
-          height: `calc(100vh - 156px - 1.5rem)`,
-          overflowY: 'auto'
-        }}
-      >
-        <InfiniteScroll
-          dataLength={state.total}
-          next={loadMoreData}
-          hasMore={state.hasMore}
-          loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
-          endMessage={<Divider plain>别再滚啦，已是尽头</Divider>}
-          scrollableTarget="scrollableDiv"
-        >
-          <List
-            itemLayout="vertical"
-            dataSource={state.list}
-            renderItem={item => (
-              <List.Item
-                key={item.id}
-                extra={
-                  <span width={200} className="mt-1 text-hex-aaa">
-                    {item.createTime}
-                  </span>
-                }
-              >
-                <List.Item.Meta
-                  avatar={<Avatar src={item.avatar} />}
-                  title={
-                    <span
-                      className="cursor-pointer text-primary"
-                      onClick={() => dispatchModal('D_NOTICE_DETAIL', { item })}
-                    >
-                      {item.title}
+    <PageContainer title={false} breadcrumb={false}>
+      <div className="bg-hex-ffffff rounded-md px-6 pb-6">
+        <div className="flex justify-between items-center">
+          <div className="py-4 text-xl">通知中心</div>
+          {hasPerm ? <AddMessage onConfirm={trySendMessage} /> : null}
+        </div>
+        <div
+          id="scrollableDiv"
+          className="pr-4"
+          style={{
+            height: `calc(100vh - 156px - 1.5rem)`,
+            overflowY: 'auto'
+          }}>
+          <InfiniteScroll
+            dataLength={state.total}
+            next={loadMoreData}
+            hasMore={state.hasMore}
+            loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
+            endMessage={<Divider plain>别再滚啦，已是尽头</Divider>}
+            scrollableTarget="scrollableDiv">
+            <List
+              itemLayout="vertical"
+              dataSource={state.list}
+              renderItem={item => (
+                <List.Item
+                  key={item.id}
+                  extra={
+                    <span width={200} className="mt-1 text-hex-aaa">
+                      {item.createTime}
                     </span>
-                  }
-                  description={
-                    <div className="mb-1 flex items-center">
-                      <Tag color="purple">
-                        {intl.formatMessage({ id: `component.globalHeader.${item.msgType}` })}
-                      </Tag>
-                      <span className="ml-2px">&apos;发布范围&apos;,</span>
-                      <span className="ml-2">全公司</span>
-                    </div>
-                  }
-                />
+                  }>
+                  <List.Item.Meta
+                    avatar={<Avatar src={item.avatar} />}
+                    title={
+                      <span
+                        className="cursor-pointer text-primary"
+                        onClick={() => dispatchModal('D_NOTICE_DETAIL', { item })}>
+                        {item.title}
+                      </span>
+                    }
+                    description={
+                      <div className="mb-1 flex items-center">
+                        <Tag color="purple">
+                          {intl.formatMessage({ id: `component.globalHeader.${item.msgType}` })}
+                        </Tag>
+                        <span className="ml-2px">&apos;发布范围&apos;,</span>
+                        <span className="ml-2">全公司</span>
+                      </div>
+                    }
+                  />
 
-                <Paragraph ellipsis={{ rows: 4 }}>
-                  <MarkDown>{item.content}</MarkDown>
-                </Paragraph>
-                {/* <div className="mt-1 text-hex-aaa">{item.createTime}</div> */}
-              </List.Item>
-            )}
-          />
-        </InfiniteScroll>
+                  <Paragraph ellipsis={{ rows: 4 }}>
+                    <MarkDown>{item.content}</MarkDown>
+                  </Paragraph>
+                  {/* <div className="mt-1 text-hex-aaa">{item.createTime}</div> */}
+                </List.Item>
+              )}
+            />
+          </InfiniteScroll>
+        </div>
       </div>
-    </div>
+    </PageContainer>
   )
 }
 

src/pages/Product/Cloud/index.jsx

@@ -7,6 +7,7 @@ import { Input, Tag, Tooltip } from 'antd'
 import consts from '@/consts'
 import { useLocation, useSelector, useDispatch } from 'umi'
 import { useModal } from '@/components/ModalStore'
+import { PageContainer } from '@ant-design/pro-layout'
 
 export const roadpricingEnum = {
   CURING: 1, // 养护云
@@ -69,8 +70,7 @@ const Cloud = () => {
               projectType: roadpricingEnum[columnStateType]
             })
           }
-          className="text-primary cursor-pointer hover:text-[#967bbd]"
-        >
+          className="text-primary cursor-pointer hover:text-[#967bbd]">
           {text}
         </span>
       )
@@ -151,8 +151,7 @@ const Cloud = () => {
                       )
                   )}
                 </div>
-              }
-            >
+              }>
               {record.all_online_times}
             </Tooltip>
           )
@@ -262,42 +261,44 @@ const Cloud = () => {
   }
 
   return (
-    <BasicTable
-      actionRef={tRef}
-      rowKey={record => record._id}
-      columnStateType={columnStateType}
-      params={state.params}
-      request={async (params, sort, filter) => {
-        const sortOrder = generateSortField(sort)
-        const {
-          code = -1,
-          data: { list = [], total = 0 }
-        } = await queryRoadpricingList({ ...params, ...sortOrder, ...filter })
-        return {
-          data: list,
-          success: code === consts.RET_CODE.SUCCESS,
-          total
-        }
-      }}
-      toolbar={{
-        search: (
-          <Input.Search
-            style={{ width: '250px' }}
-            allowClear={true}
-            placeholder="请输入手机、QQ进行搜索"
-            onSearch={handleSearch}
-          />
-        ),
-        actions: []
-      }}
-      search={false}
-      columns={columns}
-      columnsStateMap={columnsMap}
-      pagination={{
-        pageSize: 20,
-        showSizeChanger: false
-      }}
-    />
+    <PageContainer title={false} breadcrumb={false}>
+      <BasicTable
+        actionRef={tRef}
+        rowKey={record => record._id}
+        columnStateType={columnStateType}
+        params={state.params}
+        request={async (params, sort, filter) => {
+          const sortOrder = generateSortField(sort)
+          const {
+            code = -1,
+            data: { list = [], total = 0 }
+          } = await queryRoadpricingList({ ...params, ...sortOrder, ...filter })
+          return {
+            data: list,
+            success: code === consts.RET_CODE.SUCCESS,
+            total
+          }
+        }}
+        toolbar={{
+          search: (
+            <Input.Search
+              style={{ width: '250px' }}
+              allowClear={true}
+              placeholder="请输入手机、QQ进行搜索"
+              onSearch={handleSearch}
+            />
+          ),
+          actions: []
+        }}
+        search={false}
+        columns={columns}
+        columnsStateMap={columnsMap}
+        pagination={{
+          pageSize: 20,
+          showSizeChanger: false
+        }}
+      />
+    </PageContainer>
   )
 }
 

src/pages/Product/Lock/LockCount/index.jsx

@@ -1,65 +0,0 @@
-import React from 'react'
-import ProTable from '@ant-design/pro-table'
-
-const Lockcount = () => {
-  // const { modalVisible, onCancel } = props;
-  const columns = [
-    {
-      title: '办事处',
-      dataIndex: 'keyNum',
-      key: 'keyNum',
-      width: 150
-    },
-    {
-      title: '员工',
-      dataIndex: 'product',
-      key: 'product',
-      width: 150
-    },
-    {
-      title: '锁合计',
-      dataIndex: 'category',
-      key: 'category',
-      width: 550,
-      children: [
-        {
-          title: '未使用',
-          dataIndex: 'age',
-          key: 'age',
-          width: 150
-        },
-        {
-          title: '未使用',
-          dataIndex: 'kk',
-          key: 'kk',
-          width: 150
-        },
-        {
-          title: '合计',
-          dataIndex: 'nn',
-          key: 'nn',
-          width: 150
-        }
-      ]
-    }
-  ]
-
-  return (
-    <div>
-      <ProTable
-        rowKey={record => record.id}
-        search={false}
-        headerTitle="使用统计"
-        bordered
-        columns={columns}
-        // toolbar={{
-        //   search: {
-        //     allowClear: true
-        //   }
-        // }}
-      />
-    </div>
-  )
-}
-
-export default Lockcount

src/pages/Product/Lock/LockStore/index.jsx

@@ -9,6 +9,7 @@ import BasicTable from '@/components/Table'
 import { getPermAuthCache } from '@/utils/auth'
 import FilterDatePicker from '@/components/Table/src/components/FilterDatePicker'
 import { useModal } from '@/components/ModalStore'
+import { PageContainer } from '@ant-design/pro-layout'
 
 // 渲染产品标签
 export const ProductLabel = ({ data }) => {
@@ -272,87 +273,89 @@ const LockStore = ({ prodList = [], dispatch, shouldUpdate }) => {
 
   const [defaultPermAuthCache] = getPermAuthCache(PermDataTypeEunm.PRODUCT)
   return (
-    <BasicTable
-      rowKey={record => record.id}
-      mainMenuType="product"
-      columnStateType="LOCKSTORE"
-      search={false}
-      actionRef={tRef}
-      params={state.params}
-      columns={columns}
-      request={async (params, sort, filter) => {
-        const srotOrder = generateSortField(sort)
-        const {
-          code = -1,
-          data: { longle = [], total = 0, totalOld = 0, totalNew = 0 } = {
-            longle: [],
-            total: 0,
-            totalOld: 0,
-            totalNew: 0
+    <PageContainer title={false} breadcrumb={false}>
+      <BasicTable
+        rowKey={record => record.id}
+        mainMenuType="product"
+        columnStateType="LOCKSTORE"
+        search={false}
+        actionRef={tRef}
+        params={state.params}
+        columns={columns}
+        request={async (params, sort, filter) => {
+          const srotOrder = generateSortField(sort)
+          const {
+            code = -1,
+            data: { longle = [], total = 0, totalOld = 0, totalNew = 0 } = {
+              longle: [],
+              total: 0,
+              totalOld: 0,
+              totalNew: 0
+            }
+          } = await queryLock({ ...params, ...srotOrder, ...filter })
+          setState({ ...state, totalOld, totalNew, orderIds: longle.map(item => item.id) })
+          return {
+            data: longle,
+            success: code === consts.RET_CODE.SUCCESS,
+            total
           }
-        } = await queryLock({ ...params, ...srotOrder, ...filter })
-        setState({ ...state, totalOld, totalNew, orderIds: longle.map(item => item.id) })
-        return {
-          data: longle,
-          success: code === consts.RET_CODE.SUCCESS,
-          total
-        }
-      }}
-      columnsStateMap={columnsStateMap}
-      headerTitle={
-        // <Dropdown
-        //   trigger="click"
-        //   overlay={
-        //     <Menu onClick={dropDownMenClick}>
-        //       {state.totalOld ? <Menu.Item key="1">接收旧锁</Menu.Item> : null}
+        }}
+        columnsStateMap={columnsStateMap}
+        headerTitle={
+          // <Dropdown
+          //   trigger="click"
+          //   overlay={
+          //     <Menu onClick={dropDownMenClick}>
+          //       {state.totalOld ? <Menu.Item key="1">接收旧锁</Menu.Item> : null}
 
-        //       {state.totalNew ? <Menu.Item key="2">接收新锁</Menu.Item> : null}
-        //     </Menu>
-        //   }>
-        //   <Button>
-        //     接收锁
-        //     <DownOutlined />
-        //   </Button>
-        // </Dropdown>
-        state.totalOld ? (
-          <Button type="primary" onClick={() => dispatchModal('M_RECEIVE_LOCK', { refresh: refreshData })}>
-            接收旧锁({state.totalOld})
-          </Button>
-        ) : null
-      }
-      toolbar={{
-        search: (
-          <Tooltip placement="bottom" title="输入软件锁号、客户、单位名称">
-            <Input.Search
-              style={{ width: '300px' }}
-              allowClear={true}
-              placeholder={`在${
-                permData[PermDataTypeEunm.PRODUCT]?.find(item => item.value === defaultPermAuthCache)?.label
-              }下搜索`}
-              onSearch={handleSearch}
-            />
-          </Tooltip>
-        )
-        // actions: [
-        //   <Tooltip title="产品出库时间" key="date">
-        //     <DatePicker.RangePicker
-        //       bordered={false}
-        //       onChange={time => {
-        //         const [time1, time2] = time || [null, null]
-        //         setState({
-        //           ...state,
-        //           params: {
-        //             ...state.params,
-        //             beginTime: time1 ? time1.format('YYYY-MM-DD') : null,
-        //             endTime: time2 ? time2.format('YYYY-MM-DD') : null
-        //           }
-        //         })
-        //       }}
-        //     />
-        //   </Tooltip>
-        // ]
-      }}
-    />
+          //       {state.totalNew ? <Menu.Item key="2">接收新锁</Menu.Item> : null}
+          //     </Menu>
+          //   }>
+          //   <Button>
+          //     接收锁
+          //     <DownOutlined />
+          //   </Button>
+          // </Dropdown>
+          state.totalOld ? (
+            <Button type="primary" onClick={() => dispatchModal('M_RECEIVE_LOCK', { refresh: refreshData })}>
+              接收旧锁({state.totalOld})
+            </Button>
+          ) : null
+        }
+        toolbar={{
+          search: (
+            <Tooltip placement="bottom" title="输入软件锁号、客户、单位名称">
+              <Input.Search
+                style={{ width: '300px' }}
+                allowClear={true}
+                placeholder={`在${
+                  permData[PermDataTypeEunm.PRODUCT]?.find(item => item.value === defaultPermAuthCache)?.label
+                }下搜索`}
+                onSearch={handleSearch}
+              />
+            </Tooltip>
+          )
+          // actions: [
+          //   <Tooltip title="产品出库时间" key="date">
+          //     <DatePicker.RangePicker
+          //       bordered={false}
+          //       onChange={time => {
+          //         const [time1, time2] = time || [null, null]
+          //         setState({
+          //           ...state,
+          //           params: {
+          //             ...state.params,
+          //             beginTime: time1 ? time1.format('YYYY-MM-DD') : null,
+          //             endTime: time2 ? time2.format('YYYY-MM-DD') : null
+          //           }
+          //         })
+          //       }}
+          //     />
+          //   </Tooltip>
+          // ]
+        }}
+      />
+    </PageContainer>
   )
 }
 

src/pages/Product/Road/Enterprise/index.jsx

@@ -6,6 +6,7 @@ import { dayjsFormat, generateSortField } from '@/utils/utils'
 import consts from '@/consts'
 import { connect, useAccess, useDispatch } from 'umi'
 import { useModal } from '@/components/ModalStore'
+import { PageContainer } from '@ant-design/pro-layout'
 
 const Enterprise = ({ compilationv2, shouldUpdate }) => {
   const hasAddPerm = useAccess()?.validatePermByType('enterprise_add') || false
@@ -123,54 +124,56 @@ const Enterprise = ({ compilationv2, shouldUpdate }) => {
     }
   ]
   return (
-    <BasicTable
-      mainMenuType="product"
-      columnStateType="ENTERPRISE"
-      rowKey={record => record.ID}
-      actionRef={tRef}
-      columns={columns}
-      params={state.params}
-      request={async (params, sort, filter) => {
-        const sortOrder = generateSortField(sort)
-        const {
-          code = -1,
-          data: { list = [], total = 0 }
-        } = await queryRoadcompanyList({ ...params, ...sortOrder, ...filter })
-        return {
-          data: list,
-          success: code === consts.RET_CODE.SUCCESS,
-          total
-        }
-      }}
-      toolbar={{
-        search: (
-          <Input.Search style={{ width: '250px' }} allowClear={true} placeholder="请输入手机、QQ进行搜索" />
-        ),
-        actions: [
-          <Button
-            type="primary"
-            key="addClientBtn"
-            disabled={!hasAddPerm}
-            onClick={() =>
-              dispatchModal('M_ENTERPRISE_ADD', {
-                onConfirm: handleAddEnterprise,
-                disabled: false,
-                defaultValues: {
-                  licenceNum: 1
-                },
-                reload: () => tRef.current?.reload()
-              })
-            }>
-            创建企业
-          </Button>
-        ]
-      }}
-      search={false}
-      pagination={{
-        pageSize: 20,
-        showSizeChanger: false
-      }}
-    />
+    <PageContainer title={false} breadcrumb={false}>
+      <BasicTable
+        mainMenuType="product"
+        columnStateType="ENTERPRISE"
+        rowKey={record => record.ID}
+        actionRef={tRef}
+        columns={columns}
+        params={state.params}
+        request={async (params, sort, filter) => {
+          const sortOrder = generateSortField(sort)
+          const {
+            code = -1,
+            data: { list = [], total = 0 }
+          } = await queryRoadcompanyList({ ...params, ...sortOrder, ...filter })
+          return {
+            data: list,
+            success: code === consts.RET_CODE.SUCCESS,
+            total
+          }
+        }}
+        toolbar={{
+          search: (
+            <Input.Search style={{ width: '250px' }} allowClear={true} placeholder="请输入手机、QQ进行搜索" />
+          ),
+          actions: [
+            <Button
+              type="primary"
+              key="addClientBtn"
+              disabled={!hasAddPerm}
+              onClick={() =>
+                dispatchModal('M_ENTERPRISE_ADD', {
+                  onConfirm: handleAddEnterprise,
+                  disabled: false,
+                  defaultValues: {
+                    licenceNum: 1
+                  },
+                  reload: () => tRef.current?.reload()
+                })
+              }>
+              创建企业
+            </Button>
+          ]
+        }}
+        search={false}
+        pagination={{
+          pageSize: 20,
+          showSizeChanger: false
+        }}
+      />
+    </PageContainer>
   )
 }
 

src/pages/Product/Road/Personal/index.jsx

@@ -6,6 +6,7 @@ import consts from '@/consts'
 import { useLocation, useSelector, useDispatch, connect } from 'umi'
 import { Input, Tooltip, Tag } from 'antd'
 import { useModal } from '@/components/ModalStore'
+import { PageContainer } from '@ant-design/pro-layout'
 
 const Personal = props => {
   const { compilationv2, shouldUpdate } = props
@@ -196,42 +197,44 @@ const Personal = props => {
     setState({ ...state, params: { ...state.params, search: value } })
   }
   return (
-    <BasicTable
-      mainMenuType="product"
-      columnStateType="PERSONAL"
-      actionRef={tRef}
-      rowKey={record => record.ID}
-      columns={columns}
-      params={state.params}
-      request={async (params, sort, filter) => {
-        const sortOrder = generateSortField(sort)
-        const {
-          code = -1,
-          data: { list = [], total = 0 }
-        } = await queryRoadpricingListV2({ ...params, ...sortOrder, ...filter })
-        return {
-          data: list,
-          success: code === consts.RET_CODE.SUCCESS,
-          total
-        }
-      }}
-      toolbar={{
-        search: (
-          <Input.Search
-            style={{ width: '250px' }}
-            allowClear={true}
-            placeholder="请输入手机、QQ进行搜索"
-            onSearch={handleSearch}
-          />
-        ),
-        actions: []
-      }}
-      search={false}
-      pagination={{
-        pageSize: 20,
-        showSizeChanger: false
-      }}
-    />
+    <PageContainer title={false} breadcrumb={false}>
+      <BasicTable
+        mainMenuType="product"
+        columnStateType="PERSONAL"
+        actionRef={tRef}
+        rowKey={record => record.ID}
+        columns={columns}
+        params={state.params}
+        request={async (params, sort, filter) => {
+          const sortOrder = generateSortField(sort)
+          const {
+            code = -1,
+            data: { list = [], total = 0 }
+          } = await queryRoadpricingListV2({ ...params, ...sortOrder, ...filter })
+          return {
+            data: list,
+            success: code === consts.RET_CODE.SUCCESS,
+            total
+          }
+        }}
+        toolbar={{
+          search: (
+            <Input.Search
+              style={{ width: '250px' }}
+              allowClear={true}
+              placeholder="请输入手机、QQ进行搜索"
+              onSearch={handleSearch}
+            />
+          ),
+          actions: []
+        }}
+        search={false}
+        pagination={{
+          pageSize: 20,
+          showSizeChanger: false
+        }}
+      />
+    </PageContainer>
   )
 }
 

src/pages/Statistic/Product/CustomerAdditions/index.jsx

@@ -7,6 +7,7 @@ import dayjs from 'dayjs'
 import { dayjsFormat } from '@/utils/utils'
 import OptionSelect from '../../components/OptionSelect'
 import { queryCustomerAdditionList } from '@/services/statistic'
+import { PageContainer } from '@ant-design/pro-layout'
 
 const { Option } = Select
 const { RangePicker } = DatePicker
@@ -19,7 +20,7 @@ const CustomerAdditions = () => {
     params: {
       optionType: 'singleStaff',
       dataIds: [],
-      dateType:'month',
+      dateType: 'month',
       startMonth: [dayjs(new Date()), dayjs(new Date())]
     },
     data: [],
@@ -78,8 +79,8 @@ const CustomerAdditions = () => {
       render: text => <div className="text-right">{text}</div>
     }
   ]
-  
-  const dateTypeOptions= [
+
+  const dateTypeOptions = [
     { label: '月', value: 'month' },
     { label: '周', value: 'week' },
     { label: '日', value: 'date' }
@@ -91,10 +92,17 @@ const CustomerAdditions = () => {
       const [startTime, endTime] = val
       setState({
         ...state,
-        params: { ...state.params, startMonth: [startTime.startOf('month'), endTime.endOf('month')], dateType:state.type }
+        params: {
+          ...state.params,
+          startMonth: [startTime.startOf('month'), endTime.endOf('month')],
+          dateType: state.type
+        }
       })
     } else {
-      setState({ ...state, params: { ...state.params, startMonth: val, dateType: state.type === 'date' ? 'day' : state.type } })
+      setState({
+        ...state,
+        params: { ...state.params, startMonth: val, dateType: state.type === 'date' ? 'day' : state.type }
+      })
     }
   }
   const columnConfig = {
@@ -127,63 +135,69 @@ const CustomerAdditions = () => {
     colorField: 'type'
   }
   return (
-    <div className="flex flex-col">
-      <div className="flex flex-row justify-between mb-4">
-        <div className="card-transition bg-white w-full">
-          {state.data?.length ? <Column {...columnConfig} /> : null}
+    <PageContainer title={false} breadcrumb={false} waterMarkProps={{ offsetTop: 111 }}>
+      <div className="flex flex-col">
+        <div className="flex flex-row justify-between mb-4">
+          <div className="card-transition bg-white w-full">
+            {state.data?.length ? <Column {...columnConfig} /> : null}
+          </div>
         </div>
-      </div>
-      <BasicTable
-        // manualRequest
-        search={false}
-        columns={columns}
-        actionRef={tRef}
-        rowkey="id"
-        params={state.params}
-        pagination={false}
-        bordered
-        toolbar={{
-          title: [<OptionSelect onChange={handleOptionChange} type="CustomerAdditions" key="op" multiple={false} />],
-          actions: [
-            <Space key="id">
-              <Select 
-                value={state.type} 
-                options={dateTypeOptions} 
-                onChange={value => setState({ ...state, type: value })} 
+        <BasicTable
+          // manualRequest
+          search={false}
+          columns={columns}
+          actionRef={tRef}
+          rowkey="id"
+          params={state.params}
+          pagination={false}
+          bordered
+          toolbar={{
+            title: [
+              <OptionSelect
+                onChange={handleOptionChange}
+                type="CustomerAdditions"
+                key="op"
+                multiple={false}
               />
+            ],
+            actions: [
+              <Space key="id">
+                <Select
+                  value={state.type}
+                  options={dateTypeOptions}
+                  onChange={value => setState({ ...state, type: value })}
+                />
                 {/* <Option value="month">月</Option>
                 <Option value="week">周</Option>
                 <Option value="date">日</Option> */}
-              {/* </Select> */}
-              <RangePicker
-                picker={state.type}
-                disabledDate={disabledDate}
-                // allowClear={false}
-                // value={state.params.startMonth}
-                value={hackValue || state.params.startMonth}
-                onCalendarChange={val => setDates(val)}
-                onOpenChange={onOpenChange}
-                onChange={val => handleOnChange(val)}
-              />
-            </Space>
-          ]
-        }}
-        request={async (params) => {
-          const {
-            code = -1,
-            data=[]
-          } = await queryCustomerAdditionList({
-            ...params
-          })
-          setState({ ...state, data })
-          return {
-            data,
-            success: code === consts.RET_CODE.SUCCESS
-            // total: list?.length || 0
-          }
-        }}
-      />
-    </div>
+                {/* </Select> */}
+                <RangePicker
+                  picker={state.type}
+                  disabledDate={disabledDate}
+                  // allowClear={false}
+                  // value={state.params.startMonth}
+                  value={hackValue || state.params.startMonth}
+                  onCalendarChange={val => setDates(val)}
+                  onOpenChange={onOpenChange}
+                  onChange={val => handleOnChange(val)}
+                />
+              </Space>
+            ]
+          }}
+          request={async params => {
+            const { code = -1, data = [] } = await queryCustomerAdditionList({
+              ...params
+            })
+            setState({ ...state, data })
+            return {
+              data,
+              success: code === consts.RET_CODE.SUCCESS
+              // total: list?.length || 0
+            }
+          }}
+        />
+      </div>
+    </PageContainer>
   )
 }
 

src/pages/Statistic/Product/InvoiceAggregate/index.jsx

@@ -3,6 +3,7 @@ import consts from '@/consts'
 import { querySoftInvoiceAggregateList } from '@/services/statistic'
 import { disabledDate } from '@/utils/utils'
 import { Column } from '@ant-design/charts'
+import { PageContainer } from '@ant-design/pro-layout'
 import { Table, DatePicker } from 'antd'
 import dayjs from 'dayjs'
 import React, { useRef, useState } from 'react'
@@ -83,64 +84,68 @@ const InvoiceAggregate = () => {
   }
 
   return (
-    <div className="flex flex-col">
-      <div className="flex flex-row justify-between mb-4">
-        <div className="card-transition bg-white w-full">
-          {/* {pieData.pieLeft ? <Pie {...leftConfig} /> : null} */}
-          {state.list?.length ? <Column {...columnConfig} /> : null}
+    <PageContainer title={false} breadcrumb={false} waterMarkProps={{ offsetTop: 111 }}>
+      <div className="flex flex-col">
+        <div className="flex flex-row justify-between mb-4">
+          <div className="card-transition bg-white w-full">
+            {/* {pieData.pieLeft ? <Pie {...leftConfig} /> : null} */}
+            {state.list?.length ? <Column {...columnConfig} /> : null}
+          </div>
         </div>
-      </div>
 
-      <BasicTable
-        // manualRequest
-        search={false}
-        columns={columns}
-        actionRef={tRef}
-        rowkey="id"
-        toolbar={{
-          title: <OptionSelect onChange={handleOptionChange} type="InvoiceAggregate" />,
-          actions: [
-            <DatePicker.RangePicker
-              allowClear={false}
-              picker="month"
-              key="DatePicker"
-              clo
-              disabledDate={current => disabledDate(current, 'month')}
-              // disabled={[false, true]}
-              value={state.params.startMonth}
-              onChange={val => setState({ ...state, params: { ...state.params, startMonth: val } })}
-            />
-          ]
-        }}
-        params={state.params}
-        pagination={false}
-        bordered
-        request={async (params, sort, filter) => {
-          const {
-            code = -1,
-            data: { list, sum }
-          } = await querySoftInvoiceAggregateList({ ...params, ...sort, ...filter })
-          setState({ ...state, sum, list })
-          return {
-            data: list,
-            success: code === consts.RET_CODE.SUCCESS,
-            total: list?.length || 0
+        <BasicTable
+          // manualRequest
+          search={false}
+          columns={columns}
+          actionRef={tRef}
+          rowkey="id"
+          toolbar={{
+            title: <OptionSelect onChange={handleOptionChange} type="InvoiceAggregate" />,
+            actions: [
+              <DatePicker.RangePicker
+                allowClear={false}
+                picker="month"
+                key="DatePicker"
+                clo
+                disabledDate={current => disabledDate(current, 'month')}
+                // disabled={[false, true]}
+                value={state.params.startMonth}
+                onChange={val => setState({ ...state, params: { ...state.params, startMonth: val } })}
+              />
+            ]
+          }}
+          params={state.params}
+          pagination={false}
+          bordered
+          request={async (params, sort, filter) => {
+            const {
+              code = -1,
+              data: { list, sum }
+            } = await querySoftInvoiceAggregateList({ ...params, ...sort, ...filter })
+            setState({ ...state, sum, list })
+            return {
+              data: list,
+              success: code === consts.RET_CODE.SUCCESS,
+              total: list?.length || 0
+            }
+          }}
+          summary={data =>
+            data?.length ? (
+              <>
+                <Table.Summary.Row>
+                  <Table.Summary.Cell className="text-center">{state.sum?.name}</Table.Summary.Cell>
+                  <Table.Summary.Cell className="text-right">{state.sum?.invoicePrice}</Table.Summary.Cell>
+                  <Table.Summary.Cell className="text-right">
+                    {state.sum?.receivablesPrice}
+                  </Table.Summary.Cell>
+                  <Table.Summary.Cell className="text-right">{state.sum?.creditPrice}</Table.Summary.Cell>
+                </Table.Summary.Row>
+              </>
+            ) : null
           }
-        }}
-        summary={data =>
-          data?.length ? (
-            <>
-              <Table.Summary.Row>
-                <Table.Summary.Cell className="text-center">{state.sum?.name}</Table.Summary.Cell>
-                <Table.Summary.Cell className="text-right">{state.sum?.invoicePrice}</Table.Summary.Cell>
-                <Table.Summary.Cell className="text-right">{state.sum?.receivablesPrice}</Table.Summary.Cell>
-                <Table.Summary.Cell className="text-right">{state.sum?.creditPrice}</Table.Summary.Cell>
-              </Table.Summary.Row>
-            </>
-          ) : null
-        }
-      />
-    </div>
+        />
+      </div>
+    </PageContainer>
   )
 }
 

src/pages/Statistic/Product/InvoiceReceivables/index.jsx

@@ -8,6 +8,7 @@ import OptionSelect from '../../components/OptionSelect'
 import { disabledDate } from '@/utils/utils'
 import styles from './index.less'
 import classNames from 'classnames'
+import { PageContainer } from '@ant-design/pro-layout'
 
 export const collectedTypeEnum = {
   UNSTART: 0, // 未启动
@@ -225,68 +226,70 @@ const InvoiceReceivables = () => {
     }
   ]
   return (
-    <div className="flex flex-col">
-      <BasicTable
-        rowkey="key"
-        search={false}
-        columns={columns}
-        pagination={false}
-        bordered
-        params={state.params}
-        toolbar={{
-          title: <OptionSelect onChange={handleOptionChange} type="InvoiceReceivables" multiple={false} />,
-          actions: [
-            <Space key="key">
-              <DatePicker.RangePicker
-                picker="month"
-                allowClear={false}
-                // key="DatePicker"
-                disabledDate={current => disabledDate(current, 'month')}
-                value={state.params.startMonth}
-                onChange={val => setState({ ...state, params: { ...state.params, startMonth: val } })}
-              />
-              <Checkbox onChange={e => handleCheckOnChange(e.target.checked)}>
-                <span
-                  className={classNames({
-                    'text-red-600': state.params.uncollected === 1
-                  })}>
-                  截止申请时间未收款
-                </span>
-              </Checkbox>
-            </Space>
-          ]
-        }}
-        request={async params => {
-          const {
-            code = -1,
-            data: { list, sum }
-          } = await queryInvoiceReceivablesList({ ...params })
-          setState({ ...state, list, sum })
-          return {
-            data: list,
-            success: code === consts.RET_CODE.SUCCESS,
-            total: list?.length || 0
+    <PageContainer title={false} breadcrumb={false} waterMarkProps={{ offsetTop: 111 }}>
+      <div className="flex flex-col">
+        <BasicTable
+          rowkey="key"
+          search={false}
+          columns={columns}
+          pagination={false}
+          bordered
+          params={state.params}
+          toolbar={{
+            title: <OptionSelect onChange={handleOptionChange} type="InvoiceReceivables" multiple={false} />,
+            actions: [
+              <Space key="key">
+                <DatePicker.RangePicker
+                  picker="month"
+                  allowClear={false}
+                  // key="DatePicker"
+                  disabledDate={current => disabledDate(current, 'month')}
+                  value={state.params.startMonth}
+                  onChange={val => setState({ ...state, params: { ...state.params, startMonth: val } })}
+                />
+                <Checkbox onChange={e => handleCheckOnChange(e.target.checked)}>
+                  <span
+                    className={classNames({
+                      'text-red-600': state.params.uncollected === 1
+                    })}>
+                    截止申请时间未收款
+                  </span>
+                </Checkbox>
+              </Space>
+            ]
+          }}
+          request={async params => {
+            const {
+              code = -1,
+              data: { list, sum }
+            } = await queryInvoiceReceivablesList({ ...params })
+            setState({ ...state, list, sum })
+            return {
+              data: list,
+              success: code === consts.RET_CODE.SUCCESS,
+              total: list?.length || 0
+            }
+          }}
+          summary={data =>
+            data?.length ? (
+              <>
+                <Table.Summary.Row>
+                  <Table.Summary.Cell className="text-center">小计</Table.Summary.Cell>
+                  <Table.Summary.Cell className="text-right" colSpan={6}>
+                    {state.sum?.invoicePrice}
+                  </Table.Summary.Cell>
+                  <Table.Summary.Cell className="text-right" colSpan={5}>
+                    {state.sum?.collectionsPrice}
+                  </Table.Summary.Cell>
+                  <Table.Summary.Cell className="text-right">{state.sum?.bindPrice}</Table.Summary.Cell>
+                  <Table.Summary.Cell className="text-right" />
+                </Table.Summary.Row>
+              </>
+            ) : null
           }
-        }}
-        summary={data =>
-          data?.length ? (
-            <>
-              <Table.Summary.Row>
-                <Table.Summary.Cell className="text-center">小计</Table.Summary.Cell>
-                <Table.Summary.Cell className="text-right" colSpan={6}>
-                  {state.sum?.invoicePrice}
-                </Table.Summary.Cell>
-                <Table.Summary.Cell className="text-right" colSpan={5}>
-                  {state.sum?.collectionsPrice}
-                </Table.Summary.Cell>
-                <Table.Summary.Cell className="text-right">{state.sum?.bindPrice}</Table.Summary.Cell>
-                <Table.Summary.Cell className="text-right" />
-              </Table.Summary.Row>
-            </>
-          ) : null
-        }
-      />
-    </div>
+        />
+      </div>
+    </PageContainer>
   )
 }
 

src/pages/Statistic/Product/InvoiceTrends/index.jsx

@@ -3,6 +3,7 @@ import consts from '@/consts'
 import { querySoftInvoiceTrendsList } from '@/services/statistic'
 import { disabledDate } from '@/utils/utils'
 import { DualAxes } from '@ant-design/charts'
+import { PageContainer } from '@ant-design/pro-layout'
 import { DatePicker, Select } from 'antd'
 import dayjs from 'dayjs'
 import React, { useRef, useState } from 'react'
@@ -179,69 +180,71 @@ const InvoiceTrends = () => {
     ]
   }
   return (
-    <div className="flex flex-col">
-      <div className="flex flex-row justify-between mb-4">
-        <div className="card-transition bg-white w-full">
-          {state.chart?.length ? <DualAxes {...dualAxesOptions} /> : null}
-          {/* {pieData.pieLeft ? <Pie {...leftConfig} /> : null} */}
-          {/* {state.list?.length ? <Column {...columnConfig} /> : null} */}
+    <PageContainer title={false} breadcrumb={false} waterMarkProps={{ offsetTop: 111 }}>
+      <div className="flex flex-col">
+        <div className="flex flex-row justify-between mb-4">
+          <div className="card-transition bg-white w-full">
+            {state.chart?.length ? <DualAxes {...dualAxesOptions} /> : null}
+            {/* {pieData.pieLeft ? <Pie {...leftConfig} /> : null} */}
+            {/* {state.list?.length ? <Column {...columnConfig} /> : null} */}
+          </div>
         </div>
-      </div>
 
-      <BasicTable
-        // manualRequest
-        search={false}
-        params={state.params}
-        columns={columns}
-        actionRef={tRef}
-        rowkey="id"
-        toolbar={{
-          title: [
-            <OptionSelect onChange={handleOptionChange} type="InvoiceTrends" key="op" multiple={false} />,
-            <div className="ml-2" key="pp">
-              <Select
-                defaultValue="invoice"
-                options={[
-                  { label: '发票', value: 'invoice' },
-                  { label: '收款', value: 'receivables' },
-                  { label: '入账', value: 'credit' }
-                ]}
-                placeholder="请选择发票类型"
-                onChange={e => setState({ ...state, params: { ...state.params, priceType: e } })}
+        <BasicTable
+          // manualRequest
+          search={false}
+          params={state.params}
+          columns={columns}
+          actionRef={tRef}
+          rowkey="id"
+          toolbar={{
+            title: [
+              <OptionSelect onChange={handleOptionChange} type="InvoiceTrends" key="op" multiple={false} />,
+              <div className="ml-2" key="pp">
+                <Select
+                  defaultValue="invoice"
+                  options={[
+                    { label: '发票', value: 'invoice' },
+                    { label: '收款', value: 'receivables' },
+                    { label: '入账', value: 'credit' }
+                  ]}
+                  placeholder="请选择发票类型"
+                  onChange={e => setState({ ...state, params: { ...state.params, priceType: e } })}
+                />
+              </div>
+            ],
+            actions: [
+              <DatePicker
+                picker="year"
+                key="DatePicker"
+                allowClear={false}
+                disabledDate={current => disabledDate(current, 'year')}
+                value={state.params.startMonth}
+                onChange={val => setState({ ...state, params: { ...state.params, startMonth: val } })}
               />
-            </div>
-          ],
-          actions: [
-            <DatePicker
-              picker="year"
-              key="DatePicker"
-              allowClear={false}
-              disabledDate={current => disabledDate(current, 'year')}
-              value={state.params.startMonth}
-              onChange={val => setState({ ...state, params: { ...state.params, startMonth: val } })}
-            />
-          ]
-        }}
-        pagination={false}
-        bordered
-        request={async (params, sort, filter) => {
-          const {
-            code = -1,
-            data: { list, chart }
-          } = await querySoftInvoiceTrendsList({
-            ...params,
-            ...sort,
-            ...filter
-          })
-          setState({ ...state, chart })
-          return {
-            data: list,
-            success: code === consts.RET_CODE.SUCCESS,
-            total: list?.length || 0
-          }
-        }}
-      />
-    </div>
+            ]
+          }}
+          pagination={false}
+          bordered
+          request={async (params, sort, filter) => {
+            const {
+              code = -1,
+              data: { list, chart }
+            } = await querySoftInvoiceTrendsList({
+              ...params,
+              ...sort,
+              ...filter
+            })
+            setState({ ...state, chart })
+            return {
+              data: list,
+              success: code === consts.RET_CODE.SUCCESS,
+              total: list?.length || 0
+            }
+          }}
+        />
+      </div>
+    </PageContainer>
   )
 }
 

src/pages/Statistic/Product/SoftwareUsage/index.jsx

@@ -7,6 +7,7 @@ import dayjs from 'dayjs'
 import { Pie } from '@ant-design/charts'
 import OptionSelect from '../../components/OptionSelect'
 import { disabledDate } from '@/utils/utils'
+import { PageContainer } from '@ant-design/pro-layout'
 
 const { Text } = Typography
 
@@ -119,89 +120,79 @@ const Usage = () => {
     setState({ ...state, params: { ...state.params, optionType: type, dataIds: ids } })
 
   return (
-    <div className="flex flex-col">
-      <div className="flex flex-row justify-between mb-4">
-        <div className="card-transition  w-1/2 bg-white mr-2">
-          {pieData.pieLeft ? <Pie {...leftConfig} /> : null}
+    <PageContainer title={false} breadcrumb={false} waterMarkProps={{ offsetTop: 111 }}>
+      <div className="flex flex-col">
+        <div className="flex flex-row justify-between mb-4">
+          <div className="card-transition  w-1/2 bg-white mr-2">
+            {pieData.pieLeft ? <Pie {...leftConfig} /> : null}
+          </div>
+          <div className="card-transition w-1/2 bg-white ml-2">
+            {pieData.pieRight ? <Pie {...rightConfig} /> : null}
+          </div>
         </div>
-        <div className="card-transition w-1/2 bg-white ml-2">
-          {pieData.pieRight ? <Pie {...rightConfig} /> : null}
-        </div>
-      </div>
 
-      <BasicTable
-        // manualRequest
-        search={false}
-        columns={columns}
-        actionRef={tRef}
-        rowkey="id"
-        toolbar={{
-          title: <OptionSelect onChange={optionChange} type="SoftwareUsage" />,
-          actions: [
-            <DatePicker.RangePicker
-              picker="month"
-              allowClear={false}
-              key="DatePicker"
-              disabledDate={current => disabledDate(current, 'month')}
-              value={state.params.startMonth}
-              onChange={val => setState({ ...state, params: { ...state.params, startMonth: val } })}
-            />
-          ]
-        }}
-        params={state.params}
-        pagination={false}
-        bordered
-        request={async (params, sort, filter) => {
-          const {
-            code = -1,
-            data: { list, sum, chart, create }
-          } = await querySoftwareUsageList({ ...params, ...sort, ...filter })
-          setState({ ...state, sum, chart, create })
-          return {
-            data: list,
-            success: code === consts.RET_CODE.SUCCESS,
-            total: list?.length || 0
+        <BasicTable
+          // manualRequest
+          search={false}
+          columns={columns}
+          actionRef={tRef}
+          rowkey="id"
+          toolbar={{
+            title: <OptionSelect onChange={optionChange} type="SoftwareUsage" />,
+            actions: [
+              <DatePicker.RangePicker
+                picker="month"
+                allowClear={false}
+                key="DatePicker"
+                disabledDate={current => disabledDate(current, 'month')}
+                value={state.params.startMonth}
+                onChange={val => setState({ ...state, params: { ...state.params, startMonth: val } })}
+              />
+            ]
+          }}
+          params={state.params}
+          pagination={false}
+          bordered
+          request={async (params, sort, filter) => {
+            const {
+              code = -1,
+              data: { list, sum, chart, create }
+            } = await querySoftwareUsageList({ ...params, ...sort, ...filter })
+            setState({ ...state, sum, chart, create })
+            return {
+              data: list,
+              success: code === consts.RET_CODE.SUCCESS,
+              total: list?.length || 0
+            }
+          }}
+          summary={data =>
+            data?.length ? (
+              <>
+                <Table.Summary.Row>
+                  <Table.Summary.Cell className="text-center">小计</Table.Summary.Cell>
+                  <Table.Summary.Cell className="text-center">{state.sum?.createCount}</Table.Summary.Cell>
+                  <Table.Summary.Cell className="text-center">{state.sum?.receiveCount}</Table.Summary.Cell>
+                  <Table.Summary.Cell className="text-center">{state.sum?.lendCount}</Table.Summary.Cell>
+                  <Table.Summary.Cell className="text-center">{state.sum?.salesCount}</Table.Summary.Cell>
+                  <Table.Summary.Cell className="text-center">{state.sum?.giftsCount}</Table.Summary.Cell>
+                </Table.Summary.Row>
+                <Table.Summary.Row>
+                  <Table.Summary.Cell className="text-center">总计</Table.Summary.Cell>
+                  <Table.Summary.Cell colSpan={2} className="text-center">
+                    <Text type="danger">{(state.sum?.createCount || 0) + state.sum?.receiveCount}</Text>
+                  </Table.Summary.Cell>
+                  <Table.Summary.Cell colSpan={3} className="text-center">
+                    <Text type="danger">
+                      {state.sum?.lendCount + state.sum?.salesCount + state.sum?.giftsCount}
+                    </Text>
+                  </Table.Summary.Cell>
+                </Table.Summary.Row>
+              </>
+            ) : null
           }
-        }}
-        summary={data =>
-          data?.length ? (
-            <>
-              <Table.Summary.Row>
-                <Table.Summary.Cell className="text-center">小计</Table.Summary.Cell>
-                <Table.Summary.Cell className="text-center">
-                  {state.sum?.createCount}
-                </Table.Summary.Cell>
-                <Table.Summary.Cell className="text-center">
-                  {state.sum?.receiveCount}
-                </Table.Summary.Cell>
-                <Table.Summary.Cell className="text-center">
-                  {state.sum?.lendCount}
-                </Table.Summary.Cell>
-                <Table.Summary.Cell className="text-center">
-                  {state.sum?.salesCount}
-                </Table.Summary.Cell>
-                <Table.Summary.Cell className="text-center">
-                  {state.sum?.giftsCount}
-                </Table.Summary.Cell>
-              </Table.Summary.Row>
-              <Table.Summary.Row>
-                <Table.Summary.Cell className="text-center">总计</Table.Summary.Cell>
-                <Table.Summary.Cell colSpan={2} className="text-center">
-                  <Text type="danger">
-                    {(state.sum?.createCount || 0) + state.sum?.receiveCount}
-                  </Text>
-                </Table.Summary.Cell>
-                <Table.Summary.Cell colSpan={3} className="text-center">
-                  <Text type="danger">
-                    {state.sum?.lendCount + state.sum?.salesCount + state.sum?.giftsCount}
-                  </Text>
-                </Table.Summary.Cell>
-              </Table.Summary.Row>
-            </>
-          ) : null
-        }
-      />
-    </div>
+        />
+      </div>
+    </PageContainer>
   )
 }
 

src/pages/User/Account/Settings/index.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useLayoutEffect } from 'react'
-import { GridContent } from '@ant-design/pro-layout'
+import { GridContent, PageContainer } from '@ant-design/pro-layout'
 import { Menu } from 'antd'
 import styles from './style.less'
 import BaseView from './components/BaseView'
@@ -63,34 +63,35 @@ const Settings = () => {
   }
 
   return (
-    <GridContent>
-      <div
-        className={styles.main}
-        ref={ref => {
-          if (ref) {
-            dom.current = ref
-          }
-        }}
-      >
-        <div className={styles.leftMenu}>
-          <Menu
-            mode={initConfig.mode}
-            items={getMenu()}
-            selectedKeys={[initConfig.selectKey]}
-            onClick={({ key }) => {
-              setInitConfig({
-                ...initConfig,
-                selectKey: key
-              })
-            }}
-          />
+    <PageContainer title={false} breadcrumb={false}>
+      <GridContent>
+        <div
+          className={styles.main}
+          ref={ref => {
+            if (ref) {
+              dom.current = ref
+            }
+          }}>
+          <div className={styles.leftMenu}>
+            <Menu
+              mode={initConfig.mode}
+              items={getMenu()}
+              selectedKeys={[initConfig.selectKey]}
+              onClick={({ key }) => {
+                setInitConfig({
+                  ...initConfig,
+                  selectKey: key
+                })
+              }}
+            />
+          </div>
+          <div className={styles.right}>
+            {/* <div className={styles.title}>{menuMap[initConfig.selectKey]}</div> */}
+            {renderChildren()}
+          </div>
         </div>
-        <div className={styles.right}>
-          {/* <div className={styles.title}>{menuMap[initConfig.selectKey]}</div> */}
-          {renderChildren()}
-        </div>
-      </div>
-    </GridContent>
+      </GridContent>
+    </PageContainer>
   )
 }