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

This commit is contained in:
2026-01-06 16:01:01 +07:00
parent 3d4babea93
commit 9747f300ac
13 changed files with 325 additions and 58 deletions

View File

@@ -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>