🌐 feat: implement left-right pagination layout with i18n support
- Add left-right pagination layout for desktop (total info on left, controls on right) - Keep mobile layout centered with pagination controls only - Implement proper i18n support for pagination text using react-i18next - Add pagination translations for Chinese and English - Standardize t function usage across all table components to use xxxData.t pattern - Update CardPro footer layout to support justify-between on desktop - Use CSS variable --semi-color-text-2 for consistent text styling - Disable built-in Pagination showTotal to avoid duplication Components updated: - CardPro: Enhanced footer layout with responsive design - createCardProPagination: Added i18n support and custom total text - All table components: Unified t function usage pattern - i18n files: Added pagination-related translations The pagination now displays "Showing X to Y of Z items" on desktop and maintains existing centered layout on mobile devices.
This commit is contained in:
@@ -580,21 +580,39 @@ export const createCardProPagination = ({
|
||||
isMobile = false,
|
||||
pageSizeOpts = [10, 20, 50, 100],
|
||||
showSizeChanger = true,
|
||||
t = (key) => key,
|
||||
}) => {
|
||||
if (!total || total <= 0) return null;
|
||||
|
||||
const start = (currentPage - 1) * pageSize + 1;
|
||||
const end = Math.min(currentPage * pageSize, total);
|
||||
const totalText = `${t('显示第')} ${start} ${t('条 - 第')} ${end} ${t('条,共')} ${total} ${t('条')}`;
|
||||
|
||||
return (
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
pageSize={pageSize}
|
||||
total={total}
|
||||
pageSizeOpts={pageSizeOpts}
|
||||
showSizeChanger={showSizeChanger}
|
||||
onPageSizeChange={onPageSizeChange}
|
||||
onPageChange={onPageChange}
|
||||
size={isMobile ? "small" : "default"}
|
||||
showQuickJumper={isMobile}
|
||||
showTotal
|
||||
/>
|
||||
<>
|
||||
{/* 桌面端左侧总数信息 */}
|
||||
{!isMobile && (
|
||||
<span
|
||||
className="text-sm select-none"
|
||||
style={{ color: 'var(--semi-color-text-2)' }}
|
||||
>
|
||||
{totalText}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* 右侧分页控件 */}
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
pageSize={pageSize}
|
||||
total={total}
|
||||
pageSizeOpts={pageSizeOpts}
|
||||
showSizeChanger={showSizeChanger}
|
||||
onPageSizeChange={onPageSizeChange}
|
||||
onPageChange={onPageChange}
|
||||
size={isMobile ? "small" : "default"}
|
||||
showQuickJumper={isMobile}
|
||||
showTotal
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user