chore: 重构路由和视图,移除旧的标签页并添加新的布局和页面

This commit is contained in:
2025-12-11 13:25:56 +07:00
parent 508275403a
commit d2b796e434
5 changed files with 31 additions and 27 deletions

View File

@@ -1,28 +0,0 @@
<script setup lang="ts">
import { IonIcon, IonLabel, IonPage, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from "@ionic/vue";
import { ellipse, square, triangle } from "ionicons/icons";
</script>
<template>
<IonPage>
<IonTabs>
<IonRouterOutlet />
<IonTabBar slot="bottom">
<IonTabButton tab="tab1" href="/tabs/tab1">
<IonIcon aria-hidden="true" :icon="triangle" />
<IonLabel>Tab 1</IonLabel>
</IonTabButton>
<IonTabButton tab="tab2" href="/tabs/tab2">
<IonIcon aria-hidden="true" :icon="ellipse" />
<IonLabel>Tab 2</IonLabel>
</IonTabButton>
<IonTabButton tab="tab3" href="/tabs/tab3">
<IonIcon aria-hidden="true" :icon="square" />
<IonLabel>Tab 3</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
</IonPage>
</template>

View File

@@ -1,25 +1,29 @@
<script setup lang="ts">
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from "@ionic/vue";
import { IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from "@ionic/vue";
import { ref } from "vue";
import { authClient } from "@/auth";
import ExploreContainer from "@/components/ExploreContainer.vue";
const res = ref(null);
</script>
<template>
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Tab 3</IonTitle>
<IonTitle>Home</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent :fullscreen="true">
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">
Tab 3
Home
</IonTitle>
</IonToolbar>
</IonHeader>
<ExploreContainer name="Tab 3 page" />
<ExploreContainer name="Home page" />
</IonContent>
</IonPage>
</template>

View File

@@ -7,19 +7,19 @@ import ExploreContainer from "@/components/ExploreContainer.vue";
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Tab 2</IonTitle>
<IonTitle>Market</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent :fullscreen="true">
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">
Tab 2
Market
</IonTitle>
</IonToolbar>
</IonHeader>
<ExploreContainer name="Tab 2 page" />
<ExploreContainer name="Market page" />
</IonContent>
</IonPage>
</template>

View File

@@ -7,19 +7,19 @@ import ExploreContainer from "@/components/ExploreContainer.vue";
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Tab 1</IonTitle>
<IonTitle>User</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent :fullscreen="true">
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">
Tab 1
User
</IonTitle>
</IonToolbar>
</IonHeader>
<ExploreContainer name="Tab 1 page" />
<ExploreContainer name="User page" />
</IonContent>
</IonPage>
</template>