✨ 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)

web/src/components/common/ui/CardPro.js

@@ -28,12 +28,13 @@ const { Text } = Typography;
 /**
  * CardPro 高级卡片组件
  * 
- * 布局分为5个区域：
+ * 布局分为6个区域：
  * 1. 统计信息区域 (statsArea)
  * 2. 描述信息区域 (descriptionArea) 
  * 3. 类型切换/标签区域 (tabsArea)
  * 4. 操作按钮区域 (actionsArea)
  * 5. 搜索表单区域 (searchArea)
+ * 6. 分页区域 (paginationArea) - 固定在卡片底部
  * 
  * 支持三种布局类型：
  * - type1: 操作型 (如TokensTable) - 描述信息 + 操作按钮 + 搜索表单
@@ -50,6 +51,7 @@ const CardPro = ({
   tabsArea,
   actionsArea,
   searchArea,
+  paginationArea, // 新增分页区域
   // 卡片属性
   shadows = 'always',
   bordered = false,
@@ -159,10 +161,24 @@ const CardPro = ({
 
   const headerContent = renderHeader();
 
+  // 渲染分页区域
+  const renderFooter = () => {
+    if (!paginationArea) return null;
+
+    return (
+      <div className="flex justify-center w-full pt-4 border-t" style={{ borderColor: 'var(--semi-color-border)' }}>
+        {paginationArea}
+      </div>
+    );
+  };
+
+  const footerContent = renderFooter();
+
   return (
     <Card
       className={`table-scroll-card !rounded-2xl ${className}`}
       title={headerContent}
+      footer={footerContent}
       shadows={shadows}
       bordered={bordered}
       style={style}
@@ -190,6 +206,7 @@ CardPro.propTypes = {
     PropTypes.arrayOf(PropTypes.node),
   ]),
   searchArea: PropTypes.node,
+  paginationArea: PropTypes.node, // 新增分页区域
   // 表格内容
   children: PropTypes.node,
   // 国际化函数

web/src/components/common/ui/CardTable.js

@@ -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;