diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5ec116a..86b68b2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -52,8 +52,8 @@ catalogs:
       specifier: 8.0.0
       version: 8.0.0
     '@capp/eden':
-      specifier: http://192.168.1.2:9538/api/capp-eden-0.0.37.tgz
-      version: 0.0.37
+      specifier: http://192.168.1.2:9538/api/capp-eden-0.0.38.tgz
+      version: 0.0.38
     '@cloudflare/workers-types':
       specifier: ^4.20260113.0
       version: 4.20260116.0
@@ -307,7 +307,7 @@ importers:
         version: 8.0.0(@capacitor/core@8.0.0)
       '@capp/eden':
         specifier: 'catalog:'
-        version: http://192.168.1.2:9538/api/capp-eden-0.0.37.tgz(@elysiajs/eden@1.4.6(elysia@1.4.22(@sinclair/typebox@0.34.47)(exact-mirror@0.2.6(@sinclair/typebox@0.34.47))(file-type@21.3.0)(openapi-types@12.1.3)(typescript@5.9.3)))
+        version: http://192.168.1.2:9538/api/capp-eden-0.0.38.tgz(@elysiajs/eden@1.4.6(elysia@1.4.22(@sinclair/typebox@0.34.47)(exact-mirror@0.2.6(@sinclair/typebox@0.34.47))(file-type@21.3.0)(openapi-types@12.1.3)(typescript@5.9.3)))
       '@elysiajs/eden':
         specifier: 'catalog:'
         version: 1.4.6(elysia@1.4.22(@sinclair/typebox@0.34.47)(exact-mirror@0.2.6(@sinclair/typebox@0.34.47))(file-type@21.3.0)(openapi-types@12.1.3)(typescript@5.9.3))
@@ -1200,9 +1200,9 @@ packages:
   '@capacitor/synapse@1.0.4':
     resolution: {integrity: sha512-/C1FUo8/OkKuAT4nCIu/34ny9siNHr9qtFezu4kxm6GY1wNFxrCFWjfYx5C1tUhVGz3fxBABegupkpjXvjCHrw==}
 
-  '@capp/eden@http://192.168.1.2:9538/api/capp-eden-0.0.37.tgz':
-    resolution: {tarball: http://192.168.1.2:9538/api/capp-eden-0.0.37.tgz}
-    version: 0.0.37
+  '@capp/eden@http://192.168.1.2:9538/api/capp-eden-0.0.38.tgz':
+    resolution: {tarball: http://192.168.1.2:9538/api/capp-eden-0.0.38.tgz}
+    version: 0.0.38
     peerDependencies:
       '@elysiajs/eden': ^1.4.6
 
@@ -6946,7 +6946,7 @@ snapshots:
 
   '@capacitor/synapse@1.0.4': {}
 
-  '@capp/eden@http://192.168.1.2:9538/api/capp-eden-0.0.37.tgz(@elysiajs/eden@1.4.6(elysia@1.4.22(@sinclair/typebox@0.34.47)(exact-mirror@0.2.6(@sinclair/typebox@0.34.47))(file-type@21.3.0)(openapi-types@12.1.3)(typescript@5.9.3)))':
+  '@capp/eden@http://192.168.1.2:9538/api/capp-eden-0.0.38.tgz(@elysiajs/eden@1.4.6(elysia@1.4.22(@sinclair/typebox@0.34.47)(exact-mirror@0.2.6(@sinclair/typebox@0.34.47))(file-type@21.3.0)(openapi-types@12.1.3)(typescript@5.9.3)))':
     dependencies:
       '@elysiajs/eden': 1.4.6(elysia@1.4.22(@sinclair/typebox@0.34.47)(exact-mirror@0.2.6(@sinclair/typebox@0.34.47))(file-type@21.3.0)(openapi-types@12.1.3)(typescript@5.9.3))
 
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 493a50d..a353e39 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -19,7 +19,7 @@ catalog:
   '@capacitor/share': ^8.0.0
   '@capacitor/status-bar': 8.0.0
   '@capacitor/toast': ^8.0.0
-  '@capp/eden': http://192.168.1.2:9538/api/capp-eden-0.0.37.tgz
+  '@capp/eden': http://192.168.1.2:9538/api/capp-eden-0.0.38.tgz
   '@cloudflare/workers-types': ^4.20260113.0
   '@elysiajs/eden': ^1.4.6
   '@faker-js/faker': ^10.2.0
diff --git a/src/views/product/index.vue b/src/views/product/index.vue
index a59d1e2..18abc8c 100644
--- a/src/views/product/index.vue
+++ b/src/views/product/index.vue
@@ -154,6 +154,13 @@ onMounted(() => {
           </div>
         </div>
       </section>
+
+      <ion-infinite-scroll threshold="100px" @ion-infinite="handleInfinite">
+        <ion-infinite-scroll-content
+          loading-spinner="bubbles"
+          loading-text="加载更多产品..."
+        />
+      </ion-infinite-scroll>
     </ion-content>
   </ion-page>
 </template>
diff --git a/src/views/recharge/index.vue b/src/views/recharge/index.vue
index e90c5e5..490f9fb 100644
--- a/src/views/recharge/index.vue
+++ b/src/views/recharge/index.vue
@@ -1,7 +1,7 @@
 <script lang='ts' setup>
 import { alertController, toastController } from "@ionic/vue";
 import { cardOutline, checkmarkCircleOutline, documentTextOutline, logoAlipay, logoWechat, walletOutline } from "ionicons/icons";
-import { safeClient } from "@/api";
+import { client, safeClient } from "@/api";
 
 const walletStore = useWalletStore();
 const balanceWallet = await walletStore.getWalletByType("balance");
@@ -99,36 +99,26 @@ function goToRecords() {
   router.push("/recharge/records");
 }
 
-async function showToast(message: string, color: "success" | "danger" | "warning" = "success") {
-  const toast = await toastController.create({
-    message,
-    duration: 2000,
-    position: "top",
-    color,
-  });
-  await toast.present();
-}
-
 async function handleSubmit() {
   const amount = Number.parseFloat(rechargeAmount.value);
 
   if (!rechargeAmount.value || Number.isNaN(amount) || amount <= 0) {
-    await showToast("请输入有效的充值金额", "warning");
+    showToast("请输入有效的充值金额");
     return;
   }
 
   if (amount < 10) {
-    await showToast("充值金额不能低于10元", "warning");
+    showToast("充值金额不能低于10元");
     return;
   }
 
   if (!selectedPaymentType.value) {
-    await showToast("请选择支付方式", "warning");
+    showToast("请选择支付方式");
     return;
   }
 
   if (!selectedPaymentId.value) {
-    await showToast("请选择支付账号", "warning");
+    showToast("请选择支付账号");
     return;
   }
 
@@ -143,13 +133,16 @@ async function handleSubmit() {
       {
         text: "确认",
         handler: async () => {
-          // TODO: 调用充值 API
-          await showToast("充值成功");
+          await safeClient(client.api.deposit.fiat.post({
+            amount: String(amount),
+            paymentChannel: selectedPaymentType.value!,
+          }));
           rechargeAmount.value = "";
           selectedPaymentType.value = null;
           selectedPaymentId.value = null;
-          const data = await walletStore.getWalletByType("balance");
-          balanceWallet.value = data.value;
+          // TODO 刷新余额
+          // const data = await walletStore.getWalletByType("balance");
+          // balanceWallet.value = data.value;
         },
       },
     ],
@@ -169,7 +162,7 @@ async function handleSubmit() {
         <ion-title>充值</ion-title>
         <ion-buttons slot="end">
           <ion-button color="light" size="small" @click="goToRecords">
-            <ion-icon slot="icon-only" :icon="documentTextOutline" />
+            充值记录
           </ion-button>
         </ion-buttons>
       </ion-toolbar>
diff --git a/src/views/recharge/records.vue b/src/views/recharge/records.vue
index 3f05f48..76944c6 100644
--- a/src/views/recharge/records.vue
+++ b/src/views/recharge/records.vue
@@ -1,14 +1,37 @@
 <script lang='ts' setup>
+import type { Treaty } from "@elysiajs/eden";
+import type { InfiniteScrollCustomEvent } from "@ionic/vue";
+import type { TreatyQuery } from "@/api/types";
 import { cardOutline, listOutline, logoAlipay, logoWechat } from "ionicons/icons";
+import { client, safeClient } from "@/api";
 
-interface RechargeRecord {
-  id: number;
-  amount: number;
-  paymentType: "alipay" | "unionpay" | "wechat";
-  paymentAccount: string;
-  status: "success" | "pending" | "failed";
-  time: string;
-  orderNo: string;
+type DepositRecord = Treaty.Data<typeof client.api.deposit.orders.get>["data"][number];
+type DepositQuery = TreatyQuery<typeof client.api.deposit.orders.get>;
+
+const [query] = useResetRef<DepositQuery>({
+  offset: 0,
+  limit: 10,
+});
+const data = ref<DepositRecord[]>([]);
+const isFinished = ref(false);
+const walletStore = useWalletStore();
+
+async function fetchData() {
+  const { data: responseData } = await safeClient(client.api.deposit.orders.get({ query: { ...query.value } }));
+  data.value.push(...(responseData.value?.data || []));
+  isFinished.value = responseData.value?.pagination.hasNextPage === false;
+}
+async function handleInfinite(event: InfiniteScrollCustomEvent) {
+  if (isFinished.value) {
+    event.target.complete();
+    event.target.disabled = true;
+    return;
+  }
+  query.value.offset! += query.value.limit!;
+  await fetchData();
+  setTimeout(() => {
+    event.target.complete();
+  }, 500);
 }
 
 // 支付方式选项
@@ -18,121 +41,42 @@ const paymentTypes = [
   { type: "wechat" as const, name: "微信", icon: logoWechat, color: "#07C160" },
 ];
 
-// 充值记录数据
-const rechargeRecords = ref<RechargeRecord[]>([
-  {
-    id: 1,
-    amount: 1000.00,
-    paymentType: "alipay",
-    paymentAccount: "138****8000",
-    status: "success",
-    time: "2026-01-18 14:30:20",
-    orderNo: "RCH202601181430001",
-  },
-  {
-    id: 2,
-    amount: 500.00,
-    paymentType: "wechat",
-    paymentAccount: "wxid_abc123",
-    status: "success",
-    time: "2026-01-17 10:15:30",
-    orderNo: "RCH202601171015002",
-  },
-  {
-    id: 3,
-    amount: 2000.00,
-    paymentType: "unionpay",
-    paymentAccount: "6222 **** **** 1234",
-    status: "pending",
-    time: "2026-01-16 16:45:10",
-    orderNo: "RCH202601161645003",
-  },
-  {
-    id: 4,
-    amount: 100.00,
-    paymentType: "alipay",
-    paymentAccount: "159****6666",
-    status: "success",
-    time: "2026-01-15 09:20:00",
-    orderNo: "RCH202601150920004",
-  },
-  {
-    id: 5,
-    amount: 800.00,
-    paymentType: "unionpay",
-    paymentAccount: "6217 **** **** 5678",
-    status: "failed",
-    time: "2026-01-14 20:30:15",
-    orderNo: "RCH202601142030005",
-  },
-  {
-    id: 6,
-    amount: 300.00,
-    paymentType: "alipay",
-    paymentAccount: "138****8000",
-    status: "success",
-    time: "2026-01-13 11:45:30",
-    orderNo: "RCH202601131145006",
-  },
-  {
-    id: 7,
-    amount: 1500.00,
-    paymentType: "wechat",
-    paymentAccount: "wxid_abc123",
-    status: "success",
-    time: "2026-01-12 15:20:10",
-    orderNo: "RCH202601121520007",
-  },
-  {
-    id: 8,
-    amount: 600.00,
-    paymentType: "unionpay",
-    paymentAccount: "6222 **** **** 1234",
-    status: "success",
-    time: "2026-01-11 09:30:45",
-    orderNo: "RCH202601110930008",
-  },
-]);
-
-function getPaymentTypeName(type: "alipay" | "unionpay" | "wechat") {
+function getPaymentTypeName(type: string | null) {
   return paymentTypes.find(pt => pt.type === type)?.name || type;
 }
 
-function getPaymentTypeIcon(type: "alipay" | "unionpay" | "wechat") {
+function getPaymentTypeIcon(type: string | null) {
   return paymentTypes.find(pt => pt.type === type)?.icon || cardOutline;
 }
 
-function getPaymentTypeColor(type: "alipay" | "unionpay" | "wechat") {
+function getPaymentTypeColor(type: string | null) {
   return paymentTypes.find(pt => pt.type === type)?.color || "#999";
 }
 
-function getStatusText(status: "success" | "pending" | "failed") {
+function getStatusText(status: DepositRecord["status"]) {
   const statusMap = {
-    success: "成功",
-    pending: "处理中",
-    failed: "失败",
+    pending: "待处理",
+    approved: "已批准",
+    completed: "已完成",
+    rejected: "已拒绝",
+    cancelled: "已取消",
   };
   return statusMap[status];
 }
 
-function getStatusColor(status: "success" | "pending" | "failed") {
+function getStatusColor(status: DepositRecord["status"]) {
   const colorMap = {
-    success: "#52c41a",
     pending: "#faad14",
-    failed: "#f5222d",
+    approved: "#52c41a",
+    completed: "#52c41a",
+    rejected: "#f5222d",
+    cancelled: "#f5222d",
   };
   return colorMap[status];
 }
 
-// 统计数据
-const totalAmount = computed(() => {
-  return rechargeRecords.value
-    .filter(r => r.status === "success")
-    .reduce((sum, r) => sum + r.amount, 0);
-});
-
-const totalCount = computed(() => {
-  return rechargeRecords.value.filter(r => r.status === "success").length;
+onMounted(() => {
+  fetchData();
 });
 </script>
 
@@ -148,50 +92,27 @@ const totalCount = computed(() => {
     </ion-header>
 
     <ion-content>
-      <!-- 统计卡片 -->
-      <div class="stats-card">
-        <div class="stat-item">
-          <div class="stat-label">
-            累计充值金额
-          </div>
-          <div class="stat-value">
-            ¥{{ totalAmount.toFixed(2) }}
-          </div>
-        </div>
-        <div class="stat-divider" />
-        <div class="stat-item">
-          <div class="stat-label">
-            充值成功次数
-          </div>
-          <div class="stat-value">
-            {{ totalCount }}次
-          </div>
-        </div>
-      </div>
-
       <!-- 充值记录列表 -->
       <div class="records-section">
-        <div v-if="rechargeRecords.length > 0" class="records-list">
+        <div v-if="data.length > 0" class="records-list">
           <div
-            v-for="record in rechargeRecords"
+            v-for="record in data"
             :key="record.id"
             class="record-item"
           >
             <div class="record-left">
               <ion-icon
-                :icon="getPaymentTypeIcon(record.paymentType)"
+                :icon="getPaymentTypeIcon(record.paymentChannel)"
                 class="record-icon"
-                :style="{ color: getPaymentTypeColor(record.paymentType) }"
+                :style="{ color: getPaymentTypeColor(record.paymentChannel) }"
               />
               <div class="record-info">
                 <div class="record-title">
-                  {{ getPaymentTypeName(record.paymentType) }}充值
-                </div>
-                <div class="record-account">
-                  {{ record.paymentAccount }}
+                  {{ getPaymentTypeName(record.paymentChannel) }}充值
                 </div>
+
                 <div class="record-time">
-                  {{ record.time }}
+                  {{ useDateFormat(record.createdAt, 'YYYY-MM-DD HH:mm:ss') }}
                 </div>
                 <div class="record-order">
                   订单号：{{ record.orderNo }}
@@ -200,7 +121,7 @@ const totalCount = computed(() => {
             </div>
             <div class="record-right">
               <div class="record-amount">
-                +¥{{ record.amount.toFixed(2) }}
+                +¥{{ Number(record.amount) }}
               </div>
               <div
                 class="record-status"
@@ -219,6 +140,13 @@ const totalCount = computed(() => {
           </div>
         </div>
       </div>
+
+      <ion-infinite-scroll threshold="100px" @ion-infinite="handleInfinite">
+        <ion-infinite-scroll-content
+          loading-spinner="bubbles"
+          loading-text="加载更多记录..."
+        />
+      </ion-infinite-scroll>
     </ion-content>
   </ion-page>
 </template>