From c4c8e7e74b784c1d5a719b60e8d0adefc005ae3e Mon Sep 17 00:00:00 2001
From: zhouwx <1175765986@qq.com>
Date: 星期四, 28 八月 2025 10:16:57 +0800
Subject: [PATCH] 修改
---
src/layout/components/Navbar.vue | 167 +++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 136 insertions(+), 31 deletions(-)
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 43e4b3f..463aa7e 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,58 +1,92 @@
<template>
<div class="navbar">
- <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav" />
- <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" />
+ <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container"
+ @toggleClick="toggleSideBar"/>
+ <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav"/>
+ <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav"/>
<div class="right-menu">
<template v-if="appStore.device !== 'mobile'">
-<!-- <header-search id="header-search" class="right-menu-item" />-->
+ <!-- <header-search id="header-search" class="right-menu-item" />-->
-<!-- <el-tooltip content="源码地址" effect="dark" placement="bottom">-->
-<!-- <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />-->
-<!-- </el-tooltip>-->
+ <!-- <el-tooltip content="源码地址" effect="dark" placement="bottom">-->
+ <!-- <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />-->
+ <!-- </el-tooltip>-->
-<!-- <el-tooltip content="文档地址" effect="dark" placement="bottom">-->
-<!-- <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />-->
-<!-- </el-tooltip>-->
+ <!-- <el-tooltip content="文档地址" effect="dark" placement="bottom">-->
+ <!-- <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />-->
+ <!-- </el-tooltip>-->
- <screenfull id="screenfull" class="right-menu-item hover-effect" />
+ <!-- <screenfull id="screenfull" class="right-menu-item hover-effect" />-->
-<!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">-->
-<!-- <size-select id="size-select" class="right-menu-item hover-effect" />-->
-<!-- </el-tooltip>-->
+ <!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">-->
+ <!-- <size-select id="size-select" class="right-menu-item hover-effect" />-->
+ <!-- </el-tooltip>-->
</template>
<div class="avatar-container">
<el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
<div class="avatar-wrapper">
-<!-- <img :src="userStore.avatar" class="user-avatar" />-->
- <img src="../../assets/images/avator.png" class="user-avatar" />
- <el-icon><caret-bottom /></el-icon>
+ <img :src="avator" class="user-avatar"/>
+ <el-icon>
+ <caret-bottom/>
+ </el-icon>
</div>
<template #dropdown>
<el-dropdown-menu>
-<!-- <router-link to="/user/profile">-->
-<!-- <el-dropdown-item>个人中心</el-dropdown-item>-->
-<!-- </router-link>-->
-<!-- <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">-->
-<!-- <span>布局设置</span>-->
-<!-- </el-dropdown-item>-->
- <el-dropdown-item divided command="logout">
+ <!-- <router-link to="/user/profile">-->
+ <!-- <el-dropdown-item>个人中心</el-dropdown-item>-->
+ <!-- </router-link>-->
+ <!-- <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">-->
+ <!-- <span>布局设置</span>-->
+ <!-- </el-dropdown-item>-->
+ <el-dropdown-item command="password">
+ <span>修改密码</span>
+ </el-dropdown-item>
+ <el-dropdown-item command="logout">
<span>退出登录</span>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
+ <el-dialog
+ v-model="pwdDialog"
+ title="修改密码"
+ width="550px"
+ :before-close="handleClose"
+ >
+ <el-form :model="form" size="default" ref="pwdRef" :rules="formRules" label-width="110px">
+ <el-form-item label="原密码" prop="oldPassword">
+ <el-input v-model.trim="form.oldPassword" type="password" show-password
+ placeholder="请输入原密码"></el-input>
+ </el-form-item>
+ <el-form-item label="新密码" prop="newPassword">
+ <el-input v-model.trim="form.newPassword" type="password" show-password
+ placeholder="请输入新密码"></el-input>
+ </el-form-item>
+ <el-form-item label="重复密码" prop="confirmPassword">
+ <el-input v-model.trim="form.confirmPassword" type="password" show-password
+ placeholder="请再次输入新密码"></el-input>
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="handleClose" size="default">取 消</el-button>
+ <el-button type="primary" @click="onSubmit" size="default" v-preReClick>确认</el-button>
+ </span>
+ </template>
+ </el-dialog>
</div>
</div>
</template>
<script setup>
-import { ElMessageBox } from 'element-plus'
+import {ElMessageBox} from 'element-plus'
import Breadcrumb from '@/components/Breadcrumb'
import TopNav from '@/components/TopNav'
import Hamburger from '@/components/Hamburger'
+import {reactive, ref} from 'vue'
+import {ElMessage} from "element-plus";
import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
import HeaderSearch from '@/components/HeaderSearch'
@@ -61,11 +95,73 @@
import useAppStore from '@/store/modules/app'
import useUserStore from '@/store/modules/user'
import useSettingsStore from '@/store/modules/settings'
-import {removeToken} from "@/utils/auth";
+import avator from '@/assets/images/avator.png'
+import {updateUserPwd} from "@/api/system/user";
+
+let validatePwd = (rule, value, callback) => {
+ const regex = /^(?=.*[A-Za-z])(?=.*\d).{8,}$/
+ if (value === '') {
+ callback(new Error('请输入密码'))
+ } else {
+ if (!regex.test(value)) {
+ callback(new Error('密码须包含字母、数字，长度不少于8字符'))
+ } else {
+ callback()
+ }
+ }
+}
+
+const equalToPassword = (rule, value, callback) => {
+ if (value === '') {
+ callback(new Error('请再次确认新密码'))
+ } else if (form.newPassword !== value) {
+ callback(new Error("两次输入的密码不一致"))
+ } else {
+ callback()
+ }
+};
const appStore = useAppStore()
const userStore = useUserStore()
const settingsStore = useSettingsStore()
+
+const pwdDialog = ref(false)
+const pwdRef = ref()
+
+const form = reactive({
+ newPassword: '',
+ oldPassword: '',
+ confirmPassword: ''
+})
+
+const formRules = reactive({
+ oldPassword: [{required: true, validator: validatePwd, trigger: 'blur'}],
+ newPassword: [{required: true, validator: validatePwd, trigger: 'blur'}],
+ confirmPassword: [{required: true, validator: equalToPassword, trigger: 'blur'}]
+})
+
+const onSubmit = async()=>{
+ const valid = await pwdRef.value.validate();
+ if(valid){
+ const res = await updateUserPwd(form.oldPassword,form.newPassword)
+ if(res.code == 200){
+ ElMessage.success('修改密码成功，请重新登录')
+ pwdDialog.value = false
+ logout()
+ }else{
+ ElMessage.warning(res.msg)
+ }
+ }
+}
+
+const handleClose = ()=>{
+ form.value = {
+ newPassword: '',
+ oldPassword: '',
+ confirmPassword: ''
+ }
+ pwdDialog.value = false
+}
function toggleSideBar() {
appStore.toggleSideBar()
@@ -79,6 +175,9 @@
case "logout":
logout();
break;
+ case "password":
+ editPsd();
+ break;
default:
break;
}
@@ -90,13 +189,19 @@
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
- removeToken()
- location.href = '/homePage';
+ userStore.logOut().then(() => {
+ location.href = '/index';
+ })
+ }).catch(() => {
+ });
+}
- }).catch(() => { });
+function editPsd() {
+ pwdDialog.value = true
}
const emits = defineEmits(['setLayout'])
+
function setLayout() {
emits('setLayout');
}
@@ -108,8 +213,8 @@
overflow: hidden;
position: relative;
background: #fff;
- border-radius: 0.4rem 0.4rem 0 0;
- border-bottom: 1px solid #d5dce5;
+ box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+
.hamburger-container {
line-height: 46px;
height: 100%;
--
Gitblit v1.9.2