ajy/code/frontend/src/views/profile/index.vue

<template>
  <div class="profile-page">
    <el-card shadow="never" class="profile-card">
      <template #header>
        <div class="card-header">
          <span>个人信息</span>
        </div>
      </template>

      <div class="profile-content">
        <!-- 头像区域 -->
        <div class="avatar-section">
          <div class="avatar-wrapper" @click="triggerUpload">
            <el-avatar :size="100" :src="avatarUrl || defaultAvatar">
              <el-icon :size="40"><UserFilled /></el-icon>
            </el-avatar>
            <div class="avatar-overlay">
              <el-icon :size="24"><Camera /></el-icon>
              <span>更换头像</span>
            </div>
          </div>
          <input
            ref="fileInput"
            type="file"
            accept="image/jpg,image/jpeg,image/png,image/gif,image/webp"
            style="display: none"
            @change="handleFileChange"
          />
          <div class="avatar-tip">点击头像可更换，支持 jpg/png/gif 格式</div>
        </div>

        <!-- 表单区域 -->
        <el-form
          ref="formRef"
          :model="formData"
          :rules="formRules"
          label-width="100px"
          class="profile-form"
        >
          <el-form-item label="用户名">
            <el-input :model-value="userStore.username" disabled />
          </el-form-item>

          <el-form-item label="昵称" prop="nickname">
            <el-input v-model="formData.nickname" placeholder="请输入昵称" maxlength="20" />
          </el-form-item>

          <el-form-item label="手机号" prop="phone">
            <el-input v-model="formData.phone" placeholder="请输入手机号" maxlength="11" />
          </el-form-item>

          <el-form-item label="地址" prop="address">
            <el-input v-model="formData.address" placeholder="请输入地址" maxlength="200" />
          </el-form-item>

          <el-divider content-position="left">修改密码（选填）</el-divider>

          <el-form-item label="旧密码" prop="oldPassword">
            <el-input
              v-model="formData.oldPassword"
              type="password"
              show-password
              placeholder="修改密码时需输入旧密码"
            />
          </el-form-item>

          <el-form-item label="新密码" prop="password">
            <el-input
              v-model="formData.password"
              type="password"
              show-password
              placeholder="8-20位，含字母和数字"
            />
          </el-form-item>

          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input
              v-model="formData.confirmPassword"
              type="password"
              show-password
              placeholder="请再次输入新密码"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" :loading="submitLoading" @click="handleSubmit">
              保存修改
            </el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { UserFilled, Camera } from '@element-plus/icons-vue'
import { useUserStore } from '@/store/user'
import { updateProfile, uploadImage, getUserInfoApi } from '@/api/auth'

// 默认头像（研年LOGO）
const defaultAvatar = '/default-avatar.png'

const userStore = useUserStore()
const router = useRouter()
const formRef = ref()
const fileInput = ref()
const submitLoading = ref(false)
const avatarUrl = ref('')

const formData = reactive({
  nickname: '',
  phone: '',
  address: '',
  oldPassword: '',
  password: '',
  confirmPassword: ''
})

// 表单验证规则
const formRules = {
  phone: [
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '请输入正确的手机号',
      trigger: 'blur'
    }
  ],
  address: [
    { max: 200, message: '地址最长200字符', trigger: 'blur' }
  ],
  oldPassword: [
    {
      validator: (rule, value, callback) => {
        if (formData.password && !value) {
          callback(new Error('修改密码时需输入旧密码'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  password: [
    {
      validator: (rule, value, callback) => {
        if (value && (value.length < 8 || value.length > 20)) {
          callback(new Error('密码长度8-20位'))
        } else if (value && !/(?=.*[a-zA-Z])(?=.*\d)/.test(value)) {
          callback(new Error('密码必须包含字母和数字'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  confirmPassword: [
    {
      validator: (rule, value, callback) => {
        if (formData.password && !value) {
          callback(new Error('请确认新密码'))
        } else if (formData.password && value !== formData.password) {
          callback(new Error('两次密码输入不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 加载用户信息
async function loadUserInfo() {
  try {
    const res = await getUserInfoApi()
    const info = res.data
    avatarUrl.value = info.avatar || ''
    formData.nickname = info.nickname || ''
    formData.phone = info.phone || ''
    formData.address = info.address || ''
  } catch (e) {
    // ignore
  }
}

// 触发文件选择
function triggerUpload() {
  fileInput.value?.click()
}

// 处理文件上传
async function handleFileChange(e) {
  const file = e.target.files[0]
  if (!file) return

  // 验证文件大小（5MB）
  if (file.size > 5 * 1024 * 1024) {
    ElMessage.error('图片大小不能超过5MB')
    return
  }

  try {
    ElMessage.info('头像上传中...')
    const res = await uploadImage(file)
    const url = res.data.url
    avatarUrl.value = url
    // 立即保存头像到后端
    await updateProfile({ avatar: url })
    // 刷新store中的用户信息
    await userStore.fetchUserInfo()
    ElMessage.success('头像更新成功')
  } catch (e) {
    ElMessage.error('头像上传失败')
  } finally {
    // 重置file input
    fileInput.value.value = ''
  }
}

// 提交表单
async function handleSubmit() {
  await formRef.value?.validate()
  submitLoading.value = true
  try {
    const payload = {}
    // 昵称
    payload.nickname = formData.nickname || ''
    // 手机号
    payload.phone = formData.phone || ''
    // 地址
    payload.address = formData.address || ''
    // 密码（选填）
    if (formData.password) {
      payload.password = formData.password
      payload.oldPassword = formData.oldPassword
    }

    await updateProfile(payload)
    // 如果修改了密码，提示后退出登录重新登录
    if (formData.password) {
      ElMessage.success('密码修改成功，请重新登录')
      setTimeout(async () => {
        await userStore.logout()
        router.replace('/login')
      }, 1500)
      return
    }
    ElMessage.success('个人信息更新成功')
    // 刷新store
    await userStore.fetchUserInfo()
    // 清空密码字段
    formData.oldPassword = ''
    formData.password = ''
    formData.confirmPassword = ''
  } finally {
    submitLoading.value = false
  }
}

// 重置表单
function handleReset() {
  loadUserInfo()
  formData.oldPassword = ''
  formData.password = ''
  formData.confirmPassword = ''
  formRef.value?.clearValidate()
}

onMounted(() => {
  loadUserInfo()
})
</script>

<style lang="scss" scoped>
.profile-page {
  max-width: 700px;
  margin: 0 auto;
}

.card-header {
  font-size: 18px;
  font-weight: 600;
}

.profile-content {
  padding: 20px 0;
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 32px;
}

.avatar-wrapper {
  position: relative;
  cursor: pointer;
  border-radius: 50%;
  overflow: hidden;

  &:hover .avatar-overlay {
    opacity: 1;
  }
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s;
  border-radius: 50%;

  span {
    font-size: 12px;
    margin-top: 4px;
  }
}

.avatar-tip {
  margin-top: 12px;
  font-size: 12px;
  color: #909399;
}

.profile-form {
  max-width: 500px;
  margin: 0 auto;
}
</style>