style(orchestration): 优化事件页面布局和表格样式

src/pages/orchestration/event/index.tsx

@@ -157,35 +157,44 @@ const EventContainer = () => {
     {
       title: '序号',
       dataIndex: 'index',
+      width: 70,
       render: (_, record, index) => (
         <div>{index + 1}</div>
       )
     },
     {
       title: '事件名称',
-      dataIndex: 'name'
+      dataIndex: 'name',
+      width: 120
     },
     {
       title: '事件标识',
       dataIndex: 'topic',
+      width: 150,
       render: (_, record) => (
         <div>{record.topic.includes('/') ? record.topic.split('/')[0] : record.topic}</div>
       )
     },
     {
       title: '事件描述',
-      dataIndex: 'desc'
+      dataIndex: 'desc',
+      width: 200
     },
     {
       title: '订阅者',
       dataIndex: 'subscribers',
+      width: 180,
       render: (_, record) => {
         if (record?.subscribers && record?.subscribers.length > 0) {
-          return (<div>
-            {record?.subscribers.map((item, index) => (
-              <div key={index}>{item.appName}</div>
-            ))}
-          </div>);
+          return (
+            <div className={styles['cell-content']}>
+              {record?.subscribers.map((item, index) => (
+                <div key={index} className={styles['cell-item']} title={item.appName}>
+                  {item.appName}
+                </div>
+              ))}
+            </div>
+          );
         }
         else {
           return <div>-</div>;
@@ -195,13 +204,18 @@ const EventContainer = () => {
     {
       title: '发布者',
       dataIndex: 'publisher',
+      width: 180,
       render: (_, record) => {
         if (record?.publisher && record?.publisher.length > 0) {
-          return (<div>
-            {record?.publisher.map((item, index) => (
-              <div key={index}>{item.appName}</div>
-            ))}
-          </div>);
+          return (
+            <div className={styles['cell-content']}>
+              {record?.publisher.map((item, index) => (
+                <div key={index} className={styles['cell-item']} title={item.appName}>
+                  {item.appName}
+                </div>
+              ))}
+            </div>
+          );
         }
         else {
           return <div>-</div>;
@@ -211,6 +225,7 @@ const EventContainer = () => {
     {
       title: '操作',
       dataIndex: 'actions',
+      width: 80,
       render: (_, record) => (
         <Popconfirm
           focusLock
@@ -289,7 +304,12 @@ const EventContainer = () => {
       </div>
       {/*数据列表*/}
       <div className={styles['event-list']}>
-        <Table columns={columns} data={filteredEventData} pagination={false} />
+        <Table
+          columns={columns}
+          data={filteredEventData}
+          pagination={false}
+          scroll={{ y: 'calc(100vh - 220px)' }}
+        />
       </div>
 
       {visible &&

src/pages/orchestration/event/style/index.module.less

@@ -2,11 +2,15 @@
   background-color: #ffffff;
   padding: 17px 19px 0 24px;
   height: 98%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 
   .event-header {
     display: flex;
     justify-content: space-between;
     margin-bottom: 15px;
+    flex-shrink: 0;
 
     .event-title {
       font-size: 18px;
@@ -17,6 +21,21 @@
   }
 
   .event-list {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  // 单元格内容样式
+  .cell-content {
+    max-height: 100px;
+    overflow-y: auto;
+  }
 
+  .cell-item {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 160px;
+    line-height: 1.6;
   }
 }