Saas-voc/src/modules/voc-insight/topic-explorer/topic-detail.component.html

<app-page-header
  *ngIf="!isEmbedded"
  [title]="headerTitle"
  [description]="topic?.description || ''"
  backLabel="返回主题探索"
  [backRoute]="backRoute"
  [crumbs]="crumbs">
</app-page-header>

<section class="topic-detail" *ngIf="topic as item; else detailState">
  <div class="entity-layout" [class.is-embedded]="isEmbedded">
    <div class="entity-main">
  <header class="detail-header" *ngIf="isEmbedded">
    <div>
      <div class="detail-title-row">
        <h2>{{ item.label }}</h2>
        <span class="availability-status" [class.limited]="item.availability === 'limited'">{{ item.availabilityLabel }}</span>
      </div>
      <p>{{ item.description }}</p>
    </div>
    <button class="icon-button" type="button" title="关闭详情" aria-label="关闭详情" (click)="closeDetail()">
      <lucide-icon name="x" [size]="16"></lucide-icon>
    </button>
  </header>

  <div class="detail-metrics">
    <div><span>证据</span><strong>{{ item.evidenceCount }}</strong><small>条原始评价</small></div>
    <div><span>影响商品</span><strong>{{ item.productCount }}</strong><small>去重商品</small></div>
    <div><span>有效正文占比</span><strong>{{ item.share | percent:'1.0-1' }}</strong><small>当前来源范围</small></div>
    <div><span>置信等级</span><strong class="text-value">{{ item.confidenceLabel }}</strong><small>{{ item.availabilityReason }}</small></div>
  </div>

  <section class="detail-section trend-section">
    <div class="section-heading">
      <div><h3>主题趋势</h3><p>{{ trendSummary(item) }}</p></div>
      <span>{{ item.datedEvidenceCount }} / {{ item.evidenceCount }} 条有日期</span>
    </div>
    <div class="trend-chart" *ngIf="item.trend.length; else noTrend">
      <div class="trend-column" *ngFor="let point of item.trend; trackBy: trackTrend" [title]="point.date + ' · ' + point.count + ' 条'">
        <span>{{ point.count }}</span>
        <div class="bar-track"><i [style.height.%]="trendBarHeight(point)"></i></div>
        <small>{{ point.label }}</small>
      </div>
    </div>
    <ng-template #noTrend>
      <div class="inline-empty">原始评价没有有效日期，趋势保持不可用。</div>
    </ng-template>
  </section>

  <section class="detail-section">
    <div class="section-heading">
      <div><h3>影响商品</h3><p>按同主题证据数量排序</p></div>
      <span>{{ item.productCount }} 个</span>
    </div>
    <div class="product-list" *ngIf="item.products.length; else noProducts">
      <div class="product-row" *ngFor="let product of item.products | slice:0:6">
        <span class="product-image">
          <img *ngIf="product.imageUrl" [src]="product.imageUrl" [alt]="product.title">
          <lucide-icon *ngIf="!product.imageUrl" name="package" [size]="17"></lucide-icon>
        </span>
        <div><strong>{{ product.title }}</strong><span>{{ product.brand || product.productId }} · {{ productRoleLabel(product.role) }}</span></div>
        <b>{{ product.evidenceCount }} 条</b>
      </div>
    </div>
    <ng-template #noProducts><div class="inline-empty">当前证据尚未匹配到商品主数据。</div></ng-template>
  </section>

  <section class="detail-section evidence-section">
    <div class="section-heading">
      <div><h3>原始证据</h3><p>点击评价进入反馈收件箱继续审阅</p></div>
      <button type="button" class="text-button" [disabled]="!item.evidence.length" (click)="openAllEvidence()">
        全部证据 <lucide-icon name="arrow-up-right" [size]="14"></lucide-icon>
      </button>
    </div>
    <div class="evidence-list" *ngIf="item.evidence.length; else noEvidence">
      <button class="evidence-row" type="button" *ngFor="let evidence of item.evidence | slice:0:8; trackBy: trackEvidence"
        (click)="openEvidence(evidence)">
        <div class="evidence-meta">
          <span [class]="'sentiment-' + evidence.sentiment">{{ sentimentLabel(evidence) }}</span>
          <span>{{ evidence.rating > 0 ? evidence.rating + ' 星' : '无星级' }}</span>
          <span>{{ evidence.sourceLabel }}</span>
          <time>{{ evidence.dateLabel }}</time>
        </div>
        <p>{{ evidence.content }}</p>
        <div class="evidence-footer"><span>{{ evidence.productTitle }}</span><lucide-icon name="chevron-right" [size]="15"></lucide-icon></div>
      </button>
    </div>
    <ng-template #noEvidence><div class="inline-empty">当前主题没有可跳转的原始评价证据。</div></ng-template>
  </section>
    </div>

    <aside class="topic-properties">
      <h3>属性</h3>
      <app-entity-property-list [items]="propertyItems"></app-entity-property-list>
    </aside>
  </div>
</section>

<ng-template #detailState>
  <section class="detail-state">
    <span class="spinner" *ngIf="loading"></span>
    <strong>{{ loading ? '正在加载主题详情' : errorMessage ? '详情加载失败' : '未找到主题' }}</strong>
    <p>{{ errorMessage || (!loading ? '该主题不在当前真实数据范围内。' : '') }}</p>
  </section>
</ng-template>