From 7df26f5dd6a5ee1763c8aced57694d7d6ee28711 Mon Sep 17 00:00:00 2001
From: ZLY <zhongliangyuan@gdngsk.com>
Date: Fri, 26 Sep 2025 10:19:14 +0800
Subject: [PATCH] =?UTF-8?q?feat(compGrid):=20=E6=9B=B4=E6=96=B0=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E7=B1=BB=E5=9E=8B=E5=B9=B6=E6=94=AF=E6=8C=81=E5=88=86?=
 =?UTF-8?q?=E9=A1=B5=E6=95=B0=E6=8D=AE=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修改 componentType 类型定义
- 引入 getMyFlowList与 getPubFlowList 接口，实现远程数据获取
- 添加分页逻辑
---
 src/pages/compositeCompLibrary/compGrid.tsx | 44 ++++++++++++++++++---
 src/pages/compositeCompLibrary/index.tsx    | 22 ++++++++---
 2 files changed, 55 insertions(+), 11 deletions(-)

diff --git a/src/pages/compositeCompLibrary/compGrid.tsx b/src/pages/compositeCompLibrary/compGrid.tsx
index 4bebc0c..9ef5a54 100644
--- a/src/pages/compositeCompLibrary/compGrid.tsx
+++ b/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>
     </>
diff --git a/src/pages/compositeCompLibrary/index.tsx b/src/pages/compositeCompLibrary/index.tsx
index 1a3dc67..949c7fb 100644
--- a/src/pages/compositeCompLibrary/index.tsx
+++ b/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>