# 个人中心功能说明

## 功能概述

已将 `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接口

### 获取用户信息
```typescript
GET /system/user/profile
Response: UserProfile
```

### 更新用户信息
```typescript
PUT /system/user/profile
Request: {
  userId: number
  nickName: string
  email: string
  phonenumber: string
  sex: string
}
```

### 修改密码
```typescript
PUT /system/user/profile/updatePwd
Request: {
  oldPassword: string
  newPassword: string
}
```

### 上传头像
```typescript
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 浏览器测试
- 响应式布局测试（桌面端、平板、移动端）