xiaoshu-app/projects/xiaoshu-mobile/src/app/features/appointment/lesson-report.component.html

<section class="lesson-report" [attr.aria-busy]="loading()">
  @if (error()) { <div class="load-error" role="alert"><p>{{ error() }}</p><button type="button" (click)="load()" [disabled]="loading()">重新加载</button></div> }
  @if (report(); as r) {
    <header class="report-hero">
      <div class="hero-top"><span>本次课堂报告</span><button type="button" aria-label="刷新学习报告" (click)="load()" [disabled]="loading()"><lucide-icon [img]="icons.RefreshCw" [size]="18" /></button></div>
      <h1>{{ r.order['kcmc'] || r.order['yykcmc'] || '课程学习报告' }}</h1>
      <p>{{ r.order['HoneyName'] || '学员' }}<span aria-hidden="true"> · </span>{{ dateLabel(r.order['yysj']) }}</p>
      @if (r.order['cancelled']) { <span class="status-badge">此预约已取消</span> }
      @else { <span class="status-badge">{{ r.feedback ? '已结课' : '反馈待提交' }}</span> }
    </header>
    <div class="learning-stats" aria-label="本次学习统计">
      <div><strong>{{ count('learned') }}</strong><span>学习单词</span></div>
      <div><strong>{{ count('ygg') }}</strong><span>已掌握</span></div>
      <div><strong>{{ r.antiForget.completed }}<small> / {{ r.antiForget.total }}</small></strong><span>抗遗忘完成</span></div>
    </div>
    <section class="report-card">
      <header><h2><lucide-icon [img]="icons.ClipboardList" [size]="19" aria-hidden="true" />完课反馈</h2>
        @if ($any(r.order['allowedActions'])?.includes('editFeedback')) { <a class="edit-link" routerLink="/pages/shop/get_order" [queryParams]="{id:orderId,editReport:1}">修改报告</a> }
      </header>
      @if (r.feedback; as f) { <app-lesson-feedback [feedback]="f" /> }
      @else { <p class="empty-copy">老师尚未提交反馈，提交后将在这里展示。</p> }
    </section>
    <section class="report-card">
      <header><h2><lucide-icon [img]="icons.BookOpen" [size]="19" aria-hidden="true" />学习记录</h2><span>{{ r.records.length }} 条记录</span></header>
      <div class="study-records">
        @for (item of r.records; track $index) {
          <article><time>{{ dateLabel(item['dqrq']) }}</time><p>{{ item['con'] || '单词学习' }}</p><div><span>已学 <b>{{ item['learned'] || 0 }}</b> 词</span><span>已掌握 <b>{{ item['ygg'] || 0 }}</b> 词</span><span>待加强 <b>{{ item['djq'] || 0 }}</b> 词</span></div></article>
        } @empty { <p class="empty-copy">暂无本次课程的单词学习记录</p> }
      </div>
    </section>
    <section class="report-card">
      <header><h2><lucide-icon [img]="icons.Star" [size]="19" aria-hidden="true" />学生评价</h2></header>
      @if (r.order['studentReview']; as review) { <p class="rating">{{ $any(review).score }}<small> / 5 分</small></p><p class="review-comment">{{ $any(review).comment || '学员未填写文字评价' }}</p> }
      @else { <p class="empty-copy">等待学员评价本次课程</p> }
    </section>
    <section class="report-card">
      <header><h2><lucide-icon [img]="icons.BrainCircuit" [size]="19" aria-hidden="true" />抗遗忘计划</h2><span>{{ reviewProgress() }}%</span></header>
      <div class="review-track" role="progressbar" aria-label="抗遗忘计划完成进度" [attr.aria-valuenow]="reviewProgress()" aria-valuemin="0" aria-valuemax="100"><span [style.width.%]="reviewProgress()"></span></div>
      <p class="empty-copy">{{ r.antiForget.total ? '已完成 ' + r.antiForget.completed + ' 项，共 ' + r.antiForget.total + ' 项复习任务' : '本次课程暂无抗遗忘任务' }}</p>
    </section>
    <p class="report-updated">数据更新于 {{ dateLabel(r.refreshedAt) }}</p>
  } @else if (loading()) { <div class="loading-state" role="status">正在整理本次学习报告…</div> }
  <footer><a routerLink="/pages/his/his">查看学习记录</a></footer>
</section>