<div class="hr-dashboard-container">
  <!-- 顶部导航按钮 -->
  <div class="top-navigation">
    <div class="nav-buttons">
      <button 
        mat-raised-button 
        [class.active]="activeTab === 'visualization'"
        (click)="switchTab('visualization')"
        class="nav-button">
        <mat-icon>analytics</mat-icon>
        数据可视化
      </button>
      <button 
        mat-raised-button 
        [class.active]="activeTab === 'recruitment'"
        (click)="switchTab('recruitment')"
        class="nav-button">
        <mat-icon>psychology</mat-icon>
        招聘流程优化
      </button>
      <button 
        mat-raised-button 
        [class.active]="activeTab === 'performance'"
        (click)="switchTab('performance')"
        class="nav-button">
        <mat-icon>assessment</mat-icon>
        绩效统计与分析
      </button>
      <button 
        mat-raised-button 
        [class.active]="activeTab === 'onboarding'"
        (click)="switchTab('onboarding')"
        class="nav-button">
        <mat-icon>person_add</mat-icon>
        新人跟进管理
      </button>
      <!-- 晋升规则圆圈按钮 -->
      <button 
        mat-fab 
        color="primary"
        (click)="openPromotionRules()"
        class="promotion-rules-btn"
        matTooltip="晋升规则">
        <mat-icon>rule</mat-icon>
      </button>
    </div>
  </div>

  <!-- 数据可视化页面 -->
  @if (activeTab === 'visualization') {
    <div class="visualization-page">
      <div class="main-layout">
        <!-- 左侧数据展示区域 -->
        <div class="left-panel">
          <!-- 职级分布饼图 -->
          <mat-card class="chart-card">
            <mat-card-header>
              <mat-card-title>
                <mat-icon>pie_chart</mat-icon>
                职级分布
              </mat-card-title>
              <mat-card-subtitle>设计师职级占比分析</mat-card-subtitle>
            </mat-card-header>
            <mat-card-content>
              <div class="pie-chart-container">
                <canvas #pieChart></canvas>
              </div>
              <div class="chart-legend">
                @for (item of rankDistribution; track item.level) {
                  <div class="legend-item">
                    <div class="legend-color" [style.background-color]="item.color"></div>
                    <span>{{item.level}}: {{item.percentage}}% ({{item.count}}人)</span>
                  </div>
                }
              </div>
            </mat-card-content>
          </mat-card>

          <!-- 入职离职趋势折线图 -->
          <mat-card class="chart-card">
            <mat-card-header>
              <mat-card-title>
                <mat-icon>trending_up</mat-icon>
                入职离职趋势
              </mat-card-title>
              <mat-card-subtitle>近6个月人员流动情况</mat-card-subtitle>
            </mat-card-header>
            <mat-card-content>
              <div class="line-chart-container">
                <canvas #lineChart></canvas>
              </div>
              <div class="key-notes">
                <h4>关键节点</h4>
                @for (note of keyNotes; track note.month) {
                  <div class="note-item">
                    <mat-icon class="note-icon">info</mat-icon>
                    <span class="note-text">{{note.month}}：{{note.description}}</span>
                  </div>
                }
              </div>
            </mat-card-content>
          </mat-card>

          <!-- 绩效总览雷达图 -->
          <mat-card class="chart-card">
            <mat-card-header>
              <mat-card-title>
                <mat-icon>radar</mat-icon>
                绩效总览
              </mat-card-title>
              <mat-card-subtitle>各部门4个维度绩效对比</mat-card-subtitle>
            </mat-card-header>
            <mat-card-content>
              <div class="radar-chart-container">
                <canvas #radarChart></canvas>
              </div>
              <div class="radar-legend">
                @for (dept of departmentPerformance; track dept.department) {
                  <div class="legend-item">
                    <div class="legend-color" [style.background-color]="getDepartmentColor(dept.department)"></div>
                    <span>{{dept.department}}</span>
                  </div>
                }
              </div>
            </mat-card-content>
          </mat-card>

          <!-- 关键岗位空缺数 -->
          <mat-card class="chart-card">
            <mat-card-header>
              <mat-card-title>
                <mat-icon>work_off</mat-icon>
                关键岗位空缺
              </mat-card-title>
              <mat-card-subtitle>紧急招聘需求</mat-card-subtitle>
            </mat-card-header>
            <mat-card-content>
              <div class="vacancy-list">
                @for (vacancy of keyVacancies; track vacancy.position) {
                  <div class="vacancy-item" [class]="getPriorityClass(vacancy.priority)">
                    <div class="vacancy-icon">
                      <mat-icon>{{getVacancyIcon(vacancy.priority)}}</mat-icon>
                    </div>
                    <div class="vacancy-info">
                      <h4>{{vacancy.position}}</h4>
                      <p>空缺：{{vacancy.count}}人</p>
                      <span class="priority-badge" [class]="'priority-' + vacancy.priority">
                        {{vacancy.priority === 'high' ? '紧急' : vacancy.priority === 'medium' ? '一般' : '低'}}
                      </span>
                    </div>
                  </div>
                }
              </div>
            </mat-card-content>
          </mat-card>
        </div>

        <!-- 右侧待办事项区域 -->
        <div class="right-panel">
          <!-- 待办事项按钮卡片 -->
          <mat-card class="todo-card">
            <mat-card-header>
              <mat-card-title>
                <mat-icon>assignment</mat-icon>
                待办事项列表
              </mat-card-title>
              <mat-card-subtitle>点击按钮查看详情</mat-card-subtitle>
            </mat-card-header>
            <mat-card-content>
              <!-- 待办事项按钮卡片 -->
              <div class="todo-buttons">
                <button mat-raised-button 
                        class="todo-button priority-high" 
                        (click)="toggleTodoList()"
                        [class.expanded]="showTodoList">
                  <mat-icon>assignment_turned_in</mat-icon>
                  <span>查看待办事项</span>
                  <mat-icon class="expand-icon">{{showTodoList ? 'expand_less' : 'expand_more'}}</mat-icon>
                </button>
              </div>
              
              <!-- 可展开的待办事项列表 -->
              @if (showTodoList) {
                <div class="todo-list" [@slideInOut]>
                  @for (todo of todoList; track todo.id) {
                    <div class="todo-item" [class]="getPriorityClass(todo.priority)">
                      <div class="todo-content">
                        <h4>{{todo.title}}</h4>
                        <p>{{todo.description}}</p>
                        <div class="todo-meta">
                          <span class="priority-badge" [class]="'priority-' + todo.priority">
                            {{todo.priority === 'high' ? '紧急' : todo.priority === 'medium' ? '一般' : '低'}}
                          </span>
                          <span class="due-date">{{todo.dueDate}}</span>
                        </div>
                      </div>
                      <div class="todo-actions">
                        <button mat-icon-button color="primary">
                          <mat-icon>edit</mat-icon>
                        </button>
                        <button mat-icon-button color="accent">
                          <mat-icon>check</mat-icon>
                        </button>
                      </div>
                    </div>
                  }
                </div>
              }
            </mat-card-content>
          </mat-card>
        </div>

        <!-- 离职原因分析区域 -->
        <div class="resignation-analysis-section">
          <mat-card class="analysis-card">
            <mat-card-header>
              <mat-card-title>
                <mat-icon>exit_to_app</mat-icon>
                离职原因分析
              </mat-card-title>
              <div class="analysis-actions">
                <mat-form-field appearance="outline" class="time-range-selector">
                  <mat-label>时间范围</mat-label>
                  <mat-select [(value)]="resignationTimeRange" (selectionChange)="updateResignationData()">
                    <mat-option value="month">近一个月</mat-option>
                    <mat-option value="quarter">近一季度</mat-option>
                    <mat-option value="year">近一年</mat-option>
                    <mat-option value="all">全部时间</mat-option>
                  </mat-select>
                </mat-form-field>
                
                <button mat-stroked-button class="export-analysis-btn" (click)="exportResignationAnalysis()">
                  <mat-icon>download</mat-icon>
                  导出分析
                </button>
              </div>
            </mat-card-header>
            
            <mat-card-content>
              <!-- 分类筛选器 -->
              <div class="category-filters">
                <div class="filter-group">
                  <label>部门筛选:</label>
                  <mat-chip-set>
                    @for (dept of resignationDepartments; track dept.id) {
                      <mat-chip 
                        (click)="toggleDepartmentFilter(dept.id)"
                        [class.selected]="dept.selected">
                        {{ dept.name }}
                        <span class="count">({{ dept.count }})</span>
                      </mat-chip>
                    }
                  </mat-chip-set>
                </div>
                
                <div class="filter-group">
                  <label>职级筛选:</label>
                  <mat-chip-set>
                    @for (level of resignationLevels; track level.id) {
                      <mat-chip 
                        (click)="toggleLevelFilter(level.id)"
                        [class.selected]="level.selected">
                        {{ level.name }}
                        <span class="count">({{ level.count }})</span>
                      </mat-chip>
                    }
                  </mat-chip-set>
                </div>
              </div>

              <!-- 统计概览 -->
              <div class="resignation-overview">
                <div class="overview-cards">
                  <div class="overview-card total">
                    <div class="card-icon">
                      <mat-icon>people</mat-icon>
                    </div>
                    <div class="card-content">
                      <div class="card-value">{{ totalResignations }}</div>
                      <div class="card-label">总离职人数</div>
                    </div>
                  </div>
                  
                  <div class="overview-card rate">
                    <div class="card-icon">
                      <mat-icon>trending_up</mat-icon>
                    </div>
                    <div class="card-content">
                      <div class="card-value">{{ resignationRate }}%</div>
                      <div class="card-label">离职率</div>
                    </div>
                  </div>
                  
                  <div class="overview-card avg-tenure">
                    <div class="card-icon">
                      <mat-icon>schedule</mat-icon>
                    </div>
                    <div class="card-content">
                      <div class="card-value">{{ averageTenure }}个月</div>
                      <div class="card-label">平均在职时长</div>
                    </div>
                  </div>
                  
                  <div class="overview-card cost">
                    <div class="card-icon">
                      <mat-icon>attach_money</mat-icon>
                    </div>
                    <div class="card-content">
                      <div class="card-value">{{ resignationCost }}万</div>
                      <div class="card-label">离职成本</div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 离职原因分析 -->
              <div class="resignation-reasons-analysis">
                <div class="reasons-chart-section">
                  <div class="chart-header">
                    <h3>离职原因占比分析</h3>
                    <mat-button-toggle-group [(value)]="reasonsChartType">
                      <mat-button-toggle value="pie">
                        <mat-icon>pie_chart</mat-icon>
                        饼图
                      </mat-button-toggle>
                      <mat-button-toggle value="doughnut">
                        <mat-icon>donut_large</mat-icon>
                        环形图
                      </mat-button-toggle>
                      <mat-button-toggle value="bar">
                        <mat-icon>bar_chart</mat-icon>
                        柱状图
                      </mat-button-toggle>
                    </mat-button-toggle-group>
                  </div>
                  
                  <div class="chart-container">
                    <canvas #resignationChart width="600" height="400"></canvas>
                  </div>
                </div>

                <div class="reasons-list-section">
                  <h3>详细原因分析</h3>
                  <div class="reasons-list">
                    @for (reason of resignationReasons; track reason.id) {
                      <div class="reason-item" [class]="'reason-' + reason.category">
                        <div class="reason-header">
                          <div class="reason-info">
                            <mat-icon [class]="'icon-' + reason.category">{{ reason.icon }}</mat-icon>
                            <div class="reason-details">
                              <h4>{{ reason.name }}</h4>
                              <span class="reason-category">{{ reason.categoryName }}</span>
                            </div>
                          </div>
                          <div class="reason-stats">
                            <div class="percentage">{{ reason.percentage }}%</div>
                            <div class="count">{{ reason.count }}人</div>
                          </div>
                        </div>
                        
                        <div class="reason-progress">
                          <mat-progress-bar 
                            mode="determinate" 
                            [value]="reason.percentage"
                            [class]="'progress-' + reason.category">
                          </mat-progress-bar>
                        </div>
                        
                        <div class="reason-description">
                          <p>{{ reason.description }}</p>
                          @if (reason.trend) {
                            <div class="trend-indicator" [class]="'trend-' + reason.trend.direction">
                              <mat-icon>{{ reason.trend.direction === 'up' ? 'trending_up' : 'trending_down' }}</mat-icon>
                              <span>较上期{{ reason.trend.direction === 'up' ? '上升' : '下降' }}{{ reason.trend.value }}%</span>
                            </div>
                          }
                        </div>
                        
                        <div class="reason-actions">
                          <button mat-stroked-button (click)="viewReasonDetails(reason.id)">
                            <mat-icon>visibility</mat-icon>
                            查看详情
                          </button>
                          <button mat-stroked-button (click)="viewImprovementPlan(reason.id)">
                            <mat-icon>lightbulb</mat-icon>
                            改进建议
                          </button>
                        </div>
                      </div>
                    }
                  </div>
                </div>
              </div>

              <!-- 趋势分析 -->
              <div class="resignation-trends">
                <div class="trends-header">
                  <h3>离职趋势分析</h3>
                  <mat-button-toggle-group [(value)]="trendsTimeframe">
                    <mat-button-toggle value="monthly">月度</mat-button-toggle>
                    <mat-button-toggle value="quarterly">季度</mat-button-toggle>
                    <mat-button-toggle value="yearly">年度</mat-button-toggle>
                  </mat-button-toggle-group>
                </div>
                
                <div class="trends-chart-container">
                  <canvas #trendsChart width="800" height="300"></canvas>
                </div>
              </div>
            </mat-card-content>
          </mat-card>
        </div>
      </div>
    </div>
  }

  <!-- 招聘流程优化页面 -->
  @if (activeTab === 'recruitment') {
    <div class="recruitment-page">
      <div class="content-layout">
        <!-- AI简历分析功能区 -->
        <mat-card class="ai-analysis-section">
          <mat-card-header>
            <mat-card-title>
              <mat-icon>smart_toy</mat-icon>
              AI 简历分析
            </mat-card-title>
          </mat-card-header>
          <mat-card-content>
            <!-- 简历上传区域 -->
            <div class="upload-area">
              <div class="upload-zone" 
                   (click)="uploadResume()"
                   (dragover)="onDragOver($event)"
                   (dragleave)="onDragLeave($event)"
                   (drop)="onFileDrop($event)"
                   [class.drag-over]="isDragOver">
                <mat-icon class="upload-icon">cloud_upload</mat-icon>
                <p class="upload-title">点击上传简历或拖拽文件到此处</p>
                <p class="upload-hint">支持 PDF、DOC、DOCX 格式，最大 10MB</p>
                <div class="upload-actions">
                  <button mat-stroked-button color="primary">
                    <mat-icon>folder_open</mat-icon>
                    选择文件
                  </button>
                </div>
              </div>
            </div>
            
            <!-- 分析结果展示 -->
            @if (showAnalysisResults) {
              <div class="analysis-results">
                <!-- 岗位匹配维度标签 -->
                <div class="match-dimensions">
                  <h4>
                    <mat-icon>label</mat-icon>
                    岗位匹配维度
                  </h4>
                  <div class="dimension-tags">
                    @for (dimension of matchDimensions; track dimension.id) {
                      <mat-chip-set>
                        <mat-chip [class]="'match-level-' + dimension.level">
                          <mat-icon>{{dimension.icon}}</mat-icon>
                          {{dimension.name}}
                          <span class="match-score">{{dimension.score}}%</span>
                        </mat-chip>
                      </mat-chip-set>
                    }
                  </div>
                </div>

                <!-- 推荐结论及原因说明 -->
                <div class="recommendation-section">
                  <h4>
                    <mat-icon>psychology</mat-icon>
                    推荐结论
                  </h4>
                  <div class="recommendation-card" [class]="'recommendation-' + recommendation.level">
                    <div class="recommendation-header">
                      <mat-icon>{{recommendation.icon}}</mat-icon>
                      <span class="recommendation-title">{{recommendation.title}}</span>
                      <mat-chip [class]="'level-' + recommendation.level">{{recommendation.levelText}}</mat-chip>
                    </div>
                    <div class="recommendation-content">
                      <p class="recommendation-summary">{{recommendation.summary}}</p>
                      <div class="recommendation-reasons">
                        <h5>推荐原因：</h5>
                        <ul>
                          @for (reason of recommendation.reasons; track $index) {
                            <li>{{reason}}</li>
                          }
                        </ul>
                      </div>
                      <div class="recommendation-concerns" *ngIf="recommendation.concerns.length > 0">
                        <h5>需要关注：</h5>
                        <ul>
                          @for (concern of recommendation.concerns; track $index) {
                            <li>{{concern}}</li>
                          }
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 简历初筛信息列表 -->
                <div class="screening-info">
                  <h4>
                    <mat-icon>checklist</mat-icon>
                    简历初筛信息
                  </h4>
                  <div class="screening-list">
                    @for (item of screeningInfo; track item.id) {
                      <div class="screening-item" [class]="'status-' + item.status">
                        <div class="screening-icon">
                          <mat-icon>{{item.icon}}</mat-icon>
                        </div>
                        <div class="screening-content">
                          <div class="screening-title">{{item.title}}</div>
                          <div class="screening-detail">{{item.detail}}</div>
                        </div>
                        <div class="screening-status">
                          <mat-chip [class]="'status-' + item.status">{{item.statusText}}</mat-chip>
                        </div>
                      </div>
                    }
                  </div>
                </div>
              </div>
            }
          </mat-card-content>
        </mat-card>

        <!-- 招聘流程跟踪 -->
        <mat-card class="recruitment-stages">
          <mat-card-header>
            <mat-card-title>
              <mat-icon>timeline</mat-icon>
              招聘流程跟踪
            </mat-card-title>
            <div class="stage-actions">
              <button mat-icon-button (click)="refreshRecruitmentData()">
                <mat-icon>refresh</mat-icon>
              </button>
            </div>
          </mat-card-header>
          <mat-card-content>
            <div class="stages-timeline">
              @for (stage of recruitmentStages; track stage.id) {
                <div class="timeline-item" [class]="'status-' + stage.status" (click)="openStageDetails(stage)">
                  <div class="timeline-marker">
                    <mat-icon>{{stage.icon}}</mat-icon>
                  </div>
                  <div class="timeline-content">
                    <div class="stage-header">
                      <h5>{{stage.title}}</h5>
                      <mat-chip [class]="'status-' + stage.status">{{stage.statusText}}</mat-chip>
                    </div>
                    <div class="stage-stats">
                      <div class="stat-item">
                        <mat-icon>people</mat-icon>
                        <span>{{stage.candidateCount}}人</span>
                      </div>
                      <div class="stat-item">
                        <mat-icon>percent</mat-icon>
                        <span>通过率 {{stage.passRate}}%</span>
                      </div>
                    </div>
                    <div class="stage-details">
                      <div class="detail-row">
                        <span class="label">评估人：</span>
                        <span class="value">{{stage.evaluator || '待分配'}}</span>
                      </div>
                      <div class="detail-row">
                        <span class="label">最近更新：</span>
                        <span class="value">{{stage.lastUpdate | date:'MM-dd HH:mm'}}</span>
                      </div>
                      @if (stage.nextAction) {
                        <div class="detail-row next-action">
                          <mat-icon>arrow_forward</mat-icon>
                          <span>{{stage.nextAction}}</span>
                        </div>
                      }
                    </div>
                  </div>
                  <div class="timeline-connector" *ngIf="!$last"></div>
                </div>
              }
            </div>

            <!-- 试用期跟踪关联入口 -->
            <div class="probation-link-section">
              <mat-card class="probation-link-card">
                <mat-card-content>
                  <div class="link-header">
                    <mat-icon>link</mat-icon>
                    <h4>试用期跟踪</h4>
                  </div>
                  <p>已入职员工的试用期跟踪与绩效管理</p>
                  <div class="link-actions">
                    <button mat-raised-button color="primary" (click)="navigateToOnboarding()">
                      <mat-icon>person_add</mat-icon>
                      查看新人跟进
                    </button>
                    <button mat-stroked-button (click)="viewProbationReports()">
                      <mat-icon>assessment</mat-icon>
                      试用期报告
                    </button>
                  </div>
                </mat-card-content>
              </mat-card>
            </div>
          </mat-card-content>
        </mat-card>
      </div>
    </div>
  }

  <!-- 绩效统计与分析页面 -->
  @if (activeTab === 'performance') {
    <div class="performance-page">
      <div class="content-layout">
        <!-- 筛选控件 -->
        <mat-card class="filter-section ios-style">
          <mat-card-header>
            <mat-card-title>
              <mat-icon>tune</mat-icon>
              筛选条件
            </mat-card-title>
            <div class="filter-actions">
              <button mat-icon-button (click)="resetFilters()" matTooltip="重置筛选">
                <mat-icon>refresh</mat-icon>
              </button>
            </div>
          </mat-card-header>
          <mat-card-content>
            <div class="filter-controls ios-filters">
              <div class="filter-group">
                <label class="filter-label">部门</label>
                <mat-form-field appearance="outline" class="ios-select">
                  <mat-select [(value)]="selectedDepartment" (selectionChange)="onDepartmentChange($event)">
                    <mat-option value="">
                      <div class="option-content">
                        <mat-icon>business</mat-icon>
                        <span>全部部门</span>
                      </div>
                    </mat-option>
                    <mat-option value="design">
                      <div class="option-content">
                        <mat-icon>palette</mat-icon>
                        <span>设计部</span>
                      </div>
                    </mat-option>
                    <mat-option value="dev">
                      <div class="option-content">
                        <mat-icon>code</mat-icon>
                        <span>开发部</span>
                      </div>
                    </mat-option>
                    <mat-option value="product">
                      <div class="option-content">
                        <mat-icon>inventory</mat-icon>
                        <span>产品部</span>
                      </div>
                    </mat-option>
                    <mat-option value="marketing">
                      <div class="option-content">
                        <mat-icon>campaign</mat-icon>
                        <span>市场部</span>
                      </div>
                    </mat-option>
                  </mat-select>
                </mat-form-field>
              </div>
              
              <div class="filter-group">
                <label class="filter-label">职级</label>
                <mat-form-field appearance="outline" class="ios-select">
                  <mat-select [(value)]="selectedLevel" (selectionChange)="onLevelChange($event)">
                    <mat-option value="">
                      <div class="option-content">
                        <mat-icon>work</mat-icon>
                        <span>全部职级</span>
                      </div>
                    </mat-option>
                    <mat-option value="junior">
                      <div class="option-content">
                        <mat-icon>person</mat-icon>
                        <span>初级</span>
                      </div>
                    </mat-option>
                    <mat-option value="middle">
                      <div class="option-content">
                        <mat-icon>person_outline</mat-icon>
                        <span>中级</span>
                      </div>
                    </mat-option>
                    <mat-option value="senior">
                      <div class="option-content">
                        <mat-icon>supervisor_account</mat-icon>
                        <span>高级</span>
                      </div>
                    </mat-option>
                    <mat-option value="lead">
                      <div class="option-content">
                        <mat-icon>manage_accounts</mat-icon>
                        <span>主管</span>
                      </div>
                    </mat-option>
                  </mat-select>
                </mat-form-field>
              </div>
              
              <div class="filter-group">
                <label class="filter-label">入职时间</label>
                <mat-form-field appearance="outline" class="ios-select">
                  <mat-select [(value)]="selectedTimeRange" (selectionChange)="onTimeRangeChange($event)">
                    <mat-option value="month">
                      <div class="option-content">
                        <mat-icon>today</mat-icon>
                        <span>本月</span>
                      </div>
                    </mat-option>
                    <mat-option value="quarter">
                      <div class="option-content">
                        <mat-icon>date_range</mat-icon>
                        <span>本季度</span>
                      </div>
                    </mat-option>
                    <mat-option value="half-year">
                      <div class="option-content">
                        <mat-icon>event</mat-icon>
                        <span>半年内</span>
                      </div>
                    </mat-option>
                    <mat-option value="year">
                      <div class="option-content">
                        <mat-icon>calendar_today</mat-icon>
                        <span>本年度</span>
                      </div>
                    </mat-option>
                    <mat-option value="all">
                      <div class="option-content">
                        <mat-icon>all_inclusive</mat-icon>
                        <span>全部时间</span>
                      </div>
                    </mat-option>
                  </mat-select>
                </mat-form-field>
              </div>
              
              <div class="filter-actions-group">
                <button mat-raised-button color="primary" class="ios-button primary" (click)="applyFilters()" [disabled]="isFilterLoading">
                  @if (isFilterLoading) {
                    <div class="loading-spinner"></div>
                  } @else {
                    <mat-icon>search</mat-icon>
                  }
                  <span>{{ isFilterLoading ? '筛选中...' : '应用筛选' }}</span>
                </button>
                
                <button mat-stroked-button class="ios-button secondary" (click)="exportData()" [disabled]="isFilterLoading">
                  <mat-icon>download</mat-icon>
                  <span>导出数据</span>
                </button>
              </div>
            </div>
            
            <!-- 快速筛选标签 -->
            <div class="quick-filters">
              <span class="quick-filter-label">快速筛选：</span>
              <div class="quick-filter-chips">
                <mat-chip-set>
                  <mat-chip (click)="applyQuickFilter('high-performers')" [class.selected]="quickFilter === 'high-performers'">
                    <mat-icon>star</mat-icon>
                    高绩效员工
                  </mat-chip>
                  <mat-chip (click)="applyQuickFilter('new-employees')" [class.selected]="quickFilter === 'new-employees'">
                    <mat-icon>person_add</mat-icon>
                    新入职员工
                  </mat-chip>
                  <mat-chip (click)="applyQuickFilter('at-risk')" [class.selected]="quickFilter === 'at-risk'">
                    <mat-icon>warning</mat-icon>
                    风险员工
                  </mat-chip>
                  <mat-chip (click)="applyQuickFilter('promotion-ready')" [class.selected]="quickFilter === 'promotion-ready'">
                    <mat-icon>trending_up</mat-icon>
                    晋升候选
                  </mat-chip>
                </mat-chip-set>
              </div>
            </div>
          </mat-card-content>
        </mat-card>

        <!-- 绩效指标展示 -->
        <div class="performance-metrics-container">
          <div class="metrics-header">
            <h2>核心绩效指标</h2>
            <div class="metrics-actions">
              <button mat-icon-button class="refresh-btn" (click)="refreshMetrics()">
                <mat-icon>refresh</mat-icon>
              </button>
              <button mat-stroked-button class="export-btn" (click)="exportMetrics()">
                <mat-icon>file_download</mat-icon>
                导出报告
              </button>
            </div>
          </div>
          
          <div class="performance-metrics-grid">
            @for (metric of performanceMetrics; track metric.id) {
              <mat-card class="metric-card" [class]="metric.status">
                <mat-card-content>
                  <div class="metric-icon-wrapper">
                    <mat-icon [class]="metric.iconClass">{{ metric.icon }}</mat-icon>
                  </div>
                  
                  <div class="metric-content">
                    <div class="metric-header">
                      <h3>{{ metric.title }}</h3>
                      <span class="metric-period">{{ metric.period }}</span>
                    </div>
                    
                    <div class="metric-value-section">
                      <div class="metric-value">{{ metric.value }}</div>
                      <div class="metric-unit">{{ metric.unit }}</div>
                    </div>
                    
                    <div class="metric-trend" [class]="metric.trend.type">
                      <mat-icon>{{ metric.trend.icon }}</mat-icon>
                      <span>{{ metric.trend.value }}</span>
                      <span class="trend-label">{{ metric.trend.label }}</span>
                    </div>
                    
                    <div class="metric-details">
                      <div class="detail-item">
                        <span class="detail-label">目标值:</span>
                        <span class="detail-value">{{ metric.target }}</span>
                      </div>
                      <div class="detail-item">
                        <span class="detail-label">达成率:</span>
                        <span class="detail-value" [class]="metric.achievementClass">{{ metric.achievement }}</span>
                      </div>
                    </div>
                    
                    <div class="metric-progress">
                      <mat-progress-bar 
                        mode="determinate" 
                        [value]="metric.progressValue"
                        [class]="metric.progressClass">
                      </mat-progress-bar>
                    </div>
                  </div>
                  
                  <div class="metric-actions">
                    <button mat-icon-button class="detail-btn" (click)="viewMetricDetails(metric.id)">
                      <mat-icon>visibility</mat-icon>
                    </button>
                    <button mat-icon-button class="trend-btn" (click)="viewMetricTrend(metric.id)">
                      <mat-icon>show_chart</mat-icon>
                    </button>
                  </div>
                </mat-card-content>
              </mat-card>
            }
          </div>
        </div>

        <!-- 绩效对比表 -->
        <div class="performance-comparison-section">
          <mat-card class="comparison-card">
            <mat-card-header>
              <mat-card-title>
                <mat-icon>compare_arrows</mat-icon>
                绩效对比分析
              </mat-card-title>
              <div class="comparison-actions">
                <mat-button-toggle-group [(value)]="comparisonMode" (change)="onComparisonModeChange($event)">
                  <mat-button-toggle value="horizontal">
                    <mat-icon>view_column</mat-icon>
                    横向对比
                  </mat-button-toggle>
                  <mat-button-toggle value="vertical">
                    <mat-icon>view_agenda</mat-icon>
                    纵向对比
                  </mat-button-toggle>
                </mat-button-toggle-group>
                
                <button mat-stroked-button class="add-comparison-btn" (click)="addComparisonItem()">
                  <mat-icon>add</mat-icon>
                  添加对比项
                </button>
              </div>
            </mat-card-header>
            
            <mat-card-content>
              <!-- 对比选择器 -->
              <div class="comparison-selectors">
                <div class="selector-group">
                  <label>对比维度:</label>
                  <mat-form-field appearance="outline">
                    <mat-select [(value)]="selectedComparisonDimension" (selectionChange)="updateComparison()">
                      <mat-option value="department">部门对比</mat-option>
                      <mat-option value="period">时期对比</mat-option>
                      <mat-option value="individual">个人对比</mat-option>
                      <mat-option value="project">项目对比</mat-option>
                    </mat-select>
                  </mat-form-field>
                </div>
                
                <div class="selector-group">
                  <label>对比指标:</label>
                  <mat-form-field appearance="outline">
                    <mat-select [(value)]="selectedComparisonMetric" multiple (selectionChange)="updateComparison()">
                      <mat-option value="completion">完成率</mat-option>
                      <mat-option value="quality">质量评分</mat-option>
                      <mat-option value="efficiency">效率指数</mat-option>
                      <mat-option value="satisfaction">满意度</mat-option>
                      <mat-option value="innovation">创新度</mat-option>
                    </mat-select>
                  </mat-form-field>
                </div>
              </div>

              <!-- 横向对比表格 -->
              @if (comparisonMode === 'horizontal') {
                <div class="horizontal-comparison">
                  <table mat-table [dataSource]="horizontalComparisonData" class="comparison-table">
                    <!-- 名称列 -->
                    <ng-container matColumnDef="name">
                      <th mat-header-cell *matHeaderCellDef>对比项目</th>
                      <td mat-cell *matCellDef="let element">
                        <div class="comparison-item-name">
                          <mat-icon [class]="element.iconClass">{{ element.icon }}</mat-icon>
                          <span>{{ element.name }}</span>
                        </div>
                      </td>
                    </ng-container>

                    <!-- 动态指标列 -->
                    @for (metric of selectedComparisonMetric; track metric) {
                      <ng-container [matColumnDef]="metric">
                        <th mat-header-cell *matHeaderCellDef>{{ getMetricDisplayName(metric) }}</th>
                        <td mat-cell *matCellDef="let element">
                          <div class="metric-cell">
                            <span class="metric-value" [class]="getMetricClass(element[metric])">
                              {{ element[metric] }}
                            </span>
                            <div class="metric-bar">
                              <div class="bar-fill" [style.width.%]="getMetricPercentage(element[metric], metric)"></div>
                            </div>
                          </div>
                        </td>
                      </ng-container>
                    }

                    <!-- 操作列 -->
                    <ng-container matColumnDef="actions">
                      <th mat-header-cell *matHeaderCellDef>操作</th>
                      <td mat-cell *matCellDef="let element">
                        <button mat-icon-button (click)="viewComparisonDetails(element.id)">
                          <mat-icon>visibility</mat-icon>
                        </button>
                        <button mat-icon-button (click)="removeComparisonItem(element.id)">
                          <mat-icon>delete</mat-icon>
                        </button>
                      </td>
                    </ng-container>

                    <tr mat-header-row *matHeaderRowDef="horizontalDisplayedColumns"></tr>
                    <tr mat-row *matRowDef="let row; columns: horizontalDisplayedColumns;"></tr>
                  </table>
                </div>
              }

              <!-- 纵向对比卡片 -->
              @if (comparisonMode === 'vertical') {
                <div class="vertical-comparison">
                  @for (item of verticalComparisonData; track item.id) {
                    <mat-card class="comparison-item-card">
                      <mat-card-header>
                        <div class="comparison-item-header">
                          <mat-icon [class]="item.iconClass">{{ item.icon }}</mat-icon>
                          <div class="item-info">
                            <h3>{{ item.name }}</h3>
                            <span class="item-category">{{ item.category }}</span>
                          </div>
                        </div>
                        <div class="item-actions">
                          <button mat-icon-button (click)="viewComparisonDetails(item.id)">
                            <mat-icon>visibility</mat-icon>
                          </button>
                          <button mat-icon-button (click)="removeComparisonItem(item.id)">
                            <mat-icon>delete</mat-icon>
                          </button>
                        </div>
                      </mat-card-header>
                      
                      <mat-card-content>
                        <div class="metrics-grid">
                          @for (metric of selectedComparisonMetric; track metric) {
                            <div class="metric-item">
                              <div class="metric-label">{{ getMetricDisplayName(metric) }}</div>
                              <div class="metric-value-container">
                                <span class="metric-value" [class]="getMetricClass(item[metric])">
                                  {{ item[metric] }}
                                </span>
                                <mat-progress-bar 
                                  mode="determinate" 
                                  [value]="getMetricPercentage(item[metric], metric)"
                                  [class]="getProgressBarClass(item[metric])">
                                </mat-progress-bar>
                              </div>
                            </div>
                          }
                        </div>
                        
                        <div class="comparison-summary">
                          <div class="summary-item">
                            <span class="summary-label">综合评分:</span>
                            <span class="summary-value" [class]="getOverallScoreClass(item.overallScore)">
                              {{ item.overallScore }}分
                            </span>
                          </div>
                          <div class="summary-item">
                            <span class="summary-label">排名:</span>
                            <span class="summary-value rank">
                              第{{ item.rank }}名
                            </span>
                          </div>
                        </div>
                      </mat-card-content>
                    </mat-card>
                  }
                </div>
              }

              <!-- 对比图表 -->
              <div class="comparison-chart-section">
                <div class="chart-header">
                  <h3>对比趋势图</h3>
                  <mat-button-toggle-group [(value)]="chartType">
                    <mat-button-toggle value="bar">
                      <mat-icon>bar_chart</mat-icon>
                    </mat-button-toggle>
                    <mat-button-toggle value="line">
                      <mat-icon>show_chart</mat-icon>
                    </mat-button-toggle>
                    <mat-button-toggle value="radar">
                      <mat-icon>radar</mat-icon>
                    </mat-button-toggle>
                  </mat-button-toggle-group>
                </div>
                <div class="chart-container">
                  <canvas #comparisonChart width="800" height="400"></canvas>
                </div>
              </div>
            </mat-card-content>
          </mat-card>
        </div>
      </div>
    </div>
  }

  <!-- 新人跟进管理页面 -->
  @if (activeTab === 'onboarding') {
    <div class="onboarding-page">
      <div class="content-layout">
        <!-- 新人列表 -->
        <div class="newbie-list-section">
          <mat-card class="newbie-card">
            <mat-card-header>
              <mat-card-title>
                <mat-icon>group_add</mat-icon>
                新人列表
              </mat-card-title>
            </mat-card-header>
            <mat-card-content>
              @for (newbie of newbieList; track newbie.id) {
                <div class="newbie-item">
                  <div class="newbie-avatar">
                    <mat-icon>person</mat-icon>
                  </div>
                  <div class="newbie-info">
                    <h4 class="newbie-name">{{newbie.name}}</h4>
                    <p class="newbie-position">{{newbie.position}}</p>
                    <p class="newbie-date">入职日期：{{newbie.joinDate}}</p>
                  </div>
                  <div class="newbie-progress">
                    <mat-progress-bar mode="determinate" [value]="newbie.progress"></mat-progress-bar>
                    <span class="progress-text">{{newbie.progress}}%</span>
                  </div>
                </div>
              }
            </mat-card-content>
          </mat-card>
        </div>

        <!-- 跟进检查点 -->
        <div class="checkpoint-section">
          <mat-card class="checkpoint-card">
            <mat-card-header>
              <mat-card-title>
                <mat-icon>checklist</mat-icon>
                跟进检查点
              </mat-card-title>
            </mat-card-header>
            <mat-card-content>
              @for (checkpoint of onboardingCheckpoints; track checkpoint.id) {
                <div class="checkpoint-item" [attr.data-checkpoint-id]="checkpoint.id">
                  <mat-checkbox
                    [checked]="checkpoint.completed"
                    (change)="onCheckpointChange(checkpoint, $event)">
                  </mat-checkbox>
                  <div class="checkpoint-content">
                    <h4 class="checkpoint-title">{{checkpoint.title}}</h4>
                    <p class="checkpoint-description">{{checkpoint.description}}</p>
                    <div class="checkpoint-timeline">
                      <mat-icon>schedule</mat-icon>
                      <span>{{checkpoint.dueDate | date:'yyyy-MM-dd'}}</span>
                    </div>
                  </div>
                </div>
              }
            </mat-card-content>
          </mat-card>
        </div>
      </div>
    </div>
  }
</div>