yss-project/QUICK-TEST-ADMIN-EMPLOYEE-PANEL.md

🧪 管理员端员工信息面板 - 快速测试指南

🎯 测试目标

验证管理员端员工管理页面中的新员工信息面板功能是否正常工作。

🚀 快速开始

1. 启动应用

cd yss-project
npm start

访问：http://localhost:4200/admin/employees

---

✅ 测试检查清单

📋 阶段 1：查看员工详情

步骤：

1. 在员工列表中找到任意一个员工
2. 点击该员工右侧的"查看"按钮（👁 图标）
3. 观察右侧滑出的员工详情面板

预期结果：

• 面板从右侧平滑滑出
• 显示员工头像（如果有）
• 显示员工姓名、昵称、职位
• 显示联系方式（手机号、邮箱、企微ID）
• 显示组织信息（身份、部门）
• 显示技能标签（如果有）
• 显示工作量统计（当前项目数、已完成项目数、平均质量）
• 默认选中"员工详情"标签

---

📝 阶段 2：编辑员工信息

步骤：

1. 在已打开的员工详情面板中
2. 点击顶部的"编辑信息"标签
3. 观察面板内容切换为编辑表单

预期结果：

• 面板内容从"查看模式"切换到"编辑模式"
• 显示可编辑的表单字段：
  • 真实姓名（输入框）
  • 昵称（输入框）
  • 手机号（输入框）
  • 企微ID（灰色禁用，不可编辑）
  • 身份（下拉选择框）
  • 部门（下拉选择框）
  • 员工状态（单选按钮：正常/已禁用）
• 底部显示"取消"和"更新"按钮

---

💾 阶段 3：保存编辑

步骤：

1. 在编辑表单中修改员工的"真实姓名"
2. 修改员工的"手机号"（确保是有效的11位手机号）
3. 点击底部的"更新"按钮

预期结果：

• 弹出提示："员工信息更新成功！"
• 面板自动关闭
• 员工列表中的该员工信息已更新为新值
• 控制台输出："✅ 员工信息已更新（从新面板）"

---

🚫 阶段 4：表单验证

步骤：

1. 再次打开员工编辑面板
2. 清空"真实姓名"字段
3. 点击"更新"按钮
4. 观察验证提示

预期结果：

• 弹出警告："请输入员工姓名"
• 表单不提交，面板保持打开状态

步骤（续）：

1. 输入真实姓名
2. 将手机号改为无效格式（如 "123456"）
3. 点击"更新"按钮

预期结果：

• 弹出警告："请输入正确的手机号格式"
• 表单不提交，面板保持打开状态

---

✖️ 阶段 5：关闭面板

测试方法 1：点击关闭按钮

1. 点击面板右上角的"×"按钮

预期结果：

• 面板平滑关闭
• 员工列表正常显示

测试方法 2：点击遮罩层

1. 重新打开员工详情面板
2. 点击面板左侧的灰色遮罩区域

预期结果：

• 面板平滑关闭
• 员工列表正常显示

测试方法 3：点击取消按钮

1. 打开编辑模式
2. 点击底部的"取消"按钮

预期结果：

• 面板平滑关闭
• 未保存的修改被丢弃

---

🔄 阶段 6：标签切换

步骤：

1. 打开员工详情面板（查看模式）
2. 点击顶部"编辑信息"标签
3. 修改几个字段但不保存
4. 点击顶部"员工详情"标签

预期结果：

• 面板内容从编辑模式切换回查看模式
• 显示原始的员工信息（未保存的修改被丢弃）
• 切换过程流畅，没有闪烁

---

📱 阶段 7：响应式设计（可选）

步骤：

1. 缩小浏览器窗口到移动端尺寸（如 375px 宽度）
2. 打开员工详情面板

预期结果：

• 面板占满整个屏幕宽度
• 标签导航在小屏幕上仍然可用
• 表单字段垂直排列，易于阅读和操作
• 关闭按钮和操作按钮在小屏幕上仍然可点击

---

🎨 视觉检查

UI 一致性

• 面板颜色、字体与整体应用风格一致
• 按钮样式统一（主按钮蓝色，次按钮灰色）
• 图标清晰可辨认
• 间距和对齐合理

动画效果

• 面板打开/关闭有平滑的滑动动画
• 标签切换有淡入淡出效果
• 遮罩层有渐变效果

---

🐛 已知问题排查

问题 1：面板不显示

症状：点击"查看"按钮后，没有面板弹出

排查步骤：

1. 打开浏览器开发者工具（F12）
2. 查看控制台是否有错误信息
3. 确认 EmployeeInfoPanelComponent 是否正确导入

解决方案：

• 检查 employees.ts 中的 imports 数组是否包含 EmployeeInfoPanelComponent
• 检查 employees.html 中是否添加了 <app-employee-info-panel> 标签

---

问题 2：数据不显示

症状：面板显示，但员工信息为空或显示 "-"

排查步骤：

1. 检查 viewEmployee 方法中的数据映射
2. 确认 selectedEmployeeForPanel 对象是否正确赋值

解决方案：

• 在 viewEmployee 方法中添加 console.log(this.selectedEmployeeForPanel) 调试
• 确认 Employee 接口字段与 EmployeeFullInfo 接口匹配

---

问题 3：保存失败

症状：点击"更新"后提示"更新员工失败"

排查步骤：

1. 查看控制台错误信息
2. 检查网络请求是否成功
3. 确认后端服务是否正常运行

解决方案：

• 检查 employeeService.updateEmployee 方法是否正常
• 确认员工 ID 是否正确传递
• 检查后端 Parse Server 连接

---

✅ 测试完成检查

测试完成后，请确认以下所有功能正常：

• 查看详情：能够正常打开员工详情面板并显示完整信息
• 编辑信息：能够切换到编辑模式并修改员工信息
• 保存更新：修改后能成功保存并更新列表
• 表单验证：无效输入能被正确拦截
• 关闭面板：多种关闭方式都能正常工作
• 标签切换：在查看和编辑模式间切换流畅
• 响应式：在不同屏幕尺寸下都能正常使用

---

📞 反馈

如果在测试过程中发现任何问题，请记录以下信息：

1. 问题描述：详细描述发生的现象
2. 复现步骤：如何触发这个问题
3. 预期行为：期望看到什么
4. 实际行为：实际发生了什么
5. 浏览器信息：使用的浏览器和版本
6. 截图/错误信息：如果有的话

---

测试版本：v1.0
测试日期：2025年11月7日
测试环境：本地开发环境（http://localhost:4200）