refactor(store/user.js, settings/index.vue, profile/index.vue): 导航菜单修改，侧边栏宽度修改，账号密码保存 token 多加一层取值

src/assets/styles/variables.module.scss

@@ -21,7 +21,7 @@ $menuLightText: #303133;
 $menuLightActiveText: #409EFF;
 
 // 基础变量
-$base-sidebar-width: 200px;
+$base-sidebar-width: 230px;
 $sideBarWidth: 200px;
 
 // 菜单暗色变量

src/layout/components/Navbar.vue

 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav" />
-    <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" />
+    <hamburger id="hamburger-container"
+      :is-active="appStore.sidebar.opened"
+      class="hamburger-container"
+      @toggleClick="toggleSideBar" />
+    <breadcrumb id="breadcrumb-container"
+      class="breadcrumb-container"
+      v-if="!settingsStore.topNav" />
+    <top-nav id="topmenu-container"
+      class="topmenu-container"
+      v-if="settingsStore.topNav" />
 
     <div class="right-menu">
       <template v-if="appStore.device !== 'mobile'">
-        <header-search id="header-search" class="right-menu-item" />
-
-        <el-tooltip content="源码地址" effect="dark" placement="bottom">
-          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
-        </el-tooltip>
-
-        <el-tooltip content="文档地址" effect="dark" placement="bottom">
-          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
-        </el-tooltip>
-
-        <screenfull id="screenfull" class="right-menu-item hover-effect" />
-
-        <el-tooltip content="主题模式" effect="dark" placement="bottom">
-          <div class="right-menu-item hover-effect theme-switch-wrapper" @click="toggleTheme">
-            <svg-icon v-if="settingsStore.isDark" icon-class="sunny" />
-            <svg-icon v-if="!settingsStore.isDark" icon-class="moon" />
+        <header-search id="header-search"
+          class="right-menu-item" />
+
+        <screenfull id="screenfull"
+          class="right-menu-item hover-effect" />
+
+        <el-tooltip content="主题模式"
+          effect="dark"
+          placement="bottom">
+          <div class="right-menu-item hover-effect theme-switch-wrapper"
+            @click="toggleTheme">
+            <svg-icon v-if="settingsStore.isDark"
+              icon-class="sunny" />
+            <svg-icon v-if="!settingsStore.isDark"
+              icon-class="moon" />
           </div>
         </el-tooltip>
 
-        <el-tooltip content="布局大小" effect="dark" placement="bottom">
-          <size-select id="size-select" class="right-menu-item hover-effect" />
+        <el-tooltip content="布局大小"
+          effect="dark"
+          placement="bottom">
+          <size-select id="size-select"
+            class="right-menu-item hover-effect" />
         </el-tooltip>
       </template>
       <div class="avatar-container">
-        <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
+        <el-dropdown @command="handleCommand"
+          class="right-menu-item hover-effect"
+          trigger="click">
           <div class="avatar-wrapper">
-            <img :src="userStore.avatar" class="user-avatar" />
+            <!-- <img :src="userStore.avatar" class="user-avatar" /> -->
+            <span class="user-name">{{ name }}</span>
             <el-icon><caret-bottom /></el-icon>
           </div>
           <template #dropdown>
@@ -40,10 +52,12 @@
               <router-link to="/user/profile">
                 <el-dropdown-item>个人中心</el-dropdown-item>
               </router-link>
-              <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">
+              <el-dropdown-item command="setLayout"
+                v-if="settingsStore.showSettings">
                 <span>布局设置</span>
               </el-dropdown-item>
-              <el-dropdown-item divided command="logout">
+              <el-dropdown-item divided
+                command="logout">
                 <span>退出登录</span>
               </el-dropdown-item>
             </el-dropdown-menu>
@@ -72,6 +86,8 @@ const appStore = useAppStore()
 const userStore = useUserStore()
 const settingsStore = useSettingsStore()
 
+const name = userStore.name;
+
 function toggleSideBar() {
   appStore.toggleSideBar()
 }
@@ -111,8 +127,9 @@ function toggleTheme() {
 }
 </script>
 
-<style lang='scss' scoped>
-.navbar {
+<style lang='scss'
+  scoped>
+  .navbar {
     height: 50px;
     overflow: hidden;
     position: relative;
@@ -190,8 +207,15 @@ function toggleTheme() {
       .avatar-container {
         margin-right: 40px;
 
+        .el-dropdown {
+          display: flex;
+          align-items: center;
+
+          .user-name{
+            font-size: 16px;
+          }
+
           .avatar-wrapper {
-        margin-top: 5px;
             position: relative;
 
             .user-avatar {
@@ -211,5 +235,6 @@ function toggleTheme() {
           }
         }
       }
-}
+    }
+  }
 </style>

src/layout/components/Settings/index.vue

@@ -49,12 +49,12 @@
       </span>
     </div>
 
-    <div class="drawer-item">
+    <!-- <div class="drawer-item">
       <span>固定 Header</span>
       <span class="comp-style">
         <el-switch v-model="settingsStore.fixedHeader" class="drawer-switch" />
       </span>
-    </div>
+    </div> -->
 
     <div class="drawer-item">
       <span>显示 Logo</span>

src/store/modules/user.js

@@ -25,8 +25,8 @@ export default defineStore(
         return new Promise((resolve, reject) => {
           if (type === 'upass') {
             login({ username, password }).then(res => {
-              setToken(res.token)
-              this.token = res.token
+              setToken(res.data.access_token)
+              this.token = res.data.access_token
               resolve()
             }).catch(error => {
               reject(error)
@@ -58,7 +58,7 @@ export default defineStore(
               this.roles = ['ROLE_DEFAULT']
             }
             this.id = user.userId
-            this.name = user.userName
+            this.name = user.nickName
             this.avatar = avatar
             resolve(res)
           }).catch(error => {

src/utils/index.js

 import { parseTime } from './ruoyi'
 export * from './jsencrypt.js'
+export * from './ruoyi'
 
 /**
  * 表格时间格式化

src/views/system/user/profile/index.vue

 <template>
   <div class="app-container">
     <el-row :gutter="20">
-         <el-col :span="6" :xs="24">
+      <el-col :span="6"
+        :xs="24">
         <el-card class="box-card">
           <template v-slot:header>
             <div class="clearfix">
@@ -9,13 +10,13 @@
             </div>
           </template>
           <div>
-                  <div class="text-center">
+            <!-- <div class="text-center">
               <userAvatar />
-                  </div>
+            </div> -->
             <ul class="list-group list-group-striped">
               <li class="list-group-item">
                 <svg-icon icon-class="user" />用户名称
-                        <div class="pull-right">{{ state.user.userName }}</div>
+                <div class="pull-right">{{ state.user.nickName }}</div>
               </li>
               <li class="list-group-item">
                 <svg-icon icon-class="phone" />手机号码
@@ -27,7 +28,8 @@
               </li>
               <li class="list-group-item">
                 <svg-icon icon-class="tree" />所属部门
-                        <div class="pull-right" v-if="state.user.dept">{{ state.user.dept.deptName }} / {{ state.postGroup }}</div>
+                <div class="pull-right"
+                  v-if="state.user.dept">{{ state.user.dept.deptName }} / {{ state.postGroup }}</div>
               </li>
               <li class="list-group-item">
                 <svg-icon icon-class="peoples" />所属角色
@@ -41,7 +43,8 @@
           </div>
         </el-card>
       </el-col>
-         <el-col :span="18" :xs="24">
+      <el-col :span="18"
+        :xs="24">
         <el-card>
           <template v-slot:header>
             <div class="clearfix">
@@ -49,10 +52,12 @@
             </div>
           </template>
           <el-tabs v-model="activeTab">
-                  <el-tab-pane label="基本资料" name="userinfo">
+            <el-tab-pane label="基本资料"
+              name="userinfo">
               <userInfo :user="state.user" />
             </el-tab-pane>
-                  <el-tab-pane label="修改密码" name="resetPwd">
+            <el-tab-pane label="修改密码"
+              name="resetPwd">
               <resetPwd />
             </el-tab-pane>
           </el-tabs>
@@ -62,26 +67,27 @@
   </div>
 </template>
 
-<script setup name="Profile">
-import userAvatar from "./userAvatar";
-import userInfo from "./userInfo";
-import resetPwd from "./resetPwd";
-import { getUserProfile } from "@/api/system/user";
+<script setup
+  name="Profile">
+  import userAvatar from "./userAvatar";
+  import userInfo from "./userInfo";
+  import resetPwd from "./resetPwd";
+  import { getUserProfile } from "@/api/system/user";
 
-const activeTab = ref("userinfo");
-const state = reactive({
+  const activeTab = ref("userinfo");
+  const state = reactive({
     user: {},
     roleGroup: {},
     postGroup: {}
-});
+  });
 
-function getUser() {
+  function getUser() {
     getUserProfile().then(response => {
       state.user = response.data;
       state.roleGroup = response.roleGroup;
       state.postGroup = response.postGroup;
     });
-};
+  };
 
-getUser();
+  getUser();
 </script>