feat: 添加后退按钮组件并更新认证路由和视图

components.d.ts

@@ -12,6 +12,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    BackButton: typeof import('./src/components/back-button.vue')['default']
     IonApp: typeof import('@ionic/vue')['IonApp']
     IonButton: typeof import('@ionic/vue')['IonButton']
     IonContent: typeof import('@ionic/vue')['IonContent']
@@ -33,6 +34,7 @@ declare module 'vue' {
 
 // For TSX support
 declare global {
+  const BackButton: typeof import('./src/components/back-button.vue')['default']
   const IonApp: typeof import('@ionic/vue')['IonApp']
   const IonButton: typeof import('@ionic/vue')['IonButton']
   const IonContent: typeof import('@ionic/vue')['IonContent']

src/components/back-button.vue

@@ -0,0 +1,28 @@
+<script lang='ts' setup>
+import { chevronBackOutline } from "ionicons/icons";
+
+const { text = "返回" } = defineProps<{
+  text?: string;
+}>();
+const router = useRouter();
+
+function onBack() {
+  if (window.history.length > 1) {
+    router.back();
+  }
+  else {
+    router.replace("/");
+  }
+}
+</script>
+
+<template>
+  <button class="z-1 flex items-center" @click="onBack">
+    <slot name="icon">
+      <ion-icon :icon="chevronBackOutline" class="text-2xl" />
+    </slot>
+    <span v-if="text" class="text-base">{{ text }}</span>
+  </button>
+</template>
+
+<style lang='css' scoped></style>

src/router/auth.ts

@@ -3,11 +3,11 @@ import type { RouteRecordRaw } from "vue-router";
 const routes: Array<RouteRecordRaw> = [
   {
     path: "/auth/login",
-    component: () => import("@/views/auth/login/index.vue"),
+    component: () => import("@/views/auth/login.vue"),
   },
   {
     path: "/auth/signup",
-    component: () => import("@/views/auth/signup/index.vue"),
+    component: () => import("@/views/auth/signup.vue"),
   },
   {
     path: "/auth/term",

src/router/index.ts

@@ -12,7 +12,7 @@ const routes: Array<RouteRecordRaw> = [
     path: "/:pathMatch(.*)*",
     redirect: "/layout/home",
   },
-  // ...authRoutes,
+  ...authRoutes,
   {
     path: "/layout",
     component: () => import("@/components/layout/default.vue"),

src/views/auth/login.vue

@@ -0,0 +1,22 @@
+<script lang='ts' setup>
+
+</script>
+
+<template>
+  <ion-page>
+    <ion-header class="ion-no-border">
+      <ion-toolbar class="ion-toolbar">
+        <back-button slot="start" />
+        <ion-title>登录</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content :fullscreen="true" class="ion-padding">
+      <div class="max-w-md mx-auto flex flex-col gap-6">
+        <!-- 登录表单内容省略 -->
+      </div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<style lang='css' scoped></style>

src/views/auth/signup.vue

@@ -0,0 +1,22 @@
+<script lang='ts' setup>
+
+</script>
+
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar class="ion-toolbar">
+        <back-button slot="start" />
+        <ion-title>登录</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content :fullscreen="true" class="ion-padding">
+      <div class="max-w-md mx-auto flex flex-col gap-6">
+        <!-- 登录表单内容省略 -->
+      </div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<style lang='css' scoped></style>

src/views/auth/term.vue

@@ -0,0 +1,62 @@
+<script lang='ts' setup>
+</script>
+
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar class="ion-toolbar">
+        <back-button slot="start" />
+        <ion-title>服务条款</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content :fullscreen="true" class="ion-padding">
+      <div class="max-w-4xl mx-auto">
+        <!-- 最后更新时间 -->
+        <div class="mb-6 text-sm text-(--ion-color-medium)">
+          2024-06-01
+        </div>
+
+        <!-- 引言 -->
+        <section class="mb-8">
+          <p class="text-base leading-relaxed">
+            欢迎使用我们的服务。在使用本平台之前，请仔细阅读以下服务条款。使用本服务即表示您同意遵守这些条款。
+          </p>
+        </section>
+
+        <!-- 服务条款内容 -->
+        <section class="mb-8">
+          <h2 class="text-lg font-semibold mb-4">
+            1. 服务说明
+          </h2>
+          <div class="space-y-3">
+            <p class="text-sm leading-relaxed text-(--ion-color-step-600)">
+              我们提供一个在线平台，允许用户进行金融交易和管理个人账户。我们保留随时修改或终止服务的权利，恕不另行通知。
+            </p>
+          </div>
+        </section>
+
+        <!-- 联系信息 -->
+        <section class="mt-12 pt-6 border-t border-(--ion-color-step-150)">
+          <h2 class="text-lg font-semibold mb-4">
+            联系我们
+          </h2>
+          <p class="text-sm leading-relaxed text-(--ion-color-step-600)">
+            如果您对这些服务条款有任何疑问或需要进一步的信息，请通过以下方式联系我们：
+          </p>
+          <div class="mt-4 space-y-2">
+            <div class="text-sm">
+              <span class="text-(--ion-color-medium)">电子邮件:</span>
+              <a href="mailto:support@example.com" class="ml-2 text-(--ion-color-primary)">
+                support@example.com
+              </a>
+            </div>
+          </div>
+        </section>
+      </div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<style lang='css' scoped>
+</style>