feat: improve layout and pagination handling in MultiKeyManageModal

web/src/components/table/channels/modals/MultiKeyManageModal.jsx

@@ -395,8 +395,7 @@ const MultiKeyManageModal = ({
       }
       visible={visible}
       onCancel={onCancel}
-      width={800}
+      width={900}
-      height={600}
       footer={
         <Space>
           <Button onClick={onCancel}>{t('关闭')}</Button>
@@ -452,11 +451,11 @@ const MultiKeyManageModal = ({
         </Space>
       }
     >
-      <div style={{ padding: '16px 0' }}>
+      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
         {/* Statistics Banner */}
         <Banner
           type='info'
-          style={{ marginBottom: '16px' }}
+          style={{ marginBottom: '16px', flexShrink: 0 }}
           description={
             <div>
               <Text>
@@ -479,7 +478,7 @@ const MultiKeyManageModal = ({
         />
 
         {/* Filter Controls */}
-        <div style={{ marginBottom: '16px', display: 'flex', alignItems: 'center', gap: '12px' }}>
+        <div style={{ marginBottom: '16px', display: 'flex', alignItems: 'center', gap: '12px', flexShrink: 0 }}>
           <Text style={{ fontSize: '14px', fontWeight: '500' }}>{t('状态筛选')}:</Text>
           <Select
             value={statusFilter}
@@ -501,9 +500,11 @@ const MultiKeyManageModal = ({
         </div>
 
         {/* Key Status Table */}
+        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
           <Spin spinning={loading}>
             {keyStatusList.length > 0 ? (
-            <>
+              <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+                <div style={{ flex: 1, overflow: 'auto', marginBottom: '16px' }}>
                   <Table
                     columns={columns}
                     dataSource={keyStatusList}
@@ -511,12 +512,21 @@ const MultiKeyManageModal = ({
                     size='small'
                     bordered
                     rowKey='index'
-                style={{ marginBottom: '16px' }}
+                    scroll={{ y: 'calc(100vh - 400px)' }}
                   />
+                </div>
                 
                 {/* Pagination */}
                 {total > 0 && (
-                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <div style={{ 
+                    display: 'flex', 
+                    justifyContent: 'space-between', 
+                    alignItems: 'center',
+                    flexShrink: 0,
+                    padding: '12px 0',
+                    borderTop: '1px solid var(--semi-color-border)',
+                    backgroundColor: 'var(--semi-color-bg-1)'
+                  }}>
                     <Text type='quaternary' style={{ fontSize: '12px' }}>
                       {t('显示第 {{start}}-{{end}} 条，共 {{total}} 条', {
                         start: (currentPage - 1) * pageSize + 1,
@@ -559,7 +569,7 @@ const MultiKeyManageModal = ({
                     </div>
                   </div>
                 )}
-            </>
+              </div>
             ) : (
               !loading && (
                 <Empty
@@ -571,6 +581,7 @@ const MultiKeyManageModal = ({
             )}
           </Spin>
         </div>
+      </div>
     </Modal>
   );
 };