hzhub/hzhub-portal-employee/docs/PROFILE_FEATURE.md

个人中心功能说明

功能概述

已将 hzhub-admin 中的个人中心功能移植到 hzhub-portal-employee，并进行了以下修改：

1. 移除收藏夹菜单项
2. 将"设置"改为"个人中心"
3. 移植个人中心页面和功能

主要功能

1. 个人信息展示

• 用户头像（支持上传更换）
• 用户昵称、账号
• 手机号码、邮箱
• 所属部门和岗位
• 角色信息
• 上次登录时间

2. 基本设置

• 修改昵称
• 修改邮箱
• 修改性别
• 修改手机号

3. 安全设置

• 修改密码
• 密码强度验证
• 确认密码校验

技术实现

UI框架适配

由于 hzhub-admin 使用 Ant Design Vue，而 hzhub-portal-employee 使用 Element Plus，进行了以下适配：

Ant Design Vue	Element Plus	说明
<a-card>	<el-card>	卡片容器
<a-descriptions>	<el-descriptions>	描述列表
<a-tabs>	<el-tabs>	标签页
<a-form>	<el-form>	表单
<a-upload>	<el-upload>	文件上传

文件结构

src/
├── api/
│   └── profile/
│       ├── index.ts          # API接口
│       └── types.ts          # 类型定义
├── pages/
│   └── profile/
│       ├── index.vue         # 个人中心主页面
│       └── components/
│           ├── BasicSetting.vue      # 基本设置组件
│           └── SecuritySetting.vue   # 安全设置组件
└── layouts/
    └── components/
        └── Header/
            └── UserDropdown.vue      # 用户下拉菜单（已修改）

使用说明

访问个人中心

1. 通过下拉菜单：点击右上角用户头像 → 选择"个人中心"
2. 直接访问：访问 /profile 路由

修改个人信息

1. 进入个人中心页面
2. 在"基本设置"标签页修改信息
3. 点击"保存修改"按钮

修改密码

1. 进入个人中心页面
2. 切换到"安全设置"标签页
3. 输入当前密码和新密码
4. 点击"修改密码"按钮
5. 修改成功后需要重新登录

更换头像

1. 点击头像区域的"更换头像"
2. 选择图片文件（支持 JPG、PNG 格式，最大 2MB）
3. 上传成功后自动更新显示

API接口

获取用户信息

GET /system/user/profile
Response: UserProfile

更新用户信息

PUT /system/user/profile
Request: {
  userId: number
  nickName: string
  email: string
  phonenumber: string
  sex: string
}

修改密码

PUT /system/user/profile/updatePwd
Request: {
  oldPassword: string
  newPassword: string
}

上传头像

POST /system/user/profile/avatar
Request: FormData (avatarfile: File)

注意事项

1. 头像上传限制：

   • 仅支持图片格式（JPG、PNG等）
   • 文件大小不超过 2MB

2. 密码修改：

   • 新密码长度 6-20 个字符
   • 需要输入确认密码
   • 修改成功后需要重新登录

3. 表单验证：

   • 邮箱格式验证
   • 手机号格式验证（中国大陆手机号）
   • 必填项验证

4. 实时更新：

   • 修改个人信息后，右上角用户信息会同步更新
   • 头像更新后会立即刷新显示

与 hzhub-admin 的差异

保留的功能

• ✅ 个人信息展示
• ✅ 基本设置（修改昵称、邮箱、性别、手机号）
• ✅ 安全设置（修改密码）
• ✅ 头像上传

简化的功能

• ❌ 移除"账号绑定"功能（暂不需要）
• ❌ 移除"在线设备"功能（暂不需要）
• ⚠️ 简化了表单验证（使用Element Plus原生验证）

后续优化建议

1. 头像裁剪：添加图片裁剪功能
2. 更多安全选项：
   • 两步验证
   • 登录日志查看
3. 个性化设置：
   • 主题色切换
   • 字体大小调整
4. 国际化：支持多语言显示

测试建议

功能测试

1. 个人信息修改：

   • 修改昵称并保存
   • 验证右上角显示是否更新

2. 头像上传：

   • 上传符合要求的图片
   • 上传超大文件（应失败）
   • 上传非图片文件（应失败）

3. 密码修改：

   • 输入错误旧密码（应失败）
   • 两次新密码不一致（应失败）
   • 正确修改密码并验证重新登录

兼容性测试

• Chrome、Firefox、Safari 浏览器测试
• 响应式布局测试（桌面端、平板、移动端）