feat(componentLibrary): 组件库信息从登录后获取的组件列表中获取

- 从sessionStorage获取对应用户的组件库列表

src/pages/componentLibrary/collapseBox.tsx

@@ -9,20 +9,14 @@ const Col = Grid.Col;
 
 interface CollapseBoxProps {
   componentType: string;
+  data: any;
 }
 
-const CollapseBox: React.FC<CollapseBoxProps> = ({ componentType }) => {
-  const [collapseData, setCollapseData] = useState([]);
-
-  useEffect(() => {
-    const data = getLocalStorageData('componentsData')[`${componentType}`];
-    setCollapseData(data);
-  }, [componentType]);
-
+const CollapseBox: React.FC<CollapseBoxProps> = ({ componentType, data }) => {
   return (
     <>
       <Collapse>
-        {collapseData.map((v, i) => {
+        {data.map((v, i) => {
           return (
             <CollapseItem
               key={i}

src/pages/componentLibrary/compNode.tsx

@@ -27,7 +27,7 @@ const CompNode: React.FC<CompNodeProps> = ({ nodeData }) => {
           {/*节点api相关的输入输出*/}
           <div className={styles['comp-node-api']}>
             <div className={styles['api-in']}>
-              {nodeData.apis.map((v, i) => {
+              {nodeData.def?.apis.map((v, i) => {
                 return (
                   <div key={i} className={styles['flex-box']}>
                     <div className={styles['right-arrow']}></div>
@@ -38,7 +38,7 @@ const CompNode: React.FC<CompNodeProps> = ({ nodeData }) => {
             </div>
             <div className={styles['api-out']}>
               <div className={styles['flex-box']}>
-                <div style={{ marginRight: 5 }}>{nodeData.apiOut.id}</div>
+                <div style={{ marginRight: 5 }}>{nodeData.def?.apiOut.id}</div>
                 <div className={styles['right-arrow']}></div>
               </div>
             </div>
@@ -47,7 +47,7 @@ const CompNode: React.FC<CompNodeProps> = ({ nodeData }) => {
           {/*节点data相关的输入输出*/}
           <div className={styles['comp-node-data']}>
             <div className={styles['data-in']}>
-              {nodeData.dataIns.map((v, i) => {
+              {nodeData.def?.dataIns.map((v, i) => {
                 return (
                   <div key={i} className={styles['flex-box']}>
                     <div className={styles['rectangular']}></div>
@@ -57,7 +57,7 @@ const CompNode: React.FC<CompNodeProps> = ({ nodeData }) => {
               })}
             </div>
             <div className={styles['data-out']}>
-              {nodeData.dataOuts.map((v, i) => {
+              {nodeData.def?.dataOuts.map((v, i) => {
                 return (
                   <div key={i} className={styles['flex-box']}>
                     <div style={{ marginRight: 5 }}>{v.id} {formatDataType(v.dataType)}</div>

src/pages/componentLibrary/index.tsx

@@ -8,6 +8,8 @@ const InputSearch = Input.Search;
 const TabPane = Tabs.TabPane;
 
 function ComponentLibrary() {
+  const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}');
+  const componentData = JSON.parse(sessionStorage.getItem(`compLibs${userInfo.userId}`));
   return (
     <>
       <div className={styles['comp-library-container']}>
@@ -26,12 +28,12 @@ function ComponentLibrary() {
                 <span>
                   <span>我的组件</span>
                   <Tag color="arcoblue">
-                    216
+                    {componentData.myLibs.length}
                   </Tag>
                 </span>
               }
             >
-              <CollapseBox componentType="myLibs" />
+              <CollapseBox componentType="myLibs" data={componentData.myLibs} />
             </TabPane>
             <TabPane
               key="2"
@@ -39,11 +41,11 @@ function ComponentLibrary() {
                 <span>
                   <span>公开组件</span>
                   <Tag color="arcoblue">
-                    31
+                    {componentData.pubLibs.length}
                   </Tag>
                 </span>
               }>
-              <CollapseBox componentType="pubLibs" />
+              <CollapseBox componentType="pubLibs" data={componentData.pubLibs} />
             </TabPane>
             <TabPane
               key="3"
@@ -51,12 +53,12 @@ function ComponentLibrary() {
                 <span>
                   <span>协同组件</span>
                   <Tag color="arcoblue">
-                    0
+                    {componentData.teamLibs.length}
                   </Tag>
                 </span>
               }
             >
-              <CollapseBox componentType="teamLibs" />
+              <CollapseBox componentType="teamLibs" data={componentData.teamLibs} />
             </TabPane>
           </Tabs>
         </CustomCard>