refactor: move table pagination to CardPro footer for consistent layout

Implement unified pagination system by moving pagination from CardTable
to CardPro footer area, ensuring consistent visual layout across all
table pages.

## Changes Made

### Core Components
- **CardPro**: Add `paginationArea` prop to display pagination in card footer
- **CardTable**: Add `hidePagination` prop to control internal pagination visibility
- **utils.js**: Add `createCardProPagination` helper with responsive design
  - Mobile: small size + showQuickJumper + showTotal
  - Desktop: default size + showTotal only

### Table Pages Updated
- Users table (type1): Add external pagination control
- Channels table (type3): Move pagination to CardPro footer
- Tokens table (type1): Implement unified pagination layout
- Redemptions table (type1): Apply consistent pagination pattern
- Usage-logs table (type2): Migrate to external pagination
- MJ-logs table (type2): Update pagination configuration
- Task-logs table (type2): Standardize pagination approach

### Bug Fixes
- Fix CardTable desktop pagination visibility when hidePagination=true
- Standardize data access pattern across all table components
- Remove redundant data destructuring in users table for consistency

## Benefits
-  Consistent pagination position across all tables
-  Better visual hierarchy with fixed footer pagination
-  Responsive design optimized for mobile and desktop
-  Unified codebase with reusable pagination utility
-  Backward compatible with existing table functionality

## Files Modified
- `web/src/components/common/ui/CardPro.js`
- `web/src/components/common/ui/CardTable.js`
- `web/src/helpers/utils.js`
- `web/src/components/table/*/index.jsx` (7 tables)
- `web/src/components/table/*/*.jsx` (7 table components)
This commit is contained in:
t0ng7u
2025-07-20 02:27:33 +08:00
parent 252fddf3de
commit 818e34682c
17 changed files with 132 additions and 6 deletions

View File

@@ -30,7 +30,14 @@ import { useIsMobile } from '../../../hooks/common/useIsMobile';
* 在桌面端渲染 Semi-UI 的 Table 组件,在移动端则将每一行数据渲染成 Card 形式。
* 该组件与 Table 组件的大部分 API 保持一致,只需将原 Table 换成 CardTable 即可。
*/
const CardTable = ({ columns = [], dataSource = [], loading = false, rowKey = 'key', ...tableProps }) => {
const CardTable = ({
columns = [],
dataSource = [],
loading = false,
rowKey = 'key',
hidePagination = false, // 新增参数,控制是否隐藏内部分页
...tableProps
}) => {
const isMobile = useIsMobile();
const { t } = useTranslation();
@@ -62,13 +69,18 @@ const CardTable = ({ columns = [], dataSource = [], loading = false, rowKey = 'k
// 如果不是移动端,直接渲染原 Table
if (!isMobile) {
// 如果要隐藏分页则从tableProps中移除pagination
const finalTableProps = hidePagination
? { ...tableProps, pagination: false }
: tableProps;
return (
<Table
columns={columns}
dataSource={dataSource}
loading={loading}
rowKey={rowKey}
{...tableProps}
{...finalTableProps}
/>
);
}
@@ -215,8 +227,8 @@ const CardTable = ({ columns = [], dataSource = [], loading = false, rowKey = 'k
{dataSource.map((record, index) => (
<MobileRowCard key={getRowKey(record, index)} record={record} index={index} />
))}
{/* 分页组件 */}
{tableProps.pagination && dataSource.length > 0 && (
{/* 分页组件 - 只在不隐藏分页且有pagination配置时显示 */}
{!hidePagination && tableProps.pagination && dataSource.length > 0 && (
<div className="mt-2 flex justify-center">
<Pagination {...tableProps.pagination} />
</div>
@@ -230,6 +242,7 @@ CardTable.propTypes = {
dataSource: PropTypes.array,
loading: PropTypes.bool,
rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
hidePagination: PropTypes.bool, // 控制是否隐藏内部分页
};
export default CardTable;