feat: 添加交易页面，更新路由配置，优化用户界面和样式

src/views/chat/index.vue

@@ -1,21 +1,23 @@
 <script setup lang="ts">
+import IcBaselinePermContactCalendar from "~icons/ic/baseline-perm-contact-calendar";
+import IcOutlineCleaningServices from "~icons/ic/outline-cleaning-services";
 </script>
 
 <template>
   <IonPage>
     <IonHeader>
-      <IonToolbar>
-        <IonTitle>Chat</IonTitle>
-      </IonToolbar>
+      <ion-toolbar class="ui-toolbar">
+        <ion-button slot="start" fill="clear" color="dark">
+          <IcOutlineCleaningServices slot="icon-only" />
+        </ion-button>
+        <ion-button slot="end" fill="clear" color="dark">
+          <IcBaselinePermContactCalendar slot="icon-only" />
+        </ion-button>
+        <ion-title>Chat</ion-title>
+      </ion-toolbar>
     </IonHeader>
     <IonContent :fullscreen="true">
-      <IonHeader collapse="condense">
-        <IonToolbar>
-          <IonTitle size="large">
-            Chat
-          </IonTitle>
-        </IonToolbar>
-      </IonHeader>
+      <ion-searchbar placeholder="Search" />
     </IonContent>
   </IonPage>
 </template>

src/views/onchain-address/index.vue

@@ -7,7 +7,7 @@ const { user } = useAuth();
 <template>
   <IonPage>
     <IonHeader>
-      <IonToolbar class="toolbar">
+      <IonToolbar class="ui-toolbar">
         <ion-buttons slot="start">
           <ion-back-button default-href="/layout/user" />
         </ion-buttons>

src/views/trade/index.vue

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

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

@@ -14,7 +14,7 @@ const { user } = useAuth();
         <div class="user-name">
           {{ user?.email }}
         </div>
-        <div class="user-uid">
+        <div class="user-uid mt-4px text-0.8rem">
           UID: 95223143 <ion-icon :icon="copyOutline" />
         </div>
       </div>
@@ -44,7 +44,6 @@ const { user } = useAuth();
 }
 .user-uid {
   color: var(--ion-text-secondary);
-  font-size: 0.9em;
   display: flex;
   align-items: end;
   gap: 4px;

src/views/user/index.vue

@@ -6,19 +6,21 @@ import WalletCard from "./components/wallet-card.vue";
 
 <template>
   <IonPage>
-    <ion-toolbar class="toolbar">
-      <div slot="end">
-        <ion-button fill="clear" color="dark">
-          <ion-icon slot="icon-only" :icon="scanOutline" />
-        </ion-button>
-        <ion-button fill="clear" color="dark">
-          <ion-icon slot="icon-only" :icon="notificationsOutline" />
-        </ion-button>
-        <ion-button fill="clear" color="dark">
-          <ion-icon slot="icon-only" :icon="settingsOutline" />
-        </ion-button>
-      </div>
-    </ion-toolbar>
+    <ion-header>
+      <ion-toolbar class="ui-toolbar">
+        <div slot="end">
+          <ion-button fill="clear" color="dark">
+            <ion-icon slot="icon-only" :icon="scanOutline" />
+          </ion-button>
+          <ion-button fill="clear" color="dark">
+            <ion-icon slot="icon-only" :icon="notificationsOutline" />
+          </ion-button>
+          <ion-button fill="clear" color="dark">
+            <ion-icon slot="icon-only" :icon="settingsOutline" />
+          </ion-button>
+        </div>
+      </ion-toolbar>
+    </ion-header>
     <IonContent :fullscreen="true" class="ion-padding">
       <UserInfo />
       <WalletCard />
@@ -26,8 +28,4 @@ import WalletCard from "./components/wallet-card.vue";
   </IonPage>
 </template>
 
-<style scoped>
-.toolbar {
-  --background: var(--ion-background-color);
-}
-</style>
+<style scoped></style>