oadmin/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve layout and pagination handling in MultiKeyManageModal

Browse Source
This commit is contained in:
CaIon
2025-08-04 20:16:51 +08:00
parent 12b4e80d4b
commit c00f5a17c8
1 changed files with 84 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
web/src/components/table/channels/modals/MultiKeyManageModal.jsx
View File

@@ -395,8 +395,7 @@ const MultiKeyManageModal = ({
} }
visible={visible} visible={visible}
onCancel={onCancel} onCancel={onCancel}
width={800} width={900}
height={600}
footer={ footer={
<Space> <Space>
<Button onClick={onCancel}>{t('关闭')}</Button> <Button onClick={onCancel}>{t('关闭')}</Button>
@@ -452,11 +451,11 @@ const MultiKeyManageModal = ({
</Space> </Space>
} }
> >
<div style={{ padding: '16px 0' }}> <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
{/* Statistics Banner */} {/* Statistics Banner */}
<Banner <Banner
type='info' type='info'
style={{ marginBottom: '16px' }} style={{ marginBottom: '16px', flexShrink: 0 }}
description={ description={
<div> <div>
<Text> <Text>
@@ -479,7 +478,7 @@ const MultiKeyManageModal = ({
/> />
{/* Filter Controls */} {/* 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> <Text style={{ fontSize: '14px', fontWeight: '500' }}>{t('状态筛选')}:</Text>
<Select <Select
value={statusFilter} value={statusFilter}
@@ -501,75 +500,87 @@ const MultiKeyManageModal = ({
</div> </div>
{/* Key Status Table */} {/* 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 style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<Text type='quaternary' style={{ fontSize: '12px' }}>
{t('显示第 {{start}}-{{end}} 条，共 {{total}} 条', {
start: (currentPage - 1) * pageSize + 1,
end: Math.min(currentPage * pageSize, total),
total: total
})}
</Text>
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
<Text type='quaternary' style={{ fontSize: '12px' }}>
{t('每页显示')}:
</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
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>
)}
</> {/* Pagination */}
) : ( {total > 0 && (
!loading && ( <div style={{
<Empty display: 'flex',
image={Empty.PRESENTED_IMAGE_SIMPLE} justifyContent: 'space-between',
title={t('暂无密钥数据')} alignItems: 'center',
description={t('请检查渠道配置或刷新重试')} flexShrink: 0,
/> padding: '12px 0',
) borderTop: '1px solid var(--semi-color-border)',
)} backgroundColor: 'var(--semi-color-bg-1)'
</Spin> }}>
<Text type='quaternary' style={{ fontSize: '12px' }}>
{t('显示第 {{start}}-{{end}} 条，共 {{total}} 条', {
start: (currentPage - 1) * pageSize + 1,
end: Math.min(currentPage * pageSize, total),
total: total
})}
</Text>
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
<Text type='quaternary' style={{ fontSize: '12px' }}>
{t('每页显示')}:
</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
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>
) : (
!loading && (
<Empty
image={Empty.PRESENTED_IMAGE_SIMPLE}
title={t('暂无密钥数据')}
description={t('请检查渠道配置或刷新重试')}
/>
)
)}
</Spin>
</div>
</div> </div>
</Modal> </Modal>
); );