feat(componentDeployment): 添加分页功能支持组件列表分页加载

src/pages/componentDevelopment/componentDeployment/collapseList.tsx

@@ -1,5 +1,16 @@
 import React, { useEffect, useState } from 'react';
-import { Collapse, Space, Tag, Button, Table, TableColumnProps, Modal, Dropdown, Menu } from '@arco-design/web-react';
+import {
+  Collapse,
+  Space,
+  Tag,
+  Button,
+  Table,
+  TableColumnProps,
+  Modal,
+  Dropdown,
+  Menu,
+  Pagination
+} from '@arco-design/web-react';
 import { IconDown, IconToBottom, IconEye } from '@arco-design/web-react/icon';
 import styles from './style/collapseList.module.less';
 import ListNode from '@/pages/componentDevelopment/componentDeployment/listNode';
@@ -22,11 +33,16 @@ const CollapseList: React.FC<CollapseListProps> = ({ searchKeyword, runStatus })
   const [expandedItem, setExpandedItem] = useState(null); // 当前展开的折叠面板数据
   const [addItem, setAddItem] = useState(null); // 点击新增实例按钮时记录当前信息
 
+  // 分页相关状态
+  const [current, setCurrent] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [total, setTotal] = useState(0);
+
   // 获取组件列表
-  const getList = async () => {
+  const getList = async (page = current, size = pageSize) => {
     const params: any = {
-      current: 1,
+      current: page,
-      size: 10
+      size: size
     };
 
     // 添加搜索关键词
@@ -40,7 +56,17 @@ const CollapseList: React.FC<CollapseListProps> = ({ searchKeyword, runStatus })
     }
 
     const res: any = await getDeployList(params);
-    if (res.code === 200) setCollapses(res.data.records.reverse());
+    if (res.code === 200) {
+      setCollapses(res.data.records.reverse());
+      setTotal(res.data.total);
+    }
+  };
+
+  // 分页变化处理
+  const handlePageChange = (page: number, size: number) => {
+    setCurrent(page);
+    setPageSize(size);
+    getList(page, size);
   };
 
   // 上架组件
@@ -93,7 +119,8 @@ const CollapseList: React.FC<CollapseListProps> = ({ searchKeyword, runStatus })
 
 
   useEffect(() => {
-    getList();
+    setCurrent(1); // 搜索条件变化时重置到第一页
+    getList(1, pageSize);
   }, [searchKeyword, runStatus]);
 
   // 折叠面板头部
@@ -218,6 +245,20 @@ const CollapseList: React.FC<CollapseListProps> = ({ searchKeyword, runStatus })
             </CollapseItem>
           ))}
         </Collapse>
+
+        {/* 分页组件 */}
+        {total > 0 && (
+          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 16 }}>
+            <Pagination
+              current={current}
+              pageSize={pageSize}
+              total={total}
+              // showTotal
+              pageSizeChangeResetCurrent
+              onChange={(page) => handlePageChange(page, pageSize)}
+            />
+          </div>
+        )}
       </div>
 
       <AddModal