feat(appCompComponent): 增加复合组件外壳渲染，增加复合组件数据渲染

src/pages/orchestration/appCompComponent/compInfo.tsx

@@ -26,7 +26,7 @@ const CompInfo = ({ currentCompInfo }) => {
         <h3>输入参数</h3>
         <Table
           columns={columns}
-          data={currentCompInfo.def?.dataIns}
+          data={currentCompInfo.def?.dataIns || currentCompInfo.flowHousVO?.dataIns}
           pagination={false}
           scroll={{
             y: 150
@@ -34,7 +34,7 @@ const CompInfo = ({ currentCompInfo }) => {
         <h3>输出参数</h3>
         <Table
           columns={columns}
-          data={currentCompInfo.def?.dataOuts}
+          data={currentCompInfo.def?.dataOuts || currentCompInfo.flowHousVO?.dataIns}
           pagination={false}
           scroll={{
             y: 150
@@ -48,26 +48,50 @@ const CompInfo = ({ currentCompInfo }) => {
     return (
       <div className={styles['comp-housing']}>
         <div className={styles['comp-housing-header']}>
-          <div className={styles['comp-housing-title']}>{currentCompInfo.name}</div>
+          <div className={styles['comp-housing-title']}>{currentCompInfo.name || currentCompInfo?.main?.name}</div>
         </div>
         <div className={styles['comp-housing-content']}>
-          <div className={styles['comp-housing-content-api']}>
-            <div className={styles['comp-housing-content-api-in']}>
-              {currentCompInfo.def?.apis.map((item: any, index) => <div key={index}>{item.id}</div>)}
-            </div>
-            <div className={styles['comp-housing-content-api-out']}>
-              <div>{currentCompInfo.def?.apiOut.id}</div>
-            </div>
-          </div>
-          <Divider style={{ marginTop: 10, marginBottom: 10 }} />
-          <div className={styles['comp-housing-content-data']}>
-            <div className={styles['comp-housing-content-data-in']}>
-              {currentCompInfo.def?.dataIns.map((item: any, index) => <div key={index}>{item.id}</div>)}
-            </div>
-            <div className={styles['comp-housing-content-data-out']}>
-              {currentCompInfo.def?.dataOuts.map((item: any, index) => <div key={index}>{item.id}</div>)}
-            </div>
-          </div>
+          {currentCompInfo.def ? (
+            <>
+              <div className={styles['comp-housing-content-api']}>
+                <div className={styles['comp-housing-content-api-in']}>
+                  {currentCompInfo.def?.apis?.map((item: any, index) => <div key={index}>{item.id}</div>)}
+                </div>
+                <div className={styles['comp-housing-content-api-out']}>
+                  <div>{currentCompInfo.def?.apiOut?.id}</div>
+                </div>
+              </div>
+              <Divider style={{ marginTop: 10, marginBottom: 10 }} />
+              <div className={styles['comp-housing-content-data']}>
+                <div className={styles['comp-housing-content-data-in']}>
+                  {currentCompInfo.def?.dataIns?.map((item: any, index) => <div key={index}>{item.id}</div>)}
+                </div>
+                <div className={styles['comp-housing-content-data-out']}>
+                  {currentCompInfo.def?.dataOuts?.map((item: any, index) => <div key={index}>{item.id}</div>)}
+                </div>
+              </div>
+            </>
+          ) : (
+            <>
+              <div className={styles['comp-housing-content-api']}>
+                <div className={styles['comp-housing-content-api-in']}>
+                  <div>contour</div>
+                </div>
+                <div className={styles['comp-housing-content-api-out']}>
+                  <div>done</div>
+                </div>
+              </div>
+              <Divider style={{ marginTop: 10, marginBottom: 10 }} />
+              <div className={styles['comp-housing-content-data']}>
+                <div className={styles['comp-housing-content-data-in']}>
+                  {currentCompInfo.flowHousVO?.dataIns?.map((item: any, index) => <div key={index}>{item.id}</div>)}
+                </div>
+                <div className={styles['comp-housing-content-data-out']}>
+                  {currentCompInfo.flowHousVO?.dataOuts?.map((item: any, index) => <div key={index}>{item.id}</div>)}
+                </div>
+              </div>
+            </>
+          )}
         </div>
       </div>
     );
@@ -82,7 +106,7 @@ const CompInfo = ({ currentCompInfo }) => {
       <div className={styles['comp-info']}>
         <div className={styles['header']}>
           <Space size={40}>
-            <div className={styles['title']}>{currentCompInfo.name}</div>
+            <div className={styles['title']}>{currentCompInfo.name || currentCompInfo?.main?.name}</div>
           </Space>
         </div>
         <Divider style={{ borderColor: '#5484ff', marginTop: 0, marginBottom: 30 }} />

src/pages/orchestration/appCompComponent/sideBar.tsx

@@ -51,7 +51,7 @@ const SideBar = ({ compList, onSelect }) => {
         return (<TreeNode
           {...treeNodeProps}
           key={`${parentKey}-${index}`}
-          title={item.name}
+          title={item.name || item?.main?.name}
           icon={<img src={'/ideContainer/icon/compItem.png'} style={{ width: 17, height: 17 }} />}
         />);
       });