# 组件复用解决方案

## 问题分析

用户反馈的核心问题：
1. 复用后存在多层嵌套，导致样式不一致
2. 员工问卷没有同步加载
3. 显示效果与原组件不同

## 根本原因

`employee-detail-panel` 组件被设计为一个**完整的侧边栏面板**，包含：
- `.employee-detail-overlay` (遮罩层)
- `.employee-detail-panel` (侧边栏容器)
- `.panel-header` (标题和关闭按钮)
- `.panel-content` (实际内容)

当我们在 `employee-info-panel` 中复用时，这些外层容器都被包含进来，导致：
1. 额外的嵌套层级
2. CSS 样式冲突和覆盖
3. 布局错位

## 解决方案

### 方案一：嵌入模式 (`embedMode`)

为 `employee-detail-panel` 添加一个 `embedMode` 输入属性：
- `embedMode: false` (默认) - 完整侧边栏模式
- `embedMode: true` - 嵌入模式，只渲染内容部分

**实现步骤：**

1. **修改 `employee-detail-panel.ts`**:
   ```typescript
   @Input() embedMode: boolean = false;
   ```

2. **修改 `employee-detail-panel.html`**:
   ```html
   @if (visible && employeeDetail) {
     @if (embedMode) {
       <!-- 嵌入模式：只渲染panel-content -->
       <div class="panel-content embedded">
         <!-- 所有section内容 -->
       </div>
     } @else {
       <!-- 完整模式：带遮罩层和侧边栏 -->
       <div class="employee-detail-overlay" (click)="onClose()">
         <div class="employee-detail-panel" (click)="stopPropagation($event)">
           <div class="panel-header">...</div>
           <div class="panel-content">
             <!-- 所有section内容 -->
           </div>
         </div>
       </div>
     }
   }
   ```

3. **修改 `employee-info-panel.html`**:
   ```html
   @if (activeTab === 'workload') {
     <div class="tab-content workload-tab">
       <app-employee-detail-panel
         [visible]="true"
         [employeeDetail]="employeeDetailForTeamLeader"
         [embedMode]="true"
         (calendarMonthChange)="onChangeMonth($event)"
         (calendarDayClick)="onCalendarDayClick($event)"
         (projectClick)="onProjectClick($event)"
         (refreshSurvey)="onRefreshSurvey()">
       </app-employee-detail-panel>
     </div>
   }
   ```

4. **修改 `employee-info-panel.component.scss`**:
   ```scss
   // 移除所有 ::ng-deep 样式覆盖
   // 让 embedded 模式的组件自然渲染
   ```

### 方案二：提取共享组件

将 `panel-content` 的内容提取为独立组件：
- `employee-workload-content.component.ts`
- 由 `employee-detail-panel` 和 `employee-info-panel` 共同使用

**优点：** 更彻底的复用
**缺点：** 需要重构现有代码

## 推荐方案

**推荐使用方案一（嵌入模式）**，因为：
1. 最小化代码改动
2. 保持原有组件完整性
3. 易于维护和理解

## 数据同步

确保 `employeeDetailForTeamLeader` getter 正确转换所有必要数据：
- `surveyCompleted` - 问卷完成状态
- `surveyData` - 问卷数据
- `calendarData` - 日历数据
- `projectData` - 项目数据
- `leaveRecords` - 请假记录

## 下一步

立即实施方案一：
1. 修改 `employee-detail-panel` 添加 `embedMode`
2. 简化 `employee-info-panel` 的 SCSS
3. 测试验证显示效果