From 315c06d9d52c53d1a18864ceb3e3889e84ea4ce5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=BB=E7=A0=96-JAVA=5CAdministrator?= <591141169@qq.com>
Date: Tue, 16 Apr 2024 17:06:26 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BF=98=E8=AE=B0=E5=AF=86=E7=A0=81=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/user/index.ts             |  57 ++--
 src/permission.ts                        |   3 +-
 src/router/modules/remaining.ts          |  16 +-
 src/views/login/aa.vue                   |  10 -
 src/views/login/components/LoginForm.vue | 392 ++++++++++++-----------
 src/views/login/forgetPassword.vue       |  71 ++++
 src/views/login/updatePassword.vue       |  77 +++++
 7 files changed, 401 insertions(+), 225 deletions(-)
 delete mode 100644 src/views/login/aa.vue
 create mode 100644 src/views/login/forgetPassword.vue
 create mode 100644 src/views/login/updatePassword.vue

diff --git a/src/api/system/user/index.ts b/src/api/system/user/index.ts
index 7011ade4c..0aaa49507 100644
--- a/src/api/system/user/index.ts
+++ b/src/api/system/user/index.ts
@@ -1,28 +1,29 @@
 import request from '@/config/axios'
 
 export interface UserVO {
-  id: number
-  username: string
-  nickname: string
-  deptId: number
-  postIds: string[]
-  email: string
-  mobile: string
-  sex: number
-  avatar: string
-  loginIp: string
-  status: number
-  remark: string
-  loginDate: Date
-  createTime: Date
-  userType :string
+  id : number
+  username : string
+  nickname : string
+  deptId : number
+  postIds : string[]
+  email : string
+  mobile : string
+  sex : number
+  avatar : string
+  loginIp : string
+  status : number
+  remark : string
+  loginDate : Date
+  createTime : Date
+  userType : string
+  mailKey : string
 }
 
 export const getUserPage = async (params) => {
   console.log(params)
   if (params.isSearch) {
     delete params.isSearch
-    const data = {...params}
+    const data = { ...params }
     return await request.post({ url: '/system/user/senior', data })
   } else {
     return await request.get({ url: '/system/user/page', params })
@@ -35,22 +36,22 @@ export const getUserPage = async (params) => {
 // }
 
 // 查询用户详情
-export const getUser = (id: number) => {
+export const getUser = (id : number) => {
   return request.get({ url: '/system/user/get?id=' + id })
 }
 
 // 新增用户
-export const createUser = (data: UserVO) => {
+export const createUser = (data : UserVO) => {
   return request.post({ url: '/system/user/create', data })
 }
 
 // 修改用户
-export const updateUser = (data: UserVO) => {
+export const updateUser = (data : UserVO) => {
   return request.put({ url: '/system/user/update', data })
 }
 
 // 删除用户
-export const deleteUser = (id: number) => {
+export const deleteUser = (id : number) => {
   return request.delete({ url: '/system/user/delete?id=' + id })
 }
 
@@ -65,7 +66,7 @@ export const importUserTemplate = () => {
 }
 
 // 用户密码重置
-export const resetUserPwd = (id: number, password: string) => {
+export const resetUserPwd = (id : number, password : string) => {
   const data = {
     id,
     password
@@ -74,7 +75,7 @@ export const resetUserPwd = (id: number, password: string) => {
 }
 
 // 用户状态修改
-export const updateUserStatus = (id: number, status: number) => {
+export const updateUserStatus = (id : number, status : number) => {
   const data = {
     id,
     status
@@ -83,6 +84,16 @@ export const updateUserStatus = (id: number, status: number) => {
 }
 
 // 获取用户精简信息列表
-export const getSimpleUserList = (): Promise<UserVO[]> => {
+export const getSimpleUserList = () : Promise<UserVO[]> => {
   return request.get({ url: '/system/user/list-all-simple' })
 }
+
+// 忘记密码
+export const forgetPassword = (data : UserVO) => {
+  return request.put({ url: '/system/user/forgetPassword', data })
+}
+
+// 忘记密码->修改密码
+export const updatePassword = (data : UserVO) => {
+  return request.put({ url: '/system/user/updatePassword', data })
+}
diff --git a/src/permission.ts b/src/permission.ts
index 24ce89277..1650d3504 100644
--- a/src/permission.ts
+++ b/src/permission.ts
@@ -15,7 +15,8 @@ const { loadStart, loadDone } = usePageLoading()
 // 路由不重定向白名单
 const whiteList = [
   '/login',
-  '/aa',
+  '/forgetPassword',
+  '/updatePassword',
   '/social-login',
   '/auth-redirect',
   '/bind',
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index 57c118c66..f8e08bce4 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -185,9 +185,19 @@ const remainingRouter: AppRouteRecordRaw[] = [
       noTagsView: true
     }
   },{
-    path: '/aa',
-    component: () => import('@/views/login/aa.vue'),
-    name: 'Aa',
+    path: '/forgetPassword',
+    component: () => import('@/views/login/forgetPassword.vue'),
+    name: 'ForgetPassword',
+    meta: {
+      hidden: true,
+      title: t('router.login'),
+      noTagsView: true
+    }
+  },
+  {
+    path: '/updatePassword',
+    component: () => import('@/views/login/updatePassword.vue'),
+    name: 'UpdatePassword',
     meta: {
       hidden: true,
       title: t('router.login'),
diff --git a/src/views/login/aa.vue b/src/views/login/aa.vue
deleted file mode 100644
index 96fb0164d..000000000
--- a/src/views/login/aa.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-  <div>11</div>
-</template>
-<script lang="ts" setup>
-
-</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/src/views/login/components/LoginForm.vue b/src/views/login/components/LoginForm.vue
index fdcef1ceb..6f79ce15e 100644
--- a/src/views/login/components/LoginForm.vue
+++ b/src/views/login/components/LoginForm.vue
@@ -1,5 +1,6 @@
 <template>
-  <el-form v-show="getShow" ref="formLogin" :model="loginData.loginForm" :rules="LoginRules" class="login-form" label-position="top" label-width="120px" size="large">
+  <el-form v-show="getShow" ref="formLogin" :model="loginData.loginForm" :rules="LoginRules" class="login-form"
+    label-position="top" label-width="120px" size="large">
     <el-row style="margin-right: -10px; margin-left: -10px">
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item>
@@ -8,23 +9,27 @@
       </el-col>
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item v-if="loginData.tenantEnable === 'true'" prop="tenantName">
-          <el-input v-model="loginData.loginForm.tenantName" :placeholder="t('login.tenantNamePlaceholder')" :prefix-icon="iconHouse" link type="primary" />
+          <el-input v-model="loginData.loginForm.tenantName" :placeholder="t('login.tenantNamePlaceholder')"
+            :prefix-icon="iconHouse" link type="primary" />
         </el-form-item>
       </el-col>
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item prop="username">
-          <el-input v-model="loginData.loginForm.username" :placeholder="t('login.usernamePlaceholder')" :prefix-icon="iconAvatar" style="height: 42px;" />
+          <el-input v-model="loginData.loginForm.username" :placeholder="t('login.usernamePlaceholder')"
+            :prefix-icon="iconAvatar" style="height: 42px;" />
         </el-form-item>
       </el-col>
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item prop="password">
-          <el-input v-model="loginData.loginForm.password" :placeholder="t('login.passwordPlaceholder')" :prefix-icon="iconLock" show-password type="password" @keyup.enter="getCode()" style="height: 42px;" />
+          <el-input v-model="loginData.loginForm.password" :placeholder="t('login.passwordPlaceholder')"
+            :prefix-icon="iconLock" show-password type="password" @keyup.enter="getCode()" style="height: 42px;" />
         </el-form-item>
       </el-col>
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item prop="code">
           <div class="flex w-[100%]">
-            <el-input v-model="loginData.loginForm.code" :placeholder="t('login.codePlaceholder')" style="width: 76%;margin-right: 10px;height: 42px;" @keyup.enter="handleLogin()">
+            <el-input v-model="loginData.loginForm.code" :placeholder="t('login.codePlaceholder')"
+              style="width: 76%;margin-right: 10px;height: 42px;" @keyup.enter="handleLogin()">
               <template #prefix>
                 <img src="@/assets/imgs/code.png" alt="" style="width: 16px;height: 16px;" />
               </template>
@@ -44,14 +49,17 @@
               </el-checkbox>
             </el-col>
             <el-col :offset="6" :span="12">
-              <el-link style="float: right" type="primary">{{ t('login.forgetPassword') }}</el-link>
+              <el-link style="float: right" type="primary"
+                @click="handleUpdate()">{{ t('login.forgetPassword') }}</el-link>
+              <!-- <el-button type="text" icon="Edit">忘记密码按钮</el-button> -->
             </el-col>
           </el-row>
         </el-form-item>
       </el-col>
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item>
-          <XButton :loading="loginLoading" :title="t('login.login')" class="w-[100%]" type="primary" @click="handleLogin()" />
+          <XButton :loading="loginLoading" :title="t('login.login')" class="w-[100%]" type="primary"
+            @click="handleLogin()" />
         </el-form-item>
       </el-col>
       <!-- <Verify
@@ -65,213 +73,221 @@
   </el-form>
 </template>
 <script lang="ts" setup>
-import { ElLoading } from 'element-plus'
-import LoginFormTitle from './LoginFormTitle.vue'
-import type { RouteLocationNormalizedLoaded } from 'vue-router'
+  import { ElLoading } from 'element-plus'
+  import LoginFormTitle from './LoginFormTitle.vue'
+  import type { RouteLocationNormalizedLoaded } from 'vue-router'
 
-import { useIcon } from '@/hooks/web/useIcon'
+  import { useIcon } from '@/hooks/web/useIcon'
 
-import * as authUtil from '@/utils/auth'
-import { usePermissionStore } from '@/store/modules/permission'
-import * as LoginApi from '@/api/login'
-import { LoginStateEnum, useFormValid, useLoginState } from './useLogin'
-import { getCodeImg } from "@/api/login";
+  import * as authUtil from '@/utils/auth'
+  import { usePermissionStore } from '@/store/modules/permission'
+  import * as LoginApi from '@/api/login'
+  import { LoginStateEnum, useFormValid, useLoginState } from './useLogin'
+  import { getCodeImg } from "@/api/login";
+  import router from "@/router";
+  import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
+  import * as DeptApi from '@/api/system/dept'
 
-import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
-import * as DeptApi from '@/api/system/dept'
+  defineOptions({ name: 'LoginForm' })
 
-defineOptions({ name: 'LoginForm' })
+  const { t } = useI18n()
+  const message = useMessage()
+  const iconHouse = useIcon({ icon: 'ep:house' })
+  const iconAvatar = useIcon({ icon: 'ep:avatar' })
+  const iconLock = useIcon({ icon: 'ep:lock' })
+  const formLogin = ref()
+  const { validForm } = useFormValid(formLogin)
+  const { setLoginState, getLoginState } = useLoginState()
+  const { currentRoute, push, replace } = useRouter()
+  const permissionStore = usePermissionStore()
+  const redirect = ref<string>('')
+  const loginLoading = ref(false)
+  const verify = ref()
+  const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字
 
-const { t } = useI18n()
-const message = useMessage()
-const iconHouse = useIcon({ icon: 'ep:house' })
-const iconAvatar = useIcon({ icon: 'ep:avatar' })
-const iconLock = useIcon({ icon: 'ep:lock' })
-const formLogin = ref()
-const { validForm } = useFormValid(formLogin)
-const { setLoginState, getLoginState } = useLoginState()
-const { currentRoute, push , replace} = useRouter()
-const permissionStore = usePermissionStore()
-const redirect = ref<string>('')
-const loginLoading = ref(false)
-const verify = ref()
-const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字
 
-const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN)
-// 验证码开关
-const captchaEnabled = ref(true);
-const codeUrl = ref("");
+  const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN)
+  // 验证码开关
+  const captchaEnabled = ref(true);
+  const codeUrl = ref("");
 
-const LoginRules = {
-  tenantName: [required],
-  username: [required],
-  password: [required]
-}
-const loginData = reactive({
-  isShowPassword: false,
-  captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE,
-  tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE,
-  loginForm: {
-    tenantName: '闻荫源码',
-    username: 'admin',
-    password: '123456',
-    captchaVerification: '',
-    rememberMe: false,
-    code: '',
-    uuid: ''
+  const LoginRules = {
+    tenantName: [required],
+    username: [required],
+    password: [required]
   }
-})
+  const loginData = reactive({
+    isShowPassword: false,
+    captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE,
+    tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE,
+    loginForm: {
+      tenantName: '闻荫源码',
+      username: 'admin',
+      password: '123456',
+      captchaVerification: '',
+      rememberMe: false,
+      code: '',
+      uuid: ''
+    }
+  })
 
-const socialList = [
-  { icon: 'ant-design:github-filled', type: 0 },
-  { icon: 'ant-design:wechat-filled', type: 30 },
-  { icon: 'ant-design:alipay-circle-filled', type: 0 },
-  { icon: 'ant-design:dingtalk-circle-filled', type: 20 }
-]
+  const socialList = [
+    { icon: 'ant-design:github-filled', type: 0 },
+    { icon: 'ant-design:wechat-filled', type: 30 },
+    { icon: 'ant-design:alipay-circle-filled', type: 0 },
+    { icon: 'ant-design:dingtalk-circle-filled', type: 20 }
+  ]
 
-// 获取验证码
-// const getCode = async () => {
-//   // 情况一，未开启：则直接登录
-//   if (loginData.captchaEnable === 'false') {
-//     await handleLogin({})
-//   } else {
-//     // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
-//     // 弹出验证码
-//     verify.value.show()
-//   }
-// }
-function getCode() {
-  getCodeImg().then(res => {
-    captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
-    if (captchaEnabled.value) {
-      codeUrl.value = "data:image/gif;base64," + res.img;
-      loginData.loginForm.uuid = res.uuid;
-    }
-  });
-}
-//获取租户ID
-const getTenantId = async () => {
-  if (loginData.tenantEnable === 'true') {
-    const res = await LoginApi.getTenantIdByName(loginData.loginForm.tenantName)
-    authUtil.setTenantId(res)
+  // 获取验证码
+  // const getCode = async () => {
+  //   // 情况一，未开启：则直接登录
+  //   if (loginData.captchaEnable === 'false') {
+  //     await handleLogin({})
+  //   } else {
+  //     // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
+  //     // 弹出验证码
+  //     verify.value.show()
+  //   }
+  // }
+  function getCode() {
+    getCodeImg().then(res => {
+      captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
+      if (captchaEnabled.value) {
+        codeUrl.value = "data:image/gif;base64," + res.img;
+        loginData.loginForm.uuid = res.uuid;
+      }
+    });
   }
-}
-// 记住我
-const getCookie = () => {
-  const loginForm = authUtil.getLoginForm()
-  if (loginForm) {
-    loginData.loginForm = {
-      ...loginData.loginForm,
-      username: loginForm.username ? loginForm.username : loginData.loginForm.username,
-      password: loginForm.password ? loginForm.password : loginData.loginForm.password,
-      rememberMe: loginForm.rememberMe ? true : false,
-      tenantName: loginForm.tenantName ? loginForm.tenantName : loginData.loginForm.tenantName
+  //获取租户ID
+  const getTenantId = async () => {
+    if (loginData.tenantEnable === 'true') {
+      const res = await LoginApi.getTenantIdByName(loginData.loginForm.tenantName)
+      authUtil.setTenantId(res)
     }
   }
-}
-const loading = ref() // ElLoading.service 返回的实例
-// 登录
-const handleLogin = async (params) => {
-  console.log('登录-185')
-  loginLoading.value = true
-  try {
-    await getTenantId()
-    const data = await validForm()
-    if (!data) {
-      return
-    }
-    const res = await LoginApi.login(loginData.loginForm)
-    if (!res) {
-      console.log('登录-195')
-      getCode()
-      return
-    }
-    loading.value = ElLoading.service({
-      lock: true,
-      text: '正在加载系统中...',
-      background: 'rgba(0, 0, 0, 0.7)'
-    })
-    if (loginData.loginForm.rememberMe) {
-      authUtil.setLoginForm(loginData.loginForm)
-    } else {
-      authUtil.removeLoginForm()
-    }
-    authUtil.setToken(res)
-    if (!redirect.value) {
-      redirect.value = '/'
+  // 记住我
+  const getCookie = () => {
+    const loginForm = authUtil.getLoginForm()
+    if (loginForm) {
+      loginData.loginForm = {
+        ...loginData.loginForm,
+        username: loginForm.username ? loginForm.username : loginData.loginForm.username,
+        password: loginForm.password ? loginForm.password : loginData.loginForm.password,
+        rememberMe: loginForm.rememberMe ? true : false,
+        tenantName: loginForm.tenantName ? loginForm.tenantName : loginData.loginForm.tenantName
+      }
     }
-    // 判断是否为SSO登录
-    if (redirect.value.indexOf('sso') !== -1) {
-      window.location.href = window.location.href.replace('/login?redirect=', '')
-    } else {
-      console.log(redirect.value)
-      replace({ path: redirect.value || permissionStore.addRouters[0].path })
-    }
-    // 存储 部门信息
-    const { wsCache } = useCache()
-    wsCache.set(CACHE_KEY.DEPT, await DeptApi.getSimpleDeptList())
-  } finally {
-    console.log('登录-224')
-    getCode()
-    loginLoading.value = false
-    loading?.value?.close()
   }
-}
 
-// 社交登录
-const doSocialLogin = async (type: number) => {
-  if (type === 0) {
-    message.error('此方式未配置')
-  } else {
+  const handleUpdate = () => {
+    router.push({
+      name: 'ForgetPassword',
+    })
+  };
+
+  const loading = ref() // ElLoading.service 返回的实例
+  // 登录
+  const handleLogin = async (params) => {
+    console.log('登录-185')
     loginLoading.value = true
-    if (loginData.tenantEnable === 'true') {
-      await message.prompt('请输入租户名称', t('common.reminder')).then(async ({ value }) => {
-        const res = await LoginApi.getTenantIdByName(value)
-        authUtil.setTenantId(res)
+    try {
+      await getTenantId()
+      const data = await validForm()
+      if (!data) {
+        return
+      }
+      const res = await LoginApi.login(loginData.loginForm)
+      if (!res) {
+        console.log('登录-195')
+        getCode()
+        return
+      }
+      loading.value = ElLoading.service({
+        lock: true,
+        text: '正在加载系统中...',
+        background: 'rgba(0, 0, 0, 0.7)'
       })
+      if (loginData.loginForm.rememberMe) {
+        authUtil.setLoginForm(loginData.loginForm)
+      } else {
+        authUtil.removeLoginForm()
+      }
+      authUtil.setToken(res)
+      if (!redirect.value) {
+        redirect.value = '/'
+      }
+      // 判断是否为SSO登录
+      if (redirect.value.indexOf('sso') !== -1) {
+        window.location.href = window.location.href.replace('/login?redirect=', '')
+      } else {
+        console.log(redirect.value)
+        replace({ path: redirect.value || permissionStore.addRouters[0].path })
+      }
+      // 存储 部门信息
+      const { wsCache } = useCache()
+      wsCache.set(CACHE_KEY.DEPT, await DeptApi.getSimpleDeptList())
+    } finally {
+      console.log('登录-224')
+      getCode()
+      loginLoading.value = false
+      loading?.value?.close()
     }
-    // 计算 redirectUri
-    const redirectUri =
-      location.origin + '/social-login?type=' + type + '&redirect=' + (redirect.value || '/')
-    // 进行跳转
-    const res = await LoginApi.socialAuthRedirect(type, encodeURIComponent(redirectUri))
-    console.log(33)
-    window.location.href = res
   }
-}
-watch(
-  () => currentRoute.value,
-  (route: RouteLocationNormalizedLoaded) => {
-    redirect.value = route?.query?.redirect as string
-  },
-  {
-    immediate: true
+
+  // 社交登录
+  const doSocialLogin = async (type : number) => {
+    if (type === 0) {
+      message.error('此方式未配置')
+    } else {
+      loginLoading.value = true
+      if (loginData.tenantEnable === 'true') {
+        await message.prompt('请输入租户名称', t('common.reminder')).then(async ({ value }) => {
+          const res = await LoginApi.getTenantIdByName(value)
+          authUtil.setTenantId(res)
+        })
+      }
+      // 计算 redirectUri
+      const redirectUri =
+        location.origin + '/social-login?type=' + type + '&redirect=' + (redirect.value || '/')
+      // 进行跳转
+      const res = await LoginApi.socialAuthRedirect(type, encodeURIComponent(redirectUri))
+      console.log(33)
+      window.location.href = res
+    }
   }
-)
-onMounted(() => {
-  getCode();
-  getCookie()
-})
+  watch(
+    () => currentRoute.value,
+    (route : RouteLocationNormalizedLoaded) => {
+      redirect.value = route?.query?.redirect as string
+    },
+    {
+      immediate: true
+    }
+  )
+  onMounted(() => {
+    getCode();
+    getCookie()
+  })
 </script>
 
 <style lang="scss" scoped>
-:deep(.anticon) {
-  &:hover {
-    color: var(--el-color-primary) !important;
+  :deep(.anticon) {
+    &:hover {
+      color: var(--el-color-primary) !important;
+    }
   }
-}
-
-.login-code {
-  float: right;
-  width: 100%;
-  height: 38px;
 
-  img {
+  .login-code {
+    float: right;
     width: 100%;
-    height: auto;
-    max-width: 100px;
-    vertical-align: middle;
-    cursor: pointer;
+    height: 38px;
+
+    img {
+      width: 100%;
+      height: auto;
+      max-width: 100px;
+      vertical-align: middle;
+      cursor: pointer;
+    }
   }
-}
 </style>
diff --git a/src/views/login/forgetPassword.vue b/src/views/login/forgetPassword.vue
new file mode 100644
index 000000000..2df24049e
--- /dev/null
+++ b/src/views/login/forgetPassword.vue
@@ -0,0 +1,71 @@
+<template>
+  <div v-loading="loading" style="display: flex; justify-content: center; align-items: center;">
+    <el-form ref="formSmsLogin" :model="loginData" :rules="rules" label-width="130px" label-position="top" size="large">
+      <div class="title" style="font-size:25px" margin-left="0px">忘记密码</div>
+      <el-row type="flex" justify="center" align="middle">
+        <el-col :span="13">
+          <el-form-item label="请输入用户名" prop="username" align="center">
+            <el-input v-model="loginData.username" placeholder="请输入用户名" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="13">
+          <el-form-item label="请输入邮箱" prop="email">
+            <el-input v-model="loginData.email" placeholder="请输入邮箱" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div class="dialog-footer">
+      <el-button type="primary" @click="submitForm">确 定</el-button>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup name="forgetPassword">
+  import type { RouteLocationNormalizedLoaded } from 'vue-router'
+  import { useIcon } from '@/hooks/web/useIcon'
+  import { setTenantId, setToken } from '@/utils/auth'
+  import { usePermissionStore } from '@/store/modules/permission'
+  import { getTenantIdByName, sendSmsCode, smsLogin } from '@/api/login'
+  import * as UserApi from '@/api/system/user'
+
+  const { t } = useI18n()
+  const message = useMessage()
+  const permissionStore = usePermissionStore()
+  const formSmsLogin = ref()
+  const loginLoading = ref(false)
+  const iconHouse = useIcon({ icon: 'ep:house' })
+  const iconCellphone = useIcon({ icon: 'ep:cellphone' })
+  const iconCircleCheck = useIcon({ icon: 'ep:circle-check' })
+  const rules = {
+    username: [required],
+    email: [required]
+  }
+  const loginData = reactive({
+    username: '',
+    email: '',
+   
+  })
+  const loading = ref(false);
+  const submitForm = async () => {
+    try {
+      const data = loginData as unknown as UserApi.UserVO
+      await UserApi.forgetPassword(data)
+      message.success(t('common.updateSuccess'))
+      // 发送操作成功的事件
+    } finally {
+      // formLoading.value = false
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  :deep(.anticon) {
+    &:hover {
+      color: var(--el-color-primary) !important;
+    }
+  }
+
+  .smsbtn {
+    margin-top: 33px;
+  }
+</style>
diff --git a/src/views/login/updatePassword.vue b/src/views/login/updatePassword.vue
new file mode 100644
index 000000000..90ea4821e
--- /dev/null
+++ b/src/views/login/updatePassword.vue
@@ -0,0 +1,77 @@
+<template>
+  <div v-loading="loading" style="display: flex; justify-content: center; align-items: center;">
+    <el-form ref="formSmsLogin" :model="loginData" :rules="rules" label-width="130px" label-position="top" size="large">
+      <div class="title" style="font-size:25px" margin-left="0px">重置密码</div>
+      <el-row type="flex" justify="center" align="middle">
+        <el-col :span="13">
+          <el-form-item label="新密码" prop="password" align="center">
+            <el-input v-model="loginData.password" placeholder="请输入新密码" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="13">
+          <el-form-item label="确认新密码" prop="againPassword">
+            <el-input v-model="loginData.againPassword" placeholder="请再次新密码" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div class="dialog-footer">
+      <el-button type="primary" @click="submitForm">确 定</el-button>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup name="bb">
+  import type { RouteLocationNormalizedLoaded } from 'vue-router'
+  import { useIcon } from '@/hooks/web/useIcon'
+  import { setTenantId, setToken } from '@/utils/auth'
+  import { usePermissionStore } from '@/store/modules/permission'
+  import { getTenantIdByName, sendSmsCode, smsLogin } from '@/api/login'
+  import * as UserApi from '@/api/system/user'
+
+  const { t } = useI18n()
+  const message = useMessage()
+  const permissionStore = usePermissionStore()
+  const formSmsLogin = ref()
+  const loginLoading = ref(false)
+  const iconHouse = useIcon({ icon: 'ep:house' })
+  const iconCellphone = useIcon({ icon: 'ep:cellphone' })
+  const iconCircleCheck = useIcon({ icon: 'ep:circle-check' })
+  const route = useRoute() //路由信息
+  const rules = {
+    password: [required],
+    againPassword: [required]
+  }
+  const loginData = reactive({
+    password: '',
+    againPassword: '',
+    mailKey: '',
+  })
+  const loading = ref(false);
+  const submitForm = async () => {
+    try {
+      loginData.mailKey = route.query.mailKey;
+      if (loginData.password != loginData.againPassword) {
+        message.error('两次输入的密码不一致，请重新输入!')
+      } else {
+        const data = loginData as unknown as UserApi.UserVO
+        await UserApi.updatePassword(data)
+        // 发送操作成功的事件
+        message.success(t('common.updateSuccess'))
+      }
+    } finally {
+      // formLoading.value = false
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  :deep(.anticon) {
+    &:hover {
+      color: var(--el-color-primary) !important;
+    }
+  }
+
+  .smsbtn {
+    margin-top: 33px;
+  }
+</style>