feat(ide): 优化运行时数据表格展示

src/pages/ideContainer/components/runTimeData.tsx

@@ -9,41 +9,47 @@ const TabPane = Tabs.TabPane;
 const columns: TableColumnProps[] = [
   {
     title: '节点',
-    dataIndex: 'name'
+    dataIndex: 'name',
+    width: 120
   },
   {
     title: '时间',
+    width: 160,
     render: (_: any, record) => (
       <>
-        <span>开始{dayjs(record.startTime).format('YYYY-MM-DD HH:mm:ss')}</span>
+        <span>开始 {dayjs(record.startTime).format('MM-DD HH:mm:ss')}</span>
         <br></br>
-        {record.endTime > 0 && <span>结束{dayjs(record.endTime).format('YYYY-MM-DD HH:mm:ss')}</span>}
+        {record.endTime > 0 && <span>结束 {dayjs(record.endTime).format('MM-DD HH:mm:ss')}</span>}
       </>
     )
   },
   {
     title: '耗时',
     dataIndex: 'duration',
+    width: 80,
     render: (_: any, record) => (
       record.duration > 1000 ?
         <span>{formatSeconds((record.duration / 1000).toString())}</span> :
-        <span>{record.duration}毫秒</span>
+        <span>{record.duration}ms</span>
     )
   },
   {
     title: '状态',
     dataIndex: 'state',
+    width: 60,
+    align: 'center',
     render: (_: any, record) => (
       <>
-        {record.state === 1 && <IconCheckCircleFill fontSize={30} style={{ color: 'rgb(var(--green-6))' }} />}
+        {record.state === 1 && <IconCheckCircleFill fontSize={24} style={{ color: 'rgb(var(--green-6))' }} />}
-        {record.state === 0 && <IconLoading fontSize={30} style={{ color: 'rgb(var(--arcoblue-4))' }} />}
+        {record.state === 0 && <IconLoading fontSize={24} style={{ color: 'rgb(var(--arcoblue-4))' }} />}
-        {record.state === -1 && <IconCloseCircleFill fontSize={30} style={{ color: 'rgb(var(--red-6))' }} />}
+        {record.state === -1 && <IconCloseCircleFill fontSize={24} style={{ color: 'rgb(var(--red-6))' }} />}
       </>
     )
   },
   {
     title: '输入参数',
     dataIndex: 'input',
+    ellipsis: true,
     render: (_: any, record) => (
       <span>{JSON.stringify(record.input)}</span>
     )
@@ -51,6 +57,7 @@ const columns: TableColumnProps[] = [
   {
     title: '输出参数',
     dataIndex: 'output',
+    ellipsis: true,
     render: (_: any, record) => (
       <span>{JSON.stringify(record.output)}</span>
     )
@@ -89,12 +96,12 @@ const RunTimeData = ({ logData }) => {
   }, [tabList]);
 
   return (
-    <>
+    <div style={{ paddingRight: 16 }}>
       <Tabs type="card" onChange={onTabChange} activeTab={currentTab}>
         {tabList.map((item) => (<TabPane key={item.key} title={item.title}></TabPane>))}
       </Tabs>
-      <Table columns={columns} data={data} />
+      <Table columns={columns} data={data} tableLayoutFixed scroll={{ x: 'max-content' }} />
-    </>
+    </div>
   );
 };