diff --git a/src/router/index.ts b/src/router/index.ts
index 40ad1c3..81788ef 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -96,48 +96,38 @@ const routes: Array<RouteRecordRaw> = [
   },
   {
     path: "/user/settings",
-    component: () => import("@/views/user-settings/outlet.vue"),
+    component: () => import("@/views/user-settings/index.vue"),
+    meta: { requiresAuth: true },
+  },
+  {
+    path: "/user/settings/username",
+    component: () => import("@/views/user-settings/username.vue"),
+    meta: { requiresAuth: true },
+  },
+  {
+    path: "/user/settings/nickname",
+    component: () => import("@/views/user-settings/nickname.vue"),
+    meta: { requiresAuth: true },
+  },
+  {
+    path: "/user/settings/email",
+    component: () => import("@/views/user-settings/email.vue"),
     meta: { requiresAuth: true },
-    children: [
-      {
-        path: "",
-        component: () => import("@/views/user-settings/index.vue"),
-        meta: { requiresAuth: true },
-      },
-      {
-        path: "username",
-        component: () => import("@/views/user-settings/username.vue"),
-        meta: { requiresAuth: true },
-      },
-      {
-        path: "nickname",
-        component: () => import("@/views/user-settings/nickname.vue"),
-        meta: { requiresAuth: true },
-      },
-      {
-        path: "email",
-        component: () => import("@/views/user-settings/email.vue"),
-        meta: { requiresAuth: true },
-      },
-    ],
   },
   {
     path: "/system-settings",
-    component: () => import("@/views/system-settings/outlet.vue"),
-    children: [
-      {
-        path: "",
-        component: () => import("@/views/system-settings/index.vue"),
-      },
-      {
-        path: "language",
-        component: () => import("@/views/system-settings/language.vue"),
-      },
-      {
-        path: "theme",
-        component: () => import("@/views/system-settings/theme.vue"),
-      },
-    ],
+    component: () => import("@/views/system-settings/index.vue"),
+    meta: { requiresAuth: true },
+  },
+  {
+    path: "/system-settings/language",
+    component: () => import("@/views/system-settings/language.vue"),
+    meta: { requiresAuth: true },
+  },
+  {
+    path: "/system-settings/theme",
+    component: () => import("@/views/system-settings/theme.vue"),
+    meta: { requiresAuth: true },
   },
   {
     path: "/issue/issuing-apply",
diff --git a/src/views/user-settings/nickname.vue b/src/views/user-settings/nickname.vue
index d7e4f96..cfc71f4 100644
--- a/src/views/user-settings/nickname.vue
+++ b/src/views/user-settings/nickname.vue
@@ -1,6 +1,5 @@
 <script lang='ts' setup>
 import { toastController } from "@ionic/vue";
-import { arrowBackOutline } from "ionicons/icons";
 import { client, safeClient } from "@/api";
 
 const userStore = useUserStore();
@@ -39,11 +38,7 @@ async function handleSave() {
   <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>
+        <ui-back-button slot="start" />
         <ion-title>昵称设置</ion-title>
       </ion-toolbar>
     </ion-header>
diff --git a/src/views/user-settings/username.vue b/src/views/user-settings/username.vue
index 381b1a8..e70ded9 100644
--- a/src/views/user-settings/username.vue
+++ b/src/views/user-settings/username.vue
@@ -40,11 +40,7 @@ async function handleSave() {
   <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>
+        <ui-back-button slot="start" />
         <ion-title>用户设置</ion-title>
       </ion-toolbar>
     </ion-header>