feat(component-env): 优化组件环境列表展示和交互

src/pages/componentDevelopment/componentEnv/index.tsx

@@ -11,7 +11,8 @@ import {
   Message,
   Modal,
   Notification,
-  Tag
+  Tag,
+  Tooltip
 } from '@arco-design/web-react';
 import { getComponentClassify } from '@/api/componentClassify';
 import { IconSearch } from '@arco-design/web-react/icon';
@@ -59,10 +60,6 @@ const ComponentEnv = () => {
       title: '环境别名',
       dataIndex: 'name'
     },
-    {
-      title: '备注',
-      dataIndex: 'description'
-    },
     {
       title: '实例数量',
       dataIndex: 'instanceCount'
@@ -113,10 +110,31 @@ const ComponentEnv = () => {
         </div>
       )
     },
+    {
+      title: '备注',
+      dataIndex: 'description',
+      width: 200,
+      ellipsis: true,
+      render: (text) => (
+        text ? (
+          <Tooltip content={text}>
+            <span style={{
+              display: 'block',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap'
+            }}>
+              {text}
+            </span>
+          </Tooltip>
+        ) : '-'
+      )
+    },
     {
       title: '操作',
-      width: 230,
+      width: 450,
       align: 'center',
+      fixed: 'right',
       render: (_, record: any) => (
         <Space>
           {record.isEnable === 'RUNNING' && (
@@ -416,7 +434,7 @@ const ComponentEnv = () => {
           </div>
         </div>
 
-        <Table columns={columns} data={data} />
+        <Table columns={columns} data={data} scroll={{ x: 1200 }} />
 
         <AddModal
           visible={visible}