fix user profile

src/layouts/components/DefaultLayoutWithVerticalNav.vue

@@ -67,7 +67,7 @@ onMounted(() => {
         </IconBtn>
 
         <!-- 👉 Search -->
-        <div class="d-flex align-center cursor-pointer" style="user-select: none">
+        <div class="d-flex align-center cursor-pointer" style="user-select: none;">
           <!-- 👉 Search Trigger button -->
           <VDialog
             v-model="searchDialog"
@@ -215,10 +215,10 @@ onMounted(() => {
         }"
       />
 
-      <!-- 👉 设置 -->
+      <!-- 👉 系统 -->
       <VerticalNavSectionTitle
         :item="{
-          heading: '设置',
+          heading: '系统',
         }"
       />
       <VerticalNavLink
@@ -237,8 +237,8 @@ onMounted(() => {
       />
       <VerticalNavLink
         :item="{
-          title: '用户',
-          icon: 'mdi-account',
+          title: '设定',
+          icon: 'mdi-cog',
           to: '/account-setting',
         }"
       />

src/layouts/components/UserProfile.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import api from "@/api";
+import { User } from "@/api/types";
 import router from "@/router";
 import avatar1 from "@images/avatars/avatar-1.png";
 import { useStore } from "vuex";
@@ -6,6 +8,28 @@ import { useStore } from "vuex";
 // Vuex Store
 const store = useStore();
 
+// 当前用户信息
+const accountInfo = ref<User>({
+  id: 0,
+  name: "",
+  password: "",
+  email: "",
+  is_active: false,
+  is_superuser: false,
+  avatar: "",
+});
+
+// 调用API，加载当前用户数据
+const loadAccountInfo = async () => {
+  try {
+    const user: User = await api.get(`user/current`);
+    accountInfo.value = user;
+    if (!accountInfo.value.avatar) accountInfo.value.avatar = avatar1;
+  } catch (error) {
+    console.log(error);
+  }
+};
+
 // 执行注销操作
 const logout = () => {
   // 清除登录状态信息
@@ -14,12 +38,18 @@ const logout = () => {
   // 重定向到登录页面或其他适当的页面
   router.push("/login");
 };
+
+// 页面加载时，加载当前用户数据
+onMounted(() => {
+  loadAccountInfo();
+});
+
 </script>
 
 <template>
   <VBadge dot location="bottom right" offset-x="3" offset-y="3" color="success" bordered>
     <VAvatar class="cursor-pointer" color="primary" variant="tonal">
-      <VImg :src="avatar1" />
+      <VImg :src="accountInfo.avatar || avatar1" />
 
       <!-- SECTION Menu -->
       <VMenu activator="parent" width="230" location="bottom end" offset="14px">
@@ -42,8 +72,8 @@ const logout = () => {
               </VListItemAction>
             </template>
 
-            <VListItemTitle class="font-weight-semibold"> 管理员 </VListItemTitle>
-            <VListItemSubtitle>Admin</VListItemSubtitle>
+            <VListItemTitle class="font-weight-semibold" v-show="accountInfo.is_superuser"> 管理员 </VListItemTitle>
+            <VListItemSubtitle>{{ accountInfo.name }}</VListItemSubtitle>
           </VListItem>
           <VDivider class="my-2" />
 
@@ -53,7 +83,7 @@ const logout = () => {
               <VIcon class="me-2" icon="mdi-account-outline" size="22" />
             </template>
 
-            <VListItemTitle>个人中心</VListItemTitle>
+            <VListItemTitle>配置中心</VListItemTitle>
           </VListItem>
 
           <!-- 👉 FAQ -->

src/pages/account-setting.vue

@@ -10,7 +10,7 @@ const activeTab = ref(route.params.tab);
 // tabs
 const tabs = [
   { title: "用户", icon: "mdi-account-outline", tab: "account" },
-  { title: "系统", icon: "mdi-cog", tab: "system" },
+  { title: "进阶", icon: "mdi-monitor-dashboard", tab: "system" },
 ];
 </script>