# 紧急修复步骤 - 组件复用问题

## 当前状态

1. ✅ `employee-detail-panel.ts` 已添加 `embedMode` 输入属性
2. ⚠️ `employee-detail-panel.html` 结构不完整 - 只有 `@if (embedMode)` 分支，缺少 `@else` 分支
3. ✅ `employee-info-panel.html` 已更新为使用 `[embedMode]="true"`
4. ✅ `employee-info-panel.component.scss` 已简化

## 问题根源

`employee-detail-panel.html` 当前只有嵌入模式的代码，没有完整模式的代码。这导致：
- 在组长端打开员工详情时会失败（因为 `embedMode` 默认为 `false`，但没有对应的渲染逻辑）
- 需要恢复完整模式的 HTML 结构

## 解决方案

由于 `employee-detail-panel.html` 有 444 行，手动复制会出错。最佳方案是：

### 选项 A：使用 Git 恢复原始文件，然后重新添加嵌入模式

```bash
cd yss-project
git checkout src/app/pages/team-leader/employee-detail-panel/employee-detail-panel.html
```

然后手动添加嵌入模式：在原始文件的开头添加：

```html
<!-- 员工详情面板 -->
@if (visible && employeeDetail) {
  <!-- 🎯 嵌入模式：只渲染内容部分 -->
  @if (embedMode) {
    <!-- 直接复制 panel-content 内的所有 section -->
    <div class="panel-content embedded">
      ... (复制原文件中 panel-content 内的所有内容)
    </div>
  } @else {
    <!-- 完整模式：原有的完整结构 -->
    <div class="employee-detail-overlay" (click)="onClose()">
      ...
    </div>
  }
}
```

### 选项 B：手动补全当前文件

在 line 337 (能力问卷 section 结束后) 添加：

```html
      </div>  <!-- 结束 panel-content -->
    </div>  <!-- 结束 employee-detail-panel -->
  </div>  <!-- 结束 employee-detail-overlay -->
  } @else {
    <!-- 完整模式 -->
    <div class="employee-detail-overlay" (click)="onClose()">
      <div class="employee-detail-panel" (click)="stopPropagation($event)">
        <!-- 面板头部 -->
        <div class="panel-header">
          <h3 class="panel-title">
            <svg class="icon-user" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
              <circle cx="12" cy="7" r="4"></circle>
            </svg>
            {{ employeeDetail.name }} 详情
          </h3>
          <button class="btn-close" (click)="onClose()">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <line x1="18" y1="6" x2="6" y2="18"></line>
              <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
          </button>
        </div>

        <!-- 面板内容 -->
        <div class="panel-content">
          ... (复制嵌入模式中的所有 section 内容)
        </div>
      </div>
    </div>
  }
}
```

## 推荐操作

**使用选项 A**，因为：
1. 更安全，不会丢失原有代码
2. 可以确保完整模式的 HTML 完整无误
3. 只需要复制一次 panel-content 的内容到嵌入模式

## 立即执行

1. 用 Git 恢复 `employee-detail-panel.html`
2. 读取恢复后的文件
3. 找到 `<div class="panel-content">` 的开始和结束
4. 在文件开头添加嵌入模式的条件渲染
5. 测试两种模式