feat(orchestration): 添加组件信息展示功能

src/pages/orchestration/appCompComponent/compInfo.tsx

@@ -4,6 +4,8 @@ import { Space, Divider, Table, TableColumnProps } from '@arco-design/web-react'
 
 const CompInfo = ({ currentCompInfo }) => {
 
+  console.log('currentCompInfo:', currentCompInfo);
+
   const columns: TableColumnProps[] = [
     {
       title: '参数名',
@@ -43,11 +45,41 @@ const CompInfo = ({ currentCompInfo }) => {
     );
   };
 
+  // 渲染组件外壳
+  const renderCompHousing = () => {
+    return (
+      <div className={styles['comp-housing']}>
+        <div className={styles['comp-housing-header']}>
+          <div className={styles['comp-housing-title']}>{currentCompInfo.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>
+        </div>
+      </div>
+    );
+  };
+
   return (
     currentCompInfo ? (<div className={styles['comp-container']}>
       <div className={styles['comp-preview']}>
         <h3>组件预览</h3>
-        <div className={styles['comp-housing']}></div>
+        {renderCompHousing()}
       </div>
       <div className={styles['comp-info']}>
         <div className={styles['header']}>

src/pages/orchestration/appCompComponent/style/compInfo.module.less

@@ -22,11 +22,40 @@
       border: 1px solid #CCCCCC;
       border-top-left-radius: 6px;
       border-top-right-radius: 6px;
+      overflow: hidden;
+
+      .comp-housing-header {
+        background-color: #ffa100;
+        color: #ffffff;
+        padding: 5px 10px;
+      }
+
+      .comp-housing-content {
+        .comp-housing-content-api,
+        .comp-housing-content-data {
+          display: flex;
+          padding: 5px;
+
+          .comp-housing-content-api-in,
+          .comp-housing-content-api-out,
+          .comp-housing-content-data-in,
+          .comp-housing-content-data-out {
+            flex: 1;
+          }
+
+          .comp-housing-content-api-out,
+          .comp-housing-content-data-out {
+            text-align: right;
+          }
+        }
+      }
+
     }
   }
 
   .comp-info {
     flex: 1;
+
     .header {
       .title {
         font-size: 22px;