zhuchaowe/maxkb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: user reset password ui

Browse Source
This commit is contained in:
wxg0103 2025-06-12 19:23:11 +08:00
parent 02e7cacb10
commit b624de75be
4 changed files with 113 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/api/type/user.ts
View File

@ -82,7 +82,7 @@ interface ResetCurrentUserPasswordRequest {
/** /**
* 验证码 * 验证码
*/ */
code: string code?: string
/** /**
*密码 *密码
*/ */

16
ui/src/api/user/user-manage.ts
View File

@ -78,11 +78,25 @@ const resetPassword: (
return post('/user/re_password', request, undefined, loading) return post('/user/re_password', request, undefined, loading)
} }
/**
* 重置密码
* @param request 重置密码请求参数
* @param loading 接口加载器
* @returns
*/
const resetCurrentPassword: (
request: ResetPasswordRequest,
loading?: Ref<boolean>
) => Promise<Result<boolean>> = (request, loading) => {
return post('/user/current/reset_password', request, undefined, loading)
}
export default { export default {
getUserManage, getUserManage,
putUserManage, putUserManage,
delUserManage, delUserManage,
postUserManage, postUserManage,
putUserManagePassword, putUserManagePassword,
resetPassword resetPassword,
resetCurrentPassword
} }

156
ui/src/layout/layout-header/avatar/ResetPassword.vue
View File

@ -27,51 +27,51 @@
type="password" type="password"
class="input-item" class="input-item"
v-model="resetPasswordForm.re_password" v-model="resetPasswordForm.re_password"
:placeholder="$t('views.user.userForm.form.re_password.placeholder')" :placeholder="$t('views.login.enterPassword')"
show-password show-password
> >
</el-input> </el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-form <!-- <el-form-->
class="reset-password-form mb-24" <!-- class="reset-password-form mb-24"-->
ref="resetPasswordFormRef2" <!-- ref="resetPasswordFormRef2"-->
:model="resetPasswordForm" <!-- :model="resetPasswordForm"-->
:rules="rules2" <!-- :rules="rules2"-->
> <!-- >-->
<p class="mb-8 lighter">{{ $t('views.login.useEmail') }}</p> <!-- <p class="mb-8 lighter">{{ $t('views.login.useEmail') }}</p>-->
<el-form-item style="margin-bottom: 8px"> <!-- <el-form-item style="margin-bottom: 8px">-->
<el-input <!-- <el-input-->
class="input-item" <!-- class="input-item"-->
:disabled="true" <!-- :disabled="true"-->
v-bind:modelValue="user.userInfo?.email" <!-- v-bind:modelValue="user.userInfo?.email"-->
:placeholder="t('views.user.userForm.form.email.placeholder')" <!-- :placeholder="t('views.user.userForm.form.email.placeholder')"-->
> <!-- >-->
</el-input> <!-- </el-input>-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item prop="code"> <!-- <el-form-item prop="code">-->
<div class="flex-between w-full"> <!-- <div class="flex-between w-full">-->
<el-input <!-- <el-input-->
class="code-input" <!-- class="code-input"-->
v-model="resetPasswordForm.code" <!-- v-model="resetPasswordForm.code"-->
:placeholder="$t('views.login.verificationCode.placeholder')" <!-- :placeholder="$t('views.login.verificationCode.placeholder')"-->
> <!-- >-->
</el-input> <!-- </el-input>-->
<el-button <!-- <el-button-->
:disabled="isDisabled" <!-- :disabled="isDisabled"-->
class="send-email-button ml-8" <!-- class="send-email-button ml-8"-->
@click="sendEmail" <!-- @click="sendEmail"-->
:loading="loading" <!-- :loading="loading"-->
> <!-- >-->
{{ <!-- {{-->
isDisabled <!-- isDisabled-->
? `${$t('views.login.verificationCode.resend')}（${time}s）` <!-- ? `${$t('views.login.verificationCode.resend')}（${time}s）`-->
: $t('views.login.verificationCode.getVerificationCode') <!-- : $t('views.login.verificationCode.getVerificationCode')-->
}} <!-- }}-->
</el-button> <!-- </el-button>-->
</div> <!-- </div>-->
</el-form-item> <!-- </el-form-item>-->
</el-form> <!-- </el-form>-->
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
<el-button @click="resetPasswordDialog = false">{{ $t('common.cancel') }}</el-button> <el-button @click="resetPasswordDialog = false">{{ $t('common.cancel') }}</el-button>
@ -83,16 +83,16 @@
</el-dialog> </el-dialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import {ref} from 'vue'
import type { ResetCurrentUserPasswordRequest } from '@/api/type/user' import type {ResetCurrentUserPasswordRequest} from '@/api/type/user'
import type { FormInstance, FormRules } from 'element-plus' import type {FormInstance, FormRules} from 'element-plus'
import { MsgSuccess } from '@/utils/message' import UserApi from '@/api/user/user-manage'
import UserApi from '@/api/user/user'
import useStore from '@/stores' import useStore from '@/stores'
import { useRouter } from 'vue-router' import {useRouter} from 'vue-router'
import { t } from '@/locales' import {t} from '@/locales'
const router = useRouter() const router = useRouter()
const { user } = useStore() const {user} = useStore()
const resetPasswordDialog = ref<boolean>(false) const resetPasswordDialog = ref<boolean>(false)
@ -147,28 +147,28 @@ const rules1 = ref<FormRules<ResetCurrentUserPasswordRequest>>({
} }
] ]
}) })
const rules2 = ref<FormRules<ResetCurrentUserPasswordRequest>>({ // const rules2 = ref<FormRules<ResetCurrentUserPasswordRequest>>({
// @ts-ignore // // @ts-ignore
code: [ // code: [
{ // {
required: true, // required: true,
message: t('views.login.verificationCode.placeholder'), // message: t('views.login.verificationCode.placeholder'),
trigger: 'blur' // trigger: 'blur'
} // }
] // ]
}) // })
/** // /**
* 发送验证码 // * 发送验证码
*/ // */
const sendEmail = () => { // const sendEmail = () => {
resetPasswordFormRef1.value?.validate().then(() => { // resetPasswordFormRef1.value?.validate().then(() => {
UserApi.sendEmailToCurrent(loading).then(() => { // UserApi.sendEmailToCurrent(loading).then(() => {
MsgSuccess(t('views.login.verificationCode.successMessage')) // MsgSuccess(t('views.login.verificationCode.successMessage'))
isDisabled.value = true // isDisabled.value = true
handleTimeChange() // handleTimeChange()
}) // })
}) // })
} // }
const handleTimeChange = () => { const handleTimeChange = () => {
if (time.value <= 0) { if (time.value <= 0) {
@ -184,7 +184,7 @@ const handleTimeChange = () => {
const open = () => { const open = () => {
resetPasswordForm.value = { resetPasswordForm.value = {
code: '', //code: '',
password: '', password: '',
re_password: '' re_password: ''
} }
@ -194,16 +194,10 @@ const open = () => {
} }
const resetPassword = () => { const resetPassword = () => {
resetPasswordFormRef1.value?.validate().then(() => { resetPasswordFormRef1.value?.validate().then(() => {
resetPasswordFormRef2.value return UserApi.resetCurrentPassword(resetPasswordForm.value)
?.validate()
.then(() => { .then(() => {
return UserApi.resetCurrentUserPassword(resetPasswordForm.value) user.logout()
}) router.push({name: 'login'})
.then(() => {
return user.logout()
})
.then(() => {
router.push({ name: 'login' })
}) })
}) })
} }
@ -211,6 +205,6 @@ const close = () => {
resetPasswordDialog.value = false resetPasswordDialog.value = false
} }
defineExpose({ open, close }) defineExpose({open, close})
</script> </script>
<style lang="scss" scope></style> <style lang="scss" scope></style>

41
ui/src/layout/layout-header/avatar/index.vue
View File

@ -2,11 +2,11 @@
<el-dropdown trigger="click" type="primary"> <el-dropdown trigger="click" type="primary">
<div class="flex-center cursor"> <div class="flex-center cursor">
<el-avatar :size="30"> <el-avatar :size="30">
<img src="@/assets/user-icon.svg" style="width: 54%" alt="" /> <img src="@/assets/user-icon.svg" style="width: 54%" alt=""/>
</el-avatar> </el-avatar>
<span class="ml-8 color-text-primary">{{ user.userInfo?.username }}</span> <span class="ml-8 color-text-primary">{{ user.userInfo?.username }}</span>
<el-icon class="el-icon--right"> <el-icon class="el-icon--right">
<CaretBottom /> <CaretBottom/>
</el-icon> </el-icon>
</div> </div>
@ -15,7 +15,7 @@
<div class="userInfo flex align-center"> <div class="userInfo flex align-center">
<div class="mr-12 flex align-center"> <div class="mr-12 flex align-center">
<el-avatar :size="30"> <el-avatar :size="30">
<img src="@/assets/user-icon.svg" style="width: 54%" alt="" /> <img src="@/assets/user-icon.svg" style="width: 54%" alt=""/>
</el-avatar> </el-avatar>
</div> </div>
<div style="width: 90%"> <div style="width: 90%">
@ -25,7 +25,8 @@
> >
<el-tag size="small" class="default-tag">{{ user.userInfo?.role[0] }}</el-tag> <el-tag size="small" class="default-tag">{{ user.userInfo?.role[0] }}</el-tag>
<el-tag size="small" class="default-tag ml-4" v-if="user.userInfo?.role?.length > 1" <el-tag size="small" class="default-tag ml-4" v-if="user.userInfo?.role?.length > 1"
>+{{ user.userInfo?.role?.length - 1 }}</el-tag >+{{ user.userInfo?.role?.length - 1 }}
</el-tag
> >
</template> </template>
</div> </div>
@ -42,7 +43,9 @@
<el-dropdown class="w-full" trigger="hover" placement="left-start"> <el-dropdown class="w-full" trigger="hover" placement="left-start">
<div class="flex-between w-full" style="line-height: 22px; padding: 12px 11px"> <div class="flex-between w-full" style="line-height: 22px; padding: 12px 11px">
<span> {{ $t('layout.language') }}</span> <span> {{ $t('layout.language') }}</span>
<el-icon><ArrowRight /></el-icon> <el-icon>
<ArrowRight/>
</el-icon>
</div> </div>
<template #dropdown> <template #dropdown>
@ -55,14 +58,14 @@
class="flex-between" class="flex-between"
> >
<span :class="lang.value === user.userInfo?.language ? 'primary' : ''">{{ <span :class="lang.value === user.userInfo?.language ? 'primary' : ''">{{
lang.label lang.label
}}</span> }}</span>
<el-icon <el-icon
:class="lang.value === user.userInfo?.language ? 'primary' : ''" :class="lang.value === user.userInfo?.language ? 'primary' : ''"
v-if="lang.value === user.userInfo?.language" v-if="lang.value === user.userInfo?.language"
> >
<Check /> <Check/>
</el-icon> </el-icon>
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
@ -86,25 +89,24 @@
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
<APIKeyDialog :user-id="user.userInfo?.id" ref="APIKeyDialogRef" /> <APIKeyDialog :user-id="user.userInfo?.id" ref="APIKeyDialogRef"/>
<!-- <ResetPassword ref="resetPasswordRef"></ResetPassword> --> <ResetPassword ref="resetPasswordRef"></ResetPassword>
<!-- <AboutDialog ref="AboutDialogRef"></AboutDialog> <!-- <AboutDialog ref="AboutDialogRef"></AboutDialog>
--> -->
<!-- <UserPwdDialog ref="UserPwdDialogRef" /> --> <!-- <UserPwdDialog ref="UserPwdDialogRef" /> -->
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from 'vue' import {ref, onMounted} from 'vue'
import useStore from '@/stores' import useStore from '@/stores'
import { useRouter } from 'vue-router' import {useRouter} from 'vue-router'
// import ResetPassword from './ResetPassword.vue' import ResetPassword from './ResetPassword.vue'
// import AboutDialog from './AboutDialog.vue' // import AboutDialog from './AboutDialog.vue'
// import UserPwdDialog from '@/views/user-manage/component/UserPwdDialog.vue' // import UserPwdDialog from '@/views/user-manage/component/UserPwdDialog.vue'
import APIKeyDialog from './APIKeyDialog.vue' import APIKeyDialog from './APIKeyDialog.vue'
import { ComplexPermission } from '@/utils/permission/type' import {ComplexPermission} from '@/utils/permission/type'
import { langList } from '@/locales/index' import {langList} from '@/locales/index'
import { useLocale } from '@/locales/useLocale'
import type ResetPassword from "@/layout/layout-header/avatar/ResetPassword.vue"; const {user} = useStore()
const { user } = useStore()
const router = useRouter() const router = useRouter()
const AboutDialogRef = ref() const AboutDialogRef = ref()
@ -130,7 +132,7 @@ const openResetPassword = () => {
const logout = () => { const logout = () => {
user.logout().then(() => { user.logout().then(() => {
router.push({ name: 'login' }) router.push({name: 'login'})
}) })
} }
@ -150,6 +152,7 @@ onMounted(() => {
:deep(.el-dropdown-menu__item) { :deep(.el-dropdown-menu__item) {
padding: 12px 11px; padding: 12px 11px;
&:hover { &:hover {
background: var(--app-text-color-light-1); background: var(--app-text-color-light-1);
} }