From bbb9a17757e93f26942b0e7496facbe30f7f55bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E9=B1=BC=E5=BC=80=E5=8F=91?= <git@xiaoyu.com>
Date: Sat, 16 May 2026 10:02:11 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E7=A7=AF=E5=88=86=E6=98=8E?=
 =?UTF-8?q?=E7=BB=86=E6=B7=BB=E5=8A=A0=E5=88=86=E9=A1=B5=E5=99=A8=EF=BC=88?=
 =?UTF-8?q?=E6=AF=8F=E9=A1=B510=E6=9D=A1=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 currentPage、total 状态，pageSize 固定为 10
- Tab 切换、类型筛选、点击查询时自动重置到第 1 页
- 表格底部添加分页控件：首页/上一页/页码/下一页/尾页
- 显示总条数
---
 tauri-app/src/pages/Profile/UsageDetail.tsx | 72 +++++++++++++++++++--
 1 file changed, 66 insertions(+), 6 deletions(-)

diff --git a/tauri-app/src/pages/Profile/UsageDetail.tsx b/tauri-app/src/pages/Profile/UsageDetail.tsx
index bbf03e2..d50628b 100644
--- a/tauri-app/src/pages/Profile/UsageDetail.tsx
+++ b/tauri-app/src/pages/Profile/UsageDetail.tsx
@@ -239,6 +239,9 @@ export default function UsageDetail() {
   const [endDate, setEndDate] = useState('');
   const [dateError, setDateError] = useState('');
   const [chargeableTypes, setChargeableTypes] = useState<string[]>([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [total, setTotal] = useState(0);
+  const pageSize = 10;
 
   // 初始化默认时间范围（当日）
   useEffect(() => {
@@ -276,8 +279,8 @@ export default function UsageDetail() {
       }
 
       const params: Parameters<typeof pointsApi.getTransactions>[0] = {
-        page: 1,
-        pageSize: 100,
+        page: currentPage,
+        pageSize,
         txType: activeTab === 'consume' ? 'consume' : 'recharge',
       };
       if (activeTab === 'consume' && sourceType) {
@@ -292,12 +295,13 @@ export default function UsageDetail() {
 
       const data = await pointsApi.getTransactions(params);
       setTransactions(data.items);
+      setTotal(data.total);
     } catch (e) {
       console.error('[UsageDetail] 获取流水失败:', e);
     } finally {
       setLoading(false);
     }
-  }, [activeTab, sourceType, startDate, endDate]);
+  }, [activeTab, sourceType, startDate, endDate, currentPage]);
 
   // 日期就绪后触发首次查询（仅一次，避免日期变化时自动查询）
   const initialLoadTriggered = useRef(false);
@@ -321,9 +325,10 @@ export default function UsageDetail() {
     opt.value === '' || chargeableTypes.includes(opt.value),
   );
 
-  // 切换 Tab 时重置类型筛选
+  // 切换 Tab 时重置类型筛选和页码
   const handleTabChange = (tab: TabType) => {
     setActiveTab(tab);
+    setCurrentPage(1);
     if (tab === 'recharge') {
       setSourceType('');
     }
@@ -399,7 +404,10 @@ export default function UsageDetail() {
               <CustomSelect
                 options={filteredOptions}
                 value={sourceType}
-                onChange={setSourceType}
+                onChange={(val) => {
+                  setSourceType(val);
+                  setCurrentPage(1);
+                }}
               />
             </div>
           )}
@@ -413,7 +421,10 @@ export default function UsageDetail() {
           {/* 查询按钮 */}
           <button
             className="btn btn-primary"
-            onClick={load}
+            onClick={() => {
+              setCurrentPage(1);
+              load();
+            }}
             style={{ padding: '6px 16px', fontSize: 'var(--font-sm)' }}
           >
             查询
@@ -503,6 +514,55 @@ export default function UsageDetail() {
               )}
             </tbody>
           </table>
+
+          {/* 分页 */}
+          {total > 0 && (
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'flex-end',
+                gap: '8px',
+                padding: '16px 20px',
+                borderTop: '1px solid var(--border-light)',
+              }}
+            >
+              <span style={{ fontSize: 'var(--font-sm)', color: 'var(--text-tertiary)', marginRight: '8px' }}>
+                共 {total} 条
+              </span>
+              <button
+                className="btn btn-ghost btn-sm"
+                disabled={currentPage <= 1}
+                onClick={() => setCurrentPage(1)}
+              >
+                首页
+              </button>
+              <button
+                className="btn btn-ghost btn-sm"
+                disabled={currentPage <= 1}
+                onClick={() => setCurrentPage((p) => p - 1)}
+              >
+                上一页
+              </button>
+              <span style={{ fontSize: 'var(--font-sm)', color: 'var(--text-secondary)', padding: '0 8px' }}>
+                {currentPage} / {Math.ceil(total / pageSize)}
+              </span>
+              <button
+                className="btn btn-ghost btn-sm"
+                disabled={currentPage >= Math.ceil(total / pageSize)}
+                onClick={() => setCurrentPage((p) => p + 1)}
+              >
+                下一页
+              </button>
+              <button
+                className="btn btn-ghost btn-sm"
+                disabled={currentPage >= Math.ceil(total / pageSize)}
+                onClick={() => setCurrentPage(Math.ceil(total / pageSize))}
+              >
+                尾页
+              </button>
+            </div>
+          )}
         </div>
       </div>
     </div>