<div class="skill-radar-container">
  <div class="skill-radar-header">
    <h3>个人能力维度雷达图</h3>
    <div class="view-toggle">
      <button class="btn-toggle" [class.active]="viewMode === 'self'" (click)="switchViewMode('self')">个人视图</button>
      <button class="btn-toggle" [class.active]="viewMode === 'comparison'" (click)="switchViewMode('comparison')">团队对比</button>
    </div>
  </div>
  
  <div class="skill-radar-content">
    <div class="radar-chart-wrapper">
      <div #radarChart style="width: 100%; height: 400px;"></div>
    </div>
    
    <div class="skill-legend">
      <div class="legend-item" *ngIf="viewMode === 'comparison'">
        <div class="legend-color" style="background-color: rgba(255, 99, 132, 0.6)"></div>
        <span>个人能力</span>
      </div>
      <div class="legend-item" *ngIf="viewMode === 'comparison'">
        <div class="legend-color" style="background-color: rgba(54, 162, 235, 0.6)"></div>
        <span>团队平均</span>
      </div>
    </div>
  </div>
  
  <div class="skill-analysis">
    <h4>能力分析</h4>
    <div class="analysis-items">
      <div class="analysis-item" *ngFor="let item of skillAnalysis">
        <div class="analysis-name">{{ item.name }}</div>
        <div class="analysis-value">{{ item.score }}/100</div>
        <div class="analysis-status">{{ item.status }}</div>
      </div>
    </div>
  </div>
  
  <div class="improvement-suggestions">
    <h4>提升建议</h4>
    <div class="suggestion-list">
      <div class="suggestion-item" *ngFor="let suggestion of improvementSuggestions">
        <div class="suggestion-content">{{ suggestion }}</div>
      </div>
    </div>
  </div>
</div>