feat(compGrid): 更新组件类型并支持分页数据加载

- 修改 componentType 类型定义
- 引入 getMyFlowList与 getPubFlowList 接口，实现远程数据获取
- 添加分页逻辑

src/pages/compositeCompLibrary/compGrid.tsx

@@ -3,23 +3,49 @@ import styles from './style/compGrid.module.less';
 import CompNode from './compNode';
 import { complexData } from './test/tempData';
 import { Input, Grid, Pagination } from '@arco-design/web-react';
+import { getMyFlowList, getPubFlowList } from '@/api/flow';
 
 const InputSearch = Input.Search;
 const Row = Grid.Row;
 const Col = Grid.Col;
 
 interface CompGridProps {
-  componentType: 'myComplex' | 'publicComplex';
+  componentType: 'minePage' | 'publicList';
 }
 
 const CompGrid: React.FC<CompGridProps> = ({ componentType }) => {
-  const [currentComponentType, setCurrentComponentType] = useState('');
   const [compData, setCompData] = useState([]);
+  const [paginationData, setPaginationData] = useState({ totalCount: 0, currPage: 1, pageSize: 11 });
   useEffect(() => {
-    setCurrentComponentType(componentType);
-    setCompData(complexData[`${componentType}`]);
+    if (componentType) getComponentData(componentType);
+
   }, [componentType]);
 
+  const getComponentData = async (key: 'minePage' | 'publicList') => {
+    const apiList = {
+      minePage: getMyFlowList,
+      publicList: getPubFlowList
+    };
+    const res: any = await apiList[key]({
+      currPage: paginationData.currPage,
+      pageSize: paginationData.pageSize
+    });
+
+    if (res.code === 200) {
+      setCompData(res.data.list);
+      setPaginationData({
+        totalCount: res.data.totalCount,
+        currPage: res.data.currPage,
+        pageSize: res.data.pageSize
+      });
+    }
+  };
+
+
+  useEffect(() => {
+    getComponentData(componentType);
+  }, [paginationData.currPage]);
+
   return (
     <>
       <div className={styles['comp-grid-container']}>
@@ -45,7 +71,15 @@ const CompGrid: React.FC<CompGridProps> = ({ componentType }) => {
           })}
         </Row>
         <div className={styles['comp-grid-footer']}>
-          <Pagination total={200} />
+          <Pagination
+            total={paginationData.totalCount + 200}
+            onChange={(number) => {
+              setPaginationData({
+                ...paginationData,
+                currPage: number
+              });
+            }}
+          />
         </div>
       </div>
     </>

src/pages/compositeCompLibrary/index.tsx

@@ -1,35 +1,45 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styles from './style/index.module.less';
 import CustomCard from '@/components/CustomCard/index';
 import { Tabs } from '@arco-design/web-react';
 import CompGrid from './compGrid';
+import { getPubFlowList, getMyFlowList } from '@/api/flow';
 
 const TabPane = Tabs.TabPane;
 
 function CompositeCompLibrary() {
+  const [activeKey, setActiveKey] = useState<'minePage' | 'publicList'>('minePage');
+
+  const handelChangeTabs = (key) => {
+    setActiveKey(key);
+  };
+
   return (
     <>
       <div className={styles['composite-comp-library-container']}>
         <CustomCard>
-          <Tabs defaultActiveTab="1">
+          <Tabs
+            defaultActiveTab={activeKey}
+            onChange={(e) => handelChangeTabs(e)}
+          >
             <TabPane
-              key="1"
+              key="minePage"
               title={
                 <span>
                   <span>我的复合组件</span>
                 </span>
               }
             >
-              <CompGrid componentType="myComplex" />
+              <CompGrid componentType="minePage" />
             </TabPane>
             <TabPane
-              key="2"
+              key="publicList"
               title={
                 <span>
                   <span>公开复合组件</span>
                 </span>
               }>
-              <CompGrid componentType="publicComplex" />
+              <CompGrid componentType="publicList" />
             </TabPane>
           </Tabs>
         </CustomCard>