refactor: user settings & make style follow the theme

mock/userInfo.ts

@@ -10,9 +10,9 @@ export default defineFakeRoute([
         data: {
           avatarUrl: "https://avatars.githubusercontent.com/u/44761321",
           nickName: "企丸丸",
-          introduce: "我是幻兽帕鲁里的NO.1",
+          introduce: "我是幻兽帕鲁里的明星",
           regionCode: "001002001",
-          address: "体育路冰鸟密域祭坛地下城",
+          address: "冰鸟密域祭坛地下城",
           userName: "admin"
         }
       };

src/layout/components/userSettings/index.vue

@@ -1,15 +1,17 @@
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from "vue";
+import { ref } from "vue";
 import { useNav } from "@/layout/hooks/useNav";
 import leftLine from "@iconify-icons/ri/arrow-left-s-line";
 import userLine from "@iconify-icons/ri/user-3-line";
 import profileLine from "@iconify-icons/ri/profile-line";
-import { useRoute, useRouter } from "vue-router";
+import { useRouter } from "vue-router";
 import { getUserInfo } from "@/api/user";
-const route = useRoute();
+
+import UserInfoManage from "@/layout/components/userSettings/userInfoManage.vue";
+import SafeManage from "@/layout/components/userSettings/safeManage.vue";
+
 const router = useRouter();
-const { userAvatar, getLogo, username } = useNav();
-const defaultActive = ref<string>(route.path as string);
+const { getLogo, isCollapse } = useNav();
 const userInfo = ref({
   nickName: "",
   avatarUrl: "",
@@ -21,44 +23,104 @@ getUserInfo().then(res => {
 const handleBack = () => {
   router.go(-1);
 };
+
+const witchPane = ref("userInfoManage");
+const panes = [
+  {
+    key: "userInfoManage",
+    label: "基本设置",
+    icon: userLine,
+    component: UserInfoManage
+  },
+  {
+    key: "safeManage",
+    label: "安全设置",
+    icon: profileLine,
+    component: SafeManage
+  }
+];
 </script>
 
 <template>
-  <el-container class="h-full py-8">
-    <el-aside class="w-70 pure-border-color px-4">
-      <el-menu :default-active="defaultActive" router>
-        <el-menu-item class="flex items-center" @click="handleBack">
-          <IconifyIconOffline :icon="leftLine" />
-          <img :src="getLogo()" class="w-6 h-6" alt="logo" />
-          <span class="ml-2">返回</span>
+  <el-container class="h-full">
+    <el-aside class="settings-sidebar px-2" width="210px">
+      <el-menu :default-active="witchPane" class="settings-menu">
+        <el-menu-item @click="handleBack">
+          <div class="flex items-center">
+            <IconifyIconOffline :icon="leftLine" />
+            <img :src="getLogo()" class="w-6 h-6" alt="logo" />
+            <span class="ml-2">返回</span>
+          </div>
         </el-menu-item>
         <li class="flex items-center ml-8 mt-4">
           <div>
             <el-avatar :size="80" :src="userInfo.avatarUrl" />
           </div>
-          <div class="pl-4">
+          <div class="pl-4 flex-col">
             <p>{{ userInfo.nickName }}</p>
-            <el-text class="mt-2" type="info">{{ userInfo.userName }}</el-text>
+            <p>
+              <el-text class="mt-2" type="info">{{
+                userInfo.userName
+              }}</el-text>
+            </p>
           </div>
         </li>
-        <el-menu-item index="/user-settings/user-info-manage">
-          <el-icon><IconifyIconOffline :icon="userLine" /></el-icon>
-          <span>基本设置</span>
-        </el-menu-item>
-        <el-menu-item index="/user-settings/safe-manage">
-          <el-icon><IconifyIconOffline :icon="profileLine" /></el-icon>
-          <span>安全设置</span>
+        <el-menu-item
+          v-for="item in panes"
+          :key="item.key"
+          :index="item.key"
+          @click="witchPane = item.key"
+        >
+          <div class="flex items-center">
+            <el-icon><IconifyIconOffline :icon="item.icon" /></el-icon>
+            <span>{{ item.label }}</span>
+          </div>
         </el-menu-item>
       </el-menu>
     </el-aside>
     <el-main>
-      <router-view />
+      <component :is="panes.find(item => item.key === witchPane).component" />
     </el-main>
   </el-container>
 </template>
 
 <style lang="scss" scoped>
-.pure-border-color {
-  border-color: var(--pure-border-color); /* 使用边框颜色变量 */
+.settings-sidebar {
+  background: $menuBg;
+}
+
+.settings-menu {
+  color: $subMenuActiveText;
+  background-color: transparent !important;
+  border: none !important;
+
+  ::v-deep(.el-menu-item) {
+    position: relative;
+    background-color: transparent !important;
+
+    div {
+      z-index: 1;
+    }
+
+    &.is-active {
+      span {
+        color: #fff !important;
+      }
+
+      i {
+        color: #fff !important;
+      }
+
+      &::before {
+        position: absolute;
+        inset: 0 8px;
+        margin: 4px 0;
+        clear: both;
+        content: "";
+        background: var(--el-color-primary) !important;
+        border-radius: 3px;
+      }
+    }
+  }
 }
 </style>

src/layout/hooks/useNav.ts

@@ -100,7 +100,7 @@ export function useNav() {
   }
 
   function handleOpenUserSettings() {
-    router.push({ name: "UserInfoManage" });
+    router.push({ name: "UserSettings" });
   }
 
   function toggleSideBar() {

src/router/modules/remaining.ts

@@ -47,20 +47,6 @@ export default [
       title: $t("buttons.hsUserSettings"),
       showLink: false,
       rank: 103
-    },
-    children: [
-      {
-        path: "user-info-manage",
-        name: "UserInfoManage",
-        component: () =>
-          import("@/layout/components/userSettings/userInfoManage.vue")
-      },
-      {
-        path: "safe-manage",
-        name: "SafeManage",
-        component: () =>
-          import("@/layout/components/userSettings/safeManage.vue")
-      }
-    ]
+    }
   }
 ] satisfies Array<RouteConfigsTable>;