client-web/src/modules/account/views/AccountProfileView.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 {
  CheckCircle2,
  KeyRound,
  Pencil,
  Save,
  ShieldCheck,
  UserRound,
  X,
} from '@lucide/vue'
import { changeCurrentPassword, useAuthStore } from '@/modules/auth/public'
import { ApiError } from '@/api/http'
import { updateMerchantLoginIdentifiers } from '@/modules/tenant-management/public'
import {
  getPasswordStrength,
  validateEditableAccountProfile,
  validateLoginIdentifierChange,
  validatePasswordChange,
  type LoginIdentifierChangePayload,
  type PasswordChangePayload,
} from '@/modules/account/utils/accountProfile'

type AccountTab = 'profile' | 'identifiers' | '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 identifiersSaving = ref(false)
const identifiersError = ref('')
const passwordSaving = ref(false)
const passwordChangedAt = ref('')
const profileFormRef = ref<FormInstance>()
const identifiersFormRef = ref<FormInstance>()
const passwordFormRef = ref<FormInstance>()

const profileForm = reactive<ProfileForm>({ ...auth.profile })
const passwordForm = reactive<PasswordChangePayload>({
  currentPassword: '',
  newPassword: '',
  confirmPassword: '',
})
const identifiersForm = reactive<LoginIdentifierChangePayload>({
  username: auth.profile.username,
  phone: auth.profile.phone,
  currentPassword: '',
})

const profileRules: FormRules<ProfileForm> = {
  realName: [
    { required: true, message: '请输入真实姓名', trigger: 'blur' },
    { min: 1, max: 64, message: '姓名需为 1–64 个字符', trigger: 'blur' },
  ],
  email: [
    { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' },
  ],
}

const identifierRules: FormRules<LoginIdentifierChangePayload> = {
  username: [{
    required: true,
    pattern: /^[A-Za-z][A-Za-z0-9_.@-]{3,63}$/,
    message: '用户名须以字母开头，并由 4–64 位字母、数字或 _.@- 组成',
    trigger: 'blur',
  }],
  phone: [{
    required: true,
    pattern: /^1[3-9]\d{9}$/,
    message: '请输入有效的中国大陆手机号',
    trigger: 'blur',
  }],
  currentPassword: [{ required: true, 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) => {
      if (!value) {
        callback(new Error('请输入新密码'))
        return
      }
      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(),
      email: profileForm.email.trim(),
    })
    syncProfileForm()
    editing.value = false
    ElMessage.success('个人信息已保存')
  } catch (error) {
    ElMessage.error(error instanceof Error ? error.message : '个人信息保存失败，请重试')
  } finally {
    profileSaving.value = false
  }
}

function resetIdentifiersForm() {
  Object.assign(identifiersForm, {
    username: auth.profile.username,
    phone: auth.profile.phone,
    currentPassword: '',
  })
  identifiersError.value = ''
  identifiersFormRef.value?.clearValidate()
}

async function changeLoginIdentifiers() {
  if (identifiersSaving.value) return
  identifiersError.value = ''
  const valid = await identifiersFormRef.value?.validate().catch(() => false)
  if (!valid || validateLoginIdentifierChange(identifiersForm).length > 0) return
  identifiersSaving.value = true
  const username = identifiersForm.username.trim()
  try {
    await updateMerchantLoginIdentifiers({
      username,
      phone: identifiersForm.phone.trim(),
      currentPassword: identifiersForm.currentPassword,
    })
    auth.clearSession()
    await router.replace({ path: '/login', query: { account: username, reason: 'identifiers-updated' } })
  } catch (error) {
    identifiersForm.currentPassword = ''
    if (error instanceof ApiError && error.code === 'A0409') identifiersError.value = '用户名或登录手机号已被使用，请更换后重试'
    else if (error instanceof ApiError && error.code === 'A0401') identifiersError.value = '当前密码错误'
    else if (error instanceof ApiError && error.code === 'A0403') identifiersError.value = '当前会话不允许修改登录标识，请退出代登录后重试'
    else identifiersError.value = error instanceof Error ? error.message : '登录标识修改失败，请重试'
  } finally {
    identifiersSaving.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-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>

          <div v-if="!editing" class="account-actions">
            <el-button type="primary" @click="startEditing"><Pencil :size="16" />编辑信息</el-button>
          </div>

          <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 placeholder="请输入真实姓名" /></el-form-item>
            <el-form-item label="登录手机号"><el-input v-model="profileForm.phone" disabled /><span class="field-help">请在“登录标识”中修改</span></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="identifiers">
          <template #label><span class="account-tab-label"><ShieldCheck :size="16" />登录标识</span></template>
          <div class="identifier-layout">
            <el-form ref="identifiersFormRef" :model="identifiersForm" :rules="identifierRules" label-position="top" class="identifier-form" @submit.prevent="changeLoginIdentifiers">
              <el-alert title="修改成功后，国内与海外的全部登录会话都会立即退出，需要使用新用户名或登录手机号重新登录。" type="warning" :closable="false" show-icon />
              <el-form-item label="用户名" prop="username"><el-input v-model="identifiersForm.username" maxlength="64" autocomplete="username" placeholder="请输入新用户名" /></el-form-item>
              <el-form-item label="登录手机号" prop="phone"><el-input v-model="identifiersForm.phone" maxlength="11" inputmode="tel" autocomplete="tel" placeholder="请输入11位中国大陆手机号" /></el-form-item>
              <el-form-item label="当前密码" prop="currentPassword"><el-input v-model="identifiersForm.currentPassword" type="password" show-password maxlength="72" autocomplete="current-password" placeholder="用于确认是本人操作" /></el-form-item>
              <el-alert v-if="identifiersError" :title="identifiersError" type="error" :closable="false" show-icon />
              <div class="identifier-actions"><el-button :disabled="identifiersSaving" @click="resetIdentifiersForm">重置</el-button><el-button type="primary" native-type="submit" :loading="identifiersSaving"><Save :size="16" />保存并重新登录</el-button></div>
            </el-form>
          </div>
        </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>
              <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-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-actions { display: flex; justify-content: flex-end; gap: 8px; margin: 20px 0; }
.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; }
.identifier-layout { max-width: 620px; padding-top: 22px; }
.identifier-form { display: grid; gap: 2px; }
.identifier-form > :deep(.el-alert) { margin-bottom: 16px; }
.identifier-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--border); }
.password-layout { display: grid; grid-template-columns: minmax(0, 440px) minmax(260px, 1fr); align-items: start; max-width: 980px; gap: clamp(32px, 6vw, 72px); padding-top: 22px; }
.password-form { max-width: 440px; }
.password-form :deep(.el-form-item) { margin-bottom: 18px; }
.password-form :deep(.el-form-item__error) { padding-top: 5px; line-height: 1.45; white-space: normal; }
.password-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border); }
.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: grid; width: 100%; min-height: 18px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 9px; 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: 0; 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) {
  .password-layout { grid-template-columns: 1fr; gap: 24px; padding-top: 18px; }
  .security-note { margin-top: 0; }
}

@media (max-width: 620px) {
  .account-workspace { min-height: 0; padding: 0 16px 22px; }
  .account-actions { width: 100%; margin: 16px 0; }
  .account-actions .el-button { width: 100%; min-height: 44px; }
  .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; }
  .identifier-actions .el-button { min-height: 44px; flex: 1; }
}
</style>