feat: 邮件列表增加分页功能

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>