refactor: 优化个人中心部分代码

src/apis/auth/type.ts

@@ -8,7 +8,7 @@ export interface UserInfo {
   phone: string
   avatar: string
   pwdResetTime: string
-  passwordExpired: boolean
+  pwdExpired: boolean
   registrationDate: string
   deptName: string
   roles: string[]

src/apis/system/user-center.ts

@@ -19,12 +19,12 @@ export function updateUserPassword(data: { oldPassword: string; newPassword: str
 }
 
 /** @desc 修改手机号 */
-export function updateUserPhone(data: { newPhone: string; captcha: string; currentPassword: string }) {
+export function updateUserPhone(data: { phone: string; captcha: string; oldPassword: string }) {
   return http.patch(`${BASE_URL}/phone`, data)
 }
 
 /** @desc 修改邮箱 */
-export function updateUserEmail(data: { newEmail: string; captcha: string; currentPassword: string }) {
+export function updateUserEmail(data: { email: string; captcha: string; oldPassword: string }) {
   return http.patch(`${BASE_URL}/email`, data)
 }
 

src/layout/components/HeaderRightBar/index.vue

@@ -51,7 +51,7 @@
         </a-row>
         <template #content>
           <a-doption @click="router.push('/setting/profile')">
-            <span>账号管理</span>
+            <span>个人中心</span>
           </a-doption>
           <a-divider :margin="0" />
           <a-doption @click="logout">
@@ -98,16 +98,14 @@ const logout = () => {
     }
   })
 }
-onMounted(() => {
-  checkPasswordExpired()
-})
+
 const checkPasswordExpired = () => {
-  if (!userStore.passwordExpiredShow || !userStore.userInfo.passwordExpired) {
+  if (!userStore.pwdExpiredShow || !userStore.userInfo.pwdExpired) {
     return
   }
   Modal.confirm({
     title: '提示',
-    content: '密码已过期，是否去修改？',
+    content: '密码已过期，需要跳转到修改密码页面？',
     hideCancel: false,
     closable: true,
     onBeforeOk: async () => {
@@ -120,10 +118,14 @@ const checkPasswordExpired = () => {
     },
     onCancel: () => {
       // 当前登录会话不再提示
-      userStore.passwordExpiredShow = false
+      userStore.pwdExpiredShow = false
     }
   })
 }
+
+onMounted(() => {
+  checkPasswordExpired()
+})
 </script>
 
 <style lang="scss" scoped>

src/router/index.ts

@@ -61,7 +61,7 @@ export const constantRoutes: RouteRecordRaw[] = [
         path: '/setting/profile',
         name: 'SettingProfile',
         component: () => import('@/views/setting/profile/index.vue'),
-        meta: { title: '账号管理', showInTabs: false }
+        meta: { title: '个人中心', showInTabs: false }
       }
     ]
   }

src/stores/modules/user.ts

@@ -27,7 +27,7 @@ const storeSetup = () => {
     phone: '',
     avatar: '',
     pwdResetTime: '',
-    passwordExpired: false,
+    pwdExpired: false,
     registrationDate: '',
     deptName: '',
     roles: [],
@@ -37,7 +37,7 @@ const storeSetup = () => {
   const avatar = computed(() => userInfo.avatar)
 
   const token = ref(getToken() || '')
-  const passwordExpiredShow = ref<boolean>(true)
+  const pwdExpiredShow = ref<boolean>(true)
   const roles = ref<string[]>([]) // 当前用户角色
   const permissions = ref<string[]>([]) // 当前角色权限标识集合
 
@@ -91,7 +91,7 @@ const storeSetup = () => {
   const logoutCallBack = async () => {
     roles.value = []
     permissions.value = []
-    passwordExpiredShow.value = true
+    pwdExpiredShow.value = true
     resetToken()
     resetRouter()
   }
@@ -114,7 +114,7 @@ const storeSetup = () => {
     token,
     roles,
     permissions,
-    passwordExpiredShow,
+    pwdExpiredShow,
     accountLogin,
     emailLogin,
     phoneLogin,
@@ -127,5 +127,5 @@ const storeSetup = () => {
 }
 
 export const useUserStore = defineStore('user', storeSetup, {
-  persist: { paths: ['token', 'roles', 'permissions', 'passwordExpiredShow'], storage: localStorage }
+  persist: { paths: ['token', 'roles', 'permissions', 'pwdExpiredShow'], storage: localStorage }
 })

src/views/setting/components/VerifyModel.vue

@@ -19,15 +19,21 @@
 
 <script setup lang="ts">
 // import { getSmsCaptcha, getEmailCaptcha, updateUserEmail, updateUserPhone } from '@/apis'
+import { updateUserPassword } from '@/apis'
 import { Message } from '@arco-design/web-vue'
-// import { encryptByRsa } from '@/utils/encrypt'
+import { encryptByRsa } from '@/utils/encrypt'
 import { useUserStore } from '@/stores'
 import { type Columns, GiForm } from '@/components/GiForm'
 import { useForm } from '@/hooks'
 import * as Regexp from '@/utils/regexp'
 
+const userStore = useUserStore()
+const userInfo = computed(() => userStore.userInfo)
+
 const verifyType = ref()
-const title = computed(() => (verifyType.value === 'phone' ? '修改手机号' : '修改邮箱'))
+const title = computed(
+  () => `修改${verifyType.value === 'phone' ? '手机号' : verifyType.value === 'email' ? '邮箱' : '密码'}`
+)
 const formRef = ref<InstanceType<typeof GiForm>>()
 
 const options: Options = {
@@ -39,7 +45,7 @@ const options: Options = {
 const columns: Columns = [
   {
     label: '手机号',
-    field: 'newPhone',
+    field: 'phone',
     type: 'input',
     rules: [
       { required: true, message: '请输入手机号' },
@@ -65,21 +71,50 @@ const columns: Columns = [
     label: '验证码',
     field: 'captcha',
     type: 'input',
-    rules: [{ required: true, message: '请输入验证码' }]
+    rules: [{ required: true, message: '请输入验证码' }],
+    hide: () => {
+      return !['phone', 'email'].includes(verifyType.value)
+    }
   },
   {
     label: '当前密码',
-    field: 'currentPassword',
-    type: 'input',
-    rules: [{ required: true, message: '请输入当前密码' }]
+    field: 'oldPassword',
+    type: 'input-password',
+    rules: [{ required: true, message: '请输入当前密码' }],
+    hide: () => {
+      return !userInfo.value.pwdResetTime
+    }
+  },
+  {
+    label: '新密码',
+    field: 'newPassword',
+    type: 'input-password',
+    rules: [{ required: true, message: '请输入新密码' }],
+    hide: () => {
+      return verifyType.value !== 'password'
+    }
+  },
+  {
+    label: '确认新密码',
+    field: 'rePassword',
+    type: 'input-password',
+    rules: [{ required: true, message: '请再次输入新密码' }],
+    props: {
+      placeholder: '请再次输入新密码'
+    },
+    hide: () => {
+      return verifyType.value !== 'password'
+    }
   }
 ]
 
 const { form, resetForm } = useForm({
-  newPhone: '',
+  phone: '',
+  email: '',
   captcha: '',
-  currentPassword: '',
-  email: ''
+  oldPassword: '',
+  newPassword: '',
+  rePassword: ''
 })
 
 // 重置
@@ -112,7 +147,7 @@ const onCaptcha = async () => {
     captchaBtnName.value = '发送中...'
     if (verifyType.value === 'phone') {
       // await getSmsCaptcha({
-      //   phone: form.newPhone
+      //   phone: form.phone
       // })
     } else if (verifyType.value === 'email') {
       // await getEmailCaptcha({
@@ -138,24 +173,36 @@ const onCaptcha = async () => {
   }
 }
 
-const userStore = useUserStore()
 // 保存
 const save = async () => {
   const isInvalid = await formRef.value?.formRef?.validate()
   if (isInvalid) return false
   try {
     if (verifyType.value === 'phone') {
-      // await updateUserEmail({
-      //   newEmail: form.email,
+      // await updateUserPhone({
+      //   phone: form.phone,
       //   captcha: form.captcha,
-      //   currentPassword: encryptByRsa(form.currentPassword) as string
+      //   oldPassword: encryptByRsa(form.oldPassword) as string
       // })
     } else if (verifyType.value === 'email') {
-      // await updateUserPhone({
-      //   newPhone: form.email,
+      // await updateUserEmail({
+      //   email: form.email,
       //   captcha: form.captcha,
-      //   currentPassword: encryptByRsa(form.currentPassword) as string
+      //   oldPassword: encryptByRsa(form.oldPassword) as string
       // })
+    } else if (verifyType.value === 'password') {
+      if (form.newPassword !== form.rePassword) {
+        Message.error('两次新密码不一致')
+        return false
+      }
+      if (form.newPassword === form.oldPassword) {
+        Message.error('新密码与旧密码不能相同')
+        return false
+      }
+      await updateUserPassword({
+        oldPassword: encryptByRsa(form.oldPassword) || '',
+        newPassword: encryptByRsa(form.newPassword) || ''
+      })
     }
     Message.success('修改成功')
     // 修改成功后，重新获取用户信息