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

✨ refactor: move table pagination to CardPro footer for consistent layout

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

1
web/src/components/table/channels/ChannelsTable.jsx
View File

@@ -129,6 +129,7 @@ const ChannelsTable = (channelsData) => {
onPageSizeChange: handlePageSizeChange,
onPageChange: handlePageChange,
}}
hidePagination={true}
expandAllRows={false}
onRow={handleRow}
rowSelection={

8
web/src/components/table/channels/index.jsx
View File

@@ -29,6 +29,7 @@ import ModelTestModal from './modals/ModelTestModal.jsx';
import ColumnSelectorModal from './modals/ColumnSelectorModal.jsx';
import EditChannelModal from './modals/EditChannelModal.jsx';
import EditTagModal from './modals/EditTagModal.jsx';
import { createCardProPagination } from '../../../helpers/utils';
const ChannelsPage = () => {
const channelsData = useChannelsData();
@@ -58,6 +59,13 @@ const ChannelsPage = () => {
tabsArea={<ChannelsTabs {...channelsData} />}
actionsArea={<ChannelsActions {...channelsData} />}
searchArea={<ChannelsFilters {...channelsData} />}
paginationArea={createCardProPagination({
currentPage: channelsData.activePage,
pageSize: channelsData.pageSize,
total: channelsData.channelCount,
onPageChange: channelsData.handlePageChange,
onPageSizeChange: channelsData.handlePageSizeChange,
})}
t={channelsData.t}
>
<ChannelsTable {...channelsData} />

1
web/src/components/table/mj-logs/MjLogsTable.jsx
View File

@@ -109,6 +109,7 @@ const MjLogsTable = (mjLogsData) => {
onPageSizeChange: handlePageSizeChange,
onPageChange: handlePageChange,
}}
hidePagination={true}
/>
);
};

8
web/src/components/table/mj-logs/index.jsx
View File

@@ -26,6 +26,7 @@ import MjLogsFilters from './MjLogsFilters.jsx';
import ColumnSelectorModal from './modals/ColumnSelectorModal.jsx';
import ContentModal from './modals/ContentModal.jsx';
import { useMjLogsData } from '../../../hooks/mj-logs/useMjLogsData.js';
import { createCardProPagination } from '../../../helpers/utils';
const MjLogsPage = () => {
const mjLogsData = useMjLogsData();
@@ -41,6 +42,13 @@ const MjLogsPage = () => {
type="type2"
statsArea={<MjLogsActions {...mjLogsData} />}
searchArea={<MjLogsFilters {...mjLogsData} />}
paginationArea={createCardProPagination({
currentPage: mjLogsData.activePage,
pageSize: mjLogsData.pageSize,
total: mjLogsData.logCount,
onPageChange: mjLogsData.handlePageChange,
onPageSizeChange: mjLogsData.handlePageSizeChange,
})}
t={mjLogsData.t}
>
<MjLogsTable {...mjLogsData} />

1
web/src/components/table/redemptions/RedemptionsTable.jsx
View File

@@ -107,6 +107,7 @@ const RedemptionsTable = (redemptionsData) => {
onPageSizeChange: redemptionsData.handlePageSizeChange,
onPageChange: handlePageChange,
}}
hidePagination={true}
loading={loading}
rowSelection={rowSelection}
onRow={handleRow}

8
web/src/components/table/redemptions/index.jsx
View File

@@ -25,6 +25,7 @@ import RedemptionsFilters from './RedemptionsFilters.jsx';
import RedemptionsDescription from './RedemptionsDescription.jsx';
import EditRedemptionModal from './modals/EditRedemptionModal';
import { useRedemptionsData } from '../../../hooks/redemptions/useRedemptionsData';
import { createCardProPagination } from '../../../helpers/utils';
const RedemptionsPage = () => {
const redemptionsData = useRedemptionsData();
@@ -99,6 +100,13 @@ const RedemptionsPage = () => {
</div>
</div>
}
paginationArea={createCardProPagination({
currentPage: redemptionsData.activePage,
pageSize: redemptionsData.pageSize,
total: redemptionsData.tokenCount,
onPageChange: redemptionsData.handlePageChange,
onPageSizeChange: redemptionsData.handlePageSizeChange,
})}
t={t}
>
<RedemptionsTable {...redemptionsData} />

1
web/src/components/table/task-logs/TaskLogsTable.jsx
View File

@@ -106,6 +106,7 @@ const TaskLogsTable = (taskLogsData) => {
onPageSizeChange: handlePageSizeChange,
onPageChange: handlePageChange,
}}
hidePagination={true}
/>
);
};

8
web/src/components/table/task-logs/index.jsx
View File

@@ -26,6 +26,7 @@ import TaskLogsFilters from './TaskLogsFilters.jsx';
import ColumnSelectorModal from './modals/ColumnSelectorModal.jsx';
import ContentModal from './modals/ContentModal.jsx';
import { useTaskLogsData } from '../../../hooks/task-logs/useTaskLogsData.js';
import { createCardProPagination } from '../../../helpers/utils';
const TaskLogsPage = () => {
const taskLogsData = useTaskLogsData();
@@ -41,6 +42,13 @@ const TaskLogsPage = () => {
type="type2"
statsArea={<TaskLogsActions {...taskLogsData} />}
searchArea={<TaskLogsFilters {...taskLogsData} />}
paginationArea={createCardProPagination({
currentPage: taskLogsData.activePage,
pageSize: taskLogsData.pageSize,
total: taskLogsData.logCount,
onPageChange: taskLogsData.handlePageChange,
onPageSizeChange: taskLogsData.handlePageSizeChange,
})}
t={taskLogsData.t}
>
<TaskLogsTable {...taskLogsData} />

1
web/src/components/table/tokens/TokensTable.jsx
View File

@@ -99,6 +99,7 @@ const TokensTable = (tokensData) => {
onPageSizeChange: handlePageSizeChange,
onPageChange: handlePageChange,
}}
hidePagination={true}
loading={loading}
rowSelection={rowSelection}
onRow={handleRow}

8
web/src/components/table/tokens/index.jsx
View File

@@ -25,6 +25,7 @@ import TokensFilters from './TokensFilters.jsx';
import TokensDescription from './TokensDescription.jsx';
import EditTokenModal from './modals/EditTokenModal';
import { useTokensData } from '../../../hooks/tokens/useTokensData';
import { createCardProPagination } from '../../../helpers/utils';
const TokensPage = () => {
const tokensData = useTokensData();
@@ -101,6 +102,13 @@ const TokensPage = () => {
</div>
</div>
}
paginationArea={createCardProPagination({
currentPage: tokensData.activePage,
pageSize: tokensData.pageSize,
total: tokensData.tokenCount,
onPageChange: tokensData.handlePageChange,
onPageSizeChange: tokensData.handlePageSizeChange,
})}
t={t}
>
<TokensTable {...tokensData} />

1
web/src/components/table/usage-logs/UsageLogsTable.jsx
View File

@@ -120,6 +120,7 @@ const LogsTable = (logsData) => {
},
onPageChange: handlePageChange,
}}
hidePagination={true}
/>
);
};

8
web/src/components/table/usage-logs/index.jsx
View File

@@ -25,6 +25,7 @@ import LogsFilters from './UsageLogsFilters.jsx';
import ColumnSelectorModal from './modals/ColumnSelectorModal.jsx';
import UserInfoModal from './modals/UserInfoModal.jsx';
import { useLogsData } from '../../../hooks/usage-logs/useUsageLogsData.js';
import { createCardProPagination } from '../../../helpers/utils';
const LogsPage = () => {
const logsData = useLogsData();
@@ -40,6 +41,13 @@ const LogsPage = () => {
type="type2"
statsArea={<LogsActions {...logsData} />}
searchArea={<LogsFilters {...logsData} />}
paginationArea={createCardProPagination({
currentPage: logsData.activePage,
pageSize: logsData.pageSize,
total: logsData.logCount,
onPageChange: logsData.handlePageChange,
onPageSizeChange: logsData.handlePageSizeChange,
})}
t={logsData.t}
>
<LogsTable {...logsData} />

1
web/src/components/table/users/UsersTable.jsx
View File

@@ -137,6 +137,7 @@ const UsersTable = (usersData) => {
onPageSizeChange: handlePageSizeChange,
onPageChange: handlePageChange,
}}
hidePagination={true}
loading={loading}
onRow={handleRow}
empty={

8
web/src/components/table/users/index.jsx
View File

@@ -26,6 +26,7 @@ import UsersDescription from './UsersDescription.jsx';
import AddUserModal from './modals/AddUserModal.jsx';
import EditUserModal from './modals/EditUserModal.jsx';
import { useUsersData } from '../../../hooks/users/useUsersData';
import { createCardProPagination } from '../../../helpers/utils';
const UsersPage = () => {
const usersData = useUsersData();
@@ -104,6 +105,13 @@ const UsersPage = () => {
/>
</div>
}
paginationArea={createCardProPagination({
currentPage: usersData.activePage,
pageSize: usersData.pageSize,
total: usersData.userCount,
onPageChange: usersData.handlePageChange,
onPageSizeChange: usersData.handlePageSizeChange,
})}
t={t}
>
<UsersTable {...usersData} />