feat: 添加用户设置功能，支持修改昵称和邮箱，重构相关路由和组件

src/views/user-settings/index.vue

@@ -0,0 +1,155 @@
+<script lang='ts' setup>
+import { alertController } from "@ionic/vue";
+import { arrowBackOutline } from "ionicons/icons";
+import TdesignCopy from "~icons/tdesign/copy";
+import { authClient } from "@/auth";
+
+const router = useRouter();
+const userStore = useUserStore();
+
+async function handleSignOut() {
+  const alert = await alertController.create({
+    header: "Sign Out",
+    message: "Are you sure you want to sign out?",
+    buttons: [
+      {
+        text: "Cancel",
+        role: "cancel",
+      },
+      {
+        text: "Sign Out",
+        role: "destructive",
+        handler: async () => {
+          authClient.signOut();
+          router.replace("/layout/riwa");
+        },
+      },
+    ],
+  });
+
+  await alert.present();
+}
+</script>
+
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar class="ui-toolbar">
+        <ion-buttons slot="start">
+          <ion-button @click="$router.back()">
+            <ion-icon slot="icon-only" :icon="arrowBackOutline" />
+          </ion-button>
+        </ion-buttons>
+        <ion-title>用户设置</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content :fullscreen="true" class="ion-padding">
+      <div class="flex flex-col items-center justify-center py-5">
+        <div class="relative">
+          <ui-avatar class="size-25" />
+        </div>
+      </div>
+
+      <ion-list class="mt-5" lines="full">
+        <!-- uid -->
+        <ion-item>
+          <div class="flex justify-between w-full items-center">
+            <div class="flex-center space-x-2">
+              <div class="text-sm font-semibold">
+                UID
+              </div>
+            </div>
+            <div class="end">
+              <div>54213213</div>
+              <TdesignCopy />
+            </div>
+          </div>
+        </ion-item>
+        <!-- username -->
+        <!-- <ion-item button @click="router.push('/user/settings/username')">
+          <div class="flex justify-between w-full items-center">
+            <div class="flex-center space-x-2">
+              <div class="text-sm font-semibold">
+                用户名
+              </div>
+            </div>
+            <div class="end">
+              {{ userStore.state.session?.username }}
+            </div>
+          </div>
+        </ion-item> -->
+        <!-- nickname -->
+        <ion-item button @click="router.push('/user/settings/nickname')">
+          <div class="flex justify-between w-full items-center">
+            <div class="flex-center space-x-2">
+              <div class="text-sm font-semibold">
+                昵称
+              </div>
+            </div>
+            <div class="end">
+              {{ userStore.state.userProfile?.nickname }}
+            </div>
+          </div>
+        </ion-item>
+        <!-- email -->
+        <ion-item button @click="router.push('/user/settings/email')">
+          <div class="flex justify-between w-full items-center">
+            <div class="flex-center space-x-2">
+              <div class="text-sm font-semibold">
+                邮箱
+              </div>
+            </div>
+            <div class="end">
+              {{ userStore.state.session?.email }}
+            </div>
+          </div>
+        </ion-item>
+        <!-- password -->
+        <!-- <ion-item button @click="router.push('/user/settings/password')">
+          <div class="flex justify-between w-full items-center">
+            <div class="flex-center space-x-2">
+              <div class="text-sm font-semibold">
+                修改密码
+              </div>
+            </div>
+          </div>
+        </ion-item> -->
+      </ion-list>
+
+      <!-- Action Buttons -->
+      <div class="mt-10">
+        <ion-button expand="block" color="tertiary" @click="handleSignOut">
+          Sign Out
+        </ion-button>
+      </div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<style lang='css' scoped>
+@reference "tailwindcss";
+
+ion-avatar {
+  --border-radius: 50%;
+}
+ion-item {
+  --padding-start: 0;
+  --padding-end: 0;
+  --padding-top: 6px;
+  --padding-bottom: 6px;
+  border-radius: 0.25rem;
+}
+
+.end {
+  @apply text-sm text-gray-300 flex items-center space-x-2;
+}
+
+.icon {
+  @apply bg-[#1c1c1c] text-white;
+}
+
+.icon {
+  @apply rounded-lg p-2 w-7 h-7 flex items-center justify-center;
+}
+</style>