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

2025-12-17 15:52:24 +07:00
parent 90a1c129ad
commit ef76de7a5c
13 changed files with 111 additions and 32 deletions
--- a/components.d.ts
+++ b/components.d.ts
@@ -39,6 +39,8 @@ declare module 'vue' {
    IonRippleEffect: typeof import('@ionic/vue')['IonRippleEffect']
    IonRouterOutlet: typeof import('@ionic/vue')['IonRouterOutlet']
    IonSearchbar: typeof import('@ionic/vue')['IonSearchbar']
+    IonSegment: typeof import('@ionic/vue')['IonSegment']
+    IonSegmentButton: typeof import('@ionic/vue')['IonSegmentButton']
    IonSelect: typeof import('@ionic/vue')['IonSelect']
    IonSelectOption: typeof import('@ionic/vue')['IonSelectOption']
    IonTabBar: typeof import('@ionic/vue')['IonTabBar']
@@ -89,6 +91,8 @@ declare global {
  const IonRippleEffect: typeof import('@ionic/vue')['IonRippleEffect']
  const IonRouterOutlet: typeof import('@ionic/vue')['IonRouterOutlet']
  const IonSearchbar: typeof import('@ionic/vue')['IonSearchbar']
+  const IonSegment: typeof import('@ionic/vue')['IonSegment']
+  const IonSegmentButton: typeof import('@ionic/vue')['IonSegmentButton']
  const IonSelect: typeof import('@ionic/vue')['IonSelect']
  const IonSelectOption: typeof import('@ionic/vue')['IonSelectOption']
  const IonTabBar: typeof import('@ionic/vue')['IonTabBar']
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
  "devDependencies": {
    "@antfu/eslint-config": "^6.6.1",
    "@capacitor/cli": "8.0.0",
+    "@iconify-json/cryptocurrency-color": "^1.2.4",
    "@iconify-json/ic": "^1.2.4",
    "@iconify-json/material-icon-theme": "^1.2.44",
    "@iconify/vue": "^5.0.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -87,6 +87,9 @@ importers:
      '@capacitor/cli':
        specifier: 8.0.0
        version: 8.0.0
+      '@iconify-json/cryptocurrency-color':
+        specifier: ^1.2.4
+        version: 1.2.4
      '@iconify-json/ic':
        specifier: ^1.2.4
        version: 1.2.4
@@ -1106,6 +1109,9 @@ packages:
    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
    engines: {node: '>=18.18'}

+  '@iconify-json/cryptocurrency-color@1.2.4':
+    resolution: {integrity: sha512-8vjIfTAAMg0zo3/CdVWV7YjViY1L/q4TFfjROmqRPCRPhM6iVecW4TzMFS8hxm48S2Ge69SNM1yC8FmHT+jfHw==}
+
  '@iconify-json/ic@1.2.4':
    resolution: {integrity: sha512-pzPMmrZrBQuwT7nmtrYdkttun8KalRGgZPIL1Ny9KpF2zjRGIUPN+npTfuD3lrgO/OnSwAoJWuekQwBpt/Cqrw==}

@@ -5677,6 +5683,10 @@ snapshots:

  '@humanwhocodes/retry@0.4.3': {}

+  '@iconify-json/cryptocurrency-color@1.2.4':
+    dependencies:
+      '@iconify/types': 2.0.0
+
  '@iconify-json/ic@1.2.4':
    dependencies:
      '@iconify/types': 2.0.0
--- a/src/components/ui/avatar/index.vue
+++ b/src/components/ui/avatar/index.vue
@@ -3,7 +3,7 @@
 <template>
  <ion-avatar v-bind="$attrs">
    <img
-      src="https://api.iconify.design/material-icon-theme:bruno.svg"
+      src="https://api.iconify.design/material-icon-theme:remix-light.svg"
      alt="Avatar"
    >
  </ion-avatar>
@@ -11,11 +11,7 @@

 <style lang='css' scoped>
 ion-avatar {
-  background-color: #7e5cff;
-}
-@media (prefers-color-scheme: dark) {
-  ion-avatar {
-    background-color: #7e5cff;
-  }
+  background-color: var(--ion-color-success);
+  padding: 10px;
 }
 </style>
--- a/src/config/crypto.ts
+++ b/src/config/crypto.ts
@@ -0,0 +1,13 @@
+import CryptocurrencyColorGeneric from "~icons/cryptocurrency-color/generic";
+import CryptocurrencyColorTrx from "~icons/cryptocurrency-color/trx";
+import CryptocurrencyColorUsdt from "~icons/cryptocurrency-color/usdt";
+
+export const CryptoIcons = {
+  USDT: CryptocurrencyColorUsdt,
+  TRX: CryptocurrencyColorTrx,
+  OPTS: CryptocurrencyColorGeneric,
+};
+
+export function getCryptoIcon(symbol: string) {
+  return CryptoIcons[symbol as keyof typeof CryptoIcons] || CryptocurrencyColorGeneric;
+}
--- a/src/views/user/components/asset-balance.vue
+++ b/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>
--- a/src/views/user/components/asset.vue
+++ b/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>
--- a/src/views/user/components/issuing-asset.vue
+++ b/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>
--- a/src/views/user/components/my-revenue.vue
+++ b/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>
--- a/src/views/user/components/trade-settings.vue
+++ b/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>
--- a/src/views/user/components/user-info.vue
+++ b/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 {
--- a/src/views/user/components/wallet-card.vue
+++ b/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]">
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { notificationsOutline, scanOutline, settingsOutline } from "ionicons/icons";
-import AssetBalance from "./components/asset-balance.vue";
+import Asset from "./components/asset.vue";
 import IssuingAsset from "./components/issuing-asset.vue";
 import MyRevenue from "./components/my-revenue.vue";
-import PurchaseAsset from "./components/purchase-asset.vue";
 import TradeSettings from "./components/trade-settings.vue";
 import UserInfo from "./components/user-info.vue";
 import WalletCard from "./components/wallet-card.vue";
@@ -27,12 +26,14 @@ import WalletCard from "./components/wallet-card.vue";
      </ion-toolbar>
    </ion-header>
    <IonContent :fullscreen="true" class="ion-padding">
-      <UserInfo />
-      <WalletCard />
-      <IssuingAsset />
-      <!-- <PurchaseAsset /> -->
-      <MyRevenue />
-      <TradeSettings />
+      <div class="flex flex-col space-y-5">
+        <UserInfo />
+        <WalletCard />
+        <Asset />
+        <IssuingAsset />
+        <MyRevenue />
+        <TradeSettings />
+      </div>
    </IonContent>
  </IonPage>
 </template>