ADD: 修改个人密码

frontend/src/layouts/components/Header/components/Avatar.vue

@@ -22,10 +22,10 @@
                     <el-icon><Sunny /></el-icon>
                     {{ t('header.changeTheme') }}
                 </el-dropdown-item>
-                <el-dropdown-item @click="openDialog('infoRef')">
+                <!--                <el-dropdown-item @click="openDialog('infoRef')">
                     <el-icon><User /></el-icon>
                     {{ t('header.personalData') }}
-                </el-dropdown-item>
+                </el-dropdown-item>-->
                 <el-dropdown-item @click="openDialog('passwordRef')">
                     <el-icon><Edit /></el-icon>
                     {{ t('header.changePassword') }}

frontend/src/layouts/components/Header/components/PasswordDialog.vue

@@ -1,22 +1,171 @@
 <template>
-  <el-dialog v-model="dialogVisible" title="修改密码" width="500px" draggable>
+    <el-dialog v-model="dialogVisible" title="修改密码" width="500px" draggable>
-    <span>This is Password</span>
+        <div>
-    <template #footer>
+            <el-form :model="formContent" ref="dialogFormRef" :rules="rules">
-      <span class="dialog-footer">
+                <el-form-item label="原密码" prop="oldPassword" :label-width="100">
-        <el-button @click="dialogVisible = false">取消</el-button>
+                    <el-input
-        <el-button type="primary" @click="dialogVisible = false">确认</el-button>
+                        type="oldPassword"
-      </span>
+                        v-model="formContent.oldPassword"
-    </template>
+                        show-password
-  </el-dialog>
+                        placeholder="请输入原密码"
+                        autocomplete="off"
+                        maxlength="32"
+                        show-word-limit
+                    />
+                </el-form-item>
+                <el-form-item label="新密码" prop="newPassword" :label-width="100">
+                    <el-input
+                        type="newPassword"
+                        v-model="formContent.newPassword"
+                        show-password
+                        placeholder="请输入新密码"
+                        autocomplete="off"
+                        maxlength="32"
+                        show-word-limit
+                    />
+                </el-form-item>
+                <el-form-item label="确认密码" prop="surePassword" :label-width="100">
+                    <el-input
+                        type="surePassword"
+                        v-model="formContent.surePassword"
+                        show-password
+                        placeholder="请再次输入确认密码"
+                        autocomplete="off"
+                        maxlength="32"
+                        show-word-limit
+                    />
+                </el-form-item>
+            </el-form>
+        </div>
+        <template #footer>
+            <div class="dialog-footer">
+                <el-button @click="close()">取消</el-button>
+                <el-button type="primary" @click="save()">保存</el-button>
+            </div>
+        </template>
+    </el-dialog>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
-import { ref } from "vue";
+import { ref, type Ref } from 'vue'
+import { ElMessage, type FormItemRule } from 'element-plus'
+import { updatePassWord } from '@/api/user/user'
+import { type User } from '@/api/user/interface/user'
+import { useUserStore } from '@/stores/modules/user'
+import { useAuthStore } from '@/stores/modules/auth'
+import { useDictStore } from '@/stores/modules/dict'
+import { logoutApi } from '@/api/user/login'
+import { LOGIN_URL } from '@/config'
+import { useAppSceneStore, useModeStore } from '@/stores/modules/mode'
+import { UserState } from '@/stores/interface'
+import { useRouter } from 'vue-router'
 
-const dialogVisible = ref(false);
+const userStore = useUserStore()
-const openDialog = () => {
+const dictStore = useDictStore()
-  dialogVisible.value = true;
+const authStore = useAuthStore()
-};
+const modeStore = useModeStore()
+const AppSceneStore = useAppSceneStore()
+const router = useRouter()
+// 定义弹出组件元信息
+const dialogFormRef = ref()
+function useMetaInfo() {
+    const dialogVisible = ref(false)
+    const formContent = ref<User.ResPassWordUser>({
+        id: '', //用户ID，作为唯一标识
+        oldPassword: '', //密码
+        newPassword: '', //
+        surePassword: ''
+    })
+    return { dialogVisible, formContent }
+}
 
-defineExpose({ openDialog });
+const { dialogVisible, formContent } = useMetaInfo()
+// 清空formContent
+const resetFormContent = () => {
+    formContent.value = {
+        id: '', //用户ID，作为唯一标识
+        oldPassword: '', //密码
+        newPassword: '', //
+        surePassword: ''
+    }
+}
+
+// 定义规则
+const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
+    oldPassword: [{ required: true, message: '原密码必填！', trigger: 'blur' }],
+    newPassword: [
+        { required: true, message: '新密码必填！', trigger: 'blur' },
+        {
+            pattern: /^(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]).{8,16}$/,
+            message: '密码长度为8-16，需包含特殊字符',
+            trigger: 'blur'
+        }
+    ],
+    surePassword: [
+        { required: true, message: '确认密码必填！', trigger: 'blur' },
+        {
+            validator: (rule: FormItemRule, value: string, callback: Function) => {
+                if (value !== formContent.value.newPassword) {
+                    callback(new Error('两次输入的密码不一致！'))
+                } else {
+                    callback()
+                }
+            },
+            trigger: 'blur'
+        }
+    ]
+})
+
+// 关闭弹窗
+const close = () => {
+    dialogVisible.value = false
+    // 清空dialogForm中的值
+    resetFormContent()
+    // 重置表单
+    dialogFormRef.value?.resetFields()
+}
+
+// 保存数据
+const save = () => {
+    try {
+        dialogFormRef.value?.validate(async (valid: boolean) => {
+            if (valid) {
+                if (formContent.value.id) {
+                    await updatePassWord(formContent.value)
+                    ElMessage.success('修改密码成功，请重新登录！')
+                    setTimeout(async () => {
+                        // 1.执行退出登录接口
+                        await logoutApi()
+                        // 2.清除 Token
+                        userStore.setAccessToken('')
+                        userStore.setRefreshToken('')
+                        userStore.setExp(0)
+                        userStore.setUserInfo({ id: '', name: '' } as UserState['userInfo'])
+                        userStore.setIsRefreshToken(false)
+                        dictStore.setDictData([])
+                        modeStore.setCurrentMode('')
+                        AppSceneStore.setCurrentMode('')
+                        //重置菜单/导航栏权限
+                        await authStore.resetAuthStore()
+                        await router.push(LOGIN_URL)
+                    }, 2000)
+                }
+                close()
+            }
+        })
+    } catch (err) {
+        console.error('验证过程中出现错误', err)
+    }
+}
+
+// 打开弹窗是编辑
+const openDialog = async () => {
+    // 重置表单
+    dialogFormRef.value?.resetFields()
+    dialogVisible.value = true
+    formContent.value.id = userStore.userInfo.id
+}
+
+// 对外映射
+defineExpose({ openDialog })
 </script>