226f119607
主要修改： - 完善员工门户CRM模块（经销商、线索管理） - 添加ERP客户选择器集成 - 优化登录认证和租户选择 - 添加超时配置、企业微信集成等文档 - 更新docker-compose配置 - 将.pid临时文件加入gitignore Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
199 lines
4.5 KiB
Markdown
199 lines
4.5 KiB
Markdown
# 个人中心功能说明
|
||
|
||
## 功能概述
|
||
|
||
已将 `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 浏览器测试
|
||
- 响应式布局测试（桌面端、平板、移动端）
|