refactor: 优化安全设置

src/apis/auth/type.ts

@@ -7,7 +7,6 @@ export interface UserInfo {
   email: string
   phone: string
   avatar: string
-  pwdResetTime: string
   registrationDate: string
   deptName: string
   roles: string[]

src/router/index.ts

@@ -40,8 +40,8 @@ export const constantRoutes: RouteRecordRaw[] = [
     children: [
       {
         path: '/home',
-        component: () => import('@/views/home/index.vue'),
         name: 'Home',
+        component: () => import('@/views/home/index.vue'),
         meta: { title: '首页', icon: 'dashboard', affix: true, hidden: false }
       }
     ]
@@ -56,29 +56,19 @@ export const constantRoutes: RouteRecordRaw[] = [
     path: '/setting',
     name: 'Setting',
     component: Layout,
-    redirect: '/setting/profile',
     meta: { hidden: true },
     children: [
       {
-        path: '/setting',
-        name: 'Setting',
-        component: () => import('@/views/setting/index.vue'),
-        redirect: '',
-        meta: { hidden: true },
-        children: [
-          {
-            path: '/setting/profile',
-            component: () => import('@/views/setting/profile/index.vue'),
-            name: 'Profile',
-            meta: { title: '账号管理', hidden: false, showInTabs: false }
-          },
-          {
-            path: '/setting/security',
-            component: () => import('@/views/setting/security/index.vue'),
-            name: 'Security',
-            meta: { title: '安全设置', hidden: false, showInTabs: false }
-          }
-        ]
+        path: '/setting/profile',
+        name: 'SettingProfile',
+        component: () => import('@/views/setting/profile/index.vue'),
+        meta: { title: '账号管理', showInTabs: false }
+      },
+      {
+        path: '/setting/security',
+        name: 'SettingSecurity',
+        component: () => import('@/views/setting/security/index.vue'),
+        meta: { title: '安全设置', showInTabs: false }
       }
     ]
   }

src/stores/modules/user.ts

@@ -18,13 +18,18 @@ import { resetHasRouteFlag } from '@/router/permission'
 import getAvatar from '@/utils/avatar'
 
 const storeSetup = () => {
-  const userInfo = reactive<Pick<UserInfo, 'id' | 'nickname' | 'avatar' | 'email' | 'phone' | 'registrationDate'>>({
+  const userInfo = reactive<UserInfo>({
     id: '',
+    username: '',
     nickname: '',
-    avatar: '',
+    gender: 0,
     email: '',
     phone: '',
-    registrationDate: ''
+    avatar: '',
+    registrationDate: '',
+    deptName: '',
+    roles: [],
+    permissions: []
   })
   const name = computed(() => userInfo.nickname)
   const avatar = computed(() => userInfo.avatar)
@@ -90,12 +95,8 @@ const storeSetup = () => {
   // 获取用户信息
   const getInfo = async () => {
     const res = await getUserInfoApi()
-    userInfo.id = res.data.id
-    userInfo.nickname = res.data.nickname
+    Object.assign(userInfo, res.data)
     userInfo.avatar = getAvatar(res.data.avatar, res.data.gender)
-    userInfo.email = res.data.email
-    userInfo.phone = res.data.phone
-    userInfo.registrationDate = res.data.registrationDate
     if (res.data.roles && res.data.roles.length) {
       roles.value = res.data.roles
       permissions.value = res.data.permissions

src/styles/global.scss

@@ -269,6 +269,81 @@
     border: none;
     background: linear-gradient(180deg, rgba(232, 244, 255, 0.5), hsla(0, 0%, 100%, 0));
   }
+  .item {
+    align-items: center;
+    display: flex;
+    margin-bottom: 20px;
+    .icon-wrapper {
+      align-items: center;
+      background: var(--color-neutral-2);
+      border-radius: 50%;
+      display: flex;
+      height: 48px;
+      justify-content: center;
+      width: 48px;
+    }
+    .info {
+      flex: 1 1;
+      margin: 0 16px;
+      &-top {
+        margin-bottom: 4px;
+        .label {
+          font-weight: 500;
+          line-height: 22px;
+          margin-right: 12px;
+        }
+        .bind {
+          font-size: 12px;
+          font-weight: 500;
+          line-height: 20px;
+        }
+      }
+      &-desc {
+        color: #86909c;
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 20px;
+        .value {
+          color: #4e5969;
+        }
+      }
+    }
+    .btn-wrapper {
+      align-self: flex-start;
+      .btn {
+        height: 28px;
+        width: 56px;
+      }
+    }
+  }
+
+  .detail {
+    display: flex;
+    font-size: 12px;
+    justify-content: flex-start;
+    margin: -5px 0 0 64px;
+    .sub-text-wrapper {
+      width: 100%;
+      border-left: 2px solid var(--color-fill-4);
+      padding-left: 12px;
+      .sub-text {
+        color: #4e5969;
+        font-weight: 400;
+        line-height: 20px;
+        margin-bottom: 8px;
+        &-value {
+          background: var(--color-neutral-2);
+          padding: 1px 5px;
+          margin: 0 5px;
+          border-radius: 3px;
+        }
+      }
+      .arco-link.link {
+        font-size: 12px;
+        padding: 0;
+      }
+    }
+  }
 }
 
 // 通用描述

src/views/login/components/background/index.vue

@@ -7,7 +7,7 @@
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script lang="ts" setup></script>
 
 <style lang="scss" scoped>
 .login-bg {

src/views/setting/profile/LeftBox.vue

@@ -16,8 +16,11 @@
       </section>
       <footer>
         <a-descriptions column="4" size="large">
-          <a-descriptions-item label="性别" :span="4">
-            {{ userInfo.nickname }}
+          <a-descriptions-item :span="4">
+            <template #label> <icon-user /><span style="margin-left: 5px">用户名</span></template>
+            {{ userInfo.username }}
+            <icon-man v-if="userInfo.gender === 1" style="color: #19bbf1" />
+            <icon-woman v-else-if="userInfo.gender === 2" style="color: #fa7fa9" />
           </a-descriptions-item>
           <a-descriptions-item :span="4">
             <template #label> <icon-phone /><span style="margin-left: 5px">手机</span></template>
@@ -29,11 +32,11 @@
           </a-descriptions-item>
           <a-descriptions-item :span="4">
             <template #label> <icon-mind-mapping /><span style="margin-left: 5px">部门</span></template>
-            {{ userInfo.nickname }}
+            {{ userInfo.deptName }}
           </a-descriptions-item>
           <a-descriptions-item :span="4">
             <template #label> <icon-user-group /><span style="margin-left: 5px">角色</span></template>
-            {{ userInfo.nickname }}
+            {{ userInfo.roles.join('，') }}
           </a-descriptions-item>
         </a-descriptions>
       </footer>
@@ -47,6 +50,7 @@
 import { updateUserBaseInfo } from '@/apis'
 import VerifyModel from '../components/VerifyModel.vue'
 import { useUserStore } from '@/stores'
+
 const userStore = useUserStore()
 const userInfo = computed(() => userStore.userInfo)
 const verifyModelRef = ref<InstanceType<typeof VerifyModel>>()