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

components.d.ts

@@ -29,6 +29,7 @@ declare module 'vue' {
     IonLabel: typeof import('@ionic/vue')['IonLabel']
     IonPage: typeof import('@ionic/vue')['IonPage']
     IonRouterOutlet: typeof import('@ionic/vue')['IonRouterOutlet']
+    IonSearchbar: typeof import('@ionic/vue')['IonSearchbar']
     IonTabBar: typeof import('@ionic/vue')['IonTabBar']
     IonTabButton: typeof import('@ionic/vue')['IonTabButton']
     IonTabs: typeof import('@ionic/vue')['IonTabs']
@@ -63,6 +64,7 @@ declare global {
   const IonLabel: typeof import('@ionic/vue')['IonLabel']
   const IonPage: typeof import('@ionic/vue')['IonPage']
   const IonRouterOutlet: typeof import('@ionic/vue')['IonRouterOutlet']
+  const IonSearchbar: typeof import('@ionic/vue')['IonSearchbar']
   const IonTabBar: typeof import('@ionic/vue')['IonTabBar']
   const IonTabButton: typeof import('@ionic/vue')['IonTabButton']
   const IonTabs: typeof import('@ionic/vue')['IonTabs']

src/components/layout/default.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cellular, chatboxEllipses, compass, personCircle } from "ionicons/icons";
+import { cellular, chatboxEllipses, compass, personCircle, swapHorizontal } from "ionicons/icons";
 </script>
 
 <template>
@@ -17,6 +17,11 @@ import { cellular, chatboxEllipses, compass, personCircle } from "ionicons/icons
           <IonLabel>Market</IonLabel>
         </IonTabButton>
 
+        <IonTabButton tab="trade" href="/layout/trade">
+          <IonIcon aria-hidden="true" :icon="swapHorizontal" />
+          <IonLabel>Trade</IonLabel>
+        </IonTabButton>
+
         <IonTabButton tab="chat" href="/layout/chat">
           <IonIcon aria-hidden="true" :icon="chatboxEllipses" />
           <IonLabel>Chat</IonLabel>

src/router/index.ts

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

src/theme/variables.css

@@ -81,3 +81,7 @@ http://ionicframework.com/docs/theming/ */
     --ui-input-color: #ffffff;
   }
 }
+
+.ui-toolbar {
+  --background: var(--ion-color-primary-contrast);
+}

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>
+      <ion-toolbar class="ui-toolbar">
-        <IonTitle>Chat</IonTitle>
+        <ion-button slot="start" fill="clear" color="dark">
-      </IonToolbar>
+          <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">
+      <ion-searchbar placeholder="Search" />
-        <IonToolbar>
-          <IonTitle size="large">
-            Chat
-          </IonTitle>
-        </IonToolbar>
-      </IonHeader>
     </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">
+    <ion-header>
-      <div slot="end">
+      <ion-toolbar class="ui-toolbar">
-        <ion-button fill="clear" color="dark">
+        <div slot="end">
-          <ion-icon slot="icon-only" :icon="scanOutline" />
+          <ion-button fill="clear" color="dark">
-        </ion-button>
+            <ion-icon slot="icon-only" :icon="scanOutline" />
-        <ion-button fill="clear" color="dark">
+          </ion-button>
-          <ion-icon slot="icon-only" :icon="notificationsOutline" />
+          <ion-button fill="clear" color="dark">
-        </ion-button>
+            <ion-icon slot="icon-only" :icon="notificationsOutline" />
-        <ion-button fill="clear" color="dark">
+          </ion-button>
-          <ion-icon slot="icon-only" :icon="settingsOutline" />
+          <ion-button fill="clear" color="dark">
-        </ion-button>
+            <ion-icon slot="icon-only" :icon="settingsOutline" />
-      </div>
+          </ion-button>
-    </ion-toolbar>
+        </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>
+<style scoped></style>
-.toolbar {
-  --background: var(--ion-background-color);
-}
-</style>