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

## 🎬 功能演示流程

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

#### 步骤：
1. **打开管理员员工管理页面**
   - 路径：`/admin/employees`
   - 看到员工列表表格

2. **点击员工的"详细信息"按钮**
   - 侧边栏从右侧滑入
   - 显示渐变紫色顶部导航
   - 默认显示"基本信息"标签页

3. **查看基本信息内容**
   - 顶部：员工头像、真实姓名、昵称、角色徽章、在职状态
   - 联系方式：手机号、邮箱、企微ID
   - 组织信息：身份、部门、职级
   - 技能标签：多个技能以圆角标签显示
   - 工作量统计：当前项目、已完成、平均质量

4. **点击"编辑基本信息"按钮**
   - 切换到编辑模式
   - 表单显示可编辑字段
   - 修改姓名、手机号、身份、部门
   - 点击"保存更新"或"取消"

5. **关闭面板**
   - 点击右上角 X 按钮
   - 或点击遮罩层
   - 侧边栏滑出消失

---

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

#### 步骤：
1. **打开设计师组长大盘页面**
   - 路径：`/team-leader/dashboard`
   - 看到设计师列表

2. **点击设计师的"完整信息"按钮**
   - 侧边栏从右侧滑入
   - 顶部显示设计师头像和信息

3. **查看"基本信息"标签页**
   - 与管理员视角相同
   - 显示设计师的基本资料

4. **切换到"项目负载"标签页**
   - 点击顶部的"项目负载"标签
   - 内容区域平滑切换

5. **查看负载概况**
   - 当前负责项目数（颜色标识：绿色=正常，橙色=高负载）
   - 核心项目列表（可点击跳转）

6. **查看负载详细日历**
   - 月视图日历
   - 每天显示项目数量
   - 今天高亮显示
   - 有项目的日期显示蓝色徽章
   - 高负载日期（2个以上项目）显示红色徽章

7. **点击日历日期**
   - 弹出当天项目列表
   - 显示项目名称和截止日期
   - 点击项目跳转到详情页

8. **点击"详细日历"按钮**
   - 弹出完整的设计师工作日历
   - 复用订单分配页的日历组件
   - 显示更详细的项目时间线

9. **查看请假明细**
   - 未来7天的请假记录
   - 表格显示：日期、状态、备注
   - 请假日期以红色背景标识

10. **查看红色标记说明**
    - 显示该设计师的负载预警信息
    - 例如："当前负载过高，建议暂缓分配新项目"

11. **查看能力问卷**
    - 如果已完成问卷：
      - 显示"已完成问卷"状态
      - 默认显示能力画像摘要（8项核心能力）
      - 点击"查看完整问卷"展开所有题目答案
      - 点击"收起详情"折叠回摘要
    - 如果未完成问卷：
      - 显示"尚未完成能力问卷"提示
    - 点击刷新按钮重新加载问卷状态

12. **切换月份**
    - 点击日历的"上月"/"下月"按钮
    - 日历数据自动更新

---

### 演示3：标签页切换体验

#### 步骤：
1. **基本信息 → 项目负载**
   - 点击"项目负载"标签
   - 内容区域淡入淡出切换
   - 顶部标签高亮变化

2. **项目负载 → 基本信息**
   - 点击"基本信息"标签
   - 内容区域平滑切换回来

3. **多次快速切换**
   - 动画流畅，无卡顿
   - 状态保持正确

---

## 🎨 UI/UX 亮点

### 视觉设计
1. **渐变紫色主题**
   - 头部使用 `linear-gradient(135deg, #667eea 0%, #764ba2 100%)`
   - 统一的紫色强调色

2. **现代化卡片**
   - 白色背景，圆角 12px
   - 柔和阴影 `0 2px 8px rgba(0, 0, 0, 0.05)`

3. **清晰的视觉层次**
   - 分区标题带图标
   - 数据用网格布局
   - 重要信息用颜色强调

4. **响应式设计**
   - 桌面端：600px 侧边栏
   - 移动端：全屏显示
   - 自动调整布局

### 交互体验
1. **平滑动画**
   - 侧边栏滑入/滑出（0.3s）
   - 内容切换淡入淡出（0.3s）
   - hover 悬停效果（0.2s）

2. **直观的反馈**
   - 按钮 hover 变色
   - 可点击项有手型光标
   - 加载状态有旋转动画

3. **友好的交互**
   - 点击遮罩层关闭面板
   - Esc 键关闭（建议添加）
   - 表单验证提示

---

## 📊 数据展示逻辑

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

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

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

---

## 🧪 测试场景

### 测试1：只有基本信息的员工
```typescript
const employee = {
  id: 'emp001',
  name: '张三',
  mobile: '13800138000',
  userid: 'zhangsan',
  roleName: '客服',
  department: '客服部',
  // 不提供 projectData、calendarData 等
};
```
**预期**：只能看到"基本信息"标签页，"项目负载"标签页内容为空或不显示

### 测试2：完整信息的设计师
```typescript
const employee = {
  // 基本信息...
  currentProjects: 4,
  projectData: [...],
  calendarData: {...},
  leaveRecords: [...],
  surveyCompleted: true,
  surveyData: {...}
};
```
**预期**：两个标签页都有完整内容，可以自由切换

### 测试3：高负载设计师
```typescript
const employee = {
  // ...
  currentProjects: 6,
  redMarkExplanation: '该设计师项目负载过高...'
};
```
**预期**：
- 项目数显示为橙色/红色
- 红色标记说明区域显示警告信息
- 日历上多个日期显示红色徽章

### 测试4：未完成问卷的员工
```typescript
const employee = {
  // ...
  surveyCompleted: false,
  surveyData: null
};
```
**预期**：问卷区域显示"尚未完成能力问卷"提示

---

## 🔧 调试技巧

### Chrome DevTools
1. **查看组件状态**
   ```javascript
   // 在控制台输入
   ng.probe($0).componentInstance
   ```

2. **查看绑定的数据**
   ```javascript
   ng.probe($0).componentInstance.employee
   ```

3. **触发事件**
   ```javascript
   ng.probe($0).componentInstance.switchTab('workload')
   ```

### 添加调试日志
在组件方法中添加：
```typescript
switchTab(tab: 'basic' | 'workload'): void {
  console.log('🔄 切换标签:', tab);
  this.activeTab = tab;
}
```

---

## 🎯 对比原有面板

### 管理员端原面板 vs 新组件

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

### 组长端原面板 vs 新组件

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

---

## 💡 最佳实践

### 数据加载
建议异步加载项目负载数据，避免一次性加载过多：
```typescript
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
  };
}
```

### 日历数据按需加载
只加载当前月份的日历数据：
```typescript
handleMonthChange(direction: number) {
  const newMonth = this.calculateNewMonth(direction);
  this.loadCalendarData(employeeId, newMonth);
}
```

### 缓存优化
对于不常变化的数据（如问卷），可以缓存：
```typescript
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;
}
```

---

## 🎉 总结

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

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