feat: 添加加密货币图标支持，优化资产展示组件

src/views/user/components/asset-balance.vue

@@ -5,7 +5,7 @@ const { t } = useI18n();
 </script>
 
 <template>
-  <div class="mt-10">
+  <div>
     <ion-label class="text-xs font-medium text-text-300">
       {{ t("asset.balance.assetBalance") }}
     </ion-label>

src/views/user/components/asset.vue

@@ -0,0 +1,38 @@
+<script lang='ts' setup>
+import { getCryptoIcon } from "@/config/crypto";
+
+const walletStore = useWalletStore();
+const { balances } = storeToRefs(walletStore);
+</script>
+
+<template>
+  <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="">
+        <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>
+        </div>
+        <div class="w-fit font-bold">
+          ${{ Number(asset.available) }}
+        </div>
+      </ion-item>
+    </ion-list>
+  </div>
+</template>
+
+<style lang='css' scoped>
+ion-item::part(native) {
+  --padding-start: 0;
+}
+</style>

src/views/user/components/issuing-asset.vue

@@ -5,7 +5,7 @@ const { t } = useI18n();
 </script>
 
 <template>
-  <div class="mt-10">
+  <div>
     <ion-label class="text-xs font-medium text-text-300">
       {{ t("asset.issue.issuingAsset") }}
     </ion-label>

src/views/user/components/my-revenue.vue

@@ -5,7 +5,7 @@ const { t } = useI18n();
 </script>
 
 <template>
-  <div class="mt-10">
+  <div>
     <ion-label class="text-xs font-medium text-text-300">
       {{ t("asset.revenue.myRevenue") }}
     </ion-label>

src/views/user/components/trade-settings.vue

@@ -5,7 +5,7 @@ const { t } = useI18n();
 </script>
 
 <template>
-  <div class="mt-10">
+  <div>
     <ion-label class="text-xs font-medium text-text-300">
       {{ t('trade.title') }}
     </ion-label>

src/views/user/components/user-info.vue

@@ -43,7 +43,7 @@ const { user } = useAuth();
 .user-uid {
   color: var(--ion-text-secondary);
   display: flex;
-  align-items: end;
+  align-items: center;
   gap: 4px;
 }
 .link {

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

@@ -1,4 +1,5 @@
 <script lang='ts' setup>
+import { eyeOffOutline, eyeOutline } from "ionicons/icons";
 import IcRoundArrowCircleDown from "~icons/ic/round-arrow-circle-down";
 import IcRoundArrowCircleUp from "~icons/ic/round-arrow-circle-up";
 import RechargeChannel from "./recharge-channel.vue";
@@ -8,6 +9,10 @@ const router = useRouter();
 const walletStore = useWalletStore();
 const { balances } = 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);
+});
 
 function onCloseModal() {
   rechargeInstance.value?.$el.dismiss(null, "confirm");
@@ -22,21 +27,32 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="mt-5 shadow-md rounded-lg overflow-hidden">
-    <div class="grid grid-cols-1 gap-5 p-5 bg-(--ion-card-background)">
-      <div v-for="item in balances" :key="item.assetCode" class="flex flex-col gap-1">
-        <div class="uppercase text-xs text-text-400 font-medium tracking-[0.4px]">
-          {{ item.assetCode }}
-        </div>
-        <div class="text-lg font-bold">
-          {{ formatBalance(item.available) }}
-        </div>
+  <div class="flex flex-col gap-1">
+    <div class="text-sm text-gray-500 flex items-center gap-2" @click="totalBalanceVisible = !totalBalanceVisible">
+      <div>Est total value</div>
+      <ion-icon :icon="totalBalanceVisible ? eyeOffOutline : eyeOutline" />
+    </div>
+    <div class="flex items-end gap-2">
+      <div class="text-2xl font-bold">
+        {{ totalBalanceVisible ? totalBalance : Array(totalBalance.toString().length).fill("*").join("") }}
+      </div>
+      <div class="text-md font-bold">
+        USDT
       </div>
     </div>
   </div>
 
-  <div class="flex mt-7 gap-10">
-    <div id="open-recharge-modal" class="flex-col-center">
+  <div class="flex gap-10 w-full">
+    <ion-button id="open-recharge-modal" expand="full" color="success" shape="round" class="w-full min-h-10 h-10">
+      <IcRoundArrowCircleDown slot="start" />
+      {{ t("wallet.recharge") }}
+    </ion-button>
+
+    <ion-button expand="full" color="success" shape="round" class="w-full min-h-10 h-10" @click="handleWithdraw">
+      <IcRoundArrowCircleUp slot="start" />
+      {{ t("wallet.withdraw") }}
+    </ion-button>
+    <!-- <div id="open-recharge-modal" class="flex-col-center">
       <ion-ripple-effect />
       <ion-button shape="round" color="success" size="large">
         <IcRoundArrowCircleDown slot="icon-only" />
@@ -54,7 +70,7 @@ onMounted(() => {
       <div class="text-center mt-2 text-sm font-medium text-text-500">
         {{ t("wallet.withdraw") }}
       </div>
-    </div>
+    </div> -->
   </div>
 
   <ion-modal ref="rechargeInstance" class="recharge-channel-modal" trigger="open-recharge-modal" :initial-breakpoint="1" :breakpoints="[0, 1]">