From 057e55105939112bc1091f116a572e4be1327c71 Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Tue, 22 Jul 2025 16:11:21 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=90=20feat:=20implement=20left-right?=
 =?UTF-8?q?=20pagination=20layout=20with=20i18n=20support?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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       |  5 ++-
 web/src/components/table/channels/index.jsx   |  1 +
 web/src/components/table/mj-logs/index.jsx    |  1 +
 .../components/table/redemptions/index.jsx    |  3 +-
 web/src/components/table/task-logs/index.jsx  |  1 +
 web/src/components/table/tokens/index.jsx     |  3 +-
 web/src/components/table/usage-logs/index.jsx |  1 +
 web/src/components/table/users/index.jsx      |  3 +-
 web/src/helpers/utils.js                      | 42 +++++++++++++------
 web/src/i18n/locales/en.json                  |  6 ++-
 10 files changed, 49 insertions(+), 17 deletions(-)

diff --git a/web/src/components/common/ui/CardPro.js b/web/src/components/common/ui/CardPro.js
index e72cc42b..5745b9b3 100644
--- a/web/src/components/common/ui/CardPro.js
+++ b/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>
     );
diff --git a/web/src/components/table/channels/index.jsx b/web/src/components/table/channels/index.jsx
index f9370150..b0106b4e 100644
--- a/web/src/components/table/channels/index.jsx
+++ b/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}
       >
diff --git a/web/src/components/table/mj-logs/index.jsx b/web/src/components/table/mj-logs/index.jsx
index 86f96713..3e319975 100644
--- a/web/src/components/table/mj-logs/index.jsx
+++ b/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}
         >
diff --git a/web/src/components/table/redemptions/index.jsx b/web/src/components/table/redemptions/index.jsx
index 5abb64aa..58db6cbf 100644
--- a/web/src/components/table/redemptions/index.jsx
+++ b/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>
diff --git a/web/src/components/table/task-logs/index.jsx b/web/src/components/table/task-logs/index.jsx
index c9a02541..c5439bae 100644
--- a/web/src/components/table/task-logs/index.jsx
+++ b/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}
         >
diff --git a/web/src/components/table/tokens/index.jsx b/web/src/components/table/tokens/index.jsx
index a955f13c..85229b26 100644
--- a/web/src/components/table/tokens/index.jsx
+++ b/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>
diff --git a/web/src/components/table/usage-logs/index.jsx b/web/src/components/table/usage-logs/index.jsx
index 6f7aeafd..bd550088 100644
--- a/web/src/components/table/usage-logs/index.jsx
+++ b/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}
       >
diff --git a/web/src/components/table/users/index.jsx b/web/src/components/table/users/index.jsx
index adc9a570..99d50f50 100644
--- a/web/src/components/table/users/index.jsx
+++ b/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>
diff --git a/web/src/helpers/utils.js b/web/src/helpers/utils.js
index b9b2d550..5a8aa9cd 100644
--- a/web/src/helpers/utils.js
+++ b/web/src/helpers/utils.js
@@ -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
+      />
+    </>
   );
 };
diff --git a/web/src/i18n/locales/en.json b/web/src/i18n/locales/en.json
index 6b1d5e05..5762533f 100644
--- a/web/src/i18n/locales/en.json
+++ b/web/src/i18n/locales/en.json
@@ -1783,5 +1783,9 @@
   "隐藏操作项": "Hide actions",
   "显示操作项": "Show actions",
   "用户组": "User group",
-  "邀请获得额度": "Invitation quota"
+  "邀请获得额度": "Invitation quota",
+  "显示第": "Showing",
+  "条 - 第": "to",
+  "条，共": "of",
+  "条": "items"
 }
\ No newline at end of file