员工信息侧边栏组件 - 演示指南

🎬 功能演示流程

演示1：管理员端查看员工基本信息

步骤：

打开管理员员工管理页面
- 路径：/admin/employees
- 看到员工列表表格
点击员工的"详细信息"按钮
- 侧边栏从右侧滑入
- 显示渐变紫色顶部导航
- 默认显示"基本信息"标签页
查看基本信息内容
- 顶部：员工头像、真实姓名、昵称、角色徽章、在职状态
- 联系方式：手机号、邮箱、企微ID
- 组织信息：身份、部门、职级
- 技能标签：多个技能以圆角标签显示
- 工作量统计：当前项目、已完成、平均质量
点击"编辑基本信息"按钮
- 切换到编辑模式
- 表单显示可编辑字段
- 修改姓名、手机号、身份、部门
- 点击"保存更新"或"取消"
关闭面板
- 点击右上角 X 按钮
- 或点击遮罩层
- 侧边栏滑出消失

演示2：设计师组长查看员工项目负载

步骤：

打开设计师组长大盘页面
- 路径：/team-leader/dashboard
- 看到设计师列表
点击设计师的"完整信息"按钮
- 侧边栏从右侧滑入
- 顶部显示设计师头像和信息
查看"基本信息"标签页
- 与管理员视角相同
- 显示设计师的基本资料
切换到"项目负载"标签页
- 点击顶部的"项目负载"标签
- 内容区域平滑切换
查看负载概况
- 当前负责项目数（颜色标识：绿色=正常，橙色=高负载）
- 核心项目列表（可点击跳转）
查看负载详细日历
- 月视图日历
- 每天显示项目数量
- 今天高亮显示
- 有项目的日期显示蓝色徽章
- 高负载日期（2个以上项目）显示红色徽章
点击日历日期
- 弹出当天项目列表
- 显示项目名称和截止日期
- 点击项目跳转到详情页
点击"详细日历"按钮
- 弹出完整的设计师工作日历
- 复用订单分配页的日历组件
- 显示更详细的项目时间线
查看请假明细
- 未来7天的请假记录
- 表格显示：日期、状态、备注
- 请假日期以红色背景标识
查看红色标记说明
- 显示该设计师的负载预警信息
- 例如："当前负载过高，建议暂缓分配新项目"
查看能力问卷
- 如果已完成问卷：
  - 显示"已完成问卷"状态
  - 默认显示能力画像摘要（8项核心能力）
  - 点击"查看完整问卷"展开所有题目答案
  - 点击"收起详情"折叠回摘要
- 如果未完成问卷：
  - 显示"尚未完成能力问卷"提示
- 点击刷新按钮重新加载问卷状态
切换月份
- 点击日历的"上月"/"下月"按钮
- 日历数据自动更新

演示3：标签页切换体验

步骤：

基本信息 → 项目负载
- 点击"项目负载"标签
- 内容区域淡入淡出切换
- 顶部标签高亮变化
项目负载 → 基本信息
- 点击"基本信息"标签
- 内容区域平滑切换回来
多次快速切换
- 动画流畅，无卡顿
- 状态保持正确

🎨 UI/UX 亮点

视觉设计

渐变紫色主题
- 头部使用 linear-gradient(135deg, #667eea 0%, #764ba2 100%)
- 统一的紫色强调色
现代化卡片
- 白色背景，圆角 12px
- 柔和阴影 0 2px 8px rgba(0, 0, 0, 0.05)
清晰的视觉层次
- 分区标题带图标
- 数据用网格布局
- 重要信息用颜色强调
响应式设计
- 桌面端：600px 侧边栏
- 移动端：全屏显示
- 自动调整布局

交互体验

平滑动画
- 侧边栏滑入/滑出（0.3s）
- 内容切换淡入淡出（0.3s）
- hover 悬停效果（0.2s）
直观的反馈
- 按钮 hover 变色
- 可点击项有手型光标
- 加载状态有旋转动画
友好的交互
- 点击遮罩层关闭面板
- Esc 键关闭（建议添加）
- 表单验证提示

📊 数据展示逻辑

负载状态颜色

当前项目数 < 3：绿色（正常负载）
当前项目数 >= 3：橙色（高负载）
当前项目数 >= 5：红色（过载，不建议）

日历徽章颜色

今天：橙色背景 (#fff3e0)
有项目：蓝色徽章 (#667eea)
高负载（2个以上）：红色徽章 (#f44336)
非当月日期：灰色 (#fafafa)

状态标识

在职：绿色徽章 (#e8f5e9)
已禁用：红色徽章 (#ffebee)
正常：绿色状态点
请假：红色背景

🧪 测试场景

测试1：只有基本信息的员工

const employee = {
  id: 'emp001',
  name: '张三',
  mobile: '13800138000',
  userid: 'zhangsan',
  roleName: '客服',
  department: '客服部',
  // 不提供 projectData、calendarData 等
};

预期：只能看到"基本信息"标签页，"项目负载"标签页内容为空或不显示

测试2：完整信息的设计师

const employee = {
  // 基本信息...
  currentProjects: 4,
  projectData: [...],
  calendarData: {...},
  leaveRecords: [...],
  surveyCompleted: true,
  surveyData: {...}
};

预期：两个标签页都有完整内容，可以自由切换

测试3：高负载设计师

const employee = {
  // ...
  currentProjects: 6,
  redMarkExplanation: '该设计师项目负载过高...'
};

预期：

项目数显示为橙色/红色
红色标记说明区域显示警告信息
日历上多个日期显示红色徽章

测试4：未完成问卷的员工

const employee = {
  // ...
  surveyCompleted: false,
  surveyData: null
};

预期：问卷区域显示"尚未完成能力问卷"提示

🔧 调试技巧

Chrome DevTools

查看组件状态

// 在控制台输入
ng.probe($0).componentInstance

查看绑定的数据

ng.probe($0).componentInstance.employee

触发事件

ng.probe($0).componentInstance.switchTab('workload')

添加调试日志

在组件方法中添加：

switchTab(tab: 'basic' | 'workload'): void {
  console.log('🔄 切换标签:', tab);
  this.activeTab = tab;
}

🎯 对比原有面板

管理员端原面板 vs 新组件

特性	原面板	新组件
布局	右侧固定宽度	右侧固定宽度
查看模式	✅	✅
编辑模式	✅	✅
项目负载	❌	✅
标签切换	❌	✅
样式主题	蓝灰色	渐变紫色

组长端原面板 vs 新组件

特性	原面板	新组件
负载概况	✅	✅
日历视图	✅	✅
请假明细	✅	✅
能力问卷	✅	✅
基本信息	❌	✅
编辑功能	❌	✅
标签切换	❌	✅

💡 最佳实践

数据加载

建议异步加载项目负载数据，避免一次性加载过多：

async viewEmployee(emp: Employee) {
  // 1. 先显示基本信息
  this.selectedEmployee = { ...basicInfo };
  this.showPanel = true;
  
  // 2. 异步加载项目负载数据
  const projectData = await this.loadProjectData(emp.id);
  const calendarData = await this.loadCalendarData(emp.id);
  
  // 3. 更新完整信息
  this.selectedEmployee = {
    ...this.selectedEmployee,
    ...projectData,
    calendarData
  };
}

日历数据按需加载

只加载当前月份的日历数据：

handleMonthChange(direction: number) {
  const newMonth = this.calculateNewMonth(direction);
  this.loadCalendarData(employeeId, newMonth);
}

缓存优化

对于不常变化的数据（如问卷），可以缓存：

private surveyCache = new Map<string, any>();

async loadSurvey(employeeId: string) {
  if (this.surveyCache.has(employeeId)) {
    return this.surveyCache.get(employeeId);
  }
  
  const survey = await this.surveyService.getEmployeeSurvey(employeeId);
  this.surveyCache.set(employeeId, survey);
  return survey;
}

🎉 总结

这个员工信息侧边栏组件提供了： ✅ 完整的员工信息展示（基本信息 + 项目负载） ✅ 灵活的标签切换设计 ✅ 优雅的交互体验 ✅ 不影响原有功能 ✅ 易于集成和使用

你可以根据实际需求逐步集成到项目中，享受更好的用户体验！🚀

DEMO_GUIDE.md 8.5 KB История Исходник