intelligent-interview/interview-web/src/modules/interview/mobile/page-question-bank/page-question-bank.html

<div class="question-bank-container">
  <!-- 分类列表视图 -->
  <div class="categories-view" *ngIf="!selectedCategory && !showAnalysis">
    <div class="search-box">
      <input 
        type="text" 
        [(ngModel)]="searchTerm" 
        placeholder="搜索面试问题...">
      <fa-icon [icon]="icons.search"></fa-icon>
    </div>
    
    <div class="categories-list">
      <div 
        class="category-card" 
        *ngFor="let category of filteredCategories"
        (click)="selectCategory(category)">
        <div class="category-header">
          <fa-icon [icon]="icons.book"></fa-icon>
          <h3>{{category.name}}</h3>
        </div>
        <div class="question-count">
          {{category.questions.length}}个问题
        </div>
        <fa-icon [icon]="icons.arrowRight"></fa-icon>
      </div>
    </div>
  </div>
  
  <!-- 问题列表视图 -->
  <div class="questions-view" *ngIf="selectedCategory && !showAnalysis">
    <div class="back-btn" (click)="backToCategories()">
      <fa-icon [icon]="icons.arrowRight" class="back-icon"></fa-icon>
      返回分类
    </div>
    
    <h2>{{selectedCategory.name}}问题</h2>
    
    <div class="questions-list">
      <div 
        class="question-item" 
        *ngFor="let question of selectedCategory.questions"
        (click)="currentQuestion = question">
        {{question}}
      </div>
    </div>
  </div>
  
  <!-- 问题回答视图 -->
  <div class="answer-view" *ngIf="currentQuestion && !showAnalysis">
    <div class="back-btn" (click)="currentQuestion = ''">
      <fa-icon [icon]="icons.arrowRight" class="back-icon"></fa-icon>
      返回问题列表
    </div>
    
    <div class="question-card">
      <h3>问题:</h3>
      <p>{{currentQuestion}}</p>
    </div>
    
    <div class="answer-section">
      <h3>您的回答:</h3>
      <textarea [(ngModel)]="userAnswer" placeholder="输入或录制您的回答..."></textarea>
      
      <div class="voice-controls">
        <button 
          class="voice-btn" 
          (mousedown)="startRecording()" 
          (mouseup)="isRecording = false"
          [class.active]="isRecording">
          <fa-icon [icon]="icons.mic"></fa-icon>
          按住录音
        </button>
        
        <button class="play-btn" (click)="speakQuestion()">
          <fa-icon [icon]="icons.play"></fa-icon>
          播放问题
        </button>
      </div>
      
      <button class="submit-btn" (click)="submitAnswer()">
        <fa-icon [icon]="icons.check"></fa-icon>
        提交分析
      </button>
    </div>
  </div>
  
  <!-- 分析报告视图 -->
  <div class="analysis-view" *ngIf="showAnalysis">
    <div class="back-btn" (click)="showAnalysis = false">
      <fa-icon [icon]="icons.arrowRight" class="back-icon"></fa-icon>
      返回
    </div>
    
    <h2>回答分析报告</h2>
    
    <div class="analysis-card">
      <div class="question-section">
        <h3>问题:</h3>
        <p>{{analysisResult.question}}</p>
      </div>
      
      <div class="answer-section">
        <h3>您的回答:</h3>
        <p>{{analysisResult.answer}}</p>
      </div>
      
      <div class="score-section">
        <h3>评估分数:</h3>
        <div class="score-metrics">
          <div class="metric">
            <div class="metric-name">相关性</div>
            <div class="metric-bar">
              <div 
                class="metric-fill" 
                [style.width.%]="analysisResult.scores.relevance">
                {{analysisResult.scores.relevance}}%
              </div>
            </div>
          </div>
          
          <div class="metric">
            <div class="metric-name">清晰度</div>
            <div class="metric-bar">
              <div 
                class="metric-fill" 
                [style.width.%]="analysisResult.scores.clarity">
                {{analysisResult.scores.clarity}}%
              </div>
            </div>
          </div>
          
          <div class="metric">
            <div class="metric-name">深度</div>
            <div class="metric-bar">
              <div 
                class="metric-fill" 
                [style.width.%]="analysisResult.scores.depth">
                {{analysisResult.scores.depth}}%
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="feedback-section">
        <h3>反馈建议:</h3>
        <p>{{analysisResult.feedback}}</p>
        
        <div class="suggestions">
          <h4>改进建议:</h4>
          <ul>
            <li *ngFor="let suggestion of analysisResult.suggestions">{{suggestion}}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>