root/riwa-ionic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Seven
2025-12-13 17:39:59 +07:00
parent 378514c7b9
commit b86f257e38
9 changed files with 67 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components.d.ts vendored
View File

@@ -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']

7
src/components/layout/default.vue
View File

@@ -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>

4
src/router/index.ts
View File

@@ -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"),

4
src/theme/variables.css
View File

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

22
src/views/chat/index.vue
View File

@@ -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>

2
src/views/onchain-address/index.vue
View File

@@ -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>

21
src/views/trade/index.vue Normal file
View File

@@ -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>

3
src/views/user/components/user-info.vue
View File

@@ -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;

34
src/views/user/index.vue
View File

@@ -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>