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

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>