feat: 更新余额格式化逻辑，优化钱包卡片组件以显示资产余额

src/utils/helper.ts

@@ -1,6 +1,11 @@
-export function formatBalance(amount: MaybeRefOrGetter<number>, locale: Intl.LocalesArgument = "en-US"): ComputedRef<string> {
+export function formatBalance(amount: MaybeRefOrGetter<number | string>, locale: Intl.LocalesArgument = "en-US"): string {
-  return computed(() => {
+  let value = toValue(amount);
-    const balance = toValue(amount);
+  if (!value) {
-    return `$${balance.toLocaleString(locale, { minimumFractionDigits: 0, maximumFractionDigits: 2 })}`;
+    value = 0;
-  });
+  }
+  if (typeof value === "string" && !Number.isNaN(Number(value))) {
+    value = 0;
+  }
+
+  return value.toLocaleString(locale, { minimumFractionDigits: 0, maximumFractionDigits: 2 });
 }

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

@@ -2,30 +2,18 @@
 import { client } from "@/api";
 
 const { t } = useI18n();
-
-const balance = ref(9999999);
-
-const formattedBalance = formatBalance(balance);
 const { data } = await client.api.asset.balances.get();
 </script>
 
 <template>
   <div class="mt-20px">
     <div class="grid grid-cols-2 gap-20px p-20px bg-[var(--ion-card-background)] rounded-t-6px">
-      <div class="flex flex-col gap-4px">
+      <div v-for="item in data" :key="item.assetCode" class="flex flex-col gap-4px">
         <div class="ion-text-uppercase text-xs color-text-400 font-500 tracking-0.4px">
-          {{ t('wallet.balance') }}
+          {{ item.assetCode }}
         </div>
         <div class="text-lg font-bold">
-          {{ formattedBalance }}
+          {{ formatBalance(item.available) }}
-        </div>
-      </div>
-      <div class="flex flex-col gap-4px">
-        <div class="ion-text-uppercase text-xs color-text-400 font-500 tracking-0.4px">
-          {{ t('wallet.balance') }}
-        </div>
-        <div class="text-lg font-bold">
-          {{ formattedBalance }}
         </div>
       </div>
     </div>