feat: 添加资产记录和资金、交易账户视图；更新钱包状态管理和路由配置

src/api/types.ts

@@ -68,6 +68,10 @@ export type UserWithdrawOrderBody = TreatyQuery<typeof client.api.withdraw.get>;
 
 export type MarketDataStreaming = ReturnType<typeof client.api.market_data.streaming.subscribe>;
 
+export type AssetRecordBody = TreatyQuery<typeof client.api.ledger.entries.get>;
+
+export type AssetRecordData = Treaty.Data<typeof client.api.ledger.entries.get>["data"][number];
+
 /**
  * 应用版本信息
  */

src/components/Icon/index.vue

@@ -0,0 +1,22 @@
+<script lang='ts' setup>
+import type { ComponentInstance } from "vue";
+import { Icon } from "@iconify/vue";
+
+defineProps<{
+  icon: string;
+}>();
+
+const vm = getCurrentInstance()!;
+
+function changeRef(exposed) {
+  vm.exposed = exposed;
+}
+
+defineExpose({} as ComponentInstance<typeof Icon>);
+</script>
+
+<template>
+  <Icon v-bind="{ ...$attrs, icon }" :ref="changeRef" />
+</template>
+
+<style lang='css' scoped></style>

src/router/index.ts

@@ -94,6 +94,22 @@ const routes: Array<RouteRecordRaw> = [
     component: () => import("@/views/wallet/transfer.vue"),
     meta: { requiresAuth: true },
   },
+  {
+    path: "/wallet/funding",
+    component: () => import("@/views/wallet/funding.vue"),
+    meta: { requiresAuth: true },
+  },
+  {
+    path: "/wallet/trading",
+    component: () => import("@/views/wallet/trading.vue"),
+    meta: { requiresAuth: true },
+  },
+  {
+    path: "/asset_record/:code",
+    props: true,
+    component: () => import("@/views/wallet/asset-record.vue"),
+    meta: { requiresAuth: true },
+  },
   {
     path: "/user/settings",
     component: () => import("@/views/user-settings/index.vue"),

src/store/wallet.ts

@@ -4,6 +4,7 @@ import { client, safeClient } from "@/api";
 
 interface State {
   totalAssetValue: TotalAssetValue;
+  balances: BalancesData;
   fundingBalances: BalancesData;
   tradingBalances: BalancesData;
   bankAccounts: BankAccountsData["data"];
@@ -17,6 +18,7 @@ export const useWalletStore = defineStore("wallet", () => {
       tradingValueUsd: "0",
       totalValueUsd: "0",
     },
+    balances: [],
     fundingBalances: [],
     tradingBalances: [],
     bankAccounts: [],
@@ -25,8 +27,7 @@ export const useWalletStore = defineStore("wallet", () => {
 
   async function initializeWallet() {
     syncTotalAssetValue();
-    syncFundingBalances();
-    syncTradingBalances();
+    syncBalances();
     syncBankAccounts();
     syncSupportBanks();
   }
@@ -36,6 +37,12 @@ export const useWalletStore = defineStore("wallet", () => {
     if (data.value)
       state.totalAssetValue = data.value;
   }
+
+  async function syncBalances() {
+    const { data: balances } = await safeClient(() => client.api.wallet.balances.get(), { silent: true });
+    state.balances = balances.value || [];
+  }
+
   async function syncFundingBalances() {
     const { data: balances } = await safeClient(() => client.api.wallet.balances.get({
       query: { accountType: "funding" },
@@ -67,6 +74,7 @@ export const useWalletStore = defineStore("wallet", () => {
   return {
     ...toRefs(state),
     initializeWallet,
+    syncBalances,
     syncFundingBalances,
     syncTradingBalances,
     syncBankAccounts,

src/views/user/components/asset.vue

@@ -4,59 +4,58 @@ import SolarRoundTransferHorizontalBoldDuotone from "~icons/solar/round-transfer
 import { getCryptoIcon } from "@/config/crypto";
 
 const walletStore = useWalletStore();
-const { fundingBalances, totalAssetValue } = storeToRefs(walletStore);
+const { balances, totalAssetValue } = storeToRefs(walletStore);
 </script>
 
 <template>
-  <div>
-    <div class="text-md font-semibold my-4">
-      资产分布
-    </div>
+  <div class="text-md font-semibold my-4">
+    资产分布
+  </div>
 
-    <div class="grid grid-cols-2 gap-4">
-      <div class="asset-card">
-        <div class="text-xs text-text-400 font-semibold flex items-center gap-1">
-          <SolarDollarMinimalisticBoldDuotone />
-          资金账户
-        </div>
-        <div class="font-bold">
-          ${{ totalAssetValue.fundingValueUsd }}
-        </div>
+  <div class="grid grid-cols-2 gap-4">
+    <div class="asset-card" @click="$router.push('/wallet/funding')">
+      <div class="text-xs text-text-400 font-semibold flex items-center gap-1">
+        <SolarDollarMinimalisticBoldDuotone />
+        资金账户
       </div>
-      <div class="asset-card">
-        <div class="text-xs text-text-400 font-semibold flex items-center gap-1">
-          <SolarRoundTransferHorizontalBoldDuotone />
-          交易账户
-        </div>
-        <div class="font-bold">
-          ${{ totalAssetValue.tradingValueUsd }}
-        </div>
+      <div class="font-bold">
+        ${{ totalAssetValue.fundingValueUsd }}
       </div>
     </div>
-
-    <div class="text-md font-semibold my-4">
-      资产
+    <div class="asset-card" @click="$router.push('/wallet/trading')">
+      <div class="text-xs text-text-400 font-semibold flex items-center gap-1">
+        <SolarRoundTransferHorizontalBoldDuotone />
+        交易账户
+      </div>
+      <div class="font-bold">
+        ${{ totalAssetValue.tradingValueUsd }}
+      </div>
     </div>
+  </div>
 
-    <ion-list lines="none" class="space-y-5 mt-2!">
-      <ion-item v-for="asset, i in fundingBalances" :key="i" class="">
-        <div class="flex items-center space-x-3 flex-1">
-          <component :is="getCryptoIcon(asset.assetCode)" class="w-8 h-8" />
-          <div class="space-y-1">
-            <div class="font-medium text-md">
-              {{ asset.assetCode }}
-            </div>
-            <div class="text-xs text-text-700 font-bold">
-              Total: ${{ asset.total }}
-            </div>
+  <div class="text-md font-semibold my-4">
+    资产
+  </div>
+
+  <ion-list lines="none" class="space-y-5 mt-2!">
+    <ion-item v-for="asset, i in balances" :key="i" @click="$router.push(`/asset_record/${asset.assetCode}`)">
+      <div class="flex items-center space-x-3 flex-1">
+        <Icon :icon="asset.asset.iconUrl || ''" class="w-8 h-8" />
+
+        <div class="space-y-1">
+          <div class="font-medium text-md">
+            {{ asset.assetCode }}
+          </div>
+          <div class="text-xs text-text-700 font-bold">
+            Total: ${{ asset.total }}
           </div>
         </div>
-        <div class="w-fit font-bold">
-          ${{ Number(asset.available) }}
-        </div>
-      </ion-item>
-    </ion-list>
-  </div>
+      </div>
+      <div class="w-fit font-bold">
+        ${{ Number(asset.available) }}
+      </div>
+    </ion-item>
+  </ion-list>
 </template>
 
 <style lang='css' scoped>

src/views/user/components/wallet-card.vue

@@ -16,11 +16,6 @@ const totalAsset = computed(() => Number(totalAssetValue.value.totalValueUsd).to
 function onCloseModal() {
   rechargeInstance.value?.$el.dismiss(null, "confirm");
 }
-
-onMounted(() => {
-  walletStore.syncFundingBalances();
-  walletStore.syncTradingBalances();
-});
 </script>
 
 <template>

src/views/wallet/asset-record.vue

@@ -0,0 +1,83 @@
+<script lang='ts' setup>
+import type { InfiniteScrollCustomEvent, RefresherCustomEvent } from "@ionic/vue";
+import type { AssetRecordBody, AssetRecordData } from "@/api/types";
+import { client, safeClient } from "@/api";
+
+const props = defineProps<{ code: string }>();
+const [query, resetQuery] = useResetRef<AssetRecordBody>({
+  limit: 20,
+  offset: 0,
+  assetCode: props.code,
+});
+
+const data = ref<AssetRecordData[]>([]);
+const isFinished = ref(false);
+
+async function fetchData() {
+  const { data: record } = await safeClient(client.api.ledger.entries.get({
+    query: query.value,
+  }));
+  data.value.push(...(record.value?.data || []));
+  isFinished.value = (record.value?.data.length || 0) < query.value.limit!;
+}
+function reset() {
+  resetQuery();
+  data.value = [];
+  isFinished.value = false;
+}
+async function handleRefresh(event: RefresherCustomEvent) {
+  reset();
+  await fetchData();
+  setTimeout(() => {
+    event.target.complete();
+  }, 500);
+}
+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);
+}
+
+onBeforeMount(() => {
+  fetchData();
+});
+</script>
+
+<template>
+  <ion-page>
+    <ion-header class="ion-no-border">
+      <ion-toolbar class="ion-toolbar">
+        <ui-back-button slot="start" />
+        <ion-title>{{ code }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content :fullscreen="true">
+      <ion-refresher slot="fixed" @ion-refresh="handleRefresh($event)">
+        <ion-refresher-content />
+      </ion-refresher>
+
+      <div class="ion-padding-horizontal text-md font-semibold my-4">
+        资产记录
+      </div>
+
+      {{ data }}
+
+      <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>
+
+<style lang='css' scoped></style>

src/views/wallet/funding.vue

@@ -0,0 +1,69 @@
+<script lang='ts' setup>
+import { eyeOffOutline, eyeOutline } from "ionicons/icons";
+
+const walletStore = useWalletStore();
+const { fundingBalances, totalAssetValue } = storeToRefs(walletStore);
+const fundingBalanceVisible = useStorage("funding-balances-visible", true);
+
+onMounted(() => {
+  walletStore.syncFundingBalances();
+});
+</script>
+
+<template>
+  <ion-page>
+    <ion-header class="ion-no-border">
+      <ion-toolbar class="ion-toolbar">
+        <ui-back-button slot="start" />
+        <ion-title>资金账户</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content :fullscreen="true">
+      <div class="flex flex-col gap-1 ion-padding border-b border-text-900 mb-2">
+        <div class="text-sm text-gray-500 flex items-center gap-2" @click="fundingBalanceVisible = !fundingBalanceVisible">
+          <div class="text-md">
+            总资产估值
+          </div>
+          <ion-icon :icon="fundingBalanceVisible ? eyeOffOutline : eyeOutline" />
+        </div>
+        <div class="flex items-end gap-2">
+          <div class="text-2xl font-bold">
+            {{ fundingBalanceVisible ? totalAssetValue.fundingValueUsd : Array(totalAssetValue.fundingValueUsd.toString().length).fill("*").join("") }}
+          </div>
+          <div class="text-md font-bold">
+            USDT
+          </div>
+        </div>
+      </div>
+
+      <div class="ion-padding-horizontal text-md font-semibold my-4">
+        资产
+      </div>
+
+      <ion-list lines="none" class="space-y-5 mt-2!">
+        <ion-item v-for="asset, i in fundingBalances" :key="i" class="">
+          <div class="flex items-center space-x-3 flex-1">
+            <Icon :icon="asset.asset.iconUrl || ''" class="w-8 h-8" />
+
+            <div class="space-y-1">
+              <div class="font-medium text-md">
+                {{ asset.assetCode }}
+              </div>
+              <div class="text-xs text-text-500 font-semibold">
+                总共: ${{ Number(asset.total).toFixed(2) }}
+              </div>
+              <div class="text-xs text-text-500 font-semibold">
+                冻结: ${{ Number(asset.frozen).toFixed(2) }}
+              </div>
+            </div>
+          </div>
+          <div class="w-fit font-bold">
+            ${{ Number(asset.available).toFixed(2) }}
+          </div>
+        </ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-page>
+</template>
+
+<style lang='css' scoped></style>

src/views/wallet/trading.vue

@@ -0,0 +1,70 @@
+<script lang='ts' setup>
+import { eyeOffOutline, eyeOutline } from "ionicons/icons";
+
+const walletStore = useWalletStore();
+const { tradingBalances, totalAssetValue } = storeToRefs(walletStore);
+const tradingBalanceVisible = useStorage("trading-balances-visible", true);
+
+onMounted(() => {
+  walletStore.syncTradingBalances();
+});
+</script>
+
+<template>
+  <ion-page>
+    <ion-header class="ion-no-border">
+      <ion-toolbar class="ion-toolbar">
+        <ui-back-button slot="start" />
+        <ion-title>交易账户</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content :fullscreen="true">
+      <div class="flex flex-col gap-1 ion-padding border-b border-text-900 mb-2">
+        <div class="text-sm text-gray-500 flex items-center gap-2" @click="tradingBalanceVisible = !tradingBalanceVisible">
+          <div class="text-md">
+            总资产估值
+          </div>
+          <ion-icon :icon="tradingBalanceVisible ? eyeOffOutline : eyeOutline" />
+        </div>
+        <div class="flex items-end gap-2">
+          <div class="text-2xl font-bold">
+            {{ tradingBalanceVisible ? totalAssetValue.tradingValueUsd : Array(totalAssetValue.tradingValueUsd.toString().length).fill("*").join("") }}
+          </div>
+          <div class="text-md font-bold">
+            USDT
+          </div>
+        </div>
+      </div>
+
+      <div class="ion-padding-horizontal text-md font-semibold my-4">
+        资产
+      </div>
+
+      <ion-list lines="none" class="space-y-5 mt-2!">
+        <ion-item v-for="asset, i in tradingBalances" :key="i">
+          <div class="flex items-center space-x-3 flex-1">
+            <Icon :icon="asset.asset.iconUrl || ''" class="w-8 h-8" />
+
+            <div class="space-y-1">
+              <div class="font-medium text-md">
+                {{ asset.assetCode }}
+              </div>
+              <div class="text-xs text-text-500 font-semibold">
+                总共: ${{ Number(asset.total).toFixed(2) }}
+              </div>
+              <div class="text-xs text-text-500 font-semibold">
+                冻结: ${{ Number(asset.frozen).toFixed(2) }}
+              </div>
+            </div>
+          </div>
+          <div class="w-fit font-bold">
+            ${{ Number(asset.available).toFixed(2) }}
+          </div>
+        </ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-page>
+</template>
+
+<style lang='css' scoped></style>

src/views/wallet/transfer.vue

@@ -104,8 +104,7 @@ async function onSubmit(values: GenericObject) {
     await toast.present();
 
     // 刷新余额
-    walletStore.syncFundingBalances();
-    walletStore.syncTradingBalances();
+    walletStore.syncBalances();
 
     router.back();
   }