🌐 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.

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

@@ -163,7 +163,10 @@ const CardPro = ({
     if (!paginationArea) return null;
 
     return (
-      <div className="flex justify-center w-full pt-4 border-t" style={{ borderColor: 'var(--semi-color-border)' }}>
+      <div
+        className={`flex w-full pt-4 border-t ${isMobile ? 'justify-center' : 'justify-between items-center'}`}
+        style={{ borderColor: 'var(--semi-color-border)' }}
+      >
         {paginationArea}
       </div>
     );

web/src/components/table/channels/index.jsx

@@ -68,6 +68,7 @@ const ChannelsPage = () => {
           onPageChange: channelsData.handlePageChange,
           onPageSizeChange: channelsData.handlePageSizeChange,
           isMobile: isMobile,
+          t: channelsData.t,
         })}
         t={channelsData.t}
       >

web/src/components/table/mj-logs/index.jsx

@@ -51,6 +51,7 @@ const MjLogsPage = () => {
             onPageChange: mjLogsData.handlePageChange,
             onPageSizeChange: mjLogsData.handlePageSizeChange,
             isMobile: isMobile,
+            t: mjLogsData.t,
           })}
           t={mjLogsData.t}
         >

web/src/components/table/redemptions/index.jsx

@@ -109,8 +109,9 @@ const RedemptionsPage = () => {
           onPageChange: redemptionsData.handlePageChange,
           onPageSizeChange: redemptionsData.handlePageSizeChange,
           isMobile: isMobile,
+          t: redemptionsData.t,
         })}
-        t={t}
+        t={redemptionsData.t}
       >
         <RedemptionsTable {...redemptionsData} />
       </CardPro>

web/src/components/table/task-logs/index.jsx

@@ -51,6 +51,7 @@ const TaskLogsPage = () => {
             onPageChange: taskLogsData.handlePageChange,
             onPageSizeChange: taskLogsData.handlePageSizeChange,
             isMobile: isMobile,
+            t: taskLogsData.t,
           })}
           t={taskLogsData.t}
         >

web/src/components/table/tokens/index.jsx

@@ -111,8 +111,9 @@ const TokensPage = () => {
           onPageChange: tokensData.handlePageChange,
           onPageSizeChange: tokensData.handlePageSizeChange,
           isMobile: isMobile,
+          t: tokensData.t,
         })}
-        t={t}
+        t={tokensData.t}
       >
         <TokensTable {...tokensData} />
       </CardPro>

web/src/components/table/usage-logs/index.jsx

@@ -50,6 +50,7 @@ const LogsPage = () => {
           onPageChange: logsData.handlePageChange,
           onPageSizeChange: logsData.handlePageSizeChange,
           isMobile: isMobile,
+          t: logsData.t,
         })}
         t={logsData.t}
       >

web/src/components/table/users/index.jsx

@@ -114,8 +114,9 @@ const UsersPage = () => {
           onPageChange: usersData.handlePageChange,
           onPageSizeChange: usersData.handlePageSizeChange,
           isMobile: isMobile,
+          t: usersData.t,
         })}
-        t={t}
+        t={usersData.t}
       >
         <UsersTable {...usersData} />
       </CardPro>