From 3b0ab42b32e259e648819a90a23177245f63f662 Mon Sep 17 00:00:00 2001
From: ZLY <zhongliangyuan@gdngsk.com>
Date: Tue, 21 Oct 2025 11:57:55 +0800
Subject: [PATCH] =?UTF-8?q?feat(orchestration):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=BF=A1=E6=81=AF=E5=B1=95=E7=A4=BA=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../appCompComponent/compInfo.tsx             | 34 ++++++++++++++++++-
 .../style/compInfo.module.less                | 29 ++++++++++++++++
 2 files changed, 62 insertions(+), 1 deletion(-)

diff --git a/src/pages/orchestration/appCompComponent/compInfo.tsx b/src/pages/orchestration/appCompComponent/compInfo.tsx
index 17db4ad..87678b6 100644
--- a/src/pages/orchestration/appCompComponent/compInfo.tsx
+++ b/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']}>
diff --git a/src/pages/orchestration/appCompComponent/style/compInfo.module.less b/src/pages/orchestration/appCompComponent/style/compInfo.module.less
index d051f4b..b08f6e0 100644
--- a/src/pages/orchestration/appCompComponent/style/compInfo.module.less
+++ b/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;