feat: 更新钱包状态管理，优化资产获取逻辑，支持资金和交易账户的分离

src/views/user/components/asset.vue

@@ -1,17 +1,44 @@
 <script lang='ts' setup>
+import SolarDollarMinimalisticBoldDuotone from "~icons/solar/dollar-minimalistic-bold-duotone";
+import SolarRoundTransferHorizontalBoldDuotone from "~icons/solar/round-transfer-horizontal-bold-duotone";
 import { getCryptoIcon } from "@/config/crypto";
 
 const walletStore = useWalletStore();
-const { balances } = storeToRefs(walletStore);
+const { fundingBalances, totalAssetValue } = storeToRefs(walletStore);
 </script>
 
 <template>
   <div>
+    <ion-label class="text-xs font-medium text-text-300">
+      Asset Distribution
+    </ion-label>
+
+    <div class="grid grid-cols-2 gap-4 mt-2">
+      <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>
+      <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>
+    </div>
+
     <ion-label class="text-xs font-medium text-text-300">
       Asset
     </ion-label>
     <ion-list lines="none" class="space-y-5 mt-2!">
-      <ion-item v-for="asset, i in balances" :key="i" class="">
+      <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">
@@ -32,7 +59,16 @@ const { balances } = storeToRefs(walletStore);
 </template>
 
 <style lang='css' scoped>
+@reference "tailwindcss";
+
 ion-item::part(native) {
   --padding-start: 0;
 }
+.asset-card {
+  @apply flex flex-col justify-between py-2 px-4 bg-gray-100  rounded-lg mb-3 gap-2;
+}
+
+.ion-palette-dark .asset-card {
+  @apply bg-[#151515];
+}
 </style>

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

@@ -8,12 +8,10 @@ import RechargeChannel from "./recharge-channel.vue";
 const { t } = useI18n();
 const router = useRouter();
 const walletStore = useWalletStore();
-const { balances } = storeToRefs(walletStore);
+const { totalAssetValue } = storeToRefs(walletStore);
 const rechargeInstance = ref<ModalInstance>();
 const totalBalanceVisible = useStorage("total-balances-visible", true);
-const totalBalance = computed(() => {
-  return balances.value.reduce((acc, item) => acc + Number(item.available), 0);
-});
+const totalAsset = computed(() => Number(totalAssetValue.value.totalValueUsd).toFixed(2));
 
 function onCloseModal() {
   rechargeInstance.value?.$el.dismiss(null, "confirm");
@@ -26,7 +24,8 @@ function handleBill() {
 }
 
 onMounted(() => {
-  walletStore.updateBalances();
+  walletStore.syncFundingBalances();
+  walletStore.syncTradingBalances();
 });
 </script>
 
@@ -38,7 +37,7 @@ onMounted(() => {
     </div>
     <div class="flex items-end gap-2">
       <div class="text-2xl font-bold">
-        {{ totalBalanceVisible ? totalBalance : Array(totalBalance.toString().length).fill("*").join("") }}
+        {{ totalBalanceVisible ? totalAsset : Array(totalAsset.toString().length).fill("*").join("") }}
       </div>
       <div class="text-md font-bold">
         USDT