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

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>