351 lines
16 KiB
Vue
351 lines
16 KiB
Vue
<script setup lang="ts">
|
||
import { computed, reactive, ref } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import type { FormInstance, FormRules } from 'element-plus'
|
||
import { ElMessage } from 'element-plus'
|
||
import {
|
||
Building2,
|
||
CheckCircle2,
|
||
KeyRound,
|
||
Pencil,
|
||
Save,
|
||
ShieldCheck,
|
||
UserRound,
|
||
X,
|
||
} from '@lucide/vue'
|
||
import { useAuthStore } from '@/stores/auth'
|
||
import { changeCurrentPassword } from '@/api/auth'
|
||
import {
|
||
getPasswordStrength,
|
||
validateEditableAccountProfile,
|
||
validatePasswordChange,
|
||
type PasswordChangePayload,
|
||
} from '@/utils/accountProfile'
|
||
|
||
type AccountTab = 'profile' | 'password'
|
||
|
||
interface ProfileForm {
|
||
username: string
|
||
realName: string
|
||
phone: string
|
||
email: string
|
||
tenantName: string
|
||
}
|
||
|
||
const auth = useAuthStore()
|
||
const router = useRouter()
|
||
const activeTab = ref<AccountTab>('profile')
|
||
const editing = ref(false)
|
||
const profileSaving = ref(false)
|
||
const passwordSaving = ref(false)
|
||
const passwordChangedAt = ref('')
|
||
const profileFormRef = ref<FormInstance>()
|
||
const passwordFormRef = ref<FormInstance>()
|
||
|
||
const profileForm = reactive<ProfileForm>({ ...auth.profile })
|
||
const passwordForm = reactive<PasswordChangePayload>({
|
||
currentPassword: '',
|
||
newPassword: '',
|
||
confirmPassword: '',
|
||
})
|
||
|
||
const profileRules: FormRules<ProfileForm> = {
|
||
realName: [
|
||
{ required: true, message: '请输入真实姓名', trigger: 'blur' },
|
||
{ min: 1, max: 64, message: '姓名需为 1–64 个字符', trigger: 'blur' },
|
||
],
|
||
phone: [
|
||
{ max: 32, message: '联系电话不能超过 32 个字符', trigger: 'blur' },
|
||
],
|
||
email: [
|
||
{ type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' },
|
||
],
|
||
}
|
||
|
||
const passwordRules: FormRules<PasswordChangePayload> = {
|
||
currentPassword: [{
|
||
required: true,
|
||
validator: (_rule, value: string, callback) => {
|
||
if (!value) callback(new Error('请输入当前密码'))
|
||
else callback()
|
||
},
|
||
trigger: 'blur',
|
||
}],
|
||
newPassword: [{
|
||
required: true,
|
||
validator: (_rule, value: string, callback) => {
|
||
const errors = validatePasswordChange({
|
||
currentPassword: passwordForm.currentPassword,
|
||
newPassword: value,
|
||
confirmPassword: value,
|
||
})
|
||
const relevantError = errors.find((error) => error.includes('8–64') || error.includes('同时包含') || error.includes('当前密码相同'))
|
||
if (relevantError) callback(new Error(relevantError))
|
||
else callback()
|
||
},
|
||
trigger: 'blur',
|
||
}],
|
||
confirmPassword: [{
|
||
required: true,
|
||
validator: (_rule, value: string, callback) => {
|
||
if (!value) callback(new Error('请再次输入新密码'))
|
||
else if (value !== passwordForm.newPassword) callback(new Error('两次输入的新密码不一致'))
|
||
else callback()
|
||
},
|
||
trigger: 'blur',
|
||
}],
|
||
}
|
||
|
||
const passwordStrength = computed(() => getPasswordStrength(passwordForm.newPassword))
|
||
const passwordStrengthState = computed(() => passwordForm.newPassword ? passwordStrength.value : 'empty')
|
||
const strengthLabel = computed(() => passwordForm.newPassword
|
||
? ({ weak: '较弱', medium: '中等', strong: '较强' })[passwordStrength.value]
|
||
: '未输入')
|
||
|
||
function syncProfileForm() {
|
||
Object.assign(profileForm, auth.profile)
|
||
profileFormRef.value?.clearValidate()
|
||
}
|
||
|
||
function startEditing() {
|
||
syncProfileForm()
|
||
editing.value = true
|
||
}
|
||
|
||
function cancelEditing() {
|
||
syncProfileForm()
|
||
editing.value = false
|
||
}
|
||
|
||
async function saveProfile() {
|
||
if (profileSaving.value) return
|
||
const valid = await profileFormRef.value?.validate().catch(() => false)
|
||
const errors = validateEditableAccountProfile(profileForm)
|
||
if (!valid || errors.length > 0) return
|
||
|
||
profileSaving.value = true
|
||
try {
|
||
await auth.savePersonalProfile({
|
||
realName: profileForm.realName.trim(),
|
||
phone: profileForm.phone.trim(),
|
||
email: profileForm.email.trim(),
|
||
})
|
||
syncProfileForm()
|
||
editing.value = false
|
||
ElMessage.success('个人信息已保存')
|
||
} catch (error) {
|
||
ElMessage.error(error instanceof Error ? error.message : '个人信息保存失败，请重试')
|
||
} finally {
|
||
profileSaving.value = false
|
||
}
|
||
}
|
||
|
||
function resetPasswordForm() {
|
||
passwordForm.currentPassword = ''
|
||
passwordForm.newPassword = ''
|
||
passwordForm.confirmPassword = ''
|
||
passwordFormRef.value?.clearValidate()
|
||
}
|
||
|
||
async function changePassword() {
|
||
if (passwordSaving.value) return
|
||
const valid = await passwordFormRef.value?.validate().catch(() => false)
|
||
if (!valid || validatePasswordChange(passwordForm).length > 0) return
|
||
|
||
passwordSaving.value = true
|
||
try {
|
||
await changeCurrentPassword(passwordForm.currentPassword, passwordForm.newPassword)
|
||
passwordChangedAt.value = new Date().toLocaleString('zh-CN', { hour12: false })
|
||
resetPasswordForm()
|
||
ElMessage.success('密码已修改，请使用新密码重新登录')
|
||
await auth.logout().catch(() => undefined)
|
||
await router.replace('/login')
|
||
} catch (error) {
|
||
ElMessage.error(error instanceof Error ? error.message : '密码修改失败，请重试')
|
||
} finally {
|
||
passwordSaving.value = false
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<section class="account-page">
|
||
<div class="client-card account-identity">
|
||
<div class="account-avatar" aria-hidden="true"><UserRound :size="28" /></div>
|
||
<div class="account-identity-copy">
|
||
<h2>{{ auth.profile.realName }}</h2>
|
||
<p>{{ auth.profile.username }}</p>
|
||
</div>
|
||
<div class="account-context">
|
||
<span><Building2 :size="16" />{{ auth.profile.tenantName }}</span>
|
||
<span><ShieldCheck :size="16" />{{ auth.user?.roles.join('、') }}</span>
|
||
</div>
|
||
<el-tag type="success" effect="plain"><CheckCircle2 :size="14" />账号正常</el-tag>
|
||
</div>
|
||
|
||
<div class="client-card account-workspace">
|
||
<el-tabs v-model="activeTab" class="account-tabs">
|
||
<el-tab-pane name="profile">
|
||
<template #label><span class="account-tab-label"><UserRound :size="16" />基本信息</span></template>
|
||
|
||
<header class="account-section-heading">
|
||
<div><h2>基本信息</h2><p>维护当前登录人的联系方式；账号和所属企业由系统身份关系确定。</p></div>
|
||
<el-button v-if="!editing" type="primary" @click="startEditing"><Pencil :size="16" />编辑信息</el-button>
|
||
</header>
|
||
|
||
<el-form
|
||
v-if="editing"
|
||
ref="profileFormRef"
|
||
:model="profileForm"
|
||
:rules="profileRules"
|
||
label-position="top"
|
||
class="account-form-grid"
|
||
@submit.prevent="saveProfile"
|
||
>
|
||
<el-form-item label="用户名">
|
||
<el-input v-model="profileForm.username" disabled />
|
||
<span class="field-help">账号标识暂不支持在客户端修改</span>
|
||
</el-form-item>
|
||
<el-form-item label="姓名" prop="realName"><el-input v-model="profileForm.realName" maxlength="64" show-word-limit /></el-form-item>
|
||
<el-form-item label="联系电话" prop="phone"><el-input v-model="profileForm.phone" maxlength="32" inputmode="tel" placeholder="选填" /></el-form-item>
|
||
<el-form-item label="邮箱" prop="email"><el-input v-model="profileForm.email" maxlength="128" inputmode="email" placeholder="选填" /></el-form-item>
|
||
<el-form-item label="所属公司">
|
||
<el-input v-model="profileForm.tenantName" disabled />
|
||
<span class="field-help">企业归属由平台审核关系确定</span>
|
||
</el-form-item>
|
||
<div class="account-form-actions">
|
||
<el-button :disabled="profileSaving" @click="cancelEditing"><X :size="16" />取消</el-button>
|
||
<el-button type="primary" native-type="submit" :loading="profileSaving"><Save :size="16" />保存修改</el-button>
|
||
</div>
|
||
</el-form>
|
||
|
||
<dl v-else class="account-info-grid">
|
||
<div><dt>用户名</dt><dd>{{ auth.profile.username }}</dd></div>
|
||
<div><dt>姓名</dt><dd>{{ auth.profile.realName }}</dd></div>
|
||
<div><dt>联系电话</dt><dd>{{ auth.profile.phone || '未填写' }}</dd></div>
|
||
<div><dt>邮箱</dt><dd>{{ auth.profile.email || '未填写' }}</dd></div>
|
||
<div><dt>所属公司</dt><dd>{{ auth.profile.tenantName }}</dd></div>
|
||
</dl>
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane name="password">
|
||
<template #label><span class="account-tab-label"><KeyRound :size="16" />修改密码</span></template>
|
||
|
||
<div class="password-layout">
|
||
<div>
|
||
<header class="account-section-heading password-heading">
|
||
<div><h2>修改密码</h2><p>输入当前密码并设置 8–64 位、同时包含字母和数字的新密码。</p></div>
|
||
</header>
|
||
<el-form
|
||
ref="passwordFormRef"
|
||
:model="passwordForm"
|
||
:rules="passwordRules"
|
||
label-position="top"
|
||
class="password-form"
|
||
@submit.prevent="changePassword"
|
||
>
|
||
<el-form-item label="当前密码" prop="currentPassword">
|
||
<el-input v-model="passwordForm.currentPassword" type="password" show-password autocomplete="current-password" placeholder="请输入当前密码" />
|
||
</el-form-item>
|
||
<el-form-item label="新密码" prop="newPassword">
|
||
<el-input v-model="passwordForm.newPassword" type="password" show-password autocomplete="new-password" maxlength="64" placeholder="请输入新密码" />
|
||
<div class="password-strength" :data-strength="passwordStrengthState">
|
||
<span aria-hidden="true"><i /><i /><i /></span>
|
||
<small>密码强度：{{ strengthLabel }}</small>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="确认新密码" prop="confirmPassword">
|
||
<el-input v-model="passwordForm.confirmPassword" type="password" show-password autocomplete="new-password" maxlength="64" placeholder="请再次输入新密码" />
|
||
</el-form-item>
|
||
<div class="password-actions">
|
||
<el-button :disabled="passwordSaving" @click="resetPasswordForm">清空</el-button>
|
||
<el-button type="primary" native-type="submit" :loading="passwordSaving"><KeyRound :size="16" />确认修改</el-button>
|
||
</div>
|
||
</el-form>
|
||
<div v-if="passwordChangedAt" class="password-result" role="status">
|
||
<CheckCircle2 :size="18" />
|
||
<div><strong>安全记录已更新</strong><p>{{ passwordChangedAt }}；服务端已使旧会话失效。</p></div>
|
||
</div>
|
||
</div>
|
||
|
||
<aside class="security-note">
|
||
<ShieldCheck :size="22" />
|
||
<div><strong>账户安全提示</strong><p>建议组合使用字母、数字和符号，不要与其他网站共用密码。</p></div>
|
||
<p>当前密码仅用于本次服务端校验，前端不会持久化密码。修改成功后需要重新登录。</p>
|
||
</aside>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.account-page { display: flex; flex-direction: column; gap: 14px; }
|
||
.account-identity { display: flex; min-width: 0; align-items: center; gap: 14px; padding: 18px 22px; }
|
||
.account-avatar { display: grid; width: 52px; height: 52px; flex: 0 0 52px; place-items: center; border-radius: 14px; background: #e7f3f1; color: var(--primary); }
|
||
.account-identity-copy { min-width: 140px; }
|
||
.account-identity h2 { margin: 0 0 4px; color: var(--navy); font-size: 18px; }
|
||
.account-identity p { margin: 0; color: var(--muted); font-size: 12px; }
|
||
.account-context { display: flex; min-width: 0; flex: 1; gap: 22px; color: #52616b; font-size: 12px; }
|
||
.account-context span { display: flex; min-width: 0; align-items: center; gap: 7px; overflow-wrap: anywhere; }
|
||
.account-identity :deep(.el-tag) { display: flex; align-items: center; gap: 5px; }
|
||
.account-workspace { min-height: 520px; padding: 0 24px 28px; }
|
||
.account-tabs :deep(.el-tabs__header) { margin-bottom: 0; }
|
||
.account-tabs :deep(.el-tabs__item) { min-height: 52px; }
|
||
.account-tab-label { display: inline-flex; align-items: center; gap: 7px; }
|
||
.account-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 24px 0 20px; }
|
||
.account-section-heading h2 { margin: 0 0 6px; color: var(--navy); font-size: 18px; }
|
||
.account-section-heading p { max-width: 620px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
|
||
.account-actions { display: flex; gap: 8px; }
|
||
.account-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
|
||
.account-info-grid div { min-width: 0; min-height: 94px; padding: 18px 20px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
|
||
.account-info-grid dt { color: var(--muted); font-size: 11px; }
|
||
.account-info-grid dd { margin: 9px 0 0; overflow-wrap: anywhere; color: var(--navy); font-size: 14px; font-weight: 650; }
|
||
.account-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; max-width: 900px; }
|
||
.account-form-grid :deep(.el-form-item) { align-content: start; margin-bottom: 21px; }
|
||
.account-form-actions { display: flex; grid-column: 1 / -1; justify-content: flex-end; gap: 8px; padding-top: 2px; }
|
||
.field-help { margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.5; }
|
||
.password-layout { display: grid; grid-template-columns: minmax(320px, 520px) minmax(240px, 1fr); align-items: start; gap: clamp(36px, 7vw, 90px); }
|
||
.password-heading { padding-bottom: 18px; }
|
||
.password-form { max-width: 440px; }
|
||
.password-form :deep(.el-form-item) { margin-bottom: 20px; }
|
||
.password-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 2px; }
|
||
.password-result { display: flex; align-items: flex-start; gap: 9px; margin-top: 18px; padding: 14px; background: #edf6f4; color: var(--primary); }
|
||
.password-result strong { color: var(--navy); font-size: 12px; }
|
||
.password-result p { margin: 3px 0 0; color: #526b67; font-size: 11px; line-height: 1.6; }
|
||
.password-strength { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; color: var(--muted); }
|
||
.password-strength > span { display: grid; flex: 1; grid-template-columns: repeat(3, 1fr); gap: 4px; }
|
||
.password-strength i { height: 3px; background: #dce3e6; }
|
||
.password-strength[data-strength="weak"] i:first-child { background: #c2413b; }
|
||
.password-strength[data-strength="medium"] i:nth-child(-n+2) { background: #c47913; }
|
||
.password-strength[data-strength="strong"] i { background: var(--primary); }
|
||
.password-strength small { white-space: nowrap; font-size: 10px; }
|
||
.security-note { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; margin-top: 24px; padding: 22px; background: #f2f7f6; color: var(--primary); }
|
||
.security-note strong { color: var(--navy); font-size: 13px; }
|
||
.security-note p { margin: 5px 0 0; color: #526b67; font-size: 11px; line-height: 1.7; }
|
||
.security-note > p { grid-column: 1 / -1; margin-top: 8px; padding-top: 14px; border-top: 1px solid #d7e5e2; }
|
||
.security-note code { color: var(--navy); font-weight: 700; }
|
||
|
||
@media (max-width: 820px) {
|
||
.account-context { align-items: flex-start; flex-direction: column; gap: 7px; }
|
||
.password-layout { grid-template-columns: 1fr; gap: 14px; }
|
||
.security-note { margin-top: 0; }
|
||
}
|
||
|
||
@media (max-width: 620px) {
|
||
.account-identity { align-items: flex-start; flex-wrap: wrap; }
|
||
.account-identity-copy { flex: 1; }
|
||
.account-context { order: 3; width: 100%; flex-basis: 100%; padding-top: 12px; border-top: 1px solid var(--border); }
|
||
.account-workspace { min-height: 0; padding: 0 16px 22px; }
|
||
.account-section-heading { align-items: stretch; flex-direction: column; gap: 14px; padding-top: 20px; }
|
||
.account-section-heading > .el-button { width: 100%; }
|
||
.account-form-actions { width: 100%; }
|
||
.account-form-actions .el-button { min-height: 44px; flex: 1; }
|
||
.account-info-grid, .account-form-grid { grid-template-columns: 1fr; }
|
||
.account-info-grid div { min-height: 82px; }
|
||
.password-actions { width: 100%; }
|
||
.password-actions .el-button { min-height: 44px; flex: 1; }
|
||
}
|
||
</style>
|