feat: 添加员工门户项目及相关后端改造
- 新增 hzhub-portal-employee 员工门户前端项目（基于 Vue3 + Element Plus） - 后端登录接口增加返回 nickName 字段 - 移除 KnowledgeInfoController 的 @SaCheckPermission 注解 - 删除 hzhub-portal-company 旧门户项目 - 更新项目文档和架构说明 - 添加后台运行管理脚本（start-all.sh / status-all.sh / stop-all.sh） - 更新 docker-compose 配置 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
大壮
198
hzhub-portal-employee/docs/PROFILE_FEATURE.md
Normal file
198
hzhub-portal-employee/docs/PROFILE_FEATURE.md
Normal file
@@ -0,0 +1,198 @@
|
||||
# 个人中心功能说明
|
||||
|
||||
## 功能概述
|
||||
|
||||
已将 `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 浏览器测试
|
||||
- 响应式布局测试（桌面端、平板、移动端）
|
||||
Reference in New Issue
Block a user