feat：增加分页按钮及数量

src/views/orders/components/MailBox.jsx

@@ -1,36 +1,36 @@
 import { useCallback, useEffect, useState } from 'react'
-import { ReloadOutlined, ReadOutlined, CheckSquareOutlined, StarOutlined, HomeOutlined } from '@ant-design/icons'
+import { ReloadOutlined, ReadOutlined, CheckSquareOutlined, StarOutlined, RightOutlined, LeftOutlined } from '@ant-design/icons'
 import { Flex, Button, Tooltip, List, Form, Row, Col, Drawer, Dropdown, Input, Checkbox, DatePicker, Select, Breadcrumb } from 'antd'
-import dayjs from 'dayjs';
+import dayjs from 'dayjs'
 
-const { RangePicker } = DatePicker;
+const { RangePicker } = DatePicker
 const MailBox = (props) => {
   const DATE_RANGE_PRESETS = [
-      {
-        label: '本周',
-        value: [dayjs().startOf('w'), dayjs().endOf('w')],
-      },
-      {
-        label: '上周',
-        value: [dayjs().startOf('w').subtract(7, 'days'), dayjs().endOf('w').subtract(7, 'days')],
-      },
-      {
-        label: '本月',
-        value: [dayjs().startOf('M'), dayjs().endOf('M')],
-      },
-      {
-        label: '上月',
-        value: [dayjs().subtract(1, 'M').startOf('M'), dayjs().subtract(1, 'M').endOf('M')],
-      },
-      {
-        label: '前三月',
-        value: [dayjs().subtract(2, 'M').startOf('M'), dayjs().endOf('M')],
-      },
-      {
-        label: '本年',
-        value: [dayjs().startOf('y'), dayjs().endOf('y')],
-      },
-    ];
+    {
+      label: '本周',
+      value: [dayjs().startOf('w'), dayjs().endOf('w')],
+    },
+    {
+      label: '上周',
+      value: [dayjs().startOf('w').subtract(7, 'days'), dayjs().endOf('w').subtract(7, 'days')],
+    },
+    {
+      label: '本月',
+      value: [dayjs().startOf('M'), dayjs().endOf('M')],
+    },
+    {
+      label: '上月',
+      value: [dayjs().subtract(1, 'M').startOf('M'), dayjs().subtract(1, 'M').endOf('M')],
+    },
+    {
+      label: '前三月',
+      value: [dayjs().subtract(2, 'M').startOf('M'), dayjs().endOf('M')],
+    },
+    {
+      label: '本年',
+      value: [dayjs().startOf('y'), dayjs().endOf('y')],
+    },
+  ]
   const [openOrder, setOpenOrder] = useState(false)
   const [form] = Form.useForm()
 
@@ -113,25 +113,35 @@ const MailBox = (props) => {
 
       <div className='bg-white overflow-y-auto' style={{ height: 'calc(100vh - 198px)' }}>
         <List
-          header={<Breadcrumb
-    items={[
-      {
-        title: (
-          <>
-            <StarOutlined />
-            <span>今日任务</span>
-          </>
-        ),
-      },
-      {
-        title: (
-          <>
-            <span>lyj20210810144702</span>
-          </>
-        ),
-      },
-    ]}
-  />}
+          header={
+            <Flex align='center' justify="space-between">
+            <Breadcrumb
+              items={[
+                {
+                  title: (
+                    <>
+                      <StarOutlined />
+                      <span>今日任务</span>
+                    </>
+                  ),
+                },
+                {
+                  title: (
+                    <>
+                      <span>lyj20210810144702</span>
+                    </>
+                  ),
+                },
+              ]}
+            />
+            <Flex align="center" justify="space-between">
+              <span>51-100 of 562</span>
+            <Button icon={<LeftOutlined />} type="text" iconPosition={'end'}></Button>
+            <Button icon={<RightOutlined />} type="text" iconPosition={'end'}></Button>
+            </Flex>
+
+          </Flex>
+          }
           itemLayout='vertical'
           size='large'
           pagination={false}
@@ -143,9 +153,9 @@ const MailBox = (props) => {
               </div>
               <div className='flex-1 pl-2'>
                 <Flex gap='small' vertical={true} justify='space-between' className='cursor-pointer'>
-                  <span className="font-bold">{item.title}</span>
-                  <span className="text-neutral-500 text-wrap break-words break-all ">{item.description + ' ' + item.mailDate}</span>
-                  {item.orderNo + ' ' + (item.country===null?'' : item.country)}
+                  <span className='font-bold'>{item.title}</span>
+                  <span className='text-neutral-500 text-wrap break-words break-all '>{item.description + ' ' + item.mailDate}</span>
+                  {item.orderNo + ' ' + (item.country === null ? '' : item.country)}
                 </Flex>
               </div>
             </li>
@@ -155,37 +165,36 @@ const MailBox = (props) => {
 
       <Drawer title={'高级搜索'} placement='top' getContainer={false} size={'large'} mask={true} maskClosable={true} open={openOrder} onClose={() => setOpenOrder(false)}>
         <Form
-      layout={'vertical'}
-      form={form}
-      initialValues={{
-      }}
-      // onFinish={handleSubmit}
-      >
-      <Row justify='start' gutter={16}>
-        <Col span={4}>
-          <Form.Item label='订单号' name='orderNumber'>
-            <Input placeholder='订单号' allowClear />
-          </Form.Item>
-        </Col>
-        <Col span={4}>
-          <Form.Item label='出发日期' name='startDateRange'>
-            <RangePicker allowClear={true} inputReadOnly={true} presets={DATE_RANGE_PRESETS} />
-          </Form.Item>
-        </Col>
-        <Col span={4}>
-          <Form.Item label='确认日期' name='confirmDateRange'>
-            <RangePicker allowClear={true} inputReadOnly={true} presets={DATE_RANGE_PRESETS} />
-          </Form.Item>
-        </Col>
-      </Row>
-      <Row justify='start' align='middle' gutter={16}>
-        <Col span={1} offset={1}>
-          <Button type='primary' htmlType='submit'>
-            搜索
-          </Button>
-        </Col>
-      </Row>
-    </Form>
+          layout={'vertical'}
+          form={form}
+          initialValues={{}}
+          // onFinish={handleSubmit}
+        >
+          <Row justify='start' gutter={16}>
+            <Col span={4}>
+              <Form.Item label='订单号' name='orderNumber'>
+                <Input placeholder='订单号' allowClear />
+              </Form.Item>
+            </Col>
+            <Col span={4}>
+              <Form.Item label='出发日期' name='startDateRange'>
+                <RangePicker allowClear={true} inputReadOnly={true} presets={DATE_RANGE_PRESETS} />
+              </Form.Item>
+            </Col>
+            <Col span={4}>
+              <Form.Item label='确认日期' name='confirmDateRange'>
+                <RangePicker allowClear={true} inputReadOnly={true} presets={DATE_RANGE_PRESETS} />
+              </Form.Item>
+            </Col>
+          </Row>
+          <Row justify='start' align='middle' gutter={16}>
+            <Col span={1} offset={1}>
+              <Button type='primary' htmlType='submit'>
+                搜索
+              </Button>
+            </Col>
+          </Row>
+        </Form>
       </Drawer>
     </>
   )