yss-project/URGENT-FIX-STEPS.md

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

当前状态

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 恢复原始文件，然后重新添加嵌入模式

cd yss-project
git checkout src/app/pages/team-leader/employee-detail-panel/employee-detail-panel.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 结束后) 添加：

      </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. 测试两种模式