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

src/components/layout/default.vue

@@ -8,19 +8,19 @@ import { ellipse, square, triangle } from "ionicons/icons";
     <IonTabs>
       <IonRouterOutlet />
       <IonTabBar slot="bottom">
-        <IonTabButton tab="tab1" href="/tabs/tab1">
+        <IonTabButton tab="home" href="/layout/home">
           <IonIcon aria-hidden="true" :icon="triangle" />
-          <IonLabel>Tab 1</IonLabel>
+          <IonLabel>Home</IonLabel>
         </IonTabButton>
 
-        <IonTabButton tab="tab2" href="/tabs/tab2">
+        <IonTabButton tab="market" href="/layout/market">
           <IonIcon aria-hidden="true" :icon="ellipse" />
-          <IonLabel>Tab 2</IonLabel>
+          <IonLabel>Market</IonLabel>
         </IonTabButton>
 
-        <IonTabButton tab="tab3" href="/tabs/tab3">
+        <IonTabButton tab="user" href="/layout/user">
           <IonIcon aria-hidden="true" :icon="square" />
-          <IonLabel>Tab 3</IonLabel>
+          <IonLabel>User</IonLabel>
         </IonTabButton>
       </IonTabBar>
     </IonTabs>

src/router/index.ts

@@ -1,31 +1,31 @@
 import type { RouteRecordRaw } from "vue-router";
 import { createRouter, createWebHistory } from "@ionic/vue-router";
-import TabsPage from "../views/TabsPage.vue";
+import Layout from "@/components/layout/default.vue";
 
 const routes: Array<RouteRecordRaw> = [
   {
     path: "/",
-    redirect: "/tabs/tab1",
+    redirect: "/layout/home",
   },
   {
-    path: "/tabs/",
+    path: "/layout/",
-    component: TabsPage,
+    component: Layout,
     children: [
       {
         path: "",
-        redirect: "/tabs/tab1",
+        redirect: "/layout/home",
       },
       {
-        path: "tab1",
+        path: "home",
-        component: () => import("@/views/Tab1Page.vue"),
+        component: () => import("@/views/home/index.vue"),
       },
       {
-        path: "tab2",
+        path: "market",
-        component: () => import("@/views/Tab2Page.vue"),
+        component: () => import("@/views/market/index.vue"),
       },
       {
-        path: "tab3",
+        path: "user",
-        component: () => import("@/views/Tab3Page.vue"),
+        component: () => import("@/views/user/index.vue"),
       },
     ],
   },

src/views/home/index.vue

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

src/views/market/index.vue

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

src/views/user/index.vue

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