feat: 添加聊天页面和钱包卡组件，优化用户界面和余额格式化逻辑

auto-imports.d.ts

@@ -35,6 +35,7 @@ declare global {
   const effectScope: typeof import('vue').effectScope
   const emailPattern: typeof import('./src/utils/pattern').emailPattern
   const extendRef: typeof import('@vueuse/core').extendRef
+  const formatBalance: typeof import('./src/utils/helper').formatBalance
   const getCurrentInstance: typeof import('vue').getCurrentInstance
   const getCurrentScope: typeof import('vue').getCurrentScope
   const getCurrentWatcher: typeof import('vue').getCurrentWatcher
@@ -343,6 +344,7 @@ declare module 'vue' {
     readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
     readonly emailPattern: UnwrapRef<typeof import('./src/utils/pattern')['emailPattern']>
     readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
+    readonly formatBalance: UnwrapRef<typeof import('./src/utils/helper')['formatBalance']>
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
     readonly getCurrentWatcher: UnwrapRef<typeof import('vue')['getCurrentWatcher']>

components.d.ts

@@ -17,6 +17,11 @@ declare module 'vue' {
     IonAvatar: typeof import('@ionic/vue')['IonAvatar']
     IonButton: typeof import('@ionic/vue')['IonButton']
     IonButtons: typeof import('@ionic/vue')['IonButtons']
+    IonCard: typeof import('@ionic/vue')['IonCard']
+    IonCardContent: typeof import('@ionic/vue')['IonCardContent']
+    IonCardHeader: typeof import('@ionic/vue')['IonCardHeader']
+    IonCardSubtitle: typeof import('@ionic/vue')['IonCardSubtitle']
+    IonCardTitle: typeof import('@ionic/vue')['IonCardTitle']
     IonContent: typeof import('@ionic/vue')['IonContent']
     IonHeader: typeof import('@ionic/vue')['IonHeader']
     IonIcon: typeof import('@ionic/vue')['IonIcon']
@@ -46,6 +51,11 @@ declare global {
   const IonAvatar: typeof import('@ionic/vue')['IonAvatar']
   const IonButton: typeof import('@ionic/vue')['IonButton']
   const IonButtons: typeof import('@ionic/vue')['IonButtons']
+  const IonCard: typeof import('@ionic/vue')['IonCard']
+  const IonCardContent: typeof import('@ionic/vue')['IonCardContent']
+  const IonCardHeader: typeof import('@ionic/vue')['IonCardHeader']
+  const IonCardSubtitle: typeof import('@ionic/vue')['IonCardSubtitle']
+  const IonCardTitle: typeof import('@ionic/vue')['IonCardTitle']
   const IonContent: typeof import('@ionic/vue')['IonContent']
   const IonHeader: typeof import('@ionic/vue')['IonHeader']
   const IonIcon: typeof import('@ionic/vue')['IonIcon']

src/components/layout/default.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ellipse, square, triangle } from "ionicons/icons";
+import { cellular, chatboxEllipses, compass, personCircle } from "ionicons/icons";
 </script>
 
 <template>
@@ -8,17 +8,22 @@ import { ellipse, square, triangle } from "ionicons/icons";
       <IonRouterOutlet />
       <IonTabBar slot="bottom" class="tabbar">
         <IonTabButton tab="riwa" href="/layout/riwa">
-          <IonIcon aria-hidden="true" :icon="triangle" />
+          <IonIcon aria-hidden="true" :icon="compass" />
           <IonLabel>Riwa</IonLabel>
         </IonTabButton>
 
         <IonTabButton tab="market" href="/layout/market">
-          <IonIcon aria-hidden="true" :icon="ellipse" />
+          <IonIcon aria-hidden="true" :icon="cellular" />
           <IonLabel>Market</IonLabel>
         </IonTabButton>
 
+        <IonTabButton tab="chat" href="/layout/chat">
+          <IonIcon aria-hidden="true" :icon="chatboxEllipses" />
+          <IonLabel>Chat</IonLabel>
+        </IonTabButton>
+
         <IonTabButton tab="user" href="/layout/user">
-          <IonIcon aria-hidden="true" :icon="square" />
+          <IonIcon aria-hidden="true" :icon="personCircle" />
           <IonLabel>User</IonLabel>
         </IonTabButton>
       </IonTabBar>

src/router/index.ts

@@ -18,6 +18,10 @@ const routes: Array<RouteRecordRaw> = [
         path: "market",
         component: () => import("@/views/market/index.vue"),
       },
+      {
+        path: "chat",
+        component: () => import("@/views/chat/index.vue"),
+      },
       {
         path: "user",
         component: () => import("@/views/user/index.vue"),

src/utils/helper.ts

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

src/views/chat/index.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <IonPage>
+    <IonHeader>
+      <IonToolbar>
+        <IonTitle>Chat</IonTitle>
+      </IonToolbar>
+    </IonHeader>
+    <IonContent :fullscreen="true">
+      <IonHeader collapse="condense">
+        <IonToolbar>
+          <IonTitle size="large">
+            Chat
+          </IonTitle>
+        </IonToolbar>
+      </IonHeader>
+    </IonContent>
+  </IonPage>
+</template>

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

@@ -0,0 +1,27 @@
+<script lang='ts' setup>
+const balance = ref(9999999.00);
+
+const formattedBalance = formatBalance(balance);
+</script>
+
+<template>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>{{ formattedBalance }}</ion-card-title>
+      <ion-card-subtitle>Wallet</ion-card-subtitle>
+    </ion-card-header>
+
+    <!-- <ion-card-content>
+      Here's a small text description for the card content. Nothing more, nothing less.
+    </ion-card-content> -->
+
+    <ion-button fill="clear">
+      Recharge
+    </ion-button>
+    <ion-button fill="clear">
+      Withdrawal
+    </ion-button>
+  </ion-card>
+</template>
+
+<style scoped></style>

src/views/user/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { notificationsOutline, scanOutline, settingsOutline } from "ionicons/icons";
 import UserInfo from "./components/user-info.vue";
+import WalletCard from "./components/wallet-card.vue";
 </script>
 
 <template>
@@ -20,12 +21,13 @@ import UserInfo from "./components/user-info.vue";
     </ion-toolbar>
     <IonContent :fullscreen="true" class="ion-padding">
       <UserInfo />
+      <WalletCard />
     </IonContent>
   </IonPage>
 </template>
 
 <style scoped>
 .toolbar {
-  --background: white;
+  --background: var(--ion-background-color);
 }
 </style>