style(componentList): 优化组件列表页面布局和表格展示

src/pages/componentDevelopment/componentList/index.tsx

@@ -147,6 +147,8 @@ const GlobalVarContainer = () => {
     {
       title: '操作',
       dataIndex: 'operations',
+      fixed: 'right' as const,
+      width: 400,
       render: (_, record, index) => (
         <HandleButtonGroup
           row={record}
@@ -596,8 +598,13 @@ const GlobalVarContainer = () => {
               data={componentData}
               loading={loading}
               pagination={false}
+              scroll={{ x: 1500, y: 'calc(100vh - 280px)' }}
+              border={{
+                wrapper: true,
+                cell: true
+              }}
             />
-            <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 16 }}>
+            <div className={styles['pagination-container']}>
               <Pagination
                 current={pagination.currPage}
                 pageSize={pagination.pageSize}

src/pages/componentDevelopment/componentList/style/index.module.less

@@ -31,11 +31,15 @@
   .comp-list-content {
     flex: 8;
     padding: 0 0 0 40px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
 
     .comp-list-header {
       display: flex;
       justify-content: space-between;
       margin-bottom: 15px;
+      flex-shrink: 0;
 
       .comp-list-title {
         font-size: 18px;
@@ -47,7 +51,43 @@
     }
 
     .comp-list-list {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+
+      // 表格容器样式
+      :global {
+        .arco-table-container {
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+        }
+
+        .arco-table {
+          flex: 1;
+          overflow: auto;
+        }
+
+        // 固定列样式优化
+        .arco-table-cell-fixed-left,
+        .arco-table-cell-fixed-right {
+          background-color: #fff;
+          z-index: 2;
+        }
 
+        .arco-table-cell-fixed-right {
+          box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08);
+        }
+      }
+
+      .pagination-container {
+        display: flex;
+        justify-content: flex-end;
+        padding: 16px 0;
+        flex-shrink: 0;
+        border-top: 1px solid #E5E6EB;
+      }
     }
   }
 }