yss-project/COMPONENT-REUSE-SOLUTION.md

组件复用解决方案

问题分析

用户反馈的核心问题：

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:

   @Input() embedMode: boolean = false;
   

2. 修改 employee-detail-panel.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:

   @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:

   // 移除所有 ::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. 测试验证显示效果