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

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>