feat: improve layout and pagination handling in MultiKeyManageModal

5e47da1a · CaIon · 808c8c5b · 5e47da1a
Commit 5e47da1a authored Aug 04, 2025 by CaIon
Hide whitespace changes
Inline Side-by-side

Showing with 81 additions and 70 deletions

web/src/components/table/channels/modals/MultiKeyManageModal.jsx
+81 -70

No files found.
--- a/web/src/components/table/channels/modals/MultiKeyManageModal.jsx
+++ b/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,75 +500,87 @@ const MultiKeyManageModal = ({
        </div>
        {/* Key Status Table */}
-        <Spin spinning={loading}>
+        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
-          {keyStatusList.length > 0 ? (
+          <Spin spinning={loading}>
-            <>
+            {keyStatusList.length > 0 ? (
-              <Table
+              <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-                columns={columns}
+                <div style={{ flex: 1, overflow: 'auto', marginBottom: '16px' }}>
-                dataSource={keyStatusList}
+                  <Table
-                pagination={false}
+                    columns={columns}
-                size='small'
+                    dataSource={keyStatusList}
-                bordered
+                    pagination={false}
-                rowKey='index'
+                    size='small'
-                style={{ marginBottom: '16px' }}
+                    bordered
-              />
+                    rowKey='index'
+                    scroll={{ y: 'calc(100vh - 400px)' }}
-              {/* Pagination */}
+                  />
-              {total > 0 && (
+                </div>
-                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                  <Text type='quaternary' style={{ fontSize: '12px' }}>
+                {/* Pagination */}
-                    {t('显示第 {{start}}-{{end}} 条，共 {{total}} 条', {
+                {total > 0 && (
-                      start: (currentPage - 1) * pageSize + 1,
+                  <div style={{ 
-                      end: Math.min(currentPage * pageSize, total),
+                    display: 'flex', 
-                      total: total
+                    justifyContent: 'space-between', 
-                    })}
+                    alignItems: 'center',
-                  </Text>
+                    flexShrink: 0,
+                    padding: '12px 0',
-                  <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                    borderTop: '1px solid var(--semi-color-border)',
+                    backgroundColor: 'var(--semi-color-bg-1)'
+                  }}>
                    <Text type='quaternary' style={{ fontSize: '12px' }}>
-                      {t('每页显示')}:
+                      {t('显示第 {{start}}-{{end}} 条，共 {{total}} 条', {
+                        start: (currentPage - 1) * pageSize + 1,
+                        end: Math.min(currentPage * pageSize, total),
+                        total: total
+                      })}
                    </Text>
-                    <Select
-                      value={pageSize}
-                      onChange={handlePageSizeChange}
-                      size='small'
-                      style={{ width: '80px' }}
-                    >
-                      <Select.Option value={50}>50</Select.Option>
-                      <Select.Option value={100}>100</Select.Option>
-                      <Select.Option value={500}>500</Select.Option>
-                      <Select.Option value={1000}>1000</Select.Option>
-                    </Select>
-                    <Pagination
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-                      current={currentPage}
+                      <Text type='quaternary' style={{ fontSize: '12px' }}>
-                      total={total}
+                        {t('每页显示')}:
-                      pageSize={pageSize}
+                      </Text>
-                      showSizeChanger={false}
+                      <Select
-                      showQuickJumper
+                        value={pageSize}
-                      size='small'
+                        onChange={handlePageSizeChange}
-                      onChange={handlePageChange}
+                        size='small'
-                      showTotal={(total, range) => 
+                        style={{ width: '80px' }}
-                        t('第 {{current}} / {{total}} 页', {
+                      >
-                          current: currentPage,
+                        <Select.Option value={50}>50</Select.Option>
-                          total: totalPages
+                        <Select.Option value={100}>100</Select.Option>
-                        })
+                        <Select.Option value={500}>500</Select.Option>
-                      }
+                        <Select.Option value={1000}>1000</Select.Option>
-                    />
+                      </Select>
+                      <Pagination
+                        current={currentPage}
+                        total={total}
+                        pageSize={pageSize}
+                        showSizeChanger={false}
+                        showQuickJumper
+                        size='small'
+                        onChange={handlePageChange}
+                        showTotal={(total, range) => 
+                          t('第 {{current}} / {{total}} 页', {
+                            current: currentPage,
+                            total: totalPages
+                          })
+                        }
+                      />
+                    </div>
                  </div>
-                </div>
+                )}
-              )}
+              </div>
-            </>
+            ) : (
-          ) : (
+              !loading && (
-            !loading && (
+                <Empty
-              <Empty
+                  image={Empty.PRESENTED_IMAGE_SIMPLE}
-                image={Empty.PRESENTED_IMAGE_SIMPLE}
+                  title={t('暂无密钥数据')}
-                title={t('暂无密钥数据')}
+                  description={t('请检查渠道配置或刷新重试')}
-                description={t('请检查渠道配置或刷新重试')}
+                />
-              />
+              )
-            )
+            )}
-          )}
+          </Spin>
-        </Spin>
+        </div>
      </div>
    </Modal>
  );