first commit
This commit is contained in:
@@ -0,0 +1,233 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
|
||||
import { Expand, Fold } from '@element-plus/icons-vue'
|
||||
import { changePassword, logout } from '@/api/auth'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
defineProps<{ collapsed: boolean }>()
|
||||
const emit = defineEmits<{ toggle: [] }>()
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const authStore = useAuthStore()
|
||||
|
||||
const displayName = computed(
|
||||
() => authStore.adminInfo?.nickname || authStore.adminInfo?.username || '管理员',
|
||||
)
|
||||
const roleText = computed(() => (authStore.isSuper ? '超级管理员' : '普通管理员'))
|
||||
const pageTitle = computed(() => route.meta.title ?? '')
|
||||
|
||||
/* ---------------- 修改密码 ---------------- */
|
||||
const pwdVisible = ref(false)
|
||||
const pwdFormRef = ref<FormInstance>()
|
||||
const pwdLoading = ref(false)
|
||||
|
||||
const pwdForm = reactive({
|
||||
old_password: '',
|
||||
new_password: '',
|
||||
confirm_password: '',
|
||||
})
|
||||
|
||||
const pwdRules: FormRules = {
|
||||
old_password: [
|
||||
{ required: true, message: '请输入原密码', trigger: 'blur' },
|
||||
{ min: 6, max: 64, message: '密码长度 6~64 位', trigger: 'blur' },
|
||||
],
|
||||
new_password: [
|
||||
{ required: true, message: '请输入新密码', trigger: 'blur' },
|
||||
{ min: 6, max: 64, message: '密码长度 6~64 位', trigger: 'blur' },
|
||||
],
|
||||
confirm_password: [
|
||||
{ required: true, message: '请再次输入新密码', trigger: 'blur' },
|
||||
{
|
||||
validator: (_rule, value: string, callback) => {
|
||||
if (value !== pwdForm.new_password) {
|
||||
callback(new Error('两次输入的密码不一致'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
function openPwdDialog() {
|
||||
pwdForm.old_password = ''
|
||||
pwdForm.new_password = ''
|
||||
pwdForm.confirm_password = ''
|
||||
pwdVisible.value = true
|
||||
}
|
||||
|
||||
async function submitPassword() {
|
||||
const valid = await pwdFormRef.value?.validate().catch(() => false)
|
||||
if (!valid) return
|
||||
pwdLoading.value = true
|
||||
try {
|
||||
await changePassword({
|
||||
old_password: pwdForm.old_password,
|
||||
new_password: pwdForm.new_password,
|
||||
})
|
||||
ElMessage.success('密码修改成功，请重新登录')
|
||||
pwdVisible.value = false
|
||||
authStore.clearSession()
|
||||
router.replace('/login')
|
||||
} catch {
|
||||
// 错误提示已由请求层处理
|
||||
} finally {
|
||||
pwdLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------- 登出 ---------------- */
|
||||
async function handleLogout() {
|
||||
try {
|
||||
await logout(authStore.refreshToken)
|
||||
} catch {
|
||||
// 登出失败不阻塞本地清理
|
||||
}
|
||||
authStore.clearSession()
|
||||
router.replace('/login')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="header-bar">
|
||||
<div class="header-left">
|
||||
<el-icon class="collapse-btn" :size="20" @click="emit('toggle')">
|
||||
<Expand v-if="collapsed" />
|
||||
<Fold v-else />
|
||||
</el-icon>
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item>管理后台</el-breadcrumb-item>
|
||||
<el-breadcrumb-item v-if="pageTitle">{{ pageTitle }}</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
|
||||
<el-dropdown trigger="click">
|
||||
<div class="header-admin">
|
||||
<div class="admin-avatar">
|
||||
{{ displayName.slice(0, 1).toUpperCase() }}
|
||||
</div>
|
||||
<div class="admin-meta">
|
||||
<div class="admin-name">{{ displayName }}</div>
|
||||
<div class="admin-role">{{ roleText }}</div>
|
||||
</div>
|
||||
<el-icon class="admin-caret"><ArrowDown /></el-icon>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="openPwdDialog">
|
||||
<el-icon><Key /></el-icon>修改密码
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item divided @click="handleLogout">
|
||||
<el-icon><SwitchButton /></el-icon>退出登录
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
|
||||
<!-- 修改密码对话框 -->
|
||||
<el-dialog v-model="pwdVisible" title="修改密码" width="420px" :close-on-click-modal="false">
|
||||
<el-form ref="pwdFormRef" :model="pwdForm" :rules="pwdRules" label-width="88px">
|
||||
<el-form-item label="原密码" prop="old_password">
|
||||
<el-input v-model="pwdForm.old_password" type="password" show-password placeholder="请输入原密码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="new_password">
|
||||
<el-input v-model="pwdForm.new_password" type="password" show-password placeholder="6~64 位新密码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="confirm_password">
|
||||
<el-input
|
||||
v-model="pwdForm.confirm_password"
|
||||
type="password"
|
||||
show-password
|
||||
placeholder="再次输入新密码"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="pwdVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="pwdLoading" @click="submitPassword">确认修改</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.header-bar {
|
||||
height: 60px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #eef0f6;
|
||||
box-shadow: 0 1px 6px rgba(30, 36, 56, 0.04);
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.collapse-btn {
|
||||
cursor: pointer;
|
||||
color: #5d6685;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.collapse-btn:hover {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.header-admin {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 6px 10px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.header-admin:hover {
|
||||
background: #f4f6fb;
|
||||
}
|
||||
|
||||
.admin-avatar {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
background: linear-gradient(135deg, #4f6ef7, #8b5cf6);
|
||||
}
|
||||
|
||||
.admin-meta {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.admin-name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #1f2437;
|
||||
}
|
||||
|
||||
.admin-role {
|
||||
font-size: 11px;
|
||||
color: #9aa3c0;
|
||||
}
|
||||
|
||||
.admin-caret {
|
||||
color: #9aa3c0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user