From 12b793d277726660f5782c3746cafd8423b1d276 Mon Sep 17 00:00:00 2001
From: LiaoYijun <lyj@hainatravel.com>
Date: Mon, 9 Jun 2025 16:27:58 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=82=AE=E4=BB=B6=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=88=86=E9=A1=B5=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/orders/components/MailBox.jsx | 69 +++++++++++++++++++++++--
 1 file changed, 64 insertions(+), 5 deletions(-)

diff --git a/src/views/orders/components/MailBox.jsx b/src/views/orders/components/MailBox.jsx
index cd2aa6f..5f970c5 100644
--- a/src/views/orders/components/MailBox.jsx
+++ b/src/views/orders/components/MailBox.jsx
@@ -5,8 +5,12 @@ import dayjs from 'dayjs'
 import { useEmailList } from '@/hooks/useEmail';
 import { isEmpty } from '@/utils/commons';
 import { MailboxDirIcon } from './MailboxDirIcon'
+import { endWith } from 'rxjs';
 
 const { RangePicker } = DatePicker
+
+const PAGE_SIZE = 50; // 每页显示条数
+
 const MailBox = ({ mailboxDir, onMailItemClick, ...props}) => {
   const DATE_RANGE_PRESETS = [
     {
@@ -37,7 +41,56 @@ const MailBox = ({ mailboxDir, onMailItemClick, ...props}) => {
   const [form] = Form.useForm()
 
   const { mailList, isLoading, error } = useEmailList(mailboxDir);
-  const pagedList = mailList.length === 0 ? [] : mailList.slice(0, 50)
+
+   const [pagination, setPagination] = useState({
+    current: 1,
+    pageSize: PAGE_SIZE,
+    total: 0,
+    pagedList: []
+  });
+
+  useEffect(() => {
+    if (mailList) {
+      const total = mailList.length;
+      const pageCount = Math.ceil(total / PAGE_SIZE);
+
+      setPagination(prev => ({
+        ...prev,
+        total,
+        pageCount,
+        current: 1, // 重置到第一页
+        pagedList: getPagedData(mailList, 1)
+      }));
+    }
+  }, [mailList]);
+
+  const getPagedData = (data, currentPage) => {
+    const startIndex = (currentPage - 1) * PAGE_SIZE;
+    const endIndex = Math.min(startIndex + PAGE_SIZE, data.length);
+    return data.slice(startIndex, endIndex);
+  };
+
+  const prePage = () => {
+    if (pagination.current > 1) {
+      const newCurrent = pagination.current - 1;
+      setPagination(prev => ({
+        ...prev,
+        current: newCurrent,
+        pagedList: getPagedData(mailList, newCurrent)
+      }));
+    }
+  };
+
+  const nextPage = () => {
+    if (pagination.current < Math.ceil(pagination.total / PAGE_SIZE)) {
+      const newCurrent = pagination.current + 1;
+      setPagination(prev => ({
+        ...prev,
+        current: newCurrent,
+        pagedList: getPagedData(mailList, newCurrent)
+      }));
+    }
+  };
 
   console.info('props.breadcrumb: ', props.breadcrumb)
   console.info('props.mailboxDir: ', mailboxDir)
@@ -183,16 +236,22 @@ const MailBox = ({ mailboxDir, onMailItemClick, ...props}) => {
                 })}
             />
             <Flex align="center" justify="space-between">
-              <span>1-50 of {mailList.length}</span>
-            <Button icon={<LeftOutlined />} type="text" iconPosition={'end'}></Button>
-            <Button icon={<RightOutlined />} type="text" iconPosition={'end'}></Button>
+               <span>
+          {((pagination.current - 1) * PAGE_SIZE + 1)}-{Math.min(pagination.current * PAGE_SIZE, pagination.total)} of {pagination.total}
+        </span>
+            <Button icon={<LeftOutlined />} type="text" onClick={() => {
+              prePage()
+            }} iconPosition={'end'}></Button>
+            <Button icon={<RightOutlined />} type="text" onClick={() => {
+              nextPage()
+            }} iconPosition={'end'}></Button>
             </Flex>
 
           </Flex>
           }
           itemLayout='vertical'
           pagination={false}
-          dataSource={pagedList}
+          dataSource={pagination.pagedList}
           renderItem={mailItemRender}
         />
       </div>